/* Merci — Impronta's structure (loader, stepped blocks, slide-led hero, overlay menu)
   seen through Merci's own world: night, silver, amber, a live particle field. */
:root{
  color-scheme: light;
  --night:#101110;
  --slate:#171816;          /* stepped blocks + tabs */
  --paper:#ecebe6;
  --ink:#141513;
  --ink-soft:rgba(20,21,19,.66);
  --ice:#f2f0ea;            /* text on night */
  --ice-soft:rgba(242,240,234,.70);
  --ice-faint:rgba(242,240,234,.52);
  --silver:#c9ccd0;
  --amber:#f0a64a;
  --amber-deep:#9a5a12;     /* amber on paper, AA */
  --line-d:rgba(20,21,19,.16);
  --line-l:rgba(242,240,234,.16);
  --glass:rgba(16,17,16,.66);
  --bar:clamp(52px,5.8vw,82px);
  --pad:clamp(20px,9.7vw,140px);
  --e-power5:cubic-bezier(.76,0,.24,1);
  --e-expo2:cubic-bezier(.83,0,.17,1);
  --e-circ2:cubic-bezier(.25,1,.5,1);
  --e-circ3:cubic-bezier(.19,1,.22,1);
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --lift:0;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--night)}
body{font-family:var(--f-display);color:var(--ink);background:var(--night);font-weight:450;line-height:1.2;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
em{font-family:var(--f-serif);font-style:italic;font-weight:300}
b{font-weight:inherit}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* type: mono label / large / huge */
.mono{font-family:var(--f-mono);font-size:12px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.small{font-size:13px}
.text-large{font-size:clamp(26px,2.6vw,38px);line-height:1.05;letter-spacing:-.025em;font-weight:500}
.text-huge{font-size:clamp(38px,7.2vw,112px);line-height:.98;letter-spacing:-.045em;font-weight:500}
.uppercase{text-transform:uppercase}
.label{display:block;opacity:.6;margin-bottom:10px}
.mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.mask>span{display:block;will-change:transform}
b{color:inherit}
.hero-claim b,.e-word b,.chrome-logo i{color:var(--amber)}

/* ---------- atmosphere + canvas ---------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(55% 50% at 74% 16%, rgba(240,166,74,.16), transparent 70%),
    radial-gradient(130% 110% at 50% 40%, #232320 0%, #181917 40%, #101110 70%, #070807 100%)}
.atmos .lift{position:absolute;inset:0;opacity:var(--lift);background:radial-gradient(90% 75% at 40% 32%, #4b473f 0%, #2d2b27 40%, rgba(30,28,25,0) 78%)}
.atmos .vignette{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 45%, transparent 50%, rgba(3,3,3,.8) 100%)}
.atmos .grain{position:absolute;inset:0;opacity:.08;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%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none}
.no-gl .atmos::after{content:"";position:absolute;left:72%;top:46%;width:42vmin;height:42vmin;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle, rgba(242,240,234,.42), rgba(240,166,74,.14) 40%, transparent 70%);filter:blur(8px)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--night);color:var(--ice);display:none;overflow:hidden}
.js .loader{display:block}
.loader::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 20%, rgba(240,166,74,.14), transparent 70%)}
.loader-est,.loader-status{position:absolute;top:clamp(20px,4.6vw,66px);color:var(--ice-soft)}
.loader-est{left:var(--pad)}
.loader-status{right:clamp(20px,8.4vw,120px)}
.loader-words{font-size:clamp(78px,17.5vw,300px);position:absolute;left:clamp(14px,10vw,150px);right:0;bottom:clamp(40px,8vh,90px);overflow:hidden;padding-bottom:.2em}
.loader-word{display:block;font-size:1em;line-height:.95;letter-spacing:-.05em;font-weight:500;font-stretch:104%;will-change:transform;white-space:nowrap}
.loader-word i{font-style:normal;color:var(--amber)}

/* ---------- chrome ---------- */
.chrome{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;height:var(--bar)}
.chrome>*{pointer-events:auto}
.chrome-btn{position:absolute;top:0;width:var(--bar);height:var(--bar);background:var(--slate);color:var(--ice);display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.06em;transition:background .4s var(--e-circ2),color .4s}
.chrome-btn:hover{background:#000}
.chrome-menu{left:0}
.chrome-write{right:0}
.chrome-logo{position:absolute;top:calc(var(--bar)*.26);left:var(--pad);font-family:var(--f-serif);font-weight:500;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em;line-height:1;color:var(--ink);transition:color .4s,opacity .5s}
.chrome.is-past .chrome-logo{opacity:0;pointer-events:none}
.chrome.is-dark .chrome-btn{background:var(--paper);color:var(--ink)}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:80;background:var(--slate);color:var(--ice);clip-path:inset(0 0 100% 0);visibility:hidden;overflow:auto}
.menu.is-open{visibility:visible}
.menu-inner{min-height:100%;display:grid;grid-template-columns:minmax(260px,20%) 1fr minmax(170px,13%)}
.menu-col{padding:clamp(20px,2.4vw,34px) clamp(18px,2vw,30px)}
.menu-nav{display:flex;flex-direction:column;border-right:1px solid var(--line-l)}
.menu-close{align-self:flex-start;padding:2px 0;margin-bottom:clamp(24px,5vh,56px)}
.menu-links{display:flex;flex-direction:column;gap:2px}
.menu-links a{font-size:clamp(28px,2.4vw,34px);letter-spacing:-.03em;line-height:1.1;display:inline-block;transition:opacity .3s}
.menu-links:hover a{opacity:.45}.menu-links a:hover{opacity:1}
.menu-links a.is-current{opacity:.55}
.menu-info{margin-top:auto;padding-top:40px}
.menu-info p{opacity:.85;text-transform:none;letter-spacing:.02em;font-size:13px}
.menu-main{display:grid;grid-template-rows:repeat(3,1fr);padding:0}
.menu-block{padding:clamp(20px,2.4vw,34px) clamp(18px,2vw,30px);border-bottom:1px solid var(--line-l);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;column-gap:20px;min-height:150px}
.menu-block:last-child{border-bottom:0}
.menu-block .label{grid-column:1/-1;margin-bottom:12px}
.menu-block-title{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;grid-column:1;line-height:1.05}
.menu-block ul{grid-column:2;grid-row:2/4;align-self:end;display:flex;flex-direction:column;gap:3px;opacity:.9;padding-bottom:4px}
.menu-view{grid-column:1;align-self:end;justify-self:start;border-bottom:1px solid currentColor;padding-bottom:2px;margin-top:20px}
.menu-side{display:flex;flex-direction:column;justify-content:space-between;gap:40px;border-left:1px solid var(--line-l)}
.menu-side ul{display:flex;flex-direction:column;gap:3px;text-transform:none;letter-spacing:.02em;font-size:13px}
.menu-side a{border-bottom:1px solid currentColor}
.motto-line{font-family:var(--f-serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:18px;font-weight:300}
[data-menu-item]{opacity:0;transform:translateY(24px)}

/* ---------- hero ---------- */
.hero{position:relative;z-index:3;display:grid;grid-template-columns:45% 55%;height:100svh;min-height:600px;overflow:hidden}
.hero-left{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:clamp(30px,7vh,90px);background:var(--paper)}
.hero-counter{position:relative;height:clamp(104px,14.7vh,124px);margin:auto 0;width:100%}
.hc-a{position:absolute;left:0;top:0;width:58%;height:50%;background:var(--slate);color:var(--ice);display:flex;align-items:center;overflow:hidden}
.hc-b{position:absolute;left:0;top:50%;width:min(487px,100%);height:50%;background:var(--slate);color:var(--ice);display:flex;align-items:center;overflow:hidden}
.hc-b a{margin-left:68%;white-space:nowrap}
.hc-index{padding-left:clamp(20px,2.4vw,34px);width:clamp(76px,8.4vw,120px);flex:none;color:var(--amber)}
.hc-title{font-size:clamp(22px,2.4vw,34px);line-height:1;padding-bottom:.06em}
.hero-claim{padding-left:var(--pad);font-size:clamp(26px,2.6vw,38px);letter-spacing:-.025em}
.hero-right{position:relative;overflow:hidden}
.hero-eyebrow{position:absolute;top:calc(var(--bar) + 18px);right:clamp(20px,3vw,44px);color:var(--ice-soft);text-align:right;max-width:26ch;text-shadow:0 0 18px rgba(7,8,7,.8)}
.slide-dots{display:none}

.slide-card{position:absolute;left:clamp(30px,5vw,74px);bottom:clamp(30px,7vh,74px);width:min(640px,calc(100% - 2*clamp(30px,5vw,74px)));height:clamp(120px,17vh,150px);color:var(--ink)}
.sc-top{position:absolute;left:0;top:0;width:100%;height:40%;background:var(--paper);display:flex;align-items:center}
.sc-bottom{position:absolute;left:0;top:40%;width:83%;height:60%;background:var(--paper)}
.sc-no{position:absolute;left:17%;top:50%;transform:translateY(-50%);width:50%;font-size:clamp(26px,2.5vw,36px);color:var(--amber-deep)}
.sc-arrows{position:absolute;right:0;top:0;height:100%;display:flex}
.sc-arrow{width:clamp(36px,3.4vw,50px);height:100%;font-size:22px;line-height:1;color:#666;transition:color .3s,background .3s}
.sc-arrow:hover{color:var(--ink);background:var(--amber)}
.sc-more{position:absolute;left:clamp(10px,1vw,15px);bottom:12px;display:inline-block}
.sc-more::after{content:"";position:absolute;left:-15px;right:-100px;bottom:-12px;height:3px;background:var(--amber);transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--e-circ3)}
.sc-bottom:hover .sc-more::after,.sc-more:hover::after{transform:scaleX(1)}
.sc-title{position:absolute;left:30%;top:-2px;font-size:clamp(26px,2.5vw,36px);line-height:1.08;width:70%}

/* ---------- sections ---------- */
section{position:relative;z-index:3}
.section-label{display:flex;gap:22px;text-transform:uppercase;padding:0 var(--pad) 22px;border-bottom:1px solid var(--line-d);margin-bottom:clamp(36px,6vw,80px)}
.section-label span:first-child{opacity:.68}

.studio{background:var(--paper);padding:clamp(80px,11vw,170px) 0 0}
.studio-text{padding:0 var(--pad);font-size:clamp(30px,4.6vw,70px);letter-spacing:-.04em;line-height:1.02;max-width:17em;text-wrap:balance}
.studio-text em{color:var(--amber-deep);letter-spacing:-.02em}
.studio-lede{padding:0 var(--pad);margin-top:clamp(28px,4vw,56px);max-width:calc(46ch + 2*var(--pad));font-size:16px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(60px,9vw,140px);border-top:1px solid var(--line-d)}
.stats>div{padding:22px clamp(16px,2vw,28px) 40px;display:flex;flex-direction:column;gap:46px}
.stats>div:first-child{padding-left:var(--pad)}
.stats>div:not(:first-child){border-left:1px solid var(--line-d)}
.stats dt{opacity:.62}
.stats dd{font-size:clamp(34px,5vw,76px);letter-spacing:-.045em}

/* the work */
.work{background:var(--night);color:var(--ice);padding:clamp(60px,8vw,110px) 0 clamp(70px,9vw,130px)}
.work .section-label{border-color:var(--line-l)}
.work-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:clamp(24px,4vw,64px);padding:0 clamp(20px,3vw,44px) 0 0}
.clist{border-top:1px solid var(--line-l)}
.clist button{width:100%;text-align:left;display:grid;grid-template-columns:var(--pad) 1fr auto;align-items:baseline;gap:20px;padding:clamp(14px,1.6vw,22px) 0;border-bottom:1px solid var(--line-l);transition:background .4s,padding .6s var(--e-circ3)}
.clist .n{padding-left:clamp(20px,3vw,40px);color:var(--ice-faint)}
.clist .name{justify-self:start;min-width:0;max-width:100%;font-size:clamp(22px,3.4vw,52px);letter-spacing:-.04em;line-height:1;transition:transform .7s var(--e-circ3)}
.clist .cat{color:var(--ice-faint);text-align:right;padding-right:6px}
.clist button:hover{background:rgba(242,240,234,.04)}
.clist button:hover .name,.clist button[aria-pressed="true"] .name{transform:translateX(clamp(8px,1.2vw,20px))}
.clist button[aria-pressed="true"]{background:rgba(240,166,74,.09)}
.clist button[aria-pressed="true"] .n,.clist button[aria-pressed="true"] .cat{color:var(--amber)}
.cdetail{position:sticky;top:calc(var(--bar) + 20px);align-self:start;display:grid;gap:clamp(24px,5vw,60px);padding:clamp(18px,2vw,28px);background:var(--paper);color:var(--ink);min-height:clamp(300px,42vh,420px);grid-template-rows:auto 1fr auto auto}
.c-count{color:var(--amber-deep)}
.c-big{font-size:clamp(90px,12vw,190px);line-height:.8;letter-spacing:-.06em;font-weight:300;font-stretch:125%;align-self:center;color:var(--ink)}
.cdetail h3{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(28px,2.8vw,40px);line-height:1.05;letter-spacing:-.015em}
.c-cat{opacity:.66;margin-top:8px}
.cta-block{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--slate);color:var(--ice);padding:18px 18px;transition:background .3s}
.cta-block span{color:var(--amber);font-size:16px}
.cta-block:hover{background:#000}
.work-note{padding:clamp(28px,4vw,48px) var(--pad) 0;color:var(--ice-faint);font-size:13px;max-width:calc(60ch + 2*var(--pad))}
.work-note a{color:var(--ice-soft);border-bottom:1px solid currentColor}

/* ethos: transparent window */
.ethos{min-height:100svh;display:grid;grid-template-rows:1fr 1fr 1fr auto;padding:clamp(92px,13vh,132px) var(--pad) clamp(40px,7vh,72px);color:var(--ice);text-shadow:0 0 22px rgba(7,8,7,.6)}
.e-word{font-size:clamp(44px,9.6vw,150px);font-weight:230;font-stretch:125%;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.e-word.w1{grid-row:3;justify-self:start;align-self:end}
.e-word.w2{grid-row:2;justify-self:center;align-self:center}
.e-word.w3{grid-row:1;justify-self:end;align-self:start}
.e-line{grid-row:4;justify-self:center;text-align:center;color:var(--ice-faint);padding-top:28px}

/* approach */
.approach{background:var(--paper);padding:clamp(60px,8vw,110px) 0 clamp(70px,9vw,140px)}
.approach-title{padding:0 var(--pad);margin-bottom:clamp(40px,6vw,90px)}
.approach-title em{color:var(--amber-deep);letter-spacing:-.03em}
.slist li{display:grid;grid-template-columns:var(--pad) minmax(220px,1fr) minmax(220px,34%);gap:20px;align-items:baseline;padding:clamp(22px,2.6vw,38px) 0;border-top:1px solid var(--line-d)}
.slist li:last-child{border-bottom:1px solid var(--line-d)}
.slist li .mono{padding-left:clamp(20px,3vw,40px);opacity:.68}
.slist li h3{font-size:clamp(28px,4vw,62px);letter-spacing:-.045em;line-height:1}
.slist li p{max-width:34ch;padding-right:20px;font-size:15px;line-height:1.5;color:var(--ink-soft)}

/* contact: transparent window + glass panel */
.contact{min-height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto;row-gap:40px;color:var(--ice);padding:clamp(92px,13vh,132px) var(--pad) clamp(24px,4vh,40px)}
.panel{grid-column:7/-1;align-self:center;display:grid;gap:16px;padding:clamp(18px,2.4vw,30px);background:var(--glass);border:1px solid var(--line-l);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.eyebrow{color:var(--ice-faint)}
.eyebrow b{color:var(--amber)}
.statement{font-family:var(--f-serif);font-weight:300;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.statement em{color:var(--silver)}
.lede{max-width:40ch;color:var(--ice-soft);font-size:15px;line-height:1.5}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:4px}
.field{display:grid;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ice-faint)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;color:var(--ice);background:rgba(242,240,234,.05);border:1px solid var(--line-l);border-radius:0;padding:10px 12px;outline:none;transition:border-color .2s}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ice-soft) 50%),linear-gradient(135deg,var(--ice-soft) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:#1a1a18;color:var(--ice)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber)}
.field .err{font-size:13px;color:#ffb36b}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.small{color:var(--ice-faint)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 18px;cursor:pointer;font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ice);border:1px solid var(--line-l);background:rgba(16,17,16,.35);transition:background .25s,border-color .25s,transform .25s}
.btn:hover{border-color:var(--ice-faint);background:rgba(40,40,36,.5)}
.btn.solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.solid:hover{background:#fff;transform:translateY(-1px)}
.btn .arr{color:var(--amber)}
.btn.solid .arr{color:var(--amber-deep)}
.addr{font-family:var(--f-mono);font-size:13px;color:var(--ice);user-select:all}
.review{display:grid;gap:14px}
.review pre{white-space:pre-wrap;word-break:break-word;font:14px/1.6 var(--f-display);color:var(--ice);background:rgba(242,240,234,.05);border:1px solid var(--line-l);padding:14px;max-height:280px;overflow:auto}
.tag{color:var(--amber)}
.status{font-size:13px;color:var(--amber);min-height:1.2em}
.foot-bar{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 28px;padding-top:18px;border-top:1px solid var(--line-l);font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ice-faint)}
.foot-bar .links{display:flex;flex-wrap:wrap;gap:20px}
.foot-bar a:hover,.foot-bar button:hover{color:var(--ice)}
.foot-bar button[aria-pressed="true"]{color:var(--amber)}
.foot-bar .motto{font-family:var(--f-serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ice-soft)}

/* reveal */
.js [data-observe]{opacity:0;transform:translateY(40px);transition:opacity 1s var(--e-circ3),transform 1.2s var(--e-circ3)}
.js [data-observe].is-inview{opacity:1;transform:none}

/* ---------- mobile ---------- */
@media (max-width:820px){
  :root{--pad:20px;--bar:56px}
  .text-large{font-size:26px}
  .chrome-btn{background:transparent;color:var(--ice);width:auto;padding:0 20px;font-size:13px;letter-spacing:0;text-transform:none;font-family:var(--f-display);font-weight:500}
  .chrome-btn:hover{background:transparent}
  .chrome.is-past .chrome-btn{background:var(--slate)}
  .chrome.is-past.is-dark .chrome-btn{background:var(--paper);color:var(--ink)}
  .chrome-logo{left:50%;transform:translateX(-50%);top:15px;color:var(--ice)}
  .hero{display:flex;flex-direction:column;height:100svh;min-height:560px}
  .hero-right{order:1;flex:1;min-height:0}
  .hero-left{order:2;padding:0;flex:none;display:block}
  .hero-claim,.hero-brand-spacer{display:none}
  .hero-counter{margin:0;height:56px}
  .hc-a{width:100%;height:100%;justify-content:center}
  .hc-b{display:none}
  .hc-index{position:absolute;left:16px;width:auto;padding:0}
  .hero-eyebrow{top:calc(var(--bar) + 8px);left:20px;right:20px;text-align:center;max-width:none}
  .slide-card{left:0;bottom:0;width:100%;height:72px}
  .sc-top{width:100%;height:100%;display:block}
  .sc-bottom{display:none}
  .sc-no{left:24px;width:auto}
  .sc-arrows{display:none}
  .sc-title{display:none}
  .slide-card::after{content:attr(data-title);position:absolute;left:120px;top:50%;transform:translateY(-50%);font-size:24px;letter-spacing:-.025em;line-height:1.05;white-space:pre-line}
  .slide-dots{display:flex;position:absolute;left:50%;transform:translateX(-50%);bottom:92px;gap:8px;padding:12px 14px;border-radius:99px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px)}
  .slide-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .4s,transform .4s}
  .slide-dots i.on{background:var(--amber);transform:scale(1.15)}
  .menu-inner{grid-template-columns:1fr}
  .menu-nav{border-right:0;border-bottom:1px solid var(--line-l)}
  .menu-info{margin-top:30px}
  .menu-main{grid-template-rows:none}
  .menu-block{grid-template-columns:1fr;min-height:0}
  .menu-block ul{grid-column:1;grid-row:auto;margin-top:16px}
  .menu-side{flex-direction:row;border-left:0;border-top:1px solid var(--line-l)}
  .stats{grid-template-columns:1fr}
  .stats>div,.stats>div:first-child,.stats>div:not(:first-child){padding:18px 20px;border-left:0;gap:18px;border-bottom:1px solid var(--line-d)}
  .studio-lede{max-width:none}
  .work-grid{grid-template-columns:1fr;padding:0}
  .clist button{grid-template-columns:44px 1fr;gap:10px;padding:16px 0}
  .clist .n{padding-left:20px}
  .clist .cat{display:none}
  .cdetail{position:relative;top:auto;margin:24px 20px 0;min-height:0;gap:20px}
  .c-big{font-size:96px}
  .ethos{padding-inline:20px}
  .slist li{grid-template-columns:1fr;gap:8px;padding:26px 20px}
  .slist li .mono{padding:0}
  .contact{grid-template-columns:1fr;padding-inline:20px}
  .panel{grid-column:1}
  form{grid-template-columns:1fr}
  .section-label{padding-inline:20px}
}
html.calm .atmos .lift{transition:none}
@media (prefers-reduced-motion:reduce){
  .js [data-observe]{opacity:1;transform:none;transition:none}
  .loader{display:none!important}
}