/* ============================================================
   Rockmere Design v2 prototype — "Editorial Poster" (D-047)
   v4: living canvas backdrop, photographic panels, interleaved
   geometry, grain. Sections are transparent; the scene is fixed
   behind everything (reference architecture).
   ============================================================ */

:root{
  --ink:        oklch(24% 0.018 268);
  --ink-soft:   oklch(34% 0.015 268);
  --grey:       oklch(50% 0.014 268);
  --grey-lt:    oklch(63% 0.015 268);
  --line:       oklch(88% 0.007 268);
  --paper:      oklch(99.4% 0.0015 268);
  --panel:      oklch(96.4% 0.004 268);
  --panel-2:    oklch(96.3% 0.005 268);

  --blue:       #E41613;
  --blue-deep:  #A50F0D;
  --blue-numeral: oklch(56% 0.21 28);

  --sans:'Inter Tight',system-ui,-apple-system,sans-serif;
  /* RM Serif Digits first: digits 0-9 come from the sans (unicode-range @font-face,
     defined in the v21 block). Instrument Serif's bare-stroke 1 reads as lowercase l
     at every size we actually ship ("11%" -> "ll%"), so no serif numeral survives. */
  --serif:'RM Serif Digits','Instrument Serif',Georgia,serif;

  --hd-h: 74px;             /* nav bar height; heroes and sticky offsets key off this */
  --fs-display: clamp(2.7rem, 7.8vw, 7.9rem);
  --fs-state:   clamp(2.1rem, 4.6vw, 4.1rem);
  /* vh cap: the deck title is vertically centered while the tabs column above it is
     fixed-size, so on wide-short viewports (1900x950 office monitors) a vw-only clamp
     grows the title into the tabs. 9.6vh keeps its top edge below them at any ratio. */
  --fs-deck:    min(clamp(2.3rem, 6.3vw, 6.2rem), 9.6vh);
  --fs-numeral: clamp(3.8rem, 7.4vw, 6.6rem);
  --fs-body:    clamp(1.2rem, 1.1vw + 0.95rem, 1.38rem);
  --fs-small:   1.1rem;
  --fs-util:    .95rem;

  --sp-xs:.5rem; --sp-sm:.75rem; --sp-md:1.5rem; --sp-lg:2.3rem;
  /* third whitespace trim (owner, 2026-07-16, all 55 pages): -30% on section gaps */
  --sp-xl: clamp(2.1rem, 4vw, 4.3rem);
  --sp-band: clamp(3rem, 5.7vw, 5.7rem);
  --gutter: clamp(1.25rem, 4vw, 4.5rem);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.87,0,.13,1);
}

*{box-sizing:border-box; margin:0}
html{scroll-behavior:auto}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; letter-spacing:-.011em;
}
/* horizontal-overflow guard: mobile only (desktop has none, and clipping here
   would break the home services deck's position:sticky pin) */
@media (max-width:820px){ html, body{ overflow-x:clip } }
a{color:inherit; text-decoration:none}
h1,h2,h3{font-weight:500; line-height:1}
img{max-width:100%; display:block}
sup{font-size:.5em}

/* ---------- the mere: fixed living backdrop ---------- */
#mere{
  position:fixed; inset:0; z-index:-2; width:100%; height:100%;
  pointer-events:none; opacity:0;
}
/* film grain over everything, very quiet */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ---------- utility text ---------- */
.util{
  font-size:var(--fs-util); font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--grey);
}
.ul-link{
  position:relative; display:inline-block; font-size:var(--fs-small);
  font-weight:600; letter-spacing:.01em; padding-bottom:2px;
}
.ul-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.ul-link:hover::after{ transform:scaleX(0) }

/* ---------- header ---------- */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:stretch;
  background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:transform .5s var(--ease-out);
  height:var(--hd-h);
}
.hd.is-hidden{ transform:translateY(-100%) }
.hd-mark{
  display:flex; align-items:center; padding:0 var(--gutter);
  font-size:var(--fs-util); font-weight:800; letter-spacing:.18em; color:var(--ink);
}
.hd-mark span{ color:var(--grey); font-weight:600; margin-left:.5em }
.hd-nav{ display:flex; align-items:center; gap:2.2rem; margin-left:auto; padding:0 2rem }
.hd-nav a{
  font-size:var(--fs-util); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); transition:color .25s;
}
.hd-nav a:hover{ color:var(--ink) }
.hd-cta{
  display:flex; align-items:center; padding:0 2.2rem;
  background:var(--ink); color:var(--paper);
  font-size:var(--fs-util); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:background .3s;
}
.hd-cta:hover{ background:var(--blue-deep) }
.nav-logo{ height:38px; width:auto; display:block }
#pre .pre-logo{ height:52px; width:auto }
.ft-logo{ height:38px; width:auto; filter:brightness(0) invert(1); margin-bottom:1rem }
/* mobile menu (hidden on desktop) */
.hd-burger{ display:none }
.hd-menu{ display:none }

/* ---------- hero (transparent, scene shows through) ---------- */
.hero{
  /* hero heights joined the -30% pass (owner, 2026-07-16); min-heights only,
     so content-heavy heroes still grow as needed */
  position:relative; min-height:74svh; display:flex; flex-direction:column;
  justify-content:center; padding:calc(var(--hd-h) + 4vh) var(--gutter) 7vh; overflow:hidden;
  background:oklch(95.5% 0.002 268);
}
.hero-badge{ position:relative; z-index:1; margin-bottom:var(--sp-md); opacity:0 }
.hero-title{
  position:relative; z-index:1;
  font-size:var(--fs-display); font-weight:500;
  letter-spacing:-.045em; line-height:.95; max-width:12ch;
}
.hero-title .ln{ display:block; overflow:hidden }
.hero-title .ln > span{ display:inline-block; transform:translateY(110%) }
.hero-title .accent{ color:var(--blue) }
.hero-side{
  position:absolute; right:var(--gutter); bottom:14vh; z-index:1;
  max-width:24ch; text-align:left; opacity:0;
}
.hero-side p{
  font-size:clamp(1.05rem, 1.5vw, 1.4rem); font-weight:500;
  letter-spacing:-.01em; line-height:1.3; color:var(--ink-soft); margin-bottom:var(--sp-sm);
}
.hero-scroll{
  position:absolute; left:var(--gutter); bottom:6vh; z-index:1;
  font-size:var(--fs-util); letter-spacing:.22em; text-transform:uppercase; color:var(--grey);
  opacity:0;
}

/* ---------- statement ---------- */
.statement{ padding:var(--sp-band) var(--gutter); text-align:center; position:relative }
.statement .util{ display:block; margin-bottom:var(--sp-lg) }
.fill{
  font-size:var(--fs-state); font-weight:700; letter-spacing:-.03em; line-height:1.08;
  max-width:24ch; margin:0 auto;
}
.fill .ch{ color:var(--grey-lt); transition:color .18s linear }
.fill .ch.on{ color:var(--ink) }
.statement-body{
  max-width:62ch; margin:var(--sp-lg) auto 0; color:var(--ink-soft);
  font-size:var(--fs-body); line-height:1.65;
}
.statement .ul-link{ margin-top:var(--sp-md) }

/* ---------- proof ---------- */
.proof{ padding:var(--sp-xl) var(--gutter) var(--sp-band); position:relative }
.proof-head{ margin-bottom:var(--sp-xl) }
.proof-head h2{ font-size:var(--fs-state); letter-spacing:-.03em; line-height:1.06; max-width:17ch }
.proof-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.stat{ background:var(--panel-2); padding:2.2rem 1.8rem 5.5rem }
.stat:nth-child(2), .stat:nth-child(4){ padding-top:5rem; padding-bottom:2.7rem }
.stat .n{
  font-family:var(--serif); font-weight:400; font-size:var(--fs-numeral);
  line-height:.95; color:var(--blue-numeral); letter-spacing:-.01em;
}
.stat .l{ margin-top:1.1rem; font-size:var(--fs-small); color:var(--grey); max-width:18ch }

/* ---------- works strip (photographic rhythm) ---------- */
.works{ padding:0 0 var(--sp-band); position:relative; overflow:hidden }
.works .util{ display:block; text-align:center; margin-bottom:var(--sp-lg) }
.works-track{ display:flex; gap:clamp(1rem,2.4vw,2.4rem); width:max-content; will-change:transform }
.works-track img{
  height:clamp(180px, 30vh, 300px); width:auto; filter:grayscale(1) contrast(1.05);
  flex:0 0 auto;
}

/* ---------- deck ---------- */
.deck-intro{ padding:var(--sp-band) var(--gutter) var(--sp-xl); text-align:center; position:relative }
.deck-intro .util{ display:block; margin-bottom:var(--sp-lg) }
.deck{ position:relative }
.deck-track{ position:relative }
.deck-stage{ position:sticky; top:0; height:88svh; overflow:hidden }
.panel{
  position:absolute; inset:0; overflow:hidden;
  transform:translateY(100%); will-change:transform;
  background:oklch(95.5% 0.002 268);
}
.panel:first-child{ transform:none }
.panel-bg{ position:absolute; inset:0 }
.panel:nth-child(odd)  .panel-bg{ background:var(--panel) }
.panel:nth-child(even) .panel-bg{ background:var(--panel-2) }
.panel-dim{ position:absolute; inset:0; z-index:8; background:var(--ink); opacity:0; pointer-events:none }

/* photography: right-anchored, B&W, tall */
.panel-photo{
  position:absolute; z-index:1; right:0; top:0; height:100%; width:56vw;
  overflow:hidden;
  filter:grayscale(1) contrast(1.06) brightness(1.04); /* container carries B&W so tweened blur on the img can't override it */
}
.panel-photo img{
  width:100%; height:100%; object-fit:cover;
}
.panel-photo::after{ /* blend photo into panel gray */
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--panel) 0%, transparent 34%),
             linear-gradient(0deg, color-mix(in oklab, var(--panel) 55%, transparent) 0%, transparent 30%);
}
.panel:nth-child(even) .panel-photo::after{
  background:linear-gradient(90deg, var(--panel-2) 0%, transparent 34%),
             linear-gradient(0deg, color-mix(in oklab, var(--panel-2) 55%, transparent) 0%, transparent 30%);
}

/* interleaved geometry: g1 behind the title, g2 in front of it */
.panel-geo{ position:absolute; background:var(--blue) }
.panel-geo.g1{ z-index:2; width:23vw; height:11vw; left:41vw; top:20vh }
.panel-geo.g2{ z-index:4; width:23vw; height:11vw; left:52vw; top:calc(20vh + 12.5vw); opacity:.92 }
.panel:nth-child(2) .panel-geo.g1{ left:47vw; top:17vh; width:13vw; height:13vw }
.panel:nth-child(2) .panel-geo.g2{ left:60.5vw; top:calc(17vh + 13.5vw); width:13vw; height:13vw }
.panel:nth-child(3) .panel-geo.g1{ border-radius:50% 50% 0 0; width:22vw; height:11vw; left:44vw; top:19vh }
.panel:nth-child(3) .panel-geo.g2{ border-radius:0 0 50% 50%; width:22vw; height:11vw; left:54vw; top:calc(19vh + 12vw) }
.panel:nth-child(4) .panel-geo.g1{ clip-path:polygon(0 40%, 50% 0, 100% 40%, 100% 100%, 0 100%); width:20vw; height:12vw; left:46vw; top:17vh }
.panel:nth-child(4) .panel-geo.g2{ clip-path:polygon(0 40%, 50% 0, 100% 40%, 100% 100%, 0 100%); width:20vw; height:12vw; left:54vw; top:calc(17vh + 13vw) }
.panel:nth-child(5) .panel-geo.g1{ clip-path:polygon(0 0, 100% 0, 78% 100%, 22% 100%); width:22vw; height:10vw; left:44vw; top:20vh }
.panel:nth-child(5) .panel-geo.g2{ clip-path:polygon(22% 0, 78% 0, 100% 100%, 0 100%); width:22vw; height:10vw; left:53vw; top:calc(20vh + 11vw) }
.panel:nth-child(6) .panel-geo.g1{ width:26vw; height:5.5vw; left:42vw; top:23vh }
.panel:nth-child(6) .panel-geo.g2{ width:26vw; height:5.5vw; left:51vw; top:calc(23vh + 8vw) }

