/* ============================================================================
   OMNIKOM - shared components (cycle 3). BEM-lite, `c-` prefix.
   These replace base.css's substring retro-fit layer ([class*="__head"] etc.),
   which encoded whole-page layout as string matching (AUDIT §2.7). Markup opts
   IN with a class; nothing is matched by name-pattern anymore.

   Cycle-6 burn-down: the parity chains and !important flags are GONE - every page
     that fought the base layer has been regenerated onto clean component consumption,
     so plain single-class selectors are sufficient. Verified by full-site snapshot
     (zero unattributed drift) in the burn-down commit.
   ========================================================================== */

/* ---- centered head / statement / boundary block (was platform [class*="__head"] etc., (0,2,0)) ---- */
.c-center{ margin-inline:auto; text-align:center; max-width:min(60rem,100%); }

/* ---- centered hero wrap (was platform [class*="hero__wrap"], (0,2,0) + !important) ---- */
.c-hero{ margin-inline:auto; text-align:center; max-width:min(66rem,100%); }

/* ---- children of centered blocks that center themselves (was (0,2,0)) ---- */
.c-center-child{ margin-inline:auto; }

/* ---- centered flex row - hero CTAs, chains (was (0,2,0)) ---- */
.c-center-row{ justify-content:center; }

/* ---- wide 2-col list grid inside a centered page (was (0,4,0) via :not()x2) ---- */
.c-list{
  display:grid; grid-template-columns:1fr; gap:clamp(20px,2.6vw,34px);
  max-width:none; text-align:left;
}
@media (min-width:768px){
  .c-list{ grid-template-columns:1fr 1fr; column-gap:clamp(48px,6vw,88px); row-gap:clamp(28px,4vw,44px); }
}
@media (max-width:639px){
  .c-list{ grid-template-columns:1fr; }
}

/* ---- closing CTA band (was sitewide [class*="cta__wrap"] etc., (0,1,0) + !important) ---- */
.c-cta{ max-width:min(56rem,100%); margin-inline:auto; text-align:center; }
/* children that center themselves inside the band (was (0,2,0)); the internal substring
   matcher is bounded by the opt-in .c-cta parent and dies with the regeneration */
.c-cta :is(h2,[class*="__h2"],[class*="__title"],[class*="__deck"],[class*="__note"],[class*="__foot"]){
  margin-inline:auto;
}

/* ---- the CTA button row: centered, side-by-side, wraps when narrow (was :has(> .btn), (0,2,0)) ---- */
.c-btn-row{ display:flex; flex-flow:row wrap; justify-content:center; align-items:center; gap:14px; }

/* ============================================================================
   LANE-FAMILY COMPONENTS (cycle 4). Clean single-class BEM - regenerated pages
   consume these directly and do NOT fight base, so no parity chains here.
   Owner-settled orientation: heads/hero/CTA centered like the homepage; list
   content reads left inside wide centered grids (HANDOFF §6/§7).
   ========================================================================== */

/* ---- breadcrumb (mono, centered above the hero eyebrow) ---- */
.c-crumb{
  display:flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.03em;
  color:var(--ink-60); margin-bottom:clamp(20px,3vw,28px);
}
.c-crumb a{ color:var(--ink-60); transition:color var(--dur-base) var(--ease-standard); }
.c-crumb a:hover, .c-crumb a:focus-visible{ color:var(--lime); }
.c-crumb__sep{ opacity:.5; }
.c-crumb__here{ color:var(--paper); }

/* ---- page-hero pieces (inside a .c-hero wrap) ---- */
.c-hero__title{ max-width:19ch; margin-block:var(--s-4) 0; margin-inline:auto; font-size:var(--t-h1); line-height:1.05; }
.c-hero__deck{ margin-top:var(--gap-heading-body); margin-inline:auto; max-width:var(--measure); }
.c-hero__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-4); margin-top:clamp(28px,3.6vw,40px); }

/* ---- section head (centered): compose with .c-center on the <header>/head div ---- */
.c-head__title{ margin-block:var(--s-4) 0; margin-inline:auto; }
.c-head__deck{ margin-top:var(--gap-heading-body); margin-inline:auto; max-width:60ch; }

