/* ============================================================
   Nine Stalks — case-study detail pages, shared sheet.
   Rewritten Round 6 (2026-08-17, DaVinci) to the DESIGN-CONTRACT:
   the previous sheet ran its own palette (#f5f0e5 / #52735b) and
   never loaded the fonts. This one is the homepage's tokens, type
   and card language, applied to a linear document.
   Motion: one IntersectionObserver, transform/opacity only.
   ============================================================ */
:root{
  --ink:#1C1913; --inkg:#35402C; --paper:#FCFAF4; --linen:#F4F0E5;
  --gold:#DFB13B; --golddeep:#B8860B; --goldpale:#EAD9A0;
  --goldink:#8A6408;
  --seal:#A33B2C; --sealdeep:#7E2C20;
  --night:#101012; --deep:#0B1F16; --grove:#123626; --moss:#35402C;
  --leaf:#4A6B3F; --leaf2:#5F8A4C;
  --serif:"Fraunces", Georgia, serif;
  --sans:"Instrument Sans", -apple-system, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--paper)}
body.case-page{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--gold);color:var(--ink)}
img,svg{display:block;max-width:100%}
img{height:auto}
.ba .peek img{height:auto;max-width:none}
a{color:inherit;text-decoration:none}

/* ---------- nav: inherited whole from the homepage (light tone) ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:90;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2.2vw,26px) clamp(18px,3.4vw,44px);pointer-events:none;
  background:linear-gradient(rgba(252,250,244,.92),rgba(252,250,244,.75) 70%,rgba(252,250,244,0))}
.nav>*{pointer-events:auto}
.wordmark img{width:clamp(230px,18vw,268px);height:auto}
/* r14: the node bands + node-run hover ring are retired site-wide per
   Jammy's ruling -- his R6-C lab pick is a clean pill, and the culm growth
   owns the hover alone. Machinery preserved in _history pre-r12/pre-r14
   snapshots. Padding keeps the band-era value so proportions hold. */
.nav-cta{position:relative;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border:1px solid rgba(53,64,44,.55);border-radius:999px;padding:10px 31px;color:var(--ink);
  backdrop-filter:blur(8px);background:rgba(252,250,244,.35);transition:border-color .3s,color .3s}
.nav-cta:hover{border-color:var(--golddeep);color:var(--golddeep)}
@media(max-width:560px){.nav-cta{display:none}}

/* ---------- R7-A: the crown seats, and the culm leafs out (r16, Jammy's
   ruling 2026-08-21; SUPERSEDES R6-C, which is kept in the snapshot
   below because R7-A corrects R6-C's alignment rather than replacing
   its idea) ----------
   Mirrors the homepage rule of the same name verbatim, minus the tone
   overrides the homepage needs for its scrolling dark nav and dark
   footer: these pages are light-ground only (nav never goes on-dark, the
   .cta pill is always filled gold), so one light-tone default plus one
   .pillwrap.fill override covers every pill here. Only TWO contexts
   exist on these pages -- .nav-cta (padding 10x31, box 37px) and the
   closing .cta (padding 18x40, box 52px) -- so the per-context table is
   two rows: ctx-nav, shared verbatim with the homepage, and ctx-case,
   which the CTA lab does not render. ctx-case is derived from the same
   three formulas as the six lab-authored contexts and comes out
   identical to ctx-smhero except for --stalkright (29.5px vs 31.5px),
   which is exactly the 2px horizontal-padding difference between the
   case .cta and the homepage hero .cta.sm.
   Full rationale -- the two measured defects, why the blades anchor to
   the node rings, Jammy's ruling on the accepted lower-blade overlap,
   the three-angle crown, the stagger, and the formulas -- is in
   ../index.html's own R7-A comment block; do not restate it here.
   Pre-R7-A (r14/R6-C) rule: _history/case-study-pre-r16-2026-08-21.css.
   Pre-r12 R3-F rule: _history/case-study-pre-r12-2026-08-18.css. */
.cutwrap{position:absolute;inset:0;border-radius:999px;overflow:hidden;pointer-events:none}
.cutwrap .cut{position:absolute;right:4px;top:50%;width:96px;height:58px;
  transform:translateY(-46%) rotate(-12deg)}
.lbl{position:relative}
.cta{--leafcut:rgba(53,64,44,.16)}
.nav-cta{--leafcut:rgba(53,64,44,.09)}

.pillwrap{position:relative;display:inline-flex;
  --glf:#4A6B3F;--glhi:rgba(255,255,255,.22);--ringf:#B8860B;--blade2f:#5F8A4C;
  --stalkh:72px;--stalkright:23.8px;--gslide:6px;--glift:-52px;--gcrown:.8}
