/* =========================================================
   KRISHNAVI INDIA — public landing
   ========================================================= */

:root{
  /* Unique Krishnavi system — warm copper, not Instagram #FB3B0F */
  --orange:#E4572E;
  --orange-deep:#B83A1A;
  --cream:#EEEEE8;
  --cream-2:#E2E0D8;
  --ink:#0C1219;
  --ink-2:#1A222C;
  --white:#ffffff;
  --sky-top:#4A9BC7;
  --sky-bot:#B5D9EC;
  --yellow:#D4A017;
  --line:rgba(12,18,25,.14);
  --easing:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,90px);
  --maxw:1680px;
  --font:"Inter",system-ui,sans-serif;
  --mono:"Space Mono",monospace;
  --accent:#E4572E;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none){body{cursor:auto}}
a{color:inherit;text-decoration:none;cursor:none}
img{max-width:100%;display:block}
section{position:relative}
em{font-style:normal;color:var(--orange)}

/* ---------- Brand mark fills ---------- */
.brand__mark path,.ctr__logo path,.ctr__brand path,.foot__mark path,.testimonial__mark path{fill:currentColor}

/* ---------- Labels ---------- */
.label{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;font-weight:700;
}
.label i{color:var(--orange);font-style:normal}
.label--light{color:var(--white)}
.label--light i{color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  padding:.85em 1.4em;border-radius:40px;line-height:1;
  transition:transform .5s var(--easing),background .4s,color .4s;
  white-space:nowrap;
}
.btn i{font-style:normal;transition:transform .45s var(--easing)}
.btn:hover{transform:translateY(-2px)}
.btn:hover i{transform:translateX(3px)}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--orange{background:var(--orange);color:var(--white)}
.btn--lg{font-size:14px;padding:1em 1.7em}

/* =========================================================
   CUSTOM CURSOR — layered, physical, theme-aware
   center dot (fast, with slight delay) + trailing ring (slow)
   ========================================================= */