.panel-title{
  position:absolute; z-index:3; left:7vw; top:46%; transform:translateY(-50%);
  font-size:var(--fs-deck); font-weight:500; letter-spacing:-.035em; line-height:.92;
  color:var(--ink-soft); max-width:78vw;
}
.panel-title .t2{ display:block; padding-left:2.2em }
.panel-num{
  position:absolute; z-index:5; right:var(--gutter); top:14vh; text-align:right;
  font-family:var(--serif); font-size:1.4rem; color:var(--ink-soft);
}
.panel-body{
  position:absolute; z-index:5; left:7vw; bottom:9vh; max-width:30ch;
  font-size:var(--fs-small); line-height:1.6; color:var(--ink-soft);
}
.panel-body .ul-link{ margin-top:.9rem }
.panel-rail{
  position:absolute; z-index:5; right:var(--gutter); bottom:9vh;
  display:flex; flex-direction:column; gap:1.3rem; text-align:right;
}
.rail-item .rl{
  font-size:var(--fs-util); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
.rail-item .rv{ font-size:var(--fs-small); color:var(--ink-soft); margin-top:.15rem }
.deck-tabs{
  position:absolute; z-index:9; left:var(--gutter); top:calc(var(--hd-h) + 18px);
  display:flex; flex-direction:column; gap:.4rem;
}
.deck-tabs button{
  all:unset; cursor:pointer; font-family:var(--sans); font-size:var(--fs-small);
  color:var(--grey); transition:color .3s; text-align:left;
}
.deck-tabs button.on{ color:var(--ink); font-weight:600 }

/* ---------- cta ---------- */
.cta{ padding:var(--sp-band) var(--gutter); text-align:center; position:relative }
.cta h2{ font-size:var(--fs-state); letter-spacing:-.03em }
.cta p{ max-width:52ch; margin:var(--sp-md) auto var(--sp-lg); color:var(--ink-soft) }
.btn-ink{
  display:inline-block; background:var(--ink); color:var(--paper);
  padding:1.05rem 2.6rem; font-size:var(--fs-small); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; transition:background .3s;
}
.btn-ink:hover{ background:var(--blue-deep) }

/* ---------- footer ---------- */
.ft{
  padding:2.2rem var(--gutter); display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line); font-size:var(--fs-util); letter-spacing:.1em;
  color:var(--grey); text-transform:uppercase; background:var(--paper);
}

/* ---------- reveal primitives ---------- */
.mask{ opacity:0; transform:translateY(28px) }
html.no-motion .mask{ opacity:1; transform:none; clip-path:none !important }
html.no-motion .hero-title .ln > span{ transform:none }
html.no-motion .hero-badge, html.no-motion .hero-side,
html.no-motion .hero-scroll{ opacity:1 }
html.no-motion #mere{ opacity:.55 }
html.no-motion .fill .ch{ color:var(--ink) }
html.no-motion .deck-stage{ position:relative; height:auto; overflow:visible }
html.no-motion .panel{ position:relative; transform:none; min-height:88svh }
html.no-motion .panel-dim, html.no-motion .deck-tabs{ display:none }

/* ---------- mobile ---------- */
@media (max-width: 820px){
  .hd-nav{ display:none }
  .hero-side{ position:relative; right:auto; bottom:auto; margin-top:var(--sp-lg) }
  .proof-grid{ grid-template-columns:1fr 1fr }
  .stat, .stat:nth-child(2), .stat:nth-child(4){ padding:1.6rem 1.3rem 2.4rem }
  .deck-stage{ position:relative; height:auto; overflow:visible }
  .panel{ position:relative; transform:none !important; min-height:92svh }
  .panel-dim{ display:none }
  .deck-tabs{ display:none }
  .panel-photo{ width:100%; opacity:.5 }
  .panel-title{ left:6vw; max-width:88vw }
  .panel-rail{ right:6vw; bottom:6vh }
  .panel-body{ left:6vw; bottom:30vh; max-width:34ch }
  .works-track img{ height:160px }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* ============================================================
   v4.1 — subpage modules (generated pages)
   ============================================================ */

/* ---------- subpage poster hero ---------- */
.page-hero{
  position:relative; min-height:52svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:calc(var(--hd-h) + 5.5vh) var(--gutter) 6.5vh;
}
.page-hero .util{ margin-bottom:var(--sp-md) }
.page-hero h1{
  font-size:clamp(2.5rem, 6.8vw, 6.8rem); font-weight:700;
  letter-spacing:-.045em; line-height:.98; max-width:14ch;
}
.page-hero h1 .accent{ color:var(--blue) }
.page-hero .ph-sub{
  margin-top:var(--sp-lg); max-width:52ch; color:var(--ink-soft);
  font-size:clamp(1.02rem,1.3vw,1.3rem); line-height:1.55;
}
.page-hero .ph-side{
  position:absolute; right:var(--gutter); bottom:9vh; max-width:24ch;
  font-size:var(--fs-small); color:var(--grey); text-align:right;
}

/* ---------- hub entry list (editorial index) ---------- */
.hub-list{ padding:var(--sp-xl) var(--gutter) var(--sp-band) }
.hub-row{
  display:grid; grid-template-columns:5rem 1fr minmax(24ch,38ch) 22vw; gap:2.5rem;
  align-items:center; padding:2.6rem 0; border-top:1px solid var(--line);
  text-decoration:none; position:relative;
}
.hub-row:last-child{ border-bottom:1px solid var(--line) }
.hub-row .hr-num{ font-family:var(--serif); font-size:1.25rem; color:var(--grey) }
.hub-row .hr-title{
  font-size:clamp(1.6rem,3.2vw,2.9rem); font-weight:700; letter-spacing:-.03em; line-height:1;
  transition:color .3s;
}
.hub-row:hover .hr-title{ color:var(--blue-deep) }
.hub-row .hr-ex{ font-size:var(--fs-small); color:var(--grey); line-height:1.55 }
.hub-row .hr-img{
  height:9.5rem; overflow:hidden; filter:grayscale(1) contrast(1.05);
}
.hub-row .hr-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
.hub-row:hover .hr-img img{ transform:scale(1.05) }
.hub-row .hr-meta{ font-size:var(--fs-util); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-top:.6rem }

/* ---------- detail sections ---------- */
.sec-pad{ padding:var(--sp-xl) var(--gutter) }
.sec-kick{ display:block; margin-bottom:var(--sp-lg) }
.body-col{
  max-width:68ch; font-size:var(--fs-body); line-height:1.7; color:var(--ink-soft);
}
.body-col h2{ font-size:clamp(1.5rem,2.6vw,2.2rem); letter-spacing:-.02em; color:var(--ink); margin:2.6rem 0 1rem }
.body-col h3{ font-size:1.25rem; color:var(--ink); margin:2rem 0 .8rem }
.body-col p{ margin:0 0 1.1rem }
.body-col ul, .body-col ol{ margin:0 0 1.2rem; padding-left:1.2rem }
.body-col li{ margin:.4rem 0 }
.body-col a{ text-decoration:underline; text-underline-offset:3px }
.body-col strong{ color:var(--ink) }
.body-col img{ filter:grayscale(1); margin:1.6rem 0 }
.body-col blockquote{ margin:2rem 0; padding:0; font-family:var(--serif); font-size:1.5rem; line-height:1.35; color:var(--ink) }

/* process band */
.pband{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--sp-lg) }
.pstep{ background:color-mix(in oklab,var(--paper) 92%,transparent); padding:2rem 1.7rem 2.4rem }
.pstep .pn{ font-family:var(--serif); font-size:2.6rem; color:var(--blue-numeral); line-height:1 }
.pstep .pk{ font-size:var(--fs-util); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin:.9rem 0 .5rem }
.pstep .ph{ font-weight:700; letter-spacing:-.01em; margin-bottom:.5rem }
.pstep .pb{ font-size:var(--fs-small); color:var(--grey); line-height:1.55 }

/* quiet card grid (roles, challenges, approach, focus) */
/* hairlines are drawn per-cell, never via a grey container showing through gaps:
   with 6 items in a 5-track row the leftover tracks used to render as a solid
   grey slab (a fail-safe-rendering violation; any item count must look intended) */
/* separate blocks (owner): 3 across, 2 rows for the 6 frameworks; count-agnostic */
.qgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; background:transparent; border:0; margin-top:var(--sp-lg) }
.qcell{ background:#fff; border:1px solid var(--line); padding:2.2rem 2.2rem 2.4rem }
.qcell .qm{ font-family:var(--serif); font-size:1.9rem; color:var(--blue-numeral); line-height:1; margin-bottom:.7rem }
.qcell .qt{ font-weight:700; letter-spacing:-.01em; margin-bottom:.5rem }
.qcell .qb{ font-size:var(--fs-small); color:var(--grey); line-height:1.55 }

/* FAQ */
.faq-wrap{ max-width:78ch }
.faq-wrap details{ border-top:1px solid var(--line); padding:1.2rem 0 }
.faq-wrap details:last-child{ border-bottom:1px solid var(--line) }
.faq-wrap summary{
  cursor:pointer; list-style:none; font-weight:500; letter-spacing:-.01em;
  display:flex; justify-content:space-between; gap:2rem;
}
.faq-wrap summary::after{ content:"+"; font-family:var(--serif); font-size:1.3rem; color:var(--grey) }
.faq-wrap details[open] summary::after{ content:"–" }
.faq-wrap .fa{ padding:1rem 0 .4rem; max-width:62ch; color:var(--ink-soft); font-size:var(--fs-small); line-height:1.65 }

/* related cards */
.rel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--sp-lg) }
.rel-card{ background:color-mix(in oklab,var(--paper) 92%,transparent); padding:1.8rem 1.6rem 2.2rem; text-decoration:none; transition:background .3s }
.rel-card:hover{ background:var(--paper) }
.rel-card .rk{ font-size:var(--fs-util); letter-spacing:.16em; text-transform:uppercase; color:var(--grey) }
.rel-card .rt{ font-weight:700; letter-spacing:-.015em; font-size:1.42rem; margin:.7rem 0 .4rem }
.rel-card .rm2{ font-family:var(--serif); font-size:1.7rem; color:var(--blue-numeral) }
.rel-card .rb{ font-size:var(--fs-small); color:var(--grey); line-height:1.5 }

/* ---------- article (case study / resource) ---------- */
.article-head{ padding:calc(var(--hd-h) + 5.5vh) var(--gutter) var(--sp-lg); display:grid; grid-template-columns:1fr minmax(20ch,26ch); gap:4rem; align-items:end }
.article-head h1{ font-size:clamp(2.1rem,4.7vw,4.2rem); font-weight:500; letter-spacing:-.04em; line-height:.96; max-width:18ch }
.article-facts{ display:flex; flex-direction:column; gap:1.1rem; text-align:right }
.article-facts .rl{ font-size:var(--fs-util); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink) }
.article-facts .rv{ font-size:var(--fs-small); color:var(--ink-soft); margin-top:.1rem }
.article-hero-img{ margin:0 var(--gutter); height:52svh; overflow:hidden; filter:grayscale(1) contrast(1.05) }
.article-hero-img img{ width:100%; height:100%; object-fit:cover }
.article-wrap{ padding:var(--sp-xl) var(--gutter) var(--sp-band); display:grid; grid-template-columns:minmax(0,72ch) 1fr; gap:5rem }
.video-embed{ aspect-ratio:16/9; margin:0 var(--gutter) var(--sp-lg); background:var(--ink) }
.video-embed iframe{ width:100%; height:100%; border:0 }