.pillwrap.fill{--glf:#35402C;--ringf:#8A6408;--blade2f:#4A6B3F}
/* the per-context tuning table -- two rows here; see ../index.html.

   ctx-nav's --stalkh: 55px, NOT 72px, and NOT A BUG. It is shared
   verbatim with the homepage, correction and all. Two deliberate
   things, neither of which a future round should "fix":
   1. The constant-30px clearance rule is broken on ctx-nav ONLY, on
      purpose -- ctx-case still clears by 30px. A user never sees two
      pills' culms at once so the inconsistency is imperceptible; a
      crown leaf clipped by the top of the viewport, on the fixed nav's
      always-on-screen button, is not. Jammy ruled 55px 2026-08-21.
   2. The 561-600px band still trims 5.1px, knowingly. Assembly height
      above the pill floor is 4 + 1.026 * --stalkh; clearing that band
      needs --stalkh <= 48, seating the lower blade's middle node ring
      on the pill rim needs --stalkh >= 67, and those are mutually
      exclusive. 48px was built and rejected (culm pokes only 9px, both
      node blades land on the button face, the three angles collapse
      into a ~12px cluster). 55px trims less than r14's 8.3px, so no
      width regressed. Below 560px .nav-cta is display:none.
   Crown seat error stays <=0.02px at every height swept -- shortening
   does not reintroduce the seating bug. Full rationale: ../index.html's
   per-context table comment. */
.pillwrap.ctx-nav {--stalkh:55px;  --stalkright:27.47px;--glift:-37.54px;--gcrown:.6119;--gslide:6px}
.pillwrap.ctx-case{--stalkh:89.1px;--stalkright:29.5px;--glift:-60.2px;--gcrown:.83;--gslide:7.2px}
.pillwrap .stalk{position:absolute;bottom:4px;right:var(--stalkright);
  width:calc(var(--stalkh) * .4375);height:var(--stalkh);
  pointer-events:none;clip-path:inset(100% 0 0 0);transition:clip-path .55s cubic-bezier(.2,.7,.2,1)}
.pillwrap a:hover~.stalk{clip-path:inset(0 0 0 0)}
/* the two node blades: low-left at 140ms, high-right at 280ms */
.pillwrap .stalk .bladeL{transform:scale(0) rotate(-16deg);transform-origin:95% 88%;
  transform-box:fill-box;transition:transform .3s cubic-bezier(.34,1.56,.64,1) .14s}
.pillwrap .stalk .blade2{transform:scale(0) rotate(16deg);transform-origin:5% 90%;
  transform-box:fill-box;transition:transform .3s cubic-bezier(.34,1.56,.64,1) .28s}
.pillwrap a:hover~.stalk .bladeL,.pillwrap a:hover~.stalk .blade2{transform:scale(1) rotate(0deg)}
/* the crown leaf: ride, then seat (translate first, rotate+scale late) */
.gl{display:inline-block;vertical-align:middle;width:15px;height:10.5px;flex:none;
  transform-origin:10% 87%;transform:none;translate:none;rotate:none;scale:none;
  transition:translate .48s cubic-bezier(.2,.7,.2,1) .17s,
             rotate .34s cubic-bezier(.34,1.56,.64,1) .33s,
             scale .34s cubic-bezier(.34,1.56,.64,1) .33s}
.pillwrap.fill .gl{width:18px;height:12.6px}
.pillwrap a:hover .gl{transition-delay:.17s,.33s,.33s;
  translate:var(--gslide) var(--glift);rotate:-40deg;scale:var(--gcrown)}

/* ---------- document column ---------- */
.case-wrap{max-width:820px;margin:auto;padding:clamp(120px,16vh,170px) clamp(20px,4vw,44px) 4rem;position:relative}
/* one static ink numeral watermark behind the head only (contract §5) */
.case-numeral{position:absolute;left:-4%;top:60px;z-index:-1;font-family:var(--serif);font-weight:300;
  font-size:clamp(180px,26vw,380px);line-height:1;color:rgba(53,64,44,.07);user-select:none}

.eyebrow{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--golddeep);
  margin-bottom:20px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.count-tag{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--seal);margin-bottom:10px}
.case-page h1{font-family:var(--serif);font-weight:390;line-height:1.05;letter-spacing:-.014em;color:var(--inkg);
  font-size:clamp(34px,4.6vw,64px)}
.case-page h2{font-family:var(--serif);font-weight:390;line-height:1.05;letter-spacing:-.014em;color:var(--inkg);
  font-size:clamp(26px,3.2vw,44px);margin-bottom:16px}
.case-section > h2.reveal{transition-delay:.1s}
.case-page h1 em,.case-page h2 em{font-style:italic;color:var(--golddeep)}
.lede,.case-section p{font-size:clamp(15px,1.3vw,17px);line-height:1.68;color:#4A4231;max-width:56ch}
.lede{margin-top:22px}
.case-section p+p{margin-top:14px}
.case-section .sec-label + h2{margin-top:0}
.case-section h3{font-family:var(--serif);font-weight:480;font-size:clamp(17px,1.5vw,21px);margin-top:24px;margin-bottom:8px;color:var(--inkg)}
.case-section h3:first-child{margin-top:0}
.sec-label{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--golddeep);
  margin-bottom:12px;display:flex;align-items:center;gap:14px}
