/* ============================================================
   BHARAT H2O SOLUTIONS — Shared Styles
   Tokens, base, nav, buttons, hero, cards, sections, footer
   ============================================================ */

/* ---- TOKENS ---- */
:root{
  --ink:#0E2B2C;
  --ink-soft:#3C5453;
  --paper:#FBFAF7;
  --surface:#FBFAF7;
  --mist:#F1F0EA;
  --line:rgba(14,43,44,0.12);
  --line-soft:rgba(14,43,44,0.07);
  --teal:#1B8A8D;
  --teal-deep:#0E2B2C;
  --moss:#7CA24C;
  --white:#ffffff;
  --body-bg-1:#fcfbf8;
  --body-bg-2:#f7f4eb;
  --header-bg: rgba(251,250,247,0.92);
  --header-line: rgba(14,43,44,0.04);
  --cert-bg: rgba(247,247,247,0.92);
  --cert-bg-hover: rgba(255,255,255,0.98);
  --cert-shadow: rgba(0,0,0,0.06);
  --etp-photo-2: #E7E5DC;
  --color-scheme: light;

  /* Font stacks with robust system fallbacks */
  --display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', SFMono-Regular, 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;

  --maxw:1180px;

  /* type scale — refined for better hierarchy */
  --t-h1: clamp(38px, 5.2vw, 72px);
  --t-h2: clamp(28px, 3.6vw, 46px);
  --t-h3: clamp(22px, 2.2vw, 28px);
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 12px;

  /* spacing scale */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:72px; --s-7:64px;

  /* motion */
  --ease-soft: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---- RESET & BASE ---- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; color-scheme:var(--color-scheme); scroll-padding-top:96px;}
body{
  font-family:var(--body);
  font-size:var(--t-body);
  color:var(--ink);
  background:linear-gradient(180deg, var(--body-bg-1) 0%, var(--body-bg-2) 100%);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
  /* Use clip, not hidden: hidden turns body into a scroll container and breaks
     position:sticky descendants (e.g. the STP/ETP technology tabs). clip clips
     horizontal overflow without creating a scrollport, so sticky keeps working. */
  overflow-x:hidden;
  overflow-x:clip; /* fallback: older browsers keep hidden, modern browsers clip (keeps position:sticky working) */
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
strong{font-weight:600; color:var(--ink);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
@media(max-width:840px){.wrap{padding:0 28px;}}
@media(max-width:640px){.wrap{padding:0 20px;}}

:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:2px;}

h1,h2,h3,h4{font-family:var(--display); font-weight:500; line-height:1.15; color:var(--ink);}
h1{letter-spacing:-0.025em; font-weight:550;}
h2{letter-spacing:-0.02em; font-weight:540;}
h3{letter-spacing:-0.015em; font-weight:530;}
h4{letter-spacing:-0.01em;}

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--teal); font-weight:500; margin-bottom:var(--s-2);
}

/* ---- PAGE LOAD CURTAIN ---- */
.curtain{position:fixed; inset:0; background:var(--teal-deep); z-index:300; display:flex; align-items:center; justify-content:center; transition:transform .9s var(--ease-soft); transition-delay:.25s;}
.curtain.lift{transform:translateY(-100%);}
.curtain-mark{width:34px; height:34px; opacity:0; animation:curtainFade .6s ease forwards .15s;}
@keyframes curtainFade{to{opacity:1;}}

/* ---- BUTTONS ---- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600; font-size:14.5px;
  padding:15px 28px; border-radius:3px; cursor:pointer; border:1px solid transparent;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease-out), border-color .4s var(--ease-out), transform .35s var(--ease-out);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-soft);
}
.btn-primary{background:var(--teal); color:var(--paper);}
.btn-primary::before{background:var(--teal-deep);}
.btn-primary:hover::before{transform:scaleX(1);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-line{border-color:currentColor; color:var(--paper);}
.btn-line:hover{background:rgba(255,255,255,0.12);}
.btn-ghost{border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(0.97);}
.btn-secondary{background:var(--ink); color:var(--surface); border-color:var(--ink); font-size:13px; padding:11px 20px;}
.btn-secondary:hover{opacity:0.85; transform:translateY(-2px);}
.btn-secondary.outline{background:transparent; border:1px solid var(--line); color:var(--ink);}
.btn-secondary.outline:hover{background:rgba(255,255,255,0.06);}

/* ---- NAV ---- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--header-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--header-line);
  box-shadow:0 18px 36px -32px rgba(0,0,0,0.45);
  transition:background .4s var(--ease-out), border-color .4s var(--ease-out), transform .5s var(--ease-out);
}
header.scrolled{border-color:rgba(255,255,255,0.12);}
header.hide-nav{transform:translateY(-100%);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 32px 10px 10px; max-width:var(--maxw); margin:0 auto; gap:18px;}
@media(max-width:640px){.nav{padding:10px 14px 10px 6px; gap:10px;}}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-0.01em; padding-left:0; flex-shrink:0;}
.logo-mark-img{
  height:60px; width:auto; display:block; object-fit:contain; transform:scale(1.6); transform-origin:left center;
  transition:transform .35s var(--ease-out), filter .35s var(--ease-out);
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.14)); will-change:transform, filter;}
.logo:hover .logo-mark-img{transform:scale(1.22);}
@media(max-width:640px){.logo-mark-img{height:52px; transform:scale(1.25);} .logo:hover .logo-mark-img{transform:scale(1.12);}}
.navlinks{display:flex; align-items:center; gap:28px; white-space:nowrap;}
.navlinks a{font-size:12px; font-weight:500; color:var(--ink-soft); position:relative; transition:color .3s ease; letter-spacing:0.01em;}
.navlinks a::after{content:"";position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--teal); transition:width .35s var(--ease-out);}
.navlinks a:hover{color:var(--ink);}
.navlinks a:hover::after{width:100%;}
.navlinks a.is-current{color:var(--ink);}
.navlinks a.is-current::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:20px;}
.menu-btn{display:none; flex-direction:column; background:none; border:none; cursor:pointer; padding:6px; min-width:44px; min-height:44px; align-items:center; justify-content:center;}
@media(max-width:880px){ .navlinks{display:none;} .menu-btn{display:flex;} }
.menu-btn span{display:block; width:20px; height:1.5px; background:var(--ink); margin:5px 0; transition:transform .3s ease, opacity .3s ease;}

.mobile-menu{
  position:fixed; inset:0; background:var(--teal-deep); z-index:99; clip-path:circle(0% at calc(100% - 40px) 40px);
  transition:clip-path .55s var(--ease-soft); display:flex; flex-direction:column;
  justify-content:center; padding:48px;
  overflow:auto;
}
.mobile-menu.open{clip-path:circle(150% at calc(100% - 40px) 40px);}
.mobile-menu a{color:var(--paper); font-family:var(--display); font-size:30px; font-weight:500; letter-spacing:-0.015em; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.1); opacity:0; transform:translateX(20px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);}
.mobile-menu.open a{opacity:1; transform:translateX(0);}
.mobile-menu.open a:nth-child(2){transition-delay:.05s;}
.mobile-menu.open a:nth-child(3){transition-delay:.1s;}
.mobile-menu.open a:nth-child(4){transition-delay:.15s;}
.mobile-menu.open a:nth-child(5){transition-delay:.2s;}
.mobile-menu.open a:nth-child(6){transition-delay:.25s;}
.mobile-menu a.is-current{color:var(--teal);}
.mobile-close{position:absolute; top:16px; right:20px; background:none; border:none; color:var(--paper); font-size:28px; cursor:pointer; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;}
@media(max-width:640px){.mobile-menu{padding:88px 20px 30px;} .mobile-menu a{font-size:24px; padding:14px 0;} .mobile-close{top:12px; right:14px;}}

/* ---- HERO ---- */
.hero{
  position:relative; display:flex; align-items:center;
  min-height:100vh; padding:130px 0 70px; overflow:hidden; color:var(--paper);
}
.hero-media{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--teal-deep); will-change:transform;}
.hero-globe{position:absolute; top:50%; right:-6%; width:min(64vw,760px); height:min(64vw,760px); transform:translateY(-50%); z-index:1; opacity:0; transition:opacity 1.4s var(--ease-soft); pointer-events:none;}
.hero-globe.ready{opacity:0.55;}
.hero-globe canvas{display:block; width:100% !important; height:100% !important;}
@media(max-width:980px){.hero-globe{right:-22%; width:min(90vw,620px); height:min(90vw,620px); opacity:0.35;} .hero-globe.ready{opacity:0.35;}}
@media(max-width:640px){
  .hero{min-height:100dvh; padding:calc(108px + env(safe-area-inset-top)) 0 calc(54px + env(safe-area-inset-bottom));}
  .hero-globe{right:-34%; top:38%;}
  .hero-grid{padding:0 20px;}
  .hero-top{gap:18px; padding-bottom:18px;}
  .hero h1{font-size:clamp(38px, 10vw, 56px); line-height:0.98; max-width:100%;}
  .hero-meta{text-align:left;}
  .hero-meta p{margin-left:0; font-size:14px; line-height:1.6; max-width:100%;}
  .hero-bottom{gap:24px; padding-top:18px;}
  .hero-actions{flex-direction:column; align-items:stretch; gap:12px; margin-bottom:24px;}
  .hero-actions .btn{width:100%; justify-content:center; padding:14px 18px;}
  .hero-stats{display:grid; grid-template-columns:1fr; gap:16px;}
  .hero-stat{width:100%;}
  .hero-stat .num{font-size:30px;}
  .hero-stat .lbl{max-width:100%;}
  .schematic-wrap{top:0; width:min(100%, 420px); margin:0 auto;}
  .schematic-wrap .schematic{width:100%; height:auto; display:block;}
}
@media (prefers-reduced-motion: reduce){.hero-globe{display:none;}}
.hero-media video.hero-clip{
  position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:100%; height:100%;
  display:block; transform:translate(-50%,-50%) scale(1.08); object-fit:cover; object-position:center center;
  filter:brightness(1) saturate(1.05) contrast(1.1);
  opacity:0; transition:opacity 1.8s var(--ease-soft); z-index:1;
  animation:heroKenBurns 22s ease-in-out infinite alternate;
}
@media(max-width:640px){
  .hero-media video.hero-clip{
    width:100%; height:100%; min-width:100%; min-height:100%;
    object-position:center center;
    transform:translate(-50%,-50%) scale(1.01);
    filter:brightness(0.96) saturate(1.05) contrast(1.05);
    animation:none; /* a 16:9 band already upscales ~4x on a phone; Ken Burns turns it into mush */
  }
  .hero-media .scene-fallback{opacity:1;}
  .hero-media .scene-fallback.dimmed{opacity:0.12;}
  .hero-media video.hero-clip.active{opacity:0.9;}
}
/* Portrait 9:16 clips are chosen on tall/narrow screens (JS adds .is-portrait
   when it attaches videos/portrait/*). They already match a phone's aspect
   ratio, so the heavy cover-crop of the old 16:9 band is gone. Keep the zoom
   off for them on any small screen so the subject stays sharp and centered. */
