/* 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);
}
[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:700;font-size:16px;line-height:1.6}
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-photo 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:transform .5s var(--ease)}
nav.away{transform:translateY(-110%)}
nav.blend{color:#fff}
nav .wordmark{display:flex;align-items:center;gap:12px;font-size:14px;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:14px;font-weight:700;letter-spacing:.04em;opacity:.8;transition:opacity .22s 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}
a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.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 .22s 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}

/* ---------- page shell ---------- */
.page{padding:170px var(--pad) 0}
.page-title{font-size:14px;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:700;letter-spacing:inherit}
.page-title .count{letter-spacing:.1em}
/* work page opens with headline-scale type, like the references */
.page-title.big{margin-bottom:56px;align-items:baseline}
.page-title.big h1{font-size:clamp(30px,4vw,56px);font-weight:700;letter-spacing:-.025em;text-transform:none;color:var(--ink);line-height:1}
.page-title.big+.work-filter{margin-top:0}

/* ---------- 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}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(185deg,rgba(0,0,0,.12) 0%,transparent 38%,transparent 52%,rgba(0,0,0,.42) 100%)}
.hero .statement-hero{position:absolute;left:var(--pad);right:var(--pad);bottom:56px;color:#fff;font-size:clamp(26px,3.2vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.22;max-width:1100px;animation:heroIn 1.1s var(--rise) .2s backwards}
.hero .statement-hero span{color:rgba(255,255,255,.62)}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- 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 1.4s var(--ease)}
html.js .panel img{transition:opacity .8s var(--rise),transform 1.4s var(--ease)}
.panel:hover img{transform:scale(1)}
.panel .meta{position:absolute;left:var(--pad);bottom:30px;z-index:2;color:#fff;transition:opacity .6s var(--ease)}
.panel .meta h2{font-size:21px;font-weight:700;letter-spacing:-.015em}
.panel .meta .sub{font-size:14.5px;color:rgba(255,255,255,.72);margin-top:2px}
.panel .meta .desc{font-size:14px;opacity:0;transform:translateY(6px);margin-top:6px;max-width:520px;line-height:1.5;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.panel:hover .meta .desc,.panel:focus-visible .meta .desc{opacity:.75;transform:none}
.panel .scrim{position:absolute;inset:auto 0 0 0;height:220px;background:linear-gradient(transparent,rgba(0,0,0,.32));opacity:.75;transition:opacity .6s var(--ease)}
.panel:hover .scrim,.panel:focus-visible .scrim{opacity:1}
/* touch devices: no hover — show full meta */
@media(hover:none){
  .panel .meta .desc{opacity:.75;transform:none}
}

/* ---------- section: statement rows ---------- */
.strip{padding:180px var(--pad)}
.strip+.strip{border-top:1px solid var(--line)}
.strip .roster{margin-top:0}
.strip .lede{font-size:14px;font-weight:700;letter-spacing:0;color:var(--dim);margin-bottom:64px}
.strip .more{display:inline-block;margin-top:72px;font-size:14.5px;font-weight:700;letter-spacing:0;border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .4s var(--ease)}
.strip .more:hover{border-color:var(--ink)}

/* ---------- work index grid — 2-up, 3-up on wide screens ---------- */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:88px 32px;padding-bottom:170px}
.work-grid .card{display:block}
@media(min-width:1500px){.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;filter:saturate(.94) contrast(1.02);transition:transform 1.2s var(--ease)}
html.js .card .frame img{transition:opacity .8s var(--rise),transform 1.2s var(--ease)}
.card:hover .frame img,.card:focus-visible .frame img{transform:scale(1.045)}
.card .caption{margin-top:18px}
.card h2{font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:-.015em;line-height:1.25}
.card .sub{font-size:14.5px;color:var(--body-c);margin-top:3px}
.card .svc{font-size:13.5px;color:var(--dim);margin-top:10px;letter-spacing:0;transition:color .22s var(--ease)}
.card:hover .svc{color:var(--body-c)}
/* reactive grid — hovered card pops, siblings recede (mirrors the ledger) */
.work-grid .card{transition:opacity .35s 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:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0;color:var(--dim);transition:color .22s 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}

