/* C Studio — dark editorial. Fonts are self-hosted under the SIL Open Font License (see /assets/*-OFL.txt). */
@font-face{font-family:'Bricolage Grotesque';src:url('/assets/bricolage-grotesque-latin.woff2') format('woff2');font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/geist-mono-latin.woff2') format('woff2');font-style:normal;font-weight:400 600;font-display:swap}

:root{
  color-scheme:dark;
  --ink-0:#0e0c0a;          /* page: warm near-black */
  --ink-1:#15120f;          /* raised surface */
  --ink-2:#1c1814;
  --rule:#2a2520;           /* hairlines */
  --rule-2:#3d362e;         /* stronger hairlines, frames, leaders */
  --cream:#f2eadc;          /* primary text */
  --cream-2:#c9bead;        /* body text */
  --muted:#9a8f7f;          /* labels, captions */
  --accent:#ff6a3d;         /* ember: the full stop, focus, rare emphasis */
  --display:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif;
  --sans:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --gutter:clamp(20px,5vw,72px);
  --gap:24px;
  --section:clamp(104px,12vw,184px);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink-0);scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--ink-0);color:var(--cream-2);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-kerning:normal}
::selection{background:var(--accent);color:var(--ink-0)}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
img{max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.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}
.skip-link{position:absolute;left:16px;top:-120px;z-index:10;padding:12px 18px;background:var(--cream);color:var(--ink-0);font-weight:600;border-radius:4px}
.skip-link:focus{top:16px}

.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}

/* Shared marks */
.arrow{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;transition:transform 180ms ease-out}
a:hover .arrow{transform:translate(2px,-2px)}
a:hover .arrow.down{transform:translateY(3px)}
a:hover .arrow.up{transform:translateY(-3px)}
.mark{display:inline-block;width:.3em;height:.3em;margin-left:.08em;background:var(--accent);vertical-align:baseline}
.stop{display:inline-block;width:.14em;height:.14em;margin-left:.05em;overflow:hidden;color:transparent;background:var(--accent);vertical-align:baseline;line-height:0}
.kicker,.label,.section-head,dt,figcaption,.chapter-no,.big-link-url,.num{font-family:var(--mono);font-weight:400;font-size:12px;line-height:1.5;letter-spacing:.09em;text-transform:uppercase}

/* Header */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-block:18px;border-bottom:1px solid var(--rule)}
.wordmark{display:inline-flex;align-items:baseline;min-height:44px;padding-top:9px;font-family:var(--display);font-size:23px;font-weight:650;font-stretch:88%;letter-spacing:-.02em;line-height:1.1;color:var(--cream);white-space:nowrap}
.site-header nav{display:flex;gap:clamp(18px,2.6vw,40px)}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--cream-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1px;transition:color 160ms,text-decoration-color 160ms}
.site-header nav a:hover{color:var(--cream);text-decoration-color:var(--accent)}

/* Hero */
.hero{padding-top:clamp(40px,6.5vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,96px);align-items:end}
.hero-copy{container-type:inline-size;min-width:0}
.kicker{color:var(--muted);margin-bottom:clamp(20px,2.6vw,36px)}
.kicker span{color:var(--rule-2);margin-inline:.4em}
h1{font-family:var(--display);font-weight:700;font-stretch:78%;font-size:clamp(3rem,12vw,10rem);font-size:22cqi;line-height:.84;letter-spacing:-.018em;color:var(--cream);margin-left:-.04em}
.hero-text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px clamp(24px,3vw,48px);margin-top:clamp(36px,4.4vw,64px);align-items:start}
.lede{font-family:var(--display);font-weight:420;font-stretch:96%;font-size:clamp(21px,2vw,28px);line-height:1.22;letter-spacing:-.012em;color:var(--cream);max-width:20em}
.hero-text p:not(.lede){max-width:38ch}
.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;padding-bottom:2px;color:var(--cream);font-weight:600;font-size:16px;border-bottom:1px solid var(--rule-2);transition:border-color 160ms}
.text-link:hover{border-color:var(--accent)}
.hero-phone{width:clamp(220px,21vw,300px)}
.phone{padding:7px;border-radius:36px;background:#050403;border:1px solid var(--rule-2)}
.phone img{display:block;width:100%;height:auto;border-radius:29px;background:var(--ink-1)}
figcaption{margin-top:14px;color:var(--muted);letter-spacing:.06em;text-transform:none;font-size:12px}
figcaption span{color:var(--cream);margin-right:.7em;text-transform:uppercase;letter-spacing:.09em}

/* Ledgers (hero + case meta) */
.ledger,.case-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--rule)}
.ledger{margin-top:clamp(56px,7vw,104px)}
.ledger>div,.case-meta>div{padding:18px 20px 22px 0;min-width:0}
.ledger>div+div,.case-meta>div+div{padding-left:20px;border-left:1px solid var(--rule)}
dt{color:var(--muted);margin-bottom:8px}
dd{color:var(--cream);font-size:16px;line-height:1.45}
dd a{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color 160ms}
dd a:hover{text-decoration-color:var(--accent)}
.demo-link{display:inline-flex;align-items:center;gap:6px;overflow-wrap:anywhere}

