/* ============================================================
   APYX WEB DESIGN  ·  design system + components
   Tokens → base → typography → chrome → sections → pages → motion → mobile
   ============================================================ */
:root{
  --ink:#0A0A0B; --ink2:#111113; --ink3:#19191D; --ink4:#232328;
  --paper:#F4F2EC; --paper2:#E9E6DE; --paper3:#DCD8CE;
  --blue:#2B48FF; --blue2:#1B36E6; --blue3:#0E22B8;
  --bg:var(--ink); --txt:#F4F2EC; --txt2:#A3A3AA; --txt3:#8A8A93; --blue-txt:#6B82FF;
  --line:rgba(244,242,236,.12); --line2:rgba(244,242,236,.26);
  --pad:clamp(20px,4.2vw,64px); --gap:clamp(16px,2vw,32px);
  --ease:cubic-bezier(.16,1,.3,1); --ease2:cubic-bezier(.76,0,.24,1); --ease3:cubic-bezier(.22,1,.36,1);
  --fd:'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --fs:'Instrument Serif',Georgia,'Times New Roman',serif;
  --nav-h:74px; --r:3px;
  --mark:url("data:image/png;base64,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");
  color-scheme:dark;
}
.light{--bg:var(--paper); --txt:#0A0A0B; --txt2:#5B5B63; --txt3:#66666F; --blue-txt:#1F3AE0; --line:rgba(10,10,11,.12); --line2:rgba(10,10,11,.28); color-scheme:light}
.blue{--bg:var(--blue); --txt:#F4F2EC; --txt2:rgba(244,242,236,.92); --txt3:rgba(244,242,236,.84); --blue-txt:#F4F2EC; --line:rgba(244,242,236,.22); --line2:rgba(244,242,236,.45)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ink); scrollbar-color:#2A2A30 #0A0A0B; scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0A0A0B}::-webkit-scrollbar-thumb{background:#2A2A30;border-radius:6px;border:2px solid #0A0A0B}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--txt); font-family:var(--fd); font-size:17px; line-height:1.55; font-weight:400; font-variation-settings:'wdth' 100; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; max-width:100vw}
html.fine body{cursor:none}
html.fine a,html.fine button,html.fine label,html.fine [data-cursor]{cursor:none}
html.fine input,html.fine textarea,html.fine select{cursor:auto}
img,video,svg{max-width:100%; display:block}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0}
::selection{background:var(--blue); color:var(--paper)}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.light :focus-visible{outline-color:var(--ink)}
.blue :focus-visible{outline-color:var(--paper)}
.skip{position:fixed; left:12px; top:-60px; z-index:200; background:var(--paper); color:var(--ink); padding:10px 14px; border-radius:var(--r); font-size:13px; transition:top .2s}
.skip:focus{top:12px}
main{position:relative}
.wrap{padding-left:var(--pad); padding-right:var(--pad); max-width:1720px; margin:0 auto; width:100%}
.grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap)}
.sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
hr{border:0; border-top:1px solid var(--line); margin:0}

/* ---------- typography ---------- */
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
.d1,.d2,.d3,.h4{font-family:var(--fd); font-weight:620; font-variation-settings:'wdth' 112,'wght' 620; letter-spacing:-.04em; line-height:.92; text-wrap:balance}
.d1{font-size:clamp(46px,8.6vw,150px)}
.d2{font-size:clamp(38px,6.4vw,108px)}
.d3{font-size:clamp(30px,4.2vw,68px); line-height:.98; letter-spacing:-.035em}
.h4{font-size:clamp(22px,2.1vw,32px); line-height:1.08; letter-spacing:-.025em; font-variation-settings:'wdth' 106,'wght' 580}
.h5{font-size:clamp(18px,1.4vw,21px); line-height:1.25; letter-spacing:-.015em; font-weight:560; font-variation-settings:'wdth' 102,'wght' 560}
.em{font-family:var(--fs); font-style:italic; font-weight:400; font-size:1.06em; letter-spacing:-.01em; font-variation-settings:normal}
.kick{font-size:11px; line-height:1; letter-spacing:.18em; text-transform:uppercase; font-weight:540; font-variation-settings:'wdth' 88,'wght' 540; color:var(--txt2); display:inline-flex; align-items:center; gap:10px}
.kick::before{content:""; width:18px; height:1px; background:currentColor; opacity:.7}
.kick.nb::before{display:none}
.lead{font-size:clamp(18px,1.55vw,24px); line-height:1.4; letter-spacing:-.012em; font-variation-settings:'wdth' 100,'wght' 380; text-wrap:pretty}
.p{font-size:clamp(16px,1.1vw,18px); line-height:1.6; color:var(--txt2); text-wrap:pretty; max-width:60ch}
.p.big{font-size:clamp(17px,1.25vw,20px); color:var(--txt)}
.p+.p{margin-top:1em}
.mono{font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-variation-settings:'wdth' 90,'wght' 500; color:var(--txt2)}
.num{font-variation-settings:'wdth' 75,'wght' 500; letter-spacing:.02em}
.meta{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-variation-settings:'wdth' 90,'wght' 520; color:var(--txt2)}
.meta b{color:var(--txt); font-weight:inherit}
.tag{display:inline-flex; align-items:center; height:24px; padding:0 9px; border:1px solid var(--line2); border-radius:100px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 90,'wght' 560; color:var(--txt); white-space:nowrap}
.tag.c{border-style:dashed}
.ph{color:var(--txt2); font-family:var(--fd); font-style:normal; border-bottom:1px dashed var(--line2)}

/* the dash: the brand's diagonal detail as a motif */
.dash{display:inline-block; width:44px; height:10px; background:repeating-linear-gradient(115deg,var(--txt) 0 8px,transparent 8px 13px); opacity:.9; transform:skewX(-25deg)}
.dashline{height:1px; background:repeating-linear-gradient(90deg,var(--line2) 0 10px,transparent 10px 18px)}