/* ---------- service filter — deep-linkable work subpages (?service=) ---------- */
.work-filter{display:flex;flex-wrap:wrap;gap:2px 30px;margin:-28px 0 72px}
.work-filter button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0;color:var(--dim);padding:12px 0;margin:-12px 0;transition:color .22s var(--ease)}
.work-filter button:hover,.work-filter button:focus-visible{color:var(--ink)}
.work-filter button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.work-wrap{padding-bottom:170px}
.work-index{border-top:1px solid var(--ink)}
.work-index .row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4.5fr) minmax(0,4fr) minmax(0,4.5fr);gap:20px;padding:18px 0;border-top:1px solid transparent;border-bottom:1px solid var(--line);font-size:18px;line-height:1.5;transition:opacity .35s 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:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0;color:var(--dim);text-align:left;transition:color .22s 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:15.5px}
.work-index .row span:nth-child(2){color:var(--ink);font-size:18px;font-weight:700}
.work-index a.row{transition:opacity .35s var(--ease),border-color .3s var(--ease)}
.work-index a.row:hover,.work-index a.row:focus-visible{border-color:var(--ink);z-index:1}
.work-index.hovering .row:not(.head){opacity:.6}
.work-index.hovering a.row:hover{opacity:1}
.work-index a.row:focus-visible{opacity:1}
.work-index .row.dim,.work-index .row.dim span{color:var(--dim)}

/* staggered index reveal — one-shot animation so hover transitions stay untouched */
.work-index .row{opacity:0}
.work-index.in .row{opacity:1;animation:rowIn .8s var(--rise) backwards}
@keyframes rowIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.work-index.in .row:nth-child(2){animation-delay:.04s}
.work-index.in .row:nth-child(3){animation-delay:.08s}
.work-index.in .row:nth-child(4){animation-delay:.12s}
.work-index.in .row:nth-child(5){animation-delay:.16s}
.work-index.in .row:nth-child(6){animation-delay:.2s}
.work-index.in .row:nth-child(7){animation-delay:.24s}
.work-index.in .row:nth-child(n+8){animation-delay:.28s}

/* ---------- brands index / reactive roster ---------- */
.brands{margin-top:130px}
.brands .lede{font-size:14px;font-weight:700;letter-spacing:0;color:var(--dim);margin-bottom:40px}
.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 .3s var(--ease)}
.roster li:not(:last-child)::after{content:",";margin-right:.42em}
.roster a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1px;transition:text-decoration-color .3s var(--ease)}
.roster a:hover,.roster a:focus-visible{text-decoration-color:var(--ink)}
@media(hover:hover){
  .roster:hover li{opacity:.55}
  .roster:hover li:hover{opacity:1}
}

/* ---------- process line (services) ---------- */
.process{margin-top:130px}
.process .lede{font-size:14px;font-weight:700;letter-spacing:0;color:var(--dim);margin-bottom:40px}
.process ol{list-style:none;display:flex;flex-wrap:wrap;gap:14px 0;font-size:15px;color:var(--body-c);counter-reset:step}
.process li{display:flex;align-items:baseline}
.process li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-size:10.5px;letter-spacing:.14em;color:var(--dim);margin-right:10px}
.process li+li::after{content:none}
.process li:not(:last-child){margin-right:36px}
.process .note{margin-top:36px;font-size:12.5px;color:var(--dim)}

