/* ══════════════════════════════════════════════════════════════════════════
   WaterFax — PARENT BRAND SITE (www.mywaterfax.com)

   This is the APPROVED corporate homepage design, integrated from the supplied
   package. The layout, spacing, typography and visual hierarchy are the
   package's and are NOT reinterpreted here.

   ⚠️ NOT SHARED WITH home.mywaterfax.com. That is the WaterFax Home product
   application -- different repo, different Cloud Run service, its own runtime.
   Nothing here imports from it.

   ⚠️ THE HERO PANEL IS A FLATTENED ASSET, BY OWNER DECISION. Its headline,
   legend and coverage qualifier are baked into the PNG, so they are NOT
   duplicated in HTML -- doing so would render the copy twice. The alt text
   carries that wording so the panel is not silent to a screen reader. This is
   temporary visual debt: when clean globe artwork exists, the asset is
   replaced and its copy moves into live HTML.

   Everything else on this page is real HTML/CSS.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --navy: #05264a;
  --blue: #076bb5;
  --orange: #f12d14;
  --text: #203c60;
  --line: #d6e0e8;
  --ice: #eaf7ff;
  --warm: #fbf8f3;
  --max: 1024px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #fff;
  color: var(--navy);
  font-family: Inter, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-shell {
  width: min(100%, var(--max));
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
}

.hero {
  height: 493px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 40%, rgba(209,237,252,.72), rgba(255,255,255,0) 38%),
    #fff;
}

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 72px;
  z-index: 4;
  display: grid;
  /* ⚠️ Identity | OPEN SPACE | action. With `auto` in the last column the grid
     collapsed and the button slid up against the logo. `1fr` in the MIDDLE
     with the action column sized to content keeps the button pinned to the
     right gutter and leaves the space between genuinely open, which is what
     the owner asked for. Header height and gutters are unchanged. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 38px;
}

/* ⚠️ COPIED VERBATIM FROM home.mywaterfax.com (waterfax.css:210-217) so the
   two sites render one identity from one definition. Only the surrounding
   layout is ours; the mark's geometry, weights and red are Home's. */