.sec-label::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.sec-label + .case-metrics{margin-top:4px}
.fineprint{font-size:11px;letter-spacing:.08em;line-height:1.58;color:#6B5E2E;margin-top:18px;max-width:56ch}
ul.scope{list-style:none;margin:14px 0 0;padding:0;max-width:56ch}
ul.scope li{padding:12px 0 12px 1.4rem;border-bottom:1px solid rgba(53,64,44,.12);position:relative;
  font-size:clamp(15px,1.3vw,17px);line-height:1.62;color:#4A4231}
/* Sit on the first-line midline: li pad (12px) + half of line-height 1.62, minus half the 2px stroke.
   Was top:1.05em, which parked the dash at the cap-height of the bold label. */
ul.scope li::before{content:"";position:absolute;left:0;top:calc(12px + .81em - 1px);width:12px;height:2px;background:var(--golddeep);border-radius:1px}
ul.scope li b{font-weight:600;color:var(--inkg)}
#approach ul.scope li{opacity:0;transform:translateX(-12px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*65ms)}
#approach.scope-in ul.scope li{opacity:1;transform:none}
.wash-card blockquote{font-family:var(--serif);font-weight:480;font-size:clamp(17px,1.5vw,21px);line-height:1.35;color:var(--inkg);margin-bottom:10px}
.wash-card blockquote b{font-weight:600;color:var(--sealdeep)}
/* .wash-card.await, the empty-quote state, deleted 2026-08-27 when WeShine's
   testimonial landed and it became the last surface using it. No case study
   references it now; restore from git history if a future one needs it. */
.wash-card .quote-attrib{font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.5;
  color:#7A6A31;margin:-2px 0 14px}
.wash-card .quote-attrib .note{font-family:var(--sans);font-style:normal;font-size:10.5px;
  letter-spacing:.06em;color:rgba(122,106,49,.72)}
.ba .kick{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--goldink);display:block;margin-bottom:.5rem}

.case-section{padding:clamp(2.6rem,6vh,4rem) 0;position:relative}
/* node-band section rule (contract §4): a 5px golddeep band, not a hairline */
.case-section+.case-section::before{content:"";position:absolute;top:0;left:0;width:64px;height:5px;
  border-radius:2.5px;background:var(--golddeep);opacity:.9}

/* metrics tiles — house card radius, tabular numerals */
.case-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(12px,1.6vw,20px);margin-top:18px}
#outcome .case-metrics{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){#outcome .case-metrics{grid-template-columns:1fr}}
#challenge .case-metrics{max-width:560px}
@media(max-width:620px){#outcome .case-metrics{grid-template-columns:1fr}}
.metric{border-radius:4px 18px 4px 18px;padding:clamp(14px,1.6vw,20px);
  background:linear-gradient(135deg, rgba(53,64,44,.055), rgba(53,64,44,.028));
  border-left:2px solid var(--gold);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.metric:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(28,25,19,.14);border-left-color:var(--golddeep)}
.metric strong{display:block;font-family:var(--serif);font-weight:460;font-size:clamp(20px,2.2vw,30px);
  color:var(--inkg);font-variant-numeric:tabular-nums}
.metric span{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:#4A4231}
.metric .w{display:block;margin-top:8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--goldink)}
.metric.reference{background:linear-gradient(135deg,rgba(180,140,40,.14),rgba(180,140,40,.05));border-left:3px solid var(--golddeep);max-width:min(100%,420px);
  animation:ref-shimmer 3.5s ease-in-out infinite}
@keyframes ref-shimmer{0%,100%{border-left-color:var(--golddeep);box-shadow:none}50%{border-left-color:var(--gold);box-shadow:0 0 18px -4px rgba(223,177,59,.32)}}
.metric.reference strong{color:var(--golddeep);font-size:clamp(26px,2.8vw,36px)}
.metric.reference a{color:var(--golddeep);text-decoration:underline;text-underline-offset:2px}
#metrics .metric{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease;transition-delay:calc(var(--i,0)*80ms)}
#metrics.metrics-in .metric{opacity:1;transform:none}
.case-metrics-campaign{margin-bottom:4px}
@media(max-width:620px){.case-metrics{grid-template-columns:1fr}}

/* ink-washed card (method moment, asides) */
.wash-card{position:relative;margin-top:22px;padding:clamp(20px,2vw,30px);border-radius:4px 18px 4px 18px;
  background:linear-gradient(135deg, rgba(53,64,44,.055), rgba(53,64,44,.028));
  border-left:2px solid var(--gold)}
.wash-card h3{font-family:var(--serif);font-weight:480;font-size:clamp(17px,1.5vw,21px);margin-bottom:8px;color:var(--inkg)}
.wash-card p{font-size:14px;line-height:1.62;color:#4A4231;max-width:56ch}
.wash-card .t{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--goldink)}
.wash-card .t:first-child{margin-top:0;margin-bottom:12px}
.wash-card .t:not(:first-child){margin-top:16px;margin-bottom:8px}
.wash-card blockquote + p{margin-top:12px}
.wash-card blockquote + .quote-attrib{margin-top:0}

/* dated ledger */
.ledger{margin-top:16px;display:grid;gap:12px}
.ledger .row{display:flex;gap:16px;align-items:baseline}
.ledger .d{font-family:var(--serif);font-style:italic;color:var(--golddeep);font-size:14px;min-width:104px;
  font-variant-numeric:tabular-nums;flex:none}
.ledger p{font-size:14px;line-height:1.6;color:#4A4231;max-width:none}
/* appeal pass (2026-08-18): under 480px the date stacks above its entry
   instead of squeezing the text into a ~200px column. */
@media(max-width:480px){.ledger .row{flex-direction:column;gap:2px}.ledger .d{min-width:0}}

/* proof figures */
.case-proof figure:not(.ba){margin-top:22px}
.case-proof figure:not(.ba) img{width:100%;border-radius:4px 18px 4px 18px;border:1px solid rgba(53,64,44,.18);
  box-shadow:0 18px 44px -20px rgba(28,25,19,.25)}
.case-proof figure:not(.ba) figcaption{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:13px;color:#7A6A31;max-width:56ch}
.proof-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
@media(max-width:620px){.proof-row{grid-template-columns:1fr}}
/* appeal pass (2026-08-18): screenshots presented at honest sizes.
   .native caps an image at its true pixel width so a small capture is never
   upscaled soft; .tall presents a full-page strip at phone width, centered,
   so a 349px-wide capture reads as a phone-length page instead of a blurry
   wall. Both stay inside the house radius/border. */
.case-proof figure.native img{width:auto;max-width:min(100%,var(--nat,560px));margin-inline:auto}
.case-proof figure.tall img{width:auto;max-width:min(100%,380px);margin-inline:auto}
.case-proof figure.native figcaption,.case-proof figure.tall figcaption{text-align:center;max-width:46ch;margin-inline:auto}
/* live full-page previews (2026-08-29): cropped in-page, click opens full capture */
.case-proof figure.live-full{margin-top:22px}
.case-proof figure.live-full a.live-full-link{display:block;position:relative;max-height:70vh;overflow:hidden;border-radius:4px 18px 4px 18px;border:1px solid rgba(53,64,44,.18);box-shadow:0 18px 44px -20px rgba(28,25,19,.25);cursor:zoom-in;text-decoration:none;color:inherit}
.case-proof figure.live-full a.live-full-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8rem;background:linear-gradient(transparent,rgba(249,247,242,.96));pointer-events:none}
.case-proof figure.live-full img{width:100%;display:block}
.case-proof figure.live-full a.live-full-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* process figures in challenge / approach / outcome (synced with jammyphan dossier) */
.case-fig{margin-top:22px}
.case-fig img{width:100%;border-radius:4px 18px 4px 18px;border:1px solid rgba(53,64,44,.18);
  box-shadow:0 18px 44px -20px rgba(28,25,19,.25)}
.case-fig figcaption{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:13px;color:#7A6A31;max-width:56ch}
.case-fig figcaption b{font-style:normal;font-weight:600;color:var(--inkg)}
.case-fig.tall{position:relative}
.case-fig.tall .case-fig-link{display:block;position:relative;max-height:78vh;overflow:hidden;border-radius:4px 18px 4px 18px;cursor:zoom-in}
.case-fig.tall .case-fig-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8rem;background:linear-gradient(transparent,rgba(252,250,244,.96));pointer-events:none}
.case-fig.tall img{width:100%;display:block;border-radius:4px 18px 4px 18px;border:1px solid rgba(53,64,44,.18);box-shadow:0 18px 44px -20px rgba(28,25,19,.25)}
.case-fig a.case-fig-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.case-fig.narrow{max-width:34rem;margin-inline:auto}

/* dossier tables (starting conditions, timeline, scope) */
table.dossier{width:100%;max-width:56ch;border-collapse:collapse;margin:14px 0 0;font-size:14px;line-height:1.58}
table.dossier td{padding:10px 12px 10px 0;border-bottom:1px solid rgba(53,64,44,.12);vertical-align:top;color:#4A4231}
table.dossier td:first-child{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:lowercase;font-weight:600;color:var(--goldink);white-space:nowrap;width:10.5rem;padding-top:12px}
table.dossier tr:last-child td{border-bottom:0}
@media(max-width:480px){table.dossier td:first-child{white-space:normal;width:8rem}}

.wash-card.await{border-left-color:rgba(163,59,44,.45);background:linear-gradient(135deg,rgba(163,59,44,.06),rgba(163,59,44,.02))}
.wash-card.await .t{color:var(--sealdeep)}
.case-section h3 + p,.case-section h3 + .case-fig{margin-top:0}
.case-section h3.reveal + p,.case-section h3.reveal + figure{margin-top:0}

/* head dossier chrome (appeal pass, 2026-08-18): outcome + trust in the first
   screenful. .case-facts is a strip of micro chips under the lede carrying
   facts already stated on the page (never new claims), with the live-site
   outbound as its own raised affordance; .case-hero is the one hero proof
   image, the same live-site capture the homepage card uses, so the work
   itself appears before the reader ever scrolls to #proof. */
.case-facts{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.case-facts li{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--goldink);
  border:1px solid rgba(53,64,44,.25);border-radius:999px;padding:7px 15px;line-height:1.4}
.case-facts li.live{border-color:rgba(184,134,11,.55);padding:0}
.case-facts li.live a{display:block;padding:7px 15px;color:var(--golddeep);transition:color .3s,border-color .3s}
.case-facts li.live a:hover{color:var(--sealdeep)}
.case-hero{margin-top:32px}
.case-hero img{width:100%;border-radius:4px 18px 4px 18px;border:1px solid rgba(53,64,44,.18);
  box-shadow:0 24px 60px -24px rgba(28,25,19,.3)}
.case-hero figcaption{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:13px;color:#7A6A31}

.feeline{margin-top:20px;font-size:12.5px;font-style:italic;font-family:var(--serif);color:#7A6A31;max-width:56ch;line-height:1.6}

/* next / close */
.cta-row{margin-top:26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.cta{position:relative;
  display:inline-flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink);
  background:linear-gradient(140deg,var(--goldpale),var(--gold));border-radius:999px;padding:18px 40px;
  box-shadow:0 16px 40px -12px rgba(223,177,59,.45);transition:box-shadow .35s,transform .28s ease}
.cta:hover{box-shadow:0 20px 52px -10px rgba(223,177,59,.7);transform:translateY(-1px)}
.back-link{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--goldink);
  border-bottom:1px solid rgba(184,134,11,.4);padding-bottom:2px;position:relative;transition:color .28s,border-color .28s}
.back-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--golddeep);transform:scaleX(0);transform-origin:left center;transition:transform .28s ease}
.back-link:hover{color:var(--golddeep);border-color:var(--golddeep)}
.back-link:hover::after{transform:scaleX(1)}
.case-foot .cf-col a,.case-foot .cf-base a{position:relative}
.case-foot .cf-col a::after,.case-foot .cf-base a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--golddeep);transform:scaleX(0);transform-origin:left center;transition:transform .28s ease}
.case-foot .cf-col a:hover::after,.case-foot .cf-base a:hover::after{transform:scaleX(1)}

/* ---------- footer (rebuilt r7 to mirror the homepage's minimal footer):
   light-tone lockup + one-line CTA, homepage section links, the four
   case-study pages, email + copyright + client live-site link. ---------- */
footer.case-foot{max-width:820px;margin:auto;padding:10px clamp(20px,4vw,44px) 44px}
.case-foot .cf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;
  padding:28px 0;border-top:1px solid rgba(28,25,19,.14)}
