/* THERMIC — rough draft · quiet monolith · b/w · dark */
:root{
  --ink:#EDEBE6;
  --paper:#0A0A0A;
  --body-c:#B9B6AF;
  --dim:#98958E;
  --line:#1F1F1F;
  --frame:#161616;
  --pad:clamp(20px,3.2vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
  --rise:cubic-bezier(.19,1,.22,1);
  --bloom:2.2s;
  /* type scale — de-facto steps shared across components */
  --fs-meta:13.5px;
  --fs-label:14px;
  --fs-sub:14.5px;
  --fs-body-s:15px;
  --fs-row:18px;
  --fs-fluid-sm:clamp(16px,1.4vw,20px);
  /* transition durations (pair with --ease/--rise) */
  --t-fast:.22s;
  --t-med:.3s;
  --t-recede:.35s;
  --t-slow:.6s;
  /* image motion — used by BOTH a base rule and its html.js override; edit here, changes both */
  --zoom-panel:1.4s var(--ease);
  --zoom-card:1.2s var(--ease);
  --bloom-hero:1.6s;
  /* vertical rhythm */
  --space-xl:170px;
  --space-lg:130px;
  --space-md:100px; /* flips to 64px at ≤820px */
  --space-s:64px;
  /* text over imagery (kept separate from --ink on purpose) */
  --over-img:#fff;
}
[hidden]{display:none!important}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;font-size:16px;line-height:1.6;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--paper)}

/* unified photo grade — keeps mixed shoots feeling like one site */
.panel img,.card .frame img,.case-hero img,.case-photos img,.about-row img,.cap-photo img,.lb>img{filter:saturate(.94) contrast(1.02)}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:26px var(--pad);transition:padding .35s var(--ease)}
nav.scrolled{padding:16px var(--pad)}
nav.blend{color:var(--over-img)}
/* plain text bar, always visible. Legibility comes from shade, not glass: hero photos are darkened at the top
   (.hero .scrim, .case-hero::after), and once the page has scrolled a soft shade fades in behind the bar and
   falls off to nothing below it. No backdrop-filter, no blend mode (Caden, Oct 7).
   Every shade uses a cosine falloff (many stops, zero slope at the end) — a plain two-stop gradient leaves a visible line where it stops. */
nav::before{content:"";position:absolute;inset:0 0 -80px;z-index:-1;pointer-events:none;opacity:0;transition:opacity var(--t-recede) var(--ease);background:linear-gradient(to bottom,rgba(10,10,10,0.72) 0%,rgba(10,10,10,0.711) 7.1%,rgba(10,10,10,0.684) 14.3%,rgba(10,10,10,0.641) 21.4%,rgba(10,10,10,0.584) 28.6%,rgba(10,10,10,0.516) 35.7%,rgba(10,10,10,0.44) 42.9%,rgba(10,10,10,0.36) 50%,rgba(10,10,10,0.28) 57.1%,rgba(10,10,10,0.204) 64.3%,rgba(10,10,10,0.136) 71.4%,rgba(10,10,10,0.079) 78.6%,rgba(10,10,10,0.036) 85.7%,rgba(10,10,10,0.009) 92.9%,rgba(10,10,10,0) 100%)}
nav.scrolled::before{opacity:1}
nav.open::before{opacity:0} /* the open mobile menu is its own frosted sheet */
nav .wordmark{display:flex;align-items:center;gap:12px;padding:14px 0;margin:-14px 0;font-size:var(--fs-label);font-weight:700;letter-spacing:.22em}
nav .wordmark img{height:17px;width:auto;display:block}
nav ul{display:flex;gap:34px;list-style:none}
nav ul a{font-size:var(--fs-label);font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.8;transition:opacity var(--t-fast) var(--ease);display:inline-block;padding:14px 0;margin:-14px 0}
nav ul a:hover,nav ul a:focus-visible{opacity:1}
nav ul a.active{opacity:1}
/* mobile hamburger — frosted full-screen overlay, big tap targets */
.menu-btn{display:none;background:none;border:0;cursor:pointer;color:inherit;padding:17px 12px;margin:-17px -12px;position:relative;z-index:2}
.menu-btn span{display:block;width:22px;height:2px;background:currentColor;transition:transform var(--t-med) var(--ease)}
.menu-btn span+span{margin-top:6px}
nav.open .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
nav.open .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
html.menu-open{overflow:hidden}
a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.panel:focus-visible{outline-offset:-8px} /* full-bleed link — an outside ring sits off-canvas */
[role=button]:focus-visible{outline:1px solid var(--ink);outline-offset:-6px} /* lightbox-trigger images */
.skip{position:fixed;top:-48px;left:var(--pad);z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px;font-size:12px;letter-spacing:.04em;transition:top var(--t-fast) var(--ease)}
.skip:focus{top:12px}
.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}