/* ---------- archive list ---------- */
.archive{border-top:1px solid var(--line);padding:130px var(--pad) 170px}
.archive .lede{font-size:14px;font-weight:700;letter-spacing:0;color:var(--dim);margin-bottom:56px}
.archive ul{list-style:none}
.archive li{display:flex;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.archive li span:last-child{color:var(--dim);font-size:14px;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:300px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.case-hero .case-title{position:absolute;left:var(--pad);right:var(--pad);bottom:48px;color:#fff;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,.66);margin-top:10px}
.case-head{padding:110px var(--pad) 0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px}
.case-head .eyebrow{display:inline-block;font-size:14px;letter-spacing:0;color:var(--dim);margin-bottom:24px;transition:color .22s var(--ease)}
a.eyebrow:hover,a.eyebrow:focus-visible{color:var(--ink)}
.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:15px;align-self:end}
.specs div{display:flex;justify-content:space-between;gap:24px;padding:13px 0;border-bottom:1px solid var(--line)}
.specs dt{color:var(--dim)}
.specs dd{text-align:right}
.case-photos{padding:130px 0 0}
.case-photos .full{width:100%}
.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 img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.case-photos .inset{padding:24px var(--pad);max-width:1160px;margin:0 auto}
.case-photos .inset img{width:100%;height:auto;max-height:86vh;max-height:86dvh;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:130px;padding:64px var(--pad);border-top:1px solid var(--line);font-size:15px}
.case-next .label{color:var(--dim);font-size:13.5px;font-weight:700;letter-spacing:0;display:block;margin-bottom:8px}
.case-next a{font-weight:700;transition:color .4s var(--ease)}
.case-next a:hover{color:var(--dim)}
.case-next+footer{margin-top:0;border-top:none}

/* ---------- capabilities ---------- */
.tier1{display:grid;grid-template-columns:1fr;border-top:1px solid var(--ink)}
.tier1 .row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5.5fr) minmax(0,1.6fr);gap:40px;padding:44px 0;border-bottom:1px solid var(--line);transition:opacity .35s var(--ease)}
.tier1 h2{font-size:clamp(22px,2.6vw,36px);font-weight:700;letter-spacing:-.02em}
.tier1 p{color:var(--dim);font-size:15px;align-self:center;max-width:52ch}
/* service rows link into filtered work views */
.tier1 .go{align-self:center;justify-self:end;font-size:13.5px;font-weight:700;letter-spacing:0;color:var(--dim);white-space:nowrap;transition:color .22s var(--ease)}
.tier1 .go::after{content:"→";display:inline-block;margin-left:8px;transition:transform .3s var(--ease)}
.tier1 a.row:hover .go,.tier1 a.row:focus-visible .go{color:var(--ink)}
.tier1 a.row:hover .go::after,.tier1 a.row:focus-visible .go::after{transform:translateX(4px)}
@media(hover:hover){
  .tier1:hover .row{opacity:.55}
  .tier1:hover .row:hover{opacity:1}
}
.tier2{margin-top:130px}
.tier2 .lede{font-size:14px;font-weight:700;letter-spacing:0;color:var(--dim);margin-bottom:40px}
.tier2 .tags{display:flex;flex-wrap:wrap;gap:12px 36px;font-size:15px;color:var(--body-c);max-width:1250px}

/* ---------- 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)}
.prose{margin-top:96px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:48px}
.prose .label{font-size:14px;font-weight:700;letter-spacing:0;color:var(--dim)}
.prose .cols{column-count:2;column-gap:56px;max-width:1250px;color:var(--body-c)}
.prose .cols p{break-inside:avoid}
.prose .cols p+p{margin-top:20px}
.about-photo{margin-top:130px}
.about-photo img{width:100%;height:auto;max-height:82vh;max-height:82dvh;object-fit:cover}
.contact-hero{margin-top:96px}
.contact-hero a{font-size:clamp(28px,4.4vw,72px);font-weight:700;letter-spacing:-.03em;border-bottom:1px solid var(--line);transition:border-color .4s var(--ease)}
.contact-hero a:hover{border-color:var(--ink)}
.contact-list{margin-top:110px;border-top:1px solid var(--ink);max-width:900px}
.contact-list a,.contact-list div{display:flex;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);font-size:15px}
.contact-list span:first-child{color:var(--dim)}
.contact-list a:hover span:last-child{color:var(--dim)}

/* ---------- concept-to-built (render vs photo pairs) ---------- */
.case-compare{padding:130px var(--pad) 0}
.case-compare .lede{font-size:14px;font-weight:700;color:var(--dim);margin-bottom:44px}
.case-compare .cpair{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 0 56px}
.case-compare figure{margin:0}
.case-compare img{width:100%;height:auto}
.case-compare figcaption{font-size:13.5px;font-weight:700;color:var(--dim);margin-top:14px}

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