/* ---------- consultant profile ---------- */
.profile-hero{ display:grid; grid-template-columns:minmax(300px,42vw) 1fr; min-height:66svh; padding-top:var(--hd-h) }
.profile-photo{ filter:grayscale(1) contrast(1.04); overflow:hidden; background:var(--panel-2) }
.profile-photo img{ width:100%; height:100%; object-fit:cover; object-position:top }
.profile-main{ padding:6vh var(--gutter) 6vh 4rem; display:flex; flex-direction:column; justify-content:center }
.profile-main h1{ font-size:clamp(2.6rem,5.4vw,5.2rem); font-weight:500; letter-spacing:-.04em; line-height:.94 }
.profile-role{ margin:1.2rem 0 2rem; color:var(--grey); font-size:var(--fs-small); letter-spacing:.06em; text-transform:uppercase; font-weight:600 }
.profile-lede{ max-width:52ch; color:var(--ink-soft); line-height:1.65 }
.profile-facts{ display:flex; gap:3rem; margin-top:2.6rem; flex-wrap:wrap }
.pf .rl{ font-size:var(--fs-util); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink) }
.pf .rv{ font-family:var(--serif); font-size:1.9rem; color:var(--blue-numeral); margin-top:.3rem }
.cred-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--sp-lg) }
.ledger{ margin-top:var(--sp-lg); border-top:1px solid var(--line) }
.ledger-row{ display:grid; grid-template-columns:1fr minmax(16ch,22ch); gap:2rem; padding:1.4rem 0; border-bottom:1px solid var(--line) }
.ledger-row .lr-what{ color:var(--ink-soft); font-size:var(--fs-small); line-height:1.55 }
.ledger-row .lr-out{ font-family:var(--serif); font-size:1.35rem; color:var(--blue-numeral); text-align:right }
.pull-quote{ margin:var(--sp-xl) 0 0; font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.3; max-width:34ch }
.pull-cite{ margin-top:1rem; font-size:var(--fs-util); letter-spacing:.14em; text-transform:uppercase; color:var(--grey) }

/* ---------- forms ---------- */
.form-grid{ display:grid; grid-template-columns:minmax(28ch,1fr) minmax(30ch,44rem); gap:5rem; padding:var(--sp-xl) var(--gutter) var(--sp-band) }
.form-grid label{ display:block; font-size:var(--fs-util); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:1.6rem 0 .5rem }
.form-grid input, .form-grid textarea, .form-grid select{
  width:100%; border:1px solid var(--line); background:color-mix(in oklab,var(--paper) 92%,transparent);
  padding:.9rem 1rem; font-family:var(--sans); font-size:var(--fs-small); color:var(--ink);
}
.form-grid input:focus, .form-grid textarea:focus{ outline:2px solid var(--blue); outline-offset:0 }
.contact-side .ci{ margin-bottom:2rem }
.contact-side .rl{ font-size:var(--fs-util); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink) }
.contact-side .rv{ color:var(--ink-soft); margin-top:.2rem }

/* ---------- legal ---------- */
.legal-col{ max-width:68ch; padding:var(--sp-xl) var(--gutter) var(--sp-band) }
.legal-col h2{ font-size:1.45rem; margin:2.2rem 0 .8rem }
.legal-col p, .legal-col li{ color:var(--ink-soft); font-size:var(--fs-small); line-height:1.7 }

/* ---------- 404 ---------- */
.nf{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:0 var(--gutter) }
.nf .n4{ font-family:var(--serif); font-size:clamp(6rem,18vw,16rem); color:var(--blue-numeral); line-height:1 }

@media (max-width: 820px){
  .hub-row{ grid-template-columns:2.6rem 1fr; grid-template-rows:auto auto; gap:1rem }
  .hub-row .hr-ex{ grid-column:2 }
  .hub-row .hr-img{ display:none }
  .article-head{ grid-template-columns:1fr }
  .article-facts{ text-align:left }
  .article-wrap{ grid-template-columns:1fr }
  .profile-hero{ grid-template-columns:1fr }
  .profile-photo{ height:52svh }
  .form-grid{ grid-template-columns:1fr }
  .page-hero .ph-side{ display:none }
}

/* ============================================================
   v5.1 — editorial movements (no more walls of text)
   ============================================================ */

/* detail hero with photo poster */
.page-hero--photo{ min-height:66svh; overflow:visible }
.hero-photo{
  position:absolute; inset:0 0 0 auto; width:52vw; z-index:-1;
  filter:grayscale(1) contrast(1.06) brightness(1.05);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover }
.page-hero--photo .hero-photo{ overflow:hidden }
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--paper) 0%, color-mix(in oklab, var(--paper) 55%, transparent) 38%, transparent 70%),
             linear-gradient(0deg, color-mix(in oklab, var(--paper) 80%, transparent) 0%, transparent 26%);
}
.page-hero--photo .hero-geo{ position:absolute; z-index:-1; background:var(--blue); width:17vw; height:8vw; right:30vw; top:18vh; opacity:.9 }
.page-hero--photo .hero-geo.b{ right:20vw; top:calc(18vh + 9.5vw); opacity:.75 }

/* movement: chapter split (sticky chapter head left, text right) */
.mv{ position:relative }
.mv-split{ display:grid; grid-template-columns:minmax(22ch,1fr) minmax(0,62ch); gap:5rem; padding:var(--sp-xl) var(--gutter); align-items:start }
.mv-split .mv-head{ position:sticky; top:16vh }
.chapter-num{ font-family:var(--serif); font-size:2.2rem; color:var(--blue-numeral); line-height:1 }
.mv-head h2{ font-size:clamp(1.7rem,3.2vw,2.9rem); letter-spacing:-.03em; line-height:1.02; margin-top:1rem; max-width:14ch }
.mv-copy{ font-size:var(--fs-body); line-height:1.7; color:var(--ink-soft) }
.mv-copy p{ margin:0 0 1.1rem }
.mv-copy p:first-child{ font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.55; color:var(--ink); letter-spacing:-.01em }
.mv-copy ul, .mv-copy ol{ margin:1.2rem 0 1.4rem; padding:0; list-style:none }
.mv-copy li{ padding:.85rem 0; border-top:1px solid var(--line); font-size:var(--fs-small); line-height:1.55 }
.mv-copy li:last-child{ border-bottom:1px solid var(--line) }
.mv-copy h3{ font-size:1.35rem; margin:1.8rem 0 .6rem; color:var(--ink) }
.mv-copy a{ text-decoration:underline; text-underline-offset:3px }
.mv-copy strong{ color:var(--ink) }
.mv-copy blockquote{ margin:2rem 0; font-family:var(--serif); font-size:1.6rem; line-height:1.3; color:var(--ink) }

/* movement: full-bleed band on panel gray */
.mv-band{ background:var(--panel-2); padding:var(--sp-xl) var(--gutter) }
.mv-band .mv-inner{ display:grid; grid-template-columns:minmax(22ch,1fr) minmax(0,62ch); gap:5rem; align-items:start }
.mv-band .mv-head{ position:sticky; top:16vh }

/* movement: statement chapter (centered fill heading + measured copy) */
.mv-state{ padding:var(--sp-band) var(--gutter); text-align:center }
.mv-state .chapter-num{ margin-bottom:1.2rem }
.mv-state h2{ font-size:var(--fs-state); letter-spacing:-.03em; line-height:1.08; max-width:22ch; margin:0 auto }
.mv-state .mv-copy{ max-width:60ch; margin:var(--sp-lg) auto 0; text-align:left }

/* movement: photo interlude */
.mv-photo{ height:46svh; margin:var(--sp-lg) 0; overflow:hidden; filter:grayscale(1) contrast(1.05); position:relative }
.mv-photo img{ width:100%; height:118%; object-fit:cover; will-change:transform }
.mv-photo .mv-photo-geo{ position:absolute; background:var(--blue); width:14vw; height:6.5vw; left:12vw; bottom:-1px; opacity:.9 }

/* movement: pull quote interlude */
.mv-quote{ padding:var(--sp-xl) var(--gutter); text-align:center }
.mv-quote .pq{ font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.9rem); line-height:1.22; max-width:30ch; margin:0 auto; color:var(--ink) }
.mv-quote .pq::before{ content:'"' } .mv-quote .pq::after{ content:'"' }

@media (max-width:820px){
  .mv-split, .mv-band .mv-inner{ grid-template-columns:1fr; gap:1.6rem }
  .mv-split .mv-head, .mv-band .mv-head{ position:static }
  .hero-photo{ width:100%; opacity:.35 }
}
.mv-copy h2{ font-size:1.3rem; letter-spacing:-.01em; margin:2rem 0 .7rem; color:var(--ink) }

/* ============================================================
   v5.2 — ledger language for mid-page structures + hub upgrades
   ============================================================ */

/* ledgers replace text boxes: hairline rows, serif anchors */
.ledg{ border-top:1px solid var(--line); margin-top:var(--sp-lg) }
.ledg-row{
  display:grid; grid-template-columns:5.5rem minmax(14ch,22ch) 1fr; gap:2.5rem;
  padding:1.8rem 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.ledg-row .ln2{ font-family:var(--serif); font-size:1.9rem; color:var(--blue-numeral); line-height:1 }
.ledg-row .lt{ font-weight:700; letter-spacing:-.015em; font-size:1.18rem }
.ledg-row .lb{ color:var(--ink-soft); font-size:var(--fs-small); line-height:1.6; max-width:58ch }
.ledg-row.no-num{ grid-template-columns:minmax(14ch,22ch) 1fr }
.ledg-row .lm{ font-family:var(--serif); font-size:1.9rem; color:var(--blue-numeral); line-height:1.05 }

/* section header for ledger groups */
.ledg-head{ display:flex; align-items:baseline; gap:2rem }
.ledg-head h2{ font-size:clamp(1.6rem,3vw,2.6rem); letter-spacing:-.03em }

/* hub rows: more presence */
.hub-row{ grid-template-columns:5rem 1fr minmax(24ch,38ch) 26vw; padding:3.2rem 0 }
.hub-row .hr-num{ font-size:1.5rem; color:var(--blue-numeral) }
.hub-row .hr-img{ height:12.5rem }
.hub-group{ padding-top:var(--sp-lg) }
.hub-group .util{ display:block; margin:0 0 .6rem }

/* detail hero poster index */
.hero-index{
  position:absolute; right:var(--gutter); top:calc(var(--hd-h) + 6vh);
  font-family:var(--serif); font-size:1.5rem; color:var(--ink-soft);
}

/* rhythm: consecutive statements tighten; movements before FAQ/CTA breathe less */
.mv-state + .mv-state{ padding-top:0 }
.mv-band + .mv-state, .mv-split + .mv-state{ padding-top:var(--sp-xl) }
.mv-quote + .mv-split, .mv-quote + .mv-band{ padding-top:0 }
section.sec-pad + section.cta{ margin-top:var(--sp-lg) }

/* FAQ hover nudge */
.faq-wrap summary{ transition:color .25s }
.faq-wrap summary:hover{ color:var(--blue-deep) }

/* home hero photo (stock, B&W, right-anchored) */
.hero .hero-photo{ width:54vw; z-index:0; opacity:0 }
html.no-motion .hero .hero-photo{ opacity:1 }
.hero-badge,.hero-title{ position:relative; z-index:2 }
.hero-side,.hero-scroll{ z-index:2 } /* keep their absolute corners */

/* fix: hero contour art back to overlay (lost in the v4 rewrite; it was
   sitting in flow and pushing the headline below the fold) */
.hero-art{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0 }
html.no-motion .hero-art{ opacity:1 }
/* softer home photo blend into the paper/mere */
.hero .hero-photo::after{
  background:linear-gradient(90deg, var(--paper) 0%, color-mix(in oklab, var(--paper) 60%, transparent) 30%, transparent 52%),
             linear-gradient(0deg, color-mix(in oklab, var(--paper) 70%, transparent) 0%, transparent 24%);
}

/* ============================================================
   v7.1 — QA batch 2: wraps, tables, rhythm
   ============================================================ */
.page-hero h1, .fill, .mv-head h2, .article-head h1, .cta h2,
.hr-title, .rel-card .rt, .panel-title{ text-wrap:balance }
.page-hero h1{ max-width:16ch }

/* body tables get the ledger treatment */
.mv-copy table{ width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:var(--fs-small) }
.mv-copy th{ text-align:left; font-size:var(--fs-util); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); border-bottom:2px solid var(--ink); padding:.7rem .8rem .5rem 0 }
.mv-copy td{ vertical-align:top; border-bottom:1px solid var(--line); padding:.85rem .8rem .85rem 0; line-height:1.55 }
.mv-copy td:first-child{ white-space:nowrap; font-weight:600; color:var(--ink) }

