/* ====================================================
   TXHydrojet CCTV — Design System & Styles
   2026-07-05 — Initial build
   ==================================================== */

/* ---- Tokens ---- */
:root {
  --clr-bg:        #060a14;
  --clr-bg2:       #0a0e1a;
  --clr-surface:   #101724;
  --clr-surface2:  #141d2d;
  --clr-border:    rgba(255,255,255,.07);
  --clr-border2:   rgba(255,107,53,.2);
  --clr-orange:    #ff6b35;
  --clr-orange-dk: #d9501f;
  --clr-orange-lt: #ff8c5a;
  --clr-blue:      #1e3a5f;
  --clr-blue-lt:   #2d5a9e;
  --clr-steel:     #8aa0b8;
  --clr-text:      #e4ecf4;
  --clr-muted:     #6b85a0;
  --clr-white:     #ffffff;
  --font-head:     'Space Grotesk', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --ease-in-out:   cubic-bezier(.76,0,.24,1);
  --nav-h:         72px;
  --container:     1280px;
  --radius:        12px;
  --radius-lg:     20px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;font-size:16px}
body{
  background:var(--clr-bg);
  color:var(--clr-text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit;background:none;border:none}
ul{list-style:none}
svg{display:block}

/* ---- Custom cursor ---- */
.cursor-dot,
.cursor-ring{
  pointer-events:none;
  position:fixed;
  z-index:9999;
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:opacity .3s;
}
.cursor-dot{
  width:6px;
  height:6px;
  background:var(--clr-orange);
  top:0;left:0;
  transition:width .2s var(--ease-out),height .2s var(--ease-out),top 0s,left 0s;
}
.cursor-ring{
  width:36px;
  height:36px;
  border:1.5px solid rgba(255,107,53,.5);
  top:0;left:0;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),
             border-color .3s,top .1s,left .1s;
}
.cursor-dot.hovered{width:10px;height:10px}
.cursor-ring.hovered{width:52px;height:52px;border-color:var(--clr-orange)}
@media(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---- Grain ---- */
.grain-overlay{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:1;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:200px 200px;
  mix-blend-mode:overlay;
}

/* ---- Container ---- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2.5rem);
}

/* ---- Navigation ---- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  transition:background .4s,box-shadow .4s,backdrop-filter .4s;
}
.nav.scrolled{
  background:rgba(6,10,20,.85);
  backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--clr-border);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.nav__logo{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
}
.nav__logo-mark{flex-shrink:0}
.nav__logo-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.nav__logo-brand{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.05rem;
  color:var(--clr-white);
  letter-spacing:-.01em;
}
.nav__logo-sub{
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--clr-orange);
}
.nav__links{
  display:flex;
  align-items:center;
  gap:2rem;
}
.nav__link{
  font-size:.875rem;
  font-weight:500;
  color:var(--clr-steel);
  letter-spacing:.01em;
  transition:color .2s;
  position:relative;
}
.nav__link::after{
  content:'';
  position:absolute;
  bottom:-4px;left:0;
  width:0;height:1.5px;
  background:var(--clr-orange);
  transition:width .3s var(--ease-out);
}
.nav__link:hover,
.nav__link.active{color:var(--clr-white)}
.nav__link:hover::after,
.nav__link.active::after{width:100%}
.nav__cta{
  display:flex;
  align-items:center;
  gap:.4rem;
  color:var(--clr-orange) !important;
  font-weight:600;
  border:1px solid rgba(255,107,53,.3);
  padding:.4rem 1rem;
  border-radius:6px;
  transition:background .2s,border-color .2s !important;
}
.nav__cta::after{display:none !important}
.nav__cta:hover{
  background:rgba(255,107,53,.1);
  border-color:var(--clr-orange);
}
.nav__hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:4px;
}
.nav__hamburger span{
  display:block;
  width:24px;
  height:2px;
  background:var(--clr-text);
  border-radius:2px;
  transition:transform .3s var(--ease-out),opacity .3s;
}
.nav__hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__hamburger.open span:nth-child(2){opacity:0}
.nav__hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Hero ---- */
.hero{
  position:relative;
  height:100dvh;
  min-height:600px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
#three-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}
.hero__fog{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 60%,transparent 0%,rgba(6,10,20,.6) 70%,var(--clr-bg) 100%);
  z-index:1;
}
.hero__content{
  position:relative;
  z-index:2;
  max-width:720px;
}
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:rgba(255,107,53,.08);
  border:1px solid rgba(255,107,53,.25);
  padding:.35rem .9rem;
  border-radius:100px;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.05em;
  color:var(--clr-orange-lt);
  margin-bottom:1.75rem;
}
.pulse-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--clr-orange);
  flex-shrink:0;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,.5)}
  50%{box-shadow:0 0 0 6px transparent}
}
.hero__title{
  font-family:var(--font-head);
  font-size:clamp(2.6rem,6vw,5rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  margin-bottom:1.5rem;
  display:flex;
  flex-direction:column;
}
.hero__title-line{display:block}
.hero__title-accent{
  color:var(--clr-orange);
}
.hero__subtitle{
  font-size:clamp(1rem,1.8vw,1.2rem);
  color:var(--clr-steel);
  max-width:560px;
  margin-bottom:2.25rem;
  line-height:1.7;
}
.highlight{color:var(--clr-orange-lt);font-style:normal}
.hero__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  margin-bottom:3.5rem;
}
.hero__scroll{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--clr-muted);
}
.scroll-line-wrap{width:40px;height:2px;background:var(--clr-border);overflow:hidden;border-radius:1px}
.scroll-line{
  height:100%;
  background:var(--clr-orange);
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{transform:translateX(-100%)}
  50%{transform:translateX(0%)}
  100%{transform:translateX(100%)}
}
.hero__stats{
  position:absolute;
  right:clamp(1rem,4vw,3rem);
  bottom:clamp(2rem,5vh,4rem);
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.hero__stat{
  background:rgba(10,14,26,.7);
  backdrop-filter:blur(12px);
  border:1px solid var(--clr-border);
  border-left:2px solid var(--clr-orange);
  padding:.75rem 1.25rem;
  border-radius:var(--radius);
  display:flex;
  align-items:baseline;
  gap:.25rem;
  flex-wrap:wrap;
  min-width:150px;
}
.hero__stat-number{
  font-family:var(--font-head);
  font-size:1.75rem;
  font-weight:800;
  color:var(--clr-white);
  letter-spacing:-.02em;
}
.hero__stat-suffix{
  font-family:var(--font-head);
  font-size:1.1rem;
  font-weight:700;
  color:var(--clr-orange);
}
.hero__stat-label{
  width:100%;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--clr-muted);
  margin-top:.15rem;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.7rem 1.5rem;
  border-radius:8px;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.01em;
  transition:transform .2s var(--ease-out),box-shadow .2s,background .2s;
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0);
  transition:background .2s;
}
.btn:hover::before{background:rgba(255,255,255,.05)}
.btn--primary{
  background:var(--clr-orange);
  color:var(--clr-white);
  box-shadow:0 0 0 0 rgba(255,107,53,.4);
}
.btn--primary:hover{
  box-shadow:0 8px 32px rgba(255,107,53,.35);
  transform:translateY(-2px);
}
.btn--ghost{
  background:transparent;
  color:var(--clr-text);
  border:1px solid var(--clr-border);
}
.btn--ghost:hover{
  border-color:rgba(255,255,255,.2);
  transform:translateY(-2px);
}
.btn--orange-ghost{
  background:transparent;
  color:var(--clr-orange);
  border:1px solid rgba(255,107,53,.4);
}
.btn--orange-ghost:hover{
  background:rgba(255,107,53,.08);
  border-color:var(--clr-orange);
}
.btn--lg{padding:.9rem 2rem;font-size:1rem}

