/* ============================================================
   MAIN — colour, grid, spacing, components, motion
   Shared by every case study. Change something here and every
   project folder picks it up.
   Type roles live in typography.css.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* colour */
  --ink:            #000000;
  --ink-soft:       #4a4a4a;
  --ink-faint:      #9b9b9b;
  --paper:          #ffffff;
  --paper-alt:      #f4f4f2;   /* light grey section band */
  --night:          #0a0a0a;   /* dark section band */
  --night-soft:     #b4b4b4;   /* body copy on dark */
  --rule:           #e2e2e0;   /* hairlines */
  --rule-dark:      #2a2a2a;
  --accent:         #4353ff;   /* links, hovers, focus */

  /* Scope card fill. Approximated from the Bowen design system node
     1447-1382 — confirm the exact stops against Figma. */
  --card-grad: linear-gradient(45deg, #0f3232 0%, #141f47 52%, #05070f 100%);

  /* 12-column grid */
  --cols: 12;
  --gap: clamp(0.875rem, 1.5vw, 1.5rem);
  --gutter: clamp(1.25rem, 4vw, 5rem);
  --maxw: 1440px;

  /* vertical rhythm — the spacing dial for every section */
  --section-y: clamp(4.5rem, 9vw, 10rem);
  --section-y-tight: clamp(3rem, 5vw, 5rem);
  --block-gap: clamp(2.5rem, 5vw, 4rem);
  --stack-gap: clamp(1.75rem, 3vw, 3rem);
  --bullet-gap: 3rem;          /* 48px — between bullets, Problem and Stats */
  --bullet-inset: 2.5rem;      /* 40px — rule → title → body inside a bullet */
  --header-h: 3.5rem;          /* 56px — the fixed bar the hero has to clear */
  --block-y: calc(var(--section-y) / 2);   /* case-study blocks sit on half the section rhythm */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--default-font-family);
  font-size:var(--text-body-md);
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:inherit}   /* role classes own the type */
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- colour-only helpers (no type; pair with a role class) ---- */
.muted{color:var(--ink-soft)}
.faint{color:var(--ink-faint)}
.prose{color:var(--ink-soft)}
.prose p + p{margin-top:1em}

/* eyebrow = text-label-sm plus the bracket frame */
.eyebrow{color:var(--ink-soft);margin:0 0 clamp(1.5rem,3vw,2.5rem)}
.eyebrow::before{content:"[ "}
.eyebrow::after{content:" ]"}

/* ============================================================
   3. THE 12-COLUMN GRID
   ------------------------------------------------------------
   .grid            → 12 equal columns
   .c-1 … .c-12     → column span (desktop, > 1100px)
   .s-2 … .s-9      → explicit start column (optional)
   .md-c-N          → span at ≤ 1100px
   .sm-c-N          → span at ≤ 700px (default there is full width)
   Nest a .grid inside a column to get 12 sub-columns.
   Spans set grid-column-END so an explicit .s-N start composes.
   ============================================================ */
.grid{
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gap);
  row-gap:0;
}
.grid--rows{row-gap:var(--stack-gap)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.c-1{grid-column-end:span 1}   .c-2{grid-column-end:span 2}
.c-3{grid-column-end:span 3}   .c-4{grid-column-end:span 4}
.c-5{grid-column-end:span 5}   .c-6{grid-column-end:span 6}
.c-7{grid-column-end:span 7}   .c-8{grid-column-end:span 8}
.c-9{grid-column-end:span 9}   .c-10{grid-column-end:span 10}
.c-11{grid-column-end:span 11} .c-12{grid-column-end:span 12}

.s-2{grid-column-start:2}  .s-3{grid-column-start:3}
.s-4{grid-column-start:4}  .s-5{grid-column-start:5}
.s-6{grid-column-start:6}  .s-7{grid-column-start:7}
.s-8{grid-column-start:8}  .s-9{grid-column-start:9}

@media (max-width:1100px){
  .md-c-3{grid-column-end:span 3}   .md-c-4{grid-column-end:span 4}
  .md-c-5{grid-column-end:span 5}   .md-c-6{grid-column-end:span 6}
  .md-c-7{grid-column-end:span 7}   .md-c-8{grid-column-end:span 8}
  .md-c-10{grid-column-end:span 10} .md-c-12{grid-column-end:span 12}
  .md-s-auto{grid-column-start:auto}
}
@media (max-width:700px){
  /* everything goes full width unless told otherwise */
  .grid > *{grid-column-start:auto;grid-column-end:span 12}
  .grid > .sm-c-4{grid-column-end:span 4}
  .grid > .sm-c-6{grid-column-end:span 6}
  .grid > .sm-c-8{grid-column-end:span 8}
}

/* ---- section rhythm ---- */
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:var(--section-y-tight)}

