:root{
  --ink:#0A2226;
  --reservoir:#103C46;
  --reservoir-deep:#071B20;
  --aqua:#6FD8C4;
  --clay:#B1552E;
  --mist:#F4F7F4;
  --paper:#FBFBF8;
  --granite:#59645F;
  --line: rgba(10,34,38,0.1);
  --line-light: rgba(255,255,255,0.14);
  --serif: 'Spectral', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--mist);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;letter-spacing:-0.01em;}
.container{max-width:1180px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--aqua);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--aqua);}
.eyebrow.dark{color:var(--clay);}
.eyebrow.dark::before{background:var(--clay);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;}

/* ===== NAV ===== */
header.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:20px 0;
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.site-nav.scrolled{
  background:rgba(244,247,244,0.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-color:var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;}
.brand-logo{height:40px;width:auto;display:block;transition:filter .35s ease;}
header.site-nav.scrolled .brand-logo{filter:invert(1);}
.nav-links{display:flex;gap:36px;list-style:none;}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--paper);opacity:0.85;
  transition:opacity .25s ease, color .35s ease;position:relative;
}
header.site-nav.scrolled .nav-links a{color:var(--ink);}
.nav-links a:hover{opacity:1;}
.nav-links a.active{opacity:1;}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--aqua);
}
.wa-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--aqua);color:var(--reservoir-deep);
  font-size:13px;font-weight:600;
  padding:10px 18px;border-radius:100px;
  transition:transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.wa-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(111,216,196,0.35);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--paper);margin:5px 0;transition:.3s;}
header.site-nav.scrolled .nav-toggle span{background:var(--ink);}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{
  max-height:0;overflow:hidden;background:var(--paper);
  transition:max-height .35s ease;border-top:1px solid transparent;
}
@media (min-width: 981px){
  .mobile-menu{display:none;}
}
.mobile-menu.open{max-height:320px;border-top-color:var(--line);}
.mobile-menu ul{list-style:none;padding:8px 32px 20px;}
.mobile-menu a{
  display:block;padding:14px 0;font-size:15px;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-menu a.active{color:var(--clay);}

/* ===== HERO ===== */
.hero{
  position:relative;min-height:100svh;
  background:radial-gradient(ellipse at 50% -10%, #1A5364 0%, var(--reservoir) 45%, var(--reservoir-deep) 100%);
  color:var(--paper);
  display:flex;align-items:center;
  overflow:hidden;
  padding-top:100px;padding-bottom:60px;
}
.hero-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}
/* ambient rain — a quiet nod to the brand (drawn on canvas by main.js), sitting
   between the background gradient and the grain/content layers */
.hero-rain{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .hero-rain{display:none;}
}
.hero .container{position:relative;z-index:3;display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;}
.hero h1{
  font-size:clamp(34px, 5.4vw, 60px);
  font-weight:400;
  color:var(--paper);
  max-width:620px;
}
.hero h1 em{font-style:italic;color:var(--aqua);font-weight:400;}
.hero p.lede{
  margin-top:22px;max-width:480px;font-size:17px;color:rgba(251,251,248,0.78);
}
.hero-actions{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}
.btn-primary{
  background:var(--clay);color:var(--paper);padding:14px 26px;border-radius:100px;
  font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(177,85,46,0.4);}
.btn-ghost{
  border:1px solid var(--line-light);color:var(--paper);padding:14px 26px;border-radius:100px;
  font-weight:600;font-size:14.5px;transition:border-color .2s ease, background .2s ease;
}
.btn-ghost:hover{border-color:var(--aqua);background:rgba(111,216,196,0.08);}
.hero-bottle-visual{
  position:relative;z-index:3;
  height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}
.hero-bottle-img{
  width:100%;
  max-width:340px;
  height:auto;
  max-height:58vh;
  object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(2,10,12,0.5));
}
/* hero-bottle-duo.png is a true transparent cutout (two products side by
   side), so it needs no background vignette — just a bit more width. */
.hero-bottle-duo{
  max-width:420px;
}
.hero-porthole-label{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;
}
.porthole-caption{
  font-family:var(--mono);font-size:11.5px;color:rgba(251,251,248,0.55);
  letter-spacing:0.04em;max-width:260px;line-height:1.7;
}
.porthole-depth{
  font-family:var(--mono);font-size:13px;color:var(--aqua);letter-spacing:0.06em;
}
@media (max-width:980px){
  .hero-bottle-img{max-width:220px;max-height:38vh;}
  .hero-bottle-duo{max-width:280px;}
}

