/* ============================================================
   DC SITE v2 — fresh build (boss's new direction)
   Fonts: Supply Mono (small/nav/overlines), Mondwest (big headers),
   Geist (body). Background = DC blue #004AFF + animated noise grain.
   ============================================================ */

@font-face {
  font-family: 'PP Mondwest';
  src: url('fonts/PPMondwest-Regular.woff2') format('woff2'), url('fonts/PPMondwest-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PP Supply Mono';
  src: url('fonts/PPSupplyMono-Regular.woff2') format('woff2'), url('fonts/PPSupplyMono-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ATF entrance motion system */
  --atf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --atf-d: 0.55s;        /* standard element */
  --atf-d-lead: 0.85s;   /* atmospheric backdrop */
  --blue: #004AFF;
  /* neutral palette (matches the DC site) */
  --n900: #171818;
  --n800: #30353e;
  --n700: #404450;
  --n600: #545863;
  --n500: #8c909d;
  --n400: #d0d3da;
  --n300: #e1e2e9;
  --n200: #f0f1f6;
  --n100: #f8f8fa;
  --b300: #cbdaff;             /* light blue (overlines) */
  --b200: #e7eeff;
  --white: #fff;
  --maxw: 1800px;
  --gut: 48px;                  /* inner gutter for contained sections */
  --pad-y: 48px;                /* fixed vertical inset (top spacing) */
  /* edge inset for full-bleed/fixed elements: keeps them within a centered 1800 band */
  --pad: max(48px, calc((100vw - var(--maxw)) / 2 + 48px));
  --bar-h: 64px;
  --mono: 'PP Supply Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  --body: 'Geist', system-ui, -apple-system, sans-serif;

  /* ---- TYPE SCALE — bounded set of UI/text sizes (display sizes stay bespoke) ---- */
  --fs-micro: 10px;   /* tiny mono meta */
  --fs-label: 12px;   /* overlines, nav, chip labels */
  --fs-sm:    14px;   /* small body, links, captions */
  --fs-body:  16px;   /* base body copy */
  --fs-md:    20px;   /* small stat values / emphasis */
  --fs-lg:    22px;   /* pinned-section reading size (Signal) */
  --fs-xl:    24px;   /* pinned-section reading size (Story) */
  /* fluid heading tier — endpoints on the 4px grid (a couple on /2) */
  --fs-lead:  clamp(18px, 1.7vw, 22px);   /* lead / intro paragraphs */
  --fs-h3:    clamp(20px, 2.2vw, 28px);   /* card + sub headings */
  --fs-h2:    clamp(24px, 2.6vw, 36px);   /* secondary headings */
  --fs-h1:    clamp(32px, 3.6vw, 52px);   /* SECTION headers — same across every section */

  /* ---- SPACE SCALE — everything on a 4px grid ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 28px; --s-8: 32px; --s-9: 36px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;   /* stop iOS Safari from auto-inflating text (was blowing up the Frontier ticker on mobile) */
  text-size-adjust: 100%;
  background: var(--blue);
  color: #fff;
  font-family: var(--body);
  overflow-x: clip;   /* stops sideways scroll WITHOUT breaking position:sticky */
  overscroll-behavior-y: none;   /* kills the rubber-band bounce that flashed blue past the footer */
  -webkit-font-smoothing: antialiased;   /* thinner/crisper text, matches the Joey page */
  -moz-osx-font-smoothing: grayscale;
}


/* ----------------------------------------------------------
   NOISE GRAIN — same animated canvas as the old blue section
   ---------------------------------------------------------- */
.noise-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;                 /* above sections (z2), below nav (z49) */
  opacity: 0.085;
  mix-blend-mode: overlay;     /* shows grain on BOTH blue and dark surfaces */
  /* the grain canvas is smaller than the display and gets stretched to fill it.
     without this the browser smooths (bilinear) the upscale -> the grain smears
     into a soft blur that reads as "blurry transitions" over the seam gradients.
     nearest-neighbour keeps it a crisp, fine film grain on retina. */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.noise-canvas--mult {
  opacity: 0.035;               /* subtle */
  mix-blend-mode: multiply;    /* shows grain on the white sections */
}

/* ----------------------------------------------------------
   NAV — stacked (hero) version, top-left vertical list
   ---------------------------------------------------------- */
.nav-stacked {
  position: fixed;
  top: var(--pad-y);
  left: calc(var(--pad) - 9px);   /* offset the link padding so text aligns to the edge */
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
  will-change: opacity, transform;
}
.nav-stacked .wordmark { margin: 0 0 16px 8px; }   /* sits above the nav, pushes it down */

.navlink {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 0;                /* hard square corners */
  transition: color 0.18s ease, background 0.18s ease;
}
.navlink:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}
/* little ↗ next to a nav link that leaves for another area (The Frontier) */
.nav-ext {
  display: inline-block;
  font-size: 0.95em;
  margin-left: 4px;
  vertical-align: 0.04em;
  opacity: 0.72;
  font-style: normal;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
a:hover > .nav-ext { opacity: 1; transform: translate(1px, -1px); }
/* "The Frontier" nav link hints it's a different world: an occasional RGB-split glitch
   (a burst near the loop start = on-load flicker, then irregular blips). Same red/cyan
   split as the Frontier hero header, scaled down for nav text. */
/* blips vary in strength: soft (~1px) -> medium (~2px) -> strong (~3.2px), spread out
   over a long loop so big glitches are infrequent + peppered with small random ones */
@keyframes nav-fr-glitch {
  0%    { text-shadow: -3.2px 0 rgba(255,0,0,1), 3.2px 0 rgba(0,229,255,1); }          /* strong (load) */
  1.4%  { text-shadow: 2px 0 rgba(255,0,0,0.85), -2px 0 rgba(0,229,255,0.85); }        /* medium */
  2.6%  { text-shadow: none; }
  3.6%  { text-shadow: -3.2px 0 rgba(255,0,0,1), 3.2px 0 rgba(0,229,255,1); }          /* strong */
  4.6%  { text-shadow: none; }
  12.8% { text-shadow: none; }
  13.3% { text-shadow: -1px 0 rgba(255,0,0,0.6), 1px 0 rgba(0,229,255,0.6); }           /* soft */
  13.8% { text-shadow: none; }
  22.4% { text-shadow: none; }
  22.8% { text-shadow: 1px 0 rgba(255,0,0,0.55), -1px 0 rgba(0,229,255,0.55); }         /* soft */
  23.2% { text-shadow: none; }
  37%   { text-shadow: none; }
  37.6% { text-shadow: 2px 0 rgba(255,0,0,0.85), -2px 0 rgba(0,229,255,0.85); }         /* medium */
  38.6% { text-shadow: -2px 0 rgba(255,0,0,0.85), 2px 0 rgba(0,229,255,0.85); }         /* medium (flip) */
  39.8% { text-shadow: none; }
  48.6% { text-shadow: none; }
  49%   { text-shadow: -1px 0 rgba(255,0,0,0.55), 1px 0 rgba(0,229,255,0.55); }          /* soft */
  49.4% { text-shadow: none; }
  60.6% { text-shadow: none; }
  61%   { text-shadow: 1px 0 rgba(255,0,0,0.6), -1px 0 rgba(0,229,255,0.6); }            /* soft */
  61.4% { text-shadow: none; }
  74%   { text-shadow: none; }
  74.6% { text-shadow: -3.2px 0 rgba(255,0,0,1), 3.2px 0 rgba(0,229,255,1); }            /* strong */
  75.4% { text-shadow: none; }
  76.2% { text-shadow: 2px 0 rgba(255,0,0,0.85), -2px 0 rgba(0,229,255,0.85); }          /* medium */
  77%   { text-shadow: none; }
  86.4% { text-shadow: none; }
  86.8% { text-shadow: -1px 0 rgba(255,0,0,0.55), 1px 0 rgba(0,229,255,0.55); }          /* soft */
  87.2% { text-shadow: none; }
  93%   { text-shadow: none; }
  93.4% { text-shadow: 1px 0 rgba(255,0,0,0.5), -1px 0 rgba(0,229,255,0.5); }            /* soft */
  93.8% { text-shadow: none; }
  100%  { text-shadow: none; }
}
.navlink[href="/frontier"],
.mobile-menu a[href="/frontier"] { animation: nav-fr-glitch 11s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .navlink[href="/frontier"], .mobile-menu a[href="/frontier"] { animation: none; }
}
/* contact button inside the sticky bar (fades in with the bar) */
.nav-contact {
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-left: auto;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 8px 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.2s ease;
}
.nav-contact::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #fff;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-contact:hover { color: var(--blue); border-color: #fff; }
.nav-contact:hover::before { transform: scaleY(1); }
.nav-bar--light .nav-contact { color: var(--n900); border-color: rgba(0, 0, 0, 0.25); }
.nav-bar--light .nav-contact::before { background: var(--n900); }
.nav-bar--light .nav-contact:hover { color: #fff; border-color: var(--n900); }

/* ----------------------------------------------------------
   NAV DROPDOWN TRIGGERS + MEGA-MENU
   One shared sheet, opened from EITHER the vertical (hero) nav
   or the horizontal bar. Slides down from the top of the page.
   ---------------------------------------------------------- */
/* a navlink that opens a dropdown — strip the <button> chrome but KEEP
   the .navlink font (Supply Mono). Do NOT set font here. */
.nav-trigger {
  background: none;
  border: 0;
  cursor: url("cursors/hand.png") 6 1, pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* down-chevron drawn in CSS borders so it always renders crisply */
.nav-caret {
  font-size: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.nav-trigger[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.10); }
.nav-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); opacity: 1; }
.nav-bar--light .nav-trigger[aria-expanded="true"] { color: #000; background: rgba(0, 0, 0, 0.06); }

/* the sheet container — spans the top, holds both panels + the scrim */
.mega {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 80;                 /* ABOVE the navs (49/50), cta (55), mobile bar (60) — sheet covers them */
  pointer-events: none;
}
.mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(10, 11, 11, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mega.is-open .mega-scrim { opacity: 1; pointer-events: auto; }

.mega-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background: var(--n900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  padding: calc(var(--bar-h) + 34px) 0 48px;     /* clear the sticky bar */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  pointer-events: none;
  transition: opacity 0.26s ease,
              transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.36s;
}
.mega-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.26s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
.mega-inner {
  position: relative;
  z-index: 1;                  /* above the panel's own grain layer */
  width: min(100% - 2 * var(--gut), 1260px);
  margin: 0 auto;
  padding: 0 var(--gut);
}
/* animated film grain on the panel itself (canvas injected by the grain script) */
.mega-noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  /* crisp static grain (resolution-independent SVG) — never upscales into chunky blocks */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.mega--light .mega-noise, .mega--svc .mega-noise { mix-blend-mode: multiply; opacity: 0.06; }
.mega--svc-dark .mega-noise { mix-blend-mode: soft-light; opacity: 0.05; }
.mega-eyebrow {
  display: block;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-label);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}
.mega-grid { display: grid; gap: 0 44px; }
.mega-grid--programs { grid-template-columns: repeat(2, 1fr); }
.mega-grid--company { grid-template-columns: repeat(2, 1fr); max-width: 760px; }

.mega-card {
  --accent: var(--blue);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 5px;
  align-items: start;
  padding: 16px 14px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.2s ease;
}
.mega-card:hover { background: rgba(255, 255, 255, 0.035); }
/* square tick — neutral by default (no glow), tied to the row's text colour */
.mega-dot {
  width: 8px;
  height: 8px;
  margin-top: 13px;
  background: currentColor;
  opacity: 0.28;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mega-card-name {
  grid-column: 2;
  font-family: var(--display);          /* Mondwest — same as the .srow program titles */
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(24px, 2.1vw, 31px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #fff;
  opacity: 0.82;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-origin: left center;
}
/* hover = brighten + slide (NOT a colour swap — colour would blend into a matching panel) */
.mega-card:hover .mega-card-name { opacity: 1; transform: translateX(6px); }
.mega-card:hover .mega-dot { opacity: 0.9; transform: translateX(2px); }
.mega-card-desc {
  grid-column: 2;
  font-family: var(--body);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--n400);
  max-width: 44ch;
}
/* company cards have no accent tick — single column */
.mega-card--plain .mega-art { width: 50px; }

/* ---- panel adopts the colour of the section sitting behind the nav bar ---- */
.mega--blue .mega-panel  { background: var(--blue); }
.mega--blue .mega-card   { border-bottom-color: rgba(255, 255, 255, 0.16); }
.mega--dark .mega-panel  { background: var(--n900); }
.mega--light .mega-panel { background: var(--white); border-bottom-color: rgba(0, 0, 0, 0.12); }
.mega--svc .mega-panel { background: var(--svc); border-bottom-color: rgba(0, 0, 0, 0.12); }
/* dark-accent service pages (AI Search / AI Ads / Story Systems): accent panel, white text */
.mega--svc-dark .mega-panel { background: var(--svc); border-bottom-color: rgba(255, 255, 255, 0.16); }
.mega--svc-dark .mega-card  { border-bottom-color: rgba(255, 255, 255, 0.16); }
/* light sections need dark text */
.mega--light .mega-card, .mega--svc .mega-card { color: var(--n900); border-bottom-color: rgba(0, 0, 0, 0.08); }
.mega--light .mega-card:hover, .mega--svc .mega-card:hover { background: rgba(0, 0, 0, 0.04); }
.mega--light .mega-eyebrow, .mega--svc .mega-eyebrow { color: rgba(0, 0, 0, 0.5); }
.mega--light .mega-card-name, .mega--svc .mega-card-name { color: var(--n900); }
.mega--light .mega-card-desc, .mega--svc .mega-card-desc { color: var(--n600); }
.mega--light .mega-all, .mega--svc .mega-all { color: var(--n900); }

.mega-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0 18px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-label);
  color: #fff;
  text-decoration: none;
}
.mega-all .arrow { transition: transform 0.2s ease; }
.mega-all:hover .arrow { transform: translateX(5px); }

/* ----------------------------------------------------------
   INNER PAGES — default to the horizontal bar nav (no hero
   vertical nav, no scroll-morph). Set <body class="inner">.
   ---------------------------------------------------------- */
body.inner .nav-stacked,
body.inner [class="cta"] { display: none !important; }  /* only the floating NAV cta, not section CTAs */
body.inner .nav-bar {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ----------------------------------------------------------
   NAV — sticky bar version, horizontal, fades in on scroll
   ---------------------------------------------------------- */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--bar-h);
  z-index: 49;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--gut);       /* full-bleed: content goes to the edges, not the 1800 band */
  /* transparent default: the backdrop blur shows the hero's own color until the
     nav-morph JS applies the exact section tint - a hardcoded blue here painted a
     blue flash on every non-blue page's first frames (Justin, launch-day QA) */
  background: rgba(0, 74, 255, 0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* ----------------------------------------------------------
   WORDMARK — "Demand Curve" in Mondwest, replaces the logo.
   Sits above the vertical nav (hero) and at the left of the bar.
   ---------------------------------------------------------- */
.wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  font-size: var(--fs-lg);
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.13),
    0 0 12px rgba(255, 255, 255, 0.06);
}
.wordmark--bar {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

/* ----------------------------------------------------------
   CTA — "Contact us" button (top-right). White, blue text,
   diagonal stripes + corner brackets + heavy grain; fills to
   solid blue on hover. (Modeled on the Brashand CTA.)
   ---------------------------------------------------------- */
.cta {
  position: fixed;
  top: calc(var(--pad-y) - 14px);   /* vertically centered on the nav wordmark line */
  right: var(--pad);
  z-index: 55;
  width: 168px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #004AFF;
  border: 1px solid #fff;
  overflow: hidden;
  text-decoration: none;
  transition: background 0.3s ease;
}
.cta-stripes {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0.16) 0px,
    rgba(255, 255, 255, 0.16) 1.5px,
    transparent 1.5px,
    transparent 4px);
  transition: opacity 0.3s ease;
}
.cta-noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0.06;              /* subtle */
  mix-blend-mode: multiply;   /* visible grain on the white (and blue) fill */
  pointer-events: none;
}
.cta-corners .c {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 0 solid #fff;
  z-index: 4;
  transition: border-color 0.3s ease;
}
.cta-corners .tl { top: 7px; left: 7px; border-top-width: 1.5px; border-left-width: 1.5px; }
.cta-corners .tr { top: 7px; right: 7px; border-top-width: 1.5px; border-right-width: 1.5px; }
.cta-corners .bl { bottom: 7px; left: 7px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.cta-corners .br { bottom: 7px; right: 7px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.cta-label {
  position: relative;
  z-index: 3;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: #fff;
  transition: color 0.3s ease;
}
/* white fill that rises from the bottom on hover */
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.cta:hover::before { transform: scaleY(1); }
.cta:hover .cta-stripes { opacity: 0; }
.cta:hover .cta-label { color: #004AFF; }
.cta:hover .cta-corners .c { border-color: #004AFF; }

/* ATF peek-a-boo waving robot: hangs upside-down from under the Let's talk CTA.
   Outer wrap clips at the button's bottom edge; .robot-peek slides (top) + rocks (wave);
   the inner img holds the constant 180deg flip. */
.robot-peek-wrap { position: fixed; top: calc(var(--pad-y) - 14px + 52px); right: var(--pad); width: 168px; height: 112px; overflow: hidden; z-index: 54; pointer-events: none; }
.robot-peek { position: absolute; left: 50%; width: 84px; margin-left: -42px; top: -115px; transition: top 0.32s ease-out; will-change: top; }
.robot-peek .rf { display: block; width: 100%; transform: rotate(180deg); }      /* hangs upside-down */
.robot-peek .rf2 { position: absolute; top: 0; left: 0; visibility: hidden; }     /* alt arm-position frame */
.robot-peek.f2 .rf1 { visibility: hidden; }
.robot-peek.f2 .rf2 { visibility: visible; }
.robot-peek.is-out { top: -8px; }
@media (max-width: 768px) { .robot-peek-wrap { display: none; } }
@media (prefers-reduced-motion: reduce) { .robot-peek-wrap { display: none; } }

/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--blue);   /* painted here so the civ video's screen-blend has a backdrop in this stacking context */
  min-height: 100vh;
  min-height: 100svh;   /* mobile: account for the browser URL bar so the foot bar shows */
  z-index: 2;
}

.hero-title {
  position: absolute;
  right: var(--pad);
  bottom: 122px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;     /* right-anchored staircase */
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(56px, 12.5vw, 188px);
  line-height: 0.92;
  letter-spacing: 0;
  color: #fff;
  margin: 0;
  font-weight: 400;          /* Mondwest only ships Regular — stop the browser faking bold */
  font-synthesis: none;
}

/* the "pocket" — clips the word; inner span slides up out of it */
.word-mask {
  display: block;
  overflow: hidden;
  padding-top: 0.04em;        /* breathing room so glyph tops aren't shaved */
}
.word {
  display: inline-block;
  transform: translateY(115%);
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.13),
    0 0 16px rgba(255, 255, 255, 0.065),
    0 0 36px rgba(120, 160, 255, 0.05);
}
/* release the reveal mask once the words have animated in, so the glow halo
   (above/below the letters) isn't clipped by overflow:hidden */
body.reveal-done .word-mask { overflow: visible; }
body.loaded .word {
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);   /* V17: clean rise, heavy stagger */
}
body.loaded .word-mask:nth-child(1) .word { transition-delay: 0s; }
body.loaded .word-mask:nth-child(2) .word { transition-delay: 0.26s; }
body.loaded .word-mask:nth-child(3) .word { transition-delay: 0.52s; }