/* ---- Ticker ---- */
.ticker{
  overflow:hidden;
  border-top:1px solid var(--clr-border);
  border-bottom:1px solid var(--clr-border);
  background:var(--clr-surface);
  padding:.65rem 0;
  position:relative;
  z-index:2;
}
.ticker__track{
  display:flex;
  gap:2rem;
  white-space:nowrap;
  animation:ticker 30s linear infinite;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--clr-muted);
}
.ticker__sep{color:var(--clr-orange);font-size:.55rem;display:inline-block;vertical-align:middle}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- Section base ---- */
.section{
  padding:clamp(5rem,10vw,9rem) 0;
  position:relative;
}
.section-header{
  text-align:center;
  max-width:680px;
  margin:0 auto clamp(3rem,6vw,5rem);
}
.section-tag{
  display:inline-block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--clr-orange);
  margin-bottom:.75rem;
}
.section-title{
  font-family:var(--font-head);
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--clr-white);
  margin-bottom:1rem;
}
.section-title em{font-style:italic;color:var(--clr-orange)}
.section-desc{
  color:var(--clr-steel);
  font-size:1rem;
  line-height:1.75;
  max-width:560px;
  margin:0 auto;
}

/* ---- Why grid ---- */
.why__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
}
.why__card{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:2rem 1.75rem;
  transition:border-color .3s,transform .3s var(--ease-out),box-shadow .3s;
}
.why__card:hover{
  border-color:var(--clr-border2);
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 0 1px rgba(255,107,53,.1);
}
.why__card-icon{
  width:48px;height:48px;
  margin-bottom:1.25rem;
}
.why__card h3{
  font-family:var(--font-head);
  font-size:1.15rem;
  font-weight:700;
  color:var(--clr-white);
  margin-bottom:.6rem;
  letter-spacing:-.01em;
}
.why__card p{font-size:.9rem;color:var(--clr-steel);line-height:1.7}

/* ---- Equipment ---- */
.equipment{background:var(--clr-bg2)}
.equipment__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.75rem;
  margin-bottom:3rem;
}
.product-card{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color .3s,transform .4s var(--ease-out),box-shadow .4s;
  display:flex;
  flex-direction:column;
}
.product-card:hover{
  border-color:var(--clr-border2);
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.product-card__media{
  aspect-ratio:16/10;
  background:linear-gradient(135deg,var(--clr-surface2),var(--clr-blue) 60%,var(--clr-bg));
  position:relative;
  overflow:hidden;
}
.product-card__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.product-card:hover .product-card__media img{transform:scale(1.05)}
.product-card__media.img-placeholder::after{
  content:'CCTV Crawler System';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--clr-muted);
}
.product-card__badge{
  position:absolute;
  top:.75rem;left:.75rem;
  background:var(--clr-orange);
  color:#fff;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.2rem .55rem;
  border-radius:4px;
}
.product-card__body{
  padding:1.5rem;
  flex:1;
  display:flex;
  flex-direction:column;
}
.product-card__subtitle{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--clr-orange);
  margin-bottom:.4rem;
}
.product-card__title{
  font-family:var(--font-head);
  font-size:1.15rem;
  font-weight:700;
  color:var(--clr-white);
  margin-bottom:.75rem;
  letter-spacing:-.01em;
}
.product-card__desc{font-size:.875rem;color:var(--clr-steel);line-height:1.65;margin-bottom:1.25rem;flex:1}
.product-card__specs{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-bottom:1.25rem;
}
.spec-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.8rem;
  color:var(--clr-muted);
}
.spec-item::before{
  content:'';
  width:5px;height:5px;
  border-radius:50%;
  background:var(--clr-orange);
  flex-shrink:0;
}
.equipment__cta{text-align:center}