.cursor,.cursor-follow{
  position:fixed;top:0;left:0;border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);will-change:transform;
}
.cursor{
  width:7px;height:7px;background:var(--ink);
  transition:width .4s var(--easing),height .4s var(--easing),background .4s var(--easing);
}
.cursor-follow{
  width:46px;height:46px;border:1.5px solid rgba(20,19,18,.22);
  transition:width .45s var(--easing),height .45s var(--easing),background .45s,border-color .45s,opacity .45s;
}
/* proximity to an interactive object (≈ +20%) */
.cursor-follow.is-near{width:55px;height:55px;border-color:rgba(20,19,18,.34)}
/* generic links / buttons */
.cursor-follow.is-hover{width:66px;height:66px;background:rgba(20,19,18,.04);border-color:rgba(20,19,18,.30)}
/* featured-projects "VIEW" */
.cursor-follow.is-view{width:92px;height:92px;background:var(--orange);border-color:transparent}
.cursor-follow.is-view::after{content:"VIEW";position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.12em;color:#fff;font-family:var(--mono)}
/* engaged with the hero container (last so it wins over near/hover) */
.cursor.is-hot{width:11px;height:11px;background:var(--orange)}
.cursor-follow.is-hot{width:80px;height:80px;border-color:rgba(251,59,15,.55);background:rgba(251,59,15,.06)}
/* on dark backgrounds, flip the cursor so it never disappears */
body.cur-light .cursor{background:#fff}
body.cur-light .cursor-follow{border-color:rgba(255,255,255,.40)}
body.cur-light .cursor-follow.is-near{border-color:rgba(255,255,255,.60)}
body.cur-light .cursor-follow.is-hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
@media (hover:none){.cursor,.cursor-follow{display:none}}

/* =========================================================
   PAGE WIPE / TRANSITION
   ========================================================= */
.wipe{position:fixed;inset:0;z-index:9000;display:flex;pointer-events:none}
.wipe__panel{flex:1;background:var(--ink);transform:scaleY(1);transform-origin:top}
.wipe__panel:nth-child(2){background:#15202c}
.wipe__panel:nth-child(3){background:var(--ink)}
.wipe__panel:nth-child(4){background:#15202c}
.wipe__logo{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;
}
.wipe__logo .mark{width:64px;height:40px;color:var(--accent)}
.wipe__logo span{font-size:26px;font-weight:800;letter-spacing:-.02em}
.wipe__logo span i{color:var(--accent);font-style:normal}
.wipe__logo small{font-family:var(--mono);font-size:10px;letter-spacing:.35em;text-transform:uppercase;opacity:.8}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);
  padding:18px var(--pad);border-radius:0;
  transition:color .5s var(--easing),background .4s var(--easing),padding .45s var(--easing),
             box-shadow .45s var(--easing),width .55s var(--easing),top .45s var(--easing),border-radius .45s var(--easing);
  color:var(--ink);
}
.nav.is-light{color:var(--white)}
/* scroll past the hero → collapses inward into a centered, rounded floating pill */
.nav.is-short{
  top:14px;width:min(94vw,880px);
  padding:9px 9px 9px 24px;border-radius:46px;
  background:rgba(243,239,232,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 34px -10px rgba(20,19,18,.22),0 1px 0 rgba(255,255,255,.5) inset;
}
.nav.is-short.is-light{background:rgba(28,26,24,.42)}
.nav.is-short .brand{font-size:16px}
.nav.is-short .brand__mark{width:28px;height:18px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.02em;transition:font-size .4s var(--easing)}
.brand__mark{width:34px;height:22px;transition:width .4s var(--easing),height .4s var(--easing)}
.brand__name i{color:var(--orange);font-style:normal}
.nav.is-light .brand__name i{color:var(--white)}
.nav__links{display:flex;gap:30px;font-size:13px;font-weight:500}
.nav__links a{position:relative;opacity:.78;transition:opacity .3s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:currentColor;transition:width .4s var(--easing)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{width:100%}
.nav__right{display:flex;align-items:center;gap:18px}
.nav__burger{background:none;border:none;display:flex;flex-direction:column;gap:5px;color:inherit}
.nav__burger span{width:24px;height:2px;background:currentColor;transition:transform .4s,opacity .3s}
.nav.is-light .btn--dark{background:#fff;color:var(--ink)}
@media(max-width:860px){
  .nav__links{
    display:none;position:fixed;inset:0 auto auto 0;top:72px;left:var(--pad);right:var(--pad);
    flex-direction:column;gap:18px;padding:22px 24px;background:var(--cream);border-radius:14px;
    box-shadow:0 18px 50px rgba(14,26,36,.18);z-index:1001;
  }
  .nav__links.is-open{display:flex}
}

/* =========================================================
   SHIPPING CONTAINERS (pure CSS)
   ========================================================= */
.ctr{position:absolute;transform-style:preserve-3d}
.ctr__face{position:relative;overflow:hidden;border-radius:3px}
.ctr__ribs{
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
     rgba(0,0,0,.16) 0 2px, rgba(255,255,255,.10) 2px 5px,
     rgba(0,0,0,.05) 5px 14px, rgba(255,255,255,.08) 14px 17px,
     rgba(0,0,0,.16) 17px 19px);
  mix-blend-mode:multiply;opacity:.9;
}
.ctr__face::before{ /* top & bottom rails */
  content:"";position:absolute;left:0;right:0;top:0;height:9%;
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.12));
}
.ctr__face::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:9%;
  background:linear-gradient(0deg,rgba(0,0,0,.28),rgba(0,0,0,.04));
}
.ctr--red{background:linear-gradient(155deg,#F06A3D,#C9441A)}
.ctr--yellow{background:linear-gradient(155deg,#E0B03A,#C48A12)}
.ctr--white{background:linear-gradient(155deg,#fff,#E6E3DD)}
.ctr--white .ctr__ribs{background:repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 2px,rgba(255,255,255,.5) 2px 5px,rgba(0,0,0,.03) 5px 14px,rgba(255,255,255,.4) 14px 17px,rgba(0,0,0,.10) 17px 19px)}

/* hero containers */
.ctr--hero{width:min(60vw,760px);height:min(58vh,520px);right:-4%;bottom:-2%;z-index:3}
.ctr--hero .ctr__face--main{width:100%;height:100%}
.ctr--hero .ctr__face--side{position:absolute;right:-1px;top:0;width:0;height:100%}
.ctr--hero-back{width:min(40vw,440px);height:min(40vh,360px);left:8%;bottom:6%;z-index:2;opacity:.96}
.ctr--hero-back .ctr__face{width:100%;height:100%}

.ctr__logo{position:absolute;right:6%;bottom:14%;width:84px;color:#fff;opacity:.92}
.ctr__logo svg{width:100%}
.ctr__code{position:absolute;right:6%;top:9%;display:flex;gap:10px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.8)}

/* mission / precision big container */
.ctr--mission{position:relative;width:min(58vw,620px);height:min(40vw,330px)}
.ctr--mission .ctr__face--main{width:100%;height:100%}
.ctr--mission .ctr__face--side{position:absolute;right:0;top:0;width:0;height:100%}
.ctr__fine{position:absolute;left:5%;top:11%;max-width:46%;font-size:8px;line-height:1.4;font-family:var(--mono);color:rgba(225,44,6,.72);letter-spacing:.01em}
.ctr__fine--light{color:rgba(255,255,255,.6)}
.ctr__bigmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;color:#fff}
.ctr__bigmark--red{color:var(--orange)}
.ctr__tag{position:absolute;left:5%;bottom:10%;font-size:clamp(15px,2vw,24px);font-weight:700;line-height:1.02;color:#fff;letter-spacing:-.01em}
.ctr__tag--red{color:var(--orange)}
.ctr__brand{position:absolute;right:5%;bottom:11%;display:flex;align-items:center;gap:5px;color:#fff;font-weight:800;font-size:14px}
.ctr__brand svg{width:24px}
.ctr__brand i{color:var(--ink)}

/* =========================================================
   1. HERO
   ========================================================= */
.hero{height:100vh;min-height:640px;overflow:hidden;background:linear-gradient(180deg,var(--sky-top),var(--sky-bot) 60%,#DDEAF0)}
.hero__sky{position:absolute;inset:0;overflow:hidden}
.cloud{position:absolute;background:#fff;border-radius:50%;filter:blur(8px);opacity:.85}
.cloud--1{width:280px;height:90px;top:16%;left:10%;box-shadow:120px 14px 0 -8px #fff,230px -6px 0 -14px #fff}
.cloud--2{width:200px;height:64px;top:30%;right:14%;box-shadow:90px 10px 0 -6px #fff}
.cloud--3{width:160px;height:52px;top:8%;left:46%;opacity:.6}
.hero__wordmark{
  position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);
  width:min(94vw,1200px);text-align:center;
  font-size:min(15vw,220px);font-weight:900;letter-spacing:-.04em;line-height:.82;
  color:#fff;opacity:.92;z-index:1;user-select:none;
  text-shadow:0 20px 60px rgba(0,0,0,.08);
}
.hero__squiggle{position:absolute;left:4%;bottom:8%;width:min(22vw,230px);color:rgba(255,255,255,.9);z-index:4}
.hero__squiggle path{stroke-dasharray:900;stroke-dashoffset:900}

.hero__overlay{position:absolute;inset:0;z-index:5;padding:0 var(--pad);display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
.hero__top{position:absolute;left:var(--pad);top:33%;display:flex;flex-direction:column;gap:14px;color:#fff;pointer-events:auto}
.hero__loc{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.hero__nav{display:flex;flex-direction:column;gap:6px;font-size:13px;opacity:.9}
.hero__cta{
  pointer-events:auto;align-self:flex-start;margin-bottom:14px;
  display:inline-flex;align-items:center;gap:.5em;
  background:rgba(255,255,255,.9);color:var(--ink);
  padding:.7em 1.1em;border-radius:6px;font-size:12px;font-weight:600;
  backdrop-filter:blur(4px);transition:transform .4s var(--easing)
}
.hero__cta:hover{transform:translateY(-2px)}
.hero__cta i{font-style:normal}
.hero__headline{
  font-size:clamp(40px,8vw,116px);font-weight:800;line-height:.92;
  letter-spacing:-.03em;color:#fff;margin-bottom:7vh;max-width:14ch;
}
.hero__headline .line{display:block;overflow:hidden}
.hero__headline .line span{display:block;will-change:transform}

/* =========================================================
   2. MISSION (pinned: text-up → zoom → popups → image reveal)
   ========================================================= */
.mission{background:var(--cream);height:360vh;position:relative}
.mission__sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.mission__head{position:absolute;top:13vh;left:0;width:100%;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:30px;align-items:start;z-index:6;will-change:transform}
.mission__sub{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.55;line-height:1.5}
.mission__lead{font-size:clamp(15px,1.4vw,19px);line-height:1.5;max-width:40ch;color:var(--ink-2)}
.mstage{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:3;will-change:transform}
.ctr--mission{z-index:2;transform-origin:center center}
/* the orange WebGL cliffhanger sits inside .mstage and is sized like the hero
   stage; the crane pulley + sling are baked into the 3-D model */
.heroStage--mission{position:relative;left:auto;top:auto;transform:none;width:min(80vw,980px);height:min(64vh,580px);transform-origin:center center}
.heroStage--mission .heroStage__shadow{display:none}

.mstage__reveal{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:min(88vw,1120px);height:min(70vh,680px);clip-path:inset(48% 48% 48% 48% round 24px);opacity:0;z-index:5;pointer-events:none;will-change:clip-path,transform,opacity;overflow:hidden;border-radius:18px;background:#6fb3d8}
.mstage__reveal .shipStage,.mstage__reveal .photo{width:100%;height:100%;min-height:100%}
.shipStage.is-webgl .shipStage__fallback{display:none!important}

/* WebGL ship stages */
.shipStage{position:relative;width:100%;height:100%;overflow:hidden}
.shipStage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.shipStage__fallback{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#6fb3d8 0%,#a9d4ea 55%,#1d5c7e 56%,#0d3a52 100%);
}
.shipStage__fallback--dusk{
  background:linear-gradient(180deg,#0c1c2c 0%,#27506b 45%,#c96b3a 72%,#0d2f43 73%,#061820 100%);
}
.shipStage--reveal{min-height:100%}
.shipStage--stack{position:absolute;inset:0}
.shipStage .photo__tag{z-index:2}

.callout{position:absolute;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;opacity:0;z-index:6;white-space:nowrap}
.callout b{font-weight:600}
.callout__dot{width:9px;height:9px;border:1.5px solid var(--ink);background:var(--cream)}
.callout--tl{left:7%;top:30%}
.callout--tr{right:7%;top:26%}
.callout--bl{left:9%;bottom:26%}
.callout--br{right:11%;bottom:18%}

/* photo placeholders (swap with real images) */
.photo{position:relative;overflow:hidden;border-radius:4px;background:#222}
.photo__tag{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#fff;background:rgba(0,0,0,.35);padding:5px 9px;border-radius:3px;text-transform:uppercase}
.photo--worker,.photo--worker-wide{
  background:
    linear-gradient(115deg,rgba(0,0,0,.5),rgba(0,0,0,0) 60%),
    radial-gradient(60% 80% at 50% 100%,#F0A21B 0,#C97A10 45%,#2c2a28 100%),
    repeating-linear-gradient(90deg,#3a3733 0 60px,#322f2b 60px 120px);
}
.photo--worker::after,.photo--worker-wide::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:26%;height:78%;border-radius:46% 46% 8% 8%/60% 60% 8% 8%;
  background:linear-gradient(180deg,#F2C94C,#E0A21B 55%,#5a5754 56%,#46433f);
  box-shadow:0 0 0 6px rgba(0,0,0,.12);
}
.photo--ship{background:#5FB3DC}
.photo--ship .ship{position:absolute;inset:0;width:100%;height:100%;display:block}
.photo--p0{background:linear-gradient(135deg,#1a2a38,#E4572E);height:100%}
.photo--p1{background:linear-gradient(135deg,#151a20,#B83A1A);height:100%}
.photo--p2{background:linear-gradient(135deg,#0f3a48,#D4A017);height:100%}
.photo--p3{background:linear-gradient(135deg,#2a2218,#E4572E);height:100%}
.photo--p1{background:linear-gradient(135deg,#1b1b1b,#E12C06);height:100%}
.photo--p2{background:linear-gradient(135deg,#0f5e63,#F0A21B);height:100%}
.photo--p3{background:linear-gradient(135deg,#3a2c1f,#FF7A3D);height:100%}
.photo--avatar{background:radial-gradient(circle at 50% 35%,#F2C94C,#E07C12),#E07C12}

/* =========================================================
   4. PINNED CARD STACK
   ========================================================= */
.stack{height:400vh;position:relative;background:var(--ink)}
.stack__bg{
  position:sticky;top:0;height:100vh;width:100%;
  opacity:1;background:#071018;z-index:0;overflow:hidden;
}
.stack__bg::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,16,24,.88) 0%,rgba(7,16,24,.45) 34%,transparent 62%),
    linear-gradient(180deg,rgba(7,16,24,.25) 0%,transparent 30%,rgba(7,16,24,.35) 100%);
}
.stack__sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;padding:0 var(--pad);z-index:3;margin-top:-100vh}
.shipStage--stack{position:absolute;inset:0;z-index:1}
.shipStage--stack canvas{opacity:1!important}
.stack__cards{position:relative;width:min(40vw,440px);height:62vh}
.scard{
  position:absolute;inset:0;background:var(--orange);color:#fff;border-radius:8px;
  padding:18px clamp(22px,3vw,40px) clamp(24px,3vw,40px);display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.4);transform-origin:top center;will-change:transform;
}
.scard__no{font-family:var(--mono);font-size:14px;opacity:.85}
.scard h3{font-size:clamp(26px,3.4vw,46px);font-weight:800;line-height:.98;letter-spacing:-.02em;margin-top:14px}
.scard__icon{margin:auto 0;width:64px;height:64px}
.scard__icon svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.scard p{font-size:14px;line-height:1.45;opacity:.92;max-width:30ch}
.stack__timeline{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:26px;align-items:center}
.stack__timeline .dot{width:18px;height:18px;border-radius:3px;background:rgba(255,255,255,.25);transition:background .4s,transform .4s}
.stack__timeline .dot.is-on{background:var(--orange);transform:scale(1.15)}
.stack__progress{position:absolute;left:50%;top:0;width:1px;height:0;background:rgba(255,255,255,.4);transform:translateX(-50%);z-index:-1}

/* =========================================================
   5. FEATURED PROJECTS
   ========================================================= */
.projects{background:var(--cream);padding:14vh var(--pad);overflow:hidden}
.projects__head{display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:end;margin-bottom:7vh}
.projects__title{grid-column:2;font-size:clamp(26px,3.6vw,52px);font-weight:700;line-height:1.04;letter-spacing:-.02em;max-width:18ch}
.projects__head .label{grid-row:1;grid-column:1}
.projects__head .btn{grid-column:2;justify-self:start;margin-top:18px}
.plist{list-style:none;border-top:1px solid var(--line)}
.plist__row{border-bottom:1px solid var(--line)}
.plist__row a{display:flex;align-items:center;justify-content:space-between;padding:clamp(20px,3vw,38px) 0;transition:padding .5s var(--easing)}
.plist__name{font-size:clamp(24px,4vw,58px);font-weight:600;letter-spacing:-.02em;color:rgba(20,19,18,.32);transition:color .45s var(--easing),transform .55s var(--easing)}
.plist__meta{display:flex;gap:26px;opacity:0;transform:translateX(20px);transition:opacity .45s,transform .55s var(--easing)}
.plist__meta i{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--ink-2)}
.plist__row.is-active .plist__name{color:var(--ink);transform:translateX(18px)}
.plist__row.is-active .plist__meta{opacity:1;transform:translateX(0)}
.plist__preview{position:fixed;top:0;left:0;width:300px;height:380px;pointer-events:none;z-index:60;opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .4s,transform .5s var(--easing)}
.plist__preview.is-on{opacity:1}
.plist__pv{position:absolute;inset:0;border-radius:6px;overflow:hidden;opacity:0;transform:scale(1.06);transition:opacity .4s,transform .6s var(--easing)}
.plist__pv.is-show{opacity:1;transform:scale(1)}
.plist__pv .photo{height:100%}

/* =========================================================
   6. PRECISION DELIVERY
   ========================================================= */
.precision{background:var(--cream);height:100vh;min-height:700px;padding:12vh var(--pad) 8vh;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.precision__word{font-size:clamp(60px,11vw,240px);font-weight:800;letter-spacing:-.03em;line-height:.8;color:var(--ink);position:relative;z-index:1;pointer-events:none;white-space:nowrap}
.precision__word span{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:0.1em;margin-bottom:-0.1em}
.precision__word span i{display:inline-block;font-style:normal;will-change:transform;padding-right:0.05em}
.precision__word--top{align-self:flex-start;margin-top:2vh}
.precision__word--bot{align-self:flex-end;margin-bottom:2vh}
.precision .crane{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(60vw,640px);height:auto;z-index:3;margin:0}
.precision .ctr--mission{margin:0 auto}
.precision__spin{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:min(28vw,260px);color:var(--orange);z-index:4;opacity:0;pointer-events:none}
.ctr--whitebox{cursor:none}
.precision__spin svg{width:100%}
.precision__arrow{position:absolute;top:90%;left:82%;width:clamp(16px,2vw,24px);height:clamp(60px,10vw,100px);color:var(--ink)}
.precision__play{position:absolute;left:var(--pad);bottom:24vh;display:flex;align-items:center;gap:15px;z-index:6;cursor:none}
.play-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(20,19,18,0.15);display:grid;place-items:center;transition:transform .4s var(--easing)}
.play-btn i{font-style:normal;font-size:10px;color:var(--orange);padding-left:2px}
.precision__play:hover .play-btn{transform:scale(1.05)}
.play-text{font-size:11px;font-weight:600;line-height:1.4}
.precision__cta{position:absolute;left:var(--pad);bottom:12vh;z-index:5}
.precision__context{position:absolute;left:calc(var(--pad) + clamp(200px, 18vw, 280px));bottom:13vh;display:flex;flex-direction:column;gap:16px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;z-index:2;pointer-events:none}
.precision__context .red-text{color:var(--orange);line-height:1.4}
.precision__panel{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);width:230px;z-index:5;display:flex;flex-direction:column;gap:28px}
.testimonial{background:var(--white);border-radius:10px;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.08);display:flex;align-items:center;gap:12px}
.testimonial__av{width:42px;height:42px;border-radius:50%}
.photo--avatar-grey{background:#e0e0e0}
.testimonial__info b{display:block;font-size:13px;font-weight:700}
.testimonial__info span{display:block;font-size:11px;color:var(--ink-2);opacity:.6;margin-top:2px}
.stats{list-style:none;display:flex;flex-direction:column;gap:18px;text-align:right}
.stats li b{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em}
.stats li span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}

/* ---------------------------------------------------------
   PRECISION CONTAINER — WebGL stage (three.js)
   The crane-hung 3-D container lives here; the full hover
   story (lift → orange circular fill → invert → cargo sweep →
   metal shine → reverse) runs on canvas textures in
   js/hero3d.js. This block only frames the stage + its soft
   floating shadow, plus the no-WebGL fallback box.
   --------------------------------------------------------- */
.heroStage{
  position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);   /* centred; long sling keeps the pulley above "Precision" */
  width:min(74vw,940px);height:min(66vh,640px);
  z-index:3;cursor:none;
}
.heroStage__canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0}
.heroStage__shadow{
  position:absolute;left:50%;top:77%;transform:translate(-50%,-50%);
  width:56%;height:13%;z-index:0;pointer-events:none;opacity:.9;
  background:radial-gradient(50% 50% at 50% 50%,rgba(20,19,18,.34),rgba(20,19,18,.12) 42%,rgba(20,19,18,0) 72%);
  filter:blur(13px);
  transition:opacity .6s var(--easing),transform .6s var(--easing),width .6s var(--easing);
}
.heroStage.is-hot .heroStage__shadow{
  opacity:1;width:70%;transform:translate(-50%,-44%) scale(1.05);
  background:radial-gradient(50% 50% at 50% 50%,rgba(225,44,6,.3),rgba(20,19,18,.12) 46%,rgba(20,19,18,0) 72%);
}
/* no-WebGL fallback — the original flat container, shown only if needed */
.heroStage__fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.heroStage__fallback.is-on{display:flex}
.heroStage__fallback .ctr--mission{position:relative;width:90%;height:62%}
.heroStage__fallback .ctr--mission .ctr__face--main{width:100%;height:100%}

/* =========================================================
   7. ABOUT
   ========================================================= */
.about{background:var(--orange);color:#fff;padding:16vh var(--pad) 0;text-align:center;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:30px;min-height:100vh}
.about__title{font-size:clamp(28px,4.6vw,64px);font-weight:700;line-height:1.05;letter-spacing:-.02em;max-width:18ch}
.about__title em{color:var(--ink)}
.about .btn--dark{background:var(--ink);color:#fff}
.about .ctr--peek{position:relative;width:min(70vw,760px);height:240px;margin-top:auto;filter:drop-shadow(0 -22px 50px rgba(0,0,0,.28))}
.about .ctr--peek .ctr__face{width:100%;height:100%;border-radius:8px 8px 0 0}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{background:var(--ink);color:var(--cream);padding:12vh var(--pad) 40px}
.foot__big{display:flex;align-items:center;gap:18px;font-size:clamp(48px,12vw,180px);font-weight:800;letter-spacing:-.04em;line-height:1;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:6vh;margin-bottom:6vh}
.foot__big .foot__mark{width:.7em;height:.45em;color:var(--orange)}
.foot__big i{color:var(--orange)}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:8vh}
.foot__cols h5{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;opacity:.5;margin-bottom:16px}
.foot__cols a{display:block;font-size:15px;padding:5px 0;opacity:.85;transition:opacity .3s,transform .3s}
.foot__cols a:hover{opacity:1;transform:translateX(4px)}
.foot__bar{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;opacity:.55;border-top:1px solid rgba(255,255,255,.12);padding-top:24px;flex-wrap:wrap;gap:10px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:860px){
  .mission__head,.projects__head{grid-template-columns:1fr}
  .projects__title,.projects__head .btn{grid-column:1}
  .precision__panel{display:none}
  .foot__cols{grid-template-columns:1fr 1fr}
  .ctr--hero{width:88vw}
  .hero__top{display:none}
  .stack__cards{width:min(88vw,360px);height:54vh}
  .stack__sticky{align-items:flex-end;padding-bottom:8vh}
  .stack__bg::before{
    background:
      linear-gradient(180deg,transparent 0%,rgba(7,16,24,.15) 40%,rgba(7,16,24,.82) 78%),
      linear-gradient(90deg,rgba(7,16,24,.55) 0%,transparent 70%);
  }
  .stack__timeline{right:12px}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =========================================================
   ▣ IMAGE SLOTS — drop real / AI-generated photos here
   Uncomment a rule and point it at your file in assets/img/.
   Everything keeps working; only the look upgrades.
   ---------------------------------------------------------
   .photo--worker,
   .photo--worker-wide { background:#000 center/cover url("../assets/img/worker.jpg") !important; }
   .photo--worker::after,.photo--worker-wide::after{ display:none; }

   .ctr--hero  .ctr__face--main { background:center/cover url("../assets/img/container-orange.png"); }
   .ctr--mission .ctr__face--main,
   #precisionBox .ctr__face--main { background:center/cover url("../assets/img/container-white.png"); }

   .photo--p0 { background:center/cover url("../assets/img/proj-global.jpg"); }
   .photo--p1 { background:center/cover url("../assets/img/proj-express.jpg"); }
   .photo--p2 { background:center/cover url("../assets/img/proj-cargo.jpg"); }
   .photo--p3 { background:center/cover url("../assets/img/proj-parcel.jpg"); }
   .photo--avatar { background:center/cover url("../assets/img/avatar.jpg"); }

   .hero__sky { background:center/cover url("../assets/img/sky.jpg"); }
   ========================================================= */