/* ----------------------------------------------------------
   SPACER — placeholder so you can scroll & watch the nav morph.
   Real sections get built here, one at a time.
   ---------------------------------------------------------- */
/* hero foot bar — overline left, trusted-by right, line beneath (tonik-style) */
.hero-foot {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 34px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.88);
}
.hero-foot span { white-space: nowrap; }

.after-hero {
  position: relative;
  z-index: 2;
  min-height: 150vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.after-hero span {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
}

/* ----------------------------------------------------------
   STORY — scroll-driven word highlight. Text is pinned in the
   center while a tall scroll track drives words from dim -> white,
   one after another, like a reading guide. Still blue + noise.
   ---------------------------------------------------------- */
.story {
  position: relative;
  z-index: 2;
  padding: clamp(100px, 18vh, 240px) 0;   /* un-pinned: normal section, words reveal as it scrolls past */
}
.story-pin {
  position: static;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.story-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gut);
  font-family: var(--display);   /* Mondwest */
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: 1.28;
  letter-spacing: 0;
}
.story-para {
  margin: 0;
}
.story-copy .w {
  color: #fff;
  opacity: 0.2;             /* JS raises this toward 1 as you scroll */
}


/* ----------------------------------------------------------
   SOCIAL PROOF — black (--n900), no noise. Big stats + YC badge,
   then a 3-row scrolling text marquee. Marquee reuses the
   seamless-loop technique from the current site's logo wall.
   ---------------------------------------------------------- */
.social {
  position: relative;
  z-index: 2;
  background: var(--blue);   /* blue (with noise), per Joey's preference */
  padding: clamp(90px, 13vh, 170px) 0 clamp(100px, 15vh, 190px);
}

.social-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gut);
  text-align: center;        /* center the eyebrow + grid */
}

/* Stats block: a YC tag bar that caps a 2x2 grid */
.stats-block {
  max-width: 1080px;
  margin: 0 auto;
}

/* YC tag — short bar, full width, sits flush on top of the grid */
.yc-tag {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: clamp(13px, 1.9vh, 18px);
  border: 1px solid rgba(251, 101, 30, 0.32);
  border-top: none;               /* the grid's bottom border becomes the divider */
  background:
    radial-gradient(130% 200% at 50% 0%, rgba(251, 101, 30, 0.24), rgba(251, 101, 30, 0.07) 58%, rgba(251, 101, 30, 0.04));
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  color: #FFB48C;
  box-shadow: inset 0 1px 0 rgba(251, 101, 30, 0.28), 0 0 28px rgba(251, 101, 30, 0.14);
}
.yc-tag .yc-txt strong { color: #FF7A33; font-weight: 600; }
.yc-tag img {
  width: 21px; height: 21px; display: block; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 12px rgba(251, 101, 30, 0.55);
}
/* slow light sweep across the bar */
.yc-tag::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 150, 70, 0.13), transparent);
  transform: skewX(-18deg);
  animation: yc-sweep 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes yc-sweep { 0% { left: -60%; } 52%, 100% { left: 140%; } }
@media (prefers-reduced-motion: reduce) { .yc-tag::after { display: none; } }

/* TechCrunch tag — stacks ABOVE the YC tag, DC green text + TechCrunch logo */
.tc-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(11px, 1.6vh, 16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;            /* sits above the grid; grid's top border is the divider */
  background: rgba(16, 185, 129, 0.10);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: #10B981;
}
.tc-tag img { width: 16px; height: 16px; display: block; border-radius: 3px; }

/* 2x2 grid with cross lines */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(34px, 5vh, 60px) clamp(20px, 3vw, 40px);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.stat-num {
  font-family: var(--display);     /* Mondwest */
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(56px, 6.5vw, 104px);
  line-height: 0.9;
  color: #fff;
}
.stat-label {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

/* "You'll recognize a few of these" lead above a company wall */
.logowall-lead { text-align: center; margin: clamp(52px, 7vh, 88px) 0 clamp(22px, 3vh, 32px); }
.logowall-lead .overline { color: rgba(255,255,255,0.5); }
/* company walls live on the dark endorsements section -> edges fade to #171818, not blue */
.praise .marquee::before { background: linear-gradient(to right, #171818, rgba(23,24,24,0)); }
.praise .marquee::after { background: linear-gradient(to left, #171818, rgba(23,24,24,0)); }

/* Marquee rows (full-bleed, scroll horizontally) */
.marquee-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 80px);     /* more space between rows */
  margin-top: clamp(30px, 4.5vh, 48px);
  padding: 0 var(--pad);           /* clip + fade at the 1800 band edges, not full-bleed */
}
.marquee {
  position: relative;
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--dur, 55s) linear infinite;
  will-change: transform;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }

.marquee__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(48px, 5.5vw, 100px);
  padding-right: clamp(48px, 5.5vw, 100px);
}
.marquee__group span {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(22px, 2.6vw, 38px);
  color: rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.marquee__group span:hover { color: rgba(255, 255, 255, 0.55); }

/* edge fades into the black surface */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8%, 140px);
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--blue) 0%, rgba(0, 74, 255, 0) 100%);
}
.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--blue) 0%, rgba(0, 74, 255, 0) 100%);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* marquees are core content (logos / proof), not decorative motion —
   they keep scrolling even under reduced-motion so the page doesn't look broken */

/* ----------------------------------------------------------
   PROGRAMS — black, big accent-colored service cards (3x2)
   ---------------------------------------------------------- */
.section-wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--gut);
}
.overline {
  display: inline-block;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--n500);   /* overlines are grey by default, never brand-blue on dark/light */
}
[data-theme="blue"] .overline { color: var(--b300); }   /* but light blue on the brand-blue sections */
.display-head {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.04;
  color: #fff;
  margin: 0;
}

.programs {
  position: relative;
  z-index: 2;
  background: var(--n900);
  padding: clamp(90px, 13vh, 170px) 0 clamp(44px, 6vh, 84px);   /* trimmed bottom: Services + Model are both dark with no seam, so their paddings stack into a cavernous gap under the Let's-talk CTA */
  overflow: hidden;
}
.programs-head { margin-bottom: clamp(40px, 6vh, 72px); }   /* gap before the program cards */
.programs-eyebrowrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}
.programs-head .overline { margin: 0 0 16px; }
/* quiet section label: deliberately small so it reads as a marker, not a competing headline */
.programs-head .display-head { font-size: var(--fs-h1); }
.programs-head .head-sub {
  font-family: var(--body);
  font-size: var(--fs-lead);
  color: var(--n400);
  margin: 12px 0 0;
  max-width: 52ch;
}
/* Homepage services: center the header so it matches the centered card grid below.
   Scoped to headers immediately above a .svc-grid, so service pages (left-aligned tiers) stay left. */
.programs-head:has(+ .svc-grid) { text-align: center; }
.programs-head:has(+ .svc-grid) .head-sub { margin-inline: auto; }

/* S15 "Oversized Type": huge Mondwest program name per row; on hover it
   colors + slides to its accent and the description reveals to the side. */
.prog-rows { display: flex; flex-direction: column; }
.srow {
  --accent: var(--blue);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  padding: clamp(20px, 3vh, 32px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);   /* lines sit BELOW each row, none under the header */
  text-decoration: none;
  position: relative;
}
.srow-num {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--n600);
  align-self: center;
  transition: color 0.4s ease;
}
.srow-title {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(40px, 8.5vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--n700);
  margin: 0;
  transition: color 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-origin: left center;
}
.srow-side {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  max-width: 320px;
  text-align: right;
  opacity: 0;
  transform: translate(14px, -50%);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.srow-desc { font-family: var(--body); font-size: var(--fs-sm); line-height: 1.5; color: var(--n400); margin: 0; }
.srow-learn {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 8px;
}
.srow-learn .arrow { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.srow:hover .srow-title,
.srow:focus-within .srow-title { color: var(--accent); transform: translateX(clamp(6px, 1vw, 16px)); }
.srow:hover .srow-num,
.srow:focus-within .srow-num { color: var(--accent); }
.srow:hover .srow-side,
.srow:focus-within .srow-side { opacity: 1; transform: translate(0, -50%); }
.srow:hover .srow-learn .arrow { transform: translateX(5px); }
/* mobile scroll-focus: the row at the center of the screen lights up */
.srow.is-active .srow-title { color: var(--accent); }
.srow.is-active .srow-num { color: var(--accent); }

@media (max-width: 760px) {
  .srow { grid-template-columns: auto 1fr; gap: 16px; }
  /* Learn-more follows the same scroll-activation as the title: grey until the row is centered */
  .srow-learn { color: var(--n600); transition: color 0.4s ease; }
  .srow.is-active .srow-learn { color: var(--accent); }
  .srow-title { white-space: normal; }   /* allow wrap on phones so it never overflows */
  .srow-side {
    position: static; top: auto;
    grid-column: 1 / -1; align-items: flex-start; text-align: left; max-width: 100%;
    opacity: 1; transform: none; margin-top: 8px;   /* always shown on touch (no hover) */
  }
  /* tap fires :focus-within — kill the desktop -50% hover shift so the desc can't
     jump up over the title (it's in normal flow here, not vertically centered) */
  .srow:hover .srow-side,
  .srow:focus-within .srow-side { transform: none; }
}

/* ----------------------------------------------------------
   OUR MODEL — black, big Mondwest statement + problem/solution grid
   ---------------------------------------------------------- */
.model {
  position: relative;
  z-index: 2;
  background: var(--n900);
  padding: clamp(56px, 8vh, 104px) 0 clamp(90px, 13vh, 170px);   /* tighter top so it sits closer to the Services CTA above (same dark bg, no seam) */
}
.model-head .overline { margin-bottom: 24px; }
.model-head .display-head {
  font-size: var(--fs-h1);
  max-width: 24ch;                        /* breaks onto two lines */
}
.model-lead {
  font-family: var(--body);
  font-weight: 400;                       /* not bold */
  font-size: var(--fs-lead);    /* smaller */
  line-height: 1.5;
  color: var(--n200);          /* lit letters land on a light grey, not pure white */
  margin: clamp(28px, 4vh, 48px) 0 0;
  max-width: 900px;
}
/* scroll-driven letter-by-letter highlight on the lead (non-pinned) */
.model-lead .ml { opacity: 0.22; }

.model-solve-title {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  font-size: var(--fs-h2);
  color: #fff;
  margin: clamp(80px, 10vh, 140px) 0 clamp(34px, 5vh, 54px);
}
.solve-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vh, 68px) clamp(48px, 6vw, 110px);
}
.solve-item {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding-top: 16px;
}
.solve-problem {
  font-family: var(--body);
  font-size: var(--fs-sm);
  color: var(--n600);
  text-decoration: line-through;
  margin: 0 0 8px;
}
.solve-solution {
  font-family: var(--body);
  font-size: var(--fs-sm);            /* match the services card description size */
  line-height: 1.5;
  color: var(--n400);
  margin: 0;
}
/* the "Learn about our model" link is a FULL-WIDTH BOX attached flush to the bottom of the
   comparison table, label centered. It shares the table's borders (no top border - the table's
   bottom edge is its top edge) so it reads as part of the chart, and fills white on hover like
   the site's other CTAs. */
