:root{
  --bg:#0A0907;--surface:#13110E;--surface-2:#1C1915;--line:#2A261F;
  --brand:#998F77;--brand-light:#C9B99A;--brand-glow:#E8D9B8;
  --text:#F2EDE4;--muted:#A39B8E;--danger:#C2574B;--success:#7FA37A;
  --ease:cubic-bezier(.22,1,.36,1);
  --f-display:'Alexandria',sans-serif;--f-body:'Alexandria',sans-serif;--hs:.85;
  --pad:clamp(20px,5vw,72px);
}
html[lang=en]{--f-display:'Alexandria',sans-serif;--f-body:'Alexandria',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
body{font-family:var(--f-body);font-size:clamp(15px,1.05vw,18px);line-height:1.7;overflow-x:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--brand);color:var(--bg)}
.wrap{padding-inline:var(--pad)}
.eyebrow{font-family:var(--f-display);letter-spacing:.32em;text-transform:uppercase;font-size:12px;color:var(--brand-light)}
.h-display{font-family:var(--f-display);font-weight:300;line-height:1.08;letter-spacing:-.01em}
html[lang=en] .h-display{letter-spacing:.01em}
.h2{font-family:var(--f-display);font-weight:300;font-size:calc(clamp(34px,4.6vw,72px) * var(--hs));line-height:1.12}
.muted{color:var(--muted)}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:100;opacity:.05;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:14px;padding:16px 30px;font-size:15px;letter-spacing:.02em;position:relative;overflow:hidden;transition:color .5s var(--ease);isolation:isolate}
.btn-primary{background:var(--brand-light);color:#14110c}
.btn-primary::before{content:"";position:absolute;inset:0;background:var(--brand-glow);transform:translateY(101%);transition:transform .6s var(--ease);z-index:-1}
.btn-primary:hover::before{transform:none}
.btn-ghost{border:1px solid rgba(201,185,154,.4);color:var(--text)}
.btn-ghost:hover{border-color:var(--brand-light)}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(-6px)}
html[dir=ltr] .btn .arr{transform:scaleX(-1)}
html[dir=ltr] .btn:hover .arr{transform:scaleX(-1) translateX(-6px)}

/* preloader */
.loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center}
.loader .logo{width:min(46vw,300px);color:var(--brand);clip-path:polygon(0 0,0 0,0 100%,0 100%)}
.loader .bar{position:absolute;bottom:12vh;width:120px;height:1px;background:var(--line);overflow:hidden}
.loader .bar i{position:absolute;inset:0;background:var(--brand-light);transform-origin:left;transform:scaleX(0)}

/* header */
header{position:fixed;inset-inline:0;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);transition:background .5s,padding .5s,backdrop-filter .5s}
header.scrolled{background:rgba(10,9,7,.72);backdrop-filter:blur(14px);padding-block:14px;border-bottom:1px solid rgba(42,38,31,.6)}
header .logo{width:92px;color:var(--brand-light)}
nav.main{display:flex;gap:34px;font-size:14px}
nav.main a{position:relative;color:var(--muted);transition:color .3s}
nav.main a::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:1px;background:var(--brand-light);transform:scaleX(0);transition:transform .5s var(--ease)}
nav.main a:hover{color:var(--text)}nav.main a:hover::after{transform:none}
.h-actions{display:flex;align-items:center;gap:18px}
.lang{font-family:var(--f-display);font-size:13px;letter-spacing:.15em;color:var(--muted);padding:8px 4px}
.lang:hover{color:var(--brand-light)}
header .btn{padding:11px 20px;font-size:14px}
.burger{display:none;width:34px;height:20px;position:relative}
.burger i{position:absolute;inset-inline:0;height:1px;background:var(--text);transition:.4s var(--ease)}
.burger i:first-child{top:4px}.burger i:last-child{bottom:4px}
.menu{position:fixed;inset:0;z-index:45;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);gap:6px;clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .8s var(--ease)}
.menu.open{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.menu a{font-family:var(--f-display);font-weight:300;font-size:calc(clamp(34px,9vw,56px) * var(--hs));line-height:1.3}
.menu a:hover{color:var(--brand-light)}
@media(max-width:1020px){nav.main,header .btn{display:none}.burger{display:block}}

/* hero */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(10,9,7,.55) 0%,rgba(10,9,7,.15) 35%,rgba(10,9,7,.55) 70%,var(--bg) 100%),
  radial-gradient(ellipse at 70% 30%,rgba(232,217,184,.12),transparent 60%)}
