/* ETEVIMOL theme — main stylesheet (generated from approved preview) */
:root{
  --w:#ffffff;
  --w2:#fafafa;
  --ink:#0c0c0c;
  --g1:#5f5f5f;
  --g2:#9a9a9a;
  --hair:#ececec;
  --hair2:#e0e0e0;
  --accent:#d8481d;
  --f:'Satoshi','Manrope','Inter',-apple-system,sans-serif;
  --fh:'Clash Display','Space Grotesk','Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
html{scroll-behavior:smooth}
body{background:var(--w);color:var(--ink);font-family:var(--f);font-weight:400;line-height:1.65;overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--w)}
h1,h2,h3{font-family:var(--fh);font-weight:500;letter-spacing:-.02em;line-height:1.02}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4.5vw,56px);position:relative;z-index:2}
.label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--g2);font-weight:500}
.label b{color:var(--accent);font-weight:600}
.section{padding:clamp(110px,16vh,200px) 0;position:relative}
.accent{color:var(--accent)}

/* ---------- page thread ---------- */
#threadlayer{position:absolute;top:0;left:0;width:100%;z-index:1;pointer-events:none;overflow:visible}
#threadlayer path{fill:none;stroke:var(--accent);stroke-width:1.1;stroke-linecap:round;opacity:.32}
#threadlayer .ghost{stroke:#f1f1f1;opacity:1}
#threadneedle{fill:var(--accent);opacity:.5}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}.rv.d4{transition-delay:.36s}
.lm{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.lm>span{display:block;transform:translateY(110%);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.lm.on>span{transform:none}
.lm.ld1>span{transition-delay:.1s}.lm.ld2>span{transition-delay:.2s}

/* ---------- cursor ---------- */
#cur{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;background:var(--accent);z-index:300;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s,width .3s,height .3s}
body.cur-on #cur{opacity:.9}
#cur.big{width:36px;height:36px;opacity:.18}
@media(pointer:coarse){#cur{display:none}}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .4s}
nav.scrolled{border-color:var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-links{align-items:center}
.logo{display:flex;align-items:center}.logo svg{height:46px;width:auto;display:block}
.logo sup{color:var(--accent);font-size:9px;margin-left:2px}
.nav-links{display:flex;gap:40px;font-family:var(--fh);font-size:16px;font-weight:500;color:#3a3a3a}
.nav-links a{transition:color .25s;position:relative;padding:2px 0;display:inline-flex;align-items:center}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-7px;height:1px;width:100%;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 11px);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{transform:scaleX(1);height:2px;background:var(--accent)}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fh);font-size:14px;font-weight:500;letter-spacing:.02em;padding:12px 24px;border-radius:100px;background:var(--ink);color:var(--w);border:1px solid var(--ink);transition:.3s;cursor:pointer}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair2)}
.btn.ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--w)}
.arr svg,.arr2 svg,.maparr svg{vertical-align:-1px}
.btn .arr{transition:transform .3s;display:inline-block}
.btn:hover .arr{transform:translateX(4px)}
#burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--hair2);background:var(--w);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;z-index:960;position:relative}
#burger span{display:block;width:18px;height:1.6px;background:var(--ink);transition:.35s}
#burger.x span:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
#burger.x span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}
body.menuopen nav{z-index:970}
#drawer{position:fixed;inset:0;z-index:950;background:var(--w);transform:translateY(-102%);transition:transform .55s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,7vw,60px)}
#drawer.open{transform:none}
#drawer a.dl-link{font-family:var(--fh);font-size:clamp(32px,9vw,44px);font-weight:500;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--hair);opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
#drawer.open a.dl-link{opacity:1;transform:none}
#drawer .d-cta{margin-top:34px;display:flex;gap:12px;align-items:center;opacity:0;transition:opacity .5s .25s}
#drawer.open .d-cta{opacity:1}
#langBtn2{display:none;font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.08em;border:1px solid var(--hair2);background:var(--w);border-radius:100px;height:46px;padding:0 16px;cursor:pointer;color:var(--g1);z-index:960;position:relative;transition:.3s}
#langBtn2:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:920px){.nav-links{display:none}nav .nav-in>.btn{display:none}#burger{display:flex}#langBtn2{display:inline-flex;align-items:center;margin-left:auto;margin-right:12px}}

