@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  /* Exact WeatherWalay brand navy, sourced from their live site/logomark. */
  --navy:#011B60;
  --navy-2:#011345;
  --navy-3:#000C2C;
  --blue:#0952DF;
  --blue-bright:#397DFF;
  --blue-deep:#073EAE;
  --sky:#7FB4FF;
  --amber:#FFB000;
  --paper:#F4F8FF;
  --paper-2:#E7EFFF;
  --card:#FFFFFF;
  --ink:#0B1B3A;
  --ink-soft:#5B6C8F;
  --line:#DFE7F7;
  --clay:#B15A32;
  --clay-soft:#E9CBB6;
  --water:#2E7DE0;
  --good:#2BA36B;
  --shadow:0 20px 44px -26px rgba(9,29,74,.28);
  --shadow-lg:0 28px 64px -24px rgba(9,29,74,.32);
  color-scheme:light;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --font:'Poppins','Segoe UI',system-ui,sans-serif;
  /* Header is position:fixed, so it no longer reserves space in flow —
     heroes add this back via top padding. */
  --header-h:68px;
}

html[data-mode="dark"]{
  --paper:#0D172B;
  --paper-2:#14223B;
  --card:#172844;
  --ink:#EDF4FF;
  --ink-soft:#A9BAD8;
  --line:#2C4264;
  --navy:#8EB7FF;
  --navy-2:#071225;
  --navy-3:#030A18;
  --blue-bright:#78A9FF;
  --blue-deep:#6B9BFF;
  --shadow:0 20px 44px -26px rgba(0,0,0,.5);
  --shadow-lg:0 28px 64px -24px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{ box-sizing:border-box; }
/* overflow-x must live on <html>, not <body> — putting it on <body> too
   would break position:sticky for the header. */
html{ scroll-behavior:smooth; max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  max-width:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; }
img,svg{ max-width:100%; }
.wrap{ max-width:1440px; width:100%; margin:0 auto; padding:0 clamp(16px,4vw,48px); }

h1,h2,h3{ font-family:var(--font); font-weight:600; margin:0; letter-spacing:-.01em; }
b, strong, h4, h5, h6, th{ font-weight:600; }

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,30px);
  box-shadow:var(--shadow);
}

.kicker{
  display:inline-block;
  font-family:var(--font);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 8px;
}

section{ padding:clamp(40px,6vw,64px) 0; }
/* Each <section> is a full-width body child with its own inner .wrap, so
   this background spans the whole viewport, not just the content column. */
.section-tint{ background:var(--paper-2); }
.section-head{ margin-bottom:28px; }
.section-head h2{ font-size:clamp(23px,2.7vw,29px); margin:0 0 9px; font-weight:600; letter-spacing:-.01em; }
.section-head p{ margin:0; color:var(--ink-soft); max-width:64ch; font-size:14.5px; line-height:1.6; font-weight:400; }

.rain-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:.55; }
.drop{
  position:absolute; top:-10%; width:1px;
  background:linear-gradient(to bottom, transparent, var(--sky), transparent);
  animation:fall linear infinite;
}
@keyframes fall{ to{ transform:translateY(120vh); } }

