@font-face{font-family:'Archivo';src:url(fonts/archivo-var-latin.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;scrollbar-color:#3A3E45 var(--bg);scrollbar-gutter:stable;scroll-padding-top:72px}
body{margin:0;background:var(--bg);font-family:'Archivo',system-ui,sans-serif;font-stretch:100%;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
html.locked{overflow:hidden}
::selection{background:var(--heat);color:var(--bg)}
a{color:inherit}
img{display:block;max-width:100%}
:focus{outline:none}
:focus-visible{outline:3px solid var(--heat);outline-offset:3px}
p,h1,h2,h3,ul,ol,figure{margin:0}
p{text-wrap:pretty}                 /* no single word alone on a last line */
h1,h2,h3,.role,.open,.fig-label,.co,.ti{text-wrap:balance}
ul,ol{padding:0;list-style:none}

.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--text);color:var(--bg);padding:12px 18px;font-weight:700;text-decoration:none}
.skip:focus{top:8px}

/* ---------- header: stays charcoal over the white contact section ---------- */
.bar{position:sticky;top:0;z-index:40;height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 32px;background:var(--bg)}
.mark{font-weight:850;font-stretch:125%;letter-spacing:.05em;text-transform:uppercase;font-size:15px;text-decoration:none;white-space:nowrap;min-height:44px;display:flex;align-items:center}
.bar nav{display:flex;align-items:center;gap:6px}
.bar nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;font-size:15px;font-weight:600;text-decoration:none;color:var(--text);transition:background-color .15s,color .15s}
.bar nav a.sec{color:var(--muted)}
.bar nav a.sec:hover{color:var(--text)}
.bar nav a.btn{background:var(--raise)}
.bar nav a.btn:hover{background:#262A2F}
.bar nav a.btn.primary{background:var(--text);color:var(--bg)}
.bar nav a.btn.primary:hover{background:#fff}

/* ---------- 404 (404.html is served at any path, so it links this file by root-absolute URL) ---------- */
.lost{min-height:calc(100svh - 56px - 56px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;padding:0 32px}
.lost h1{font-weight:900;font-stretch:112%;text-transform:uppercase;font-size:clamp(2.2rem,7vw,5.5rem);line-height:.92;letter-spacing:-.02em;max-width:14ch;text-wrap:balance}
.lost a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:19px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--ember)}
.lost a:hover{text-decoration-color:var(--heat)}
@media (max-width:760px){.lost{padding:0 16px}}

/* ---------- hero: the work on the left; the name, a live hearth flame and the contacts on the right ---------- */
.hero{
  --pad:32px; --gap:48px;
  --fh:min(clamp(320px,calc(100svh - 56px - 32px - 56px - 48px),860px),calc((58vw - 48px) * var(--hh) / var(--hw)));
  --tw:calc(var(--fh) * var(--hw) / var(--hh) + 48px);
  --name-fs:clamp(2.2rem,calc((100vw - 2 * var(--pad) - var(--gap) - var(--tw)) / 5.1),11rem);
  display:grid;grid-template-columns:var(--tw) minmax(0,1fr);grid-template-rows:auto auto minmax(150px,1fr) auto;
  grid-template-areas:"shot name" "shot role" "shot hearth" "shot lower";
  column-gap:var(--gap);padding:16px var(--pad);min-height:calc(100svh - 56px);background:var(--bg)
}
.name{grid-area:name;align-self:start}
.name h1{font-weight:900;text-transform:uppercase;color:var(--text);font-size:var(--name-fs);line-height:.86;font-stretch:112%;letter-spacing:-.025em}
.name h1 .w{display:block;white-space:nowrap}
.role{grid-area:role;padding-top:22px;font-size:18px;font-weight:600;line-height:1.35;color:var(--text);max-width:34ch}
/* the hearth: a flame that stays lit at rest, standing on the contact block below it */
.hearth{grid-area:hearth;position:relative;min-height:0}
.hearth canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:opacity .6s;-webkit-mask-image:radial-gradient(62% 92% at 50% 100%,#000 58%,transparent 100%);mask-image:radial-gradient(62% 92% at 50% 100%,#000 58%,transparent 100%)}
/* the canvas fades in after its first frame: site.js adds .on then */
html.motion .hearth canvas:not(.on){opacity:0}
/* still flame: no script, or no WebGL */
html:not(.js) .hearth::before,html.nogl .hearth::before{content:"";position:absolute;left:14%;bottom:0;width:72%;height:100%;background:url(img/fire-tall.webp) center bottom/100% 100% no-repeat;-webkit-mask-image:radial-gradient(50% 78% at 50% 100%,#000 45%,transparent 100%);mask-image:radial-gradient(50% 78% at 50% 100%,#000 45%,transparent 100%)}
.lower{grid-area:lower;display:flex;flex-direction:column;gap:20px;background:var(--surface);padding:22px 24px 10px;box-shadow:inset 0 3px 0 rgba(255,138,43,.55)}
.line{font-size:clamp(1.5rem,2.4vw,2.5rem);font-weight:500;line-height:1.12;letter-spacing:-.01em;font-stretch:96%;max-width:18ch;text-wrap:balance}
.lower .links{display:flex;flex-direction:column}
.lower .links a{display:flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:#3A3E45}
.lower .links a:hover,.lower .links a:active{text-decoration-color:var(--heat)}
.lower .links a.mail{font-size:19px;text-decoration-color:var(--ember);overflow-wrap:anywhere}

/* ---------- tiles: hero shot and work grid; full colour always, nothing laid over the image ---------- */
.tile{display:flex;flex-direction:column;background:var(--surface);padding:24px 24px 0;text-decoration:none;color:var(--text);position:relative;min-width:0}
.frame{position:relative;display:block;width:100%}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.cap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;min-height:56px;padding:10px 0;font-size:15px;line-height:1.3;background:var(--surface)}
.cap .who b{font-weight:700}
.cap .who span{color:var(--muted)}
.cap .go{flex:none;color:var(--muted);font-weight:600;font-size:14px}
.tile:hover .cap .go,.tile:focus-visible .cap .go,.tile:active .cap .go{color:var(--heat)}
.tile:hover .cap .who b{color:#fff}
/* hover ring (Hearth): a 1px line round the mat, opacity only */
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:0 0 0 1px rgb(255 138 43 / .35);opacity:0;transition:opacity .12s}
.tile[data-quiet]::after{box-shadow:0 0 0 1px rgb(255 255 255 / .12)}
@media (hover:hover) and (pointer:fine){
  .tile:hover::after{opacity:1;transition-duration:.18s}
}
/* touch: the tile in the middle band of the viewport (site.js adds .near) */
.tile.near::after{opacity:1;transition-duration:.24s}
.tile.near[data-quiet]::after{box-shadow:0 0 0 1px rgb(255 255 255 / .14)}
.tile:active{transform:scale(.99);transition:transform .12s}

.hero-shot{grid-area:shot;align-self:start;width:var(--tw);max-width:100%}
.hero-shot .frame{height:var(--fh)}

/* ---------- work ---------- */
.work{padding:112px 32px 72px}
.sec-h{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(2.6rem,6vw,5.5rem);line-height:.9;letter-spacing:-.02em;margin:0 0 36px}
.grid{display:flex;flex-wrap:wrap;gap:16px;--row-h:350px}
.grid::after{content:"";flex:3 1 0}
.grid .tile{flex:var(--ar) 1 calc(var(--ar) * var(--row-h) + 48px)}
.grid .frame{aspect-ratio:var(--w) / var(--h)}

/* ---------- career: Kiln's staircase. Equal rise: brick heights step by 90 px, bottoms on one line ---------- */
.career{padding:120px 32px 96px}
.career-in{max-width:1600px;margin:0 auto}
.career h2{font-weight:800;font-size:clamp(1.9rem,3.5vw,3.3rem);line-height:1.06;letter-spacing:-.015em;max-width:27ch;text-wrap:balance;margin:0 0 24px}
.gauge{display:none}
.stairs{position:relative;display:grid;grid-template-columns:.85fr .95fr 1.1fr 2.5fr;gap:20px;align-items:end;padding-top:64px}
/* the heat rule along the bottom; extends as steps light (html.motion) */
.stairs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--t1),var(--t2) 30%,var(--t3) 58%,var(--t4));transform-origin:left;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.step{container-type:inline-size;display:flex;flex-direction:column;min-width:0;transition:transform 1.1s cubic-bezier(.16,.84,.24,1)}
.figwrap{position:relative;isolation:isolate;align-self:flex-start;background:var(--bg)}   /* a real backdrop, so the sweep canvas can darken-blend against the type */
.fig{font-weight:900;font-stretch:112%;line-height:.9;letter-spacing:-.02em;color:var(--tc);font-size:min(var(--fs),var(--cap));white-space:nowrap;font-variant-numeric:lining-nums;transition:color .9s ease}
.step:nth-child(1){--fs:clamp(2.8rem,4.6vw,5rem);--cap:34cqi;--bh:150px}
.step:nth-child(2){--fs:clamp(3.2rem,5.6vw,6rem);--cap:30cqi;--bh:240px}
.step:nth-child(3){--fs:clamp(3.6rem,6.2vw,6.8rem);--cap:26cqi;--bh:330px}
.step:nth-child(4){--fs:clamp(4.2rem,9.2vw,10rem);--cap:18cqi;--bh:420px}
.fig-label{margin:16px 0 30px;max-width:28ch;font-size:16px;line-height:1.4;color:var(--text)}
.brick{position:relative;isolation:isolate;height:var(--bh);background:var(--surface);padding:26px 16px 16px;display:flex;flex-direction:column;gap:2px}
.brick::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,color-mix(in srgb,var(--tc) 12%,var(--surface)),var(--surface) 62%);transition:opacity 1s}
.brick .temp{position:absolute;left:0;right:0;top:0;height:8px;background:var(--tc);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1),background-color .9s}
.co{font-weight:700;font-size:17px;line-height:1.25}
.ti{font-size:15px;line-height:1.3;color:var(--text)}
.yr{font-size:14px;color:#AEB3BA;margin-top:4px;font-variant-numeric:tabular-nums}
/* pre-build state: only while motion is allowed and the step is not lit yet */
html.motion .step:not(.hot){transform:translateY(calc(var(--bh) * .62))}
html.motion .step:not(.hot) .fig{color:var(--cold)}
html.motion .step:not(.hot) .temp{transform:scaleX(.06);background:var(--cold)}
html.motion .step:not(.hot) .brick::before{opacity:0}
html.motion .stairs::after{transform:scaleX(0)}
html.motion .stairs:has(.step:nth-child(1).hot)::after{transform:scaleX(.2)}
html.motion .stairs:has(.step:nth-child(2).hot)::after{transform:scaleX(.45)}
html.motion .stairs:has(.step:nth-child(3).hot)::after{transform:scaleX(.7)}
html.motion .stairs:has(.step:nth-child(4).hot)::after{transform:scaleX(1)}
/* the one flame behind $100M+: live canvas (site.js), or a still when there is no script or no WebGL */
canvas.flame{position:absolute;z-index:-1;left:-25%;top:-140%;width:140%;height:240%;pointer-events:none;display:block;-webkit-mask-image:radial-gradient(50% 100% at 50% 100%,#000 55%,transparent 100%),linear-gradient(0deg,transparent,#000 7%);-webkit-mask-composite:source-in;mask-image:radial-gradient(50% 100% at 50% 100%,#000 55%,transparent 100%),linear-gradient(0deg,transparent,#000 7%);mask-composite:intersect}   /* reaches up past the figure; the flame rises above it */
/* 1 px inside the box: the box's own edge sits on fractional pixels where its backdrop is half transparent, and a canvas edge there shows as a thin outline round the figure */
canvas.sweep{position:absolute;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);pointer-events:none;mix-blend-mode:darken;display:block;opacity:0}
.figwrap.lit canvas.sweep{opacity:1}
html:not(.js) .step:last-child .figwrap::before,html.nogl .step:last-child .figwrap::before{content:"";position:absolute;z-index:-1;left:0;bottom:0;width:100%;height:175%;opacity:.8;background:url(img/fire-tall.webp) center bottom/100% 100% no-repeat;-webkit-mask-image:radial-gradient(50% 78% at 50% 100%,#000 45%,transparent 100%);mask-image:radial-gradient(50% 78% at 50% 100%,#000 45%,transparent 100%)}
.facts{display:grid;grid-template-columns:1fr 1.2fr 1fr 1.4fr;gap:32px;margin-top:88px}
.facts p{font-size:16px;line-height:1.45;max-width:36ch}
.facts .k{display:block;color:var(--muted);font-size:14px;margin-bottom:6px}

/* ---------- seam and contact: a hard cut to white; the portrait is Natalie's composition built from layers ---------- */
.seam{height:3px;background:linear-gradient(90deg,var(--t1),var(--t2) 30%,var(--t3) 58%,var(--t4));transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
html.motion .seam:not(.in){transform:scaleX(0)}
.contact{--w0:46%;--w1:66%;position:relative;isolation:isolate;overflow:hidden;background:#fff;color:#0C0D0F;
  width:100%;aspect-ratio:1900 / 804;min-height:560px;max-height:860px;padding:96px 32px;display:flex;align-items:center}
.backdrop{position:absolute;inset:0;z-index:-3;background:linear-gradient(180deg,#C3C3C3 0%,#C4C4C4 35%,#B9B9B9 50%,#A2A2A2 75%,#878787 100%)}
.contact img.portrait{position:absolute;z-index:-2;right:0;top:48px;height:calc(100% - 48px);width:auto;max-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(180deg,transparent,#000 14%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(180deg,transparent,#000 14%);mask-composite:intersect;
  transition:clip-path .7s cubic-bezier(.2,.7,.2,1)}
html.motion .contact img.portrait:not(.in){clip-path:inset(100% 0 0 0)}
.fade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#fff 0,#fff var(--w0),rgb(255 255 255 / 0) var(--w1))}
.ctext{position:relative;max-width:44%;min-width:0}
.contact :focus-visible{outline:3px solid #C2410C}
.contact h2{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(2.6rem,4.4vw,4.6rem);line-height:.9;letter-spacing:-.025em;margin:0 0 28px;color:#0C0D0F;text-wrap:balance}
.contact .open{font-size:20px;color:#3A3E45;margin-bottom:28px}
.contact .mail{display:inline-block;max-width:100%;font-weight:700;font-size:clamp(1.2rem,2.8vw,2.8rem);line-height:1.15;color:#0C0D0F;text-decoration:underline;text-decoration-color:#C2410C;text-decoration-thickness:.07em;text-underline-offset:.18em;overflow-wrap:anywhere}
.contact .mail:hover,.contact .mail:active{text-decoration-color:#0C0D0F}
.contact .links{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:22px}
.contact .links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:18px;color:#0C0D0F;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:#B9BDC3}
.contact .links a:hover,.contact .links a:active{text-decoration-color:#C2410C}
.foot{height:56px;display:flex;align-items:center;padding:0 32px;background:var(--bg);color:var(--muted);font-size:14px}

/* ---------- case view ---------- */
dialog.case{padding:0;border:0;margin:auto;background:var(--surface);color:var(--text);width:min(1180px,calc(100vw - 48px));max-width:none;height:calc(100dvh - 48px);max-height:none;overflow:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(8px);
  transition:opacity .16s,transform .16s,overlay .16s allow-discrete,display .16s allow-discrete}
dialog.case[open]{opacity:1;transform:none;transition-duration:.24s}
@starting-style{dialog.case[open]{opacity:0;transform:translateY(8px)}}
dialog.case::backdrop{background:rgba(6,7,8,.92);opacity:0;transition:opacity .16s,overlay .16s allow-discrete,display .16s allow-discrete}
dialog.case[open]::backdrop{opacity:1;transition-duration:.24s}
@starting-style{dialog.case[open]::backdrop{opacity:0}}
/* no script: a deep link (#slug) shows the case as a fixed overlay; its Close link goes to #work */
dialog.case:target:not([open]){display:block;position:fixed;inset:0;z-index:60;opacity:1;transform:none;transition:none;box-shadow:0 0 0 100vmax rgba(6,7,8,.92)}
/* with script the router opens it with showModal(); :target is not recomputed by replaceState, so it must not show a closed dialog */
html.js dialog.case:target:not([open]){display:none}
dialog.case:focus,dialog.case:focus-visible,.case h2:focus{outline:none}
.case-inner{padding:0 56px 32px;position:relative}
/* the case's kiln gauge: on open it heats to this role's temperature, filling with scaleX */
.case .temp{display:block;position:relative;height:6px;background:#24272C;margin:0 -56px 44px;container-type:inline-size}
.case .temp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--bw);background:var(--tc);transform-origin:left}
.case .temp::after{content:"";position:absolute;top:-5px;left:-14px;width:28px;height:16px;transform:translateX(calc(var(--bn) * 1cqw));background:radial-gradient(closest-side,#FFF2D8,rgba(255,138,43,.55) 55%,transparent);pointer-events:none}
dialog[open] .temp::before{animation:gaugefill .4s cubic-bezier(.2,.7,.2,1) both}
dialog[open] .temp::after{animation:gaugetip .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes gaugefill{from{transform:scaleX(0)}}
@keyframes gaugetip{from{transform:translateX(0)}}
.case h2{font-weight:900;font-stretch:112%;text-transform:uppercase;font-size:clamp(2.3rem,5vw,4.6rem);line-height:.92;letter-spacing:-.02em;max-width:16ch}
.case-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font-size:18px}
.case-meta .r{font-weight:700}
.case-meta .y{color:var(--muted);font-variant-numeric:tabular-nums}
.case-body{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;margin:40px 0 48px}
.outcomes{display:flex;flex-direction:column;gap:14px}
.outcomes li{font-size:19px;line-height:1.38;font-weight:500;padding-top:14px;box-shadow:inset 0 3px 0 #2A2D33}
.blurb{font-size:17px;line-height:1.6;color:#D6D3CF;max-width:62ch}
.case-imgs{display:flex;flex-direction:column;gap:20px}
.case-imgs figure{background:var(--bg);padding:24px}
.case-imgs .frame{aspect-ratio:var(--w) / var(--h);max-height:calc(100dvh - 200px);margin:0 auto}
.case-bar{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:12px 24px;background:#111315}
.cb{display:inline-flex;flex-direction:column;justify-content:center;min-height:48px;padding:4px 14px;color:var(--text);text-decoration:none;font:inherit;background:none;border:0;cursor:pointer;line-height:1.2}
.cb .k{font-size:13px;color:var(--muted)}
.cb .v{font-weight:700;font-size:15px}
.cb.next{justify-self:end;text-align:right}
.cb.prev{justify-self:start}
.cb.close{background:var(--text);color:var(--bg);font-weight:700;padding:0 26px;font-size:15px;align-items:center;flex-direction:row}
.cb:hover .v,.cb:active .v{color:var(--heat)}
.cb.close:hover{background:#fff}

/* ---------- embers overlay (drawn by site.js) ---------- */
#embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30;display:block}

/* ---------- tablet ---------- */
@media (min-width:761px) and (max-width:1100px){
  /* the work card and the name, role and flame end together (the flame row takes the slack); the line and links
     run full width beneath both, so neither column leaves a void. The hero is as tall as that, not the viewport. */
  .hero{--gap:32px;--fh:min(clamp(320px,calc(100svh - 304px),860px),calc((50vw - 48px) * var(--hh) / var(--hw)));min-height:0;grid-template-areas:"shot name" "shot role" "shot hearth" "lower lower";row-gap:16px}
  .lower{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 40px;padding:20px 24px 12px}
  .line{flex:1 1 100%;max-width:none}
  .lower .links{flex-direction:row;flex-wrap:wrap;gap:0 32px}
  .stairs{grid-template-columns:.8fr .9fr 1fr 1.9fr;gap:14px}
  .step:nth-child(1){--fs:clamp(2.4rem,4.4vw,4rem)}
  .step:nth-child(2){--fs:clamp(2.6rem,5vw,4.4rem)}
  .step:nth-child(3){--fs:clamp(2.8rem,5.4vw,4.8rem)}
  .step:nth-child(4){--fs:clamp(3.2rem,8.4vw,7rem)}
  .step:nth-child(1){--bh:180px} .step:nth-child(2){--bh:270px} .step:nth-child(3){--bh:360px} .step:nth-child(4){--bh:450px}
  .facts{grid-template-columns:1fr 1fr}
  .contact{--w0:50%;--w1:64%}
  .ctext{max-width:50%}
}

/* ---------- contact stacks: a portrait band, then the text on white ---------- */
@media (max-width:820px){
  .contact{--band:min(120vw,680px);display:block;aspect-ratio:auto;min-height:0;max-height:none;padding:calc(var(--band) + 12px) 32px 72px}
  .backdrop{bottom:auto;height:var(--band)}
  .contact img.portrait{left:0;right:auto;top:0;width:100%;height:var(--band);object-fit:cover;object-position:50% 0;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);-webkit-mask-composite:source-over;mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-composite:add}
  .fade{bottom:auto;height:var(--band);background:linear-gradient(180deg,rgb(255 255 255 / 0) 55%,#fff 100%)}
  .ctext{max-width:none}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  .bar{padding:0 8px 0 16px}
  .mark{font-size:13px;letter-spacing:.04em}
  .bar nav a.sec{display:none}
  .bar nav a{min-height:44px;padding:0 14px;font-size:15px}
  /* the flame stands beside the role line, inside that row's own height: it adds nothing above the work */
  .hero{--name-fs:18.6vw;grid-template-columns:minmax(0,1fr) 104px;grid-template-rows:none;grid-template-areas:"name name" "role hearth" "shot shot" "lower lower";padding:14px 0 28px;min-height:0;column-gap:0;align-content:start}
  .name{margin:0 16px}
  .role{padding:12px 4px 16px 16px;font-size:15px;max-width:none}
  .hearth{margin-right:12px}
  html:not(.js) .hearth::before,html.nogl .hearth::before{height:100%}
  .hero-shot{width:100%}
  .hero-shot .frame{height:auto;aspect-ratio:var(--w) / var(--h)}
  .lower{background:none;box-shadow:none;padding:22px 16px 0}
  .line{font-size:23px;max-width:none}
  .lower .links a.mail{font-size:17px}
  .work{padding:72px 0 48px}
  .sec-h{padding:0 16px}
  .grid{gap:12px}
  .grid .tile{flex:1 1 100%}
  .grid .frame{aspect-ratio:auto;height:max(240px,calc((100vw - 48px) * var(--h) / var(--w)))}
  .career{padding:88px 16px 64px}
  /* phone: a sticky four-step kiln gauge; bars and figures grow step by step */
  .gauge{display:flex;position:sticky;top:56px;z-index:3;height:92px;align-items:flex-end;gap:6px;background:var(--bg);padding:12px 0 10px;margin:0 0 28px}
  .gauge i{flex:1;height:calc(var(--k) * 25%);background:var(--tc)}
  .gauge::before{content:"";position:absolute;z-index:-1;left:-16px;right:-16px;top:0;bottom:-8px;background:var(--bg)}   /* solid backing, full viewport width, so content passes cleanly underneath */
  html.motion .gauge i{background:#2A2D33}
  html.motion .climb:has(.step:nth-child(1).hot) .gauge i:nth-child(1),
  html.motion .climb:has(.step:nth-child(2).hot) .gauge i:nth-child(2),
  html.motion .climb:has(.step:nth-child(3).hot) .gauge i:nth-child(3),
  html.motion .climb:has(.step:nth-child(4).hot) .gauge i:nth-child(4){background:var(--tc)}
  .gauge i{transition:background-color .8s}
  .stairs{grid-template-columns:minmax(0,1fr);gap:52px;padding-top:0}
  .stairs::after{display:none}
  html.motion .step:not(.hot){transform:translateY(28px)}
  .brick{height:auto;padding:26px 0 0;background:none}
  .brick::before{display:none}
  .brick .temp{right:auto;width:var(--bw)}
  .step:nth-child(1){--fs:15vw;--cap:100cqi}
  .step:nth-child(2){--fs:16.5vw;--cap:100cqi}
  .step:nth-child(3){--fs:17.5vw;--cap:100cqi}
  .step:nth-child(4){--fs:19vw;--cap:100cqi}
  html:not(.js) .step:last-child .figwrap::before,html.nogl .step:last-child .figwrap::before{left:0;width:100%;height:140%}
  canvas.flame{left:-8%;top:-90%;width:108%;height:190%}
  .facts{grid-template-columns:1fr;gap:22px;margin-top:64px}
  .contact .links{gap:8px 24px}
  .foot{padding:0 16px}
  .contact{padding-left:16px;padding-right:16px}   /* the phone gutter, the header mark's x */
  dialog.case{width:100vw;height:100dvh;max-height:100dvh}
  .case-inner{padding:0 16px 24px}
  .case .temp{margin:0 -16px 32px}
  .case-body{grid-template-columns:1fr;gap:28px;margin:28px 0 32px}
  .outcomes li{font-size:17px}
  .case-imgs figure{padding:16px;margin:0 -16px}
  .case-bar{padding:8px;grid-template-columns:1fr auto 1fr}
  .cb{padding:4px 8px}
  .cb.close{padding:0 20px}
  .cb .v{font-size:14px;max-width:24vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:370px){
  .bar{gap:6px;padding:0 6px 0 12px}
  .mark{font-size:11px;letter-spacing:.03em}
  .bar nav{gap:4px}
  .bar nav a{padding:0 10px;font-size:14px}
  .hero{grid-template-columns:minmax(0,1fr) 84px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}