/* Soft Water Phoenix
   ------------------------------------------------------------------
   One stylesheet, hand-written, no framework and no build step.

   Contents:
     1. Tokens
     2. Base + typography
     3. Header / topbar / nav
     4. Buttons + focus
     5. Hero
     6. Sections, cards, prose
     7. The hardness panel — the measured argument
     8. Tables, pricing, FAQ
     9. Forms + quote funnel
    10. Band, footer
    11. Utilities + reduced motion
   ------------------------------------------------------------------ */

/* ===================== 1. Tokens ===================== */
:root {
  /* Blue and refreshing. The logo's water — teal #74CDCC and the navy #0C2A42
     — leads; the desert orange stays, but demoted to the call-to-action and
     the edge rules, where its warmth pops against all that blue instead of
     competing with it.

     THE THING TO KNOW BEFORE EDITING: none of the logo's bright colours can
     carry text on a light ground. Measured against --bg —
        aqua #74CDCC -> 1.75:1   aqua-500 #2FA6C2 -> 2.70:1
        gold #FBBD60 -> 1.58:1   orange #D2542A -> 3.95:1
     all four fail. Each has a darkened sibling that keeps the hue and passes,
     and the bright originals are SHAPE colours only: splashes, rules, the
     wave dividers, the band edges.

     On the navy those same colours are fine, which is why the footer and the
     hardness panel are where the logo's palette gets to speak. */
  --bg:         #F3FAFC;   /* cool, refreshing — the ground the whole site sits on */
  --surface:    #E4F3F8;
  --surface-2:  #CFE7F0;
  --sand:       #EDF8FA;
  --line:       #C3DEE9;
  --line-2:     #9CC2D2;

  --ink:        #0C2A42;   /* the logo's navy — 15.0:1 on --bg */
  --ink-body:   #254A5E;
  --ink-mute:   #446678;

  /* Aqua is the PRIMARY now: the water in the mark. --aqua-400 is that exact
     colour and is decorative; --aqua-800 carries text and links. */
  --aqua-900:   #0A4B5E;
  --aqua-800:   #0D6076;
  --aqua-500:   #2FA6C2;
  --aqua-400:   #74CDCC;

  /* Orange is the desert half of the logo, kept for the call to action so it
     pops against the blue. --orange-800 is the text-safe fill; --orange-900
     is the hover, because a warm hue DARKENS to hover. */
  --orange-900: #8A3312;
  --orange-800: #A63F17;
  --orange-500: #D2542A;
  --orange-100: #FADFCE;
  --orange-50:  #FDF2EA;

  --gold-400:   #FBBD60;

  --navy-900:   #0C2A42;
  --navy-700:   #16465E;

  --warn:       #7A4800;

  --r:      10px;
  --r-lg:   16px;
  --r-pill: 999px;

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;  --s-7: 3rem;   --s-8: 4.5rem;

  --shell: 1120px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --measure: 66ch;

  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs: .78rem; --t-sm: .9rem; --t-base: 1.02rem;
  --t-lede: clamp(1.08rem, 1rem + .55vw, 1.3rem);
  --t-h3: clamp(1.12rem, 1rem + .5vw, 1.32rem);
  --t-h2: clamp(1.6rem, 1.28rem + 1.6vw, 2.4rem);
  --t-h1: clamp(2.1rem, 1.5rem + 3.1vw, 3.6rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --sh-1: 0 1px 2px rgba(12, 42, 66, .07);
  --sh-2: 0 8px 28px rgba(12, 42, 66, .10);
}

/* ===================== 2. Base ===================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink-body);
  font-family: var(--body); font-size: var(--t-base); line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.12; margin: 0 0 var(--s-3); }
h1 { font-size: var(--t-h1); font-weight: 750; letter-spacing: -.025em; }
h2 { font-size: var(--t-h2); font-weight: 750; letter-spacing: -.02em; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 var(--s-4); max-width: var(--measure); }
a { color: var(--aqua-800); text-underline-offset: 2px; }
a:hover { color: var(--aqua-900); }
:focus-visible { outline: 3px solid var(--aqua-800); outline-offset: 2px; border-radius: 4px; }
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font: 650 var(--t-xs)/1.2 var(--body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--aqua-800); margin: 0 0 var(--s-3);
}

/* ===================== 3. Header ===================== */
.topbar {
  background: var(--navy-900); color: #DCEEF5; font-size: var(--t-sm);
  padding: var(--s-2) 0; border-bottom: 3px solid var(--orange-500);
}
.topbar .shell { display: flex; gap: var(--s-5); justify-content: space-between; flex-wrap: wrap; }
.topbar strong { color: #FFFFFF; font-weight: 650; }
.topbar a { color: inherit; }

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(243, 250, 252, .96);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--line);
}
.masthead .shell { display: flex; align-items: center; gap: var(--s-4); min-height: 112px; }