/* Transparent over the hero; once scrolled past it, detaches into a
   floating white pill (.is-over-content, toggled by headerScroll.js via
   IntersectionObserver on the page's hero). */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  background:transparent; box-shadow:none; border-bottom:1px solid transparent;
  transition:top .3s ease;
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:16px; flex-wrap:wrap;
  transition:background-color .3s ease, box-shadow .3s ease, border-radius .3s ease,
             height .3s ease, padding .3s ease, max-width .3s ease;
}
.brand-lockup{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.ww-mark{ width:52px; height:52px; flex-shrink:0; }
.brand-lockup .names{ line-height:1.1; }
.brand-lockup .ww{ font-weight:600; font-size:20px; color:#fff; letter-spacing:-.01em; transition:color .25s ease; }
.topnav{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.topnav a{ color:rgba(255,255,255,.85); font-weight:500; font-size:14px; text-decoration:none; white-space:nowrap; transition:color .25s ease; }
.topnav a.nav-link{
  padding-bottom:4px; border-bottom:2px solid transparent; transition:color .25s ease, border-color .25s ease;
}
.topnav a.nav-link:hover{ color:#fff; border-color:rgba(255,255,255,.6); }
.topnav a.nav-cta{
  background:var(--blue); color:#fff !important; font-weight:600; padding:10px 20px;
  border-radius:999px; transition:background .15s, transform .12s, box-shadow .15s;
  box-shadow:0 10px 24px -12px rgba(9,82,223,.6);
}
.topnav a.nav-cta:hover{ background:var(--blue-deep); transform:translateY(-1px); }

.topbar-hero.is-over-content{ top:14px; }
.topbar-hero.is-over-content .wrap{
  max-width:1240px;
  background:var(--card);
  border-radius:999px;
  box-shadow:0 20px 44px -22px rgba(1,27,96,.4);
  height:62px;
  padding:0 12px 0 22px;
}
.topbar-hero.is-over-content .brand-lockup .ww{ color:var(--navy); }
.topbar-hero.is-over-content .topnav a:not(.nav-cta){ color:var(--ink-soft); }
.topbar-hero.is-over-content .topnav a.nav-link:hover{ color:var(--blue); border-color:var(--blue); }

@media (max-width:640px){
  .topbar .wrap{ height:auto; padding-top:10px; padding-bottom:10px; }
  .topbar-hero.is-over-content{ top:8px; }
  .topbar-hero.is-over-content .wrap{ height:auto; padding:8px 14px; border-radius:20px; }
  .ww-mark{ width:42px; height:42px; }
  .brand-lockup .ww{ font-size:17px; }
  .topnav{ gap:14px; font-size:13px; width:100%; justify-content:space-between; }
  .topnav .nav-link{ display:none; }
  .topnav a.nav-cta{ padding:9px 16px; font-size:13px; }
}

footer {
  background: var(--navy-2);
  color: #B9CDEE;
  margin-top: 20px;
}
footer .wrap{ padding:clamp(40px,6vw,64px) 24px 40px; }
footer .foot-brand{ display:flex; align-items:center; gap:18px; margin-bottom:18px; }
footer .foot-brand .ww-mark{ width:52px; height:52px; flex-shrink:0; }
footer .foot-brand-name{ font-weight:600; font-size:23px; line-height:1; color:#fff; letter-spacing:-.01em; }
footer p{ font-size:13.5px; line-height:1.7; max-width:78ch; color:#9DB8E6; font-weight:400; }

footer .foot-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:32px 28px;
  padding-bottom:32px; border-bottom:1px solid rgba(185,205,238,.16);
}
footer .foot-col h4{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  color:#fff; margin:0 0 16px;
}
footer .foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
footer .foot-col a{ color:#B9CDEE; text-decoration:none; font-size:13.5px; transition:color .15s; }
footer .foot-col a:hover{ color:#fff; }
footer address{ font-style:normal; font-size:13.5px; line-height:1.75; color:#9DB8E6; }
footer .foot-bottom{
  padding-top:22px; display:flex; flex-wrap:wrap; gap:8px 24px;
  justify-content:space-between; align-items:flex-start;
}
footer .foot-bottom p{ margin:0; }
footer .foot-copyright{ font-size:12.5px; color:#7C93C2; white-space:nowrap; }
html[data-mode="dark"] .topbar-hero.is-over-content .wrap{ box-shadow:0 20px 44px -22px rgba(0,0,0,.7); }
html[data-mode="dark"] footer{ background:#071225; }
@media (max-width:900px){
  footer .foot-top{ grid-template-columns:1fr 1fr; }
  footer .foot-top > :first-child{ grid-column:1/-1; }
}
@media (max-width:640px){
  footer .foot-brand .ww-mark{ width:46px; height:46px; }
  footer .foot-brand-name{ font-size:21px; }
  footer .foot-top{ grid-template-columns:1fr; gap:26px; }
}

@media (prefers-reduced-motion: reduce){
  .rain-layer::before,.rain-layer::after{ animation:none !important; }
  .drop{ animation:none !important; display:none; }
  html{ scroll-behavior:auto; }
}