/* ===== HERO — scroll-fill bottle (built, not wired in yet — see below) ===== */
.hero-visual{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.bottle-fill-scene{
  position:relative;
  width:min(58vw, 230px);
  filter:drop-shadow(0 22px 28px rgba(2,10,12,0.45));
}
.bottle-fill-frame{
  position:relative;
  aspect-ratio: var(--bottle-ar, 0.625);
  overflow:hidden;
  clip-path:polygon(38% 0%, 62% 0%, 62% 8%, 85% 19%, 89% 95%, 82% 100%, 18% 100%, 11% 95%, 15% 19%, 38% 8%);
}
.bottle-water{
  position:absolute;inset:0;
  background:linear-gradient(180deg, #8fe3d3 0%, #2f8f95 42%, #123e46 100%);
  clip-path:inset(100% 0 0 0);
  transition:clip-path .15s linear;
  will-change:clip-path;
}
.bottle-water .wave-strip{
  position:absolute;top:-8px;left:0;width:200%;height:18px;display:flex;
  animation:waveScroll 4.2s linear infinite;
}
.bottle-water .wave-strip svg{flex:0 0 50%;width:50%;height:100%;display:block;}
@keyframes waveScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.bottle-cutout{position:absolute;inset:0;width:100%;height:100%;display:block;}
.bottle-shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 28%, rgba(255,255,255,0.4) 45%, transparent 62%);
  mix-blend-mode:screen;
}
.bottle-fill-shadow{
  width:64%;height:16px;margin:2px auto 0;
  background:radial-gradient(ellipse at center, rgba(2,10,12,0.5), transparent 72%);
  filter:blur(3px);
}
.bottle-fill-readout{
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(251,251,248,0.6);text-align:center;
}
.bottle-fill-readout b{color:var(--aqua);font-size:15px;font-weight:600;letter-spacing:0;}
@media (max-width:980px){
  .hero-visual{margin-top:12px;}
  .bottle-fill-scene{width:min(46vw, 190px);}
}
@media (prefers-reduced-motion: reduce){
  .wave-strip{animation:none;}
}
.scroll-cue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:rgba(251,251,248,0.5);text-transform:uppercase;
}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(to bottom, rgba(251,251,248,0.6), transparent);animation:scrolldrop 2s ease-in-out infinite;}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ===== PAGE HERO (About / Process / Contact banners) ===== */
.page-hero{
  position:relative;min-height:42vh;
  background:radial-gradient(ellipse at 50% -10%, #1A5364 0%, var(--reservoir) 45%, var(--reservoir-deep) 100%);
  color:var(--paper);
  display:flex;align-items:center;
  overflow:hidden;
  padding-top:150px;padding-bottom:56px;
}
.page-hero .container{position:relative;z-index:3;}
.page-hero h1{font-size:clamp(30px, 4.6vw, 48px);color:var(--paper);max-width:640px;}
.page-hero p.lede{margin-top:18px;max-width:520px;font-size:16.5px;color:rgba(251,251,248,0.75);}
.page-hero .breadcrumb{
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(251,251,248,0.5);margin-top:22px;display:flex;gap:8px;align-items:center;
}
.page-hero .breadcrumb a{color:var(--aqua);}
.page-hero .breadcrumb a:hover{text-decoration:underline;}

/* ===== BANNER SLIDER ===== */
.banner-slider{position:relative;background:var(--reservoir-deep);}
.slider-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.slider-track::-webkit-scrollbar{display:none;}
.slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;}
.slide img{width:100%;height:clamp(160px,32vw,420px);object-fit:cover;display:block;}
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line-light);
  background:rgba(7,27,32,0.55);backdrop-filter:blur(4px);color:var(--paper);
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.slider-arrow:hover{background:rgba(7,27,32,0.8);border-color:var(--aqua);}
.slider-arrow.prev{left:16px;}
.slider-arrow.next{right:16px;}
.slider-dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:2;
  display:flex;justify-content:center;gap:8px;
}
.slider-dot{
  width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(251,251,248,0.4);transition:background .25s ease, transform .25s ease;
}
.slider-dot.active{background:var(--aqua);transform:scale(1.3);}
@media (max-width:640px){
  .slider-arrow{width:34px;height:34px;font-size:18px;}
  .slider-arrow.prev{left:10px;}
  .slider-arrow.next{right:10px;}
}
@media (max-width:480px){
  .slider-arrow{display:none;}
}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ===== ABOUT ===== */
.about{padding:120px 0 100px;background:var(--mist);}
.about .grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:center;}
.about-visual{
  aspect-ratio:4/5;border-radius:6px;overflow:hidden;position:relative;
  background:linear-gradient(155deg, var(--reservoir) 0%, var(--reservoir-deep) 100%);
}
.about-visual svg, .about-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.about h2{font-size:clamp(28px,3.4vw,40px);max-width:520px;}
.about p{margin-top:20px;color:var(--granite);font-size:16px;max-width:520px;}
.about .founder-tag{
  margin-top:32px;display:flex;align-items:center;gap:14px;padding-top:24px;border-top:1px solid var(--line);
  max-width:520px;
}
.founder-tag .initials{
  width:44px;height:44px;border-radius:50%;background:var(--reservoir);color:var(--aqua);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:600;flex-shrink:0;
}
.founder-tag .who strong{display:block;font-size:14.5px;}
.founder-tag .who span{font-size:13px;color:var(--granite);}