/* ---------- images ---------- */
.imgrv{overflow:hidden;position:relative}
.imgrv img,.imgrv video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.14);transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.imgrv{clip-path:inset(6% 3% 6% 3%);transition:clip-path 1.6s cubic-bezier(.16,1,.3,1)}
.imgrv.on{clip-path:inset(0 0 0 0)}
.imgrv.on img,.imgrv.on video{transform:scale(1.02)}
.imgrv img[data-plx],.imgrv video{transition:none;transform:scale(1.05)}
.imgrv.on video{transform:scale(1.05)}
.heroimg{position:relative;z-index:2;height:min(72vh,760px);margin-top:clamp(40px,6vh,72px)}
.heroimg .cap{position:absolute;left:clamp(20px,4.5vw,56px);bottom:22px;color:#fff;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;z-index:2;opacity:.9}
.heroimg::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(transparent,rgba(0,0,0,.35))}
.band{height:min(80vh,820px);position:relative;z-index:2}
.band .cap{position:absolute;left:clamp(20px,4.5vw,56px);bottom:26px;color:#fff;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;z-index:2}
.band::after{content:"";position:absolute;inset:auto 0 0 0;height:140px;background:linear-gradient(transparent,rgba(0,0,0,.4))}
.millimgs{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(14px,2vw,24px);margin-top:64px}
.millimgs figure{position:relative}
.millimgs .imgrv{height:clamp(260px,38vw,480px)}
.millimgs figcaption{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--g2);font-weight:500;margin-top:12px}
@media(max-width:760px){.millimgs{grid-template-columns:1fr}}
/* gallery strip */
.gallery{overflow:hidden;padding:0;position:relative;z-index:2}
.gal-track{display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;animation:gal 55s linear infinite}
.gallery:hover .gal-track{animation-play-state:paused}
.gal-track .ph{width:clamp(300px,30vw,460px);height:clamp(210px,21vw,320px);flex:none;overflow:hidden}
.gal-track .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.gal-track .ph:hover img{transform:scale(1.06)}
.gallery{cursor:grab}
.gallery.dragging{cursor:grabbing}
@keyframes gal{to{transform:translateX(-50%)}}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;justify-content:center;padding-top:calc(68px + clamp(56px,9vh,110px));position:relative;z-index:2}
.hero h1{font-size:clamp(48px,7.8vw,118px);letter-spacing:-.05em;max-width:11ch}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-top:clamp(36px,6vh,64px);flex-wrap:wrap}
.hero-sub{max-width:42ch;color:var(--g1);font-size:clamp(16px,1.45vw,19px)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-meta{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g2);font-weight:500;line-height:2.4;text-align:right}
.hero-meta b{color:var(--accent);font-weight:600}
.threadstart{display:flex;align-items:center;gap:12px;margin-top:clamp(36px,7vh,72px)}
.threadstart .ring{width:26px;height:26px;border:1px solid var(--hair2);border-radius:50%;display:flex;align-items:center;justify-content:center}
.threadstart .ring i{width:5px;height:5px;background:var(--accent);border-radius:50%}
.threadstart span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--g2);font-weight:500}
@media(max-width:700px){.hero-meta{text-align:left}}


