/* amalkkaa.uz — main stylesheet
   Edit here; index.html links this file. Fonts live in ../fonts/ */

@font-face{font-family:"Inter Tight";font-weight:300;font-display:swap;src:url(../fonts/inter-tight-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-weight:400;font-display:swap;src:url(../fonts/inter-tight-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-weight:500;font-display:swap;src:url(../fonts/inter-tight-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Cond";font-weight:600;font-display:swap;src:url(../fonts/sofia-sans-extra-condensed-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-weight:300;font-display:swap;src:url(../fonts/inter-tight-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-weight:400;font-display:swap;src:url(../fonts/inter-tight-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-weight:500;font-display:swap;src:url(../fonts/inter-tight-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sofia Cond";font-weight:600;font-display:swap;src:url(../fonts/sofia-sans-extra-condensed-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-weight:300;font-display:swap;src:url(../fonts/inter-tight-cyrillic-300-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter Tight";font-weight:400;font-display:swap;src:url(../fonts/inter-tight-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter Tight";font-weight:500;font-display:swap;src:url(../fonts/inter-tight-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Sofia Cond";font-weight:600;font-display:swap;src:url(../fonts/sofia-sans-extra-condensed-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --white:#fff; --black:#000; --ink:#0f0f0f; --tile:#0f0f0f;
  --gray:#4f4f4f; --gray2:#8a8a8a; --line:#e6e6e6; --line-d:#262626;
  --lime:#99ff0a;
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --cond:"Sofia Cond","Arial Narrow",sans-serif;
  --max:1400px; --pad:clamp(20px,3.4vw,48px);
  --sec:clamp(96px,11vw,160px);
  --ease:cubic-bezier(.22,.8,.24,1);
  --h2:clamp(34px,3.9vw,56px); --h3:clamp(22px,2.3vw,32px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
[tabindex="-1"]:focus{outline:none}
body{background:var(--white);color:var(--black);font:300 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--black)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.wrap{max-width:calc(var(--max) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}
.dark{background:var(--black);color:var(--white)}
h1,h2,h3,h4{font-weight:400}
.h2{font-size:var(--h2);line-height:1.2;letter-spacing:-.01em}
.h3{font-size:var(--h3);line-height:1.2;letter-spacing:-.01em}
.body{font-size:16px;line-height:24px;color:var(--gray);letter-spacing:.01em}
.dark .body{color:rgba(255,255,255,.62)}
.cap{font-size:12px;line-height:16px;font-weight:400;text-transform:uppercase;letter-spacing:.06em}
.head{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start;margin-bottom:clamp(40px,5vw,80px)}
.head .cap{padding-top:.9em}
.head .h2{max-width:820px}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:400;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .4s var(--ease)}
.pill:hover{transform:translateY(-1px)}
.pill-black{background:var(--black);color:var(--white)}
.pill-black:hover{background:#262626}
.pill-white{background:var(--white);color:var(--black)}
.pill-lime{background:var(--lime);color:var(--black)}
.pill-lime:hover{background:#b6ff4d}
.pill-line{border-color:currentColor;background:transparent}
.pill-lg{height:52px;padding:0 28px;font-size:17px}

/* nav */
#nav{position:fixed;inset:0 0 auto;z-index:50;padding:18px 0;background:var(--ink);color:var(--white);transition:background .35s,color .35s,transform .5s var(--ease)}
#nav.light{background:var(--white);color:var(--black)}
#nav.hide{transform:translateY(-100%)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:40px}
.logo{font-size:19px;font-weight:500;letter-spacing:-.02em;display:flex;align-items:flex-start;gap:1px}
.logo sup{font-size:10px;line-height:1;margin-top:3px}
.links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:28px;font-size:15px;font-weight:400}
.links a{position:relative;opacity:.9}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-r{display:flex;align-items:center;gap:12px}
.lang{display:flex;gap:2px;font-size:13px;font-weight:400}
.lang button{background:none;border:0;cursor:pointer;padding:6px 8px;border-radius:999px;opacity:.5;transition:opacity .2s}
.lang button.on{opacity:1}
.lang button:hover{opacity:1}
#nav .cta{background:var(--white);color:var(--black)}
#nav.light .cta{background:var(--black);color:var(--white)}

/* hero (cover) */
.hero{position:relative;background:var(--ink);color:var(--white);padding:156px 0 clamp(20px,4vw,64px);overflow:hidden;isolation:isolate}
.grain{position:absolute;inset:0;z-index:-1;opacity:.5;mix-blend-mode:soft-light;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero-head{text-align:center}
.role{font-size:clamp(15px,1.25vw,18px);line-height:1.1;color:rgba(255,255,255,.6);font-weight:400;margin-bottom:clamp(14px,1.4vw,22px)}
.slogan{display:flex;flex-wrap:wrap;justify-content:center;column-gap:.1em;font-family:var(--cond);font-weight:600;text-transform:uppercase;font-size:clamp(76px,11vw,176px);line-height:.92;letter-spacing:-.011em}
.sl{display:inline-block;transform:scaleX(.76);white-space:nowrap;position:relative}
.sl .m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.sl .m>span{display:inline-block;transform:translateY(102%);transition:transform 1.1s var(--ease)}
.sl2 .m>span{transition-delay:.1s}
.in-view .sl .m>span{transform:none}
.stroke{position:absolute;left:-3%;width:102.5%;max-width:none;top:calc(100% - .13em);height:.149em;fill:var(--lime);clip-path:inset(-20% 100% -20% 0);transition:clip-path 1.1s .75s cubic-bezier(.6,.05,.25,1)}
.in-view .stroke{clip-path:inset(-20% 0 -20% 0)}
.hero-sub{max-width:600px;margin:clamp(34px,3.4vw,52px) auto 0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:rgba(255,255,255,.62);font-weight:300}
.hero-cta{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.hero-cta .pill-line{color:var(--white);border-color:rgba(255,255,255,.3)}
.hero-cta .pill-line:hover{border-color:var(--white)}
.fade-up{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in-view .fade-up{opacity:1;transform:none}
.in-view .d1{transition-delay:.45s}.in-view .d2{transition-delay:.6s}.in-view .d3{transition-delay:.75s}
.wheel{position:relative;margin-top:clamp(48px,5vw,72px);height:clamp(300px,38vw,560px);background:rgba(255,255,255,.03);overflow:hidden}
.wcard{position:absolute;left:50%;top:0;border-radius:10px;overflow:hidden;background:#1a1a1a;will-change:transform;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.wcard img{width:100%;height:100%;object-fit:cover}
.wheel-in{position:absolute;inset:0;opacity:0;transform:translateY(60px);transition:opacity 1.2s .35s var(--ease),transform 1.4s .35s var(--ease)}
.in-view .wheel-in{opacity:1;transform:none}

/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.rv-s{opacity:0;transform:scale(.92);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0s)}
.rv-s.in{opacity:1;transform:none}

/* projects */
.sec{padding:var(--sec) 0}
.cases{display:grid;grid-template-columns:1fr 1fr;gap:clamp(56px,6vw,96px) 24px}
.case{display:block}
.case.full{grid-column:1/-1}
.case .img{overflow:hidden;background:#f3f3f3;aspect-ratio:16/10}
.case.full .img{aspect-ratio:16/10}
.case .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.case:hover .img img{transform:scale(1.035)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags span{font-size:12px;line-height:18px;padding:0 6px;border:1px solid var(--line);border-radius:4px;color:#333;font-weight:400}
.case h3{margin-top:8px}
.case .arrow{display:inline-block;opacity:0;transform:translate(-6px,0);transition:.4s var(--ease)}
.case:hover .arrow{opacity:1;transform:none}
.more{display:flex;justify-content:center;margin-top:clamp(56px,6vw,96px)}
/* case not published yet: lime badge + running band + filled tag */
.case.soon{cursor:default}
.case.soon .img{position:relative}
.case.soon:hover .img img{transform:none}
.soon-badge{position:absolute;top:clamp(14px,1.8vw,28px);left:clamp(14px,1.8vw,28px);display:inline-flex;align-items:center;gap:10px;height:clamp(34px,3vw,44px);padding:0 clamp(14px,1.4vw,20px);border-radius:999px;background:var(--lime);color:var(--black);font-size:clamp(12px,1vw,14px);font-weight:500;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.soon-badge b{width:8px;height:8px;border-radius:50%;background:var(--black);animation:soonPulse 1.4s ease-in-out infinite}
@keyframes soonPulse{50%{opacity:.2;transform:scale(.7)}}
.soon-band{position:absolute;left:0;right:0;bottom:0;height:clamp(36px,3.6vw,52px);background:var(--lime);color:var(--black);overflow:hidden;display:flex;align-items:center}
.soon-track{display:flex;align-items:center;flex:none;white-space:nowrap;animation:soonMarquee 40s linear infinite;font-size:clamp(12px,1.1vw,15px);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.soon-track span,.soon-track i{padding:0 clamp(12px,1.2vw,18px);font-style:normal}
@keyframes soonMarquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.soon-badge b,.soon-track{animation:none}}
.tags .tag-soon{background:var(--black);border-color:var(--black);color:var(--lime);font-weight:500;text-transform:uppercase;letter-spacing:.04em}



/* clients */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.logo-t{aspect-ratio:1.12/1;background:var(--tile);display:flex;align-items:center;justify-content:center;padding:12%;transition:background .35s}
.logo-t img{width:var(--lw,50%);height:auto;max-height:100%;object-fit:contain;opacity:.92;transition:transform .6s var(--ease),opacity .3s}
/* optical logo sizes: equal visual weight (area + ink density), generated */
.lg-2work{--lw:48.3%}.lg-avtoskidka{--lw:57.3%}.lg-candidat{--lw:67.4%}.lg-emirates{--lw:60.8%}.lg-haemalab{--lw:71.8%}.lg-idea{--lw:44.3%}.lg-imed{--lw:72.5%}.lg-io{--lw:37.3%}.lg-iwon{--lw:46.7%}.lg-longship{--lw:76.3%}.lg-radius{--lw:50.2%}.lg-tahrirchi{--lw:59.1%}.lg-terrapro{--lw:77.8%}.lg-tottiy{--lw:57.9%}.lg-vention{--lw:64.6%}
/* /optical logo sizes */
.logo-t:hover{background:#171717}
.logo-t:hover img{transform:scale(1.06);opacity:1}
.logo-t.more-t{color:rgba(255,255,255,.55);font-size:18px;font-weight:400;transition:color .3s,background .3s}
.logo-t.more-t:hover{color:var(--black);background:var(--lime)}

/* services */
.serv{display:grid;grid-template-columns:260fr 404fr 404fr 260fr;gap:56px 24px;align-items:start}
.sv .vis{background:radial-gradient(120% 90% at 50% 28%,#1b1b1b 0%,#000 62%);overflow:hidden;position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.sv.tall .vis{aspect-ratio:404/440}
.sv.mid .vis{aspect-ratio:404/300}
.sv .vis svg{width:72%;height:auto;max-height:82%;transition:transform 1s var(--ease)}
.sv.tall .vis svg{width:62%}
.sv.mid .vis svg{width:56%}
.sv:hover .vis svg{transform:translateY(-6px) scale(1.045)}
.sv .vis svg [filter]{transition:opacity .6s}
.sv:hover .vis svg [filter]{opacity:1}
.sv h3{font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.01em;margin-top:16px}
.sv p{margin-top:6px;max-width:300px}
.serv .r2{margin-top:clamp(0px,4vw,60px)}

/* arc + words */
.arc{position:relative;height:clamp(120px,14vw,220px);background:#2a2a2a;overflow:hidden}
.arc i{position:absolute;left:50%;top:0;width:150vw;height:200%;background:var(--white);border-radius:0 0 50% 50% / 0 0 100% 100%;transform:translate(-50%,-50%) scaleX(var(--ax,1));will-change:transform}
.words{position:relative;height:420vh;background:#2a2a2a}
.words .stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.word{position:absolute;display:flex;font-size:clamp(40px,4.4vw,64px);letter-spacing:-.01em;color:var(--white);font-weight:400;white-space:nowrap}
.word span{display:inline-block;will-change:transform,opacity}

/* numbers */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start}
.stat{background:var(--white);color:var(--black);padding:32px;aspect-ratio:335/248;display:flex;flex-direction:column;justify-content:space-between}
.stat .n{font-size:clamp(52px,5.6vw,88px);line-height:1;letter-spacing:-.03em}
.stat .l{font-size:15px;line-height:22px;color:#222}
.stats{--st:clamp(80px,28vw,400px);--hold:clamp(120px,16vw,240px);--stick:clamp(96px,16vh,170px);align-items:stretch}
.scol{padding-bottom:0}
.scol:nth-child(2){padding-top:calc(var(--st)*.3)}
.scol:nth-child(3){padding-top:calc(var(--st)*1)}
.scol:nth-child(4){padding-top:calc(var(--st)*1.5)}
.scol .stat{position:sticky;top:var(--stick)}
.quote{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.q-vis{position:relative;background:var(--ink);overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:clamp(320px,40vw,560px)}
.q-vis .slogan{font-size:clamp(64px,8.6vw,124px)}
.q-vis .role{position:absolute;left:28px;bottom:24px;margin:0;font-size:14px}
.q-card{background:var(--white);color:var(--black);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(320px,40vw,560px)}
.q-top{display:flex;justify-content:space-between;align-items:center}
.q-ctl{display:flex;gap:8px;align-items:center}
.q-ctl button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;font-size:16px;transition:.25s}
.q-ctl button:hover{background:var(--black);color:var(--white);border-color:var(--black)}
.q-count{font-size:13px;color:var(--gray2);font-variant-numeric:tabular-nums;margin-right:8px}
.q-stage{position:relative;flex:1;display:flex;align-items:flex-end}
.q-text{font-size:clamp(18px,1.6vw,22px);line-height:1.45;letter-spacing:-.005em;font-weight:400;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.q-text.out{opacity:0;transform:translateY(10px)}
.q-who{display:flex;align-items:center;gap:12px;transition:opacity .45s}
.q-who.out{opacity:0}
.q-av{width:44px;height:44px;border-radius:50%;background:var(--black);color:var(--lime);display:grid;place-items:center;font-size:14px;font-weight:500;flex:none}
.q-who b{display:block;font-weight:400;font-size:17px;line-height:1.3}
.q-who span{display:block;font-size:14px;color:var(--gray2);line-height:1.3}
.q-src{font-size:12px;color:var(--gray2)}

/* faq */
.faq{display:grid;grid-template-columns:1fr 360px;gap:clamp(40px,8vw,140px);align-items:start}
.fq{border-top:1px solid var(--line)}
.fq:last-child{border-bottom:1px solid var(--line)}
.fq button{width:100%;display:grid;grid-template-columns:44px 1fr 24px;align-items:center;gap:8px;padding:20px 0;background:none;border:0;cursor:pointer;text-align:left}
.fq .no{font-size:12px;color:var(--gray2);font-weight:400}
.fq .qq{font-size:clamp(17px,1.4vw,20px);line-height:1.2;font-weight:400}
.fq .pm{position:relative;width:16px;height:16px;justify-self:end}
.fq .pm::before,.fq .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .45s var(--ease)}
.fq .pm::after{transform:rotate(90deg)}
.fq.open .pm::after{transform:rotate(0)}
.fq .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.fq.open .a{grid-template-rows:1fr}
.fq .a>div{overflow:hidden}
.fq .a p{padding:0 32px 24px 52px;max-width:720px}
.faq-side{position:sticky;top:120px}
.faq-side .h3{margin:12px 0}
.faq-side .body{margin-bottom:24px;max-width:300px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.c-left .h2{margin:14px 0 24px}
.c-left .body{max-width:470px}
.c-list{margin:28px 0;padding:24px 0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);display:grid;gap:12px;font-size:15px;color:rgba(255,255,255,.8)}
.c-list li{list-style:none;display:flex;gap:12px;align-items:flex-start}
.c-list li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--lime)}
.c-mail{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;font-size:15px}
.c-mail a{display:inline-flex;gap:10px;align-items:center;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.3);transition:text-decoration-color .25s}
.c-mail a:hover{text-decoration-color:var(--lime)}
.c-mail svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.form{background:var(--white);color:var(--black);padding:clamp(22px,2.6vw,36px)}
.form .h3{margin-bottom:24px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:18px}
.fld label,.flab{display:block;font-size:15px;font-weight:400;margin-bottom:8px}
.fld input,.fld textarea{width:100%;border:1px solid var(--line);background:#fff;padding:11px 14px;font-size:15px;font-weight:400;outline:none;transition:border-color .2s}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld textarea:focus{border-color:var(--black)}
.fld input::placeholder,.fld textarea::placeholder{color:#aaa}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chip span{display:block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:400;transition:.2s;user-select:none}
.chip:hover span{border-color:#999}
.chip input:checked+span{background:var(--black);color:var(--white);border-color:var(--black)}
.chip input:focus-visible+span{outline:2px solid var(--lime);outline-offset:2px}
.send{width:100%;height:52px;border-radius:999px;background:var(--black);color:var(--white);border:0;font-size:17px;font-weight:400;cursor:pointer;transition:background .25s}
.send:hover{background:#262626}
.fnote{font-size:13px;color:var(--gray2);margin-top:12px;text-align:center}
.sent{display:none;background:var(--lime);padding:12px 16px;font-size:15px;font-weight:400;margin-bottom:20px}
.sent.show{display:block}
.hp{position:absolute;left:-9999px}

/* footer */
footer{background:var(--ink);color:var(--white);padding:64px 0 40px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px}
.f-grid .logo{margin-bottom:20px}
.f-meta{color:rgba(255,255,255,.6);line-height:1.7}
.f-col .cap{color:var(--lime);margin-bottom:18px}
.f-col a{display:block;color:rgba(255,255,255,.85);margin-bottom:10px;transition:color .2s}
.f-col a:hover{color:var(--lime)}
.f-big{margin-top:72px;border-top:1px solid var(--line-d);padding-top:28px;display:flex;justify-content:space-between;color:rgba(255,255,255,.5);font-size:13px;gap:20px;flex-wrap:wrap}

@media (max-width:1100px){
  .links{display:none}
  .serv{grid-template-columns:1fr 1fr;gap:44px 16px}
  .serv .r2{margin-top:0}
  .sv.tall .vis,.sv.mid .vis{aspect-ratio:1/1}
  .faq{grid-template-columns:1fr}
  .faq-side{position:static}
}
@media (max-width:860px){
  .head{grid-template-columns:1fr;gap:14px}
  .head .cap{padding-top:0}
  .cases{grid-template-columns:1fr;gap:48px}
  .case.full .img{aspect-ratio:16/10}
  .logos{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .scol:nth-child(n){padding:0}
  .scol:nth-child(2n){padding-top:48px}
  .scol .stat{position:static}
  .stat{padding:20px}
  .quote,.contact{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .soon-badge{display:none}
  #nav .cta{display:none}
  .hero{padding-top:120px}
  .slogan{font-size:clamp(64px,22vw,96px)}
  .logos{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:1fr}
  .fq .a p{padding:0 0 22px 52px}
  .q-vis .slogan{font-size:clamp(56px,17vw,80px)}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
  .sl .m>span{transform:none}.stroke{clip-path:none}.fade-up,.rv,.rv-s,.wheel-in{opacity:1;transform:none}
}

/* screen-reader / SEO text, visually hidden */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 404 page */
.e404{background:var(--ink);color:var(--white);min-height:100vh;display:flex;align-items:center}
.e404 main{width:100%}
.e404 .cap{color:var(--lime)}
.e404 .h2{margin:14px 0 32px;color:var(--white)}
