:root{--bg:#0b0a0a;--ink:#efe9e2;--mute:#8d867f;--red:#c4161c;--line:rgba(239,233,226,.14);--pad:clamp(20px,5vw,72px)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 clamp(15px,1.1vw,17px)/1.65 "Manrope",system-ui,Arial,sans-serif;overflow-x:hidden}
img{display:block;max-width:100%;height:auto;background:#151313}a{color:inherit;text-decoration:none}
h1,h2{text-transform:uppercase}h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:600;line-height:.98;letter-spacing:.005em}
h1{font-size:clamp(46px,9vw,132px)}h2{font-size:clamp(34px,5.5vw,76px)}h3{font-size:clamp(24px,3vw,38px)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
header{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);background:linear-gradient(#0b0a0aee,#0b0a0a00)}
.logo{font:700 17px "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.16em}
nav{display:flex;gap:clamp(16px,3vw,40px);font-size:14px}nav a{padding:10px 2px;opacity:.8;transition:opacity .2s}nav a:hover,nav a[aria-current]{opacity:1;box-shadow:0 1px 0 var(--red)}
.menu{display:none;background:none;border:1px solid var(--line);color:var(--ink);padding:10px 16px;font:inherit}
.btn{display:inline-block;padding:16px 30px;background:var(--red);color:#fff;border:0;font:600 15px inherit;font-family:inherit;cursor:pointer;transition:transform .25s,background .25s}.btn:hover{transform:translateY(-2px);background:#e01c23}
.btn.ghost{background:none;border:1px solid var(--line)}
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:120px var(--pad) clamp(40px,8vh,90px);overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:settle 2.4s cubic-bezier(.2,.7,.2,1) both}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0a0a 5%,#0b0a0a00 70%),linear-gradient(0deg,#0b0a0a,#0b0a0a00 45%)}
.hero div{position:relative;z-index:1;max-width:900px}.hero p{max-width:460px;margin:22px 0 32px;color:#cfc8c0}
.hero h1 span{display:block;overflow:hidden}.hero h1 i{display:block;font-style:normal;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}.hero h1 span:nth-child(2) i{animation-delay:.18s}
@keyframes settle{from{transform:scale(1.12)}to{transform:none}}@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
section{padding:clamp(70px,11vw,160px) var(--pad)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:center}
.split img{aspect-ratio:4/5;width:100%;object-fit:cover}.split p{color:var(--mute);max-width:470px;margin:20px 0 30px}
.lead{font:500 clamp(30px,5vw,68px)/1.1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;max-width:1100px}.lead b{font-weight:500;color:#5c5650;transition:color .4s}.lead b.on{color:var(--ink)}
.svc{border-top:1px solid var(--line)}.svc a{display:flex;justify-content:space-between;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);transition:padding .3s,color .3s}
.svc a:hover{padding-left:18px;color:#fff}.svc span{color:var(--mute);max-width:420px;font-size:14px}
.stage{height:360vh;padding:0;position:relative}.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s,transform 1.6s}.pin img.on{opacity:1;transform:none}
.pin::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0b0a0a,#0b0a0a00 55%)}
.cap{position:absolute;z-index:2;left:var(--pad);bottom:clamp(30px,8vh,80px);right:var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.cap p{color:var(--mute);max-width:320px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(18px,2.4vw,34px)}
.card img{aspect-ratio:16/10;width:100%;object-fit:cover;transition:transform .6s}.card .im{overflow:hidden}.card:hover img{transform:scale(1.04)}
.card h3{margin:16px 0 4px}.card p{color:var(--mute);font-size:14px}.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.cta{text-align:center}.cta h2{margin-bottom:34px}
form{display:grid;gap:20px;max-width:620px}label{display:grid;gap:8px;font-size:14px;color:var(--mute)}
input,select,textarea{background:#151313;border:1px solid var(--line);color:var(--ink);padding:14px;font:inherit;border-radius:0;width:100%}
.err{color:#ff6b6b;font-size:13px;min-height:1em}.ok{display:none;padding:22px;border:1px solid var(--red)}
.pg{padding-top:150px}.pg>h1{font-size:clamp(40px,7vw,96px);margin-bottom:clamp(30px,5vw,60px)}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding:40px var(--pad);border-top:1px solid var(--line);color:var(--mute);font-size:14px}footer nav{gap:22px}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}.js .rv.in{opacity:1;transform:none}
@media(max-width:820px){.menu{display:block}nav{position:fixed;inset:0;background:#0b0a0a;flex-direction:column;justify-content:center;align-items:center;font-size:26px;transform:translateY(-100%);transition:transform .4s}nav.open{transform:none}header .menu{position:relative;z-index:30}
.split{grid-template-columns:1fr}.stage{height:auto}.pin{position:static;height:auto}.pin img{position:static;opacity:1;transform:none;aspect-ratio:4/3;object-fit:cover;margin-bottom:10px}.pin::after{display:none}.cap{position:static;flex-direction:column;align-items:flex-start;padding:20px var(--pad)}.svc a{flex-direction:column;gap:6px}.hero::after{background:linear-gradient(0deg,#0b0a0a 8%,#0b0a0a00 75%)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}.js .rv{opacity:1;transform:none}.lead b{color:var(--ink)}}
/* v2: glass header, richer buttons, more motion */
header{inset:14px var(--pad) auto;padding:10px 12px 10px 26px;border-radius:999px;background:rgba(22,19,19,.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
header.hide{transform:translateY(-140%)}
nav a{padding:9px 16px;border-radius:999px;opacity:.85;transition:background .25s,opacity .25s}nav a:hover,nav a[aria-current]{background:rgba(255,255,255,.1);box-shadow:none;opacity:1}
.btn{position:relative;overflow:hidden;border-radius:999px;padding:16px 34px;background:linear-gradient(135deg,#e8262d,#a30f15);box-shadow:0 10px 28px rgba(196,22,28,.35),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .3s,box-shadow .3s}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(196,22,28,.5),inset 0 1px 0 rgba(255,255,255,.35);background:linear-gradient(135deg,#e8262d,#a30f15)}.btn:hover::after{left:130%}.btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn.ghost:hover{background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.menu{border-radius:999px;background:rgba(255,255,255,.08);padding:10px 20px}
.card{padding:12px 12px 20px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .4s,border-color .4s}.card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2)}
.card .im{border-radius:14px}.card h3,.card p,.card .row{margin-inline:8px}
.split img{border-radius:24px}input,select,textarea{border-radius:14px}input:focus,select:focus,textarea:focus{border-color:var(--red);outline:0;box-shadow:0 0 0 3px rgba(196,22,28,.25)}
.cap{padding:22px 26px;border-radius:24px;background:rgba(18,15,15,.45);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);left:calc(var(--pad));right:calc(var(--pad))}
.mq{padding:26px 0;border-block:1px solid var(--line);overflow:hidden}.mq div{display:flex;width:max-content;animation:mq 32s linear infinite}
.mq span{font:500 clamp(22px,3vw,38px) "Barlow Condensed","Arial Narrow",Arial,sans-serif;color:#6d665f;padding-right:clamp(36px,6vw,80px);white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
.js .rv{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}.js .rv.in{opacity:1;transform:none}.js .card.rv.in{transition:transform .4s,border-color .4s}.js .card.rv.in:hover{transform:translateY(-6px)}
.grid .rv:nth-child(2){transition-delay:.1s}.grid .rv:nth-child(3){transition-delay:.2s}.grid .rv:nth-child(4){transition-delay:.3s}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header,.cap{background:rgba(18,15,15,.94)}}
.lite header,.lite .cap,.lite .btn.ghost{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,15,15,.92)}.lite .btn::after{display:none}.lite .mq div{animation-duration:48s}
@media(max-width:820px){header{inset:10px 12px auto;padding:8px 8px 8px 20px}nav{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:rgba(11,10,10,.94)}nav a{font-size:26px}.cap{margin:0 var(--pad) 10px}.card{border-radius:18px}}
@media(prefers-reduced-motion:reduce){.mq div{animation:none}header{transition:none}}
.mod{color:var(--red)!important;font-weight:600;letter-spacing:.04em;margin-top:2px}.credit{color:var(--ink);box-shadow:0 1px 0 var(--red);transition:color .2s}.credit:hover{color:var(--red)}
h1{font-size:clamp(54px,11vw,170px)}.cap h2{font-size:clamp(30px,4.4vw,64px)}.cap p{max-width:380px}.mq span{text-transform:uppercase;letter-spacing:.04em}
@media(max-width:820px){.logo{font-size:14px;letter-spacing:.12em}}

.mq span{display:flex;align-items:center;justify-content:center;width:clamp(110px,14vw,170px);height:clamp(40px,5vw,56px);margin-right:clamp(30px,5vw,70px);padding:0;font:600 14px "Barlow Condensed",sans-serif;color:#6d665f}
.mq img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.5;transition:opacity .3s}.mq span:hover img{opacity:1}

.steps{list-style:none;padding:0;display:grid;gap:26px}.steps li{display:grid;grid-template-columns:56px 1fr;gap:4px 14px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.steps b{font:600 22px "Barlow Condensed",sans-serif;color:var(--red);grid-row:span 2}.steps p{color:var(--mute);margin:0}.proc h2{margin-bottom:40px}.proc .split img{aspect-ratio:3/4;object-fit:cover;border-radius:24px}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-block:1px solid var(--line);text-align:center}.nums b{display:block;font:600 clamp(48px,8vw,110px)/1 "Barlow Condensed",sans-serif}.nums span{color:var(--mute);font-size:14px}
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2vw,24px)}.gal img{width:100%;height:100%;object-fit:cover;border-radius:22px;min-height:220px}.gal img:nth-child(1){grid-column:span 7}.gal img:nth-child(2){grid-column:span 5}.gal img:nth-child(3){grid-column:span 5}.gal img:nth-child(4){grid-column:span 7}
.rev{padding:30px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}.rev p{font:500 clamp(22px,2.2vw,28px)/1.25 "Barlow Condensed",sans-serif}.rev cite{display:block;margin-top:18px;color:var(--mute);font-size:14px;font-style:normal}.note{margin-top:18px;color:var(--mute);font-size:13px}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}.faq summary{cursor:pointer;list-style:none;font:600 clamp(22px,2.4vw,30px) "Barlow Condensed",sans-serif;display:flex;justify-content:space-between}.faq summary::after{content:"+";color:var(--red);transition:transform .3s}.faq details[open] summary::after{transform:rotate(45deg)}.faq summary::-webkit-details-marker{display:none}.faq p{color:var(--mute);max-width:620px;margin-top:12px}
@media(max-width:820px){.nums{grid-template-columns:repeat(2,1fr)}.gal img:nth-child(n){grid-column:span 12}.proc .split img{aspect-ratio:4/3}}
.mq span{text-transform:uppercase;letter-spacing:.08em;color:#8d867f;text-align:center;white-space:nowrap}

/* v3 motion */
#pb{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#a30f15,#e8262d);transform:scaleX(0);transform-origin:0 50%;z-index:50;pointer-events:none}
.js .ws .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.js .ws .w i{display:inline-block;font-style:normal;transform:translateY(112%);transition:transform .95s cubic-bezier(.2,.7,.2,1) calc(var(--i)*70ms)}
.js .ws.in .w i{transform:none}
.js .ir{clip-path:inset(0 0 100% 0);transform:scale(1.14);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1),transform 1.8s cubic-bezier(.2,.7,.2,1)}
.js .ir.in{clip-path:inset(0);transform:none}
.weak .ir{clip-path:none!important;transform:none!important;opacity:0;transition:opacity .8s}.weak .ir.in{opacity:1}
.cue{position:absolute;z-index:2;right:var(--pad);bottom:clamp(40px,8vh,90px);width:1px;height:72px;background:rgba(255,255,255,.2);overflow:hidden}
.cue::after{content:"";position:absolute;left:0;top:0;width:1px;height:28px;background:var(--red);animation:cue 1.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes cue{from{transform:translateY(-30px)}to{transform:translateY(74px)}}
.mq2{overflow:hidden;padding:clamp(28px,5vw,60px) 0;border-block:1px solid var(--line)}.mq2 div{display:flex;width:max-content;animation:mq2 40s linear infinite}
.mq2 span{font:700 clamp(56px,10vw,150px)/1 "Barlow Condensed",sans-serif;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(239,233,226,.28);padding-right:clamp(40px,6vw,90px);white-space:nowrap}
.mq2 span:nth-child(3n+2){-webkit-text-stroke:0;color:var(--red)}
@keyframes mq2{from{transform:translateX(-50%)}to{transform:none}}
.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
@media(max-width:820px){.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);scrollbar-width:none}.gal::-webkit-scrollbar{display:none}.gal img:nth-child(n){flex:0 0 84%;height:auto;aspect-ratio:4/3;scroll-snap-align:center}.cue{display:none}.mq2 div{animation-duration:55s}}
@media(prefers-reduced-motion:reduce){.js .ws .w i,.js .ir{transform:none!important;clip-path:none!important}.mq2 div,.cue::after{animation:none}#pb{display:none}}

/* v4 process + services */
.pw{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,6vw,100px);align-items:start}
.pimg{position:sticky;top:110px}.pimg img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:24px}
.pl{color:var(--mute);max-width:460px;margin:18px 0 44px}.proc h2{margin-bottom:0}
.tl{list-style:none;padding:0 0 0 0;position:relative}.tl::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl li{position:relative;display:grid;grid-template-columns:40px 1fr;gap:clamp(14px,3vw,34px);padding-bottom:clamp(30px,4vw,48px)}.tl li:last-child{padding-bottom:0}
.tl .n{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:var(--bg);border:1px solid var(--red);display:grid;place-items:center;font:600 15px "Barlow Condensed",sans-serif;color:var(--red)}
.tl h3{font-size:clamp(30px,3.6vw,46px);margin-bottom:6px}.tl p{color:var(--mute);max-width:520px}
.tl dl{display:flex;flex-wrap:wrap;gap:10px 34px;margin:18px 0 0}.tl dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6d665f}.tl dd{margin:2px 0 0;font-weight:600}
.svc a{display:none}.svc .it{border-bottom:1px solid var(--line)}
.svc .hd{width:100%;display:flex;align-items:center;gap:24px;padding:26px 0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.svc .hd h3{flex:0 0 clamp(150px,22vw,300px);transition:color .3s,transform .3s}.svc .hd:hover h3{color:#fff;transform:translateX(10px)}
.svc .hd span{flex:1;color:var(--mute);font-size:14px}
.svc .hd i{position:relative;flex:0 0 22px;height:22px}.svc .hd i::before,.svc .hd i::after{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:var(--red);transition:transform .35s}.svc .hd i::after{transform:rotate(90deg)}
.svc .it.open .hd i::after{transform:rotate(0)}.svc .it.open .hd h3{color:#fff}
.svc .bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}.svc .it.open .bd{grid-template-rows:1fr}.svc .bd>div{overflow:hidden;padding-left:clamp(0px,22vw + 24px,324px)}
.svc .bd p{color:#cfc8c0;max-width:560px;padding-top:2px}.svc .bd ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 12px}
.svc .bd li{padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:13px}.svc .bd small{display:block;color:var(--mute);padding-bottom:28px}
@media(max-width:820px){.pw{grid-template-columns:1fr}.pimg{position:static}.pimg img{aspect-ratio:16/10}.svc .hd{flex-wrap:wrap;gap:4px 12px}.svc .hd h3{flex:1}.svc .hd span{order:3;flex:1 0 100%}.svc .bd>div{padding-left:0}}
@media(prefers-reduced-motion:reduce){.svc .bd{transition:none}}
.mq span{width:clamp(120px,13vw,160px);height:clamp(36px,4.4vw,52px)}.mq img{opacity:.55}

/* v5 responsive + smooth */
html{-webkit-tap-highlight-color:transparent}body{-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed}
.btn,.hd,.menu,summary,nav a{touch-action:manipulation}
input,select,textarea{font-size:16px}
.menu{min-height:44px}footer nav a{padding:10px 4px}
.mq div.off,.mq2 div.off{animation-play-state:paused}
.fc{display:none}
.flat .stage{height:auto}.flat .pin{position:static;height:auto;overflow:visible;padding:0 var(--pad)}
.flat .pin img{position:static;opacity:1;transform:none;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;margin-bottom:12px;transition:none}
.flat .pin::after,.flat .cap{display:none}.flat .fc{display:block;margin:0 0 30px}.flat .fc b{display:block;font:600 clamp(28px,6vw,40px)/1.05 "Barlow Condensed","Arial Narrow",Arial,sans-serif;text-transform:uppercase}.flat .fc span{color:var(--mute);font-size:14px}
@media(max-width:820px){header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,15,15,.94)}}
@media(max-width:380px){.logo{font-size:12.5px;letter-spacing:.06em}.menu{padding:9px 14px}header{padding-left:16px}}
@media(hover:none){.card:hover,.js .card.rv.in:hover{transform:none}.btn:hover{transform:none}.btn:hover::after{left:-70%}.svc .hd:hover h3{transform:none}}
@media(max-width:820px){body{font-size:15px}section{padding-block:clamp(56px,14vw,90px)}.hero{padding-top:110px}.hero p{font-size:15px}.grid{gap:18px}.nums b{font-size:clamp(44px,14vw,72px)}}
@media(max-width:820px){.js .gal img.ir{clip-path:none;transform:none;opacity:1;transition:none}}

/* v6 logo tiles (original colours on white, all same size) */
.mq{padding:22px 0}
.mq .lg{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:clamp(124px,13vw,164px);height:clamp(66px,7vw,88px);margin-right:clamp(14px,2vw,26px);padding:12px 18px;background:#fff;border-radius:16px;color:#2a2523;font:600 15px "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em}
.mq .lg img{width:100%;height:100%;object-fit:contain;filter:none;opacity:1}
.mq .lg.k img{transform:scale(1.4)}
@media(max-width:820px){.mq .lg{padding:10px 14px}}
.mq .lg{overflow:hidden}.mq .lg img{background:transparent}
.mq .lg.w{padding:10px 8px}.mq .lg.w img{transform:scale(1.1)}
.mq .lg.w{padding:10px 16px}.mq .lg.w img{transform:none}

/* v7 logos only, no tiles */
.mq .lg{background:transparent;border-radius:0;overflow:visible;padding:8px 14px;margin-right:clamp(18px,3vw,44px);color:#cfc8c0}
.mq .lg.w{padding:8px 14px}
.mq .lg.inv img{filter:brightness(0) invert(1)}
.mq .lg img{opacity:.95}

/* v8 motion layer: transform + opacity only, GPU friendly, progressively enhanced */
:root{--e-out:cubic-bezier(.22,.61,.36,1);--e-soft:cubic-bezier(.2,.7,.2,1);--e-inout:cubic-bezier(.77,0,.18,1)}

/* header: scrolled state */
header{transition:transform .5s var(--e-soft),background .4s var(--e-out),box-shadow .4s var(--e-out),border-color .4s var(--e-out)}
#mvtop{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
header.sc{background:rgba(16,14,14,.74);border-color:rgba(255,255,255,.14);box-shadow:0 14px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}

/* hero entrance (staggered, runs once on load) */
@keyframes mvUp{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
.js .hero p,.js .hero .cue{opacity:0;animation:mvUp .95s var(--e-soft) both}
.js .hero p{animation-delay:.5s}
.js .hero .cue{animation-delay:.9s}
.js .hero .btn{animation:mvUp .95s var(--e-soft) backwards;animation-delay:.68s}

/* scroll reveals as animations, so hover transitions never lag behind a delay */
.js .rv{opacity:0;transition:none}
.js .rv.in{opacity:1;animation:mvRv var(--rv-d,.95s) var(--e-soft) backwards;animation-delay:calc(var(--rv-i,0)*95ms)}
@keyframes mvRv{from{opacity:0;transform:translate3d(var(--rv-x,0px),var(--rv-y,34px),0) scale(var(--rv-s,1))}to{opacity:1;transform:none}}
.js .split>div:nth-child(1).rv{--rv-x:-40px;--rv-y:0px}
.js .split>div:nth-child(2).rv{--rv-x:40px;--rv-y:0px}
.js .ir{transition-delay:calc(var(--ir-i,0)*80ms)}

/* cards: image wipe + depth on hover */
@keyframes mvImg{from{clip-path:inset(0 0 100% 0);transform:scale(1.08)}to{clip-path:inset(0);transform:none}}
.js .card.in .im img{animation:mvImg 1.15s var(--e-inout) .1s backwards}
.js .card.rv.in{transition:transform .45s var(--e-out),border-color .45s var(--e-out),box-shadow .45s var(--e-out)}
@media(hover:hover) and (pointer:fine){.js .card.rv.in:hover{box-shadow:0 26px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09)}}

/* section headings get a red rule that draws itself in */
.js main h2{position:relative}
.js main h2::after{content:"";position:absolute;left:0;bottom:-14px;width:46px;height:2px;background:linear-gradient(90deg,var(--red),rgba(196,22,28,0));transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--e-out) .22s}
.js main h2.in::after{transform:scaleX(1)}
.js main .cap h2::after{display:none}
.js .cta h2::after{left:50%;transform:translateX(-50%) scaleX(0);transform-origin:50% 50%}
.js .cta h2.in::after{transform:translateX(-50%) scaleX(1)}

/* marquees: soft edges, pause on hover, pause when the tab is hidden */
.js:not(.lite) .mq,.js:not(.lite) .mq2{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
@media(hover:hover){.mq:hover div,.mq2:hover div{animation-play-state:paused}}
.mv-idle .mq div,.mv-idle .mq2 div,.mv-idle .cue::after{animation-play-state:paused}

/* counters + testimonials */
@keyframes mvPop{from{opacity:0;transform:translate3d(0,16px,0) scale(.94)}to{opacity:1;transform:none}}
.js .nums .rv.in b{animation:mvPop .9s var(--e-out) .1s backwards}
.js .rev{transition:transform .45s var(--e-out),border-color .45s var(--e-out),background .45s var(--e-out)}
@media(hover:hover) and (pointer:fine){.js .rev:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}}

/* showcase crossfade */
.pin img{transition:opacity 1s var(--e-soft),transform 1.9s var(--e-soft)}

/* faq: animated open and close, falls back to native details */
.faq details .dx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e-soft)}
.faq details.op .dx{grid-template-rows:1fr}
.faq details .dxin{overflow:hidden}
@keyframes mvDx{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.faq details.op .dxin>p{animation:mvDx .5s var(--e-out) backwards}

/* forms + page titles */
.js form>label{opacity:0;animation:mvUp .85s var(--e-soft) both;animation-delay:calc(var(--mv-i,0)*70ms)}
.js form>.btn{animation:mvUp .85s var(--e-soft) backwards;animation-delay:calc(var(--mv-i,0)*70ms)}
.js .pg>h1{opacity:0;animation:mvUp .9s var(--e-soft) both}
@keyframes mvOk{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.ok{animation:mvOk .6s var(--e-out) backwards}

/* mobile menu links */
@media(max-width:820px){
.js nav a{opacity:0;transform:translate3d(0,16px,0);transition:opacity .5s var(--e-out),transform .5s var(--e-out),background .25s}
.js nav.open a{opacity:1;transform:none}
.js nav.open a:nth-child(1){transition-delay:.1s}
.js nav.open a:nth-child(2){transition-delay:.17s}
.js nav.open a:nth-child(3){transition-delay:.24s}
}

@media(prefers-reduced-motion:reduce){
.js .rv{opacity:1;transform:none;transition:none;animation:none}
.js .hero p,.js .hero .btn,.js .hero .cue,.js form>label,.js form>.btn,.js .pg>h1,.ok,
.js .nums .rv.in b,.js .card.in .im img,.js .faq details.op .dxin>p{opacity:1!important;transform:none!important;animation:none!important;clip-path:none!important}
.js main h2::after{transform:none!important}
.js .cta h2::after{transform:translateX(-50%)!important}
.js nav a{opacity:1!important;transform:none!important}
.faq details .dx{transition:none}
.js:not(.lite) .mq,.js:not(.lite) .mq2{-webkit-mask-image:none;mask-image:none}
}

/* v9 brand mark */
.logo{display:inline-flex;align-items:center}
.logo img{height:30px;width:auto;background:transparent}
@media(max-width:820px){.logo img{height:25px}}
@media(max-width:380px){.logo img{height:21px}}
.flogo img{height:36px;width:auto;background:transparent;opacity:.9}
.flogo{display:block;margin-bottom:14px}
footer nav a[aria-current]{background:none;box-shadow:0 1px 0 var(--red)}
@media(hover:hover){footer nav a:hover{box-shadow:0 1px 0 var(--red)}}

/* v10 hero: full frame on narrow and portrait screens (no over-crop, no upscaling) */
@media(max-width:820px),(max-width:1200px) and (orientation:portrait){
.hero{--hh:86px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding:var(--hh) 0 0}
.hero img{position:static;inset:auto;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 60%,transparent);mask-image:linear-gradient(180deg,transparent,#000 15%,#000 60%,transparent)}
.hero::after{display:none}
.hero div{flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-start;max-width:none;padding:clamp(26px,7vw,46px) var(--pad) clamp(26px,6vw,38px)}
.cue{display:none}
}

/* v11 polish: bigger tap targets + a mobile menu that cannot be tabbed into while closed */
@media(max-width:820px){
nav{visibility:hidden;transition:transform .4s,visibility 0s .4s}
nav.open{visibility:visible;transition:transform .4s,visibility 0s 0s}
.logo{padding:9px 0}
}
.faq summary{position:relative}
.faq summary::before{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}

/* horizontal scroll section */
.hs{padding:0;position:relative;--n:5;--ih:clamp(140px,36vh,440px);--ih:clamp(140px,36svh,440px)}
.hs-track{display:flex;list-style:none;padding:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hs-track::-webkit-scrollbar{display:none}
.hs-track li{flex:0 0 100%;height:100vh;height:100svh;position:relative;overflow:hidden;scroll-snap-align:start;background:var(--c);color:var(--t);display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;padding:88px 0 clamp(16px,4vh,44px);padding-bottom:clamp(16px,4svh,44px)}
.hs-track li:nth-child(1){--c:#c4161c;--t:#0b0a0a}.hs-track li:nth-child(2){--c:#efe9e2;--t:#0b0a0a}.hs-track li:nth-child(3){--c:#1b1818;--t:#efe9e2}.hs-track li:nth-child(4){--c:#8d867f;--t:#0b0a0a}.hs-track li:nth-child(5){--c:#a30f15;--t:#efe9e2}
.hs-track h2{display:flex;align-items:center;justify-content:center;width:100%;min-height:0;font-size:clamp(56px,22vw,340px);font-size:clamp(56px,min(22vw,34svh),340px);line-height:1;white-space:nowrap;color:var(--t)}
.hs-track img{width:min(88vw,calc(var(--ih)*1.78));height:var(--ih);object-fit:cover;border-radius:20px}
.hs-on{height:calc(var(--n)*100vh);height:calc(var(--n)*100svh)}
.hs-on .hs-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hs-on .hs-track{width:calc(var(--n)*100%);overflow:visible;scroll-snap-type:none}
.hs-on .hs-track li{flex:0 0 calc(100%/var(--n))}
.hs-live .hs-track{will-change:transform}.hs-live .hs-track h2{will-change:transform}
.hs-track li{contain:paint}
@media(max-height:520px){.hs-track li{padding-top:64px}}

/* scroll-driven css mode: no JS on scroll, runs off the main thread */
@keyframes hs-slide{to{transform:translate3d(calc(-100%*(var(--n) - 1)/var(--n)),0,0)}}
@keyframes hs-mid{from{transform:translate3d(var(--amp),0,0)}to{transform:translate3d(calc(var(--amp)*-1),0,0)}}
@keyframes hs-first{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--amp)*-1),0,0)}}
@keyframes hs-last{from{transform:translate3d(var(--amp),0,0)}to{transform:translate3d(0,0,0)}}
@supports (animation-timeline:view()){
.hs-css{view-timeline:--hs block;--amp:min(800px,60vw)}
.hs-css .hs-track{animation:hs-slide linear both;animation-timeline:--hs;animation-range:contain 0% contain 100%}
.hs-css .hs-track h2{animation:hs-mid linear both;animation-timeline:--hs}
.hs-css li:nth-child(1) h2{animation-name:hs-first;animation-range:contain 0% contain 25%}
.hs-css li:nth-child(2) h2{animation-range:contain 0% contain 50%}
.hs-css li:nth-child(3) h2{animation-range:contain 25% contain 75%}
.hs-css li:nth-child(4) h2{animation-range:contain 50% contain 100%}
.hs-css li:nth-child(5) h2{animation-name:hs-last;animation-range:contain 75% contain 100%}
/* phones: only the track moves (one layer), headings stay still = lightest */
.hs-phone .hs-track h2{animation:none}
}
/* swipe row (phones where the pinned version is not used) */
@media(hover:none),(max-width:820px){.hs:not(.hs-on) .hs-track li{height:clamp(420px,76vh,700px);height:clamp(420px,76svh,700px)}.hs:not(.hs-on){padding:clamp(40px,10vw,70px) 0}}