.hero-media video.hero-clip.is-portrait{transform:translate(-50%,-50%) scale(1.01); animation:none; object-position:center center;}
.hero-media video.hero-clip.active{opacity:1; z-index:2;}
.hero-media video.hero-clip.poster-first{opacity:1;}
@keyframes heroKenBurns{
  0%{transform:translate(-50%,-50%) scale(1.08);}
  100%{transform:translate(-50%,-50%) scale(1.18) translateY(-1%);}
}
@media (prefers-reduced-motion: reduce){.hero-media video.hero-clip{animation:none;}}
.hero-media .scene-fallback{position:absolute; inset:0; transition:opacity 1.2s var(--ease-soft);}
.hero-media .scene-fallback.dimmed{opacity:0;}
.hero-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(155deg, rgba(4,14,15,0.82) 0%, rgba(8,28,29,0.62) 45%, rgba(10,34,35,0.5) 100%); box-shadow:inset 0 -120px 160px rgba(0,0,0,0.22);}
.hero-grain{position:absolute; inset:0; opacity:0.5; pointer-events:none; z-index:1; background-image:radial-gradient(circle at 85% 20%, rgba(27,138,141,0.18), transparent 45%), radial-gradient(circle at 8% 80%, rgba(124,162,76,0.12), transparent 50%);}

.hero-grid{display:grid; grid-template-columns:1fr; gap:var(--s-3); max-width:var(--maxw); margin:0 auto; padding:0 40px; position:relative; z-index:2;}
@media(max-width:640px){.hero-grid{padding:0 24px;}}
.hero-top{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:var(--s-3);}

.hero h1{font-size:var(--t-h1); max-width:880px; overflow:hidden; color:var(--paper); letter-spacing:-0.025em; text-shadow:0 2px 30px rgba(0,0,0,0.2);}
.hero h1 .line{display:block; overflow:hidden; padding-bottom:0.08em;}
.hero h1 .line span{display:block; transform:translateY(110%); animation:lineUp .9s var(--ease-out) forwards;}
@media(max-width:640px){.hero h1 .line{padding-bottom:0.04em;} .hero h1 .line span{display:inline; transform:none; animation:none;}}
.hero h1 .line:nth-child(1) span{animation-delay:.5s;}
.hero h1 .line:nth-child(2) span{animation-delay:.62s;}
@keyframes lineUp{to{transform:translateY(0);}}
.hero h1 em{font-style:italic; color:#7FC9CB; font-weight:500; font-optical-sizing:auto;}

.hero-meta{text-align:right; min-width:220px; opacity:0; transform:translateY(10px); animation:fadeUp .8s var(--ease-out) forwards .9s;}
.hero-meta p{color:rgba(251,250,247,0.82); font-size:15px; max-width:100%; margin-bottom:var(--s-3); margin-left:auto; text-shadow:0 1px 12px rgba(0,0,0,0.35);}
@media(max-width:940px){.hero-meta{min-width:auto;}}
@media(max-width:640px){.hero-meta{text-align:left;} .hero-meta p{margin-left:0;}}

.hero-bottom{display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--s-5); align-items:center; padding-top:var(--s-3);}
@media(max-width:980px){.hero-bottom{grid-template-columns:1fr; gap:var(--s-4);}}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:var(--s-4); opacity:0; transform:translateY(14px); animation:fadeUp .8s var(--ease-out) forwards 1.05s;}
@keyframes fadeUp{to{opacity:1; transform:translateY(0);}}
.hero .btn-ghost{border-color:rgba(251,250,247,0.35); color:var(--paper); background:rgba(255,255,255,0.04);}
.hero .btn-ghost:hover{border-color:var(--paper); background:rgba(255,255,255,0.08);}
.hero .btn-primary{background:var(--teal); color:var(--paper);}
.hero .btn-primary::before{background:var(--teal-deep);}
.hero .btn-primary:hover{color:var(--teal-deep);}
.hero-stats{display:flex; gap:var(--s-5); flex-wrap:wrap;}
.hero-stat{opacity:0; transform:translateY(14px); animation:fadeUp .8s var(--ease-out) forwards;}
.hero-stat:nth-child(1){animation-delay:1.15s;}
.hero-stat:nth-child(2){animation-delay:1.25s;}
.hero-stat:nth-child(3){animation-delay:1.35s;}
.hero-stat .num{font-family:var(--display); font-size:32px; font-weight:550; color:var(--paper); display:inline-block; text-shadow:0 1px 16px rgba(0,0,0,0.25);}
.hero-stat .lbl{font-family:var(--mono); font-size:11px; color:rgba(251,250,247,0.7); margin-top:4px; max-width:130px; line-height:1.5;}

.hero-brochure{margin-top:22px; opacity:0; transform:translateY(14px); animation:fadeUp .8s var(--ease-out) forwards 1.45s;}
.hero-brochure-btn{
  display:inline-flex; align-items:center; gap:12px; padding:12px 18px 12px 14px;
  background:rgba(255,255,255,0.045); border:1px solid rgba(251,250,247,0.22); border-radius:12px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); cursor:pointer;
  font-family:var(--body); text-align:left; transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.hero-brochure-btn:hover{border-color:rgba(127,201,203,0.55); background:rgba(255,255,255,0.075); transform:translateY(-2px);}
