/* =====================================================================
   Talha.Studio — site stylesheet
   Ported from the original inline-styled design. Tokens first, then
   base, components, sections, responsive and motion.
   ===================================================================== */

/* ---- Fonts (self-hosted, latin subset only) ---- */
@font-face{font-family:'Jost';font-style:normal;font-weight:200 500;font-display:swap;src:url('/fonts/jost.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:italic;font-weight:300 400;font-display:swap;src:url('/fonts/jost-italic.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/archivo.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/jetbrains-mono.woff2') format('woff2');}

/* ---- Tokens ---- */
:root{
  --bg:#0B0B0B; --bg2:#141414; --bg3:#1c1c1c; --char:#222323;
  --line:rgba(245,243,239,0.14); --line2:rgba(245,243,239,0.06);
  --tx:#F5F3EF; --mut:#8d8d88; --dim:#7b7b76; --soft:#C8C6C2; --y:#EFBE46;
  --y-soft:rgba(239,190,70,.55); --y-faint:rgba(239,190,70,.32);
  --disp:'Jost',sans-serif; --txt:'Archivo',sans-serif; --mono:'JetBrains Mono',monospace;
  --pad-x:clamp(20px,5vw,56px); --pad-y:clamp(82px,12vh,142px);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---- Base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font-family:var(--txt);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--y);color:var(--bg)}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--y);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:300;background:var(--y);color:var(--bg);padding:10px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{top:16px}
.site{position:relative;background:var(--bg);color:var(--tx);overflow-x:hidden}

/* ---- Type utilities ---- */
.mono{font-family:var(--mono)}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 30px;font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--y);text-transform:uppercase}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--y);flex:none}
.eyebrow--center{justify-content:center}
.eyebrow--bare::before{display:none}
.h2{margin:0 0 18px;max-width:18ch;font-family:var(--disp);font-weight:200;font-size:clamp(30px,4.6vw,58px);line-height:1.1;letter-spacing:-.01em}
.h2--center{margin-left:auto;margin-right:auto;text-align:center;text-wrap:balance}
.lead{margin:0 0 clamp(44px,6vw,68px);max-width:56ch;font-size:clamp(15px,1.5vw,17px);line-height:1.68;color:var(--mut)}
.lead--center{margin-left:auto;margin-right:auto;text-align:center}
.lead--tight{margin-bottom:clamp(30px,4vw,44px)}
.label{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;color:var(--mut);text-transform:uppercase}
.label-y{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--y);text-transform:uppercase}
.dot{width:13px;height:13px;border-radius:50%;background:var(--y);display:block}
.dot--sm{width:11px;height:11px}

/* ---- Layout ---- */
.section{position:relative;padding:var(--pad-y) var(--pad-x);border-top:1px solid var(--line2);background:var(--bg);scroll-margin-top:84px}
.section--alt{background:var(--bg2)}
.section--flush{padding-left:0;padding-right:0}
.container{max-width:1180px;margin:0 auto}
.container--narrow{max-width:1000px;padding:0 var(--pad-x);text-align:center}
.container--form{max-width:760px;text-align:center;position:relative}
.bignum{position:absolute;top:clamp(24px,5vw,60px);right:clamp(8px,4vw,44px);font-family:var(--disp);font-weight:200;font-size:clamp(116px,19vw,250px);line-height:.8;color:rgba(245,243,239,.03);pointer-events:none;user-select:none;letter-spacing:-.02em}
.section--clip{overflow:hidden}
.grid-lines{display:grid;gap:1px;background:var(--line2);border:1px solid var(--line2)}
.grid-lines>*{background:var(--bg)}