/* video expand */
.vexpand{position:absolute;right:22px;bottom:22px;z-index:3;display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:100px;border:none;cursor:pointer;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:var(--ink);font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.06em;transition:.35s;box-shadow:0 12px 30px -12px rgba(0,0,0,.35)}
.vexpand:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.vexpand .ic{font-size:14px}
.vclose{position:absolute;top:22px;right:22px;z-index:4;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.92);color:var(--ink);font-size:16px;display:none;align-items:center;justify-content:center;transition:.3s}
.vclose:hover{background:var(--accent);color:#fff;transform:rotate(90deg)}
.heroimg.isfull{z-index:600;clip-path:none!important}
body.videofull nav,body.videofull #toTop{opacity:0!important;visibility:hidden!important;transition:opacity .4s}
body.videofull .hero{z-index:900}
.heroimg.isfull .cap,.heroimg.isfull::after{display:none}
.heroimg.isfull .vexpand{display:none}
.heroimg.isfull .vclose{display:flex}

/* ---------- stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
.stat{padding:38px clamp(12px,2vw,36px) 0;border-left:1px solid var(--hair)}
.stat:first-child{border-left:none;padding-left:0}
.stat .num{font-family:var(--fh);font-size:clamp(34px,3.8vw,58px);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat .num i{font-style:normal;font-size:.26em;color:var(--accent);font-weight:600;letter-spacing:.1em;margin-left:6px;vertical-align:.6em}
.stat .lbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g2);font-weight:500;margin-top:12px}
@media(max-width:820px){.stats-grid{grid-template-columns:1fr 1fr;row-gap:36px}.stat:nth-child(3){border-left:none;padding-left:0}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;padding:18px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:clamp(90px,13vh,150px)}
.marquee-track{display:flex;white-space:nowrap;animation:mq 70s linear infinite;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--g2);font-weight:500}
.marquee-track span{padding-right:30px}
.marquee-track span::after{content:"—";color:var(--hair2);padding-left:30px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- manifesto ---------- */
.manifesto p{font-family:var(--fh);font-size:clamp(24px,3vw,42px);font-weight:450;letter-spacing:-.015em;line-height:1.3;max-width:26ch}
.manifesto p .dim{color:var(--g2)}
.manifesto .more{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:clamp(24px,4vw,64px)}
.manifesto .more p{font-size:16.5px;font-weight:400;letter-spacing:0;line-height:1.8;color:var(--g1);max-width:none}
@media(max-width:760px){.manifesto .more{grid-template-columns:1fr}}

/* ---------- capabilities ---------- */
.cap-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:56px}
.cap-head h2{font-size:clamp(34px,4.4vw,60px);margin-top:20px}
.cap-row{display:grid;grid-template-columns:64px 1.1fr 1fr 28px;gap:clamp(16px,3.5vw,64px);align-items:baseline;padding:30px 0;border-top:1px solid var(--hair);cursor:none;transition:opacity .3s}
.cap-row:last-child{border-bottom:1px solid var(--hair)}
.caps:hover .cap-row{opacity:.35}
.caps:hover .cap-row:hover{opacity:1}
.cap-row .n{font-size:10.5px;color:var(--g2);font-weight:500;letter-spacing:.1em}
.cap-row h3{font-size:clamp(19px,1.9vw,27px);font-weight:500;letter-spacing:-.03em;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.cap-row:hover h3{transform:translateX(10px)}
.cap-row p{color:var(--g1);font-size:15.5px;line-height:1.75}
.cap-row .arr2{color:var(--hair2);font-size:18px;transition:.35s;justify-self:end}
.cap-row:hover .arr2{color:var(--accent);transform:translate(4px,-4px)}
@media(max-width:820px){.cap-row{grid-template-columns:40px 1fr;cursor:default}.cap-row p{grid-column:2}.cap-row .arr2{display:none}}

/* swatch follower */
#swatch{position:fixed;top:0;left:0;width:210px;height:210px;border-radius:50%;z-index:150;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .35s,transform .35s;overflow:hidden;border:1px solid var(--hair2);background:var(--w);box-shadow:0 30px 70px -26px rgba(0,0,0,.3)}
#swatch.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#swatch img{width:100%;height:100%;object-fit:cover;display:block}
#swatch .tag{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:#fff;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media(pointer:coarse){#swatch{display:none}}

/* ---------- process ---------- */
.proc-head h2{font-size:clamp(34px,4.4vw,60px);margin-top:20px;max-width:14ch}
.proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,32px);margin-top:70px;position:relative}
.proc-grid::before{content:"";position:absolute;top:3px;left:0;right:0;height:1px;background:var(--hair)}
.pstep{position:relative;padding-top:34px}
.pstep::before{content:"";position:absolute;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--w);border:1.5px solid var(--accent);transition:background .3s}
.pstep:hover::before{background:var(--accent)}
.pstep .pn{font-size:9.5px;letter-spacing:.24em;color:var(--g2);font-weight:600}
.pstep h3{font-size:clamp(16px,1.4vw,20px);font-weight:500;letter-spacing:-.02em;margin:10px 0 8px}
.pstep p{color:var(--g1);font-size:14.5px;line-height:1.75}
@media(max-width:900px){.proc-grid{grid-template-columns:1fr;gap:34px}.proc-grid::before{display:none}}