.hero-brochure-btn:active{transform:translateY(0);}
.hero-brochure-btn:disabled{opacity:0.6; cursor:default; transform:none;}
.hero-brochure-icon{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none;
  border-radius:50%; background:rgba(127,201,203,0.14); color:#7FC9CB; transition:background .3s ease, transform .3s ease;
}
.hero-brochure-icon svg{width:16px; height:16px;}
.hero-brochure-btn:hover .hero-brochure-icon{background:rgba(127,201,203,0.28); transform:translateY(1px);}
.hero-brochure-btn.is-downloading .hero-brochure-icon{animation:brochurePulse 1s ease-in-out infinite;}
@keyframes brochurePulse{0%,100%{transform:translateY(0); opacity:1;} 50%{transform:translateY(2px); opacity:0.6;}}
.hero-brochure-text{display:flex; flex-direction:column; gap:2px;}
.hero-brochure-title{font-size:14px; font-weight:600; color:var(--paper); letter-spacing:-0.01em;}
.hero-brochure-sub{font-family:var(--mono); font-size:10.5px; color:rgba(251,250,247,0.62); letter-spacing:0.01em;}
.hero-brochure-status{display:block; margin-top:8px; font-family:var(--mono); font-size:11px; color:#8BD4A0; min-height:14px; opacity:0; transition:opacity .3s ease;}
.hero-brochure-status.is-visible{opacity:1;}
@media(max-width:640px){
  .hero-brochure-btn{width:100%;}
}

.schematic-wrap{position:relative; top:-24px; opacity:0; transform:scale(.92); animation:scIn 1.1s var(--ease-out) forwards .7s;}
@keyframes scIn{to{opacity:1; transform:scale(1);}}

.scroll-hint{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; animation:fadeUp .8s var(--ease-out) forwards 1.6s;}
.scroll-hint span{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; color:rgba(251,250,247,0.6); text-transform:uppercase;}
.scroll-hint .wheel{width:18px; height:30px; border:1.4px solid rgba(251,250,247,0.4); border-radius:10px; position:relative;}
.scroll-hint .wheel::before{content:""; position:absolute; top:6px; left:50%; width:3px; height:6px; margin-left:-1.5px; background:rgba(251,250,247,0.7); border-radius:2px; animation:scrollDot 1.8s ease-in-out infinite;}
@keyframes scrollDot{0%{transform:translateY(0); opacity:1;} 70%{opacity:0;} 100%{transform:translateY(10px); opacity:0;}}

/* ---- HERO BRAND STAMP ---- */
.hero-brandstamp{
  position:absolute; left:0; right:0; bottom:108px; z-index:2; text-align:center;
  pointer-events:none; opacity:0; animation:stampIn 1.4s var(--ease-out) forwards 1.5s;
}
.hero-brandstamp .stamp-line{width:34px; height:1px; background:rgba(251,250,247,0.45); margin:0 auto 16px;}
.hero-brandstamp h2{
  font-family:var(--display); font-weight:500; font-style:italic; letter-spacing:-0.01em;
  font-size:clamp(22px, 3vw, 38px); color:rgba(251,250,247,0.92); text-shadow:0 2px 30px rgba(0,0,0,0.35);
}
.hero-brandstamp h2 .accent{color:#7FC9CB; font-style:italic;}
.hero-brandstamp .stamp-sub{
  font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(251,250,247,0.5); margin-top:10px;
}
@keyframes stampIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
@media(max-width:640px){.hero-brandstamp{bottom:92px;}}

.hero-brandstamp-static{
  position:relative; left:auto;right:auto;bottom:auto;
  padding:30px 0 1px; text-align:center;
  opacity:1; animation:none; pointer-events:auto;
}
.hero-brandstamp-static .stamp-line{background:var(--teal);}
.hero-brandstamp-static h2{color:var(--ink);}
.hero-brandstamp-static .accent{color:var(--teal);}
.hero-brandstamp-static .stamp-sub{color:var(--ink-soft);}

/* ---- CERT STRIP (marquee) ---- */
.cert-strip{border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); background:var(--cert-bg); padding:22px 0; overflow:hidden;}
.cert-track{display:flex; gap:48px; align-items:center; white-space:nowrap; animation:certScroll 28s linear infinite; width:max-content;}
.cert-strip:hover .cert-track{animation-play-state:paused;}
@keyframes certScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.cert-item{display:flex; align-items:center; justify-content:center; min-width:180px; height:70px; padding:0 14px; gap:12px; border-radius:16px; background:var(--cert-bg); box-shadow:0 6px 18px var(--cert-shadow); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out); color:inherit; cursor:default;}
.cert-item img{max-height:44px; max-width:90px; object-fit:contain; display:block; transition:transform .35s var(--ease-out);}
.cert-item small{font-family:var(--mono); font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.08em;}

/* ---- SECTION SCAFFOLDING ---- */
section{position:relative;}
.pad{padding:40px 0;}
@media(max-width:880px){.pad{padding:48px 0;}}
.section-head{max-width:620px; margin-bottom:36px;}
.section-head h2{font-size:var(--t-h2); margin-bottom:var(--s-2);}
.section-head p{color:#2d4545; font-size:16.5px; line-height:1.7;}
.section-head-right{display:flex; align-items:flex-start; justify-content:space-between; width:100%; gap:42px; flex-wrap:wrap; margin-bottom:var(--s-5);}
.section-head-logo{position:absolute; top:clamp(-36px, 1.5vw, -28px); right:clamp(-520px, -25vw, -160px); display:flex; align-items:center; justify-content:flex-end; width:clamp(320px, 28vw, 460px); z-index:2; transform:translateX(28px);}
.section-head-logo img{height:clamp(280px, 18vw, 380px); width:auto; display:block; filter:drop-shadow(0 32px 64px rgba(0,0,0,0.28));}
@media(max-width:880px){.section-head-right{flex-direction:column; align-items:flex-start;} .section-head-logo{position:static; top:auto; right:auto; transform:none; width:100%; margin-top:var(--s-4);} .section-head-logo img{width:100%; max-width:320px;}}
.row-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:var(--s-5);}
.row-head .section-head{margin-bottom:0;}
.row-head .count{font-family:var(--mono); font-size:12px; color:var(--ink-soft); text-align:right; white-space:nowrap;}

/* ---- PHILOSOPHY / WHY CHOOSE US ---- */
.philosophy{background:rgba(255,255,255,0.02);}
.why-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; margin-top:28px; align-items:stretch;}
.why-card{background:rgba(255,255,255,0.72); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%); border:1px solid var(--line); border-radius:18px; padding:28px 24px; box-shadow:0 8px 32px rgba(14,43,44,0.08), inset 0 0 0 1px rgba(255,255,255,0.6); height:100%; display:flex; flex-direction:column; justify-content:flex-start; position:relative; overflow:hidden; transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);}
.why-card::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(135deg, rgba(255,255,255,0.45) 0%, transparent 55%); opacity:0.6;}
.why-card:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(14,43,44,0.10), 0 24px 50px -18px rgba(14,43,44,0.28); border-color:var(--teal);}
.why-card h3{font-family:var(--display); font-size:22px; margin-bottom:10px; color:var(--teal-deep); line-height:1.25;}
.why-card p{color:var(--ink-soft); font-size:14.5px; line-height:1.75; margin:0;}
@media(max-width:980px){.why-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media(max-width:640px){.why-grid{grid-template-columns:1fr; gap:18px; margin-top:28px;}.why-card{padding:22px 18px;}}

.phil-inner{max-width:780px; margin:0 auto; text-align:center;}
.phil-inner .eyebrow{justify-content:center; display:flex;}
.phil-quote{font-family:var(--display); font-size:clamp(24px,3.2vw,38px); font-weight:500; line-height:1.35; color:var(--ink); font-style:italic; margin-bottom:var(--s-3);}
.phil-quote .word{display:inline-block; opacity:0.15; transition:opacity .6s var(--ease-out);}
.phil-quote .word.lit{opacity:1;}
.phil-cite{font-family:var(--mono); font-size:12px; color:var(--ink-soft); letter-spacing:0.04em;}
.phil-divider{width:1px; height:50px; background:var(--line); margin:var(--s-5) auto; position:relative; transform-origin:top; transform:scaleY(0); transition:transform .8s var(--ease-out);}
.phil-divider.in{transform:scaleY(1);}
.phil-text{color:var(--ink-soft); font-size:16.5px; max-width:650px; margin:0 auto; line-height:1.75;}
.phil-text strong{color:var(--ink); font-weight:600;}

/* ---- CARD ---- */
.card{
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:4px; padding:var(--s-4);
  transition:border-color .35s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  will-change:transform; box-shadow:0 18px 48px -22px rgba(0,0,0,0.4);
}
.card:hover{border-color:var(--teal); box-shadow:0 24px 56px -18px rgba(0,0,0,0.5);}

/* ---- PRODUCT FORK ---- */
.fork{background:rgba(255,255,255,0.02);}
.fork-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); position:relative;}
@media(max-width:880px){.fork-grid{grid-template-columns:1fr;}}
.fork-card{background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); padding:var(--s-5) var(--s-4); display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .55s var(--ease-out);}
.fork-card::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(27,138,141,0.05), transparent 60%); opacity:0; transition:opacity .5s ease;}
.fork-card:hover::before{opacity:1;}
.fork-card:hover{transform:translateY(-8px) scale(1.01);}
.fork-card .idx{font-family:var(--mono); font-size:12px; color:var(--teal); margin-bottom:var(--s-3); letter-spacing:0.08em;}
.fork-card h3{font-size:28px; margin-bottom:var(--s-2);}
.fork-card p{color:var(--ink-soft); font-size:15.5px; margin-bottom:var(--s-3); flex-grow:0; line-height:1.7;}
.fork-list{display:flex; flex-direction:column; gap:10px; margin-bottom:var(--s-4); border-top:1px solid var(--line-soft); padding-top:var(--s-3);}
.fork-list li{display:flex; gap:10px; font-size:14px; color:var(--ink); align-items:baseline;}
.fork-list li::before{content:"—"; color:var(--teal); flex-shrink:0;}
.fork-link{margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--ink); padding-top:var(--s-2); position:relative; z-index:1;}
.fork-link svg{transition:transform .35s var(--ease-out);}
.fork-card:hover .fork-link svg{transform:translateX(6px);}

