/* Romsa Studio — portfolio. Fonts are self-hosted (OFL), latin subset. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInE.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjjH7M.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjg.woff2) format('woff2')}

:root{
  --bg:#08080a; --bg2:#101013; --ink:#f3f0e9; --mute:#a3a09a; --dim:#6e6c67; --line:rgba(243,240,233,.12);
  --acc:#ff5b24; --acc-ink:#0b0b0c;
  --display:'Bricolage Grotesque',system-ui,sans-serif; --serif:'Instrument Serif',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:max(16px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
/* the site is dark by design in both schemes */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#08080a}}
:root[data-theme="dark"]{--bg:#08080a}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--acc);color:var(--acc-ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:-999px;top:12px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px}
.skip:focus{left:16px}
.wrap{max-width:1320px;margin:0 auto;padding-left:var(--gut);padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
.mono{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ital{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* ---------- WebGL stage (fixed behind everything) */
#stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease)}
#stage.on{opacity:1}
.no-gl #stage{display:none}
.glow-fallback{position:fixed;z-index:0;pointer-events:none;width:70vmin;height:70vmin;right:-8vmin;top:12vh;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0,#c9c6c0 8%,#47454a 30%,color-mix(in srgb,var(--acc) 60%,#000) 62%,transparent 72%);filter:blur(2px);display:none}
.no-gl .glow-fallback{display:block}
/* phones: the blob sits at the top of the page and scrolls away with it */
.stage-top #stage{position:absolute;height:100svh}
.stage-top .glow-fallback{position:absolute}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
main,header,footer{position:relative;z-index:2}

/* ---------- intro curtain */
.intro{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;align-items:flex-end;justify-content:space-between;padding:0 var(--gut) 28px;pointer-events:none}
.intro b{font:800 clamp(64px,14vw,200px)/.8 var(--display);letter-spacing:-.05em}
.intro span{margin-bottom:12px}
.js-off .intro,.done .intro{display:none}

/* ---------- cursor */
.cursor{position:fixed;left:0;top:0;z-index:80;pointer-events:none;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ink);mix-blend-mode:difference;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s;display:none;align-items:center;justify-content:center}
.cursor em{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .2s;font-style:normal}
.fine .cursor{display:flex}
.cursor.link{width:46px;height:46px;margin:-23px 0 0 -23px}
.cursor.view{width:96px;height:96px;margin:-48px 0 0 -48px;mix-blend-mode:normal;background:var(--acc)}
.cursor.view em{opacity:1}

/* ---------- header */
.top{position:fixed;top:0;left:0;right:0;z-index:50;transition:transform .5s var(--ease)}
.top.hide{transform:translateY(-110%)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.logo{white-space:nowrap;display:flex;align-items:center;gap:10px;font:800 20px/1 var(--display);letter-spacing:-.02em}
.logo i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9a9893 35%,#2b2a2e 70%);box-shadow:0 0 18px color-mix(in srgb,var(--acc) 60%,transparent);transition:box-shadow .8s}
.top nav{display:flex;align-items:center;gap:6px;padding:6px;border:1px solid var(--line);border-radius:999px;background:rgba(10,10,12,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top nav a{white-space:nowrap;padding:9px 16px;border-radius:999px;font-size:14.5px;color:var(--mute);transition:color .3s,background .3s}
.top nav a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.top nav a.cta{background:var(--ink);color:var(--bg)}
.top nav a.cta:hover{background:var(--acc);color:var(--acc-ink)}
.snd{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.snd .bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.snd .bars i{width:2px;height:3px;background:currentColor;transition:height .3s}
.snd[aria-pressed="true"]{color:var(--ink)}
.snd[aria-pressed="true"] .bars i{animation:eq .9s ease-in-out infinite alternate}
.snd[aria-pressed="true"] .bars i:nth-child(2){animation-delay:.2s}.snd[aria-pressed="true"] .bars i:nth-child(3){animation-delay:.45s}.snd[aria-pressed="true"] .bars i:nth-child(4){animation-delay:.1s}
@keyframes eq{from{height:3px}to{height:12px}}
@media (max-width:760px){.top nav a.hide-s,.snd .lbl{display:none}.top nav a{padding:9px 13px}}
@media (max-width:440px){.top nav .hide-xs{display:none}.top nav a{padding:9px 11px}.snd{padding:9px 8px}.top nav{gap:2px}}

/* ---------- hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px;padding-bottom:40px}
.hero .kicker{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.hero .kicker i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 var(--acc);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.hero h1{font:800 clamp(56px,11.2vw,190px)/.86 var(--display);letter-spacing:-.055em;max-width:11ch}
.hero h1 .ital{font-size:1.04em;letter-spacing:-.03em;color:var(--acc);transition:color .8s}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln>span{display:inline-block}
.hero-foot{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:end;margin-top:44px}
.hero-foot p{max-width:44ch;color:var(--mute);font-size:clamp(16px,1.3vw,18.5px)}
.hero-foot p b{color:var(--ink);font-weight:500}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border-radius:999px;font:500 16px var(--sans);border:1px solid var(--line);overflow:hidden;isolation:isolate;transition:color .4s,border-color .4s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease)}
.btn:hover::before{transform:none}
.btn:hover{color:var(--acc-ink);border-color:var(--acc)}
.btn.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.scrollcue{display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollcue span{width:1px;height:56px;background:linear-gradient(var(--ink),transparent);animation:cue 2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-width:900px){.hero-foot{grid-template-columns:1fr}.scrollcue{display:none}.hero{padding-top:46vh}}

/* ---------- marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;background:rgba(8,8,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.marquee .track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee span{font:600 clamp(26px,3.4vw,46px)/1 var(--display);letter-spacing:-.02em;padding-right:42px;white-space:nowrap;display:flex;align-items:center;gap:42px}
.marquee span::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--acc);transition:background .8s}
.marquee .ital{font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- statement */
.statement{padding-top:clamp(110px,16vw,220px);padding-bottom:clamp(110px,16vw,220px)}
.statement p{font:600 clamp(32px,5vw,76px)/1.05 var(--display);letter-spacing:-.035em;max-width:20ch}
.statement .w{opacity:.42;transition:opacity .2s}
.statement .w.on{opacity:1}
.statement .mono{margin-bottom:36px}

/* ---------- work */
.work-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;padding-bottom:40px}
.work-head h2{font:800 clamp(52px,9vw,150px)/.86 var(--display);letter-spacing:-.05em}
.work-head p{max-width:38ch;color:var(--mute)}
.proj{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:clamp(24px,4vw,64px);align-items:center;padding:12vh 0;border-top:1px solid var(--line)}
.proj:nth-of-type(even){grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.proj:nth-of-type(even) .info{order:2}
.proj .num{font:800 clamp(90px,13vw,210px)/.8 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(243,240,233,.35)}
.proj h3{font:800 clamp(44px,6vw,92px)/.9 var(--display);letter-spacing:-.045em;margin:18px 0 18px}
.proj h3 .ital{color:var(--pc);font-size:.9em}
.proj .info p{color:var(--mute);max-width:40ch}
.proj .tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 30px}
.proj .tags span{border:1px solid var(--line);border-radius:999px;padding:6px 13px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.proj .live{display:inline-flex;align-items:center;gap:12px;font:500 17px var(--sans);color:var(--ink);padding-bottom:6px;border-bottom:1px solid var(--pc)}
.proj .live i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pc);color:#0b0b0c;font-style:normal;transition:transform .5s var(--ease)}
.proj .live:hover i{transform:rotate(45deg)}
.media{position:relative;perspective:1600px}
.browser{display:block;position:relative;border-radius:16px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6),0 0 90px -20px color-mix(in srgb,var(--pc) 45%,transparent);transform-style:preserve-3d;will-change:transform}
.browser .bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#161618;border-bottom:1px solid rgba(255,255,255,.08)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#3a3a3e}
.browser .bar em{margin-left:14px;font:400 11.5px var(--mono);color:#97969a;font-style:normal}
.browser img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.phone{position:absolute;right:-3%;bottom:-12%;width:23%;border-radius:22px;overflow:hidden;border:5px solid #1a1a1c;box-shadow:0 40px 80px -20px rgba(0,0,0,.9);will-change:transform;background:#000}
.proj:nth-of-type(even) .phone{right:auto;left:-3%}
.phone img{width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top}
@media (max-width:900px){
  .proj,.proj:nth-of-type(even){grid-template-columns:1fr;min-height:auto;padding:80px 0}
  .proj:nth-of-type(even) .info{order:0}
  .phone{width:30%;bottom:-8%}
  .media{margin-bottom:30px}
}

/* ---------- values */
.values{padding-top:clamp(100px,14vw,180px);padding-bottom:clamp(100px,14vw,180px)}
.values h2,.price-head h2,.proc h2,.faq h2{font:800 clamp(44px,7vw,110px)/.9 var(--display);letter-spacing:-.05em}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;border-top:1px solid var(--line)}
.vgrid>div{padding:30px 26px 34px 0;border-right:1px solid var(--line);margin-right:26px}
.vgrid>div:last-child{border-right:0}
.vgrid b{display:block;font:600 26px/1.15 var(--display);letter-spacing:-.02em;margin:18px 0 10px}
.vgrid p{color:var(--mute);font-size:15.5px}
.boring{margin-top:70px;display:grid;grid-template-columns:1fr 2fr;gap:40px;padding:36px;border:1px solid var(--line);border-radius:24px;background:rgba(16,16,19,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.boring h3{font:600 30px/1.1 var(--display);letter-spacing:-.02em}
.boring ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.boring li{color:var(--mute);font-size:15.5px;padding-left:26px;position:relative}
.boring li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;border:2px solid var(--acc)}
.boring li b{color:var(--ink);font-weight:500}
@media (max-width:980px){.vgrid{grid-template-columns:1fr 1fr}.vgrid>div:nth-child(2){border-right:0}.boring{grid-template-columns:1fr}.boring ul{grid-template-columns:1fr}}
@media (max-width:560px){.vgrid{grid-template-columns:1fr}.vgrid>div{border-right:0;margin-right:0;border-bottom:1px solid var(--line)}}

/* ---------- pricing */
.pricing{padding-top:clamp(90px,12vw,160px);padding-bottom:clamp(90px,12vw,160px)}
.price-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.offer{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);color:var(--ink);font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.offer i{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px}
.pcard{position:relative;border:1px solid var(--line);border-radius:24px;padding:28px 26px 30px;background:rgba(16,16,19,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:16px;overflow:hidden;transition:border-color .4s,transform .5s var(--ease)}
.pcard::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--acc) 22%,transparent),transparent 60%);opacity:0;transition:opacity .4s}
.pcard:hover::after{opacity:1}
.pcard:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent);transform:translateY(-6px)}
.pcard.hot{border-color:color-mix(in srgb,var(--acc) 70%,transparent)}
.pcard .badge{position:absolute;top:22px;right:22px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--acc);color:var(--acc-ink);padding:5px 10px;border-radius:999px}
.pcard h3{font:600 22px/1.2 var(--display)}
.pcard .amt{font:800 52px/1 var(--display);letter-spacing:-.04em}
.pcard .amt small{font:400 15px var(--sans);color:var(--mute);letter-spacing:0}
.pcard .was{font:400 13px var(--mono);color:var(--dim)}
.pcard ul{list-style:none;display:grid;gap:9px;font-size:15px;color:var(--mute);margin-top:4px}
.pcard li{padding-left:22px;position:relative}
.pcard li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--acc)}
.pick{margin-top:auto;display:flex;justify-content:space-between;align-items:center;height:50px;padding:0 20px;border-radius:999px;border:1px solid var(--line);font:500 15px var(--sans);transition:background .35s,color .35s,border-color .35s}
.pick:hover,.pcard.hot .pick{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.pnote{margin-top:26px;color:var(--mute);font-size:15px;max-width:70ch}
@media (max-width:1060px){.pgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}

/* ---------- process */
.proc{padding-top:clamp(90px,12vw,160px);padding-bottom:clamp(90px,12vw,160px)}
.proc .sub{color:var(--mute);margin-top:22px;max-width:52ch;font-size:clamp(16px,1.3vw,19px)}
.steps{list-style:none;margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.steps li{counter-increment:s;padding:28px 24px 30px;border-radius:24px;border:1px solid var(--line);background:rgba(16,16,19,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.steps li::before{content:"0" counter(s);display:block;font:800 64px/1 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--acc);margin-bottom:26px}
.steps h3{font:600 22px/1.2 var(--display);margin-bottom:8px}
.steps p{color:var(--mute);font-size:15.5px}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- faq */
.faq{padding-top:clamp(90px,12vw,160px);padding-bottom:clamp(90px,12vw,160px)}
.faq .grid{display:grid;grid-template-columns:1fr 1.6fr;gap:60px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font:600 clamp(19px,1.7vw,24px)/1.3 var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);position:relative;transition:transform .5s var(--ease),background .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--ink)}
.faq summary i::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
.faq details[open] summary i{background:var(--acc);border-color:var(--acc)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{color:var(--mute);padding:0 50px 28px 0;max-width:64ch}
@media (max-width:900px){.faq .grid{grid-template-columns:1fr;gap:20px}}

/* ---------- contact */
.contact{padding-top:clamp(90px,12vw,160px);padding-bottom:80px}
.cbox{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);padding:clamp(28px,5vw,64px);border-radius:32px;border:1px solid var(--line);background:rgba(14,14,17,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.cbox h2{font:800 clamp(48px,7vw,104px)/.88 var(--display);letter-spacing:-.05em}
.cbox .lead{color:var(--mute);margin-top:24px;max-width:40ch}
.cbox .notes{margin-top:30px;display:grid;gap:10px;color:var(--mute);font-size:15px}
.cbox .notes span::before{content:"→ ";color:var(--acc)}
form.brief{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form.brief .full{grid-column:1/-1}
form.brief label{display:block;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
form.brief input,form.brief select,form.brief textarea{width:100%;font:400 16px var(--sans);color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .3s,background .3s}
form.brief textarea{min-height:120px;resize:vertical}
form.brief select option{background:#141417}
form.brief input:focus,form.brief select:focus,form.brief textarea:focus{outline:none;border-color:var(--acc);background:rgba(255,255,255,.07)}
form.brief [aria-invalid="true"]{border-color:#ff7a7a}
form.brief .err{color:#ff9a9a;font-size:13px;min-height:1em;margin-top:6px}
form.brief fieldset{border:0;min-width:0}
form.brief legend{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:10px;padding:0}
.choices{display:flex;flex-wrap:wrap;gap:8px}
form.brief .choices label{margin:0;cursor:pointer;font:inherit;letter-spacing:0;text-transform:none;color:var(--ink);position:relative}
.choices input{position:absolute;opacity:0;width:1px;height:1px}
.choices span{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);font:500 15px/1.3 var(--sans);transition:border-color .3s,background .3s,transform .3s var(--ease)}
.choices span small{font:400 12px var(--mono);color:var(--mute)}
.choices label:hover span{border-color:rgba(243,240,233,.3)}
.choices input:checked+span{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,transparent);transform:translateY(-2px)}
.choices input:checked+span small{color:var(--ink)}
.choices input:focus-visible+span{outline:2px solid var(--acc);outline-offset:3px}
.choices i{font-style:normal}
.choices .d{display:none}
/* computer: the five project buttons sit in one row; phones keep the wrapped layout */
@media (min-width:761px){#f-project{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  #f-project label,#f-project span{height:100%}#f-project span{padding:12px 10px;font-size:14px;line-height:1.25}
  #f-project .d{display:inline}#f-project .m{display:none}}
form.brief .hp{position:absolute;left:-9999px}
form.brief .consent{font-size:13.5px;color:var(--mute)}
form.brief .consent a{text-decoration:underline}
form.brief button{height:60px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font:600 17px var(--sans);transition:transform .4s var(--ease),filter .3s}
form.brief button:hover{transform:translateY(-2px);filter:brightness(1.08)}
form.brief button[disabled]{opacity:.6;cursor:progress}
form.brief .msg{font-size:15px;min-height:1.4em}
@media (max-width:900px){.cbox{grid-template-columns:1fr}}
@media (max-width:560px){form.brief{grid-template-columns:1fr}}

/* ---------- footer */
.foot{padding-top:20px;padding-bottom:50px}
.foot .big{font:800 clamp(64px,17vw,300px)/.86 var(--display);letter-spacing:-.06em;white-space:nowrap;overflow:hidden;user-select:none;padding-bottom:.04em;
  background:linear-gradient(180deg,var(--ink) 35%,var(--acc) 120%);-webkit-background-clip:text;background-clip:text;color:transparent;transition:background .8s}
.foot .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
.foot .row a{text-decoration:underline;text-underline-offset:3px}
.foot .row nav{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- live-demo preview dialog (used where the live demos can't open) */
.pv{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;background:rgba(4,4,6,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.pv.open{opacity:1;visibility:visible}
.pv .in{width:min(1100px,100%);max-height:100%;overflow:auto;background:#101013;border:1px solid var(--line);border-radius:22px;padding:18px}
.pv .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 6px 16px}
.pv .hd b{font:700 22px var(--display)}
.pv .x{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);font-size:20px}
.pv .shots{display:grid;grid-template-columns:3fr 1fr;gap:14px;align-items:start}
.pv .shots img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.pv p{color:var(--mute);font-size:14px;padding:14px 6px 2px}

/* ---------- reveal helpers */
.rv{opacity:0;transform:translateY(40px)}
.js-off .rv,.reduce .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.marquee .track{animation:none}.hero .kicker i{animation:none}.scrollcue span{animation:none}}

/* no custom cursor circle (owner request, 2026-10-19) */
.cursor{display:none!important}