.hero .cut{position:absolute;z-index:1;inset-block:0;inset-inline-start:0;width:38%;background:linear-gradient(90deg,transparent,rgba(10,9,7,.55));clip-path:polygon(35% 0,100% 0,100% 100%,0 100%)}
html[dir=ltr] .hero .cut{background:linear-gradient(-90deg,transparent,rgba(10,9,7,.55));clip-path:polygon(0 0,65% 0,100% 100%,0 100%)}
.hero-in{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(48px,9vh,100px)}
.hero h1{font-size:calc(clamp(46px,8.2vw,138px) * var(--hs));max-width:14ch}
html[lang=en] .hero h1{font-size:calc(clamp(40px,6.6vw,112px) * var(--hs));max-width:16ch}
.hero h1 .ln{display:block;overflow:hidden;padding-block:.06em}
.hero h1 .ln span{display:inline-block}
.hero h1 em{font-style:normal;color:var(--brand-light)}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:clamp(28px,4vh,48px);flex-wrap:wrap}
.hero-foot p{max-width:44ch;color:rgba(242,237,228,.78)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.scroll-ind{position:absolute;z-index:2;bottom:28px;inset-inline-end:var(--pad);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;color:var(--muted);writing-mode:vertical-rl}
.scroll-ind i{width:1px;height:56px;background:linear-gradient(var(--brand-light),transparent);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:700px){.scroll-ind{display:none}.hero h1{max-width:none}}

section{position:relative}
.sec{padding-block:clamp(90px,14vw,190px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(44px,6vw,80px);flex-wrap:wrap}
.sec-head .eyebrow{display:block;margin-bottom:18px}

/* manifesto */
.manifesto{display:grid;grid-template-columns:1fr 2.4fr;gap:clamp(30px,6vw,100px)}
.manifesto .big{font-family:var(--f-display);font-weight:300;font-size:calc(clamp(28px,3.6vw,58px) * var(--hs));line-height:1.35}
.manifesto .big .w{opacity:.14;transition:none}
.manifesto aside{display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.manifesto aside img{aspect-ratio:3/4;object-fit:cover;width:100%;max-width:300px;clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
.link-u{display:inline-flex;gap:10px;align-items:center;border-bottom:1px solid var(--brand);padding-bottom:6px;color:var(--brand-light);width:max-content}
@media(max-width:800px){.manifesto{grid-template-columns:1fr}.manifesto aside{order:2}}

/* services */
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);position:relative;cursor:pointer}
.svc .n{font-family:var(--f-display);color:var(--brand);font-size:14px;letter-spacing:.1em}
.svc .t{font-family:var(--f-display);font-weight:300;font-size:calc(clamp(24px,3vw,46px) * var(--hs));transition:transform .6s var(--ease),color .4s}
.svc .d{color:var(--muted);font-size:14px;max-width:34ch;text-align:end;opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.svc:hover .t{color:var(--brand-light);transform:translateX(-14px)}
html[dir=ltr] .svc:hover .t{transform:translateX(14px)}
.svc:hover .d{opacity:1;transform:none}
.svc::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(153,143,119,.07),transparent);opacity:0;transition:opacity .5s}
.svc:hover::before{opacity:1}
.svc-float{position:fixed;top:0;left:0;width:300px;aspect-ratio:4/5;pointer-events:none;z-index:40;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.85);clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}
.svc-float img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .4s}
.svc-float img.on{opacity:1}
@media(max-width:800px){.svc{grid-template-columns:44px 1fr}.svc .d{display:none}}
@media(hover:none){.svc-float{display:none}}