/* ---------- buttons ---------- */
.btn{position:relative; display:inline-flex; align-items:center; gap:14px; height:54px; padding:0 26px 0 28px; border:1px solid var(--line2); border-radius:100px; color:var(--txt); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 92,'wght' 580; white-space:nowrap; overflow:hidden; isolation:isolate; transition:color .35s var(--ease),border-color .35s var(--ease),transform .5s var(--ease); will-change:transform}
.btn::before{content:""; position:absolute; inset:-1px; background:var(--blue); border-radius:100px; transform:translateY(102%); transition:transform .5s var(--ease); z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover{color:var(--paper); border-color:var(--blue)}
.btn svg{width:14px; height:14px; flex:0 0 auto; transition:transform .45s var(--ease)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn.fill{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.btn.fill:hover{color:var(--paper)}
.light .btn.fill{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.blue .btn.fill{background:var(--paper); color:var(--ink)}
.blue .btn::before{background:var(--ink)}
.blue .btn:hover{border-color:var(--ink)}
.btn.sm{height:44px; padding:0 20px 0 22px; font-size:11.5px}
.btn.lg{height:64px; padding:0 34px 0 36px; font-size:13.5px}
.tlink{position:relative; display:inline-flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 92,'wght' 580; padding-bottom:6px}
.tlink::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 10px); transform:scaleX(1); transform-origin:left; transition:transform .5s var(--ease)}
.tlink:hover::after{transform:scaleX(0); transform-origin:right}
.tlink svg{width:12px; height:12px; transition:transform .4s var(--ease)}
.tlink:hover svg{transform:translate(3px,-3px)}
.arrow{width:14px; height:14px}

/* ---------- frames (browser / phone) ---------- */
.frame{position:relative; background:#141417; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.frame::before{content:""; display:block; height:26px; background:#1B1B20; border-bottom:1px solid rgba(255,255,255,.06); background-image:radial-gradient(circle at 12px 13px,#3A3A42 4px,transparent 4.6px),radial-gradient(circle at 26px 13px,#3A3A42 4px,transparent 4.6px),radial-gradient(circle at 40px 13px,#3A3A42 4px,transparent 4.6px)}
.frame img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top}
.frame.tall img{aspect-ratio:auto}
.light .frame{background:#E3E0D8; border-color:var(--line)}
.light .frame::before{background:#EDEAE3; border-color:rgba(0,0,0,.06); background-image:radial-gradient(circle at 12px 13px,#C9C5BB 4px,transparent 4.6px),radial-gradient(circle at 26px 13px,#C9C5BB 4px,transparent 4.6px),radial-gradient(circle at 40px 13px,#C9C5BB 4px,transparent 4.6px)}
.phone{position:relative; background:#0E0E11; border:1px solid var(--line2); border-radius:34px; padding:10px; box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.phone::before{content:""; position:absolute; top:18px; left:50%; width:84px; height:22px; background:#0E0E11; border-radius:100px; transform:translateX(-50%); z-index:2}
.phone img{width:100%; aspect-ratio:390/844; object-fit:cover; object-position:top; border-radius:26px}
.light .phone{background:#0E0E11}

/* ---------- veil / intro / cursor / progress ---------- */
.veil{position:fixed; inset:0; background:var(--ink); z-index:190; pointer-events:none; clip-path:inset(0 0 100% 0); transition:clip-path .55s var(--ease2)}
.veil.on{clip-path:inset(0 0 0 0)}
html.js.arriving .veil{clip-path:inset(0 0 0 0); transition:none}
.intro{position:fixed; inset:0; z-index:195; background:var(--ink); display:none; align-items:center; justify-content:center; overflow:hidden}
html.js.intro-on .intro{display:flex}
.intro .imk{width:clamp(80px,12vw,150px); clip-path:polygon(0 0,0 0,0 100%,0 100%); animation:markwipe 1s var(--ease2) .15s both}
.intro .iwm{position:absolute; bottom:clamp(28px,5vh,60px); left:50%; transform:translateX(-50%); width:clamp(120px,14vw,190px); opacity:0; animation:wmfade .7s var(--ease) .55s both}
.intro .idash{position:absolute; left:50%; top:50%; width:clamp(120px,18vw,240px); height:2px; transform:translate(-50%,-50%) rotate(-58deg); background:repeating-linear-gradient(90deg,var(--paper) 0 18px,transparent 18px 30px); clip-path:inset(0 100% 0 0); animation:dashdraw .6s var(--ease2) .35s both; opacity:.55}
.intro.out{animation:introout .7s var(--ease2) both}
@keyframes markwipe{to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
@keyframes wmfade{from{opacity:0; transform:translate(-50%,14px)}to{opacity:1; transform:translate(-50%,0)}}
@keyframes dashdraw{to{clip-path:inset(0 0 0 0)}}
@keyframes introout{to{clip-path:inset(0 0 100% 0)}}
.cur{position:fixed; left:0; top:0; z-index:210; pointer-events:none; mix-blend-mode:difference; display:none}
html.fine .cur{display:block}
.cur .dot{position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:#fff; transition:transform .25s var(--ease),opacity .25s}
.cur .ring{position:absolute; left:-22px; top:-22px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-variation-settings:'wdth' 90,'wght' 600; color:#000; transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s}
.cur .ring span{opacity:0; transition:opacity .2s}
.cur.lbl .ring{transform:scale(2.1); background:#fff; border-color:#fff}
.cur.lbl .ring span{opacity:1; font-size:5px; letter-spacing:.14em}
.cur.lbl .dot{opacity:0}
.cur.hov .ring{transform:scale(1.5); border-color:#fff}
.cur.down .ring{transform:scale(.8)}
.cur.hide{opacity:0}
.prog{position:fixed; left:0; top:0; height:2px; width:100%; z-index:185; pointer-events:none; background:repeating-linear-gradient(90deg,var(--paper) 0 10px,transparent 10px 16px); transform:scaleX(0); transform-origin:left; opacity:.7}

/* ---------- navigation ---------- */
.nav{position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:180; display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad); mix-blend-mode:difference; color:#fff; transition:transform .5s var(--ease)}
.nav.hid{transform:translateY(-100%)}
.nav .logo img{height:16px; width:auto}
.nav .links{display:flex; gap:34px; position:absolute; left:50%; transform:translateX(-50%)}
.nav .links a{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 92,'wght' 560; position:relative; padding:6px 0}
.nav .links a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#fff; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease)}
.nav .links a:hover::after,.nav .links a[aria-current]::after{transform:scaleX(1); transform-origin:left}
.nav .right{display:flex; align-items:center; gap:18px}
.nav .cta{height:40px; padding:0 18px; border:1px solid #fff; border-radius:100px; display:inline-flex; align-items:center; gap:10px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 92,'wght' 580; position:relative; overflow:hidden; isolation:isolate}
.nav .cta::before{content:""; position:absolute; inset:-1px; background:#fff; border-radius:100px; transform:translateY(102%); transition:transform .45s var(--ease); z-index:-1}
.nav .cta:hover::before{transform:translateY(0)}
.nav .cta:hover{color:#000}
.nav .mbtn{display:inline-flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 92,'wght' 580; height:40px}
.nav .mbtn i{width:22px; height:10px; position:relative; display:block}
.nav .mbtn i::before,.nav .mbtn i::after{content:""; position:absolute; left:0; right:0; height:1.5px; background:#fff; transition:transform .45s var(--ease),width .45s var(--ease)}
.nav .mbtn i::before{top:0}.nav .mbtn i::after{bottom:0; width:60%}
.nav .mbtn:hover i::after{width:100%}
.menu{position:fixed; inset:0; z-index:189; background:var(--ink); color:var(--paper); display:grid; grid-template-columns:1.2fr .8fr; visibility:hidden; clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease2),visibility 0s .7s}
.menu.open{visibility:visible; clip-path:inset(0 0 0 0); transition:clip-path .7s var(--ease2),visibility 0s}
.menu .ml{padding:calc(var(--nav-h) + 4vh) var(--pad) 5vh; display:flex; flex-direction:column; justify-content:space-between; min-height:100%}
.menu .mlinks{display:flex; flex-direction:column; gap:clamp(2px,.6vh,10px)}
.menu .mlinks a{display:flex; align-items:baseline; gap:18px; font-size:clamp(38px,6.4vw,92px); line-height:1; letter-spacing:-.04em; font-variation-settings:'wdth' 112,'wght' 620; overflow:hidden; padding:6px 0; transition:color .3s}
.menu .mlinks a span{display:block; transform:translateY(110%); transition:transform .8s var(--ease)}
.menu.open .mlinks a span{transform:translateY(0)}
.menu .mlinks a small{font-size:12px; letter-spacing:.14em; font-variation-settings:'wdth' 88,'wght' 540; color:var(--txt2); transform:none; min-width:26px}
.menu .mlinks:hover a{color:var(--txt3)}
.menu .mlinks a:hover{color:var(--paper)}
.menu .mfoot{display:flex; flex-wrap:wrap; gap:28px 48px; padding-top:28px; border-top:1px solid var(--line); font-size:13px; color:var(--txt2)}
.menu .mfoot b{display:block; color:var(--paper); font-weight:500; margin-bottom:4px}
.menu .mr{position:relative; border-left:1px solid var(--line); overflow:hidden; background:var(--ink2)}
.menu .mr img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transform:scale(1.06); transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.menu .mr img.on{opacity:1; transform:scale(1)}
.menu .mr .mcap{position:absolute; left:32px; bottom:32px; z-index:2; color:var(--paper); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 90,'wght' 560; background:rgba(10,10,11,.6); padding:8px 12px; border-radius:100px; backdrop-filter:blur(6px)}
.menu .mclose{position:absolute; top:0; right:var(--pad); height:var(--nav-h); display:inline-flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 92,'wght' 580; color:var(--paper)}
.menu .mclose i{width:18px; height:18px; position:relative}
.menu .mclose i::before,.menu .mclose i::after{content:""; position:absolute; left:-2px; top:8px; width:22px; height:1.5px; background:currentColor; transform:rotate(45deg)}
.menu .mclose i::after{transform:rotate(-45deg)}
body.menu-open{overflow:hidden}
body.menu-open .nav{mix-blend-mode:normal; color:var(--paper)}
body.menu-open .nav .cta,body.menu-open .nav .links{opacity:0; pointer-events:none}

/* ---------- section scaffolding ---------- */
section{position:relative}
.sec{padding:clamp(88px,11vw,170px) 0}
.sec-h{display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px var(--gap); margin-bottom:clamp(36px,5vw,72px)}
.sec-h .kick{margin-bottom:22px}
.sec-h .side{max-width:34ch; color:var(--txt2); font-size:15px; line-height:1.5; padding-bottom:8px}
.sec-h .count{font-variation-settings:'wdth' 75,'wght' 500; font-size:clamp(14px,1.2vw,18px); color:var(--txt2); letter-spacing:.04em; vertical-align:top; margin-left:.35em; position:relative; top:-.9em}
.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap)}
.split{display:grid; grid-template-columns:5fr 7fr; gap:var(--gap)}
.stick{position:sticky; top:calc(var(--nav-h) + 24px); align-self:start}
.rule{border-top:1px solid var(--line)}
.pad-t{padding-top:clamp(40px,5vw,80px)}
.pad-b{padding-bottom:clamp(40px,5vw,80px)}

/* ---------- HERO ---------- */
.hero{min-height:100svh; display:grid; grid-template-rows:1fr auto; padding-top:var(--nav-h); position:relative; overflow:hidden; isolation:isolate}
.hero .hin{padding:clamp(48px,9vh,120px) var(--pad) clamp(28px,4vh,48px); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-content:end; position:relative; z-index:3}
.hero .ht{grid-column:1/12}
.hero .ht .kick{margin-bottom:clamp(20px,3vh,32px)}
.hero h1{margin-bottom:clamp(24px,4vh,44px)}
.hero h1 .em{font-size:.98em; position:relative; top:.02em}
.hero .hsub{grid-column:1/6; max-width:44ch; color:var(--txt2); font-size:clamp(16px,1.15vw,19px); line-height:1.55; text-wrap:pretty}
.hero .hcta{grid-column:7/13; display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; justify-content:flex-end}
.hero .hmeta{grid-column:1/13; display:flex; justify-content:space-between; gap:20px; margin-top:clamp(28px,5vh,56px); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt2); font-variation-settings:'wdth' 90,'wght' 540}
.hero .hmeta .scr{display:inline-flex; align-items:center; gap:10px}
.hero .hmeta .scr i{width:1px; height:34px; background:linear-gradient(var(--txt2),transparent); display:block; animation:scr 1.8s var(--ease) infinite}
@keyframes scr{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
.flash{position:absolute; inset:0; z-index:1; pointer-events:none}
.flash img{position:absolute; width:clamp(280px,30vw,560px); aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:6px; opacity:0; transform:translate(-50%,-50%) scale(.92); transition:opacity .6s var(--ease),transform 1.1s var(--ease); filter:saturate(.95); box-shadow:0 40px 100px -30px rgba(0,0,0,.7); will-change:transform,opacity}
.flash img.on{opacity:.92; transform:translate(-50%,-50%) scale(1)}
.flash .fcap{position:absolute; transform:translate(-50%,calc(-50% + clamp(90px,10vw,190px))); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt2); font-variation-settings:'wdth' 90,'wght' 560; opacity:0; transition:opacity .4s; white-space:nowrap}
.flash .fcap.on{opacity:1}
.hero .hgrid{position:absolute; inset:0; z-index:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:25% 100%,25% 100%; opacity:.35; mask-image:linear-gradient(to bottom,transparent,#000 40%,#000 70%,transparent)}
.hero .hdash{position:absolute; right:calc(var(--pad) - 10px); top:calc(var(--nav-h) + 8vh); width:min(38vw,520px); height:2px; background:repeating-linear-gradient(90deg,var(--line2) 0 16px,transparent 16px 28px); transform:rotate(-58deg); transform-origin:right; z-index:0; opacity:.6}
.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; position:relative; z-index:3; background:var(--bg)}
.ticker .tk{display:flex; width:max-content; animation:tk 60s linear infinite; padding:16px 0}
.ticker:hover .tk{animation-play-state:paused}
.ticker .tk span{display:inline-flex; align-items:center; gap:22px; padding-right:22px; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt2); font-variation-settings:'wdth' 90,'wght' 540; white-space:nowrap}
.ticker .tk span b{color:var(--txt); font-weight:inherit}
.ticker .tk span i{width:5px; height:5px; border-radius:50%; background:var(--blue); display:inline-block}
@keyframes tk{to{transform:translateX(-50%)}}

/* ---------- SELECTED WORK (horizontal, pinned) ---------- */
.work-h{position:relative}
.work-h .sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center}
.work-h .track{display:flex; gap:clamp(16px,2.4vw,40px); padding:0 var(--pad); width:max-content; will-change:transform; align-items:stretch}
.panel{position:relative; width:clamp(320px,62vw,1080px); flex:0 0 auto; display:flex; flex-direction:column; gap:18px}
.panel .pimg{position:relative; overflow:hidden; border-radius:6px; aspect-ratio:16/10; background:var(--ink3)}
.panel .pimg img{width:100%; height:100%; object-fit:cover; object-position:top; transform:scale(1.02); transition:transform 1.4s var(--ease)}
.panel:hover .pimg img{transform:scale(1.06)}
.panel .pimg::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,10,11,.55),transparent 45%); opacity:0; transition:opacity .5s}
.panel:hover .pimg::after{opacity:1}
.panel .pcap{display:grid; grid-template-columns:1fr auto; gap:8px 20px; align-items:start}
.panel .pname{font-size:clamp(22px,2.4vw,40px); letter-spacing:-.035em; line-height:1; font-variation-settings:'wdth' 108,'wght' 600}
.panel .pmeta{grid-column:1; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt2); font-variation-settings:'wdth' 90,'wght' 540}
.panel .pyr{grid-column:2; grid-row:1/3; font-variation-settings:'wdth' 75,'wght' 500; color:var(--txt2); font-size:13px; letter-spacing:.06em; display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.panel .tag{margin-top:2px}
.panel.wide{width:clamp(320px,74vw,1240px)}
.panel.tallp .pimg{aspect-ratio:4/5; max-height:72vh; width:auto}
.work-h .whead{position:absolute; top:calc(var(--nav-h) + 2vh); left:var(--pad); right:var(--pad); display:flex; justify-content:space-between; align-items:flex-start; z-index:2; pointer-events:none}
.work-h .whead .kick{pointer-events:auto}
.work-h .wprog{position:absolute; bottom:4vh; left:var(--pad); right:var(--pad); height:1px; background:var(--line)}
.work-h .wprog i{position:absolute; left:0; top:0; height:100%; width:0; background:var(--paper); transition:width .1s linear}
.work-h .wcount{position:absolute; bottom:calc(4vh + 14px); right:var(--pad); font-variation-settings:'wdth' 75,'wght' 500; font-size:13px; letter-spacing:.08em; color:var(--txt2)}
.work-h .end{width:clamp(320px,40vw,620px); flex:0 0 auto; display:flex; align-items:center; justify-content:center}
.work-h .end a{display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.work-h .end .d3{max-width:9ch}

/* ---------- PROBLEM (light editorial) ---------- */
.prob .pl{position:sticky; top:calc(var(--nav-h) + 3vh); align-self:start}
.prob .pl .kick{margin-bottom:28px}
.prob .pl .d2{max-width:11ch}
.prob .pr{display:flex; flex-direction:column; gap:clamp(48px,7vw,110px); padding-top:clamp(20px,10vh,120px)}
.prob .pt{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; max-width:640px}
.prob .pt .n{font-variation-settings:'wdth' 75,'wght' 500; font-size:12px; letter-spacing:.1em; color:var(--txt3); padding-top:8px}
.prob .pt h3{font-size:clamp(22px,2.4vw,36px); letter-spacing:-.03em; line-height:1.05; font-variation-settings:'wdth' 108,'wght' 600; margin-bottom:14px; text-wrap:balance}
.prob .pimg2{margin-top:clamp(24px,4vw,56px); overflow:hidden; border-radius:6px; aspect-ratio:3/2; position:relative}
.prob .pimg2 img{width:100%; height:118%; object-fit:cover; object-position:top; will-change:transform}
.prob .pend{margin-top:clamp(36px,6vw,80px); padding-top:32px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:24px; align-items:center; flex-wrap:wrap}

/* ---------- SERVICES (sticky index) ---------- */
.svc .sbody{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start}
.svc .slist{display:flex; flex-direction:column}
.svc .sitem{display:grid; grid-template-columns:70px 1fr auto; gap:20px; align-items:start; padding:clamp(28px,3.4vw,44px) 0; border-top:1px solid var(--line); transition:opacity .5s var(--ease); scroll-margin-top:30vh}
.svc .sitem:last-child{border-bottom:1px solid var(--line)}
.svc .sitem .sn{font-variation-settings:'wdth' 75,'wght' 500; font-size:13px; letter-spacing:.1em; color:var(--txt3); padding-top:12px}
.svc .sitem h3{font-size:clamp(28px,3.6vw,58px); letter-spacing:-.04em; line-height:.98; font-variation-settings:'wdth' 110,'wght' 610; transition:transform .6s var(--ease),color .4s}
.svc .sitem .sx{overflow:hidden; max-height:0; transition:max-height .7s var(--ease),opacity .5s; opacity:0}
.svc .sitem .sx p{padding-top:16px; max-width:52ch}
.svc .sitem .sx .tlink{margin-top:16px}
.svc .sitem.on .sx{max-height:320px; opacity:1}
.svc .slist:not(.touch) .sitem:not(.on){opacity:.42}
.svc .sitem .sfor{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt3); padding-top:14px; font-variation-settings:'wdth' 88,'wght' 540; max-width:14ch; text-align:right}
.svc .svis{position:sticky; top:calc(var(--nav-h) + 24px); aspect-ratio:4/5; max-height:calc(100vh - var(--nav-h) - 48px); border-radius:6px; overflow:hidden; background:var(--ink3)}
.svc .svis img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transform:scale(1.05); transition:opacity .6s var(--ease),transform 1.3s var(--ease)}
.svc .svis img.on{opacity:1; transform:scale(1)}
.svc .svis .vcap{position:absolute; left:20px; bottom:20px; z-index:2; display:flex; gap:8px; flex-wrap:wrap}
.svc .svis .vcap span{background:rgba(10,10,11,.62); backdrop-filter:blur(8px); color:var(--paper); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:8px 12px; border-radius:100px; font-variation-settings:'wdth' 90,'wght' 560}
.svc .sben{margin-top:clamp(48px,7vw,100px); display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start}
.svc .sben .d3{max-width:14ch}
.svc .bens{display:grid; grid-template-columns:1fr 1fr; gap:26px 32px}
.svc .bens div{border-top:1px solid var(--line); padding-top:16px; font-size:15px; line-height:1.5; color:var(--txt2)}
.svc .bens div b{display:block; color:var(--txt); font-weight:560; font-size:17px; margin-bottom:6px; letter-spacing:-.01em}

/* ---------- BEFORE / AFTER ---------- */
.ba .btabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
.ba .btabs button{height:40px; padding:0 16px; border:1px solid var(--line2); border-radius:100px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 90,'wght' 580; color:var(--txt2); transition:background-color .3s,color .3s,border-color .3s}
.ba .btabs button[aria-selected="true"]{background:var(--txt); color:var(--bg); border-color:var(--txt)}
.ba .bcmp{position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:8px; background:var(--ink3); --p:50; user-select:none; touch-action:pan-y}
.ba .bcmp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; pointer-events:none}
.ba .bcmp .after{clip-path:inset(0 0 0 calc(var(--p) * 1%))}
.ba .bcmp .hnd{position:absolute; top:0; bottom:0; left:calc(var(--p) * 1%); width:1px; background:var(--paper); pointer-events:none; z-index:3}
.ba .bcmp .hnd::before{content:""; position:absolute; top:50%; left:50%; width:56px; height:56px; border-radius:50%; background:var(--paper); transform:translate(-50%,-50%); box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ba .bcmp .hnd::after{content:"◀ ▶"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:9px; letter-spacing:.2em; color:var(--ink); white-space:nowrap; font-family:var(--fd)}
.ba .bcmp input{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:ew-resize; z-index:4; -webkit-appearance:none; appearance:none}
html.fine .ba .bcmp input{cursor:none}
.ba .bcmp .lab{position:absolute; top:16px; z-index:3; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; padding:8px 12px; border-radius:100px; background:rgba(10,10,11,.6); color:var(--paper); backdrop-filter:blur(8px); font-variation-settings:'wdth' 90,'wght' 580; pointer-events:none}
.ba .bcmp .lab.l{left:16px}.ba .bcmp .lab.r{right:16px}
.ba .bcap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:18px; align-items:center}
.ba .bset{display:none}.ba .bset.on{display:block}
.ba .bintro{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:end; margin-bottom:clamp(36px,5vw,64px)}
.ba .bintro .d2{max-width:10ch}
.ba .bintro .p{justify-self:end}

/* ---------- APPROACH (parallax columns) ---------- */
.appr .acols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); margin-top:clamp(40px,6vw,88px); align-items:start}
.appr .acol{display:flex; flex-direction:column; gap:var(--gap); will-change:transform}
.appr .acol figure{border-radius:6px; overflow:hidden; background:var(--ink3); position:relative}
.appr .acol figure img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top}
.appr .acol figure.short img{aspect-ratio:4/3}
.appr .acol figcaption{position:absolute; left:14px; bottom:14px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:7px 11px; border-radius:100px; background:rgba(10,10,11,.62); color:var(--paper); backdrop-filter:blur(8px); font-variation-settings:'wdth' 90,'wght' 580}
.appr .acol:nth-child(2){padding-top:clamp(40px,8vw,140px)}
.appr .acol:nth-child(3){padding-top:clamp(20px,4vw,70px)}
.appr .atext{display:grid; grid-template-columns:7fr 5fr; gap:var(--gap); align-items:end}
.appr .atext .d2{max-width:13ch}
.appr .alines{display:flex; flex-direction:column; gap:14px}
.appr .alines p{font-size:clamp(20px,2vw,30px); letter-spacing:-.025em; line-height:1.15; font-variation-settings:'wdth' 104,'wght' 500; color:var(--txt2)}
.appr .alines p b{color:var(--txt); font-weight:inherit}

/* ---------- RESPONSIVE MORPH ---------- */
.resp{height:250vh; position:relative}
.resp .rsticky{position:sticky; top:0; height:100vh; height:100svh; display:grid; grid-template-rows:auto 1fr auto; padding:calc(var(--nav-h) + 2vh) var(--pad) 5vh; overflow:hidden}
.resp .rtop{display:flex; justify-content:space-between; align-items:flex-start; gap:24px}
.resp .rtop .d3{max-width:14ch}
.resp .rstage{position:relative; display:flex; align-items:center; justify-content:center; min-height:0}
.resp .rdev{position:relative; width:min(1100px,100%); aspect-ratio:16/10; max-height:100%; border-radius:10px; overflow:hidden; background:#141417; border:1px solid var(--line2); box-shadow:0 60px 120px -40px rgba(0,0,0,.8); transition:border-radius .5s var(--ease); will-change:width,aspect-ratio}
.resp .rdev img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transition:opacity .45s var(--ease)}
.resp .rdev img.on{opacity:1}
.resp .rbot{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-top:20px}
.resp .rlabs{display:flex; gap:28px}
.resp .rlabs span{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt3); font-variation-settings:'wdth' 90,'wght' 560; transition:color .3s; display:inline-flex; align-items:center; gap:10px}
.resp .rlabs span::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5}
.resp .rlabs span.on{color:var(--txt)}
.resp .rbot .p{max-width:40ch; text-align:right; font-size:15px}