/* ---- Buttons & links ---- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 26px;background:var(--y);border:1px solid var(--y);color:var(--bg);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s,gap .3s;white-space:nowrap}
.btn:hover{background:transparent;color:var(--y);gap:18px}
.btn--ghost{background:transparent;color:var(--y);border-color:var(--y-soft);padding:12px 20px;font-size:11.5px;letter-spacing:.18em}
.btn--ghost:hover{background:var(--y);color:var(--bg);border-color:var(--y)}
.btn--block{justify-content:center;width:100%}
.btn .arrow,.link-arrow .arrow{font-size:14px;line-height:1}
.link-arrow{display:inline-flex;align-items:center;gap:10px;color:var(--tx);font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:color .3s,gap .3s}
.link-arrow:hover{color:var(--y);gap:14px}
.link-arrow--y{color:var(--y);font-weight:500;letter-spacing:.14em}
.link-arrow--y:hover{gap:16px}
.link-quiet{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);transition:color .3s}
.link-quiet:hover{color:var(--y)}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);padding:7px 12px}
.tag--y{color:var(--y)}
.badge{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--bg);background:var(--y);padding:4px 9px;text-transform:uppercase}
.result-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--y);text-transform:uppercase;flex:none;margin-top:2px}

/* ---- Crop-mark frame & placeholder ---- */
.frame{position:relative;overflow:hidden;background:var(--char);border:1px solid rgba(200,198,194,.16)}
.crop{position:absolute;width:16px;height:16px;border:0 solid var(--soft);transition:border-color .4s;pointer-events:none}
.crop--tl{top:14px;left:14px;border-top-width:1px;border-left-width:1px}
.crop--tr{top:14px;right:14px;border-top-width:1px;border-right-width:1px}
.crop--bl{bottom:14px;left:14px;border-bottom-width:1px;border-left-width:1px}
.crop--br{bottom:14px;right:14px;border-bottom-width:1px;border-right-width:1px}
.crop--y{border-color:var(--y)}
.ph{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#272727 0 20px,#1d1d1d 20px 40px);opacity:.6}
.ph-text{position:relative;z-index:1;font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;color:var(--dim);text-transform:uppercase;text-align:center;padding:0 20px}
.fig{position:absolute;left:16px;bottom:14px;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--y)}
.hovframe{transition:border-color .45s ease,transform .55s var(--ease)}
.hovframe:hover{border-color:rgba(239,190,70,.5)}
.hovframe:hover .crop{border-color:var(--y)}
.zoom{transition:transform .65s var(--ease)}
.hovframe:hover .zoom{transform:scale(1.06)}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* =====================================================================
   NAV
   ===================================================================== */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--y);transform:scaleX(0);transform-origin:left;z-index:95;pointer-events:none}
.nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px clamp(20px,4vw,56px);transition:background .35s ease,padding .3s ease,border-color .35s ease;border-bottom:1px solid transparent}
.nav.is-stuck{padding-top:13px;padding-bottom:13px;background:rgba(18,18,18,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(245,243,239,.08)}
.nav__logo{display:inline-flex;align-items:center}
.nav__logo img{height:42px;width:auto}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.3vw,38px)}
.nav__links a{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);transition:color .25s;padding:6px 0}
.nav__links a:hover{color:var(--y)}
.nav__right{display:flex;align-items:center;gap:16px}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line)}
.burger span{display:block;width:18px;height:1.5px;background:var(--tx)}

