/* GENERATED by tools/assemble.mjs - DO NOT EDIT. Edit assets/css/sections/*.css and re-run. */

/* ==== nav ==== */
/* ============================================================================
   NAV - floating rounded pill header, 4 routes, lime-dot dropdowns, side drawer.
   Scoped .s-nav. Reuses .btn from base.css.
   ========================================================================== */
.s-nav{ --nav-h:60px; position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  padding:14px var(--gutter) 0; font-family:var(--f-body); pointer-events:none }
.s-nav > *{ pointer-events:auto }

/* HOME ONLY (cycle 13b, owner): the header starts hidden and appears once the hero is
   scrolled past - the hero logo is the brand moment, the nav mark would double it.
   Progressive enhancement: the state class is only ever applied by nav.js, and the hidden
   rule is scoped behind :where(.js), so no-JS users always have the header. Keyboard focus
   entering the nav (tab / skip-link) reveals it regardless of scroll position. Fixed
   position + opacity/transform = zero layout shift; --dur-base collapses under
   reduced-motion via tokens.css. */
:where(.js) .s-nav{ transition:opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard) }
:where(.js) .s-nav.s-nav--home-hidden:not(:focus-within){
  opacity:0; transform:translateY(-10px); pointer-events:none }
:where(.js) .s-nav.s-nav--home-hidden:not(:focus-within) > *{ pointer-events:none }
@media (max-width:1023px){ .s-nav{ --nav-h:56px; padding-top:10px } }
/* phone + tablet (owner request, cycle 17): the mark centers in the pill; burger stays
   right. Absolute centering = zero layout shift when the bar appears or scrolls, and the
   pill keeps its flex flow for the burger. Desktop unchanged. */
@media (max-width:1023px){
  .s-nav__bar{ position:relative }
  .s-nav__logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) }
}

.s-nav__skip{ position:absolute; left:-9999px; top:0; background:var(--lime); color:var(--lime-ink);
  padding:var(--s-3) 18px; font-family:var(--f-mono); font-size:var(--t-small); z-index:calc(var(--z-modal) + 2) }
.s-nav__skip:focus{ left:var(--gutter); top:12px }

/* ---- floating pill bar ---- */
.s-nav__bar{
  max-width:1120px; margin-inline:auto; height:var(--nav-h);
  /* at very wide viewports the pill was stranded in the middle third with ~500px of
     dead gutter each side; let it grow toward the content grid instead. */
  display:flex; align-items:center; gap:var(--s-5); padding:0 var(--s-2) 0 20px;
  background:rgba(18,18,20,.72); border:1px solid var(--ink-40); border-radius:var(--r-btn);
  -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%);
  transition:background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
@media (min-width:1600px){ .s-nav__bar{ max-width:1200px } }
.s-nav.is-scrolled .s-nav__bar{ background:rgba(12,12,14,.9); box-shadow:0 10px 30px -12px rgba(0,0,0,.7) }
.s-nav__logo{ display:inline-flex; align-items:center; flex:none }
.s-nav__logo img{ height:24px; width:auto; display:block }

/* ---- desktop links ---- */
.s-nav__links{ display:flex; align-items:center; gap:4px; margin-inline:auto }
.s-nav__item{ position:relative }
.s-nav__link{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px;
  font-size:var(--t-note); color:var(--paper); border-radius:var(--r-btn); text-transform:lowercase;
  transition:color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard) }
.s-nav__link:hover, .s-nav__link[aria-expanded="true"], .s-nav__item:hover .s-nav__link{ color:var(--paper-full); background:rgba(255,255,255,.04) }
.s-nav__link[data-menu]::after{ content:""; width:5px; height:5px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform var(--dur-fast) var(--ease-standard); opacity:.7 }
.s-nav__link[aria-expanded="true"]::after{ transform:translateY(1px) rotate(225deg) }
.s-nav__link--plain{ text-decoration:none }

/* ---- floating dropdown panel ---- */
.s-nav__menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,-6px);
  width:340px; max-width:calc(100vw - 2*var(--gutter)); padding:14px; border-radius:18px;
  background:rgba(16,16,18,.96); border:1px solid var(--ink-40);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
/* bridge the 14px gap between trigger and panel so hover doesn't flicker-close mid-travel */
.s-nav__menu::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px }
.s-nav__menu--wide{ width:min(520px, calc(100vw - 2*var(--gutter))) }
/* two-group panel: capabilities + revenue lanes, so the bar stays at four items */
.s-nav__menu--split{ width:min(620px, calc(100vw - 2*var(--gutter)));
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s-4) var(--s-5) }
.s-nav__group-title{ margin:2px 0 8px 11px; font-size:var(--t-eyebrow); letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--paper-muted) }
.s-nav__group + .s-nav__group{ border-left:1px solid var(--ink-40); padding-left:var(--s-4) }
.s-nav__item:hover .s-nav__menu, .s-nav__item:focus-within .s-nav__menu, .s-nav__menu.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear 0s;
}
.s-nav__list{ display:flex; flex-direction:column; gap:2px }
.s-nav__list--grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 10px }
.s-nav__list a{ display:flex; align-items:flex-start; gap:11px; padding:9px 11px; border-radius:12px;
  color:var(--paper); text-transform:lowercase; transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard) }
.s-nav__list a:hover{ background:rgba(255,255,255,.05); color:var(--paper-full) }
.s-nav__list b{ font-weight:600; font-size:var(--t-note); display:block }
.s-nav__list em{ font-style:normal; font-size:var(--t-eyebrow); color:var(--paper-muted); display:block; margin-top:2px; line-height:1.35 }
.s-nav__dot{ width:7px; height:7px; border-radius:var(--r-btn); background:var(--lime); flex:none; margin-top:7px }
.s-nav__list--grid a{ align-items:center; font-size:var(--t-note) } .s-nav__list--grid .s-nav__dot{ margin-top:0 }
.s-nav__list--flat a{ align-items:center; padding-block:7px; font-size:var(--t-note) } .s-nav__list--flat .s-nav__dot{ margin-top:0 }

/* ---- cta + burger ---- */
.s-nav__cta{ flex:none; padding:11px 20px; font-size:var(--t-small) }
.s-nav__burger{ display:none; flex:none; width:44px; height:44px; border-radius:var(--r-btn);
  flex-direction:column; align-items:center; justify-content:center; gap:5px }
.s-nav__burger span{ width:20px; height:2px; background:var(--paper-full); border-radius:2px; transition:transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard) }
.s-nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.s-nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.s-nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ---- mobile drawer (side menu) ---- */
.s-nav__scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:var(--z-modal);
  opacity:0; transition:opacity var(--dur-base) var(--ease-standard) }
.s-nav__scrim.is-open{ opacity:1 }
/* calc() requires whitespace around + : "calc(var(--z-modal)+1)" is INVALID and computed
   to z-index:auto, leaving the drawer UNDER the scrim - every drawer link tap hit the
   scrim (closing the drawer) and the panel rendered dimmed. Live bug, latent since the
   drawer shipped; caught by the cycle-7 dialog behavioral test. */
.s-nav__drawer{ position:fixed; top:0; right:0; height:100dvh; width:min(360px,86vw); z-index:calc(var(--z-modal) + 1);
  background:var(--ink-10); border-left:1px solid var(--lime); padding:76px 22px var(--s-5);
  display:flex; flex-direction:column; gap:6px; overflow-y:auto;
  transform:translateX(100%); transition:transform var(--dur-base) var(--ease-out) }
.s-nav__drawer.is-open{ transform:translateX(0) }
.s-nav__drawer-close{ position:absolute; top:18px; right:20px; width:44px; height:44px; font-size:30px; color:var(--paper) }
.s-nav__acc{ border-bottom:1px solid var(--ink-40) }
.s-nav__acc summary{ list-style:none; cursor:pointer; padding:15px 4px; font-size:var(--t-body-lg); color:var(--paper-full);
  text-transform:lowercase; display:flex; justify-content:space-between; align-items:center }