/* ---------- PROCESS ---------- */
.proc .pgrid{display:grid; grid-template-columns:4fr 8fr; gap:var(--gap); align-items:start}
.proc .pleft{position:sticky; top:calc(var(--nav-h) + 24px)}
.proc .pleft .pnum{font-size:clamp(90px,14vw,240px); line-height:.85; letter-spacing:-.05em; font-variation-settings:'wdth' 112,'wght' 640; position:relative; height:1em; overflow:hidden}
.proc .pleft .pnum span{position:absolute; left:0; top:0; transform:translateY(110%); transition:transform .7s var(--ease); color:var(--txt)}
.proc .pleft .pnum span.on{transform:translateY(0)}
.proc .pleft .pnum span.prev{transform:translateY(-110%)}
.proc .pleft .pline{height:1px; background:var(--line); margin:28px 0; position:relative}
.proc .pleft .pline i{position:absolute; left:0; top:0; height:100%; background:var(--txt); width:0; transition:width .6s var(--ease)}
.proc .pleft .pnames{display:flex; flex-direction:column; gap:8px}
.proc .pleft .pnames span{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt3); font-variation-settings:'wdth' 90,'wght' 560; transition:color .3s; display:flex; gap:12px}
.proc .pleft .pnames span.on{color:var(--txt)}
.proc .pleft .pnames span i{font-style:normal; color:var(--txt3); min-width:22px}
.proc .stages{display:flex; flex-direction:column}
.proc .stage{padding:clamp(40px,6vh,72px) 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr; gap:14px; min-height:34vh; scroll-margin-top:30vh}
.proc .stage h3{font-size:clamp(28px,3.4vw,54px); letter-spacing:-.04em; line-height:1; font-variation-settings:'wdth' 110,'wght' 610; display:flex; gap:20px; align-items:baseline}
.proc .stage h3 small{font-variation-settings:'wdth' 75,'wght' 500; font-size:13px; letter-spacing:.1em; color:var(--txt3)}
.proc .stage p{max-width:52ch}
.proc .stage .sdet{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.proc .stage .sdet span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:8px 12px; border:1px solid var(--line); border-radius:100px; color:var(--txt2); font-variation-settings:'wdth' 90,'wght' 560}
.proc .stage:last-child{border-bottom:1px solid var(--line)}