/* ---- Process ---- */
.process{position:relative}
.process::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--clr-border),transparent);
}
.process__steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2rem;
  position:relative;
}
.process__step{
  position:relative;
  text-align:center;
  padding:2.5rem 1.5rem;
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
}
.process__num{
  font-family:var(--font-head);
  font-size:3.5rem;
  font-weight:900;
  color:rgba(255,107,53,.1);
  line-height:1;
  margin-bottom:1rem;
  letter-spacing:-.05em;
}
.process__step h3{
  font-family:var(--font-head);
  font-size:1.05rem;
  font-weight:700;
  color:var(--clr-white);
  margin-bottom:.5rem;
}
.process__step p{font-size:.875rem;color:var(--clr-steel);line-height:1.65}

/* ---- Tech Specs ---- */
.tech{background:var(--clr-bg2)}
.tech__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--clr-border);
  margin-bottom:3rem;
}
.tech__cell{
  background:var(--clr-surface);
  padding:1.75rem 1.5rem;
  transition:background .3s;
}
.tech__cell:hover{background:var(--clr-surface2)}
.tech__cell-label{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clr-muted);
  margin-bottom:.4rem;
}
.tech__cell-value{
  font-family:var(--font-head);
  font-size:1.35rem;
  font-weight:700;
  color:var(--clr-white);
  letter-spacing:-.01em;
}
.tech__cell-value span{font-size:.85rem;color:var(--clr-orange);margin-left:.25rem}

/* Pipeline range bar */
.pipeline-range{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:2rem 2.5rem;
}
.pipeline-range h3{
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:600;
  color:var(--clr-white);
  margin-bottom:1.5rem;
  letter-spacing:-.01em;
}
.range-bar{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:4px;
  margin-bottom:.75rem;
}
.range-seg{
  height:28px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.6rem;
  font-weight:700;
  color:rgba(255,255,255,.6);
  letter-spacing:.05em;
  transition:transform .2s;
  cursor:default;
}
.range-seg:hover{transform:scaleY(1.1)}
.seg-1{background:rgba(255,107,53,.2);color:rgba(255,107,53,.7)}
.seg-2{background:rgba(255,107,53,.35);color:rgba(255,107,53,.8)}
.seg-3{background:rgba(255,107,53,.5)}
.seg-4{background:rgba(255,107,53,.65)}
.seg-5{background:rgba(255,107,53,.8);color:#fff}
.seg-6{background:var(--clr-orange);color:#fff}
.range-labels{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:4px;
}
.range-labels span{
  font-size:.65rem;
  color:var(--clr-muted);
  text-align:center;
}

/* ---- Partnership ---- */
.partnership{
  background:linear-gradient(135deg,var(--clr-bg2) 0%,var(--clr-blue) 60%,var(--clr-bg2) 100%);
  position:relative;
  overflow:hidden;
}
.partnership::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 70% 80% at 60% 50%,rgba(30,58,95,.4),transparent);
}
.partnership__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
  position:relative;
  z-index:1;
}
.partnership__tag{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--clr-orange);
  margin-bottom:1rem;
}
.partnership h2{
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3.5vw,2.75rem);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--clr-white);
  margin-bottom:1.25rem;
  line-height:1.15;
}
.partnership p{color:var(--clr-steel);font-size:.975rem;line-height:1.8;margin-bottom:1.5rem}
.partnership__logo-wrap{
  width:200px;
  height:80px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.5rem;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--clr-muted);
}
.partnership__visual{
  position:relative;
  aspect-ratio:1;
  max-width:420px;
}
.partner-orb{
  width:100%;
  height:100%;
  border-radius:50%;
  border:1px solid rgba(255,107,53,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  animation:orbFloat 8s ease-in-out infinite;
}
@keyframes orbFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}
.partner-orb::before{
  content:'';
  position:absolute;
  inset:24px;
  border-radius:50%;
  border:1px solid rgba(255,107,53,.1);
}
.partner-orb-inner{
  width:55%;
  aspect-ratio:1;
  border-radius:50%;
  background:linear-gradient(135deg,var(--clr-blue-lt),var(--clr-blue));
  border:2px solid rgba(255,107,53,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-size:clamp(1rem,2vw,1.5rem);
  font-weight:800;
  color:var(--clr-orange);
  text-align:center;
  padding:1rem;
  letter-spacing:-.02em;
}
.partner-orbit{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--clr-orange);
  opacity:.8;
}
.partner-orbit--1{
  top:12%;
  right:5%;
  animation:orbit1 6s linear infinite;
}
.partner-orbit--2{
  bottom:12%;
  left:8%;
  width:12px;
  height:12px;
  opacity:.5;
  animation:orbit2 9s linear infinite;
}
@keyframes orbit1{0%{transform:rotate(0) translateX(20px) rotate(0)}100%{transform:rotate(360deg) translateX(20px) rotate(-360deg)}}
@keyframes orbit2{0%{transform:rotate(0) translateX(-16px) rotate(0)}100%{transform:rotate(-360deg) translateX(-16px) rotate(360deg)}}