/* ---------- certs ---------- */
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hair);border-left:1px solid var(--hair);margin-top:64px}
.cert{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:26px 22px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;transition:background .3s;cursor:default}
.cert:hover{background:var(--w2)}
.cert .name{font-size:15px;font-weight:550;letter-spacing:-.01em}
.cert:hover .name{color:var(--accent)}
.cert .desc{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--g2);font-weight:500;margin-top:14px}
@media(max-width:900px){.cert-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- quote ---------- */
.quote{text-align:center}
.quote blockquote{font-family:var(--fh);font-size:clamp(24px,3.4vw,46px);font-weight:450;letter-spacing:-.02em;line-height:1.3;max-width:26ch;margin:0 auto;color:var(--ink)}
.quote blockquote .dim{color:var(--g2)}
.quote cite{display:block;margin-top:32px;font-style:normal;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--g2);font-weight:500}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,8vw,120px)}
.contact h2{font-size:clamp(38px,5vw,72px);margin-top:20px;letter-spacing:-.045em}
.c-list{margin-top:44px}
.c-item{display:flex;justify-content:space-between;gap:18px;padding:19px 0;border-top:1px solid var(--hair);font-size:15.5px}
.c-item:last-child{border-bottom:1px solid var(--hair)}
.c-item .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--g2);font-weight:500;padding-top:3px}
.c-item .v{text-align:right;color:var(--g1)}
.c-item .v a{border-bottom:1px solid var(--hair2);transition:.3s}
.c-item .v a.maplink{border-bottom:none}
.c-item .v a.maplink .maparr{color:var(--accent);font-size:12px;transition:transform .3s;display:inline-block}
.c-item .v a.maplink:hover .maparr{transform:translate(3px,-3px)}
.c-item .v a:hover{color:var(--ink);border-color:var(--ink)}
form .field{padding:20px 0;border-bottom:1px solid var(--hair2);transition:border-color .3s}
form .field:focus-within{border-color:var(--ink)}
form label{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--g2);font-weight:600;margin-bottom:8px}
form input,form textarea,form select{width:100%;background:transparent;border:none;outline:none;color:var(--ink);font-family:var(--f);font-size:17px;resize:none}
form input::placeholder,form textarea::placeholder{color:#c8c8c8}
form select{appearance:none;color:var(--g1)}
.f-row{display:grid;grid-template-columns:1fr}
form .btn{margin-top:36px}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .contact-grid .contact{display:contents}
  .contact-grid form{order:1;margin-top:6px}
  .contact-grid .c-list{order:2;margin-top:34px}
}

#contact form .btn,#sampleModal .btn{font-size:16px;padding:18px 40px;letter-spacing:.03em}
/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair);padding:44px 0 40px;position:relative;z-index:2}
.foot{display:flex;justify-content:center;text-align:center;font-size:12px;color:var(--g2);font-weight:450;letter-spacing:.04em}
.foot .balance{justify-self:end}
@media(max-width:700px){.foot{grid-template-columns:1fr;text-align:center;row-gap:12px}.foot .soc{justify-content:center}}
.foot .soc{display:flex;gap:14px;align-items:center;justify-self:center}
.foot .soc .dot{color:var(--hair2)}
.foot .soc a{color:var(--g1);transition:color .3s}
.foot .soc a:hover{color:var(--accent)}
.foot a:hover{color:var(--ink)}
.threadend-zone{height:90px;position:relative;z-index:2}