/* ---------- CLOSING + FOOTER ---------- */
.close{padding:clamp(100px,14vw,200px) 0 clamp(80px,10vw,150px); position:relative; overflow:hidden}
.close .cd{font-size:clamp(44px,7.6vw,132px); max-width:14ch}
.close .crow{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-top:clamp(36px,5vw,64px)}
.close .crow .p{max-width:42ch; color:var(--txt2)}
.close .cdash{position:absolute; right:-6vw; top:-8vw; width:52vw; height:2px; background:repeating-linear-gradient(90deg,rgba(244,242,236,.35) 0 22px,transparent 22px 38px); transform:rotate(-58deg); transform-origin:right; pointer-events:none}
.close .cmark{position:absolute; right:var(--pad); bottom:clamp(40px,6vw,90px); width:clamp(90px,10vw,170px); opacity:.2; pointer-events:none}
footer{padding:clamp(56px,7vw,96px) 0 32px; border-top:1px solid var(--line)}
footer .fcols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--gap); align-items:start}
footer .fbrand img{width:clamp(120px,12vw,170px); margin-bottom:22px}
footer .fbrand p{max-width:34ch; color:var(--txt2); font-size:14.5px; line-height:1.55}
footer .fh{display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt3); margin-bottom:16px; font-variation-settings:'wdth' 90,'wght' 560}
footer .fcols a{display:block; padding:5px 0; font-size:15px; color:var(--txt2); transition:color .25s}
footer .fcols a:hover{color:var(--txt)}
footer .fbase{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:clamp(48px,6vw,80px); padding-top:24px; border-top:1px solid var(--line); font-size:12px; letter-spacing:.06em; color:var(--txt3)}
footer .fbase .big{font-size:clamp(60px,12vw,220px); line-height:.8; letter-spacing:-.05em; font-variation-settings:'wdth' 118,'wght' 640; color:var(--txt); opacity:.06; width:100%; margin-bottom:30px; user-select:none; pointer-events:none}

/* ---------- PAGE HERO (inner pages) ---------- */
.phero{padding:calc(var(--nav-h) + clamp(60px,10vh,120px)) 0 clamp(40px,6vw,80px); position:relative; overflow:hidden}
.phero .kick{margin-bottom:clamp(20px,3vh,32px)}
.phero .d1{max-width:12ch; margin-bottom:clamp(24px,4vh,40px)}
.phero .lead{max-width:52ch; color:var(--txt2)}
.phero .prow{display:grid; grid-template-columns:7fr 5fr; gap:var(--gap); align-items:end}
.phero .prow .lead{justify-self:end}
.phero .pdash{position:absolute; right:calc(var(--pad) - 10px); top:calc(var(--nav-h) + 6vh); width:min(30vw,420px); height:2px; background:repeating-linear-gradient(90deg,var(--line2) 0 16px,transparent 16px 28px); transform:rotate(-58deg); transform-origin:right; opacity:.6; pointer-events:none}

/* ---------- WORK INDEX PAGE ---------- */
.wfilters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.wfilters button{height:40px; padding:0 16px; border:1px solid var(--line2); border-radius:100px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:'wdth' 90,'wght' 580; color:var(--txt2); transition:background-color .3s,color .3s,border-color .3s}
.wfilters button[aria-pressed="true"]{background:var(--txt); color:var(--bg); border-color:var(--txt)}
.wlist{border-top:1px solid var(--line); position:relative}
.wrow{display:grid; grid-template-columns:52px 1fr 1fr 1fr 80px 40px; gap:20px; align-items:center; padding:clamp(22px,2.6vw,36px) 0; border-bottom:1px solid var(--line); transition:opacity .3s,padding .5s var(--ease)}
.wrow.hide{display:none}
.wrow .wn{font-variation-settings:'wdth' 75,'wght' 500; font-size:12px; letter-spacing:.1em; color:var(--txt3)}
.wrow .wname{font-size:clamp(22px,3vw,48px); letter-spacing:-.035em; line-height:1; font-variation-settings:'wdth' 108,'wght' 600; transition:transform .6s var(--ease)}
.wrow:hover .wname{transform:translateX(10px)}
.wrow .wi,.wrow .ws{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt2); font-variation-settings:'wdth' 90,'wght' 540}
.wrow .wy{font-variation-settings:'wdth' 75,'wght' 500; font-size:13px; letter-spacing:.06em; color:var(--txt2); text-align:right}
.wrow .wa{width:40px; height:40px; border:1px solid var(--line2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .3s,color .3s}
.wrow .wa svg{width:13px; height:13px}
.wrow:hover .wa{background:var(--txt); color:var(--bg)}
.wlist:hover .wrow:not(:hover){opacity:.45}
.wprev{position:fixed; left:0; top:0; width:clamp(260px,26vw,460px); aspect-ratio:16/10; border-radius:6px; overflow:hidden; pointer-events:none; z-index:150; opacity:0; transform:translate(-50%,-50%) scale(.9); transition:opacity .35s var(--ease),transform .5s var(--ease); box-shadow:0 40px 100px -30px rgba(0,0,0,.7); background:var(--ink3)}
.wprev.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.wprev img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transition:opacity .3s}
.wprev img.on{opacity:1}
.wrow .wthumb{display:none}

/* ---------- CASE STUDY ---------- */
.cs-hero{padding-top:calc(var(--nav-h) + clamp(40px,8vh,90px))}
.cs-hero .cst{display:grid; grid-template-columns:8fr 4fr; gap:var(--gap); align-items:end; margin-bottom:clamp(32px,5vw,64px)}
.cs-hero .d1{max-width:11ch}
.cs-hero .csmeta{display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; border-top:1px solid var(--line); padding-top:18px}
.cs-hero .csmeta div{font-size:14px; color:var(--txt)}
.cs-hero .csmeta div small{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt3); margin-bottom:6px; font-variation-settings:'wdth' 90,'wght' 560}
.cs-hero .csimg{border-radius:10px; overflow:hidden; background:var(--ink3); position:relative; aspect-ratio:16/9}
.cs-hero .csimg img{width:100%; height:100%; object-fit:cover; object-position:top}
.cs-sec{padding:clamp(64px,8vw,120px) 0}
.cs-sec .cgrid{display:grid; grid-template-columns:4fr 8fr; gap:var(--gap); align-items:start}
.cs-sec .cgrid .h4{max-width:16ch}
.cs-sec .ctext{max-width:60ch}
.cs-sec .ctext p{font-size:clamp(17px,1.25vw,20px); line-height:1.55; color:var(--txt2)}
.cs-sec .ctext p+p{margin-top:1em}
.cs-sec .ctext p b{color:var(--txt); font-weight:520}
.cs-imgs{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap)}
.cs-imgs .full{grid-column:1/-1}
.cs-imgs figure{position:relative}
.cs-imgs figcaption{margin-top:12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt3); font-variation-settings:'wdth' 90,'wght' 540}
.cs-tall{border-radius:8px; overflow:hidden; background:var(--ink3); max-height:80vh; position:relative}
.cs-tall img{width:100%; will-change:transform}
.cs-tall::after{content:""; position:absolute; left:0; right:0; bottom:0; height:80px; background:linear-gradient(transparent,var(--bg)); pointer-events:none}
.cs-phones{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); align-items:end; max-width:1100px; margin:0 auto}
.cs-phones .phone:nth-child(2){transform:translateY(-6%)}
.cs-next{padding:clamp(80px,12vw,180px) 0; border-top:1px solid var(--line)}
.cs-next a{display:grid; grid-template-columns:7fr 5fr; gap:var(--gap); align-items:center}
.cs-next .kick{margin-bottom:22px}
.cs-next .d2{max-width:10ch; transition:transform .6s var(--ease)}
.cs-next a:hover .d2{transform:translateX(14px)}
.cs-next .nimg{border-radius:6px; overflow:hidden; aspect-ratio:16/10; background:var(--ink3)}
.cs-next .nimg img{width:100%; height:100%; object-fit:cover; object-position:top; transform:scale(1.02); transition:transform 1.2s var(--ease)}
.cs-next a:hover .nimg img{transform:scale(1.07)}
.cs-quote{border-left:1px solid var(--line2); padding-left:28px; max-width:60ch}
.cs-quote p{font-size:clamp(20px,2vw,30px); letter-spacing:-.02em; line-height:1.25; font-variation-settings:'wdth' 104,'wght' 460}
.cs-quote footer{border:0; padding:14px 0 0; font-size:13px; color:var(--txt2)}

/* ---------- SERVICES PAGE ---------- */
.sv-list{border-top:1px solid var(--line)}
.sv{display:grid; grid-template-columns:70px 5fr 6fr; gap:var(--gap); padding:clamp(40px,5vw,72px) 0; border-bottom:1px solid var(--line); align-items:start}
.sv .sn{font-variation-settings:'wdth' 75,'wght' 500; font-size:13px; letter-spacing:.1em; color:var(--txt3); padding-top:10px}
.sv h2{font-size:clamp(30px,4vw,64px); letter-spacing:-.04em; line-height:.98; font-variation-settings:'wdth' 110,'wght' 610; margin-bottom:16px}
.sv .sfrom{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt2); font-variation-settings:'wdth' 90,'wght' 560}
.sv .sfrom b{color:var(--txt); font-weight:inherit}
.sv .sr2 p{max-width:56ch}
.sv .sinc{margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px}
.sv .sinc span{font-size:14px; color:var(--txt2); padding:10px 0; border-top:1px solid var(--line)}
.sv .sr2 .tlink{margin-top:24px}
.price{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
.price .pc{border-top:1px solid var(--line2); padding-top:22px; display:flex; flex-direction:column; gap:14px; min-height:100%}
.price .pc .kick{margin-bottom:6px}
.price .pc .pv{font-size:clamp(34px,4vw,60px); letter-spacing:-.04em; line-height:1; font-variation-settings:'wdth' 110,'wght' 620}
.price .pc .pv small{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt2); font-variation-settings:'wdth' 90,'wght' 560; margin-left:8px; vertical-align:middle}
.price .pc p{color:var(--txt2); font-size:15px; line-height:1.55; max-width:36ch}
.price .pc .pfor{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt3); font-variation-settings:'wdth' 90,'wght' 560}
.price .pc .tlink{margin-top:auto; padding-top:16px}
.mgmt{margin-top:clamp(40px,6vw,80px); display:grid; grid-template-columns:5fr 7fr; gap:var(--gap); border-top:1px solid var(--line2); padding-top:clamp(28px,4vw,48px); align-items:start}
.mgmt .mv{font-size:clamp(34px,4vw,60px); letter-spacing:-.04em; line-height:1; font-variation-settings:'wdth' 110,'wght' 620; margin:14px 0 10px}
.mgmt .mv small{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt2); font-variation-settings:'wdth' 90,'wght' 560; margin-left:8px}
.mgmt .minc{display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; margin-top:18px}
.mgmt .minc span{font-size:14px; color:var(--txt2); padding:9px 0; border-top:1px solid var(--line)}