/* ---- Testimonials ---- */
.testimonials{position:relative}
.testimonials__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}
.testimonial-card{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:2rem;
  transition:border-color .3s,transform .3s var(--ease-out);
}
.testimonial-card:hover{
  border-color:var(--clr-border2);
  transform:translateY(-4px);
}
.testimonial-card__stars{
  display:flex;
  gap:.2rem;
  margin-bottom:1rem;
  color:var(--clr-orange);
  font-size:.9rem;
}
.testimonial-card__quote{
  font-size:.95rem;
  line-height:1.75;
  color:var(--clr-steel);
  margin-bottom:1.5rem;
  font-style:italic;
  position:relative;
  padding-left:1.25rem;
}
.testimonial-card__quote::before{
  content:'"';
  position:absolute;
  left:0;top:-.25rem;
  font-size:2rem;
  color:rgba(255,107,53,.3);
  font-family:Georgia,serif;
  line-height:1;
}
.testimonial-card__author{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.testimonial-card__avatar{
  width:42px;height:42px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--clr-blue-lt),var(--clr-orange));
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-size:.95rem;
  font-weight:700;
  color:#fff;
  flex-shrink:0;
}
.testimonial-card__name{
  font-family:var(--font-head);
  font-size:.9rem;
  font-weight:700;
  color:var(--clr-white);
}
.testimonial-card__role{
  font-size:.75rem;
  color:var(--clr-muted);
}

/* ---- CTA Banner ---- */
.cta-banner{
  background:var(--clr-orange);
  padding:clamp(3rem,6vw,5rem) 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    rgba(0,0,0,.04) 20px,
    rgba(0,0,0,.04) 40px
  );
}
.cta-banner .container{position:relative;z-index:1}
.cta-banner h2{
  font-family:var(--font-head);
  font-size:clamp(1.75rem,4vw,3rem);
  font-weight:800;
  color:#fff;
  margin-bottom:1rem;
  letter-spacing:-.03em;
}
.cta-banner p{
  font-size:1.05rem;
  color:rgba(255,255,255,.85);
  max-width:520px;
  margin:0 auto 2rem;
  line-height:1.7;
}
.cta-banner .btn--white{
  background:#fff;
  color:var(--clr-orange-dk);
  font-weight:700;
}
.cta-banner .btn--white:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(0,0,0,.2);
}

/* ---- Contact ---- */
.contact{background:var(--clr-bg2)}
.contact__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}
.contact__info h2{
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:800;
  color:var(--clr-white);
  margin-bottom:1rem;
  letter-spacing:-.03em;
}
.contact__info p{
  color:var(--clr-steel);
  line-height:1.8;
  margin-bottom:1.75rem;
}
.contact__details{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-bottom:2rem;
}
.contact__detail{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.9rem;
  color:var(--clr-steel);
}
.contact__detail-icon{
  width:36px;height:36px;
  border-radius:8px;
  background:rgba(255,107,53,.1);
  border:1px solid rgba(255,107,53,.2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:var(--clr-orange);
}
.contact__form-wrap{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:2.5rem;
}
.contact__form{display:flex;flex-direction:column;gap:1.25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group label{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--clr-steel);
}
.form-group input,
.form-group select,
.form-group textarea{
  background:var(--clr-bg2);
  border:1px solid var(--clr-border);
  border-radius:8px;
  padding:.7rem 1rem;
  font-size:.9rem;
  color:var(--clr-text);
  font-family:var(--font-body);
  transition:border-color .2s,box-shadow .2s;
  outline:none;
  width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--clr-orange);
  box-shadow:0 0 0 3px rgba(255,107,53,.12);
}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select{appearance:none;cursor:pointer}
.form-group select option{background:var(--clr-surface)}
.form__success{
  text-align:center;
  padding:2rem;
  display:none;
}
.form__success h3{
  font-family:var(--font-head);
  font-size:1.3rem;
  font-weight:700;
  color:var(--clr-white);
  margin:.75rem 0 .5rem;
}
.form__success p{color:var(--clr-steel);font-size:.9rem}
.success-icon{
  width:56px;height:56px;
  border-radius:50%;
  background:rgba(255,107,53,.1);
  border:2px solid var(--clr-orange);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto .75rem;
  color:var(--clr-orange);
}

/* ---- Footer ---- */
.footer{
  background:var(--clr-bg);
  border-top:1px solid var(--clr-border);
  padding:4rem 0 2rem;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem;
}
.footer__brand p{
  font-size:.875rem;
  color:var(--clr-muted);
  line-height:1.75;
  margin-top:.75rem;
  max-width:260px;
}
.footer__heading{
  font-family:var(--font-head);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--clr-white);
  margin-bottom:1rem;
}
.footer__links{display:flex;flex-direction:column;gap:.6rem}
.footer__links a{
  font-size:.875rem;
  color:var(--clr-muted);
  transition:color .2s;
}
.footer__links a:hover{color:var(--clr-orange)}
.footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:2rem;
  border-top:1px solid var(--clr-border);
  gap:1rem;
  flex-wrap:wrap;
}
.footer__copy{
  font-size:.8rem;
  color:var(--clr-muted);
}
.footer__legal{
  display:flex;
  gap:1.5rem;
}
.footer__legal a{
  font-size:.8rem;
  color:var(--clr-muted);
  transition:color .2s;
}
.footer__legal a:hover{color:var(--clr-orange)}