/* ---- image placeholder — delete .ph once real art is dropped in ---- */
.ph{
  position:relative;background:var(--paper-alt);
  border:1px dashed var(--rule);
  display:grid;place-items:center;
  color:var(--ink-faint);
  aspect-ratio:16/9;width:100%;
}
/* Body media ships at 1800 × 1200 — keep every in-body image on 3:2. */
.ph--media{aspect-ratio:3/2}
.ph--tall{aspect-ratio:3/4}
.ph--square{aspect-ratio:1/1}
.ph--wide{aspect-ratio:21/9}
.ph--portrait{aspect-ratio:4/5}
.on-night .ph{background:#141414;border-color:var(--rule-dark);color:#6a6a6a}

/* ============================================================
   4. HEADER
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto;z-index:60;
  padding:1.1rem 0;color:#fff;
  background:var(--night);
  transition:transform .35s var(--ease);
  will-change:transform;
}
/* .is-hidden is toggled by the scroll handler: away on the way down,
   back on the way up. */
.site-header.is-hidden{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){
  .site-header{transition:none}
  .site-header.is-hidden{transform:none}
}
.site-header__logo{display:block;width:clamp(96px,9vw,132px)}
.site-header__logo img{width:100%;height:auto}
.site-header .grid{align-items:center}
.site-header__actions{display:flex;justify-content:flex-end;align-items:center}

.site-nav{display:flex;justify-content:flex-end;gap:clamp(1rem,2vw,2rem);white-space:nowrap}
.site-nav a{opacity:.85;transition:opacity .2s var(--ease)}
.site-nav a:hover{opacity:1}

/* ---- hamburger ----------------------------------------------
   .is-compact is set by JS the moment the links stop fitting, so the
   switch follows the actual content rather than a guessed breakpoint.
   -------------------------------------------------------------- */
.nav-toggle{
  all:unset;
  display:none;
  cursor:pointer;
  width:28px;height:18px;position:relative;flex:none;
  color:inherit;
}
.nav-toggle span{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1){top:3px}
.nav-toggle span:nth-child(2){bottom:3px}

.site-header.is-compact .nav-toggle{display:block}
.site-header.is-compact .site-nav{
  position:absolute;left:0;right:0;top:100%;
  background:var(--night);
  flex-direction:column;justify-content:flex-start;
  gap:0;
  padding-inline:var(--gutter);
  max-height:0;overflow:hidden;
  transition:max-height .35s var(--ease);
}
.site-header.is-compact .site-nav a{
  display:block;width:100%;
  padding-block:1.1rem;
  border-top:1px solid var(--rule-dark);
  opacity:1;
}
.site-header.is-compact.nav-open .site-nav{max-height:70vh;overflow-y:auto}
.site-header.is-compact.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-header.is-compact.nav-open .nav-toggle span:nth-child(2){transform:translateY(-6px) rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  .nav-toggle span,
  .site-header.is-compact .site-nav{transition:none}
}

/* JavaScript off: no toggle to press, so let the links wrap rather than
   overflow the bar. */
.no-js .site-nav{flex-wrap:wrap;white-space:normal;row-gap:.25rem}

/* ============================================================
   5. HERO (dark band)
   ============================================================ */
/* Same --section-y as every other section, plus the header it sits under,
   so the gap between any two sections is always 2 × --section-y. */
.hero{
  background:var(--night);color:#fff;
  padding-top:calc(var(--section-y) + var(--header-h));
  padding-bottom:var(--section-y);
}
.hero h1{margin-bottom:clamp(3rem,7vw,6rem)}
.hero__tags{
  display:flex;flex-wrap:wrap;align-self:end;
  justify-content:flex-end;gap:.6rem clamp(1rem,2.5vw,2.25rem);
  color:#8c8c8c;
}
@media (max-width:700px){.hero__tags{justify-content:flex-start;margin-top:1.25rem}}
.hero__meta{padding-bottom:clamp(2rem,4vw,3rem);align-items:end}
.hero__media{
  width:100%;aspect-ratio:16/9;background:#141414;
  border:1px dashed var(--rule-dark);display:grid;place-items:center;color:#6a6a6a;
}

/* ============================================================
   6. SUMMARY / HIGHLIGHTS
   ============================================================ */
.linklist li+li{margin-top:.5rem}
.linklist a{
  display:inline-flex;align-items:center;gap:.4rem;
  border-bottom:1px solid var(--rule);padding-bottom:2px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.linklist a:hover{color:var(--accent);border-color:var(--accent)}
.linklist a::after{content:"↗";font-size:.8em;opacity:.6}

.facts{margin-top:var(--block-gap);border-top:1px solid var(--rule);padding-top:1.75rem;row-gap:1.5rem}
.facts dt{color:var(--ink-faint);margin-bottom:.35rem}
.facts dd{margin:0}

.highlights li{position:relative;padding-left:1.5rem;color:var(--ink-soft)}
.highlights li+li{margin-top:.9rem}
.highlights li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--ink);
}