/* ---------- shared patterns (section labels · split grids · ruled rows) ---------- */
/* section label — one rule restyles every lede/eyebrow site-wide */
.lede,.eyebrow{font-size:var(--fs-label);font-weight:500;letter-spacing:0;color:var(--dim)}
.eyebrow{display:inline-block;transition:color var(--t-fast) var(--ease)}
/* two-column section skeleton — margin/content deltas stay in each section below */
/* ruled row (label left, value right) — padding/border deltas stay in each section below */
.archive li a,.archive li>span,.specs div{display:flex;justify-content:space-between;gap:24px}

/* ---------- page shell ---------- */
.page{padding:var(--space-xl) var(--pad) 0}
.page-title{font-size:var(--fs-label);letter-spacing:0;color:var(--dim);margin-bottom:72px;display:flex;justify-content:space-between;align-items:baseline}
.page-title h1{font-size:inherit;font-weight:500;letter-spacing:inherit}


/* ---------- home hero (imagery-led) ---------- */
.hero{position:relative;height:100vh;height:100dvh;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* standard text-legibility scrim: bottom-up fade wherever text sits on a hero image */
.hero .scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.543) 2.6%,rgba(0,0,0,0.523) 5.1%,rgba(0,0,0,0.49) 7.7%,rgba(0,0,0,0.446) 10.3%,rgba(0,0,0,0.394) 12.9%,rgba(0,0,0,0.336) 15.4%,rgba(0,0,0,0.275) 18%,rgba(0,0,0,0.214) 20.6%,rgba(0,0,0,0.156) 23.1%,rgba(0,0,0,0.104) 25.7%,rgba(0,0,0,0.06) 28.3%,rgba(0,0,0,0.027) 30.9%,rgba(0,0,0,0.007) 33.4%,rgba(0,0,0,0) 36%),linear-gradient(185deg,rgba(0,0,0,.22) 0%,transparent 28%,rgba(0,0,0,.24) 55%,rgba(0,0,0,.8) 100%)}
.hero .statement-hero{position:absolute;left:var(--pad);right:var(--pad);bottom:56px;color:var(--over-img);font-size:clamp(24px,2.5vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.22;max-width:1520px}
.hero .statement-hero span{color:rgba(255,255,255,.62)}

/* ---------- full-bleed panels (home) ---------- */
.panel{position:relative;display:block;height:100vh;height:100dvh;overflow:hidden}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform var(--zoom-panel)}
html.js .panel img{transition:opacity var(--bloom) var(--rise),transform var(--zoom-panel)}
.panel:hover img{transform:scale(1)}
.panel .meta{position:absolute;left:var(--pad);right:var(--pad);bottom:30px;z-index:2;color:var(--over-img);transition:opacity var(--t-slow) var(--ease)}
.panel .meta h2{font-size:21px;font-weight:700;letter-spacing:-.015em}
.panel .meta .sub{font-size:var(--fs-sub);color:rgba(255,255,255,.9);margin-top:2px}
.panel .meta .desc{font-size:var(--fs-label);opacity:0;transform:translateY(6px);margin-top:6px;max-width:520px;line-height:1.5;transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.panel:hover .meta .desc,.panel:focus-visible .meta .desc{opacity:.9;transform:none}
.panel .scrim{position:absolute;inset:auto 0 0 0;height:340px;background:linear-gradient(transparent,rgba(0,0,0,.8));opacity:1;transition:opacity var(--t-slow) var(--ease)}
.panel:hover img,.card:hover .frame img{will-change:transform}
/* touch devices: no hover — show full meta */
@media(hover:none){
  .panel .meta .desc{opacity:.9;transform:none}
}

/* ---------- section: statement rows ---------- */
.strip{padding:180px var(--pad)}
.strip+.strip{border-top:1px solid var(--line)}
.strip .lede{margin-bottom:var(--space-s)}
/* link language — no underlines, no arrows (Caden, Aug 22); bold text, hover dims */
.strip .more,.page .more{display:inline-block;margin-top:72px;font-size:var(--fs-fluid-sm);font-weight:700;letter-spacing:-.01em;transition:color var(--t-med) var(--ease)}
.strip .more:hover,.page .more:hover{color:var(--dim)}

/* ---------- home: half-width featured panels ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr}
.duo .panel{height:72vh;height:72dvh}

/* ---------- work index grid — 2-up, 3-up on wide screens ---------- */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:88px 32px;padding-bottom:var(--space-xl)}
.work-grid .card{display:block}
@media(min-width:1400px){.work-grid{grid-template-columns:repeat(3,1fr)}}
.card .frame{overflow:hidden;background:var(--frame)}
.card .frame img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform var(--zoom-card)}
html.js .card .frame img{transition:opacity var(--bloom) var(--rise),transform var(--zoom-card)}
.card:hover .frame img,.card:focus-visible .frame img{transform:scale(1.045)}
/* caption: title+sub left, service right on the h2 line (this-that style) */
.card .caption{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:baseline}
.card h2{grid-column:1;grid-row:1;font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:-.015em;line-height:1.25}
.card .sub{grid-column:1;grid-row:2;font-size:var(--fs-body-s);font-weight:400;color:var(--body-c);margin-top:3px}
.card .svc{grid-column:2;grid-row:1 / span 2;align-self:start;margin-top:.45em;text-wrap:balance;justify-self:end;text-align:right;max-width:16em;font-size:13px;font-weight:400;color:var(--dim);letter-spacing:0;transition:color var(--t-fast) var(--ease)}
.card:hover .svc{color:var(--body-c)}
/* reactive grid — hovered card pops, siblings recede (mirrors the ledger) */
.work-grid .card{transition:opacity var(--t-recede) var(--ease)}
@media(hover:hover){
  .work-grid:hover .card{opacity:.72}
  .work-grid:hover .card:hover{opacity:1}
}