/* ---- Reveal animations ---- */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
[data-reveal].revealed{opacity:1;transform:none}
[data-delay="100"]{transition-delay:.1s}
[data-delay="200"]{transition-delay:.2s}
[data-delay="300"]{transition-delay:.3s}
[data-delay="400"]{transition-delay:.4s}

/* ---- Page hero (inner pages) ---- */
.page-hero{
  padding:calc(var(--nav-h) + clamp(4rem,8vw,7rem)) 0 clamp(4rem,8vw,7rem);
  background:linear-gradient(180deg,var(--clr-surface) 0%,var(--clr-bg) 100%);
  position:relative;
  overflow:hidden;
  text-align:center;
}
.page-hero::before{
  content:'';
  position:absolute;
  top:-40%;
  left:50%;
  transform:translateX(-50%);
  width:800px;
  height:800px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,53,.07) 0%,transparent 70%);
}
.page-hero__tag{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:rgba(255,107,53,.08);
  border:1px solid rgba(255,107,53,.2);
  padding:.3rem .9rem;
  border-radius:100px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--clr-orange);
  margin-bottom:1.5rem;
}
.page-hero h1{
  font-family:var(--font-head);
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--clr-white);
  margin-bottom:1.25rem;
  line-height:1.1;
}
.page-hero p{
  font-size:clamp(.95rem,1.5vw,1.15rem);
  color:var(--clr-steel);
  max-width:600px;
  margin:0 auto;
  line-height:1.75;
}
.page-hero__bg-text{
  position:absolute;
  bottom:-1rem;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-head);
  font-size:clamp(6rem,15vw,14rem);
  font-weight:900;
  letter-spacing:-.06em;
  color:rgba(255,255,255,.018);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}

/* ---- Breadcrumb ---- */
.breadcrumb{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  color:var(--clr-muted);
  margin-bottom:1rem;
  justify-content:center;
}
.breadcrumb a{color:var(--clr-muted);transition:color .2s}
.breadcrumb a:hover{color:var(--clr-orange)}
.breadcrumb-sep{opacity:.4}

/* ---- Feature list ---- */
.feature-list{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.feature-item{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  font-size:.9rem;
  color:var(--clr-steel);
}
.feature-icon{
  width:20px;height:20px;
  border-radius:4px;
  background:rgba(255,107,53,.12);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  margin-top:.15rem;
  color:var(--clr-orange);
}

/* ---- Split section ---- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(3rem,6vw,6rem);
  align-items:center;
}
.split--reverse .split__visual{order:-1}
.split__content h2{
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--clr-white);
  margin-bottom:1rem;
  line-height:1.15;
}
.split__content p{color:var(--clr-steel);line-height:1.8;margin-bottom:1.25rem;font-size:.975rem}
.split__visual{position:relative}
.img-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--clr-surface2),var(--clr-blue));
  position:relative;
}
.img-frame img{width:100%;height:100%;object-fit:cover}
.img-frame__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--clr-muted);
}
.img-frame__placeholder svg{opacity:.3}
.frame-badge{
  position:absolute;
  bottom:1rem;
  right:1rem;
  background:rgba(6,10,20,.8);
  backdrop-filter:blur(8px);
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
  padding:.75rem 1rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.frame-badge__val{
  font-family:var(--font-head);
  font-size:1.1rem;
  font-weight:700;
  color:var(--clr-orange);
}
.frame-badge__label{font-size:.7rem;color:var(--clr-muted)}

/* ---- Stats row ---- */
.stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;
  background:var(--clr-border);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.stat-block{
  background:var(--clr-surface);
  padding:2rem 1.5rem;
  text-align:center;
}
.stat-block__num{
  font-family:var(--font-head);
  font-size:2.5rem;
  font-weight:800;
  color:var(--clr-orange);
  line-height:1;
  margin-bottom:.4rem;
  letter-spacing:-.03em;
}
.stat-block__label{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--clr-muted);
}

/* ---- Service cards ---- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}
.service-card{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:2rem 1.75rem;
  transition:border-color .3s,transform .3s var(--ease-out),box-shadow .3s;
  cursor:default;
}
.service-card:hover{
  border-color:var(--clr-border2);
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.service-card__icon{
  width:52px;height:52px;
  border-radius:12px;
  background:rgba(255,107,53,.08);
  border:1px solid rgba(255,107,53,.2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;
  color:var(--clr-orange);
}
.service-card h3{
  font-family:var(--font-head);
  font-size:1.1rem;
  font-weight:700;
  color:var(--clr-white);
  margin-bottom:.5rem;
  letter-spacing:-.01em;
}
.service-card p{font-size:.875rem;color:var(--clr-steel);line-height:1.7}
.service-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:1rem;
}
.service-tag{
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(255,107,53,.07);
  border:1px solid rgba(255,107,53,.15);
  color:var(--clr-orange);
  padding:.2rem .55rem;
  border-radius:4px;
}

/* ---- Accordion (FAQ/specs) ---- */
.accordion{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.accordion-item{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .3s;
}
.accordion-item.open{border-color:var(--clr-border2)}
.accordion-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem 1.5rem;
  font-family:var(--font-head);
  font-size:.95rem;
  font-weight:600;
  color:var(--clr-white);
  cursor:pointer;
  text-align:left;
  transition:background .2s;
}
.accordion-trigger:hover{background:var(--clr-surface2)}
.accordion-arrow{
  width:20px;height:20px;
  flex-shrink:0;
  color:var(--clr-orange);
  transition:transform .3s var(--ease-out);
}
.accordion-item.open .accordion-arrow{transform:rotate(180deg)}
.accordion-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease-out);
}
.accordion-body p{
  padding:0 1.5rem 1.25rem;
  font-size:.9rem;
  color:var(--clr-steel);
  line-height:1.75;
}