.s-nav__acc summary::-webkit-details-marker{ display:none }
.s-nav__acc summary::after{ content:"+"; color:var(--lime); font-size:22px }
.s-nav__acc[open] summary::after{ content:"\2013" }
.s-nav__acc a{ display:block; padding:9px 4px 9px var(--s-4); font-size:var(--t-note); color:var(--paper); text-transform:lowercase }
.s-nav__acc a:hover{ color:var(--lime) }
/* display:block is load-bearing: anchors are inline by default, and with two plain links
   (cycle 15 regroup) they rendered side-by-side squished on one line (owner-reported).
   Every drawer entry is a full-width row. */
.s-nav__drawer-link{ display:block; width:100%; padding:15px 4px; font-size:var(--t-body-lg); color:var(--paper-full); text-transform:lowercase; border-bottom:1px solid var(--ink-40) }
.s-nav__drawer-cta{ margin-top:auto; justify-content:center; width:100% }

@media (max-width:1023px){
  .s-nav__links{ display:none }
  .s-nav__cta{ display:none }
  .s-nav__burger{ display:inline-flex; margin-left:auto }
  .s-nav__bar{ padding-right:6px }
}
@media (min-width:1024px){ .s-nav__drawer, .s-nav__scrim{ display:none } }

/* cycle 15: drawer category group labels (industries accordion) */
.s-nav__drawer .s-nav__group-label{
  margin:14px 0 4px; font-size:var(--t-label); letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--ink-60);
}
.s-nav__drawer .s-nav__group-label:first-of-type{ margin-top:6px; }


/* ==== hero ==== */
/* ============================================================================
   HERO - wireframe layout: EYEBROW -> H1 -> DECK -> CTA (centered group) ->
   full-width INDUSTRIES strip scrolling left (bottom). Subtle animated
   grid/beam bg. Scoped .s-hero.
   ========================================================================== */
.s-hero{
  position:relative; min-height:100svh; overflow:hidden; background:var(--ink-0); isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(82px,8vh,104px) var(--gutter) 0;   /* less dead space above */
}
.s-hero__bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none }
/* legibility layer: darken the art directly behind the centered text, keep it in the periphery */
.s-hero__scrim{ position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(ellipse 74% 58% at 50% 45%, rgba(10,10,10,.82) 0%, rgba(10,10,10,.5) 50%, rgba(10,10,10,0) 78%) }

/* ---- tiers 1+2: logo + text + cta, centered as a group ---- */
.s-hero__inner{
  position:relative; z-index:10; flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(22px,3.4vh,38px); width:100%; max-width:var(--content-max); margin:0 auto;
}
.s-hero__eyebrow{ justify-content:center }
/* the logo lockup is the hero's brand moment (owner-restored, cycle 13b); the nav carries
   only the small mark - and on home the nav stays hidden until the hero is passed. */
.s-hero__logo{ width:min(300px,52vw); height:auto }
.s-hero__text{
  font-family:var(--f-display); font-weight:700; text-transform:lowercase;
  font-size:clamp(30px,4.4vw,58px); line-height:1.06; letter-spacing:-0.025em;
  color:var(--paper-full); max-width:17ch; margin:0 auto;
}
.s-hero__deck{ max-width:44ch; margin:0 auto; color:var(--paper) }
.s-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:4px;
  /* real air between the CTA row and the ticker, paid for by the removed logo */
  margin-bottom:clamp(56px,9vh,120px) }

/* ---- tier 3: full-width big industries strip, scrolling LEFT ---- */
.s-hero__strip{
  position:relative; z-index:10; width:100vw; margin-inline:calc(50% - 50vw);
  border-top:1px solid var(--ink-40); border-bottom:1px solid var(--ink-40);
  padding:clamp(24px,3.4vh,40px) 0; display:flex; align-items:center; gap:22px;
  overflow:hidden; background:rgba(10,10,10,.35);
}
.s-hero__strip-arrow{
  position:absolute; left:clamp(16px,3vw,44px); z-index:2; color:var(--lime);
  font-size:clamp(20px,2.4vw,30px); line-height:1;
  animation:heroArrow 1.9s var(--ease-flow) infinite;
}
@keyframes heroArrow{ 0%,100%{transform:translateX(0);opacity:.9} 50%{transform:translateX(-8px);opacity:.5} }
.s-hero__strip-track{
  display:inline-flex; align-items:center; gap:clamp(24px,3vw,52px); white-space:nowrap;
  width:max-content; animation:heroScroll 34s linear infinite; will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.s-hero__word{
  font-family:var(--f-display); font-weight:700; text-transform:lowercase;
  font-size:clamp(36px,5.1vw,69px); line-height:1; letter-spacing:-0.02em; color:var(--paper);
}
.s-hero__word:nth-child(4n+1){ color:var(--paper-full) }
.s-hero__sep{ width:11px; height:11px; border-radius:var(--r-btn); background:var(--lime); flex:none; opacity:.9 }
@keyframes heroScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

@media (max-width:639px){
  .s-hero__logo{ width:min(240px,64vw) }
  .s-hero__text{ max-width:16ch }
  .s-hero__cta{ width:100%; flex-direction:column; align-items:stretch; max-width:320px }
}
/* gentle, non-jarring motion (marquee, arrow, ambient beams) stays ON even under
   prefers-reduced-motion so the page never reads as dead; only large/jarring motion is gated. */


/* ==== statement ==== */
/* ============================================================================
   SECTION: statement - THE CATEGORY EXPLAINER (winner of A/B tournament: variant A)
   Replaces the old "one system" pipeline section. Sequencing rule
   (CATEGORY-BRIEF §8), never inverted: (1) the reframe, in the buyer's
   language -> (2) the category, named with its one-clause definition.
   Big calm type, generous
   negative space, a flowing asymmetric layout (left -> right -> left), zero
   boxes/cards/borders-as-containers.

   Judged win over variant B: same non-boxed, editorial structure, where B's
   orbiting-Q graphic stacked five simultaneous animations onto one mark.
   Promotion fix applied: kept this
   section on the black canvas (not variant A's original royal-blue fill) - the section directly after this one (#category) is already
   .section--blue, so a blue statement section would have put two flat-blue
   sections back to back and broken the site's black/blue alternation. A
   hairline border-top seam (matching hero's border-bottom) now marks the
   mechanical cut between hero and statement instead.

   CLEANUP PASS (2026-07-22): the previously-animated "lane" - a curved SVG
   path with an endlessly traveling lime dot (SMIL animateMotion) - repeated
   the same routing/flow motif used elsewhere on the site (capability-grid,
   revenue-lanes, operating-system). Removed per the male-sign / redundant-
   graphic cleanup pass and reduced to a single static hairline rule (no SVG,
   no animation, no diagram). The section is now a clean, spacious, purely
   typographic composition: two acts of copy plus one structural line.
   All selectors scoped under .s-statement. Reuses tokens.css + base.css
   primitives (.section--black, .wrap, .eyebrow, .hi, .deck, .mono, .reveal) -
   nothing foundational redefined here.

   LEDGER PASS (cycle 10): act three (the identity restatement + the six-item
   "what we are not" fence) was deleted - /why-omnikom owns both at full
   resolution - and with it both runs of mono micro-copy below the definition.
   The section now ends on the definition plus one arrow-link out.

   TYPE AUDIT: body/heading sizes are well over 15px; the single remaining mono
   kicker runs at 12-13px but touches no graphic mark, so it qualifies for the
   mono-eyebrow exception as written.
   ========================================================================== */

.s-statement{
  position:relative; overflow:hidden;
  /* hairline seam continuing hero's bottom border - mechanical cut, never a fade */
  border-top:1px solid var(--ink-40);
}

/* ---- outer grid: a narrow spine column + the content column, sharing the
   content column's natural height (no fixed heights anywhere) ---- */
.s-statement__wrap{
  display:grid;
  grid-template-columns:36px 1fr;
  column-gap:18px;
  align-items:stretch;
}
@media (min-width:640px){
  .s-statement__wrap{ grid-template-columns:48px 1fr; column-gap:var(--s-6); }
}
@media (min-width:1024px){
  .s-statement__wrap{ grid-template-columns:64px 1fr; column-gap:var(--s-7); }
}

/* ---- structural spine: a single static hairline, no diagram, no motion ---- */
.s-statement__spine{ position:relative; width:100%; height:100%; min-height:340px; }
.s-statement__spine::before{
  content:"";
  position:absolute; left:50%; top:0; bottom:0;
  width:1px;
  background:rgba(245,245,245,.16);
}

/* ---- content: three acts, generous vertical air between each ---- */
.s-statement__content{
  display:flex; flex-direction:column;
  gap:clamp(56px,9vw,112px);
  padding-block:clamp(4px,1vw,12px);
}
.s-statement__act{ max-width:none; }

/* ACT ONE - the reframe: the largest, calmest type in the section */
.s-statement__act--reframe{ margin:0; }
.s-statement__reframe{
  margin:0; margin-top:var(--gap-heading-body);
  max-width:23ch;
  font-size:clamp(30px,4.8vw,60px);
  line-height:1.1;
}

/* ACT TWO - the category, defined: offset right, mid-weight, a dictionary beat */
.s-statement__kicker{
  margin:0 0 var(--s-4);
  font-family:var(--f-mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,245,245,.5);
}
.s-statement__term{
  margin:0;
  font-family:var(--f-display); font-weight:650; text-transform:lowercase;
  font-size:clamp(22px,2.6vw,34px); line-height:1.12; letter-spacing:-0.01em;
  color:var(--paper-full);
}
.s-statement__clause{
  margin-top:var(--s-4);
  max-width:52ch;
  font-size:var(--t-body-lg);
}
@media (min-width:1024px){
  .s-statement__act--definition{ margin-left:clamp(40px,9vw,160px); }
}

/* ---- the way out: one arrow-link where act three's not-list used to be ---- */
.s-statement__out{ margin-top:var(--s-5); }

@media (max-width:639px){
  .s-statement__reframe{ max-width:17ch; }
  .s-statement__spine{ min-height:420px; }
}

/* the spine is now a static hairline with zero animation - no motion accent
   left in this section beyond the standard .reveal entrance transitions
   (inherited from base.css), which already respect reduced motion. */


/* ==== category ==== */
/* ============================================================================
   s-category - clean typographic composition, no decorative diagram.
   The old-game/new-game contrast is carried by copy alone: a loose, airy
   list of patches on one side, confident restated copy on the other,
   generous negative space between. Section still gets its on-scroll
   .reveal entrance, nothing more.
   All selectors scoped under .cat-diagram (aliases .s-category).
   ========================================================================== */

.cat-diagram{ overflow:hidden; }
.cat-diagram__wrap{ position:relative; }

/* ---- head: this section's own title, distinct from the reframe's anchor line ---- */
.cat-diagram__head{ max-width:64ch; }
.cat-diagram__title{
  margin-top:var(--s-4);
  max-width:16ch;
  color:var(--paper-full);
}
.cat-diagram__deck{ margin-top:var(--gap-heading-body); max-width:58ch; color:rgba(245,245,245,.78); }

/* ================= THE STAGE (typographic old-game / new-game contrast) ================= */
.cat-diagram__stage{
  margin-top:clamp(28px,3.4vw,48px);
  display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,40px);
}
.cat-diagram__col{ display:flex; flex-direction:column; gap:14px; }
.cat-diagram__col--old{ order:1; }
.cat-diagram__col--new{ order:2; }