.case-foot .cf-brand{max-width:300px}
.case-foot .cf-brand img{width:min(200px,60vw);height:auto}
.case-foot .cf-brand p{margin-top:12px;font-size:12.5px;line-height:1.6;color:#6b6353;max-width:36ch}
.case-foot .cf-brand p a{color:var(--goldink);border-bottom:1px solid rgba(184,134,11,.35);padding-bottom:1px}
.case-foot .cf-brand p a:hover{color:var(--golddeep);border-color:var(--golddeep)}
.case-foot .cf-cols{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.case-foot .cf-col{display:flex;flex-direction:column;gap:8px;min-width:140px}
/* 2026-08-24 (TSK-2026-0341, AEO): screen-reader-only utility -- carries the client name
   inside each dossier h1 without changing the visible narrative-hook headline. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 2026-08-24 (TSK-2026-0339): footer column labels moved from <h5> to <p class="cf-h">.
   They are nav labels, not document sections; as h5 they produced an h2->h5 heading skip on
   every case-study page. Selector keeps h5 so any un-migrated page still renders. */
.case-foot .cf-col h5,
.case-foot .cf-col .cf-h{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:rgba(28,25,19,.45);margin:0 0 2px}
.case-foot .cf-col a{font-size:12.5px;color:#4A4231;width:fit-content;transition:color .3s}
.case-foot .cf-col a:hover{color:var(--golddeep)}
.case-foot .cf-base{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:18px;border-top:1px solid rgba(28,25,19,.1);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(28,25,19,.55)}
.case-foot .cf-base a:hover{color:var(--golddeep)}

/* ---------- ambient falling leaves (r7) ----------
   The homepage's drifting-leaf language carried onto the detail pages as a
   light ambient layer: a few code-drawn leaves fall continuously behind the
   document (z-index:-1, fixed, pointer-events:none). Transform/opacity only,
   pure CSS, no script, no layout cost, and the fixed layer means scrolling
   adds its own relative motion. Removed entirely under reduced motion. */
.leaf-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.leaf-layer .fl{position:absolute;top:-7vh;width:var(--sz,28px);height:var(--sz,28px);opacity:0;
  animation:leaffall var(--dur,24s) linear var(--delay,0s) infinite}
.leaf-layer .fl svg{width:100%;height:100%;animation:leafsway 4.2s ease-in-out var(--delay,0s) infinite alternate}
@keyframes leaffall{
  0%{transform:translateY(-8vh) rotate(0deg);opacity:0}
  7%{opacity:var(--op,.4)}
  88%{opacity:var(--op,.4)}
  100%{transform:translateY(114vh) rotate(290deg);opacity:0}}
@keyframes leafsway{from{transform:translateX(-13px) rotate(-11deg)}to{transform:translateX(13px) rotate(11deg)}}
@media (prefers-reduced-motion: reduce){.leaf-layer{display:none}}

.case-page a:focus-visible{outline:3px solid var(--golddeep);outline-offset:4px}

/* ---------- leaf cursor (r8, fine pointers only) ----------
   Same code-drawn leaf as the homepage: tip at the hotspot (2 2), paper
   hairline for dark grounds. Interactive elements keep NATIVE pointer/text
   cursors (the switch is the affordance); keyword fallback everywhere.
   Static imagery, so it stays under prefers-reduced-motion. */
@media(pointer:fine){
  body.case-page{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath d='M2 2 Q12.5 3 17.5 10.5 Q19.5 16.5 14.5 19.5 Q6.5 18.5 3 9 Q2 5 2 2 Z' fill='%234A6B3F' stroke='%23FCFAF4' stroke-width='1.2'/%3E%3Cpath d='M3.5 3.5 Q9.5 9 14 16.5' stroke='rgba(252,250,244,.55)' stroke-width='1' fill='none'/%3E%3C/svg%3E") 2 2, auto}
  .case-page a,.case-page button,.case-page [role=button],.case-page summary{cursor:pointer}
  .case-page input,.case-page textarea{cursor:text}
}

/* ---------- leaf click burst (r8, no-library version) ----------
   The homepage's pointerdown burst carried onto the detail pages with zero
   JS libraries: a pooled set of svgs (built once by the tiny inline script
   on each page) re-aimed per click through CSS custom properties, animated
   by one keyframe pair. Transform/opacity only; the fixed overlay is
   pointer-events:none with overflow clipped, so no stolen focus, no blocked
   clicks, no scrollbars. Hidden entirely under reduced motion (the script
   also never builds the pool there). */
.burst-layer{position:fixed;inset:0;z-index:120;pointer-events:none;overflow:clip}
.burst-layer svg{position:absolute;left:0;top:0;width:15px;height:12px;opacity:0;
  transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r0,0deg)) scale(var(--s0,1))}
.burst-layer svg.pop{animation:leafpop var(--t,.75s) cubic-bezier(.2,.7,.3,1) forwards}
@keyframes leafpop{
  0%{opacity:1;transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r0,0deg)) scale(var(--s0,1))}
  100%{opacity:0;transform:translate(var(--x1,0px),var(--y1,0px)) rotate(var(--r1,180deg)) scale(var(--s1,.4))}}