/* rhythm: adjacent structured sections collapse; CTA never slams */
.sec-pad + .sec-pad{ padding-top:0 }
.statement + .sec-pad, .mv-state + .sec-pad{ padding-top:var(--sp-lg) }
.hub-list{ padding-bottom:var(--sp-xl) }
.cta h2 + .btn-ink{ margin-top:2.4rem }
.cta{ padding-top:var(--sp-xl) }
.nf{ min-height:72svh }

/* FAQ: rules span the full measure so the column reads intentional */
.faq-wrap{ max-width:none }
.faq-wrap summary{ max-width:74ch }
.faq-wrap .fa{ max-width:62ch }

/* hub rows: wider title column, calmer title size */
.hub-row{ grid-template-columns:5rem 1.35fr minmax(18ch,30ch) 22vw }
.hub-row .hr-title{ font-size:clamp(1.45rem,2.4vw,2.35rem) }

/* deck geometry stays beneath the panel title (no more type collisions) */
.panel-geo.g2{ z-index:2 }

/* ============================================================
   v8 — home completeness: works cards, quotes, logos, team,
   frameworks, industries
   ============================================================ */
.wcard{ flex:0 0 auto; width:clamp(280px,26vw,420px); text-decoration:none }
.wcard .wimg{ height:clamp(180px,24vh,260px); overflow:hidden; filter:grayscale(1) contrast(1.05) }
.wcard .wimg img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
.wcard:hover .wimg img{ transform:scale(1.05) }
.wcard .wmeta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.8rem }
.wcard .wchip{ font-size:var(--fs-util); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grey) }
.wcard .wmetric{ font-family:var(--serif); font-size:1.15rem; color:var(--blue-numeral) }
.wcard .wtitle{ font-weight:700; letter-spacing:-.015em; margin-top:.3rem; font-size:1.15rem }

.quote-row{
  display:grid; grid-template-columns:1fr minmax(16ch,22ch); gap:3rem;
  padding:2.6rem 0; border-bottom:1px solid var(--line); align-items:start;
}
.quote-row:first-of-type{ border-top:1px solid var(--line) }
.quote-row .qq{ font-family:var(--serif); font-size:clamp(1.25rem,2.1vw,1.8rem); line-height:1.3; max-width:44ch }
.quote-row .qq::before{ content:'"' } .quote-row .qq::after{ content:'"' }
.quote-row .qcite{ text-align:right }
.quote-row .qcite .rl{ font-size:var(--fs-util); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink) }
.quote-row .qcite .rv{ font-size:var(--fs-small); color:var(--grey); margin-top:.2rem }

.logo-strip{ display:flex; gap:clamp(2.5rem,6vw,6rem); width:max-content; align-items:center }
.logo-strip img{ height:clamp(22px,2.4vw,34px); width:auto; filter:grayscale(1); opacity:.62 }

.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line) }
.tcard{ background:color-mix(in oklab,var(--paper) 92%,transparent); text-decoration:none; padding-bottom:1.4rem }
.tcard .timg{ aspect-ratio:4/4.6; overflow:hidden; filter:grayscale(1) contrast(1.04); background:var(--panel-2) }
.tcard .timg img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .8s var(--ease-out) }
.tcard:hover .timg img{ transform:scale(1.04) }
.tcard .tname{ font-weight:700; letter-spacing:-.015em; margin:1rem 1.2rem .2rem }
.tcard .trole{ font-size:var(--fs-util); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin:0 1.2rem }

.ind-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line) }
.icard{ position:relative; background:var(--paper); text-decoration:none; overflow:hidden }
.icard .iimg{ height:clamp(180px,24vh,250px); overflow:hidden; filter:grayscale(1) contrast(1.05) }
.icard .iimg img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
.icard:hover .iimg img{ transform:scale(1.05) }
.icard .iname{ padding:1rem 1.3rem 1.2rem; font-weight:700; letter-spacing:-.015em; display:flex; justify-content:space-between; align-items:baseline }
.icard .iname span:last-child{ font-family:var(--serif); color:var(--blue-numeral); font-size:1rem }

@media (max-width:820px){
  .quote-row{ grid-template-columns:1fr }
  .quote-row .qcite{ text-align:left }
  .ind-grid{ grid-template-columns:1fr 1fr }
}
.logo-strip img{ mix-blend-mode:multiply } /* drops solid logo backgrounds onto the scene */

/* ============================================================
   v9 — the footer, properly
   ============================================================ */
.ft2{ background:oklch(20% 0.02 268); color:oklch(88% 0.008 268); padding:var(--sp-xl) var(--gutter) 2rem; position:relative }
.ft2 a{ transition:color .25s }
.ft2 a:hover{ color:#F0A6A4 }
.ft2-top{ display:grid; grid-template-columns:minmax(26ch,1.3fr) repeat(3, minmax(16ch,1fr)); gap:3rem; padding-bottom:var(--sp-lg); border-bottom:1px solid oklch(32% 0.015 268) }
.ft2-mark{ font-weight:800; letter-spacing:.02em; font-size:clamp(1.3rem,2.1vw,1.9rem); line-height:1; color:#fff; white-space:nowrap }
.ft2-mark span{ color:#F0A6A4 }
.ft2-tag{ margin-top:1rem; font-size:var(--fs-small); color:oklch(70% 0.01 268); max-width:26ch; line-height:1.6 }
.ft2 .fcol h4{ font-size:var(--fs-util); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:oklch(62% 0.012 268); margin-bottom:1.1rem }
.ft2 .fcol a{ display:block; font-size:var(--fs-small); padding:.32rem 0; color:oklch(85% 0.008 268) }
.ft2 .fcol p{ font-size:var(--fs-small); color:oklch(78% 0.008 268); line-height:1.7; margin:0 0 .6rem }
.ft2-bar{ display:flex; justify-content:space-between; align-items:center; gap:2rem; padding-top:1.6rem;
  font-size:var(--fs-util); letter-spacing:.1em; text-transform:uppercase; color:oklch(58% 0.012 268); flex-wrap:wrap }
.ft2-bar a{ color:oklch(72% 0.01 268) }
@media (max-width:820px){ .ft2-top{ grid-template-columns:1fr 1fr } }

/* ============================================================
   v10 — geometric infographics + legibility
   ============================================================ */
/* geometric chapter glyphs: shape rotates by chapter position */
.chapter-num{ display:flex; align-items:center; gap:.7rem }
.mv-state .chapter-num{ justify-content:center }

/* stat cells: quiet geometric accent, one shape per position */
.stat{ position:relative; overflow:hidden }

/* geometric engagement timeline (SVG strip above process steps) */
.geo-timeline{ margin:var(--sp-lg) 0 1.6rem }
.geo-timeline svg{ width:100%; height:auto; display:block }

/* hub-and-spoke infographic */
.spoke-wrap{ padding:var(--sp-xl) var(--gutter); text-align:center }
.spoke-wrap svg{ width:min(860px,92%); height:auto; margin:0 auto; display:block }

/* ============================================================
   v11 — standardized article anatomy (resources + case studies)
   ============================================================ */
.tk-panel{ margin:var(--sp-lg) var(--gutter) 0; border-top:1px solid var(--ink); padding-top:1.6rem; max-width:900px }
.tk-panel .util{ display:block; margin-bottom:1.2rem }
.tk-item{ display:grid; grid-template-columns:1.4rem 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); text-decoration:none }
.tk-item .tk-geo{ width:.8rem; height:.8rem; background:var(--blue); margin-top:.35rem }
.tk-item:nth-child(3n) .tk-geo{ border-radius:50% }
.tk-item:nth-child(3n+1) .tk-geo{ clip-path:polygon(50% 0, 100% 100%, 0 100%) }
.tk-item p{ font-size:clamp(1rem,1.2vw,1.15rem); line-height:1.5; color:var(--ink-soft); transition:color .25s }
.tk-item:hover p{ color:var(--ink) }

.art-grid{ display:grid; grid-template-columns:minmax(210px,260px) minmax(0,1fr); gap:4rem; padding:var(--sp-xl) var(--gutter) var(--sp-lg); align-items:start }
.art-toc{ position:sticky; top:calc(var(--hd-h) + 3rem) }
.art-toc .util{ display:block; margin-bottom:1.2rem }
.art-toc a{ display:grid; grid-template-columns:2rem 1fr; gap:.6rem; padding:.5rem 0; font-size:var(--fs-small); color:var(--grey); line-height:1.35; transition:color .25s }
.art-toc a .tn{ font-family:var(--serif); color:var(--grey-lt); transition:color .25s }
.art-toc a.on, .art-toc a:hover{ color:var(--ink) }
.art-toc a.on .tn{ color:var(--blue-numeral) }
.art-progress{ height:2px; background:var(--line); margin-top:1.2rem; position:relative; overflow:hidden }
.art-progress i{ position:absolute; inset:0; background:var(--blue); transform-origin:left; transform:scaleX(0) }

.ach{ margin-bottom:var(--sp-xl) }
.ach .ach-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.4rem }
.ach .chapter-num{ font-size:1.6rem }
.ach h2{ font-size:clamp(1.5rem,2.6vw,2.3rem); letter-spacing:-.025em; line-height:1.05; text-wrap:balance }
.ach .mv-copy{ max-width:66ch }
.ach--band{ background:var(--panel-2); padding:2.2rem 2.2rem 1.6rem; margin-left:-2.2rem }

@media (max-width:820px){
  .art-grid{ grid-template-columns:1fr }
  .art-toc{ position:static }
  .ach--band{ margin-left:0 }
}

/* ============================================================
   v12 — the live site's real infographics, in v2 + readable type
   ============================================================ */
/* one reading size for all secondary copy */
:root{ --fs-read: 1.28rem }
.lb, .qb, .pb, .fa, .hr-ex, .tk-item p, .rail-item .rv, .mv-copy li,
.stat .l, .fcol a, .fcol p, .contact-side .rv, .quote-row .qcite .rv,
.rel-card .rb, .wcard .wtitle, .pstep .pb{ font-size:var(--fs-read); line-height:1.6 }
.mv-copy p:first-child{ font-size:1.3rem }
.art-toc a{ font-size:1.05rem }

/* engagement arc: numbered stations on a filled rail (live .hub-engagement-strip) */
.estrip{ padding:var(--sp-xl) var(--gutter) }
.estrip-rail{ position:relative; height:2px; background:var(--line); margin:2.6rem 0 0 }
.estrip-rail i{ position:absolute; inset:0; background:var(--blue); transform-origin:left; transform:scaleX(1) }
.estrip-row{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2rem; margin-top:-1.05rem }
@media (max-width:760px){
  .estrip-rail{ display:none }
  .estrip-row{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr; gap:1.6rem; margin-top:0 }
}
.est{ position:relative; padding-top:2.2rem }
.est::before{ content:""; position:absolute; top:0; left:0; width:2.1rem; height:2.1rem; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--blue) }
.est .en{ position:absolute; top:.3rem; left:.6rem; font-family:var(--serif); font-size:1.12rem; color:var(--blue-deep) }
.est .ek{ font-size:var(--fs-util); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:.35rem }
.est .eh{ font-weight:700; letter-spacing:-.01em; margin-bottom:.4rem; font-size:1.32rem }
.est .eb{ font-size:var(--fs-read); color:var(--grey); line-height:1.55 }