.cat-diagram__tag{
  font-size:var(--t-label); letter-spacing:var(--track-eyebrow); text-transform:uppercase;
  color:var(--text-on-blue-muted);
}
.cat-diagram__tag--lime{ color:var(--lime); }

/* ---- old game: a loose, flowing list - no boxes, no rules, just air, lime-dot bullets ---- */
.cat-diagram__list{ display:flex; flex-direction:column; gap:var(--s-3); margin-top:4px; }
.cat-diagram__list li{
  display:flex; align-items:flex-start; gap:var(--s-3);
  font-family:var(--f-display); font-weight:500; text-transform:lowercase;
  font-size:clamp(16px,1.6vw,19px); line-height:1.4; color:var(--text-on-blue-muted);
}
.cat-diagram__list li::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--lime); margin-top:.55em;
}
.cat-diagram__caption{
  margin-top:6px; font-size:var(--t-label); letter-spacing:.06em; color:var(--text-on-blue-muted);
}

/* ---- new game: short, confident copy ---- */
.cat-diagram__new-copy{
  font-size:var(--t-body-lg); line-height:1.6; color:rgba(245,245,245,.85); max-width:44ch;
}
.cat-diagram__restated{
  margin-top:4px; font-family:var(--f-display); font-weight:600;
  font-size:clamp(19px,2vw,24px); line-height:1.2; color:var(--paper-full);
}

/* the mechanism strip (design -> ... -> client closes) and the closing
   "judge this the way infrastructure gets judged" caption were removed in the
   cycle-10 ledger pass - the comparison section and /why-omnikom own both. */

/* ================= responsive ================= */
@media (min-width:1024px){
  .cat-diagram__stage{
    grid-template-columns:minmax(260px,360px) 1fr;
    align-items:start; gap:clamp(48px,6vw,96px);
  }
  .cat-diagram__col--old{ order:1; }
  .cat-diagram__col--new{ order:2; padding-top:clamp(4px,1vw,12px); }
}

@media (max-width:639px){
  .cat-diagram__title{ max-width:none; }
  .cat-diagram__list li{ font-size:var(--t-body); }
}


/* ==== capability-grid ==== */
/* ============================================================================
   s-capability-grid - "from target data to qualified opportunity"
   REBUILD: graphic-led flowing pipeline (data -> outreach -> qualification ->
   routing -> crm -> opportunity) on a single smooth curved SVG path, with
   gliding lime tokens and a drawing lime comet-line - NOT an 8-box grid.
   Motion is ALWAYS ON (no prefers-reduced-motion gate on the pipeline itself - only the one-time scroll-entrance fades soften under it, same as sibling
   sections). Everything scoped under .s-capability-grid.
   ========================================================================== */

/* ---- head ---- */
.s-capability-grid .cap-grid__head{ max-width:56ch; }
.s-capability-grid .cap-grid__h2{ margin-top:var(--gap-heading-body); max-width:20ch; }
.s-capability-grid .cap-grid__deck{ margin-top:var(--gap-heading-body); }

/* ---- the pipeline graphic: single strong round/flowing centerpiece ---- */
.s-capability-grid .cap-grid__pipe{
  position:relative; margin-top:clamp(48px,6vw,80px);
}
.s-capability-grid .cap-grid__svg{
  width:100%; height:auto; display:block; overflow:visible;
  animation:capBreathe 8s var(--ease-flow) infinite;
}

/* base guide line: faint, always present (the lane exists even before the pulse) */
.s-capability-grid .cap-grid__path-base{
  fill:none; stroke:var(--ink-40); stroke-width:2;
}
/* the drawing lime line: a lit segment continuously traveling the lane */
.s-capability-grid .cap-grid__path-draw{
  fill:none; stroke:var(--lime); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:16 84;
  animation:capPipeDraw 9s linear infinite;
}
@keyframes capPipeDraw{ to{ stroke-dashoffset:-100; } }
@keyframes capBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.006); } }

/* ---- nodes: structural blue rings/dots, bloom in relay as the token passes ---- */
.s-capability-grid .cap-grid__node-ring{
  fill:none; stroke:var(--ink-50); stroke-width:1.5;
  transform-box:fill-box; transform-origin:center;
  animation:capNodeBloom 9s var(--ease-flow) infinite;
  animation-delay:calc(var(--i,0) * -1.5s);
}
.s-capability-grid .cap-grid__node-dot{
  fill:var(--royal);
  transform-box:fill-box; transform-origin:center;
  animation:capNodeBloom 9s var(--ease-flow) infinite;
  animation-delay:calc(var(--i,0) * -1.5s);
}
.s-capability-grid .cap-grid__node-tag{
  font-family:var(--f-mono); font-size:20px; letter-spacing:.05em;
  fill:var(--paper-muted);
}
@keyframes capNodeBloom{
  0%,82%,100%{ transform:scale(1); }
  6%{ transform:scale(1.32); }
  16%{ transform:scale(1); }
}

