/* ==========================================================================
   UGV DESIGN SYSTEM CORE — utopiagv.com
   The studio stage: dark floor, pools of light, one On-Air frame per screen.
   Loads LAST. Everything derives from these tokens (docs/redesign/DESIGN-BRIEF.md).
   ========================================================================== */

:root {
  /* palette */
  --ugv-magenta: #cc00cc;
  --ugv-magenta-deep: #a300a3;
  --ugv-pink: #ff2ece;   /* gradient start — reserved */
  --ugv-violet: #7b5cff; /* gradient end — reserved */
  --ugv-ink: #0f0f0f;
  --ugv-graphite: #313434;
  --ugv-graphite-raised: #3c4040;
  /* Ash is the secondary text on dark. #8f999a cleared AA on Ink (6.56:1) but only
     reached 4.30:1 on Graphite cards, so 15 elements on /life failed AA. Nudged up
     one step: 4.85:1 on Graphite, 7.40:1 on Ink, same grey-green character. */
  --ugv-ash: #98a3a4;
  --ugv-slate: #544e54;
  --ugv-paper: #faf7fa;
  --ugv-white: #ffffff;

  --ugv-grad: linear-gradient(90deg, var(--ugv-pink), var(--ugv-violet));

  /* type */
  --ugv-display: "Poppins", sans-serif;
  --ugv-voice: "Libre Baskerville", Georgia, serif;
  --ugv-body: "Roboto", -apple-system, "Segoe UI", sans-serif;
  /* Navigation voice. Owner compared six faces and chose to stay on Poppins,
     carried at 600 rather than the 500 the bar used before -- that is the
     weight he picked from. One token, so swapping it later is one line. */
  --ugv-nav: "Poppins", sans-serif;

  --ugv-h1: clamp(2.25rem, 5.2vw, 3.5rem);   /* 36–56 */
  --ugv-h2: clamp(1.75rem, 3.6vw, 2.5rem);   /* 28–40 */
  --ugv-h3: clamp(1.25rem, 2.2vw, 1.5rem);   /* 20–24 */
  --ugv-lede: clamp(1.0625rem, 1.6vw, 1.25rem);

  /* rhythm */
  --ugv-section: clamp(4rem, 9vw, 8rem);
  --ugv-gap: clamp(1.5rem, 3vw, 2.5rem);
  --ugv-radius: 16px;
  --ugv-radius-sm: 8px;
  --ugv-hairline: rgba(255, 255, 255, 0.08);
  --ugv-hairline-dark: rgba(15, 15, 15, 0.1);

  /* contextual (dark default; .ugv-paper flips them) */
  --ugv-surface: var(--ugv-ink);
  --ugv-text: var(--ugv-white);
  --ugv-text-2: var(--ugv-ash);
  --ugv-line: var(--ugv-hairline);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
/* Legacy style.css sets `body{height:100%}` and `.page-header{height:100%}`, which
   collapsed the body box to one viewport and made every inner page open with a
   full-screen photo that later content appeared to overlap. Height must be
   content-driven; only the homepage hero (header.header) stays full-screen. */
html {
  height: auto;
  /* The fixed full-width chrome (.navbar, .navigation-menu, .transition-overlay)
     is `width:100%` against the initial containing block, which INCLUDES the
     vertical scrollbar gutter — so at 360px it measured 373px and produced a
     horizontal scrollbar. Clipping at the root removes it; `clip` (not `hidden`)
     keeps position:sticky working and leaves nested scrollers alone. */
  overflow-x: clip;
}

body {
  height: auto;
  min-height: 100%;
  background-color: var(--ugv-ink);
  font-family: var(--ugv-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ugv-text);
}

/* Dark-first canvas. Legacy set `main{background:#fff}`, so any inherited-white
   text landed on white. Light sections now opt in explicitly via .ugv-paper. */
main { background: var(--ugv-ink); }

/* Legacy relied on `main{overflow-x:hidden}` to swallow Bootstrap row overhang,
   but several pages have no <main>, so it leaked a document scrollbar at 360px.
   `clip` contains it without creating a scroll container (unlike `hidden`,
   which would break position:sticky). */
body { overflow-x: clip; }

::selection { background: var(--ugv-magenta); color: #fff; }

:focus-visible {
  outline: 2px solid var(--ugv-magenta);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Type system
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ugv-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: none;
  color: var(--ugv-text);
}

h1, .ugv-h1 { font-size: var(--ugv-h1); font-weight: 700; }
h2, .ugv-h2 { font-size: var(--ugv-h2); }
h3, .ugv-h3 { font-size: var(--ugv-h3); }

/* the emphasized word — gradient text fill, brand voice */
.ugv-word {
  font-style: normal;
  background: var(--ugv-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* editorial voice — eyebrows and pull-quotes only */
.ugv-eyebrow {
  display: block;
  font-family: var(--ugv-voice);
  font-style: italic;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ugv-text-2);
  margin-bottom: 0.875rem;
}

/* Pull-quote. Legacy `blockquote{background:#f9f9f9}` + `blockquote p{color:#ccc}`
   produced a 1.05 contrast ratio; the surface and colour are both owned here now. */
.ugv-quote,
blockquote.ugv-quote {
  font-family: var(--ugv-voice);
  font-style: italic;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.55;
  color: var(--ugv-text);
  background: transparent;
  border-left: 2px solid var(--ugv-magenta);
  border-radius: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 0;
  max-width: 46ch;
  text-align: left;
  text-align-last: auto;
}
.ugv-quote p,
blockquote.ugv-quote p {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  text-align: left;
  margin: 0;
}

.ugv-lede {
  font-size: var(--ugv-lede);
  line-height: 1.6;
  color: var(--ugv-text-2);
  max-width: 68ch;
}

.ugv-measure { max-width: 68ch; }
.ugv-measure p { color: var(--ugv-text-2); }
.ugv-measure p + p { margin-top: 1em; }

/* small caps utility label (chips, meta) */
.ugv-label {
  font-family: var(--ugv-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ugv-text-2);
}

/* --------------------------------------------------------------------------
   Section rhythm + surfaces
   -------------------------------------------------------------------------- */
.ugv-section {
  padding-block: var(--ugv-section);
  background-color: var(--ugv-surface);
  position: relative;
}

.ugv-section--hairline { border-top: 1px solid var(--ugv-line); }

.ugv-paper {
  --ugv-surface: var(--ugv-paper);
  --ugv-text: #1c161c;
  --ugv-text-2: var(--ugv-slate);
  --ugv-line: var(--ugv-hairline-dark);
  /* Redefining --ugv-text is not enough: `color` was already computed on body
     from the dark-surface value, and descendants inherit that COMPUTED colour,
     not the var() reference. Paper must set colour on itself or its whole
     subtree stays white-on-light. */
  color: var(--ugv-text);
}

.ugv-paper h1, .ugv-paper h2, .ugv-paper h3,
.ugv-paper h4, .ugv-paper h5, .ugv-paper h6 { color: var(--ugv-text); }

.ugv-section-head { margin-bottom: calc(var(--ugv-gap) * 1.4); }
.ugv-section-head .ugv-lede { margin-top: 0.875rem; }

/* --------------------------------------------------------------------------
   Buttons — exactly two
   -------------------------------------------------------------------------- */
.ugv-btn,
.ugv-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ugv-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  padding: 0.875rem 1.75rem;
  border-radius: var(--ugv-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}

.ugv-btn {
  background-color: var(--ugv-magenta);
  color: #fff;
}
.ugv-btn:hover,
.ugv-btn:focus-visible {
  background-color: var(--ugv-magenta-deep);
  color: #fff;
  transform: translateY(-1px);
}

.ugv-btn--ghost {
  background-color: transparent;
  border-color: var(--ugv-ash);
  color: var(--ugv-text);
}
.ugv-btn--ghost:hover,
.ugv-btn--ghost:focus-visible {
  border-color: var(--ugv-magenta);
  color: var(--ugv-magenta);
}

.ugv-btn .ugv-btn-arrow { transition: transform 0.18s ease; }
.ugv-btn:hover .ugv-btn-arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.ugv-field { margin-bottom: 1.25rem; }

.ugv-field label {
  display: block;
  font-family: var(--ugv-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ugv-text);
  margin-bottom: 0.4rem;
}

.ugv-field input[type="text"],
.ugv-field input[type="email"],
.ugv-field input[type="tel"],
.ugv-field input[type="file"],
.ugv-field select,
.ugv-field textarea,
.ugv-input {
  display: block;
  width: 100%;
  font-family: var(--ugv-body);
  font-size: 1rem;
  color: var(--ugv-text);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ugv-line);
  border-radius: var(--ugv-radius-sm);
  padding: 0.75rem 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ugv-paper .ugv-field input[type="text"],
.ugv-paper .ugv-field input[type="email"],
.ugv-paper .ugv-field input[type="tel"],
.ugv-paper .ugv-field input[type="file"],
.ugv-paper .ugv-field select,
.ugv-paper .ugv-field textarea,
.ugv-paper .ugv-input {
  background-color: #fff;
  color: #1c161c;
}

.ugv-field input:focus,
.ugv-field select:focus,
.ugv-field textarea:focus,
.ugv-input:focus {
  outline: none;
  border-color: var(--ugv-magenta);
  box-shadow: 0 0 0 3px rgba(204, 0, 204, 0.18);
}

.ugv-field input::placeholder,
.ugv-field textarea::placeholder { color: var(--ugv-text-2); opacity: 0.7; }

.ugv-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--ugv-text-2);
  margin: 1rem 0 1.25rem;
}
.ugv-check input[type="checkbox"] {
  appearance: none;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  border: 1.5px solid var(--ugv-ash);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.ugv-check input[type="checkbox"]::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  transform: scale(0);
  transition: transform 0.12s ease;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background-color: #fff;
}
.ugv-check input[type="checkbox"]:checked {
  background-color: var(--ugv-magenta);
  border-color: var(--ugv-magenta);
}
.ugv-check input[type="checkbox"]:checked::before { transform: scale(1); }

.ugv-error { color: #ff5a8a; font-size: 0.875rem; margin-top: 0.35rem; }
.ugv-success {
  background: rgba(204, 0, 204, 0.08);
  border: 1px solid rgba(204, 0, 204, 0.35);
  color: var(--ugv-text);
  border-radius: var(--ugv-radius-sm);
  padding: 0.875rem 1.125rem;
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   THE SIGNATURE — On Air frame. Once per screen.
   The chip names why the thing is framed.
   -------------------------------------------------------------------------- */
.ugv-onair {
  position: relative;
  border-radius: calc(var(--ugv-radius) + 2px);
  padding: 2px;
  background: var(--ugv-grad);
}

.ugv-onair__body {
  background: var(--ugv-ink);
  border-radius: var(--ugv-radius);
  overflow: hidden;
}

.ugv-onair__chip {
  position: absolute;
  top: -0.8125rem;
  left: 1.375rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ugv-ink);
  border: 1px solid var(--ugv-hairline);
  border-radius: 999px;
  padding: 0.3125rem 0.875rem;
  font-family: var(--ugv-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.ugv-onair__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ugv-grad);
}

@media (prefers-reduced-motion: no-preference) {
  .ugv-onair__chip::before { animation: ugv-blink 2.4s ease-in-out infinite; }
  @keyframes ugv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
}

/* --------------------------------------------------------------------------
   Media / video poster treatment (kills the burned-in-caption look)
   -------------------------------------------------------------------------- */
.ugv-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: inherit;
}
.ugv-video > img,
.ugv-video > iframe,
.ugv-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.ugv-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,0) 40%, rgba(15,15,15,0.72) 100%);
  pointer-events: none;
}
.ugv-video.is-playing::after { display: none; }