/* ===== STATS ===== */
.stats{background:var(--reservoir-deep);color:var(--paper);padding:72px 0;}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.stat h3{font-family:var(--mono);font-size:clamp(28px,4vw,44px);color:var(--aqua);font-weight:600;letter-spacing:-0.01em;}
.stat p{margin-top:8px;font-size:13.5px;color:rgba(251,251,248,0.65);max-width:180px;}
.stat{border-left:1px solid var(--line-light);padding-left:24px;}

/* ===== RESERVOIR SECTION ===== */
.reservoir-section{padding:120px 0;background:var(--reservoir);color:var(--paper);position:relative;overflow:hidden;}
.reservoir-section .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.reservoir-section h2{font-size:clamp(28px,3.4vw,40px);color:var(--paper);max-width:480px;}
.reservoir-section p{margin-top:18px;color:rgba(251,251,248,0.72);max-width:460px;font-size:16px;}
.reservoir-facts{display:flex;flex-direction:column;gap:16px;margin-top:32px;}
.reservoir-fact{display:flex;gap:14px;align-items:flex-start;}
.reservoir-fact .dot{width:7px;height:7px;border-radius:50%;background:var(--aqua);margin-top:8px;flex-shrink:0;}
.reservoir-fact p{margin:0;font-size:14.5px;color:rgba(251,251,248,0.85);}
.tank-diagram{position:relative;}
.tank-diagram svg{width:100%;height:auto;}

/* ===== WHY CARDS ===== */
.why{padding:110px 0;background:var(--mist);}
.section-head{max-width:560px;margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);}
.section-head p{margin-top:16px;color:var(--granite);font-size:16px;}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.why-card{background:var(--paper);padding:36px 28px;transition:background .25s ease;}
.why-card:hover{background:#fff;}
.why-card .num{font-family:var(--mono);font-size:12px;color:var(--clay);margin-bottom:20px;}
.why-card h3{font-size:19px;font-weight:600;margin-bottom:10px;}
.why-card p{font-size:14px;color:var(--granite);}

/* ===== PROCESS ===== */
.process{padding:120px 0;background:var(--ink);color:var(--paper);}
.process .section-head h2{color:var(--paper);}
.process .section-head p{color:rgba(251,251,248,0.65);}
.stage{margin-bottom:56px;}
.stage:last-child{margin-bottom:0;}
.stage-label{
  display:flex;align-items:baseline;gap:14px;margin-bottom:24px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--aqua);
}
.stage-label .stage-n{color:var(--clay);}
.stage-label::after{content:"";flex:1;height:1px;background:var(--line-light);}
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.steps-row.cols-3{grid-template-columns:repeat(3,1fr);}
.steps-row.cols-2{grid-template-columns:repeat(2,1fr);}
.step-card{
  border:1px solid var(--line-light);padding:22px 20px;border-radius:4px;
  transition:border-color .25s ease, background .25s ease;
}
.step-card:hover{border-color:var(--aqua);background:rgba(111,216,196,0.04);}
.step-card .n{font-family:var(--mono);font-size:22px;color:var(--aqua);opacity:0.5;margin-bottom:14px;}
.step-card h4{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--paper);font-family:var(--sans);}
.step-card p{font-size:12.8px;color:rgba(251,251,248,0.6);line-height:1.55;}