/* Mobile menu (native dialog) */
.menu{border:0;padding:0;margin:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;background:#0B0B0B;color:var(--tx);inset:0}
.menu::backdrop{background:transparent}
.menu[open]{display:flex;flex-direction:column;padding:24px clamp(20px,5vw,40px);animation:fade .3s ease}
.menu__top{display:flex;align-items:center;justify-content:space-between}
.menu__top img{height:42px;width:auto}
.menu__close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);font-size:22px;line-height:1}
.menu__links{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px}
.menu__links a{font-family:var(--disp);font-weight:200;font-size:clamp(30px,9vw,48px);letter-spacing:.01em;padding:8px 0}
.menu__links a:hover{color:var(--y)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;width:100%;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--bg)}
.hero__bg{position:absolute;inset:0;z-index:0;background:var(--bg) center/cover no-repeat}
.hero__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__scrim--left{background:linear-gradient(90deg,rgba(8,8,8,.94) 0%,rgba(9,9,9,.8) 24%,rgba(10,10,10,.42) 46%,rgba(11,11,11,.08) 66%,transparent 80%)}
.hero__scrim--v{background:linear-gradient(180deg,rgba(8,8,8,.72) 0%,transparent 20%,transparent 60%,rgba(7,7,7,.78) 92%,rgba(6,6,6,.92) 100%)}
.hero__scrim--radial{background:radial-gradient(140% 130% at 56% 42%,transparent 46%,rgba(0,0,0,.4) 78%,rgba(0,0,0,.66) 100%)}
.hero__grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}
.hero__corners{position:absolute;inset:clamp(16px,2.4vw,30px);z-index:5;pointer-events:none}
.hero__corners .crop{width:17px;height:17px;border-color:var(--line)}
.hero__corners .crop--tl{top:0;left:0}.hero__corners .crop--tr{top:0;right:0}.hero__corners .crop--bl{bottom:0;left:0}.hero__corners .crop--br{bottom:0;right:0}
.hero__cover{position:absolute;inset:0;z-index:10;background:var(--bg);opacity:0;pointer-events:none}
.hero__text{position:absolute;left:0;top:0;bottom:0;z-index:15;display:flex;flex-direction:column;justify-content:center;padding:96px clamp(20px,4vw,56px) 110px;max-width:760px;pointer-events:none}
.hero__eyebrow{margin-bottom:28px;font-size:11.5px;font-weight:500}
.hero__eyebrow::before{width:30px}
.hero__title{margin:0;font-family:var(--disp);font-weight:200;font-size:clamp(40px,5.8vw,86px);line-height:1.06;letter-spacing:-.012em;text-shadow:0 2px 30px rgba(0,0,0,.55);text-wrap:balance;max-width:13ch}
.hero__title em,.hi{font-style:italic;font-weight:300;color:var(--y)}
.hero__lead{margin:30px 0 0;max-width:42ch;font-size:clamp(15px,1.45vw,17px);line-height:1.64;color:var(--mut);text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:40px;pointer-events:auto}
.hero__meta{position:absolute;bottom:34px;z-index:15;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.hero__meta--left{left:clamp(20px,4vw,56px)}
.hero__meta--right{right:clamp(20px,4vw,56px);gap:18px}
.rec{width:7px;height:7px;border-radius:50%;background:var(--y);display:inline-block;flex:none}
.tc{color:var(--tx);letter-spacing:.16em;font-variant-numeric:tabular-nums}
.hero__sep{width:26px;height:1px;background:var(--line)}
.hero__pause{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);padding:8px 0;transition:color .3s}
.hero__pause:hover{color:var(--y)}
.hero__pause[hidden]{display:none}
.hero__scroll{display:inline-flex;align-items:center;gap:11px;letter-spacing:.24em}
.chev{display:inline-flex}

/* =====================================================================
   WORK
   ===================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(34px,4vw,46px)}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);background:transparent;border:1px solid var(--line);padding:11px 18px;transition:color .25s,border-color .25s,background .25s}
.chip:hover{color:var(--tx);border-color:var(--y-soft)}
.chip[aria-pressed="true"]{color:var(--bg);background:var(--y);border-color:var(--y)}
.chip[hidden]{display:none}
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.work{position:relative;border:1px solid var(--line);background:#0d0d0d;overflow:hidden;display:flex;flex-direction:column}
.work[hidden]{display:none}
.work__link{display:flex;flex-direction:column;height:100%;color:inherit}
.work__media{position:relative;aspect-ratio:16/9;background:var(--char);overflow:hidden}
.work__media .crop{width:15px;height:15px}
.work__media .crop--tl,.work__media .crop--tr{top:12px}.work__media .crop--bl,.work__media .crop--br{bottom:12px}
.work__media .crop--tl,.work__media .crop--bl{left:12px}.work__media .crop--tr,.work__media .crop--br{right:12px}
.work__cat{position:absolute;left:14px;bottom:13px;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--y);text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.86);opacity:0;width:54px;height:54px;border-radius:50%;border:1px solid var(--y);background:rgba(11,11,11,.45);display:flex;align-items:center;justify-content:center;transition:opacity .4s ease,transform .4s ease;z-index:1}
.play::after{content:"";display:block;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--y);margin-left:3px}
.hovframe:hover .play,.work__link:focus-visible .play{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){.play{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.work__body{padding:22px 24px 26px;border-top:1px solid var(--line2)}
.work__title{margin:0 0 6px;font-family:var(--disp);font-weight:300;font-size:21px;line-height:1.2}
.work__sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase;margin-bottom:10px}
.work__result{display:flex;align-items:baseline;gap:9px;font-size:14px;line-height:1.5;color:var(--soft)}
.work__empty{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;padding:40px 0}

/* =====================================================================
   CLIENTS (logo strip + testimonials)
   ===================================================================== */