/* The masthead shows the WHOLE badge, at a size where its own banner lettering
   stays legible — below about 70px that type turns to mush. Because the badge
   already says the company name there is no text wordmark beside it.

   The masthead is position:sticky, so its height is permanently subtracted from
   the viewport. That is why the badge steps down on smaller screens rather than
   scaling freely. The topbar above is NOT sticky and scrolls away, so this
   height is the whole sticky cost. */
.wordmark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.wordmark img { flex: none; height: 88px; width: auto; }
.wordmark--badge { display: block; }
.wordmark--badge img { height: 104px; }
.wordmark--badge small {
  display: block; margin-top: .35rem; font-family: var(--body); font-size: .64rem;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #A0C6D6;
}
@media (max-width: 940px) {
  .masthead .shell { min-height: 92px; }
  .wordmark img { height: 72px; }
}
@media (max-width: 560px) {
  .masthead .shell { min-height: 82px; }
  .wordmark img { height: 64px; }
  .wordmark--badge img { height: 88px; }
}

.nav { display: flex; gap: var(--s-5); align-items: center; margin-left: auto; }
.nav a { color: var(--ink-body); text-decoration: none; font-weight: 550; font-size: var(--t-sm); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--aqua-800); }
.drop { position: relative; }
.drop__btn {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  font: 550 var(--t-sm) var(--body); color: var(--ink-body);
}
.drop__btn::after { content: " ▾"; }
.drop__btn:hover { color: var(--aqua-800); }
.drop__menu {
  position: absolute; top: calc(100% + 12px); left: -14px; min-width: 232px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-2); padding: var(--s-2); list-style: none; margin: 0; display: none;
}
.drop.open .drop__menu { display: block; }
.drop__menu a { display: block; padding: .5rem .6rem; border-radius: 8px; text-decoration: none; color: var(--ink-body); }
.drop__menu a:hover { background: var(--surface); color: var(--aqua-800); }

/* ===================== 4. Buttons ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.4rem; border-radius: var(--r-pill); text-decoration: none;
  font: 650 1rem/1 var(--body); background: var(--orange-800); color: #FFFFFF;
  border: 1px solid transparent; cursor: pointer; transition: background .18s var(--ease), transform .18s var(--ease);
  min-height: 46px;
}
.btn:hover { background: var(--orange-900); color: #fff; transform: translateY(-1px); }
.btn--quiet { background: #fff; color: var(--orange-800); border-color: var(--line-2); }
.btn--quiet:hover { background: var(--orange-50); color: var(--orange-800); }
.btn--light { background: #fff; color: var(--navy-900); }
.btn--light:hover { background: var(--orange-100); color: var(--navy-900); }
.masthead .btn { flex: none; }
.btnrow { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0; }

.burger { display: none; appearance: none; border: 1px solid var(--line-2); background: #fff; border-radius: var(--r); width: 44px; height: 42px; cursor: pointer; padding: 0 10px; }
.burger span { display: block; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }
.mobilenav { display: none; border-top: 1px solid var(--line); background: #fff; padding: var(--s-4) 0 var(--s-5); }
.mobilenav.open { display: block; }
.mobilenav ul { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: .1rem; }
.mobilenav a { display: block; padding: .55rem 0; text-decoration: none; color: var(--ink-body); font-weight: 550; }
@media (max-width: 940px) {
  .nav { display: none; }
  .burger { display: block; margin-left: auto; }
  .masthead .btn { display: none; }
}
@media (min-width: 941px) { .mobilenav { display: none !important; } }

/* ===================== 5. Hero ===================== */
.hero {
  padding: clamp(2.4rem, 6vw, 4.5rem) 0 var(--s-7);
  background: linear-gradient(180deg, #DFF2F8 0%, var(--bg) 68%);
  position: relative; overflow: hidden;
}
/* Bubbles. Drawn with radial-gradients rather than an image so they cost no
   request and no bytes, and sit behind the content on their own layer. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 8% 22%,  rgba(116,205,204,.30) 0 13px, transparent 14px),
    radial-gradient(circle at 16% 58%, rgba(47,166,194,.16) 0 26px, transparent 27px),
    radial-gradient(circle at 4% 78%,  rgba(116,205,204,.22) 0 9px,  transparent 10px),
    radial-gradient(circle at 92% 16%, rgba(116,205,204,.24) 0 18px, transparent 19px),
    radial-gradient(circle at 79% 8%,  rgba(47,166,194,.14) 0 11px, transparent 12px),
    radial-gradient(circle at 97% 62%, rgba(116,205,204,.18) 0 22px, transparent 23px);
}
.hero .shell { position: relative; z-index: 1; }

/* A wave where the pale blue meets the navy, instead of a hard rule. The SVG is
   a data URI so it is part of the stylesheet — no second request for chrome. */
.wave-top { position: relative; }
.wave-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 35px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22c110-24 250-28 390-10s280 22 420 4 270-22 390 6v18z' fill='%230C2A42'/%3E%3C/svg%3E") no-repeat center bottom/100% 100%;
}
.hero__grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 941px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-8); } }
.hero p.lede { font-size: var(--t-lede); color: var(--ink-body); }