/* ---- TECH RAIL ---- */
.pin-tech{background:rgba(255,255,255,0.02); position:relative; padding:var(--s-6) 0;}
.pin-tech .row-head{margin-bottom:var(--s-5);}
.pin-tech-track-wrap{overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; scroll-padding-inline:0;}
.pin-tech-track-wrap::-webkit-scrollbar{display:none;}
.pin-tech-track{display:flex; gap:28px; width:max-content;}
.pin-tech-rail{display:flex; align-items:center; gap:14px;}
.pin-tech-nav{display:flex; gap:8px;}
.pin-tech-nav button{width:42px; height:42px; border-radius:50%; border:1px solid rgba(14,43,44,0.14); background:var(--paper); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s var(--ease-out);}
.pin-tech-nav button:hover{background:#0E2B2C; color:#FBFAF7; border-color:#0E2B2C; transform:translateY(-2px);}
.pin-tech-nav button svg{width:16px; height:16px; display:block;}
.pin-tech-nav button:disabled{opacity:0.35; cursor:default; pointer-events:none;}
@media(max-width:640px){.pin-tech-nav button{width:38px; height:38px;}}
.pin-tech-card{
  width:min(78vw, 460px); flex-shrink:0; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column; scroll-snap-align:start;
  opacity:0.45; transform:scale(0.96);
  transition:transform .55s var(--ease-soft), box-shadow .5s var(--ease-out), opacity .55s var(--ease-soft), border-color .55s var(--ease-out);
}
.pin-tech-card.is-active{opacity:1; transform:scale(1); box-shadow:0 26px 50px -16px rgba(14,43,44,0.18);}
@media(max-width:880px){.pin-tech-card{opacity:1; transform:none;}}
.ptc-media{width:100%; height:260px; overflow:hidden; background:var(--teal-deep); position:relative; display:flex; align-items:center; justify-content:center;}
.ptc-media img{width:100%; height:100%; object-fit:contain; object-position:center; display:block; transition:transform .8s var(--ease-out);}
.pin-tech-card.is-active .ptc-media img{transform:scale(1.04);}
.ptc-copy{padding:var(--s-4);}
.ptc-copy .idx{font-family:var(--mono); font-size:11px; color:var(--teal); margin-bottom:var(--s-2); letter-spacing:0.1em;}
.ptc-copy h4{font-size:21px; margin-bottom:var(--s-2);}
.ptc-copy p{font-size:14px; color:var(--ink-soft); line-height:1.7; margin-bottom:var(--s-2);}
.pin-tech-progress{max-width:var(--maxw); margin:var(--s-4) auto 0; padding:0 40px; height:2px; background:var(--line); border-radius:2px; overflow:hidden;}
@media(max-width:880px){.pin-tech-progress{display:none;}}
.pin-tech-progress-bar{height:100%; width:0%; background:var(--teal); border-radius:2px; transition:width .55s var(--ease-soft), margin-left .55s var(--ease-soft);}

/* ---- TECHNOLOGY EXPLORER ---- */
.tech-explorer{background:rgba(255,255,255,0.02); padding:var(--s-6) 0; border-top:1px solid rgba(14,43,44,0.08);}
.tech-explorer-grid{display:grid; grid-template-columns:240px 1fr; gap:var(--s-5); align-items:start;}
@media(max-width:980px){.tech-explorer-grid{grid-template-columns:1fr;}}
.tech-tabs{display:grid; gap:12px; position:sticky; top:92px;}
.tech-tab{width:100%; text-align:left; background:rgba(255,255,255,0.03); border:1px solid rgba(14,43,44,0.09); color:var(--ink); border-radius:12px; padding:14px 16px; font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; transition:all .35s var(--ease-out);}
.tech-tab:hover, .tech-tab.active{background:#0E2B2C; color:#FBFAF7; border-color:#0E2B2C; transform:translateX(4px); box-shadow:0 12px 26px -18px rgba(14,43,44,0.5);}
.tech-panel{display:none; background:rgba(255,255,255,0.72); border:1px solid rgba(14,43,44,0.08); border-radius:18px; padding:var(--s-4); box-shadow:0 22px 50px -26px rgba(14,43,44,0.18);}
.tech-panel.active{display:block;}
.tech-summary{display:grid; grid-template-columns:220px 1fr; gap:var(--s-4); align-items:start; margin-bottom:var(--s-4);}
@media(max-width:760px){.tech-summary{grid-template-columns:1fr;}}
.tech-tag{font-family:var(--mono); font-size:10px; color:var(--teal); letter-spacing:0.1em; text-transform:uppercase; display:block; margin-bottom:8px;}
.tech-summary h3{font-size:30px; margin-bottom:8px;}
.tech-summary p{color:var(--ink-soft); font-size:14.5px; line-height:1.75; margin:0;}
.tech-flow-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:var(--s-4);}
@media(max-width:760px){.tech-flow-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media(max-width:540px){.tech-flow-grid{grid-template-columns:1fr;}}
.flow-block{background:linear-gradient(160deg, rgba(27,138,141,0.12), rgba(27,138,141,0.04)); border:1px solid rgba(14,43,44,0.08); border-radius:12px; padding:14px; position:relative; min-height:104px;}
.flow-block span{font-family:var(--mono); font-size:10px; color:var(--teal); letter-spacing:0.08em; display:block; margin-bottom:8px;}
.flow-block strong{display:block; font-size:15px; margin-bottom:6px;}
.flow-block small{color:var(--ink-soft); line-height:1.5; display:block;}
.tech-steps{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:760px){.tech-steps{grid-template-columns:1fr;}}
.tech-step{display:grid; grid-template-columns:46px 1fr; gap:12px; align-items:start; padding:14px; background:rgba(14,43,44,0.03); border-radius:12px; border:1px solid rgba(14,43,44,0.06);}
.step-no{font-family:var(--mono); font-size:11px; color:var(--teal); border:1px solid rgba(27,138,141,0.3); border-radius:999px; width:40px; height:40px; display:grid; place-items:center;}
.tech-step h5{margin:0 0 6px; font-size:15px;}
.tech-step p{margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.7;}

/* ---- PROCESS RAIL ---- */
.process{background:var(--teal-deep); color:var(--paper);}
.process .eyebrow{color:#7FC9CB;}
.process .section-head h2, .process h2{color:var(--paper);}
.process .section-head p{color:rgba(251,250,247,0.7);}
.process-toggle{display:flex; gap:8px; margin-bottom:var(--s-6); border:1px solid rgba(255,255,255,0.18); border-radius:30px; padding:4px; width:fit-content; position:relative;}
.toggle-glow{position:absolute; top:4px; left:4px; height:calc(100% - 8px); border-radius:24px; background:rgba(251,250,247,0.95); transition:transform .45s var(--ease-spring), width .45s var(--ease-spring); z-index:0;}
.toggle-btn{font-family:var(--mono); font-size:12px; font-weight:500; padding:9px 18px; border-radius:24px; border:none; background:transparent; color:rgba(251,250,247,0.6); cursor:pointer; transition:color .35s ease; position:relative; z-index:1;}
.toggle-btn.active{color:var(--teal-deep);}
.process-panel{display:none;}
.process-panel.active{display:block;}
.rail{position:relative; padding-left:28px;}
.rail::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:rgba(251,250,247,0.18);}
.rail::after{content:""; position:absolute; left:5px; top:6px; width:1px; height:0; background:#7FC9CB; transition:height 1.2s var(--ease-out);}
.rail.in::after{height:calc(100% - 12px);}
.rail-step{display:grid; grid-template-columns:90px 1fr; gap:var(--s-3); padding:var(--s-3) 0; position:relative; opacity:0; transform:translateX(-12px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
.rail.in .rail-step{opacity:1; transform:translateX(0);}
.rail.in .rail-step:nth-child(1){transition-delay:.1s;}
.rail.in .rail-step:nth-child(2){transition-delay:.25s;}
.rail.in .rail-step:nth-child(3){transition-delay:.4s;}
.rail.in .rail-step:nth-child(4){transition-delay:.55s;}
.rail.in .rail-step:nth-child(5){transition-delay:.7s;}
.rail-step::before{content:""; position:absolute; left:-28px; top:24px; width:11px; height:11px; border-radius:50%; background:var(--teal-deep); border:1.5px solid #7FC9CB; transition:transform .45s var(--ease-spring), box-shadow .4s ease;}
.rail-step:hover::before{transform:scale(1.5); box-shadow:0 0 0 8px rgba(127,201,203,0.22);}
.rail-step:not(:last-child){border-bottom:1px solid rgba(251,250,247,0.1);}
.rail-step .when{font-family:var(--mono); font-size:12px; color:#7FC9CB; padding-top:2px;}
.rail-step h5{font-family:var(--body); font-size:17px; font-weight:600; color:var(--paper); margin-bottom:6px;}
.rail-step p{font-size:14px; color:rgba(251,250,247,0.72); max-width:520px; line-height:1.7;}

/* ---- MACHINES ---- */
.machines{background:rgba(255,255,255,0.02);}
.machine-row{display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--s-6); align-items:center; padding:var(--s-6) 0; border-top:1px solid var(--line);}
.machine-row:last-child{border-bottom:1px solid var(--line);}
@media(max-width:880px){
  .machine-row{grid-template-columns:1fr; gap:var(--s-4);}
}
.machine-art{display:flex; align-items:center; justify-content:center; padding:var(--s-4) 0;}
.machine-photo-frame{
  width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden; position:relative;
  box-shadow:0 32px 72px -30px rgba(0,0,0,0.38); background:rgba(255,255,255,0.03); will-change:transform;
  --mp-scale:1.1; --mp-y:0px;
}
.machine-photo-frame img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(var(--mp-scale,1)) translateY(var(--mp-y,0px)); transition:transform .8s var(--ease-out);}
.machine-row:hover .machine-photo-frame{--mp-scale:1.18;}
.machine-copy .tag-line{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--teal); text-transform:uppercase; font-weight:500; margin-bottom:var(--s-2);}
.machine-copy h3{font-size:28px; margin-bottom:var(--s-2);}
.machine-copy p.desc{color:var(--ink-soft); font-size:15.5px; margin-bottom:var(--s-3); max-width:480px; line-height:1.7;}
.spec-row{display:flex; gap:var(--s-5); margin-bottom:var(--s-3); flex-wrap:wrap;}
.spec-item .k{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em;}
.spec-item .v{font-family:var(--display); font-size:21px; font-weight:550; color:var(--ink); margin-top:2px; letter-spacing:-0.01em;}

/* ---- ETP ---- */
.etp{background:rgba(255,255,255,0.02); position:relative; overflow:hidden;}
.etp-intro{display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--s-6); align-items:end; margin-bottom:var(--s-5);}
@media(max-width:880px){.etp-intro{grid-template-columns:1fr; gap:var(--s-3);}}
.etp-intro-copy p{color:#2d4545; font-size:15.5px; line-height:1.75;}
.etp-types-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-2); margin-bottom:var(--s-6);}
@media(max-width:980px){.etp-types-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.etp-types-grid{grid-template-columns:1fr;}}
.etp-type-card .idx{font-family:var(--mono); font-size:10.5px; color:var(--teal); letter-spacing:0.08em; margin-bottom:var(--s-2);}
.etp-type-card h4{font-size:18px; margin-bottom:8px; line-height:1.3;}
.etp-type-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}
.etp-type-fit{font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft);}