.model-cta {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(22px, 3.2vh, 40px);   /* sits a bit below the chart, not jammed against it */
  border: 1px solid rgba(255, 255, 255, 0.12);   /* full border - it's a standalone box now */
  background: rgba(255, 255, 255, 0.022);   /* barely-there tint so it blends into the chart, not a stark box */
  padding: clamp(14px, 2vh, 22px) 0;   /* shorter box */
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-label);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* same localized film grain as the chart's Demand Curve winner column -> the box reads as part of the chart */
.model-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.10;
}
.model-cta:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.24); color: #fff; }
.model-cta .arrow { transition: transform 0.2s ease; }
.model-cta:hover .arrow { transform: translateX(4px); }

/* ----------------------------------------------------------
   DISTRIBUTION — blue, giant ghost number watermark + stats
   ---------------------------------------------------------- */
.dist {
  position: relative;
  z-index: 2;
  background: var(--blue);
  padding: clamp(90px, 13vh, 170px) 0;
  overflow: hidden;
  text-align: center;            /* centered "Big-Number Reach v1" layout */
}
.dist-bignum {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(68px, 17vw, 260px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  /* same textured stepped-grey gradient + grain fill as the service-page big wordmark */
  color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, rgba(255,255,255,0.17) 0 25%, rgba(255,255,255,0.12) 25% 50%, rgba(255,255,255,0.075) 50% 75%, rgba(255,255,255,0.04) 75% 100%);
  background-size: 150px 150px, 100% 100%;
  background-blend-mode: overlay;
  -webkit-background-clip: text;
  background-clip: text;
  white-space: nowrap;
  margin: 16px auto 0;
}
.dist .dist-sub { display: block; margin: clamp(10px, 2vh, 24px) 0 0; }
.dist-head {
  font-size: var(--fs-h1);
  max-width: 18ch;             /* centered, tighter measure */
  margin: 24px auto 0;
}
/* hairline + diamond rule under the claim */
.dist-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 760px;
  margin: clamp(28px, 4vh, 40px) auto 0;
}
.dist-rule .ln { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.3); }
.dist-rule .dot { width: 7px; height: 7px; border: 1px solid rgba(255, 255, 255, 0.85); transform: rotate(45deg); flex: 0 0 auto; }
.dist-body {
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 58ch;             /* centered measure */
  margin: clamp(24px, 3.5vh, 40px) auto 0;
}
.dist-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(36px, 6vw, 84px);
  margin: clamp(42px, 6vh, 64px) auto 0;
}
.dist-stat { text-align: center; }
.dist-stat-num {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: #fff;
}
.dist-stat-label {
  display: block;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin: 12px 0 0;
}
.dist-stat-desc {
  font-family: var(--body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #fff;
  margin: 12px auto 0;
  max-width: 24ch;
}
/* Apply-to-sponsor CTA — the site's standard CTA, made static + centered.
   Inherits all .cta visuals (blue fill, white border + corners, grain canvas,
   white panel rises on hover → label flips to blue). */
/* full-width flex wrapper centers the button reliably (same pattern as .dist-stats) */
.dist-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(46px, 6.5vw, 72px);
}
.cta-dist {
  position: relative;          /* contain the absolute .cta-noise grain inside the button */
  inset: auto;                 /* reset top/right inherited from .cta (fixed nav button) — right:var(--pad) was shoving it left */
  display: inline-flex;
  width: auto;
  min-width: 208px;
  height: 52px;
  padding: 0 30px;
  margin: 0;
}

/* ----------------------------------------------------------
   MEET SIGNAL — white section, Mondwest, scroll word-highlight
   ---------------------------------------------------------- */
