/* The home page (27 Sep 2026), after heynesh.com: warm stone ground, one loud yellow, black type, dark glass tiles.
   Archivo (its wide cut for the name, its normal cut for headings) and Inter Tight for reading.
   Motion is split in two: js/site.js writes `transform` and scroll-linked opacity (the hero parts travelling into the
   sidebar, the journey curve, the work track); the entrance and the reveals here use the separate `translate`,
   `scale`, `opacity` and `filter` properties on inner elements, so the two never fight. */
:root{
 --stone:#D5CFBE; --stone2:#E0DFC5; --card:rgba(223,222,206,.8); --y:#FFFF23; --ink:#000; --ink2:#222; --grey:#4d4c47; --mute:#5f5e57;
 --glass:rgba(194,184,172,.3); --hair:rgba(255,255,255,.2); --paper:#F8F7F3; --pill:#EBEADA; --line:rgba(0,0,0,.12);
 --side:258px; --gap:clamp(16px,2vw,28px); --pad:clamp(20px,3.2vw,48px); --r:5.3px;
 --ease:cubic-bezier(.65,0,.35,1); --out:cubic-bezier(.16,1,.3,1); --p2:cubic-bezier(.33,1,.68,1);
 --head:'Archivo','Arial',sans-serif; --body:'Inter Tight','Arial',sans-serif;
 --dock:1;
}
html.js{--dock:0}
*,*:before,*:after{box-sizing:border-box}
body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--head);margin:0;letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}

/* ---------- shared parts ---------- */
.btn,.side-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:7.8px;border:0;font:600 15px/1 var(--body);text-decoration:none;cursor:pointer;transition:background-color .25s,color .25s}
.btn-y{background:var(--y);color:var(--ink)}
/* the figure tiles, after his: stone glass that reads dark over the t-shirt, a yellow number and two short lines in
   white. The hero ones are exactly 1.5x the sidebar ones (x --ts, which follows the screen height), same layout, so
   they shrink into the sidebar without reflowing */