/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden;opacity:0;transition:opacity .4s,visibility .4s}
.modal.open{visibility:visible;opacity:1}
.modal .backdrop{position:absolute;inset:0;background:rgba(12,12,12,.4);backdrop-filter:blur(6px)}
.mbox{position:relative;background:var(--w);width:min(600px,100%);max-height:90vh;overflow:auto;padding:clamp(30px,4vw,52px);transform:translateY(26px) scale(.98);transition:transform .5s cubic-bezier(.16,1,.3,1);border-radius:6px}
.modal.open .mbox{transform:none}
.mbox .mkick{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--g2);font-weight:600}
.mbox h3{font-family:var(--fh);font-size:clamp(26px,3vw,38px);font-weight:500;letter-spacing:-.02em;margin-top:12px}
.mbox h3 em{font-style:normal;color:var(--accent)}
.mbox .msub{color:var(--g1);font-size:15.5px;margin-top:10px}
.mbox .mseam{height:1px;margin:26px 0 6px;background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 13px);opacity:.6}
.mclose{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--hair2);background:var(--w);cursor:pointer;font-size:15px;color:var(--ink);transition:.3s;display:flex;align-items:center;justify-content:center}
.mclose:hover{background:var(--ink);color:var(--w);transform:rotate(90deg)}
.mbox .btn{width:100%;justify-content:center;margin-top:30px}
.msent{text-align:center;padding:40px 0;display:none}
.msent .ok{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.msent h4{font-size:22px;font-weight:500;letter-spacing:-.03em}
.msent p{color:var(--g1);font-size:14px;margin-top:8px}
/* ---------- back to top ---------- */
#toTop{position:fixed;right:26px;bottom:26px;width:52px;height:52px;border-radius:50%;background:var(--w);border:none;cursor:pointer;z-index:200;box-shadow:0 12px 34px -12px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(14px);transition:.45s}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover .arrup{transform:translateY(-3px)}
#toTop svg{position:absolute;inset:0;transform:rotate(-90deg)}
#toTop svg circle{fill:none;stroke-width:2}
#toTop svg .track{stroke:var(--hair)}
#toTop svg .prog{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:151;stroke-dashoffset:151}
#toTop .arrup{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--ink);transition:transform .35s}
@media(max-width:700px){#toTop{right:16px;bottom:16px}}


/* preloader */
#preload{position:fixed;inset:0;z-index:1000;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:transform .85s cubic-bezier(.7,0,.2,1)}
#preload.done{transform:translateY(-101%)}
#preload .plogo{width:min(270px,58vw)}
#preload .plogo svg{width:100%;height:auto;clip-path:inset(0 100% 0 0);animation:plwipe 1.05s cubic-bezier(.6,0,.2,1) .15s forwards}
@keyframes plwipe{to{clip-path:inset(0 0 0 0)}}
#preload .plbar{width:130px;height:1px;background:var(--hair2);position:relative;overflow:hidden}
#preload .plbar i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:plbarA 1.25s cubic-bezier(.6,0,.2,1) .1s forwards}
@keyframes plbarA{to{transform:scaleX(1)}}
/* odometer */
.odo-d{display:inline-block;height:1em;overflow:hidden;vertical-align:baseline}
.odo-col{display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.9s cubic-bezier(.16,1,.3,1)}
.odo-col span{display:block;height:1em;line-height:1}
/* sew CTA */
.sew{position:relative}
.sew svg.sewline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.sew svg.sewline rect{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:6 5;stroke-dashoffset:0;opacity:0;transition:opacity .3s}
.sew:hover svg.sewline rect{opacity:1;animation:sewmove 6s linear infinite}
@keyframes sewmove{to{stroke-dashoffset:-110}}
/* field seam on focus */
form .field{position:relative}
form .field::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 11px);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.6,0,.2,1)}
form .field:focus-within::after{transform:scaleX(1)}
/* scrub section */
.scrub{height:260vh;position:relative;z-index:2;background:#fff}
.scrub-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.scrub-sticky video{width:100%;height:100%;object-fit:cover;display:block}
.scrub-ui{position:absolute;left:clamp(20px,4.5vw,56px);bottom:40px;z-index:3;color:#fff}
.scrub-ui .slabel{font-size:10px;letter-spacing:.26em;font-weight:600}
.scrub-ui h2{font-size:clamp(28px,3.6vw,52px);font-weight:500;letter-spacing:-.02em;margin-top:10px}
.scrub-bar{width:min(320px,50vw);height:1px;background:rgba(255,255,255,.3);margin-top:22px;position:relative}
.scrub-bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.scrub-sticky::after{content:"";position:absolute;inset:auto 0 0 0;height:200px;background:linear-gradient(transparent,rgba(0,0,0,.45))}
.scrub-hint{position:absolute;right:clamp(20px,4.5vw,56px);bottom:40px;z-index:3;color:rgba(255,255,255,.75);font-size:10px;letter-spacing:.26em;font-weight:600}


/* stamp draw on certs */
.cert{position:relative;overflow:visible}
.stamp{position:absolute;top:14px;left:10px;width:64%;height:42%;pointer-events:none;transform:rotate(-4deg)}
.stamp ellipse{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .8s cubic-bezier(.5,0,.2,1);opacity:.9}
.cert:hover .stamp ellipse{stroke-dashoffset:0}
/* anchor wipe transition */
#wipe{position:fixed;inset:0;z-index:900;background:var(--w);transform:translateY(101%);pointer-events:none}
#wipe::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
#wipe.in{transition:transform .42s cubic-bezier(.7,0,.3,1);transform:translateY(0)}
#wipe.out{transition:transform .42s cubic-bezier(.7,0,.3,1);transform:translateY(-101%)}
/* cookie banner */
#gdpr{position:fixed;left:22px;bottom:22px;z-index:800;width:min(400px,calc(100vw - 44px));background:var(--w);border:1px solid var(--hair2);border-radius:8px;padding:22px 24px;box-shadow:0 30px 70px -30px rgba(0,0,0,.3);transform:translateY(140%);transition:transform .7s cubic-bezier(.16,1,.3,1)}
#gdpr.show{transform:none}
#gdpr p{font-size:13.5px;color:var(--g1);line-height:1.65}
#gdpr .row{display:flex;gap:10px;margin-top:16px}
#gdpr button{font-family:var(--f);font-size:11.5px;font-weight:600;padding:10px 20px;border-radius:100px;cursor:pointer;border:1px solid var(--ink);transition:.3s}
#gdpr .ok{background:var(--ink);color:var(--w)}
#gdpr .ok:hover{background:var(--accent);border-color:var(--accent)}
#gdpr .no{background:transparent;color:var(--ink);border-color:var(--hair2)}
#gdpr .no:hover{border-color:var(--ink)}
/* lang toggle */
#langBtn{font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.08em;border:1px solid var(--hair2);background:transparent;border-radius:100px;padding:8px 14px;cursor:pointer;color:var(--g1);transition:.3s}
#langBtn:hover{border-color:var(--ink);color:var(--ink)}
/* sound toggle */
.vsound{position:absolute;top:22px;right:78px;z-index:4;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.92);color:var(--ink);font-size:15px;display:none;align-items:center;justify-content:center;transition:.3s}
.vsound:hover{background:var(--accent);color:#fff}
.heroimg.isfull .vsound{display:flex}


/* timeline */

/* values row */
.val-row{display:flex;gap:clamp(18px,3vw,38px);flex-wrap:wrap;margin-top:44px}
.val{font-size:11px;letter-spacing:.24em;font-weight:600;color:var(--g1);display:flex;gap:9px;align-items:center}
.val::before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%}
/* timeline — horizontal scroll */
.tl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.tl-nav{display:flex;gap:10px;align-items:center}
.tl-nav .hint{font-size:10px;letter-spacing:.26em;color:var(--g2);font-weight:600;margin-right:12px}
.tl-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--hair2);background:var(--w);cursor:pointer;font-size:16px;color:var(--ink);transition:.3s;display:flex;align-items:center;justify-content:center}
.tl-nav button:hover{background:var(--ink);color:var(--w);border-color:var(--ink)}
.tl-nav button:disabled{opacity:.25;pointer-events:none}
.tl-wrap{position:relative;margin-top:64px}
.tl-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:90px;background:linear-gradient(90deg,transparent,var(--w));pointer-events:none}
.tl{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;padding-bottom:6px}
.tl::-webkit-scrollbar{display:none}
.tl.dragging{cursor:grabbing;scroll-snap-type:none}
.tl-item{flex:0 0 clamp(250px,23vw,320px);scroll-snap-align:start;position:relative;padding-top:38px;padding-right:clamp(24px,2.5vw,44px)}
.tl-item::after{content:"";position:absolute;top:4px;left:0;right:0;height:1px;background:repeating-linear-gradient(90deg,var(--hair2) 0 7px,transparent 7px 13px)}
.tl-item::before{z-index:1}

