/* ============================================================================
   OMNIKOM - base layer: reset, type defaults, layout primitives, core components
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-clear) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink-0);color:var(--paper);
  font-family:var(--f-body);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;color:var(--paper-full);font-family:var(--f-display);font-weight:700;letter-spacing:var(--track-display);text-transform:lowercase}
h1{font-size:var(--t-hero);line-height:var(--lh-hero)}
h2{font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:650;letter-spacing:var(--track-h2)}
h3{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:600;letter-spacing:var(--track-h3)}
h4{font-size:var(--t-h4);line-height:1.2}
p{margin:0}
::selection{background:var(--lime);color:var(--lime-ink)}

/* ---- focus: visible lime ring everywhere (a11y AA) ---- */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--lime);outline-offset:2px;border-radius:var(--r-1);
}

/* ---- layout primitives ---- */
.wrap{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
/* .wrap--narrow removed: 0 users. (The --wrap-narrow token is kept; it has other consumers.) */
.section{padding-block:var(--sec-y);position:relative}
.section--black{background:var(--ink-0)}
.section--panel{background:var(--ink-20)}
.section--blue{background:var(--royal);color:var(--royal-ink)}
.section--lime{background:var(--lime);color:var(--lime-ink)}
/* rhythm diet for consecutive no-ink bands (cycle-9 ledger mandate: 22-26% unearned scroll
   on the industries family came from full --sec-y stacking on text-light bands) */
.section--tight{padding-block:clamp(40px,4.5vw,72px)}
.hr{height:1px;background:var(--ink-40);border:0;margin:0}

/* ---- eyebrow / section label (mono, tracked, lime tick) ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--paper-muted);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:var(--r-btn);background:var(--lime);flex:none}
.section--lime .eyebrow,.section--blue .eyebrow{color:inherit;opacity:.72}

/* ---- headings helper: lime emphasis span ---- */
.hi{color:var(--lime)}
.section--lime .hi{color:var(--ink-0)}

/* ---- buttons (BUILD-SPEC exact states) ---- */
.btn{
  --bg:var(--lime);--fg:var(--lime-ink);--bd:var(--lime);
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-btn);
  font-family:var(--f-display);font-weight:600;font-size:var(--t-note);text-transform:lowercase;
  letter-spacing:0;white-space:nowrap;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  transition:background var(--dur-fast) var(--ease-smooth),color var(--dur-fast) var(--ease-smooth),border-color var(--dur-fast) var(--ease-smooth);
}
.btn .arw{transition:transform var(--dur-fast) var(--ease-smooth);will-change:transform}
/* THE phone button rule (cycle 13b, owner acceptance): at <=520 every CTA-tier button is
   full-width in its row, centered, consistent padding, and wraps as at most two BALANCED
   lines (the base nowrap otherwise forces per-page ad-hoc overrides - those are now void).
   Standard short labels hold one line at --t-body; the long consultation label balances
   to two. Tap height >=48px guaranteed. */
@media (max-width:520px){
  .btn--lg{
    white-space:normal;text-wrap:balance;justify-content:center;text-align:center;
    width:100%;min-height:48px;font-size:var(--t-body);padding:13px 22px;
  }
}
.btn:hover{background:transparent;color:var(--lime);border-color:var(--lime)}
.btn:hover .arw{transform:translateX(var(--arrow-shift))}
.btn--ghost{--bg:transparent;--fg:var(--paper-full);--bd:var(--ink-50)}
.btn--ghost:hover{background:transparent;color:var(--lime);border-color:var(--lime)}
.section--lime .btn{--bg:var(--ink-0);--fg:var(--lime);--bd:var(--ink-0)}
.section--lime .btn:hover{background:transparent;color:var(--ink-0);border-color:var(--ink-0)}
/* ghost/secondary on lime must stay visibly distinct from the solid primary
   (previously .section--lime .btn (0,2,0) overrode .btn--ghost (0,1,0) -> identical pills) */