/* ============================================================
   7. SCOPE OF WORK (dark band, horizontal scroll)
   ============================================================ */
.scope{background:var(--night);color:#fff}
.scope h2{margin-bottom:var(--block-gap)}
.scope__grid{row-gap:var(--gap)}
.scope__card{
  background:var(--card-grad);
  border:1px solid var(--rule-dark);
  padding:clamp(1.5rem,2.5vw,2.25rem);
  min-height:320px;
  display:flex;flex-direction:column;gap:1.25rem;
}
.scope__card li{position:relative;padding-left:1.25rem;color:var(--night-soft)}
.scope__card li+li{margin-top:.55rem}
.scope__card li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--night-soft);
}

/* ============================================================
   8. STICKY RAIL (columns 1–3)
   ------------------------------------------------------------
   Shared by the Summary rail (View in live) and the case-study
   rail (Outline). Content sits in columns 4–12 beside it.
   The offset clears the fixed header.
   ============================================================ */
.rail{
  position:sticky;
  top:clamp(5.5rem,10vh,7rem);
  align-self:start;
  padding-bottom:var(--stack-gap);
}
/* below 1100px the rail stops being a column and just stacks on top */
@media (max-width:1100px){
  .rail{position:static;margin-bottom:var(--stack-gap)}
}

/* ---- the outline inside the case-study rail ----
   The blocks beside it carry --section-y of padding, so the rail is pushed
   down by the same amount to line its first item up with the first block.
   margin (not padding) so the sticky offset is unaffected once it pins. */
.index{margin-top:var(--block-y)}   /* line the outline up with the first block's content */
@media (max-width:1100px){.index{margin-top:0}}
.index ol{display:grid;gap:1.5rem;width:100%}   /* 24px between outline items */
.index a{
  display:grid;grid-template-columns:2.8rem 1fr;align-items:baseline;
  color:var(--ink-faint);transition:color .25s var(--ease);
}
.index a span{font-variant-numeric:tabular-nums}
.index a:hover{color:var(--ink)}
.index li.is-active a{color:var(--ink)}
/* the outline is noise on narrow screens; the rail keeps its label */
@media (max-width:1100px){.index ol{display:none}}

/* ============================================================
   9. CONTENT BLOCKS
   ============================================================ */
/* Case-study blocks run on half the section rhythm, so the gap between two
   blocks is ½y + ½y = 1y. .case-body adds the matching ½y at the top and
   bottom of the whole run, so the outer boundary reads as 1y too. */
.block{padding-block:var(--block-y);scroll-margin-top:5rem}
.case-body{padding-block:var(--block-y)}
/* 2×2 bullet grid — 48px both ways. Declared after .grid/.grid--rows
   so it wins on source order. */
.cols{column-gap:var(--bullet-gap);row-gap:var(--bullet-gap)}
/* rule → 40px → title → 40px → body */
.cols > li{border-top:1px solid var(--rule);padding-top:var(--bullet-inset)}
.cols > li h3{margin-bottom:var(--bullet-inset)}

/* ============================================================
   10. BEFORE / AFTER
   ============================================================ */
.ba{margin-top:var(--block-gap);row-gap:clamp(2rem,4vw,3.5rem)}
.ba__label{margin-bottom:.9rem}