/* ===== PRODUCTS — native scroll-snap full-screen slides ===== */
.products{padding:100px 0 0;background:var(--mist);}
.products > .container{padding-bottom:56px;}

/* the viewport: each slide inside occupies exactly one screen. Smooth motion here is
   driven entirely by JS (main.js) with its own easing — CSS `scroll-snap-type: mandatory`
   was tried first, but it fights a JS-animated scrollTop by snapping instantly on every
   intermediate frame, which is what turned the transition into a hard jump-cut. Without
   it, JS is free to glide the scroll position smoothly across the full duration. */
.product-snap{
  position:relative;
  height:100svh;
  overflow-y:scroll;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:var(--reservoir-deep);
}
.product-snap::-webkit-scrollbar{display:none;}
.product-snap:focus-visible{outline:2px solid var(--aqua);outline-offset:-4px;}

.product-slide{
  height:100%;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
}

/* ===== visual side — full-bleed, edge to edge, no card ===== */
.product-visual{
  position:relative;
  height:100%;
  overflow:hidden;
  background:var(--reservoir-deep);
}
.p-media{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(1.08);
  transition:transform 3.5s cubic-bezier(.2,.6,.2,1);
}
.product-slide.in-view .p-media{transform:scale(1);}
.product-slide:first-child .p-media{transform:scale(1);}

/* darken the base of the photo so it reads as sitting on water */
.product-visual::after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(7,27,32,0.55) 0%, transparent 32%);
}

/* continuous drifting light sheen — a cheap "water" ambience, only animated on the visible slide */
.water-sheen{
  position:absolute;inset:-20% -60%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, transparent 42%, rgba(255,255,255,0.16) 50%, transparent 58%);
  mix-blend-mode:overlay;
  animation:sheen-sweep 8s ease-in-out infinite;
  animation-play-state:paused;
}
.product-slide.in-view .water-sheen{animation-play-state:running;}
@keyframes sheen-sweep{
  0%,100%{transform:translateX(-25%);}
  50%{transform:translateX(25%);}
}

/* ===== details side — each slide carries its own single card, so there is nothing for it
   to ever overlap with; it just fades/slides in the moment its slide snaps into view ===== */
.product-details-wrap{
  width:100%;height:100%;
  display:flex;align-items:center;
  padding:0 clamp(28px, 6vw, 88px);
  background:var(--mist);
}
.p-detail{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s ease .1s, transform .6s ease .1s;
}
.product-slide.in-view .p-detail{opacity:1;transform:none;}
.product-slide:first-child .p-detail{opacity:1;transform:none;}
.p-index{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:0.1em;color:var(--aqua);margin-bottom:14px;
}
.p-tag{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--clay);background:rgba(177,85,46,0.08);padding:5px 12px;border-radius:100px;margin-bottom:16px;
}
.p-detail h3{font-size:clamp(30px,3.6vw,44px);color:var(--ink);}
.p-detail p{margin-top:14px;max-width:420px;font-size:16px;color:var(--granite);}

/* progress dots — sit outside the scrolling slides, so they stay fixed on screen */
.product-dots{
  position:absolute;right:32px;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:10px;
}
.product-dots span{
  width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s ease, transform .3s ease;
}
.product-dots span.active{background:var(--clay);transform:scale(1.4);}

@media (prefers-reduced-motion: reduce){
  .p-media, .p-detail{transition-duration:0.01ms !important;}
  .water-sheen{animation:none !important;opacity:0.4;}
}

@media (max-width:980px){
  .product-slide{grid-template-columns:1fr;grid-template-rows:42vh 1fr;}
  .product-details-wrap{padding:36px 0;}
  .product-dots{right:16px;}
}
@media (max-width:560px){
  .product-slide{grid-template-rows:36vh 1fr;}
}