.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--w);border:1.5px solid var(--accent)}
.tl-item:last-child::before{background:var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(216,72,29,.45)}70%{box-shadow:0 0 0 12px rgba(216,72,29,0)}100%{box-shadow:0 0 0 0 rgba(216,72,29,0)}}
.tl-year{font-family:var(--fh);font-size:clamp(26px,2.6vw,40px);font-weight:500;letter-spacing:-.02em}
.tl-year i{font-style:normal;color:var(--accent)}
.tl-item h3{font-size:15px;font-weight:550;letter-spacing:-.01em;margin:12px 0 8px}
.tl-item p{color:var(--g1);font-size:14.5px;line-height:1.75}

/* sectors + quotes */
.sector-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.schip{font-size:12.5px;font-weight:500;padding:12px 24px;border:1px solid var(--hair2);border-radius:100px;color:var(--g1);transition:.3s;cursor:default}
.schip:hover{background:var(--ink);color:var(--w);border-color:var(--ink);transform:translateY(-2px)}
.tq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,36px);margin-top:64px}
.tq{border-top:1px solid var(--hair);padding-top:24px}
.tq .mark{color:var(--accent);font-size:34px;line-height:1;font-weight:600}
.tq p{font-size:15px;color:var(--g1);line-height:1.75;margin-top:10px}
.tq cite{display:block;font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g2);font-weight:600;margin-top:16px}
.tq-note{font-size:10.5px;color:#c2c2c2;margin-top:26px;font-style:italic}
@media(max-width:820px){.tq-grid{grid-template-columns:1fr}}
/* world network */
.world-wrap{margin-top:70px;position:relative}
#worldmap{width:100%;height:auto;display:block}
#worldmap .route{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:4 5;opacity:.75}
#worldmap .route.draw{stroke-dashoffset:400;transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1)}
#worldmap.on .route.draw{stroke-dashoffset:0}
#worldmap .city{fill:var(--ink)}
#worldmap .ring{fill:none;stroke:var(--accent);stroke-width:1;opacity:0}
#worldmap.on .ring{animation:ringp 3s infinite}
@keyframes ringp{0%{opacity:.7}80%{opacity:0}100%{opacity:0}}
#worldmap text{font-family:var(--f);font-size:12px;fill:var(--ink);font-weight:600;letter-spacing:.05em;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
#worldmap .home{fill:var(--accent)}
#worldmap .homelbl{fill:var(--ink);font-weight:600}
.drag-hint{display:block;text-align:center;font-size:10px;letter-spacing:.3em;color:var(--g2);font-weight:600;margin-top:22px;animation:hintx 2.6s ease-in-out infinite}
.world-hint{display:none;text-align:center;font-size:10px;letter-spacing:.3em;color:var(--g2);font-weight:600;margin-top:18px;animation:hintx 2.6s ease-in-out infinite}
@keyframes hintx{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
/* faq */
.faq-list{margin-top:56px;max-width:900px}
.faq-item{border-top:1px solid var(--hair)}
.faq-item:last-child{border-bottom:1px solid var(--hair)}
.faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-family:var(--fh);font-size:clamp(16px,1.6vw,20px);font-weight:500;letter-spacing:-.02em;color:var(--ink);text-align:left;transition:color .3s}
.faq-q:hover{color:var(--accent)}
.faq-q .pm{flex:none;width:30px;height:30px;border:1px solid var(--hair2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:400;transition:.4s}
.faq-item.open .pm{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.4,0,.2,1)}
.faq-a p{color:var(--g1);font-size:14.5px;line-height:1.75;padding:0 0 26px;max-width:64ch}
/* download centre */
.dl{margin-top:64px}
.dl-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,64px);margin-top:18px}
.dl-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--hair);transition:.25s}
.dl-row:hover{padding-left:8px}
.dl-row .n{font-size:15.5px;font-weight:500}
.dl-row .m{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--g2);font-weight:500}
.dl-row .ic{color:var(--accent);font-size:15px;transition:transform .3s}
.dl-row:hover .ic{transform:translateY(3px)}
@media(max-width:760px){.dl-grid{grid-template-columns:1fr}}