/* work (horizontal) */
.work{overflow:hidden}
.work-track{display:flex;gap:clamp(20px,3vw,48px);padding-inline:var(--pad);width:max-content}
.card{width:min(78vw,980px);flex:none;position:relative}
.card .media{position:relative;aspect-ratio:16/9.5;overflow:hidden;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%)}
html[dir=ltr] .card .media{clip-path:polygon(0 0,94% 0,100% 100%,0 100%)}
.card .media img{width:118%;height:100%;object-fit:cover;max-width:none;position:absolute;inset-inline-start:-9%;transition:transform 1.2s var(--ease)}
.card:hover .media img{transform:scale(1.04)}
.card .meta{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-top:22px}
.card h3{font-family:var(--f-display);font-weight:300;font-size:calc(clamp(22px,2.4vw,36px) * var(--hs));line-height:1.25}
.card .tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.tag{font-size:12px;letter-spacing:.06em;border:1px solid var(--line);padding:4px 12px;color:var(--muted)}
.card .idx{font-family:var(--f-display);color:var(--brand);font-size:13px;letter-spacing:.2em;white-space:nowrap}
.work-progress{margin:44px var(--pad) 0;height:1px;background:var(--line);position:relative}
.work-progress i{position:absolute;inset-block:0;inset-inline-start:0;width:100%;background:var(--brand-light);transform:scaleX(0);transform-origin:right}
html[dir=ltr] .work-progress i{transform-origin:left}
@media(max-width:800px){.work-track{flex-direction:column;width:auto}.card{width:100%}.work-progress{display:none}}