@media (prefers-reduced-motion: reduce){.burst-layer{display:none}}

/* ---------- motion: entrance reveals only, per contract §8 ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .case-section > h2.reveal{transition-delay:0s}
  .metric.reference{animation:none}
  #metrics .metric{opacity:1;transform:none;transition-delay:0s!important}
  #approach ul.scope li{opacity:1;transform:none;transition-delay:0s!important}
  .metric:hover{transform:none;box-shadow:none}
  .cta:hover{transform:none}
  .ba .peek:hover{transform:none;box-shadow:none}
  .back-link::after,.case-foot .cf-col a::after,.case-foot .cf-base a::after{display:none}
  .nav-cta:hover::after,.cta:hover::after{animation:none;opacity:0}
  .gl,.pillwrap .stalk,.pillwrap .stalk .blade2,.pillwrap .stalk .bladeL{transition:none}
  .pillwrap a:hover .gl{transform:none;translate:none;rotate:none;scale:none}
  .pillwrap a:hover~.stalk{clip-path:inset(100% 0 0 0)}
  .pillwrap a:hover~.stalk .blade2{transform:scale(0) rotate(16deg)}
  .pillwrap a:hover~.stalk .bladeL{transform:scale(0) rotate(-16deg)}
}

/* ---------- cookie consent banner (r14, upgrades the 2026-08-18
   disclosure card; mirrors the homepage rule of the same name) ----------
   Real opt-in wired to Google Consent Mode v2: the <head> defaults
   everything to denied before GTM fires, Accept flips analytics_storage
   to granted, Decline records the refusal, both persist, and the
   footer's "Cookie preferences" link reopens the choice. Accept and
   Decline share one size and one type style -- equal weight, no dark
   pattern; Accept carries the house gold fill (R6-C resting pill
   language: the gradient and the radius, deliberately without the
   watermark or leaf glyph, which belong to the pills whose hover grows
   the culm). Reduced motion: appears with no animation. ---------- */
