/* ============================================================
   RainSoft of Boston — shared design system
   Soft blue + white + slate. Calm, premium, conversion-focused.
   ============================================================ */

:root{
  --brand-50:#f1f8fd;
  --brand-100:#e1f0fb;
  --brand-200:#bce0f6;
  --brand-300:#86c8ef;
  --brand-400:#4aabe4;
  --brand-500:#2391d6;
  --brand-600:#1675b8;
  --brand-700:#155e95;
  --brand-800:#174f79;
  --brand-900:#193f60;
  --ink:#0f2233;
  --slate:#475569;
  --slate-soft:#64748b;
}

html{scroll-behavior:smooth;}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--slate);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.display{
  font-family:"Inter Tight","Inter",system-ui,sans-serif;
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1.05;
}

/* Accounts for the sticky nav when jumping to #anchors */
[id]{scroll-margin-top:150px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:600;border-radius:9999px;line-height:1;
  transition:transform .18s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease;
  white-space:nowrap;cursor:pointer;
}
.btn-primary{
  background:var(--brand-600);color:#fff;
  padding:.95rem 1.6rem;font-size:1rem;
  box-shadow:0 10px 24px -10px rgba(22,117,184,.65);
}
.btn-primary:hover{background:var(--brand-700);transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(22,117,184,.8);}
.btn-ghost{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);
  padding:.9rem 1.45rem;backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:rgba(255,255,255,.22);transform:translateY(-2px);}
.btn-sm{padding:.7rem 1.2rem;font-size:.9rem;}

/* ---------- Eyebrow / pills ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:700;
  color:var(--brand-700);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brand-400);border-radius:2px;}

/* ---------- Nav ---------- */
.nav-shell{transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;}
.nav-scrolled{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 rgba(15,34,51,.06), 0 8px 30px -18px rgba(15,34,51,.25);
}
.nav-link{position:relative;color:var(--slate);font-weight:500;transition:color .2s;white-space:nowrap;}
.nav-link:hover{color:var(--brand-700);}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--brand-500);
  transition:width .25s ease;border-radius:2px;
}
.nav-link:hover::after{width:100%;}