footer{margin-top:170px;border-top:1px solid var(--line);padding:120px var(--pad) 120px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:64px 80px;font-size:13.5px}
.foot-note{font-size:clamp(18px,1.7vw,24px);font-weight:700;letter-spacing:-.015em;line-height:1.45;color:var(--ink);max-width:420px}
.foot-cols{display:flex;flex-wrap:wrap;gap:48px 96px}
.foot-col{display:flex;flex-direction:column;gap:8px}
.foot-col .label{font-size:13.5px;letter-spacing:0;font-weight:700;color:var(--dim);margin-bottom:8px}
.foot-col a{color:var(--body-c);transition:color .22s var(--ease)}
.foot-col a:hover{color:var(--ink)}
.foot-col span{color:var(--dim)}
main+footer,.strip+footer{border-top:none}
.strip+footer{margin-top:0}


/* ---------- page load reveal (this-that style: one unit, long tail) ---------- */
@view-transition{navigation:auto}
html.js main{opacity:0;transform:translateY(56px)}
html.js.ready main{opacity:1;transform:none;transition:opacity .9s var(--rise),transform 1.1s var(--rise)}
/* images stay in their dark frames until decoded, then fade — kills pop-in */
html.js main img{opacity:0;transition:opacity .8s var(--rise)}
html.js main img.ld{opacity:1}

/* ---------- reveal ---------- */
.fade{opacity:0;transform:translateY(40px);transition:opacity 1s var(--rise),transform 1s var(--rise)}
.fade.in{opacity:1;transform:none}
/* card stagger is a one-shot animation — transition-delay would lag the hover dim */
.work-grid .card.in{animation:rowIn .9s var(--rise) backwards}
.work-grid .card:nth-child(2n).in{animation-delay:.07s}

/* ---------- responsive ---------- */
@media(min-width:1800px){
  .work-index .row{font-size:20px}
  .work-index .row span:nth-child(2){font-size:20px}
  .work-index .row span{font-size:16.5px}
}
@media(max-width:1100px){
  .case-head{grid-template-columns:1fr;gap:56px}
  .specs{max-width:640px}
  .prose .cols{column-count:1;max-width:62ch}
}
@media(max-width:820px){
  nav ul{gap:20px}
  .hero .statement-hero{bottom:40px}
  .panel{height:72vh;height:72dvh}
  .work-grid{grid-template-columns:1fr;gap:56px}
  /* 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:13.5px}
  .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}
  .work-index .row span:nth-child(4){display:none}
  .work-index .row.head button:nth-child(n+3){display:none}
  .process li:not(:last-child){margin-right:24px}
  .archive li{flex-direction:column;align-items:flex-start;gap:4px}
  .archive li span:last-child{text-align:left}
  .work-grid .card:nth-child(2n).in{animation-delay:0s}
  /* single scrollable strip — wrapping breaks the ruled-grid rhythm */
  .work-filter{margin:-44px 0 56px;gap:0 24px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:var(--pad)}
  .work-filter::-webkit-scrollbar{display:none}
  .work-filter button{white-space:nowrap;flex-shrink:0}
  .tier1 .go{justify-self:start;margin-top:6px}
  .case-head{grid-template-columns:1fr;gap:56px}
  .case-photos .pair{grid-template-columns:1fr;padding:20px var(--pad)}
  .case-compare .cpair{grid-template-columns:1fr;gap:32px}
  .tier1 .row{grid-template-columns:1fr;gap:10px;padding:32px 0}
  .prose{grid-template-columns:1fr;gap:24px}
  footer{padding:88px var(--pad) 88px}
  .foot-cols{gap:40px 64px}
}
@media(max-width:640px){
  nav{padding:20px var(--pad)}
  nav .wordmark span{display:none}
  nav ul{gap:18px}
  nav ul a{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-delay:0s!important}
  .fade{opacity:1;transform:none}
  .work-index .row{opacity:1;transform:none}
  html.js main{opacity:1;transform:none}
  html.js main img{opacity:1}
}