.etp-slider{position:relative; outline:none; border-radius:6px;}
.etp-track-wrap{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none;}
.etp-track-wrap::-webkit-scrollbar{display:none;}
.etp-track{display:flex; gap:var(--s-2); width:max-content;}
.etp-machine-card{
  width:300px; flex-shrink:0; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:6px; overflow:hidden; scroll-snap-align:start;
  opacity:0.45; transform:scale(0.96); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .5s var(--ease-out);
}
.etp-machine-card.is-active{opacity:1; transform:scale(1); box-shadow:0 18px 36px -14px rgba(14,43,44,0.16);}
.etp-photo{width:100%; aspect-ratio:4/3; background:linear-gradient(155deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.etp-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.etp-machine-body{padding:18px 18px 20px;}
.etp-machine-body .etp-stage{font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); display:inline-block; margin-bottom:8px;}
.etp-machine-body h4{font-size:16.5px; margin-bottom:6px; line-height:1.3;}
.etp-machine-body p{font-size:13px; color:var(--ink-soft); line-height:1.6;}
.etp-progress{max-width:300px; margin-top:var(--s-3); height:2px; background:var(--line); border-radius:2px; overflow:hidden;}
.etp-progress-bar{height:100%; width:12.5%; background:var(--teal); border-radius:2px; transition:width .5s var(--ease-soft), margin-left .5s var(--ease-soft);}

/* ---- ABOUT ---- */
.about{background:rgba(255,255,255,0.02);}
.about-grid{display:grid; grid-template-columns:0.7fr 1.3fr; gap:var(--s-6); align-items:start;}
@media(max-width:880px){.about-grid{grid-template-columns:1fr; gap:var(--s-4);}}
.founder{padding-right:var(--s-3);}
.founder-photo{width:100%; max-width:220px; aspect-ratio:3/4; border-radius:10px; overflow:hidden; margin-bottom:var(--s-4); background:rgba(255,255,255,0.03); box-shadow:0 22px 56px -22px rgba(0,0,0,0.32);}
.founder-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.founder-line{width:36px; height:1px; background:var(--ink); margin-bottom:var(--s-3); transform-origin:left; transform:scaleX(0); transition:transform .7s var(--ease-out);}
.founder-line.in{transform:scaleX(1);}
.founder h4{font-size:21px; margin-bottom:2px;}
.founder .role{font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:0.06em; margin-bottom:var(--s-3); text-transform:uppercase;}
.founder blockquote{font-family:var(--display); font-style:italic; font-size:19px; color:var(--ink); line-height:1.4;}
.about-copy p{color:#2d4545; font-size:16px; margin-bottom:var(--s-3); line-height:1.8;}
.about-copy strong{color:var(--ink); font-weight:600;}
.about-copy h2{font-size:var(--t-h2); margin-bottom:var(--s-3);}
.about-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:var(--s-4);}
.about-tag{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); border:1px solid var(--line); padding:7px 14px; border-radius:20px; transition:all .38s var(--ease-out);}
.about-tag:hover{border-color:var(--teal); color:var(--teal); transform:translateY(-3px) scale(1.04); box-shadow:0 0 0 3px rgba(27,138,141,0.18), 0 4px 16px rgba(27,138,141,0.2);}

/* ---- CLIENTS ---- */
.clients{background:var(--teal-deep); padding:var(--s-6) 0; overflow:hidden;}
.clients .eyebrow{color:#7FC9CB;}
.clients h2{color:var(--paper); font-size:var(--t-h2);}
.clients .section-head p{color:rgba(251,250,247,0.7);}
.marquee{position:relative;}
.marquee::before, .marquee::after{content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2;}
.marquee::before{left:0; background:linear-gradient(to right, var(--teal-deep), transparent);}
.marquee::after{right:0; background:linear-gradient(to left, var(--teal-deep), transparent);}
.marquee-track{display:flex; gap:18px; animation:scrollMarquee 50s linear infinite; width:max-content;}
.marquee-track.reverse{animation-direction:reverse; animation-duration:44s;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scrollMarquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.logo-card{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:150px; width:172px;
  background:#FBFAF7; border:1px solid rgba(14,43,44,0.06); border-radius:14px;
  padding:8px 10px; box-shadow:0 12px 28px rgba(0,0,0,0.22);
  transition:border-color .35s var(--ease-out), background .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  will-change:transform, box-shadow;
}
.logo-card:hover{border-color:rgba(79,209,208,0.75); background:#FFFFFF; transform:translateY(-6px) scale(1.02); box-shadow:0 20px 46px rgba(0,0,0,0.34);}
.logo-card img{max-width:100%; max-height:112px; width:auto; height:auto; border-radius:8px; display:block; transition:transform .35s var(--ease-out);}
.logo-card:hover img{transform:scale(1.04);}
.logo-card small{font-family:var(--mono); font-size:9.5px; letter-spacing:0.12em; color:rgba(14,43,44,0.6); font-weight:600; text-transform:uppercase;}
.marquee-row{margin-bottom:18px;}

/* ---- RATINGS & REVIEWS (verified buyer reviews, sourced from IndiaMART) ---- */
.reviews{background:rgba(255,255,255,0.03);}
.rating-summary{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-5); align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:32px var(--s-4); margin-bottom:var(--s-5); box-shadow:0 18px 48px -30px rgba(14,43,44,0.25);
}
@media(max-width:880px){.rating-summary{grid-template-columns:1fr; text-align:center;}}
.rating-score-block{display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding-right:var(--s-4); border-right:1px solid var(--line-soft);}
@media(max-width:880px){.rating-score-block{align-items:center; border-right:none; padding-right:0; padding-bottom:var(--s-3); border-bottom:1px solid var(--line-soft);}}
.rating-score{font-family:var(--display); font-size:52px; line-height:1; color:var(--ink); font-weight:500;}
.rating-score span{font-size:20px; color:var(--ink-soft); font-weight:400;}
.rating-stars{color:#D6A244; font-size:16px; letter-spacing:2px; margin:4px 0;}
.rating-count{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em;}
.rating-bars{display:flex; flex-direction:column; gap:8px; padding:0 var(--s-4);}
@media(max-width:880px){.rating-bars{padding:var(--s-3) 0;}}
.rating-bar-row{display:grid; grid-template-columns:26px 1fr 36px; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);}
.bar-track{height:6px; background:var(--line-soft); border-radius:4px; overflow:hidden;}
.bar-fill{height:100%; background:linear-gradient(90deg, var(--teal), #D6A244); border-radius:4px;}
.rating-metrics{display:flex; flex-direction:column; gap:14px; padding-left:var(--s-4); border-left:1px solid var(--line-soft);}
@media(max-width:880px){.rating-metrics{flex-direction:row; justify-content:center; flex-wrap:wrap; padding-left:0; border-left:none; padding-top:var(--s-3); border-top:1px solid var(--line-soft);}}
.metric-chip{display:flex; flex-direction:column; align-items:flex-start; min-width:88px;}
@media(max-width:880px){.metric-chip{align-items:center;}}
.metric-chip strong{font-family:var(--display); font-size:20px; color:var(--teal); font-weight:500;}
.metric-chip small{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em;}
.review-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
@media(max-width:980px){.review-grid{grid-template-columns:repeat(2, 1fr);}}
@media(max-width:640px){.review-grid{grid-template-columns:1fr;}}
.review-card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:24px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.review-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(14,43,44,0.28); border-color:var(--teal);}
.review-stars{color:#D6A244; font-size:14px; letter-spacing:2px;}
.review-text{font-size:14.5px; color:var(--ink); line-height:1.7; flex-grow:1;}
.review-footer{display:flex; align-items:center; gap:12px; border-top:1px solid var(--line-soft); padding-top:14px;}
.review-avatar{flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--teal-deep); color:var(--paper); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:15px; font-weight:500;}
.review-footer strong{font-size:13.5px; color:var(--ink); display:block;}
.review-footer small{font-size:11.5px; color:var(--ink-soft); display:block; margin-top:1px; letter-spacing:0.02em;}
.reviews-source{text-align:center; margin-top:var(--s-4); font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:0.04em;}
.reviews-source a{color:var(--teal);}

/* ---- CTA BAND ---- */
.cta-band{background:rgba(255,255,255,0.92); padding:56px 0 74px; border-top:1px solid rgba(14,43,44,0.08); position:relative; overflow:hidden;}
.cta-inner{display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
.cta-inner h2{font-size:var(--t-h2); max-width:480px; color:var(--ink); line-height:1.2;}

/* ---- CONTACT / FORM ---- */
.contact{background:rgba(255,255,255,0.02);}
.contact-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--s-6);}
@media(max-width:980px){.contact-grid{grid-template-columns:1fr; gap:var(--s-5);}}
@media(max-width:640px){.contact-grid{gap:var(--s-4);}}
.office{padding:var(--s-3) 0; border-bottom:1px solid var(--line);}
.office:first-child{padding-top:0;}
.office .tag{font-family:var(--mono); font-size:11px; color:var(--teal); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px;}
.office .addr{font-size:14.5px; color:var(--ink-soft); line-height:1.75; max-width:400px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); margin-bottom:var(--s-2);}
@media(max-width:720px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:var(--s-3);}
.field label{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; border:none; border-bottom:1px solid var(--line); border-radius:0; padding:14px 10px; font-family:var(--body);
  font-size:16px; color:var(--ink); background:transparent; transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--ink); outline:none;}