/* ---- Gallery grid ---- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:240px;
  gap:1rem;
}
.gallery-item{
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(135deg,var(--clr-surface2),var(--clr-blue));
  position:relative;
  cursor:pointer;
}
.gallery-item--tall{grid-row:span 2}
.gallery-item--wide{grid-column:span 2}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(6,10,20,.8),transparent 50%);
  opacity:0;
  transition:opacity .3s;
  display:flex;
  align-items:flex-end;
  padding:1.25rem;
}
.gallery-item:hover .gallery-item__overlay{opacity:1}
.gallery-item__label{
  font-size:.8rem;
  font-weight:600;
  color:#fff;
  letter-spacing:.05em;
}
.gallery-item__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--clr-muted);
  flex-direction:column;
  gap:.5rem;
}

/* ---- Timeline ---- */
.timeline{
  position:relative;
  padding-left:2.5rem;
}
.timeline::before{
  content:'';
  position:absolute;
  left:.75rem;
  top:0;bottom:0;
  width:1px;
  background:linear-gradient(180deg,var(--clr-orange),rgba(255,107,53,.1));
}
.timeline-item{
  position:relative;
  margin-bottom:2.5rem;
}
.timeline-item::before{
  content:'';
  position:absolute;
  left:-2.1rem;
  top:.3rem;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--clr-orange);
  box-shadow:0 0 0 3px rgba(255,107,53,.2);
}
.timeline-item h3{
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:700;
  color:var(--clr-white);
  margin-bottom:.4rem;
}
.timeline-item p{font-size:.875rem;color:var(--clr-steel);line-height:1.7}
.timeline-item__date{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--clr-orange);
  margin-bottom:.3rem;
}

/* ---- Table ---- */
.spec-table{
  width:100%;
  border-collapse:collapse;
  font-size:.875rem;
}
.spec-table th,
.spec-table td{
  padding:.85rem 1.25rem;
  text-align:left;
  border-bottom:1px solid var(--clr-border);
}
.spec-table thead th{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--clr-muted);
  background:var(--clr-surface2);
}
.spec-table tbody tr:hover td{background:var(--clr-surface2)}
.spec-table td:first-child{color:var(--clr-steel)}
.spec-table td:last-child{
  color:var(--clr-white);
  font-weight:600;
  font-family:var(--font-head);
}
.spec-table--wrap{
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

/* ---- Team card ---- */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
}
.team-card{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:2rem 1.5rem;
  text-align:center;
  transition:border-color .3s,transform .3s var(--ease-out);
}
.team-card:hover{
  border-color:var(--clr-border2);
  transform:translateY(-4px);
}
.team-card__avatar{
  width:72px;height:72px;
  border-radius:50%;
  margin:0 auto 1rem;
  background:linear-gradient(135deg,var(--clr-blue-lt),var(--clr-orange));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);
  font-size:1.5rem;
  font-weight:800;
  color:#fff;
}
.team-card h3{
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:700;
  color:var(--clr-white);
  margin-bottom:.25rem;
}
.team-card__role{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--clr-orange);
  margin-bottom:.6rem;
}
.team-card p{font-size:.825rem;color:var(--clr-muted);line-height:1.65}

/* ---- Badge row ---- */
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.badge{
  display:flex;
  align-items:center;
  gap:.5rem;
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
  padding:.75rem 1.25rem;
  font-size:.82rem;
  font-weight:600;
  color:var(--clr-steel);
  transition:border-color .3s;
}
.badge:hover{border-color:var(--clr-border2);color:var(--clr-white)}
.badge svg{color:var(--clr-orange)}

/* ---- Parallax bg ---- */
.parallax-bg{
  position:absolute;
  inset:-20%;
  background-size:cover;
  background-position:center;
  will-change:transform;
}

/* ---- Page canvas (inner page 3D) ---- */
#page-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.5;
}

/* ---- Utility ---- */
.text-orange{color:var(--clr-orange)}
.text-muted{color:var(--clr-muted)}
.text-center{text-align:center}
.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:2rem}
.mb-3{margin-bottom:3rem}
.mt-auto{margin-top:auto}
.flex-center{display:flex;align-items:center;justify-content:center}
.gap-1{gap:1rem}
.divider{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--clr-border),transparent);
  margin:3rem 0;
}
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:1.25rem;
}
.tag{
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:rgba(255,107,53,.07);
  border:1px solid rgba(255,107,53,.15);
  color:var(--clr-orange);
  padding:.25rem .6rem;
  border-radius:4px;
}

/* ---- Notification bar ---- */
.notify-bar{
  background:var(--clr-orange);
  padding:.5rem 1rem;
  text-align:center;
  font-size:.78rem;
  font-weight:600;
  color:#fff;
  letter-spacing:.04em;
  position:fixed;
  top:0;left:0;right:0;
  z-index:101;
  transform:translateY(-100%);
  transition:transform .5s var(--ease-out);
}
.notify-bar.show{transform:none}
body.has-notify .nav{top:36px}

/* ====================================================
   Responsive
   ==================================================== */