.cookie-notice{position:fixed;left:20px;bottom:20px;max-width:360px;z-index:200;
  background:rgba(252,250,244,.97);backdrop-filter:blur(10px);
  border:1px solid rgba(28,25,19,.14);border-radius:14px;
  padding:16px 18px;box-shadow:0 14px 40px -12px rgba(28,25,19,.35);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.cookie-notice.show{opacity:1;transform:none;pointer-events:auto}
.cookie-notice:focus{outline:none}
.cookie-notice p{font-size:12.5px;line-height:1.55;color:#4A4231;margin:0}
.cookie-notice p a{color:var(--goldink);border-bottom:1px solid rgba(184,134,11,.35);padding-bottom:1px}
.cookie-notice p a:hover{color:var(--golddeep);border-color:var(--golddeep)}
.cn-actions{margin-top:12px;display:flex;gap:10px}
.cookie-notice button{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  border-radius:999px;padding:8px 22px;cursor:pointer;
  transition:border-color .3s,color .3s,background .3s,box-shadow .3s}
.cookie-notice .cn-accept{border:1px solid transparent;color:var(--ink);
  background:linear-gradient(140deg,var(--goldpale),var(--gold));
  box-shadow:0 8px 20px -8px rgba(223,177,59,.5)}
.cookie-notice .cn-accept:hover{box-shadow:0 10px 26px -6px rgba(223,177,59,.75)}
.cookie-notice .cn-decline{border:1px solid rgba(53,64,44,.4);background:transparent;color:var(--ink)}
.cookie-notice .cn-decline:hover{border-color:var(--golddeep);color:var(--golddeep);background:rgba(223,177,59,.08)}
@media(max-width:560px){.cookie-notice{left:12px;right:12px;bottom:12px;max-width:none}}
@media(prefers-reduced-motion:reduce){.cookie-notice{transition:none}}

/* BEFORE/AFTER v2 (2026-08-25, TSK-2026-0339) — full-page pairs, Nine Stalks treatment.
   Mirrors the jam-drop build Jammy approved, in this page's own register: quieter frame,
   no glow. The after pages run 4-7x taller than the ones they replaced, so each cell is
   capped to a top-anchored peek with a fade at the cut and the real page length labelled. */
.ba{margin:1.75rem 0 2.25rem}
.ba:first-of-type{margin-top:1.1rem}
.ba .duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(12px,1.6vw,18px);align-items:start}
.ba .lab{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:rgba(28,25,19,.45);display:block;margin-bottom:.45rem}
.ba .peek,#proof .proof-shot .peek{position:relative;display:block;width:100%;height:clamp(320px,44vh,560px);padding:0;margin:0;
  overflow:hidden;border:1px solid rgba(28,25,19,.14);border-radius:2px;background:#fff;
  contain:layout paint;text-align:left;color:inherit;font:inherit;cursor:default;
  appearance:none;-webkit-appearance:none;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.ba .peek:hover,#proof .proof-shot .peek:hover{transform:translateY(-3px);box-shadow:0 12px 32px -10px rgba(28,25,19,.18);border-color:rgba(184,134,11,.45)}
.ba .peek.expand,#proof .proof-shot .peek.expand{cursor:pointer}
@media(pointer:fine){.ba .peek.expand,#proof .proof-shot .peek.expand{cursor:zoom-in}}
.ba .peek.expand:focus-visible,#proof .proof-shot .peek.expand:focus-visible{outline:3px solid var(--golddeep);outline-offset:4px}
.ba .peek.expand:hover,#proof .proof-shot .peek.expand:hover{border-color:rgba(184,134,11,.55);box-shadow:0 14px 36px -10px rgba(28,25,19,.22)}
/* Natural aspect at full column width — fixed-height frame + overflow clips tall after captures.
   Never force height:100% on the img (that squashes 7k-px pages when object-fit fails). */
.ba .peek picture,#proof .proof-shot .peek picture{display:block;width:100%;margin:0}
.ba .peek img,#proof .proof-shot .peek img{display:block;width:100%;height:auto;max-width:none;
  pointer-events:none;border:none;border-radius:0;box-shadow:none}
.ba .peek::after,#proof .proof-shot .peek::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(to bottom,rgba(250,248,242,0),rgba(250,248,242,.96));pointer-events:none}
.ba .len,#proof .proof-shot .len{font-family:var(--sans);position:absolute;right:.5rem;bottom:.45rem;z-index:2;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(28,25,19,.5)}
.ba .peek.expand .len,#proof .proof-shot .peek.expand .len{bottom:3.4rem}
.ba .peek.expand .hint,#proof .proof-shot .peek.expand .hint{position:absolute;left:50%;bottom:.85rem;z-index:3;transform:translateX(-50%);
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(74,66,49,.82);background:rgba(252,250,244,.88);
  border:1px solid rgba(53,64,44,.35);border-radius:999px;padding:.45rem .85rem;white-space:nowrap;
  pointer-events:none;box-shadow:0 6px 18px -10px rgba(28,25,19,.18)}