/* the final node is the product of the machine: the one place the pipeline earns lime */
.s-capability-grid .cap-grid__node--final .cap-grid__node-ring{ stroke:var(--lime); }
.s-capability-grid .cap-grid__node--final .cap-grid__node-dot{ fill:var(--lime); }
.s-capability-grid .cap-grid__node--final .cap-grid__node-tag{ fill:var(--lime); }

/* ---- gliding tokens: small lime accounts moving along the curve, always on ---- */
.s-capability-grid .cap-grid__token{ fill:var(--lime); }

/* ---- stages: a flowing list with air, not a card grid - hairline rows only ---- */
.s-capability-grid .cap-grid__stages{
  margin-top:clamp(40px,5vw,64px);
}
.s-capability-grid .cap-grid__stage{
  display:flex; gap:var(--s-5); align-items:baseline;
  padding-block:22px; border-top:1px solid var(--ink-40);
}
.s-capability-grid .cap-grid__stage-n{
  flex:none; width:2.6ch; font-size:var(--t-small); color:var(--paper-muted);
  padding-top:2px;
}
.s-capability-grid .cap-grid__stage-body h3{
  margin:0 0 6px; font-family:var(--f-display); font-weight:700;
  font-size:var(--t-h4); line-height:1.2; letter-spacing:var(--track-display);
  text-transform:lowercase; color:var(--paper-full);
}
.s-capability-grid .cap-grid__stage-body p{
  margin:0; color:var(--paper); font-size:var(--t-body); line-height:1.5; max-width:52ch;
}
.s-capability-grid .cap-grid__stage--final h3{ color:var(--lime); }

@media (min-width:1024px){
  .s-capability-grid .cap-grid__stages{
    column-count:2; column-gap:var(--s-8);
  }
  .s-capability-grid .cap-grid__stage{ break-inside:avoid; }
}

/* ---- way out to the phases (merged in from the deleted operating-system section) ---- */
.s-capability-grid .cap-grid__out{ margin-top:clamp(28px,3.4vw,40px); }

/* ---- closing line ---- */
.s-capability-grid .cap-grid__line{
  margin-top:clamp(48px,6vw,72px);
  font-family:var(--f-display); font-size:var(--t-h3); line-height:var(--lh-h3);
  font-weight:600; letter-spacing:var(--track-h3); color:var(--paper-full); max-width:44ch;
}

/* ---- reduced motion: only the one-time scroll-entrance fades soften; the pipeline
   (path draw, node bloom, gliding tokens, breathing scale) keeps running - a living
   diagram must never read as a dead page. ---- */
@media (prefers-reduced-motion:reduce){
  .s-capability-grid .cap-grid__stages .reveal{ transition-delay:0ms; }
}

@media (max-width:639px){
  .s-capability-grid .cap-grid__h2{ max-width:14ch; }
  .s-capability-grid .cap-grid__stage{ gap:var(--s-4); }
}


/* ==== revenue-lanes ==== */
/* ============================================================================
   s-revenue-lanes - clean typographic composition.
   One infrastructure, four revenue lanes. No orbital diagram, no rings, no
   spokes, no "Q-mark" core (removed - read as the male sign). Just a strong
   heading, deck copy, and four lanes presented as bold lowercase labels with
   a mono numeral and one line each, spaced generously. All selectors scoped
   under .rl-lanes (aliases .s-revenue-lanes).
   ========================================================================== */

.rl-lanes__wrap{ position:relative; }

/* ---- head ---- */
.rl-lanes__head{ max-width:780px; }
.rl-lanes__title{ max-width:20ch; margin-block:var(--s-4) 0; }
.rl-lanes__title + .rl-lanes__deck{ margin-top:var(--gap-heading-body); }

/* ================= THE LANES (typographic grid, no graphic) ================= */
.rl-lanes__grid{
  margin-top:clamp(56px,7vw,104px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(32px,5vw,48px);
}

.rl-lanes__lane{
  display:flex; flex-direction:column; gap:10px;
  align-items:flex-start; text-align:left;
  max-width:44ch;
  padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid rgba(245,245,245,.18);
  transition:border-color var(--dur-base) var(--ease-smooth);
}
.rl-lanes__num{
  font-size:var(--t-eyebrow); letter-spacing:.09em; color:var(--lime);
}
.rl-lanes__name{ font-size:clamp(22px,2.4vw,30px); }
.rl-lanes__line{
  font-size:var(--t-body); line-height:1.55; color:var(--paper); max-width:36ch;
}

/* ---- discrete hover, matches sitewide interaction contract ---- */
.rl-lanes__lane{ transition:transform var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth); }
.rl-lanes__lane:hover,
.rl-lanes__lane:focus-within{ transform:translateY(-2px); border-color:var(--lime); }
.rl-lanes__lane:hover .rl-lanes__name,
.rl-lanes__lane:focus-within .rl-lanes__name{ color:var(--lime); }

/* ---- closing mono line ---- */
/* --paper-muted (~50%) drops to ~3.6:1 on the royal-blue section background,
   under WCAG AA's 4.5:1 floor for this size - use --paper (~74%, ~6.4:1) instead. */
.rl-lanes__foot{ margin-top:clamp(48px,6vw,72px); color:var(--paper); }

/* ================= responsive: two columns once there is room ================= */
@media (min-width:768px){
  .rl-lanes__grid{
    grid-template-columns:repeat(2,1fr);
    column-gap:clamp(40px,5vw,72px);
  }
}

@media (min-width:1024px){
  .rl-lanes__grid{ grid-template-columns:repeat(4,1fr); }
  .rl-lanes__lane{ max-width:none; }
}


/* ==== why-omnikom ==== */
/* ============================================================================
   OMNIKOM - section: why-omnikom ("the comparison")
   No centerpiece diagram: the comparison is carried entirely by flowing,
   air-divided text rows (NOT a table of boxes), each split into "you still
   own" / "omnikom operates" with a plain lime-dot marker ahead of each
   label - no per-row icon, no orbit graphic, no Q mark.
   What survives: the one-time .reveal/.reveal-mask entrance (handled
   globally in base.css) and the .drawer slide-in on the verdict card below
   (why-omnikom.js).
   All selectors scoped under .s-why-omnikom (extra hook: .wo-cmp).
   ========================================================================== */

.wo-cmp{ overflow:hidden; }
.cw-wrap{ position:relative; }

/* ---- head: problem first, category-comparison framing second ---- */
.cw-head{ max-width:66ch; }
.cw-anchor{
  margin-top:var(--s-4);
  font-family:var(--f-display); font-weight:600; letter-spacing:var(--track-h2);
  font-size:clamp(21px,2.4vw,30px); line-height:1.24; color:var(--paper-full);
  max-width:24ch;
}
.cw-head h2{ margin-top:var(--s-6); max-width:16ch; }
.cw-deck{ margin-top:var(--gap-heading-body); max-width:58ch; color:rgba(245,245,245,.78); }

/* ---- we-are statement: the identity line, editorial scale ---- */
.cw-wea{
  margin-top:clamp(40px,5vw,64px); max-width:52ch; margin-inline:auto; text-align:center;
  font-family:var(--f-display); font-weight:600; letter-spacing:var(--track-h3);
  font-size:clamp(20px,2.2vw,27px); line-height:1.4; color:var(--paper-full);
}

/* ---- fence line: flowing, dot-separated, never boxed ---- */
.cw-fence{
  margin-top:20px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  font-size:var(--t-eyebrow); letter-spacing:.03em; color:rgba(245,245,245,.55); text-align:center;
}
.cw-fence__sep{ opacity:.5; }