.ugv-play {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: auto;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  border: 0;
  background: rgba(15, 15, 15, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 1.5rem;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.ugv-play:hover { background: var(--ugv-magenta); transform: scale(1.06); }
.ugv-play i { margin-left: 3px; }

.ugv-video__meta {
  position: absolute;
  z-index: 2;
  left: 1.125rem;
  right: 1.125rem;
  bottom: 1rem;
  pointer-events: none;
}
.ugv-video__meta strong {
  display: block;
  font-family: var(--ugv-display);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  line-height: 1.3;
}
.ugv-video__meta span { font-size: 0.8125rem; color: rgba(255,255,255,0.75); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.ugv-card {
  background: var(--ugv-graphite);
  border: 1px solid var(--ugv-hairline);
  border-radius: var(--ugv-radius);
  padding: 1.5rem;
  height: 100%;
}

.ugv-paper .ugv-card {
  background: #fff;
  border-color: var(--ugv-hairline-dark);
  box-shadow: 0 1px 2px rgba(28, 22, 28, 0.05);
}

/* person card — photo carries it, chrome stays quiet */
.ugv-person {
  display: block;
  background: var(--ugv-graphite);
  border: 1px solid var(--ugv-hairline);
  border-radius: var(--ugv-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ugv-text);
  transition: transform 0.2s ease, border-color 0.2s ease;
  height: 100%;
}
.ugv-person:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.22); color: var(--ugv-text); }
.ugv-person__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ugv-ink);
}
.ugv-person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.92);
  transition: transform 0.35s ease;
}
.ugv-person:hover .ugv-person__photo img { transform: scale(1.03); }
.ugv-person__body { padding: 1.125rem 1.25rem 1.375rem; }
.ugv-person__body h6 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
}
.ugv-person__body .role {
  font-size: 0.8438rem;
  color: var(--ugv-text-2);
  margin-bottom: 0.75rem;
}