.trustrow { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.trustrow span { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-sm); color: var(--ink-mute); font-weight: 550; }
.trustrow span::before { content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%; background: var(--aqua-400); box-shadow: inset 0 0 0 2px var(--aqua-800); }

/* ===================== 6. Sections + cards ===================== */
.section { padding: var(--s-8) 0; }
.section--tint { background: var(--surface); border-block: 1px solid var(--line); }
.section--sand { background: var(--sand); border-block: 1px solid var(--line); }
.grid { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 941px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--sh-1);
}
.card h3 { margin-bottom: var(--s-2); }
.card p:last-child { margin-bottom: 0; }
a.card { text-decoration: none; color: inherit; display: block; transition: border-color .18s var(--ease), transform .18s var(--ease); }
a.card:hover { border-color: var(--aqua-500); transform: translateY(-2px); }
.card__more { font-weight: 650; color: var(--aqua-800); }

.breadcrumb { font-size: var(--t-sm); color: var(--ink-mute); padding-top: var(--s-4); }
.breadcrumb a { color: var(--ink-mute); }

/* ===================== 7. The hardness panel ===================== */
.rules {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
  color: #DCEEF5; border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3.5vw, 2.4rem); margin: var(--s-6) 0;
  border: 1px solid var(--navy-700);
}
.rules h2, .rules h3 { color: #FFFFFF; }
.rules p { color: #DCEEF5; }
.rules a { color: var(--gold-400); }
.rules strong { color: #FFFFFF; }
.quote {
  border-left: 3px solid var(--aqua-400); padding: var(--s-3) 0 var(--s-3) var(--s-4);
  margin: var(--s-4) 0; font-size: var(--t-sm); color: #DCEEF5;
}
.quote cite { display: block; margin-top: var(--s-2); font-style: normal; font-size: var(--t-xs); color: #93B9CC; }

/* Hardness scale — a real measured range drawn to scale, not a decoration. */
.scale { margin: var(--s-5) 0 var(--s-4); }
.scale__bar { position: relative; height: 42px; border-radius: var(--r); overflow: hidden; display: flex; }
.scale__seg { height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--t-xs); font-weight: 650; color: var(--navy-900); }
.scale__band { position: absolute; top: 0; bottom: 0; border-inline: 3px solid var(--navy-900); background: rgba(12,42,66,.14); }
.scale__labels { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-mute); margin-top: var(--s-2); }
.rules .scale__labels { color: #A0C6D6; }
.rules .scale__band { border-color: #FFFFFF; background: rgba(255,255,255,.18); }

.callout {
  background: var(--orange-50); border: 1px solid var(--orange-100);
  border-left: 4px solid var(--orange-800); border-radius: var(--r);
  padding: var(--s-4); margin: var(--s-5) 0;
}
.callout p { margin: 0; max-width: none; font-size: var(--t-sm); }
.callout--warn { background: #FFF7EC; border-color: #F3D9AC; border-left-color: var(--warn); }

/* ---- diagrams ---- */
.figure { margin: var(--s-6) 0; }
.fig {
  display: block; width: 100%; height: auto;
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-4);
}
.rules .fig { background: rgba(255,255,255,.05); border-color: var(--navy-700); }
.figure figcaption {
  margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-mute);
  max-width: var(--measure);
}
.rules .figure figcaption { color: #A0C6D6; }
.icon { width: 48px; height: 48px; display: block; margin-bottom: var(--s-3); }

/* ===================== 8. Tables, FAQ ===================== */
.tablewrap { overflow-x: auto; }
table.compare { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.compare th, table.compare td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--line); }
table.compare th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); font-weight: 700; }
table.compare td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--aqua-800); }