.trust{background:var(--char);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.trust__inner{max-width:1180px;margin:0 auto;padding:34px var(--pad-x) 30px;display:flex;flex-wrap:wrap;align-items:center;gap:30px 52px}
.trust__lead{flex:1 1 250px;min-width:230px;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;line-height:1.75;color:var(--soft);text-transform:uppercase;max-width:30ch}
.trust__logos{flex:3 1 560px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px 30px;align-items:center}
.trust__logo{display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .3s;filter:grayscale(1) brightness(1.4)}
.trust__logo:hover{opacity:1;filter:none}
.trust__logo img{max-height:34px;width:auto}
.trust__name{font-family:var(--disp);font-weight:300;letter-spacing:.13em;font-size:15px;color:var(--soft);text-align:center;white-space:nowrap}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);margin-top:clamp(40px,6vw,60px)}
.quote{background:var(--bg);padding:clamp(28px,3.4vw,40px)}
.quote p{margin:0 0 18px;font-family:var(--disp);font-style:italic;font-weight:300;font-size:clamp(19px,2vw,23px);line-height:1.4;color:var(--tx)}
.quote cite{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.quote cite b{font-weight:400;color:var(--y)}

/* =====================================================================
   INTRO ("Why this matters")
   ===================================================================== */
.intro__text{margin:0 auto;max-width:62ch;text-align:center;font-size:clamp(15px,1.55vw,18px);line-height:1.72;color:var(--mut)}
.intro__h2{max-width:17ch;font-size:clamp(33px,5.4vw,68px);line-height:1.08;margin-bottom:30px}
.intro__fig{margin-top:clamp(46px,6vw,74px);aspect-ratio:3/1;display:flex;align-items:center;justify-content:center}
.points{margin-top:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.point{padding:34px 30px;display:flex;flex-direction:column;gap:18px;min-height:168px}
.point__n{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--y)}
.point__t{font-family:var(--disp);font-weight:300;font-size:clamp(18px,2vw,23px);line-height:1.32}

/* =====================================================================
   CAPABILITIES
   ===================================================================== */
.caps{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.cap-col{padding:clamp(30px,3.4vw,46px)}
.cap-col__kicker{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.cap-col__h3{margin:0 0 10px;font-family:var(--disp);font-weight:300;font-size:clamp(24px,2.6vw,32px)}
.cap-col__p{margin:0 0 18px;max-width:42ch;font-size:14px;line-height:1.6;color:var(--mut)}
.cap{display:flex;gap:18px;padding:18px 0;border-top:1px solid var(--line2);cursor:default}
.cap__n{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:5px;transition:color .3s;min-width:2ch}
.cap__t{font-family:var(--disp);font-weight:300;font-size:clamp(19px,2vw,23px);transition:color .3s}
.cap__d{font-size:13.5px;line-height:1.5;color:var(--mut);margin-top:6px;transition:color .3s}
.cap:hover .cap__n,.cap:hover .cap__t{color:var(--y)}
.cap:hover .cap__d{color:var(--soft)}
.cap-col__foot{margin-top:clamp(28px,4vw,44px);padding-top:24px;border-top:1px solid var(--line2)}

/* =====================================================================
   SECTORS
   ===================================================================== */
.sectors{border-bottom:1px solid var(--line2)}
.sector{display:grid;grid-template-columns:auto 1fr auto;gap:18px 28px;align-items:center;padding:clamp(24px,3vw,34px) 0;border-top:1px solid var(--line);cursor:default}
.sector__n{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--y);white-space:nowrap}
.sector__t{margin:0 0 7px;font-family:var(--disp);font-weight:300;font-size:clamp(22px,3vw,34px);line-height:1.08;transition:color .3s}
.sector__d{margin:0;max-width:54ch;font-size:14px;line-height:1.55;color:var(--mut)}
.sector__mark{font-family:var(--mono);font-size:17px;color:var(--dim);transition:color .3s,transform .3s}
.sector:hover .sector__t,.sector:hover .sector__mark{color:var(--y)}
.sector:hover .sector__mark{transform:translateX(6px)}

/* =====================================================================
   SERVICES
   ===================================================================== */
.tiers{display:flex;flex-direction:column;gap:16px}
.tier{position:relative;border:1px solid var(--line);background:#0d0d0d;padding:clamp(28px,3.6vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:28px 48px}
.tier .crop{width:18px;height:18px}
.tier--hl{border-color:rgba(239,190,70,.42);background:var(--char);padding:clamp(28px,3.6vw,46px);gap:30px 48px}
.tier--hl .crop{width:20px;height:20px;border-color:var(--y)}
.tier__main{flex:1 1 440px}
.tier__kicker{display:flex;align-items:center;gap:14px;margin-bottom:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;color:var(--mut);text-transform:uppercase}
.tier--hl .tier__kicker{color:var(--y);margin-bottom:18px}
.tier__h3{margin:0 0 14px;font-family:var(--disp);font-weight:300;font-size:clamp(24px,2.8vw,34px);line-height:1.1}
.tier--hl .tier__h3{font-size:clamp(26px,3.2vw,40px);line-height:1.08;margin-bottom:16px}
.tier__p{margin:0 0 12px;max-width:62ch;font-size:15px;line-height:1.62;color:var(--soft)}
.tier--hl .tier__p{font-size:15.5px;margin-bottom:14px}
.tier__sells{margin:0;max-width:62ch;font-size:14px;line-height:1.6;color:var(--mut)}
.tier__sells .label-y{font-size:11px;letter-spacing:.16em}
.tier__aside{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.tier-group{margin-top:clamp(20px,3vw,34px)}
.tier-group__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.tier-group__text{font-size:14px;color:var(--mut)}
.offers{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.offer{position:relative;padding:32px 28px;min-height:190px;display:flex;flex-direction:column;gap:14px;border:1px solid transparent}
.offer .crop{width:14px;height:14px;top:12px;right:12px;border-color:var(--line)}
.offer__t{margin:0;font-family:var(--disp);font-weight:300;font-size:21px;line-height:1.2;max-width:18ch}
.offer__d{margin:0;font-size:13.5px;line-height:1.58;color:var(--mut)}

/* Pilot spotlight */
.pilot{margin-top:clamp(56px,8vw,92px);scroll-margin-top:84px}
.pilot__box{position:relative;border:1px solid var(--line);background:var(--char);display:flex;flex-wrap:wrap}
.pilot__box>.crop{width:20px;height:20px;border-color:var(--y);z-index:2}
.pilot__box>.crop--tl,.pilot__box>.crop--tr{top:16px}.pilot__box>.crop--bl,.pilot__box>.crop--br{bottom:16px}
.pilot__box>.crop--tl,.pilot__box>.crop--bl{left:16px}.pilot__box>.crop--tr,.pilot__box>.crop--br{right:16px}
.pilot__left{flex:1 1 440px;padding:clamp(32px,4vw,56px)}
.pilot__title{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.pilot__title h3{margin:0;font-family:var(--disp);font-weight:200;font-size:clamp(34px,4.4vw,56px);line-height:1}
.pilot__meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--soft);text-transform:uppercase;margin-bottom:34px}
.pilot__items-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--y);text-transform:uppercase;margin-bottom:18px}
.pilot__item{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-top:1px solid var(--line2);font-size:15px;line-height:1.55}
.pilot__item::before{content:"";width:6px;height:6px;background:var(--y);flex:none;margin-top:8px}
.pilot__right{flex:1 1 320px;background:var(--bg);padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:26px;border-left:1px solid var(--line2)}
.pilot__guarantee{border:1px solid var(--y-faint);padding:24px 22px}
.pilot__guarantee p{margin:0;font-size:14.5px;line-height:1.6;color:var(--soft)}
.pilot__price-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--mut);text-transform:uppercase;margin-bottom:8px}
.pilot__price{font-family:var(--disp);font-weight:200;font-size:clamp(30px,4vw,44px);line-height:1}
.pilot__ctas{display:flex;flex-direction:column;gap:16px;margin-top:auto;text-align:center}