/* Section heads */
.section-head{display:flex;justify-content:space-between;gap:24px;padding-bottom:14px;border-bottom:1px solid var(--rule);color:var(--muted)}
.section-head span:first-child{color:var(--cream)}
.section-head span:first-child::before{content:'';display:inline-block;width:7px;height:7px;margin-right:12px;background:var(--accent);vertical-align:1px}

/* Case study */
.case{padding-top:var(--section)}
.case-head{margin-top:clamp(28px,4vw,56px)}
.case-head h2{font-family:var(--display);font-weight:680;font-stretch:80%;font-size:clamp(3.5rem,19vw,14.25rem);line-height:.82;letter-spacing:-.025em;color:var(--cream);margin-left:-.05em}
.case-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px var(--gap);margin-top:clamp(32px,4.4vw,64px);align-items:start}
.case-summary{grid-column:1/span 6;font-family:var(--display);font-weight:400;font-stretch:96%;font-size:clamp(22px,2.4vw,34px);line-height:1.2;letter-spacing:-.015em;color:var(--cream)}
.disclosure-box{grid-column:8/-1;padding:20px 22px 22px;background:var(--ink-1);border:1px solid var(--rule-2);border-left:3px solid var(--accent)}
.disclosure{color:var(--cream);font-weight:600;font-size:16px;line-height:1.5}
.disclosure-note{margin-top:10px;font-size:14px;line-height:1.6;color:var(--cream-2)}
.case-meta{margin-top:clamp(40px,5vw,72px)}

.problem,.status{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px var(--gap);margin-top:clamp(88px,10vw,152px)}
.label{grid-column:1/span 3;color:var(--muted);padding-top:.7em}
.problem-body,.status-grid{grid-column:4/-1}
.statement{font-family:var(--display);font-weight:400;font-stretch:96%;font-size:clamp(26px,3.15vw,46px);line-height:1.14;letter-spacing:-.02em;color:var(--cream);max-width:24em}
.problem-body p+p{margin-top:28px;font-size:18px;max-width:58ch}

.chapter{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px var(--gap);margin-top:clamp(96px,11vw,168px);align-items:start}
.chapter-copy{grid-column:1/span 4;position:sticky;top:32px}
.chapter-no{color:var(--accent);display:flex;align-items:center;gap:14px;margin-bottom:18px}
.chapter-no::after{content:'';height:1px;flex:1;background:var(--rule)}
.chapter h3{font-family:var(--display);font-weight:620;font-stretch:86%;font-size:clamp(28px,2.9vw,44px);line-height:1;letter-spacing:-.015em;color:var(--cream);margin-bottom:18px}
.chapter-copy p:last-child{max-width:52ch}
.shot{min-width:0}
.shot img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--rule-2);background:var(--ink-1)}

.chapter-split .shot{grid-column:5/-1}
.chapter-flip .chapter-copy{grid-column:10/-1;grid-row:1}
.chapter-flip .shot{grid-column:1/span 8;grid-row:1}
.chapter-flip .chapter-copy{grid-column:9/-1;padding-left:clamp(0px,1.6vw,24px)}