/* why */
.why{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.why div{padding:40px 28px 40px 0;border-inline-start:1px solid var(--line);padding-inline:28px}
.why div:first-child{border-inline-start:0;padding-inline-start:0}
.why svg{width:44px;height:44px;stroke:var(--brand-light);fill:none;stroke-width:1;margin-bottom:28px}
.why h4{font-family:var(--f-display);font-weight:400;font-size:20px;margin-bottom:12px}
.why p{color:var(--muted);font-size:15px}
@media(max-width:900px){.why{grid-template-columns:1fr 1fr}.why div{border-inline-start:0;border-bottom:1px solid var(--line);padding-inline:0}}
@media(max-width:560px){.why{grid-template-columns:1fr}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat b{display:block;font-family:var(--f-display);font-weight:200;font-size:calc(clamp(54px,7vw,116px) * var(--hs));line-height:1;color:var(--brand-light)}

.stat span{display:block;margin-top:14px;color:var(--muted);font-size:14px;letter-spacing:.04em}
@media(max-width:800px){.stats{grid-template-columns:1fr 1fr;row-gap:56px}}
.sample{display:inline-block;font-size:11px;border:1px dashed var(--brand);color:var(--brand);padding:2px 10px;margin-top:20px;letter-spacing:.05em}

/* clients marquee */
.marquee{direction:ltr;overflow:hidden;border-block:1px solid var(--line);padding-block:34px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-row{display:flex;gap:80px;width:max-content;animation:mq 40s linear infinite}
.mq-row.rev{animation-direction:reverse;margin-top:28px}
.mq-row span{font-family:var(--f-display);font-size:clamp(20px,2vw,28px);color:#5f584c;white-space:nowrap;transition:color .4s}
.mq-row span:hover{color:var(--brand-light)}
.marquee:hover .mq-row{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* testimonials */
.testi{max-width:1100px;margin-inline:auto;text-align:center}
.testi .q-mark{font-family:Georgia,serif;font-size:120px;line-height:.6;color:var(--brand);opacity:.6}
.testi blockquote{font-family:var(--f-display);font-weight:300;font-size:calc(clamp(22px,2.8vw,42px) * var(--hs));line-height:1.45;min-height:3.2em;margin:20px 0 30px}
.testi cite{font-style:normal;color:var(--muted);font-size:14px}
.testi cite b{color:var(--text);font-weight:500;display:block;font-size:16px}
.dots{display:flex;gap:10px;justify-content:center;margin-top:36px}
.dots button{width:28px;height:2px;background:var(--line);transition:background .4s,width .4s}
.dots button.on{background:var(--brand-light);width:48px}

/* cta */
.cta{position:relative;overflow:hidden;text-align:center;padding-block:clamp(120px,18vw,240px)}
.cta .rays{position:absolute;inset:0;background:
  conic-gradient(from 180deg at 50% 120%,transparent 0deg,rgba(232,217,184,.10) 8deg,transparent 16deg,transparent 24deg,rgba(232,217,184,.07) 30deg,transparent 38deg,transparent 330deg,rgba(232,217,184,.07) 336deg,transparent 344deg,transparent 350deg,rgba(232,217,184,.1) 354deg,transparent 360deg),
  radial-gradient(ellipse at 50% 110%,rgba(201,185,154,.22),transparent 60%);transform-origin:50% 120%}
.cta .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;filter:grayscale(.4)}
.cta h2{position:relative;font-size:calc(clamp(44px,7vw,120px) * var(--hs))}
.cta p{position:relative;max-width:46ch;margin:24px auto 44px;color:rgba(242,237,228,.75)}
.cta .btn{position:relative}

/* footer */
.f-grid h5{font-family:var(--f-display);font-weight:400;letter-spacing:.25em;font-size:12px;color:var(--brand);margin-bottom:20px;text-transform:uppercase}
.f-grid a,.f-grid p{display:block;color:var(--muted);font-size:15px;margin-bottom:8px}
.f-grid a:hover{color:var(--brand-light)}
.f-bot{display:flex;justify-content:space-between;color:#6d665a;font-size:13px;margin-top:30px;flex-wrap:wrap;gap:10px}


/* request modal */
.modal{position:fixed;inset:0;z-index:150;display:flex;pointer-events:none}
.modal .scrim{position:absolute;inset:0;background:rgba(5,4,3,.7);backdrop-filter:blur(6px);opacity:0;transition:opacity .6s}
.modal .panel{position:relative;margin-inline-start:auto;width:min(640px,100%);height:100%;background:var(--surface);border-inline-start:1px solid var(--line);transform:translateX(-100%);transition:transform .8s var(--ease);display:flex;flex-direction:column;overflow:auto}
html[dir=ltr] .modal .panel{transform:translateX(100%)}
.modal.open{pointer-events:auto}.modal.open .scrim{opacity:1}.modal.open .panel{transform:none!important}
.p-head{display:flex;justify-content:space-between;align-items:center;padding:28px 36px;border-bottom:1px solid var(--line)}
.p-head .x{font-size:28px;line-height:1;color:var(--muted)}
.steps{display:flex;gap:8px;padding:28px 36px 0}
.steps i{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.steps i.on::after{content:"";position:absolute;inset:0;background:var(--brand-light);animation:fill .6s var(--ease) both}
@keyframes fill{from{transform:scaleX(0)}}
.p-body{padding:28px 36px;flex:1}
.step{display:none}.step.on{display:block;animation:stepin .6s var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateY(14px)}}
.step h3{font-family:var(--f-display);font-weight:300;font-size:30px;margin-bottom:6px}
.step .sub{color:var(--muted);font-size:14px;margin-bottom:28px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--text);padding:14px 16px;font:inherit;font-size:15px;outline:none;transition:border-color .3s;border-radius:0;appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand)}
.field.err input,.field.err select{border-color:var(--danger)}
.field .msg{color:var(--danger);font-size:12px;margin-top:6px;display:none}
.field.err .msg{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.row2{grid-template-columns:1fr}.p-head,.p-body,.steps,.p-foot{padding-inline:22px!important}}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);padding:10px 16px;font-size:14px;color:var(--muted);transition:.3s}
.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--brand-light);border-color:var(--brand-light);color:#14110c}
.drop{border:1px dashed var(--brand);padding:22px;text-align:center;color:var(--muted);font-size:14px;cursor:pointer;display:block}
.p-foot{display:flex;justify-content:space-between;align-items:center;padding:22px 36px;border-top:1px solid var(--line)}
.p-foot .back{color:var(--muted);font-size:14px}
.done{text-align:center;padding-top:60px}
.done .ref{font-family:var(--f-display);font-size:34px;color:var(--brand-light);letter-spacing:.12em;margin:22px 0}
.wa{position:fixed;z-index:40;bottom:24px;inset-inline-start:24px;width:52px;height:52px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;transition:.4s}
.wa:hover{border-color:var(--brand-light)}
.wa svg{width:22px;fill:var(--brand-light)}
.reveal{opacity:0;transform:translateY(40px)}



@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.manifesto .big .w{opacity:1}}