.signal {
  position: relative;
  z-index: 2;
  background: #ffffff;
  padding: clamp(120px, 24vh, 320px) 0;   /* un-pinned: generous space around the AI platform section */
}
.signal-pin {
  position: static;
  min-height: 56vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signal-copy {
  max-width: 980px;
  padding: 0 var(--gut);
  position: relative;
  z-index: 1;
}
/* decorative scroll-driven block wave in the side margins */
.signal-deco {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(64px, 10vw, 132px);
  max-height: 86vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  pointer-events: none;
  z-index: 0;
}
/* anchor the decos to a ~1520 content band, not the viewport edges, so they don't fly
   out to the extremes on ultra-wide screens */
.signal-deco.left { left: max(clamp(16px, 4vw, 60px), calc(50% - 760px)); }
.signal-deco.right { right: max(clamp(16px, 4vw, 60px), calc(50% - 760px)); }
.signal-cell { aspect-ratio: 1; background: var(--blue); opacity: 0; will-change: opacity; }
@media (max-width: 1100px) { .signal-deco { display: none; } }
.signal-overline {
  display: block;
  color: var(--n500);
  margin-bottom: clamp(20px, 3vh, 34px);
}
.signal-para {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0 0 clamp(14px, 1.8vh, 22px);
  color: #171818;
}
.signal-para:last-child { margin-bottom: 0; }
.signal-l { color: #171818; opacity: 0.16; }   /* per-letter reveal, no accent color */

/* nav over a light/white section — dark text, light bar */
.nav-bar--light .navlink,
.nav-bar--light .wordmark { color: #171818; }
.nav-bar--light .wordmark { text-shadow: none; }
.nav-bar--light .navlink:hover { background: rgba(0, 0, 0, 0.06); color: #000; }
.nav-bar--light { border-bottom-color: rgba(0, 0, 0, 0.1); }

/* ----------------------------------------------------------
   RESULTS — white section: case-study line chart + social cards
   ---------------------------------------------------------- */
.results {
  position: relative;
  z-index: 2;
  background: #ffffff;
  margin-top: clamp(-150px, -15vh, -70px);   /* pull the cards up into the empty tail of the Signal pin */
  padding: clamp(8px, 2vh, 28px) 0 clamp(90px, 13vh, 170px);
}
.results .overline { color: var(--n500); }
.results .section-wrap { max-width: none; padding: 0 var(--pad); }   /* widen graph to the 1800 band */

/* heading above the scrolling social-proof cards */
.results-head { text-align: center; width: 100%; max-width: 1040px; margin: 0 auto; padding: clamp(24px, 4vh, 56px) 24px clamp(48px, 7vh, 80px); box-sizing: border-box; }
.results-sub { width: 100%; }
.results-head + .results-cards { margin-top: 0; }
.results-title { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(34px, 5vw, 62px); line-height: 1.02; color: #171818; margin: 0; }
.results-sub { font-family: var(--body); font-weight: 300; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; color: rgba(23, 24, 24, 0.62); margin: 16px auto 0; max-width: 64ch; }

/* social proof cards marquee (blue cards, scrolling) */
.results-cards { margin-top: clamp(56px, 8vh, 96px); padding: 0 var(--pad); }
.rcards { position: relative; overflow: hidden; }
.rcards__track { display: flex; width: max-content; animation: rcards-scroll 48s linear infinite; }
@media (hover: hover) { .rcards:hover .rcards__track { animation-play-state: paused; } }
.rcards__group { display: flex; gap: 20px; flex: 0 0 auto; padding-right: 20px; }
.rcard {
  flex: 0 0 auto;
  width: 320px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border-radius: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.22);
  color: #171818;
}
.rcard-tag { font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--n500); }
.rcard-quote { font-family: var(--body); font-size: var(--fs-sm); line-height: 1.5; color: #171818; margin: 0; }
.rcard-attr { font-family: var(--body); font-size: var(--fs-sm); color: var(--n500); margin: 0; }
.rcard-num { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(44px, 5vw, 60px); line-height: 1; color: #171818; }
.rcard-label { font-family: var(--body); font-size: var(--fs-sm); color: var(--n600); margin: 0; }
.rcards::before, .rcards::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(30px, 6%, 100px); z-index: 2; pointer-events: none;
}
.rcards::before { left: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.rcards::after { right: 0; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }
@keyframes rcards-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----------------------------------------------------------
   THE FRONTIER — broadsheet newsletter section (ported from DC
   Worlds), recolored for the blue background.
   ---------------------------------------------------------- */
.frontier {
  position: relative;
  z-index: 2;
  background: var(--n900);
  padding: clamp(70px, 11vh, 150px) 0 clamp(60px, 9vh, 120px);
  color: #fff;
}
.fr-meta {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
  padding: 0 4px 8px;
}
.fr-meta.bottom { padding: 8px 4px 0; }
.fr-frame { position: relative; border: 1px solid rgba(255, 255, 255, 0.25); }
.fr-cap { position: absolute; width: 22px; height: 22px; z-index: 3; }
.fr-cap.tl { top: -1px; left: -1px; border-top: 3px solid #fff; border-left: 3px solid #fff; }
.fr-cap.tr { top: -1px; right: -1px; border-top: 3px solid #fff; border-right: 3px solid #fff; }
.fr-cap.bl { bottom: -1px; left: -1px; border-bottom: 3px solid #fff; border-left: 3px solid #fff; }
.fr-cap.br { bottom: -1px; right: -1px; border-bottom: 3px solid #fff; border-right: 3px solid #fff; }
.fr-rule { display: flex; align-items: center; gap: 8px; padding: 22px clamp(20px, 3vw, 32px) 0; }
.fr-rule.bottom { padding: 6px clamp(20px, 3vw, 32px) 22px; }
.fr-rule .ln { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.7); }
.fr-rule .dot { width: 6px; height: 6px; border: 1px solid #fff; transform: rotate(45deg); }
.fr-masthead { text-align: center; padding: 14px clamp(20px, 3vw, 32px); }
.fr-kicker { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.36em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.fr-title { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(40px, 5.5vw, 72px); line-height: 0.98; letter-spacing: -0.01em; margin: 0; color: #fff; }
.fr-divider { display: flex; align-items: center; gap: 12px; padding: 0 clamp(20px, 3vw, 32px) 0; }
.fr-divider .ln { flex: 1; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.fr-divider span { font-size: var(--fs-micro); color: rgba(255, 255, 255, 0.5); }

.fr-ticker { border-top: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.18); margin-top: 16px; padding: 8px 0; overflow: hidden; }
.fr-ticker-track { display: flex; width: max-content; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); animation: fr-marquee 40s linear infinite; }
.fr-ticker-track span { padding: 0 24px; }
@keyframes fr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.fr-grid { display: grid; grid-template-columns: 3fr 2fr; }
.fr-grid > * { padding: clamp(24px, 3vw, 36px); }
.fr-lead { border-right: 1px solid rgba(255, 255, 255, 0.18); }
.fr-tag { display: inline-block; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 12px; }
.fr-lead h3 { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: var(--fs-h2); line-height: 1.05; margin: 0 0 12px; color: #fff; }
.fr-lead-desc { font-family: var(--body); font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, 0.75); margin: 0 0 24px; }
.fr-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.5); }
.fr-subgrid article { border: 1px solid rgba(255, 255, 255, 0.18); padding: 16px; transition: border-color 0.2s, background 0.2s; }
.fr-subgrid article:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); }
.fr-sub-meta { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 8px; }
.fr-subgrid h4 { font-family: var(--mono); font-weight: 400; font-size: var(--fs-sm); line-height: 1.4; letter-spacing: 0.01em; margin: 0 0 8px; color: #fff; }
.fr-read { font-family: var(--mono); font-size: var(--fs-micro); color: rgba(255, 255, 255, 0.5); }
.fr-list { margin-top: 16px; }
.fr-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); text-decoration: none; transition: background 0.2s; }
.fr-list-item:last-child { border-bottom: none; }
.fr-list-item:hover { background: rgba(255, 255, 255, 0.05); }
.fr-list-item .li-l { display: flex; align-items: center; gap: 12px; }
.fr-list-item .li-num { font-family: var(--mono); font-size: var(--fs-micro); color: rgba(255, 255, 255, 0.5); }
.fr-list-item .li-title { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0.01em; color: #fff; }
.fr-list-item .li-tag { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }

.fr-sub h3 { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: var(--fs-h3); margin: 0 0 8px; color: #fff; }
.fr-sub-lead { font-family: var(--body); font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin: 0 0 24px; }
.fr-form input { width: 100%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); padding: 12px 16px; font-family: var(--body); font-size: var(--fs-sm); color: #fff; }
.fr-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.fr-form input:focus { outline: none; border-color: rgba(255, 255, 255, 0.7); }
.fr-subscribe { width: 100%; margin-top: 8px; padding: 12px; background: #fff; color: var(--n900); border: none; font-family: var(--mono); font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; cursor: url("cursors/hand.png") 6 1, pointer; transition: opacity 0.2s; }
.fr-subscribe:hover { opacity: 0.88; }
.fr-fine { font-family: var(--body); font-size: var(--fs-label); color: rgba(255, 255, 255, 0.5); margin: 8px 0 24px; }
.fr-stats { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.fr-stat { display: flex; align-items: center; justify-content: space-between; }
.fr-stat .s-label { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.fr-stat .s-val { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: var(--fs-md); color: #fff; }
.fr-quote { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.fr-quote p { font-family: var(--body); font-size: var(--fs-sm); font-style: italic; line-height: 1.5; color: rgba(255, 255, 255, 0.75); margin: 0; }
.fr-quote .q-attr { font-family: var(--mono); font-size: var(--fs-micro); color: rgba(255, 255, 255, 0.5); margin-top: 8px; }

.fr-tagline { text-align: center; margin-top: clamp(40px, 6vh, 72px); }
.fr-tagline p { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: var(--fs-lead); line-height: 1.35; color: rgba(255, 255, 255, 0.9); margin: 0 auto; max-width: 820px; }
.fr-tagline a { display: inline-block; margin-top: 16px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-label); color: #fff; text-decoration: none; }
.fr-tagline a:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .fr-grid { grid-template-columns: 1fr; }
  .fr-lead { border-right: none; border-bottom: none; }
  /* subscribe jumps above the lead article on mobile */
  .fr-sub { order: -1; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .fr-subgrid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   ASCII BANNER — full-width wavy ASCII "Demand Curve" (three.js),
   black & white. Sits above the footer.
   ---------------------------------------------------------- */
.ascii-banner {
  position: relative;
  z-index: 2;
  background: var(--n900);
  min-height: clamp(340px, 46vh, 580px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 10vh, 130px) var(--gut);
}
/* closing wordmark below the footer — larger, more presence as the page's final signature */
.ascii-banner--closer { min-height: clamp(420px, 56vh, 760px); padding-block: clamp(80px, 12vh, 170px); }
/* Living wordmark effect layer — hidden until the JS confirms desktop + WebGL */
.bigmark-fx { position: absolute; inset: 0; display: none; }
.bigmark-fx canvas { display: block; width: 100%; height: 100%; }
.ascii-banner.fx-on .bigmark-fx { display: block; }
.ascii-banner.fx-on .bigmark { display: none; }   /* swap static wordmark for the live one */
.bigmark {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(52px, 15vw, 300px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: #fff;
  white-space: nowrap;
  margin: 0;
  text-align: center;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.13),
    0 0 22px rgba(120, 160, 255, 0.08);
}
.bm-char { display: inline-block; text-align: center; overflow: hidden; }
.bm-char.glitch {
  font-family: var(--mono);
  color: #004AFF;
  text-shadow: 0 0 12px rgba(0, 74, 255, 0.7);
}
.ascii-text-container { position: absolute; inset: 0; }
.ascii-text-container canvas { display: none; }   /* hide the intermediate render; show only the ASCII */
.ascii-text-container pre {
  margin: 0; padding: 0;
  line-height: 1em;
  text-align: left;
  position: absolute; left: 0; top: 0;
  color: #f2f2f2;
  -webkit-text-fill-color: #f2f2f2;
  user-select: none;
  z-index: 9;
}

/* ----------------------------------------------------------
   FOOTER — black
   ---------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 2;
  background: var(--n900);
  color: #fff;
  padding: clamp(56px, 8vh, 100px) 0 40px;
  /* overlap the DC banner above by 1px so its own dark bg covers the sub-pixel seam
     that was exposing the html background as a coloured line. Single boundary, both
     sections are n900, so it can't band like a global overlap did. */
  margin-top: -1px;
}
.site-footer .section-wrap { max-width: none; padding: 0 var(--pad); }
.footer-top {
  display: block;
  padding-bottom: clamp(40px, 6vh, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* LEFT — overline, big serif headline, single Contact CTA */
.footer-eyebrow {
  display: inline-block;
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.16em;
  color: var(--n400);
}
.footer-headline {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.01em;
  color: #fff;
  margin: 24px 0 32px;
  max-width: 26ch;
  text-wrap: balance;
}
.footer-talk {
  position: relative; overflow: hidden; z-index: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--n900); color: #fff;
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: 0.06em;
  padding: 16px 44px; text-decoration: none;
  border: 1px solid #fff;
  transition: color 0.25s ease;
}
.footer-talk::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #fff;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-talk:hover { color: var(--n900); }
.footer-talk:hover::before { transform: scaleY(1); }

/* RIGHT — grouped outlined link chips */
/* shared 90-degree corner brackets for the big CTA buttons (match the ATF CTA) */
.brk { position: absolute; inset: 6px; z-index: 2; pointer-events: none; }
.brk i { position: absolute; width: 9px; height: 9px; border: 0 solid currentColor; }
.brk .tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.brk .tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.brk .bl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.brk .br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* four even columns */
  gap: clamp(28px, 3vw, 44px) clamp(28px, 3.5vw, 64px);
  align-content: start;
}
.footer-grouplabel {
  display: inline-block;
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.16em;
  color: var(--n500);
  margin-bottom: 16px;
}
.footer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-chip {
  position: relative; overflow: hidden; z-index: 0;
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 12px; text-decoration: none; white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-chip::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #fff;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-chip:hover { color: var(--n900); border-color: #fff; }
.footer-chip:hover::before { transform: scaleY(1); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 28px;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--n500);
}
.footer-bottom-links { display: inline-flex; gap: 24px; }
.footer-bottom-links a { color: var(--n500); text-decoration: none; transition: color 0.18s ease; }
.footer-bottom-links a:hover { color: #fff; }

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr; gap: 48px; }
  .footer-links { grid-template-columns: repeat(2, max-content); justify-content: start; gap: 40px clamp(48px, 10vw, 120px); }
}
@media (max-width: 460px) {
  .footer-links { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   SEAM — stepped transition bars between sections of different
   colors. Set --from / --to inline. 4 hard-stepped bands.
   ---------------------------------------------------------- */
.seam {
  position: relative;
  z-index: 2;
  height: clamp(64px, 8vh, 110px);
  /* HARD-stepped bands: each band's end % == the next band's start % so there is
     NO interpolation between them -> crisp solid lines, not a soft blurry fade.
     (A prior edit added gaps between the stops, e.g. 0 16% then 24% 36%, which
     made the browser smoothly blend the bands = the "blurry transitions" bug.) */
  background: linear-gradient(to bottom,
    var(--from) 0 20%,
    color-mix(in srgb, var(--to) 25%, var(--from)) 20% 40%,
    color-mix(in srgb, var(--to) 50%, var(--from)) 40% 60%,
    color-mix(in srgb, var(--to) 75%, var(--from)) 60% 80%,
    var(--to) 80% 100%);
}

/* ----------------------------------------------------------
   MOBILE NAV — hamburger + full-screen menu (≤768px)
   ---------------------------------------------------------- */
.mobile-bar { display: none; }
.mobile-menu { display: none; }
.nav-toggle {
  width: 42px; height: 42px; padding: 0; margin: 0;
  border: none; background: none; cursor: url("cursors/hand.png") 6 1, pointer;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px;
}
.nav-toggle-bar { display: block; width: 26px; height: 2px; background: #fff; transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease; }
.mobile-bar.is-light .nav-toggle-bar { background: var(--n900); }
body.menu-open .nav-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); }
body.menu-open .nav-toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); }
body.menu-open .nav-toggle-bar { background: #fff; }

@media (max-width: 768px) {
  .nav-stacked, .nav-bar, [class="cta"] { display: none !important; }  /* hide the floating NAV cta only — keep section/footer CTAs */
  .mobile-bar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: 56px; padding: 0 var(--gut);
    background: rgba(0, 74, 255, 0.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.3s ease;
  }
  .mobile-bar .wordmark { font-size: var(--fs-md); }
  .mobile-bar.is-light .wordmark { color: var(--n900); text-shadow: none; }
  .mobile-menu {
    display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
    overflow-y: auto;
    position: fixed; inset: 0; z-index: 59;
    padding: 80px var(--gut) var(--gut);
    background: var(--blue);
    transform: translateY(-100%);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .mobile-menu { transform: translateY(0); }
  .mobile-menu a {
    font-family: var(--display); font-weight: 400; font-synthesis: none;
    font-size: var(--fs-lg); line-height: 1.2;
    color: #fff; text-decoration: none; padding: 9px 0;
  }
  /* small mono section heading (Programs / Company) */
  .mobile-menu .mm-label {
    font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
    font-size: var(--fs-label); color: rgba(255, 255, 255, 0.55);
    margin: 22px 0 6px; padding: 0;
  }
  .mobile-menu .mm-label:first-of-type { margin-top: 6px; }
  /* indented child links under a heading */
  .mobile-menu .mm-sub { display: flex; flex-direction: column; gap: 0; }
  .mobile-menu .mm-sub a {
    font-family: var(--display); font-weight: 400; font-synthesis: none;
    font-size: var(--fs-lg); line-height: 1.2;
    color: rgba(255, 255, 255, 0.92); padding: 7px 0;
    display: flex; align-items: center; gap: 13px;
  }
  .mobile-menu .mm-sub a { gap: 13px; }
  .mobile-menu .mm-art { width: 30px; height: auto; opacity: 0.85; flex: none; }
  .mobile-menu > a:has(.mm-art) { display: inline-flex; align-items: center; gap: 13px; }
  .mobile-menu a.mm-cta {
    font-family: var(--mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em;
    margin-top: 26px; padding: 16px; text-align: center;
    background: #fff; color: var(--n900);
  }
  /* The mobile menu background is recolored to the current section by the nav scroll logic.
     On a light (white) section the menu goes white, so flip its text/icons/CTA/hamburger to dark. */
  .mobile-menu { transition: background 0.3s ease; }
  .mobile-menu.mm-light a { color: var(--n900); }
  .mobile-menu.mm-light .mm-label { color: rgba(0, 0, 0, 0.5); }
  .mobile-menu.mm-light .mm-sub a { color: rgba(0, 0, 0, 0.85); }
  .mobile-menu.mm-light .mm-art { filter: brightness(0); opacity: 0.6; }
  .mobile-menu.mm-light a.mm-cta { background: var(--n900); color: #fff; }
  body.menu-open .mobile-bar.is-light .nav-toggle-bar { background: var(--n900); }
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */
@media (max-width: 680px) {
  .solve-grid { grid-template-columns: 1fr; }
  .dist-stats { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  :root { --pad: 24px; --gut: 24px; --pad-y: 24px; }
  /* ATF = exactly one screen: dvh tracks the visible area as the URL bar
     shows/hides, so the next (blue) section never peeks into the first screen */
  .hero { min-height: 100dvh; }
  /* hero headline: way bigger, right-anchored (same staircase direction as desktop) */
  .hero-title {
    left: var(--pad); right: var(--pad);
    align-items: flex-end; text-align: right;
    font-size: clamp(52px, 16.5vw, 140px);
    line-height: 0.92; letter-spacing: -0.01em;
    bottom: 100px;
  }
  .hero-foot { font-size: var(--fs-micro); letter-spacing: 0.03em; gap: 12px; }
  /* big bottom wordmark: scale down so "Demand Curve" never overflows */
  .bigmark { font-size: clamp(38px, 12.5vw, 110px); }

  /* social proof: single column, 4 stacked rows */
  .stats-grid { grid-template-columns: 1fr; }

  /* pinned scroll sections: pin BELOW the nav (88px) and center within that
     region, so the text is centered AND always has space under the nav bar */
  /* stabilize the scroll tracks in svh too (the base uses vh, which resizes as the mobile URL bar
     hides/shows -> that's what makes the sticky pin lurch). svh stays put -> no jump. */
  .story { height: auto; }
  .signal { height: auto; }
  .story-pin { top: auto; height: auto; }
  .signal-pin { top: auto; height: auto; flex-direction: column; justify-content: center; }
  /* Signal decos hidden on mobile - the wave strip + 6 paragraphs + emblem won't all fit the pinned viewport, and the copy is the priority */
  .signal-deco { display: none; }
  .story-copy { font-size: var(--fs-xl); line-height: 1.28; }
  /* readable copy (text-size-adjust now stops iOS inflating it); one jargon para trimmed on mobile to keep the stack short enough that the owl never clips */
  .signal-para { font-size: clamp(18px, 4.9vw, 22px); line-height: 1.24; margin: 0 0 10px; }
  .signal-trim { display: none; }
  .signal-overline { margin-bottom: 12px; }
  .signal-emblem { width: clamp(76px, 18vw, 98px); margin: 0 0 14px; }

  /* Frontier top meta line: stack + center so it doesn't mush together */
  .fr-meta { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
  .fr-kicker { letter-spacing: 0.18em; gap: 8px; }

  /* results: align text + cards to the page gutter like every other section... */
  .results .section-wrap, .results-cards { padding: 0 var(--pad); }
}

/* ----------------------------------------------------------
   PROGRAM CARDS — big standalone cards (shared: All Programs
   page + homepage services). Moved here from programs.css so
   the homepage (v2.css only) can use them.
   ---------------------------------------------------------- */
.prog-cards { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.pcard {
  --accent: var(--blue);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(32px, 4vw, 60px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.018);
  text-decoration: none;
  transition: border-color 0.45s ease, background 0.45s ease;
}
.pcard:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); }
.pcard-meta { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(16px, 2.5vh, 26px); }
.pcard-dot { width: 10px; height: 10px; flex: 0 0 auto; background: var(--accent); }
.pcard-num { font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--n500); }
.pcard-name {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(36px, 5.4vw, 76px); line-height: 0.95; letter-spacing: -0.02em;
  color: #fff; margin: 0; transition: color 0.4s ease;
}
.pcard:hover .pcard-name { color: var(--accent); }
.pcard-desc { font-family: var(--body); font-size: var(--fs-md); line-height: 1.55; color: var(--n400); margin: clamp(14px, 2vh, 22px) 0 0; max-width: 52ch; }
.pcard-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(18px, 2.5vh, 26px) 0 0; padding: 0; }
.pcard-tags li {
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.06em;
  color: var(--n400); border: 1px solid rgba(255, 255, 255, 0.16); padding: 6px 11px;
}
.pcard-cta {
  flex: 0 0 auto; align-self: end; white-space: nowrap;
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.08em;
  color: #fff; display: inline-flex; align-items: center; gap: 9px; transition: color 0.35s ease;
}
.pcard-cta .arrow { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pcard:hover .pcard-cta { color: var(--accent); }
.pcard:hover .pcard-cta .arrow { transform: translateX(5px); }
.pcard-brk { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pcard-brk i { position: absolute; width: 12px; height: 12px; border: 0 solid var(--accent); opacity: 0; transition: opacity 0.4s ease; }
.pcard:hover .pcard-brk i { opacity: 0.85; }
.pcard-brk .tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.pcard-brk .tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.pcard-brk .bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.pcard-brk .br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
@media (max-width: 760px) {
  .pcard { grid-template-columns: 1fr; align-items: start; gap: clamp(22px, 5vw, 30px); }
  .pcard-cta { align-self: start; }
  .pcard-desc { font-size: var(--fs-sm); }   /* 20px reads too big on a phone */
}

/* ----------------------------------------------------------
   CASE-STUDY MARQUEE LINKS + POPUP (homepage social proof)
   Interactive client names: brighter than the dim logos, with an
   "open" icon; hover/click opens the written case study.
   ---------------------------------------------------------- */
.cs-link {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(22px, 2.6vw, 38px); line-height: 1;
  color: rgba(255, 255, 255, 0.62);
  background: none; border: none; padding: 0; margin: 0; cursor: url("cursors/hand.png") 6 1, pointer;
  white-space: nowrap; transition: color 0.2s ease;
}
.cs-link:hover { color: #fff; }
.cs-ico { width: 0.5em; height: 0.5em; flex: 0 0 auto; opacity: 0.65; transition: opacity 0.2s ease, transform 0.25s ease; }
.cs-link:hover .cs-ico { opacity: 1; transform: translate(2px, -2px); }

.cs-modal { position: fixed; inset: 0; z-index: 9985; display: none; align-items: center; justify-content: center; padding: 24px; }
.cs-modal.is-open { display: flex; }
.cs-scrim { position: absolute; inset: 0; background: rgba(10, 11, 11, 0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cs-card { position: relative; z-index: 1; width: min(640px, 92vw); max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; background: var(--blue); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45); }
.cs-card::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; mix-blend-mode: overlay; opacity: 0.14; }
.cs-content { position: relative; z-index: 1; overflow-y: auto; padding: clamp(28px, 4vw, 48px); }
.cs-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; background: none; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; font-size: 20px; line-height: 1; cursor: url("cursors/hand.png") 6 1, pointer; z-index: 3; }
.cs-close:hover { border-color: #fff; }
.cs-eyebrow { font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--b300); }
.cs-name { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(34px, 4.5vw, 52px); line-height: 1.0; color: #fff; margin: 12px 0 0; }
.cs-desc { font-family: var(--body); font-size: var(--fs-sm); line-height: 1.55; color: rgba(255,255,255,0.85); margin: 12px 0 0; max-width: 52ch; }
.cs-statbar { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 44px); margin: clamp(24px, 4vh, 34px) 0; padding: clamp(20px, 3vh, 26px) 0; border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.cs-stat { display: flex; flex-direction: column; gap: 6px; }
.cs-stat-num { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(30px, 4vw, 46px); line-height: 1; color: #fff; }
.cs-stat-label { font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--b300); }
.cs-h { display: block; font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.14em; color: var(--b300); margin: 22px 0 10px; }
.cs-p { font-family: var(--body); font-size: var(--fs-sm); line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0; }
.cs-list, .cs-results { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cs-list li, .cs-results li { font-family: var(--body); font-size: var(--fs-sm); line-height: 1.5; color: rgba(255,255,255,0.85); padding-left: 22px; position: relative; }
.cs-list li::before { content: '\2192'; position: absolute; left: 0; color: rgba(255,255,255,0.55); }
.cs-results li::before { content: '\2713'; position: absolute; left: 0; color: #fff; }
.cs-quote { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: var(--fs-h3); line-height: 1.3; color: #fff; margin: 26px 0 0; }
.cs-quote-attr { font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.06em; color: var(--b300); margin: 10px 0 0; }

/* Light variant — for the modal opened from a WHITE section (e.g. paid-media case studies) */
.cs-modal--light .cs-card { background: #ffffff; border-color: var(--n200); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22); }
.cs-modal--light .cs-card::before { display: none; }
.cs-modal--light .cs-close { border-color: var(--n300); color: var(--n700); }
.cs-modal--light .cs-close:hover { border-color: var(--n900); color: var(--n900); }
.cs-modal--light .cs-eyebrow,
.cs-modal--light .cs-stat-label,
.cs-modal--light .cs-h,
.cs-modal--light .cs-quote-attr { color: var(--n500); }
.cs-modal--light .cs-name,
.cs-modal--light .cs-stat-num,
.cs-modal--light .cs-quote { color: var(--n900); }
.cs-modal--light .cs-desc,
.cs-modal--light .cs-p,
.cs-modal--light .cs-list li,
.cs-modal--light .cs-results li { color: var(--n600); }
.cs-modal--light .cs-statbar { border-top-color: var(--n200); border-bottom-color: var(--n200); }
.cs-modal--light .cs-list li::before { color: var(--n400); }
.cs-modal--light .cs-results li::before { color: var(--n900); }

/* ----------------------------------------------------------
   FRONTIER SCROLL — an unrolled black & white parchment scroll
   under the broadsheet (homepage). Renaissance rule-work on the
   sheet, rolled paper cylinders on both ends, ink CTA.
   ---------------------------------------------------------- */
.fr-scroll-wrap { display: flex; justify-content: center; margin-top: clamp(60px, 9vh, 104px); }
.fr-scroll {
  position: relative; display: flex; align-items: center;
  width: min(100%, 1000px);
  filter: drop-shadow(0 22px 38px rgba(0, 0, 0, 0.5));
}

/* the rolled-up ends — paper cylinders. Absolutely positioned so the
   scroll can UNROLL from the center as it scrolls into view. */
.fr-scroll { --rw: clamp(28px, 3.6vw, 44px); }
.fr-roll {
  position: absolute; z-index: 2; top: -16px; bottom: -16px;
  width: var(--rw); border-radius: calc(var(--rw) / 2);
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0 1px, rgba(0, 0, 0, 0) 1px 7px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(90deg, #17191c 0%, #3a3f45 9%, #6e757d 19%, #b7bdc4 33%, #dfe3e7 43%, #b2b8bf 54%, #757c84 68%, #3d4248 84%, #131517 100%);
  box-shadow:
    inset 0 0 0 1px rgba(23, 24, 24, 0.45),
    inset -3px 0 6px rgba(0, 0, 0, 0.18);
  will-change: left;
}
.fr-roll::before, .fr-roll::after {
  content: ''; position: absolute; left: 18%; right: 18%; height: 7px; border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, #d6dade 0 1px, #7d838b 1px 2.5px, #34383d 2.5px 4px);
  box-shadow: 0 0 0 1px rgba(23, 24, 24, 0.55), inset 0 1px 1px rgba(0, 0, 0, 0.4);
}
.fr-roll::before { top: -3px; }
.fr-roll::after { bottom: -3px; }
.fr-roll--l { left: calc(var(--rw) * -0.4); }
.fr-roll--r { left: calc(100% - var(--rw) * 0.6); transform: scaleX(-1); }

/* the open sheet — clipped shut at the center, unrolls outward */
.fr-sheet {
  position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; width: 100%;
  padding: clamp(32px, 5vh, 52px) clamp(64px, 9vw, 116px);
  background:
    linear-gradient(rgba(23, 24, 24, 0.025) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, rgba(23, 24, 24, 0.025) 1px, rgba(0, 0, 0, 0) 1px),
    #f8f8f6;
  background-size: 30px 30px, 30px 30px, auto;
  color: #171818; text-align: center;
  border-top: 1px solid rgba(23, 24, 24, 0.45);
  border-bottom: 1px solid rgba(23, 24, 24, 0.45);
  will-change: clip-path;
}
.fr-scroll-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(13px, 2vh, 18px);
}

/* renaissance rule-work */
.fr-scroll-rule { display: flex; align-items: center; gap: 10px; width: min(100%, 440px); color: #171818; }
.fr-scroll-rule .ln { flex: 1; height: 1px; background: currentColor; opacity: 0.45; }
.fr-scroll-rule .dia { width: 6px; height: 6px; border: 1px solid currentColor; opacity: 0.7; transform: rotate(45deg); flex: 0 0 auto; }

.fr-scroll-kicker { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(23, 24, 24, 0.6); }
.fr-scroll-title {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(19px, 2vw, 27px); line-height: 1.35;
  color: #171818; margin: 0; max-width: 38ch; text-wrap: balance;
}

/* the CTA — double-framed ink button, brackets + diamonds, ink fill on hover */
.fr-cta-frame { display: inline-block; padding: 5px; border: 1px solid rgba(23, 24, 24, 0.3); margin-top: clamp(4px, 1vh, 8px); }
.fr-scroll-cta {
  position: relative; overflow: hidden; z-index: 0;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.12em;
  color: #171818; border: 1px solid #171818; padding: 14px 28px; text-decoration: none;
  transition: color 0.25s ease;
}
.fr-scroll-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #171818; transform: scaleY(0); transform-origin: bottom; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.fr-scroll-cta:hover { color: #f8f8f6; }
.fr-scroll-cta:hover::before { transform: scaleY(1); }
.fr-scroll-cta .orn { font-size: 10px; line-height: 1; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fr-scroll-cta:hover .orn:first-of-type { transform: translateX(-3px) rotate(180deg); }
.fr-scroll-cta:hover .orn:last-of-type { transform: translateX(3px) rotate(180deg); }
.fr-scroll-cta .brk { position: absolute; inset: 5px; color: currentColor; pointer-events: none; }
.fr-scroll-cta .brk i { position: absolute; width: 8px; height: 8px; border: 0 solid currentColor; }
.fr-scroll-cta .brk .tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.fr-scroll-cta .brk .tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.fr-scroll-cta .brk .bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.fr-scroll-cta .brk .br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

@media (max-width: 768px) {
  .fr-scroll { width: 100%; }
  .fr-roll { margin: -12px 0; }
  .fr-sheet { padding: 28px clamp(34px, 11vw, 48px); }
  .fr-scroll-cta { padding: 12px 18px; letter-spacing: 0.08em; }
}

/* ============================================================
   THE OPEN LIBRARY — Nixie counter (replaces the parchment scroll)
   Monochrome white vacuum-tube readout on the dark Frontier panel.
   Shares the section's hairline rules + crop-marks so it reads as
   the closing plate of the same proof sheet.
   ============================================================ */
.fr-nixie-wrap { display: flex; justify-content: center; margin-top: clamp(60px, 9vh, 104px); }
.fr-nixie {
  position: relative; width: min(100%, 1000px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.6vh, 26px);
  padding: clamp(36px, 5.4vh, 60px) clamp(28px, 6vw, 72px);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fr-nixie .fr-mark { color: rgba(255, 255, 255, 0.4); }

.fr-nixie-kicker { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

.fr-nixie-row { display: flex; gap: clamp(5px, 0.9vw, 9px); align-items: flex-end; }
.fr-nixie-tube {
  position: relative; overflow: hidden;
  width: clamp(34px, 5.2vw, 66px); height: clamp(56px, 8.4vw, 104px);
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: radial-gradient(120% 88% at 50% 26%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0.5));
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.1s ease;
}
.fr-nixie-tube::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5px); }
.fr-nixie-tube span {
  font-family: var(--display); font-weight: 400; font-synthesis: none; line-height: 1;
  font-size: clamp(30px, 5vw, 60px); color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 28px rgba(255, 255, 255, 0.35);
}
.fr-nixie-tube.comma { width: auto; border: none; background: none; }
.fr-nixie-tube.comma::before { display: none; }

.fr-nixie-unit { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }

.fr-nixie-title {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(19px, 2vw, 27px); line-height: 1.35;
  color: #f3f3f1; margin: 0; max-width: 38ch; text-wrap: balance;
}

/* CTA — reuse the ink button, recoloured white for the dark panel */
.fr-nixie .fr-cta-frame { border-color: rgba(255, 255, 255, 0.3); }
.fr-nixie .fr-scroll-cta { color: #f8f8f6; border-color: rgba(255, 255, 255, 0.85); }
.fr-nixie .fr-scroll-cta::before { background: #f8f8f6; }
.fr-nixie .fr-scroll-cta:hover { color: #171818; }

@media (max-width: 768px) { .fr-nixie-row { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .fr-nixie-tube { transition: none; } }

/* ---- stat engravings (homepage): white-ink etchings beside each stat ---- */
.stat--art { gap: clamp(18px, 2.6vh, 26px); }
.stat--art .stat-copy { display: flex; flex-direction: column; gap: 12px; align-items: center; min-width: 0; text-align: center; }
.stat--art .stat-num { font-size: clamp(38px, 3.4vw, 54px); line-height: 1; }
.stat-art { width: clamp(68px, 6.6vw, 96px); height: auto; flex: 0 0 auto; opacity: 0.9; }
@media (max-width: 768px) {
  .stat--art .stat-num { font-size: 34px; }
  .stat-art { width: 58px; }
}

/* ---- program-card emblems: faint etchings, accent glow on hover ---- */
.pcard-main, .pcard-cta { position: relative; z-index: 1; }
.pcard-fig {
  position: absolute; right: clamp(32px, 6vw, 88px); top: 50%; transform: translateY(-50%);
  width: clamp(88px, 9.5vw, 150px); aspect-ratio: 1 / 1; pointer-events: none; z-index: 0;
}
.pcard-fig::before {
  content: ''; position: absolute; inset: -45%; border-radius: 50%;
  background: radial-gradient(circle, var(--accent), rgba(0, 0, 0, 0) 62%);
  opacity: 0; transition: opacity 0.5s ease;
}
.pcard-art { position: relative; width: 100%; height: auto; opacity: 0.4; transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pcard:hover .pcard-fig::before { opacity: 0.22; }
.pcard:hover .pcard-art { opacity: 0.9; transform: scale(1.05); }

/* ledger tag line (replaces the boxed chips) */
.pcard-ledger { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: clamp(18px, 2.5vh, 26px) 0 0; font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--n400); }
.pcard-ledger i { font-style: normal; font-size: 8px; color: var(--n600); }

@media (max-width: 760px) {
  .pcard { grid-template-columns: 1fr; }
  .pcard-fig { position: static; width: 72px; right: auto; top: auto; transform: none; margin-bottom: 2px; }
  .pcard-art { opacity: 0.75; }
}

/* tap/keyboard highlight - mobile taps don't fire :hover */
.pcard:focus-within, .pcard:active { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); }
.pcard:focus-within .pcard-name, .pcard:active .pcard-name { color: var(--accent); }
.pcard:focus-within .pcard-cta, .pcard:active .pcard-cta { color: var(--accent); }
.pcard:focus-within .pcard-fig::before, .pcard:active .pcard-fig::before { opacity: 0.22; }
.pcard:focus-within .pcard-art, .pcard:active .pcard-art { opacity: 0.9; }


/* ---- social proof: section head + Mondwest subtext above the logos ---- */
.social-head { margin-bottom: clamp(44px, 7vh, 80px); display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 46px); }
.social-head-txt { flex: 0 1 auto; }
.social-laurel { flex: none; width: clamp(46px, 7vw, 92px); height: auto; opacity: 0.9; user-select: none; pointer-events: none; }
.social-laurel--r { transform: scaleX(-1); }
@media (max-width: 600px) { .social-laurel { width: 38px; } .social-head { gap: 10px; } }
.social-head .overline { display: block; margin-bottom: 16px; }
.social-sub {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: clamp(20px, 2.2vw, 30px); line-height: 1.3;
  color: #fff; text-align: center;
  margin: clamp(72px, 11vh, 130px) auto 0; padding: 0 var(--gut); max-width: 30ch;
}

/* ---- service hero emblem: the program's etching as an image overline ---- */
.pm-hero-emblem { width: clamp(64px, 7vw, 96px); height: auto; align-self: flex-start; margin: 0 0 clamp(18px, 3vh, 28px); opacity: 0.95; }
@media (max-width: 768px) { .pm-hero-emblem { width: 56px; margin-bottom: 14px; } }


/* ---- marquees on dark sections: 20% white is too dim on n900 ---- */
.pm-proof .marquee__group span, .includes .marquee__group span { color: rgba(255, 255, 255, 0.34); }
.pm-proof .marquee__group span:hover, .includes .marquee__group span:hover { color: rgba(255, 255, 255, 0.65); }

/* ---- mega-menu program emblems ---- */
.mega-art { width: 58px; height: auto; grid-row: 1 / 3; align-self: center; opacity: 0.55; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mega-card:hover .mega-art { opacity: 1; transform: translateX(2px); }
.mega--light .mega-art, .mega--svc .mega-art { filter: brightness(0); opacity: 0.45; }
.mega--light .mega-card:hover .mega-art, .mega--svc .mega-card:hover .mega-art { opacity: 0.8; }

/* ---- Frontier broadsheet: newspaper scotch rules (thick/thin stacked lines) ---- */
.fr-lead h3 { position: relative; padding-bottom: 14px; margin-bottom: 14px; }
.fr-lead h3::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0 2px, rgba(0, 0, 0, 0) 2px 4px, rgba(255, 255, 255, 0.28) 4px 5px);
}
.fr-subgrid article { border-top: 0; position: relative; padding-top: 22px; }
.fr-subgrid article::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0 2px, rgba(0, 0, 0, 0) 2px 4px, rgba(255, 255, 255, 0.3) 4px 5px, rgba(0, 0, 0, 0) 5px 6px, rgba(255, 255, 255, 0.18) 6px 7px);
}

/* ── distribution: printing press etching ── */
.dist .section-wrap { position: relative; }
.dist-art { position: absolute; right: var(--gut); top: 50%; transform: translateY(-46%); width: clamp(240px, 23vw, 370px); opacity: 0.55; pointer-events: none; }
@media (max-width: 1100px) { .dist-art { display: none; } }

/* ── homepage hero: civilization time-lapse (etched video, screen-blended) ── */
.hero-civ { position: absolute; left: var(--pad); bottom: clamp(64px, 11vh, 120px); width: min(64vw, 1000px); mix-blend-mode: screen; opacity: 0.92; z-index: 1; pointer-events: none; }
@media (max-width: 900px) { .hero-civ { display: none; } }

/* drafting-sheet registration crosses */
.fr-mark { position: absolute; width: 11px; height: 11px; pointer-events: none; color: rgba(23, 24, 24, 0.45); }
.fr-mark::before, .fr-mark::after { content: ''; position: absolute; background: currentColor; }
.fr-mark::before { left: 0; right: 0; top: 5px; height: 1px; }
.fr-mark::after { top: 0; bottom: 0; left: 5px; width: 1px; }
.fr-mark.tl { top: 12px; left: 14px; } .fr-mark.tr { top: 12px; right: 14px; }
.fr-mark.bl { bottom: 12px; left: 14px; } .fr-mark.br { bottom: 12px; right: 14px; }

/* Signal section emblem - sits above "Meet Signal", black on the white panel */
.signal-emblem { display: none; }   /* obelisk removed from Signal (was: block, clamp(120px,15vw,190px)) */

/* ── service-page hero: unified staggered entrance ──────────────────────────
   Layer 1 (ALL users, incl. reduce-motion + every viewport): opacity fade + stagger.
   Layer 2 (motion OK): adds the signature blur-rise vocabulary + backdrop scale.
   The headline keeps its own .word mask-rise (brand signature reveal).
   Order follows hierarchy: backdrop → headline → emblem → button → chart line → rows. */

/* Layer 1 — fade-in for everyone (this is what makes it animate on mobile even with Reduce Motion on) */
.pm-hero-bg, .pm-hero-emblem, .pm-spec-row { opacity: 0; transition: opacity var(--atf-d) ease; }
.pm-hero .pm-spec { border-top-color: transparent; transition: border-top-color var(--atf-d) ease; }
.pm-hero .pm-hero-cta { opacity: 0; transition: opacity var(--atf-d) ease 0.36s, color 0.25s ease; }
.pm-hero .cta-reassure { opacity: 0; transition: opacity var(--atf-d) ease 0.52s; }   /* fades in right after the CTA */

body.loaded .pm-hero-bg,
body.loaded .pm-hero-emblem,
body.loaded .pm-spec-row,
body.loaded .pm-hero .cta-reassure,
body.loaded .pm-hero .pm-hero-cta { opacity: 1; }
body.loaded .pm-hero .pm-spec { border-top-color: rgba(255, 255, 255, 0.16); }

/* stagger (CTA delay is baked into its transition above, so it's excluded here) */
body.loaded .pm-hero-bg       { transition-delay: 0s; }
body.loaded .pm-hero-emblem   { transition-delay: 0.24s; }
body.loaded .pm-hero .pm-spec { transition-delay: 0.48s; }
body.loaded .pm-spec-row:nth-child(1) { transition-delay: 0.56s; }
body.loaded .pm-spec-row:nth-child(2) { transition-delay: 0.67s; }
body.loaded .pm-spec-row:nth-child(3) { transition-delay: 0.78s; }
body.loaded .pm-spec-row:nth-child(4) { transition-delay: 0.89s; }
body.loaded .pm-spec-row:nth-child(5) { transition-delay: 1.00s; }

/* Layer 2 — the signature blur-rise motion, added only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .pm-hero-bg {
    transform: scale(1.05) translateY(20px); filter: blur(11px);
    transition: opacity var(--atf-d-lead) ease, transform var(--atf-d-lead) var(--atf-ease), filter var(--atf-d-lead) ease;
  }
  .pm-hero-emblem, .pm-spec-row {
    transform: translateY(14px); filter: blur(5px);
    transition: opacity var(--atf-d) ease, transform var(--atf-d) var(--atf-ease), filter var(--atf-d) ease;
  }
  .pm-hero .pm-hero-cta {
    transform: translateY(14px); filter: blur(5px);
    transition: opacity var(--atf-d) ease 0.36s, transform var(--atf-d) var(--atf-ease) 0.36s, filter var(--atf-d) ease 0.36s, color 0.25s ease;
  }
  body.loaded .pm-hero-bg,
  body.loaded .pm-hero-emblem,
  body.loaded .pm-spec-row,
  body.loaded .pm-hero .pm-hero-cta { transform: none; filter: blur(0); }
}

/* ---- ADVANTAGE: 3-pillar editorial section (monochrome) ---- */
.adv { background: var(--blue); color: #fff; position: relative; padding: clamp(90px, 13vh, 170px) 0; }
.adv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(24px, 5vw, 80px); margin-bottom: clamp(50px, 7vh, 92px); flex-wrap: wrap; }
.adv-title { margin: 0; max-width: 30ch; font-size: calc(clamp(22px, 2.7vw, 38px) + 12px); line-height: 1.08; }
.outgrown { padding: clamp(90px, 15vh, 190px) 0; }
/* tighten the finale -> transition seam so the next line peeks while on the CTA (signals more page) */
.finale:has(+ .outgrown) { padding-bottom: clamp(36px, 6vh, 80px); }
.finale + .outgrown { padding-top: clamp(28px, 5vh, 60px); }
.outgrown-line { font-size: clamp(20px, 2.6vw, 34px); max-width: 40ch; margin: 0 auto; text-align: center; line-height: 1.12; }
/* Frontier-intro variant: big two-column header (H1 left, sub right) introducing the Frontier */
.outgrown--intro { padding: clamp(90px, 15vh, 190px) 0 clamp(48px, 6.5vh, 88px); }
.outgrown--intro + .frontier { padding-top: clamp(32px, 4.5vh, 60px); }
.outgrown--intro .section-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: end; }
.outgrown--intro .outgrown-line { font-size: clamp(30px, 5vw, 70px); max-width: none; margin: 0; text-align: left; line-height: 1.04; }
.outgrown-sub { font-family: var(--body); font-size: var(--fs-lead); color: rgba(255,255,255,0.72); margin: 0 0 0 auto; max-width: 22ch; text-align: right; text-wrap: balance; }
.outgrown--intro .outgrown-sub { font-size: clamp(15px, 1.3vw, 18px); }
/* mobile: the "you've hit the ceiling / we're what comes next" statement reads bigger */
@media (max-width: 600px) { .outgrown:not(.outgrown--intro) .outgrown-line { font-size: clamp(23px, 6.2vw, 32px); max-width: 20ch; } }
@media (max-width: 768px) { .outgrown--intro .section-wrap { display: block; } .outgrown-sub { margin: 18px 0 0; text-align: left; max-width: none; } }
.ol-mask { display: block; overflow: hidden; padding-top: 0.08em; }
.ol-mask-2 { margin-top: clamp(18px, 3.4vh, 40px); }   /* breathing room between the two lines */
.ol-line { display: inline-block; }
/* Expectation-setting microcopy under primary CTAs (subordinate: small, muted, tight margin) */
.cta-reassure { font-family: var(--body); font-weight: 400; font-size: 17.5px; letter-spacing: 0; line-height: 1.5; color: var(--n500); margin: 12px 0 0; max-width: 42ch; text-wrap: balance; }
.pm-hero .cta-reassure { color: rgba(23, 24, 24, 0.62); }   /* sits on the cyan service hero */
@media (max-width: 768px) { .cta-reassure { font-size: 15.5px; } }

/* FINAL CTA — black closing section above The Frontier (centered, Mondwest) */
.finale { position: relative; overflow: hidden; background: #171818; padding: clamp(120px, 20vh, 220px) 0; text-align: center; }
/* paid-media: finale CTA sits directly above the big wordmark — tighten the stack ~40% */
.finale:has(+ .seam + .ascii-banner) { padding-bottom: clamp(72px, 12vh, 132px); }
.finale + .seam:has(+ .ascii-banner) { height: clamp(38px, 5vh, 66px); }
.finale + .seam + .ascii-banner { padding-top: clamp(38px, 6vh, 78px); }
.finale .section-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.4vh, 26px); }
.finale-emblem { width: clamp(82px, 9vw, 132px); height: auto; opacity: 0.95; margin: 0 0 clamp(6px, 1vh, 12px); }
.finale-eyebrow { color: rgba(255,255,255,0.8); text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
.finale-head { margin: 0; color: #fff; font-size: clamp(34px, 4.6vw, 70px); line-height: 1.02; max-width: 16ch; letter-spacing: -0.015em; text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 0 44px rgba(255,255,255,0.34), 0 0 16px rgba(255,255,255,0.28); }
/* Hyperspace warp: hidden at rest, fades in ONLY while the "Let's talk" CTA is hovered/focused.
   Painted on the section's own #171818 and masked so the streaks dissolve toward the edges
   instead of clipping at a hard rectangle. */
.finale-warp { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.55s ease;
  /* The vignette IS this mask: radii are < 50% of the box, so the streaks fade fully to
     transparent BEFORE any edge — dissolving into the section's own #171818 instead of
     clipping at the rectangle. No dark overlay, so the bg stays exactly n900. */
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 40%, transparent 92%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 40%, transparent 92%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.finale:has(.cta-finale:hover) .finale-warp,
.finale:has(.cta-finale:focus-visible) .finale-warp { opacity: 1; }
.finale .section-wrap { z-index: 2; }
.finale-reassure { color: rgba(255,255,255,0.85); margin-top: 2px; text-align: center; text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
@media (max-width: 768px) { .finale { padding: clamp(84px, 16vh, 140px) 0; } }
.adv-intro { font-family: var(--body); font-weight: 300; font-size: calc(clamp(13px, 1.3vw, 15px) + 3px); line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 420px; text-align: right; text-wrap: balance; margin: 0 0 8px; position: relative; top: 4px; }
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,0.22); }
.adv-pillar { padding: clamp(32px, 3vw, 48px) clamp(24px, 2.4vw, 44px) 0; border-left: 1px solid rgba(255,255,255,0.14); }
.adv-pillar:first-child { border-left: none; padding-left: 0; }
.adv-kicker { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: rgba(255,255,255,0.55); }
.adv-fig { display: block; width: clamp(104px, 10vw, 152px); aspect-ratio: 1 / 1; margin: clamp(24px, 3.4vh, 40px) 0 clamp(22px, 3vh, 32px); }
.adv-art { width: 100%; height: 100%; object-fit: contain; object-position: left center; opacity: 0.92; transition: transform 0.55s cubic-bezier(0.2,0.7,0.2,1), opacity 0.4s ease; }
.adv-pillar:hover .adv-art { transform: scale(1.06); opacity: 1; }
.adv-name { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.04; margin: 0 0 14px; }
.adv-desc { font-family: var(--body); font-weight: 300; font-size: clamp(14px, 1vw, 15.5px); line-height: 1.62; color: rgba(255,255,255,0.7); margin: 0 0 clamp(32px, 4vh, 48px); max-width: 34ch; }
@media (max-width: 860px) {
  .adv-grid { grid-template-columns: 1fr; border-top: none; }
  .adv-pillar { border-left: none; border-top: 1px solid rgba(255,255,255,0.16); padding: clamp(28px,5vw,40px) 0 0; }
  .adv-head { flex-direction: column; align-items: flex-start; }
  .adv-intro { text-align: left; max-width: none; }
  .adv-desc { max-width: none; }
}

/* ---- WHO IT'S FOR: oversized numerals (#1, dark, monochrome) ---- */
.wif { background: var(--n900); color: #fff; position: relative; padding: clamp(90px, 13vh, 170px) 0 clamp(56px, 8vh, 104px); }   /* trimmed bottom so the manicule sits a bit closer to the Services section below */
.wif-kicker { display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: rgba(255,255,255,0.42); margin-bottom: 22px; }
.wif-title { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: var(--fs-h1); line-height: 1.04; margin: 0 0 clamp(44px, 7vh, 84px); color: #fff; }
.wif-list { list-style: none; margin: 0; padding: 0; }
.wif-row { display: grid; grid-template-columns: minmax(56px, 1.1fr) 9fr; gap: clamp(20px, 4vw, 56px); align-items: baseline;
  padding: clamp(26px, 4.4vh, 46px) 0; border-top: 1px solid rgba(255,255,255,0.1);
  opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.wif-row:first-child { border-top: none; }   /* no top line */
/* no bottom line on the last row either */
.wif.in .wif-row { opacity: 1; transform: none; }
.wif.in .wif-row:nth-child(1) { transition-delay: 0.06s; }
.wif.in .wif-row:nth-child(2) { transition-delay: 0.16s; }
.wif.in .wif-row:nth-child(3) { transition-delay: 0.26s; }
.wif.in .wif-row:nth-child(4) { transition-delay: 0.36s; }
.wif-no { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(26px, 3.2vw, 46px); line-height: 0.92; color: rgba(255,255,255,0.32); transition: color 0.4s ease; }
.wif-stmt { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.08; color: rgba(255,255,255,0.92); transition: color 0.4s ease; }
.wif-row:hover .wif-no, .wif-row:hover .wif-stmt { color: #fff; }
.wif-foot { text-align: center; margin-top: clamp(50px, 7.5vh, 90px); }
.wif-foot-line { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(20px, 2.5vw, 32px); color: rgba(255,255,255,0.9); margin: 0 0 clamp(18px, 2.6vh, 30px); }
.wif-hand { width: clamp(58px, 5.5vw, 86px); height: auto; opacity: 0.92; display: block; margin: 0 auto; animation: wif-bob 2.4s ease-in-out infinite; }
@keyframes wif-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .wif-hand { animation: none; } .wif-row { opacity: 1; transform: none; } }
@media (max-width: 640px) { .wif-row { grid-template-columns: 1fr; gap: 6px; } .wif-no { font-size: 22px; } }

/* ---- HOW WE COMPARE: premium comparison table (sharp, glow + light rays) ---- */
.cmp-wrap { margin-top: clamp(28px, 4vh, 48px); padding: 24px 0 0; }   /* no bottom gap: the model-cta attaches flush as the table's closing row */
.cmp { --lw: 264px; position: relative; display: grid; grid-template-columns: var(--lw) repeat(5, 1fr); min-width: 1060px; }
/* highlighted Demand Curve column — glowing, lifted winner card (sharp corners, light rays, no shine) */
.cmp-hl { position: absolute; z-index: 0; top: -38px; bottom: 6px; left: var(--lw); width: calc((100% - var(--lw)) / 5); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 20px 56px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.16); }
/* Extra localized film grain in the Demand Curve column (~20% more texture than the page grain) */
.cmp-hl::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.12;
}
.cmp-cell { position: relative; z-index: 1; padding: clamp(16px,2.2vh,24px) clamp(10px,1.2vw,18px); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.08); min-height: 74px; }
.cmp-corner { border-bottom: none; min-height: 0; }
.cmp-cell:nth-last-child(-n+6) { border-bottom: none; }   /* no line under the last row (6-column grid) */
.cmp-h { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; color: rgba(255,255,255,0.45); padding-top: clamp(8px,1.6vh,18px); padding-bottom: 18px; align-items: flex-end; text-align: center; }
.cmp-dc-h { font-family: var(--display); font-synthesis: none; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: clamp(17px,1.7vw,23px); color: #fff; white-space: nowrap; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.cmp-crown { width: clamp(52px, 4.4vw, 72px); height: auto; opacity: 0.95; }
.cmp-row-label { justify-content: center; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.cmp-feat { font-family: var(--body); font-weight: 500; font-size: clamp(15px,1.25vw,17px); color: #fff; line-height: 1.2; }
.cmp-sub { font-family: var(--body); font-weight: 300; font-size: 12.5px; color: rgba(255,255,255,0.48); line-height: 1.3; }
/* clean sharp glyph marks (no rounded badges) */
.cmp-mark { width: 30px; height: 30px; display: grid; place-items: center; }
.cmp-mark svg { width: 21px; height: 21px; }
.cmp-mark.yes { color: #fff; }
.cmp-mark.no { color: rgba(255,255,255,0.26); }
.cmp-mark.mid { color: rgba(255,255,255,0.4); }
/* the winner column stamps its checks in one-by-one on scroll */
.cmp-dc-cell .cmp-mark { opacity: 0; transform: scale(0.4); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2,1.4,0.4,1); }
.cmp.in .cmp-dc-cell .cmp-mark { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .cmp-dc-cell .cmp-mark { opacity: 1; transform: none; transition: none; } }
/* On mobile the table scrolls horizontally (overflow-x:auto), which also clips vertical
   overflow — so the highlight's -38px top (the crown tab) got cut off. Pad the scroll
   container's top so the highlight sits fully inside it. */
@media (max-width: 1040px) { .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 50px;
  /* right-edge fade = "more columns this way" cue (mask is fixed to the box, not the scrolled content) */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), rgba(0,0,0,0.25));
  mask-image: linear-gradient(90deg, #000 calc(100% - 34px), rgba(0,0,0,0.25)); } }
/* MOBILE: shrink the whole matrix so the highlighted Demand Curve column sits right next to the
   feature labels (both visible without scrolling); the 4 alternatives scroll into view. */
@media (max-width: 760px) {
  /* 132/572: the 3rd value column peeks ~34px at 390px (was a 16px sliver
     that read as a stray divider, not a scroll cue) */
  .cmp { --lw: 132px; min-width: 572px; }
  .cmp-cell { padding: 11px 6px; min-height: 54px; }
  .cmp-feat { font-size: 13px; line-height: 1.25; }
  .cmp-sub { font-size: 10.5px; }
  .cmp-h { font-size: 9px; padding-bottom: 10px; }
  .cmp-dc-h { font-size: 14px; gap: 3px; }
  .cmp-crown { width: 30px; }
  .cmp-mark { width: 22px; height: 22px; }
  .cmp-mark svg { width: 16px; height: 16px; }
  /* Drop the heavy floating winner-slab on mobile (it reads as an awkward grey block + empty space
     above when squeezed). Tint the Demand Curve column cells flat instead — cleaner, Superside-like. */
  .cmp-hl { display: none; }
  .cmp-dc-h, .cmp-dc-cell { background: rgba(255,255,255,0.06); }
}

/* ============================================================
   SERVICES — big 2-up product cards (Direction A)
   ============================================================ */
/* services: two bordered panels of 3, vertical dividers only, 48px gap between rows */
.programs .section-wrap{ max-width:1600px; }   /* match the site-wide 1600 container */
.svc-grid{ display:flex; flex-direction:column; gap:0; max-width:100%; }
.svc-row{ display:grid; grid-template-columns:repeat(3,1fr); border-top:none; border-bottom:none; border-left:1px solid rgba(255,255,255,0.12); border-right:1px solid rgba(255,255,255,0.12); }
.svc-row:first-child{ border-bottom:1px solid rgba(255,255,255,0.12); }   /* single line between the two rows */
.svc-card{ --accent:#fff; min-width:0; min-height:clamp(420px,30vw,620px); background:transparent; border-left:1px solid rgba(255,255,255,0.12); padding:clamp(40px,4vw,80px) clamp(24px,2.5vw,48px); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; text-decoration:none; color:inherit; transition:background .5s cubic-bezier(.16,1,.3,1); }
.svc-row > .svc-card:first-child{ border-left:none; }
.svc-card:hover{ background:rgba(255,255,255,0.028); }
.svc-svc{ display:block; font-family:var(--mono); text-transform:uppercase; font-size:11px; letter-spacing:0.18em; color:rgba(255,255,255,0.4); transition:color .5s cubic-bezier(.16,1,.3,1); }
.svc-card:hover .svc-svc{ color:var(--accent); }
.svc-name{ font-family:var(--display); font-weight:400; font-synthesis:none; font-size:clamp(32px,3.2vw,58px); line-height:1.04; color:#fff; margin:16px 0 0; min-height:2.1em; transition:color .5s cubic-bezier(.16,1,.3,1); }
.svc-card:hover .svc-name{ color:var(--accent); }
/* Service titles: 1 line on desktop + phones, but in the 3-col tablet band the long
   names ("GTM Engineering", "Growth Strategy") wrap raggedly. Force every two-word title
   onto two lines there so the grid stays consistent. */
.svc-wbr{ display:none; }
@media (min-width:761px) and (max-width:1000px){ .svc-name .svc-wbr{ display:inline; } }
.svc-emb{ height:clamp(132px,12.5vw,184px); width:auto; max-width:80%; object-fit:contain; margin:clamp(34px,4vw,60px) 0 clamp(30px,3.2vw,50px); opacity:0.85; transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.svc-card:hover .svc-emb{ opacity:1; transform:scale(1.05); filter:drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 80%, transparent)) drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 45%, transparent)); }
.svc-desc{ font-family:var(--body); font-weight:300; font-size:clamp(14.5px,1vw,16.5px); line-height:1.55; color:rgba(255,255,255,0.6); margin:0; max-width:34ch; min-height:3.1em; }
.svc-more{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:24px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,0.55); transition:color .4s cubic-bezier(.16,1,.3,1); }
.svc-card:hover .svc-more{ color:var(--accent); }
.svc-arr{ display:inline-block; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.svc-card:hover .svc-arr{ transform:translate(3px,-3px); }
@media (max-width:760px){
  .svc-grid{ margin-inline: calc(var(--gut) * -1); max-width: none; }   /* full-bleed: negative margins + no max-width cap so cards span the full screen width */
  .svc-row{ grid-template-columns:1fr; border-left:none; border-right:none; }
  .svc-row:first-child{ border-bottom:none; }                        /* avoid a double line between the two stacked rows */
  .svc-card{ border-left:none; border-top:1px solid rgba(255,255,255,0.12); }
  .svc-row > .svc-card:first-child{ border-top:1px solid rgba(255,255,255,0.12); }   /* keep a line above every card, incl. the first (Paid Marketing) */
  .svc-grid > .svc-row:last-child > .svc-card:last-child{ border-bottom:1px solid rgba(255,255,255,0.12); }   /* bottom line on the very last card */
}
@media (max-width:560px){ .svc-card{ padding:30px 22px; } }
/* touch devices: :hover sticks after a tap, freezing a card in its lit accent state.
   Force the resting look so cards don't get stuck "activated" on mobile. */
@media (hover: none) {
  .svc-card:hover { background: transparent; }
  .svc-card:hover .svc-svc { color: rgba(255,255,255,0.4); }
  .svc-card:hover .svc-name { color: #fff; }
  .svc-card:hover .svc-emb { opacity: 0.85; transform: none; filter: none; }
  .svc-card:hover .svc-more { color: rgba(255,255,255,0.55); }
  .svc-card:hover .svc-arr { transform: none; }
}



/* ============================================================
   SERVICES — small "Let's talk" CTA below the cards (stays in the dark section)
   ============================================================ */
.svc-cta { margin-top: clamp(48px, 7vh, 84px); display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.svc-cta-line { font-family: var(--body); font-weight: 300; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: var(--n400); margin: 0; max-width: 40ch; }
/* standard .cta made static + centered, recolored BLACK (not brand-blue): white text/border at rest,
   white panel rises on hover and the label/corners flip to black */
.cta-svc { position: relative; inset: auto; display: inline-flex; width: auto; min-width: 200px; height: 52px; padding: 0 30px; background: var(--n900); }
.cta-svc:hover .cta-label { color: #000; }
.cta-svc:hover .cta-corners .c { border-color: #000; }

/* reduce-motion: pause the Frontier headline ticker */
@media (prefers-reduced-motion: reduce) { .fr-ticker-track { animation: none !important; } }

/* ============================================================
   ENDORSEMENTS — editorial hero (Gustaf/YC) + proof grid, dark
   ============================================================ */
.praise { background: var(--n900); padding: clamp(90px, 13vh, 160px) 0; }
.praise-head { font-size: var(--fs-h1); max-width: 22ch; margin: 16px 0 clamp(40px, 6vh, 60px); }

/* ENDORSEMENTS — focal crest header (emblem + heading + soft depth glow) */
.pe-focal{ text-align:center; position:relative; margin-bottom:clamp(40px,6vh,56px); }
.pe-focal::before{ content:''; position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:560px; max-width:90%; height:320px; background:radial-gradient(50% 50% at 50% 45%, rgba(255,255,255,0.07), transparent 70%); pointer-events:none; }
.pe-crest{ position:relative; width:84px; height:auto; display:block; margin:0 auto 18px; opacity:0.95; }
.pe-focal .overline{ position:relative; }
.pe-focal .praise-head{ position:relative; margin:12px auto 0; max-width:20ch; }
.pe-subline{ position:relative; font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.42); margin:18px 0 0; }

/* ENDORSEMENTS — V17 themed columns (testimonials / recognition / results) */
.pe-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.12); }
.pe-col{ background:var(--n900); display:flex; flex-direction:column; min-width:0; }
.pe-card{ padding:clamp(26px,2.4vw,38px); display:flex; flex-direction:column; min-width:0; flex:1; border-bottom:1px solid rgba(255,255,255,0.1); text-decoration:none; color:inherit; transition:background .4s cubic-bezier(.16,1,.3,1); }
.pe-col > .pe-card:last-child{ border-bottom:none; }
/* Middle + right columns both have 4 boxes -- give them equal fixed-height rows (>= the tallest
   card's content) so their dividers line up exactly. Left column (3 testimonials) keeps flex:1. */
.pe-cols .pe-col:nth-child(2) > .pe-card,
.pe-cols .pe-col:nth-child(3) > .pe-card { flex: 1 0 auto; min-height: clamp(168px, 13.8vw, 224px); }
a.pe-card:hover{ background:rgba(255,255,255,0.028); }
.pe-kick{ font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.38); margin:0 0 16px; }
.pe-q-card{ justify-content:flex-start; }
.pe-q{ font-family:var(--body); font-weight:300; font-size:15.5px; line-height:1.55; color:rgba(255,255,255,0.9); margin:0; }
.pe-q::before{ content:'\201C'; } .pe-q::after{ content:'\201D'; }
.pe-by{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.pe-by img{ width:42px; height:42px; border-radius:50%; object-fit:cover; filter:grayscale(1) contrast(1.03); flex:0 0 auto; }
.pe-by b{ font-weight:600; font-size:13.5px; display:block; }
.pe-role{ font-size:12px; color:rgba(255,255,255,0.5); display:block; }
.pe-cred{ justify-content:flex-start; }
.pe-logo{ height:24px; width:auto; max-width:150px; object-fit:contain; align-self:flex-start; }
.pe-logo.w{ filter:brightness(0) invert(1); }
.pe-cl{ font-size:14px; color:rgba(255,255,255,0.66); line-height:1.45; margin-top:14px; }
.pe-win{ justify-content:flex-end; }
.pe-num{ font-family:var(--display); font-weight:400; font-synthesis:none; font-size:clamp(40px,3.6vw,58px); line-height:0.92; color:#fff; }
.pe-cat{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-top:10px; }
.pe-winlogo{ height:20px; width:auto; opacity:0.85; margin-top:18px; align-self:flex-start; filter:brightness(0) invert(1); }
/* Decorative fills for endorsement boxes (subtle, paint behind content) */
.pe-win{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,0.06), rgba(255,255,255,0) 55%);
}
.pe-cred{
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 1px, rgba(255,255,255,0) 1px 9px);
}
.pe-cta{ background:#fff; color:#111; justify-content:center; }
a.pe-cta:hover{ background:#f0f0f0; }
.pe-cta-k{ color:#555; font-size:13.5px; }
.pe-cta-go{ font-family:var(--display); font-size:26px; margin-top:8px; color:#111; display:block; }
@media (max-width:820px){
  .pe-cols{ grid-template-columns:1fr; }
  .pe-col > .pe-card:last-child{ border-bottom:1px solid rgba(255,255,255,0.1); }
  .pe-cols .pe-col:last-child > .pe-card:last-child{ border-bottom:none; }
}

/* HERO — editorial portrait + pull-quote */
.praise-hero { display: grid; grid-template-columns: 320px 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.praise-hero-port { position: relative; }
.praise-hero-port > img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.04); }
.praise-hero-tag { position: absolute; left: 0; bottom: 0; background: var(--n900); border: 1px solid rgba(255,255,255,0.16); border-left: none; border-bottom: none; padding: 12px 16px; line-height: 0; }
.praise-hero-tag img { width: 26px; height: 26px; }
.praise-eyebrow { display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: rgba(255,255,255,0.45); margin-bottom: 22px; }
.praise-hero-q { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.14; letter-spacing: -0.012em; color: #fff; margin: 0; }
.praise-hero-q::before { content: '\201C'; }
.praise-hero-q::after { content: '\201D'; }
.praise-hero-body .praise-who { margin-top: 28px; }

/* shared attribution */
.praise-who { display: flex; flex-direction: column; gap: 4px; }
.praise-who strong { font-family: var(--body); font-weight: 500; font-size: 16px; color: #fff; }
.praise-role { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: rgba(255,255,255,0.52); }

/* supporting quote cards */
.praise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.praise-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-width: 0; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.025); padding: clamp(24px, 2.4vw, 32px); }
.praise-card::before { content: '\201C'; font-family: var(--display); font-synthesis: none; font-size: clamp(46px, 4vw, 62px); line-height: 0.55; color: rgba(255,255,255,0.22); }
.praise-card blockquote { font-family: var(--body); font-weight: 300; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.58; color: rgba(255,255,255,0.82); margin: 0; }
.praise-cite { display: flex; align-items: center; gap: 13px; }
.praise-av { width: 44px; height: 44px; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.14); }

/* sub-row labels */
.praise-sublabel { display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: rgba(255,255,255,0.42); margin: clamp(44px, 6vh, 64px) 0 16px; }

/* "As seen in" — logo + description, hairline-divided tiles */
.praise-cred { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.10); }
.praise-cred-item { background: var(--n900); padding: clamp(22px, 1.9vw, 28px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.praise-cred-logo { height: 27px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; align-self: flex-start; filter: brightness(0) invert(1); opacity: 1; }
.praise-cred-logo--asis { filter: none; }
.praise-cred-desc { font-family: var(--body); font-weight: 300; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.62); }

/* client wins — number + category + logo */
.praise-wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.praise-win { display: flex; flex-direction: column; gap: 10px; min-width: 0; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.025); padding: clamp(24px, 2.4vw, 34px); }
.praise-win-num { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(40px, 4.6vw, 62px); line-height: 0.95; color: #fff; }
.praise-win-cat { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; color: rgba(255,255,255,0.5); line-height: 1.45; }
.praise-win-logo { height: 26px; width: auto; max-width: 140px; object-fit: contain; object-position: left center; align-self: flex-start; margin-top: clamp(14px, 2vw, 22px); filter: brightness(0) invert(1); opacity: 1; }
.praise-win-logo--asis { filter: none; opacity: 1; }
.praise-win-name { font-family: var(--body); font-weight: 600; font-size: 19px; color: #fff; align-self: flex-start; margin-top: clamp(14px, 2vw, 22px); letter-spacing: -0.01em; }
@media (max-width: 860px) {
  .praise-hero { grid-template-columns: 1fr; }
  .praise-hero-port img { aspect-ratio: 16/10; }
  .praise-grid { grid-template-columns: 1fr; }
  .praise-cred { grid-template-columns: 1fr 1fr; }
  .praise-wins { grid-template-columns: 1fr; }
}

/* ============================================================
   ENDORSEMENTS — proof bento (Direction 6): quotes + logos + wins
   ============================================================ */
.praise-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(158px, 1fr); gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); margin-top: 28px; }
.pb-tile { margin: 0; background: var(--n900); padding: clamp(22px, 2vw, 30px); display: flex; flex-direction: column; min-width: 0; }
.pb-span2 { grid-column: span 2; }
.pb-quote { justify-content: space-between; gap: 20px; }
.pb-quote blockquote { margin: 0; font-family: var(--body); font-weight: 300; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; color: rgba(255,255,255,0.85); }
.pb-quote blockquote::before { content: '\201C'; }
.pb-quote blockquote::after { content: '\201D'; }
.pb-by { display: flex; align-items: center; gap: 12px; }
.pb-by img { width: 42px; height: 42px; object-fit: cover; border: 1px solid rgba(255,255,255,0.14); flex: 0 0 auto; }
.pb-by b { font-family: var(--body); font-weight: 500; font-size: 14px; color: #fff; display: block; }
.pb-by .praise-role { margin-top: 3px; }
.pb-cred { justify-content: center; gap: 16px; }
.pb-logo { height: 26px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; align-self: flex-start; opacity: 1; }
.pb-logo--w { filter: brightness(0) invert(1); }
/* product-hunt tile is a link to the growth guide */
.pb-cred-link { text-decoration: none; transition: background 0.4s ease; }
.pb-cred-link:hover { background: rgba(255,255,255,0.085); }
.pb-cred-link .pb-arrow { color: rgba(255,255,255,0.5); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); display: inline-block; }
.pb-cred-link:hover .pb-arrow { transform: translate(2px, -2px); }
.pb-cred span { font-family: var(--body); font-weight: 300; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.62); }
.pb-win { justify-content: space-between; gap: 10px; }
.pb-num { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(34px, 3.4vw, 52px); line-height: 0.95; color: #fff; }
.pb-cat { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; color: rgba(255,255,255,0.5); line-height: 1.4; }
.pb-winlogo { height: 24px; margin-top: auto; }
.pb-coname { font-family: var(--body); font-weight: 600; font-size: 18px; color: #fff; margin-top: auto; }
.pb-cta { justify-content: space-between; text-decoration: none; transition: background 0.4s ease; }
.pb-cta:hover { background: rgba(255,255,255,0.085); }
.pb-cta-k { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: rgba(255,255,255,0.5); }
.pb-cta-go { font-family: var(--display); font-synthesis: none; font-size: clamp(22px, 2vw, 30px); color: #fff; margin-top: auto; }
.pb-cta-go .arrow { display: inline-block; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.pb-cta:hover .pb-cta-go .arrow { transform: translateX(5px); }
@media (max-width: 860px) { .praise-bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .praise-bento { grid-template-columns: 1fr; } .pb-span2 { grid-column: span 1; } }

/* ----------------------------------------------------------
   FAQ — white accordion section. Sits below the white
   .results cards on the homepage + every service page, before
   the white -> dark seam. data-theme="light".
---------------------------------------------------------- */
.faq {
  position: relative;
  z-index: 2;
  background: #ffffff;
  padding: clamp(48px, 7vh, 96px) 0 clamp(90px, 13vh, 150px);
}
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: start;
}
.faq-intro { position: sticky; top: calc(var(--bar-h) + 32px); }
.faq .overline { color: var(--n500); }
.faq-head {
  font-size: var(--fs-h1);
  color: var(--n900);
  margin: 16px 0 0;
  max-width: 14ch;
}
.faq-sub {
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--n600);
  margin: 20px 0 0;
  max-width: 36ch;
}
.faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(28px, 4vh, 40px);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-label);
  color: var(--blue);
  text-decoration: none;
}
.faq-cta .arrow { transition: transform 0.2s ease; }
.faq-talk { margin-top: clamp(28px, 4vh, 40px); align-self: flex-start; }
.faq-cta:hover .arrow { transform: translateX(4px); }

/* accordion list */
.faq-list { border-top: 1px solid var(--n300); }
.faq-item { border-bottom: 1px solid var(--n300); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 2.6vh, 28px) 0;
  background: none;
  border: 0;
  cursor: url("cursors/hand.png") 6 1, pointer;
  text-align: left;
  font-family: var(--display);
  font-synthesis: none;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--n900);
  transition: color 0.25s ease;
}
.faq-q:hover { color: var(--n900); }
.faq-q-text { flex: 1; }

/* plus / minus icon */
.faq-ico {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.faq-ico::before,
.faq-ico::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--n600);
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}
.faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q:hover .faq-ico::before,
.faq-q:hover .faq-ico::after { background: var(--n900); }
.faq-item.open .faq-ico::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item.open .faq-ico::before,
.faq-item.open .faq-ico::after { background: var(--n900); }

/* answer — smooth grid-rows reveal */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.faq-item.open .faq-a-inner { opacity: 1; }
.faq-a-inner p {
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--n600);
  margin: 0 0 clamp(22px, 3vh, 30px);
  max-width: 62ch;
}

@media (max-width: 860px) {
  .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vh, 44px); }
  .faq-intro { position: static; min-width: 0; }
  .faq-list { min-width: 0; }
  .faq-head { max-width: none; }
  .faq-sub { max-width: 48ch; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-ico::before, .faq-ico::after { transition: none; }
}

/* Careers: no open roles — non-clickable, visually muted (mega + mobile menus) */
.mega-card--disabled, .mm-sub--disabled { cursor: url("cursors/arrow.png") 0 0, default; pointer-events: none; opacity: 0.55; }

/* homepage Frontier: real edition links inherit the broadsheet styling (not default blue) */
.fr-lead h3 a, .fr-subgrid h4 a { color: inherit; text-decoration: none; }
.fr-lead h3 a:hover, .fr-subgrid h4 a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Case-study cards inside the proof marquee (clickable -> cs-modal) ===== */
.rcard--case { -webkit-appearance: none; appearance: none; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.22); color: #171818; cursor: url("cursors/hand.png") 6 1, pointer; text-align: left; align-items: flex-start; font: inherit; justify-content: center; gap: 14px; min-height: 320px; padding: 28px; transition: border-color .25s ease; }
.rcard--case:hover { border-color: var(--n900); }
.rcard--case .rcard-num { font-size: clamp(66px, 6vw, 90px); }
.rcard-more { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--n900); margin-top: 4px; }
/* real customer-quote cards interleaved with the case studies — same height, centered */
.rcard--quote { justify-content: center; gap: 16px; min-height: 320px; }

/* =========================================================
   SIGNAL (v2 redesign — "signalx") — living cyan interference field
   ========================================================= */
.signalx { position: relative; overflow: hidden; background: #ffffff; padding: clamp(96px, 17vh, 220px) 0 clamp(120px, 22vh, 290px); --sig: var(--svc, #004AFF); }   /* a bit less top space above "Meet Signal" (bottom unchanged) */
/* small, dim accent halo on the obelisk only (fades before the overline) */
.signalx-inner::before { content: ""; position: absolute; left: 50%; top: 0; transform: translate(-50%, -52%); z-index: -1; pointer-events: none;
  width: clamp(120px, 13vw, 180px); height: clamp(90px, 11vh, 130px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sig) 10%, transparent), transparent 100%); }
.signalx-inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; padding: 0 var(--gut); text-align: center; }
/* page-coloured emblem above the overline (signal.png tinted via mask) */
.signalx-emblem { display: block; width: clamp(40px,4vw,56px); height: clamp(40px,4vw,56px); margin: 0 auto clamp(16px,2.3vh,26px);
  background: var(--sig); -webkit-mask: url("engravings/signal.png") center/contain no-repeat; mask: url("engravings/signal.png") center/contain no-repeat; }
.signalx-over { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--sig); margin: 0 0 clamp(22px,3.2vh,32px); }
/* standard CTA on the white section: white fill, black border + text; inverts (black fill, white text) on hover */
.signalx .cta-signal { position: relative; inset: auto; right: auto; left: auto; display: inline-flex; width: fit-content; min-width: 236px; height: 54px; margin-top: clamp(30px,4.5vh,52px); background: #fff; border-color: #171818; }
.signalx .cta-signal .cta-label { color: #171818; }
.signalx .cta-signal .cta-corners .c { border-color: #171818; }
.signalx .cta-signal::before { background: #171818; }
.signalx .cta-signal:hover .cta-label { color: #fff; }
.signalx .cta-signal:hover .cta-corners .c { border-color: #fff; }
.signalx-h { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(34px, 5.2vw, 78px); line-height: 1.02; letter-spacing: -.01em; color: #171818; margin: 0; text-wrap: balance; }
.signalx-body { font-family: var(--body); font-weight: 300; font-size: clamp(16px,1.35vw,19px); line-height: 1.65; color: rgba(23,24,24,.6); margin: clamp(26px,4vh,40px) auto 0; max-width: 58ch; }
.signalx-cta { position: relative; display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(30px,4.5vh,50px); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #171818; text-decoration: none; }
.signalx-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: #171818; transform: scaleX(1); transform-origin: left; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.signalx-cta:hover::after { transform: scaleX(0); transform-origin: right; }
.signalx-cta .ar { transition: transform .35s ease; }
.signalx-cta:hover .ar { transform: translateX(5px); }

/* the living field */
.sigx-field { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: grid;
  grid-template-columns: repeat(7, clamp(9px,.72vw,15px)); gap: clamp(3px,.42vw,6px); pointer-events: none;
  -webkit-mask-image: radial-gradient(125% 88% at center, #000 30%, transparent 80%);
          mask-image: radial-gradient(125% 88% at center, #000 30%, transparent 80%); }
.sigx-field.left  { left:  max(clamp(20px,4.5vw,76px), calc(50% - 730px)); }
.sigx-field.right { right: max(clamp(20px,4.5vw,76px), calc(50% - 730px)); }
.sigx-cell { aspect-ratio: 1; background: var(--sig); opacity: 0; will-change: opacity; }
@keyframes sigxTwinkle { 0%,100% { opacity: calc(var(--b) * .1); } 50% { opacity: var(--b); } }
.signalx.in .sigx-cell { animation: sigxTwinkle var(--d,4s) ease-in-out infinite; animation-delay: var(--delay,0s); }

/* scroll reveal of the copy */
.signalx-inner > * { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s cubic-bezier(.4,0,.2,1); }
.signalx.in .signalx-inner > * { opacity: 1; transform: none; }
.signalx.in .signalx-over { transition-delay: .04s; }
.signalx.in .signalx-h    { transition-delay: .12s; }
.signalx.in .signalx-body { transition-delay: .26s; }
.signalx.in .signalx-cta  { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) { .signalx.in .sigx-cell { animation: none; opacity: var(--b); } .signalx-inner > * { transition: none; } }
@media (max-width: 1080px) { .sigx-field { display: none; } }

/* Compact tier grid (e.g. AI Ads "why it works"): 4 short cards, content-sized */
.pm-tiers--compact .tier-grid { grid-template-columns: repeat(4, 1fr); }
.pm-tiers--compact .tier-card { min-height: clamp(190px, 16vw, 250px); padding: clamp(22px, 1.8vw, 34px); }
.pm-tiers--compact .tier-title { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.16; margin: 16px 0 16px; min-height: clamp(56px, 4.6vw, 84px); }
.pm-tiers--compact .tier-desc { margin: 0; max-width: none; }
@media (max-width: 900px) { .pm-tiers--compact .tier-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .pm-tiers--compact .tier-grid { grid-template-columns: 1fr; } .pm-tiers--compact .tier-title { min-height: 0; } }

/* ============================================================
   PIXEL CURSORS (retro, sitewide). Delete this whole block to revert.
   arrow = normal (smaller) · hand = hover (links/buttons) · click = mousedown.
   ============================================================ */
html, body { cursor: url("cursors/arrow.png") 0 0, auto; }
a, button, summary, label, select, [role="button"],
.cta, .cta-svc, .cta-signal, .svc-card, .tier-card, .model-cta,
.nav-contact, .mm-cta, .faq-q, .cx-row, .pe-cta, .footer-talk, .way-card, .spon-btn
{ cursor: url("cursors/hand.png") 6 1, pointer; }
:active { cursor: url("cursors/click.png") 2 0, auto; }
a:active, button:active, [role="button"]:active,
.cta:active, .cta-svc:active, .svc-card:active, .tier-card:active, .model-cta:active
{ cursor: url("cursors/hand.png") 6 1, pointer; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="url"], textarea, [contenteditable="true"] { cursor: text; }

/* ── Recognition crest: drops in from a clip, then sways like a caught medallion (scroll-triggered) ── */
.pe-crest-clip { display: block; width: max-content; margin: 0 auto; padding: 8px 24px 16px; overflow: hidden; }
.pe-crest-clip .pe-crest { margin: 0; transform-origin: 50% 0%; }
.praise.crest-armed .pe-crest { transform: translateY(-155%); }
.praise.crest-armed.crest-drop .pe-crest { animation: crest-drop 1.8s linear forwards; }
@keyframes crest-drop {
  /* straight fall, accelerating (gravity) */
  0%   { transform: translateY(-155%) rotate(0deg); animation-timing-function: cubic-bezier(.5,0,.9,.4); }
  /* ~3/4 of the way down: the swing begins, carrying momentum from the fall */
  34%  { transform: translateY(-40%) rotate(-2deg); animation-timing-function: cubic-bezier(.25,.6,.4,1); }
  /* caught at the bottom - fall + swing land together (full left swing) */
  48%  { transform: translateY(0) rotate(-9deg); animation-timing-function: ease-in-out; }
  61%  { transform: translateY(0) rotate(6deg); animation-timing-function: ease-in-out; }
  73%  { transform: translateY(0) rotate(-3.6deg); animation-timing-function: ease-in-out; }
  84%  { transform: translateY(0) rotate(2deg); animation-timing-function: ease-in-out; }
  93%  { transform: translateY(0) rotate(-0.9deg); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .praise.crest-armed .pe-crest { transform: none; } }

/* ── mobile scroll-driven states (paired with charreveal.js) ── */
@media (max-width: 760px) {
  .ascii-banner { display: none; }   /* don't end the mobile page on the giant Demand Curve wordmark */
}
/* service card lights its own accent when it scrolls into view (mobile, where there's no hover) */
.svc-card.is-inview { background: rgba(255,255,255,0.03); }
.svc-card.is-inview .svc-svc,
.svc-card.is-inview .svc-name,
.svc-card.is-inview .svc-more { color: var(--accent); }
.svc-card.is-inview .svc-emb { opacity: 1; transform: scale(1.03);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 80%, transparent)) drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 45%, transparent)); }
/* finale galaxy shows when the CTA scrolls into full view on mobile (mirrors the hover state) */
.finale.warp-on .finale-warp { opacity: 1; }