.tile{position:relative;background:var(--glass);color:#fff;border:1px solid var(--hair);border-radius:var(--r);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center}
.tile .mi{display:flex;align-items:center;justify-content:center}
.tile b{display:block;font:700 calc(54px * var(--ts,1))/.86 var(--head);color:var(--y);letter-spacing:-.04em}
.tile .mi>span{display:block;font:500 calc(16.5px * var(--ts,1))/1.1 var(--body)}
.t-row .mi{gap:calc(12px * var(--ts,1));text-align:left}
.t-col .mi{flex-direction:column;gap:calc(10px * var(--ts,1));text-align:center}
.label{margin:0 0 12px}
/* section heads as his: an outlined pill label, a two-line heading with a soft dark gradient in the letters, one
   paragraph in plain ink */
.label span{display:inline-block;border:2px solid rgba(0,0,0,.3);color:var(--ink);font:700 13.5px/1 var(--body);text-transform:uppercase;letter-spacing:.01em;padding:4px 10px 3px;border-radius:70px;white-space:nowrap}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,380px);gap:12px var(--gap);align-items:end;margin-bottom:clamp(32px,5vw,72px)}
.sec-head .label{grid-column:1/-1}
.sec-head h2,.sec-head h1{font-weight:600;font-size:clamp(40px,4.6vw,76px);line-height:1;margin-bottom:8px}
.sec-head :is(h1,h2) .ln>span{background:linear-gradient(266deg,#3d3d3d 11.86%,#000 92.59%);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.sec-intro{margin:0;color:var(--ink);font-size:17px;line-height:1.6;max-width:26em}
/* icons: small drawn shapes, no icon font */
.ic{display:inline-block;width:14px;height:14px;flex:none;position:relative}
.ic-home{border:2px solid currentColor;border-top:0;border-radius:0 0 2px 2px;height:10px;margin-top:4px}
.ic-home:before{content:"";position:absolute;left:-3px;top:-7px;border:8px solid transparent;border-bottom:6px solid currentColor;border-top:0}
.ic-path{border:2px solid currentColor;border-radius:50% 0 50% 0}
.ic-grid{background:conic-gradient(currentColor 25%,transparent 0 50%,currentColor 0 75%,transparent 0)}
.ic-mail{border:2px solid currentColor;border-radius:2px;height:11px;margin-top:2px}
.ic-spark{background:var(--y);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ic-play{background:var(--y);clip-path:polygon(10% 0,100% 50%,10% 100%)}
.ic-square{background:var(--y);border-radius:3px}
.ic-cube{background:var(--y);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.ic-dot{background:var(--y);border-radius:50%}
/* text split into lines (js): each line rises out of its own mask */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block}

/* ---------- 1 hero: its parts travel into the sidebar over the first 900px of scroll; the content stays pinned for
   the first 400 of them, then the journey slides in over the rest ---------- */
.hero{position:relative;height:calc(100vh + 400px);height:calc(100svh + 400px)}
.hero-pin{position:sticky;z-index:3;top:0;height:100vh;height:100svh;min-height:600px;overflow:hidden}
.hero-word{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;pointer-events:none}
.hero-word>span,.logo{font:900 30vw/.8 var(--head);font-stretch:75%;color:var(--y);letter-spacing:-.045em;white-space:nowrap;padding-bottom:.04em}
.hero-word>span{flex:none;margin-top:1.2vw;display:flex;overflow:hidden}
.ch{display:inline-block}
.hero-nav{position:absolute;left:var(--pad);right:var(--pad);top:var(--navY,24vw);display:flex;justify-content:space-between;font:700 14px/1 var(--body);text-transform:uppercase;letter-spacing:.02em}
.hero-nav div{display:flex}
.hero-nav a{text-decoration:none;padding:0 12px;border-left:1px solid rgba(0,0,0,.4)}
.hero-nav div a:first-child{padding-left:0;border-left:0}
.hero-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.photo-fx{position:absolute;z-index:2;left:0;right:0;top:0;height:100vh;height:100svh;overflow:hidden;pointer-events:none;transform-origin:50% 40%}
.hero-photo{position:absolute;left:50%;top:1vh;height:min(150vh,190vw);width:auto;max-width:none;translate:-50% 0;transform-origin:50% 30%}
.hero-ui{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:4vh;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;column-gap:calc(40px * var(--ts,1))}
.hero-stats{justify-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:calc(22px * var(--ts,1));margin-top:calc(44px * var(--ts,1))}
.hero-stats .t-row{width:calc(214px * var(--ts,1));height:calc(104px * var(--ts,1))}
.hero-stats .t-col{width:calc(141px * var(--ts,1));height:calc(152px * var(--ts,1));margin-left:calc(44px * var(--ts,1))}
.hero-mid{text-align:center}
.hero-mid h1{font-weight:700;font-size:clamp(36px,min(3.8vw,6vh),64px);line-height:1;color:var(--paper);letter-spacing:-.03em}
.hl{display:block}
.hero-btns{display:flex;gap:10px;margin-top:22px;justify-content:center}
.hero-traits{justify-self:start;list-style:none;margin:calc(16px * var(--ts,1)) 0 0;padding:calc(24px * var(--ts,1)) calc(33px * var(--ts,1)) calc(24px * var(--ts,1)) calc(24px * var(--ts,1));border:0;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);display:grid;gap:calc(12px * var(--ts,1));font:500 calc(16.5px * var(--ts,1))/1.1 var(--body)}
.hero-traits li{display:flex;align-items:center;gap:calc(10px * var(--ts,1))}
.hero-traits .ic{width:calc(18px * var(--ts,1));height:calc(18px * var(--ts,1))}
.hero-foot{position:absolute;z-index:4;bottom:clamp(20px,3vh,32px);margin:0;font-size:14px;line-height:1.35;width:min(200px,14vw)}
.hero-foot-l{left:var(--pad)}
.hero-foot-r{right:var(--pad)}
@media (min-width:768px){.photo-fx{position:fixed}}

/* ---------- the sidebar ---------- */
/* .m parts are moved by js/site.js; .box parts draw their ground on .m-bg (scaled on its own, the corners kept round
   by --bx/--by) and their content in .mi; .dk parts only fade in as the sidebar docks (--dock goes 0 to 1) */
.m{transform-origin:50% 50%}
.box{background:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.m-bg{position:absolute;inset:0;border-radius:calc(var(--br,5.3px) / var(--bx,1)) / calc(var(--br,5.3px) / var(--by,1));transform:scale(var(--bx,1),var(--by,1));background:var(--glass);border:1px solid var(--hair);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.mi{position:relative;display:block}
.box>.mi{position:absolute;inset:0;transform:scale(var(--cs,1))}
.logo{position:fixed;z-index:1;left:0;top:0;display:flex;overflow:hidden;text-decoration:none;transform-origin:0 0;color:color-mix(in srgb,var(--y) calc((1 - var(--dock)) * 100%),#000)}
.logo.up{z-index:60}
html:not(.js) .logo{display:none}
/* the sidebar, laid out as his (measured 27 Sep 2026): a name card (yellow badge, the two social squares, one line),
   the two figures in one card, the menu as a column of pills, the email as a pill with copy, Let's talk */
.side{position:fixed;z-index:50;left:var(--gap);top:var(--gap);width:258px;transform-origin:0 0;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.side>*{pointer-events:auto}
.side-card{position:relative;border-radius:var(--r);padding:12px}
.side-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--card);border:1px solid var(--hair);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);opacity:var(--dock);transition:background-color .3s,border-color .3s}
.side-card>*{position:relative}
.dk{opacity:var(--dock)}
.js .side:not(.show) .dk{visibility:hidden}
.side-row{display:flex;justify-content:space-between;align-items:center}
.side-slot{display:block;width:104px;height:30px;border-radius:var(--r);background:var(--y);opacity:var(--dock)}
.side-soc{display:flex;gap:4px}
.soc{width:24px;height:24px;display:grid;place-items:center;border-radius:var(--r);background:var(--pill);border:1px solid rgba(0,0,0,.1);color:var(--ink);font:700 11px/1 var(--body);text-decoration:none;transition:background-color .3s,color .2s}
.soc:hover{background:#C9C8BA}
.side-top p{margin:18px 0 0;font-size:13px;line-height:1.55}
/* the two figures, each its own box (Hamed, 27 Sep 2026: "this could be 2 separate box with a better layout"). The
   box's ground still travels from the hero tile (the dock), the hero's own words fade where they are, and the box's
   layout (number over label, left-aligned) fades in as it lands */
.side-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.side-stats .tile{--br:var(--r);width:auto;height:92px;padding:14px 16px;display:block}
.side-stats .m-bg{background:color-mix(in srgb,rgba(194,184,172,.3) calc((1 - var(--dock)) * 100%),var(--card));border-color:var(--hair)}
.side-stats .box>.mi{inset:0;transform:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:0;padding:14px 16px;text-align:left}
.side-stats .mi>*{opacity:var(--dock)}
/* the hero's wording, carried inside the travelling box at the hero's size (in the sidebar's scaled units), fading
   as the box leaves the hero */
.side-stats .mi-hero{position:absolute;left:50%;top:50%;width:var(--gw,100%);height:var(--gh,100%);translate:-50% -50%;scale:var(--hk,1);opacity:var(--hf,0);display:flex;align-items:center;justify-content:center;color:#fff;pointer-events:none}
.side-stats .mi-hero.t-row{gap:calc(12px * var(--tsh,1) / var(--S,1));text-align:left}
.side-stats .mi-hero.t-col{flex-direction:column;gap:calc(10px * var(--tsh,1) / var(--S,1));text-align:center}
.side-stats .mi-hero b{font:700 calc(54px * var(--tsh,1) / var(--S,1))/.86 var(--head);color:var(--y);letter-spacing:-.04em}
.side-stats .mi-hero>span{font:500 calc(16.5px * var(--tsh,1) / var(--S,1))/1.1 var(--body);color:#fff}
.js body:not(.in) .side-stats .mi-hero{opacity:0}
.js .side-stats .mi-hero{filter:blur(8px)}
body.in .side-stats .mi-hero{filter:none;transition:filter .6s calc(1s + var(--i,0) * .1s)}
.side-stats b{font-size:34px;line-height:.9}
.side-stats .mi>span{font-size:12.5px;line-height:1.2;color:var(--ink)}
.side-stats.dark .m-bg{background:rgba(29,29,29,.6);border-color:rgba(255,255,255,.1)}
.side-stats.dark .mi>span{color:rgba(255,255,255,.9)}
.side-nav{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;flex:1 1 auto}
.side-nav>a{position:relative;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 9px;border-radius:var(--r);text-decoration:none;font:600 12.5px/1 var(--body);text-transform:uppercase;letter-spacing:.02em}
.side-nav>a:before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--pill);border:1px solid rgba(0,0,0,.1);opacity:var(--dock);transition:background-color .3s,border-color .3s}
.side-nav>a:hover:before{background:#C9C8BA}
.side-nav>a.cur:before,.side-nav>a.cur:hover:before{background:var(--y);border-color:transparent}
.side-nav>a>*{position:relative}
.side-nav .ic{transition:color .3s}
.side-nav>a:not(.cur):hover .ic{color:var(--y)}
.t{display:inline-block;overflow:hidden;padding:2px 0;margin:-2px 0;white-space:nowrap}
.t>span{display:block}
.side-mail{padding:6px}
.mail{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:32px;padding:0 30px;border:1px solid rgba(0,0,0,.05);border-radius:4px;background:var(--pill);color:inherit;font:400 13px/1 var(--body);cursor:pointer;transition:background-color .3s}
.mail:hover{background:#C9C8BA}
.mail-t,.ic-copy{transition:opacity .3s}
.mail:hover .mail-t,.mail:hover .ic-copy{opacity:.35}
.ic-copy{position:absolute;right:12px;top:50%;width:11px;height:11px;margin-top:-5px;border:1.5px solid currentColor;border-radius:2px}
.ic-copy:before{content:"";position:absolute;left:-5px;top:-5px;width:8px;height:8px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;border-radius:2px 0 0 0}
.tip{position:absolute;right:-6px;bottom:calc(100% + 6px);padding:6px 8px;border-radius:4px;background:var(--pill);color:var(--ink);font:500 11px/1 var(--body);white-space:nowrap;opacity:0;translate:0 10px;pointer-events:none;transition:opacity .3s cubic-bezier(.55,0,1,.45),translate .3s cubic-bezier(.55,0,1,.45),background-color .3s}
.mail:hover .tip,.mail:focus-visible .tip{opacity:1;translate:0 0;transition:opacity .3s cubic-bezier(.5,1,.89,1),translate .3s cubic-bezier(.5,1,.89,1),background-color .3s}
.mail.copied .tip{background:var(--y)}
.side-cta{--br:7.8px;position:relative;width:100%;padding:0;color:var(--ink)}
.side-cta .m-bg{background:var(--y);backdrop-filter:none;-webkit-backdrop-filter:none}
.side-cta .mi{display:flex;align-items:center;justify-content:center}
/* the rolling hover (his ButtonHover): each word rolls up and out while its copy rolls in from below, 0.5s,
   50ms apart; it rolls on every entry and does not roll back on leave */
.roll{display:inline-flex;position:relative;overflow:hidden;vertical-align:top;white-space:nowrap}
.roll .ra,.roll .rb{display:inline-flex;gap:.28em}
.roll .rb{position:absolute;left:0;top:0}
.t .rb{top:2px}
.roll .rw{display:inline-block}
.roll .rb .rw{translate:0 110%}
/* over dark sections each sidebar part goes dark (his ThemeSwitcher, his values) */
.side>*{transition:color .3s}
.side .dark:not(.side-cta){color:rgba(255,255,255,.9)}
.side-card.dark:before{background:rgba(29,29,29,.6);border-color:rgba(255,255,255,.1)}
.side-top.dark:before{background:rgba(29,29,29,.9)}
.side-top.dark .soc{background:#393939;color:#fff;border-color:transparent}
.side-top.dark .soc:hover{background:#5e5e5e}
.side-nav.dark>a:before{background:rgba(57,57,57,.9);border-color:rgba(255,255,255,.03)}
.side-nav.dark>a:hover:before{background:rgba(94,94,94,.5)}
.side-nav.dark>a.cur{color:var(--ink)}
.side-nav.dark>a.cur:before{background:var(--y)}
.side-stats.dark .mi>span{color:rgba(255,255,255,.9)}
.side-mail.dark .mail{background:rgba(94,94,94,.5);border-color:transparent}
.side-mail.dark .mail:hover{background:rgba(120,120,120,.5)}

/* ---------- 2 journey ---------- */
main>section:not(.hero),.foot{position:relative;z-index:4;padding:clamp(80px,10vw,140px) var(--pad);padding-left:calc(var(--side) + var(--gap) * 2 + var(--pad) * .5)}
.journey{padding-bottom:clamp(120px,14vw,200px)!important}
.journey .sec-head{grid-template-columns:minmax(0,440px);margin-bottom:40px}
.tl{position:relative}
.tl-draw{position:absolute;left:0;right:0;top:0;height:0;overflow:hidden;pointer-events:none}
.tl-svg{position:absolute;left:0;top:0;overflow:visible}
.tl-path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.tl-tail{fill:none;stroke:var(--ink);stroke-width:2.2}
.jc{position:absolute;left:0;top:0;width:var(--cw,426px)}
.jc-dot{position:absolute;bottom:calc(-1 * var(--dy,11px) - 4.5px);width:9px;height:9px;border-radius:50%;background:var(--y);border:2px solid var(--ink)}
.jc[data-side=l] .jc-dot{left:calc(-1 * var(--lg,22px) - 4.5px)}
.jc[data-side=r] .jc-dot{right:calc(-1 * var(--lg,22px) - 4.5px)}
.jc-card{position:relative;background:var(--card);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:28px 30px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.jc[data-side=l] .jc-card{transform-origin:0 100%}
.jc[data-side=r] .jc-card{transform-origin:100% 100%}
/* the year: yellow like his, with an ink edge so it reads on the pale card */
.jc-yr{display:flex;margin:0 0 18px;font:700 72px/1 var(--head);letter-spacing:-.04em;color:var(--y);height:1em;overflow:hidden}
.dg{display:block;height:1em;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dg-t{display:flex;flex-direction:column}
.dg-t i{font-style:normal;height:1em;display:block}
.jc h3{font-weight:600;font-size:24px;line-height:1.1;margin:0 0 10px}
.jc p.sl{margin:0;color:rgba(0,0,0,.8);font-size:16px;line-height:1.6}
.jc-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;line-height:1.3;color:var(--mute)}
.jc-co{flex:none;background:var(--ink);color:#fff;border-radius:6px;padding:7px 9px 6px;font:600 12px/1 var(--body)}

/* ---------- 3 work ---------- */
.work{position:relative;background:#111;color:#fff;border-radius:28px 28px 0 0}
.work .sec-intro{color:rgba(255,255,255,.85)}
.work .sec-head h2 .ln>span{background-image:linear-gradient(266deg,#bdbdbd 11.86%,#fff 92.59%)}
.work .label span{border-color:rgba(255,255,255,.3);color:#fff}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filters button{border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;border-radius:999px;padding:9px 14px;font:600 13px/1 var(--body);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.filters button:hover{border-color:#fff}
.filters button[aria-pressed="true"]{background:var(--y);color:var(--ink);border-color:var(--y)}
.filters button span{opacity:.6;margin-left:6px}
.track{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--gap)}
.card{position:relative;display:flex;flex-direction:column;background:#1c1c1a;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff}
.card-im{position:relative;flex:1;min-height:200px;overflow:hidden;background:#2a2a27}
.card-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-im:after{content:"";position:absolute;inset:-1px;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .4s}
.track:hover .card:not(:hover) .card-im:after{opacity:1}
.card-tags{position:absolute;left:12px;top:12px;display:flex;flex-wrap:wrap;gap:6px}
.card-tags span{background:rgba(0,0,0,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;border-radius:6px;padding:6px 8px;font:600 11px/1 var(--body)}
.card-body{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;gap:6px 14px;padding:18px 20px 20px;align-items:start;box-sizing:border-box}
.card-meta{align-self:end}
.card-body h3{font-weight:700;font-size:24px;line-height:1.05}
.card-body p{grid-column:1;margin:0;color:#b5b4ad;font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{grid-column:1;font-size:12px;color:#9a9992;text-transform:uppercase;letter-spacing:.05em}
.card-go{grid-column:2;grid-row:1/span 3;align-self:end;position:relative;overflow:hidden;width:40px;height:40px;border-radius:50%;background:var(--y);color:var(--ink);font:700 17px/1 var(--body);transition:background-color .3s,color .3s}
.card-go i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;transition:translate .25s}
.card-go i+i{translate:-100% 100%}
.card:hover .card-go i{translate:100% -100%}
.card:hover .card-go i+i{translate:0 0}
.track:hover .card:not(:hover) .card-go{background:#2f2f2f;color:#8c8c8c}
.card.hide{display:none}
/* desktop: the track runs sideways, pinned for as long as it takes to pass */
@media (min-width:768px){
 main>section.work{padding:0}
 .work-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;overflow:hidden;padding:clamp(40px,6vh,72px) 0 clamp(24px,4vh,48px) calc(var(--side) + var(--gap) * 2 + var(--pad) * .5)}
 .work .sec-head{margin-bottom:clamp(16px,3vh,32px);padding-right:var(--pad)}
 .work .sec-head h2{font-size:clamp(40px,5vw,80px)}
 .track-wrap{flex:1;min-height:0;padding-left:55%}
 .work.filtered .track-wrap{padding-left:0} /* his: the first card starts near the right edge, then the track slides in */
 .track{display:flex;height:100%;gap:18px;padding-right:var(--pad);width:max-content}
 .card{width:clamp(260px,23vw,360px);height:100%}
}

/* ---------- contact ---------- */
.foot{background:#111;color:#fff;padding-top:clamp(40px,6vw,80px)}
.foot h2{font-weight:800;font-size:clamp(34px,4.6vw,76px);line-height:1;color:var(--y);max-width:17em}
.foot h2 span{color:#fff}
.foot-row{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 56px}
.foot-meta{display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:14px;color:#b5b4ad}
.foot-meta a{text-decoration:none;color:#fff}
.foot-meta a:hover{color:var(--y)}

/* ---------- entrance (body.in), after his preloader: the name rises letter by letter, the photo grows in, the
   heading lines sharpen, the nav rises, the tiles and buttons sharpen in turn, the side notes rise last.
   html.js gates the hidden states, so without JS everything is visible ---------- */
.js .ch{translate:0 110%}
.js .hero-photo{opacity:0;scale:.88}
.js .hl{opacity:0;scale:.9;filter:blur(10px)}
.js .t>span,.js .hero-nav a{translate:0 105%}
.js .t .rb{translate:none}
.js .hero-nav div{clip-path:inset(-4px 0 -4px 0)}
.js .side-stats .mi,.js .side-stats .m-bg,.js .hero-traits li{opacity:0;filter:blur(8px)}
.js .side-cta .m-bg,.js .side-cta .mi,.js .hero-see{opacity:0;scale:.94;filter:blur(10px)}
.js .hero-foot .ln>span{translate:0 100%;filter:blur(6px)}
body.in .ch{translate:none;transition:translate .9s var(--out) calc(var(--i) * 70ms)}
body.in .hero-photo{opacity:1;scale:1;transition:opacity 1s var(--p2) .45s,scale 1.1s var(--p2) .45s}
body.in .hl{opacity:1;scale:1;filter:none;transition:opacity .8s var(--p2) calc(.7s + var(--i) * .1s),scale .8s var(--p2) calc(.7s + var(--i) * .1s),filter .8s var(--p2) calc(.7s + var(--i) * .1s)}
body.in .t>span,body.in .hero-nav a{translate:none;transition:translate .45s var(--out) calc(1s + var(--i) * 40ms)}
body.in .side-stats .mi,body.in .side-stats .m-bg,body.in .hero-traits li{opacity:1;filter:none;transition:opacity .6s calc(1s + var(--i) * .1s),filter .6s calc(1s + var(--i) * .1s)}
body.in .side-cta .m-bg,body.in .side-cta .mi,body.in .hero-see{opacity:1;scale:1;filter:none;transition:opacity .6s var(--p2) var(--d,1.4s),scale .6s var(--p2) var(--d,1.4s),filter .6s var(--p2) var(--d,1.4s),background-color .25s,color .25s}
.hero-see{--d:1.47s}
body.in .hero-foot .ln>span{translate:none;filter:none;transition:translate .8s var(--out) calc(1.6s + var(--i) * 75ms),filter .8s calc(1.6s + var(--i) * 75ms)}

/* ---------- reveals: section heads, journey cards, work cards (.on from js/site.js; taken off again when you
   scroll back above them, like his "restart none none reverse") ---------- */
.js .label span{clip-path:inset(0 100% 0 0)}
.js .sec-head .ln>span{translate:0 100%}
:is(.sec-head,.pop,.rv).on .label span{clip-path:inset(0);transition:clip-path .7s var(--ease) .2s}
.sec-head.on .ln>span{translate:none;transition:translate .6s var(--out) calc(.3s + var(--i) * .1s)}
.js .jc-card{opacity:0;scale:.6;translate:0 10%}
.js .jc-dot{scale:0}
.jc.on .jc-dot{scale:1;transition:scale .5s var(--out) .1s}
.js .jc .ln>span,.js .jc-co{translate:0 100%}
.js .jc-co{opacity:0}
.jc.on .jc-card{opacity:1;scale:1;translate:none;transition:opacity .5s .3s,scale 1.1s var(--out) .3s,translate 1.1s var(--out) .3s}
.jc.on .dg-t{translate:0 calc(-1em * var(--to));transition:translate 1.4s var(--out) calc(.45s + var(--i) * 90ms)}
.jc.on h3 .ln>span{translate:none;transition:translate .6s var(--out) calc(.55s + var(--i) * .1s)}
.jc.on p.sl .ln>span{translate:none;transition:translate .6s var(--out) calc(.65s + var(--i) * .1s)}
.jc.on .jc-foot .ln>span,.jc.on .jc-co{opacity:1;translate:none;transition:translate .6s var(--out) .85s,opacity .4s .85s}
.js .card{opacity:0;scale:.6;translate:0 10%}
.card.on{opacity:1;scale:1;translate:none;transition:opacity .5s var(--d,0s),scale 1.1s var(--out) var(--d,0s),translate 1.1s var(--out) var(--d,0s)}
.js .rv{opacity:0;translate:0 40px}
.rv.on{opacity:1;translate:none;transition:opacity .7s var(--out),translate .9s var(--out)}

@media (prefers-reduced-motion:reduce){
 .js .ch,.js .hero-photo,.js .hl,.js .t>span,.js .hero-nav a,.js .side-stats .mi,.js .side-stats .m-bg,.js .hero-traits li,.js .side-cta .m-bg,.js .side-cta .mi,.js .hero-see,.js .hero-foot .ln>span,.js .sec-head .ln>span,.js .jc-card,.js .jc .ln>span,.js .jc-co,.js .card,.js .rv{opacity:1;scale:none;translate:none;filter:none;transition:none}
 .js .label span{clip-path:none}
 .js .jc-dot{scale:none}
 .js .dg-t{translate:0 calc(-1em * var(--to))}
}

/* ---------- desktop: the hero's own parts mark the places the sidebar parts start from, so they are not drawn
   (the nav keeps its dividers) ---------- */
@media (min-width:768px){
 .js .hero [data-g]{visibility:hidden}

 .js .hero-nav a[data-g]{visibility:visible;color:transparent;pointer-events:none;translate:none}
}
/* ---------- smaller screens ---------- */
/* desktop hero, laid out as his (measured from his page, Hamed, 27 Sep 2026: "the main title size and position and
   the cards positions is bad, my image is too big"): everything below the nav is anchored to the bottom of the hero
   and sized in --u (1vw, or 1.8vh on very wide screens), placed from the centre line */
@media (min-width:768px){
 :root{--u:max(min(1vw,1.8vh),8.6px)}
 .hero-photo{top:calc(2.25 * var(--u));height:max(calc(64 * var(--u)),calc(104vh - 2.25 * var(--u)))}
 .hero-ui{left:0;right:0;top:0;bottom:0;display:block;pointer-events:none}
 .hero-ui *{pointer-events:auto}
 .hero-stats,.hero-mid{display:contents}
 .hero-stats .tile{position:absolute;margin:0}
 .hero-stats .t-row{left:calc(50vw - 32.1 * var(--u));bottom:calc(13.55 * var(--u));width:calc(15 * var(--u));height:calc(7.25 * var(--u))}
 .hero-stats .t-col{left:calc(50vw - 29 * var(--u));bottom:calc(1.55 * var(--u));width:calc(9.6 * var(--u));height:calc(10.35 * var(--u))}
 .hero-mid h1{position:absolute;left:calc(50vw - 14.25 * var(--u));bottom:max(calc(8.05 * var(--u)),calc(2.8 * var(--u) + 62px));font-size:calc(4.15 * var(--u));line-height:1.07;text-align:left;white-space:nowrap}
 .hero-btns{position:absolute;left:50vw;translate:-50% 0;bottom:calc(2.8 * var(--u));margin:0}
 .hero-traits{position:absolute;left:calc(50vw + 16.25 * var(--u));bottom:calc(9.45 * var(--u));width:calc(11.5 * var(--u));margin:0}
 .hero-foot{bottom:calc(3.55 * var(--u));font-size:max(13px,calc(1.15 * var(--u)));line-height:1.6}
 .hero-foot-l{left:var(--pad);width:calc(16 * var(--u))}
 .hero-foot-r{left:calc(50vw + 23.5 * var(--u));right:auto;width:calc(22 * var(--u))}
}
@media (min-width:768px) and (max-width:1023px){.hero-foot{display:none}}
.mbar,.mmenu{display:none}
/* ---------- phones (under 768px), after his: a top bar and a drop-down menu instead of the sidebar, the hero
   rearranged on his measured phone positions (in vw of a 390px screen), the journey as one column on a line, the work
   as a sideways swipe ---------- */
@media (max-width:767px){
 :root,html.js{--side:0px;--dock:1}
 .side,.logo{display:none}
 .mbar{display:flex;position:fixed;z-index:70;left:20px;right:20px;top:20px;height:41px;justify-content:space-between;align-items:center;pointer-events:none}
 .mbar>*{pointer-events:auto}
 .mbar-logo{display:grid;place-items:center;height:41px;padding:0 12px;border-radius:7px;background:var(--y);color:var(--ink);font:900 20px/1 var(--head);font-stretch:75%;letter-spacing:-.03em;text-decoration:none}
 .mbar-r{display:flex;gap:8px}
 .mbar-cta{height:41px;padding:0 18px;font-size:15px}
 .mbar-menu{width:42px;height:41px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;border:0;border-radius:7px;background:var(--pill);cursor:pointer}
 .dots{display:flex;gap:3px;transition:translate .4s cubic-bezier(.5,1,.89,1)}
 .dots i{width:7px;height:7px;border-radius:50%;background:var(--ink)}
 .mbar-menu[aria-expanded="true"] .dots:first-child{translate:0 5px}
 .mbar-menu[aria-expanded="true"] .dots:last-child{translate:0 -5px}
 .mmenu{display:flex;flex-direction:column;gap:10px;position:fixed;z-index:65;left:0;right:0;top:0;padding:78px 10px 16px;background:rgba(212,211,192,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);clip-path:inset(0 0 100% 0);pointer-events:none;visibility:hidden;transition:clip-path .8s cubic-bezier(.5,1,.89,1),visibility 0s .8s}
 .mmenu.open{clip-path:inset(0);pointer-events:auto;visibility:visible;transition:clip-path .8s cubic-bezier(.5,1,.89,1),visibility 0s}
 .mm-card{border-radius:8px;background:var(--card);border:1px solid var(--hair)}
 .mm-nav{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:17px}
 .mm-nav a{display:inline-flex;align-items:center;gap:12px;height:38px;padding:0 12px;border-radius:8px;background:var(--pill);border:1px solid rgba(0,0,0,.1);color:var(--ink);text-decoration:none;font:700 17.5px/1 var(--body);text-transform:uppercase}
 .mm-nav a.cur{background:var(--y);border-color:transparent}

 .mm-mail{padding:8px}
 .mm-mail .mail{height:44px;font-size:16px}
 .mm-mail .tip{display:none}
 .mm-soc{display:flex;gap:8px;padding:0 4px}
 .mm-soc .soc{width:38px;height:38px;font-size:14px}
 /* hero */
 .hero{height:auto}
 .hero-pin{position:relative;z-index:auto;height:236vw;min-height:0;overflow:hidden}
 .hero-word>span{margin-top:21vw}
 .hero-nav{display:none}
 .photo-fx{position:absolute;height:100%}
 .hero-photo{top:25.6vw;width:109vw;height:auto;-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}
 .hero-ui{left:0;right:0;top:0;bottom:0;display:block;pointer-events:none}
 .hero-ui *{pointer-events:auto}
 .hero-stats,.hero-mid{display:contents}
 .hero-stats .tile,.hero-traits,.hero-mid h1{position:absolute;margin:0}
 .hero-traits{left:5.9vw;top:73.3vw;width:32.8vw;padding:4.1vw;gap:2.4vw;font-size:3.7vw}
 .hero-traits li{gap:2.4vw}
 .hero-traits .ic{width:3.7vw;height:3.7vw}
 .hero-stats .t-col{left:66.4vw;top:89.5vw;width:30.3vw;height:35.1vw}
 .hero-stats .t-row{left:4.4vw;top:171vw;width:40.5vw;height:18vw}
 .hero-mid h1{left:19.5vw;top:125.9vw;font-size:10vw;line-height:1.05;text-align:left;white-space:nowrap}
 .hero-btns{display:none}
 .hero-foot-r{display:none}
 .hero-foot-l{position:absolute;left:5.1vw;right:5.1vw;top:207vw;bottom:auto;width:auto;font-size:4.5vw;line-height:1.3}
 /* sections */
 main>section:not(.hero),.foot{padding-left:var(--pad)}
 .sec-head{grid-template-columns:1fr}
 .tl{display:flex;flex-direction:column;gap:20px;height:auto!important;margin-top:0!important}
 .tl-draw{display:none}
 .jc{position:relative;width:auto;transform:none!important;padding-left:24px}
 .jc:before{content:"";position:absolute;left:0;top:0;bottom:-20px;width:3px;background:var(--ink)}
 .jc:last-child:before{bottom:0}
 .jc-dot{left:-5.5px!important;right:auto!important;top:52px;bottom:auto!important;width:14px;height:14px}
 .jc-card{padding:22px}
 .jc-yr{font-size:56px}
 .track-wrap{overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:0 var(--pad);scrollbar-width:none}
 .track-wrap::-webkit-scrollbar{display:none}
 .track{display:flex;gap:12px;width:max-content}
 .card{width:82vw;flex:none}
 .card-im{min-height:0;aspect-ratio:4/5;flex:none}
}

/* ---------- case pages (tools/build_pages.py; fourth design, 27 Sep 2026): an editorial cover story. The title set
   very large with the card line and the facts, one full-bleed cover, the story in one block, a few picked pieces in
   pairs, trios or wide, then more work and the footer on the dark ground ---------- */
.cp-page{--side:0px}
.cbar{position:fixed;z-index:70;left:var(--pad);right:var(--pad);top:18px;height:44px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.cbar>*{pointer-events:auto}
.cbar .mbar-logo{display:grid;place-items:center;height:44px;padding:0 13px;border-radius:7px;background:var(--y);color:var(--ink);font:900 21px/1 var(--head);font-stretch:75%;letter-spacing:-.03em;text-decoration:none}
.cbar-r{display:flex;gap:8px}
.cbar .btn{height:44px;padding:0 18px;font-size:14px}
.cbar-all{background:var(--pill);color:var(--ink);border:1px solid rgba(0,0,0,.1)}
.cbar-all:hover{background:#C9C8BA}
.cs-title.sec-head{display:block;margin:0;padding:calc(18px + 44px + clamp(48px,7vw,110px)) var(--pad) clamp(40px,5vw,72px)}
.cs-title h1{font-size:clamp(46px,8.4vw,150px);line-height:.95;letter-spacing:-.035em;margin:0 0 clamp(28px,3.5vw,52px);max-width:14ch}
.cs-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,96px);align-items:start}
.cs-lede{margin:0;font:500 clamp(22px,2.1vw,34px)/1.3 var(--body);letter-spacing:-.01em;max-width:24em}
.cs-side{display:grid;gap:22px}
.cs-facts{margin:0;display:grid;border-top:1px solid var(--line)}
.cs-facts>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cs-facts dt{font:600 12px/1.6 var(--body);text-transform:uppercase;letter-spacing:.06em;color:rgba(0,0,0,.6)}
.cs-facts dd{margin:0;font:500 15px/1.45 var(--body)}
.cs-facts ul{list-style:none;margin:0;padding:0}
.cs-facts li{display:inline}
.cs-facts li:not(:last-child):after{content:", "}
.cp-cta{display:flex;flex-wrap:wrap;gap:10px}
.cs-cover{margin:0;height:min(92vh,62vw);background:#1c1c1a;overflow:hidden}
.cs-cover img,.cs-cover video{display:block;width:100%;height:100%;object-fit:cover}
.cs-mark{display:grid;place-items:center}
.cs-mark img{width:auto;height:74%;max-width:84%;object-fit:contain}
.cs-story{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);padding:clamp(64px,8vw,130px) var(--pad)}
.cs-story .label{margin:6px 0 0}
.cs-text p{margin:0 0 1em;font-size:clamp(19px,1.55vw,24px);line-height:1.55;max-width:34em}
.cs-sel{display:grid;gap:16px;padding:0 var(--pad) clamp(64px,8vw,130px)}
.cs-text p:last-child{margin-bottom:0}
.cs-story:has(+.cs-sel){padding-bottom:clamp(40px,4.5vw,72px)}
main>section.cs-sel{padding-top:0}
.cs-pair,.cs-trio{display:grid;gap:16px;align-items:start}
.cs-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-three,.cs-six{display:grid;gap:16px;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-six{grid-template-columns:repeat(6,minmax(0,1fr))}
.fx-icons{margin-top:14px}
.fx-icons .cs-p{background:none;border-radius:22%}
.fx-system .fx-cap{color:rgba(255,255,255,.6)}
.cs-p figcaption{padding:12px 14px;font:500 14px/1.35 var(--body);color:rgba(255,255,255,.85);background:#1c1c1a}
.fx-system .fx-more-t{color:rgba(255,255,255,.85)}
/* paired design-system tiles share a height: the shorter capture sits on the site's own ground, caption at the bottom */
.fx-system .cs-pair{align-items:stretch}
.fx-system .cs-pair .cs-p{display:flex;flex-direction:column}
.fx-system .cs-pair .cs-p img{flex:1;min-height:0;object-fit:contain;background:#0a0b0e}
.fx-more-t{margin:0 0 28px;font-size:clamp(19px,1.55vw,24px);line-height:1.5;max-width:32em}
.cs-trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-fit{display:grid;gap:16px}
.cs-fit .cs-p :is(img,video){height:100%;object-fit:cover}
.cs-p{margin:0;border-radius:14px;overflow:hidden;background:#1c1c1a;position:relative}
.cs-cover{position:relative}
.snd{position:absolute;right:12px;bottom:12px;z-index:2;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(17,17,17,.6);color:#fff;cursor:pointer;transition:background .25s,color .25s}
.snd svg{width:20px;height:20px}
.cs-live .cs-p{aspect-ratio:16/10;background:#111;color:#fff}
.cs-live iframe,.cs-live-cover iframe{display:block;width:100%;height:100%;border:0}
.cs-live-cover{background:#000}
.live-idle{height:100%;display:grid;place-content:center;justify-items:center;gap:22px;padding:24px;text-align:center}
.live-k{margin:0;padding:6px 12px;border:2px solid rgba(255,255,255,.3);border-radius:999px;font:700 13.5px/1 var(--body);letter-spacing:.02em;text-transform:uppercase}
.live-t{margin:0;max-width:22em;font:600 clamp(22px,2.6vw,40px)/1.15 var(--head);letter-spacing:-.02em}
.live-open{position:absolute;right:14px;bottom:12px;font:500 14px/1 var(--body);color:rgba(255,255,255,.75);text-decoration:none;padding:8px 10px;border-radius:8px;background:rgba(17,17,17,.6)}
.live-open:hover{color:#fff}
@media (max-width:767px){.cs-live .cs-p{aspect-ratio:4/5}}
.snd:hover{background:rgba(17,17,17,.85)}
.snd[aria-pressed="true"]{background:#FFFF23;color:#000;border-color:transparent}
.snd:focus-visible{outline:2px solid #FFFF23;outline-offset:2px}
.cs-cover .snd{right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);width:48px;height:48px}
@media (max-width:767px){.cs-trio .snd{width:32px;height:32px;right:8px;bottom:8px}.cs-trio .snd svg{width:16px;height:16px}}
.cs-p img,.cs-p video{display:block;width:100%;height:auto}
.cs-trio .cs-p{aspect-ratio:9/16}
.cs-trio .cs-p :is(img,video){height:100%;object-fit:cover}
.cp-similar{background:#111;color:#fff;border-radius:28px 28px 0 0;padding:clamp(56px,7vw,110px) var(--pad)}
.cp-similar .label span{border-color:rgba(255,255,255,.3);color:#fff}
.cp-similar .sec-head h2 .ln>span{background-image:linear-gradient(266deg,#bdbdbd 11.86%,#fff 92.59%)}
.cp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:28px}
.cp-cards .card{width:auto;height:clamp(420px,36vw,540px)}
.cp-page .foot{padding-left:var(--pad)!important;border-top:1px solid rgba(255,255,255,.08)}
/* the feature layout for a lead project (Deriv Rebranding): before and after, the process, the system on the dark
   ground, the work in the world, the roll-out */
.cp-page main>[class^="fx-"]{padding:clamp(56px,7vw,110px) var(--pad)}
.fx-ba{padding-top:0!important}
.fx-ba-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,2vw,32px);align-items:center}
.fx-ba-p{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.fx-ba-p img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.fx-ba-p figcaption{padding:12px 16px;font:500 14px/1.3 var(--body);border-top:1px solid var(--line);background:var(--card)}
.fx-tag{position:absolute;left:12px;top:12px;z-index:1;border:2px solid rgba(0,0,0,.3);border-radius:70px;padding:4px 10px 3px;font:700 12px/1 var(--body);text-transform:uppercase;background:#fff}
.fx-new{background:var(--y);border-color:transparent}
.fx-arrow{font:700 clamp(28px,3vw,48px)/1 var(--body)}
.fx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;counter-reset:s}
.fx-step{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:22px 20px;display:grid;gap:8px;align-content:start}
.fx-n{font:700 44px/1 var(--head);letter-spacing:-.04em;color:var(--y)}
.fx-step b{font:600 20px/1.15 var(--head)}
.fx-step small{font:600 12px/1 var(--body);text-transform:uppercase;letter-spacing:.06em;color:rgba(0,0,0,.6)}
.fx-step p{margin:6px 0 0;font-size:15px;line-height:1.5}
.fx-explore{margin-top:16px}
.fx-explore .cs-p{background:#fff;border:1px solid var(--line)}
.fx-cap{margin:12px 0 0;font-size:14px;color:rgba(0,0,0,.6)}
.fx-system{background:#111;color:#fff;border-radius:28px 28px 0 0}
.fx-system .label span{border-color:rgba(255,255,255,.3);color:#fff}
.fx-system .sec-head h2 .ln>span{background-image:linear-gradient(266deg,#bdbdbd 11.86%,#fff 92.59%)}
.fx-sys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fx-sys-p{margin:0;border-radius:14px;overflow:hidden;background:#1c1c1a}
.fx-sys-p img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#fff}
.fx-sys-p figcaption{padding:12px 14px;font:500 14px/1.35 var(--body);color:rgba(255,255,255,.85)}
.fx-sys-p:nth-child(1),.fx-sys-p:nth-child(2){grid-column:span 2}
/* three pieces: the first across the full width at its own shape, two below */
.fx-sys.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
.fx-sys.n3 .fx-sys-p:nth-child(2){grid-column:auto}
.fx-sys.n3 .fx-sys-p:nth-child(1) img{aspect-ratio:auto}
.fx-sys.n3 .fx-sys-p:nth-child(3) img{object-fit:contain}
.fx-world .fx-sel{padding:0}
.fx-roll{display:grid;gap:18px}
.fx-when{margin:0;font:700 clamp(48px,8vw,140px)/.95 var(--head);letter-spacing:-.04em}
.fx-roll-t{margin:0;font-size:clamp(19px,1.55vw,24px);line-height:1.5;max-width:30em}
.fx-chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fx-chips li{background:var(--pill);border:1px solid rgba(0,0,0,.1);border-radius:var(--r);padding:9px 12px;font:500 15px/1 var(--body)}
@media (max-width:1023px){
 .cs-row,.cs-story{grid-template-columns:1fr}
 .fx-steps{grid-template-columns:1fr 1fr}
 .fx-sys{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
 .cbar{left:16px;right:16px;top:16px}
 .cbar .btn{padding:0 14px}
 .cs-title.sec-head{padding-top:112px}
 .cs-cover{height:auto;aspect-ratio:4/5}
 .cs-mark{aspect-ratio:1}
 .cs-pair{grid-template-columns:1fr}
 .cs-three{grid-template-columns:1fr 1fr 1fr;gap:8px}
 .cs-six{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .fx-more-t{margin-bottom:20px}
 .fx-ba-row{grid-template-columns:1fr}
 .fx-arrow{justify-self:center;rotate:90deg}
 .fx-steps,.fx-sys,.fx-sys.n3{grid-template-columns:1fr}
 .fx-sys-p:nth-child(1),.fx-sys-p:nth-child(2),.fx-sys.n3 .fx-sys-p:nth-child(1){grid-column:auto}
 .cs-trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .cs-trio .cs-p{border-radius:10px}
 .cp-cards{grid-template-columns:1fr}
 .cp-cards .card{height:auto}
 .cp-cards .card-im{aspect-ratio:4/5;flex:none;min-height:0}
}
/* reveals shared with the home page's cards */
.js .pop{opacity:0;scale:.6;translate:0 10%}
.pop.on{opacity:1;scale:1;translate:none;transition:opacity .5s var(--d,0s),scale 1.1s var(--out) var(--d,0s),translate 1.1s var(--out) var(--d,0s)}
.cp-lead{transform-origin:50% 60%}
@media (prefers-reduced-motion:reduce){.js .pop{opacity:1;scale:none;translate:none;transition:none}}
@media (max-width:767px){
 .cp-hero{grid-template-columns:1fr;padding-top:96px!important}
 .cp-lead{grid-column:1;grid-row:auto;min-height:0;aspect-ratio:4/5}
 .cp-facts{grid-column:1}
 .cp-block{grid-template-columns:1fr}
 .cp-grid{grid-template-columns:1fr}
 .cp-nextcard{height:auto}
 .cp-nextcard .card-im{aspect-ratio:4/5;flex:none;min-height:0}
}

/* smooth scrolling (Lenis, his lerp .1) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* full screen viewer on case pages (js/case.js) */
.zoomable img,.zoomable video{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:100;background:#0b0b0b;display:grid;grid-template-rows:1fr auto;opacity:0;transition:opacity .3s}
.lb.in{opacity:1}
.lb[hidden]{display:none}
.lb-stage{min-height:0;display:grid;place-items:center;padding:64px 72px 12px}
.lb-stage img,.lb-stage video{max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;border-radius:8px;display:block}
.lb-cap{margin:0;padding:0 72px;color:rgba(255,255,255,.8);font:500 15px/1.4 var(--body);text-align:center;min-height:1.4em}
.lb-n{margin:0;padding:8px 0 20px;color:rgba(255,255,255,.55);font:500 13px/1 var(--body);text-align:center;letter-spacing:.05em}
.lb button{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(40,40,40,.8);color:#fff;font:400 22px/1 var(--body);cursor:pointer;transition:background .25s,color .25s}
.lb button:hover{background:var(--y);color:var(--ink);border-color:transparent}
.lb button:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.lb-x{top:16px;right:16px;font-size:28px!important}
.lb-prev,.lb-next{top:50%;translate:0 -50%}
.lb-prev{left:16px}.lb-next{right:16px}
html.lb-on,html.lb-on body{overflow:hidden}
@media (max-width:767px){
 .lb-stage{padding:64px 10px 10px}
 .lb-stage img,.lb-stage video{max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px)}
 .lb-cap{padding:0 16px}
 .lb-prev,.lb-next{top:auto;bottom:12px;translate:none;width:44px;height:44px}
 .lb-n{padding:20px 0 26px}
}