/* ================= THE FLOWING ROWS ================= */
.cw-rows{
  list-style:none; margin:clamp(48px,6vw,80px) 0 0; padding:0;
  border-top:1px solid rgba(245,245,245,.18);
}
.cw-row{
  padding:var(--s-5) 28px; margin-bottom:14px;
  border:1.5px solid rgba(245,245,245,.12); border-radius:16px;
  transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.cw-row__tag{
  display:inline-block; font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase;
  color:var(--lime); margin-bottom:10px;
}
.cw-row__what{
  font-family:var(--f-display); font-weight:500; font-size:var(--t-h4);
  line-height:1.4; color:var(--paper-full); max-width:64ch; margin-bottom:18px;
}

.cw-split{ display:grid; grid-template-columns:1fr; gap:var(--s-4); }
.cw-col p{ font-size:var(--t-body); line-height:1.55; color:rgba(245,245,245,.72); max-width:48ch; }
.cw-col__label{
  display:inline-flex; align-items:center; gap:var(--s-3); font-size:var(--t-label); letter-spacing:.05em;
  color:rgba(245,245,245,.5); margin-bottom:var(--s-2);
}
.cw-col__label::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--lime); flex:none;
}
.cw-col--ops .cw-col__label{ color:var(--lime); }

/* hover: the row pops out as a rounded BLACK card with a LIME edge (not a lime wash) */
.cw-row:hover, .cw-row:focus-within{
  background:var(--ink-0); border-color:var(--lime);
  transform:translateY(-3px); box-shadow:0 16px 38px -14px rgba(0,0,0,.72);
}

/* ---- the way out: replaces the mechanism strip (design -> deploy -> operate ->
   deliver -> client closes) and the boundary line, both of which /why-omnikom
   owns. Cycle-10 ledger pass: five rows cut to three, chain cut to one link. ---- */
.cw-out{ margin-top:clamp(40px,5vw,64px); }

/* ================= VERDICT DRAWER ================= */
/* one white card only (base.css .drawer/.drawer--right handles bg, radius, shadow,
   slide-in via .is-in - wired from why-omnikom.js). floats right, close to the
   section's closing beat - the single floating panel this section earns, not a
   per-row card grid. */
.cw-verdict{
  margin-top:clamp(40px,5vw,64px);
  margin-left:auto;
  max-width:46ch;
}
.cw-verdict .eyebrow{ margin-bottom:14px; }
.cw-verdict h3{
  font-family:var(--f-display); font-weight:600; letter-spacing:var(--track-h3);
  font-size:clamp(19px,2vw,24px); line-height:1.3; margin-bottom:14px;
}
.cw-verdict p{ font-size:var(--t-body); line-height:1.6; }
/* contrast fix: .section--blue forces p/li/span/.deck/.mono to --text-on-blue-muted
   (near-white) at 3-class specificity, which OUTRANKS .drawer's own 1-class dark-ink
   override since the drawer is nested inside the blue section - without this, the
   verdict copy renders near-invisible (near-white on the white card). scoped to this
   section only, no base.css change, no !important. */
.s-why-omnikom.section--blue .drawer :where(p,li,span,.deck,.mono):not(.hi){ color:var(--ink-2,#3a3a3d); }

/* ================= responsive ================= */
@media (min-width:768px){
  .cw-split{ grid-template-columns:1fr 1fr; gap:var(--s-6); }
  .cw-col--ops{ padding-left:var(--s-6); border-left:1px solid rgba(245,245,245,.18); }
  .cw-row:hover .cw-col--ops, .cw-row:focus-within .cw-col--ops{ border-color:rgba(245,245,245,.16); }
}

@media (max-width:639px){
  .cw-anchor{ max-width:none; }
  .cw-wea{ font-size:19px; }
  .cw-verdict{ margin-left:0; max-width:none; }
}


/* ==== trio ==== */
/* ============================================================================
   s-trio - short "who this is for" band: the fit / not-yet pair, nothing else.
   The technology and results panels (and their .trio__panel / .trio__tag /
   .trio__title / .trio__cap-list / .trio__cap-n rules) were deleted per
   DESIGN-LEDGER #13 - they restated the capability grid already on the page.
   De-boxed: a hairline top rule + a barely-there wash, never a bright fill.
   Grid: 1 column under 768px, 2 columns at 768px+, tight gap. Each column
   keeps its own .reveal stagger (--i set inline 1/2) on top of base.css's
   shared entrance timing. All selectors scoped under .s-trio.
   ========================================================================== */

.s-trio{ --trio-hair:rgba(245,245,245,.14); }

/* ---- head: short eyebrow + one compact line, no big H2 (keeps it tight) ---- */
.s-trio .trio__head{ max-width:60ch; }
.s-trio .trio__lead{
  margin-top:10px;
  font-family:var(--f-display); font-weight:600; text-transform:lowercase;
  letter-spacing:var(--track-h3); color:var(--paper-full);
  font-size:clamp(20px,2.4vw,28px); line-height:1.25; max-width:26ch;
}

/* ---- grid: 1 col mobile, 2 col from 768px, tight gaps ---- */
.s-trio .trio__grid{
  margin-top:clamp(28px,4vw,44px);
  display:grid; grid-template-columns:1fr;
  gap:22px;
}
@media (min-width:768px){
  .s-trio .trio__grid{
    grid-template-columns:repeat(2,1fr);
    gap:0;
  }
}

/* ---- column: hairline top rule + very subtle wash, calm not a card ---- */
.s-trio .trio__col{
  display:flex; flex-direction:column;
  padding:clamp(20px,2.2vw,26px) clamp(20px,2vw,24px);
  border-top:1px solid var(--trio-hair);
  border-radius:14px;
  background:rgba(245,245,245,.02);
}
@media (min-width:768px){
  .s-trio .trio__col{ padding-inline:clamp(22px,2.4vw,32px); }
  .s-trio .trio__col + .trio__col{ border-left:1px solid var(--trio-hair); }
}

/* ================= FIT / NOT-YET DOT LISTS ================= */
.s-trio .trio__sublabel{
  margin:0 0 10px; font-size:var(--t-label); letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--paper-muted);
}
.s-trio .trio__sublabel--fit{ color:var(--lime); opacity:.9; }

.s-trio .trio__dot-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.s-trio .trio__dot-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:var(--t-small); line-height:1.48; color:var(--paper);
}
.s-trio .trio__dot-list li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:.5em;
  border-radius:50%; background:var(--ink-60);
}
.s-trio .trio__dot-list--fit li::before{ background:var(--lime); }
.s-trio .trio__dot-list--wait li{ color:var(--paper-muted); }

/* ---- closing note: sits under the pair, not inside either column ---- */
.s-trio .trio__note{
  margin:clamp(20px,2.4vw,28px) 0 0;
  font-size:var(--t-label); line-height:1.55; color:var(--paper-muted);
}

@media (max-width:639px){
  .s-trio .trio__lead{ max-width:none; }
}


/* ==== ownership-split ==== */
/* ============================================================================
   SECTION: ownership-split (editorial / typographic)
   "clear ownership. cleaner execution." Big calm type, generous negative
   space, a flowing asymmetric two-column read, zero card grids. The one
   graphic is THE LINE ITSELF, reduced to a single clean horizontal hairline
   rule spanning the full width, "omnikom owns" resolved on its left side by
   the left column and "your team owns" on its right side by the right
   column. It fades in once on scroll (.reveal) and holds - a settled still
   frame, not a loop (motion budget: #capability-grid is the page's only
   always-on live diagram). Near-black canvas (.section--black, matches
   hero/process), lime capped to two-tone heading emphasis + the "owned by
   omnikom" numerals. All selectors scoped under .s-ownership-split. Reuses
   .section--black/.wrap/.eyebrow/.hi/.deck/.mono/.reveal/.reveal-mask from
   base.css.
   ========================================================================== */

.s-ownership-split{ position:relative; overflow:hidden; }

/* ---- head: big calm type, generous room, left-aligned (never the narrow
   left-squeeze - full .wrap width, deliberate max-width on the copy) ---- */
