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

    :root {
      --navy:       #1D2535;
      --navy-mid:   #252e42;
      --teal:       #1D4D47;
      --teal-light: #2a6b63;
      --white:      #ffffff;
      --off-white:  #F6F7F9;
      --gray-100:   #ECEEF1;
      --gray-200:   #D8DCE3;
      --gray-400:   #9AA4B2;
      --gray-600:   #56616F;
      --charcoal:   #181D25;
      --radius:     0.75rem;
      --radius-sm:  0.5rem;
      --max-w:      1120px;
      --bar-h:      0px;
    }

    html { scroll-behavior: smooth; }

    /* ─── ANNOUNCEMENT BAR ───────────────────────────── */
    .announcement-bar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 201;
      background: var(--navy);
      color: rgba(255,255,255,0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0.55rem 1.5rem;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.015em;
      line-height: 1.45;
    }
    .announcement-bar em {
      font-style: italic;
      opacity: 0.78;
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--charcoal);
      background: var(--white);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ─── NAV ─────────────────────────────────────── */
    nav {
      position: fixed;
      top: var(--bar-h); left: 0; right: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.125rem 2.5rem;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,0.07);
    }

    .nav-logo {
      display: inline-block;
      text-decoration: none;
      line-height: 1;
    }

    .nav-logo img {
      height: 99px;
      width: auto;
      display: block;
      filter: none;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2.25rem;
      list-style: none;
    }

    .nav-links a {
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: rgba(29,37,53,0.5);
      text-decoration: none;
      text-transform: uppercase;
      transition: color 0.2s;
    }

    .nav-links a:hover { color: var(--navy); }

    .nav-cta {
      background: var(--navy) !important;
      color: var(--white) !important;
      padding: 0.5rem 1.25rem !important;
      border-radius: var(--radius-sm) !important;
      font-weight: 600 !important;
      letter-spacing: 0.02em !important;
      transition: opacity 0.2s !important;
    }

    .nav-cta:hover { opacity: 0.88 !important; }

    @media (max-width: 680px) {
      .nav-links { display: none; }
      nav { padding: 1rem 1.25rem; }
    }

    /* ─── HERO ────────────────────────────────────── */
    .hero {
      padding: 4.25rem 2.5rem 3rem;
      background: linear-gradient(155deg, #ffffff 0%, #f0f1f4 40%, #e2e5eb 100%);
      color: var(--charcoal);
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 50% at 15% 100%, rgba(29,77,71,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 0%, rgba(126,207,202,0.08) 0%, transparent 55%);
      pointer-events: none;
    }

    .hero-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .hero-text {
      text-align: center;
      max-width: 748px;
      width: 100%;
    }

    .hero-right-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.75rem;
      width: 100%;
    }

    /* floating cans panel */
    .hero-cans-panel {
      position: relative;
      height: 520px;
      overflow: hidden;
    }

    .hero-cans-grid {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      align-items: center;
      padding: 1rem;
    }

    .hero-can-float {
      display: flex;
      justify-content: center;
      animation: hero-float var(--fd, 4s) ease-in-out infinite;
      animation-delay: var(--dl, 0s);
    }

    .hero-can-float img {
      height: 221px;
      width: auto;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 12px 24px rgba(0,0,0,0.12));
      transition: transform 0.3s ease;
    }

    .hero-can-float img:hover {
      transform: scale(1.08) translateY(-8px);
    }

    @keyframes hero-float {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-14px); }
    }

    @media (max-width: 860px) {
      .hero-text { max-width: 100%; }
      .hero-right-col { align-items: center; }
      .hero-cans-panel { height: 340px; }
      .hero-eyebrow { justify-content: center; }
      .hero-actions { justify-content: center !important; }
      .hero-water-fact { justify-content: center; }
    }

    .hero-eyebrow {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      margin-bottom: 1.5rem;
      justify-content: center;
    }

    .eyebrow-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--charcoal);
    }

    .eyebrow-text {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(29,37,53,0.45);
    }

    .hero h1 {
      font-size: clamp(2rem, 4.5vw, 3.75rem);
      font-weight: 800;
      line-height: 1.0;
      letter-spacing: -0.04em;
      margin-bottom: 1.25rem;
    }

    .hero h1 .accent {
      color: var(--charcoal);
      font-style: italic;
      font-weight: 300;
    }

    .hero h1 .h1-geo {
      display: block;
      margin-top: 0.85rem;
      font-size: clamp(0.78rem, 1.15vw, 0.95rem);
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(29,37,53,0.52);
    }

    .hero-tagline {
      font-size: clamp(0.8rem, 1.4vw, 1rem);
      font-weight: 300;
      font-style: italic;
      letter-spacing: 0.01em;
      color: rgba(29,37,53,0.55);
      margin: 0 auto 1rem;
      white-space: nowrap;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    @media (max-width: 600px) {
      .hero-tagline {
        white-space: normal;
        text-align: center;
        font-size: 0.8rem;
      }
    }

    .hero-sub {
      font-size: 1.125rem;
      color: rgba(29,37,53,0.72);
      max-width: 580px;
      margin: 0 auto 1rem;
      line-height: 1.7;
      font-weight: 400;
    }

    .hero-detail {
      font-size: 0.8125rem;
      color: rgba(29,37,53,0.40);
      max-width: 748px;
      margin: 0 auto 0.44rem;
      line-height: 1.75;
      font-weight: 400;
      letter-spacing: 0.01em;
    }
    .hero-water-fact {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 0;
      max-width: 600px;
      margin: 1.5rem auto 2rem;
      background: rgba(29,37,53,0.04);
      border: 1px solid rgba(29,37,53,0.09);
      border-radius: 14px;
      overflow: hidden;
    }
    .hwf-ph {
      background: var(--charcoal);
      color: #fff;
      padding: 1.1rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .hwf-ph-num {
      font-size: 2.25rem;
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1;
    }
    .hwf-ph-label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      opacity: 0.6;
      margin-top: 0.2rem;
    }
    .hwf-divider {
      width: 1px;
      background: rgba(29,37,53,0.12);
    }
    .hwf-facts {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0.9rem 1.25rem;
      gap: 0.35rem;
      text-align: left;
    }
    .hwf-fact-line {
      font-size: 0.8rem;
      font-weight: 600;
      color: rgba(29,37,53,0.75);
      letter-spacing: 0.01em;
      line-height: 1.4;
    }
    .hwf-fact-line span {
      color: rgba(29,37,53,0.4);
      font-weight: 400;
    }
    .hero-water-fact {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 0;
      max-width: 600px;
      margin: 1.5rem auto 2rem;
      background: rgba(29,37,53,0.04);
      border: 1px solid rgba(29,37,53,0.09);
      border-radius: 14px;
      overflow: hidden;
    }
    .hwf-ph {
      background: var(--charcoal);
      color: #fff;
      padding: 1.1rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .hwf-ph-num {
      font-size: 2.25rem;
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1;
    }
    .hwf-ph-label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      opacity: 0.6;
      margin-top: 0.2rem;
    }
    .hwf-divider {
      width: 1px;
      background: rgba(29,37,53,0.12);
    }
    .hwf-facts {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0.9rem 1.25rem;
      gap: 0.35rem;
      text-align: left;
    }
    .hwf-fact-line {
      font-size: 0.8rem;
      font-weight: 600;
      color: rgba(29,37,53,0.75);
      letter-spacing: 0.01em;
      line-height: 1.4;
    }
    .hwf-fact-line span {
      color: rgba(29,37,53,0.4);
      font-weight: 400;
    }

    /* Mini process steps */
    .hero-process {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-bottom: 2.25rem;
      flex-wrap: wrap;
    }

    .hero-process-step {
      background: rgba(29,37,53,0.06);
      border: 1px solid rgba(29,37,53,0.12);
      color: rgba(29,37,53,0.7);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 0.375rem 0.875rem;
      border-radius: 2rem;
    }

    .hero-process-arrow {
      color: rgba(29,37,53,0.25);
      font-size: 0.875rem;
    }

    /* ─── CAN SHOWCASE ────────────────────────────── */
    .can-showcase {
      width: 100%;
      margin-top: 0.25rem;
      margin-bottom: 0.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .can-hero-img {
      width: 70%;
      max-width: 476px;
      height: auto;
      display: block;
      mix-blend-mode: multiply;
    }
    .can-img-labels {
      display: flex;
      justify-content: center;
      gap: 12rem;
      margin-top: 0.25rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.585rem;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: rgba(29,37,53,0.36);
    }

    .can-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;
      perspective: 900px;
      flex-shrink: 0;
    }

    /* Each can shifts vertically to create arc */
    .can-wrap:nth-child(1) { margin-bottom: 16px; }
    .can-wrap:nth-child(2) { margin-bottom: 6px; }
    .can-wrap:nth-child(3) { margin-bottom: 0; }
    .can-wrap:nth-child(4) { margin-bottom: 6px; }
    .can-wrap:nth-child(5) { margin-bottom: 16px; }

    .can {
      width: 86px;
      height: 228px;
      position: relative;
      transform: rotateY(var(--rot));
      transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
                  filter 0.3s ease;
      filter: drop-shadow(-3px 16px 32px rgba(0,0,0,0.22));
      animation: can-float var(--float-dur, 3s) ease-in-out infinite;
      animation-delay: var(--float-delay, 0s);
    }

    @keyframes can-float {
      0%, 100% { transform: rotateY(var(--rot)) translateY(0); }
      50%       { transform: rotateY(var(--rot)) translateY(-6px); }
    }

    .can:hover,
    @media (hover: hover) {
      .can-wrap:hover .can {
        transform: rotateY(0deg) translateY(-10px) scale(1.04);
        filter: drop-shadow(0 28px 40px rgba(0,0,0,0.18));
        animation-play-state: paused;
      }
    }

    .can-body {
      width: 86px;
      height: 228px;
      border-radius: 43px / 11px;
      overflow: hidden;
      position: relative;
      background: var(--can-bg);
    }

    .can-shine {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right,
        transparent 0%,
        rgba(255,255,255,0.08) 28%,
        rgba(255,255,255,0.32) 40%,
        rgba(255,255,255,0.12) 52%,
        transparent 65%
      );
      pointer-events: none;
      z-index: 3;
    }

    .can-cap-top {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 70px; height: 13px;
      border-radius: 50%;
      background: linear-gradient(180deg, #d0d0d0 0%, #888 100%);
      z-index: 4;
    }

    .can-tab {
      position: absolute;
      top: 3px; left: 50%;
      transform: translateX(-50%);
      width: 10px; height: 3px;
      background: #aaa;
      border-radius: 2px;
    }

    .can-cap-bottom {
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 70px; height: 13px;
      border-radius: 50%;
      background: linear-gradient(180deg, #888 0%, #555 100%);
      z-index: 4;
    }

    .can-label {
      position: absolute;
      left: 10%; right: 10%;
      top: 14%; bottom: 14%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 2;
      text-align: center;
      overflow: hidden;
    }

    .can-brand-name {
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      text-align: center;
    }

    /* Individual can color themes */
    .can-wilson { --rot: -18deg; --float-dur: 3.2s; --float-delay: 0s; }
    .can-wilson .can-body {
      --can-bg: linear-gradient(to right,
        #3a4252 0%, #7a8898 14%, #c0ccd8 28%, #dce8f0 42%,
        #d0dce8 55%, #a0afbe 70%, #6a7a88 85%, #3a4252 100%);
    }
    .can-wilson .can-label span {
      font-size: 1.4rem; font-weight: 300; font-style: italic;
      color: rgba(255,255,255,0.92); letter-spacing: 0.02em;
      text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }

    .can-set { --rot: -8deg; --float-dur: 2.8s; --float-delay: 0.4s; }
    .can-set .can-body {
      --can-bg: linear-gradient(to right,
        #606060 0%, #a0a0a0 14%, #d8d8d8 28%, #f4f4f4 42%,
        #e8e8e8 55%, #c0c0c0 70%, #909090 85%, #606060 100%);
    }
    .can-set .can-label span {
      font-size: 1.75rem; font-weight: 800; letter-spacing: 0.08em;
      color: rgba(20,20,20,0.88);
    }

    .can-gp { --rot: 0deg; --float-dur: 3.5s; --float-delay: 0.8s; }
    .can-gp .can-body {
      --can-bg: linear-gradient(to right,
        #0a5c55 0%, #128878 14%, #18afa0 28%, #22c8b8 42%,
        #18afa0 55%, #108878 70%, #0a5c55 85%, #083f3a 100%);
    }
    .can-gp .can-label { gap: 2px; }
    .can-gp .can-label .gp-line1 {
      font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em;
      color: rgba(255,255,255,0.65); text-transform: uppercase;
    }
    .can-gp .can-label .gp-line2 {
      font-size: 1.1rem; font-weight: 800; letter-spacing: 0.05em;
      color: rgba(255,255,255,0.95); line-height: 1;
    }
    .can-gp .can-label .gp-line3 {
      font-size: 0.5rem; font-weight: 600; letter-spacing: 0.18em;
      color: rgba(255,255,255,0.5); text-transform: uppercase;
    }

    .can-std { --rot: 8deg; --float-dur: 3s; --float-delay: 0.2s; }
    .can-std .can-body {
      --can-bg: linear-gradient(to right,
        #1a1a22 0%, #2a2a35 14%, #3a3a4a 28%, #484858 42%,
        #3a3a4a 55%, #282832 70%, #1a1a22 85%, #121218 100%);
    }
    .can-std .can-label span {
      font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
      color: rgba(255,255,255,0.88); line-height: 1.25;
      text-align: center;
    }
    .can-std .can-label .std-the {
      font-size: 0.6rem; font-weight: 400; font-style: italic;
      color: rgba(255,255,255,0.55); letter-spacing: 0.05em;
    }

    .can-res { --rot: 18deg; --float-dur: 3.3s; --float-delay: 0.6s; }
    .can-res .can-body {
      --can-bg: linear-gradient(to right,
        #a8a8a8 0%, #d2d2d2 14%, #eeeeee 28%, #fafafa 42%,
        #f4f4f4 55%, #d8d8d8 70%, #b8b8b8 85%, #989898 100%);
    }
    .can-res .can-label span {
      font-size: 1.25rem; font-weight: 300; font-style: italic;
      color: rgba(30,40,50,0.85); letter-spacing: 0.02em;
    }

    .hero-actions {
      display: flex;
      gap: 0.875rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* Stats row — sits below cans, full width */
    .hero-stats {
      margin-top: 0;
    }

    .btn-primary {
      display: inline-block;
      background: var(--navy);
      color: var(--white);
      font-size: 0.9375rem;
      font-weight: 600;
      padding: 0.9rem 2rem;
      border-radius: var(--radius);
      text-decoration: none;
      transition: transform 0.2s, box-shadow 0.2s;
      letter-spacing: -0.01em;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(0,0,0,0.2);
    }

    .btn-ghost {
      display: inline-block;
      background: transparent;
      color: rgba(29,37,53,0.6);
      font-size: 0.9375rem;
      font-weight: 500;
      padding: 0.9rem 2rem;
      border-radius: var(--radius);
      border: 1px solid rgba(29,37,53,0.18);
      text-decoration: none;
      transition: border-color 0.2s, color 0.2s;
    }

    .btn-ghost:hover {
      border-color: rgba(29,37,53,0.4);
      color: var(--charcoal);
    }

    /* ─── PHOTO MOSAIC ───────────────────────────────*/
    .photo-section {
      background: var(--charcoal);
      padding: 0;
      overflow: hidden;
    }

    .photo-mosaic {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr 1fr;
      grid-template-rows: 420px;
      gap: 3px;
    }

    @media (max-width: 700px) {
      .photo-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: 260px 260px 260px;
      }
      .photo-mosaic .pm-3 { display: block; }
    }

    .pm-tile {
      position: relative;
      overflow: hidden;
      background: #111;
    }

    .pm-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
      display: block;
    }

    .pm-tile:hover img { transform: scale(1.04); }

    .pm-tile .pm-caption {
      position: absolute;
      bottom: 1.25rem;
      left: 1.25rem;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(4px);
      padding: 0.35rem 0.75rem;
      border-radius: 2rem;
    }

    /* Stats row */
    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 3rem;
      border-top: 1px solid rgba(0,0,0,0.1);
      grid-column: 1 / -1;
    }

    @media (max-width: 640px) {
      .hero-stats { grid-template-columns: repeat(3, 1fr); }
    }

    .hero-stat {
      padding: 2rem 1.5rem;
      border-right: 1px solid rgba(0,0,0,0.1);
    }

    .hero-stat:last-child { border-right: none; }

    @media (max-width: 640px) {
      /* three across on mobile — scale type and padding so they fit one row */
      .hero-stat { padding: 1.25rem 0.3rem; }
      .hero-stat:nth-child(2) { border-right: 1px solid rgba(0,0,0,0.1); }
      .hero-stat:nth-child(3) { border-top: none; }
    }

    .stat-value {
      font-size: 1.875rem;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--charcoal);
      line-height: 1;
      margin-bottom: 0.375rem;
    }

    .stat-label {
      font-size: 0.75rem;
      color: rgba(29,37,53,0.4);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* Must come after the base rules above — a media query adds no specificity,
       so an earlier block would just lose on source order. */
    @media (max-width: 640px) {
      .stat-value { font-size: 1.3rem; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 0.35rem; }
      .stat-label { font-size: 0.68rem; letter-spacing: 0.02em; line-height: 1.35; }
      .stat-label span { font-size: 0.58rem !important; letter-spacing: 0 !important; }
      /* "Both varieties available" is redundant next to "Still & Sparkling" on a phone */
      .hero-stat:nth-child(3) .stat-label { display: none; }
    }

    /* ─── MARQUEE ─────────────────────────────────── */
    .marquee-wrap {
      background: #000000;
      padding: 0.75rem 0;
      overflow: hidden;
      margin-top: calc(136px + var(--bar-h));
    }

    .marquee-track {
      display: flex;
      width: max-content;
      animation: marquee 35s linear infinite;
      will-change: transform;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .marquee-track span {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
      white-space: nowrap;
      padding: 0 2.5rem;
    }

    .marquee-track span::before {
      content: '·';
      margin-right: 2.5rem;
    }

    @-webkit-keyframes marquee {
      from { -webkit-transform: translateX(0); transform: translateX(0); }
      to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ─── SHARED SECTION STYLES ───────────────────── */
    section { padding: 6rem 2.5rem; }

    .container {
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 1rem;
    }

    .tag::before {
      content: '';
      display: block;
      width: 18px;
      height: 1px;
      background: var(--teal);
    }

    .section-h {
      font-size: clamp(2rem, 4.5vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.035em;
      color: var(--navy);
      line-height: 1.08;
      margin-bottom: 1rem;
    }

    .section-sub {
      font-size: 1rem;
      color: var(--gray-600);
      line-height: 1.75;
    }

    /* ─── HOW IT WORKS ────────────────────────────── */
    #how-it-works { background: var(--off-white); }

    .how-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: end;
      margin-bottom: 4rem;
    }

    @media (max-width: 700px) {
      .how-header { grid-template-columns: 1fr; gap: 1rem; }
    }

    .how-header-right {
      font-size: 0.9375rem;
      color: var(--gray-600);
      line-height: 1.75;
      align-self: end;
    }

    /* Accordion */
    .process-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 3rem;
      position: relative;
    }

    .process-steps::before {
      content: '';
      position: absolute;
      top: 1.375rem;
      left: calc(12.5% + 1.375rem);
      right: calc(12.5% + 1.375rem);
      height: 1px;
      background: var(--gray-200);
      z-index: 0;
    }

    .process-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 1.25rem;
      position: relative;
      z-index: 1;
    }

    .process-step-num {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 50%;
      background: var(--navy);
      color: var(--white);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
      flex-shrink: 0;
    }

    .process-step-title {
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--charcoal);
      letter-spacing: -0.01em;
      margin-bottom: 0.5rem;
      line-height: 1.3;
    }

    .process-step-body {
      font-size: 0.8375rem;
      color: var(--gray-600);
      line-height: 1.65;
    }

    @media (max-width: 720px) {
      .process-steps {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 1rem;
      }
      .process-steps::before { display: none; }
    }

    @media (max-width: 440px) {
      .process-steps { grid-template-columns: 1fr; }
    }

    /* ─── USE CASES ───────────────────────────────── */
    #use-cases { background: var(--white); }

    .use-cases-head {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: end;
      margin-bottom: 3rem;
    }

    @media (max-width: 700px) {
      .use-cases-head { grid-template-columns: 1fr; gap: 1rem; }
    }

    .use-cases-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
    }

    @media (max-width: 640px) {
      .use-cases-grid { grid-template-columns: 1fr; }
    }

    .uc-card {
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--gray-200);
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.25s, transform 0.25s;
    }

    .uc-card:hover {
      box-shadow: 0 12px 40px rgba(10,30,63,0.09);
      transform: translateY(-4px);
    }

    /* Geometric pattern visuals — no emoji */
    .uc-visual {
      height: 480px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }

    /* Hotel: elegant horizontal bars */
    .uc-hotel {
      background: #0e2847;
    }

    .uc-hotel::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 18px,
        rgba(255,255,255,0.06) 18px,
        rgba(255,255,255,0.06) 19px
      );
    }

    .uc-hotel .uc-shape {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 56px; height: 56px;
      border: 2px solid rgba(255,255,255,0.25);
      border-radius: 4px;
    }

    .uc-hotel .uc-shape::before {
      content: '';
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 32px; height: 32px;
      border: 2px solid rgba(255,255,255,0.15);
      border-radius: 2px;
    }

    /* Event: concentric rings */
    .uc-event {
      background: #1a1a2e;
    }

    .uc-event::before { content: none; }

    .uc-event .uc-dot {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 10px; height: 10px;
      border-radius: 50%;
      background: #7ecfca;
    }

    /* Office: dot grid */
    .uc-office {
      background: #f6f7f9;
    }

    .uc-office::before {
      content: none;
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, #c0c8d4 1px, transparent 1px);
      background-size: 20px 20px;
      background-position: 10px 10px;
    }

    .uc-office .uc-bar {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      gap: 5px;
      align-items: flex-end;
    }

    .uc-office .uc-bar span {
      display: block;
      width: 10px;
      background: var(--navy);
      border-radius: 2px 2px 0 0;
      opacity: 0.7;
    }

    .uc-office .uc-bar span:nth-child(1) { height: 28px; }
    .uc-office .uc-bar span:nth-child(2) { height: 44px; }
    .uc-office .uc-bar span:nth-child(3) { height: 36px; }
    .uc-office .uc-bar span:nth-child(4) { height: 52px; }
    .uc-office .uc-bar span:nth-child(5) { height: 32px; }

    /* Brand: diagonal bold lines */
    .uc-brand {
      background: var(--teal);
    }

    .uc-brand::before { content: none; }

    .uc-brand .uc-x {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 48px; height: 2px;
      background: rgba(255,255,255,0.6);
    }

    .uc-brand .uc-x::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) rotate(90deg);
      width: 48px; height: 2px;
      background: rgba(255,255,255,0.6);
    }

    .uc-body {
      padding: 1.625rem 1.5rem;
      background: var(--white);
      flex: 1;
    }

    .uc-body h3 {
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 0.5rem;
      letter-spacing: -0.01em;
    }

    .uc-body p {
      font-size: 0.875rem;
      color: var(--gray-600);
      line-height: 1.65;
    }

    /* ─── LOGO BANNER ────────────────────────────────*/
    .logo-banner-section {
      background: var(--off-white);
      border-top: 1px solid var(--gray-100);
      border-bottom: 1px solid var(--gray-100);
      padding: 2rem 0;
      overflow: hidden;
    }

    /* Can Portfolio Marquee */
    .can-portfolio-section {
      background: #fff;
      padding: 3rem 0;
      overflow: hidden;
      border-top: 1px solid var(--gray-100);
      border-bottom: 1px solid var(--gray-100);
    }
    .can-portfolio-inline {
      background: transparent;
      border-top: none;
      border-bottom: none;
      padding: 1.5rem 0 0;
      margin: 2.5rem -2.5rem 0;
      width: calc(100% + 5rem);
    }
    .can-portfolio-label {
      text-align: center;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(29,37,53,0.35);
      margin-bottom: 0.75rem;
    }
    .can-portfolio-track-wrap {
      overflow: hidden;
      width: 100%;
    }
    .can-portfolio-track {
      display: flex;
      align-items: flex-end;
      gap: 3rem;
      width: max-content;
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    @media (hover: hover) {
      .can-portfolio-track:hover { animation-play-state: paused; }
    }
    @-webkit-keyframes canScroll {
      0%   { -webkit-transform: translateX(0); transform: translateX(0); }
      100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    }
    @keyframes canScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .can-portfolio-track img {
      height: 255px;
      width: auto;
      display: block;
      mix-blend-mode: multiply;
      transition: transform 0.3s ease;
    }
    .can-portfolio-track img:hover {
      transform: scale(1.06) translateY(-6px);
    }
    .worked-with-marquee {
      padding: 1.25rem 0;
    }
    .worked-with-marquee .can-portfolio-track img {
      height: 153px;
    }
    .worked-with-marquee .can-portfolio-track img {
      height: 153px;
    }
    .can-portfolio-large .can-portfolio-track img {
      height: 289px;
    }
    .can-portfolio-inline .can-portfolio-track {
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .logo-banner-label {
      text-align: center;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gray-400);
      margin-bottom: 1.25rem;
    }

    .logo-banner-track-wrap {
      overflow: hidden;
      position: relative;
      /* Fade edges */
      mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }

    .logo-banner-track {
      display: flex;
      align-items: center;
      gap: 1rem;
      width: max-content;
      animation: logo-scroll 32s linear infinite;
    }

    @media (hover: hover) {
      .logo-banner-track:hover { animation-play-state: paused; }
    }

    @keyframes logo-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .logo-pill {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 52px;
      padding: 0 1.5rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--gray-200);
      background: var(--white);
      white-space: nowrap;
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--charcoal);
      flex-shrink: 0;
      transition: border-color 0.2s, box-shadow 0.2s;
      text-align: center;
      line-height: 1.2;
    }

    .logo-pill:hover {
      border-color: var(--gray-400);
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }

    /* Brand-specific logo pill styles */
    .logo-wilson { font-style: italic; font-weight: 300; font-size: 1.1rem; letter-spacing: 0.01em; color: #1a1a1a; }
    .logo-set { font-weight: 900; font-size: 1rem; letter-spacing: 0.12em; color: #111; }
    .logo-gp { background: #1a9088; border-color: #1a9088; color: white; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; }
    .logo-standard { font-size: 0.875rem; font-weight: 400; color: #222; letter-spacing: 0.01em; }
    .logo-standard em { font-style: italic; font-weight: 300; margin-right: 0.2em; }
    .logo-reserve { font-style: italic; font-weight: 300; font-size: 1.05rem; color: #2a3520; letter-spacing: 0.03em; }
    .logo-glow { font-weight: 800; font-size: 0.75rem; letter-spacing: 0.12em; color: #e8556a; }
    .logo-bianco { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em; color: #111; }
    .logo-tania { font-style: italic; font-weight: 400; font-size: 0.9rem; color: #333; letter-spacing: 0.02em; }
    .logo-swimsuits { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; color: #d44; text-align: center; }
    .logo-moncayo { font-weight: 900; font-size: 0.8rem; letter-spacing: 0.2em; color: #111; }

    /* ─── BRAND VIDEO ─────────────────────────────── */
    .brand-video-section {
      padding: 4rem 0;
      background: var(--off-white);
      position: relative;
      overflow: hidden;
    }
    .brand-video-inner {
      width: 100%;
      text-align: center;
    }
    .brand-video-inner .tag {
      position: absolute;
      top: 2.5rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      color: rgba(255,255,255,0.6);
      border-color: rgba(255,255,255,0.2);
    }
    .brand-video-inner .section-h {
      position: absolute;
      top: 4rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      color: #fff;
      white-space: nowrap;
      margin: 0;
    }
    .brand-video-inner .section-h .accent { color: rgba(255,255,255,0.55); }
    .video-embed-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 0;
      border: none;
      box-shadow: none;
    }
    .video-embed-wrap iframe {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      border: none;
      display: block;
    }

    /* ─── BRAND VIDEO ─────────────────────────────── */
    .brand-video-section {
      padding: 5rem 2.5rem;
      background: var(--off-white);
      border-top: 1px solid var(--gray-100);
      border-bottom: 1px solid var(--gray-100);
    }
    .brand-video-inner {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }
    .brand-video-inner .tag { margin-bottom: 0.6rem; }
    .brand-video-inner .section-h { margin-bottom: 2rem; }
    .video-embed-wrap {
      position: relative;
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      aspect-ratio: 16 / 9;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--gray-200);
      box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    }
    .video-embed-wrap iframe {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      border: none;
      display: block;
    }

    /* ─── WATER QUALITY ───────────────────────────── */
    .water-quality-section {
      background: var(--off-white);
      padding: 6rem 2.5rem;
    }
    .wq-layout {
      display: grid;
      grid-template-columns: 1fr 1.8fr;
      gap: 5rem;
      align-items: start;
    }
    .wq-left {
      position: sticky;
      top: 6rem;
    }
    .wq-intro {
      margin: 1rem 0 0;
      font-size: 0.9375rem;
      color: rgba(29,37,53,0.55);
      line-height: 1.75;
    }
    .wq-rows {
      display: flex;
      flex-direction: column;
    }
    .wq-row {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 2rem;
      padding: 2rem 0;
      border-top: 1px solid rgba(29,37,53,0.09);
      align-items: start;
    }
    .wq-row:last-child {
      border-bottom: 1px solid rgba(29,37,53,0.09);
    }
    .wq-label {
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--charcoal);
      padding-top: 0.2rem;
    }
    .wq-detail {
      font-size: 0.9375rem;
      color: rgba(29,37,53,0.58);
      line-height: 1.75;
    }
    .wq-ph-badge {
      display: inline-flex;
      align-items: baseline;
      gap: 0.3rem;
      background: var(--charcoal);
      color: #fff;
      border-radius: 6px;
      padding: 0.18rem 0.65rem 0.22rem;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      vertical-align: middle;
      margin-left: 0.4rem;
    }
    .wq-ph-badge span {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 0;
    }
    .wq-callout {
      margin-top: 2.5rem;
      padding: 1.5rem 2rem;
      border-left: 3px solid var(--charcoal);
      background: rgba(29,37,53,0.04);
      border-radius: 0 8px 8px 0;
    }
    .wq-callout-text {
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--charcoal);
      line-height: 1.6;
    }
    @media (max-width: 860px) {
      .wq-layout { grid-template-columns: 1fr; gap: 2.5rem; }
      .wq-left { position: static; }
      .wq-row { grid-template-columns: 1fr; gap: 0.5rem; }
    }

    /* ─── STATEMENT STRIP ─────────────────────────── */
    .statement {
      background: linear-gradient(155deg, #ffffff 0%, #f0f1f4 40%, #e2e5eb 100%);
      padding: 6rem 2.5rem;
      overflow: hidden;
      position: relative;
    }

    .statement::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 360px; height: 360px;
      border-radius: 50%;
      border: 1px solid rgba(29,37,53,0.06);
    }

    .statement::after {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 240px; height: 240px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.06);
    }

    .statement-layout {
      display: flex;
      align-items: center;
      gap: 4rem;
    }

    @media (max-width: 720px) {
      .statement-layout {
        flex-direction: column;
        gap: 2.5rem;
        text-align: center;
      }
      .statement-cans {
        width: 100%;
      }
      .statement-can-img {
        width: 260px;
      }
    }

    .statement-inner {
      flex: 1;
      position: relative;
    }

    .statement-cans {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .statement-can-img {
      width: 340px;
      max-width: 100%;
      height: auto;
      display: block;
      mix-blend-mode: multiply;
    }

    .statement p {
      font-size: clamp(1.5rem, 3.5vw, 2.375rem);
      font-weight: 300;
      color: rgba(29,37,53,0.72);
      line-height: 1.45;
      letter-spacing: -0.02em;
    }

    .statement p strong {
      font-weight: 700;
      color: var(--charcoal);
    }

    .statement p em {
      font-style: italic;
      color: #2a9d8f;
    }

    .statement-attr {
      margin-top: 2rem;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(29,37,53,0.3);
    }

    /* ─── FLOATING CANS SHOWCASE ──────────────────── */
    .floating-cans-section {
      background: linear-gradient(155deg, #ffffff 0%, #f0f1f4 50%, #e2e5eb 100%);
      padding: 5rem 2.5rem 4rem;
      overflow: hidden;
      text-align: center;
    }
    .floating-cans-header {
      text-align: center;
      margin-bottom: 3rem;
    }
    .floating-cans-header p {
      font-size: 0.875rem;
      color: rgba(29,37,53,0.45);
      margin-top: 0.75rem;
      letter-spacing: 0.04em;
    }
    .floating-cans-footer {
      text-align: center;
      margin-top: 3.5rem;
    }
    .floating-cans-footer p {
      font-size: 0.875rem;
      color: rgba(29,37,53,0.45);
      letter-spacing: 0.04em;
      max-width: 560px;
      margin: 0 auto;
    }
    .floating-cans-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 1rem;
      max-width: 1200px;
      margin: 0 auto;
      align-items: end;
    }
    .fc-item {
      display: flex;
      justify-content: center;
      animation: fc-float var(--fd, 4s) ease-in-out infinite;
      animation-delay: var(--dl, 0s);
    }
    .fc-item img {
      width: 100%;
      max-width: 110px;
      height: auto;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.13));
      transition: transform 0.3s ease, filter 0.3s ease;
    }
    .fc-item img:hover {
      transform: scale(1.1) translateY(-10px);
      filter: drop-shadow(0 24px 36px rgba(0,0,0,0.2));
    }
    /* stagger heights for wave effect */
    .fc-item:nth-child(1)  { margin-bottom: 40px; }
    .fc-item:nth-child(2)  { margin-bottom: 20px; }
    .fc-item:nth-child(3)  { margin-bottom: 0px; }
    .fc-item:nth-child(4)  { margin-bottom: 20px; }
    .fc-item:nth-child(5)  { margin-bottom: 50px; }
    .fc-item:nth-child(6)  { margin-bottom: 20px; }
    .fc-item:nth-child(7)  { margin-bottom: 0px; }
    .fc-item:nth-child(8)  { margin-bottom: 20px; }
    .fc-item:nth-child(9)  { margin-bottom: 40px; }
    .fc-item:nth-child(10) { margin-bottom: 60px; }
    .fc-item:nth-child(10) { margin-bottom: 60px; }
    @keyframes fc-float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-16px); }
    }
    @media (max-width: 860px) {
      .floating-cans-grid { grid-template-columns: repeat(5, 1fr); }
      .fc-item:nth-child(n) { margin-bottom: 0; }
    }
    @media (max-width: 520px) {
      .floating-cans-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* ─── FLOATING CANS SHOWCASE ──────────────────── */
    .floating-cans-section {
      background: linear-gradient(155deg, #ffffff 0%, #f0f1f4 50%, #e2e5eb 100%);
      padding: 5rem 2.5rem 4rem;
      overflow: hidden;
      text-align: center;
    }
    .floating-cans-header {
      text-align: center;
      margin-bottom: 3rem;
    }
    .floating-cans-header p {
      font-size: 0.875rem;
      color: rgba(29,37,53,0.45);
      margin-top: 0.75rem;
      letter-spacing: 0.04em;
    }
    .floating-cans-footer {
      text-align: center;
      margin-top: 3.5rem;
    }
    .floating-cans-footer p {
      font-size: 0.875rem;
      color: rgba(29,37,53,0.45);
      letter-spacing: 0.04em;
      max-width: 560px;
      margin: 0 auto;
    }
    .floating-cans-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 1rem;
      max-width: 1200px;
      margin: 0 auto;
      align-items: end;
    }
    .fc-item {
      display: flex;
      justify-content: center;
      animation: fc-float var(--fd, 4s) ease-in-out infinite;
      animation-delay: var(--dl, 0s);
    }
    .fc-item img {
      width: 100%;
      max-width: 110px;
      height: auto;
      mix-blend-mode: multiply;
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.13));
      transition: transform 0.3s ease, filter 0.3s ease;
    }
    .fc-item img:hover {
      transform: scale(1.1) translateY(-10px);
      filter: drop-shadow(0 24px 36px rgba(0,0,0,0.2));
    }
    /* stagger heights for wave effect */
    .fc-item:nth-child(1)  { margin-bottom: 40px; }
    .fc-item:nth-child(2)  { margin-bottom: 20px; }
    .fc-item:nth-child(3)  { margin-bottom: 0px; }
    .fc-item:nth-child(4)  { margin-bottom: 20px; }
    .fc-item:nth-child(5)  { margin-bottom: 50px; }
    .fc-item:nth-child(6)  { margin-bottom: 20px; }
    .fc-item:nth-child(7)  { margin-bottom: 0px; }
    .fc-item:nth-child(8)  { margin-bottom: 20px; }
    .fc-item:nth-child(9)  { margin-bottom: 40px; }
    @keyframes fc-float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-16px); }
    }
    @media (max-width: 860px) {
      .floating-cans-grid { grid-template-columns: repeat(5, 1fr); }
      .fc-item:nth-child(n) { margin-bottom: 0; }
    }
    @media (max-width: 520px) {
      .floating-cans-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* ─── FORM ────────────────────────────────────── */
    #get-quote { background: var(--off-white); }

    .form-layout {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 5rem;
      align-items: start;
    }

    @media (max-width: 820px) {
      .form-layout { grid-template-columns: 1fr; gap: 3rem; }
    }

    .form-left .section-sub { margin-bottom: 2.5rem; }

    .form-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .form-list li {
      display: flex;
      align-items: center;
      gap: 0.875rem;
      font-size: 0.9rem;
      color: var(--gray-600);
    }

    .form-list li::before {
      content: '';
      width: 20px; height: 20px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--navy);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }

    .form-note-italic {
      margin-top: 2.5rem;
      padding-top: 2rem;
      border-top: 1px solid var(--gray-200);
      font-size: 0.875rem;
      color: var(--gray-400);
      font-style: italic;
    }

    /* The form card */
    .form-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      padding: 2.5rem;
      box-shadow: 0 4px 32px rgba(10,30,63,0.06);
    }

    .form-card-title {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: -0.02em;
      margin-bottom: 0.375rem;
    }

    .form-card-sub {
      font-size: 0.8125rem;
      color: var(--gray-400);
      margin-bottom: 2rem;
    }

    .form-section-heading {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin: 1.5rem 0 1rem;
    }

    .form-section-heading:first-of-type {
      margin-top: 0;
    }

    .form-section-step {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      background: var(--navy);
      color: var(--white);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .form-section-title {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--charcoal);
    }

    .field { margin-bottom: 1rem; }

    .field label {
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--charcoal);
      margin-bottom: 0.4rem;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      padding: 0.75rem 0.9375rem;
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-sm);
      font-family: 'Inter', sans-serif;
      font-size: 0.9375rem;
      color: var(--charcoal);
      background: var(--white);
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .field input::placeholder { color: var(--gray-400); }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: var(--navy);
      box-shadow: 0 0 0 3px rgba(10,30,63,0.07);
    }

    .field textarea {
      resize: vertical;
      min-height: 96px;
    }

    /* the project brief box invites a longer answer, so give it the room */
    .field textarea#notes { min-height: 150px; }

    .field select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239AA4B2'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.875rem center;
      background-size: 1rem;
      padding-right: 2.5rem;
      cursor: pointer;
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.875rem;
    }

    @media (max-width: 460px) {
      .field-row { grid-template-columns: 1fr; }
    }

    /* Quantity pills */
    .qty-label {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--charcoal);
      display: block;
      margin-bottom: 0.5rem;
    }

    .qty-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
    }

    .qty-opt {
      position: relative;
    }

    .qty-opt input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 0;
    }

    .qty-opt label {
      display: block;
      text-align: center;
      padding: 0.5rem 0.25rem;
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-sm);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--gray-600);
      cursor: pointer;
      transition: all 0.15s;
      margin: 0;
      letter-spacing: 0;
      text-transform: none;
      background: none;
    }

    .qty-opt input[type="radio"]:checked + label {
      border-color: var(--navy);
      background: rgba(10,30,63,0.05);
      color: var(--navy);
      font-weight: 600;
    }

    .qty-opt label:hover {
      border-color: var(--gray-400);
      color: var(--charcoal);
    }

    .form-divider {
      height: 1px;
      background: var(--gray-100);
      margin: 1.25rem 0;
    }

    .field-row-3 {
      display: grid;
      grid-template-columns: 1.5fr 0.75fr 0.85fr;
      gap: 0.875rem;
    }

    @media (max-width: 560px) {
      .field-row-3 { grid-template-columns: 1fr 1fr; }
      .field-row-3 .field:first-child { grid-column: span 2; }
    }

    /* File upload zone */
    .upload-zone-wrap { margin-bottom: 1rem; }

    .upload-zone-wrap > label {
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--charcoal);
      margin-bottom: 0.4rem;
    }

    .upload-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.375rem;
      width: 100%;
      padding: 1.75rem 1rem;
      border: 1.5px dashed var(--gray-200);
      border-radius: var(--radius-sm);
      background: var(--off-white);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      text-align: center;
    }

    .upload-zone:hover,
    .upload-zone.drag-over {
      border-color: var(--navy);
      background: rgba(29,37,53,0.035);
    }

    .upload-zone-icon {
      font-size: 1.625rem;
      line-height: 1;
      margin-bottom: 0.125rem;
    }

    .upload-zone-text {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--charcoal);
    }

    .upload-zone-text span {
      color: var(--navy);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .upload-zone-sub {
      font-size: 0.75rem;
      color: var(--gray-400);
    }

    .upload-zone-types {
      font-size: 0.6875rem;
      color: var(--gray-400);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-top: 0.125rem;
    }

    .upload-file-list {
      list-style: none;
      margin-top: 0.625rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem;
    }

    .upload-file-list li {
      font-size: 0.75rem;
      color: var(--charcoal);
      background: var(--gray-100);
      border: 1px solid var(--gray-200);
      border-radius: 2rem;
      padding: 0.2rem 0.65rem;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    .upload-file-list li button {
      background: none;
      border: none;
      color: var(--gray-400);
      font-size: 0.875rem;
      line-height: 1;
      padding: 0;
      cursor: pointer;
    }

    /* Lead time callout */
    .lead-time-box {
      margin-top: 1.75rem;
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .lead-time-label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gray-400);
      padding: 0.5rem 0.875rem;
      border-bottom: 1px solid var(--gray-100);
      background: var(--off-white);
    }

    .lead-time-tiers {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .lead-time-tier {
      padding: 0.875rem 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      border-right: 1px solid var(--gray-100);
    }

    .lead-time-tier:last-child { border-right: none; }

    .lead-time-tier-time {
      font-family: 'Inter', sans-serif;
      font-size: 1.25rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
      color: var(--navy);
      white-space: nowrap;
    }
    @media (max-width: 480px) {
      .lead-time-tier-time { font-size: 1rem; }
      .lead-time-tier { padding: 0.75rem 0.5rem; }
    }

    .lead-time-tier-name {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--charcoal);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .lead-time-tier-note {
      font-size: 0.65rem;
      color: var(--gray-400);
      line-height: 1.3;
    }

    .lead-time-footer {
      font-size: 0.68rem;
      color: var(--gray-400);
      font-style: italic;
      padding: 0.5rem 0.875rem;
      border-top: 1px solid var(--gray-100);
      background: var(--off-white);
    }

    .submit-btn {
      width: 100%;
      background: var(--navy);
      color: var(--white);
      border: none;
      padding: 1rem 1.5rem;
      border-radius: var(--radius);
      font-family: 'Inter', sans-serif;
      font-size: 0.9375rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      cursor: pointer;
      margin-top: 0.25rem;
      transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    }

    .submit-btn:hover {
      background: var(--navy-mid);
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(10,30,63,0.2);
    }

    .submit-footer {
      text-align: center;
      font-size: 0.8125rem;
      color: var(--gray-400);
      margin-top: 0.875rem;
    }

    .success-banner {
      display: none;
      margin-top: 1.25rem;
      background: rgba(29,77,71,0.06);
      border: 1px solid rgba(29,77,71,0.28);
      border-left: 3px solid var(--teal);
      border-radius: var(--radius-sm);
      padding: 1rem 1.25rem;
      text-align: center;
      font-size: 0.9rem;
      font-weight: 500;
      line-height: 1.6;
      color: var(--teal);
    }

    /* ─── FORM VALIDATION ─────────────────────────────── */
    .form-error-banner {
      display: none;
      margin-top: 1.25rem;
      background: rgba(192,57,43,0.05);
      border: 1px solid rgba(192,57,43,0.22);
      border-left: 3px solid #c0392b;
      border-radius: var(--radius-sm);
      padding: 0.9rem 1.1rem;
      font-size: 0.85rem;
      font-weight: 500;
      line-height: 1.55;
      color: #97302a;
    }

    .field-invalid input,
    .field-invalid select,
    input.field-invalid,
    select.field-invalid {
      border-color: #c0392b !important;
      background: rgba(192,57,43,0.03);
    }

    .deliv-grid.field-invalid label,
    .qty-grid.field-invalid label {
      border-color: rgba(192,57,43,0.55);
    }

    /* ─── FOOTER ──────────────────────────────────── */
    footer {
      background: var(--charcoal);
      color: rgba(255,255,255,0.35);
      overflow: hidden;
    }

    .footer-main {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 5rem 2.5rem 4rem;
      display: grid;
      grid-template-columns: 1.4fr 340px;
      gap: 4rem;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }

    .footer-eyebrow {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.28);
      margin-bottom: 1.5rem;
    }

    .footer-quote {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2rem, 3.25vw, 3rem);
      line-height: 1.1;
      color: var(--white);
      letter-spacing: 0.01em;
      margin-bottom: 2.5rem;
    }

    .footer-quote em {
      font-style: normal;
      color: rgba(255,255,255,0.28);
    }

    .footer-actions {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .footer-contact-row {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 1.75rem;
      padding-top: 1.75rem;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .footer-contact-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .footer-contact-label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
    }

    .footer-contact-link {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--white);
      text-decoration: none;
      letter-spacing: -0.01em;
      transition: opacity 0.2s;
    }

    .footer-contact-link:hover { opacity: 0.7; }

    .footer-cta {
      display: inline-block;
      background: var(--white);
      color: var(--charcoal) !important;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none !important;
      padding: 0.875rem 2rem;
      border-radius: var(--radius-sm);
      white-space: nowrap;
      transition: opacity 0.2s;
    }

    .footer-cta:hover { opacity: 0.85; }

    .footer-social-link {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-social-link:hover { color: rgba(255,255,255,0.7); }

    .footer-right-col {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    #can3d-wrap {
      height: 420px;
      position: relative;
    }

    #can3d {
      width: 100%;
      height: 100%;
      display: block;
    }

    .footer-bottom {
      padding: 1.5rem 2.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.8rem;
      flex-wrap: wrap;
      gap: 0.75rem;
      max-width: var(--max-w);
      margin: 0 auto;
    }

    footer strong { color: rgba(255,255,255,0.6); font-weight: 600; }

    footer a {
      color: rgba(255,255,255,0.4);
      text-decoration: none;
    }

    footer a:hover { color: var(--white); }

    @media (max-width: 920px) {
      .footer-main { grid-template-columns: 1fr; }
      #can3d-wrap { height: 380px; }
    }

    @media (max-width: 560px) {
      .footer-quote { font-size: 1.9rem; }
      .footer-main { padding: 3.5rem 1.5rem 3rem; }
    }

    /* ─── SERVICE AREA ───────────────────────────────── */
    #service-area {
      padding: 5rem 0;
      background: var(--off-white);
    }

    .geo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
      gap: 1.5rem;
      margin-top: 2.5rem;
    }

    .geo-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      padding: 2rem 1.85rem;
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
    }

    .geo-card h2,
    .geo-card h3 {
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--navy);
      line-height: 1.25;
    }

    .geo-card p {
      font-size: 0.9rem;
      line-height: 1.65;
      color: var(--gray-600);
    }

    .geo-delivery {
      margin-top: auto;
      padding-top: 0.85rem;
      border-top: 1px solid var(--gray-100);
      font-size: 0.8rem !important;
      color: var(--gray-400) !important;
      line-height: 1.55 !important;
    }

    .geo-nationwide {
      margin-top: 1.5rem;
      padding: 1.85rem;
      background: var(--navy);
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .geo-nationwide h2,
    .geo-nationwide h3 {
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--white);
      line-height: 1.25;
    }

    .geo-nationwide p {
      font-size: 0.9rem;
      line-height: 1.7;
      color: rgba(255,255,255,0.72);
      max-width: 68ch;
    }

    @media (max-width: 640px) {
      #service-area { padding: 3.5rem 0; }
      .geo-card { padding: 1.5rem 1.35rem; }
    }

    /* ─── LOCATIONS PAGE ─────────────────────────────── */
    .loc-hero {
      padding: 11rem 0 3rem;
      background: var(--white);
    }

    .loc-crumb {
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gray-400);
      margin-bottom: 1.5rem;
    }
    .loc-crumb a { color: var(--gray-600); text-decoration: none; }
    .loc-crumb a:hover { color: var(--navy); }
    .loc-crumb span { margin: 0 0.4rem; }

    .loc-hero h1 {
      font-size: clamp(2rem, 4.5vw, 3.4rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.04em;
      color: var(--navy);
      margin-bottom: 1.25rem;
    }
    .loc-hero-accent { color: var(--charcoal); font-style: italic; font-weight: 300; }

    .loc-hero-sub {
      font-size: clamp(0.95rem, 1.5vw, 1.08rem);
      line-height: 1.65;
      color: var(--gray-600);
      max-width: 60ch;
    }

    .loc-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 2rem;
    }
    .loc-chips span {
      font-size: 0.76rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--teal);
      background: var(--gray-100);
      border-radius: 2rem;
      padding: 0.4rem 0.85rem;
    }

    .loc-cta {
      margin-top: 3rem;
      padding: 2.5rem 2rem;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.85rem;
    }
    .loc-cta h2 {
      font-size: clamp(1.25rem, 2.2vw, 1.6rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--navy);
    }
    .loc-cta p { font-size: 0.92rem; color: var(--gray-600); max-width: 46ch; }
    .loc-cta-btn {
      margin-top: 0.5rem;
      display: inline-block;
      background: var(--navy);
      color: var(--white);
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-decoration: none;
      padding: 0.85rem 1.75rem;
      border-radius: var(--radius-sm);
      transition: background 0.2s ease;
    }
    .loc-cta-btn:hover { background: var(--teal); }

    @media (max-width: 640px) {
      .loc-hero { padding: 8.5rem 0 2rem; }
      .loc-cta { padding: 1.85rem 1.35rem; }
    }

    /* ─── SERVICE AREA STRIP (homepage summary) ──────── */
    .geo-strip {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 2.5rem;
      align-items: center;
    }

    .geo-strip-text { display: flex; flex-direction: column; gap: 0.85rem; align-items: flex-start; }

    .geo-strip-h {
      font-size: clamp(1.35rem, 2.4vw, 1.95rem);
      font-weight: 800;
      line-height: 1.18;
      letter-spacing: -0.03em;
      color: var(--navy);
      max-width: 22ch;
    }

    .geo-strip-text p {
      font-size: 0.92rem;
      line-height: 1.65;
      color: var(--gray-600);
      max-width: 46ch;
    }

    .geo-strip-link {
      margin-top: 0.35rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--teal);
      text-decoration: none;
      border-bottom: 1px solid rgba(29,77,71,0.28);
      padding-bottom: 2px;
      transition: border-color 0.2s ease;
    }
    .geo-strip-link:hover { border-bottom-color: var(--teal); }

    .geo-strip-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

    .geo-strip-chips a,
    .geo-strip-all {
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      padding: 0.5rem 0.95rem;
      border-radius: 2rem;
      white-space: nowrap;
    }

    .geo-strip-chips a {
      color: var(--navy);
      background: var(--white);
      border: 1px solid var(--gray-200);
      text-decoration: none;
      transition: border-color 0.2s ease, color 0.2s ease;
    }
    .geo-strip-chips a:hover { border-color: var(--teal); color: var(--teal); }

    .geo-strip-all { color: var(--gray-400); background: transparent; }

    @media (max-width: 860px) {
      .geo-strip { grid-template-columns: 1fr; gap: 1.75rem; }
      .geo-strip-h { max-width: none; }
    }


    /* ─── CONVERSION STAT (100% already drink water) ─── */
    .conv-stat-section { padding: 5rem 1.5rem; background: var(--off-white); }
    .conv-stat-inner {
      max-width: var(--max-w); margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1px 1fr; gap: 3rem; align-items: center;
    }
    @media (max-width: 860px) { .conv-stat-inner { grid-template-columns: 1fr; gap: 2.5rem; } }
    .conv-stat-inner--single { grid-template-columns: 1fr; max-width: 640px; }
    .conv-stat-divider { background: var(--gray-200); align-self: stretch; }
    @media (max-width: 860px) { .conv-stat-divider { height: 1px; width: 100%; } }
    .conv-stat-col { text-align: center; }
    .conv-stat-num {
      font-size: clamp(3rem, 6vw, 4.5rem);
      font-weight: 700;
      color: var(--navy);
      letter-spacing: -0.02em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .conv-stat-lead {
      font-size: 1.3rem;
      font-weight: 700;
      line-height: 1.4;
      color: var(--charcoal);
      max-width: 30ch;
      margin: 1rem auto 2.25rem;
    }
    .conv-stat-cans { display: flex; justify-content: center; align-items: flex-end; gap: 0.65rem; flex-wrap: wrap; }
    .conv-stat-cans svg { width: 30px; height: 74px; display: block; }
    @media (max-width: 480px) { .conv-stat-cans svg { width: 22px; height: 54px; } .conv-stat-cans { gap: 0.45rem; } }
    .cs-fill {
      transform: scaleY(0);
      transform-origin: bottom;
      transform-box: fill-box;
      transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
    }
    .cs-inview .cs-fill { transform: scaleY(var(--f)); }
    .conv-stat-copy {
      font-size: 0.95rem;
      line-height: 1.65;
      color: var(--gray-600);
      max-width: 40ch;
      margin: 1.5rem auto 0;
    }
    .conv-stat-source { font-size: 0.68rem; color: var(--gray-400); margin-top: 1rem; letter-spacing: 0.02em; }
    .conv-stat-cta { font-size: 0.9rem; color: var(--gray-600); margin-top: 1.25rem; }
    .conv-stat-cta a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
    @media (prefers-reduced-motion: reduce) {
      .cs-fill { transition: none; }
    }


    /* ─── STAT CALLOUT GRID (4 stats) ───────────────── */
    .statcallout-section { padding: 4.5rem 1.5rem; background: var(--white); }
    .statcallout-grid {
      max-width: var(--max-w); margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.5rem;
    }
    @media (max-width: 720px) { .statcallout-grid { grid-template-columns: 1fr; gap: 0; } }
    .statcallout-row {
      display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
      padding: 2rem 0; border-top: 1px solid var(--gray-200);
    }
    .statcallout-grid > .statcallout-row:nth-child(1),
    .statcallout-grid > .statcallout-row:nth-child(2) { border-top: none; }
    @media (max-width: 720px) {
      .statcallout-grid > .statcallout-row:nth-child(2) { border-top: 1px solid var(--gray-200); }
      /* Stack number-first, text below — reads top-down on a narrow screen instead of
         a wrapped caption floating next to a number off to the side. */
      .statcallout-row {
        flex-direction: column; align-items: flex-start; gap: 0.4rem;
      }
    }
    .statcallout-text { max-width: 30ch; }
    .statcallout-label { font-size: 0.88rem; line-height: 1.55; color: var(--gray-600); }
    .statcallout-source { font-size: 0.65rem; color: var(--gray-400); margin-top: 0.6rem; letter-spacing: 0.02em; }
    .statcallout-number {
      font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 700; color: var(--navy);
      letter-spacing: -0.02em; line-height: 1; white-space: nowrap; flex-shrink: 0;
    }

    /* ─── DELIVERY SITE TYPE (freight quoting) ───────── */
    .deliv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
    }

    .deliv-opt { position: relative; }
    .deliv-opt-wide { grid-column: 1 / -1; }

    .deliv-opt input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
    }

    .deliv-opt label {
      display: block;
      text-align: left;
      padding: 0.7rem 0.85rem;
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-sm);
      font-size: 0.8125rem;
      font-weight: 500;
      line-height: 1.4;
      color: var(--gray-600);
      cursor: pointer;
      transition: all 0.15s;
      margin: 0;
      letter-spacing: 0;
      text-transform: none;
      background: none;
    }

    .deliv-opt input[type="radio"]:checked + label {
      border-color: var(--navy);
      background: rgba(10,30,63,0.05);
      color: var(--navy);
      font-weight: 600;
    }

    .deliv-opt label:hover { border-color: var(--gray-400); color: var(--charcoal); }
    .deliv-opt input[type="radio"]:focus-visible + label { outline: 2px solid var(--navy); outline-offset: 2px; }

    .deliv-help {
      margin-top: 0.65rem;
      font-size: 0.72rem;
      color: var(--gray-400);
      line-height: 1.55;
    }

    @media (max-width: 560px) {
      .deliv-grid { grid-template-columns: 1fr; }
    }

    /* ─── TIMELINE ESTIMATE ──────────────────────────── */
    .timeline-estimate {
      margin-top: 0.85rem;
      padding: 0.9rem 1.05rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--gray-200);
      border-left: 3px solid var(--gray-400);
      background: var(--off-white);
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    .timeline-estimate .te-title {
      font-size: 0.85rem;
      font-weight: 600;
      line-height: 1.45;
      color: var(--navy);
    }

    .timeline-estimate .te-detail {
      font-size: 0.75rem;
      line-height: 1.55;
      color: var(--gray-600);
    }

    .te-ok    { border-left-color: var(--teal);  background: rgba(29,77,71,0.04); }
    .te-ok    .te-title { color: var(--teal); }

    .te-tight { border-left-color: #b8860b; background: rgba(184,134,11,0.05); }
    .te-tight .te-title { color: #8a6508; }

    .te-warn  { border-left-color: #c0392b; background: rgba(192,57,43,0.05); }
    .te-warn  .te-title { color: #97302a; }

    .inline-link {
      color: var(--teal);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
      transition: color 0.15s ease;
    }
    .inline-link:hover { color: var(--navy); }


    /* ─── WATER QUALITY (merged with statement) ──────── */
    .wq-merged-section { padding: 5.5rem 1.5rem; }
    .wq-merged-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem; }
    @media (max-width: 860px) { .wq-merged-inner { grid-template-columns: 1fr; gap: 2.5rem; } }

    .wq-visual-col { position: sticky; top: calc(var(--bar-h) + 2rem); align-self: start; }
    @media (max-width: 860px) { .wq-visual-col { position: static; } }
    .wq-can-img { width: 100%; max-width: 260px; display: block; margin: 0 auto 1.25rem; }
    .wq-can-labels { display: flex; justify-content: center; gap: 2.5rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 2rem; }
    .wq-statement { font-size: 1rem; line-height: 1.65; color: var(--charcoal); text-align: center; max-width: 34ch; margin: 0 auto; }
    .wq-statement strong { font-weight: 600; }
    .wq-statement em { font-style: italic; color: var(--gray-600); }
    .wq-statement-attr { text-align: center; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-400); margin-top: 1rem; }

    .wq-facts-head { margin-bottom: 2.25rem; max-width: 52ch; }
    .wq-facts-head .wq-intro { font-size: 0.92rem; line-height: 1.6; color: var(--gray-600); margin-top: 0.75rem; }

    .wq-gauge-layout { display: grid; grid-template-columns: 40px 1fr; gap: 2rem; }
    .wq-gauge-track-wrap { position: relative; width: 3px; background: var(--gray-200); border-radius: 2px; margin: 0 auto; }
    .wq-gauge-fill { position: absolute; top: 0; left: 0; width: 100%; background: var(--navy); border-radius: 2px; transition: height 0.35s ease; }
    .wq-gauge-marker {
      position: absolute; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%;
      background: var(--white); border: 2px solid var(--gray-300, var(--gray-200)); color: var(--gray-400);
      font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.2s ease;
    }
    .wq-gauge-marker.active { border-color: var(--navy); background: var(--navy); color: var(--white); }
    .wq-fact-panel { min-height: 190px; }
    .wq-fact-list { display: flex; flex-direction: column; gap: 2.4rem; }
    .wq-fact-item { opacity: 0.35; transition: opacity 0.2s ease; cursor: pointer; }
    .wq-fact-item.active { opacity: 1; }
    .wq-fact-label { font-size: 1.05rem; font-weight: 600; color: var(--charcoal); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.6rem; }
    .wq-ph-badge { display: inline-flex; align-items: baseline; gap: 0.2rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.03em; color: var(--navy); background: rgba(29,37,53,0.08); border-radius: 999px; padding: 0.15rem 0.55rem; }
    .wq-ph-badge span { font-size: 0.8rem; }
    .wq-fact-detail { font-size: 0.88rem; line-height: 1.65; color: var(--gray-600); max-width: 50ch; display: none; }
    .wq-fact-item.active .wq-fact-detail { display: block; }

    /* ─── PROGRESSIVE FORM REVEAL ────────────────────── */
    /* !important so it also beats inline display styles (e.g. the ZIP flex row) */
    .form-step-locked > *:not(.form-section-heading):not(.step-hint) { display: none !important; }
    .form-step:not(.form-step-locked) > .step-hint { display: none; }
    .form-step-locked:not(.is-next) > .step-hint { display: none; }
    .step-hint {
      margin-top: 0.4rem;
      font-size: 0.75rem;
      line-height: 1.5;
      color: var(--gray-400);
    }
    .form-step-locked .form-section-heading { opacity: 0.35; }
    .form-step .form-section-heading { transition: opacity .25s ease; }

    /* ─── ORDER DETAILS SUB-STEPS ────────────────────── */
    .substep-locked { display: none; }
    .substep-collapsed .substep-body { display: none; }

    .substep-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.4rem 0.7rem;
      padding: 0.7rem 0.9rem;
      margin-bottom: 0.9rem;
      background: var(--off-white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-sm);
      font-size: 0.8rem;
      color: var(--gray-600);
      cursor: pointer;
      line-height: 1.5;
    }
    .substep-summary:hover { border-color: var(--gray-400); }
    .substep-summary .ss-val { color: var(--navy); font-weight: 600; }
    .substep-summary .ss-sep { color: var(--gray-400); }
    .substep-summary .ss-edit {
      margin-left: auto;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--teal);
      white-space: nowrap;
    }

    /* ─── CHECKBOX OPTION ────────────────────────────── */
    #quoteForm label.check-opt {
      display: flex;
      align-items: flex-start;
      gap: 0.55rem;
      margin-top: 0.85rem;
      cursor: pointer;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 400;
    }
    #quoteForm label.check-opt input[type="checkbox"] {
      /* .field input strips native appearance and adds full-width padding —
         undo all of it so this renders as a real tick box. */
      -webkit-appearance: checkbox;
      appearance: checkbox;
      width: 15px;
      height: 15px;
      min-width: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: none;
      margin: 0.12rem 0 0;
      accent-color: var(--navy);
      flex: none;
      cursor: pointer;
    }
    #quoteForm label.check-opt span {
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.45;
      color: var(--gray-600);
    }
    #quoteForm label.check-opt:hover span { color: var(--charcoal); }
    #quoteForm label.check-opt:has(input:checked) span { color: var(--navy); font-weight: 600; }

    /* ─── MOBILE HERO ORDER ──────────────────────────── */
    /* Put the CTA straight after the headline and paragraph on a phone, so it
       isn't buried under the can carousel, the pH panel and the stats row.
       The carousel is a sibling of .hero-text (not a child) purely so this
       reorder is possible — desktop source order is unchanged. */
    @media (max-width: 640px) {
      .hero-text          { order: 1; }
      .hero-actions       { order: 2; margin-top: 1.5rem; }
      .can-portfolio-inline { order: 3; }
      .hero-right-col     { order: 4; }
      .hero-stats         { order: 5; }
    }

    /* ─── VENUE TYPES (locations page) ───────────────── */
    .venue-block {
      margin-top: 3.5rem;
      padding-top: 3rem;
      border-top: 1px solid var(--gray-200);
    }

    .venue-head {
      font-size: clamp(1.3rem, 2.4vw, 1.75rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.2;
      color: var(--navy);
    }

    .venue-intro {
      margin-top: 0.65rem;
      font-size: 0.95rem;
      line-height: 1.65;
      color: var(--gray-600);
      max-width: 62ch;
    }

    .venue-grid {
      display: grid;
      /* fixed 2 columns, not auto-fit: four items would otherwise land 3+1 and
         leave the last one stranded on its own row at mid widths */
      grid-template-columns: repeat(2, 1fr);
      gap: 1.75rem 2.5rem;
      margin-top: 2.25rem;
    }

    @media (max-width: 640px) {
      .venue-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      .venue-block { margin-top: 2.5rem; padding-top: 2rem; }
    }

    .venue-col h3 {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 0.55rem;
    }

    .venue-col p {
      font-size: 0.9rem;
      line-height: 1.65;
      color: var(--gray-600);
    }

    /* ─── BRAND USE MOMENTS (locations page) ─────────── */
    .moment-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem 2.5rem;
      margin-top: 2rem;
    }

    .moment {
      font-size: 0.9rem;
      line-height: 1.65;
      color: var(--gray-600);
      padding-left: 0.9rem;
      border-left: 2px solid var(--gray-200);
    }

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

    @media (max-width: 640px) {
      .moment-grid { grid-template-columns: 1fr; gap: 1.1rem; }
    }