/* ==========================================================================
   Future I Digital — main stylesheet
   ========================================================================== */

/* Fonts (self-hosted, SIL OFL) */
@font-face{font-family:"Inter";src:url(../fonts/inter-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-500.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-600.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url(../fonts/inter-display-500.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Gloock";src:url(../fonts/gloock-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}

:root{
	--ink:#0B0B0C;--ink-2:#141416;--ink-3:#1C1C1F;--line:#26262A;--line-2:#3A3A3D;
	--paper:#F1F2F2;--grey-1:#CFD0D2;--grey-2:#A3A4A6;--grey-3:#7D7E80;
	--red:#E00000;--red-hi:#FF4D4D;
	--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--display:"Inter Display","Inter",system-ui,sans-serif;
	--serif:"Gloock",Georgia,"Times New Roman",serif;
	--pad:clamp(20px,5vw,72px);--max:1440px;
	--ease:cubic-bezier(.2,.7,.1,1);
}

/* Reset ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color .3s}
a:hover{color:var(--red-hi)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:500}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sr-only,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-100px;z-index:200;background:#fff;color:var(--ink);padding:12px 18px;border-radius:10px;font-weight:600}
.skip-link:focus{top:16px}
main:focus{outline:none}

/* Layout ----------------------------------------------------------------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:880px}
.section{padding-block:clamp(96px,12vw,180px)}
.section--tight{padding-block:clamp(40px,6vw,96px)}
.section__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px}

/* Type ------------------------------------------------------------------- */
.serif{font-family:var(--serif);font-style:normal;font-weight:400;letter-spacing:-.01em}
.accent{color:var(--red)}
.eyebrow{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);margin-bottom:28px}
.display{font-family:var(--display);font-weight:500;font-size:clamp(72px,14vw,220px);letter-spacing:-.055em;line-height:.88}
.h-xl{font-family:var(--display);font-size:clamp(44px,6.4vw,100px);letter-spacing:-.045em;line-height:.98}
.h-lg{font-family:var(--display);font-size:clamp(36px,4.6vw,64px);letter-spacing:-.04em;line-height:1}
.h-md{font-family:var(--display);font-size:clamp(28px,3vw,42px);letter-spacing:-.025em;line-height:1.1}
.lead{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--grey-1);max-width:640px}
.w{display:inline-block}

/* Header ----------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.55);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.site-logo{display:flex;align-items:center;min-height:44px}
.site-logo .logo{height:32px;width:auto}
.site-header__actions{display:flex;align-items:center;gap:10px}
@media (max-width:560px){.hide-xs{display:none!important}}

.menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 18px;border-radius:12px;border:0;background:#232326;color:var(--paper);font-weight:500;font-size:15px;cursor:pointer;transition:background .35s}
.menu-btn:hover{background:#2E2E32}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:5px}
.menu-btn .bars i{display:block;width:18px;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.menu-btn:hover .bars i:first-child{transform:translateX(4px)}
.menu-btn:hover .bars i:last-child{transform:translateX(-4px)}

/* Full-screen menu */
.menu-overlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;overflow-y:auto;background:rgba(8,8,9,.82);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);animation:fadeIn .45s ease both}
.menu-overlay[hidden]{display:none}
.menu-overlay__top{display:flex;align-items:center;justify-content:space-between;padding-block:18px;width:100%}
.menu-close{width:56px;height:48px;border-radius:12px;border:0;background:#232326;color:var(--paper);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.menu-close:hover{background:#2E2E32}
.menu-overlay__nav{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;padding:40px 20px;text-align:center}
.menu-list li{animation:loadIn 1.1s var(--ease) both}
.menu-list li:nth-child(1){animation-delay:.05s}.menu-list li:nth-child(2){animation-delay:.12s}.menu-list li:nth-child(3){animation-delay:.19s}.menu-list li:nth-child(4){animation-delay:.26s}.menu-list li:nth-child(5){animation-delay:.33s}.menu-list li:nth-child(6){animation-delay:.4s}
.menu-list a{display:inline-block;font-family:var(--display);font-size:clamp(52px,9vw,120px);font-weight:500;letter-spacing:-.045em;line-height:1.04}
.menu-sub{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;font-size:18px;font-weight:500;animation:loadIn 1.1s var(--ease) .4s both}
.menu-sub a{color:var(--grey-2)}
.menu-sub a:hover{color:#fff}
.menu-overlay__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding-block:24px 40px;width:100%;animation:loadIn 1.1s var(--ease) .5s both}
.menu-cta{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.menu-cta p{font-size:20px;color:var(--grey-2)}
.menu-feature{display:flex;align-items:center;gap:24px;padding:14px 14px 14px 24px;border-radius:14px;background:var(--ink-3);max-width:460px;font-weight:600;text-transform:uppercase;color:var(--grey-1)}
.menu-feature img{width:128px;height:80px;object-fit:cover;border-radius:10px}
body.menu-open{overflow:hidden}

/* Buttons — the logo's red square carries the arrow ---------------------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:8px 26px 8px 8px;border-radius:14px;border:0;font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:-.01em;cursor:pointer;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;z-index:-1;left:28px;top:50%;width:24px;height:24px;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .7s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:translate(-50%,-50%) scale(32)}
.btn-ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;transition:background .45s,color .45s}
.btn-ic svg{transform:rotate(-45deg);transition:transform .6s var(--ease)}
.btn:hover .btn-ic svg,.btn:focus-visible .btn-ic svg{transform:none}
.btn-lb{display:block;overflow:hidden;height:1.3em;line-height:1.3em}
.btn-roll{display:block;text-shadow:0 1.3em currentColor;transition:transform .55s var(--ease)}
.btn:hover .btn-roll,.btn:focus-visible .btn-roll{transform:translateY(-1.3em)}
.btn-red{background:var(--red);color:#fff}.btn-red .btn-ic{background:#fff;color:var(--red)}.btn-red::before{background:#fff}
.btn-red:hover,.btn-red:focus-visible{color:var(--ink)}.btn-red:hover .btn-ic,.btn-red:focus-visible .btn-ic{background:var(--red);color:#fff}
.btn-white{background:var(--paper);color:var(--ink)}.btn-white .btn-ic{background:var(--red);color:#fff}.btn-white::before{background:var(--red)}
.btn-white:hover,.btn-white:focus-visible{color:#fff}.btn-white:hover .btn-ic,.btn-white:focus-visible .btn-ic{background:#fff;color:var(--red)}
.btn-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}.btn-ghost .btn-ic{background:#1E1E21;color:var(--paper)}.btn-ghost::before{background:var(--paper)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--ink)}.btn-ghost:hover .btn-ic,.btn-ghost:focus-visible .btn-ic{background:var(--red);color:#fff}
.btn-sm{min-height:48px;padding:6px 20px 6px 6px;font-size:15px;border-radius:12px}.btn-sm .btn-ic{width:36px;height:36px;border-radius:9px}.btn-sm::before{left:24px}
.btn-xl{min-height:76px;padding:10px 36px 10px 10px;font-size:20px;border-radius:18px}.btn-xl .btn-ic{width:56px;height:56px;border-radius:13px}.btn-xl::before{left:38px}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn.is-loading .btn-ic svg{animation:spin 1s linear infinite}

.lnk{display:inline-flex;align-items:center;gap:10px;padding:10px 0;min-height:44px;background:linear-gradient(currentColor,currentColor) left calc(100% - 8px)/100% 1px no-repeat;transition:background-size .5s var(--ease),color .3s}
.lnk:hover{background-size:0 1px;background-position:right calc(100% - 8px)}
.lnk-ar{display:inline-flex;width:28px;height:28px;border-radius:7px;background:var(--red);color:#fff;align-items:center;justify-content:center;transition:transform .5s var(--ease);flex:0 0 auto}
.lnk:hover .lnk-ar,a:hover>.lnk-ar,a:hover .post-card__more .lnk-ar{transform:translateX(6px)}

/* Hero ------------------------------------------------------------------- */
.hero{position:relative;margin-top:-84px;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero__bg{position:absolute;inset:0;animation:bgIn 2.2s var(--ease) both}
.hero__bg img,.hero__bg video{width:100%;height:100%;object-fit:cover;object-position:62% 35%;animation:kenburns 14s ease-out both}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.82) 0%,rgba(11,11,12,.45) 45%,rgba(11,11,12,0) 75%),linear-gradient(0deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,0) 40%)}
.hero__in{position:relative;z-index:1;width:100%;padding-top:180px;padding-bottom:72px}
.hero .eyebrow{color:var(--grey-1)}
.hero__title{text-shadow:0 2px 40px rgba(11,11,12,.35)}
.hero .reel__toggle{right:var(--pad);bottom:72px}
@keyframes bgIn{from{opacity:0;filter:blur(30px);transform:scale(1.18)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}

/* Studio collage */
.collage{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;padding-block:40px 120px}
.collage figure{margin:0}
.collage .wipe{border-radius:22px;overflow:hidden}
.collage img{width:100%;height:100%;object-fit:cover}
.collage figcaption{margin-top:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3)}
.collage__a{grid-column:1/span 4;margin-top:120px!important}.collage__a .wipe{aspect-ratio:4/5}
.collage__b{grid-column:5/span 5}.collage__b .wipe{aspect-ratio:4/3}
.collage__c{grid-column:10/span 3;margin-top:260px!important}.collage__c .wipe{aspect-ratio:3/4}
.collage__line{margin-top:48px;font-family:var(--display);font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.03em}
@media (max-width:800px){.collage{grid-template-columns:repeat(2,minmax(0,1fr))}.collage__a,.collage__c{grid-column:span 1;margin-top:0!important}.collage__b{grid-column:1/-1;order:-1}}
.hero__title{font-family:var(--display);font-weight:500;font-size:clamp(60px,11vw,176px);line-height:.9;letter-spacing:-.05em;max-width:1240px}
.hero__title .serif{letter-spacing:-.015em}
.hero__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:64px}
.hero__lead{max-width:560px;font-size:20px;line-height:1.5;color:var(--grey-1)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px}
.scroll-cue{display:inline-flex;margin-top:72px;width:44px;height:44px;align-items:center;justify-content:center}