.submit-btn{margin-top:var(--s-2); width:100%;}
.form-msg{display:none; margin-top:14px; font-size:13.5px; color:var(--teal); font-weight:600;}
.direct-contacts{display:flex; gap:24px; flex-wrap:wrap; margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line);}
.direct-contacts a{font-size:13.5px; font-weight:500; color:var(--ink-soft);}
.direct-contacts a:hover{color:var(--ink);}

/* ---- SECTION TITLE ---- */
.section-title{position:relative; display:inline-block;}
.section-title::after{content:''; position:absolute; left:0; bottom:-10px; height:2px; width:0; background:linear-gradient(90deg, #1B8A8D, #7CA24C); transition:width 1s var(--ease-out);}
.section-title.in::after{width:64px;}

/* ---- FOOTER ---- */
footer{background:linear-gradient(160deg, #0E2B2C 0%, #183D3E 40%, #0E2B2C 100%); color:rgba(251,250,247,0.75); padding:var(--s-5) 0 var(--s-3); position:relative; overflow:hidden;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s-4); margin-bottom:var(--s-5);}
@media(max-width:780px){.footer-grid{grid-template-columns:1fr 1fr; gap:var(--s-3);}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h5{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(251,250,247,0.85); margin-bottom:var(--s-2);}
.footer-grid ul li{margin-bottom:10px; font-size:13.5px; color:rgba(251,250,247,0.65);}
.footer-grid ul li a{color:rgba(251,250,247,0.65); transition:color .3s ease;}
.footer-grid ul li a:hover{color:#7FC9CB;}
.footer-logo-card{display:inline-block; background:transparent; border:none; padding:0; border-radius:0; margin-bottom:4px;}
.footer-logo-card img{height:48px; width:auto; display:block; transform:scale(1.55); transform-origin:left center; transition:transform .4s var(--ease-out), filter .4s var(--ease-out); filter:drop-shadow(0 10px 24px rgba(0,0,0,0.08));}
.footer-logo-card:hover img{transform:scale(1.7);}
.footer-brand p{font-size:13.5px; max-width:260px; margin-top:var(--s-2); color:rgba(251,250,247,0.7); line-height:1.7;}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:var(--s-3); border-top:1px solid rgba(251,250,247,0.12); font-size:12.5px; color:rgba(251,250,247,0.6);}

/* ---- BACK TO TOP ---- */
.totop{position:fixed; right:28px; bottom:28px; width:46px; height:46px; border-radius:50%; background:var(--teal-deep); display:flex; align-items:center; justify-content:center; z-index:80; opacity:0; transform:translateY(12px) scale(.9); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out); cursor:pointer;}
.totop.show{opacity:1; transform:translateY(0) scale(1);}

/* ---- WHATSAPP FLOATER ---- */
.whatsapp-float{
  position:fixed; right:24px; bottom:84px; z-index:85; width:52px; height:52px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(37,211,102,0.35); cursor:pointer; opacity:0; transform:scale(0.8);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), box-shadow .3s;
  animation:whatsappPulse 2.5s ease-in-out infinite;
}
.whatsapp-float.show{opacity:1; transform:scale(1);}
.whatsapp-float:hover{box-shadow:0 6px 24px rgba(37,211,102,0.5); transform:scale(1.08);}
@keyframes whatsappPulse{0%,100%{box-shadow:0 4px 18px rgba(37,211,102,0.35);} 50%{box-shadow:0 4px 28px rgba(37,211,102,0.55);}}
.whatsapp-float svg{width:26px; height:26px; fill:#fff;}

/* ---- REVEAL ---- */
.reveal{opacity:0; transform:translateY(28px); filter:blur(6px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out);}
.reveal.in{opacity:1; transform:translateY(0); filter:blur(0);}
.reveal-left{opacity:0; transform:translateX(-36px); filter:blur(6px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);}
.reveal-left.in{opacity:1; transform:translateX(0); filter:blur(0);}
.reveal-right{opacity:0; transform:translateX(36px); filter:blur(6px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);}
.reveal-right.in{opacity:1; transform:translateX(0); filter:blur(0);}
.stagger > *{opacity:0; transform:translateY(24px); filter:blur(4px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out);}
.stagger.in > *{opacity:1; transform:translateY(0); filter:blur(0);}
.stagger.in > *:nth-child(1){transition-delay:0s;}
.stagger.in > *:nth-child(2){transition-delay:.08s;}
.stagger.in > *:nth-child(3){transition-delay:.16s;}
.stagger.in > *:nth-child(4){transition-delay:.24s;}
.stagger.in > *:nth-child(5){transition-delay:.32s;}
.stagger.in > *:nth-child(6){transition-delay:.4s;}
.stagger.in > *:nth-child(7){transition-delay:.48s;}
.stagger.in > *:nth-child(8){transition-delay:.56s;}

em, i{font-optical-sizing:auto;}
::selection{background:var(--teal); color:var(--paper); text-shadow:none;}

/* ---- RESPONSIVE ---- */
@media(max-width:980px){
  body{font-size:15px; line-height:1.75;}
  .nav{padding:12px 24px 12px 10px;}
  .logo-mark-img{max-height:52px;}
  .hero{padding:100px 0 32px;}
  .hero{padding-top:140px !important;}
  .hero h1{font-size:clamp(32px, 8vw, 52px);}
  .hero-meta{min-width:auto;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn{width:100%; justify-content:center;}
  .hero-stats{flex-direction:column; align-items:flex-start;}
  .section-head-logo{position:static; top:auto; right:auto; transform:none; width:100%; margin-top:var(--s-4);}
  .section-head-logo img{width:100%; max-width:320px;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
  .cta-inner h2{max-width:100%;}
  .mobile-menu{padding:100px 32px 32px;}
  .mobile-menu a{font-size:24px;}
}
@media(max-width:780px){
  .nav{padding:12px 18px 12px 10px;}
  .hero{padding:88px 0 28px; min-height:auto;}
  .hero{padding-top:125px !important;}
  .hero-actions{gap:12px;}
  .hero h1{font-size:clamp(28px, 10vw, 44px); line-height:1.15;}
  .hero-meta p{font-size:14px; max-width:100%;}
  .cert-strip{padding:18px 0;}
  .cert-item{min-width:150px; height:62px;}
  .pin-tech-card{width:min(82vw,460px);}
  .etp-machine-card{width:min(82vw,300px);}
  .form-row{grid-template-columns:1fr;}
  .field input, .field select, .field textarea{font-size:16px; padding:14px 10px;}
  .btn{padding:13px 18px;}
}
@media(max-width:640px){
  .nav{padding:12px 14px 12px 10px;}
  .logo-mark-img{max-height:48px;}
  .hero{min-height:100dvh; padding:calc(92px + env(safe-area-inset-top)) 0 calc(44px + env(safe-area-inset-bottom));}
  .hero{padding-top:calc(110px + env(safe-area-inset-top)) !important;}
  .hero-top{gap:20px; padding-bottom:20px;}
  .hero-grid{padding:0 20px;}
  .hero h1{font-size:clamp(26px, 12vw, 38px); line-height:1.15;}
  .hero-meta{margin-bottom:var(--s-4);}
  .hero-actions{gap:10px; flex-direction:column; align-items:stretch;}
  .hero-actions .btn{width:100%; justify-content:center; font-size:14px; padding:13px 18px;}
  .hero-stats{gap:18px;}
  .hero-stat .num{font-size:28px;}
  .hero-stat .lbl{max-width:100%;}
  .scroll-hint{bottom:16px;}
  .hero-brandstamp{bottom:78px;}
  .pin-tech-track-wrap{padding-inline:16px;}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:8px;}
  .totop{right:18px; bottom:18px;}
  .whatsapp-float{right:18px; bottom:74px; width:46px; height:46px;}
  .whatsapp-float svg{width:22px; height:22px;}
  .mobile-menu{padding:90px 20px 30px;}
}
@media (orientation: landscape) and (max-height:720px){
  .hero{min-height:auto; padding:72px 0 30px;}
  .hero h1{font-size:clamp(30px, 5vw, 48px);}
  .hero-actions{flex-direction:row; flex-wrap:wrap; gap:12px;}
  .hero-actions .btn{width:auto;}
  .hero-stats{flex-direction:row; flex-wrap:wrap; gap:18px;}
  .hero-brandstamp{bottom:62px;}
  .mobile-menu{padding:70px 24px 24px;}
}
@media (min-width:1200px){
  .wrap{padding:0 56px;}
  .nav{padding:14px 36px 14px 12px;}
  .hero{padding:130px 0 70px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ---- TESTIMONIALS ---- */
.testimonials{background:rgba(255,255,255,0.02);}
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:880px){.testimonial-grid{grid-template-columns:1fr;}}
.testimonial-card{
  background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:28px 24px;
  box-shadow:0 10px 30px rgba(14,43,44,0.06); position:relative;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.testimonial-card:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(14,43,44,0.10);}
.testimonial-card blockquote{font-style:italic; font-size:15px; color:var(--ink); line-height:1.75; margin-bottom:18px; font-weight:450;}
.testimonial-card blockquote::before{content:"\201C"; font-size:32px; color:var(--teal); font-family:var(--display); line-height:1;}
.testimonial-author{display:flex; align-items:center; gap:12px; border-top:1px solid var(--line-soft); padding-top:14px;}
.testimonial-author img{width:40px; height:40px; border-radius:50%; object-fit:cover;}
.testimonial-author strong{font-size:14px; color:var(--ink); display:block;}
.testimonial-author small{font-size:11.5px; color:var(--ink-soft); display:block; margin-top:1px; letter-spacing:0.03em;}

/* ---- REVIEWS ---- */
.reviews-section{background:var(--surface);}
.reviews-summary{
  display:flex; align-items:center; gap:32px; flex-wrap:wrap;
  padding:28px 32px; margin-bottom:32px; border-radius:16px;
  background:var(--white); border:1px solid var(--line-soft);
  box-shadow:0 10px 30px rgba(14,43,44,0.05);
}
.reviews-score{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:130px;}
.reviews-score-num{font-family:var(--display); font-size:40px; font-weight:500; color:var(--ink); line-height:1;}
.reviews-score-stars{color:#E0A62C; font-size:16px; letter-spacing:2px; margin:4px 0 2px;}
.reviews-score small{font-size:12.5px; color:var(--ink-soft);}
.reviews-breakdown{flex:1; min-width:200px; display:flex; flex-direction:column; gap:4px;}
.reviews-breakdown-row{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-soft);}
.reviews-breakdown-row span:first-child{width:38px; flex-shrink:0;}
.reviews-breakdown-row span:last-child{width:28px; flex-shrink:0; text-align:right;}
.reviews-breakdown-bar{flex:1; height:6px; border-radius:99px; background:var(--line-soft); overflow:hidden;}
.reviews-breakdown-bar i{display:block; height:100%; background:#E0A62C; border-radius:99px;}
.reviews-summary .btn{white-space:nowrap; margin-left:auto;}
@media(max-width:720px){.reviews-summary{flex-direction:column; align-items:stretch;} .reviews-summary .btn{margin-left:0;}}

.review-list{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:880px){.review-list{grid-template-columns:1fr;}}
.review-card{
  background:var(--white); border:1px solid var(--line-soft); border-radius:16px;
  padding:24px; transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.review-card:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(14,43,44,0.10);}
.review-card .review-stars{color:#E0A62C; font-size:14px; letter-spacing:2px; margin-bottom:10px;}
.review-card p{font-size:14.5px; color:var(--ink); line-height:1.7; margin-bottom:16px;}
.review-card .review-meta{display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line-soft); padding-top:12px;}
.review-card .review-meta strong{font-size:13.5px; color:var(--ink); display:block;}
.review-card .review-meta small{font-size:11.5px; color:var(--ink-soft); display:block; margin-top:1px;}
.review-card .review-date{font-size:11px; color:var(--ink-soft); white-space:nowrap;}

.review-list-actions{display:flex; flex-direction:column; align-items:center; margin-top:28px; gap:10px;}
.review-list-empty{font-size:14px; color:var(--ink-soft);}

.review-form-overlay{
  position:fixed; inset:0; z-index:400; background:rgba(14,43,44,0.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(2px);
}
.review-form-overlay[hidden]{display:none;}
.review-form-card{
  background:var(--white); border-radius:18px; padding:32px; width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 30px 70px rgba(14,43,44,0.25);
}
.review-form-card h3{font-size:22px; margin-bottom:20px;}
.review-form-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:transparent; font-size:20px; line-height:1;
  color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.review-form-close:hover{background:var(--mist); color:var(--ink);}
.review-field{margin-bottom:16px; display:flex; flex-direction:column; gap:6px;}
.review-field label{font-size:12.5px; font-weight:600; color:var(--ink); letter-spacing:0.01em;}
.review-field .optional{font-weight:400; color:var(--ink-soft);}
.review-field input[type="text"], .review-field textarea{
  border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:14px;
  font-family:var(--body); color:var(--ink); background:var(--paper); resize:vertical;
}
.review-field input[type="text"]:focus, .review-field textarea:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}
.review-form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:520px){.review-form-row{grid-template-columns:1fr;}}
.star-picker{display:flex; gap:6px;}
.star-btn{
  background:none; border:none; font-size:30px; line-height:1; cursor:pointer;
  color:var(--line); transition:color .15s ease, transform .15s ease; padding:0;
}
.star-btn:hover{transform:scale(1.12);}
.star-btn.is-active, .star-btn.is-hover{color:#E0A62C;}
.review-submit-btn{width:100%; margin-top:6px; justify-content:center;}
.review-form-status{margin-top:12px; font-size:13px; text-align:center;}

/* ---- FAQ ---- */
.faq-section{background:rgba(255,255,255,0.02);}
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line); padding:4px 0;}
.faq-item summary{
  font-family:var(--body); font-size:17px; font-weight:600; color:var(--ink);
  padding:12px 0; cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; transition:color .3s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:20px; color:var(--teal); font-weight:400; transition:transform .3s ease;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item summary:hover{color:var(--teal);}
.faq-answer{padding:0 0 14px; color:#2d4545; font-size:15px; line-height:1.75; max-width:660px;}

/* ---- BROCHURE ---- */
.brochure-card{
  background:linear-gradient(135deg, var(--teal-deep), #1a3e3f); border-radius:18px; padding:48px;
  color:var(--paper); text-align:center; box-shadow:0 20px 50px rgba(14,43,44,0.2);
}
.brochure-card h3{font-size:28px; color:var(--paper); margin-bottom:12px;}
.brochure-card p{color:rgba(251,250,247,0.78); font-size:16px; max-width:520px; margin:0 auto 24px; line-height:1.7;}
.brochure-card .btn-primary{background:var(--paper); color:var(--teal-deep);}
.brochure-card .btn-primary::before{background:rgba(255,255,255,0.15);}
.brochure-card .btn-primary:hover{color:var(--paper);}

/* ---- SAVINGS CALCULATOR ---- */
.calculator{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:36px; max-width:820px; margin:0 auto; box-shadow:0 10px 30px rgba(14,43,44,0.06);}
.calculator h3{font-size:24px; margin-bottom:24px; text-align:center;}
.calc-row{margin-bottom:20px;}
.calc-row label{display:block; font-size:14px; font-weight:600; color:var(--ink-soft); margin-bottom:8px;}
.calc-row input[type=range]{width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:3px; background:linear-gradient(to right, var(--teal) 0%, var(--teal) var(--fill,0%), var(--line) var(--fill,0%), var(--line) 100%); outline:none;}
.calc-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--teal); cursor:pointer; box-shadow:0 2px 8px rgba(27,138,141,0.3);}
.calc-row input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--teal); cursor:pointer; border:none; box-shadow:0 2px 8px rgba(27,138,141,0.3);}
.calc-display{font-family:var(--display); font-size:18px; color:var(--teal); font-weight:600; display:inline-block; margin-top:6px;}
.calc-results{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line);}
@media(max-width:860px){.calc-results{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.calc-results{grid-template-columns:repeat(2,1fr);}}
.calc-metric{text-align:center; padding:16px; border-radius:12px; background:var(--mist);}
.calc-metric .calc-num{font-family:var(--display); font-size:28px; font-weight:600; color:var(--teal); display:block;}
.calc-metric .calc-label{font-size:12.5px; color:var(--ink-soft); display:block; margin-top:4px;}

/* ---- PRICING CALCULATOR ---- */
.calc-toggle-group{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px; border:1px solid var(--line); border-radius:30px; padding:4px; width:fit-content; max-width:100%; position:relative; background:var(--mist);}
.calc-tiers{display:flex; justify-content:space-between; margin-top:6px; font-family:var(--mono); font-size:10px; color:var(--ink-soft); letter-spacing:0.02em;}
.calc-note{font-size:12.5px; color:var(--ink-soft); text-align:center; margin-top:14px; line-height:1.5;}
.calc-toggle-bg{position:absolute; top:0; left:0; border-radius:24px; background:var(--paper); box-shadow:0 1px 6px rgba(14,43,44,0.10); transition:transform .4s cubic-bezier(.34,1.56,.64,1), width .4s cubic-bezier(.34,1.56,.64,1), height .4s cubic-bezier(.34,1.56,.64,1); z-index:0;}
.calc-toggle-btn{font-family:var(--mono); font-size:12px; font-weight:600; padding:8px 22px; border-radius:24px; border:none; background:transparent; color:var(--ink-soft); cursor:pointer; transition:color .35s ease; position:relative; z-index:1; letter-spacing:0.06em;}
.calc-toggle-btn.active{color:var(--teal-deep);}
.calc-pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px;}
@media(max-width:640px){.calc-pricing{grid-template-columns:1fr;}}
.calc-pricing-card{text-align:center; padding:20px 14px; border-radius:14px; background:var(--mist); border:1px solid var(--line-soft); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);}
.calc-pricing-card:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(14,43,44,0.08);}
.calc-pricing-card--total{background:rgba(27,138,141,0.08); border-color:var(--teal);}
.calc-pricing-label{display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; letter-spacing:0.03em;}
.calc-pricing-num{display:block; font-family:var(--display); font-size:22px; font-weight:600; color:var(--teal);}
.calc-pricing-card--total .calc-pricing-num{font-size:26px; color:var(--teal-deep);}
@media(max-width:520px){.calc-metric .calc-num{font-size:22px;}}

/* ---- PORTFOLIO GALLERY ---- */
.portfolio{background:rgba(255,255,255,0.02);}
.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:880px){.portfolio-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.portfolio-grid{grid-template-columns:1fr;}}
.portfolio-card{
  border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--paper);
  cursor:pointer; transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.portfolio-card:hover{transform:translateY(-4px); box-shadow:0 14px 36px rgba(14,43,44,0.12);}