/* Typical vs Rockmere comparison (live .cmp-split) */
.cmp{ border-top:1px solid var(--line) }
.cmp-head, .cmp-row{ display:grid; grid-template-columns:minmax(12ch,18ch) 1fr 1fr; gap:2.5rem; padding:1.4rem 0; border-bottom:1px solid var(--line) }
.cmp-head{ padding:.9rem 0 }
.cmp-head span{ font-size:var(--fs-util); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--grey) }
.cmp-head span:last-child{ color:var(--blue-deep) }
.cmp-row .cd{ font-weight:700; letter-spacing:-.01em; font-size:1.32rem }
.cmp-row .ct, .cmp-row .cr{ font-size:var(--fs-read); line-height:1.55; position:relative; padding-left:1.6rem }
.cmp-row .ct{ color:var(--grey) }
.cmp-row .cr{ color:var(--ink-soft) }
.cmp-row .ct::before{ content:""; position:absolute; left:0; top:.45em; width:.65rem; height:.65rem; border:1.5px solid var(--grey-lt) }
.cmp-row .cr::before{ content:""; position:absolute; left:0; top:.45em; width:.65rem; height:.65rem; background:var(--blue) }

/* engagement shape: three ink cards (live .shape-grid) */
.shape3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line) }
.shape3 .sc{ background:oklch(22% 0.02 268); color:oklch(90% 0.008 268); padding:2.2rem 2rem 2.6rem }
.shape3 .sc .sl{ font-size:var(--fs-util); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#F0A6A4; margin-bottom:.8rem }
.shape3 .sc .sh2{ font-weight:700; letter-spacing:-.015em; font-size:1.35rem; color:#fff; margin-bottom:.6rem }
.shape3 .sc .sb{ font-size:var(--fs-read); color:oklch(78% 0.01 268); line-height:1.6 }

/* coverage matrix: services x industries, blue squares with meaning */
.covmx{ overflow-x:auto }
.covmx table{ width:100%; border-collapse:collapse }
.covmx th{ font-size:var(--fs-util); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grey);
  text-align:center; padding:.8rem .5rem; border-bottom:2px solid var(--ink) }
.covmx th:first-child{ text-align:left }
.covmx td{ text-align:center; padding:1rem .5rem; border-bottom:1px solid var(--line) }
.covmx td:first-child{ text-align:left; font-weight:700; letter-spacing:-.01em; white-space:nowrap; padding-right:1.5rem }
.covmx .sq{ display:inline-block; width:1rem; height:1rem; background:var(--blue) }
.covmx .sq--active{ background:transparent; border:1.5px solid var(--blue) }
.cov-legend{ display:flex; gap:2.2rem; margin-top:1.2rem; font-size:var(--fs-read); color:var(--grey); align-items:center }
.cov-legend .sq{ margin-right:.5rem; vertical-align:-2px }
.cov-legend span{ display:inline-flex; align-items:center; gap:.5rem }

/* body images inside chapters: full-bleed of the column, grayscale like all v2 photography */
.ach img,.mv-copy img{display:block;width:100%;height:auto;margin:1.6rem 0;filter:grayscale(1)}

/* v2 stat block (converted from v1 .article-infographic) */
.astat-block{margin:2.2rem 0;padding:1.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.astat-block .util{display:block;margin-bottom:.5rem}
.astat-title{font-size:var(--fs-read);color:var(--ink-2);margin-bottom:1.3rem;max-width:60ch}
.astat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.6rem}
.astat-n{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.8rem);line-height:.95;color:var(--blue);letter-spacing:-.01em}
.astat-n sup{font-size:.34em;font-family:var(--sans);vertical-align:super;margin-left:.12em;color:var(--ink-2);letter-spacing:0}
.astat-l{font-size:var(--fs-small);color:var(--ink-2);margin-top:.5rem;max-width:26ch}

/* ============================================================
   v5.3 — infographic motion (JS animates; no-motion = end state)
   ============================================================ */
.estrip-rail i{ transform:scaleX(0) }                     /* rail fills L->R on scroll */
html.no-motion .estrip-rail i{ transform:scaleX(1) }
/* matrix squares ride their row wipe (no independent pop) */
[data-spoke] .spoke-line{ stroke-dasharray:1; stroke-dashoffset:1 }   /* spokes draw out */
[data-spoke] .spoke-node{ opacity:0; transform:scale(0); transform-box:fill-box; transform-origin:center }
[data-spoke] text{ opacity:0 }
html.no-motion [data-spoke] .spoke-line{ stroke-dashoffset:0 }
html.no-motion [data-spoke] .spoke-node{ opacity:1; transform:scale(1) }
html.no-motion [data-spoke] text{ opacity:1 }

/* ============================================================
   v6 — mobile pass: nav menu, layout collapse (media-query only)
   ============================================================ */
@media (max-width:820px){
  /* header: hide desktop nav + CTA, show a real menu button */
  .hd-cta{ display:none }
  .hd-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:48px; height:var(--hd-h); margin-left:auto; padding:0 var(--gutter) 0 1rem;
    background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent }
  .hd-burger span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px;
    transition:transform .3s var(--ease-out), opacity .2s }
  html.menu-open .hd-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  html.menu-open .hd-burger span:nth-child(2){ opacity:0 }
  html.menu-open .hd-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
  html.menu-open .hd{ transform:none !important }

  .hd-menu{ display:flex; position:fixed; inset:0; z-index:45; flex-direction:column;
    justify-content:center; gap:.2rem; padding:64px var(--gutter) 10vh; background:var(--paper);
    transform:translateY(-100%); transition:transform .42s cubic-bezier(.7,0,.2,1);
    pointer-events:none; overflow-y:auto }
  html.menu-open .hd-menu{ transform:translateY(0); pointer-events:auto }
  .hd-menu-nav{ display:flex; flex-direction:column }
  .hd-menu-nav a{ font-size:clamp(2rem,9vw,2.7rem); font-weight:650; letter-spacing:-.02em;
    color:var(--ink); padding:.55rem 0; line-height:1.1; border-bottom:1px solid var(--line) }
  .hd-menu-cta{ margin-top:1.8rem; align-self:flex-start; background:var(--ink); color:var(--paper);
    padding:1rem 1.8rem; font-size:var(--fs-util); font-weight:600; letter-spacing:.14em; text-transform:uppercase }

  /* article pages: collapsed column must shrink to viewport; wide tables scroll in-box */
  .art-grid{ grid-template-columns:minmax(0,1fr) }
  .art-grid > *{ min-width:0 }
  .art-toc{ min-width:0 }
  .mv-copy table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
}

/* footer: single column on phones (2-col overflowed 390) */
@media (max-width:600px){
  .ft2-top{ grid-template-columns:1fr; gap:2rem }
  .ft2-bar{ gap:.8rem }
}

/* ============================================================
   v7 — word-mask reveal (poster headings rise out of a clip)
   ============================================================ */
.rvw{ display:inline-block; overflow:hidden; vertical-align:top;
  padding:.06em 0 .18em; margin:-.06em 0 -.18em }
.rvw-i{ display:inline-block; will-change:transform }

/* ============================================================
   v8 — resources hub: featured + filterable card grid + newsletter
   ============================================================ */
.rbadge{ font-size:var(--fs-util); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); white-space:nowrap }
.rtopic{ font-size:var(--fs-util); letter-spacing:.1em; text-transform:uppercase; color:var(--grey) }

/* featured "Start here" */
.res-featured .util{ display:block; margin-bottom:1.6rem }
.rfeat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem }
.rfeat{ display:block; text-decoration:none; border:1px solid var(--line); background:var(--panel-2);
  transition:border-color .3s, transform .5s var(--ease-out) }
.rfeat:hover{ border-color:var(--ink); transform:translateY(-3px) }
.rfeat-media{ height:200px; overflow:hidden; background:var(--panel); filter:grayscale(1) contrast(1.04) }
.rfeat-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
.rfeat:hover .rfeat-media img{ transform:scale(1.04) }
.rfeat-media--none{ filter:none; background:linear-gradient(135deg,var(--panel) 0%,var(--panel-2) 100%) }
.rfeat-body{ padding:1.3rem 1.4rem 1.6rem }
.rfeat-meta{ display:flex; gap:1rem; align-items:center; margin-bottom:.7rem }
.rfeat-title{ font-size:clamp(1.15rem,1.6vw,1.4rem); font-weight:700; letter-spacing:-.02em; line-height:1.18; color:var(--ink) }

/* all resources: filter + grid */
.res-all-head{ display:flex; align-items:baseline; gap:1.4rem; margin-bottom:1.4rem; flex-wrap:wrap }
.res-all-head .util{ display:block }
.res-all-h{ font-size:clamp(1.8rem,3.4vw,3rem); letter-spacing:-.03em; line-height:1 }
.rfilter{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.4rem; border-bottom:1px solid var(--line); padding-bottom:1.6rem }
.rchip{ font-family:var(--sans); font-size:var(--fs-small); font-weight:600; letter-spacing:.02em;
  padding:.5rem 1.1rem; background:none; border:1px solid var(--line); color:var(--ink-soft); cursor:pointer;
  transition:background .25s, color .25s, border-color .25s }
.rchip:hover{ border-color:var(--ink) }
.rchip.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.rgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4rem }
.rcard{ display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line); background:var(--paper);
  transition:border-color .3s, transform .5s var(--ease-out) }
.rcard:hover{ border-color:var(--ink); transform:translateY(-3px) }
.rcard-media{ height:150px; overflow:hidden; background:var(--panel); filter:grayscale(1) contrast(1.04) }
.rcard-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
.rcard:hover .rcard-media img{ transform:scale(1.04) }
.rcard-media--none{ filter:none; background:linear-gradient(135deg,var(--panel) 0%,var(--panel-2) 100%) }
.rcard-body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1 }
.rcard-meta{ display:flex; gap:.9rem; align-items:center; margin-bottom:.6rem }
.rcard-title{ font-size:1.12rem; font-weight:700; letter-spacing:-.015em; line-height:1.22; color:var(--ink); margin-bottom:.5rem }
.rcard-ex{ font-size:var(--fs-small); color:var(--grey); line-height:1.5; flex:1 }
.rcard-date{ font-size:var(--fs-util); letter-spacing:.06em; text-transform:uppercase; color:var(--grey-lt); margin-top:1rem }

/* newsletter (one charcoal section, like the reference) */
.newsletter{ background:oklch(20% 0.02 268); color:oklch(90% 0.008 268); padding:var(--sp-band) var(--gutter) }
.nl-inner{ max-width:60ch }
.nl-h{ font-size:clamp(2rem,4.4vw,3.6rem); letter-spacing:-.03em; line-height:1.02; color:#fff; margin:1rem 0 1.2rem }
.nl-p{ font-size:var(--fs-read); line-height:1.6; color:oklch(80% 0.01 268); margin-bottom:2rem }
.nl-form{ display:flex; gap:.8rem; max-width:34rem; flex-wrap:wrap }
.nl-form input{ flex:1; min-width:14rem; background:none; border:1px solid oklch(40% 0.02 268); color:#fff;
  padding:.9rem 1rem; font-family:var(--sans); font-size:var(--fs-small) }
.nl-form input::placeholder{ color:oklch(60% 0.01 268) }
.nl-form input:focus{ outline:2px solid var(--blue); outline-offset:0 }
.nl-form button{ background:#fff; color:var(--ink); border:0; padding:.9rem 1.8rem; font-family:var(--sans);
  font-size:var(--fs-util); font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .25s }
.nl-form button:hover{ background:var(--blue); color:#fff }
.nl-note{ font-size:var(--fs-util); color:oklch(55% 0.01 268); margin-top:1.2rem }

@media (max-width:820px){
  .rfeat-grid{ grid-template-columns:1fr }
  .rgrid{ grid-template-columns:1fr }
}

/* ============================================================
   v9 — Tres Mares parity: interaction layer + set-pieces
   ============================================================ */

/* preloader: wordmark + thin bar, gates the entrance once per session */
#pre{ position:fixed; inset:0; z-index:200; background:var(--paper); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.4rem; transition:opacity .5s ease, visibility .5s }
#pre.done{ opacity:0; visibility:hidden; pointer-events:none }
#pre .pre-mark{ font-size:var(--fs-util); font-weight:800; letter-spacing:.22em; color:var(--ink) }
#pre .pre-mark span{ color:var(--grey); font-weight:600; margin-left:.5em }
#pre .pre-bar{ width:min(240px,50vw); height:2px; background:var(--line); overflow:hidden }
#pre .pre-bar i{ display:block; height:100%; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left }

/* page-transition curtain */
#pt{ position:fixed; inset:0; z-index:190; background:var(--ink); transform:scaleY(0); pointer-events:none }

/* custom cursor (fine pointers only; native cursor kept as fallback) */
#cur{ position:fixed; z-index:300; top:0; left:0; width:8px; height:8px; border-radius:50%;
  background:var(--ink); pointer-events:none; opacity:0; will-change:transform }
#curR{ position:fixed; z-index:299; top:0; left:0; width:34px; height:34px; border-radius:50%;
  border:1.5px solid color-mix(in oklab, var(--ink) 45%, transparent); pointer-events:none; opacity:0; will-change:transform;
  transition:width .28s var(--ease-out), height .28s var(--ease-out), border-color .28s }