.chapter-wide .chapter-copy,.chapter-booking .chapter-copy{grid-column:1/-1;position:static;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.chapter-wide .chapter-no,.chapter-booking .chapter-no{grid-column:1/-1}
.chapter-wide h3,.chapter-booking h3{grid-column:1/span 5;margin-bottom:0}
.chapter-wide .chapter-copy p:last-child,.chapter-booking .chapter-copy p:last-child{grid-column:7/-1}
.chapter-wide .shot{grid-column:1/-1}

.booking-shots{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--gap);align-items:start}
.booking-shots .shot:first-child{grid-column:1/span 8}
.booking-shots .shot:last-child{grid-column:9/-1}

.chapter-phones .phones{grid-column:6/-1;display:flex;gap:clamp(16px,3vw,48px);align-items:flex-start}
.phones figure{flex:1 1 0;max-width:300px;min-width:0}
.phones figure:nth-child(2){margin-top:clamp(0px,6vw,88px)}

.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px clamp(32px,4vw,64px)}
.status h4{font-family:var(--display);font-weight:620;font-stretch:90%;font-size:21px;letter-spacing:-.01em;line-height:1.2;color:var(--cream);padding-bottom:12px;border-bottom:1px solid var(--rule)}
.leaders li{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.45}
.leaders li>span:first-child{color:var(--cream-2);flex:none;max-width:60%}
.leaders li::after{content:'';order:1;flex:1 1 16px;min-width:16px;border-bottom:1px dotted var(--rule-2);transform:translateY(-.3em)}
.leaders li>span:last-child{order:2;color:var(--cream);text-align:right}

.case-links{margin-top:clamp(72px,8vw,120px);border-top:1px solid var(--rule)}
.big-link{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 28px;padding-block:clamp(22px,2.6vw,34px);border-bottom:1px solid var(--rule);color:var(--cream)}
.big-link-label{font-family:var(--display);font-weight:620;font-stretch:84%;font-size:clamp(26px,3.6vw,54px);line-height:1.02;letter-spacing:-.018em;transition:color 160ms}
.big-link-url{color:var(--muted);text-transform:none;letter-spacing:.02em;font-size:13px}
.big-link .arrow{width:clamp(26px,2.6vw,40px);height:clamp(26px,2.6vw,40px);stroke-width:1.4}
.big-link:hover .big-link-label{color:var(--accent)}

/* Approach */
.approach{padding-top:var(--section)}
.approach-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--gap);margin-top:clamp(32px,4.4vw,64px);align-items:start}
.approach-copy{grid-column:1/span 5}
.approach h2{font-family:var(--display);font-weight:620;font-stretch:84%;font-size:clamp(36px,4.6vw,68px);line-height:.98;letter-spacing:-.018em;color:var(--cream);margin-bottom:28px;max-width:11em}
.approach-copy p{font-size:18px;max-width:44ch}
.services{grid-column:7/-1;border-top:1px solid var(--rule)}
.services li{padding:22px 0 24px;border-bottom:1px solid var(--rule)}
.services h3{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;font-family:var(--display);font-weight:600;font-stretch:90%;font-size:clamp(21px,1.9vw,27px);line-height:1.15;letter-spacing:-.015em;color:var(--cream)}
.services h3>span:first-child{flex:0 1 auto;min-width:0}
.services h3::after{content:'';order:1;flex:1 1 20px;min-width:20px;border-bottom:1px dotted var(--rule-2);transform:translateY(-.25em)}
.services .num{order:2;color:var(--accent);letter-spacing:.06em}
.services p{font-size:16px;color:var(--cream-2);max-width:46ch}

/* Contact */
.contact{padding-top:var(--section);padding-bottom:clamp(80px,9vw,136px);container-type:inline-size}
.contact h2{margin-top:clamp(32px,4.4vw,64px);font-family:var(--display);font-weight:400;font-stretch:96%;font-size:clamp(26px,3.15vw,46px);line-height:1.14;letter-spacing:-.02em;color:var(--cream);max-width:20em}
.email-link{display:inline-flex;align-items:center;gap:.18em;max-width:100%;margin-top:clamp(28px,4vw,56px);padding-bottom:.06em;font-family:var(--display);font-weight:650;font-stretch:80%;font-size:clamp(2.2rem,9.6vw,9.5rem);font-size:11.6cqi;line-height:1;letter-spacing:-.018em;color:var(--cream);border-bottom:2px solid var(--rule-2);transition:border-color 160ms,color 160ms;overflow-wrap:anywhere}
.email-link .arrow{width:.46em;height:.46em;stroke-width:1.2;color:var(--accent)}
.email-link:hover{border-color:var(--accent)}
.contact-note{margin-top:20px;font-size:15px;color:var(--muted)}