.s-ownership-split .own__head{ max-width:60ch; margin-bottom:clamp(56px,8vw,104px); }
.s-ownership-split .own__h2{
  margin-top:var(--gap-heading-body); max-width:15ch;
  font-size:clamp(34px,5.4vw,66px); line-height:1.04;
}
.s-ownership-split .own__deck{ margin-top:var(--gap-heading-body); }

/* ---- the two-column body, the seam sitting above it as a full-width row ---- */
.s-ownership-split .own__wrap{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(40px,6vw,104px);
}

/* ---- THE LINE OF OWNERSHIP: one clean horizontal hairline, full width,
   "omnikom owns" resolved by the left column below it, "your team owns" by
   the right ---- */
.s-ownership-split .own__seam{
  grid-column:1/-1; display:flex; align-items:center; gap:var(--s-4);
  margin-bottom:clamp(40px,6vw,72px);
}
.s-ownership-split .own__seam-line{
  flex:1 1 auto; height:1px; background:rgba(245,245,245,.26);
}
.s-ownership-split .own__seam-label{
  flex:none; font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-muted); white-space:nowrap;
}

/* ---- columns: flowing lists with air, no card boxes, no borders-as-containers ---- */
.s-ownership-split .own__col--team{ margin-top:clamp(32px,6vw,72px); } /* asymmetric offset */

.s-ownership-split .own__kicker{
  margin:0 0 10px; font-size:var(--t-label); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper-muted);
}
.s-ownership-split .own__col-h{ margin:0 0 var(--s-6); font-size:clamp(24px,2.6vw,34px); }

.s-ownership-split .own__list{ display:flex; flex-direction:column; }
.s-ownership-split .own__item{
  display:flex; gap:var(--s-4); align-items:flex-start;
  padding-block:18px; border-bottom:1px solid var(--ink-30);
}
.s-ownership-split .own__item:first-child{ padding-top:0; }
.s-ownership-split .own__item:last-child{ border-bottom:0; padding-bottom:0; }

.s-ownership-split .own__num{
  flex:none; margin-top:3px; width:26px; font-size:var(--t-eyebrow); letter-spacing:.04em;
  color:var(--paper-muted); font-variant-numeric:tabular-nums;
  transition:color var(--dur-base) var(--ease-standard);
}
.s-ownership-split .own__col--omnikom .own__num{ color:var(--lime); }

.s-ownership-split .own__item-t{
  font-family:var(--f-display); font-weight:600; font-size:var(--t-body-lg); line-height:1.25;
  color:var(--paper-full); text-transform:lowercase;
  transition:color var(--dur-base) var(--ease-standard);
}
.s-ownership-split .own__item-d{
  margin-top:4px; font-size:var(--t-body); line-height:1.5; color:var(--paper);
}

@media (hover:hover) and (pointer:fine){
  .s-ownership-split .own__item:hover .own__item-t{ color:var(--lime); }
  .s-ownership-split .own__item:hover .own__num{ color:var(--lime); }
}

/* resolve toward the seam from their own side, echoing the layout direction */
.s-ownership-split .own__col--omnikom .own__item.reveal{ transform:translateX(-14px); }
.s-ownership-split .own__col--team .own__item.reveal{ transform:translateX(14px); }
.s-ownership-split .own__item.reveal.is-in{ transform:none; }

/* ---- the closing line: the verbatim ownership-boundary sentence, printed
   in on scroll via the sitewide curtain reveal, zero layout shift ---- */
.s-ownership-split .own__close{
  margin-top:clamp(64px,9vw,120px); max-width:40ch;
  font-family:var(--f-display); font-weight:500; text-transform:lowercase;
  font-size:clamp(20px,2.2vw,28px); line-height:1.4; color:var(--paper-full);
}

/* ---- tablet: columns compress, asymmetric offset eases off ---- */
@media (max-width:1023px){
  .s-ownership-split .own__col--team{ margin-top:clamp(20px,4vw,40px); }
}

/* ---- mobile: stack columns under the same single hairline rule ---- */
@media (max-width:767px){
  .s-ownership-split .own__wrap{ grid-template-columns:1fr; row-gap:0; }
  .s-ownership-split .own__col--team{ margin-top:0; }
  .s-ownership-split .own__seam{ margin-bottom:var(--s-6); }

  /* the old `.own__item.reveal{transform:translateY(12px)}` here OUTRANKED
     .reveal.is-in{transform:none} (0,4,0 vs 0,2,0) - every item stayed painted 12px
     below its layout box after reveal; item 05's text overlapped the next block
     (owner-reported). The base reveal offset already handles the start position. */
}


/* ==== final-cta ==== */
/* ============================================================================
   OMNIKOM - s-final-cta (Section 13: closing CTA, "the next step")
   THREE ROWS on a lime field:
     ROW 1 - eyebrow.
     ROW 2 - headline + a ONE-LINE deck, left-aligned.
     ROW 3 - centered: the two CTAs and exactly one mono note.

   CYCLE-10 LEDGER PASS: the five-input convergence diagram and the second
   (foot) mono line were removed. The diagram's labels repeated
   data/outreach/qualification/routing for the fifth time on the page, and
   the FAMILY CTA grammar allows one title, one deck line, one CTA row and
   one mono note. With the diagram gone the section carries no continuous
   motion at all - only the one-time .reveal/.reveal-mask scroll-entrance
   (base.css), which freezes under reduced motion at opacity:1, never hidden.

   Reuses .section/.section--lime/.wrap/.eyebrow/.btn/.btn--lg/.btn--ghost/
   .deck/.reveal/.reveal-mask/.reveal-inner/.mono/.sr-only verbatim.
   Everything below is new, scoped under .s-final-cta / .fcb__*.
   ========================================================================== */

.s-final-cta{ position:relative; }

/* ---- foundation gaps a lime-canvas section exposes (same fixes already
   exposed by any lime canvas) ---------------------------------------------- */

/* eyebrow tick is hardcoded lime -> invisible on a lime field */
.s-final-cta .eyebrow::before{ background:var(--lime-ink); }

/* restore the ghost/outline identity on a lime section (section--lime .btn
   at 0-0-2-0 otherwise beats .btn--ghost's 0-0-1-0 and both CTAs collapse
   to the same fill), then invert it to the primary's rest-state colors on
   hover so the lower-commitment action briefly "promotes" itself. */
.s-final-cta .btn.btn--ghost{ --bg:transparent; --fg:var(--lime-ink); --bd:var(--lime-ink); }
.s-final-cta .btn.btn--ghost:hover{
  --bg:var(--lime-ink); --fg:var(--lime); --bd:var(--lime-ink);
  background:var(--lime-ink); color:var(--lime); border-color:var(--lime-ink);
}

/* sitewide focus ring is lime-on-lime here -> real WCAG 2.4.7 failure */
.s-final-cta :where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline-color: var(--lime-ink);
}

/* section-local ink tokens: neither --paper-muted nor --gray is legible on
   lime (both tuned for dark backgrounds) */
.s-final-cta{
  --ink-strong:var(--lime-ink);
  --ink-muted:rgba(10,10,10,.62);
  --ink-faint:rgba(10,10,10,.40);
  --ink-hairline:rgba(10,10,10,.16);
}

.s-final-cta .fcb__wrap{ position:relative; }

/* ================= ROW 1 - eyebrow ================= */
.s-final-cta .fcb__row1{ margin-bottom:clamp(16px,2.4vw,26px); }

.s-final-cta .fcb__row2{ text-align:left; }

.s-final-cta .fcb__h2{
  font-family:var(--f-display); font-weight:750; text-transform:lowercase;
  font-size:clamp(34px,4.6vw,58px); line-height:1.05; letter-spacing:-0.02em;
  color:var(--ink-strong); max-width:18ch;
}
.s-final-cta .fcb__h2 .reveal-mask{ margin-bottom:.06em; }
.s-final-cta .fcb__h2 .reveal-mask:last-child{ margin-bottom:0; }

/* specificity (0,3,1) so it beats the shared `.section--lime :where(span)` dark-ink rule
   in base.css (0,3,0) - the chip has its own black background and needs lime text on it. */