.section--lime .btn--ghost{--bg:transparent;--fg:var(--ink-0);--bd:var(--ink-0)}
.section--lime .btn--ghost:hover{background:var(--ink-0);color:var(--lime);border-color:var(--ink-0)}
/* long CTA labels must never clip/overflow on small screens */
@media (max-width:520px){ .btn{white-space:normal;text-align:center} }

/* ---- link with animated arrow ---- */
.arrow-link{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:600;color:var(--lime);
  /* tap-target lift (24px min) without layout shift */
  padding-block:4px;margin-block:-4px}
.arrow-link .arw{transition:transform var(--dur-fast) var(--ease-smooth)}
.arrow-link:hover .arw{transform:translateX(var(--arrow-shift))}

/* .card* and .q-mark* removed: both feature sets were explicitly retired (card grids were rejected;
   the q-mark glyph is banned for reading as a male sign). 0 occurrences across all 38 shipped
   pages and 0 in any classList call in any shipped JS. */

/* ---- oversized mono numeral ---- */
.numeral{font-family:var(--f-mono);font-size:var(--t-numeral);line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}

/* ---- scroll reveal (mechanical: quick fade + short slide); --i sets stagger index ----
   FAIL-OPEN: hidden states are scoped behind .js (stamped on <html> by the shell's first
   inline script). With JS off/blocked, nothing is ever opacity:0 - the site reads as
   static. 3,352 elements were previously fail-closed (AUDIT §2.1). */
/* :where(.js) keeps every selector at its ORIGINAL specificity - scoping with a bare .js
   raised .is-in to (0,3,0) and broke ties it used to lose (e.g. .section--lime .deck's
   opacity:.82) - measured as 173-element style drift before this was corrected. */
:where(.js) .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
.reveal.is-in{opacity:1;transform:none}
/* reduce-motion: keep the gentle opacity fade (token duration is now shrunk, not zeroed),
   only drop the positional slide */
@media (prefers-reduced-motion:reduce){:where(.js) .reveal{transform:none}}

/* ---- curtain reveal (the signature: text prints into place, zero layout shift) ----
   markup: <span class="reveal-mask"><span class="reveal-inner">line</span></span>
   the assembler's observer adds .is-in to .reveal-mask when it scrolls into view. */
.reveal-mask{display:block;overflow:hidden}
.reveal-mask .reveal-inner{display:block}
:where(.js) .reveal-mask .reveal-inner{transform:translateY(105%);transition:transform var(--dur-slow) var(--ease-out);transition-delay:calc(var(--i,0)*60ms)}
.reveal-mask.is-in .reveal-inner{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){:where(.js) .reveal-mask .reveal-inner{transform:none;transition:none}}

/* ---- button hero tier + press feedback (press always faster than hover) ---- */
.btn--lg{padding:18px 30px;font-size:var(--t-body)}
.btn:active{transform:scale(.97);transition-duration:var(--dur-instant)}

/* ---- visually-hidden (a11y) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- BLUE SECTIONS: flat blocks (depth/card experiment removed), white text forced ---- */
.section--blue{ position:relative; color:var(--text-on-blue) }
.section--blue :where(p,li,span,.deck,.mono):not(.hi):not(.btn){ color:var(--text-on-blue-muted) }
.section--blue :where(h1,h2,h3,h4){ color:var(--text-on-blue) }

/* ---- LIME BANDS: dark ink forced (mirrors the blue block). base .section--lime only set
   inherited color, which explicit heading/.deck colors overrode -> near-white on lime = unreadable. ---- */
.section--lime{ color:var(--lime-ink) }
.section--lime :where(h1,h2,h3,h4){ color:var(--lime-ink) }
/* the chip is the one span on lime that must keep its own lime-on-ink scheme; without the
   exclusion this rule painted its text ink-on-ink - a live redaction-bar defect (cycle 12) */
.section--lime :where(p,li,span,.deck,.mono):not(.hi):not(.btn):not(.c-cta__chip):not(.fcb__chip){ color:var(--lime-ink) }
.section--lime .deck{ opacity:.82 }