details { border-bottom: 1px solid var(--line); padding: var(--s-3) 0; }
details summary { cursor: pointer; font-weight: 650; color: var(--ink); font-family: var(--display); list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+ "; color: var(--aqua-800); font-weight: 700; }
details[open] summary::before { content: "– "; }
details p { margin: var(--s-3) 0 0; }

.arealist { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.arealist a { display: block; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: var(--r-pill); text-decoration: none; color: var(--ink-body); font-size: var(--t-sm); background: #fff; }
.arealist a:hover { border-color: var(--aqua-500); color: var(--aqua-800); background: var(--surface); }

/* ===================== 9. Forms + funnel ===================== */
.formcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-2); }
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-weight: 650; font-size: var(--t-sm); margin-bottom: var(--s-2); color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: .72rem .85rem; border: 1px solid var(--line-2); border-radius: var(--r);
  font: 400 1rem var(--body); color: var(--ink); background: #fff;
}
/* Placeholder text is real text and WCAG applies to it. */
.field input::placeholder, .field textarea::placeholder { color: #4A6474; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--aqua-800); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.progress { height: 6px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--aqua-500), var(--aqua-400)); transition: width .3s var(--ease); }
.progress__label { font-size: var(--t-xs); color: var(--ink-mute); margin: var(--s-2) 0 var(--s-4); }

.opts { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt span {
  display: block; padding: .8rem .95rem; border: 1px solid var(--line-2); border-radius: var(--r);
  cursor: pointer; background: #fff; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.opt span b { display: block; font-weight: 650; color: var(--ink); }
.opt span em { font-style: normal; font-size: var(--t-sm); color: var(--ink-mute); }
.opt:hover span { border-color: var(--aqua-500); background: var(--sand); }
.opt input:checked + span { border-color: var(--aqua-800); background: var(--surface); box-shadow: inset 0 0 0 1px var(--aqua-800); }
.opt input:focus-visible + span { outline: 3px solid var(--aqua-800); outline-offset: 2px; }

.result { background: var(--navy-900); color: #fff; border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-5); }
.result h3 { color: #fff; }
.result strong { font-size: 1.5rem; display: block; margin: var(--s-2) 0; color: var(--gold-400); font-family: var(--display); }
.result__note { font-size: var(--t-sm); color: #DCEEF5; margin: var(--s-3) 0 0; max-width: none; }

/* ===================== 10. Band + footer ===================== */
.band {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: #fff;
  padding: var(--s-8) 0; text-align: center; border-bottom: 3px solid var(--orange-500);
  position: relative; margin-top: 34px;
}
.band h2 { color: #fff; }
.band p { color: #DCEEF5; margin-inline: auto; }

.footer {
  background: var(--navy-900); color: #A0C6D6; padding: var(--s-7) 0 var(--s-5);
  font-size: var(--t-sm); position: relative; margin-top: 34px;
}
.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 700px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer h3 { color: #fff; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .1em; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.footer a { color: #A0C6D6; text-decoration: none; }
.footer a:hover { color: var(--aqua-400); }
.footer p { max-width: none; }
.footer__legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.16); font-size: var(--t-xs); color: #93B9CC; }

/* ===================== 11. Utilities ===================== */
.lede { font-size: var(--t-lede); }
.center { text-align: center; }
.center p { margin-inline: auto; }
.stack > * + * { margin-top: var(--s-4); }
.muted { color: var(--ink-mute); }
.nowrap { white-space: nowrap; }

/* Sticky mobile action bar. Only rendered when there is something to act on. */
.callbar { display: none; }
@media (max-width: 700px) {
  .callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    gap: var(--s-2); padding: .55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom));
    background: rgba(243, 250, 252, .97); border-top: 1px solid var(--line);
  }
  .callbar .btn { flex: 1; }
  body { padding-bottom: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}