:root {
  --water-blue: #202b78;
  --water-navy: #101747;
  --water-red: #e31e2f;
  --water-paper: #f4f6fb;
  --water-ink: #172033;
  --water-muted: #5d677b;
  --water-line: #dfe3ed;
}

.water-page {
  color: var(--water-ink);
  background: #fff;
}

.water-page .wrap {
  width: min(1180px, calc(100% - 36px));
  margin-inline: auto;
}

.water-hero {
  position: relative;
  min-height: 650px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--water-navy);
  color: #fff;
}

.water-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 14, 54, .97) 0%, rgba(16, 23, 71, .9) 48%, rgba(16, 23, 71, .35) 100%);
  z-index: 1;
}

.water-hero-media {
  position: absolute;
  inset: 0 0 0 45%;
}

.water-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.08);
}

.water-hero .wrap {
  position: relative;
  z-index: 2;
  padding-block: 100px;
}

.water-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  color: #cbd1ea;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.water-breadcrumbs a { color: #fff; }

.water-kicker,
.water-overline {
  display: block;
  margin-bottom: 15px;
  color: #ff7d87;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.water-hero h1 {
  max-width: 790px;
  margin: 0;
  color: #fff;
  font-size: clamp(43px, 6vw, 78px);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.055em;
}

.water-hero h1 span { color: #ff5f6c; }

.water-hero-copy {
  max-width: 700px;
  margin: 28px 0 0;
  color: #dbe0f1;
  font-size: 18px;
  line-height: 1.75;
}

.water-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.water-btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid transparent;
  background: var(--water-red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.water-btn:hover { background: #fff; color: var(--water-blue); }
.water-btn-outline { border-color: rgba(255,255,255,.55); background: transparent; }

.water-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--water-line);
  background: #fff;
}

.water-proof div {
  padding: 28px 24px;
  border-right: 1px solid var(--water-line);
}

.water-proof div:last-child { border-right: 0; }
.water-proof strong, .water-proof span { display: block; }
.water-proof strong { color: var(--water-blue); font-size: 16px; }
.water-proof span { margin-top: 4px; color: var(--water-muted); font-size: 12px; }

.water-section { padding: 88px 0; }
.water-section-paper { background: var(--water-paper); }
.water-section-dark { background: var(--water-navy); color: #fff; }

.water-intro-grid,
.water-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 65px;
  align-items: start;
}

.water-section h2 {
  max-width: 800px;
  margin: 0 0 24px;
  color: var(--water-blue);
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.045em;
}

.water-section h2 span { color: var(--water-red); }
.water-section-dark h2, .water-section-dark h3 { color: #fff; }

.water-lead {
  color: #465169;
  font-size: 18px;
  line-height: 1.85;
}

.water-copy p {
  color: var(--water-muted);
  font-size: 15px;
  line-height: 1.85;
}

.answer-card {
  padding: 30px;
  border-top: 5px solid var(--water-red);
  background: var(--water-blue);
  box-shadow: 0 18px 45px rgba(18, 31, 87, .18);
}

.answer-card small,
.answer-card strong,
.answer-card span { display: block; }
.answer-card small { color: #ff929a; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.answer-card strong { margin: 12px 0; color: #fff; font-size: 24px; line-height: 1.3; }
.answer-card span { color: #d8ddef; font-size: 14px; line-height: 1.7; }

.water-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}

.water-card {
  min-height: 260px;
  padding: 30px;
  border: 1px solid var(--water-line);
  background: #fff;
  box-shadow: 0 10px 25px rgba(22, 35, 86, .06);
}

.water-card small { color: var(--water-red); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.water-card h3 { margin: 30px 0 13px; color: var(--water-blue); font-size: 23px; line-height: 1.25; }
.water-card p { margin: 0; color: var(--water-muted); font-size: 14px; line-height: 1.7; }
.water-card a { display: inline-block; margin-top: 18px; color: var(--water-red); font-size: 12px; font-weight: 800; text-transform: uppercase; }

.water-process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 42px;
  border-top: 1px solid rgba(255,255,255,.2);
  border-left: 1px solid rgba(255,255,255,.2);
}

.water-process article {
  min-height: 230px;
  padding: 28px 22px;
  border-right: 1px solid rgba(255,255,255,.2);
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.water-process b { display: block; color: #ff717d; font-size: 13px; }
.water-process h3 { margin: 38px 0 12px; font-size: 18px; line-height: 1.35; }
.water-process p { margin: 0; color: #cbd1e8; font-size: 12px; line-height: 1.65; }

.water-apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 40px;
  border-top: 1px solid var(--water-line);
  border-left: 1px solid var(--water-line);
}

.water-apps span {
  min-height: 86px;
  display: flex;
  align-items: center;
  padding: 18px 20px;
  border-right: 1px solid var(--water-line);
  border-bottom: 1px solid var(--water-line);
  color: var(--water-blue);
  font-size: 14px;
  font-weight: 750;
}

.water-table-wrap { overflow-x: auto; margin-top: 38px; border: 1px solid var(--water-line); }
.water-table { width: 100%; min-width: 780px; border-collapse: collapse; background: #fff; }
.water-table th { padding: 17px; background: var(--water-blue); color: #fff; font-size: 12px; text-align: left; }
.water-table td { padding: 17px; border-bottom: 1px solid var(--water-line); color: #4c576d; font-size: 13px; vertical-align: top; }
.water-table td:first-child { color: var(--water-blue); font-weight: 800; }

.coverage-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
  gap: 50px;
  align-items: end;
  margin-bottom: 38px;
}

.coverage-head p { color: #cbd1e8; font-size: 14px; line-height: 1.75; }
.coverage-note { padding: 20px; border-left: 4px solid var(--water-red); background: rgba(255,255,255,.08); }

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.coverage-card {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.045);
}

.coverage-card h3 { margin: 0 0 10px; color: #fff; font-size: 17px; }
.coverage-card p { margin: 0; color: #cbd1e8; font-size: 12px; line-height: 1.65; }
.coverage-card.ut { border-top: 3px solid var(--water-red); }

.faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, .55fr) minmax(0, 1fr);
  gap: 55px;
  align-items: start;
}

.water-faq details { border-top: 1px solid var(--water-line); }
.water-faq details:last-child { border-bottom: 1px solid var(--water-line); }
.water-faq summary { padding: 20px 4px; color: var(--water-blue); font-size: 16px; font-weight: 800; cursor: pointer; }
.water-faq p { margin: 0; padding: 0 4px 22px; color: var(--water-muted); font-size: 14px; line-height: 1.75; }

.water-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 35px;
  align-items: center;
  padding: 50px;
  background: var(--water-red);
  color: #fff;
}

.water-cta h2 { margin: 0; color: #fff; font-size: clamp(30px, 4vw, 48px); }
.water-cta p { margin: 12px 0 0; color: #fff; }
.water-cta .water-btn { background: #fff; color: var(--water-blue); }

@media (max-width: 980px) {
  .water-proof { grid-template-columns: repeat(2, 1fr); }
  .water-intro-grid, .water-split, .coverage-head, .faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .water-card-grid, .coverage-grid { grid-template-columns: repeat(2, 1fr); }
  .water-process { grid-template-columns: repeat(2, 1fr); }
  .water-apps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .water-page .wrap { width: min(100% - 28px, 1180px); }
  .water-hero { min-height: 620px; }
  .water-hero-media { inset: 0; opacity: .35; }
  .water-hero::before { background: rgba(10, 17, 58, .88); }
  .water-hero .wrap { padding-block: 70px; }
  .water-hero h1 { font-size: 43px; }
  .water-hero-copy { font-size: 16px; }
  .water-section { padding: 62px 0; }
  .water-proof, .water-card-grid, .coverage-grid, .water-process, .water-apps { grid-template-columns: 1fr; }
  .water-proof div { border-right: 0; border-bottom: 1px solid var(--water-line); }
  .water-card { min-height: auto; }
  .water-cta { grid-template-columns: 1fr; padding: 32px 24px; }
}