/* ---------- work index (rolodex) ---------- */
.view-toggle{display:flex;gap:16px;align-items:baseline}
.view-toggle button{background:none;border:none;padding:14px 8px;margin:-14px -8px;cursor:pointer;font-family:inherit;font-size:var(--fs-label);font-weight:500;letter-spacing:0;color:var(--dim);transition:color var(--t-fast) var(--ease)}
.view-toggle button:hover,.view-toggle button:focus-visible{color:var(--ink)}
.view-toggle button[aria-pressed="true"]{color:var(--ink)}
.view-toggle .sep{color:var(--dim);font-size:11px}

/* ---------- headline client roll — mirrors specialoffer.inc /work: 64px bold cut, -.01em, lh 1.0, centered ---------- */
.client-line{font-size:clamp(30px,4.5vw,64px);font-weight:700;letter-spacing:-.01em;line-height:1.06;color:var(--ink);text-align:center;max-width:1200px;margin:0 auto clamp(56px,7vw,104px);padding-top:clamp(24px,5vh,72px)}
.client-line span{white-space:nowrap}
.client-line a{color:inherit;transition:color var(--t-med) var(--ease)}
.client-line a:hover,.client-line a:focus-visible{color:var(--dim)}
.client-line .etc{color:var(--dim)}

/* ---------- service filter — deep-linkable work subpages (?service=) ---------- */
.work-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px 48px;margin-bottom:var(--space-s)}
.work-filter{display:flex;flex-wrap:wrap;gap:2px 34px}
.work-filter button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--fs-fluid-sm);font-weight:700;letter-spacing:0;color:var(--dim);padding:12px 0;margin:-12px 0;transition:color var(--t-fast) var(--ease)}
.work-filter button:hover,.work-filter button:focus-visible{color:var(--ink)}
.work-filter button[aria-pressed="true"]{color:var(--ink)}
.work-wrap{padding-bottom:var(--space-xl)}
.work-index{border-top:1px solid var(--ink)}
.work-index .row{position:relative;display:grid;grid-template-columns:90px minmax(0,2.4fr) minmax(0,3.3fr) minmax(0,3.3fr);gap:20px;padding:18px 0;border-top:1px solid transparent;border-bottom:1px solid var(--line);font-size:var(--fs-row);line-height:1.5;transition:opacity var(--t-recede) var(--ease)}
.work-index .row+.row{margin-top:-1px;border-top:1px solid var(--line)}
.work-index .row.head{padding:12px 0;border-top:none;border-bottom:1px solid var(--line)}
.work-index .row.head button{background:none;border:0;padding:14px 0;margin:-14px 0;cursor:pointer;font-family:inherit;font-size:var(--fs-meta);font-weight:500;letter-spacing:0;color:var(--dim);text-align:left;transition:color var(--t-fast) var(--ease)}
.work-index .row.head button:hover,.work-index .row.head button:focus-visible{color:var(--ink)}
.work-index .row.head button[data-dir]{color:var(--ink)}
.work-index .row.head button[data-dir="desc"]::before{content:"↓ "}
.work-index .row.head button[data-dir="asc"]::before{content:"↑ "}
.work-index .row span{color:var(--dim);font-size:16.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.work-index .row span:nth-child(3){color:var(--body-c)}
.work-index .row span:nth-child(2){color:var(--ink)}
.work-index a.row{transition:opacity var(--t-recede) var(--ease),border-color var(--t-med) var(--ease)}
.work-index a.row:hover,.work-index a.row:focus-visible{border-color:var(--ink);z-index:1}
@media(hover:hover){
  .work-index:hover .row:not(.head){opacity:.6}
  .work-index:hover a.row:hover{opacity:1}
}
.work-index a.row:focus-visible{opacity:1}


/* ---------- brands index / reactive roster ---------- */
.brands{padding:0 0 48px}
.brands .lede{margin-bottom:32px}
.roster{list-style:none;display:flex;flex-wrap:wrap;font-size:clamp(18px,2.4vw,34px);font-weight:400;letter-spacing:-.02em;line-height:1.6}
.roster li{color:var(--dim);white-space:nowrap;transition:opacity var(--t-med) var(--ease)}
.roster li:not(:last-child)::after{content:",";margin-right:.42em}
.roster a,.roster .name{color:var(--ink);font-weight:700}
@media(hover:hover){
  .roster:hover li{opacity:.55}
  .roster:hover li:hover{opacity:1}
}


/* ---------- archive list ---------- */
.archive{border-top:1px solid var(--line);padding:var(--space-lg) var(--pad) var(--space-xl)}
.archive .lede{margin-bottom:56px}
.archive ul{list-style:none}
.archive li{border-bottom:1px solid var(--line);font-size:15.5px}
.archive li a,.archive li>span{padding:18px 0;width:100%}
.archive li a:hover span:first-child{color:var(--ink)}
.archive li span:first-child{font-weight:500}
.archive li span:last-child{color:var(--dim);font-size:var(--fs-label);text-align:right;flex-shrink:0}

/* ---------- case study ---------- */
.case-hero{position:relative;height:92vh;height:92dvh;overflow:hidden}
.case-hero img{width:100%;height:100%;object-fit:cover}
.case-hero .scrim{position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(transparent,rgba(0,0,0,.74))}
.case-hero::after{content:"";position:absolute;inset:0 0 auto;height:340px;background:linear-gradient(to bottom,rgba(0,0,0,0.62) 0%,rgba(0,0,0,0.612) 7.1%,rgba(0,0,0,0.589) 14.3%,rgba(0,0,0,0.552) 21.4%,rgba(0,0,0,0.503) 28.6%,rgba(0,0,0,0.445) 35.7%,rgba(0,0,0,0.379) 42.9%,rgba(0,0,0,0.31) 50%,rgba(0,0,0,0.241) 57.1%,rgba(0,0,0,0.175) 64.3%,rgba(0,0,0,0.117) 71.4%,rgba(0,0,0,0.068) 78.6%,rgba(0,0,0,0.031) 85.7%,rgba(0,0,0,0.008) 92.9%,rgba(0,0,0,0) 100%);pointer-events:none}
.case-hero .case-title{position:absolute;left:var(--pad);right:var(--pad);bottom:48px;color:var(--over-img);max-width:1100px}
.case-hero h1{font-size:clamp(30px,3.8vw,60px);font-weight:700;letter-spacing:-.025em;line-height:1.08}
.case-hero .sub{font-size:clamp(15px,1.3vw,19px);color:rgba(255,255,255,.88);margin-top:10px}
.case-solo h1{font-size:clamp(30px,4vw,56px);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin-top:20px}
.case-solo .solo-sub{font-size:var(--fs-fluid-sm);color:var(--body-c);margin-top:12px}
.case-head.solo{padding:88px 0 0}
.case-head{padding:110px var(--pad) 0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px}
.case-head .eyebrow{margin-bottom:24px}
a.eyebrow:hover,a.eyebrow:focus-visible{color:var(--ink)}
/* case-page back button — bordered chip so it reads as a control, not a label */
.case-head h1{font-size:clamp(28px,3.4vw,54px);font-weight:700;letter-spacing:-.025em;line-height:1.12}
.case-head .body{margin-top:8px;max-width:56ch;color:var(--body-c)}
.case-head .body p+p{margin-top:18px}
.specs{border-top:1px solid var(--ink);font-size:var(--fs-body-s);align-self:end}
.specs div{padding:13px 0;border-bottom:1px solid var(--line)}
.specs dt{color:var(--dim)}
.specs dd{text-align:right;font-weight:500}
.specs dd{text-wrap:balance}
.specs dd.list span{white-space:nowrap}
.specs dd.list i{font-style:normal}
.specs dd.list.stack span{display:block;white-space:normal}
.specs dd.list.stack span+i+span{margin-top:2px}
.specs dd.list.stack i{display:none}
.case-photos{padding:var(--space-lg) 0 0}
.case-compare+.case-photos{padding-top:0} /* compare's cpair tail + module padding already separate them */
.about-lower+.about-photos{padding-top:var(--space-md)} /* text rows breathe before the next photo strip (Caden, Aug 22) */
.case-photos .full{width:100%;overflow:hidden}
.case-photos .full img{width:100%;height:auto;max-height:94vh;max-height:94dvh;object-fit:cover}
.case-photos .full+.full{margin-top:24px}
.case-photos .pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px var(--pad)}
.case-photos .pair .clip{overflow:hidden}
.case-photos .pair img{width:100%;height:auto;aspect-ratio:var(--pr,4/5);object-fit:cover}
.case-photos .trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;padding:24px var(--pad)}
.case-photos .trio .clip{overflow:hidden}
.case-photos .trio img{width:100%;height:auto;aspect-ratio:var(--pr,2/3);object-fit:cover}
.case-photos .inset{padding:24px var(--pad);max-width:1160px;margin:0 auto;overflow:hidden}
.case-photos .inset img{width:100%;height:auto;max-height:86vh;max-height:86dvh;object-fit:cover}
.case-photos .inset.doc img{width:auto;max-width:100%;max-height:82vh;max-height:82dvh;margin:0 auto;display:block;object-fit:contain}
.case-photos .vid{padding:24px var(--pad)} /* video spans like a pair row, not the narrow doc inset */
.case-photos .vid video{width:100%;height:auto;display:block;background:#000}
.case-photos .vid.tall video{width:auto;height:auto;max-width:100%;max-height:min(86vh,900px);margin:0 auto} /* portrait clip: centred, never taller than the screen */
.case-photos .tall{padding:24px var(--pad)}
.case-photos .tall picture{display:block}
.case-photos .tall img{display:block;height:auto;width:100%;max-width:min(100%,calc(88vh*var(--tar,.7)));max-width:min(100%,calc(88dvh*var(--tar,.7)));margin:0 auto}
.case-photos figure{margin:0}
.case-photos figure figcaption{font-size:var(--fs-meta);font-weight:500;color:var(--dim);margin-top:14px}
.case-photos figure.full figcaption{padding:0 var(--pad)}
.case-photos .city{padding:40px var(--pad) 16px}
.case-photos .city-name{font-size:var(--fs-label);font-weight:700;margin:0 0 20px}
.case-photos .city-name span{font-weight:500;color:var(--dim);margin-left:12px}
.case-photos .city .cpair{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:24px}
.case-photos .city figure{overflow:hidden}
.case-photos .city img{width:100%;height:auto;aspect-ratio:var(--pr,4/3);object-fit:cover}
.case-photos .quote{padding:150px var(--pad)}
.case-photos .quote p{font-size:clamp(22px,2.6vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.25;max-width:820px}
.case-photos .quote p span{color:var(--dim)}
.case-next{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-lg);padding:var(--space-s) var(--pad);border-top:1px solid var(--line);font-size:var(--fs-body-s)}
.case-next .label{color:var(--dim);font-size:var(--fs-meta);font-weight:500;letter-spacing:0;display:block;margin-bottom:8px}
.case-next a{display:inline-block;padding:13px 0;margin:-13px 0;font-weight:700;transition:color .4s var(--ease)}
.case-next a:hover{color:var(--dim)}
.case-next .next-wrap{text-align:right}
main.case+footer{margin-top:0} /* the next-project bar already closes the page */

/* ---------- about / contact ---------- */
.statement{font-size:clamp(26px,3.4vw,52px);font-weight:700;letter-spacing:-.025em;line-height:1.18;max-width:1250px}
.statement .quiet{color:var(--dim)}
/* story blocks — full-bleed rules live on the .about-lower wrapper (edge to edge; Caden, Aug 22) */
.about-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,88px);align-items:start}
.about-row.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
/* row labels at heading scale — a 14px lede alone in a 5fr column read as lost (Caden, Aug 22) */
.about-text .lede{display:block;margin-bottom:20px;font-size:clamp(24px,2.6vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.about-text p{color:var(--body-c);font-size:var(--fs-fluid-sm);line-height:1.65;max-width:54ch}
.about-text p+p{margin-top:22px}
.about-photo{overflow:hidden}
.about-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* the credentials paragraph joins the ruled-row system — a step below the h1, not a rival.
   all-grey leads, no ink highlights (Caden, Aug 22: "leave everything grey") */
.about-lead{font-size:clamp(19px,2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.45;color:var(--dim);max-width:30em}
.about-photos{padding-top:var(--space-md)}
/* mirrored lead row — body copy left, label flush right so it mirrors the other rows */
.about-row.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.about-row.flip .about-text{order:2;text-align:right}
.about-lower{padding-top:clamp(28px,3.2vw,48px);margin-top:var(--space-md);border-top:1px solid var(--line)}
.about-lower .brands{margin-top:0}
/* contact form — ruled fields in the ledger language: small dim label, large bold entry, one hairline.
   --field-rule is brighter than --line because an input boundary has to be findable (3:1 on paper).
   Rhythm: label sits tight on its entry (6px), fields are a clear step apart (--cf-gap), and the action
   stands off the fields by twice that, right-aligned to the form edge at the old contact-link scale. */
.contact-form{--field-rule:#63615C;--cf-gap:clamp(30px,3vw,44px);margin-top:96px;max-width:1100px;display:grid;gap:var(--cf-gap)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--cf-gap) clamp(28px,4vw,64px)}
.cf-field{display:block;min-width:0}
.cf-field>span{display:block;font-size:var(--fs-label);font-weight:700;line-height:1.3;color:var(--dim);transition:color var(--t-fast) var(--ease)}
.cf-field>span em{font-style:normal;font-weight:500;opacity:.75;margin-left:.35em}
.cf-field:focus-within>span{color:var(--ink)}
.cf-field input,.cf-field textarea{display:block;width:100%;margin:0;padding:6px 0 12px;background:none;border:0;border-bottom:1px solid var(--field-rule);border-radius:0;color:var(--ink);font:inherit;font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.015em;line-height:1.3;-webkit-appearance:none;appearance:none;transition:border-color var(--t-fast) var(--ease)}
/* the project field starts as one line like the others; the script grows it with the text */
.cf-field textarea{resize:none;overflow:hidden}
html:not(.js) .cf-field textarea{min-height:5.6em;overflow:auto}
.cf-field input:focus,.cf-field textarea:focus{outline:0;border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.cf-field [aria-invalid]{border-bottom-color:var(--ink)}
.cf-field input:-webkit-autofill,.cf-field textarea:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 100px var(--paper) inset;caret-color:var(--ink)}
.cf-err{display:block;margin-top:10px;font-size:var(--fs-label);font-weight:700;color:var(--ink)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-ts:empty{display:none}
.cf-foot{display:flex;flex-direction:row-reverse;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 32px;margin-top:var(--cf-gap)}
.contact-form button{background:none;border:0;padding:8px 0;margin:-8px 0;cursor:pointer;color:var(--ink);font:inherit;font-size:clamp(34px,4vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1.05;transition:color var(--t-med) var(--ease)}
.contact-form button:disabled{color:var(--dim);cursor:default}
/* hover only where a pointer can hover — on touch it sticks after the tap and reads as disabled */
@media(hover:hover){.cf-field input:hover,.cf-field textarea:hover{border-bottom-color:var(--dim)}.cf-field input:focus,.cf-field textarea:focus{border-bottom-color:var(--ink)}.contact-form button:hover{color:var(--dim)}}
.cf-status{font-size:var(--fs-fluid-sm);font-weight:700;color:var(--body-c)}
.cf-done{margin-top:96px}
.cf-done:focus{outline:0}
/* contact CTA shares the .more arrow-link language, scaled up as the page's action */
.contact .more{margin-top:96px;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.015em}

/* ---------- about: photo break + lower section ----------
   (.about-lower spacing lives with the story-block rules above) */

/* ---------- capabilities: six-step detail ---------- */
/* step rules run edge to edge like the about-page dividers (Caden, Aug 22) */
.cap-steps{list-style:none;margin:96px calc(-1*var(--pad)) 0;border-top:1px solid var(--line)}
/* text block centers against the photo so neither column floats (Caden, Aug 22) */
.cap-step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,5vw,80px);padding:72px var(--pad);border-bottom:1px solid var(--line);align-items:center}
/* photos alternate sides like the about-page story blocks; the photo keeps the wider column */
@media(min-width:821px){
  .cap-step:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .cap-step:nth-child(even) .cap-info{order:2}
}
/* icon anchored above the title — beside a wrapping h2 it floats (Caden, Aug 22) */
.cap-head{margin-bottom:30px}
.cap-head svg{width:28px;height:28px;opacity:.85;margin-bottom:20px}
.cap-head h2{font-size:clamp(26px,2.9vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
/* plain stacked service lists — no bullets, no rules (dash+hairline ledger read as cheap; Caden, Aug 22) */
.cap-info ul{list-style:none}
.cap-info ul li{padding:7px 0;color:var(--body-c);font-size:var(--fs-fluid-sm);line-height:1.5}
.cap-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* the page exits on a beat, not a whisper — statement-scale closer */
.cap-close{margin-top:110px;font-size:clamp(24px,2.9vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.cap-close a{color:var(--dim);transition:color var(--t-med) var(--ease)}
.cap-close a:hover,.cap-close a:focus-visible{color:var(--ink)}
@media(max-width:820px){
  .cap-step{grid-template-columns:1fr;gap:32px;padding:48px var(--pad)}
  .cap-steps{margin-top:64px}
}

/* ---------- lightbox — click any case image for the full-screen slideshow ---------- */
.case-photos img,.case-compare img,.about-row img,.cap-photo img{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:140;background:var(--paper);display:none}
html.lb-open .lb{display:block}
html.lb-open,html.lb-open body{overflow:hidden}
.lb>img{position:absolute;inset:96px;width:calc(100% - 192px);height:calc(100% - 192px);object-fit:contain}
.lb button{background:none;border:0;color:var(--ink);cursor:pointer;font:inherit;padding:0}
.lb-prev,.lb-next{position:absolute;top:96px;bottom:96px;width:50%;z-index:2}
.lb-prev{left:0;cursor:w-resize}
.lb-next{right:0;cursor:e-resize}
/* edge arrows — always-on indicators so click-through is discoverable (cadenfincke.com model) */
.lb-arr{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;color:var(--ink);opacity:.5;transition:opacity var(--t-fast) var(--ease);pointer-events:none}
.lb-prev .lb-arr{left:var(--pad)}
.lb-next .lb-arr{right:var(--pad)}
.lb-prev:hover .lb-arr,.lb-next:hover .lb-arr{opacity:1}
.lb .lb-close{position:absolute;top:24px;right:var(--pad);z-index:3;font-size:var(--fs-row);padding:14px;margin:-14px;transition:color var(--t-med) var(--ease)}
.lb-close:hover{color:var(--dim)}
.lb-cap{position:absolute;left:var(--pad);right:calc(var(--pad) + 6em);bottom:26px;z-index:3;font-size:var(--fs-sub);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-count{position:absolute;right:var(--pad);bottom:26px;z-index:3;font-size:var(--fs-sub);color:var(--dim)}
@media(max-width:820px){
  .lb>img{inset:64px 16px 72px;width:calc(100% - 32px);height:calc(100% - 136px)}
  .lb-prev,.lb-next{top:64px;bottom:72px}
  .lb-arr{font-size:20px}
}

/* ---------- concept-to-built (render vs photo pairs) ---------- */
.case-compare{padding:var(--space-lg) var(--pad) 0}
.case-compare .lede{font-weight:700;margin-bottom:44px}
.case-compare .cpair{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 0 56px}
.case-compare figure{margin:0;overflow:hidden}
.case-compare img{width:100%;height:auto;aspect-ratio:var(--pr,auto);object-fit:cover}
.case-compare figcaption{font-size:var(--fs-meta);font-weight:500;color:var(--dim);margin-top:14px}

/* ---------- footer ---------- */

footer{margin-top:var(--space-xl);border-top:1px solid var(--line);padding:64px var(--pad)}
.foot-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px 44px;font-size:var(--fs-meta)}
.foot-line a{display:inline-block;padding:13px 0;margin:-13px 0;color:var(--body-c);transition:color var(--t-fast) var(--ease)}
.foot-line a:hover{color:var(--ink)}
.foot-line span{color:var(--dim)}
.foot-line .foot-c{margin-left:auto}
main+footer,.strip+footer{border-top:none}
.strip+footer,.archive+footer{margin-top:0}


/* ---------- page load reveal (this-that vocabulary, measured off the live site) ---------- */
/* nav fades in once the page is paintable */
html.js nav{opacity:0}
html.js.ready nav{opacity:1;transition:padding .35s var(--ease),opacity 1.1s var(--rise) .2s}
/* page titles + hero statements: 50px rise + fade on load */
html.js .page-title>*{opacity:0;transform:translateY(50px);transition:opacity 1.15s var(--rise) .1s,transform 1.15s var(--rise) .1s}
html.js.ready .page-title>*{opacity:1;transform:none}
html.js .statement-hero,html.js .case-title{opacity:0;transform:translateY(50px)}
html.js.ready .statement-hero,html.js.ready .case-title{opacity:1;transform:none;transition:opacity 1.25s var(--rise) .15s,transform 1.25s var(--rise) .15s}
/* images bloom in — long pure-opacity fade once decoded AND in view; no movement, no zoom */
html.js main img,html.js .hero img{opacity:0;transition:opacity var(--bloom) var(--rise)}
html.js .hero img,html.js .case-hero img{transition:opacity var(--bloom-hero) var(--rise)}
html.js img.ld.vis{opacity:1}

/* ---------- reveal — one-shot animations so hover transitions stay untouched ---------- */
/* :where keeps the hide rule at zero specificity so .fade.in can win */
:where(html.js) .fade{opacity:0}
.fade.in{opacity:1;animation:rise 1.5s var(--rise) backwards;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}

/* seamless page-to-page: old page fades out before navigation */
html.leaving body{opacity:0;transition:opacity var(--t-med) var(--ease)}

/* ---------- responsive ---------- */
@media(min-width:1800px){
  .work-index .row{font-size:20px}
  .work-index .row span{font-size:18px}
  /* contact scales up with the viewport instead of floating in it */
  .contact .statement{font-size:64px;max-width:1500px}
  .contact-form{--cf-gap:52px;max-width:1400px}
  .cf-row{column-gap:80px}
  .cf-field input,.cf-field textarea{font-size:34px}
  .contact-form button{font-size:62px}
  .contact .more{font-size:34px}
  /* about rows keep pace on very wide screens */
  .about-text .lede{font-size:44px}
  .about-lead{font-size:32px}
}
@media(max-width:1100px){
  .case-head{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px} /* keep two columns — stacking here left dead space right of the body (Caden, round 33) */
}
@media(max-width:1000px){
  /* four ledger columns do not fit here: 13 cells ellipsized and the filter wrapped to an orphan row */
  .work-head{flex-direction:column;gap:28px}
  .work-filter{gap:2px 24px}
  .work-index .row{grid-template-columns:90px minmax(0,1fr) minmax(0,1.6fr)}
  .work-index .row span:nth-child(4),.work-index .row.head button:nth-child(4){display:none}
}
@media(max-width:900px){
  /* service label under the card text — beside it, the title column collapsed to ~55px in the 2-up grid */
  .card .caption{grid-template-columns:1fr}
  .card .svc{grid-column:1;grid-row:3;justify-self:start;text-align:left;max-width:none;margin-top:6px}
}
@media(max-width:820px){
  /* the whole vertical rhythm tightens — desktop voids read as empty screens on a phone */
  :root{--space-xl:110px;--space-lg:84px;--space-md:64px;--space-s:40px}
  .page-title{margin-bottom:48px}
  .strip{padding:104px var(--pad)}
  .strip .more,.page .more{margin-top:48px}
  .contact .more{margin-top:64px}
  .contact-form,.cf-done{margin-top:64px}
  .cap-close{margin-top:72px}
  nav ul{gap:20px}
  .hero .statement-hero{bottom:36px;font-size:18px;line-height:1.45;max-width:34em}
  .panel{height:72vh;height:72dvh}
  .work-grid{gap:64px 24px}
  /* mobile ledger = Special Offer style: year · project, client underneath; service lives in the filter + case page */
  .work-index .row{grid-template-columns:60px 1fr;gap:2px 16px;padding:16px 0}
  .work-index .row span:nth-child(1){grid-row:1;grid-column:1;white-space:nowrap;font-size:var(--fs-meta)}
  .work-index .row span:nth-child(2){grid-row:1;grid-column:2}
  .work-index .row span:nth-child(3){grid-row:2;grid-column:2;white-space:normal}
  .work-index .row span:nth-child(4){display:none}
  .work-index .row.head button:nth-child(n+3){display:none}
  .archive li a,.archive li>span{flex-direction:column;align-items:flex-start;gap:4px}
  .archive li span:last-child{text-align:left}
  /* single scrollable strip — wrapping breaks the ruled-grid rhythm */
  .work-head{margin-bottom:48px}
  .work-filter{gap:0 24px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--pad) 0 6px;margin:-12px 0 -12px -6px;max-width:calc(100% + 6px)}
  .work-filter::-webkit-scrollbar{display:none}
  .work-filter button{white-space:nowrap;flex-shrink:0;margin:0}
  .work-filter button:focus-visible{outline-offset:2px}
  .tier1 .go{justify-self:start;margin-top:6px}
  .case-head{grid-template-columns:1fr;gap:56px}
  .case-photos .pair,.case-photos .trio{padding:20px var(--pad)}
  .tier1 .row{grid-template-columns:1fr;gap:10px;padding:32px 0}
  .about-row,.about-row.rev,.about-row.flip{grid-template-columns:1fr;gap:16px}
  .about-text .lede{margin-bottom:0} /* stacked: heading sits with its copy, not adrift above it */
  .about-row.rev .about-photo{order:2} /* keep text-photo alternation in the single column */
  .about-row.flip .about-text{order:0;text-align:left} /* label back above the copy in the single column */
  .about-index li{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .about-sec>.lede{margin-bottom:24px}
  .brands{padding:0 0 32px}
  .duo{grid-template-columns:1fr}
  .duo .panel{height:56vh;height:56dvh}
  footer{padding:52px var(--pad)}
}
@media(max-width:700px){
  .cf-row{grid-template-columns:1fr}
  .case-photos .pair,.case-photos .trio{grid-template-columns:1fr}
  .case-compare .cpair{grid-template-columns:1fr;gap:32px}
  .case-photos .city .cpair{grid-template-columns:1fr;gap:24px}
}
/* portrait screens: shorter case hero so landscape-only heroes crop less */
@media(orientation:portrait){
  .case-hero{height:74vh;height:74dvh}
}
@media(max-width:640px){
  .work-grid{grid-template-columns:1fr;gap:56px}
  nav{padding:20px var(--pad)}
  nav .wordmark span{display:none}
  html.js .menu-btn{display:block}
  /* no JS (or fx.js failed): no overlay to open — the four links sit under the mark instead */
  html:not(.js) nav{flex-wrap:wrap;gap:6px 16px}
  nav.open .wordmark{position:relative;z-index:2} /* home link stays reachable above the overlay */
  html.js nav ul{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:0 var(--pad);background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
  html.js nav.open ul{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
  html.js nav ul a{font-size:34px;letter-spacing:.02em;color:var(--over-img);opacity:.92;padding:14px 0;margin:0}
  .foot-line{flex-direction:column;gap:10px}
  .foot-line .foot-c{margin-left:0;margin-top:14px}
}
@media(max-width:380px),(max-width:640px) and (max-height:700px){
  .hero .statement-hero{font-size:16px;line-height:1.4;bottom:28px}
}
@media(max-width:340px){
  .case-hero h1{font-size:26px}
}
/* reduce-motion is intentionally NOT honored — reference site (this-that.com) plays for everyone (client call, July 14) */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* golf.html — hidden client-approval page */
.golf-head{margin-bottom:var(--space-md)}