@media(max-width:1024px){
  .partnership__inner{grid-template-columns:1fr;gap:3rem}
  .partnership__visual{max-width:300px;margin:0 auto}
  .contact__inner{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .split--reverse .split__visual{order:0}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-item--wide{grid-column:span 1}
}

@media(max-width:768px){
  :root{--nav-h:60px}
  .nav__links{
    display:none;
    position:fixed;
    inset:var(--nav-h) 0 0;
    background:rgba(6,10,20,.97);
    backdrop-filter:blur(16px);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2.5rem;
    z-index:99;
  }
  .nav__links.open{display:flex}
  .nav__link{font-size:1.5rem}
  .nav__hamburger{display:flex}
  .hero__stats{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:2rem;
    gap:.75rem;
  }
  .hero__stat{min-width:120px;flex:1}
  .hero__content{max-width:100%}
  .form-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .tech__grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:200px}
  .gallery-item--tall{grid-row:span 1}
  .process__steps{grid-template-columns:1fr 1fr}
}

@media(max-width:480px){
  .hero__title{font-size:2.2rem}
  .btn{padding:.65rem 1.25rem;font-size:.85rem}
  .why__grid{grid-template-columns:1fr}
  .equipment__grid{grid-template-columns:1fr}
  .testimonials__grid{grid-template-columns:1fr}
  .tech__grid{grid-template-columns:1fr}
  .process__steps{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
}

/* ===== 2026-07-05 — Scroll journey chapters + depth HUD ===== */
.hero__chapter{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  max-width:640px; margin:0 auto; padding:0 24px;
  text-align:center; pointer-events:none;
  opacity:0; visibility:hidden; /* GSAP scrub drives these in/out */
  z-index:5;
}
.chapter__eyebrow{
  font-family:var(--font-head); font-size:.8rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--clr-orange); margin-bottom:18px;
}
.chapter__title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(2.2rem,5.5vw,4.2rem); line-height:1.06;
  color:var(--clr-text); margin-bottom:22px;
}
.chapter__accent{ color:var(--clr-orange); }
.chapter__text{
  font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.65;
  color:var(--clr-steel); max-width:520px; margin:0 auto;
}
.hero__chapter--end .chapter__ctas{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:10px;
  pointer-events:auto;
}

.pipe-hud{
  position:absolute; right:28px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  opacity:0; visibility:hidden; z-index:6; pointer-events:none;
  font-family:var(--font-head);
}
.pipe-hud__rail{
  width:2px; height:180px; background:rgba(255,255,255,.08);
  border-radius:2px; overflow:hidden;
}
.pipe-hud__rail-fill{
  width:100%; height:100%; background:var(--clr-orange);
  transform:scaleY(0); transform-origin:top center;
}
.pipe-hud__readout{ display:flex; flex-direction:column; align-items:flex-end; }
.pipe-hud__label{
  font-size:.62rem; letter-spacing:.3em; color:var(--clr-muted);
}
.pipe-hud__value{
  font-size:1.35rem; font-weight:700; color:var(--clr-text);
  font-variant-numeric:tabular-nums;
}
.pipe-hud__value #hudDepth{ color:var(--clr-orange); }
.pipe-hud__rec{
  display:flex; align-items:center; gap:7px;
  font-size:.66rem; letter-spacing:.22em; color:var(--clr-steel);
}
.pipe-hud__rec-dot{
  width:7px; height:7px; border-radius:50%; background:#ff3b30;
  animation:recBlink 1.3s steps(1) infinite;
}
@keyframes recBlink{ 50%{ opacity:.15; } }

@media (max-width:768px){
  .pipe-hud{ right:14px; }
  .pipe-hud__rail{ height:110px; }
  .hero__chapter{ max-width:92vw; }
}
@media (prefers-reduced-motion:reduce){
  .hero__chapter, .pipe-hud{ display:none; }
}

/* ===== 2026-07-05 v7 — Full-bleed cinematic chapter plates ===== */
.hero__chapter{ max-width:none; margin:0; padding:0; }
.chapter__plate{ position:absolute; inset:0; overflow:hidden; }
.chapter__plate img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.18);
  will-change:transform;
}
.chapter__plate::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,10,20,.88) 0%, rgba(6,10,20,.45) 45%, rgba(6,10,20,.15) 100%),
    linear-gradient(180deg, rgba(6,10,20,.55) 0%, rgba(6,10,20,0) 30%, rgba(6,10,20,.65) 100%);
}
.chapter__inner{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  max-width:var(--container); margin:0 auto; padding:0 6vw;
  text-align:left;
}
.chapter__inner .chapter__title{
  font-size:clamp(2.8rem, 7vw, 5.8rem);
  letter-spacing:-0.02em;
  text-shadow:0 4px 40px rgba(0,0,0,.55);
}
.chapter__inner .chapter__text{ margin:0; max-width:480px; }
.hero__chapter--end .chapter__ctas{ justify-content:flex-start; margin-top:26px; }
@media (max-width:768px){
  .chapter__inner{ padding:0 22px; }
}

/* ===== 2026-07-05 v8 — DSLR hero backdrop ===== */
.hero__backdrop{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.hero__backdrop img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.hero__backdrop::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,10,20,.86) 0%, rgba(6,10,20,.5) 42%, rgba(6,10,20,.08) 75%);
}
.hero__fog{ z-index:2; }
.hero__content{ position:relative; z-index:3; }