/* Reel */
.reel__frame{position:relative;aspect-ratio:16/8;border-radius:20px;overflow:hidden;background:var(--ink-2)}
.reel__frame video,.reel__frame img{width:100%;height:100%;object-fit:cover}
.reel__toggle{position:absolute;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;border:0;background:rgba(241,242,242,.14);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}

/* Clients marquee */
.clients{padding-block:88px;overflow:hidden}
.marquee{display:flex;width:max-content;animation:marq 40s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee__track{display:flex;gap:96px;padding-right:96px;font-size:26px;font-weight:500;color:#6E6F72;white-space:nowrap}

/* Statement */
.statement{border-top:1px solid #1E1E21}
.statement .wrap{padding-block:clamp(100px,14vw,220px)}
.statement__grid{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.statement__img{flex:1 1 300px;max-width:420px;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/5}
.statement__img img{width:100%;height:100%;object-fit:cover}
.statement__text{flex:999 1 560px;min-width:0;font-family:var(--display);font-size:clamp(36px,4.6vw,72px);line-height:1.08;letter-spacing:-.035em;max-width:1240px}
.statement__more{margin-top:48px}

/* Work tiles */
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:72px 32px;align-items:start}
.tiles>.tile:nth-child(odd){grid-column:1/span 7}
.tiles>.tile:nth-child(even){grid-column:8/span 5;margin-top:180px}
.tiles>.tile:nth-child(even) .tile-img{aspect-ratio:4/5}
@media (max-width:800px){.tiles>.tile:nth-child(n){grid-column:1/-1;margin-top:0}}
.tile__link{display:flex;flex-direction:column;gap:20px}
.tile-wrap{border-radius:16px;overflow:hidden;background:var(--ink-2)}
.tile-img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile-img--empty{background:var(--ink-3)}
.tile:hover .tile-img{transform:scale(1.03)}
.tile__meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tile__meta h3{font-size:26px;letter-spacing:-.015em}
.tile__meta p{color:var(--grey-2);margin-top:6px;font-size:16px}
.tile__tags{font-size:14px}

/* Services */
.services{border-top:1px solid #1E1E21}
.services__intro{margin:56px 0 88px;font-family:var(--display);font-size:clamp(26px,3.2vw,48px);line-height:1.15;letter-spacing:-.025em;max-width:1100px}
.sv-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 48px;align-items:start;padding:40px 0;border-top:1px solid var(--line);transition:background .5s}
.sv-row:hover{background:var(--ink-2)}
.sv-row__name{display:flex;gap:24px;align-items:baseline}
.sv-num{font-size:16px;color:var(--grey-3);transition:color .4s;flex:0 0 auto}
.sv-row:hover .sv-num{color:var(--red-hi)}
.sv-row h3,.sv-row h2{font-family:var(--display);font-size:clamp(28px,3vw,42px);letter-spacing:-.025em;line-height:1.1}
.sv-row__desc{color:var(--grey-1);font-size:17px}
.sv-row__more{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.sv-row__items{font-size:15px;line-height:1.7;color:var(--grey-2)}

/* Services: preview image follows the cursor */
.sv-wrap{position:relative}
.sv-row{position:static}
.hover-prev{position:absolute;z-index:5;left:0;top:0;width:340px;height:230px;border-radius:18px;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(calc(var(--hx,0px) - 50%),calc(var(--hy,0px) - 60%),0) rotate(-10deg) scale(.7);transition:opacity .35s ease,transform .55s var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hover-prev img{width:100%;height:100%;object-fit:cover}
.sv-row:hover .hover-prev{opacity:1;transform:translate3d(calc(var(--hx,0px) - 50%),calc(var(--hy,0px) - 60%),0) rotate(-4deg) scale(1)}
@media (hover:none),(max-width:900px){.hover-prev{display:none}}

/* Red duotone that blooms into colour on hover */
.duo{position:relative;overflow:hidden;isolation:isolate}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.9);transition:filter .8s var(--ease),transform 1.2s var(--ease)}
.duo::after{content:"";position:absolute;inset:0;background:var(--red);mix-blend-mode:multiply;opacity:.9;transition:opacity .8s var(--ease);pointer-events:none}
.hz-card:hover .duo img,.duo:hover img{filter:none;transform:scale(1.04)}
.hz-card:hover .duo::after,.duo:hover::after{opacity:0}
.pill-img{display:inline-block;flex:0 0 auto;height:.78em;width:1.5em;border-radius:.39em;object-fit:cover}

/* Cards */
.cards{display:grid;gap:20px;margin-top:72px}
.cards--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cards--4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{display:flex;flex-direction:column;justify-content:space-between;gap:72px;min-height:280px;padding:32px;border-radius:18px;background:var(--ink-2)}
.card__num{font-size:15px;color:var(--grey-3)}
.card h3{font-size:26px;letter-spacing:-.015em;margin-bottom:12px}
.card p{color:var(--grey-2);font-size:16px}
.cards--links .card{gap:24px;min-height:0;transition:background .4s}
.cards--links .card:hover{background:var(--ink-3);color:var(--paper)}
.cards--links .card h3{font-size:22px;margin:0}
.cards--links .card .lnk-ar{align-self:flex-start}
.cards--links{margin-top:40px}

/* Quote */
.quote{border-block:1px solid #1E1E21}
.quote figure{margin:0 auto;padding-block:clamp(100px,12vw,180px)}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(34px,4.4vw,64px);line-height:1.12}
.quote figcaption{margin-top:40px;display:flex;flex-direction:column;gap:4px}
.quote figcaption span{color:var(--grey-2)}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px 80px;padding-block:clamp(96px,12vw,180px);border-top:1px solid #1E1E21}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.015em;line-height:1.3}
.faq__ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:#1E1E21;display:inline-flex;align-items:center;justify-content:center;transition:transform .5s var(--ease),background .4s}
.faq__item[open] .faq__ic{transform:rotate(45deg);background:var(--red)}
.faq__item summary:hover .faq__ic{background:var(--red)}
.faq__a{padding:0 64px 28px 0;color:var(--grey-1);font-size:17px;line-height:1.65}
.faq__item[open] .faq__a{animation:loadIn .7s var(--ease) both}

/* Posts */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.post-card a{display:flex;flex-direction:column;gap:14px;height:100%;padding-top:24px;border-top:1px solid var(--line)}
.post-card a:hover{color:var(--paper)}
.post-card__meta{font-size:14px;color:var(--grey-2)}
.post-card h3{font-size:24px;line-height:1.3;letter-spacing:-.01em}
.post-card p{color:var(--grey-2);font-size:16px}
.post-card__more{display:inline-flex;align-items:center;gap:10px;margin-top:auto;font-size:15px;color:var(--grey-1)}
.pager{display:flex;gap:6px;margin-top:56px}
.pager .page-numbers{display:inline-flex;min-width:44px;height:44px;align-items:center;justify-content:center;border-radius:10px;background:var(--ink-2)}
.pager .current{background:var(--red);color:#fff}

/* Contact section + form ------------------------------------------------- */
.contact{background:var(--red);color:#fff;overflow:hidden}
.contact .wrap{padding-block:clamp(100px,12vw,160px) var(--pad)}
.contact__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px 64px;margin-bottom:64px}
.contact__head>div{flex:1 1 520px}
.contact .display{font-size:clamp(72px,12vw,190px);line-height:.86}
.contact__lead{margin-top:32px;max-width:460px;font-size:20px}
.contact__details{display:flex;flex-direction:column;gap:2px;font-size:18px}
.contact__details a:hover{color:#fff}
.contact__details .lnk{align-self:flex-start}

.form-card{background:var(--ink);color:var(--paper);border-radius:24px;padding:clamp(28px,5vw,72px)}
.enquiry{display:flex;flex-direction:column;gap:48px}
.enquiry[hidden],.form-thanks[hidden],.form-error[hidden]{display:none}
.mad{font-size:clamp(24px,2.8vw,40px);line-height:1.75;letter-spacing:-.02em;color:var(--grey-2)}
.mad-block{display:block;line-height:1.3}
.ml{font:inherit;color:var(--paper);letter-spacing:inherit;background:linear-gradient(var(--red-hi),var(--red-hi)) left bottom/0 2px no-repeat;border:0;border-bottom:2px solid var(--line-2);padding:0 4px 2px;margin:0 4px;width:11ch;min-width:6ch;max-width:100%;field-sizing:content;border-radius:0;transition:background-size .6s var(--ease),border-color .3s;vertical-align:baseline}
.ml-wide{width:16ch}
.ml::placeholder{color:#6B6C6E;opacity:1}
.ml:hover{border-bottom-color:#5E5F62}
.ml:focus{outline:none;background-size:100% 2px}
.ml[aria-invalid="true"]{border-bottom-color:var(--red-hi)}
.ml-area{display:block;width:100%;margin:12px 0 0;min-height:2.6em;resize:vertical;field-sizing:content}
.pills{border:0;margin:0;padding:0}
.pills legend{padding:0;margin-bottom:18px}
.pills__row{display:flex;flex-wrap:wrap;gap:10px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 20px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--grey-1);font-size:16px;font-weight:500;transition:background .35s,color .35s,box-shadow .35s,transform .35s var(--ease)}
.pill:hover span{box-shadow:inset 0 0 0 1px var(--paper);color:#fff;transform:translateY(-2px)}
.pill input:checked+span{background:var(--red);color:#fff;box-shadow:inset 0 0 0 1px var(--red)}
.pill input:focus-visible+span{outline:2px solid #fff;outline-offset:3px}
.pill__ic{display:inline-flex}
.pill__ic--check{display:none}
.pill input:checked+span .pill__ic--plus{display:none}
.pill input:checked+span .pill__ic--check{display:inline-flex;animation:pop .45s cubic-bezier(.2,.7,.1,1.4) both}
.pill input[type=radio]+span .pill__ic--check{display:none}
.pill input[type=radio]:checked+span .pill__ic--check{display:inline-flex}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:36px;border-top:1px solid var(--line)}
.form-note{font-size:15px;color:var(--grey-2);max-width:420px}
.form-note a{text-decoration:underline;text-underline-offset:3px}
.form-error{background:rgba(255,77,77,.12);color:#FFB3B3;border-radius:12px;padding:14px 18px;font-size:16px}
.form-thanks{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:24px 0;animation:loadIn 1.1s var(--ease) both}
.form-thanks:focus{outline:none}
.form-thanks .tick{width:72px;height:72px;border-radius:18px;background:var(--red);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.form-thanks h3{font-family:var(--display);font-size:clamp(40px,5vw,72px);letter-spacing:-.04em;line-height:1}
.form-thanks p{font-size:20px;color:var(--grey-1);max-width:560px}
.fi-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-fallback{font-size:22px}

/* Inner pages ------------------------------------------------------------ */
.page-hero{padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(40px,6vw,80px)}
.page-title{font-family:var(--display);font-size:clamp(52px,8.5vw,136px);letter-spacing:-.05em;line-height:.92;max-width:1200px;margin-bottom:32px}
.page-title--article{font-size:clamp(40px,5.6vw,80px);line-height:1}
.page-hero .lead{margin-bottom:36px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px;font-size:14px;color:var(--grey-2)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--grey-3)}
.crumbs a{color:var(--grey-2)}
.crumbs a:hover{color:#fff}
.article__meta{color:var(--grey-2);font-size:15px}
.article__image{margin:0 auto clamp(48px,6vw,88px)}
.article__image img{width:100%;border-radius:20px}
.page-body{padding-bottom:clamp(80px,10vw,140px)}

.service-body{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start;padding-bottom:clamp(60px,8vw,120px)}
.service-body__main{flex:999 1 560px;min-width:0}
.service-body__side{flex:1 1 320px;position:sticky;top:110px}
.included{background:var(--ink-2);border-radius:20px;padding:32px}
.included ul{margin:8px 0 28px;display:flex;flex-direction:column;gap:14px}
.included li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--grey-1)}
.included__ic{flex:0 0 auto;width:24px;height:24px;border-radius:6px;background:var(--red);color:#fff;display:inline-flex;align-items:center;justify-content:center}

.project-meta{display:flex;flex-wrap:wrap;gap:24px 56px;margin:16px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.project-meta dt{font-size:13px;color:var(--grey-3);margin-bottom:4px}
.project-meta dd{margin:0;font-size:17px}
.result{font-family:var(--display);font-size:clamp(32px,4.4vw,64px);letter-spacing:-.035em;line-height:1.1;margin-bottom:clamp(48px,6vw,96px)}
.next-project{display:flex;flex-direction:column;gap:8px;padding-block:clamp(64px,8vw,120px);border-top:1px solid var(--line);margin-top:clamp(48px,6vw,96px)}
.next-project .h-xl{display:inline-flex;align-items:center;gap:20px}

.contact-page{display:flex;flex-wrap:wrap;gap:48px;padding-bottom:clamp(80px,10vw,140px)}
.contact-page__form{flex:999 1 620px;min-width:0}
.contact-page__side{flex:1 1 260px}
.contact-page__side p,.contact-page__side address{margin-bottom:28px;font-size:17px}
.prose-inline p{margin:0}
.notfound{min-height:60vh}
.search-wrap{margin-top:40px}
.search-form{display:flex;gap:8px;max-width:520px}
.search-form label{flex:1}
.search-field{width:100%;min-height:52px;background:transparent;border:1px solid var(--line-2);border-radius:12px;padding:0 16px;color:var(--paper)}
.search-submit{min-height:52px;padding:0 22px;border-radius:12px;border:0;background:var(--paper);color:var(--ink);font-weight:600;cursor:pointer}

.author-box{display:flex;gap:20px;align-items:flex-start;margin-top:64px;margin-bottom:clamp(80px,10vw,140px);padding-top:32px;border-top:1px solid var(--line)}
.author-box__img{border-radius:14px}
.author-box__name{font-weight:600;font-size:18px;margin-bottom:6px}
.author-box p{color:var(--grey-2)}

/* Prose (block content) */
.prose{font-size:19px;line-height:1.7;color:var(--grey-1)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-family:var(--display);color:var(--paper);font-size:clamp(30px,3.2vw,44px);letter-spacing:-.03em;line-height:1.1;margin-top:2em}
.prose h3{font-family:var(--display);color:var(--paper);font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;margin-top:1.6em}
.prose .is-style-lead,.prose p.is-style-lead{font-size:clamp(22px,2.2vw,30px);line-height:1.45;color:var(--paper);letter-spacing:-.015em}
.prose a{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
.prose a:hover{color:var(--red-hi)}
.prose strong{color:var(--paper);font-weight:600}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:12px;padding-left:0}
.prose ul li{position:relative;padding-left:28px}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:3px;background:var(--red)}
.prose ol{counter-reset:li}
.prose ol li{counter-increment:li;position:relative;padding-left:52px}
.prose ol li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:.1em;font-size:14px;color:var(--grey-3);font-weight:600;letter-spacing:.04em}
.prose img{border-radius:16px}
.prose blockquote{margin:2em 0;padding:0;font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);line-height:1.25;color:var(--paper)}
.prose figure{margin-inline:0}
.prose figcaption{font-size:14px;color:var(--grey-3);margin-top:10px}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:12px 8px;text-align:left}
.prose code{font-size:.9em;background:var(--ink-2);padding:2px 6px;border-radius:6px}

/* Footer ----------------------------------------------------------------- */
.site-footer{padding-block:88px 40px}
.footer-logo{width:100%;height:auto;margin-bottom:72px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.footer-h{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3);font-weight:500;margin-bottom:16px}
.site-footer ul{display:flex;flex-direction:column;gap:8px}
.site-footer a{color:var(--grey-1)}
.site-footer a:hover{color:#fff}
.site-footer address{color:var(--grey-1);line-height:1.8}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:28px;font-size:13px;color:#8A8B8D}
.footer-legal p{max-width:900px}

/* Hidden scrollbar (desktop) — the section navigator takes its place ---- */
@media (pointer:fine) and (min-width:901px){
	html{scrollbar-width:none;-ms-overflow-style:none}
	html::-webkit-scrollbar{display:none;width:0;height:0}
}

/* Section navigator */
.secnav{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45));animation:fadeIn 1s ease 1.2s both}
.secnav button{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;transition:height .6s var(--ease)}
.secnav .dot{display:block;width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.55);transition:height .6s var(--ease),background .4s}
.secnav button[aria-current="true"]{height:52px}
.secnav button[aria-current="true"] .dot{height:40px;background:#fff}
.secnav button:hover .dot{background:#fff}
.secnav .lb{position:absolute;right:30px;top:50%;transform:translate(8px,-50%);opacity:0;white-space:nowrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;pointer-events:none;transition:opacity .35s,transform .45s var(--ease)}
.secnav button:hover .lb,.secnav button:focus-visible .lb{opacity:1;transform:translate(0,-50%)}
.secnav button:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}
.menu-open .secnav{display:none}
@media (max-width:900px),(pointer:coarse){.secnav{display:none}}

/* Kinetic band */
.band{overflow:hidden;padding:40px 0 120px;border-top:1px solid #1E1E21}
.band__row{display:flex;align-items:center;gap:56px;width:max-content;white-space:nowrap;font-size:clamp(64px,9vw,150px);line-height:1.05;will-change:transform}
.band__row--l{font-family:var(--display);font-weight:500;letter-spacing:-.05em}
.band__row--r{color:transparent;-webkit-text-stroke:1px #5E5F62;letter-spacing:-.02em}
.sq{display:inline-block;flex:0 0 auto;width:.42em;height:.42em;border-radius:.1em;background:var(--red)}

/* Pinned, sideways-scrolling section */
.hz{position:relative;height:calc(100vh + (var(--cards,6) * 400px));border-top:1px solid #1E1E21}
.hz__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:48px}
.hz__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;width:100%}
.hz__side{display:flex;flex-direction:column;align-items:flex-end;gap:14px;max-width:420px}
.hz__side p{text-align:right;color:var(--grey-1)}
.hz__bar{width:220px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.hz__bar i{display:block;width:100%;height:100%;background:var(--red);transform-origin:left;transform:scaleX(var(--p,0))}
.hz__scroller{padding-left:var(--pad)}
.hz__track{display:flex;gap:24px;width:max-content;padding-right:var(--pad);will-change:transform}
.hz-card{flex:0 0 auto;width:min(520px,82vw);height:min(560px,62vh);min-height:440px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:32px;border-radius:22px;background:var(--ink-2);transition:background .5s,transform .6s var(--ease)}
.hz-card:hover{background:#1A1A1D;color:var(--paper);transform:translateY(-6px)}
.hz-card__top{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--grey-3)}
.hz-card__tag{padding:6px 12px;border-radius:8px;background:#1E1E21;color:var(--grey-1);font-size:13px}
.hz-card__vis{display:block;height:230px;margin:0 -12px;border-radius:14px}

.hz-vis{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5}
.hz-vis .hot{stroke:var(--red)}
.hz-vis .fill{fill:var(--red);stroke:var(--red)}
.hz-vis .bg{fill:var(--ink-2)}
.hz-vis .white{stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hz-vis .type{font-family:var(--serif);font-size:110px;fill:currentColor;stroke:none}
.hz-card__body{display:flex;flex-direction:column;gap:12px}
.hz-card__title{font-family:var(--display);font-size:34px;letter-spacing:-.03em;line-height:1.05}
.hz-card__desc{font-size:16px;color:var(--grey-1)}
.hz-card__items{font-size:14px;color:#8A8B8D}
.hz-card--cta{background:var(--red);color:#fff;width:min(420px,78vw)}
.hz-card--cta:hover{background:#C80000;color:#fff}
.hz-card__big{font-family:var(--display);font-size:52px;letter-spacing:-.04em;line-height:.95}
.hz-card--cta .btn-ic{width:56px;height:56px;border-radius:13px;background:#fff;color:var(--red)}
@media (max-width:900px),(prefers-reduced-motion:reduce){
	.hz{height:auto;padding-block:96px}
	.hz__pin{position:static;height:auto}
	.hz__scroller{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
	.hz__scroller::-webkit-scrollbar{display:none}
	.hz__track{transform:none!important}
	.hz-card{scroll-snap-align:start}
	.hz__bar{display:none}
}

/* Motion ----------------------------------------------------------------- */
@keyframes loadIn{from{opacity:0;filter:blur(24px);transform:translateY(40px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes inBlur{from{opacity:0;filter:blur(8px);transform:translateY(48px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes titleIn{from{opacity:0;filter:blur(14px);transform:scale(1.06)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes wordIn{from{opacity:.12;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@keyframes heroOut{to{opacity:0;filter:blur(10px);transform:translateY(-80px) scale(.97)}}
@keyframes grow{from{transform:scale(.88);filter:blur(6px);opacity:.4}to{transform:none;filter:blur(0);opacity:1}}
@keyframes tileIn{from{clip-path:inset(14% 6% 0 6% round 16px);filter:blur(6px)}to{clip-path:inset(0 0 0 0 round 16px);filter:blur(0)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes wipeUp{from{clip-path:inset(100% 0 0 0 round 22px)}to{clip-path:inset(0 0 0 0 round 22px)}}
@keyframes parA{from{transform:translateY(120px)}to{transform:translateY(-120px)}}
@keyframes parB{from{transform:translateY(-60px)}to{transform:translateY(60px)}}
@keyframes parC{from{transform:translateY(200px)}to{transform:translateY(-200px)}}
.rv,.ttl,.grow,.tile-wrap,.wipe,.par-a,.par-b,.par-c,.hz__track,.band__row{will-change:transform,opacity}
html.has-smooth{scroll-behavior:auto}
@keyframes pop{from{transform:scale(0) rotate(-30deg)}to{transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

.ld{animation:loadIn 1.3s var(--ease) both}

/* Scroll-driven (Chrome, Edge, Safari 26+) */
@supports (animation-timeline: view()){
	.rv{animation:inBlur linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
	.ttl{animation:titleIn linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
	.hero-out{animation:heroOut linear both;animation-timeline:view();animation-range:exit 10% exit 100%}
	.grow{animation:grow linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
	.tile-wrap{animation:tileIn linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
	.wipe{animation:wipeUp linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
	.par-a{animation:parA linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
	.par-b{animation:parB linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
	.par-c{animation:parC linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
	.scrub{view-timeline-name:--scrub}
	.scrub .w{animation:wordIn linear both;animation-timeline:--scrub;animation-range:cover var(--s) cover var(--e)}
}
/* Fallback (Firefox etc.): IntersectionObserver adds .is-in */
@supports not (animation-timeline: view()){
	.js .rv,.js .ttl,.js .grow,.js .tile-wrap{opacity:0;filter:blur(8px);transform:translateY(40px);transition:opacity 1s var(--ease),filter 1s var(--ease),transform 1.1s var(--ease)}
	.js .ttl{transform:scale(1.08)}
	.js .is-in{opacity:1!important;filter:none!important;transform:none!important}
	.js .scrub .w{opacity:.15;filter:blur(10px);transition:opacity .8s var(--ease),filter .8s var(--ease)}
	.js .scrub.is-in .w{opacity:1;filter:none}
}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
	.js .rv,.js .ttl,.js .grow,.js .tile-wrap,.js .scrub .w{opacity:1!important;filter:none!important;transform:none!important}
}

@media (max-width:700px){
	.faq__a{padding-right:0}
	.btn-xl{min-height:64px;font-size:18px}
	.btn-xl .btn-ic{width:48px;height:48px}
}