/* ==========================================================================
   Saturate USA — Shared Core Stylesheet
   Version 2.0.0 · https://cdn.saturateusa.org/saturate-core/2.0.0/core.css
   --------------------------------------------------------------------------
   The project-site layout, ported from the design published at
   saturatelasvegas.org. IMMUTABLE once published: to change anything, copy
   this directory to the next version and move sites over one at a time.
   ========================================================================== */

:root {
      --navy: #20264a;
      --navy-mid: #303a66;
      --navy-deep: #1c2240;
      --accent: #B22234;
      --white: #ffffff;
      --header-h: 70px;
      --font: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --ok-available: #EC2027;
      --ok-adopted: #F48120;
      --ok-saturated: #094CA1;
      --dial-air: #4a7eb8;
      --dial-water: #2f6fc4;
      --dial-water-deep: #1e5aab;
      --dial-rim: #20264a;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font);
      color: var(--navy);
      background: var(--white);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
/* —— Fixed header —— */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: var(--header-h);
      background: var(--navy);
      border-bottom: none;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    }

    .header-inner {
      max-width: 1280px;
      margin: 0 auto;
      height: 100%;
      padding: 0 20px;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      min-width: 0;
    }

    .brand-logo {
      height: 60px;
      width: auto;
      flex-shrink: 0;
    }

    .brand-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--white);
      white-space: nowrap;
      line-height: 1.2;
    }

    .nav-desktop {
      display: none;
      align-items: center;
      gap: 4px;
      margin-left: auto;
      flex-wrap: nowrap;
    }

    .nav-desktop a {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--navy);
      padding: 8px 8px;
      white-space: nowrap;
      border-radius: 4px;
      transition: color 0.15s ease, background 0.15s ease;
    }

    .nav-desktop a:hover {
      color: var(--accent);
      background: rgba(178, 34, 52, 0.06);
    }

    .cta-lives {
      display: none;
      margin-left: 8px;
      flex-shrink: 0;
      background: var(--accent);
      color: var(--white);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 10px 16px;
      border-radius: 4px;
      transition: background 0.15s ease, transform 0.15s ease;
      white-space: nowrap;
    }

    .cta-lives:hover {
      background: #961c2c;
      transform: translateY(-1px);
    }

    /* Header CTAs — Adopt (scroll to form) + Donate (always visible; nav off per Emma 09/22) */
    .header-ctas {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      flex-shrink: 0;
    }

    .cta-adopt {
      display: inline-flex;
      align-items: center;
      background: var(--white);
      color: var(--navy);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 10px 16px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
      white-space: nowrap;
    }

    .cta-adopt:hover {
      background: rgba(255, 255, 255, 0.92);
      transform: translateY(-1px);
    }

    .cta-donate {
      display: inline-flex;
      align-items: center;
      background: var(--accent);
      color: var(--white);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 10px 16px;
      border-radius: 4px;
      transition: background 0.15s ease, transform 0.15s ease;
      white-space: nowrap;
    }

    .cta-donate:hover {
      background: #961c2c;
      transform: translateY(-1px);
    }

    /* Clear fixed header when scrolling to the adopt form */
    #adopt,
    .lead-form-band {
      scroll-margin-top: calc(var(--header-h) + 16px);
    }

    .hamburger {
      margin-left: auto;
      width: 44px;
      height: 44px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border-radius: 6px;
      color: var(--navy);
    }

    .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: currentColor;
      border-radius: 1px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .hamburger[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .hamburger[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile nav panel */
    .nav-mobile {
      display: none;
      position: fixed;
      top: var(--header-h);
      left: 0;
      right: 0;
      background: var(--white);
      border-bottom: 1px solid rgba(32, 38, 74, 0.1);
      box-shadow: 0 12px 24px rgba(32, 38, 74, 0.12);
      padding: 12px 20px 20px;
      z-index: 999;
      flex-direction: column;
      gap: 4px;
    }

    .nav-mobile.is-open { display: flex; }

    .nav-mobile a {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--navy);
      padding: 12px 8px;
      border-radius: 4px;
    }

    .nav-mobile a:hover { color: var(--accent); background: rgba(178, 34, 52, 0.06); }

    .nav-mobile .cta-lives-mobile {
      display: block;
      text-align: center;
      margin-top: 8px;
      background: var(--accent);
      color: var(--white);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 14px 16px;
      border-radius: 4px;
    }

    @media (min-width: 980px) {
      .nav-desktop { display: flex; }
      .cta-lives { display: inline-flex; align-items: center; }
      .hamburger { display: none; }
      .nav-mobile { display: none !important; }
      .brand-title { font-size: 14px; letter-spacing: 0.1em; }
      .nav-desktop a { font-size: 10.5px; padding: 8px 6px; }
    }

    @media (min-width: 1100px) {
      .nav-desktop a { font-size: 11px; padding: 8px 8px; }
    }

    /* —— Hero —— */
    .hero {
      margin-top: var(--header-h);
      background: var(--navy-deep);
    }

    /* Responsive banner placeholders — Desktop / Tablet / Phone */
    .banner-slot {
      width: 100%;
      position: relative;
      display: none;
      align-items: center;
      justify-content: center;
      border: 2px dashed rgba(255, 255, 255, 0.35);
      background:
        repeating-linear-gradient(
          -45deg,
          rgba(255,255,255,0.03),
          rgba(255,255,255,0.03) 12px,
          transparent 12px,
          transparent 24px
        ),
        var(--navy-mid);
      color: rgba(255, 255, 255, 0.9);
      text-align: center;
      overflow: hidden;
    }

    .banner-slot__label {
      font-size: clamp(14px, 2.5vw, 20px);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 16px;
    }

    .banner-slot__hint {
      display: block;
      margin-top: 8px;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.04em;
      opacity: 0.7;
      text-transform: none;
    }

    /* Phone: default / small */
    .banner-slot--phone {
      display: flex;
      min-height: 220px;
      aspect-ratio: 16 / 10;
    }

    /* Tablet: mid */
    @media (min-width: 640px) and (max-width: 1023px) {
      .banner-slot--phone { display: none; }
      .banner-slot--tablet {
        display: flex;
        min-height: 280px;
        aspect-ratio: 21 / 9;
      }
    }

    /* Desktop: large */
    @media (min-width: 1024px) {
      .banner-slot--phone,
      .banner-slot--tablet { display: none; }
      .banner-slot--desktop {
        display: flex;
        min-height: 360px;
        aspect-ratio: 3 / 1;
        max-height: 480px;
      }
    }

    /* Live banner images */
    .banner-slot { border: 0; background: none; }
    .banner-slot > img.banner-img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .banner-slot--phone { aspect-ratio: auto; min-height: 0; }
    .banner-slot--phone > img.banner-img { height: auto; }

    .hero-copy {
      background: var(--white);
      padding: 40px 24px 32px;
      text-align: center;
    }

    .hero-copy h1 {
      font-size: clamp(26px, 5vw, 42px);
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .hero-copy h1 .hero-saturate {
      color: var(--navy);
      font-weight: 800;
    }

    .hero-copy h1 .hero-place,
.hero-copy h1 .hero-lasvegas {
      color: var(--accent);
      font-weight: 800;
    }

    .hero-copy h1 .em {
      font-weight: 800;
      color: var(--accent);
    }

    .vision-line {
      max-width: 640px;
      margin: 0 auto;
      font-size: clamp(15px, 2.2vw, 18px);
      font-weight: 400;
      color: var(--navy-mid);
      line-height: 1.55;
    }

    /* —— Water dial band (OK-style; under hero headline, before map) —— */
    .dial-band {
      background: var(--white);
      padding: 8px 0 48px;
    }

    .dial-band__note {
      /* internal draft only — not customer-facing shop talk */
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .dial-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      gap: 18px 22px;
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .water-dial {
      width: 168px;
      flex: 0 0 auto;
    }

    .water-dial__circle {
      position: relative;
      width: 168px;
      height: 168px;
      border-radius: 50%;
      border: 5px solid var(--dial-rim);
      background: var(--dial-air);
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(32, 38, 74, 0.08);
    }

    .water-dial__fill {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0%;
      background: linear-gradient(180deg, var(--dial-water) 0%, var(--dial-water-deep) 100%);
      transition: none;
      will-change: height;
    }

    .water-dial__fill.is-animating {
      transition: height 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .water-dial__wave {
      position: absolute;
      left: -50%;
      bottom: 100%;
      width: 200%;
      height: 18px;
      color: var(--dial-water);
      animation: dial-wave 2.8s linear infinite;
      pointer-events: none;
    }

    .water-dial__wave--back {
      color: rgba(47, 111, 196, 0.55);
      bottom: calc(100% - 3px);
      animation-duration: 3.6s;
      animation-direction: reverse;
      height: 16px;
    }

    .water-dial__wave svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    @keyframes dial-wave {
      0% { transform: translateX(0); }
      100% { transform: translateX(25%); }
    }

    .water-dial__content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 18px 12px;
      pointer-events: none;
    }

    .water-dial__value {
      font-size: clamp(22px, 3.2vw, 28px);
      font-weight: 800;
      color: var(--white);
      line-height: 1.1;
      letter-spacing: -0.02em;
      text-shadow: 0 1px 3px rgba(28, 34, 64, 0.45);
      font-variant-numeric: tabular-nums;
    }

    .water-dial__label {
      margin-top: 8px;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--white);
      line-height: 1.25;
      text-shadow: 0 1px 3px rgba(28, 34, 64, 0.45);
      max-width: 130px;
    }

    @media (min-width: 720px) {
      .water-dial,
      .water-dial__circle { width: 176px; height: 176px; }
    }

    @media (max-width: 480px) {
      .dial-row { gap: 16px 14px; }
      .water-dial,
      .water-dial__circle { width: 148px; height: 148px; }
      .water-dial__value { font-size: 20px; }
      .water-dial__label { font-size: 8.5px; max-width: 112px; }
    }

    /* —— Shared section chrome —— */
    .section-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .section-kicker {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 10px;
      text-align: center;
    }

    .section-title {
      font-size: clamp(22px, 3.5vw, 32px);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--navy);
      text-align: center;
      line-height: 1.25;
      margin-bottom: 28px;
    }

    /* —— Map band —— */
    /* Hidden until Scott has ZIP activity — Bret map not live yet (09/22/26) */
    .map-band.is-hidden {
      display: none !important;
    }

    .map-video-lead {
      max-width: 640px;
      margin: -8px auto 28px;
      text-align: center;
      font-size: 15px;
      font-weight: 400;
      color: var(--navy-mid);
      line-height: 1.55;
    }

    .map-band .map-dedication {
      color: var(--accent);
      text-align: center;
      margin-bottom: 20px;
    }

    .map-band .map-video {
      max-width: 860px;
      margin: 0 auto 88px;
    }

    .map-band .map-video + .section-title {
      margin-top: 16px;
      margin-bottom: 28px;
    }


    .map-band.map-band--headline {
      padding-bottom: 24px;
    }

    .map-band.map-band--video {
      padding-top: 12px;
    }


    .map-band .dial-row--in-map {
      margin: 8px 0 0;
    }

    .map-band {
      background: #f5f6fa;
      padding: 56px 0 64px;
      border-top: 1px solid rgba(32, 38, 74, 0.06);
      border-bottom: 1px solid rgba(32, 38, 74, 0.06);
    }

    .map-legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 16px;
      margin-bottom: 28px;
    }

    .legend-chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--white);
      border: 1px solid rgba(32, 38, 74, 0.1);
      border-radius: 999px;
      padding: 8px 16px 8px 12px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--navy);
      box-shadow: 0 1px 3px rgba(32, 38, 74, 0.06);
    }

    .legend-swatch {
      width: 14px;
      height: 14px;
      border-radius: 3px;
      flex-shrink: 0;
    }

    .legend-swatch--available { background: var(--ok-available); }
    .legend-swatch--adopted { background: var(--ok-adopted); }
    .legend-swatch--saturated { background: var(--ok-saturated); }

    .map-frame {
      background: var(--white);
      border: 1px solid rgba(32, 38, 74, 0.12);
      border-radius: 12px;
      box-shadow: 0 8px 28px rgba(32, 38, 74, 0.08);
      padding: 12px;
      overflow: hidden;
    }

    .map-frame__bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 12px 14px;
      border-bottom: 1px solid rgba(32, 38, 74, 0.08);
      margin-bottom: 12px;
    }

    .map-frame__title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--navy);
    }

    .map-frame__hint {
      font-size: 11px;
      font-weight: 600;
      color: var(--navy-mid);
      opacity: 0.75;
    }

    .map-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 280px;
      aspect-ratio: 16 / 9;
      max-height: 420px;
      border: 2px dashed rgba(32, 38, 74, 0.28);
      border-radius: 8px;
      background:
        repeating-linear-gradient(
          -45deg,
          rgba(32, 38, 74, 0.03),
          rgba(32, 38, 74, 0.03) 12px,
          transparent 12px,
          transparent 24px
        ),
        #eef0f6;
      text-align: center;
      padding: 24px;
    }

    .map-placeholder__label {
      font-size: clamp(14px, 2.2vw, 18px);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--navy-mid);
      line-height: 1.45;
    }

    .map-placeholder__sub {
      display: block;
      margin-top: 10px;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.02em;
      text-transform: none;
      color: var(--navy-mid);
      opacity: 0.8;
    }

    /* —— How it works —— */
    .how-it-works {
      background: var(--white);
      padding: 64px 0 80px;
    }

    @media (min-width: 1024px) {
      .how-it-works .section-inner { max-width: 1140px; }
    }

    .how-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 26px;
    }

    @media (min-width: 640px) {
      .how-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (min-width: 1024px) {
      .how-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
    }

    .how-card {
      background: #f8f9fc;
      border: 1px solid rgba(32, 38, 74, 0.08);
      border-radius: 16px;
      padding: 30px 22px 28px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .how-card:hover {
      box-shadow: 0 14px 34px rgba(32, 38, 74, 0.12);
      transform: translateY(-2px);
    }

    .how-card__top {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .how-step {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: var(--navy);
      color: var(--white);
      font-size: 22px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      letter-spacing: 0;
    }

    .how-card__icon {
      font-size: 54px;
      line-height: 1;
      opacity: 0.9;
    }

    .how-card h3 {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      line-height: 1.2;
    }

    .how-card p {
      font-size: 16.5px;
      font-weight: 400;
      color: var(--navy-mid);
      line-height: 1.65;
      flex: 1;
    }

    .how-card strong {
      color: var(--navy);
      font-weight: 700;
    }

    /* Phone: center step number, emoji, and title (body copy stays left) */
    @media (max-width: 639px) {
      .how-card__top {
        justify-content: center;
      }

      .how-card h3 {
        text-align: center;
        width: 100%;
      }
    }

    /* —— Commitments —— */
    .commitments {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: var(--accent);
      padding: 64px 0 72px;
      border-top: none;
    }

    /* Flag under the red wash — eye candy, container stays saturated red */
    .commitments::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url("../../img/commitments-flag.jpg") center / cover no-repeat;
      opacity: 0.35;
      z-index: 0;
      pointer-events: none;
    }

    .commitments::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--accent);
      opacity: 0.72;
      z-index: 0;
      pointer-events: none;
    }

    .commitments > .section-inner {
      position: relative;
      z-index: 1;
    }

    .commitments-card {
      max-width: 760px;
      margin: 0 auto;
      background: var(--white);
      border: 1px solid rgba(32, 38, 74, 0.1);
      border-radius: 12px;
      box-shadow: 0 8px 28px rgba(32, 38, 74, 0.08);
      padding: 40px 32px 36px;
    }

    .commitments-card .section-title {
      margin-bottom: 18px;
    }

    .commitments-lead {
      font-size: 16px;
      font-weight: 600;
      color: var(--navy);
      line-height: 1.55;
      text-align: center;
      margin-bottom: 28px;
    }

    .commitments-list {
      list-style: none;
      counter-reset: commit;
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-bottom: 28px;
    }

    .commitments-list li {
      counter-increment: commit;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      font-size: 15px;
      font-weight: 400;
      color: var(--navy-mid);
      line-height: 1.6;
    }

    .commitments-list li::before {
      content: counter(commit);
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--navy);
      color: var(--white);
      font-size: 13px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
    }

    .commitments-thanks {
      font-size: 15px;
      font-weight: 400;
      color: var(--navy-mid);
      line-height: 1.65;
      text-align: center;
      border-top: 1px solid rgba(32, 38, 74, 0.08);
      padding-top: 24px;
    }

    .commitments-thanks strong {
      color: var(--navy);
      font-weight: 600;
    }

    @media (max-width: 560px) {
      .commitments-card { padding: 28px 20px 28px; }
    }

    /* —— Feature / video sections (Perfected in Unity, A Vision Unfolds, Success Story) —— */
    .feature-band {
      background: var(--white);
      padding: 56px 0 64px;
      border-top: 1px solid rgba(32, 38, 74, 0.06);
    }

    .feature-band--alt { background: #f5f6fa; }

    .feature-band--blue {
      background: var(--navy);
      border-top: none;
    }

    .feature-band--blue .section-kicker {
      color: rgba(255, 255, 255, 0.78);
    }

    .feature-band--blue .section-title {
      color: var(--white);
    }

    .feature-band--blue .feature-media {
      margin-top: 8px;
      margin-bottom: 0;
    }

    .feature-embed {
      position: relative;
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      background: #000;
    }
    .feature-embed iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* Lock both feature videos to the same outer frame (16:9). Wider masters letterbox inside. */
    .feature-embed--16x9 {
      padding-top: 56.25%;
    }

    /* Video poster launchers (Canva 1920×1080 stills over Vimeo) */
    .video-poster {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      margin: 0;
      cursor: pointer;
      background: #000;
    }
    .video-poster img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .feature-embed.is-playing .video-poster {
      display: none;
    }


    .feature-media {
      max-width: 860px;
      margin: 0 auto 28px;
    }

    .feature-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      min-height: 300px;
      aspect-ratio: 16 / 9;
      max-height: 460px;
      border: 2px dashed rgba(32, 38, 74, 0.28);
      border-radius: 12px;
      background:
        repeating-linear-gradient(
          -45deg,
          rgba(32, 38, 74, 0.03),
          rgba(32, 38, 74, 0.03) 12px,
          transparent 12px,
          transparent 24px
        ),
        #eef0f6;
      text-align: center;
      padding: 24px;
    }

    .feature-placeholder__play {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: var(--accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(178, 34, 52, 0.35);
    }

    .feature-placeholder__play::before {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 11px 0 11px 18px;
      border-color: transparent transparent transparent var(--white);
      margin-left: 5px;
    }

    .feature-placeholder__label {
      font-size: clamp(14px, 2.2vw, 18px);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--navy-mid);
      line-height: 1.45;
    }

    .feature-placeholder__sub {
      display: block;
      margin-top: 8px;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.02em;
      text-transform: none;
      color: var(--navy-mid);
      opacity: 0.8;
    }

    .feature-lead {
      font-size: 18px;
      font-weight: 700;
      color: var(--accent);
      text-align: center;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-top: -14px;
      margin-bottom: 12px;
    }

    .feature-body {
      max-width: 620px;
      margin: 0 auto;
      font-size: 15px;
      font-weight: 400;
      color: var(--navy-mid);
      line-height: 1.6;
      text-align: center;
    }

    .feature-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 14px;
      margin-top: 22px;
    }

    .feature-link {
      display: inline-flex;
      align-items: center;
      background: var(--accent);
      color: var(--white);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 12px 22px;
      border-radius: 4px;
      transition: background 0.15s ease, transform 0.15s ease;
    }

    .feature-link:hover {
      background: #961c2c;
      transform: translateY(-1px);
    }

    .feature-more {
      text-align: center;
      margin-top: 22px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--navy);
    }

    .feature-more a { color: var(--accent); }
    .feature-more a:hover { text-decoration: underline; }

    /* —— Lead form stub —— */
    .lead-form-band {
      background: var(--white);
      padding: 64px 0 88px;
    }

    .lead-form-card {
      max-width: 640px;
      margin: 0 auto;
      background: #f8f9fc;
      border: 1px solid rgba(32, 38, 74, 0.1);
      border-radius: 12px;
      box-shadow: 0 8px 28px rgba(32, 38, 74, 0.08);
      padding: 40px 32px 36px;
    }

    .lead-form-card .section-title {
      margin-bottom: 12px;
    }

    .lead-form-sub {
      font-size: 15px;
      font-weight: 400;
      color: var(--navy-mid);
      text-align: center;
      line-height: 1.55;
      margin-bottom: 28px;
    }

    .lead-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .lead-form__row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    @media (min-width: 560px) {
      .lead-form__row--2 { grid-template-columns: 1fr 1fr; }
      .lead-form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
    }

    .lead-form__group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .lead-form__legend {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--navy);
    }

    .lead-form__checks {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
    }

    .lead-form label.lead-form__check {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 9px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: none;
      color: var(--navy);
      cursor: pointer;
    }

    .lead-form label.lead-form__check input[type="checkbox"] {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
      margin: 0;
      padding: 0;
      accent-color: var(--navy-mid);
    }

    .lead-form__hint {
      margin-top: -8px;
      font-size: 13px;
      font-style: italic;
      color: rgba(32, 38, 74, 0.6);
    }

    .lead-form label {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--navy);
    }

    .lead-form input,
    .lead-form textarea {
      font-family: inherit;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      color: var(--navy);
      background: var(--white);
      border: 1px solid rgba(32, 38, 74, 0.18);
      border-radius: 6px;
      padding: 12px 14px;
      outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      width: 100%;
    }

    .lead-form input:focus,
    .lead-form textarea:focus {
      border-color: var(--navy-mid);
      box-shadow: 0 0 0 3px rgba(32, 38, 74, 0.1);
    }

    .lead-form textarea {
      min-height: 110px;
      resize: vertical;
    }

    .lead-form__submit {
      margin-top: 8px;
      align-self: center;
      background: var(--accent);
      color: var(--white);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 14px 36px;
      border-radius: 4px;
      transition: background 0.15s ease, transform 0.15s ease;
    }

    .lead-form__submit:hover {
      background: #961c2c;
      transform: translateY(-1px);
    }

    /* —— Stepped form —— */
    .lead-form__steps {
      display: flex;
      gap: 14px;
      list-style: none;
      margin: 0 0 4px;
      padding: 0 0 20px;
      border-bottom: 1px solid rgba(32, 38, 74, 0.12);
    }

    .lead-form__stepdot {
      display: flex;
      align-items: center;
      gap: 9px;
      flex: 1 1 0;
      min-width: 0;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #5c617c;
      transition: color 0.15s ease;
    }

    .lead-form__stepnum {
      flex: 0 0 auto;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(32, 38, 74, 0.1);
      color: #5c617c;
      font-size: 12px;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .lead-form__stepdot.is-active { color: var(--navy); }
    .lead-form__stepdot.is-active .lead-form__stepnum { background: var(--accent); color: var(--white); }
    .lead-form__stepdot.is-done { color: var(--navy-mid); }
    .lead-form__stepdot.is-done .lead-form__stepnum { background: var(--navy-mid); color: var(--white); }

    .lead-form__step {
      display: none;
      flex-direction: column;
      gap: 16px;
    }

    .lead-form__step.is-active { display: flex; }

    .lead-form__nav {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 12px;
      margin-top: 10px;
    }

    .lead-form__navside { display: flex; }
    .lead-form__navside--end { justify-content: flex-end; }

    .lead-form__count {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #5c617c;
      text-align: center;
    }

    .lead-form__nav .lead-form__submit {
      margin-top: 0;
      align-self: auto;
    }

    .lead-form__btn--back {
      background: transparent;
      color: var(--navy);
      border: 1px solid rgba(32, 38, 74, 0.25);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 13px 26px;
      border-radius: 4px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .lead-form__btn--back:hover {
      background: rgba(32, 38, 74, 0.06);
      border-color: var(--navy-mid);
    }

    .lead-form__btn--back.is-hidden { visibility: hidden; }

    @media (max-width: 640px) {
      .lead-form__steps { gap: 8px; }
      .lead-form__steplabel { display: none; }
      .lead-form__stepdot { flex: 0 0 auto; }
      .lead-form__nav { grid-template-columns: 1fr 1fr; row-gap: 14px; }
      .lead-form__count { grid-row: 1; grid-column: 1 / -1; }
      .lead-form__btn--back, .lead-form__nav .lead-form__submit { padding-left: 18px; padding-right: 18px; }
    }

    @media (max-width: 560px) {
      .lead-form-card { padding: 28px 20px 28px; }
    }
    /* —— Footer —— */
    .site-footer {
      background: var(--navy-deep);
      color: rgba(255, 255, 255, 0.82);
      padding: 56px 0 0;
    }

    .footer-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 36px 24px;
    }

    @media (min-width: 640px) {
      .footer-inner { grid-template-columns: 1fr 1fr; }
    }

    @media (min-width: 980px) {
      .footer-inner { grid-template-columns: 1.6fr 1fr 1fr; }
    }

    .footer-brand__name {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 4px;
    }

    .footer-brand__city {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #e85a6a;
      margin-bottom: 18px;
    }

    .footer-address,
    .footer-contact {
      font-size: 14px;
      line-height: 1.7;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.72);
      font-style: normal;
    }

    .footer-contact { margin-top: 12px; }
    .footer-contact a {
      color: rgba(255, 255, 255, 0.82);
      transition: color 0.15s ease;
      display: inline-flex;
      align-items: center;
      min-height: 48px;
      padding: 8px 0;
      line-height: 1.4;
    }
    .footer-contact a:hover { color: #fff; }

    .footer-col h3 {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 16px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-links a {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.72);
      transition: color 0.15s ease;
    }

    .footer-links a:hover { color: #fff; }

    .footer-social {
      display: flex;
      gap: 12px;
      margin-top: 18px;
    }

    .footer-social a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      transition: background 0.15s ease, transform 0.15s ease;
    }

    .footer-social a:hover { background: var(--accent); transform: translateY(-1px); }
    .footer-social svg { width: 18px; height: 18px; fill: currentColor; }

    .footer-bottom {
      margin-top: 44px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      padding: 20px 24px;
    }

    .footer-bottom p {
      max-width: 1180px;
      margin: 0 auto;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.6);
      text-align: center;
    }

    /* Phone: center footer */
    @media (max-width: 639px) {
      .footer-inner {
        text-align: center;
        justify-items: center;
      }

      .footer-brand,
      .footer-col {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .footer-links {
        align-items: center;
      }

      .footer-social {
        justify-content: center;
      }

      .footer-address,
      .footer-contact {
        text-align: center;
      }

      .footer-bottom p {
        text-align: center;
      }
    }

    /* —— Intro promo popup —— */
    .intro-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; }
    .intro-modal[hidden] { display: none; }
    .intro-modal__backdrop { position: absolute; inset: 0; background: rgba(28, 34, 64, 0.8); }
    .intro-modal__dialog { position: relative; z-index: 1; width: min(900px, 100%); background: var(--white); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); padding: 14px; }
    .intro-modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
    .intro-modal__close:hover { background: var(--accent); }
    .intro-modal__video { position: relative; width: 100%; padding-top: 56.25%; border-radius: 8px; overflow: hidden; background: #000; }
    .intro-modal__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .intro-modal__video.is-playing .video-poster { display: none; }
    .intro-modal__video .video-poster { position: absolute; inset: 0; z-index: 1; }

    /* —— Legal pages (privacy / terms) —— */
    .legal-main {
      padding: calc(var(--header-h) + 48px) 0 72px;
      background: var(--white);
      min-height: 50vh;
    }

    .legal-article {
      max-width: 760px;
      margin: 0 auto;
    }

    .legal-article .section-kicker {
      margin-bottom: 8px;
    }

    .legal-article .section-title {
      text-align: left;
      margin-bottom: 12px;
    }

    .legal-updated {
      font-size: 13px;
      color: var(--navy-mid);
      margin-bottom: 28px;
    }

    .legal-article h3 {
      font-size: 16px;
      font-weight: 700;
      color: var(--navy);
      margin: 28px 0 10px;
    }

    .legal-article p,
    .legal-article li {
      font-size: 15px;
      line-height: 1.65;
      color: var(--navy-mid);
      margin-bottom: 12px;
    }

    .legal-article ul {
      padding-left: 1.2em;
      margin-bottom: 16px;
    }

    .legal-article a {
      color: var(--accent);
      text-decoration: underline;
    }


/* ==========================================================================
   2.0.0 additions to the ported design
   ========================================================================== */

/* Hero: one <picture>, one download. Replaces the three .banner-slot divs,
   which fetched all three crops on every visit. */
.hero-banner { display: block; width: 100%; }
.hero-banner img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
}
@media (min-width: 640px)  { .hero-banner img { aspect-ratio: 1024 / 440; } }
@media (min-width: 1024px) { .hero-banner img { aspect-ratio: 3 / 1; max-height: 480px; } }

/* Map embed. Sized by aspect-ratio so its height follows the width. */
.map-band .map-frame { margin-top: 40px; }
.map-embed {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; min-height: 360px; max-height: 640px;
  border: 0; border-radius: 8px; background: #eef0f6;
}
@media (max-width: 640px) { .map-embed { aspect-ratio: 4 / 5; min-height: 420px; } }

/* Accessibility */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 3000;
  background: var(--navy); color: var(--white);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 12px 18px; border-radius: 0 0 6px 6px; transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* Honeypot: off-screen and out of the tab order. Never give it a visible label. */
.lead-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .water-dial__wave { animation: none; }
}