/* ---------- ABOUT / APPROACH PAGES ---------- */
.state{padding:clamp(64px,8vw,120px) 0}
.state .d2{max-width:16ch}
.state .d3{max-width:20ch}
.pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
.pillars div{border-top:1px solid var(--line2); padding-top:20px}
.pillars div .n{font-variation-settings:'wdth' 75,'wght' 500; font-size:12px; letter-spacing:.1em; color:var(--txt3); margin-bottom:22px; display:block}
.pillars div h3{font-size:clamp(22px,2.2vw,34px); letter-spacing:-.03em; line-height:1.05; font-variation-settings:'wdth' 108,'wght' 600; margin-bottom:12px}
.pillars div p{color:var(--txt2); font-size:15.5px; line-height:1.55}
.contrast{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
.contrast figure{border-radius:6px; overflow:hidden; position:relative; background:var(--ink3)}
.contrast figure img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top}
.contrast figcaption{margin-top:12px; display:flex; justify-content:space-between; gap:12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt2); font-variation-settings:'wdth' 90,'wght' 540}
.contrast figcaption b{color:var(--txt); font-weight:inherit}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; display:grid; grid-template-columns:52px 1fr 40px; gap:20px; align-items:center; padding:clamp(20px,2.4vw,30px) 0; font-size:clamp(19px,1.7vw,26px); letter-spacing:-.02em; line-height:1.2; font-variation-settings:'wdth' 104,'wght' 540; cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-variation-settings:'wdth' 75,'wght' 500; font-size:12px; letter-spacing:.1em; color:var(--txt3)}
.faq summary .x{width:36px; height:36px; border:1px solid var(--line2); border-radius:50%; position:relative; transition:transform .5s var(--ease),background .3s}
.faq summary .x::before,.faq summary .x::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:currentColor; transform:translate(-50%,-50%)}
.faq summary .x::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .x{transform:rotate(45deg); background:var(--txt); color:var(--bg); border-color:var(--txt)}
.faq .fa{padding:0 0 clamp(22px,2.6vw,34px) 72px; max-width:62ch; color:var(--txt2); font-size:16px; line-height:1.6}

/* ---------- FORMS ---------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:22px var(--gap)}
.form .full{grid-column:1/-1}
.fld{display:flex; flex-direction:column; gap:8px; position:relative}
.fld label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt2); font-variation-settings:'wdth' 90,'wght' 560}
.fld label b{color:var(--blue); font-weight:inherit}
.light .fld label b{color:var(--blue)}
.fld input,.fld textarea,.fld select{width:100%; background:transparent; border:0; border-bottom:1px solid var(--line2); color:var(--txt); font:inherit; font-size:17px; padding:12px 0; border-radius:0; outline:0; transition:border-color .3s; -webkit-appearance:none; appearance:none}
.fld textarea{min-height:120px; resize:vertical}
.fld select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:30px}
.fld select option{color:#000}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--txt)}
.fld.err input,.fld.err textarea,.fld.err select{border-color:#FF5C5C}
.fld .msg{font-size:13px; color:#FF7A7A; min-height:0; display:none}
.fld.err .msg{display:block}
.light .fld .msg{color:#C62828}
.fld .opts{display:flex; flex-wrap:wrap; gap:8px; padding-top:4px}
.fld .opts label{display:inline-flex; align-items:center; height:40px; padding:0 16px; border:1px solid var(--line2); border-radius:100px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt2); cursor:pointer; transition:background-color .3s,color .3s,border-color .3s; position:relative}
.fld .opts input{position:absolute; opacity:0; width:0; height:0}
.fld .opts input:checked+span{color:var(--bg)}
.fld .opts label:has(input:checked){background:var(--txt); color:var(--bg); border-color:var(--txt)}
.fld .opts label:has(input:focus-visible){outline:2px solid var(--blue); outline-offset:2px}
.form .fsub{grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:8px}
.form .fsub .note{font-size:13px; color:var(--txt3); max-width:44ch}
.form .fok{grid-column:1/-1; display:none; padding:28px; border:1px solid var(--line2); border-radius:6px}
.form.sent .fok{display:block}
.form.sent .fld,.form.sent .fsub{display:none}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}
.cgrid2{display:grid; grid-template-columns:5fr 7fr; gap:clamp(40px,6vw,96px)}
.cinfo{display:flex; flex-direction:column; gap:32px}
.cinfo .ci small{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt3); margin-bottom:8px; font-variation-settings:'wdth' 90,'wght' 560}
.cinfo .ci a,.cinfo .ci span{font-size:clamp(18px,1.5vw,24px); letter-spacing:-.015em; font-variation-settings:'wdth' 102,'wght' 500}
.cinfo .ci a:hover{color:var(--blue)}

/* ---------- LEGAL ---------- */
.legal{max-width:72ch}
.legal h2{font-size:clamp(20px,1.8vw,28px); letter-spacing:-.02em; margin:40px 0 12px; font-variation-settings:'wdth' 106,'wght' 580}
.legal p,.legal li{color:var(--txt2); font-size:16px; line-height:1.65}
.legal ul{padding-left:20px; margin:8px 0}
.legal .note{border:1px dashed var(--line2); padding:14px 18px; border-radius:4px; font-size:14px; color:var(--txt2); margin-top:28px}

/* ---------- 404 ---------- */
.nf{min-height:100svh; display:grid; place-items:center; text-align:center; padding:var(--nav-h) var(--pad)}
.nf .d1{font-size:clamp(90px,22vw,320px); opacity:.12; line-height:.8}
.nf .nfin{margin-top:-1em; position:relative}