.ugv-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-family: var(--ugv-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ugv-text-2);
  border: 1px solid var(--ugv-hairline);
  border-radius: 999px;
  padding: 0.2rem 0.625rem;
  margin: 0 0.25rem 0.25rem 0;
}

/* --------------------------------------------------------------------------
   Reveal — armed only when JS is present, disabled for reduced motion
   -------------------------------------------------------------------------- */
html.ugv-motion .ugv-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
html.ugv-motion .ugv-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Homepage hero load sequence. Keyed off `html.ugv-ready`, which ugv-core.js sets
   itself — it previously depended on the legacy `body.page-loaded` class, and when
   legacy scripts.js threw before setting it the whole hero stayed at opacity 0. */
html.ugv-motion .ugv-hero-seq > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.ugv-motion.ugv-ready .ugv-hero-seq > *:nth-child(1) { transition-delay: 0.10s; }
html.ugv-motion.ugv-ready .ugv-hero-seq > *:nth-child(2) { transition-delay: 0.22s; }
html.ugv-motion.ugv-ready .ugv-hero-seq > *:nth-child(3) { transition-delay: 0.34s; }
html.ugv-motion.ugv-ready .ugv-hero-seq > *:nth-child(4) { transition-delay: 0.46s; }
html.ugv-motion.ugv-ready .ugv-hero-seq > *:nth-child(5) { transition-delay: 0.58s; }
html.ugv-motion.ugv-ready .ugv-hero-seq > * {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Header / hero (overrides template .header content styling)
   -------------------------------------------------------------------------- */
.header .video-bg .layer {
  background: linear-gradient(180deg, rgba(15,15,15,0.25) 0%, rgba(15,15,15,0.55) 60%, var(--ugv-ink) 100%);
}

.header .video-bg .content h5,
.header .video-bg .content .ugv-hero-eyebrow {
  font-family: var(--ugv-voice);
  font-style: italic;
  font-size: 1.125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1rem;
}
.header .video-bg .content h5 span::after,
.header .video-bg .content .ugv-hero-eyebrow span::after { display: none; }

.header .video-bg .content h2,
.header .video-bg .content h1 {
  font-family: var(--ugv-display);
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-transform: none;
  max-width: 16ch;
}

.header .video-bg .content p {
  font-family: var(--ugv-body);
  font-size: var(--ugv-lede);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 54ch;
}

.ugv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.25rem;
  margin-top: 2rem;
}

/* tertiary entry point — a text link, so the two-button system stays intact */
.ugv-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--ugv-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.ugv-link:hover,
.ugv-link:focus-visible { color: var(--ugv-magenta); border-color: var(--ugv-magenta); }
.ugv-link .ugv-btn-arrow { transition: transform 0.18s ease; }
.ugv-link:hover .ugv-btn-arrow { transform: translateX(3px); }
.ugv-paper .ugv-link { color: var(--ugv-text); border-color: rgba(15, 15, 15, 0.25); }

/* --------------------------------------------------------------------------
   Nav refinements (mechanics untouched)
   -------------------------------------------------------------------------- */