/* ============================================================
   11. STICKY MEDIA + ACCORDION
   ============================================================ */
.sticky-pair{margin-top:var(--block-gap);align-items:start}
.sticky-pair__media{position:sticky;top:clamp(4rem,12vh,8rem)}
@media (max-width:1100px){.sticky-pair__media{position:static;margin-bottom:2rem}}

.acc{border-top:1px solid var(--rule)}
.acc__item{border-bottom:1px solid var(--rule)}
.acc__btn{
  all:unset;display:grid;grid-template-columns:2.6rem 1fr auto;align-items:center;
  gap:1rem;width:100%;padding:1.35rem 0;cursor:pointer;
}
.acc__btn::-webkit-details-marker{display:none}
.acc__num{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.acc__icon{position:relative;width:14px;height:14px;flex:none}
.acc__icon::before,.acc__icon::after{
  content:"";position:absolute;inset:50% 0 auto;height:1px;background:var(--ink);
}
.acc__icon::after{transform:rotate(90deg);transition:transform .3s var(--ease)}
.acc__item[open] .acc__icon::after{transform:rotate(0deg)}
.acc__panel{overflow:hidden;height:0;transition:height .35s var(--ease)}
.acc__panel-inner{padding:0 0 1.5rem 3.6rem;color:var(--ink-soft)}
@media (max-width:560px){.acc__panel-inner{padding-left:0}}

/* ============================================================
   12. QUOTE / TESTIMONIAL
   ============================================================ */
.quote{background:var(--night);color:#fff}
.quote .grid{row-gap:0}
.quote__body{padding:clamp(2.5rem,5vw,4.5rem)}
.quote__text{margin:0 0 clamp(2rem,4vw,3rem)}
.quote__text::before{content:"“";display:block;font-size:2.2em;line-height:.6;margin-bottom:.12em;color:var(--accent)}
.quote__name{margin-bottom:.25rem}
.quote__role{color:#8c8c8c}
.quote__media .ph{aspect-ratio:auto;height:100%;min-height:320px;background:#141414;border-color:var(--rule-dark);color:#6a6a6a}

/* ============================================================
   13. RESULTS
   ============================================================ */
.results{margin-top:var(--block-gap);column-gap:var(--bullet-gap);row-gap:var(--bullet-gap)}
.results > div{border-top:1px solid var(--rule);padding-top:var(--bullet-inset)}
.results__num{margin-bottom:var(--bullet-inset)}
.results__label{color:var(--ink-soft)}

/* ============================================================
   14. MORE CASE STUDIES + CTA
   ============================================================ */
.more{background:var(--paper-alt)}
.more__head{margin-bottom:clamp(2rem,4vw,3.5rem);display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-items:baseline}
.more__grid{row-gap:clamp(2rem,4vw,3rem)}
.card__media{margin-bottom:1.1rem;overflow:hidden}
.card__media .ph{background:#e8e8e5;transition:transform .5s var(--ease)}
.card:hover .card__media .ph{transform:scale(1.03)}
.card__title{margin-bottom:.4rem}
.card__desc{color:var(--ink-soft)}

.cta{background:var(--night);color:#fff}
.cta h2{margin-bottom:clamp(2rem,4vw,3rem)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem 1rem}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid #fff;border-radius:999px;padding:.9rem 1.9rem;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.btn:hover{background:#fff;color:var(--night)}
.site-footer{
  background:var(--night);color:#6a6a6a;
  padding:2rem 0;border-top:1px solid var(--rule-dark);
}
.site-footer .grid{align-items:center;row-gap:.5rem}
.site-footer .align-end{text-align:right}
@media (max-width:700px){.site-footer .align-end{text-align:left}}

/* ============================================================
   15. SCROLL REVEAL
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .acc__panel{transition:none}
  *{animation-duration:.01ms !important}
}

/* ============================================================
   16. GRID OVERLAY — press G to toggle while designing
   ============================================================ */
.gridlines{position:fixed;inset:0;z-index:999;pointer-events:none;display:none}
.gridlines.is-on{display:block}
.gridlines .wrap,.gridlines .grid{height:100%}
.gridlines i{background:rgba(255,0,80,.07);border-left:1px solid rgba(255,0,80,.2);border-right:1px solid rgba(255,0,80,.2)}