html.cur-on #cur, html.cur-on #curR{ opacity:1 }
html.cur-hover #curR{ width:56px; height:56px; border-color:var(--blue) }
html.cur-drag #curR{ width:64px; height:64px; border-color:var(--ink) }
@media (pointer:coarse){ #cur,#curR{ display:none } }

/* horizontal KPI strip: pinned, cards stepped, strip translates on scrub */
.kpi{ position:relative; height:280vh }
.kpi-pin{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center }
.kpi-head{ padding:0 var(--gutter); margin-bottom:3rem }
.kpi-head h2{ font-size:var(--fs-state); letter-spacing:-.03em; line-height:1.06; max-width:17ch }
.kpi-track{ display:flex; gap:2rem; padding:0 var(--gutter); width:max-content; will-change:transform }
.kpi-card{ width:clamp(280px,26vw,420px); min-height:340px; border:1px solid var(--line); background:var(--paper);
  padding:2rem 2rem 1.6rem; display:flex; flex-direction:column; justify-content:space-between;
  margin-top:calc(var(--ki) * 2.6rem) }
.kpi-card .kn{ font-family:var(--serif); font-weight:400; font-size:clamp(4rem,7.5vw,7rem); line-height:.92;
  color:var(--blue-numeral); letter-spacing:-.02em }
.kpi-card .kl{ font-size:var(--fs-small); color:var(--ink-soft); margin-top:4.5rem; max-width:22ch }
.kpi-prog{ margin:3rem var(--gutter) 0; height:2px; background:var(--line); position:relative }
.kpi-prog i{ position:absolute; inset:0; background:var(--blue); transform:scaleX(0); transform-origin:left }
@media (max-width:820px){
  .kpi{ height:auto }
  .kpi-pin{ position:static; height:auto; overflow:visible; padding:var(--sp-xl) 0 }
  .kpi-track{ width:auto; flex-direction:column; gap:1.2rem }
  .kpi-card{ margin-top:0; min-height:0 }
  .kpi-prog{ display:none }
}

/* geo morph: two half-rings that counter-rotate into a circle on scrub */
.gmorph{ position:absolute; top:clamp(1.5rem,4vw,3rem); right:var(--gutter); width:clamp(56px,6vw,84px); aspect-ratio:1; pointer-events:none }
.gmorph i{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--blue); will-change:transform }
.gmorph .ga{ clip-path:inset(0 0 50% 0); transform:rotate(-180deg) }
.gmorph .gb{ clip-path:inset(50% 0 0 0); transform:rotate(180deg); border-color:var(--ink) }
html.no-motion .gmorph i{ transform:none }

/* image hover blooms: grayscale lifts on hover */
.logo-strip img, .wcard .wimg img, .rfeat-media img, .rcard-media img{ transition:filter .5s ease, transform .8s var(--ease-out) }
.logo-strip img:hover{ filter:grayscale(0); opacity:1 }
.wcard:hover .wimg img, .rfeat:hover .rfeat-media img, .rcard:hover .rcard-media img{ filter:grayscale(0) }
.wcard .wimg, .rfeat-media, .rcard-media{ transition:filter .5s ease }
.wcard:hover .wimg, .rfeat:hover .rfeat-media, .rcard:hover .rcard-media{ filter:grayscale(0) contrast(1.02) }

/* team/consultant hover: plate dims, profile label reveals */
.hub-row .hr-img{ position:relative; overflow:hidden }
.hub-row .hr-img::after{ content:"View profile"; position:absolute; left:0; right:0; bottom:0; padding:.5rem .7rem;
  font-size:var(--fs-util); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:color-mix(in oklab, var(--ink) 78%, transparent); transform:translateY(101%); transition:transform .35s var(--ease-out) }
.hub-row:hover .hr-img::after{ transform:translateY(0) }
.hub-row .hr-img img{ transition:filter .5s ease, transform .8s var(--ease-out) }
.hub-row:hover .hr-img img{ transform:scale(1.04) }

/* texture band: soft wash transition (pure CSS, no asset) */
.texband{ position:relative }
.texband::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:clamp(90px,14vw,180px); pointer-events:none;
  background:
    radial-gradient(60% 120% at 18% 100%, color-mix(in oklab, var(--panel) 55%, transparent) 0%, transparent 70%),
    radial-gradient(45% 100% at 62% 100%, color-mix(in oklab, var(--panel-2) 70%, transparent) 0%, transparent 75%),
    radial-gradient(70% 140% at 88% 100%, color-mix(in oklab, var(--panel) 45%, transparent) 0%, transparent 70%);
  opacity:.8 }

/* works strip drag affordance */
.works-track{ cursor:grab }
html.is-dragging .works-track{ cursor:grabbing }

/* ============================================================
   v10 — service heroes: topical geometric compositions
   (each service gets a meaningful form, solid + outline language)
   ============================================================ */
.hgeo{ position:absolute; inset:0 0 auto 0; height:300vh; overflow:hidden; pointer-events:none; z-index:0 }
.page-hero .util, .page-hero h1, .page-hero .ph-sub, .page-hero .hero-index{ position:relative; z-index:1 }
body > section:not(.page-hero), body > footer{ position:relative; z-index:1 }
body > section.page-hero{ z-index:auto }
.hgeo i{ position:absolute; will-change:transform; opacity:0 }
html.no-motion .hgeo i{ opacity:.92; transform:none }

/* AI TRANSFORMATION: one form becomes another (solid circle -> outlined square) */
.hgeo--ai-transformation .hg1{ width:25.7vw; height:25.7vw; border-radius:50%; background:var(--blue); right:24vw; top:9vh }
.hgeo--ai-transformation .hg2{ width:25.7vw; height:25.7vw; border:2.5px solid var(--ink); right:5vw; top:calc(9vh + 15vw) }
.hgeo--ai-transformation .hg3{ width:20.2vw; height:2.5px; background:var(--ink); right:16vw; top:calc(9vh + 15.5vw); transform:rotate(38deg) }

/* LEAN: kaizen staircase (three ascending steps) */
.hgeo--lean-consulting .hg1{ width:18.9vw; height:7.4vw; background:var(--blue); right:26vw; top:calc(8vh + 18vw) }
.hgeo--lean-consulting .hg2{ width:18.9vw; height:7.4vw; border:2.5px solid var(--ink); right:14vw; top:calc(8vh + 9vw) }
.hgeo--lean-consulting .hg3{ width:18.9vw; height:7.4vw; background:var(--blue); right:2vw; top:8vh }

/* SAFE: the release train (three forward chevrons in cadence) */
.hgeo--safe-consulting i{ clip-path:polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%) }
.hgeo--safe-consulting .hg1{ width:17.6vw; height:17.6vw; background:var(--blue); right:30vw; top:11vh }
.hgeo--safe-consulting .hg2{ width:17.6vw; height:17.6vw; background:color-mix(in oklab, var(--ink) 16%, transparent); right:17vw; top:11vh }
.hgeo--safe-consulting .hg3{ width:17.6vw; height:17.6vw; background:var(--blue); right:4vw; top:11vh }

/* AGILE: the sprint loop (ring + solid arc segment + marker) */
.hgeo--agile-consulting .hg1{ width:32.4vw; height:32.4vw; border-radius:50%; border:2.5px solid var(--ink); right:6vw; top:8vh }
.hgeo--agile-consulting .hg2{ width:32.4vw; height:16.2vw; border-radius:32.4vw 32.4vw 0 0; background:var(--blue); right:6vw; top:8vh }
.hgeo--agile-consulting .hg3{ width:4.6vw; height:4.6vw; border-radius:50%; background:var(--blue); right:4.8vw; top:calc(8vh + 21.5vw) }

/* RAG: retrieval layers (outlined stack behind, solid answer in front) */
.hgeo--rag-systems .hg1{ width:27vw; height:17.6vw; border:2.5px solid var(--ink); right:4vw; top:8vh }
.hgeo--rag-systems .hg2{ width:27vw; height:17.6vw; border:2.5px solid var(--ink); right:10vw; top:calc(8vh + 4vw) }
.hgeo--rag-systems .hg3{ width:27vw; height:17.6vw; background:var(--blue); right:16vw; top:calc(8vh + 8vw) }

/* TALENT: embedded (two circles overlapping, consultant inside the team) */
.hgeo--talent-solutions .hg1{ width:27vw; height:27vw; border-radius:50%; border:2.5px solid var(--ink); right:15vw; top:8vh }
.hgeo--talent-solutions .hg2{ width:27vw; height:27vw; border-radius:50%; background:var(--blue); right:3vw; top:calc(8vh + 7vw); mix-blend-mode:multiply }
.hgeo--talent-solutions .hg3{ display:none }

@media (max-width:820px){ .hgeo{ display:none } }


/* ============================================================
   v11 — services context bar + footer rebuild
   ============================================================ */
.svcnav{ position:sticky; top:var(--hd-h); z-index:40; display:flex; gap:2.2rem; padding:.85rem var(--gutter);
  background:color-mix(in oklab, var(--paper) 92%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;
  transition:transform .5s var(--ease-out) }
.svcnav.is-hidden{ transform:translateY(-200%) }
.svcnav::-webkit-scrollbar{ display:none }
.svcnav a{ font-size:var(--fs-util); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); white-space:nowrap; padding-bottom:2px; border-bottom:2px solid transparent; transition:color .25s }
.svcnav a:hover{ color:var(--ink) }
.svcnav a.on{ color:var(--ink); border-bottom-color:var(--blue) }

