/* Find Your Water page — page-specific sections (chrome lives in site.css). */
    /* ---------- HERO ---------- */
    .fyw-hero {
      position: relative;
      min-height: 92vh;
      background: var(--navy-deep);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .fyw-hero-image {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 35%;
      filter: saturate(0.85);
    }
    .fyw-hero-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(10,14,31,0.55) 0%, rgba(10,14,31,0.2) 35%, rgba(10,14,31,0.85) 100%);
    }
    .fyw-hero-content {
      position: relative;
      z-index: 2;
      padding: 200px 6% 100px;
      max-width: 1440px;
      margin: 0 auto;
      width: 100%;
    }
    .fyw-hero-eyebrow {
      color: var(--sky);
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      margin-bottom: 36px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 16px;
    }
    .fyw-hero-eyebrow::before, .fyw-hero-eyebrow::after {
      content: "";
      display: block;
      width: 36px; height: 1px;
      background: var(--sky);
    }
    .fyw-hero h1 {
      font-family: 'Noto Serif Display', serif;
      font-weight: 300;
      font-size: clamp(48px, 8vw, 128px);
      line-height: 0.98;
      color: white;
      margin-bottom: 32px;
      letter-spacing: -0.03em;
    }
    .fyw-hero h1 em { font-style: italic; color: var(--sky-soft); font-weight: 300; }
    .fyw-hero-sub {
      font-family: 'Noto Serif Display', serif;
      font-weight: 300;
      font-style: italic;
      color: rgba(255,255,255,0.85);
      font-size: clamp(20px, 2.4vw, 32px);
      line-height: 1.4;
      max-width: 780px;
      margin-bottom: 50px;
      letter-spacing: -0.005em;
    }
    .fyw-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

    /* Status pill on hero */
    .fyw-status {
      position: absolute;
      top: 130px; right: 6%;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(112,189,234,0.4);
      border-radius: 999px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .fyw-status::before {
      content: "";
      width: 8px; height: 8px;
      background: var(--sky);
      border-radius: 50%;
    }
    .fyw-status span {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--sky-soft);
    }

    /* ---------- PROBLEM SECTION (dark) ---------- */
    .fyw-problem {
      background: var(--navy);
      color: rgba(255,255,255,0.85);
      padding: 160px 0 140px;
      position: relative;
      overflow: hidden;
    }
    .fyw-problem::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(112,189,234,0.5), transparent);
    }
    .fyw-problem-grid {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 6%;
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 80px;
      align-items: start;
    }
    .fyw-problem h2 {
      font-size: clamp(38px, 4.6vw, 80px);
      font-weight: 300;
      color: white;
      letter-spacing: -0.025em;
      line-height: 1.04;
      margin-bottom: 0;
    }
    .fyw-problem h2 em { color: var(--sky-soft); }
    .fyw-problem-text { padding-top: 18px; }
    .fyw-problem-text p {
      color: rgba(255,255,255,0.78);
      font-size: 18px;
      line-height: 1.75;
      margin-bottom: 1.2em;
      font-weight: 300;
    }
    .fyw-problem-text p strong {
      color: white;
      font-weight: 500;
    }
    .fyw-problem-text p:first-of-type::first-letter {
      font-family: 'Noto Serif Display', serif;
      font-size: 56px;
      line-height: 0.9;
      float: left;
      padding-right: 14px;
      padding-top: 6px;
      color: var(--sky);
      font-weight: 300;
    }
    .fyw-problem-pull {
      display: block;
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,0.18);
      font-family: 'Noto Serif Display', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(22px, 2vw, 32px);
      color: white;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }
    .fyw-problem-pull em { color: var(--sky); font-style: italic; }

    /* ---------- WHAT FOR SECTION (light, two-column with image) ---------- */
    .fyw-whatfor {
      background: var(--off-white);
      padding: 160px 0 140px;
      position: relative;
    }
    .fyw-whatfor-grid {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 6%;
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 80px;
      align-items: center;
    }
    .fyw-whatfor-img {
      position: relative;
      aspect-ratio: 4/5;
      overflow: hidden;
      background: var(--navy-deep);
    }
    .fyw-whatfor-img img {
      width: 100%; height: 100%;
      object-fit: cover;
      filter: saturate(0.7) brightness(0.95);
    }
    .fyw-whatfor-img-caption {
      position: absolute;
      bottom: 24px; left: 24px; right: 24px;
      color: rgba(255,255,255,0.7);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 500;
      line-height: 1.5;
      z-index: 2;
    }
    .fyw-whatfor-img-caption span { color: var(--sky); }
    .fyw-whatfor-img::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(10,14,31,0.85) 100%);
      pointer-events: none;
    }
    .fyw-whatfor-text h2 {
      font-size: clamp(36px, 4.4vw, 72px);
      font-weight: 300;
      color: var(--navy);
      letter-spacing: -0.025em;
      line-height: 1.06;
      margin-bottom: 36px;
    }
    .fyw-whatfor-text h2 em { color: var(--navy-link); }
    .fyw-whatfor-text p {
      font-size: 18px;
      line-height: 1.78;
      color: var(--body-dark);
      margin-bottom: 1.2em;
      max-width: 640px;
    }
    .fyw-whatfor-text p strong { color: var(--navy); font-weight: 500; }
    .fyw-whatfor-quote {
      display: inline-block;
      margin-top: 12px;
      padding: 18px 24px 18px 28px;
      border-left: 3px solid var(--sky);
      background: rgba(112,189,234,0.06);
      font-family: 'Noto Serif Display', serif;
      font-style: italic;
      font-size: clamp(18px, 1.7vw, 24px);
      color: var(--navy);
      line-height: 1.4;
      max-width: 580px;
    }
    .fyw-whatfor-quote em { color: var(--sky); }
    .fyw-whatfor-quote .attr {
      display: block;
      margin-top: 10px;
      font-family: 'Inter', sans-serif;
      font-style: normal;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--navy-link);
      font-weight: 500;
    }

    /* ---------- HOW IT WORKS (3 cards) ---------- */
    .fyw-how {
      background: var(--near-white);
      padding: 160px 0 140px;
    }
    .fyw-how-head {
      max-width: 1440px;
      margin: 0 auto 80px;
      padding: 0 6%;
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 80px;
      align-items: end;
    }
    .fyw-how-head h2 {
      font-size: clamp(36px, 4vw, 64px);
      font-weight: 300;
      letter-spacing: -0.025em;
      line-height: 1.06;
      margin-bottom: 0;
    }
    .fyw-how-head h2 em { color: var(--navy-link); }
    .fyw-how-head .lead {
      font-size: 18px;
      line-height: 1.75;
      color: var(--body-dark);
      max-width: 600px;
    }
    .fyw-how-head .lead strong { color: var(--navy); font-weight: 500; }
    .fyw-cards {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 6%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
    .fyw-card {
      background: white;
      padding: 50px 42px 44px;
      border: 1px solid var(--rule-dark);
      border-radius: 4px;
      position: relative;
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
      display: flex;
      flex-direction: column;
    }
    .fyw-card:hover {
      transform: translateY(-4px);
      border-color: var(--sky);
      box-shadow: 0 24px 48px -20px rgba(16,22,44,0.18);
    }
    .fyw-card-num {
      font-family: 'Noto Serif Display', serif;
      font-style: italic;
      font-weight: 300;
      color: var(--sky);
      font-size: 17px;
      letter-spacing: 0.18em;
      margin-bottom: 24px;
      display: block;
    }
    .fyw-card .card-tag {
      font-family: 'Inter', sans-serif;
      font-size: 10.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--navy-link);
      font-weight: 500;
      margin-bottom: 14px;
    }
    .fyw-card h3 {
      font-family: 'Noto Serif Display', serif;
      font-weight: 400;
      font-size: 30px;
      color: var(--navy);
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -0.015em;
    }
    .fyw-card h3 em { color: var(--navy-link); }
    .fyw-card p {
      font-size: 16px;
      line-height: 1.72;
      color: var(--body-dark);
      margin-bottom: 0;
      flex: 1;
    }
    .fyw-card .card-detail {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid var(--rule-dark);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .fyw-card .card-detail-label {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--navy-link);
      font-weight: 500;
    }
    .fyw-card .card-detail-text {
      font-family: 'Noto Serif Display', serif;
      font-style: italic;
      color: var(--navy);
      font-size: 15px;
    }

    /* ---------- CTA SECTION ---------- */
    .fyw-cta {
      background: var(--navy-deep);
      color: white;
      padding: 0;
      position: relative;
      overflow: hidden;
    }
    .fyw-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 75% 35%, rgba(112,189,234,0.16) 0%, transparent 60%),
        radial-gradient(ellipse at 15% 75%, rgba(112,189,234,0.10) 0%, transparent 50%);
      pointer-events: none;
    }
    .fyw-cta-inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 160px 6%;
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 7fr 5fr;
      gap: 80px;
      align-items: center;
    }
    .fyw-cta h2 {
      color: white;
      font-size: clamp(40px, 5.4vw, 96px);
      font-weight: 300;
      letter-spacing: -0.028em;
      max-width: 720px;
      margin-bottom: 32px;
      line-height: 1.02;
    }
    .fyw-cta h2 em { color: var(--sky); }
    .fyw-cta p {
      font-size: 18px;
      color: rgba(255,255,255,0.78);
      max-width: 560px;
      line-height: 1.7;
      margin-bottom: 0;
      font-weight: 300;
    }
    .fyw-cta-actions {
      display: flex;
      flex-direction: column;
      gap: 22px;
      align-items: flex-start;
    }
    .fyw-cta-actions .btn { padding: 20px 36px; font-size: 13.5px; }
    .fyw-cta-meta {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      font-weight: 500;
    }

    /* ---------- DISCLAIMER ---------- */
    .fyw-disclaimer {
      background: var(--navy-deep);
      padding: 0 0 60px;
      position: relative;
      z-index: 2;
    }
    .fyw-disclaimer-inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 6%;
    }
    .fyw-disclaimer-inner p {
      font-family: 'Noto Serif Display', serif;
      font-style: italic;
      font-size: 13px;
      color: rgba(255,255,255,0.45);
      line-height: 1.6;
      max-width: 720px;
      padding-top: 32px;
      border-top: 1px solid rgba(255,255,255,0.10);
      margin: 0;
    }

    @media (max-width: 1024px) {
      .fyw-problem-grid, .fyw-whatfor-grid, .fyw-how-head, .fyw-cta-inner {
        grid-template-columns: 1fr;
        gap: 50px;
      }
      .fyw-cards { grid-template-columns: 1fr; gap: 24px; }
      .fyw-status { display: none; }
    }
    @media (max-width: 720px) {
      .fyw-hero-content { padding: 160px 6% 60px; }
      .fyw-problem, .fyw-whatfor, .fyw-how { padding: 100px 0 80px; }
      .fyw-cta-inner { padding: 100px 7%; }
      .fyw-card { padding: 40px 32px 36px; }
    }