/* ---------- mobile refinements ---------- */
@media(max-width:700px){
  #showgrid{grid-template-columns:1fr!important}
  .section{padding:72px 0}
  .hero{padding-top:calc(68px + 34px);min-height:auto;padding-bottom:10px}
  .hero h1{font-size:clamp(46px,13vw,64px)}
  .hero-meta,.hero-aside{display:none}
  .hero-sub{font-size:16.5px;margin-top:18px}
  .hero-cta .btn{padding:15px 26px}
  .threadstart{margin-top:30px}
  .heroimg{height:52vh;margin-top:34px}
  .marquee{margin-top:60px}
  .stat{padding:26px 14px 0}
  .stat .num{font-size:34px}
  section h2,.cap-head h2,.proc-head h2,.contact h2{font-size:clamp(36px,10.5vw,46px)!important}
  .manifesto p{font-size:clamp(22px,6.4vw,28px)}
  .scrub{height:190vh}
  .band{height:56vh}
  .tl-item{flex:0 0 78vw}
  .tl-wrap{margin-top:44px}
  .world-wrap{margin-top:40px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .world-hint{display:block}
  .world-wrap::-webkit-scrollbar{display:none}
  #worldmap{min-width:820px}
  .world-wrap::after{content:none}
  .gal-track .ph{width:74vw;height:52vw}
  #toTop{width:46px;height:46px}
  .mbox{padding:28px 22px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .rv,.lm>span{opacity:1;transform:none}
}
/* ATB group section — dye/finish/print animation */
.atb-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,100px);align-items:end}
.atb-steps{display:flex;gap:clamp(18px,2.5vw,34px);margin-top:30px;flex-wrap:wrap}
.atb-step{font-size:11px;letter-spacing:.24em;font-weight:600;color:var(--g2);display:flex;align-items:center;gap:9px;transition:color .4s}
.atb-step::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hair2);transition:background .4s,box-shadow .4s}
.atb-step.on{color:var(--accent);font-weight:700}
.atb-step.on::before{background:var(--accent);animation:pulse 1.5s infinite}
.dyeband{margin-top:56px;overflow:hidden;position:relative;z-index:2;background:var(--w)}
.dyeband svg{width:100%;height:auto;display:block}
@media(max-width:900px){.atb-head{grid-template-columns:1fr}}



/* showroom lights */
.showimg img{filter:brightness(.10) saturate(.55);transition:filter 1.7s cubic-bezier(.45,0,.2,1)}
.showimg.lit img{filter:brightness(1) saturate(1)}