.ba .peek.expand:hover .hint,#proof .proof-shot .peek.expand:hover .hint{color:var(--inkg);border-color:rgba(184,134,11,.5);background:rgba(252,250,244,.96);
  box-shadow:0 8px 22px -10px rgba(28,25,19,.22)}
@media(prefers-reduced-motion:reduce){.ba .peek img,#proof .proof-shot .peek img{transition:none}}
.ba figcaption{margin-top:.75rem;font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.58;
  color:#6B5E2E;max-width:56ch}
.ba figcaption b{font-style:normal;font-weight:600;color:var(--inkg)}
#proof .proof-shot{margin-top:22px;max-width:min(100%,520px);margin-inline:auto}
#proof .proof-shot+.proof-shot{margin-top:2rem}
#proof .proof-shot .peek{border-radius:4px 18px 4px 18px;box-shadow:0 18px 44px -20px rgba(28,25,19,.25)}
#proof .proof-shot figcaption{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:13px;color:#7A6A31;max-width:56ch;margin-inline:auto;text-align:center}
#proof .proof-shot figcaption strong{font-style:normal;font-weight:600;color:var(--inkg)}
#proof .fineprint{font-size:10.5px;letter-spacing:.1em;text-transform:lowercase;color:rgba(107,94,46,.82)}

/* full-page flight viewer · scroll the delivered page top → bottom (2026-08-26) */
.flightbox{border:none;padding:0;width:min(920px,100vw);max-width:100vw;height:100vh;max-height:100vh;
  background:rgba(252,250,244,.98);color:var(--ink);margin:0 auto;z-index:150}
.flightbox::backdrop{background:rgba(28,25,19,.55)}
.flightbox[open]{display:flex;flex-direction:column}
.flightbox-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;border-bottom:1px solid rgba(184,134,11,.35);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  background:linear-gradient(180deg,rgba(244,240,229,.95),rgba(252,250,244,.98))}
.flightbox-bar .cap{color:var(--goldink)}
.flightbox-close{appearance:none;border:1px solid rgba(53,64,44,.45);background:transparent;color:var(--inkg);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:.45rem .85rem;border-radius:999px;cursor:pointer;
  transition:border-color .3s,color .3s,background .3s}
.flightbox-close:hover{border-color:var(--golddeep);color:var(--golddeep);background:rgba(223,177,59,.08)}
.flightbox-scroll{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:1.2rem 1.1rem 2.4rem;overflow-anchor:none}
@media(max-width:560px){
  .flightbox-scroll{padding:.85rem .75rem 1.8rem}
  .flightbox-bar{padding:.7rem .85rem;font-size:10px}
  #outcome .case-metrics{gap:1.15rem}
}
.flightbox-scroll img{display:block;width:min(900px,100%);height:auto;margin:0 auto;
  border:1px solid rgba(28,25,19,.14);border-radius:2px;background:#fff;
  box-shadow:0 18px 44px -20px rgba(28,25,19,.25)}

/* nexus-pr jammyphan parity 2026-08-31 — structure, headings, approach rhythm */
.case-section h1 .line{display:block}
.case-section .section-break{margin:2.8rem 0 1.2rem;padding-top:2rem;border-top:1px solid rgba(53,64,44,.18);max-width:56ch}
.case-section .section-break .sec-label{margin-bottom:0}
.case-section h3.subnote{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(107,94,46,.85);font-weight:600;margin-top:-6px;margin-bottom:14px;font-style:normal}
#approach.case-section h3{margin-top:2rem}
#approach.case-section h3:first-of-type{margin-top:.5rem}
#approach.case-section p{margin-bottom:1.15rem;line-height:1.65;color:#4A4231}
#approach.case-section p em{font-style:normal;font-family:var(--sans);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(107,94,46,.82);display:block;margin-top:.45rem}
#outcome .case-metrics{margin-top:6px;margin-bottom:4px}
#outcome .fineprint.noconv{margin-top:10px;margin-bottom:18px;max-width:56ch}
#outcome .prose-split{margin-top:1.2rem}
#outcome .prose-split p{margin-bottom:1rem}
.case-fig.process{margin:1.5rem 0 2rem;padding:14px;border-radius:4px 18px 4px 18px;border:1px solid rgba(53,64,44,.22);background:linear-gradient(180deg,rgba(244,240,229,.65),rgba(252,250,244,.95));box-shadow:0 16px 40px -22px rgba(28,25,19,.22)}
.case-fig.process img{filter:brightness(.88) contrast(1.04) saturate(.9);opacity:.95;border-radius:2px 14px 2px 14px}
.case-proof figure.tall img{box-shadow:0 22px 56px -24px rgba(28,25,19,.28),0 0 0 1px rgba(53,64,44,.22)}

/* ---------- fold-hero (WeShine only, TSK-2026-0397) ----------
   Scoped to body.fold-hero so sibling case studies keep the taller
   dossier head. Order: eyebrow → count → h1 → .case-hero → .case-facts.
   Desktop: contain-scale via max-height (never cover — CTAs must stay
   readable). Target: substantial screenshot above fold on ~1280×800 /
   1440×900. Chrome budget ≈ 15.5rem (nav pad + eyebrow/count/h1 +
   caption + gaps). */
body.case-page.fold-hero .case-wrap{
  padding-top:clamp(104px,12vh,132px)}
body.case-page.fold-hero #head.case-section{
  padding-top:.35rem;padding-bottom:.85rem}
