/* crotzer.co site styles (Cobalt). Generated from the approved concept, then extended for Noggin content. */
/* Layout: one dark editorial page. Name hero, discipline line, pinned horizontal gallery that retints per project, strategy lens, live build demos, notes, art wall, about, contact. */
:root{
  --bg:#f3f2ef; --raise:#ffffff; --band:#e9e7e2; --ink:#171614; --dim:#6a655d; --line:rgba(23,22,20,.13);
  --accent:#94692a; --on-accent:#ffffff; --blueprint:#93c3e6; --blue-ink:#2e6da3;
  --ok:#2f7d55; --err:#b3261e; --glow1:#e6dccb; --glow2:#ebe8e2; --frame:#e4e1da; --frame-2:#d6d2c9;
  --ink-2:color-mix(in srgb,var(--ink) 78%,transparent);
  --f-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-poster:"Anybody","Arial Narrow",Impact,sans-serif;
  --f-realm:"Pirata One","Old English Text MT",Georgia,serif;
  --f-crest:"Cinzel",Georgia,serif;
  --f-trade:"Archivo Black","Arial Black",Impact,sans-serif;
  --gut:clamp(16px,4vw,48px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e0d0c; --raise:#171614; --band:#090908; --ink:#eee9df; --dim:#9b948a; --line:rgba(238,233,223,.13);
  --accent:#c9a66b; --on-accent:#1a1408; --blue-ink:#93c3e6;
  --ok:#6fcf9c; --err:#ff8a7a; --glow1:#2b2219; --glow2:#1b1813; --frame:#1a1917; --frame-2:#25231f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e0d0c; --raise:#171614; --band:#090908; --ink:#eee9df; --dim:#9b948a; --line:rgba(238,233,223,.13);
  --accent:#c9a66b; --on-accent:#1a1408; --blue-ink:#93c3e6;
  --ok:#6fcf9c; --err:#ff8a7a; --glow1:#2b2219; --glow2:#1b1813; --frame:#1a1917; --frame-2:#25231f; color-scheme:dark}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gut)}
a{color:inherit}
h1,h2,h3,h4,h5{margin:0;text-wrap:balance;font-weight:400}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.label{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.standin{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px dashed var(--line);padding:4px 8px;border-radius:3px}
.big{font-family:var(--f-display);font-weight:700;font-size:clamp(42px,6vw,88px);line-height:.95;letter-spacing:-.035em}
.big em,.about h2 em{font-style:normal;color:var(--accent)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(var(--bg),color-mix(in srgb,var(--bg) 0%,transparent))}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px}
.brand{font-family:var(--f-display);font-weight:800;font-size:21px;letter-spacing:-.03em;text-decoration:none}
.links{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:500}
.links a{text-decoration:none;color:var(--dim)}
.links a:hover{color:var(--ink)}
.theme{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.theme svg{width:17px;height:17px}
.links .pill{color:var(--ink);border:1px solid var(--line);padding:8px 16px;border-radius:999px}
@media (max-width:860px){.links a:not(.pill){display:none}}

/* hero */
.hero{position:relative;background:radial-gradient(55% 70% at 85% 15%,var(--glow1) 0%,transparent 65%),radial-gradient(50% 60% at 0% 100%,var(--glow2) 0%,transparent 60%),var(--bg);border-bottom:1px solid var(--line)}
.hero-in{position:relative;padding-block:clamp(110px,12vw,150px) clamp(48px,6vw,88px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center}
.hero-copy{display:grid;gap:clamp(20px,2.4vw,30px);justify-items:start;min-width:0}
.name{font-family:var(--f-display);font-weight:800;font-size:clamp(52px,8vw,118px);line-height:.9;letter-spacing:-.045em}
.name span{display:block;color:var(--accent)}
.statement{font-size:clamp(19px,1.6vw,23px);line-height:1.5;color:var(--ink-2);margin:0;max-width:40ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.years{display:flex;gap:clamp(24px,4vw,48px);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:clamp(18px,2vw,26px);margin-top:clamp(4px,1vw,12px);justify-self:stretch}
.years div{display:flex;flex-direction:column;gap:4px}
.years strong{font-family:var(--f-display);font-weight:700;font-size:44px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--accent)}
.years span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);line-height:1.4}
.portrait{position:relative;margin:0;aspect-ratio:4/5;max-width:100%;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,var(--frame-2),var(--frame) 60%);box-shadow:0 40px 80px -48px rgba(0,0,0,.55)}
.portrait svg{position:absolute;inset:auto 0 0;width:100%;height:auto;display:block;color:var(--ink);opacity:.09}
.portrait figcaption{position:absolute;left:16px;right:16px;bottom:16px;display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;border-radius:4px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(8px);font-size:13px}
.portrait figcaption b{font-weight:600}
.portrait figcaption span{color:var(--dim)}
.portrait .standin{position:absolute;top:16px;left:16px}
@media (max-width:860px){.hero-in{grid-template-columns:1fr}.portrait{max-width:440px;width:100%}}

/* disciplines */
.disc{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;padding-block:26px;border-bottom:1px solid var(--line)}
.disc span{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* horizontal work gallery */
.hs{position:relative}
.hs-pin{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,32px);overflow:hidden;background-color:var(--tint,var(--bg));transition:background-color 1s ease}
.hs-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.hs-head p{margin:12px 0 0;color:var(--ink-2);max-width:42ch}
.counter{font-size:13px;color:var(--dim);text-align:right}
.counter b{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;font-size:40px;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.track{display:flex;gap:clamp(20px,3vw,44px);width:max-content;padding-inline:max(16px,calc((100vw - 1240px)/2 + var(--gut)));will-change:transform}
.card{display:block;text-decoration:none;color:inherit;flex:none;width:min(42vw,calc((100dvh - 330px)*1.333),640px);min-width:300px;margin:0}
.poster{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:6px;overflow:hidden;container-type:inline-size;box-shadow:0 40px 80px -40px #000d}
.poster>*{position:absolute}
.fill{inset:0;width:100%;height:100%}
.grain{inset:0;pointer-events:none;opacity:.3;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.card .cap{display:flex;width:100%;justify-content:space-between;gap:12px;align-items:baseline;margin-top:16px}
.card .cap b{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.02em}
.card .cap span{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:right}
.hs-foot{display:flex;align-items:center;gap:16px}
.bar{flex:1;height:1px;background:var(--line);position:relative}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent)}
.hint{font-size:12px;font-weight:500;color:var(--dim)}
@media (max-width:820px){
  .hs{height:auto!important}
  .hs-pin{position:relative;height:auto;padding-block:84px 40px}
  .track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;padding-bottom:16px;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .card{width:84vw;min-width:0;scroll-snap-align:center}
}

/* poster art (stand-ins for real shots) */
.snow{inset:-180px 0 0;background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 80px 120px,#fff,transparent),radial-gradient(2px 2px at 150px 60px,#dff4ff,transparent),radial-gradient(1px 1px at 120px 170px,#fff,transparent);background-size:180px 180px;opacity:.6}
.fb{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqi;padding:6cqi;text-align:center}
.fb-nav{position:absolute;top:0;left:0;right:0;display:flex;gap:2cqi;align-items:center;padding:3cqi 4cqi;border-bottom:1px solid #9fdcff22}
.fb-nav b{font-family:var(--f-crest);color:#cfefff;font-size:3cqi;margin-right:auto}
.fb-nav span{width:7cqi;height:.8cqi;background:#9fdcff44;border-radius:2px}
.fb-nav em{font-style:normal;font-family:var(--f-crest);font-weight:700;font-size:1.7cqi;color:#04101b;background:#bfe9ff;padding:1cqi 2cqi;border-radius:3px;letter-spacing:.1em;text-transform:uppercase}
.fb-title{font-family:var(--f-crest);font-weight:700;font-size:10cqi;line-height:.92;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(180deg,#fff,#a8e0ff 50%,#2f86c9);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 2cqi #6cc8ff66)}
.fb-sub{font-family:var(--f-crest);font-size:2.1cqi;letter-spacing:.3em;color:#9fdcff;text-transform:uppercase}
.fb-cd{display:flex;gap:1.5cqi}
.fb-cd span{border:1px solid #9fdcff55;background:#0a2238aa;padding:1cqi 1.8cqi;font-family:var(--f-crest);font-size:1.7cqi;color:#9fdcff;text-transform:uppercase;letter-spacing:.1em}
.fb-cd b{font-size:3.6cqi;color:#fff;display:block;letter-spacing:0}
.fb-btn{font-family:var(--f-crest);font-weight:700;font-size:1.9cqi;letter-spacing:.2em;text-transform:uppercase;color:#04101b;background:linear-gradient(#e6f7ff,#7cc8f2);padding:1.6cqi 3.4cqi;border-radius:3px;box-shadow:0 0 3cqi #6cc8ff88}
.ball{width:70cqi;height:70cqi;right:-18cqi;top:-8cqi;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e8e8e0 45%,#a9a99c)}
.ball::after{content:"";position:absolute;inset:0;border-radius:50%;background-image:radial-gradient(circle,#0000002e 28%,transparent 33%);background-size:4.2cqi 4.2cqi;mix-blend-mode:multiply}
.sg{left:7cqi;bottom:9cqi}
.sg::before{content:"";display:block;width:18cqi;height:1.1cqi;background:linear-gradient(90deg,#c8102e 33%,#fff 33% 66%,#1f3fa3 66%);margin-bottom:2.4cqi}
.sg-1{font-family:var(--f-trade);font-size:13cqi;line-height:.85;color:#f6f3e6;letter-spacing:-.04em;text-transform:uppercase;transform:skewX(-9deg);text-shadow:.7cqi .7cqi 0 #0a2413}
.sg-2{font-family:var(--f-body);font-weight:700;font-size:3.2cqi;letter-spacing:.55em;text-transform:uppercase;color:#9fd18b;margin-top:1.6cqi}
.rs-w{left:0;right:0;bottom:7cqi;text-align:center;font-family:var(--f-poster);font-variation-settings:"wdth" 150,"wght" 900;font-size:7.4cqi;text-transform:uppercase;transform:skewX(-10deg);background:linear-gradient(180deg,#fff,#b9d0ff 48%,#3d64d8 52%,#dbe6ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .5cqi 0 #050b24)}
.stars{inset:0;background-image:radial-gradient(1px 1px at 30px 40px,#fff,transparent),radial-gradient(1.5px 1.5px at 110px 90px,#e6dcff,transparent),radial-gradient(1px 1px at 170px 20px,#fff,transparent),radial-gradient(1px 1px at 60px 150px,#fff,transparent);background-size:200px 180px;opacity:.8}
.planet{width:40cqi;height:40cqi;right:-8cqi;bottom:-14cqi;border-radius:50%;background:radial-gradient(circle at 30% 30%,#c4b0ff,#6b45e0 45%,#2a1180)}
.planet::after{content:"";position:absolute;left:-14cqi;right:-14cqi;top:44%;height:10cqi;border-radius:50%;border:1.2cqi solid #e2d6ff88;transform:rotate(-14deg)}
.ap{inset:0;padding:6cqi;display:flex;flex-direction:column;gap:3.4cqi}
.ap h4{font-family:var(--f-poster);font-variation-settings:"wdth" 100,"wght" 800;font-size:5.2cqi;line-height:1;color:#fff;max-width:62%}
.ap-row{display:flex;gap:2cqi;max-width:80%}
.ap-c{flex:1;background:#ffffff12;border:1px solid #ffffff24;border-radius:1.4cqi;padding:2.4cqi;display:grid;gap:1.1cqi}
.ap-c small{font-size:1.7cqi;color:#c9bbff}
.ap-c b{font-family:var(--f-poster);font-variation-settings:"wdth" 80,"wght" 900;font-weight:400;font-size:5cqi;color:#fff;line-height:1}
.ap-c i{height:.7cqi;background:#ffffff24;border-radius:2px}
.ap-c em{font-style:normal;font-weight:700;font-size:1.7cqi;text-align:center;padding:1.2cqi;border-radius:1cqi;background:#ffffff1c;color:#fff}
.ap-c.hot{background:linear-gradient(180deg,#7b4bff,#4b23c9);border-color:#c9bbff;transform:translateY(-1.5cqi);box-shadow:0 2cqi 4cqi -1cqi #4b23c9}
.ap-c.hot em{background:#fff;color:#2a0f6b}
.slash{left:-10%;width:120%;height:9cqi;top:44%;background:linear-gradient(90deg,transparent,#8a0e12 20%,#d0161d 50%,#8a0e12 80%,transparent);transform:rotate(-12deg);filter:url(#grunge)}
.vz{inset:0;display:grid;place-items:center;font-family:var(--f-realm);font-size:24cqi;color:#e9e2d2;text-shadow:0 0 4cqi #b0101088;filter:url(#grunge)}
.vz-sub{left:0;right:0;bottom:8cqi;text-align:center;font-family:var(--f-crest);font-size:2cqi;letter-spacing:.5em;color:#b9a9a0;text-transform:uppercase}
.bulbs{inset:3cqi;border:1.3cqi dotted #fff6c2;border-radius:3cqi;opacity:.85}
.slots{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.4cqi}
.slots-w{font-family:var(--f-trade);font-size:9.6cqi;line-height:.9;color:#3a0f7a;text-transform:uppercase;letter-spacing:-.03em;text-shadow:0 .5cqi 0 #fff,0 1.1cqi 0 #2a0b55,0 1.8cqi 2cqi #0005;text-align:center}
.reels{display:flex;gap:2cqi}
.reel{width:15cqi;height:18cqi;background:linear-gradient(#fff,#efe6ff);border-radius:2cqi;display:grid;place-items:center;font-family:var(--f-trade);font-size:13cqi;line-height:1;color:#e0182d;box-shadow:inset 0 -1.2cqi 0 #d7c9f5,0 1cqi 0 #3a0f7a}
.reel.s{color:#7a2ff0}
.tt{inset:0;display:flex;flex-direction:column}
.tt-head{padding:3.6cqi 5cqi 3cqi;background:linear-gradient(180deg,#3a0b0b,#160505);border-bottom:1px solid #e8b04a33;display:flex;align-items:center;justify-content:space-between}
.tt-head b{font-family:var(--f-crest);font-weight:700;font-size:4.6cqi;letter-spacing:.14em;color:#e8b04a}
.tt-head span{display:flex;gap:1.5cqi}
.tt-head span i{width:8cqi;height:2.6cqi;border-radius:2px;background:#ffffff16}
.tt-list{padding:3cqi 5cqi;display:grid;gap:1.6cqi}
.tt-row{display:grid;grid-template-columns:5cqi 1fr auto;gap:2.4cqi;align-items:center;background:#1c0909;border:1px solid #ffffff0f;border-radius:1cqi;padding:1.8cqi 2.4cqi}
.tt-row i{width:5cqi;height:5cqi;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff6a4a,#7a1010)}
.tt-row b{font-weight:600;font-size:2.3cqi;color:#f1e3d3;display:block;line-height:1.2}
.tt-row small{font-size:1.7cqi;color:#a98d80}
.tt-row em{font-style:normal;font-size:1.8cqi;color:#e8b04a}
.cl{left:-10%;width:120%;height:2.6cqi;background:linear-gradient(90deg,transparent,#e3141b 25% 75%,transparent);transform:rotate(-24deg)}
.ft{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqi}
.ft small{font-size:2.6cqi;letter-spacing:.6em;color:#e3141b;font-weight:700}
.ft b{font-family:var(--f-poster);font-variation-settings:"wdth" 150,"wght" 900;font-weight:400;font-size:12.5cqi;line-height:.9;color:#f2f2f2;text-transform:uppercase;transform:skewX(-10deg);text-shadow:.9cqi .9cqi 0 #e3141b,1.8cqi 1.8cqi 0 #0b0b0b}

/* strategy lens */
.xr{padding-block:clamp(100px,12vw,160px) 0}
.xr-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(28px,4vw,44px)}
.xr-head .big em{display:block;color:var(--blue-ink)}
.xr-head p{margin:0 0 18px;color:var(--ink-2);max-width:44ch}
.tgl{font-family:var(--f-body);font-weight:600;font-size:14px;border:1px solid var(--line);color:var(--ink);background:transparent;padding:10px 18px;border-radius:999px;cursor:pointer}
.tgl[aria-pressed="true"]{background:var(--blueprint);border-color:var(--blueprint);color:#0a1f3a}
@media (max-width:860px){.xr-head{grid-template-columns:1fr}}
.xr-frame{position:relative;border-radius:8px;overflow:hidden;container-type:inline-size;box-shadow:0 50px 100px -50px #000;touch-action:pan-y;--lx:70%;--ly:60%;--lr:0px}
.pg.blue{position:absolute;inset:0;clip-path:circle(var(--lr) at var(--lx) var(--ly));background-color:#0a2346;background-image:linear-gradient(#93c3e614 1px,transparent 1px),linear-gradient(90deg,#93c3e614 1px,transparent 1px);background-size:2.5cqi 2.5cqi}
.lens-ring{position:absolute;left:var(--lx);top:var(--ly);width:calc(var(--lr)*2);height:calc(var(--lr)*2);transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid var(--blueprint);pointer-events:none;transition:opacity .4s}
.xr-frame.full .lens-ring{opacity:0}
.lp{position:relative;padding:2.6cqi 4cqi 3.2cqi;display:grid;gap:2.6cqi;background:radial-gradient(60% 80% at 85% 20%,#dce8ff,transparent),#f6f8fc;color:#0d1b2a;font-family:var(--f-body)}
.lp-nav{display:flex;align-items:center;gap:3cqi;font-weight:600;font-size:1.45cqi;color:#41526b}
.lp-logo{display:flex;align-items:center;gap:1cqi;font-family:var(--f-trade);font-size:2cqi;color:#0d1b2a;margin-right:auto;letter-spacing:-.02em}
.lp-logo i{width:3cqi;height:3cqi;border-radius:.8cqi;background:#0b5bd3;position:relative}
.lp-logo i::after{content:"";position:absolute;left:1.05cqi;top:.7cqi;width:.9cqi;height:1.5cqi;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:#fff}
.lp-links{display:flex;gap:2.6cqi}
.lp-tel{font-family:var(--f-trade);font-size:2cqi;color:#0b5bd3}
.lp-hero{display:grid;grid-template-columns:1.25fr .85fr;gap:6cqi;align-items:center;padding-block:1.5cqi}
.lp-copy{display:grid;justify-items:start;gap:1.9cqi}
.lp-eye{font-weight:700;font-size:1.4cqi;letter-spacing:.08em;text-transform:uppercase;color:#0b5bd3;display:inline-flex;gap:.8cqi;align-items:center}
.lp-eye::before{content:"";width:.9cqi;height:.9cqi;border-radius:50%;background:#18a957;box-shadow:0 0 0 .45cqi #18a95733}
.lp-h{font-family:var(--f-trade);font-weight:400;font-size:6.4cqi;line-height:.95;letter-spacing:-.04em}
.lp-h em{font-style:normal;color:#0b5bd3}
.lp-p{font-weight:500;font-size:1.9cqi;line-height:1.45;color:#41526b;margin:0;max-width:34ch}
.lp-ctas{display:flex;gap:1.4cqi}
.lp-btn{font-family:var(--f-trade);font-size:1.8cqi;padding:1.6cqi 2.6cqi;border-radius:1cqi;background:#ff6b1a;color:#fff;box-shadow:0 1.2cqi 2.4cqi -1.2cqi #ff6b1aaa}
.lp-btn.ghost{background:#fff;color:#0d1b2a;box-shadow:inset 0 0 0 .25cqi #0d1b2a}
.lp-proof{font-weight:600;font-size:1.6cqi;background:#fff;border:1px solid #d6dfeb;border-radius:999px;padding:1cqi 1.8cqi}
.lp-proof b{color:#e8a500;letter-spacing:.1em}
.lp-form{background:#fff;border-radius:1.6cqi;padding:2.6cqi;display:grid;gap:1.2cqi;box-shadow:0 3cqi 6cqi -3cqi #0d1b2a55}
.lp-form>b{font-family:var(--f-trade);font-weight:400;font-size:2.2cqi;letter-spacing:-.02em}
.lp-f{border:.18cqi solid #d6dfeb;border-radius:.8cqi;padding:1.3cqi 1.4cqi;font-weight:500;font-size:1.6cqi;color:#8a97ab}
.lp-go{background:#0b5bd3;color:#fff;font-family:var(--f-trade);font-size:1.8cqi;text-align:center;padding:1.5cqi;border-radius:.8cqi}
.lp-trust{display:flex;justify-content:space-between;gap:2cqi;border-top:1px solid #d6dfeb;padding-top:2.2cqi;font-weight:600;font-size:1.5cqi;color:#41526b}
.lp-trust span::before{content:"✓ ";color:#0b5bd3}
.blue .lp,.blue .lp *{color:#b3d6f0!important;-webkit-text-fill-color:#b3d6f0;background:transparent!important;box-shadow:none!important;border-color:#93c3e655!important;text-shadow:none!important}
.blue .lp *::before,.blue .lp *::after{background:transparent!important;box-shadow:none!important;outline:1px solid #93c3e688}
.blue .bx{position:relative;outline:.14cqi dashed #93c3e6bb;outline-offset:.5cqi}
.blue .lp .note{position:absolute;z-index:3;width:max-content;max-width:24cqi;font-family:var(--f-body);font-weight:600;font-size:1.3cqi;line-height:1.35;letter-spacing:0;text-transform:none;font-style:normal;text-align:left;white-space:normal;background:#efe2c4!important;color:#231a08!important;-webkit-text-fill-color:#231a08;padding:.7cqi 1cqi;border-radius:.4cqi;outline:0}
.blue .lp .note::before,.blue .lp .note::after{display:none}
.note.below{top:calc(100% + 1.4cqi);left:0}
.note.below-r{top:calc(100% + 1.4cqi);right:0}
.note.right{left:calc(100% + 1.8cqi);top:50%;transform:translateY(-50%)}
@container (max-width:640px){
  .lp{padding:4cqi 5cqi 5cqi;gap:4cqi}
  .lp-links,.lp-trust,.lp-form{display:none}
  .lp-hero{grid-template-columns:1fr;padding-block:2cqi}
  .lp-nav{font-size:3cqi}.lp-logo,.lp-tel{font-size:3.4cqi}.lp-logo i{width:5cqi;height:5cqi}
  .lp-eye{font-size:2.7cqi}.lp-h{font-size:11cqi}.lp-p{font-size:3.8cqi}
  .lp-btn{font-size:3.4cqi;padding:2.8cqi 4cqi}.lp-proof{font-size:3cqi;padding:1.8cqi 3cqi}
  .lp-copy{gap:3.4cqi}
  .blue .lp .note{font-size:2.6cqi;max-width:44cqi;padding:1.2cqi 1.8cqi}
  .note.right{left:auto;right:0;top:calc(100% + 2cqi);transform:none}
}

/* builds */
.builds{padding-block:clamp(100px,12vw,160px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.sec-head p{color:var(--ink-2);max-width:44ch;margin:14px 0 0}
.build{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.build+.build{margin-top:clamp(64px,8vw,120px)}
.build.flip .demo{order:2}
@media (max-width:860px){.build{grid-template-columns:1fr}.build.flip .demo{order:0}}
.btxt h3{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,3.2vw,46px);line-height:1;letter-spacing:-.03em;margin:.4em 0 .8em}
.btxt dl{display:grid;gap:18px;margin:0}
.btxt dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.btxt dd{margin:4px 0 0;color:var(--ink-2);max-width:52ch}
.demo{border-radius:8px;overflow:hidden;position:relative}
.jvt{aspect-ratio:4/3;max-width:100%;background:#ece9df;container-type:inline-size;user-select:none}
.map{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;width:44px;height:52px;transform:translate(-50%,-100%);cursor:grab;touch-action:none;z-index:3;display:grid;justify-items:center;outline-offset:6px}
.pin:active{cursor:grabbing}
.pin::before{content:"";width:30px;height:30px;margin-top:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#c8102e;border:3px solid #fff;box-shadow:0 6px 14px #0005}
.pin span{position:absolute;top:-14px;font-size:11px;font-weight:600;background:#17201b;color:#fff;padding:2px 8px;border-radius:999px}
.hintchip{position:absolute;left:3%;top:4%;background:#17201be6;color:#fff;font-size:12px;font-weight:500;padding:6px 11px;border-radius:999px;z-index:2}
.phone{position:absolute;right:4cqi;top:50%;transform:translateY(-50%);width:31cqi;aspect-ratio:9/17;background:#0d1110;border-radius:4.4cqi;padding:1.3cqi;box-shadow:0 3cqi 6cqi -2cqi #0007;z-index:2}
.scr{background:#fff;height:100%;border-radius:3.2cqi;padding:3.4cqi 2.4cqi 2.6cqi;display:flex;flex-direction:column;gap:1.6cqi;color:#17201b}
.scr small{font-weight:700;font-size:1.5cqi;letter-spacing:.1em;text-transform:uppercase;color:#7a857f}
.status{font-weight:600;font-size:1.75cqi;line-height:1.3;padding:1.4cqi 1.6cqi;border-radius:1.4cqi;transition:background .3s,color .3s}
.scr h5{font-family:var(--f-trade);font-weight:400;font-size:3.1cqi;line-height:1.05;letter-spacing:-.02em}
.fld{height:4.4cqi;border:.3cqi solid #e2e7e4;border-radius:1cqi;transition:opacity .3s}
.go{font-family:var(--f-trade);font-size:1.8cqi;text-align:center;padding:1.8cqi;border-radius:1.2cqi;margin-top:auto;transition:background .3s,color .3s}
.scr[data-state="locked"] .status{background:#fbeee9;color:#a33a22}
.scr[data-state="locked"] .fld{opacity:.4}
.scr[data-state="locked"] .go{background:#e3e6e4;color:#8b948f}
.scr[data-state="open"] .status{background:#e3f4ea;color:#1f7a4f}
.scr[data-state="open"] .go{background:#c8102e;color:#fff}
.tya{background:linear-gradient(135deg,#141a36,#2a3577);padding:clamp(14px,2.6vw,28px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:start}
@media (max-width:560px){.tya{grid-template-columns:1fr}}
.ctrl{background:#fff;border-radius:10px;padding:12px;display:grid;gap:2px;color:#1d2440}
.ctrl>b{font-size:13px;padding:4px 6px 10px;border-bottom:1px solid #eceef5;display:flex;justify-content:space-between;align-items:center}
.ctrl>b span{font-weight:600;font-size:11px;color:#18a957;background:#e5f6ec;padding:2px 8px;border-radius:999px}
.sw{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 6px;border:0;background:none;font:600 14px var(--f-body);color:#1d2440;text-align:left;cursor:pointer;border-radius:8px;width:100%}
.sw small{display:block;font-weight:400;color:#6a7392;font-size:12px}
.sw i{width:36px;height:21px;border-radius:999px;background:#3a5bd9;position:relative;flex:none;transition:background .25s}
.sw i::after{content:"";position:absolute;top:3px;left:18px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .25s}
.sw[aria-checked="false"] i{background:#cfd4e3}
.sw[aria-checked="false"] i::after{left:3px}
.mini{background:#fff;border-radius:10px;overflow:hidden;color:#16204a}
.mini-bar{display:flex;gap:5px;align-items:center;padding:8px 10px;background:#eef0f6}
.mini-bar i{width:8px;height:8px;border-radius:50%;background:#cfd4e3}
.mini-bar span{margin-left:8px;font-size:11px;font-weight:500;color:#6a7392}
.mini-ann{background:#ffcc33;font-weight:700;font-size:12px;padding:8px 12px;text-align:center}
.mini-hero{padding:16px 16px 12px;display:grid;gap:8px}
.mini-logo{font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#2b3fa8}
.mini-hero h5{font-family:var(--f-trade);font-weight:400;font-size:22px;line-height:1.05;letter-spacing:-.02em}
.mini-hero p{font-size:13px;color:#5a6386;margin:0;line-height:1.45}
.mini-cta{justify-self:start;font-weight:700;font-size:13px;padding:9px 14px;border-radius:8px;background:#2b3fa8;color:#fff;transition:background .25s,color .25s}
.mini-cta.closed{background:#e4e7f1;color:#7d84a0}
.mini-ev{padding:4px 16px 16px;display:grid;gap:6px}
.ev{display:flex;gap:10px;align-items:center;font-weight:600;font-size:13px}
.ev b{width:42px;text-align:center;background:#f1f3fa;border-radius:6px;padding:4px 0;font-size:10px;line-height:1.2;color:#2b3fa8}
.fill-note{margin-top:18px}

/* notes */
.notes{padding-block:clamp(100px,12vw,160px) 0}
.note-row{display:grid;grid-template-columns:150px minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:baseline;padding-block:clamp(24px,3vw,36px);border-top:1px solid var(--line);text-decoration:none}
.note-row:last-child{border-bottom:1px solid var(--line)}
.nt{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3vw,42px);line-height:1.05;letter-spacing:-.03em}
.nx{color:var(--dim);font-size:16px}
@media (max-width:860px){.note-row{grid-template-columns:1fr;gap:10px}}

/* after hours */
.after{margin-top:clamp(100px,12vw,160px);padding-block:clamp(80px,10vw,140px);background:var(--band);border-block:1px solid var(--line);overflow:hidden}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);align-items:start}
.col{display:grid;gap:clamp(12px,1.6vw,22px);will-change:transform}
.col:nth-child(2){margin-top:clamp(40px,8vw,120px)}
.art{margin:0;position:relative;border-radius:4px;overflow:hidden;background:#111}
.art svg{display:block;width:100%;height:auto}
.art figcaption{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:linear-gradient(transparent,#000d);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#e9e3d8}
.love{background:none;border:0;color:#e9e3d8;font:600 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;display:flex;gap:6px;align-items:center;padding:4px}
.love[aria-pressed="true"]{color:var(--accent)}
@media (max-width:700px){.cols{grid-template-columns:1fr 1fr}.col:nth-child(3){grid-column:1/-1;grid-template-columns:1fr 1fr}.col{transform:none!important}}

/* about */
.about{padding-block:clamp(100px,12vw,160px) 0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.about h2{font-family:var(--f-display);font-weight:700;font-size:clamp(36px,4.4vw,66px);line-height:1;letter-spacing:-.035em}
.about p{color:var(--ink-2);max-width:58ch;margin:0 0 16px}
@media (max-width:860px){.about{grid-template-columns:1fr}}

/* shared page pieces */
.btn-pill{display:inline-block;font:600 14px var(--f-body);padding:12px 20px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.btn-pill.solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.textlink{color:var(--accent);font-weight:600;text-decoration:none}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink-2);max-width:46ch;margin:18px 0 0}
.page-top{padding-block:clamp(110px,12vw,150px) 0}
.back{display:inline-block;margin-bottom:28px;font-size:14px;font-weight:600;color:var(--dim);text-decoration:none}
.ph,.ph-inline{color:var(--dim)}
.ph{border-left:2px dashed var(--line);padding-left:14px}
.ph-chip{border-style:dashed!important;color:var(--dim)}
.about .btn-pill{margin-top:8px}

/* build cards */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:960px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.bgrid{grid-template-columns:1fr}}
.bcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--raise);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.bcard .bc-body{padding:18px 20px 22px;display:grid;gap:10px}
.bcard h3{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.025em;line-height:1.15}
.bcard p{margin:0;color:var(--dim);font-size:15px}
.bc-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid currentColor}
.s-active{color:var(--ok)}
.s-shipped{color:var(--accent)}
.s-experiment{color:var(--blue-ink)}
.th{aspect-ratio:16/10;position:relative;overflow:hidden;max-width:100%}
.th-geo{background-color:#ece9df;background-image:linear-gradient(#fff 6px,transparent 6px),linear-gradient(90deg,#fff 6px,transparent 6px);background-size:70px 70px;background-position:20px 30px}
.th-geo .f{position:absolute;left:28%;top:16%;width:40%;aspect-ratio:1;border-radius:50%;border:2px dashed #1f7a4f;background:#1f7a4f22}
.th-geo .p{position:absolute;left:51%;top:44%;width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#c8102e;border:3px solid #fff;box-shadow:0 4px 10px #0004}
.th-sw{background:linear-gradient(135deg,#141a36,#2a3577);display:grid;place-content:center;gap:8px}
.th-sw>div{width:min(240px,62cqi,70vw);background:#fff;border-radius:8px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.th-sw span{height:8px;flex:1;background:#d9dcea;border-radius:4px}
.th-sw i{width:30px;height:17px;border-radius:999px;background:#3a5bd9;position:relative;flex:none}
.th-sw i::after{content:"";position:absolute;top:3px;right:3px;width:11px;height:11px;border-radius:50%;background:#fff}
.th-sw>div:nth-child(2) i{background:#cfd4e3}.th-sw>div:nth-child(2) i::after{right:auto;left:3px}
.th-ed{background:#1b1a18;display:grid;grid-template-columns:1fr 1.2fr;gap:10px;padding:18px}
.th-ed>div{border-radius:6px;padding:12px;display:grid;gap:7px;align-content:start}
.th-ed .l{background:#262420}.th-ed .r{background:#f4f2ee}
.th-ed i{height:6px;border-radius:3px;background:#4a463f}
.th-ed .r i{background:#d5d0c6}
.th-ed .r b{height:12px;width:75%;border-radius:3px;background:#2a2824;margin-bottom:4px}
.th-ed i:nth-child(2){width:80%}.th-ed i:nth-child(3){width:62%}.th-ed i:nth-child(4){width:88%}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:clamp(28px,4vw,44px) 0 24px}
.filters button{font:600 14px var(--f-body);color:var(--dim);background:transparent;border:1px solid var(--line);padding:8px 16px;border-radius:999px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* build and work detail pages */
.bp-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
@media (max-width:860px){.bp-head{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:0;padding-block:22px;border-block:1px solid var(--line)}
.facts dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.facts dd{margin:6px 0 0;font-weight:500}
.bp-demo{max-width:900px;margin-inline:auto}
.demo-cap{text-align:center;color:var(--dim);font-size:14px;margin:14px 0 0}
.rows{padding-block:clamp(56px,7vw,96px) 0}
.row{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(16px,4vw,64px);padding-block:clamp(28px,3.5vw,44px);border-top:1px solid var(--line)}
@media (max-width:760px){.row{grid-template-columns:1fr;gap:14px}}
.row-h{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.prose p{margin:0 0 16px;max-width:62ch;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:st}
.steps li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px}
.steps li::before{counter-increment:st;content:counter(st,decimal-leading-zero);grid-row:span 2;font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--accent);letter-spacing:-.02em}
.steps b{font-weight:600}
.steps span{color:var(--dim)}
.next{padding-block:clamp(64px,8vw,110px) 0;display:grid;gap:10px}
.next a{font-family:var(--f-display);font-weight:800;font-size:clamp(36px,5vw,72px);letter-spacing:-.04em;line-height:1;text-decoration:none;color:var(--ink)}
.next a::after{content:" →";color:var(--accent)}
.wk-band{background:var(--wtint,var(--band));padding-block:clamp(32px,5vw,64px);transition:background-color .6s}
.wk-hero{max-width:980px;margin-inline:auto}
.wk-hero .poster{width:100%}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.shot{aspect-ratio:4/3;max-width:100%;border:1px dashed var(--line);border-radius:6px;display:grid;place-items:center;color:var(--dim);font-size:13px;text-align:center;padding:12px}
@media (max-width:600px){.shots{grid-template-columns:1fr}}

/* noggin editor mock */
.editor{background:#1b1a18;border:1px solid var(--line);color:#e9e5dc}
.ed-bar{display:flex;gap:18px;align-items:center;padding:12px 18px;border-bottom:1px solid #ffffff14;font-size:13px;color:#a8a296;flex-wrap:wrap}
.ed-bar b{color:#e9e5dc;margin-right:auto;font-family:var(--f-display);font-size:16px}
.ed-bar em{font-style:normal;font-weight:600;color:#1a1408;background:#c9a66b;padding:5px 12px;border-radius:999px}
.ed-panes{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:640px){.ed-panes{grid-template-columns:1fr}}
.ed-src{margin:0;padding:22px;font:13px/1.65 ui-monospace,Menlo,Consolas,monospace;color:#cfc8ba;white-space:pre-wrap;overflow-x:auto;border-right:1px solid #ffffff14}
.ed-prev{background:#f6f4ef;color:#1a1916;padding:24px 26px}
.ed-prev h3{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.03em;margin:8px 0 10px;line-height:1.1}
.ed-prev p{margin:0 0 10px;font-size:15px}
.ed-prev ul{margin:0;padding-left:18px;font-size:15px}
.ed-tag{font-size:12px;font-weight:600;color:#94692a}

/* about page */
.ab-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(28px,6vw,96px);align-items:end}
@media (max-width:860px){.ab-head{grid-template-columns:1fr}.ab-portrait{max-width:360px}}
.what{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
@media (max-width:600px){.what{grid-template-columns:1fr}}
.what h3{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:-.02em;margin-bottom:6px}
.what p{margin:0;color:var(--dim);font-size:15px}
.where{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.where div{display:flex;justify-content:space-between;gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.where span{color:var(--dim);text-align:right}
@media (max-width:600px){.where{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(64px,8vw,110px);padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--line)}

/* contact */
.contact{padding-block:clamp(100px,12vw,160px) 0}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:24px}
.mail{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;user-select:all}
.form,.sent{background:var(--raise);border:1px solid var(--line);border-radius:10px;padding:clamp(20px,3vw,36px);display:grid;gap:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.field{display:grid;gap:7px;min-width:0}
.field>label,.topics legend{font-size:13px;font-weight:600}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:12px 14px}
.field textarea{resize:vertical;min-height:140px}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field [aria-invalid="true"]{border-color:var(--err)}
.topics{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.topics legend{padding:0;margin-bottom:9px;width:100%}
.topics label{position:relative;cursor:pointer}
.topics input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.topics span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500}
.topics input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.topics input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{margin:0;color:var(--err);font-size:14px;font-weight:500}
.send{justify-self:start;font-size:15px;padding:14px 26px}
.sent h3{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3vw,40px);letter-spacing:-.035em}
.sent p{margin:0;color:var(--dim)}
.sent .btn-pill{justify-self:start}

[hidden]{display:none!important}
/* notes */
.nx small{display:block;margin-top:8px;font-size:13px;color:var(--dim)}
.ar-tools{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin:clamp(28px,4vw,44px) 0 8px}
.ar-tools .filters{margin:0}
.search{font:inherit;font-size:15px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--raise);color:var(--ink);width:min(280px,100%)}
.search:focus{outline:2px solid var(--accent);outline-offset:1px}
.ar-count{font-size:13px;color:var(--dim);margin:14px 0 6px}
.ar-row{display:grid;grid-template-columns:120px 130px minmax(0,1fr);gap:clamp(12px,3vw,32px);align-items:baseline;padding-block:24px;border-top:1px solid var(--line);text-decoration:none}
.ar-row:last-child{border-bottom:1px solid var(--line)}
.ar-row time{font-size:14px;color:var(--dim);font-variant-numeric:tabular-nums}
.ar-row b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2vw,26px);letter-spacing:-.025em;line-height:1.2;margin-bottom:6px}
.ar-row p{margin:0;color:var(--dim);max-width:64ch}
@media (max-width:700px){.ar-row{grid-template-columns:1fr;gap:6px}}
.ar-empty{color:var(--dim);padding-block:24px;border-top:1px solid var(--line)}
.post{max-width:780px}
.post-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--dim)}
.post-title{margin-top:18px;font-size:clamp(38px,5.2vw,68px)}
.post-body{margin-top:clamp(32px,4vw,48px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.post-body p,.post-body li{font-size:18px;line-height:1.75;color:var(--ink-2)}
.post-body p{margin:0 0 22px;max-width:64ch}
.post-body h2{font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:-.025em;margin:36px 0 14px}
.post-body ul{margin:0 0 22px;padding-left:22px}
.post-body li{margin-bottom:8px}
.share{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:36px;padding-block:22px;border-block:1px solid var(--line)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.post-nav a{display:grid;gap:6px;text-decoration:none;padding:20px;border:1px solid var(--line);border-radius:8px}
.post-nav a:last-child{text-align:right}
.post-nav b{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1.25}
@media (max-width:600px){.post-nav{grid-template-columns:1fr}.post-nav a:last-child{text-align:left}}
.site-foot{margin-top:clamp(80px,10vw,140px)}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:24px;border-top:1px solid var(--line);color:var(--dim);font-size:14px}
/* ===== Studio layer: color blocks, big radii, layered hero ===== */
:root{
  --bg:#f2f0eb; --raise:#ffffff; --ink:#121317; --ink-inv:#ffffff; --dim:#62656e; --line:rgba(18,19,23,.12);
  --ink-2:rgba(18,19,23,.78);
  --accent:#f0562a; --accent-deep:#c43d14; --on-accent:#ffffff;
  --coral:#f0562a; --butter:#ffe08a; --lilac:#d8cdff; --mint:#c6ecd8; --sky:#cfe2ff; --blush:#ffd5c6;
  --blockink:#15161b; --link:#c43d14; --r-xl:clamp(26px,3.4vw,44px); --r-l:clamp(20px,2.4vw,30px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1013; --raise:#1a1b21; --ink:#f1efe9; --ink-inv:#121317; --dim:#9a9ca6; --line:rgba(241,239,233,.12);
  --ink-2:rgba(241,239,233,.8); --accent:#ff7448; --accent-deep:#c43d14;
  --butter:#f4d67f; --lilac:#cbc0f7; --mint:#b8e3cc; --sky:#c1d7f8; --blush:#f7c8b8; --blockink:#1c1e26; --link:#ff8a63; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1013; --raise:#1a1b21; --ink:#f1efe9; --ink-inv:#121317; --dim:#9a9ca6; --line:rgba(241,239,233,.12);
  --ink-2:rgba(241,239,233,.8); --accent:#ff7448; --accent-deep:#c43d14;
  --butter:#f4d67f; --lilac:#cbc0f7; --mint:#b8e3cc; --sky:#c1d7f8; --blush:#f7c8b8; --blockink:#1c1e26; --link:#ff8a63; color-scheme:dark}

/* type */
.big{font-weight:800;letter-spacing:-.05em;line-height:.92;font-size:clamp(44px,6.6vw,104px)}
.big em{color:var(--accent)}
.pastel .big em,.block-coral .big em{color:var(--accent-deep)}
.block-coral .big em{color:#fff}
.page-top>.label::before,.pghead .label::before,.bp-head .label::before,.ab-head .label::before,.contact .label::before,.xr-head .label::before,.stat-ink .label::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:1px}
.block-coral .label::before{background:#121317}

/* blocks */
.block{border-radius:var(--r-xl);padding:clamp(24px,5vw,72px)}
.pastel{--ink:#121317;--ink-inv:#ffffff;--ink-2:rgba(18,19,23,.78);--dim:rgba(18,19,23,.62);--line:rgba(18,19,23,.15);--raise:rgba(255,255,255,.6);color:var(--ink)}
.butter{background:var(--butter)}.lilac{background:var(--lilac)}.mint{background:var(--mint)}.sky{background:var(--sky)}.blush{background:var(--blush)}
.block-ink{--ink:#f1efe9;--ink-inv:#121317;--ink-2:rgba(241,239,233,.8);--dim:#9a9ca6;--line:rgba(241,239,233,.14);--raise:#24262f;background:var(--blockink);color:var(--ink)}
.block-coral{--ink:#121317;--ink-inv:#ffffff;--ink-2:rgba(18,19,23,.8);--dim:rgba(18,19,23,.66);--line:rgba(18,19,23,.2);background:var(--coral);color:var(--ink)}
.blk{padding-block:clamp(72px,9vw,120px) 0}
.blk>.block.xr,.blk>.block.about,.blk>.block.contact{padding-block:clamp(32px,5vw,72px)}

/* buttons */
.btn-pill{border-color:var(--line);font-weight:600}
.btn-pill.solid{background:var(--ink);border-color:var(--ink);color:var(--ink-inv)}
.btn-pill:not(.solid)::after,.next a::after{content:" →"}
.links .pill{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}
.textlink{color:var(--link)}
.pastel .textlink,.block-coral .textlink{color:#121317;text-decoration:underline;text-underline-offset:3px}

/* hero stage */
.hero{background:none;border:0}
.hero>.wrap{padding-block:clamp(92px,9vw,116px) 0}
.stage{position:relative;border-radius:var(--r-xl);background:var(--coral);color:#121317;height:clamp(600px,60vw,760px);overflow:hidden;isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.stage-top{position:absolute;top:clamp(20px,2.4vw,32px);left:clamp(22px,3.4vw,44px);right:clamp(22px,3.4vw,44px);display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;z-index:4}
.mega{position:absolute;left:clamp(22px,3.4vw,44px);right:clamp(22px,3.4vw,44px);top:clamp(64px,7vw,96px);z-index:3;margin:0;font-family:var(--f-display);font-weight:800;letter-spacing:-.06em;line-height:.82;font-size:clamp(70px,12.4vw,182px);color:#fff8f3;display:grid;pointer-events:none;text-shadow:0 2px 30px rgba(120,30,0,.18)}
.mega .l1{justify-self:start}
.mega .l2{justify-self:end;margin-right:-.02em}
.cutout{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:clamp(240px,30%,380px);aspect-ratio:4/5;margin:0;z-index:2}
.cutout .disc-bg{position:absolute;left:-6%;right:-6%;bottom:14%;aspect-ratio:1;border-radius:50%;background:var(--butter)}
.cutout svg{position:absolute;inset:auto 0 0;width:100%;height:auto;color:#121317;opacity:.92}
.cutout .standin{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);white-space:nowrap;background:#fff;color:#121317;border:0}
.badge{position:absolute;z-index:4;left:calc(50% - clamp(240px,30%,380px)/2 - 70px);top:56%;width:clamp(96px,9vw,124px);aspect-ratio:1;border-radius:50%;background:#121317;color:#fff;display:grid;place-items:center;text-decoration:none}
.badge svg{position:absolute;inset:6%;width:88%;height:88%;animation:spin 26s linear infinite;overflow:visible}
.badge text{font:700 10.5px var(--f-body);letter-spacing:.2em;fill:#fff}
.badge b{font-size:22px;color:var(--butter);font-weight:600}
@keyframes spin{to{transform:rotate(360deg)}}
.sticker{position:absolute;z-index:4;right:clamp(22px,3.4vw,44px);top:58%;transform:rotate(-4deg);background:#fff;color:#121317;font-weight:700;font-size:15px;padding:12px 18px;border-radius:999px;box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}
.sticker i{font-style:normal;color:var(--coral);padding-inline:2px}
.stage-foot{position:absolute;left:clamp(22px,3.4vw,44px);right:clamp(22px,3.4vw,44px);bottom:clamp(22px,3vw,40px);display:flex;justify-content:space-between;align-items:end;gap:24px;z-index:4;pointer-events:none}
.stage-foot>*{pointer-events:auto}
.stage-foot p{margin:0;max-width:30ch;font-size:clamp(16px,1.35vw,19px);line-height:1.5;font-weight:500;color:#121317}
.stage .ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.stage .btn-pill{color:#121317;border-color:rgba(18,19,23,.35);background:rgba(255,255,255,.18)}
.stage .btn-pill.solid{background:#121317;border-color:#121317;color:#fff}
@media (max-width:820px){
  .stage{height:auto;display:flex;flex-direction:column;padding:22px 22px 0;gap:18px}
  .stage-top,.mega,.stage-foot,.cutout,.badge,.sticker{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;transform:none}
  .stage-top{order:0;font-size:11px}
  .mega{order:1;font-size:clamp(56px,19vw,120px)}
  .stage-foot{order:2;flex-direction:column;align-items:start}
  .stage .ctas{justify-content:flex-start}
  .sticker{order:3;align-self:start;transform:rotate(-3deg)}
  .cutout{order:4;width:min(82%,340px);align-self:center;margin-top:6px}
  .badge{position:absolute;right:18px;left:auto;bottom:22%;top:auto;width:92px}
}

/* stat row */
.statrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.7fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(10px,1.2vw,16px)}
.stat{border-radius:var(--r-l);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:clamp(150px,14vw,190px)}
.stat strong{font-family:var(--f-display);font-weight:800;font-size:clamp(54px,5.6vw,84px);line-height:.85;letter-spacing:-.06em}
.stat span{font-size:14px;font-weight:600;line-height:1.35;max-width:14ch}
.stat-ink{background:var(--blockink);--ink:#f1efe9;--dim:#9a9ca6;color:var(--ink)}
.stat-ink .pills{display:flex;flex-wrap:wrap;gap:8px}
.stat-ink .pills span{max-width:none;font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;border:1px solid rgba(241,239,233,.2)}
@media (max-width:960px){.statrow{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-ink{grid-column:1/-1;min-height:0}}
@media (max-width:560px){.statrow{grid-template-columns:1fr 1fr}.stat{min-height:130px}}

/* gallery */
.hs-head .big{font-size:clamp(40px,5.6vw,88px)}
.poster{border-radius:var(--r-l)}
.card .cap{margin-top:18px}
.card .cap b{font-weight:800;letter-spacing:-.035em;font-size:24px}
.bar{height:3px;border-radius:3px}
.bar i{border-radius:3px}

/* strategy block */
.xr{padding-block:clamp(32px,5vw,72px)}
.xr .xr-frame{border-radius:var(--r-l)}
.xr-head .big em{color:var(--lilac)}
.xr .tgl{border-color:rgba(241,239,233,.3);color:#f1efe9}
.xr .tgl[aria-pressed="true"]{background:var(--lilac);border-color:var(--lilac);color:#121317}
.xr .lens-ring{border-color:var(--lilac);box-shadow:0 0 0 6px rgba(216,205,255,.18)}

/* builds cards */
.bcard{position:relative;border:0;border-radius:var(--r-l);padding:10px;gap:0;--ink:#121317;--dim:rgba(18,19,23,.64);color:#121317}
.bgrid .bcard:nth-child(3n+1){background:var(--butter)}
.bgrid .bcard:nth-child(3n+2){background:var(--sky)}
.bgrid .bcard:nth-child(3n){background:var(--mint)}
.bcard .th{border-radius:calc(var(--r-l) - 8px)}
.bcard .bc-body{padding:18px 14px 16px}
.bcard h3{font-weight:800;letter-spacing:-.035em;font-size:24px}
.bcard .chip,.bp-head .chip{--ok:#2f7d55;--accent:#c43d14;--blue-ink:#2e6da3}
.bcard .chip{background:#fff;border-color:#fff}
.bcard::after{content:"↗";position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:50%;background:#fff;color:#121317;display:grid;place-items:center;font-size:18px;font-weight:600;box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}

/* notes */
.note-row{grid-template-columns:170px minmax(0,1.5fr) minmax(0,1fr) 52px;align-items:center}
.note-row::after{content:"→";width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:18px;color:var(--ink)}
.note-row .nt{font-weight:800;letter-spacing:-.04em}
.tag{display:inline-block;justify-self:start;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
@media (max-width:860px){.note-row{grid-template-columns:1fr}.note-row::after{display:none}}

/* after hours */
.after{width:min(100% - 2*var(--gut),1144px);margin-inline:auto;border-radius:var(--r-xl);border:0;padding-block:clamp(48px,7vw,100px)}
.after .art{border-radius:calc(var(--r-l) - 6px)}

/* bio block */
.about{padding-block:clamp(32px,5vw,72px)}
.about h2{font-weight:800;letter-spacing:-.05em}
.about h2 em{color:var(--accent-deep)}

/* contact block */
.contact{padding-block:clamp(32px,5vw,72px)}
.contact .big{color:#121317}
.contact .lede{color:rgba(18,19,23,.82)}
.contact .mail{color:#121317}
.contact .btn-pill{color:#121317;border-color:rgba(18,19,23,.35)}
.contact .form,.contact .sent{--raise:#ffffff;--bg:#f4f2ee;--ink:#121317;--ink-inv:#ffffff;--line:rgba(18,19,23,.13);--dim:#62656e;color:#121317;border:0;border-radius:var(--r-l);box-shadow:0 30px 60px -36px rgba(80,20,0,.55)}
.contact .form .btn-pill.solid{background:#121317;border-color:#121317;color:#fff}
.contact .err{color:#b3261e}

/* sub-page headers */
.pghead{margin-bottom:8px}
.pghead .lede,.bp-head .lede,.ab-head .lede{color:var(--ink-2)}
.bp-head{align-items:end}
.bp-head .facts{border-color:rgba(18,19,23,.18)}
.bp-head .chip{background:#fff;border-color:#fff}
.bp-head .ph-inline,.bp-head .ph{color:rgba(18,19,23,.55)}
.bp-head .ph{border-left-color:rgba(18,19,23,.25)}
.pastel .portrait{background:rgba(255,255,255,.45);box-shadow:none;border-radius:var(--r-l)}
.pastel .portrait svg{color:#121317}
.page-top .back{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.cta-band{border-top:0;margin-top:0;padding-block:clamp(32px,5vw,64px)}
.cta-band .big{color:#121317}
.cta-band .btn-pill.solid{background:#121317;border-color:#121317;color:#fff}
.wk-band{margin-inline:auto;width:min(100% - 2*var(--gut),1240px);border-radius:var(--r-xl)}
.rows .row-h{font-weight:800;letter-spacing:-.03em;font-size:22px}
.steps li::before{font-weight:800}
.next a{font-weight:800;letter-spacing:-.055em}
.next a::after{color:var(--accent)}
.post-title{font-weight:800;letter-spacing:-.05em}
.post-nav a,.form,.sent{border-radius:var(--r-l)}
.filters button{font-weight:600}
.search{border-radius:999px}

/* footer wordmark */
.site-foot{overflow:hidden}
.foot-mark{font-family:var(--f-display);font-weight:800;letter-spacing:-.07em;line-height:.8;font-size:clamp(84px,19vw,296px);color:var(--ink);opacity:.92;padding-top:clamp(24px,4vw,48px);margin-left:-.04em;white-space:nowrap}
.foot-mark::after{content:".";color:var(--accent)}


/* fixes */
.nav{background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.foot-mark{letter-spacing:-.05em}
.foot{border-top:0}
.stat-ink .label{max-width:none}
.mega{letter-spacing:-.055em}
@media (max-width:560px){
  .statrow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat{min-height:0;padding:16px 14px;gap:10px}
  .stat strong{font-size:44px}
  .stat span{font-size:12px}
  .stage-top span:last-child{display:none}
}
/* ===== Depth layer: palettes, clay surfaces, floating 3D shapes ===== */
:root:not([data-palette]),:root[data-palette="cobalt"]{
  --hero:#3d5afe; --hero-hi:#7d91ff; --hero-lo:#2236c4; --pop:#ffd24d;
  --butter:#ffe58f; --lilac:#d3dbff; --mint:#c3f0dd; --sky:#cfe7ff; --blush:#ffd3e8;
  --accent-l:#3550f0; --accent-d:#8a9cff; --accent-deep:#2236c4; --shadow-c:rgba(34,54,196,.42);
}
:root[data-palette="ultraviolet"]{
  --hero:#6c4cff; --hero-hi:#a28cff; --hero-lo:#4529d1; --pop:#c8f56a;
  --butter:#e4f8b0; --lilac:#e0d6ff; --mint:#c9f2e3; --sky:#d4e4ff; --blush:#ffd6ef;
  --accent-l:#5b3df0; --accent-d:#ac9bff; --accent-deep:#4529d1; --shadow-c:rgba(69,41,209,.42);
}
:root[data-palette="lagoon"]{
  --hero:#0e7c70; --hero-hi:#2fb3a1; --hero-lo:#075349; --pop:#ffd85e;
  --butter:#ffe9a6; --lilac:#d9e2ff; --mint:#c4efe7; --sky:#cfe8f5; --blush:#ffdcdc;
  --accent-l:#0b6c61; --accent-d:#4fd6c3; --accent-deep:#075349; --shadow-c:rgba(7,83,73,.42);
}
:root{
  --coral:var(--hero); --accent:var(--accent-l); --link:var(--accent-l);
  --glass:rgba(255,255,255,.7); --glass-line:rgba(18,19,23,.08);
  --hl:rgba(255,255,255,.8); --drop:rgba(22,26,60,.4); --drop-2:rgba(22,26,60,.18);
  --amb1:color-mix(in srgb,var(--lilac) 70%,transparent); --amb2:color-mix(in srgb,var(--mint) 60%,transparent);
  --clay:inset 0 2px 1px var(--hl),inset 0 -14px 28px rgba(0,0,0,.07),0 34px 60px -34px var(--drop),0 12px 24px -14px var(--drop-2);
  --clay-sm:inset 0 1.5px 1px var(--hl),inset 0 -6px 12px rgba(0,0,0,.07),0 14px 26px -14px var(--drop),0 4px 10px -6px var(--drop-2);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --accent:var(--accent-d); --link:var(--accent-d);
  --glass:rgba(255,255,255,.07); --glass-line:rgba(255,255,255,.1);
  --hl:rgba(255,255,255,.28); --drop:rgba(0,0,0,.75); --drop-2:rgba(0,0,0,.45);
  --amb1:color-mix(in srgb,var(--hero) 22%,transparent); --amb2:color-mix(in srgb,var(--hero-hi) 10%,transparent)}}
:root[data-theme="dark"]{
  --accent:var(--accent-d); --link:var(--accent-d);
  --glass:rgba(255,255,255,.07); --glass-line:rgba(255,255,255,.1);
  --hl:rgba(255,255,255,.28); --drop:rgba(0,0,0,.75); --drop-2:rgba(0,0,0,.45);
  --amb1:color-mix(in srgb,var(--hero) 22%,transparent); --amb2:color-mix(in srgb,var(--hero-hi) 10%,transparent)}

body{background:radial-gradient(48vw 48vw at 92% -4%,var(--amb1),transparent 70%),radial-gradient(42vw 42vw at -6% 38%,var(--amb2),transparent 70%),var(--bg);background-attachment:fixed}

/* hero stage: inflated panel */
.stage{background:radial-gradient(120% 95% at 18% 0%,var(--hero-hi) 0%,var(--hero) 48%,var(--hero-lo) 100%);color:#fff;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.35),inset 0 -40px 80px rgba(0,0,0,.2),0 60px 100px -50px var(--shadow-c),0 20px 40px -24px rgba(0,0,0,.25)}
.stage::before{mix-blend-mode:soft-light;opacity:.35}
.stage-top,.stage-foot p{color:#fff}
.stage-foot p{color:rgba(255,255,255,.92)}
.mega{color:#fff;text-shadow:0 1px 0 var(--hero-lo),0 2px 0 var(--hero-lo),0 3px 0 var(--hero-lo),0 4px 0 var(--hero-lo),0 5px 0 var(--hero-lo),0 6px 0 var(--hero-lo),0 22px 36px rgba(0,0,30,.35)}
.cutout .disc-bg{background:radial-gradient(circle at 34% 28%,#fff 0,color-mix(in srgb,var(--pop) 45%,#fff) 9%,var(--pop) 42%,color-mix(in srgb,var(--pop) 62%,#6b3d00) 100%);
  box-shadow:inset -18px -26px 50px rgba(120,60,0,.25),0 40px 60px -30px rgba(0,0,30,.45)}
.cutout svg{color:#14152a;opacity:.94}
.badge{background:radial-gradient(circle at 34% 28%,#4a4e63,#14152a 62%);box-shadow:inset 0 2px 1px rgba(255,255,255,.25),0 20px 30px -14px rgba(0,0,0,.55)}
.badge b{color:var(--pop)}
.sticker{top:50%;box-shadow:inset 0 2px 1px #fff,inset 0 -6px 12px rgba(0,0,0,.08),0 20px 30px -14px rgba(0,0,30,.5)}
.sticker i{color:var(--hero)}
.stage .btn-pill{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.stage .btn-pill.solid{background:linear-gradient(180deg,#fff,#e9ecff);border-color:#fff;color:var(--hero-lo);box-shadow:inset 0 -3px 6px rgba(0,0,40,.08),0 4px 0 color-mix(in srgb,var(--hero-lo) 70%,#000),0 16px 26px -12px rgba(0,0,30,.5)}

/* floating shapes */
.objs{position:absolute;inset:0;z-index:3;pointer-events:none}
.obj{position:absolute;filter:drop-shadow(0 22px 20px rgba(0,0,30,.32));animation:bob 7s ease-in-out infinite}
.obj i{display:block;width:100%;height:100%}
.o-ball{width:clamp(48px,5.6vw,78px);aspect-ratio:1;left:6%;top:47%;animation-duration:6.5s}
.o-ball i{border-radius:50%;background:radial-gradient(circle at 33% 28%,#fff 0,color-mix(in srgb,var(--blush) 60%,#fff) 10%,var(--blush) 40%,color-mix(in srgb,var(--blush) 55%,#a0306a) 100%)}
.o-pill{width:clamp(80px,9vw,124px);aspect-ratio:2.4;left:15%;top:69%;rotate:-28deg;animation-duration:8s;animation-delay:-2s}
.o-pill i{border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--mint) 40%,#fff) 0%,var(--mint) 40%,color-mix(in srgb,var(--mint) 60%,#0a5a46) 100%);box-shadow:inset 0 3px 2px rgba(255,255,255,.9),inset 0 -6px 10px rgba(0,60,40,.2)}
.o-ring{width:clamp(70px,8vw,112px);aspect-ratio:1;right:6%;top:63%;animation-duration:9s;animation-delay:-4s}
.o-ring i{border-radius:50%;background:radial-gradient(circle,transparent 0 33%,color-mix(in srgb,var(--sky) 55%,#1c3b80) 34%,var(--sky) 44%,#fff 50%,var(--sky) 57%,color-mix(in srgb,var(--sky) 55%,#1c3b80) 69%,transparent 70%)}
.o-star{width:clamp(40px,4.4vw,60px);aspect-ratio:1;right:13%;top:13%;animation-duration:5.5s;animation-delay:-1s}
.o-star i{clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);background:radial-gradient(circle at 40% 35%,#fff 0,color-mix(in srgb,var(--pop) 50%,#fff) 20%,var(--pop) 60%,color-mix(in srgb,var(--pop) 60%,#7a4a00) 100%)}
@keyframes bob{50%{translate:0 -12px}}
@media (max-width:820px){.o-pill,.o-star{display:none}.o-ball{left:auto;right:8%;top:30%}.o-ring{right:auto;left:6%;top:auto;bottom:16%}}

/* clay surfaces */
.block,.stat,.bcard,.poster,.contact .form,.contact .sent,.xr .xr-frame,.wk-band,.post-nav a{box-shadow:var(--clay)}
.pastel,.stat.pastel{background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
.bgrid .bcard:nth-child(3n+1),.bgrid .bcard:nth-child(3n+2),.bgrid .bcard:nth-child(3n){background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
.bcard .th{box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 10px 20px -12px rgba(0,0,30,.35)}
.block-ink,.stat-ink{background:radial-gradient(120% 100% at 20% 0%,color-mix(in srgb,var(--blockink) 82%,#fff),var(--blockink) 60%);box-shadow:inset 0 2px 1px rgba(255,255,255,.12),inset 0 -20px 40px rgba(0,0,0,.25),0 40px 70px -36px var(--drop),0 12px 24px -14px var(--drop-2)}
.block-coral{background:radial-gradient(120% 95% at 18% 0%,var(--hero-hi) 0%,var(--hero) 50%,var(--hero-lo) 100%);
  --ink:#ffffff;--ink-inv:#121317;--ink-2:rgba(255,255,255,.88);--dim:rgba(255,255,255,.72);--line:rgba(255,255,255,.28);color:#fff;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.3),inset 0 -40px 80px rgba(0,0,0,.18),0 50px 90px -46px var(--shadow-c)}
.block-coral .label::before{background:var(--pop)}
.block-coral .big em{color:var(--pop)}
.contact .big,.contact .mail,.cta-band .big{color:#fff}
.contact .lede{color:rgba(255,255,255,.88)}
.contact .btn-pill,.cta-band .btn-pill:not(.solid){color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12)}
.pastel .textlink,.block-coral .textlink{color:inherit}
.cta-band .btn-pill.solid{background:linear-gradient(180deg,#fff,#eef0ff);border-color:#fff;color:var(--hero-lo)}
.contact .form .btn-pill.solid{background:linear-gradient(180deg,var(--hero-hi),var(--hero));border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 var(--hero-lo),0 16px 24px -12px var(--shadow-c)}
.contact .form{box-shadow:inset 0 2px 1px #fff,0 40px 70px -36px rgba(0,0,30,.55)}
.topics input:checked+span{background:var(--hero);border-color:var(--hero);color:#fff}

/* puffy buttons and chips */
.btn-pill{background:var(--glass);border-color:var(--glass-line);box-shadow:var(--clay-sm)}
.btn-pill.solid{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 82%,var(--ink-inv)),var(--ink));border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 0 color-mix(in srgb,var(--ink) 70%,#000),0 14px 24px -12px var(--drop)}
.links .pill{background:linear-gradient(180deg,var(--hero-hi),var(--hero));color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 var(--hero-lo),0 12px 20px -8px var(--shadow-c)}
.theme{background:var(--glass);border-color:var(--glass-line);box-shadow:var(--clay-sm)}
.tag,.bcard .chip,.bp-head .chip{box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -3px 6px rgba(0,0,0,.06),0 6px 12px -8px rgba(0,0,30,.35)}
.filters button{background:var(--glass);border-color:var(--glass-line)}
.filters button[aria-pressed="true"]{background:linear-gradient(180deg,var(--hero-hi),var(--hero));border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 var(--hero-lo)}
.note-row::after,.bcard::after{background:radial-gradient(circle at 35% 28%,#fff,color-mix(in srgb,#fff 82%,var(--hero)) 70%);border:0;color:#14152a;box-shadow:inset 0 -3px 6px rgba(0,0,40,.1),0 10px 18px -8px rgba(0,0,30,.4)}
.big em{color:var(--accent)}
.xr-head .big em{color:var(--lilac)}
.xr .tgl[aria-pressed="true"]{background:var(--lilac);border-color:var(--lilac)}
.xr .lens-ring{border-color:var(--lilac)}
.textlink{color:var(--link)}
.page-top>.label::before,.pghead .label::before,.bp-head .label::before,.ab-head .label::before,.xr-head .label::before,.stat-ink .label::before{background:var(--hero);box-shadow:0 0 0 3px color-mix(in srgb,var(--hero) 22%,transparent)}
.next a::after{color:var(--accent)}
.bar i{background:var(--hero)}
.steps li::before{color:var(--accent)}
.search{background:var(--glass);border-color:var(--glass-line);box-shadow:var(--clay-sm)}

/* footer wordmark: inflated */
.foot-mark{color:var(--hero);opacity:1;text-shadow:0 1px 0 var(--hero-lo),0 2px 0 var(--hero-lo),0 3px 0 var(--hero-lo),0 4px 0 var(--hero-lo),0 5px 0 var(--hero-lo),0 6px 0 var(--hero-lo),0 7px 0 var(--hero-lo),0 30px 40px var(--shadow-c);padding-bottom:16px}
.foot-mark::after{color:var(--pop);text-shadow:0 1px 0 #c79400,0 2px 0 #c79400,0 3px 0 #c79400,0 4px 0 #c79400,0 5px 0 #c79400,0 6px 0 #c79400,0 7px 0 #c79400}

/* palette switcher (preview only) */
.palette{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--raise);border:1px solid var(--glass-line);box-shadow:var(--clay)}
.palette>span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.palette button{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--ink);font:600 13px var(--f-body);padding:6px 10px 6px 6px;border-radius:999px;cursor:pointer}
.palette button i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 -3px 5px rgba(0,0,0,.2),inset 0 2px 1px rgba(255,255,255,.5)}
.palette button[aria-pressed="true"]{background:var(--glass);box-shadow:var(--clay-sm)}
.palette small{font-size:11px;color:var(--dim);padding-right:4px}
@media (max-width:640px){.palette>span,.palette small,.palette button b{display:none}.palette button{padding:6px}}
@media (prefers-reduced-motion:reduce){.obj{animation:none}}

/* full-bleed bands: hero, strategy, after hours, bio */
:root{--edge:max(var(--gut),calc((100vw - 1240px)/2 + var(--gut)))}
.stage,.blk>.block.xr,.blk>.block.about{margin-inline:calc(50% - 50vw);border-radius:0}
.blk>.block.xr,.blk>.block.about{padding-inline:var(--edge);padding-block:clamp(56px,7vw,104px)}
.blk>.block.xr>*,.blk>.block.about>*{min-width:0}
.blk>.block.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:860px){.blk>.block.about{grid-template-columns:1fr}}
.blk>.block.xr,.blk>.block.about,.after{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -30px 60px rgba(0,0,0,.08)}
.hero>.wrap{padding-top:76px}
.stage{box-shadow:inset 0 2px 1px rgba(255,255,255,.25),inset 0 -50px 90px rgba(0,0,0,.2)}
.stage-top,.mega,.stage-foot{left:var(--edge);right:var(--edge)}
.o-ball{left:max(6%,calc(var(--edge) + 1%))}
.o-ring{right:max(6%,calc(var(--edge) + 2%))}
.o-star{right:max(13%,calc(var(--edge) + 8%))}
.o-pill{left:max(15%,calc(var(--edge) + 9%))}
.sticker{right:var(--edge)}
.statrow{margin-top:clamp(14px,1.6vw,22px)}
.after{width:100%;border-radius:0;margin-top:clamp(72px,9vw,120px)}
@media (max-width:820px){.stage{padding-inline:var(--edge)}.stage-top,.mega,.stage-foot{left:auto;right:auto}.sticker{right:auto}.o-ball{left:auto;right:8%}.o-ring{right:auto;left:6%}}

/* position fixes for the full-width hero */
.sticker{top:58%}
.o-ring{top:66%}
@media (max-width:820px){.o-ball{top:auto;bottom:40%;right:7%}}

/* ===== motion: parallax, hovers, transitions ===== */
.obj{transform:translate3d(var(--px,0px),var(--py,0px),0)}
.badge,.sticker,.mega .l1,.mega .l2,.cutout .disc-bg{translate:var(--px,0px) var(--py,0px)}
@media (prefers-reduced-motion:no-preference){
  .mega .l1,.mega .l2{animation:heroIn 1.05s cubic-bezier(.2,.9,.2,1) both}
  .mega .l2{animation-delay:.1s}
  .cutout{animation:liftIn 1.1s .18s cubic-bezier(.2,.9,.2,1) both}
  .obj>i{animation:pop .9s cubic-bezier(.3,1.7,.5,1) both}
  .o-ball>i{animation-delay:.45s}.o-pill>i{animation-delay:.6s}.o-ring>i{animation-delay:.72s}.o-star>i{animation-delay:.84s}
  .badge,.sticker{animation:popScale .8s .9s cubic-bezier(.3,1.7,.5,1) both}
  .stat{animation:liftIn .8s cubic-bezier(.2,.9,.2,1) both}
  .stat:nth-child(2){animation-delay:.08s}.stat:nth-child(3){animation-delay:.16s}.stat:nth-child(4){animation-delay:.24s}
  .page.enter{animation:pageIn .55s cubic-bezier(.2,.8,.2,1)}
}
@keyframes heroIn{from{opacity:0;transform:translateY(45%)}}
@keyframes liftIn{from{opacity:0;translate:0 50px}}
@keyframes pop{from{transform:scale(0)}}
@keyframes popScale{from{scale:0}}
@keyframes pageIn{from{opacity:0;translate:0 18px}}
@keyframes rise{from{opacity:0;translate:0 44px;scale:.97}}
@keyframes wiggle{25%{rotate:5deg}50%{rotate:-4deg}75%{rotate:2deg}}

/* scroll reveals (only where the browser can drive them from scroll, so content is never stuck hidden) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .sec-head,.hs-head,.bcard,.note-row,.art,.row,.xr-head,.xr-frame,.about>*,.contact-grid>*,.ar-row,.pghead,.bp-head,.ab-head,.build,.post-body,.ft-grid{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
  }
}

/* hovers: tactile and bouncy, mouse only */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn-pill,.links .pill,.theme,.filters button,.palette button,.tgl{transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s,background-color .3s,color .3s}
  .btn-pill:hover,.links .pill:hover,.filters button:hover,.tgl:hover{transform:translateY(-3px)}
  .btn-pill:active,.links .pill:active,.filters button:active{transform:translateY(2px);transition-duration:.08s}
  .btn-pill.solid:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 color-mix(in srgb,var(--ink) 70%,#000)}
  .links .pill:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 var(--hero-lo)}
  .btn-pill:not(.solid)::after{display:inline-block;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
  .btn-pill:not(.solid):hover::after{transform:translateX(4px)}
  .theme:hover{transform:rotate(-18deg) scale(1.06)}
  .palette button:hover{transform:scale(1.15)}

  .links a:not(.pill){background:linear-gradient(var(--hero),var(--hero)) 0 100%/0 2px no-repeat;padding-bottom:3px;transition:background-size .35s cubic-bezier(.2,.8,.2,1),color .25s}
  .links a:not(.pill):hover{background-size:100% 2px;color:var(--ink)}

  .bcard,.stat,.post-nav a{transition:transform .5s cubic-bezier(.2,1.5,.4,1),box-shadow .5s}
  .bcard:hover{transform:translateY(-10px) rotate(-.8deg);box-shadow:inset 0 2px 1px var(--hl),inset 0 -14px 28px rgba(0,0,0,.07),0 50px 70px -36px var(--drop),0 18px 30px -16px var(--drop-2)}
  .bcard .th{transition:transform .6s cubic-bezier(.2,1.4,.4,1)}
  .bcard:hover .th{transform:scale(1.025)}
  .bcard::after{transition:transform .45s cubic-bezier(.3,1.7,.5,1),background .3s,color .3s}
  .bcard:hover::after{transform:rotate(45deg) scale(1.12);background:linear-gradient(180deg,var(--hero-hi),var(--hero));color:#fff}
  .stat:hover{transform:translateY(-8px) rotate(1.2deg)}
  .stat:nth-child(even):hover{transform:translateY(-8px) rotate(-1.2deg)}
  .stat-ink:hover{transform:translateY(-6px)}
  .stat-ink .pills span{transition:background .25s,color .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
  .stat-ink .pills span:hover{background:var(--hero);border-color:var(--hero);color:#fff;transform:translateY(-2px)}

  .card .poster{transition:transform .6s cubic-bezier(.2,1.4,.4,1),box-shadow .6s}
  .card:hover .poster{transform:translateY(-12px) rotate(-1.2deg) scale(1.015);box-shadow:inset 0 2px 1px var(--hl),0 60px 80px -40px var(--drop),0 20px 30px -18px var(--drop-2)}
  .card .cap b{transition:color .3s}
  .card:hover .cap b{color:var(--accent)}

  .note-row .nt{transition:transform .45s cubic-bezier(.2,1.4,.4,1),color .3s}
  .note-row:hover .nt{transform:translateX(10px);color:var(--accent)}
  .note-row::after{transition:transform .45s cubic-bezier(.3,1.7,.5,1),background .3s,color .3s}
  .note-row:hover::after{transform:translateX(6px) scale(1.1);background:linear-gradient(180deg,var(--hero-hi),var(--hero));color:#fff}
  .ar-row b{transition:color .3s,transform .45s cubic-bezier(.2,1.4,.4,1)}
  .ar-row:hover b{color:var(--accent);transform:translateX(6px)}
  .post-nav a:hover{transform:translateY(-6px)}

  .art svg{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
  .art:hover svg{transform:scale(1.06)}
  .love{transition:transform .35s cubic-bezier(.3,1.8,.5,1)}
  .love:hover{transform:scale(1.15)}
  .love[aria-pressed="true"]{animation:popScale .45s cubic-bezier(.3,1.8,.5,1)}

  .sticker{cursor:default}
  .sticker:hover{animation:wiggle .6s ease}
  .badge{transition:scale .4s cubic-bezier(.3,1.7,.5,1)}
  .badge:hover{scale:1.1}
  .next a{display:inline-block;transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
  .next a:hover{transform:translateX(12px)}
  .ft-col a:not(.btn-pill),.ft-bar a{transition:color .25s}
  .ft-col a:not(.btn-pill):hover,.ft-bar a:hover{color:var(--accent)}
  .topics span{transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .25s}
  .topics label:hover span{transform:translateY(-2px)}
}

/* calmer hero: name as a headline in a left copy column, portrait on the right */
.stage{height:clamp(560px,52vw,700px)}
.stage-copy{position:absolute;left:var(--edge);top:53%;transform:translateY(-50%);width:min(46%,560px);z-index:4;display:grid;gap:clamp(18px,2vw,28px)}
.mega{position:static;inset:auto;font-size:clamp(50px,6.6vw,104px);line-height:.9;letter-spacing:-.05em;
  text-shadow:0 1px 0 var(--hero-lo),0 2px 0 var(--hero-lo),0 3px 0 var(--hero-lo),0 14px 26px rgba(0,0,30,.28)}
.mega .l2{justify-self:start;margin:0}
.stage-foot{position:static;inset:auto;flex-direction:column;align-items:flex-start;gap:22px}
.stage-foot p{max-width:38ch}
.stage .ctas{justify-content:flex-start}
.cutout{left:70%;width:clamp(250px,31%,390px)}
.badge{left:calc(70% + clamp(250px,31%,390px)/2 - 54px);top:24%}
.sticker{top:61%;right:var(--edge)}
.o-ball{left:50%;top:11%}
.o-pill{left:46%;top:80%}
.o-ring{top:67%}
.o-star{top:11%}
@media (max-width:820px){
  .stage{height:auto}
  .stage-copy{position:relative;left:auto;top:auto;transform:none;width:auto;order:1}
  .mega{font-size:clamp(44px,13vw,72px)}
  .cutout{left:auto;order:4}
  .badge{position:absolute;left:auto;right:18px;top:auto;bottom:22%}
  .sticker{top:auto;right:auto;order:3}
  .o-ball{left:auto;right:7%;top:auto;bottom:40%}
  .o-pill{display:none}
}

.o-ring{top:76%}
@media (max-width:820px){.o-ring{top:auto}}

/* hero band holds the stage and the stat cards together */
.hero-band{margin-inline:calc(50% - 50vw);position:relative;padding-bottom:clamp(36px,4.5vw,64px);
  background:radial-gradient(120% 80% at 18% 0%,var(--hero-hi) 0%,var(--hero) 45%,var(--hero-lo) 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.25),inset 0 -50px 90px rgba(0,0,0,.2)}
.hero-band .stage{margin-inline:0;background:none;box-shadow:none}
.hero-band .statrow{position:relative;z-index:5;margin-top:calc(-1 * clamp(40px,4.5vw,64px));padding-inline:var(--edge)}
.hero-band .stat{box-shadow:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -14px 28px rgba(0,0,0,.07),0 30px 50px -28px rgba(0,0,40,.55),0 10px 20px -12px rgba(0,0,40,.3)}
.hero-band .stat-ink{box-shadow:inset 0 2px 1px rgba(255,255,255,.12),inset 0 -20px 40px rgba(0,0,0,.25),0 30px 50px -28px rgba(0,0,30,.7)}
@media (max-width:820px){.hero-band .statrow{margin-top:-28px}}
.hero-band .stage::before{display:none}
.hero-band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* traditional footer */
.site-foot{margin-top:clamp(80px,10vw,130px);border-top:1px solid var(--line);overflow:visible}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px clamp(24px,4vw,56px);padding-block:clamp(40px,5vw,64px) clamp(28px,4vw,44px)}
.ft-about b{font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.03em}
.ft-about p{margin:10px 0 0;color:var(--dim);font-size:15px;max-width:34ch}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:15px}
.ft-h{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.ft-col a:not(.btn-pill){color:var(--ink);text-decoration:none;font-weight:500}
.ft-soon{color:var(--dim)}
.ft-mail{font-weight:600;user-select:all}
.ft-btn{margin-top:6px;font-size:13px;padding:10px 16px}
.ft-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:20px 28px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.ft-bar a{color:var(--dim);text-decoration:none;font-weight:600}
@media (max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}.ft-about{grid-column:1/-1}}
@media (max-width:340px){.ft-grid{grid-template-columns:1fr}}

.palette{position:static;padding:4px;gap:2px;box-shadow:var(--clay-sm);background:var(--glass)}
.palette button{padding:4px;border-radius:50%}
.palette button i{width:20px;height:20px;display:block}
.palette button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink);background:transparent}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){.palette button{padding:3px}.palette button i{width:16px;height:16px}.links{gap:10px}}


@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Live site additions: base reset, CMS content, images, states ===== */
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;min-height:100vh}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--ink-inv);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{left:16px}

/* headshot and photos from the CMS */
.cutout img.head{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:bottom center;z-index:1;filter:drop-shadow(0 30px 40px rgba(0,0,30,.35))}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* posters and art with real images */
.poster img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster.empty{display:grid;place-items:center;background:linear-gradient(160deg,var(--hero-hi),var(--hero-lo))}
.poster.empty b{position:static;font-family:var(--f-display);font-weight:800;letter-spacing:-.04em;font-size:clamp(28px,6cqi,64px);color:#fff;text-align:center;padding:0 8%}
.art img{display:block;width:100%;height:auto}
.love b{font-weight:700;margin-left:2px}
.wk-hero img{display:block;width:100%;border-radius:var(--r-l);box-shadow:var(--clay)}
.gallery-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gallery-shots img{display:block;width:100%;border-radius:12px;box-shadow:var(--clay-sm)}
@media (max-width:600px){.gallery-shots{grid-template-columns:1fr}}
.empty-state{border:1px dashed var(--line);border-radius:var(--r-l);padding:clamp(28px,4vw,48px);text-align:center;color:var(--dim)}
.empty-state a{color:var(--link);font-weight:600}
.hs.is-empty{height:auto!important}
.hs.is-empty .hs-pin{position:relative;height:auto;padding-block:clamp(72px,9vw,120px) 0;background:transparent}

/* build thumbnails without a custom image */
.th-mono{display:grid;place-items:center;background:radial-gradient(120% 90% at 20% 0%,var(--hero-hi),var(--hero) 50%,var(--hero-lo))}
.th-mono b{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,5vw,64px);letter-spacing:-.05em;color:#fff;text-shadow:0 2px 0 var(--hero-lo),0 4px 0 var(--hero-lo),0 12px 24px rgba(0,0,30,.35)}
.th-img{background:var(--raise)}
.th-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* markdown content */
.prose h3,.post-body h3{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.02em;margin:28px 0 10px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:var(--ink-2);max-width:62ch}
.prose li{margin-bottom:8px}
.prose a,.post-body a{color:var(--link);font-weight:600;text-underline-offset:3px}
.prose img,.post-body img{display:block;border-radius:12px;margin:20px 0;box-shadow:var(--clay-sm)}
.prose blockquote,.post-body blockquote{margin:22px 0;padding:18px 22px;border-left:4px solid var(--hero);background:color-mix(in srgb,var(--hero) 8%,transparent);border-radius:0 12px 12px 0;font-size:19px;line-height:1.5;color:var(--ink);max-width:60ch}
.prose blockquote p,.post-body blockquote p{margin:0}
.prose pre,.post-body pre{background:#14151b;color:#e8e9f0;border-radius:12px;padding:18px 20px;overflow-x:auto;font:14px/1.6 ui-monospace,Menlo,Consolas,monospace;margin:20px 0;max-width:100%}
.prose code,.post-body code{font:.9em ui-monospace,Menlo,Consolas,monospace;background:color-mix(in srgb,var(--ink) 8%,transparent);padding:2px 6px;border-radius:6px}
.prose pre code,.post-body pre code{background:none;padding:0;font-size:inherit;color:inherit}
.post-body hr,.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.post-body ol{margin:0 0 22px;padding-left:22px}
.post-body .callout-box,.prose .callout-box{border-radius:12px;padding:18px 20px;background:var(--lilac);color:#121317;margin:20px 0}
.post-body .highlight,.prose .highlight{background:color-mix(in srgb,var(--pop) 45%,transparent);padding:0 4px;border-radius:4px}
ol.steps-md{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:st;max-width:62ch}
ol.steps-md li{position:relative;padding-left:58px;color:var(--dim);min-height:28px}
ol.steps-md li::before{counter-increment:st;content:counter(st,decimal-leading-zero);position:absolute;left:0;top:-2px;font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--accent);letter-spacing:-.02em}
ol.steps-md li strong{display:block;color:var(--ink);font-weight:600}
ul.defs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px}
ul.defs li{color:var(--dim);font-size:15px}
ul.defs li strong{display:block;font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
@media (max-width:600px){ul.defs{grid-template-columns:1fr}}
ul.chips-md{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
ul.chips-md li{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500;color:var(--ink);background:var(--glass)}

/* related builds and 404 */
.related{padding-block:clamp(56px,7vw,96px) 0}
.notfound{padding-block:clamp(140px,16vw,220px) 40px;text-align:left}
.notfound p{color:var(--ink-2);max-width:46ch;margin:18px 0 26px}

/* small toast for copy and send confirmations */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:90;background:var(--ink);color:var(--ink-inv);padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:var(--clay);opacity:0;transition:opacity .25s,translate .25s;pointer-events:none}
.toast.on{opacity:1;translate:-50% -6px}
.contact .sent p{color:#62656e}
.btn-pill[disabled]{opacity:.6;cursor:progress}
/* "Write another" sits on the white card, so it can't use the white-on-blue band style */
.contact .sent .btn-pill{background:linear-gradient(180deg,var(--hero-hi),var(--hero));border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 var(--hero-lo),0 16px 24px -12px var(--shadow-c)}
/* logo */
.brand{display:inline-flex;align-items:center;line-height:0}
.brand .wm{height:26px;width:auto;display:block}
.wm-ink{fill:var(--ink)}.wm-co{fill:var(--hero)}.wm-dot{fill:var(--pop)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wm-co{fill:var(--hero-hi)}}
:root[data-theme="dark"] .wm-co{fill:var(--hero-hi)}
@media (max-width:520px){.brand .wm{height:22px}}
/* note cover + share */
.post-cover{margin:clamp(28px,4vw,44px) 0 0;border-radius:18px;overflow:hidden;box-shadow:var(--clay-sm)}
.post-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.post-cover+.post-body{border-top:0}
.share-btns{display:flex;flex-wrap:wrap;gap:8px}
.share .btn-pill:not(.solid)::after{content:none}
.ar-row.has-cover{grid-template-columns:120px 130px minmax(0,1fr) 132px;align-items:center}
.ar-cover{width:132px;aspect-ratio:16/10;object-fit:cover;border-radius:10px;display:block}
@media (max-width:700px){.ar-row.has-cover{grid-template-columns:1fr}.ar-cover{width:100%;max-width:420px;order:-1}}

/* footer logo */
.ft-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;line-height:0}
.ft-logo img{width:40px;height:40px;border-radius:10px}
.ft-logo .wm{height:28px;width:auto;display:block}

/* drawn thumb: phone app */
.th-ph{background:linear-gradient(135deg,#2236c4,#3d5afe 55%,#7d91ff);display:grid;place-items:center}
.th-ph .ph{height:80%;width:auto;aspect-ratio:9/18;border-radius:14px;background:#f2f0eb;border:5px solid #121317;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:5px;padding:9px 7px 5px;box-shadow:0 18px 30px -14px rgba(0,0,30,.6)}
.th-ph .ph>i{height:5px;border-radius:3px;background:#d5d0c6}
.th-ph .ph>i.b{height:14px;border-radius:5px;background:#3d5afe}
.th-ph .ph span{grid-row:5;display:flex;justify-content:space-around;border-top:1px solid #e2ded5;padding-top:4px}
.th-ph .ph span i{width:5px;height:5px;border-radius:50%;background:#a8a296}
.th-ph .ph span i:first-child{background:#3d5afe}

/* demo: Noggin Pocket phone */
.pocket-wrap{display:grid;justify-items:center;padding:clamp(20px,4vw,40px) 0;background:linear-gradient(160deg,color-mix(in srgb,var(--hero) 14%,var(--bg)),var(--bg));border-radius:18px}
.pocket{position:relative;width:300px;max-width:86vw;aspect-ratio:9/18.5;border-radius:46px;background:var(--bg);border:10px solid #121317;box-shadow:0 0 0 1px #2a2b33,0 40px 60px -30px rgba(0,0,30,.55);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;font-size:13px;color:var(--ink);text-align:left}
.pk-notch{position:absolute;top:8px;left:50%;translate:-50% 0;width:88px;height:24px;border-radius:14px;background:#121317;z-index:2}
.pk-status{display:flex;justify-content:space-between;align-items:center;padding:12px 24px 4px;font-weight:700;font-size:12px}
.pk-sig{display:flex;gap:2px;align-items:flex-end}.pk-sig i{width:3px;background:var(--ink);border-radius:1px}.pk-sig i:nth-child(1){height:5px}.pk-sig i:nth-child(2){height:8px}.pk-sig i:nth-child(3){height:11px}
.pk-screen{padding:14px 16px;overflow:hidden}
.pk-screen h4{margin:6px 0 2px;font:800 21px/1.1 var(--f-display);letter-spacing:-.03em}
.pk-sub{margin:0 0 14px;color:var(--dim);font-size:12px}
.pk-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pk-qa{display:grid;gap:6px;justify-items:start;padding:10px;border-radius:14px;background:var(--raise);border:1px solid var(--line);color:var(--ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer}
.pk-qa i{font-style:normal;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--hero) 14%,transparent);color:var(--hero);font-size:14px}
.pk-qa b{font-size:12px}
.pk-qa.pri{background:linear-gradient(160deg,var(--hero-hi),var(--hero));color:#fff;border-color:transparent}
.pk-qa.pri i{background:rgba(255,255,255,.2);color:#fff}
.pk-prog{height:5px;border-radius:3px;background:var(--line);margin-top:10px;overflow:hidden}
.pk-prog i{display:block;height:100%;width:0;background:var(--hero);transition:width .12s}
.pk-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pk-stats div{padding:10px;border-radius:12px;background:var(--raise);border:1px solid var(--line)}
.pk-stats b{display:block;font:800 22px/1 var(--f-display);letter-spacing:-.03em}
.pk-stats span{font-size:10.5px;color:var(--dim)}
.pk-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.pk-row:first-of-type{border-top:0;margin-top:8px}
.pk-row>i{font-style:normal;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--raise);border:1px solid var(--line);font-weight:800;font-size:11px;color:var(--dim)}
.pk-row b{display:block;font-size:12px;line-height:1.3}
.pk-row small{color:var(--dim);font-size:10.5px}
.pk-row em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a46a00;border:1px solid currentColor;border-radius:999px;padding:1px 6px}
.pk-msg{padding:10px;border-radius:12px;background:color-mix(in srgb,var(--hero) 7%,var(--raise));border:1px solid var(--line);margin-top:8px}
.pk-msg.read{background:var(--raise)}
.pk-msg p{margin:4px 0 8px;color:var(--ink-2);font-size:12px;line-height:1.4}
.pk-msg button{font:600 11px var(--f-body);padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.pk-msg.read button{display:none}
.pk-dock{display:grid;grid-template-columns:repeat(3,1fr);padding:6px 6px 14px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--raise) 90%,transparent)}
.pk-dock a{display:grid;justify-items:center;gap:1px;font-size:10px;font-weight:600;color:var(--dim);text-decoration:none;position:relative}
.pk-dock a i{font-style:normal;font-size:17px;line-height:1.2}
.pk-dock a[aria-current="page"]{color:var(--hero)}
.pk-dock em{position:absolute;top:-2px;left:calc(50% + 6px);font-style:normal;font-size:9px;font-weight:700;background:var(--hero);color:#fff;border-radius:999px;padding:0 5px}
.pk-dock em[hidden]{display:none}

/* ===== orbit: phone menu =====
   A hamburger in the header. Tapping it drops the pages down as planets on an arc that
   hangs under the nav. Tap a planet, or press the button and slide onto one. */
.burger,.orbit{display:none}
@media (max-width:860px){
  .theme{display:none}
  .burger{display:grid}
  .orbit{display:block}
}
.burger{position:relative;width:44px;height:44px;border-radius:50%;padding:0;place-items:center;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  border:0;background:var(--ink);color:var(--ink-inv);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.22),0 3px 0 color-mix(in srgb,var(--ink) 70%,#000),0 10px 18px -8px rgba(0,0,30,.45);
  transition:scale .3s cubic-bezier(.3,1.6,.5,1),background .3s}
.burger:active{scale:.92}
.burger span{position:absolute;left:13px;width:18px;height:2.2px;border-radius:2px;background:currentColor;transition:translate .35s cubic-bezier(.3,1.5,.5,1),rotate .35s cubic-bezier(.3,1.5,.5,1),opacity .2s,width .3s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px;width:12px}
.burger span:nth-child(3){top:27px}
.orbit-open .burger{background:linear-gradient(180deg,var(--hero-hi),var(--hero));color:#fff}
.orbit-open .burger span:nth-child(1){translate:0 6px;rotate:45deg}
.orbit-open .burger span:nth-child(2){opacity:0;width:0}
.orbit-open .burger span:nth-child(3){translate:0 -6px;rotate:-45deg}

.orbit-scrim{position:fixed;inset:0;z-index:58;opacity:0;pointer-events:none;transition:opacity .35s;
  background:radial-gradient(140% 70% at 50% 0%,color-mix(in srgb,var(--hero) 62%,transparent),color-mix(in srgb,var(--hero-lo) 42%,rgba(8,10,30,.45)) 60%,rgba(8,10,30,.35));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.orbit.open .orbit-scrim{opacity:1;pointer-events:auto}
.orbit-menu{--r:180px;--bx:0px;position:fixed;left:50%;top:40px;z-index:61;width:0;height:0;pointer-events:none}
.orbit-menu::before{pointer-events:none}
.orb{pointer-events:none}
.orbit.open .orb{pointer-events:auto}
.orbit-menu::before{content:"";position:absolute;left:calc(-1 * var(--r));top:calc(-1 * var(--r));width:calc(2 * var(--r));height:calc(2 * var(--r));border-radius:50%;border:1.5px dashed rgba(255,255,255,.55);scale:.15;opacity:0;transition:scale .55s cubic-bezier(.3,1.35,.5,1),opacity .3s}
.orbit.open .orbit-menu::before{scale:1;opacity:1}
.orb{--a:90deg;--c:var(--sky);position:absolute;left:0;top:0;width:0;height:0;text-decoration:none;outline:none;
  transform:translate(var(--bx),0) rotate(calc(var(--a) - 80deg)) translateX(0) rotate(calc(80deg - var(--a)));
  transition:transform .5s cubic-bezier(.3,1.35,.5,1) calc((4 - var(--i)) * 25ms)}
.o1{--a:140deg;--c:var(--butter)}.o2{--a:115deg;--c:var(--mint)}.o3{--a:90deg;--c:var(--sky)}.o4{--a:65deg;--c:var(--blush)}.o5{--a:40deg;--c:var(--lilac)}
.orbit.open .orb{transform:translate(0,0) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));transition-duration:.6s;transition-delay:calc(var(--i) * 45ms)}
.orb-ball{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#14152a;scale:.3;opacity:0;
  background:radial-gradient(circle at 34% 26%,#fff 0,var(--c) 52%,color-mix(in srgb,var(--c) 72%,#1b1f4a));
  box-shadow:inset 0 -6px 10px rgba(0,0,30,.14),inset 0 2px 1px rgba(255,255,255,.8),0 14px 22px -10px rgba(0,0,30,.55);
  transition:scale .5s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 45ms),opacity .25s calc(var(--i) * 45ms),box-shadow .2s}
.orbit.open .orb-ball{scale:1;opacity:1}
.orb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.orb b{position:absolute;left:0;top:36px;translate:-50% 0;white-space:nowrap;font:700 12.5px/1 var(--f-body);letter-spacing:.01em;color:#fff;text-shadow:0 1px 8px rgba(0,0,30,.6);opacity:0;transition:opacity .3s calc(.15s + var(--i) * 45ms)}
.orbit.open .orb b{opacity:1}
.orb.hot .orb-ball,.orb:focus-visible .orb-ball{scale:1.22;box-shadow:inset 0 -6px 10px rgba(0,0,30,.14),inset 0 2px 1px rgba(255,255,255,.8),0 0 0 4px rgba(255,255,255,.6),0 18px 26px -10px rgba(0,0,30,.6)}
.orb[aria-current] .orb-ball::after{content:"";position:absolute;top:-11px;width:6px;height:6px;border-radius:50%;background:#fff}
.orbit-tip{position:fixed;left:0;right:0;z-index:61;top:300px;margin:0;text-align:center;color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity .3s}
.orbit.open .orbit-tip{opacity:.85;transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .orb,.orb-ball,.orbit-menu::before,.burger span{transition-duration:.01s!important;transition-delay:0s!important}
}

/* ===== blueprint: guided tour on phones ===== */
.xr-tour{display:none}
.blue .lp .xr-pin{display:none}
@media (hover:none),(max-width:700px){
  .xr-tour{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;gap:10px 12px;align-items:center;margin-top:18px}
  .xr-frame.touring .blue .lp .note{display:none}
  .xr-frame.touring .blue .lp .xr-pin{position:absolute;left:-3.4cqi;top:50%;transform:translateY(-50%);z-index:4;display:grid;place-items:center;width:6.4cqi;height:6.4cqi;border-radius:50%;font:800 3.4cqi/1 var(--f-body);font-style:normal;background:#efe2c4!important;color:#231a08!important;-webkit-text-fill-color:#231a08;outline:0!important;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .xr-frame.touring .blue .lp .xr-pin[hidden]{display:none}
  .xr-frame.touring .blue .lp .xr-pin.on{transform:translateY(-50%) scale(1.25);background:var(--lilac)!important}
  .xr-frame.touring.full .blue .lp .xr-pin.on{transform:translateY(-50%);background:#efe2c4!important}
}
.xr-cap{margin:0;min-height:4.4em;display:grid;align-content:center;font-size:16px;line-height:1.4;font-weight:600;color:var(--ink)}
.xr-cap b{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lilac);margin-bottom:4px}
.xr-step{width:46px;height:46px;border-radius:50%;border:1px solid rgba(241,239,233,.3);background:rgba(255,255,255,.06);color:#f1efe9;display:grid;place-items:center;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;transition:transform .2s,background .2s}
.xr-step:active{transform:scale(.92);background:rgba(255,255,255,.14)}
.xr-step svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.xr-dots{grid-column:1/-1;display:flex;justify-content:center;gap:8px}
.xr-dots button{width:8px;height:8px;border-radius:4px;border:0;padding:0;background:#f1efe9;opacity:.3;cursor:pointer;transition:width .3s,opacity .3s,background .3s}
.xr-dots button[aria-current="true"]{width:22px;opacity:1;background:var(--lilac)}
.xr-all{grid-column:1/-1;margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:10px}
.xr-all li{counter-increment:n;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font-size:15px;line-height:1.4;color:var(--ink-2)}
.xr-all li::before{content:counter(n);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#efe2c4;color:#231a08;font-weight:800;font-size:12px}
.xr-tour.all .xr-step,.xr-tour.all .xr-cap,.xr-tour.all .xr-dots{display:none}
/* the sample phone number in the blueprint is fake, so never let a phone turn it into a call link */
.xr-frame a[href^="tel:"],.xr-frame a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;pointer-events:none!important}

/* ===== hero with a real headshot =====
   The photo lines up with the right edge of the content, so on wide screens it sits above the
   stat cards instead of hanging past them. The bottom fades out softly behind the cards, and the
   sticker and ring move off the body. */
.cutout img.head{-webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 84%,transparent 100%)}
@media (min-width:821px){
  .with-head{--hw:clamp(250px,31%,390px);--cx:calc(100% - var(--edge) - var(--hw) / 2 - 1%)}
  .with-head .cutout{left:var(--cx);width:var(--hw)}
  .with-head .badge{left:calc(var(--cx) + var(--hw) / 2 - 54px)}
  .with-head .sticker{left:auto;right:calc(100% - var(--cx) + var(--hw) * .2);top:27%}
  .with-head .o-ring{right:auto;left:calc(var(--cx) - var(--hw) * .66);top:62%}
}

/* About header: a calmer headline beside the photo. The photo has no card behind it; it stands
   on the bottom edge of the block like you're inside it, with a warm light from the upper left
   that matches the yellow orb on the homepage. */
.ab-head{align-items:stretch;position:relative;overflow:hidden;isolation:isolate;padding-bottom:0;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.ab-head>div:first-child{align-self:center;padding-bottom:clamp(24px,5vw,72px)}
.ab-head .big{font-size:clamp(34px,4.3vw,62px);line-height:1;letter-spacing:-.04em;max-width:13ch;text-wrap:balance}
.ab-head .lede{margin-top:22px}
.ab-head .ab-portrait{align-self:stretch;aspect-ratio:auto;min-height:clamp(340px,36vw,520px);max-width:none;margin:0;border-radius:0;background:none!important;box-shadow:none;overflow:visible}
.ab-head .ab-portrait img{inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom center;z-index:1;filter:drop-shadow(0 18px 30px rgba(20,22,52,.18))}
/* the same clay sun as the homepage hero, sitting behind you, a touch up and to the left */
.ab-head .ab-portrait::before{content:"";position:absolute;z-index:0;left:50%;bottom:16%;width:min(92%,440px);aspect-ratio:1;border-radius:50%;translate:-54% 0;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,#fff 0,color-mix(in srgb,var(--pop) 45%,#fff) 9%,var(--pop) 42%,color-mix(in srgb,var(--pop) 62%,#6b3d00) 100%);
  box-shadow:inset -18px -26px 50px rgba(120,60,0,.25),0 40px 60px -30px rgba(0,0,30,.35)}
.ab-head .ab-portrait svg{z-index:1}
@media (max-width:860px){
  .ab-head{grid-template-columns:1fr}
  .ab-head .big{font-size:clamp(32px,9vw,46px)}
  .ab-head .ab-portrait{min-height:0;aspect-ratio:4/5;width:100%;max-width:420px;justify-self:center;margin-top:-8px}
}