/* footer: newsletter block inside */
.ft-news{ padding:var(--sp-xl) var(--gutter); border-bottom:1px solid oklch(30% 0.015 268) }
.ft-news .nl-h{ color:#fff }
.ft2-top{ padding-top:var(--sp-lg) }

/* giant wordmark above the bar (netcraft/symbol style) */
.ft2-top--3{ grid-template-columns:repeat(3, minmax(16ch,1fr)) }
.ft-giant{ padding:var(--sp-lg) var(--gutter) 0; overflow:hidden }
.ft-giant .ftg-line{ display:block; font-weight:800; letter-spacing:-.02em; line-height:.92;
  text-transform:uppercase; white-space:nowrap; color:color-mix(in oklab, #fff 12%, transparent) }
.ft-giant .ftg-line:nth-child(1){ font-size:clamp(4.5rem, 14vw, 17rem) }
.ft-giant .ftg-line:nth-child(2){ font-size:clamp(3.4rem, 9.8vw, 12rem) }
.ft-giant .rvw{ padding:.04em 0 .12em; margin:-.04em 0 -.12em }
.ft2-bar{ margin-top:2.2rem }
/* v19 — footer legal bar: WCAG-legible copyright + real tap targets on the links.
   Measured 4.22:1 (needs 4.5) and 18px-tall links (needs 24px) before this. */
.ft2-bar{ color:oklch(72% 0.012 268) }
.ft2-bar a{ color:oklch(86% 0.01 268); display:inline-block; padding:.45rem .1rem }
@media (max-width:820px){ .ft-giant .ftg-line{ white-space:normal; line-height:1 } .ft2-top--3{ grid-template-columns:1fr 1fr } }

/* v12 — restored live content, v2-styled */
.chiprow{ margin-top:1.4rem; font-size:var(--fs-util); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey); max-width:72ch; line-height:2 }
.chiprow .chip-sep{ color:var(--blue); font-size:.9em }
.hero-ctas{ display:flex; gap:2rem; margin-top:1.4rem }
.wcard .wbody{ font-size:var(--fs-small); color:var(--grey); line-height:1.55; margin:.5rem 0 .7rem; max-width:38ch }
/* same inset as .iname: the description used to sit flush on the cell hairline */
.icard .ibody{ font-size:var(--fs-small); color:var(--grey); line-height:1.55; margin:.2rem 0 0; padding:0 1.3rem 1.4rem; max-width:38ch }
.mq-word{ font-size:clamp(1.6rem,3.4vw,3rem); font-weight:700; letter-spacing:-.02em; color:var(--grey-lt); white-space:nowrap }
.art-author{ display:flex; gap:1.2rem; align-items:flex-start; margin:var(--sp-lg) var(--gutter);
  padding:1.4rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:66ch }
.art-author .aa-badge{ flex:none; width:3rem; height:3rem; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper); font-weight:800; font-size:.95rem; letter-spacing:.08em }
.art-author .aa-name{ font-weight:700; margin-bottom:.3rem }
.art-author .aa-note{ font-size:var(--fs-small); color:var(--grey); line-height:1.55 }
.profile-bio{ font-size:var(--fs-read); color:var(--ink-soft); line-height:1.6; max-width:60ch; margin-top:.8rem }

/* ============================================================
   v13 — mobile qualitative pass (390px audit fixes)
   All rules media-scoped: desktop rendering unchanged.
   ============================================================ */
@media (max-width:820px){
  /* ledgers collapse to a single column (late block: outranks the v5.2 desktop grids) */
  .ledg-row, .ledg-row.no-num{ grid-template-columns:1fr; gap:.45rem; align-items:start }
  .ledg-row .lb{ max-width:none }
  .ledg-row .ln2, .ledg-row .lm{ font-size:1.6rem }
  /* hub rows: number + full-width title, excerpt under (re-assert over v5.2/v5.4 overrides) */
  .hub-row{ grid-template-columns:2.6rem 1fr; grid-template-rows:auto auto; gap:1rem; padding:2.2rem 0 }
  .hub-row .hr-ex{ grid-column:2 }
  .hub-row .hr-img{ display:none }
  .hub-row .hr-title{ font-size:clamp(1.35rem,5.6vw,1.9rem) }
  /* comparison ledger: stack, pseudo-labels replace the column header */
  .cmp-head{ display:none }
  .cmp-row{ grid-template-columns:1fr; gap:.9rem }
  .cmp-row .ct, .cmp-row .cr{ padding-left:0 }
  .cmp-row .ct::before, .cmp-row .cr::before{
    content:"Typical engagement"; position:static; display:block; width:auto; height:auto; border:0; background:none;
    font-size:var(--fs-util); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:.15rem }
  .cmp-row .cr::before{ content:"Rockmere Partners"; color:var(--blue-deep) }
  /* photo heroes: uniform paper veil so copy never crosses dark photo regions */
  .page-hero--photo .hero-photo::after, .hero .hero-photo::after{
    background:linear-gradient(0deg, color-mix(in oklab, var(--paper) 88%, transparent) 0%,
               color-mix(in oklab, var(--paper) 76%, transparent) 100%) }
  /* deck panels: flow layout so title, body, and meta rail never overlap */
  .panel{ display:flex; flex-direction:column; justify-content:flex-end; padding:13vh 6vw 7vh }
  .panel-title{ position:static; transform:none; margin-bottom:auto; max-width:100%;
    font-size:clamp(2.6rem,12.5vw,4.6rem) }
  .panel-body{ position:static; left:auto; bottom:auto; margin-top:1.6rem; max-width:60ch }
  .panel-rail{ position:static; right:auto; bottom:auto; margin-top:1.8rem; text-align:left }
  .panel-num{ top:6vh }
  /* giant footer wordmark: never wrap mid-word; per-line sizes fit 390px */
  .ft-giant .ftg-line{ white-space:nowrap; line-height:1 }
  .ft-giant .ftg-line:nth-child(1){ font-size:14.8vw }
  .ft-giant .ftg-line:nth-child(2){ font-size:10vw }
  /* long tables scroll inside their own container */
  .mv-copy table, .body-col table{ display:block; overflow-x:auto; max-width:100% }
  /* spoke labels readable at phone scale */
  .spoke-wrap text{ font-size:19px }
}
@media (max-width:600px){
  .ind-grid{ grid-template-columns:1fr }
}

/* ============================================================
   v14 — final Tres Mares parity pass (pre-deploy)
   ============================================================ */
/* headline physically crosses the red geometry; ink multiplies where they meet */
.page-hero--photo h1, .page-hero--photo .ph-sub{ position:relative; z-index:1 }
.page-hero--photo h1{ mix-blend-mode:multiply }

/* key-facts strip closing the hero (label over value, tiny uppercase) */
.hero-facts{ display:flex; flex-wrap:wrap; gap:2.8rem; row-gap:1.2rem; margin-top:3.4rem;
  padding-top:1.6rem; border-top:1px solid var(--line); position:relative; z-index:2 }
.hero-facts .hf{ display:flex; flex-direction:column; gap:.28rem; font-family:var(--serif);
  font-size:1.35rem; color:var(--ink); line-height:1 }
.hero-facts .hf b{ font-family:var(--sans); font-weight:700; font-size:var(--fs-util);
  letter-spacing:.16em; text-transform:uppercase; color:var(--grey) }

/* services hub: full-saturation red plane composition (chevron cadence, logo-derived) */
.hgeo--hub i{ clip-path:polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%) }
.hgeo--hub .hg1{ width:22vw; height:22vw; background:var(--blue); right:18vw; top:4vh }
.hgeo--hub .hg2{ width:22vw; height:22vw; background:color-mix(in oklab, var(--ink) 14%, transparent); right:2vw; top:4vh }
.hgeo--hub .hg3{ width:30vw; height:2.5px; background:var(--ink); right:6vw; top:calc(4vh + 24vw) }
.page-hero .hgeo{ z-index:0 }
.page-hero h1{ position:relative; z-index:1; mix-blend-mode:multiply }

/* contact hero: grayscale photo sliced into slanted bands bleeding off the right edge */
.ct-photo{ position:absolute; inset:0 0 auto auto; width:44vw; height:34rem; z-index:0; pointer-events:none }
.ct-photo i{ position:absolute; background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.05); opacity:.92 }
.ct-photo i:first-child{ inset:6% -6% auto auto; width:70%; height:44%; clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%) }
.ct-photo i:last-child{ inset:56% -10% auto auto; width:82%; height:38%; clip-path:polygon(14% 0, 100% 0, 100% 100%, 0 100%) }
.page-hero{ position:relative }

/* movement photo interludes: parallelogram slice (logo-diagonal echo) */
.mv-photo img{ clip-path:polygon(0 0, 100% 0, 97% 100%, 3% 100%) }

/* long-form lists: rationed red markers */
.mv-copy li::marker, .body-col li::marker{ color:var(--blue) }

/* header nav: active-page underline */
.hd-nav a.on{ color:var(--ink); border-bottom:1.5px solid var(--blue); padding-bottom:.15rem }

@media (max-width:820px){
  .hero-facts{ gap:1.6rem; row-gap:.9rem }
  .ct-photo{ display:none }
  .hgeo--hub{ display:none }
}

/* ============================================================
   v15 — deck panel geometry: full-saturation, persistent (TM)
   ============================================================ */
/* the topical composition sits INSIDE its panel, above the photo,
   at hero scale; shapes start hidden, the deck timeline lands them
   early and they stay for the panel's whole active window */
.panel .hgeo{ position:absolute; inset:0; height:auto; overflow:visible; z-index:2; pointer-events:none }
.panel .hgeo i{ opacity:0 }
.panel .hgeo .hg2{ mix-blend-mode:multiply }

/* v15.1 — font-audit fixes */
.chiprow .chip{ white-space:nowrap }
.ci > .rl:first-child:last-child{ font-size:1.05rem; font-weight:600; letter-spacing:.02em; text-transform:none }
@media (max-width:820px){
  /* footer columns stack fully: raised link size was wrapping mid-label */
  .ft2-top, .ft2-top--3{ grid-template-columns:1fr }
  /* long hero chips must wrap on phones; nowrap was clipping them at the edge */
  .chiprow .chip{ white-space:normal }
}

/* v15.2 — people rosters: taller image slot, face-biased crop (portraits were
   center-cropped in the wide hub-row slot, cutting heads) */
.hub-list--people .hr-img{ height:17rem }
.hub-list--people .hr-img img{ object-position:50% 18% }
@media (max-width:820px){ .hub-list--people .hr-img{ display:none } }

/* v15.3 — archive/search pagination in the v2 language */
.v2-pagination ul{ list-style:none; display:flex; gap:1rem; padding:0; margin:0; flex-wrap:wrap }
.v2-pagination a, .v2-pagination span.current{ font-size:var(--fs-util); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:.55rem .9rem; border:1px solid var(--line); color:var(--grey) }
.v2-pagination span.current{ background:var(--blue); border-color:var(--blue); color:#fff }
.v2-pagination a:hover{ color:var(--ink); border-color:var(--grey) }

/* v16 — home hero video (poster img underneath; video fades in over it) */
.hero .hero-photo{ position:absolute }
.hero .hero-photo .hero-video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block; opacity:0; transition:opacity .9s ease .15s }
.hero .hero-photo .hero-video.is-playing{ opacity:1 }
@media (max-width:820px), (prefers-reduced-motion: reduce){
  .hero .hero-photo .hero-video{ display:none } /* phones + reduced motion keep the still */
}

/* ============================================================
   v17 — design softening pass (11-item punch list)
   ============================================================ */
/* 4) case-studies strip: manual scroll (marquee removed in JS) */
.works-scroll{ overflow-x:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  padding-bottom:.8rem }
.works-scroll::-webkit-scrollbar{ height:6px }
.works-scroll::-webkit-scrollbar-thumb{ background:var(--grey-lt); border-radius:3px }
.works .works-track{ will-change:auto }
/* 8) deck secondary type */
.panel-body{ font-size:1.05rem }
.panel-num{ font-size:1.15rem }
/* 10) KPI strip: static grid (pinned horizontal scrub removed) */
.kpi{ height:auto }
.kpi-pin{ position:static; height:auto; overflow:visible; display:block; padding:var(--sp-xl) 0 }
.kpi-track{ width:auto; flex-wrap:wrap; gap:1.2rem }
.kpi-card{ width:auto; flex:1 1 300px; min-height:240px; margin-top:0 !important }
.kpi-card .kn{ font-size:clamp(2.8rem,4.8vw,4.4rem) }
.kpi-card .kl{ margin-top:1.6rem }
.kpi-prog, #kpiProg{ display:none }

/* art-less card fallback: keeps the grid rhythm if an image is missing */
.wcard .wimg--none{ background:var(--panel); border:1px solid var(--line) }

/* ============================================================
   v18 — text on photography always gets a ground
   Every meta block that floats over an image (deck rails, panel
   numbers, hero side note) now sits on a paper plate. Dark text on
   a bright, busy photo was unreadable regardless of the photo.
   ============================================================ */