/* ===== TESTIMONIALS ===== */
.testimonials{padding:110px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.t-card{background:var(--paper);padding:32px 28px;}
.t-card .quote-mark{font-family:var(--serif);font-size:40px;color:var(--aqua);line-height:1;margin-bottom:6px;}
.t-card p.quote{font-size:15.5px;font-style:italic;font-family:var(--serif);color:var(--ink);}
.t-card .who{margin-top:20px;font-size:13px;font-weight:600;color:var(--granite);font-family:var(--sans);}

/* ===== EXPLORE / CROSS-LINK CARDS ===== */
.explore{padding:100px 0;background:var(--paper);border-top:1px solid var(--line);}
.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.explore-card{
  background:var(--mist);padding:40px 32px;transition:background .25s ease;display:flex;flex-direction:column;gap:14px;
}
.explore-card:hover{background:#fff;}
.explore-card .eyebrow{margin-bottom:0;}
.explore-card h3{font-size:21px;}
.explore-card p{font-size:14px;color:var(--granite);flex:1;}
.explore-card .go{font-family:var(--mono);font-size:12.5px;color:var(--clay);letter-spacing:0.04em;}

/* ===== FAQ ===== */
.faq{padding:110px 0;background:var(--mist);}
.faq-list{max-width:760px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--serif);font-size:18px;color:var(--ink);
}
.faq-q .plus{font-family:var(--mono);font-size:18px;color:var(--clay);transition:transform .3s ease;flex-shrink:0;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{padding-bottom:24px;color:var(--granite);font-size:15px;max-width:600px;}

/* ===== CONTACT ===== */
.contact{padding:120px 0 100px;background:var(--reservoir-deep);color:var(--paper);}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.contact h2{color:var(--paper);font-size:clamp(28px,3.4vw,40px);}
.contact .section-head p{color:rgba(251,251,248,0.65);}
.field{margin-bottom:18px;}
.field label{display:block;font-size:12.5px;font-family:var(--mono);letter-spacing:0.05em;color:var(--aqua);margin-bottom:8px;text-transform:uppercase;}
.field input, .field textarea{
  width:100%;background:rgba(255,255,255,0.05);border:1px solid var(--line-light);border-radius:4px;
  padding:13px 14px;color:var(--paper);font-family:var(--sans);font-size:14.5px;
}
.field input::placeholder, .field textarea::placeholder{color:rgba(251,251,248,0.35);}
.field input:focus, .field textarea:focus{outline:none;border-color:var(--aqua);background:rgba(255,255,255,0.08);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.submit-note{font-size:12.5px;color:rgba(251,251,248,0.5);margin-top:6px;}
.contact-info{padding-left:12px;border-left:1px solid var(--line-light);}
.contact-block{margin-bottom:32px;}
.contact-block h4{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--aqua);margin-bottom:10px;}
.contact-block p, .contact-block a{font-size:15px;color:rgba(251,251,248,0.85);display:block;}
.contact-block a:hover{color:var(--aqua);}

/* ===== FOOTER ===== */
footer{background:var(--ink);color:rgba(251,251,248,0.6);padding:48px 0;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-brand{display:flex;flex-direction:column;gap:10px;}
.footer-logo{height:34px;width:auto;display:block;}
.brand-badges{display:flex;gap:8px;align-items:center;}
.brand-badge{height:20px;width:auto;border-radius:4px;display:block;}
footer .copy{font-size:12.5px;}
footer .foot-links{display:flex;gap:22px;list-style:none;}
footer .foot-links a{font-size:13px;color:rgba(251,251,248,0.6);}
footer .foot-links a:hover{color:var(--aqua);}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .hero .container{grid-template-columns:1fr;text-align:left;}
  .hero-porthole-label{display:none;}
  .about .grid, .reservoir-section .grid, .contact .grid{grid-template-columns:1fr;}
  .stats .grid{grid-template-columns:repeat(2,1fr);row-gap:32px;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .steps-row, .steps-row.cols-3, .steps-row.cols-2{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .t-grid{grid-template-columns:1fr;}
  .explore-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .contact-info{border-left:none;padding-left:0;border-top:1px solid var(--line-light);padding-top:32px;}
}
@media (max-width: 560px){
  .container{padding:0 20px;}
  .why-grid, .steps-row, .steps-row.cols-3, .steps-row.cols-2{grid-template-columns:1fr;}
  .stats .grid{grid-template-columns:1fr 1fr;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  footer .footer-inner{flex-direction:column;align-items:flex-start;}
}