/* Homepage nav sits over a dark hero until scrolled — keep tabs legible (light over hero, dark on the white bar) */
.nav-overhero:not(.nav-scrolled){background:linear-gradient(180deg,rgba(15,34,51,.55) 0%,rgba(15,34,51,0) 100%);}
.nav-overhero:not(.nav-scrolled) .nav-link{color:#fff;}
.nav-overhero:not(.nav-scrolled) .nav-link:hover{color:#fff;}
.nav-overhero:not(.nav-scrolled) .nav-link::after{background:#fff;}
.nav-overhero:not(.nav-scrolled) a[href^="tel:"]{color:rgba(255,255,255,.92);}
.nav-overhero:not(.nav-scrolled) a[href^="tel:"]:hover{color:#fff;}
.nav-overhero:not(.nav-scrolled) [data-burger]{color:#fff;}

/* ---------- Backgrounds & flourishes ---------- */
.wash{background:linear-gradient(180deg,#f6fbff 0%,#ffffff 60%);}
.wash-blue{background:linear-gradient(160deg,var(--brand-50) 0%, #eaf5fd 45%, #ffffff 100%);}
.orb{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;
  background:radial-gradient(circle at 30% 30%, var(--brand-300), transparent 70%);
}
.card{
  background:#fff;border:1px solid #eef3f8;border-radius:24px;
  box-shadow:0 1px 2px rgba(15,34,51,.04), 0 18px 40px -28px rgba(15,34,51,.25);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(22,117,184,.45);}

/* Editorial service tile */
.tile-img{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.tile:hover .tile-img{transform:scale(1.06);}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Form ---------- */
.field{
  width:100%;border:1px solid #d8e3ee;background:#fff;border-radius:14px;
  padding:.95rem 1.05rem;font-size:1rem;color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.field::placeholder{color:#9bb0c2;}
.field:focus{outline:none;border-color:var(--brand-400);box-shadow:0 0 0 4px rgba(74,171,228,.18);}
.field-label{font-size:.82rem;font-weight:600;color:var(--slate);margin-bottom:.4rem;display:block;}

/* Animated droplet in hero */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.floaty{animation:floaty 6s ease-in-out infinite;}

/* Transparent product renders float cleanly on any background */
.product-shadow{filter:drop-shadow(0 26px 34px rgba(15,34,51,.20));}

/* ============================================================
   Apple-style product/system pages
   ============================================================ */
.appl-eyebrow{display:inline-block;font-size:.95rem;font-weight:600;color:var(--brand-600);letter-spacing:.01em;margin-bottom:1rem;}
.appl-display{font-family:"Inter Tight","Inter",sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1.03;color:var(--ink);}
.appl-sub{color:var(--slate);font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.55;}
.appl-section{padding-top:clamp(4.5rem,11vw,8.5rem);padding-bottom:clamp(4.5rem,11vw,8.5rem);}
.appl-kicker{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.18;color:var(--ink);font-family:"Inter Tight",sans-serif;}
.appl-kicker .muted{color:#9fb3c4;}

/* gradient washes for big sections */
.wash-soft{background:radial-gradient(1200px 600px at 50% -10%, #eaf5fd 0%, #ffffff 60%);}

/* scroll-reveal variants — reuse the .reveal IntersectionObserver in site.js */
.reveal.rv-scale{transform:scale(.92);}
.reveal.rv-scale.in{transform:none;}
.reveal.rv-left{transform:translateX(-46px);}
.reveal.rv-left.in{transform:none;}
.reveal.rv-right{transform:translateX(46px);}
.reveal.rv-right.in{transform:none;}
.reveal.rv-blur{filter:blur(16px);}
.reveal.rv-blur.in{filter:blur(0);}
.reveal.rv-slow{transition-duration:1s;}

/* pinned sticky media for scroll-storytelling */
.sticky-media{position:sticky;top:9rem;}
@media (max-width:1023px){.sticky-media{position:static;top:auto;}}

/* big spec numbers */
.spec-num{font-family:"Inter Tight",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:.95;color:var(--ink);}

/* sticky Free Water Test bar (Apple "buy bar" equivalent) */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;transform:translateY(130%);
  transition:transform .42s cubic-bezier(.2,.7,.2,1);
  background:rgba(255,255,255,.86);backdrop-filter:saturate(150%) blur(14px);
  border-top:1px solid rgba(15,34,51,.08);box-shadow:0 -10px 30px -20px rgba(15,34,51,.4);}
.cta-bar.show{transform:none;}

/* ---------- Scroll-zoom: house → room ---------- */
.zoom-scene{position:relative;}                 /* tall; height set inline (e.g. 320vh) */
.zoom-stage{position:sticky;top:0;height:100vh;overflow:hidden;
  background:linear-gradient(180deg,#e9f4fd 0%,#f5fbff 55%,#ffffff 100%);}
.zoom-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.zoom-house{will-change:transform,opacity;}
.zoom-house svg{width:min(80vw,760px);height:auto;display:block;}
.zoom-house img{width:min(84vw,840px);height:auto;display:block;}
.zoom-room{opacity:0;will-change:transform,opacity;}
.zoom-room-card{position:relative;width:min(94vw,1120px);height:min(80vh,720px);border-radius:24px;overflow:hidden;
  box-shadow:0 50px 100px -45px rgba(15,34,51,.55);}
.zoom-room-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.zoom-product{position:absolute;opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 26px 34px rgba(15,34,51,.30));}
.zoom-hint{position:absolute;top:8.5rem;left:0;right:0;text-align:center;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--brand-600);opacity:.85;z-index:6;}
.zoom-hint svg{display:block;margin:.5rem auto 0;animation:floaty 2.4s ease-in-out infinite;}
.zoom-caps{position:absolute;left:0;right:0;bottom:8%;z-index:6;pointer-events:none;text-align:center;}
.zoom-cap{position:absolute;left:0;right:0;opacity:0;transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease;}
.zoom-cap.on{opacity:1;transform:none;}
.zoom-cap b{display:inline-block;font-family:"Inter Tight",sans-serif;font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.05rem,2.5vw,1.75rem);line-height:1.15;color:#fff;background:rgba(15,34,51,.74);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:.55em 1.15em;border-radius:999px;
  box-shadow:0 14px 32px -14px rgba(15,34,51,.6);}
@keyframes pulsering{0%{transform:scale(.6);opacity:.9}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.pulse-ring{transform-box:fill-box;transform-origin:center;animation:pulsering 2.2s ease-out infinite;}
@media (prefers-reduced-motion:reduce){
  .zoom-scene{height:auto!important;}
  .zoom-stage{position:static;height:auto;padding:4rem 0;}
  .zoom-house{display:none;}
  .zoom-room{opacity:1!important;transform:none!important;position:relative;}
  .zoom-product{opacity:1!important;transform:none!important;}
  .pulse-ring{animation:none;}
}

/* ---------- Explore-our-systems carousel ---------- */
.carousel-btn{background:transparent;border:2px solid #fff;color:#fff;cursor:pointer;
  transition:transform .15s ease, background-color .15s ease;}
.carousel-btn:hover{transform:scale(1.08);background:rgba(255,255,255,.12);}
.carousel-cta{font-family:"Anton",sans-serif;font-size:clamp(20px,4vw,52px);color:#fff;opacity:.95;
  letter-spacing:-.02em;line-height:1;text-transform:uppercase;text-decoration:none;transition:opacity .2s ease;}
.carousel-cta:hover{opacity:1;}