/* =====================================================================
   APPROACH
   ===================================================================== */
.steps{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.step{padding:clamp(32px,3.4vw,42px) 30px;display:flex;flex-direction:column;gap:18px;min-height:214px}
.step__head{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:14px;letter-spacing:.12em;color:var(--y)}
.step__head::after{content:"";flex:1;height:1px;background:var(--line)}
.step__t{margin:0;font-family:var(--disp);font-weight:300;font-size:clamp(22px,2.4vw,28px)}
.step__d{margin:0;font-size:14px;line-height:1.6;color:var(--mut)}

/* =====================================================================
   STUDIO
   ===================================================================== */
.studio{display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,80px);align-items:center}
.studio__text{flex:1 1 420px}
.studio__h2{max-width:20ch;font-size:clamp(28px,4vw,50px);line-height:1.12;margin-bottom:28px}
.studio__p{margin:0 0 34px;max-width:58ch;font-size:15.5px;line-height:1.7;color:var(--mut);white-space:pre-line}
.founder{padding-top:26px;border-top:1px solid var(--line)}
.founder__name{font-family:var(--disp);font-weight:300;font-size:22px;margin-bottom:6px}
.founder__role{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--y);text-transform:uppercase;margin-bottom:16px}
.founder__bio{margin:0 0 22px;max-width:52ch;font-size:14px;line-height:1.6;color:var(--mut)}
.founder__contact{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--soft);line-height:1.9}
.founder__contact a:hover{color:var(--y)}
.portrait{flex:1 1 340px;position:relative;align-self:stretch;min-height:400px}
.portrait__ghost{position:absolute;top:18px;left:18px;right:-18px;bottom:-18px;border:1px solid var(--y);opacity:.4}
.portrait__frame{position:relative;height:100%;min-height:400px;display:flex;align-items:center;justify-content:center;border-color:var(--line)}
.portrait__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact{background:radial-gradient(120% 90% at 50% 0%,#16140f 0%,var(--bg) 56%);padding-top:clamp(92px,14vh,168px);padding-bottom:clamp(92px,14vh,168px)}
.contact__h2{max-width:20ch;font-size:clamp(32px,5vw,64px);line-height:1.08;margin-bottom:22px}
.contact__p{margin:0 auto;max-width:58ch;font-size:clamp(15px,1.55vw,17px);line-height:1.7;color:var(--mut)}
.form{margin-top:clamp(40px,6vw,58px);text-align:left}
.form__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px 24px}
.field{display:flex;flex-direction:column;gap:9px}
.field--full{grid-column:1/-1}
.field__label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--mut);text-transform:uppercase}
.field__label .req{color:var(--y)}
.input{width:100%;background:rgba(245,243,239,.03);border:1px solid var(--line);color:var(--tx);font-family:var(--txt);font-size:16px;padding:14px 16px;outline:none;transition:border-color .3s,background .3s;border-radius:0;-webkit-appearance:none}
.input:focus{border-color:var(--y);background:rgba(245,243,239,.05)}
.input::placeholder{color:var(--dim)}
textarea.input{min-height:120px;resize:vertical}
.field__error{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:#d98b6e}
.hp{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0}
.form__error{margin-top:20px;display:flex;align-items:flex-start;gap:11px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#d98b6e;line-height:1.5}
.form__error .bang{width:16px;height:16px;border-radius:50%;border:1px solid #c96d6e;color:#c96d6e;display:inline-flex;align-items:center;justify-content:center;font-size:10px;flex:none;margin-top:2px}
.form__foot{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.form__note{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--mut)}
.success{margin-top:clamp(40px,6vw,60px);border:1px solid rgba(239,190,70,.4);background:var(--char);padding:clamp(36px,5vw,56px);display:flex;flex-direction:column;align-items:center;gap:18px}
.success__tick{width:48px;height:48px;border-radius:50%;border:1px solid var(--y);display:flex;align-items:center;justify-content:center;color:var(--y);font-size:22px}
.success__title{font-family:var(--disp);font-weight:300;font-size:clamp(22px,3vw,30px)}
.success p{margin:0;max-width:46ch;font-size:14.5px;line-height:1.6;color:var(--mut)}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{background:linear-gradient(180deg,var(--char) 0%,var(--bg) 100%);border-top:1px solid var(--line);padding:clamp(58px,8vw,92px) var(--pad-x) 40px}
.footer__top{display:flex;flex-wrap:wrap;gap:48px 64px;justify-content:space-between}
.footer__brand{flex:1 1 280px;max-width:360px}
.footer__logo{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.footer__logo img{height:44px;width:auto}
.footer__tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;color:var(--mut);text-transform:uppercase;margin-bottom:18px}
.footer__text{margin:0;max-width:34ch;font-size:14px;line-height:1.62;color:var(--dim)}
.footer__cols{flex:2 1 520px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:36px 28px}
.footer__col-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--y);text-transform:uppercase;margin-bottom:18px}
.footer__col{display:flex;flex-direction:column;gap:4px}
.footer__col a,.footer__col span{font-size:14px;line-height:1.4;color:var(--soft);transition:color .25s;padding:6px 0;display:inline-block}
.footer__col a:hover{color:var(--y)}
.footer__bottom{margin-top:clamp(48px,7vw,72px);padding-top:26px;border-top:1px solid var(--line2);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.footer__legal{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.footer__social{display:flex;align-items:center;gap:22px}
.footer__social a{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--mut);text-transform:uppercase;transition:color .25s;padding:8px 0}
.footer__social a:hover{color:var(--y)}

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.lightbox{border:0;padding:0;background:transparent;color:var(--tx);max-width:min(1100px,94vw);width:min(1100px,94vw);max-height:94vh;margin:auto}
.lightbox::backdrop{background:rgba(6,6,6,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox[open]{display:block;animation:fade .25s ease}
.lightbox__inner{position:relative;border:1px solid var(--line);background:#0d0d0d;display:flex;flex-direction:column;max-height:94vh;overflow:auto}
.lightbox__close{position:absolute;top:12px;right:12px;z-index:3;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:rgba(11,11,11,.7);font-size:22px;line-height:1;transition:border-color .3s,color .3s}
.lightbox__close:hover{border-color:var(--y);color:var(--y)}
.lightbox__media{position:relative;aspect-ratio:16/9;background:#000;flex:none}
.lightbox__media iframe,.lightbox__media img{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox__media img{object-fit:contain}
.lightbox__media[hidden]{display:none}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border:1px solid var(--line);background:rgba(11,11,11,.7);display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;transition:border-color .3s,color .3s}
.lightbox__nav:hover{border-color:var(--y);color:var(--y)}
.lightbox__nav--prev{left:12px}.lightbox__nav--next{right:12px}
.lightbox__nav[hidden]{display:none}
.lightbox__count{position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--y)}
.lightbox__info{padding:22px 26px 26px;border-top:1px solid var(--line2)}
.lightbox__title{margin:0 0 6px;font-family:var(--disp);font-weight:300;font-size:clamp(22px,2.6vw,30px);line-height:1.15}
.lightbox__meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--y);text-transform:uppercase;margin-bottom:12px}
.lightbox__desc{margin:0;max-width:70ch;font-size:15px;line-height:1.65;color:var(--mut);white-space:pre-line}
.lightbox__desc:empty{display:none}
body.is-locked{overflow:hidden}

/* =====================================================================
   MOTION
   ===================================================================== */
@keyframes coverOut{from{opacity:1}to{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes blink{0%,48%{opacity:1}50%,100%{opacity:.12}}
@keyframes drop{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(7px);opacity:1}}
.js .hero.is-playing .hero__cover{animation:coverOut 1.25s ease-out .15s both}
.js .hero.is-playing [data-rise]{animation:rise .9s var(--ease) both;animation-delay:var(--d,0s)}
.js .hero.is-ambient .rec{animation:blink 1.7s steps(1) infinite}
.js .hero.is-ambient .chev{animation:drop 1.9s ease-in-out infinite}
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:920px){
  .nav__links,.nav__cta{display:none}
  .burger{display:inline-flex}
  .hero__text{max-width:none;padding-right:clamp(20px,5vw,40px)}
}
@media (max-width:640px){
  .hero__loc{display:none}
  .hero__meta--right{gap:12px}
  .sector{grid-template-columns:auto 1fr;gap:10px 16px}
  .sector__mark{display:none}
  .tier__aside{width:100%}
  .lightbox{width:100vw;max-width:100vw;max-height:100vh}
  .lightbox__inner{max-height:100vh}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero .hero__cover{opacity:0!important;animation:none!important}
  .js .hero [data-rise]{opacity:1!important;transform:none!important;animation:none!important}
  .js .hero .rec,.js .hero .chev{animation:none!important}
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .hovframe,.zoom,.play,.chip,.btn{transition:none!important}
}
@media print{
  .nav,.progress,.hero__cover,.hero__video,.burger,.lightbox{display:none!important}
  .js [data-reveal],.js .hero [data-rise]{opacity:1!important;transform:none!important;animation:none!important}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}

/* ---- late additions ---- */
.wordmark{font-family:var(--disp);font-weight:300;letter-spacing:.18em;font-size:18px;text-transform:uppercase;color:var(--tx)}
.quotes:empty{display:none}