.ugv-quicklinks {
  display: none;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
  margin-right: 2.25rem;
}
.ugv-quicklinks a {
  font-family: var(--ugv-nav);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.ugv-quicklinks a:hover { opacity: 1; color: var(--ugv-magenta); }
body.ugv-light-nav .ugv-quicklinks a { color: #1c161c; }
body.ugv-light-nav .ugv-quicklinks a:hover { color: var(--ugv-magenta); }

/* The bar needs ~890px for logo + five links + the menu trigger, so hiding the
   links until 1200px stripped the whole top navigation off any laptop window
   narrower than that -- a 1366x768 screen, or a 16" not maximised. Shown from
   992px, slightly tighter until there is room for the full spacing. */
@media (min-width: 992px) {
  .ugv-quicklinks {
    display: flex;
    gap: 1.4rem;
    margin-right: 1.5rem;
  }
  .ugv-quicklinks a { font-size: 0.875rem; }
}
@media (min-width: 1200px) {
  .ugv-quicklinks { gap: 2rem; margin-right: 2.25rem; }
  .ugv-quicklinks a { font-size: 0.9375rem; }
}

.navigation-menu .inner ul li a { text-transform: none; }

/* dark-first: the menu trigger is always light-on-dark */
.navbar .sandwich-nav .sandwich-text b {
  color: #fff;
  font-family: var(--ugv-nav);
  font-weight: 600;
}
.navbar .sandwich-btn span { background: #fff; }

/* The bar is transparent and its contents are white, so pages with a light
   canvas (investor, the episode archive, entrepreneur profiles) rendered an
   invisible nav. A scrim makes the white legible on any page. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 160%;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.78) 0%, rgba(15, 15, 15, 0.45) 55%, rgba(15, 15, 15, 0) 100%);
  pointer-events: none;
  z-index: -1;
}
.navbar .logo,
.navbar .ugv-quicklinks,
.navbar .sandwich-nav { position: relative; z-index: 1; }

/* native option lists render on a system surface, so they need explicit colours
   when the select itself is translucent on a dark bar */
select option { color: #1c161c; background-color: #fff; }

/* --------------------------------------------------------------------------
   Overlay menu — was a flat black field. Brand mark, ordered links at display
   scale, an On-Air rule, and a quiet contact row.
   -------------------------------------------------------------------------- */
.navigation-menu .nav-bg,
.navigation-menu .nav-bg2 { background: var(--ugv-ink); }
.navigation-menu .nav-bg2 {
  background:
    radial-gradient(ellipse 70% 55% at 85% 12%, rgba(123, 92, 255, 0.16), transparent 62%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(255, 46, 206, 0.12), transparent 62%),
    var(--ugv-ink);
}

.navigation-menu .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: min(1200px, 88vw);
  margin: 0 auto;
  padding: 7rem 0 3rem;
}

/* The panel content was vertically centred, so on a short viewport it grew past
   its own top padding and slid under the fixed navbar. Anchor it to the top and
   keep the stack short enough to fit between the bar and the bottom edge. */
.navigation-menu .inner {
  justify-content: flex-start;
  padding: 6.5rem 0 2.5rem;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.ugv-menu__brand img { height: 40px; width: auto; }
.ugv-menu__home {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--ugv-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ugv-ash);
  transition: color 0.2s ease;
}
.ugv-menu__home-icon { font-size: 1rem; line-height: 1; }
.ugv-menu__home:hover { color: #fff; }

/* Bootstrap's `a { text-decoration: underline }` was reaching the overlay, so
   every destination rendered underlined. Underline belongs on hover only. */
.navigation-menu .inner a { text-decoration: none; }
.navigation-menu .inner ul li a:hover,
.navigation-menu .inner .ugv-menu__foot a:hover { text-decoration: underline; }

/* style.css styles `.navigation-menu .inner address` for the old overlay: absolute,
   floated, and pulled up 85px. That out-ranks a plain `.ugv-menu__foot address`
   rule, so the email and phone landed mid-panel and then, once un-absoluted,
   collided with the secondary row. Reset at matching specificity. */
.navigation-menu .inner .ugv-menu__foot address {
  position: static;
  inset: auto;
  float: none;
  margin: 0;
  width: auto;
}

/* Secondary destinations — present, but not competing with the five above. */
.navigation-menu .inner ul.ugv-menu__more {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.navigation-menu .inner ul.ugv-menu__more li a {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ugv-ash);
}
.navigation-menu .inner ul.ugv-menu__more li a:hover { color: #fff; }

.ugv-menu__rule {
  height: 2px;
  width: 100%;
  border: 0;
  margin: 0;
  opacity: 1;
  background: var(--ugv-grad);
}

.navigation-menu .inner ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navigation-menu .inner ul li { width: auto; float: none; }
.navigation-menu .inner ul li a {
  font-family: var(--ugv-nav);
  font-size: clamp(1.5rem, 3.8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: #fff;
  padding: 0.1em 0;
}
.navigation-menu .inner ul li a:hover { color: var(--ugv-magenta); }

.ugv-menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  border-top: 1px solid var(--ugv-hairline);
  padding-top: 1.5rem;
}
.ugv-menu__foot address {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0;
  font-style: normal;
  font-size: 0.9375rem;
}
.ugv-menu__foot address a,
.ugv-menu__foot address span { color: var(--ugv-ash); text-decoration: none; }
.ugv-menu__foot address a:hover { color: #fff; }
.ugv-menu__social { display: flex; gap: 0.75rem; }
.ugv-menu__social a {
  display: grid;
  place-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--ugv-hairline);
  border-radius: 50%;
  color: var(--ugv-ash);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ugv-menu__social a:hover { color: #fff; border-color: var(--ugv-magenta); }

/* one staggered entrance, motion-gated */
html.ugv-motion .navigation-menu .inner > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
html.ugv-motion .navigation-menu.open .inner > * { opacity: 1; transform: none; }
html.ugv-motion .navigation-menu.open .inner > *:nth-child(1) { transition-delay: 0.30s; }
html.ugv-motion .navigation-menu.open .inner > *:nth-child(2) { transition-delay: 0.36s; }
html.ugv-motion .navigation-menu.open .inner > *:nth-child(3) { transition-delay: 0.42s; }
html.ugv-motion .navigation-menu.open .inner > *:nth-child(4) { transition-delay: 0.48s; }
html.ugv-motion .navigation-menu.open .inner > *:nth-child(5) { transition-delay: 0.54s; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.ugv-footer {
  background: var(--ugv-ink);
  border-top: 1px solid var(--ugv-hairline);
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  color: var(--ugv-ash);
}

.ugv-footer__brand img { height: 44px; width: auto; margin-bottom: 1.125rem; }
.ugv-footer__brand p {
  font-family: var(--ugv-voice);
  font-style: italic;
  font-size: 1rem;
  color: var(--ugv-ash);
  max-width: 30ch;
  line-height: 1.6;
}

.ugv-footer h6 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.125rem;
}

.ugv-footer ul { list-style: none; margin: 0; padding: 0; }
.ugv-footer ul li { margin-bottom: 0.625rem; }
.ugv-footer ul a,
.ugv-footer address a {
  color: var(--ugv-ash);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.15s ease;
}
.ugv-footer ul a:hover,
.ugv-footer address a:hover { color: #fff; }

.ugv-footer address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
}
.ugv-footer address .ugv-footer-line { display: flex; gap: 0.625rem; margin-bottom: 0.625rem; }
.ugv-footer address .ugv-footer-line i { color: var(--ugv-magenta); margin-top: 0.3rem; }

.ugv-footer__social { display: flex; gap: 0.75rem; margin-top: 1.375rem; }
.ugv-footer__social a {
  display: grid;
  place-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--ugv-hairline);
  border-radius: 50%;
  color: var(--ugv-ash);
  font-size: 1rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ugv-footer__social a:hover { color: #fff; border-color: var(--ugv-magenta); }

.ugv-footer__bar {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--ugv-hairline);
  padding: 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  font-size: 0.8125rem;
}
.ugv-footer__bar a { color: var(--ugv-ash); text-decoration: none; }
.ugv-footer__bar a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Legacy section normalization (template classes still in play)
   -------------------------------------------------------------------------- */

/* Legacy light sections adopt the Paper token set rather than just a background.
   These were built for dark text, so under a dark-first body their descendants
   inherited white onto white. Declaring the tokens here means nothing inside
   them CAN inherit light text — the readability fix is structural, not per-node. */
.jobs,
.job-detail,
.job-form,
.innovation,
.our-innovation,
.x-process,
.awards,
.contact,
.career,
.blog,
.our-vision,
.who-apply,
.membership-benefits {
  --ugv-surface: var(--ugv-paper);
  --ugv-text: #1c161c;
  --ugv-text-2: var(--ugv-slate);
  --ugv-line: var(--ugv-hairline-dark);
  background-color: var(--ugv-paper);
  color: var(--ugv-text);
}

/* .membership-fee and .lab-form are genuinely dark surfaces (their own rules set
   light text), so they keep the Ink token set — the inverse of the trap above. */
.membership-fee,
.lab-form {
  --ugv-text: var(--ugv-white);
  --ugv-text-2: var(--ugv-ash);
  --ugv-line: var(--ugv-hairline);
  color: var(--ugv-text);
}

/* …and the handful of legacy rules that hardcode a light colour rather than
   inheriting it, so the token set alone cannot reach them. */
.contact .title h5,
.jobs .jobs-title p,
.career .career-title h2,
.x-process h2,
.innovation .innovation-title h2,
.our-innovation .our-innovation-title h2 {
  color: var(--ugv-text);
}
.contact .contact-box h6,
.jobs .jobs-title h2 { color: var(--ugv-text); }
.contact form .form-group span,
.contact form .form-group > label { color: var(--ugv-text); }

/* Readability net: on a light surface, plain text elements can never be light.
   Anything intentionally coloured carries a ugv-* class, a link, or .text-color. */
:is(.ugv-paper, .jobs, .job-detail, .job-form, .innovation, .our-innovation, .x-process, .awards, .contact, .career, .blog, .our-vision, .who-apply, .membership-benefits)
  :is(h1, h2, h3, h4, h5, h6, p, span, small, li, label, strong, figcaption):not([class*="ugv-"]):not(.text-color):not(a):not(a *) {
  color: var(--ugv-text);
}

/* inner-page hero: a title band, never a full screen (legacy had height:100%) */
.page-header {
  background: radial-gradient(ellipse 75% 60% at 80% 10%, rgba(123, 92, 255, 0.09), transparent 60%),
              var(--ugv-ink);
  height: auto;
  min-height: 0;
  padding: clamp(7rem, 11vw, 9.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.page-header .inner-content,
.page-header .inner { width: 100%; }
/* pages that set a background photo on the band get a scrim so text stays legible */
.page-header[style*="background-image"]::after,
.page-header[style*="background-image"]::before { display: none; }
.page-header[style*="background-image"] {
  background-color: var(--ugv-ink);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
}
.page-header-right {
  border-radius: var(--ugv-radius);
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.page-header::before,
.page-header::after { display: none; }

.page-header .inner-content .inner .header-content h2,
.page-header .inner-content .inner .header-content h1 {
  font-family: var(--ugv-display);
  font-size: var(--ugv-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  text-transform: none;
  margin-bottom: 1rem;
}
.page-header .inner-content .inner .header-content p {
  font-family: var(--ugv-body);
  font-size: var(--ugv-lede);
  color: var(--ugv-ash);
  text-align: left;
  max-width: 68ch;
}
.page-header .social-media li a { color: var(--ugv-ash); }
.page-header .social-media li a:hover { color: #fff; }

/* Partner logos. These are real client logos with baked-in white backgrounds, so
   they get an honest white tile instead of a filter. The previous
   `grayscale(1) brightness(4)` blew every white-background logo into a solid
   white rectangle — legible only on hover. */
.partners {
  background: var(--ugv-ink);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--ugv-hairline);
  overflow: hidden;
}
.partners .slide { padding: 0 0.5rem; }
.partners .customer-logos .slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 0.875rem 1.25rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.partners .customer-logos .slide a:hover {
  transform: translateY(-2px);
  border-color: var(--ugv-magenta);
}
.partners .customer-logos .slide img {
  max-height: 68px;
  max-width: 100%;
  width: auto !important;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  filter: none;
  opacity: 1;
}

/* scroll-to-top */
#scrollToTopBtn {
  background: var(--ugv-graphite);
  border: 1px solid var(--ugv-hairline);
  color: #fff;
  border-radius: 50%;
}
#scrollToTopBtn:hover { background: var(--ugv-magenta); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.ugv-grid { display: grid; gap: var(--ugv-gap); }
@media (min-width: 768px)  { .ugv-grid--2 { grid-template-columns: repeat(2, 1fr); }
                             .ugv-grid--3 { grid-template-columns: repeat(2, 1fr); }
                             .ugv-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .ugv-grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .ugv-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Venture tile — the logo is the content, so it gets real room. */
.ugv-venture {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  background: var(--ugv-graphite);
  border: 1px solid var(--ugv-hairline);
  border-radius: var(--ugv-radius);
  padding: 1rem 1rem 1.25rem;
  text-decoration: none;
  color: var(--ugv-text);
  transition: transform 0.2s ease, border-color 0.2s ease;
  height: 100%;
}
.ugv-venture:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.22); color: var(--ugv-text); }
.ugv-venture__logo {
  width: 100%;
  /* The logo is the point of the card. Sized up twice on owner feedback:
     120-156px -> 160-210px -> 200-260px, with padding trimmed each time so the
     extra height goes to the mark rather than to whitespace. */
  height: clamp(200px, 20vw, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
}
.ugv-venture__logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  /* fill the tile rather than sit politely in the middle of it */
  min-height: 74%;
}
.ugv-venture__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0 0.25rem; }
.ugv-venture h6 { font-size: 1.0625rem; font-weight: 600; margin: 0; }
.ugv-venture .ugv-tag { margin: 0; align-self: flex-start; }

.ugv-more { margin-top: calc(var(--ugv-gap) * 1.2); text-align: center; }
.ugv-venture__desc {
  font-size: 0.875rem;
  color: var(--ugv-text-2);
  margin: 0.25rem 0 0;
  line-height: 1.55;
}

/* Ventures listing: a real grid with equal card heights, replacing the legacy
   isotope figure/figcaption visual (whose white text sat on white). */
.works .works-grid.ugv-venture-grid,
ul.works-grid.ugv-venture-grid {
  display: grid;
  gap: var(--ugv-gap);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  float: none;
}
/* specificity matches the base rule above (`.works .works-grid…`), otherwise the
   single-column base wins inside .works and the grid never opens up */
@media (min-width: 576px) {
  .works .works-grid.ugv-venture-grid,
  .works ul.works-grid.ugv-venture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .works .works-grid.ugv-venture-grid,
  .works ul.works-grid.ugv-venture-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
ul.works-grid.ugv-venture-grid > li {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}
ul.works-grid.ugv-venture-grid > li.d-none { display: none !important; }
/* neutralize the legacy figure hover machinery inside the new cards */
ul.works-grid.ugv-venture-grid > li figure,
ul.works-grid.ugv-venture-grid > li figcaption { all: unset; }

/* Mobile: the grid becomes a scroll-snap rail (owner asked for side-by-side and
   was open to horizontal scroll — desktop grid, mobile rail). */
@media (max-width: 767px) {
  .ugv-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: 0.875rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.75rem;
    /* bleed to the screen edges without causing a document-level scrollbar */
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    scrollbar-width: none;
  }
  .ugv-rail::-webkit-scrollbar { display: none; }
  .ugv-rail > * { scroll-snap-align: start; }
}

/* icon card (vision options, values) */
.ugv-icon-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.ugv-icon-card > img {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}
.ugv-icon-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.ugv-icon-card p { font-size: 0.9063rem; color: var(--ugv-text-2); margin: 0; }

/* Framed photo. The source photography is dated (owner), so it gets a controlled
   surface: consistent aspect ratio, tighter crop, slight desaturation, and an
   Ink-tinted scrim at the foot so any adjacent text sits on something stable. */
.ugv-photo {
  position: relative;
  border-radius: var(--ugv-radius);
  overflow: hidden;
  border: 1px solid var(--ugv-line);
  background: var(--ugv-ink);
}
.ugv-photo img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.04);
}
.ugv-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.35) 100%);
  pointer-events: none;
}
.ugv-photo--tinted img { filter: saturate(0.72) contrast(1.06); }
.ugv-photo--tall img { aspect-ratio: 3 / 4; }

/* stat row */
.ugv-stat-row {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

/* Utopia Life promo band inside the On Air frame */
.ugv-life-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ugv-gap);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.ugv-life-band h2 { max-width: 20ch; margin-bottom: 0.75rem; }
.ugv-life-band .ugv-lede { max-width: 44ch; }
.ugv-life-band__cta { display: flex; flex-direction: column; gap: 0.875rem; align-items: stretch; }
@media (max-width: 575px) { .ugv-life-band__cta { width: 100%; } }

/* Sector strip — replaces the six full-bleed photo panels. Label-led and compact;
   the photo becomes a small thumbnail, so no text ever sits on an image. */
.ugv-sectors {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .ugv-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ugv-sectors { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.ugv-sector {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--ugv-graphite);
  border: 1px solid var(--ugv-hairline);
  border-radius: 999px;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  min-width: 0;
}
.ugv-sector__thumb {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ugv-ink);
}
.ugv-sector__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ugv-sector span {
  font-family: var(--ugv-display);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  min-width: 0;
}

.ugv-stat { text-align: left; }
.ugv-stat strong {
  display: block;
  font-family: var(--ugv-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}
.ugv-stat span { font-size: 0.875rem; color: var(--ugv-text-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Legacy overrides ─────────────────────────────────────────────────────────
   style.css:1154 and mystyle.css:1070 (old template) set `main` to
   display:flex; flex-wrap:wrap; background:#fff. That made every <section> a
   flex item shrinking to content width (~1012px of 1200px) with the white main
   showing through the gap. Sections must be full-width block-level children on
   the Ink floor. Loaded last, so a flat selector is enough - no !important. */
main,
main.flex-grow-1 {
  display: block;
  width: 100%;
  background: transparent;
  align-items: initial;
  flex-wrap: nowrap;
}

.ugv-section,
.ugv-footer { width: 100%; }

/* ── Criteria list (Utopia Lab "Who can apply") ───────────────────────────────
   Replaces photo slides whose copy hid in a hover-only black overlay: the
   photography was dated and the text was unreadable. A symbolic gradient mark
   carries the brand instead of stock imagery. Sits on Paper, so it inherits the
   dark Paper text rather than fighting it. */
.ugv-criteria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .ugv-criteria { grid-template-columns: repeat(2, 1fr); } }

.ugv-criteria__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.25rem 1.4rem;
  background: #fff;
  border: 1px solid var(--ugv-hairline-dark);
  border-radius: 14px;
}

.ugv-criteria__mark {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--ugv-grad);
}

.ugv-criteria__item p {
  margin: 0;
  color: var(--ugv-text);
  line-height: 1.6;
}

/* Any dark card that sits inside a Paper section keeps light text — Paper sets
   colour for its subtree, which would otherwise render dark-on-dark. */
.ugv-paper .slider-content,
.ugv-paper .slider-content * { color: #fff; }

/* Venture with no logo uploaded yet — a typographic mark keeps the grid honest
   instead of showing an empty white tile. Replaced automatically once an image
   is uploaded in the dashboard. */
.ugv-venture__wordmark {
  font-family: var(--ugv-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: -0.02em;
  color: #1c161c;
  text-align: center;
  line-height: 1.25;
  padding: 0 0.5rem;
}

/* ── Inner-page header: the "two layers" bug ──────────────────────────────────
   style.css:1256 sets .page-header .inner-content { position: fixed; height:100% }.
   Fixed takes it out of flow, so the header copy stayed pinned to the viewport
   while the page content scrolled underneath it — heading, description and the
   section lede all painting over each other. The header must be an ordinary
   in-flow band. */
.page-header .inner-content {
  position: relative;
  height: auto;
  min-height: 0;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  padding-top: 0;
}

.page-header .inner-content .inner,
.page-header .inner-content .inner .header-content {
  height: auto;
  min-height: 0;
}

/* ── Tinted wordmarks for ventures with no logo file ──────────────────────────
   Set in the site's own display face so they sit with the real logos rather than
   looking like a foreign image. Each is tinted to its product, per the owner:
   Klassify bluish (its own brand oklch(28% .09 260) = #0B2654, accent #0089ED),
   Utopia OS magenta, Studio AI magenta + black with a futuristic treatment.
   Any real logo uploaded later replaces these automatically. */

/* Klassify — deep navy with the K picked out in its brighter blue */
.ugv-wm--klassify {
  color: #0B2654;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.ugv-wm--klassify::first-letter { color: #0089ED; }

/* Utopia OS — brand magenta, matching the house wordmark */
.ugv-wm--utopia-os {
  color: var(--ugv-magenta);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Studio AI — futuristic: black stem, gradient-filled, wide tracking, uppercase */
.ugv-wm--studio-ai {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.95rem, 1.35vw, 1.15rem);
  background: linear-gradient(100deg, #0F0F0F 0%, #0F0F0F 42%, var(--ugv-pink) 68%, var(--ugv-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Vertical clips (Utopia Life reels / YouTube shorts) ──────────────────────
   9:16 frame that works for a YouTube embed, an Instagram reel embed or an
   uploaded file, so `short_link` can hold any of the three. */
.ugv-clips {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .ugv-clips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ugv-clips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Landscape highlights need fewer, wider columns than portrait reels. */
.ugv-clips--wide { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px)  { .ugv-clips--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ugv-clips--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ugv-clip__frame {
  position: relative;
  padding-bottom: 177.78%;            /* 9:16 */
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--ugv-hairline);
}
/* A 16:9 cut in a portrait frame is ~60% black bars. Match the frame to the clip. */
.ugv-clip--wide .ugv-clip__frame { padding-bottom: 56.25%; }
.ugv-clip--wide .ugv-clip__frame > iframe,
.ugv-clip--wide .ugv-clip__frame > video { object-fit: contain; }
.ugv-clip__frame > iframe,
.ugv-clip__frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: #000;
}
.ugv-clip__label {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ugv-text-2);
}

/* Episode card for the Utopia Life "every episode" run. */
.ugv-epcard { display: block; text-decoration: none; color: inherit; }
.ugv-epcard__poster {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--ugv-hairline);
}
.ugv-epcard__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ugv-epcard__time {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: rgba(15, 15, 15, 0.82);
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.ugv-epcard h6 { margin: 0.75rem 0 0.4rem; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.ugv-epcard:hover .ugv-epcard__poster { border-color: var(--ugv-magenta); }

/* ── Investor page ────────────────────────────────────────────────────────────
   Was the least-converted page: a #1a1a1a slab with two stacked Bootstrap
   display-size headings, a #343a40 grey band, a #ffe6ff lilac wash, and a
   cyan/teal duotone photograph that sat outside the palette entirely. */
.ugv-investor-hero {
  background: var(--ugv-ink);
  padding-block: var(--ugv-section);
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.ugv-investor-hero h1 {
  font-family: var(--ugv-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0.5rem 0 1.1rem;
}

/* Replaces a near-empty dark 'growth chart' PNG with the line it carried. */
.ugv-investor-statement {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0 0 1.6rem;
}
.ugv-investor-statement__rule {
  flex: 0 0 auto;
  width: 3px;
  align-self: stretch;
  min-height: 2.4rem;
  border-radius: 3px;
  background: var(--ugv-grad);
}
.ugv-investor-statement p {
  margin: 0;
  font-family: var(--ugv-voice);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: #fff;
}

/* Re-tint an off-palette photograph to the brand without new artwork:
   desaturate it, then let the brand gradient show through by luminosity. */
.ugv-duotone {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ugv-grad);
  isolation: isolate;
}
.ugv-duotone > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  mix-blend-mode: luminosity;
}
@media (prefers-reduced-transparency: reduce) {
  .ugv-duotone > img { mix-blend-mode: normal; filter: none; }
}

/* Accessible name without a visible label (search/filter controls whose only
   cue was a placeholder or an icon). */
.ugv-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Blog index ────────────────────────────────────────────────────────────
   The page ran on the legacy `.post` layout: a decorative header photo, a
   stock avatar printed for every author, and AOS/WOW hooks whose libraries
   were removed. Rebuilt on the design system, and shaped so one published
   post reads as deliberate rather than as an empty grid. */

.page-header--masthead .ugv-masthead { max-width: 46rem; }
.page-header--masthead .ugv-masthead h1 {
  font-family: var(--ugv-display);
  font-size: var(--ugv-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: #fff;
  text-transform: none;
  margin: 0.6rem 0 1rem;
}
.page-header--masthead .ugv-masthead .ugv-lede { margin-bottom: 0; }

.ugv-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ugv-ash);
  margin-bottom: 1rem;
}

.ugv-byline { display: flex; align-items: center; gap: 0.7rem; margin: 1.5rem 0; }
.ugv-byline__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 40px;
  font-family: var(--ugv-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--ugv-grad);
}
.ugv-byline__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ugv-text);
}

/* Featured piece */
.ugv-lead-post {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
.ugv-lead-post__media {
  display: block;
  border-radius: var(--ugv-radius);
  overflow: hidden;
  position: relative;
  background: var(--ugv-graphite);
  aspect-ratio: 4 / 3;
}
.ugv-lead-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ugv-lead-post__media:hover img { transform: scale(1.03); }
.ugv-lead-post__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--ugv-grad);
}
.ugv-lead-post__title {
  font-family: var(--ugv-display);
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
}
.ugv-lead-post__title a { color: inherit; text-decoration: none; }
.ugv-lead-post__title a:hover { color: var(--ugv-magenta); }
.ugv-lead-post__intro {
  margin: 1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ugv-ash);
}

/* Archive cards */
.ugv-postcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--ugv-radius);
  overflow: hidden;
  background: var(--ugv-surface);
  border: 1px solid var(--ugv-line);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.ugv-postcard:hover { transform: translateY(-4px); border-color: var(--ugv-magenta); }
.ugv-postcard__media { aspect-ratio: 16 / 10; background: var(--ugv-graphite); }
.ugv-postcard__media img { width: 100%; height: 100%; object-fit: cover; }
.ugv-postcard__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.ugv-postcard__body .ugv-post-meta { margin-bottom: 0.6rem; }
.ugv-postcard__title {
  font-family: var(--ugv-display);
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.3;
  margin: 0 0 0.6rem;
}
.ugv-postcard__intro { font-size: 0.9rem; line-height: 1.6; color: var(--ugv-ash); margin: 0 0 1rem; }
.ugv-postcard__body .ugv-byline__name { margin-top: auto; font-size: 0.82rem; color: var(--ugv-ash); }

/* Cross-media band */
.ugv-crossread {
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.ugv-crossread h2 { margin: 0.5rem 0 0.75rem; }
.ugv-crossread .ugv-lede { margin: 0; }
.ugv-crossread__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 991.98px) {
  .ugv-lead-post,
  .ugv-crossread { grid-template-columns: 1fr; }
}

.ugv-pager { margin-top: 2.5rem; display: flex; justify-content: center; }
.ugv-pager .pagination { gap: 0.35rem; margin: 0; }
.ugv-pager .page-link {
  border: 1px solid var(--ugv-line);
  background: transparent;
  color: var(--ugv-text);
  border-radius: var(--ugv-radius-sm);
}
.ugv-pager .active .page-link { background: var(--ugv-magenta); border-color: var(--ugv-magenta); color: #fff; }

/* Clip posters. The frame holds an image and a play button until clicked, so a
   grid of clips costs one lazy image each instead of a YouTube player each. */
.ugv-clip__frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ugv-clip--wide .ugv-clip__frame > img { object-fit: contain; }
.ugv-clip__frame .ugv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  background: rgba(15, 15, 15, 0.55);
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.ugv-clip__frame:hover .ugv-play { background: var(--ugv-magenta); }
.ugv-clip__frame .ugv-play:focus-visible { transform: translate(-50%, -50%) scale(1.06); }
.ugv-clip__frame.is-playing .ugv-play { display: none; }

.ugv-batch__foot { display: flex; justify-content: center; margin-top: 2rem; }