.brand{display:inline-flex;flex-direction:column;gap:3px;text-decoration:none;
  color:#05264a}
/* ⚠️ `gap:10px` APPLIES BETWEEN EVERY FLEX ITEM, so "Water" and the accented
   "Fax" were pushed apart and the wordmark read "Water Fax" -- textContent was
   correct, the space was layout. Home's markup has the mark beside ONE text
   run so it never hits this. The gap is moved onto the mark itself, which is
   the only place it was ever meant to act. */
.nav-brand{display:inline-flex;align-items:center;font-weight:800;
  font-size:24px;letter-spacing:-.03em;color:inherit}
.nav-brand .brand-mark{margin-right:10px}
.nav-brand .accent{color:#E5341D}
.brand-mark{width:34px;height:34px;border-radius:50%;background:#E5341D;
  position:relative;box-shadow:inset 0 0 0 7px #fff;border:5px solid #E5341D;
  flex:none}
.brand-mark:after{content:"";position:absolute;right:-5px;bottom:-1px;width:12px;
  height:16px;background:#E5341D;border-radius:60% 60% 65% 35%;
  transform:rotate(32deg)}
.brand-tagline{font-size:11.5px;color:#5B6B7D;letter-spacing:-.005em}

/* The primary nav and the footer are both removed for V1 (see index.html).
   Their rules are removed with them rather than left behind to be re-enabled
   by accident. */

.outline-btn,
.primary-btn,
.notify-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.outline-btn {
  border: 1px solid #6f8aaa;
  background: rgba(255,255,255,.56);
}

.top-contact {
  justify-self: end;
  width: 116px;
  height: 36px;
  font-size: 12.5px;
  font-weight: 600;
}

.hero-left {
  position: absolute;
  z-index: 2;
  left: 38px;
  top: 100px;
  width: 500px;
}

/* Larger and tighter so the headline clearly dominates the hero. The four
   authored line breaks are preserved; the measure is widened just enough that
   "better information." still sets on one line at 57px. */
.hero h1 {
  margin: 0;
  color: #06274c;
  font-size: 57px;
  line-height: 0.98;
  letter-spacing: -2.1px;
  font-weight: 800;
}

.hero h1 span { color: var(--orange); }

.hero-copy {
  width: 436px;
  margin: 16px 0 20px;
  color: #445d7a;
  font-size: 15px;
  line-height: 1.43;
  letter-spacing: -.05px;
}

.hero-actions {
  display: flex;
  gap: 23px;
  align-items: flex-start;
}

.hero-actions > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hero-actions small {
  padding-left: 3px;
  font-size: 10px;
  line-height: 1;
  color: #183a62;
}

.primary-btn {
  width: 203px;
  background: var(--orange);
  color: white;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}

.hero-secondary { width: 220px; }

/* ⚠️ THE PANEL READ AS A RECTANGLE DROPPED ON WHITE. Two masks dissolve its
   edges into the hero instead: a horizontal fade so the globe emerges from the
   light left side rather than starting at a hard vertical seam, and a vertical
   fade at the top so the header sits in the same environment rather than on a
   box. `mask` is composited from both, so the corner where they meet fades
   once, not twice. The asset itself is untouched. */
.hero-visual {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 47px;
  width: 531px;
  height: 446px;
  object-fit: cover;
  object-position: left top;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.28) 14%, #000 42%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.45) 9%, #000 26%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.28) 14%, #000 42%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.45) 9%, #000 26%);
  mask-composite: intersect;
}

.audiences {
  height: 151px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 21px 64px 0;
  background: #fff;
}

.audience-card {
  position: relative;
  text-align: center;
  color: #004a86;
  padding: 0 28px;
}

.audience-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 4px;
  width: 1px;
  height: 97px;
  background: #d8e2ea;
}

.audience-card svg {
  width: 43px;
  height: 43px;
  margin: 0 auto 3px;
  fill: none;
  stroke: #076bb5;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audience-card h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 800;
}

.audience-card p {
  margin: 8px 0 0;
  color: #536d8c;
  font-size: 13px;
  line-height: 1.32;
}

.audience-card.last { padding-inline: 22px; }
.audience-card.last h3 { font-size: 14px; }

.purpose {
  height: 340px;
  display: grid;
  grid-template-columns: 55% 45%;
  background: #ebf8ff;
}

.purpose-visual {
  width: 100%;
  height: 340px;
  object-fit: cover;
}

.purpose-copy {
  padding: 50px 46px 34px 51px;
  background:
    radial-gradient(circle at 82% 46%, rgba(223,246,255,.86), transparent 58%),
    #eefaff;
}

.eyebrow {
  color: #006ec0;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .8px;
  font-weight: 800;
}

.purpose h2 {
  margin: 17px 0 18px;
  color: #06274c;
  font-size: 29px;
  line-height: 1.02;
  letter-spacing: -.9px;
}

.purpose p {
  margin: 0;
  color: #385a7e;
  font-size: 14px;
  line-height: 1.45;
}

.text-link {
  display: inline-block;
  margin-top: 18px;
  color: #06274c;
  font-size: 12px;
  font-weight: 800;
}

.products {
  height: 388px;
  padding: 30px 38px 24px;
  background:
    linear-gradient(90deg, #fffefa 0%, #fbf8f3 57%, #fff 100%);
}

.products h2 {
  margin: 13px 0 20px;
  color: #06274c;
  font-size: 29px;
  line-height: 1;
  letter-spacing: -1px;
}

.product-grid {
  display: grid;
  grid-template-columns: 334px 306px 1fr;
  gap: 26px;
  align-items: start;
}

.product-card {
  height: 266px;
  overflow: hidden;
  border-radius: 11px;
  background: white;
  box-shadow: 0 3px 15px rgba(16,53,86,.06);
}

.product-card > img {
  width: 100%;
  height: 108px;
  object-fit: cover;
}

.card-body { padding: 12px 25px 12px; }

.card-body h3 {
  margin: 0;
  color: #06274c;
  font-size: 18px;
  line-height: 1.05;
}

.meta {
  margin-top: 2px;
  color: #264d72;
  font-size: 12px;
}

.status {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 4px;
  color: #0066b2;
  background: #d7eeff;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.15;
}

.card-body p {
  min-height: 55px;
  margin: 5px 0 10px;
  color: #46647f;
  font-size: 13px;
  line-height: 1.15;
}

.primary-btn.small {
  width: 184px;
  height: 36px;
}

.notify-btn {
  width: 125px;
  height: 36px;
  color: #0069b6;
  background: #e1f2ff;
}

.quote-card {
  height: 266px;
  margin-left: 20px;
  padding: 18px 0 0 27px;
  border-left: 1px solid #d6dde4;
}

.quote-mark {
  height: 35px;
  color: var(--orange);
  font-family: Georgia, serif;
  font-size: 56px;
  font-weight: 700;
  line-height: .9;
}

.quote-card blockquote {
  margin: 9px 0 21px;
  color: #06274c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.24;
  font-style: italic;
}

.quote-card p {
  margin: 0;
  color: #06274c;
  font-size: 11px;
}

.cta-strip{
  width:100%;min-height:100px;display:flex;align-items:center;
  background:#0d2f4f url("img/cta-ocean-tile.png") center/cover no-repeat;
}
.cta-strip-in{width:100%;max-width:1024px;margin:0 auto;padding:18px 38px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.cta-eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.11em;
  color:#cfe0f0}
.cta-head{margin:6px 0 0;font-size:31px;font-weight:800;letter-spacing:-.02em;
  color:#fff;line-height:1.1}
.cta-btn{flex:none;background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.cta-btn:hover{background:rgba(255,255,255,.12)}
@media (max-width:720px){
  .cta-strip-in{flex-direction:column;align-items:flex-start;padding:22px 20px}
  .cta-head{font-size:26px}
  .cta-btn{width:100%;justify-content:center}
}





@media (max-width: 800px) {
  .site-shell { width: 100%; }
  .hero { min-height: 780px; height: auto; padding-bottom: 30px; }
  .topbar {
    position: relative;
    height: auto;
    grid-template-columns: 1fr auto;
    padding: 12px 18px;
  }
  .nav-brand{font-size:21px}
  .brand-mark{width:30px;height:30px;box-shadow:inset 0 0 0 6px #fff;border-width:4px}
  .top-contact { margin-top: 0; }
  .hero-left {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 35px 22px 20px;
  }
  .hero-copy { width: auto; }
  .hero-actions { flex-direction: column; }
  .hero-visual {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    margin-top: 5px;
  }
  .audiences {
    height: auto;
    grid-template-columns: 1fr 1fr;
    padding: 22px 12px;
    gap: 25px 0;
  }
  .audience-card:nth-child(2)::after { display: none; }
  .purpose { height: auto; grid-template-columns: 1fr; }
  .purpose-visual { height: auto; }
  .purpose-copy { padding: 36px 26px; }
  .products { height: auto; padding: 34px 22px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { width: 100%; max-width: 420px; }
  .quote-card { margin-left: 0; }
    }


/* ── NOT-YET-PUBLISHED DESTINATIONS ───────────────────────────────────────
   ⚠️ THESE ARE NOT LINKS, DELIBERATELY. The package hardcodes /our-story,
   /our-approach, /products, /impact, /news, /privacy and /terms. None of those
   pages exist. Shipping them as anchors would put six 404s in the primary
   navigation of a brand's front door, so they render as real navigation items
   that are visibly not yet available. The owner's brief is explicit: report a
   missing route, do not invent navigation architecture.
   They become <a> again the moment the pages do. */

/* ⚠️ WATERFAX BUSINESS IS A STATUS, NOT A CONTROL. The package ships
   "Get notified →" as a button pointing at /business. There is no waitlist
   backend, no notification path and no Business product -- a control that
   silently does nothing is worse than an honest state. */
.notify-btn.is-pending{cursor:default;pointer-events:none;opacity:.85}

/* Matches the cropped lockup's own type: same size, weight and grey. */

/* ══ CONTACT MODAL ═══════════════════════════════════════════════════════════
   Uses the page's existing language -- navy type, red primary, the same radii
   and shadows -- rather than introducing a second design system. */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(6,25,48,.52);
  backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto}
.modal-backdrop[hidden]{display:none}
.modal{position:relative;width:100%;max-width:520px;background:#fff;
  border-radius:16px;box-shadow:0 30px 70px -20px rgba(6,25,48,.45);
  padding:34px 38px 32px;margin:auto}
.modal-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border:0;
  background:none;font-size:26px;line-height:1;color:#5B6B7D;cursor:pointer;
  border-radius:8px}
.modal-x:hover{background:#F1F5F9;color:#06274c}
.modal h2{margin:0;font-size:27px;font-weight:800;letter-spacing:-.03em;
  color:#06274c}
.modal-intro{margin:9px 0 22px;font-size:14.5px;line-height:1.55;color:#445d7a}

.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;color:#06274c;
  margin-bottom:6px}
.field label .opt{font-weight:400;color:#8A99AB}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:14.5px;
  color:#06274c;background:#fff;border:1px solid #D7E0EA;border-radius:9px;
  padding:11px 13px;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{resize:vertical;min-height:96px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:#1D4ED8;box-shadow:0 0 0 3px rgba(29,78,216,.15)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:#D7342A}

.hint{margin:6px 0 0;font-size:11.5px;color:#8A99AB;text-align:right}
/* ⚠️ Errors carry an icon-free text cue, not colour alone: colour is not
   perceivable to every visitor and must never be the only signal. */
.err{margin:6px 0 0;font-size:12.5px;color:#C8341F;font-weight:600}
.err[hidden]{display:none}
.form-err{margin:0 0 14px;padding:11px 13px;background:#FDEBE7;
  border-radius:9px;text-align:left;font-weight:500;line-height:1.45}

.modal-send{width:100%;justify-content:center;margin-top:4px;font-size:15px;
  padding:13px 20px}
.modal-send:disabled{opacity:.5;cursor:not-allowed}
.pending-note{text-align:center;color:#8A99AB;margin-top:10px}
.done-h{margin-bottom:0}
#contactDonePane .primary-btn{margin-top:6px}

@media (max-width:560px){
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal{max-width:none;border-radius:16px 16px 0 0;padding:28px 22px 24px}
  .modal h2{font-size:23px}
}