/* ===== inner pages ===== */
.page-hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;padding:160px var(--pad) clamp(50px,7vw,90px);overflow:hidden}
.page-hero.short{min-height:44vh}
.page-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,7,.4),var(--bg))}
.page-hero>div{position:relative;z-index:1;max-width:1100px}
.page-hero h1{font-size:calc(clamp(40px,6.4vw,100px) * var(--hs));margin-top:16px}
.page-hero p{max-width:60ch;margin-top:18px;color:rgba(242,237,228,.78)}
.crumbs{font-size:13px;color:var(--muted);display:flex;gap:8px}
.crumbs a:hover{color:var(--brand-light)}
.prose{max-width:760px;font-size:clamp(16px,1.15vw,19px);line-height:1.9;color:rgba(242,237,228,.86)}
.prose h2,.prose h3{font-family:var(--f-display);font-weight:300;color:var(--text);margin:1.6em 0 .6em;line-height:1.3}
.prose h2{font-size:clamp(26px,2.4vw,38px)}.prose h3{font-size:clamp(21px,1.8vw,28px)}
.prose p,.prose ul,.prose ol{margin-bottom:1.1em}.prose ul,.prose ol{padding-inline-start:1.3em}
.prose a{color:var(--brand-light);text-decoration:underline;text-underline-offset:4px}
.prose blockquote{border-inline-start:2px solid var(--brand);padding-inline-start:20px;font-family:var(--f-display);font-size:1.2em;color:var(--text)}
.prose img{margin:1.5em 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
.split.rev>:first-child{order:2}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%)}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:clamp(24px,3vw,44px)}
.pcard{display:block}
.pcard .media{aspect-ratio:4/3;overflow:hidden;position:relative;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%)}
.pcard .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.pcard:hover .media img{transform:scale(1.05)}
.pcard h3{font-family:var(--f-display);font-weight:300;font-size:calc(clamp(20px,1.8vw,28px);margin-top:18px * var(--hs));line-height:1.3;transition:color .4s}
.pcard:hover h3{color:var(--brand-light)}
.pcard .meta{color:var(--muted);font-size:13px;margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.filters a{border:1px solid var(--line);padding:9px 18px;font-size:14px;color:var(--muted);transition:.3s}
.filters a:hover{border-color:var(--brand)}
.filters a.on{background:var(--brand-light);border-color:var(--brand-light);color:#14110c}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,20px)}
.gallery figure{grid-column:span 4;overflow:hidden;cursor:zoom-in}
.gallery figure:nth-child(5n+1){grid-column:span 8;grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
@media(max-width:700px){.gallery figure,.gallery figure:nth-child(5n+1){grid-column:span 12;grid-row:auto}}
.lightbox{position:fixed;inset:0;z-index:160;background:rgba(5,4,3,.94);display:none;place-items:center;padding:4vw}
.lightbox.open{display:grid}.lightbox img{max-height:90vh;width:auto}
.lightbox button{position:absolute;top:20px;inset-inline-end:24px;font-size:34px;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;border-block:1px solid var(--line);padding:28px 0;margin-bottom:60px}
.facts span{display:block;font-size:12px;color:var(--brand);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.pager{display:flex;gap:8px;justify-content:center;margin-top:60px}
.pager a,.pager span{border:1px solid var(--line);min-width:42px;height:42px;display:grid;place-items:center;font-size:14px;color:var(--muted)}
.pager .on{background:var(--brand-light);color:#14110c;border-color:var(--brand-light)}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,6vw,100px)}
.contact-grid dl dt{font-size:12px;letter-spacing:.2em;color:var(--brand);text-transform:uppercase;margin-top:28px}
.contact-grid dl dd{font-family:var(--f-display);font-weight:300;font-size:clamp(20px,1.8vw,28px);margin-top:6px}
.contact-grid dl dd a:hover{color:var(--brand-light)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.map{width:100%;aspect-ratio:16/7;border:0;filter:grayscale(1) invert(.92) contrast(.9);margin-top:clamp(60px,8vw,110px)}
.alert{padding:16px 20px;border:1px solid var(--line);margin-bottom:24px;font-size:15px}
.alert.ok{border-color:var(--success);color:#cfe3cc}.alert.err{border-color:var(--danger);color:#f0c6c0}
.faq details{border-bottom:1px solid var(--line);padding:24px 0}
.faq summary{font-family:var(--f-display);font-weight:300;font-size:clamp(19px,1.6vw,24px);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";color:var(--brand-light);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin-top:14px;max-width:70ch}
.video-block{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.video-block video,.video-block iframe{width:100%;height:100%;object-fit:cover;border:0}
.bg-surface{background:var(--surface)}
.svc-detail-body{display:grid;grid-template-columns:2fr 1fr;gap:clamp(30px,6vw,100px)}
.svc-detail-body aside{border-inline-start:1px solid var(--line);padding-inline-start:clamp(20px,3vw,40px)}
@media(max-width:860px){.svc-detail-body{grid-template-columns:1fr}.svc-detail-body aside{border:0;padding:0}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.6;pointer-events:none}
.lang-switch{font-family:var(--f-display);font-size:13px;letter-spacing:.15em;color:var(--muted);padding:8px 4px}
.lang-switch:hover{color:var(--brand-light)}

/* ===== service cards ===== */
.scards{display:grid;gap:clamp(18px,2vw,28px)}
.scards.cols-2{grid-template-columns:repeat(2,1fr)}.scards.cols-3{grid-template-columns:repeat(3,1fr)}.scards.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.scards.cols-3,.scards.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.scards.cols-2,.scards.cols-3,.scards.cols-4{grid-template-columns:1fr}}
.scard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;transition:transform .6s var(--ease),border-color .4s,box-shadow .6s var(--ease)}
.scard::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 60% at 50% 0%,rgba(232,217,184,.08),transparent 60%);opacity:0;transition:opacity .6s}
.scard:hover{transform:translateY(-6px);border-color:rgba(201,185,154,.45);box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.scard:hover::after{opacity:1}
.scard-media{position:relative;overflow:hidden;background:var(--surface-2)}
.scard-media.r-landscape{aspect-ratio:4/3}.scard-media.r-square{aspect-ratio:1}.scard-media.r-portrait{aspect-ratio:4/5}
.scard-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.9)}
.scard:hover .scard-media img{transform:scale(1.06);filter:saturate(1)}
.scard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,9,7,.55))}
.scard-body{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.scard-n{font-family:var(--f-display);font-size:12px;letter-spacing:.2em;color:var(--brand)}
.scard h3{font-family:var(--f-display);font-weight:var(--hw,300);font-size:calc(clamp(19px,1.6vw,24px) * var(--hs) / .85);line-height:1.35;transition:color .4s}
.scard:hover h3{color:var(--brand-light)}
.scard p{color:var(--muted);font-size:15px;line-height:1.7}
.scard-more{margin-top:auto;padding-top:10px;font-size:14px;color:var(--brand-light);display:inline-flex;gap:8px;align-items:center}
.scard-more .arr{transition:transform .5s var(--ease)}
.scard:hover .scard-more .arr{transform:translateX(-6px)}
html[dir=ltr] .scard-more .arr{transform:scaleX(-1)}
html[dir=ltr] .scard:hover .scard-more .arr{transform:scaleX(-1) translateX(-6px)}

/* ===== footer ===== */
.site-footer{border-top:1px solid var(--line);padding:clamp(56px,7vw,90px) var(--pad) 28px}
.f-grid{display:grid;gap:clamp(28px,4vw,56px);margin-bottom:clamp(40px,5vw,64px)}
.f-grid.cols-1{grid-template-columns:1fr}.f-grid.cols-2{grid-template-columns:1.4fr 1fr}.f-grid.cols-3{grid-template-columns:1.4fr 1fr 1fr}.f-grid.cols-4{grid-template-columns:1.4fr 1fr 1fr 1fr}
@media(max-width:900px){.f-grid.cols-3,.f-grid.cols-4{grid-template-columns:1fr 1fr}.f-about{grid-column:1/-1}}
@media(max-width:520px){.f-grid.cols-2,.f-grid.cols-3,.f-grid.cols-4{grid-template-columns:1fr}}
.f-logo{display:block;width:120px;color:var(--brand);margin-bottom:18px}
.f-logo svg{width:100%;height:auto}
.f-about p{color:var(--muted);font-size:15px;max-width:36ch;line-height:1.8}
.f-big{color:var(--brand);opacity:.85;margin:0 auto clamp(30px,4vw,50px)}
.f-big svg{width:100%;height:auto;display:block}
.f-big.size-sm{width:min(240px,60vw)}.f-big.size-md{width:min(420px,80vw)}.f-big.size-lg{width:100%}
.f-bot{border-top:1px solid var(--line);padding-top:22px}

/* ===== modal on mobile ===== */
html.modal-open,html.modal-open body{overflow:hidden}
.modal .panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;height:100dvh;max-height:100dvh}
.modal .p-foot{position:sticky;bottom:0;background:var(--surface);z-index:2;padding-bottom:max(22px,env(safe-area-inset-bottom))}
.modal .p-head{position:sticky;top:0;background:var(--surface);z-index:2}
@media(max-width:560px){.modal .chip{padding:9px 13px;font-size:13px}.step h3{font-size:24px}.p-body{padding-top:18px!important}}
.field input,.field select,.field textarea{font-size:16px}