.s-final-cta .fcb__h2 span.fcb__chip{
  display:inline-block;
  background:var(--ink-0);
  color:var(--lime);
  line-height:1.3;
  padding:1px 12px;
  border-radius:var(--r-1);
  max-width:100%;
}

.s-final-cta .fcb__deck{
  margin:var(--gap-heading-body) 0 0; max-width:52ch;
  font-size:var(--t-body-lg); line-height:1.55; color:var(--ink-muted);
}

/* ================= ROW 3 - centered CTAs + the one mono note ================= */
.s-final-cta .fcb__row3{
  text-align:center;
  margin-top:clamp(40px,6vw,64px);
}
.s-final-cta .fcb__cta-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s-4);
}

.s-final-cta .fcb__note{
  margin-top:var(--s-5); max-width:52ch; margin-inline:auto;
  font-size:var(--t-body); line-height:1.5; letter-spacing:0; text-transform:none;
  color:var(--ink-muted);
}

/* ================= the lane glyph (cycle 13, owner request) =================
   Two-column band at >=1024: every text element and the CTA row share ONE left
   axis (the re-judge called the old centered row3 an unresolved second axis);
   the glyph fills the previously dead right half. One-shot draw-in when the
   .reveal container lands (is-in) - no continuous motion, freezes complete
   under reduced motion. Hidden below 1024 where the column has no room. */
.s-final-cta .fcb__art{ display:none; margin:0; }

@media (min-width:1024px){
  .s-final-cta .fcb__grid{
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(40px,5vw,88px); align-items:center;
  }
  .s-final-cta .fcb__art{ display:block; }
  .s-final-cta .fcb__row3{ text-align:left; }
  .s-final-cta .fcb__note{ margin-inline:0; }
  .s-final-cta .fcb__cta-row{ justify-content:flex-start; }
  /* in the two-column layout the title column is narrower - step the display size down
     so the chip phrase holds one line instead of wrapping into a dominant black slab */
  .s-final-cta .fcb__h2{ font-size:clamp(30px,2.6vw,50px); max-width:16ch; }
}

/* at full desktop the measure grows so the headline resolves as two lines + chip
   instead of the 1440 composition simply translating right */
@media (min-width:1600px){
  .s-final-cta{ --fcb-glyph-max:660px; }
  .s-final-cta .fcb__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
  /* 41px is the largest size at which BOTH reveal-masks hold one line each in this
     column (mask 2 = "starts with" + the 17ch chip, ~28ch) - the wide viewport
     resolves as exactly two lines + chip; the column itself is bounded by the site
     wrap, which is why the glyph cannot "fill to 1920" without breaking the grid */
  .s-final-cta .fcb__h2{ font-size:41px; max-width:none; }
}

/* Glyph rest state = fully drawn (fail-open: with JS blocked nothing is ever hidden).
   The hidden initial states and every transition live behind :where(.js), and all
   timings are the shared motion tokens (MOTION.md §4) - under reduced-motion the
   tokens collapse and the glyph lands almost immediately. No transform animates. */
.s-final-cta .fcb__glyph{ width:100%; max-width:var(--fcb-glyph-max,560px); height:auto; display:block; margin-inline:auto; }
.s-final-cta .fcb__g-in{ fill:var(--ink-strong); }
.s-final-cta .fcb__g-path,
.s-final-cta .fcb__g-lane{ stroke:var(--ink-strong); stroke-width:2; stroke-linecap:round; }
.s-final-cta .fcb__g-path{ opacity:.7; }
.s-final-cta .fcb__g-lane{ stroke-width:3; }
.s-final-cta .fcb__g-ring{ stroke:var(--ink-strong); stroke-width:3.5; }
.s-final-cta .fcb__g-crm{ fill:var(--ink-strong); }
.s-final-cta .fcb__g-label{
  font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  fill:var(--ink-muted);
}
:where(.js) .s-final-cta .fcb__g-in{ opacity:0; transition:opacity var(--dur-base) var(--ease-standard); }
:where(.js) .s-final-cta .fcb__g-path,
:where(.js) .s-final-cta .fcb__g-lane{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset var(--dur-smooth) var(--ease-standard);
}
:where(.js) .s-final-cta .fcb__g-lane{ transition-delay:var(--dur-base); }
:where(.js) .s-final-cta .fcb__g-ring{
  opacity:0; transition:opacity var(--dur-base) var(--ease-standard) var(--dur-smooth);
}
:where(.js) .s-final-cta .fcb__g-crm,
:where(.js) .s-final-cta .fcb__g-label{
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-standard) calc(var(--dur-smooth) + var(--dur-fast));
}
:where(.js) .s-final-cta .fcb__art.is-in .fcb__g-in{ opacity:1; }
:where(.js) .s-final-cta .fcb__art.is-in .fcb__g-in--2{ transition-delay:var(--dur-fast); }
:where(.js) .s-final-cta .fcb__art.is-in .fcb__g-in--3{ transition-delay:calc(var(--dur-fast) * 2); }
:where(.js) .s-final-cta .fcb__art.is-in :is(.fcb__g-path,.fcb__g-lane){ stroke-dashoffset:0; }
:where(.js) .s-final-cta .fcb__art.is-in .fcb__g-ring{ opacity:1; }
:where(.js) .s-final-cta .fcb__art.is-in .fcb__g-crm,
:where(.js) .s-final-cta .fcb__art.is-in .fcb__g-label{ opacity:1; }

/* ================= RESPONSIVE ================= */
@media (max-width:767px){
  .s-final-cta .fcb__deck{ max-width:none; }
  .s-final-cta .fcb__row3{ margin-top:var(--s-7); text-align:left; }
  .s-final-cta .fcb__cta-row{ flex-direction:column; align-items:stretch; }
  .s-final-cta .fcb__cta-row .btn{ justify-content:center; }
  /* one axis to the last line: the note joins the flush-left stack, and the chip
     balances its two lines instead of leaving a half-empty slab */
  .s-final-cta .fcb__note{ text-align:left; }
  .s-final-cta .fcb__h2 span.fcb__chip{ text-wrap:balance; }
}

@media (max-width:520px){
  .s-final-cta .fcb__row3{ margin-top:40px; }
}

/* motion note: no continuous motion remains in this section. The only
   animation is the one-time .reveal/.reveal-mask scroll-entrance handled by
   base.css, which freezes under prefers-reduced-motion and still lands at
   opacity:1, never hidden. */


/* ==== footer ==== */
/* ============================================================================
   OMNIKOM - s-footer
   CYCLE-10 LEDGER PASS: the decorative dashed "lane" wave (bezier + node lights
   + gliding token) and the global "fully booked" modal were both deleted; every
   .s-footer__lane-* and .bkm* rule went with them. What is left is a footer that
   pays for its height: brand, five air-gapped flowing link columns (never boxed),
   the compliance paragraph, and the legal bar. The one remaining ambient motion
   is the faint drifting background arc. Background steps up to --ink-40 (a
   deliberate "closing tray" value-step off the near-black body).
   ========================================================================== */

.s-footer{
  position:relative;
  overflow:hidden;
  background:var(--ink-40);
  padding-block:var(--sec-y);
  border-top:1px solid var(--ink-50);
}

/* ---- ambient background: one faint, slowly drifting arc ---- */
.s-footer__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.s-footer__bg-arc{
  fill:none;
  stroke:var(--royal);
  stroke-width:2;
  opacity:.16;
  animation:footerBgDrift 46s ease-in-out infinite;
  will-change:transform;
}
@keyframes footerBgDrift{
  0%,100%{ transform:translate3d(-34px,0,0) }
  50%{ transform:translate3d(34px,-16px,0) }
}

.s-footer__wrap{ position:relative; z-index:1 }

/* ============================================================================
   BRAND - logo, category-defining line, mono microcopy. Centered, spacious.
   ========================================================================== */