/* Footer */
.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding-block:22px 36px;border-top:1px solid var(--rule);font-size:14px;color:var(--muted)}
.site-footer .wordmark{font-size:20px;padding-top:7px}
.to-top{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--cream-2)}
.to-top:hover{color:var(--cream)}

/* 404 */
.not-found{padding-block:clamp(72px,12vw,176px);container-type:inline-size}
.not-found h1{font-size:clamp(3rem,15vw,12rem);font-size:15cqi}
.not-found .lede{margin-top:32px}

/* Entrance: a short settle on load, removed for reduced motion */
@keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .kicker,.hero h1,.hero-text,.hero-phone{animation:settle 700ms cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:60ms}
.hero-text{animation-delay:140ms}
.hero-phone{animation-delay:220ms}

/* Tablet */
@media (max-width:1023px){
  .ledger,.case-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger>div:nth-child(3),.case-meta>div:nth-child(3){padding-left:0;border-left:0}
  .ledger>div:nth-child(n+3),.case-meta>div:nth-child(n+3){border-top:1px solid var(--rule)}
  .case-summary{grid-column:1/-1;max-width:30em}
  .disclosure-box{grid-column:1/-1;max-width:640px}
  .label{grid-column:1/-1;padding-top:0}
  .problem-body,.status-grid{grid-column:1/-1}
  .chapter{gap:28px var(--gap)}
  .chapter-copy,.chapter-flip .chapter-copy{grid-column:1/-1;grid-row:auto;position:static;padding-left:0}
  .chapter-split .shot,.chapter-flip .shot{grid-column:1/-1;grid-row:auto}
  .chapter-wide h3,.chapter-booking h3{grid-column:1/-1;margin-bottom:18px}
  .chapter-wide .chapter-copy p:last-child,.chapter-booking .chapter-copy p:last-child{grid-column:1/-1}
  .chapter-phones .phones{grid-column:1/-1}
  .approach-copy,.services{grid-column:1/-1}
  .approach h2{max-width:14em}
}

@media (max-width:900px){
  .hero-text{grid-template-columns:minmax(0,1fr)}
  .lede{max-width:24em}
}

/* Phone */
@media (max-width:699px){
  body{font-size:16px}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-text{grid-template-columns:minmax(0,1fr)}
  .hero-phone{width:auto;display:grid;grid-template-columns:minmax(0,58%) minmax(0,1fr);gap:18px;align-items:end}
  .hero-phone figcaption{margin-top:0;padding-bottom:6px}
  .hero-phone figcaption span{display:block;margin-bottom:6px}
  .phone{padding:5px;border-radius:28px}
  .phone img{border-radius:23px}
  .ledger,.case-meta{grid-template-columns:minmax(0,1fr)}
  .ledger>div,.case-meta>div,.ledger>div+div,.case-meta>div+div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:14px 0;border-left:0}
  .ledger>div+div,.case-meta>div+div{border-top:1px solid var(--rule)}
  dt{margin:2px 0 0}
  dd{font-size:15px}
  .booking-shots .shot:first-child,.booking-shots .shot:last-child{grid-column:1/-1}
  .booking-shots .shot:last-child{max-width:420px}
  .phones{gap:14px}
  .phones figure:nth-child(2){margin-top:40px}
  .status-grid{grid-template-columns:minmax(0,1fr)}
  .leaders li{font-size:14px}
  .big-link{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
  .big-link-url{grid-column:1;grid-row:2}
  .big-link .arrow{grid-column:2;grid-row:1/span 2}
  .services h3{font-size:20px}
  .site-footer{flex-direction:column;align-items:flex-start;gap:4px}
}

@media (max-width:359px){
  .site-header nav{gap:14px}
  .site-header nav a{font-size:14px}
  .ledger>div,.case-meta>div,.ledger>div+div,.case-meta>div+div{grid-template-columns:minmax(0,1fr);gap:4px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  a:hover .arrow{transform:none}
}

@media print{
  body,html{background:#fff;color:#000}
  .hero .kicker,.hero h1,.hero-text,.hero-phone{animation:none}
}