/* ---- section body stack (spacing between the head and the statement/prose block) ---- */
.c-body{ margin-top:clamp(28px,3.6vw,40px); display:flex; flex-direction:column; gap:20px; }

/* ---- centered lead paragraph (the "what it is" statement) ---- */
.c-lede{
  font-family:var(--f-display); font-weight:600; font-size:var(--t-h4); line-height:1.45;
  color:var(--paper-full); max-width:58ch; margin-inline:auto;
}
.c-prose{ max-width:60ch; margin-inline:auto; }

/* ---- mono foot line under a section ---- */
.c-foot{ margin-top:clamp(32px,4vw,48px); font-size:var(--t-eyebrow); letter-spacing:.04em; color:var(--paper-muted); }
.section--blue .c-foot{ color:var(--text-on-blue-muted); }

/* ---- fit / not-fit split (two dot-lists with a hairline divider) ---- */
.c-fit{
  margin-top:clamp(44px,5.4vw,64px);
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(28px,4vw,56px); align-items:start; text-align:left;
}
.c-fit__divider{ width:1px; align-self:stretch; background:rgba(245,245,245,.24); }
.c-fit__label{ font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; color:var(--lime); }
.c-fit__label--wait{ color:rgba(245,245,245,.55); }
.c-fit__list{ margin-top:18px; display:flex; flex-direction:column; gap:var(--s-4); }
.c-fit__item{ position:relative; padding-left:22px; font-size:var(--t-note); line-height:1.55; }
.c-fit__item::before{
  content:""; position:absolute; left:0; top:8px; width:7px; height:7px;
  border-radius:var(--r-btn); background:var(--lime);
}
.c-fit__col--wait .c-fit__item::before{ background:rgba(245,245,245,.4); }
@media (max-width:767px){
  .c-fit{ grid-template-columns:1fr; }
  .c-fit__divider{ width:auto; height:1px; margin-block:var(--s-2); }
}

/* ---- numbered step rows (hairline-divided, 2-col on desktop) ---- */
.c-steps{
  margin-top:clamp(44px,5.4vw,64px);
  display:grid; grid-template-columns:1fr; gap:0; text-align:left;
  border-bottom:1px solid rgba(245,245,245,.16);
}
.c-steps__row{
  display:grid; grid-template-columns:3.5rem 1fr; gap:clamp(16px,2.4vw,24px);
  align-items:start; padding-block:var(--s-5);
  border-top:1px solid rgba(245,245,245,.16);
}
.c-steps__num{ width:auto; font-size:clamp(24px,3.2vw,34px); opacity:.9; }
.c-steps__body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.c-steps__name{ font-family:var(--f-display); font-weight:600; text-transform:lowercase; font-size:var(--t-h4); color:var(--paper-full); }
.c-steps__copy{ margin-top:2px; max-width:66ch; font-size:var(--t-body); line-height:1.6; color:var(--paper); }
@media (min-width:768px){
  .c-steps{ grid-template-columns:1fr 1fr; column-gap:clamp(48px,6vw,88px); }
  .c-steps__row{ grid-template-columns:4.5rem 1fr; }
  .c-steps__copy{ max-width:none; }
}

/* ---- dot list grid (what's included) ---- */
.c-dots{
  margin-top:clamp(40px,5vw,56px);
  display:grid; grid-template-columns:1fr; gap:var(--s-4) 40px; text-align:left;
}
.c-dots__item{ display:flex; align-items:flex-start; gap:var(--s-3); font-size:var(--t-note); line-height:1.55; max-width:52ch; }
.c-dots__dot{ flex:none; margin-top:var(--s-2); width:7px; height:7px; border-radius:var(--r-btn); background:var(--lime); }
@media (min-width:768px){
  .c-dots{ grid-template-columns:1fr 1fr; }
}