.s-footer__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  max-width:56ch;
  margin-inline:auto;
  padding-block-end:clamp(28px,4vw,44px);
}
.s-footer__logo{ display:inline-flex }
.s-footer__logo-img{ width:min(180px,44vw); height:auto }
.s-footer__claim{
  font-family:var(--f-display);
  font-weight:600;
  text-transform:lowercase;
  letter-spacing:-0.01em;
  font-size:var(--t-h4);
  line-height:1.25;
  color:var(--paper-full);
  max-width:32ch;
}
.s-footer__tagline{
  font-size:var(--t-label);
  letter-spacing:.04em;
  color:var(--paper-muted);
}

/* ============================================================================
   SITEMAP - five flowing (unboxed) columns, air between them, no borders.
   ========================================================================== */
.s-footer__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  column-gap:var(--s-6);
  row-gap:var(--s-7);
  padding-block-end:var(--s-7);
}
.s-footer__col .eyebrow{ margin-bottom:var(--s-4); justify-content:center }
.s-footer__col{ text-align:center }
.s-footer__col ul{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-3);
}
.s-footer__link{
  position:relative;
  display:inline-flex;
  width:fit-content;
  padding-block:6px;
  font-family:var(--f-body);
  font-size:var(--t-note);
  font-weight:400;
  letter-spacing:-0.005em;
  text-transform:lowercase;
  color:var(--paper);
  transition:color var(--dur-fast) var(--ease-standard);
}
.s-footer__link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--dur-fast) var(--ease-standard);
}
.s-footer__link:hover,
.s-footer__link:focus-visible{ color:var(--paper-full) }
.s-footer__link:hover::after,
.s-footer__link:focus-visible::after{ transform:scaleX(1) }
.s-footer__link--all{ font-size:var(--t-note) }

/* ============================================================================
   DIVIDER + COMPLIANCE
   ========================================================================== */
.s-footer__hr{
  background:rgba(245,245,245,.12);
  margin-block:var(--s-5);
}
.s-footer__compliance{
  max-width:78ch;
  margin-inline:auto;
  text-align:center;
  margin-block-end:var(--s-6);
}
.s-footer__compliance-text{
  font-size:var(--t-note);
  line-height:1.6;
  letter-spacing:-0.005em;
  color:var(--paper);
}
.s-footer__compliance-link{
  margin-top:14px;
  justify-content:center;
}

/* ============================================================================
   BOTTOM BAR
   ========================================================================== */
.s-footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--s-4);
  padding-block-start:var(--s-5);
}
.s-footer__copyright{
  font-size:var(--t-eyebrow);
  letter-spacing:0;
  color:var(--paper-muted);
}
.s-footer__legal{
  display:flex;
  gap:var(--s-5);
}
.s-footer__legal .s-footer__link{ font-size:var(--t-eyebrow); padding-block:4px }
/* phone: the legal row rides the same 44px tap floor as the sitemap columns */
@media (max-width:767px){
  .s-footer__legal .s-footer__link{ padding-block:14px }
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  .s-footer{ padding-block:clamp(56px,10vw,96px) }
  .s-footer__grid{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:767px){
  .s-footer__grid{
    grid-template-columns:repeat(2,1fr);
    column-gap:var(--s-5);
    row-gap:var(--s-6);
  }
  .s-footer__link{ font-size:var(--t-eyebrow); padding-block:11px }
  .s-footer__bottom{ flex-direction:column; align-items:center; gap:var(--s-3); text-align:center }
}

/* ---- the booking dialog (cycle 16): onboarding form on the dialog primitive ---- */
.bkg{ position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:center; padding:20px; }
.bkg[hidden]{ display:none; }
.bkg__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.8); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.bkg__card{
  position:relative; z-index:1; width:min(640px,100%); max-height:min(86dvh,780px); overflow:auto;
  background:var(--ink-10); border:1px solid var(--ink-40); border-radius:var(--r-card);
  padding:clamp(24px,4vw,40px);
}
.bkg__x{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:var(--r-btn);
  font-size:24px; line-height:1; color:var(--paper-muted); }
.bkg__x:hover{ color:var(--paper-full); }
.bkg__title{ margin-top:var(--s-3); font-size:var(--t-h3); }
.bkg__deck{ margin-top:var(--s-2); color:var(--paper); font-size:var(--t-note); max-width:44ch; }
.bkg__form{ margin-top:clamp(20px,3vw,28px); }
.bkg__grid{ display:grid; grid-template-columns:1fr; gap:14px 20px; }
@media (min-width:640px){ .bkg__grid{ grid-template-columns:1fr 1fr; } .bkg__field--full{ grid-column:1/-1; } }
.bkg__field{ display:flex; flex-direction:column; gap:6px; }
.bkg__label{ font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--ink-60); }
.bkg__label em{ font-style:normal; color:var(--lime); }
.bkg__opt{ color:var(--ink-60); opacity:.7; text-transform:none; letter-spacing:0; }
.bkg__field input,.bkg__field select{
  width:100%; font-family:var(--f-body); font-size:var(--t-body); color:var(--paper-full);
  background:var(--ink-20); border:1px solid var(--ink-40); border-radius:var(--r-input);
  padding:11px 14px; line-height:1.4;
  transition:border-color var(--dur-base) var(--ease-standard);
}
.bkg__field input:focus,.bkg__field select:focus{ outline:none; border-color:var(--lime); }
.bkg__field input[aria-invalid="true"],.bkg__field select[aria-invalid="true"]{ border-color:var(--error,#e5484d); }
.bkg__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.bkg__turnstile:empty{ display:none; }
.bkg__turnstile{ margin-top:14px; }
.bkg__err{ margin-top:12px; color:var(--error,#e5484d); font-size:var(--t-small); }
.bkg__submit{ margin-top:18px; width:100%; justify-content:center; }
.bkg__note{ margin-top:12px; font-size:var(--t-eyebrow); color:var(--ink-60); text-align:center; }
.bkg__done{ text-align:left; }
.bkg__done .bkg__ok{ margin-top:20px; }

/* cycle-16 iteration (panel): dialog entrance/exit motion on the shared tokens,
   hidden-reveal fix, resting-field visibility, sticky submit on the scroll body */
:where(.js) .bkg{ opacity:0; transition:opacity var(--dur-base) var(--ease-standard); }
:where(.js) .bkg.is-open{ opacity:1; }
:where(.js) .bkg__card{ transform:translateY(10px); transition:transform var(--dur-base) var(--ease-standard); }
:where(.js) .bkg.is-open .bkg__card{ transform:none; }
.bkg__field[hidden]{ display:none; }
.bkg__field input,.bkg__field select{ border-color:var(--ink-50); }
.bkg__foot{
  flex:none; margin-top:12px; padding-top:12px; border-top:1px solid var(--ink-40);
}
.bkg__card{ display:flex; flex-direction:column; overflow:hidden; }
.bkg__form-wrap{ min-height:0; overflow:auto; margin-inline:calc(-1 * clamp(24px,4vw,40px)); padding-inline:clamp(24px,4vw,40px); }

@media (prefers-reduced-motion:reduce){ :where(.js) .bkg__card{ transform:none; } }
/* scroll affordance: content fades at the sticky-foot boundary instead of slicing flat */
.bkg__form-wrap{ -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent); }

/* final polish (design confirm): taller phone fade so the cut never reads as a bare
   label; the reassurance line joins the card's left axis */
@media (max-width:520px){
  .bkg__form-wrap{ -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent); }
}
.bkg__note{ text-align:left; }

/* the quiet full-page escape hatch under the dialog foot (operator 0a) */
.bkg__alt{ margin-top:8px; font-size:var(--t-eyebrow); color:var(--ink-60); }
.bkg__alt a{ color:var(--paper-muted); text-decoration:underline; text-underline-offset:3px; }
.bkg__alt a:hover{ color:var(--paper-full); }

/* turnstile gate hint (cycle 19, owner bug): shown only while the submit is locked */
.bkg__gate{ margin-top:10px; font-size:var(--t-eyebrow); color:var(--ink-60); }
.bkg__submit[disabled]{ opacity:.55; cursor:not-allowed; }