/* ---------- MOTION: reveals (gated behind html.js) ---------- */
html.js .rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
html.js .rv.in{opacity:1; transform:none}
html.js .rv-img{clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease2)}
html.js .rv-img.in{clip-path:inset(0 0 0 0)}
html.js .rv-img img{transform:scale(1.15); transition:transform 1.6s var(--ease)}
html.js .rv-img.in img{transform:scale(1)}
html.js .rv-w .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em}
html.js .rv-w .w>span{display:inline-block; transform:translateY(112%); transition:transform 1s var(--ease)}
html.js .rv-w.in .w>span{transform:translateY(0)}
html.js .rv-c .c{display:inline-block; transform:translateY(105%); opacity:0; transition:transform .9s var(--ease),opacity .5s}
html.js .rv-c .cw{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em}
html.js .rv-c.in .c{transform:none; opacity:1}
html.js .rv-line{transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease2)}
html.js .rv-line.in{transform:scaleX(1)}
html.js .stagger>*{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease),transform 1s var(--ease)}
html.js .stagger.in>*{opacity:1; transform:none}
html.js .stagger.in>*:nth-child(1){transition-delay:.0s}html.js .stagger.in>*:nth-child(2){transition-delay:.08s}html.js .stagger.in>*:nth-child(3){transition-delay:.16s}html.js .stagger.in>*:nth-child(4){transition-delay:.24s}html.js .stagger.in>*:nth-child(5){transition-delay:.32s}html.js .stagger.in>*:nth-child(6){transition-delay:.4s}html.js .stagger.in>*:nth-child(7){transition-delay:.48s}html.js .stagger.in>*:nth-child(8){transition-delay:.56s}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .stagger>*{transform:none!important; transition:opacity .6s ease!important}
  html.js .rv-img{clip-path:none!important; opacity:0; transition:opacity .6s ease!important}
  html.js .rv-img.in{opacity:1}
  html.js .rv-img img{transform:none!important; transition:none!important}
  html.js .rv-w,html.js .rv-c{opacity:0; transition:opacity .6s ease!important}
  html.js .rv-w.in,html.js .rv-c.in{opacity:1}
  html.js .rv-line{transform:none!important}
  .intro,.veil,.cur{display:none!important}
  .hero .hmeta .scr i{animation:none}
  .flash img{transition:opacity .4s}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .nav .links{display:none}
  .split{grid-template-columns:1fr}
  .svc .sbody{grid-template-columns:1fr}
  .svc .svis{position:relative; top:auto; aspect-ratio:16/10; max-height:none; margin-top:24px}
  .proc .pgrid{grid-template-columns:1fr}
  .proc .pleft{position:relative; top:auto; margin-bottom:24px}
  .proc .pleft .pnum{font-size:clamp(70px,16vw,140px)}
  .proc .stage{min-height:0}
  footer .fcols{grid-template-columns:1fr 1fr}
  .cgrid2{grid-template-columns:1fr}
  .sv{grid-template-columns:52px 1fr}
  .sv .sr2{grid-column:2}
  .price{grid-template-columns:1fr}
  .mgmt{grid-template-columns:1fr}
  .cs-sec .cgrid{grid-template-columns:1fr}
  .cs-hero .cst{grid-template-columns:1fr}
  .cs-hero .csmeta{grid-template-columns:repeat(4,1fr)}
  .phero .prow{grid-template-columns:1fr}
  .phero .prow .lead{justify-self:start}
  .ba .bintro{grid-template-columns:1fr}
  .ba .bintro .p{justify-self:start}
  .appr .atext{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--nav-h:64px}
  .hero .hsub{grid-column:1/13}
  .hero .hcta{grid-column:1/13; justify-content:flex-start; margin-top:8px}
  .hero .hin{padding-top:clamp(60px,10vh,120px)}
  .flash{position:relative; inset:auto; order:-1; height:auto; pointer-events:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 var(--pad); margin-top:16px}
  .flash img{position:relative; width:100%; transform:none; opacity:.9; aspect-ratio:16/11; border-radius:4px; box-shadow:none; transition:opacity .8s}
  .flash img:nth-child(n+5){display:none}
  .flash img.on{transform:none; opacity:1}
  .flash .fcap{display:none}
  .hero .hdash{display:none}
  .hero{grid-template-rows:auto 1fr auto}
  .work-h .sticky{position:relative; height:auto; overflow:visible; display:block}
  .panel,.panel.wide{width:100%}
  .panel.tallp .pimg{aspect-ratio:16/10; max-height:none; width:100%}
  .work-h .whead{position:relative; top:auto; left:auto; right:auto; padding:0 var(--pad); margin-bottom:28px}
  .work-h .wprog,.work-h .wcount{display:none}
  .work-h .end{width:100%; padding:20px 0 0}
  .two{grid-template-columns:1fr}
  .prob .pl{position:relative; top:auto; margin-bottom:8px}
  .prob .pr{padding-top:24px; gap:40px}
  .svc .sitem{grid-template-columns:44px 1fr}
  .svc .sitem .sfor{display:none}
  .svc .slist .sitem{opacity:1}
  .svc .sitem .sx{max-height:none; opacity:1}
  .svc .sben{grid-template-columns:1fr}
  .svc .bens{grid-template-columns:1fr}
  .appr .acols{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:8px; margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad)); padding-left:var(--pad); padding-right:var(--pad); -webkit-overflow-scrolling:touch}
  .appr .acol{flex:0 0 78vw; scroll-snap-align:start; padding-top:0!important; transform:none!important}
  .appr .acol figure:nth-child(n+3){display:none}
  .resp .rsticky{position:relative; height:auto; padding-top:0; display:block}
  .resp .rstage{margin:28px 0}
  .resp .rdev img:first-child{opacity:1}
  .resp .rbot{flex-direction:column; align-items:flex-start}
  .resp .rbot .p{text-align:left}
  .resp .rlabs span.on{color:var(--txt)}
  .rmob{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
  .close .cmark{display:none}
  footer .fcols{grid-template-columns:1fr 1fr}
  .wrow{grid-template-columns:1fr auto; gap:6px 16px; align-items:start}
  .wrow .wn{display:none}
  .wrow .wname{grid-column:1/-1; font-size:clamp(26px,7vw,40px)}
  .wrow .wi{grid-column:1}
  .wrow .ws{grid-column:1}
  .wrow .wy{grid-column:2; grid-row:2}
  .wrow .wa{grid-column:2; grid-row:3}
  .wrow .wthumb{display:block; grid-column:1/-1; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:4px; margin-bottom:8px; order:-1}
  .wprev{display:none}
  .cs-hero .csmeta{grid-template-columns:1fr 1fr}
  .cs-imgs{grid-template-columns:1fr}
  .cs-phones{grid-template-columns:1fr 1fr; gap:14px}
  .cs-phones .phone:nth-child(3){display:none}
  .cs-phones .phone:nth-child(2){transform:none}
  .cs-next a{grid-template-columns:1fr}
  .pillars,.contrast{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .faq summary{grid-template-columns:1fr 36px; font-size:18px}
  .faq summary .n{display:none}
  .faq .fa{padding-left:0}
  .sec-h{grid-template-columns:1fr}
  .menu{grid-template-columns:1fr}
  .menu .mr{display:none}
  .menu .mlinks a{font-size:clamp(34px,10vw,56px)}
  .menu .mfoot{gap:18px 28px}
  .btn{height:50px}
  .ticker .tk{animation-duration:34s}
  .hero .hmeta{flex-direction:column; gap:12px}
}
@media (min-width:901px){.rmob{display:none}}
@media (max-width:520px){
  .cs-hero .csmeta{grid-template-columns:1fr 1fr}
  footer .fcols{grid-template-columns:1fr}
  .price .pc .pv{font-size:34px}
}

html.js .rv-c .cwd{display:inline-block; white-space:nowrap}

/* ---------- mobile hero: content-sized, collage on top, no blowout ---------- */
@media (max-width:900px){
  .hero{min-height:auto; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto}
  .hero>*{min-width:0}
  .hero .hin{padding-top:clamp(28px,5vh,48px); padding-bottom:36px; min-width:0}
  .hero .hin>*{min-width:0}
  .hero .hsub{max-width:100%}
  .hero h1{font-size:clamp(44px,12.5vw,60px)}
  .flash{margin-top:calc(var(--nav-h) + 16px); min-width:0}
  .flash img{min-width:0; width:100%; height:auto}
  .flash img:nth-child(1){grid-column:1/-1; aspect-ratio:16/9}
  .ticker{min-width:0}
  .work-h{padding-top:clamp(56px,8vw,96px)}
}
.wrow .wthumb{width:100%; min-width:0}
.wrow .wy{white-space:nowrap}
@media (min-width:901px){.wrow{grid-template-columns:52px 1fr 1fr 1fr 118px 40px}}

/* ===== QA round 1 fixes ===== */
/* themed sections must paint their own ground */
.light,.blue{background:var(--bg); color:var(--txt)}
/* pinned gallery: header, track and footer in their own rows so nothing overlaps */
@media (min-width:901px){
  .work-h .sticky{display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:calc(var(--nav-h) + 1.5vh) 0 3vh; justify-content:stretch}
  .work-h .whead{position:relative; top:auto; left:auto; right:auto; padding:0 var(--pad); margin-bottom:2vh; pointer-events:auto}
  .work-h .tw{position:relative; min-height:0; display:flex; align-items:center; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
  .panel .pimg{max-height:min(54vh,620px)}
  .panel.tallp .pimg{max-height:min(54vh,620px)}
  .work-h .wfoot{position:relative; padding:2vh var(--pad) 0; display:flex; align-items:center; gap:24px}
  .work-h .wprog{position:relative; left:auto; right:auto; bottom:auto; flex:1}
  .work-h .wcount{position:relative; right:auto; bottom:auto}
}
/* hero flashes: smaller and darker so the headline stays legible over light screenshots */
/* approach columns: show desktop shots uncropped */
.appr .acol figure.short img{aspect-ratio:16/10}
/* responsive morph: device chrome per stage + reduced-motion fallback */
.resp .rdev::before{content:""; position:absolute; left:0; right:0; top:0; height:0; background:#1B1B20; border-bottom:1px solid rgba(255,255,255,.06); z-index:2; transition:height .4s var(--ease); background-image:radial-gradient(circle at 12px 13px,#3A3A42 4px,transparent 4.6px),radial-gradient(circle at 26px 13px,#3A3A42 4px,transparent 4.6px),radial-gradient(circle at 40px 13px,#3A3A42 4px,transparent 4.6px)}
.resp .rdev.stage-0::before{height:26px}
.resp .rdev.stage-0 img{top:26px; height:calc(100% - 26px)}
.resp .rdev.stage-2{border-width:6px; border-color:#0E0E11; box-shadow:0 0 0 1px var(--line2),0 60px 120px -40px rgba(0,0,0,.8)}
.resp .rdev.stage-2::after{content:""; position:absolute; top:10px; left:50%; width:84px; height:20px; background:#0E0E11; border-radius:100px; transform:translateX(-50%); z-index:2}
/* gallery sizing: the image height sets the panel width; the sticky grid never inherits the track width */
@media (min-width:901px){
  .work-h .sticky{grid-template-columns:minmax(0,1fr)}
  .work-h .tw{min-width:0}
  .work-h .whead,.work-h .wfoot{min-width:0; max-width:100vw}
  .panel,.panel.wide{width:auto; max-width:84vw}
  .panel .pimg,.panel.tallp .pimg{height:min(54vh,600px); max-height:none; width:auto; aspect-ratio:16/10}
  .panel.wide .pimg{aspect-ratio:1.85}
  .panel .pcap{max-width:100%}
}
/* footer placeholders sit on their own lines like the links they stand in for */
footer .fcols span.ph{display:block; width:max-content; padding:5px 0; margin:0; border-bottom:0; font-size:15px}
footer .fcols span.ph::after{content:""; display:block; height:1px; background:repeating-linear-gradient(90deg,var(--line2) 0 5px,transparent 5px 9px); margin-top:2px}
.cnote{margin-top:24px; padding-top:18px; border-top:1px dashed var(--line2); font-size:15px!important; color:var(--txt2)}

/* ===== QA round 2 fixes ===== */
@media (max-width:900px){
  .work-h .whead{flex-direction:column; align-items:flex-start; gap:14px}
  .work-h .whead .side{max-width:100%}
}
.ticker{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* ===== QA round 3 fixes ===== */
.nav.onblue{mix-blend-mode:normal; color:var(--paper)}
.nav.onblue .cta{border-color:var(--paper)} .nav.onblue .cta::before{background:var(--paper)} .nav.onblue .cta:hover{color:var(--blue)}
.svc .slist:not(.touch) .sitem:not(.on){opacity:.52}

/* ===== QA round 4 fixes ===== */
.work-h .wprog{background:var(--line2)}
.flash img{filter:saturate(.9) brightness(.62)}
/* phone frame: a real status-bar area so the notch never sits on the screenshot's header */
.phone{padding:40px 10px 12px}
.phone::before{top:14px}
.phone img{border-radius:0 0 26px 26px}
@media (max-width:520px){.phone{padding:30px 6px 8px}.phone::before{top:10px}.phone img{border-radius:0 0 18px 18px}}
/* ===== QA round 5 fixes ===== */
@media (max-width:900px){
  .svc .svis{aspect-ratio:auto; display:flex; flex-direction:column; background:none; border-radius:0; overflow:visible; margin-top:20px}
  .svc .svis img{position:relative; inset:auto; display:none; width:100%; height:auto; aspect-ratio:16/10; border-radius:6px; opacity:1; transform:none}
  .svc .svis img.on{display:block}
  .svc .svis .vcap{position:relative; left:auto; bottom:auto; padding:12px 0 0}
  .svc .svis .vcap span{background:none; backdrop-filter:none; border:1px solid var(--line2); color:var(--txt2); padding:7px 11px}
}
.contrast figcaption{color:var(--txt)} .contrast figcaption span{color:var(--txt2)}
/* ===== QA round 6 fixes ===== */
.sdet .tag{white-space:normal; height:auto; min-height:24px; padding:6px 11px; line-height:1.3; text-align:left}
.phone::after{content:""; position:absolute; left:10px; right:10px; top:10px; height:30px; background:#16161B; border-radius:24px 24px 0 0; z-index:1}
@media (max-width:520px){.phone::after{left:6px; right:6px; top:6px; height:24px; border-radius:18px 18px 0 0}}

/* ============================================================ V2 ============================================================ */
/* --- blue as a working accent --- */
.kick::before{background:var(--blue); opacity:1}
.light .kick::before,.blue .kick::before{background:var(--blue)}
.blue .kick::before{background:var(--paper)}
.stop{color:var(--blue)}
.blue .stop{color:var(--paper)}
.svc .sitem .sn,.proc .stage h3 small,.prob .pt .n,.pillars div .n,.sv .sn,.wrow .wn,.faq summary .n,.step b.n{color:var(--blue-txt)}
.proc .pleft .pline i{background:var(--blue)}
.work-h .wprog i{background:var(--blue)}
.prog{background:var(--blue); opacity:.9}
.tag:not(.c){border-color:var(--blue-txt); color:var(--blue-txt)}
.blue .tag:not(.c){border-color:var(--paper); color:var(--paper)}
.tlink::after{background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 10px)}
.blue .tlink::after{background:repeating-linear-gradient(90deg,var(--paper) 0 6px,transparent 6px 10px)}
.hero .hdash,.phero .pdash{background:repeating-linear-gradient(90deg,var(--blue) 0 16px,transparent 16px 28px); opacity:.55}
.ticker .tk span i{background:var(--blue)}
.resp .rlabs span.on{color:var(--blue-txt)}
.proc .pleft .pnames span.on{color:var(--blue-txt)}
.proc .pleft .pnum span.on{color:var(--txt)}
.btn.fill:hover,.nav .cta:hover{color:var(--paper)}
.cinfo .ci a:hover{color:var(--blue)}
.faq details[open] summary .x{background:var(--blue); border-color:var(--blue); color:var(--paper)}
.wfilters button[aria-pressed="true"],.ba .btabs button[aria-selected="true"]{background:var(--blue); color:var(--paper); border-color:var(--blue)}
/* --- logo presence --- */
.nav .logo img{height:22px}
footer .fbrand img{width:clamp(180px,20vw,300px)}
.close .cmark{opacity:.34; width:clamp(120px,14vw,240px)}
.menu .mr{display:flex; align-items:center; justify-content:center; background:var(--ink2)}
.menu .mr .mmark{width:min(46%,360px); opacity:.9}
.menu .mr .mdash{position:absolute; left:50%; top:50%; width:70%; height:2px; transform:translate(-50%,-50%) rotate(-58deg); background:repeating-linear-gradient(90deg,var(--blue) 0 18px,transparent 18px 30px); opacity:.6}
.hero .hmark{position:absolute; right:calc(var(--pad) - 2vw); bottom:14vh; width:min(26vw,380px); opacity:.08; z-index:0; pointer-events:none}
/* --- process pills: centred text, smaller --- */
.proc .stage .sdet span,.sv .sinc span.pill{display:inline-flex; align-items:center; height:30px; padding:0 12px; font-size:10.5px; line-height:1; letter-spacing:.12em}
.proc .stage .sdet{gap:8px; margin-top:16px}
/* --- lifestyle imagery treatment --- */
.life{filter:saturate(.72) contrast(1.04); object-fit:cover}
.prob .pimg2 img{filter:saturate(.7)}
.svc .svis img{filter:saturate(.72) contrast(1.05) brightness(.92)}
/* --- responsive morph: full screens, frame sized from the stage height --- */
.resp .rdev{max-height:none}
.resp .rdev img{object-fit:cover; object-position:top}

/* ============================================================ V2 MOBILE: designed, not stacked ============================================================ */
@media (max-width:900px){
  :root{--pad:20px}
  .sec{padding:56px 0}
  .sec-h{margin-bottom:24px; gap:12px}
  .sec-h .kick{margin-bottom:12px}
  .sec-h .side{font-size:14px; max-width:100%; padding-bottom:0}
  .d1{font-size:clamp(40px,11vw,58px)}
  .d2{font-size:clamp(32px,8.8vw,46px)}
  .d3{font-size:clamp(25px,6.8vw,34px)}
  .h4{font-size:21px}
  .lead{font-size:17px}
  .p{font-size:15.5px}
  .p.big{font-size:16.5px}
  .kick{font-size:10px}
  .btn{height:48px; padding:0 20px; font-size:11.5px}
  .btn.lg{height:52px; padding:0 24px; font-size:12px}
  .hero{grid-template-rows:auto auto auto}
  .hero .hin{order:1; padding:calc(var(--nav-h) + 26px) var(--pad) 18px}
  .hero h1{margin-bottom:14px}
  .hero .hsub{font-size:16px; line-height:1.5}
  .hero .hcta{gap:10px; margin-top:4px}
  .hero .hmeta{display:none}
  .hero .hmark{display:none}
  .flash{order:2; margin:6px 0 22px; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; padding:0 var(--pad); -webkit-overflow-scrolling:touch; scrollbar-width:none; grid-template-columns:none}
  .flash::-webkit-scrollbar{display:none}
  .flash img,.flash img:nth-child(1),.flash img:nth-child(n+5){display:block; flex:0 0 74vw; width:74vw; aspect-ratio:16/10; grid-column:auto; scroll-snap-align:start; opacity:1; filter:saturate(.95); border-radius:6px; transform:none}
  .ticker{order:3}
  .ticker .tk{padding:12px 0}
  .ticker .tk span{font-size:11px; gap:16px; padding-right:16px}
  .work-h{padding-top:52px}
  .work-h .whead{margin-bottom:16px; padding:0 var(--pad)}
  .work-h .tw{display:block; margin:0; -webkit-mask-image:none; mask-image:none}
  .work-h .track::-webkit-scrollbar{display:none}
  .panel,.panel.wide{flex:0 0 80vw; width:80vw; max-width:none; scroll-snap-align:start; gap:10px}
  .panel .pimg,.panel.wide .pimg{aspect-ratio:16/10; height:auto; width:100%; max-height:none}
  .panel .pname{font-size:20px}
  .panel .pmeta{font-size:10.5px; gap:4px 12px}
  .panel .pyr{font-size:11px}
  .work-h .end{flex:0 0 62vw; width:62vw; padding:0; scroll-snap-align:start}
  .work-h .end .d3{font-size:24px}
  .work-h .wfoot{display:none}
  .prob .pl .kick{margin-bottom:14px}
  .prob .pr{gap:24px; padding-top:18px}
  .prob .pt{grid-template-columns:28px 1fr; gap:12px}
  .prob .pt h3{font-size:20px; margin-bottom:8px}
  .prob .pimg2{margin-top:6px; aspect-ratio:16/10}
  .prob .pend{margin-top:20px; padding-top:18px}
  .svc .sbody{display:flex; flex-direction:column}
  .svc .svis{order:-1; position:relative; top:auto; aspect-ratio:16/10; margin:0 0 18px; display:block; overflow:hidden; border-radius:6px; background:var(--ink3); max-height:none}
  .svc .svis img{position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; border-radius:0; transform:scale(1.04); aspect-ratio:auto}
  .svc .svis img.on{opacity:1; transform:scale(1)}
  .svc .svis .vcap{position:absolute; left:14px; bottom:14px; padding:0}
  .svc .svis .vcap span{background:rgba(10,10,11,.62); backdrop-filter:blur(8px); border:0; color:var(--paper); font-size:10px; padding:7px 10px}
  .svc .sitem{grid-template-columns:34px 1fr 26px; padding:16px 0; gap:10px; cursor:pointer; scroll-margin-top:0}
  .svc .sitem .sn{padding-top:6px}
  .svc .sitem h3{font-size:23px}
  .svc .sitem .sx{max-height:0; opacity:0}
  .svc .sitem.on .sx{max-height:420px; opacity:1}
  .svc .sitem .sx p{padding-top:10px; font-size:15px}
  .svc .sitem .sx .tlink{margin-top:12px}
  .svc .sitem .sfor{display:block; grid-column:3; grid-row:1; max-width:none; padding-top:2px; font-size:0; text-align:right}
  .svc .sitem .sfor::before{content:"+"; font-size:24px; line-height:1; color:var(--txt2); display:block; transition:transform .4s var(--ease),color .3s}
  .svc .sitem.on .sfor::before{transform:rotate(45deg); color:var(--blue)}
  .svc .slist .sitem{opacity:1}
  .svc .sben{margin-top:40px; gap:18px}
  .svc .bens{gap:12px}
  .svc .bens div{font-size:14px; padding-top:12px}
  .svc .bens div b{font-size:15.5px; margin-bottom:3px}
  .ba .bintro{margin-bottom:20px; gap:12px}
  .ba .btabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--pad)) 14px; padding:0 var(--pad)}
  .ba .btabs::-webkit-scrollbar{display:none}
  .ba .btabs button{flex:0 0 auto; height:36px; font-size:10.5px; padding:0 13px}
  .ba .bcmp .hnd::before{width:44px; height:44px}
  .ba .bcap{margin-top:12px; gap:10px}
  .appr .atext{gap:14px}
  .appr .alines{gap:8px}
  .appr .alines p{font-size:17px}
  .appr .acols{margin-top:22px}
  .appr .acol{flex:0 0 64vw}
  .appr .acol figure:nth-child(n+2){display:none}
  .appr .pend{margin-top:22px!important; padding-top:18px!important}
  .resp .rsticky{padding:0}
  .resp .rtop .d3{max-width:100%}
  .resp .rstage{position:relative; margin:20px 0 72px; display:block}
  .rmob{display:block; position:absolute; right:0; bottom:-58px; width:38%; margin:0}
  .rmob .phone:nth-child(2){display:none}
  .resp .rbot{padding-top:0; gap:12px}
  .resp .rlabs{gap:16px}
  .resp .rbot .p{font-size:14.5px}
  .proc .pleft{display:none}
  .proc .stage{padding:18px 0; gap:8px}
  .proc .stage h3{font-size:24px; gap:12px}
  .proc .stage p{font-size:15px}
  .proc .stage .sdet{margin-top:10px}
  .proc .stage .sdet span{height:26px; font-size:9.5px; padding:0 10px}
  .close{padding:64px 0 48px}
  .close .cd{font-size:clamp(34px,9.4vw,46px)}
  .close .crow{margin-top:22px; gap:18px}
  footer{padding:44px 0 24px}
  footer .fcols{grid-template-columns:1fr 1fr; gap:22px 16px}
  footer .fbrand{grid-column:1/-1}
  footer .fbrand img{width:170px; margin-bottom:12px}
  footer .fbrand p{font-size:14px}
  footer .fcols a,footer .fcols span.ph{font-size:14px; padding:4px 0}
  footer .fbase{margin-top:30px; padding-top:16px; font-size:11px; gap:8px}
  .phero{padding:calc(var(--nav-h) + 40px) 0 30px}
  .phero .d1{margin-bottom:14px}
  .phero .prow{gap:12px}
  .pad-b{padding-bottom:48px}
  .state{padding:44px 0}
  .pillars{gap:18px}
  .pillars div{padding-top:14px}
  .pillars div .n{margin-bottom:10px}
  .pillars div h3{font-size:21px}
  .pillars div p{font-size:14.5px}
  .contrast{gap:12px}
  .wrow{padding:16px 0}
  .wrow .wthumb{aspect-ratio:16/9; margin-bottom:4px}
  .wrow .wname{font-size:24px}
  .sv{padding:28px 0; gap:10px}
  .sv h2{font-size:28px; margin-bottom:8px}
  .sv .sinc{grid-template-columns:1fr; gap:0; margin-top:14px}
  .sv .sinc span{font-size:13.5px; padding:8px 0}
  .sv .sr2 .tlink{margin-top:16px}
  .price .pc .pv{font-size:32px}
  .mgmt{gap:20px; margin-top:32px; padding-top:24px}
  .mgmt .minc{grid-template-columns:1fr; gap:0}
  .cs-hero{padding-top:calc(var(--nav-h) + 32px)}
  .cs-hero .cst{margin-bottom:20px; gap:16px}
  .cs-hero .csmeta{gap:12px 16px; padding-top:14px}
  .cs-hero .csmeta div{font-size:13px}
  .cs-sec{padding:42px 0}
  .cs-sec .cgrid{gap:12px}
  .cs-sec .ctext p{font-size:16px}
  .cs-imgs{gap:16px}
  .cs-tall{max-height:62vh}
  .cs-phones{gap:10px}
  .cs-next{padding:52px 0}
  .faq summary{padding:16px 0; font-size:17px}
  .faq .fa{font-size:15px; padding-bottom:18px}
  .form{gap:16px}
  .cinfo{gap:20px}
  .legal h2{margin-top:28px}
  .menu .mlinks a{font-size:clamp(30px,9vw,44px); padding:4px 0}
  .menu .ml{padding-top:calc(var(--nav-h) + 12px)}
}

/* ============================================================ V2 BRAND SYSTEM: the mark everywhere it earns its place ============================================================ */
.mk{display:inline-block; background:currentColor; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; width:1em; height:.84em; vertical-align:-.05em}
.kick::before{width:16px; height:13px; background:var(--blue); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; opacity:1}
.blue .kick::before{background:var(--paper)}
.nav .logo{display:inline-flex; align-items:center; gap:12px}
.nav .logo .nmark{height:26px; width:auto}
.nav .logo img.nword{height:20px}
.nav .cta .mk,.btn .mk{width:15px; height:13px; flex:0 0 auto}
html.fine .cur .dot{width:16px; height:14px; left:-8px; top:-7px; border-radius:0; background:#fff; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
.cur.lbl .dot{opacity:0}
.hero .hmark{opacity:.13; width:min(30vw,440px); right:calc(var(--pad) - 1vw); bottom:16vh}
.phero .pmark{position:absolute; right:calc(var(--pad) - 1vw); top:calc(var(--nav-h) + 3vh); width:min(18vw,260px); opacity:.1; pointer-events:none}
.ba .bcmp .hnd::after{content:""; width:26px; height:22px; background:var(--ink); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
footer .fbrand .fmark{width:clamp(56px,6vw,84px); margin-bottom:18px; display:block}
footer .fwm{width:100%; opacity:.07; margin:clamp(40px,6vw,80px) 0 0; pointer-events:none; user-select:none}
.nf .nfmark{width:min(40vw,320px); margin:0 auto 24px; opacity:.35}
.svc .sitem .sn::before,.proc .stage h3 small::before{content:""; display:inline-block; width:11px; height:9px; margin-right:6px; background:currentColor; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; opacity:.9}
.work-h .end .d3::before{content:""; display:block; width:48px; height:40px; margin-bottom:18px; background:var(--blue); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
@media (max-width:900px){
  .nav .logo{gap:9px} .nav .logo .nmark{height:22px} .nav .logo img.nword{height:16px}
  .hero .hmark{display:block; opacity:.08; width:52vw; right:-6vw; bottom:auto; top:calc(var(--nav-h) + 8px)}
  .phero .pmark{width:34vw; opacity:.08}
  footer .fwm{margin-top:28px}
}
/* responsive stage: give the device the height */
.resp .rtop{display:grid; grid-template-columns:7fr 5fr; gap:var(--gap); align-items:end}
.resp .rtop .d3{max-width:20ch}
.resp .rtop .p{max-width:40ch; justify-self:end; font-size:15px}
.resp .rsticky{padding-bottom:3vh; grid-template-rows:auto minmax(0,1fr) auto}
.resp .rstage{padding:2vh 0}
.resp .rbot{padding-top:12px}
@media (max-width:900px){.resp .rtop{grid-template-columns:1fr; gap:10px} .resp .rtop .p{justify-self:start}}
/* ===== V2 mobile polish ===== */
.nav .cta{white-space:nowrap}
@media (max-width:900px){
  .nav{padding:0 var(--pad)}
  .nav .logo{gap:8px} .nav .logo .nmark{height:20px} .nav .logo img.nword{height:15px}
  .nav .right{gap:12px}
  .nav .cta{width:40px; height:40px; padding:0; justify-content:center; border-radius:50%}
  .nav .cta span{display:none}
  .nav .cta .mk{width:17px; height:15px}
  .nav .mbtn{gap:10px; font-size:11px}
  .cur{display:none!important}
  .flash,.work-h .track,.ba .btabs,.appr .acols{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 94%,transparent)}
  .resp .rstage{margin-bottom:96px}
  .rmob{width:34%; bottom:-70px}
  .resp .rbot{position:relative; z-index:2; padding-right:38%}
}
/* ===== V2 desktop polish ===== */
.close .wrap{position:relative; z-index:2}
.close .cmark,.close .cdash{z-index:0}
.resp .rdev.stage-2::before{height:40px; background:#16161B; background-image:none; border-bottom:0}
.resp .rdev.stage-2 img{top:40px; height:calc(100% - 40px)}
.resp .rdev.stage-2::after{top:12px; background:#0E0E11}
.resp .rdev.stage-1{border-width:9px; border-color:#0E0E11; box-shadow:0 0 0 1px var(--line2),0 60px 120px -40px rgba(0,0,0,.8)}
.resp .rdev.stage-1::before{height:18px; background:#16161B; background-image:radial-gradient(circle at 50% 9px,#2A2A31 3px,transparent 3.6px); border-bottom:0}
.resp .rdev.stage-1 img{top:18px; height:calc(100% - 18px)}
.cs-hero .csmeta div small{color:var(--blue-txt)}
.cs-sec .cgrid .h4{display:flex; align-items:flex-start; gap:10px}
.cs-sec .cgrid .h4::before{content:""; flex:0 0 auto; width:18px; height:15px; margin-top:.28em; background:var(--blue); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
.light .cs-sec .cgrid .h4::before,.cs-sec.light .cgrid .h4::before{background:var(--blue)}
.cs-imgs figcaption::before,.cs-hero .kick::before{background:var(--blue)}
.cs-next .nimg{outline:1px solid var(--line)}
.wrow .wa:hover{background:var(--blue); border-color:var(--blue); color:var(--paper)}
.prob .pimg2.first{margin-top:0; margin-bottom:8px}
@media (min-width:901px){.prob .pr{padding-top:0}}

@media (max-width:900px){.svc .svis{width:100%; flex:0 0 auto}}
/* footer brand: symbol only */
footer .fbrand .fmark{width:clamp(64px,7vw,96px); margin-bottom:20px}
/* mobile: the hero strip is dropped, Selected Work is the one carousel */
@media (max-width:900px){
  .flash{display:none}
  .hero{grid-template-rows:auto auto}
  .hero .hin{padding-top:calc(var(--nav-h) + 60px); padding-bottom:34px}
  .hero .hcta{margin-top:10px}
}

/* ============================================================ V2.2 MOBILE MOTION ============================================================ */
@media (max-width:900px){
  /* Selected Work: pinned, scroll-driven horizontal pan (swipe row only without JS) */
  .work-h{padding-top:0}
  .work-h .track{display:flex; flex-direction:row; gap:12px; padding:0 var(--pad); width:max-content; scroll-snap-type:none}
  html:not(.js) .work-h .track{width:auto; overflow-x:auto; scroll-snap-type:x mandatory}
  html.js .work-h .sticky{position:sticky; top:0; height:100vh; height:100svh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:calc(var(--nav-h) + 4px) 0 14px; overflow:hidden}
  html.js .work-h .whead{margin-bottom:4px; gap:8px}
  html.js .work-h .whead .side{display:none}
  html.js .work-h .tw{display:flex; align-items:center; min-height:0; margin:0; -webkit-mask-image:none; mask-image:none}
  html.js .work-h .track{overflow:visible; will-change:transform}
  html.js .work-h .wfoot{display:flex; align-items:center; gap:16px; padding:10px var(--pad) 0}
  html.js .work-h .wprog{flex:1; position:relative; height:1px; background:var(--line2)}
  html.js .work-h .wcount{position:relative; font-size:11px}
  .panel,.panel.wide{flex:0 0 78vw; width:78vw}
  .work-h .end{flex:0 0 58vw; width:58vw}
  /* Responsive: the morph runs on phones too */
  html.js .resp{height:190vh}
  html.js .resp .rsticky{position:sticky; top:0; height:100vh; height:100svh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:calc(var(--nav-h) + 4px) var(--pad) 14px; overflow:hidden}
  html.js .resp .rtop{gap:6px}
  html.js .resp .rtop .p{display:none}
  html.js .resp .rstage{position:relative; margin:0; display:flex; align-items:center; justify-content:center; min-height:0; padding:8px 0}
  html.js .resp .rdev{max-height:100%}
  html.js .resp .rdev img{opacity:0}
  html.js .resp .rdev img.on{opacity:1}
  html.js .rmob{display:none}
  html.js .resp .rbot{padding:6px 0 0; padding-right:0}
  /* Services: the photo lives inside the open item */
  .svc .svis{display:none!important}
  .svc .sitem .simg{display:block; margin:12px 0 6px; border-radius:6px; overflow:hidden; aspect-ratio:16/10; background:var(--ink3)}
  .svc .sitem .simg img{width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.05) brightness(.92)}
  .svc .sitem.on .sx{max-height:760px}
}
@media (min-width:901px){.svc .sitem .simg{display:none}}
/* ===== V2.2 mobile gallery: column never inherits the track width; phone-shaped panels fill the pinned screen ===== */
@media (max-width:900px){
  html.js .work-h .sticky{grid-template-columns:minmax(0,1fr); justify-content:stretch; justify-items:stretch}
  html.js .work-h .tw{min-width:0; max-width:100vw}
  html.js .work-h .whead,html.js .work-h .wfoot{min-width:0; max-width:100vw; width:100%}
  html.js .work-h .wprog,html.js .work-h .wcount{display:block}
  .panel,.panel.wide{flex:0 0 74vw; width:74vw}
  .panel .pimg,.panel.wide .pimg{aspect-ratio:3/4}
  .panel .pimg img{object-position:top}
  .work-h .end{flex:0 0 56vw; width:56vw}
}
@media (max-width:900px){
  .work-h .end{flex:0 0 62vw; width:62vw; aspect-ratio:62/82.7; border:1px dashed var(--line2); border-radius:6px; padding:18px; align-self:flex-start; display:flex; align-items:flex-end}
  .work-h .end a{gap:12px}
  .work-h .end .d3{font-size:24px}
  .work-h .end .d3::before{width:40px; height:34px; margin-bottom:12px}
}

.faq .tag.most{margin-left:10px; vertical-align:middle; font-size:9.5px; height:22px; padding:0 8px; border-color:var(--blue-txt); color:var(--blue-txt)}
@media (max-width:900px){.faq .tag.most{display:inline-flex; margin:6px 0 0; }}
/* tap targets: 44px minimum on every control that must be tapped */
.wrow .wa{width:44px; height:44px}
.tlink{min-height:44px; align-items:center; padding-bottom:0}
.tlink::after{bottom:8px}
@media (max-width:900px){.nav .cta{width:44px; height:44px} .nav .mbtn{min-height:44px} .ba .btabs button,.wfilters button{height:44px} .svc .sitem{min-height:44px} .faq summary{min-height:44px}}

/* case studies on phones: phone-sized evidence, desktop-only crops hidden */
.cs-sec .bmob{display:none}
@media (max-width:900px){
  .cs-sec .bmob{display:block; width:62%; margin:14px auto 0}
  .cs-sec figure .frame + .bmob{margin-top:14px}
  .cs-imgs figure.sec1{display:none}
  .cs-imgs figure.sec0 .frame img{aspect-ratio:4/3; object-position:left top}
}
/* tablet (600-900px): two columns where the content earns it, and a reading measure */
@media (min-width:600px) and (max-width:900px){
  .hero .hsub{max-width:40ch}
  .p,.lead{max-width:60ch}
  .svc .bens{grid-template-columns:1fr 1fr; gap:18px 28px}
  .pillars{grid-template-columns:1fr 1fr; gap:24px 28px}
  .prob .pr{display:grid; grid-template-columns:1fr 1fr; gap:24px 28px; align-items:start}
  .prob .pr .pimg2,.prob .pr .pend{grid-column:1/-1}
  .proc .stages{display:grid; grid-template-columns:1fr 1fr; gap:0 28px}
  .proc .stage:last-child{border-bottom:0}
  .contrast{grid-template-columns:repeat(3,minmax(0,1fr))}
  .price{grid-template-columns:1fr 1fr}
  .mgmt .minc{grid-template-columns:1fr 1fr}
  .sv .sinc{grid-template-columns:1fr 1fr}
  footer .fcols{grid-template-columns:2fr 1fr 1fr 1fr}
  footer .fbrand{grid-column:auto}
  .panel,.panel.wide{flex-basis:46vw; width:46vw}
  .work-h .end{flex-basis:36vw; width:36vw}
}

/* layout-shift hygiene: split headings are pre-rendered; flash images move by transform only */
.flash img{left:0; top:0; transform:translate3d(-9999px,0,0) translate(-50%,-50%); transition:opacity .6s var(--ease)}
.flash img.on{opacity:.92}
.flash .fcap{left:0; top:0; transform:translate3d(-9999px,0,0) translate(-50%,calc(-50% + clamp(90px,10vw,190px)))}
html:not(.js) .rv-c .c{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv-c .c{transform:none!important; opacity:1!important; transition:none!important}}

/* ===== page headers: one composition, headline over intro, mark in its own corner ===== */
.phero .prow{display:block}
.phero .d1{max-width:13ch; margin-bottom:clamp(20px,3vw,32px)}
.phero .prow .lead{max-width:56ch; justify-self:start}
.phero .pmark{top:auto; bottom:clamp(36px,6vw,80px); right:var(--pad); width:min(15vw,210px); opacity:.12}
.phero .pdash{top:calc(var(--nav-h) + 2vh)}
html:not(.js) .rv-w .w>span{transform:none; opacity:1}
@media (max-width:900px){
  .phero{padding-top:calc(var(--nav-h) + 26px)}
  .phero .kick{margin-bottom:26px}
  .phero .d1{max-width:100%; margin-bottom:16px}
  .phero .pmark{top:calc(var(--nav-h) + 20px); bottom:auto; right:var(--pad); width:16vw; opacity:.12}
  .phero .pdash{display:none}
}