/* ---- elevated closing CTA pieces (on the lime band, inside .c-cta) ---- */
/* line-height 1.05 let the chip's padded box overlap the line above when it wrapped at
   mobile widths (clipped descenders, colliding boxes - cycle 12); 1.14 clears the box */
.c-cta__title{ margin-block:var(--s-4) 0; margin-inline:auto; max-width:20ch; color:var(--lime-ink); line-height:1.14; letter-spacing:-0.02em; }
/* inline-block: a wrapping chip moves to its own line as ONE box. The old inline+clone
   treatment painted a box per text line and the boxes collided with / clipped the line
   above wherever the phrase wrapped (cycle-12 spot re-score, home/ai/reporting at 390) */
.c-cta__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%;
}
.c-cta__deck{ margin-top:var(--gap-heading-body); margin-inline:auto; color:rgba(10,10,10,.72); max-width:58ch; }
.c-cta__note{ margin-top:var(--s-4); color:rgba(10,10,10,.6); font-size:var(--t-eyebrow); }
.c-cta__foot{
  margin-top:clamp(28px,4vw,44px); padding-top:var(--s-4); margin-inline:auto;
  border-top:1.5px solid rgba(10,10,10,.16); max-width:420px;
  font-size:var(--t-eyebrow); letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:rgba(10,10,10,.6);
}
.section--lime .c-cta .eyebrow::before{ background:var(--lime-ink); }

/* ============================================================================
   INDUSTRY-FAMILY COMPONENTS (cycle 5). Same clean BEM contract as the lane
   set; ported from the 91-95% identical industries-* clone cluster.
   ========================================================================== */

/* ---- mono note under a hero deck ---- */
.c-hero__note{
  margin-top:18px; margin-inline:auto; max-width:62ch;
  color:var(--paper-muted); font-size:var(--t-eyebrow); line-height:1.6; letter-spacing:.01em;
}
.section--blue .c-hero__note{ color:var(--text-on-blue-muted); }

/* ---- use-case grid (display-face dot items, 2-col desktop) ---- */
.c-uses{
  margin-top:clamp(36px,4.6vw,52px);
  display:grid; grid-template-columns:1fr; gap:14px 40px; text-align:left;
}
.c-uses__item{
  display:flex; align-items:flex-start; gap:var(--s-3);
  font-family:var(--f-display); font-weight:600; text-transform:lowercase;
  font-size:clamp(16px,1.5vw,19px); line-height:1.4;
}
.c-uses__dot{
  flex:none; margin-top:9px; width:7px; height:7px; border-radius:var(--r-btn);
  background:currentColor; opacity:.85;
}
@media (min-width:768px){
  .c-uses{ grid-template-columns:1fr 1fr; }
}

/* ---- labeled callout under a grid (e.g. qualification logic) ---- */
.c-callout{
  margin-top:clamp(40px,5vw,56px); margin-inline:auto;
  padding-top:clamp(24px,3vw,32px);
  border-top:1px solid rgba(245,245,245,.22);
  display:flex; flex-direction:column; gap:10px;
  max-width:70ch; text-align:left;
}
.c-callout__label{ font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; opacity:.72; }
.c-callout__copy{ font-size:var(--t-note); line-height:1.6; }

/* ---- numbered link rows (industry revenue-lanes list: single column, small numerals) ---- */
.c-rows{
  margin-top:clamp(40px,5vw,56px);
  display:flex; flex-direction:column; text-align:left;
}
.c-rows__row{
  display:flex; align-items:flex-start; gap:clamp(20px,4vw,44px);
  padding-block:clamp(20px,2.8vw,28px);
  border-top:1px solid rgba(245,245,245,.16);
}
.c-rows__row:last-child{ border-bottom:1px solid rgba(245,245,245,.16); }
.c-rows__num{ flex:none; width:2.4ch; font-size:clamp(22px,2.8vw,30px); opacity:.9; }
.c-rows__body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.c-rows__name{ font-family:var(--f-display); font-weight:600; text-transform:lowercase; font-size:var(--t-h4); color:var(--paper-full); }
.c-rows__copy{ margin-top:2px; max-width:66ch; font-size:var(--t-body); line-height:1.6; color:var(--paper); }
.c-rows__link{ margin-top:6px; font-size:var(--t-small); }