/* ===== 2026-07-05 v9 — stats as bottom row so the DSLR crawler stays visible ===== */
@media (min-width:769px){
  .hero__stats{
    flex-direction:row;
    right:auto; left:50%;
    transform:translateX(-50%);
    bottom:clamp(1.2rem,3.5vh,2.2rem);
    gap:.9rem;
  }
  .hero__stat{ padding:.55rem 1.1rem; }
}

/* ===== 2026-07-05 v10 — film montage layer ===== */
.film-layer{ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; visibility:hidden; overflow:hidden; }
.film-layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; visibility:hidden; will-change:transform,opacity; }
.film-layer::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,10,20,.42) 0%, rgba(6,10,20,0) 30%, rgba(6,10,20,.5) 100%); }

/* ===== 2026-07-05 v11 — exploded anatomy band (responsive) ===== */
.why__anatomy{ margin:3.5rem 0 1rem; border:1px solid var(--clr-border); border-radius:var(--radius-lg);
  overflow:hidden; position:relative; background:#0a0f1a; }
.why__anatomy img{ width:100%; height:auto; display:block; }
.why__anatomy-caption{
  position:absolute; left:0; bottom:0; right:0;
  padding:14px 22px; font-family:var(--font-head); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--clr-steel);
  background:linear-gradient(180deg, transparent, rgba(6,10,20,.85));
}
.why__anatomy-caption span{ color:var(--clr-orange); margin-right:12px; }
@media (max-width:768px){
  .why__anatomy{ margin:2rem -6px 0; }
  .why__anatomy-caption{ font-size:.66rem; padding:10px 14px; }
}

/* ===== 2026-07-05 v12 — THE DIVE ===== */
.dive{ position:relative; height:100vh; overflow:hidden; background:#04070e; }
.dive__stack{ position:absolute; inset:0; }
.dive__frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; visibility:hidden; will-change:transform,opacity; }
.dive__frame:first-child{ opacity:1; visibility:visible; }
.dive__caption{
  position:absolute; left:6vw; bottom:6vh; z-index:3; display:flex; align-items:baseline; gap:14px;
  font-family:var(--font-head); text-transform:uppercase;
}
.dive__num{ font-size:2.4rem; font-weight:700; color:var(--clr-orange); }
.dive__label{ font-size:.85rem; letter-spacing:.3em; color:var(--clr-text); }
@media (prefers-reduced-motion:reduce){ .dive{ height:auto; } .dive__frame{ position:static; opacity:1; visibility:visible; } .dive__caption{ display:none; } }

/* ===== 2026-07-05 v13 — EVERY PIECE teardown ===== */
.teardown{ background:#04070e; }
.teardown__master{ margin:3rem 0 1.4rem; border:1px solid var(--clr-border); border-radius:var(--radius-lg); overflow:hidden; }
.teardown__master img{ width:100%; height:auto; display:block; }
.teardown__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1.4rem; }
.teardown__part{ position:relative; border:1px solid var(--clr-border); border-radius:var(--radius); overflow:hidden; background:#0a0f1a; }
.teardown__part img{ width:100%; height:auto; display:block; transition:transform .7s var(--ease-out); }
.teardown__part:hover img{ transform:scale(1.07); }
.teardown__part figcaption{ display:flex; align-items:baseline; gap:10px; padding:14px 16px; font-family:var(--font-head); }
.teardown__part figcaption span{ color:var(--clr-orange); font-weight:700; font-size:.85rem; }
.teardown__part figcaption strong{ color:var(--clr-text); font-size:.95rem; }
.teardown__part figcaption small{ display:block; width:100%; flex-basis:100%; color:var(--clr-muted); font-size:.72rem; letter-spacing:.06em; margin-top:2px; }
.teardown__part figcaption{ flex-wrap:wrap; }
@media (max-width:1024px){ .teardown__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .teardown__grid{ grid-template-columns:1fr; } }

/* ===== 2026-07-05 v14 — scroll-driven teardown ===== */
.td{ position:relative; height:100vh; overflow:hidden; background:#04070e; }
.td__stack{ position:absolute; inset:0; }
.td__frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; visibility:hidden; will-change:transform,opacity; }
.td__frame:first-child{ opacity:1; visibility:visible; }
.td__hud{ position:absolute; left:6vw; bottom:7vh; z-index:3; display:flex; align-items:baseline; gap:18px;
  text-shadow:0 3px 26px rgba(0,0,0,.75); }
.td__hud-num{ font-family:var(--font-head); font-size:clamp(3rem,6vw,5rem); font-weight:800; color:var(--clr-orange); line-height:1; }
.td__hud-name{ font-family:var(--font-head); font-size:clamp(1.3rem,2.6vw,2.2rem); font-weight:700; color:var(--clr-text); text-transform:uppercase; letter-spacing:.04em; }
.td__hud-spec{ font-family:var(--font-head); font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--clr-steel); margin-top:6px; }
.td__rail{ position:absolute; right:28px; top:50%; transform:translateY(-50%); width:2px; height:160px; background:rgba(255,255,255,.09); z-index:3; }
.td__rail-fill{ width:100%; height:100%; background:var(--clr-orange); transform:scaleY(0); transform-origin:top; }
@media (prefers-reduced-motion:reduce){ .td{ height:auto; } .td__frame{ position:static; opacity:1; visibility:visible; } .td__hud,.td__rail{ display:none; } }

/* 2026-07-05 v15b — footer social icons: unsized SVGs default to 100% width (758px monster fix) */
footer svg:not([width]){ width:20px; height:20px; flex-shrink:0; }