/* ---- FLOATING PILL CLEARANCE: the fixed .s-nav overlays the top of the page. the full-viewport
   homepage hero self-clears; every other page's first block must reserve the pill height so its
   top content (breadcrumb/eyebrow/h1) is not covered. covers direct + wrapper-nested first sections. ---- */
main > .section:first-child:not(.s-hero),
main > *:first-child:not(.s-hero) > .section:first-child:not(.s-hero){
  padding-top: calc(var(--sec-y) + var(--nav-clear));
}
/* phone (cycle 14): stacking the FULL --sec-y (64px floor) on the 76px pill clearance put
   140-145px of dead space above every subpage hero at 390 - at phone the clearance plus a
   modest breathing gap is the whole requirement */
@media (max-width:639px){
  main > .section:first-child:not(.s-hero),
  main > *:first-child:not(.s-hero) > .section:first-child:not(.s-hero){
    padding-top: calc(var(--nav-clear) + 28px);
  }
}

/* The PLATFORM-MENU centering retro-fit is GONE (cycle 3): six pages were centered via
   [class*="__head"]-style substring matchers - a whole-page layout contract encoded as
   string matching (AUDIT §2.7). Every matched element (enumerated in the live DOM, 173
   stamps) now carries an explicit component class from components.css: .c-center /
   .c-hero / .c-center-child / .c-center-row / .c-list. Markup opts in; names match nothing. */

/* ============================================================================
   MOBILE / PHONE HARDENING (global)
   ========================================================================== */
@media (max-width:639px){
  html,body{ overflow-x:hidden; max-width:100%; }
  .section{ padding-block:clamp(34px,9vw,52px); }
  .wrap{ padding-inline:var(--gutter); }
  /* any 2-col fill grids collapse to 1 col on phones.
     [class*=] not [class$=]: ends-with silently skipped every element carrying a trailing
     class (e.g. "x__list reveal") - the documented attribute-selector trap (HANDOFF §7).
     Dies with the page-layer regeneration (cycles 4-6) once grids are componentized. */
  /* :not(.s-nav__list): "s-nav__list--grid" contains "__list" and would force the mobile
     drawer's designed 2-col grid to 1 col - hidden at capture time, so only a DOM-state
     check catches it (found cycle 3). */
  :is([class*="__list"],[class*="__grid"],[class*="__stage"],[class*="__split"],[class*="__rows"]):not(.s-nav__list){ grid-template-columns:1fr !important; }
}
/* mobile side drawer: always scrollable + full height, never clipped */
@media (max-width:1023px){
  .s-nav__drawer{ overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:100dvh; }
}

/* The CLOSING-CTA substring treatment is GONE (cycle 3): every CTA wrap and button row
   sitewide (37 wraps + 38 rows, enumerated in the live DOM) now carries .c-cta / .c-btn-row
   from components.css. The `:has(> .btn)` magic and the [class*="cta"] matchers are dead. */
/* drawer cards REMOVED (owner rejected the execution). Neutralized so any leftover markup
   renders as plain, in-flow content on the blue stage - no white card, no shadow, no slide. */
/* The .drawer neutraliser is gone. It existed to suppress a rejected drawer-card experiment and
   carried 7 of base.css's 11 !important declarations. Verified before removal: the class token
   "drawer" appears 0 times in every section partial and every page main.html, and no JS adds it.
   (.s-nav__drawer is a single distinct token and never matched .drawer.) */

/* ---- utilities ---- */
.mono{font-family:var(--f-mono)}
/* Six generic utilities (.muted .faint .tabnum .grid .stack .center) removed: 0 users across all 38
   shipped pages. Kept undocumented they implied a design-system contract the site never adopted; if
   utilities are wanted later they should be introduced deliberately and documented. */
.deck{font-size:var(--t-body-lg);color:var(--paper);line-height:1.55;max-width:60ch}