/* ---- ownership split (omnikom operates / you own) ---- */
.c-own{
  margin-top:clamp(40px,5vw,56px);
  display:grid; grid-template-columns:1fr; gap:36px; text-align:left;
}
.c-own__label{ font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; color:var(--lime); }
.c-own__list{ margin-top:var(--s-4); display:flex; flex-direction:column; gap:14px; }
.c-own__item{
  position:relative; padding-left:22px; font-size:var(--t-note); line-height:1.55;
  max-width:52ch; color:var(--paper);
}
.c-own__item::before{
  content:""; position:absolute; left:0; top:8px; width:7px; height:7px;
  border-radius:var(--r-btn); background:var(--lime); opacity:.8;
}
.c-own__line{ margin-top:14px; font-size:var(--t-eyebrow); letter-spacing:.03em; color:var(--paper-muted); }
.section--blue .c-own__line{ color:var(--text-on-blue-muted); }
@media (min-width:768px){
  .c-own{ grid-template-columns:1fr 1fr; }
}

/* ---- horizontal process chain (design -> deploy -> ... -> you close) ---- */
.c-chain{
  margin-top:clamp(36px,4.6vw,52px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0;
  list-style:none; padding:0;
}
.c-chain__step{ display:flex; align-items:baseline; gap:var(--s-2); padding-block:10px; }
.c-chain__step:not(:last-child)::after{
  content:"\2192"; margin-inline:clamp(10px,1.6vw,20px); opacity:.5; font-size:var(--t-small);
}
.c-chain__num{ font-size:var(--t-label); opacity:.7; }
.c-chain__name{ font-family:var(--f-display); font-weight:600; text-transform:lowercase; font-size:var(--t-note); }
.c-chain__step--close .c-chain__name{ color:var(--lime, currentColor); }
@media (max-width:767px){
  .c-chain{ flex-direction:column; align-items:center; gap:2px; }
  .c-chain__step:not(:last-child)::after{ display:none; }
}

/* ---- OPERATOR-APPROVED variants (cycle 7) ---- */
/* mono chain notes (design -> deploy -> ...) hold one line on desktop instead of a
   ragged centered wrap; phones wrap normally */
.c-hero__note--chain{ white-space:nowrap; }
@media (max-width:767px){ .c-hero__note--chain{ white-space:normal; } }
/* blue-band re-ink for numbered steps - was duplicated in two page files */
.section--blue .c-steps__name{ color:var(--text-on-blue); }
.section--blue .c-steps__copy{ color:var(--text-on-blue-muted); }

/* ============================================================================
   HUB COMPONENTS (cycle 9) - c-stack (platform layer modules), c-cards
   (weighted vertical rows + compact grid), c-path (the lane stage progression).
   Same contract: single-class BEM, tokens only, canonical breakpoints.
   ========================================================================== */

/* ---- the platform layer stack ---- */
.c-stack{ margin-top:clamp(44px,5.4vw,64px); display:flex; flex-direction:column; text-align:left; }
.c-stack__module{
  display:grid; grid-template-columns:4.5rem 1fr auto; gap:clamp(16px,2.4vw,24px);
  align-items:baseline; padding:clamp(20px,2.6vw,28px) clamp(16px,2vw,28px);
  border:1px solid var(--ink-40); border-bottom-width:0;
  transition:border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.c-stack__module:first-child{ border-radius:var(--r-card) var(--r-card) 0 0; }
.c-stack__module:last-child{ border-bottom-width:1px; border-radius:0 0 var(--r-card) var(--r-card); }
.c-stack__module:hover{ border-color:var(--ink-50); background:var(--ink-10); }
.c-stack__num{ font-family:var(--f-mono); font-size:var(--t-eyebrow); color:var(--lime); opacity:.9; }
.c-stack__body{ min-width:0; }
.c-stack__name{ font-family:var(--f-display); font-weight:600; text-transform:lowercase; font-size:var(--t-h4); color:var(--paper-full); }
.c-stack__role{ margin-top:4px; font-size:var(--t-note); line-height:1.55; color:var(--paper); max-width:66ch; }
.c-stack__link{ font-size:var(--t-small); white-space:nowrap; }
@media (max-width:639px){
  .c-stack__module{ grid-template-columns:3rem 1fr; }
  .c-stack__link{ grid-column:2; justify-self:start; margin-top:6px; }
}

/* ---- weighted row cards (hub directories) ---- */
.c-cards{ margin-top:clamp(40px,5vw,56px); display:flex; flex-direction:column; gap:var(--s-4); text-align:left; }
.c-cards__card{
  display:grid; grid-template-columns:3.5rem 1fr auto; gap:clamp(16px,2.4vw,28px); align-items:start;
  padding:clamp(22px,2.8vw,32px) clamp(18px,2.2vw,30px);
  border:1px solid var(--ink-40); border-radius:var(--r-card);
  transition:border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
a.c-cards__card:hover, a.c-cards__card:focus-visible{ border-color:var(--lime); transform:translateY(-2px); }
.c-cards__num{ font-family:var(--f-mono); font-size:var(--t-eyebrow); color:var(--ink-60); }
.c-cards__body{ min-width:0; }
.c-cards__name{ font-family:var(--f-display); font-weight:600; text-transform:lowercase; font-size:var(--t-h4); color:var(--paper-full); }
.c-cards__line{ margin-top:6px; font-size:var(--t-note); line-height:1.55; color:var(--paper); max-width:64ch; }
.c-cards__tags{ margin-top:var(--s-3); display:flex; flex-wrap:wrap; gap:var(--s-2); }
.c-cards__tag{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.02em; color:var(--paper-muted);
  padding:4px 12px; border:1px solid var(--ink-40); border-radius:var(--r-badge);
}
.c-cards__arw{ color:var(--lime); font-size:var(--t-h4); align-self:center; }
/* compact 2-col grid for the long tail */
.c-cards--compact{ display:grid; grid-template-columns:1fr; gap:var(--s-3); }
.c-cards--compact .c-cards__card{ grid-template-columns:1fr auto; padding:clamp(16px,2vw,22px) clamp(16px,2vw,24px); }
.c-cards--compact .c-cards__num{ display:none; }
@media (min-width:768px){
  .c-cards--compact{ grid-template-columns:1fr 1fr; column-gap:var(--s-5); }
}
@media (max-width:639px){
  .c-cards__card{ grid-template-columns:1fr auto; }
  .c-cards__num{ display:none; }
}

/* ---- the stage path (validation -> growth -> expansion -> enterprise) ---- */
.c-path{ margin-top:clamp(44px,5.4vw,64px); display:grid; grid-template-columns:1fr; gap:var(--s-4); text-align:left; position:relative; }
.c-path__stage{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:clamp(20px,2.6vw,28px); border:1px solid var(--ink-40); border-radius:var(--r-card);
  transition:border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
a.c-path__stage:hover, a.c-path__stage:focus-visible{ border-color:var(--lime); transform:translateY(-2px); }
.c-path__num{ font-family:var(--f-mono); font-size:var(--t-label); color:var(--lime); letter-spacing:.08em; text-transform:uppercase; }
.c-path__name{ font-family:var(--f-display); font-weight:600; text-transform:lowercase; font-size:var(--t-h4); color:var(--paper-full); }
.c-path__line{ font-size:var(--t-note); line-height:1.55; color:var(--paper); }
.c-path__fits{ margin-top:auto; padding-top:var(--s-2); font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.02em; color:var(--paper-muted); }
@media (min-width:768px){
  .c-path{ grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,32px); }
  /* the connecting thread between stages - a plain hairline, no arrowheads (male-sign rule) */
  .c-path__stage:not(:last-child)::after{
    content:""; position:absolute; top:50%; right:calc(-1 * clamp(20px,2.4vw,32px));
    width:clamp(20px,2.4vw,32px); height:1px; background:var(--ink-50);
  }
}