body.case-page.fold-hero #head .eyebrow{margin-bottom:10px}
body.case-page.fold-hero #head .count-tag{margin-bottom:6px}
body.case-page.fold-hero #head h1{
  font-size:clamp(28px,3.6vw,48px);margin:0;line-height:1.06}
body.case-page.fold-hero #head .case-hero{margin-top:12px}
body.case-page.fold-hero #head .case-hero figcaption{
  margin-top:6px;font-size:12px;line-height:1.35}
body.case-page.fold-hero #head .case-hero figcaption a{
  color:var(--golddeep);text-decoration:underline;text-underline-offset:2px}
body.case-page.fold-hero #head .case-hero figcaption a:hover{color:var(--sealdeep)}
body.case-page.fold-hero #head .case-facts{
  margin-top:12px;gap:8px}
body.case-page.fold-hero #head .case-facts li{
  padding:5px 12px;font-size:10px;letter-spacing:.14em}
body.case-page.fold-hero #head .case-facts li.live a{padding:5px 12px}
/* credo = former .lede, now opens #challenge under the h2 */
body.case-page.fold-hero #challenge .credo{
  font-family:var(--serif);font-size:clamp(16px,1.35vw,19px);line-height:1.55;
  color:#4A4231;max-width:56ch;margin:0 0 1.15rem}
body.case-page.fold-hero #challenge .credo em{
  font-style:italic;color:var(--golddeep)}
body.case-page.fold-hero #challenge.case-section{
  padding-top:clamp(1.6rem,3.5vh,2.4rem)}
@media (min-width:900px){
  body.case-page.fold-hero #head .case-hero{
    display:flex;flex-direction:column;align-items:center}
  body.case-page.fold-hero #head .case-hero picture{
    display:block;width:100%;line-height:0;text-align:center}
  body.case-page.fold-hero #head .case-hero img{
    width:auto;max-width:100%;height:auto;
    max-height:calc(100vh - 15.5rem);
    object-fit:contain}
}
@media (max-width:640px){
  body.case-page.fold-hero #head .case-hero img{
    width:100%;height:auto;max-height:none;object-fit:unset}
}