.panel-rail{
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter:blur(6px) saturate(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  padding:1.4rem 1.5rem; border:1px solid var(--line);
}
.panel-num{
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:.3rem .7rem; border:1px solid var(--line); color:var(--ink);
}
.hero .hero-side{
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter:blur(6px) saturate(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  padding:1.3rem 1.5rem; border:1px solid var(--line);
}
/* labels darken to full ink now that they have a ground */
.rail-item .rl{ color:var(--ink) }
.rail-item .rv{ color:var(--ink-soft) }
@supports not (backdrop-filter: blur(2px)){
  .panel-rail, .panel-num, .hero .hero-side{ background:var(--paper) }
}
@media (max-width:820px){
  /* stacked layout already puts these on paper: no plate needed */
  .panel-rail, .hero .hero-side{ background:none; border:0; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none }
  .panel-num{ background:none; border:0; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none }
}

/* ============================================================
   v20 — header nav fits the laptop range
   "Case Studies" wrapped to two lines from 1024 to 1365px (iPad landscape,
   MacBook 13"). The mobile menu only starts at 820px, so that whole band
   got a broken two-line header. Never break a nav label; tighten the rail
   instead, and keep the CTA on one line.
   ============================================================ */
.hd-nav a, .hd-cta{ white-space:nowrap }
@media (max-width:1365px){
  .hd-nav{ gap:1.4rem; padding:0 1.1rem }
  .hd-nav a{ letter-spacing:.09em }
  .hd-cta{ padding:0 1.5rem }
}
@media (max-width:1120px){
  .hd-nav{ gap:1rem; padding:0 .7rem }
  .hd-nav a{ letter-spacing:.06em; font-size:.88rem }
  .hd-cta{ padding:0 1.1rem; font-size:.88rem }
  .hd-mark img{ height:32px }
}

/* ============================================================
   v21 — findings from the section-by-section walk of the home page
   ============================================================ */

/* 1) case-studies rail: the first card sat flush against the window edge.
   The marquee never needed a gutter because it was always mid-travel; a
   manual scroller starts at 0 and must respect the page margin. */
.works-scroll{ padding-left:var(--gutter); padding-right:var(--gutter); scroll-padding-left:var(--gutter) }
.works .works-track{ padding-right:var(--gutter) }

/* 2) serif digits read as letters at body size: "11-week" rendered as
   "ll-week" in a client quote. Instrument Serif's 1 is a bare stroke with no
   foot serif. Borrow digits from the sans and keep the serif letterforms,
   so the editorial voice survives but numbers stay legible. Display numerals
   are large enough to be unambiguous and deliberately keep the serif. */
@font-face{
  font-family:'RM Serif Digits';
  src:local('Inter Tight'), local('InterTight-Regular'), local('Helvetica Neue'), local('Arial');
  unicode-range:U+0030-0039;
}
.quote-row .qq, .pq, .mv-quote .pq{
  font-family:'RM Serif Digits', var(--serif);
}

/* 3) logo band: one partner logo ships with a baked-in light panel, which
   multiply cannot clear. Screen-blend the strip so any solid panel drops out
   regardless of how the file was exported. */
.logo-strip img{ mix-blend-mode:multiply; background:transparent }
.logo-strip img[src*="1456"], .logo-strip img[src*="1460"], .logo-strip img[src*="1461"]{ mix-blend-mode:darken }

/* ---------- v22: team bug round, 2026-07-16 ---------- */
/* FAQ affordance: a 1.3rem light-grey + was invisible on every page (team #7) */
.faq-wrap summary::after{ content:"+"; font-family:var(--sans); font-size:1.9rem; font-weight:400; color:var(--ink); line-height:1 }
.faq-wrap details[open] summary::after{ content:"\2212" }
/* hero CTAs: service/industry heroes shipped with no action at all; home's was a
   hairline text link (team). Never given .mask: a CTA must not depend on motion. */
.hero-cta-row{ margin-top:var(--sp-md); position:relative; z-index:2 }
a.hero-cta{ display:inline-block; background:var(--ink); color:#fff; padding:1rem 1.9rem; font-weight:600; font-size:1rem; letter-spacing:.02em; transition:background .25s }
a.hero-cta:hover{ background:#E41613; color:#fff }
.hero-side .ul-link{ display:inline-block; background:var(--ink); color:#fff; padding:.8rem 1.5rem; font-weight:600; border-bottom:0 }
.hero-side .ul-link::after{ display:none }
.hero-side .ul-link:hover{ background:#E41613; color:#fff }
/* photo heroes: the H1 ran onto the dark photo (insurance lost its final word,
   financial-services lost "for"). Tighter measure + a paper veil on the photo's
   inner edge so any overlap that still happens stays readable. */
.page-hero--photo h1{ max-width:12ch }
/* .hero-photo is position:absolute (a containing block already) - adding
   position:relative here once collapsed the whole photo into the flow */
.page-hero--photo .hero-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, oklch(99.4% 0.0015 268 / .96) 0%, oklch(99.4% 0.0015 268 / 0) 44%) }
/* very long hero titles (RAG) take one size step down instead of dwarfing the page */
.page-hero h1.ph--long{ font-size:clamp(2.2rem, 5.4vw, 5.4rem); max-width:16ch }
/* inline CTA band: industries pages had a single CTA at the very bottom (team) */
.cta-inline{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin:var(--sp-xl) var(--gutter); padding:2.2rem 2.6rem; background:#fff; border:1px solid var(--line) }
.cta-inline p{ font-size:clamp(1.15rem,1.6vw,1.5rem); font-weight:500; letter-spacing:-.01em; margin:0 }
/* footer brand mark (team: footer had no logo) */
.ft2-top .ft-brand{ grid-column:1/-1; padding-bottom:.4rem }
.ftr-logo{ height:40px; width:auto; filter:brightness(0) invert(1); opacity:.95 }
/* Deck panels go flow-layout on desktop too (mobile already did, for the same
   reason): a centered absolute title and a bottom-anchored absolute body WILL
   cross at some viewport height. Sean caught them overlapped at ~1540x1516 even
   fully settled; the aspect-ratio patch this replaces only covered wide-short.
   Flex stacks title above body, so overlap is impossible at any window size.
   Photo, numerals, geometry, and rail stay absolute (out of flow, unaffected). */
/* text is TOP-anchored below the tabs column (fixed-px footprint), so long
   titles grow downward into open space; upward growth into the tabs is
   geometrically impossible. Bottom-anchoring failed twice at short viewports. */
.panel{ display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:clamp(340px, calc(100vh - 452px), 368px) 0 4.5vh 7vw }
/* top reservation: tabs bottom (~266) + 60px exit-tween lift + buffer, but never
   so much that content squeezes past the panel bottom on short screens */
.panel-title{ position:static; top:auto; transform:none; margin:0 0 26px }
.panel-body{ position:static; left:auto; bottom:auto; margin:0 }
/* every 1px-gap-over-grey-container grid gets the qgrid treatment: hairlines are
   drawn per cell, so leftover grid tracks show the page, never a grey slab.
   (rel-grid shipped the slab on industry pages; team-grid on about; the rest are
   one content edit away from the same failure.) */
.proof-grid, .pband, .rel-grid, .cred-list, .team-grid, .ind-grid, .shape3{
  gap:0; background:transparent; border:0; border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.proof-grid>*, .pband>*, .rel-grid>*, .cred-list>*, .team-grid>*, .ind-grid>*, .shape3>*{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
/* estrip: purely-numeric phase kickers duplicated the red rail numeral. The PHP
   skips them now (rm2_estrip_kicker); this only tidies blank-but-present ones */
.est .ek:empty{ display:none }
/* photo heroes: the facts strip wrapped across the full hero width, so trailing
   facts landed on the dark photo (grey label on dark, illegible on every service
   page). Cap it to the paper column; wrap handles the rest. Desktop only - the
   phone layout already stacks with a faded full-width photo. */
@media (min-width:1025px){
  .page-hero--photo .hero-facts{ max-width:44vw }
}

/* ---------- v24: outcomes = Tres Mares figures ledger ---------- */
/* Measured off tresmarescapital.com 2026-07-16 at 1280 CSS px, normalized to vw:
   cell 246x307 (19.2vw, aspect 246/307), padding 21px (1.67vw), hairlines 1px
   #D5D5D5 top+left only, numeral 64px (5vw) serif w400 lh.95 #E41613 top-left,
   label 16px w500 #2B2B2B bottom-left, gaps 9px/13px, second column dropped
   128px (41.7% of a cell). Statement sits left of the ledger, not above it. */
@media (min-width:1025px){
  .kpi-pin{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,42vw); gap:0 6vw; align-items:start; padding:var(--sp-xl) var(--gutter) }
  .kpi-head{ padding:0; margin:0 }
  .kpi-head h2{ max-width:14ch }
  .kpi-track{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto); grid-template-columns:repeat(2,1fr); gap:1vw .7vw; padding:0; width:auto }
  .kpi-track .kpi-card:nth-child(n+3){ transform:translateY(30%) }
  .kpi{ padding-bottom:5.5vw }
  /* owner 2026-07-16: flattened from the reference 246/307 so the whole ledger
     fits one screen without double-scrolling; composition otherwise unchanged */
  .kpi-card{ aspect-ratio:246/195; min-height:0; width:auto; margin:0 !important; background:transparent;
    border:0; border-top:1px solid #D5D5D5; border-left:1px solid #D5D5D5;
    padding:1.67vw; display:flex; flex-direction:column; justify-content:space-between }
  .kpi-card .kn{ font-size:5vw; font-weight:400; line-height:.95; letter-spacing:0; color:#E41613; margin:0 }
  .kpi-card .kl{ margin:0; font-size:clamp(14px,1.25vw,17px); font-weight:500; color:#2B2B2B; max-width:20ch }
}

/* ---------- v25: second-tier headers to weight 500 (owner, all 55 pages) ---------- */
/* h1/h2/h3 have been 500 since the punch list; what still read as bold were the
   component titles. One tier of label stays 700: the tiny uppercase utility
   kickers, which need the weight at that size. */
.hub-row .hr-title, .rel-card .rt, .est .eh, .shape3 .sc .sh2, .qcell .qt,
.icard .iname, .wcard .wtitle{ font-weight:500 }
/* pasted content sometimes wraps heading text in <strong>; never let that
   re-bolden a display heading */
h1 strong, h2 strong, h3 strong, h1 b, h2 b, h3 b{ font-weight:inherit }

/* ---------- v26: the complete weight pass (owner: headers still 700) ---------- */
/* Everything that reads as a heading or title renders 500. The page-hero H1 and
   the .fill section statements were the big misses: both carried their own 700
   that beat the global h1,h2,h3 rule. */
.page-hero h1, .fill, .pstep .ph, .ledg-row .lt, .cmp-row .cd, .tcard .tname,
.rfeat-title, .rcard-title, .mq-word, .art-author .aa-name,
.mv-copy td:first-child, .covmx td:first-child{ font-weight:500 }
/* Micro-labels (10 to 11px uppercase kickers) soften one step to 600; at that
   size 500 dissolves into the ground. Buttons and the active deck tab keep
   their weight on purpose: affordance, not typography. */
.rail-item .rl, .article-facts .rl, .pf .rl, .form-grid label,
.contact-side .rl, .mv-copy th, .wcard .wchip, .quote-row .qcite .rl,
.ft2 .fcol h4, .est .ek, .cmp-head span, .shape3 .sc .sl, .covmx th,
.rbadge, .hub-row .hr-img::after, .cmp-row .ct::before, .cmp-row .cr::before,
.hero-facts .hf b, .v2-pagination a, .v2-pagination span.current{ font-weight:600 }
/* v26 continued: survivors the DOM scan caught that the selector inventory missed */
.qcell .qm{ font-weight:500 }                        /* framework monograms (SAFe, AWS...) */
.ft-giant .ftg-line{ font-weight:600 }               /* footer wordmark 800 -> 600 */
.art-author .aa-badge{ font-weight:600 }             /* author initials disc 800 -> 600 */
/* pasted content bolds ("Safety Metric:" run-ins) soften one step but stay
   distinct from body 400; applies wherever long-form content renders */
strong, b{ font-weight:600 }

/* v27: deck intro lede + narrow-screen qgrid */
.deck-intro .sec-lede{ max-width:56ch; margin:1.4rem auto 0; color:var(--ink-soft); font-size:clamp(1.02rem,1.3vw,1.25rem); line-height:1.55 }
@media (max-width:1024px){
  .qgrid{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) }
}
/* short screens: smaller deck type so the reserved-top layout still fits */
@media (max-height:840px) and (min-width:1025px){
  .panel-title{ font-size:min(var(--fs-deck), 8.2vh) }
  .panel-body{ max-width:27ch }
}

/* ---------- v28: client wall (real client list, 2026-07-21) ---------- */
/* text chips for clients shown without artwork (public sector by policy,
   plus anything without a verified official asset) */
.logo-strip .logo-chip{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-size:.98rem; font-weight:600; letter-spacing:.04em; color:var(--ink-soft);
  padding:.35rem .9rem; border:1px solid var(--line); border-radius:999px;
}