.portfolio-card img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
.portfolio-body{padding:16px 18px 18px;}
.portfolio-body h4{font-size:17px; margin-bottom:4px;}
.portfolio-body .portfolio-meta{font-size:12px; color:var(--ink-soft); margin-bottom:6px;}
.portfolio-body p{font-size:13.5px; color:var(--ink-soft); line-height:1.7;}

/* ---- LIGHTBOX ---- */
.lightbox{position:fixed; inset:0; z-index:500; background:rgba(14,43,44,0.92); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .4s ease; backdrop-filter:blur(8px);}
.lightbox.open{opacity:1; pointer-events:all;}
.lightbox img{max-width:90vw; max-height:85vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,0.5);}
.lightbox-close{position:absolute; top:24px; right:28px; color:var(--paper); font-size:32px; cursor:pointer; background:none; border:none; padding:8px; line-height:1;}

/* ---- BEFORE/AFTER COMPARISON ---- */
.comparison{position:relative; border-radius:14px; overflow:hidden; cursor:ew-resize; user-select:none; max-width:680px; margin:0 auto;}
.comparison img{display:block; width:100%; height:auto;}
.comparison-overlay{position:absolute; inset:0; overflow:hidden; width:50%;}
.comparison-overlay img{height:100%; width:auto; max-width:none; position:absolute; left:0; top:0;}
.comparison-handle{position:absolute; top:0; bottom:0; left:50%; width:3px; background:var(--paper); transform:translateX(-50%); z-index:2;}
.comparison-handle::before{content:""; position:absolute; top:50%; left:50%; width:32px; height:32px; border-radius:50%; background:var(--paper); transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,0.3);}

/* ---- POPUP / OVERLAY ---- */
.popup-overlay{position:fixed; inset:0; z-index:1000; background:rgba(14,43,44,0.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .5s var(--ease-out);}
.popup-overlay.active{opacity:1; pointer-events:all;}
.popup-card{background:var(--paper); border-radius:20px; max-width:520px; width:90%; max-height:90vh; overflow-y:auto; padding:40px 36px; box-shadow:0 40px 80px rgba(0,0,0,0.3); position:relative; transform:translateY(30px) scale(0.96); transition:transform .5s var(--ease-out);}
.popup-overlay.active .popup-card{transform:translateY(0) scale(1);}
.popup-close{position:absolute; top:16px; right:18px; background:none; border:none; font-size:24px; cursor:pointer; color:var(--ink-soft); padding:4px 8px; line-height:1; border-radius:6px; transition:background .3s, color .3s;}
.popup-close:hover{background:var(--mist); color:var(--ink);}
.popup-badge{display:inline-block; background:rgba(27,138,141,0.1); color:var(--teal); font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; padding:5px 12px; border-radius:20px; margin-bottom:16px; font-weight:600;}
.popup-card h2{font-size:26px; margin-bottom:8px; line-height:1.2; letter-spacing:-0.02em;}
.popup-card p{color:#2d4545; font-size:15px; line-height:1.7; margin-bottom:20px;}
.popup-features{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px;}
@media(max-width:480px){.popup-features{grid-template-columns:1fr;}}
.popup-feat{background:var(--mist); border-radius:12px; padding:14px; text-align:center;}
.popup-feat strong{display:block; font-size:13px; color:var(--ink); margin-bottom:2px;}
.popup-feat small{font-size:11.5px; color:#2d4545; display:block; line-height:1.4;}
.popup-actions{display:flex; gap:12px; flex-wrap:wrap;}
.popup-actions .btn{flex:1; justify-content:center;}
@media(max-width:480px){.popup-actions{flex-direction:column;}}
.popup-timer-text{font-size:11px; color:var(--ink-soft); text-align:center; margin-top:14px; font-family:var(--mono);}
.popup-brand{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.popup-brand img{height:36px; width:auto; display:block;}
.popup-brand span{font-family:var(--display); font-weight:600; font-size:16px; color:var(--teal-deep);}

/* ---- FOOTER VIDEO BACKGROUND ---- */
footer{position:relative; overflow:hidden;}
.footer-bg{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--teal-deep);}
/* object-fit:cover + explicit 100% width/height fills the container on every
   device and browser. The previous width:auto;height:auto;aspect-ratio combo
   let some mobile/tablet engines render the video as a small letterboxed box
   instead of covering the whole footer. */
.footer-bg video{position:absolute; inset:0; width:100%; height:100%; min-width:100%; min-height:100%; object-fit:cover; object-position:center center; display:block; opacity:0.25; pointer-events:none;}
.footer-bg .footer-bg-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,43,44,0.7) 0%, rgba(14,43,44,0.88) 100%);}
.footer-grid, .footer-bottom, .footer-brand{position:relative; z-index:1;}