:root {
    --ink: #12333e;
    --ink-deep: #0d2731;
    --body-c: #47616b;
    --mist: #f3f6f6;
    --white: #ffffff;
    --tint-sea: #e3f2f4;
    --tint-blue: #e3f2f4;
    --font-display: "Anton", "Archivo", sans-serif;
    --font-head: "Figtree", "Archivo", sans-serif;
    --hairline: rgba(18, 51, 62, 0.14);
    --r-card: 16px;
    --r-big: 24px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 96px; }
  body { font-family: "Archivo", -apple-system, sans-serif; background: #fff; color: var(--body-c); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  img { max-width: 100%; display: block; }
  h1, h2, h3 { color: var(--ink); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

  /* buttons: pill with divider + arrow, Halter pattern */
  .pillbtn {
    display: inline-flex; align-items: center; gap: 14px;
    background: var(--ink); color: #fff;
    font-weight: 500; font-size: 0.98rem; line-height: 1;
    padding: 15px 20px; border-radius: 999px; text-decoration: none;
    transition: background 0.2s ease;
  }
  .pillbtn:hover { background: var(--ink-deep); }
  .pillbtn .sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.3); }
  .pillbtn svg { width: 15px; height: 15px; stroke: currentColor; }
  .pillbtn.member { background: #e3f2f4; color: var(--ink); font-weight: 600; box-shadow: 0 10px 28px -10px rgba(34, 150, 180, 0.35); }
  .pillbtn.member:hover { background: #d3eaee; }
  .pillbtn.member .sep { background: rgba(18, 51, 62, 0.25); }
  .pillbtn.accent { background: #3fb2ec; color: var(--ink); font-weight: 600; box-shadow: 0 10px 28px -10px rgba(24, 130, 200, 0.55); }
  .pillbtn.accent:hover { background: #2aa3e4; }
  .pillbtn.accent .sep { background: rgba(18, 51, 62, 0.25); }
  .pillbtn.on-white { background: #fff; color: var(--ink); }
  .pillbtn.on-white .sep { background: rgba(18, 51, 62, 0.22); }
  .pillbtn.outline { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
  .pillbtn.outline .sep { background: var(--hairline); }
  .pillbtn.outline:hover { background: rgba(18, 51, 62, 0.05); }
  .pillbtn.ghost-dark { background: rgba(13, 39, 49, 0.35); border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; }
  .textlink { color: var(--ink); font-weight: 600; text-decoration: none; font-size: 0.98rem; }
  .textlink:hover { text-decoration: underline; }

  /* nav: sticky translucent pill */
  .nav {
    position: sticky; top: 14px; z-index: 60;
    width: min(1240px, calc(100% - 32px));
    margin: 14px auto 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    box-shadow: 0 12px 34px -16px rgba(13, 39, 49, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
  .nav .wrap { display: flex; align-items: center; gap: 34px; height: 62px; padding: 0 12px 0 24px; }
  /* flex was shrinking the mark from 48px wide to 25px once the hamburger joined the row */
  .nav .logo { flex: none; }
  .nav .logo img { height: 34px; width: auto; flex: none; max-width: none; }
  .nav ul { display: flex; gap: 26px; list-style: none; }
  .nav ul a { color: var(--ink); font-weight: 600; font-size: 0.93rem; text-decoration: none; }
  .nav ul a:hover { color: #1878b8; }
  .nav .right { margin-left: auto; display: flex; align-items: center; gap: 22px; }

  /* hero: inset rounded cinematic */
  .hero-frame { padding: 10px 16px 16px; }
  .hero {
    position: relative; border-radius: var(--r-big); overflow: hidden;
    min-height: 88vh; display: flex; flex-direction: column; justify-content: center;
  }
  .hero .media { z-index: 0; will-change: transform; }
  /* The photo drifts slower than the page. The transform is on .media, not the img,
     so the logo spotlight (::after mask + .spot) travels with the photo and stays
     registered. A transform does not change the container box, so the cqw/cqh the
     mask is anchored in are unaffected. The 1.06 scale supplies the bleed. */
  .hero .media { transform: scale(1.06) translate3d(0, var(--px, 0px), 0); }
  @media (prefers-reduced-motion: reduce) { .hero .media { transform: none; } }
  .hero .media, .hero .media img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero .media img { object-fit: cover; object-position: 50% 30%; }
  /* logo-only spotlight: the mask IS the logo's own alpha channel (logo-glow-mask.png,
     lightly dilated + feathered halo), registered onto the tower decal by template match. */
  .hero .media { container-type: size; }
  .hero .media {
    --lg-left: 57.47cqw;
    --lg-top: calc(4.66cqw + 30cqh);
    --lg-w: 29.25cqw;
    --lg-h: 22.20cqw;
  }
  .hero .media::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(13, 39, 49, 0.55) 0%, rgba(13, 39, 49, 0.22) 42%, rgba(13, 39, 49, 0) 64%), linear-gradient(180deg, rgba(13, 39, 49, 0.22) 0%, rgba(13, 39, 49, 0.05) 40%, rgba(13, 39, 49, 0.4) 100%);
    -webkit-mask-image: linear-gradient(#000 0 0), url(https://cdn.prod.website-files.com/6a7bdbb79e9a0602e019a388/6a7bde4faaf62825944aae2a_logo-glow-mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0 0, var(--lg-left) var(--lg-top);
    -webkit-mask-size: 100% 100%, var(--lg-w) var(--lg-h);
    -webkit-mask-composite: source-out;
    mask-image: linear-gradient(#000 0 0), url(https://cdn.prod.website-files.com/6a7bdbb79e9a0602e019a388/6a7bde4faaf62825944aae2a_logo-glow-mask.png);
    mask-repeat: no-repeat;
    mask-position: 0 0, var(--lg-left) var(--lg-top);
    mask-size: 100% 100%, var(--lg-w) var(--lg-h);
    mask-composite: subtract;
  }
  .hero .spot {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    -webkit-backdrop-filter: brightness(1.08) saturate(1.1) contrast(1.02);
    backdrop-filter: brightness(1.08) saturate(1.1) contrast(1.02);
    -webkit-mask-image: url(https://cdn.prod.website-files.com/6a7bdbb79e9a0602e019a388/6a7bde4faaf62825944aae2a_logo-glow-mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: var(--lg-left) var(--lg-top);
    -webkit-mask-size: var(--lg-w) var(--lg-h);
    mask-image: url(https://cdn.prod.website-files.com/6a7bdbb79e9a0602e019a388/6a7bde4faaf62825944aae2a_logo-glow-mask.png);
    mask-repeat: no-repeat;
    mask-position: var(--lg-left) var(--lg-top);
    mask-size: var(--lg-w) var(--lg-h);
  }
  /* squarer windows put the crop math out of range — fall back to plain dim */
  @media (max-aspect-ratio: 27/20) {
    .hero .media::after { -webkit-mask-image: none; mask-image: none; }
    .hero .spot { display: none; }
  }

  .hero .display {
    position: relative; z-index: 6; text-align: left; padding: 0 24px 0 5.5%;
  }
  .hero .display h1 {
    font-family: var(--font-display);
    font-weight: 400; text-transform: uppercase;
    font-size: clamp(3.6rem, 8.6vw, 8.2rem);
    line-height: 0.88; letter-spacing: 0.005em;
    /* Solid colour, NOT a clipped gradient. The accent word inside this heading uses
       background-clip:text for its blue sweep; nesting a second background-clip:text
       inside this one makes the browser paint that word twice, offset by a character.
       The white-to-grey depth is kept by stepping the colour per line instead. */
    color: #ffffff;
    text-shadow: 0 8px 60px rgba(9, 30, 40, 0.35);
  }
  /* Headline arrives one line at a time, once, on load.
     No overflow clipping on the lines: the h1 carries a 60px-blur text-shadow and a
     masked reveal slices that glow into a rectangle at every line boundary. A short
     rise plus a fade reads the same and leaves the shadow whole. */
  .hero .display h1 .ln { display: block; }
  .hero .display h1 .ln > i { display: block; font-style: normal; }
  /* the ramp the clipped gradient used to give, done with plain colour */
  .hero .display h1 .ln:nth-child(1) > i { color: #ffffff; }
  .hero .display h1 .ln:nth-child(2) > i { color: #eef3f7; }
  .hero .display h1 .ln:nth-child(3) > i { color: #d7dde3; }
  /* the headline enters as one block, so every letter arrives the same way */
  .hero .display h1.enter {
    opacity: 0; transform: translateY(0.13em);
    animation: pw-riseline .7s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes pw-riseline { to { opacity: 1; transform: none; } }
  /* the rest of the hero follows the headline in, continuing the same stagger */
  .hero .display.sub-block.enter > * {
    opacity: 0; transform: translateY(0.5rem);
    animation: pw-riseline .66s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero .display.sub-block.enter > *:nth-child(1) { animation-delay: .24s; }
  .hero .display.sub-block.enter > *:nth-child(2) { animation-delay: .32s; }
  .hero .display.sub-block.enter > *:nth-child(3) { animation-delay: .40s; }
  @media (prefers-reduced-motion: reduce) {
    .hero .display.sub-block.enter > * { opacity: 1; transform: none; animation: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    /* opacity has to be restored here, or killing the animation hides the headline outright */
    .hero .display h1,
    .hero .display h1.enter { opacity: 1; transform: none; animation: none !important; }
  }
  /* The shine is ONE element with two stacked background layers, both clipped to the
     glyphs: the brand gradient underneath, a specular band on top. Only the band's
     position animates, so the highlight tracks the letterforms exactly — no duplicated
     text, nothing to fall out of sync. */
  .hero .display h1 .hl-word {
    display: inline-block;
    background-image:
      linear-gradient(104deg,
        rgba(255,255,255,0) 42%,
        rgba(214,243,255,0.55) 47%,
        rgba(255,255,255,0.92) 50%,
        rgba(214,243,255,0.55) 53%,
        rgba(255,255,255,0) 58%),
      linear-gradient(180deg, #9adcff 12%, #3fb2ec 78%, #2492d2 100%);
    background-size: 260% 100%, 100% 100%;
    background-position: 150% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: pw-shine 7.5s cubic-bezier(.45,0,.25,1) infinite;
  }
  @keyframes pw-shine {
    0%, 62%  { background-position: 150% 0, 0 0; filter: drop-shadow(0 0 20px rgba(63,178,236,0.22)); }
    80%      { filter: drop-shadow(0 0 34px rgba(158,224,242,0.45)); }
    100%     { background-position: -60% 0, 0 0; filter: drop-shadow(0 0 20px rgba(63,178,236,0.22)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero .display h1 .hl-word { animation: none; background-position: 150% 0, 0 0; }
  }

  .hero .foot {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; padding: 0 40px 34px;
  }
  .hero .foot p { color: rgba(255, 255, 255, 0.94); font-size: 1.05rem; max-width: 34ch; }

  /* generic section header patterns */
  section { padding: 104px 0; }
  .split-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; margin-bottom: 64px; }
  .split-head h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 0.95; letter-spacing: 0.005em; }
  .split-head .aside p { font-size: 1.08rem; margin-bottom: 24px; }
  .center-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
  .center-head h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 0.95; letter-spacing: 0.005em; margin-bottom: 14px; }

  /* checklists (base) */
  .checks { list-style: none; }
  .checks li {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 0.95rem; padding: 8px 0; border-top: 1px solid rgba(18, 51, 62, 0.08);
  }
  .checks li:first-child { border-top: none; }
  .checks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
  .checks circle { fill: var(--tint-sea); }
  .checks path { stroke: #1878b8; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

  /* packages: unified dark cards, highlighted pair glows */
  .tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
  /* The name/price row, the one-line summary and the list toggle are mobile-only.
     display:contents keeps h3 and the price block as direct flex children of .tier
     on desktop, so the column layout there is unchanged. */
  .tier-top { display: contents; }
  .tier .gist, .tier .incl-t, .tier .incl-l { display: none; }
  .tier {
    position: relative;
    background: linear-gradient(170deg, #16414f 0%, #0d2731 100%);
    border-radius: var(--r-card); padding: 28px 24px 24px;
    display: flex; flex-direction: column;
  }
  .tier h3 { font-size: 1.3rem; margin-bottom: 14px; color: #fff; }
  .tier .price { font-family: var(--font-display); font-size: 2.9rem; font-weight: 400; color: #fff; line-height: 1; letter-spacing: -0.02em; }
  .tier .per { display: block; font-size: 0.9rem; margin-top: 8px; color: rgba(255, 255, 255, 0.75); }
  .tier .checks { margin: 22px 0 26px; flex: 1; }
  .tier .checks li { font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); border-top-color: rgba(255, 255, 255, 0.12); }
  .tier .checks circle { fill: rgba(255, 255, 255, 0.13); }
  .tier .checks path { stroke: #3fb2ec; }
  .tier .pillbtn { justify-content: center; }
  .tier .tag {
    position: absolute; top: -13px; right: 18px;
    background: #3fb2ec; color: var(--ink);
    font-size: 0.78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  }
  .tier.hl {
    border: 1.5px solid #3fb2ec;
    box-shadow: 0 0 0 1px rgba(63, 178, 236, 0.35), 0 24px 70px -24px rgba(63, 178, 236, 0.5), 0 10px 40px -20px rgba(13, 39, 49, 0.6);
  }
  .rules-line { text-align: center; margin-top: 36px; font-size: 0.95rem; }
  .rules-line strong { color: var(--ink); }


  .h-sec { font-family: "Archivo", sans-serif; font-weight: 700; font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); }
  .eyebrow-sm { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #1878b8; margin-bottom: 14px; }

  /* hero: centered composition above the foam */
  .hero { min-height: 92vh; padding-bottom: 130px; }
  .hero .foot { display: none; }
  .sub-block { margin-top: 6px; }
  .hero .tagline {
    max-width: 44ch;
    margin-top: 24px; color: rgba(255, 255, 255, 0.94); font-size: 1.08rem; font-weight: 500;
    text-shadow: 0 2px 22px rgba(9, 30, 40, 0.6);
  }
  .hero .cta-row { display: flex; justify-content: flex-start; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
  .hero-rating {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
    color: rgba(255,255,255,0.92); font-size: 0.92rem;
    text-shadow: 0 2px 14px rgba(9,30,40,0.7);
  }
  .hero-rating .gmark { width: 17px; height: 17px; flex: none; }
  .hero-rating b { font-family: var(--font-head); font-weight: 800; font-size: 1.08rem; color: #fff; }
  .hero-rating .st { color: #ffc656; letter-spacing: 1px; font-size: 0.86rem; }
  .hero-rating em { font-style: normal; color: rgba(255,255,255,0.78); }
  .hero .cta-row .pillbtn.ghost-dark { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .bubs { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
  .bubs.back  { z-index: 1; opacity: 0.74; }  /* farther away: fainter, but never blurred */
  .bubs.front { z-index: 8; }   /* over everything */
  .fbub { position: absolute; max-width: none; opacity: 0; will-change: transform, opacity; animation: floatpop var(--d, 10s) linear infinite; animation-delay: var(--t, 0s); }
  @keyframes floatpop {
    0%    { transform: translate(0, 0) scale(0.86); opacity: 0; }
    7%    { transform: translate(3px, calc(var(--rise) * -0.07)) scale(0.94); opacity: 0.95; }
    30%   { transform: translate(-8px, calc(var(--rise) * -0.3)) scale(0.96); }
    55%   { transform: translate(7px, calc(var(--rise) * -0.55)) scale(0.95); }
    80%   { transform: translate(-6px, calc(var(--rise) * -0.8)) scale(1); }
    96%   { transform: translate(0, calc(var(--rise) * -0.955)) scale(1.02); opacity: 0.95; }
    97.6% { transform: translate(0, calc(var(--rise) * -0.965)) scale(1.38); opacity: 0.9; }
    98%   { transform: translate(0, calc(var(--rise) * -0.968)) scale(1.42); opacity: 0; }
    100%  { transform: translate(0, calc(var(--rise) * -0.968)) scale(1.42); opacity: 0; }
  }
  .fpop {
    position: absolute; display: block; aspect-ratio: 1; max-width: none; pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; opacity: 0;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), inset 0 0 6px rgba(255, 255, 255, 0.4);
    animation: fpopring var(--d, 10s) linear infinite; animation-delay: var(--t, 0s);
  }
  @keyframes fpopring {
    0%, 97.5% { opacity: 0; transform: translate(0, calc(var(--rise) * -0.965)) scale(0.6); }
    98%   { opacity: 0.85; transform: translate(0, calc(var(--rise) * -0.968)) scale(1.1); }
    100%  { opacity: 0; transform: translate(0, calc(var(--rise) * -0.985)) scale(2.1); }
  }
  /* --- click a bubble to pop it --- */
  /* front bubbles sit at z-index 8, over .display (6). Lift the block holding the CTAs
     above them so a drifting bubble can never swallow a click on the buttons. */
  .hero .display.sub-block { z-index: 9; }
  .fbub { pointer-events: auto; cursor: pointer; }
  .fbub.popped { animation: none !important; opacity: 0; }
  .pop-ring {
    position: absolute; pointer-events: none; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), inset 0 0 6px rgba(255, 255, 255, 0.4);
    animation: pw-clickpop .44s cubic-bezier(.2, .7, .3, 1) forwards;
  }
  @keyframes pw-clickpop {
    0%   { opacity: 0.95; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(2.3); }
  }

  @media (prefers-reduced-motion: reduce) {
    .fbub { animation: none; opacity: 0.85; transform: scale(0.9); pointer-events: none; }
    .fpop { display: none; }
  }

  /* ============ foam divider: real render, black screens out over the photo ============ */
  .foam-zone {
    /* z-index sits above .bubs.front (8) so bubbles rise out from behind the
       suds instead of fading in on top of them */
    position: relative; z-index: 9; pointer-events: none;
    margin-top: -11%;
    margin-bottom: -2.2%;
  }
  .foam-img { display: block; width: 100%; height: auto; }

  /* ============ welcome + features (foam world) ============ */
  .welcome { background: #fff; padding-top: 90px; position: relative; z-index: 6; }
  .welcome .caps { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #1878b8; margin-bottom: 14px; }
  .welcome .caps .dot { color: rgba(24, 120, 184, 0.45); }
  .welcome h2 { margin-bottom: 12px; }
  .welcome .lede { font-size: 1.05rem; max-width: 56ch; margin-bottom: 30px; }
  .grid2 { display: grid; grid-template-columns: 0.85fr 1.4fr; gap: 40px; align-items: stretch; }
  .photo-col { position: relative; border-radius: 26px; overflow: hidden; min-height: 620px; }
  .photo-col img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 40%; }
  /* caption: dark glass label in the photo's corner */
  .ph-cap { position: absolute; inset: 0; pointer-events: none; }
  /* Not a card: the bottom of the photo fades up into white and the copy sits on it,
     so it reads as one object rather than a label stuck on an image. It costs the
     bottom third of the frame, so the crop below is raised to keep the attendant and
     the car in view. */
  .ph-cap .lbl {
    position: absolute; left: 0; right: 0; bottom: 0; max-width: none;
    padding: 68px 26px 24px;
    background: linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.72) 34%,
      rgba(255,255,255,0.96) 62%,
      #ffffff 100%);
  }
  .ph-cap .k { display: block; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.22em;
    text-transform: uppercase; color: #1878b8; margin-bottom: 7px; }
  .ph-cap strong { display: block; color: var(--ink); line-height: 1.08; margin-bottom: 6px; font-size: 1.24rem; }
  .ph-cap .desc { display: block; font-size: 0.82rem; color: var(--body-c); line-height: 1.5; }

  .cardcol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .cardcol .feat { padding: 24px 22px; }
  .cardcol .feat h3 { font-size: 1rem; }
  .cardcol .feat p { font-size: 0.86rem; }
  .cardcol .feat .bubble-ico { width: 54px; height: 54px; margin-bottom: 14px; }
  .cardcol .feat.hl { grid-column: 1 / -1; display: flex; gap: 22px; align-items: center; }
  .cardcol .feat.hl .bubble-ico { margin-bottom: 0; flex: none; width: 64px; height: 64px; }
  .feat {
    background: #fff; border-radius: 22px; padding: 28px 22px;
    box-shadow: 0 2px 6px rgba(24, 120, 184, 0.06), 0 22px 44px -24px rgba(24, 120, 184, 0.22);
    border: 1px solid rgba(24, 120, 184, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .feat:hover { transform: translateY(-5px); box-shadow: 0 2px 6px rgba(24,120,184,0.06), 0 30px 56px -24px rgba(24, 120, 184, 0.3); }
  .bubble-ico {
    width: 64px; height: 64px; border-radius: 50%; margin-bottom: 20px;
    background: url(https://cdn.prod.website-files.com/6a7bdbb79e9a0602e019a388/6a7bddca87327a934c5c1254_bubble.png) center / 100% 100% no-repeat;
    filter: drop-shadow(0 8px 14px rgba(24, 120, 184, 0.22));
    display: inline-flex; align-items: center; justify-content: center;
  }
  .bubble-ico svg { width: 26px; height: 26px; stroke: #1878b8; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

  /* section 2 only: the icon bubbles drift like they are floating in water */
  #wash .bubble-ico { animation: bubdrift 6.5s ease-in-out infinite; will-change: transform; }
  #wash .cardcol .feat:nth-of-type(1) .bubble-ico { animation-delay: -0.4s; }
  #wash .cardcol .feat:nth-of-type(2) .bubble-ico { animation-delay: -2.1s; animation-duration: 7.2s; }
  #wash .cardcol .feat:nth-of-type(3) .bubble-ico { animation-delay: -3.6s; animation-duration: 6.1s; }
  #wash .cardcol .feat:nth-of-type(4) .bubble-ico { animation-delay: -1.3s; animation-duration: 7.8s; }
  #wash .feat.hl .bubble-ico          { animation-delay: -5.0s; animation-duration: 6.8s; }
  @keyframes bubdrift {
    0%, 100% { transform: translateY(0)     scale(1);     }
    35%      { transform: translateY(-4px)  scale(1.025); }
    70%      { transform: translateY(1.5px) scale(0.99);  }
  }
  @media (prefers-reduced-motion: reduce) { #wash .bubble-ico { animation: none; } }
  .feat h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--ink); font-weight: 700; }
  .feat p { font-size: 0.9rem; }
  .feat.hl {
    position: relative;
    background: linear-gradient(180deg, #ecf8ff 0%, #dff2fc 100%);
    border: 1.5px solid rgba(63, 178, 236, 0.55);
    box-shadow: 0 2px 6px rgba(24, 120, 184, 0.08), 0 26px 50px -22px rgba(24, 120, 184, 0.38);
  }
  .minitag {
    position: absolute; top: -11px; right: 16px;
    background: #3fb2ec; color: var(--ink); font-size: 0.72rem; font-weight: 700;
    padding: 4px 12px; border-radius: 999px; letter-spacing: 0.02em;
    box-shadow: 0 6px 16px -6px rgba(24, 130, 200, 0.6);
  }
  .goal-line { text-align: center; margin-top: 52px; }
  .goal-chip {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 28px 14px 22px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(63,178,236,0.13) 0%, rgba(63,178,236,0.05) 100%);
    border: 1px solid rgba(63,178,236,0.32);
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 14px 34px -20px rgba(24,120,184,0.55);
    font-weight: 700; font-size: 1.12rem; color: var(--ink); letter-spacing: -0.01em;
  }
  .goal-chip .spark { width: 20px; height: 20px; flex: none; fill: #3fb2ec; animation: twinkle 3.4s ease-in-out infinite; }
  .goal-chip b { font-weight: 800; color: #1878b8; }
  @keyframes twinkle {
    0%, 100% { opacity: 0.55; transform: scale(0.86) rotate(0deg); }
    50%      { opacity: 1;    transform: scale(1.08) rotate(18deg); }
  }

  .welcome { padding-bottom: 64px; }
  #packages { background: linear-gradient(180deg, #0f2f3d 0%, #0d2731 100%); padding-top: 84px; }
  #packages .center-head h2 { color: #fff; }
  #packages .center-head p { color: rgba(255, 255, 255, 0.75); }
  .toggle { display: flex; justify-content: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; width: fit-content; margin: 0 auto 46px; padding: 5px; }
  .toggle span { padding: 9px 22px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.6); cursor: pointer; user-select: none; transition: background 0.2s ease, color 0.2s ease; }
  #packages .price small { font-size: 1.5rem; letter-spacing: 0; }
  #packages.mode-monthly .only-single { display: none; }
  #packages.mode-single .only-monthly { display: none; }
  /* Simple Shine stays visible in the monthly view so the headline's "four washes"
     is true in both states; it is dimmed and chipped rather than removed. */
  #packages.mode-monthly .tier.no-monthly { opacity: 0.62; }
  #packages.mode-monthly .tier.no-monthly:hover { opacity: 1; }
  .tier .only-chip { display: none; }
  #packages.mode-monthly .tier .only-chip {
    display: inline-block; margin-top: 12px; font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: #9ad9f7;
    background: rgba(63,178,236,0.15); border: 1px solid rgba(63,178,236,0.35);
    border-radius: 999px; padding: 4px 10px;
  }
  #packages.mode-monthly .tier.pop { border: 0; box-shadow: none; padding: 28px 24px 24px; }
  #packages.mode-monthly .tier.pop .ribbon { display: none; }
  #packages.mode-monthly .tier-grid { grid-template-columns: repeat(4, 1fr); }
  .toggle .on { background: #3fb2ec; color: var(--ink); }
  #packages .tier { background: linear-gradient(170deg, #1b4a5a 0%, #123642 100%); }
  .ribbon { position: absolute; top: 16px; right: -8px; background: #a9cfe8; color: var(--ink); font-size: 0.7rem; font-weight: 700; padding: 5px 12px; border-radius: 6px 0 0 6px; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.5); }
  .lad { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #7fc4ee; margin-top: 16px; }
  #packages .tier .checks { margin: 8px 0 22px; }
  .rules { text-align: center; margin-top: 36px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); }

  /* ============ reviews: love-letters band over tunnel photo ============ */
  .revs { position: relative; padding: 0 0 104px; background: #0d2731; margin-top: -1px; overflow: hidden; }
  .revs .revs-bg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
    filter: saturate(0.9) hue-rotate(-10deg);
  }
  .revs .revs-tint {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
      #0d2731 0%, #0d2731 5%,
      rgba(13,39,49,0.94) 10%, rgba(13,39,49,0.80) 15%, rgba(13,39,49,0.60) 21%,
      rgba(13,39,49,0.40) 27%, rgba(13,39,49,0.24) 34%, rgba(13,39,49,0.12) 42%,
      rgba(13,39,49,0.05) 52%, rgba(11,32,41,0.18) 78%, rgba(11,32,41,0.40) 100%);
  }
  .revs .band { position: relative; z-index: 2; padding: 88px 0 48px; }
  .revs .bandwrap { text-align: center; position: relative; z-index: 2; }
  .revs .rays { width: 220px; margin: 0 auto 6px; display: block; }
  .revs .band h2 { color: #fff; font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 800; }
  .revs .score-line {
    margin-top: 18px; color: rgba(255,255,255,0.92); display: inline-flex; gap: 12px; align-items: center;
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    padding: 10px 22px 10px 16px; border-radius: 999px;
  }
  .revs .score-line .num { font-weight: 800; font-size: 1.5rem; color: #fff; }
  .revs .score-line .from { font-size: 0.92rem; color: rgba(255,255,255,0.8); }
  .revs .st { color: #ffc656; letter-spacing: 2px; }
  .gmark { width: 22px; height: 22px; flex: none; display: block; }
  /* reviews ride one rail that drifts sideways forever; hover to hold it */
  .revs .rail {
    position: relative; z-index: 3; overflow: hidden; padding: 6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .revs .rail-track {
    --gap: 20px;
    display: flex; gap: var(--gap); width: max-content;
    animation: railscroll 68s linear infinite; will-change: transform;
  }
  .revs .rail-track .rcard { width: 360px; flex: none; margin-bottom: 0; transform: none; }
  /* stop the marquee so a quote can actually be read */
  .revs .rail:hover .rail-track,
  .revs .rail:focus-within .rail-track { animation-play-state: paused; }
  /* the rail stops on hover, so the card under the cursor gets picked out */
  .revs .rail-track .rcard {
    transition: transform .32s cubic-bezier(.2, .7, .3, 1), box-shadow .32s ease;
  }
  .revs .rail-track .rcard:hover {
    transform: translateY(-7px);
    box-shadow: 0 2px 6px rgba(13, 39, 49, 0.10),
                0 42px 74px -22px rgba(6, 22, 30, 0.78);
  }
  .revs .rail-track .rcard:hover .gmark { opacity: 1; }
  .revs .rail-track .rcard::after {
    content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px;
    border-radius: 2px; background: linear-gradient(90deg, #9adcff, #3fb2ec);
    transform: scaleX(0); transform-origin: left; transition: transform .34s cubic-bezier(.2,.7,.3,1);
  }
  .revs .rail-track .rcard:hover::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) {
    .revs .rail-track .rcard { transition: none; }
    .revs .rail-track .rcard:hover { transform: none; }
    .revs .rail-track .rcard::after { display: none; }
  }
  @keyframes railscroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
  @media (prefers-reduced-motion: reduce) {
    .revs .rail-track { animation: none; }
    .revs .rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  }
  .revs .cta-c { margin-top: 46px; }
  .rcard {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border-radius: 20px; padding: 26px;
    box-shadow: 0 2px 6px rgba(13, 39, 49, 0.10), 0 30px 60px -24px rgba(6, 22, 30, 0.62);
  }
  .rcard .gmark { position: absolute; top: 20px; right: 20px; width: 18px; height: 18px; opacity: 0.85; }
  .rcard .pull { font-weight: 700; color: var(--ink); margin-bottom: 6px; padding-right: 30px; }
  .rcard .st { font-size: 0.85rem; display: block; }
  .rcard blockquote { color: var(--body-c); font-size: 0.95rem; line-height: 1.6; margin: 10px 0 18px; }
  /* auto margin pins the reviewer to the bottom however short the quote runs */
  .rcard .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
  .rcard .who .av {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 0.95rem; line-height: 1;
  }
  .rcard .who strong { display: block; color: var(--ink); font-size: 0.88rem; }
  .rcard .who > div > span { font-size: 0.8rem; color: var(--body-c); }
  .cta-c { text-align: center; margin-top: 44px; position: relative; z-index: 3; }
  .revs .cta-c .pillbtn { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(255,255,255,0.12); }
  .revs .cta-c .pillbtn:hover { background: rgba(255,255,255,0.22); }
  .revs .cta-c .gmark { width: 18px; height: 18px; margin-right: 2px; }
  /* hand the section off to the light closer below */
  .revs::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(11,32,41,0) 0%, rgba(11,32,41,0.28) 34%, rgba(11,32,41,0.62) 58%, rgba(11,32,41,0.90) 76%, #0b2029 88%, #0b2029 100%);
  }

  /* ============ eco: the responsible approach ============
     Also the dark->light bridge between the reviews band and the closer. */
  .eco {
    position: relative; overflow: hidden;
    padding: 104px 0 84px;
    background: #ffffff;
  }
  /* faint ripple rings spreading from behind the cards + soft cyan glow */
  .eco::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      repeating-radial-gradient(circle at 50% 46%, transparent 0 54px, rgba(24,120,184,0.055) 54px 55px),
      radial-gradient(58% 48% at 14% 16%, rgba(63,178,236,0.16), transparent 72%),
      radial-gradient(52% 46% at 88% 82%, rgba(24,120,184,0.12), transparent 72%);
    -webkit-mask-image: radial-gradient(75% 65% at 50% 46%, #000 30%, transparent 100%);
            mask-image: radial-gradient(75% 65% at 50% 46%, #000 30%, transparent 100%);
  }
  .eco > .wrap { position: relative; z-index: 1; }

  .eco .head { text-align: center; max-width: 780px; margin: 0 auto 58px; }
  /* eyebrow rules wipe outward when the section arrives */
  .eyewrap { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .eyewrap .eyerule {
    height: 1px; width: 0; background: linear-gradient(90deg, transparent, rgba(24,120,184,0.65));
    transition: width .9s cubic-bezier(.2,.7,.3,1);
  }
  .eyewrap .eyerule.r { background: linear-gradient(90deg, rgba(24,120,184,0.65), transparent); }
  .eyewrap.on .eyerule { width: 96px; }
  .eyewrap .eyebrow-sm { margin-bottom: 0 !important; white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) { .eyewrap .eyerule { transition: none; width: 96px; } }
  /* left-aligned variant — one trailing rule instead of a symmetric pair */
  .eyewrap.left { justify-content: flex-start; }
  .eyewrap.left.on .eyerule { width: 74px; }
  @media (max-width: 640px) { .eyewrap.on .eyerule { width: 40px; } .eyewrap.left.on .eyerule { width: 44px; } }
  .eco .head h2 {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(2rem, 3.3vw, 3.1rem); line-height: 0.96; letter-spacing: 0.005em;
    color: var(--ink); margin-bottom: 16px;
  }
  .eco .head p { color: var(--body-c); font-size: 1.06rem; }
  .ecoIcon { width: 30px; height: 30px; flex: none; stroke: #7fd8ec; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .eco .win .toprow { display: flex; align-items: center; margin-bottom: 18px; }
  .eco .wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .eco .win {
    position: relative; overflow: hidden;
    background: linear-gradient(168deg, #16719f 0%, #0f537d 55%, #0c3f63 100%);
    border-radius: 22px; padding: 30px 28px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset,
                0 2px 6px rgba(17, 90, 143, 0.18),
                0 26px 54px -22px rgba(24, 120, 184, 0.55);
    transition: transform .38s cubic-bezier(.2,.7,.3,1), box-shadow .38s ease;
  }
  .eco .win::before {
    content: ""; position: absolute; top: -45%; right: -28%; width: 85%; height: 125%;
    background: radial-gradient(circle at 50% 50%, rgba(159,224,242,0.26), transparent 66%);
    pointer-events: none;
  }
  .eco .win > *:not(.cb) { position: relative; z-index: 1; }
  /* bubbles rise continuously inside each card */
  .eco .win .cb {
    position: absolute; bottom: -26px; width: 16px; height: 16px; z-index: 0;
    opacity: 0; pointer-events: none; will-change: transform, opacity;
    animation: cbrise 9s linear infinite;
  }
  .eco .win .cb:nth-of-type(1) { left: 11%; width: 13px; height: 13px; animation-duration: 9.5s;  animation-delay: -1.2s; }
  .eco .win .cb:nth-of-type(2) { left: 34%; width: 20px; height: 20px; animation-duration: 11.5s; animation-delay: -5.4s; }
  .eco .win .cb:nth-of-type(3) { left: 58%; width: 11px; height: 11px; animation-duration: 8.4s;  animation-delay: -3.1s; }
  .eco .win .cb:nth-of-type(4) { left: 79%; width: 17px; height: 17px; animation-duration: 10.6s; animation-delay: -7.3s; }
  .eco .win:nth-child(2) .cb { animation-delay: -2.6s; }
  .eco .win:nth-child(3) .cb { animation-delay: -6.1s; }
  /* The card is overflow:hidden and the bubble starts below its bottom edge, so it is
     already clipped at both ends. It holds one opacity the whole way and rises far
     enough to exit through the top, rather than dissolving in mid-card. 420px clears
     the tallest card (276px at desktop, taller when the text wraps on a phone). */
  @keyframes cbrise {
    0%   { transform: translate(0, 0) scale(.82); opacity: .72; }
    50%  { transform: translate(9px, -205px) scale(1); opacity: .72; }
    100% { transform: translate(-5px, -420px) scale(1.06); opacity: .72; }
  }
  @media (prefers-reduced-motion: reduce) { .eco .win .cb { animation: none; opacity: .28; } }
  .eco .win:hover {
    transform: translateY(-6px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
                0 2px 8px rgba(17, 90, 143, 0.22),
                0 40px 72px -26px rgba(24, 120, 184, 0.7);
  }
  @media (prefers-reduced-motion: reduce) { .eco .win { transition: none; } .eco .win:hover { transform: none; } }

  .eco .win h3 { color: #fff; font-size: 1.12rem; font-weight: 700; margin-bottom: 8px; }
  .eco .win p { color: #d9eefb; font-size: 0.94rem; line-height: 1.6; }
  .eco .win .ecoIcon { stroke: #aee2fa; }
  .eco .kicker { text-align: center; margin-top: 38px; color: var(--ink); font-weight: 700;
    font-size: 1.06rem; }

  /* --- scroll progress line --- */
  .scrollprog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; background: rgba(18,51,62,0.07); }
  .scrollprog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #9adcff, #3fb2ec 55%, #1878b8); }

  /* --- checkmarks draw themselves in --- */
  .tier .checks path { stroke-dasharray: 14; stroke-dashoffset: 14; }
  .tier.drawn .checks path { animation: pw-draw .5s cubic-bezier(.2,.7,.3,1) forwards; }
  .tier.drawn .checks li:nth-child(2) path { animation-delay: .07s; }
  .tier.drawn .checks li:nth-child(3) path { animation-delay: .14s; }
  .tier.drawn .checks li:nth-child(4) path { animation-delay: .21s; }
  .tier.drawn .checks li:nth-child(5) path { animation-delay: .28s; }
  .tier.drawn .checks li:nth-child(6) path { animation-delay: .35s; }
  .tier.drawn .checks li:nth-child(7) path { animation-delay: .42s; }
  .tier.drawn .checks li:nth-child(8) path { animation-delay: .49s; }
  .tier.drawn .checks li:nth-child(9) path { animation-delay: .56s; }
  @keyframes pw-draw { to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .tier .checks path { stroke-dashoffset: 0; }
    .tier.drawn .checks path { animation: none; }
  }

  /* --- plain-English tooltips on wash jargon --- */
  .term { display: inline; }
  .jt {
    position: relative; display: inline-flex; align-items: center; vertical-align: -0.16em;
    margin-left: 5px; cursor: help; color: rgba(63,178,236,0.85); transition: color .18s ease;
  }
  .jt:hover, .jt:focus-visible { color: #6cc8f5; outline: none; }
  .jt svg {
    width: 14px; height: 14px; flex: none; margin: 0; display: block;
    fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round;
  }
  .jt svg .dot { fill: currentColor; stroke: none; }
  /* the tier checkmarks draw themselves in via stroke-dash; keep that off this icon */
  .tier .checks .jt circle, .tier .checks .jt line {
    stroke-dasharray: none; stroke-dashoffset: 0; animation: none;
  }
  .jt::after {
    content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 9px); width: 260px;
    background: #fff; color: var(--ink); font-family: "Archivo", sans-serif; font-size: 0.83rem;
    font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left;
    padding: 12px 14px; border-radius: 12px; box-shadow: 0 18px 44px -14px rgba(6,22,30,0.7);
    opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: .2s ease; z-index: 8;
  }
  /* :focus (not just :focus-visible) so a tap opens the tip on touch devices */
  .jt:hover::after, .jt:focus::after, .jt:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  /* last card would push a centred tip past the card edge */
  .tier:last-child .jt::after { left: auto; right: -10px; transform: translate(0, -4px); }
  .tier:last-child .jt:hover::after,
  .tier:last-child .jt:focus::after,
  .tier:last-child .jt:focus-visible::after { transform: translate(0, 0); }


  /* ============ touchless band ============
     Lifted out of the welcome grid: it answers the main objection for new or dark
     paint, so it earns its own moment ahead of the pricing decision. */
  /* .welcome above is position:relative z-index:6, and this section starts on exactly
     the pixel it ends — without its own stacking position the welcome section paints
     over the 1.5px of ring that sits proud of the card's top edge. */
  .touchband {
    padding: 0 0 96px; background: #fff;
    position: relative; z-index: 7; --tb-r: var(--r-big);
    /* the rotating square is deliberately oversized so it still covers the card at every
       angle; clip-path shapes what paints but the box still counts toward scroll overflow,
       so the section has to contain it or the page picks up sideways scroll */
    overflow: hidden;
  }
  .tb-inner {
    position: relative; border-radius: var(--r-big);
    /* the glow ring lives outside the box, so this cannot clip to the padding box */
    overflow: visible;
    --tb-r: var(--r-big);
    background: radial-gradient(120% 140% at 78% 12%, #17506b 0%, #0d2731 62%);
    padding: 46px 48px; display: grid; grid-template-columns: 1fr auto;
    gap: 34px; align-items: center;
    /* just depth — no blue halo, the outline is the whole treatment */
    box-shadow: 0 10px 40px -20px rgba(13, 39, 49, 0.6);
  }
  /* the bubble drifts like the ones in the feature cards; that rule is scoped to #wash,
     so this one sat still. Slightly longer period so the two are not in lockstep. */
  .touchband .tb-ico { animation: bubdrift 7.5s ease-in-out infinite; will-change: transform; }
  @media (prefers-reduced-motion: reduce) { .touchband .tb-ico { animation: none; } }
  /* Ultimate Protect's thin accent ring, with a highlight that travels around it.
     Built by ROTATING a conic gradient and clipping it to the card's rounded rect: the
     wrap is padded out to exactly the ring's outer edge and clipped to that shape, the
     rotating square sits behind, and the card's own opaque background covers the middle,
     leaving only the 1.5px rim showing.
     Deliberately not an @property angle animated inside the gradient — Safari registers
     that animation and interpolates the value, but never repaints the gradient, so the
     ring sits perfectly still. Rotating a real element works everywhere. */
  .touchband .wrap {
    position: relative;
    /* This padding IS the ring thickness, so it has to be uniform. The page gutter has
       to come out of the width instead — leaving it in the padding is what made the
       ring 10.5px down the sides and 1.5px across the top and bottom. */
    padding: 1.5px;
    width: calc(100% - 61px);          /* 32px gutter a side, less the 1.5px ring */
    max-width: calc(1280px - 61px);
    margin-inline: auto;
    clip-path: inset(0 round calc(var(--tb-r) + 1.5px));
  }
  .touchband .wrap::before {
    content: ""; position: absolute; pointer-events: none;
    left: 50%; top: 50%; width: 150%; aspect-ratio: 1;
    translate: -50% -50%;
    background: conic-gradient(
      #3fb2ec 0deg,
      #3fb2ec 268deg,
      #9ad8f7 296deg,
      #ffffff 312deg,
      #9ad8f7 328deg,
      #3fb2ec 352deg,
      #3fb2ec 360deg);
    animation: tb-orbit 7s linear infinite;
  }
  @keyframes tb-orbit { to { rotate: 360deg; } }
  @media (prefers-reduced-motion: reduce) {
    .touchband .wrap::before { animation: none; }
  }
  .tb-copy h2 {
    color: #fff; font-family: var(--font-head); font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 1.95rem); letter-spacing: -0.02em; line-height: 1.12;
  }
  .tb-copy p { color: rgba(255,255,255,0.78); max-width: 52ch; margin-top: 11px; }
  /* Same bubble component as the welcome tiles, but swapped to the iridescent art the
     hero uses. bubble.png is built to sit on white and goes opaque against this panel;
     the iridescent one stays glassy on dark, so the icon reads through it. */
  /* the same clean bubble the welcome tiles use, just larger. no iridescence. */
  .touchband .tb-ico {
    width: 112px; height: 112px; margin-bottom: 0; flex: none;
    filter: drop-shadow(0 14px 30px rgba(6, 22, 30, 0.4));
  }
  .touchband .tb-ico svg { width: 44px; height: 44px; }
  @media (max-width: 760px) {
    .touchband { padding-bottom: 64px; }
    .tb-inner { grid-template-columns: 1fr; padding: 30px 26px; gap: 22px; }
    .touchband .tb-ico { width: 82px; height: 82px; }
    .touchband .tb-ico svg { width: 34px; height: 34px; }
  }

  /* ============ process strip ============ */
  .flow { background: #ffffff; padding: 0 0 96px; }
  .flow .steps { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; gap: 0; }
  /* animated dashed run that connects the steps */
  .flow .steps::before {
    content: ""; position: absolute; top: 31px; left: 12.5%; right: 12.5%; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(24,120,184,0.5) 0 8px, transparent 8px 16px);
    background-size: 16px 2px; animation: flowdash 1.6s linear infinite;
  }
  @keyframes flowdash { to { background-position: 16px 0; } }
  /* vertical twin, used when the strip stacks on a phone */
  @keyframes flowdash-v { to { background-position: 0 16px; } }
  @media (prefers-reduced-motion: reduce) {
    .flow .steps::before, .flow .step::after { animation: none; }
  }
  .flow .step { text-align: center; padding: 0 12px; }
  .flow .sn {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; border-radius: 50%;
    background: url(https://cdn.prod.website-files.com/6a7bdbb79e9a0602e019a388/6a7bddca87327a934c5c1254_bubble.png) center / 100% 100% no-repeat;
    font-family: var(--font-head); font-weight: 800; font-size: 1.22rem; color: #1878b8;
    filter: drop-shadow(0 8px 16px rgba(24,120,184,0.24));
    animation: bubdrift 6.5s ease-in-out infinite;
  }
  .flow .step:nth-child(2) .sn { animation-delay: -1.6s; animation-duration: 7.2s; }
  .flow .step:nth-child(3) .sn { animation-delay: -3.2s; animation-duration: 6.1s; }
  .flow .step:nth-child(4) .sn { animation-delay: -4.8s; animation-duration: 7.6s; }
  @media (prefers-reduced-motion: reduce) { .flow .sn { animation: none; } }
  .flow .step b {
    display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.06rem;
    color: var(--ink); margin-top: 14px; letter-spacing: -0.01em;
  }
  .flow .step em { font-style: normal; display: block; color: var(--body-c); font-size: 0.87rem; margin-top: 4px; }
  .flow .step .tag {
    display: inline-block; margin-top: 9px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: #1878b8; background: rgba(63,178,236,0.13);
    border: 1px solid rgba(63,178,236,0.3); padding: 3px 10px; border-radius: 999px;
  }
  @media (max-width: 760px) {
    .flow .steps { grid-template-columns: 1fr 1fr; gap: 34px 0; }
    .flow .steps::before { display: none; }
    .flow { padding-bottom: 68px; }
  }

  /* ============ locations: photo doors ============ */
  .locs { background: #ffffff; padding: 92px 0 104px; }
  .locs .eyebrow-sm { display: block; text-align: center; }
  .locs .h-main {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase; text-align: center;
    font-size: clamp(2.1rem, 3.5vw, 3.2rem); line-height: 0.95; letter-spacing: 0.005em;
    color: var(--ink); margin-bottom: 14px;
  }
  .locs .sub { text-align: center; color: var(--body-c); font-size: 1.02rem; margin-bottom: 56px; }
  .locs .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .locs .door { position: relative; border-radius: 26px; overflow: hidden; height: 500px; display: block; text-decoration: none; }
  .locs .door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  .locs .door:hover img { transform: scale(1.04); }
  .locs .door::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,39,49,0) 34%, rgba(13,39,49,0.42) 62%, rgba(8,27,36,0.92) 100%); }
  .locs .info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 32px; }
  .locs .info h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: #fff;
    font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 0.95; margin-bottom: 10px; }
  .locs .info .addr { color: rgba(255,255,255,0.88); font-size: 0.98rem; margin-bottom: 4px; }
  .locs .info .meta { color: rgba(255,255,255,0.72); font-size: 0.88rem; margin-bottom: 18px; }
  .locs .info .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .locs .statuspill {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
    padding: 5px 13px; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
    background: rgba(30,142,62,0.2); color: #b6f0c6; border: 1px solid rgba(120,220,150,0.45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .locs .statuspill.shut { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); border-color: rgba(255,255,255,0.28); }
  .locs .statuspill i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; position: relative; flex: none; }
  .locs .statuspill.shut i { background: rgba(255,255,255,0.6); }
  .locs .statuspill i::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: #4ade80;
    animation: pw-ping 2.4s ease-out infinite;
  }
  .locs .statuspill.shut i::after { display: none; }
  @keyframes pw-ping { 0%{transform:scale(1);opacity:.7} 70%{transform:scale(2.6);opacity:0} 100%{opacity:0} }
  @media (prefers-reduced-motion: reduce) { .locs .statuspill i::after { display: none; } }
  .locs .tel { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; }
  .locs .pillbtn.accent { padding: 12px 16px 12px 22px; font-size: 0.9rem; }

  /* ============ closer: wash-code text ============ */
  .closer { background: #ffffff; padding: 104px 0; }
  .closer h2 .onus { color: #1878b8; }
  .msg a { color: #1878b8; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
  .msg.them .tap { display: block; margin-top: 2px; }
  .fd-grid { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; max-width: 1000px; margin: 0 auto; }
  .phone { width: 300px; background: #fff; border-radius: 36px; border: 1px solid rgba(18, 51, 62, 0.12); box-shadow: 0 34px 68px -30px rgba(13, 39, 49, 0.4); padding: 18px 16px 26px; }
  .pnotch { width: 110px; height: 22px; background: #0d2731; border-radius: 999px; margin: 0 auto 18px; }
  .msg { border-radius: 18px; padding: 12px 16px; font-size: 0.88rem; margin-bottom: 10px; max-width: 88%; }
  .msg.them { background: #e9eef2; color: var(--ink); border-bottom-left-radius: 6px; }
  .msg.them b { color: #1878b8; }
  .msg.me { background: #3fb2ec; color: var(--ink); margin-left: auto; border-bottom-right-radius: 6px; width: fit-content; }
  .fd-copy h2 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); font-weight: 800; margin: 4px 0 12px; }
  .fd-copy p { max-width: 48ch; margin-bottom: 26px; }

  @media (max-width: 960px) {
    .nav ul, .nav .right .textlink { display: none; }
    .nav .wrap { gap: 16px; }
    .nav .right .pillbtn { font-size: 0.85rem; padding: 12px 14px; }
    .hero { min-height: 72vh; }
    .hero .foot { flex-direction: column; align-items: flex-start; }
    .tier-grid { grid-template-columns: 1fr 1fr; }
    .grid2 { grid-template-columns: 1fr; }
    .photo-col { min-height: 440px; }
    .revs .rail-track .rcard { width: 290px; }
    .revs .rail-track { animation-duration: 52s; }
    .fd-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .fd-copy p { margin-left: auto; margin-right: auto; }
    .foot-mid { grid-template-columns: 1fr; gap: 28px; }
    .foot-top .pillbtn { margin-left: 0; }
  }
  @media (max-width: 640px) {
    section { padding: 72px 0; }
    .hero { min-height: 0; padding-top: 120px; }
    .hero .media img { object-position: 76% 30%; }
    .hero .media::after { -webkit-mask-image: none; mask-image: none; }
    .hero .spot { display: none; }
    .hero .display h1 { font-size: clamp(3.4rem, 16vw, 4.5rem); }
    .hero .foot { position: static; margin-top: 36px; padding: 0 24px 120px; gap: 18px; }
    .tier-grid { grid-template-columns: 1fr; }
    .cardcol .feat.hl { flex-direction: column; align-items: flex-start; gap: 14px; }

    /* ---- welcome section on a phone: design 1 proportions, swipe deck for the
       four features. Four stacked cards ran 756px; as a deck they cost one card. ---- */
    .photo-col { min-height: 360px; border-radius: 20px; }
    /* without this the deck's edge-bleed margins widen the grid track and the
       whole page picks up 122px of side-scroll */
    .grid2 > * { min-width: 0; }
    /* The eyebrow wraps to two lines on a phone, which stranded the "·" separator at
       the end of line 1. Turning it into a zero-height block forces the break between
       the two phrases instead, and drops the dot. The trailing rule is hidden rather
       than left to collapse to 0 under flex-shrink. */
    #wash .eyewrap .dot { display: block; height: 0; overflow: hidden; }
    /* As a flex item the rule was squeezed to 0 once the eyebrow wrapped, and giving it a
       width back pushed it onto a line of its own. Dropping the wrapper to a block lets the
       text wrap normally and the rule trail the last word inline, the way it does on desktop. */
    #wash .eyewrap.left { display: block; gap: 0; }
    #wash .eyewrap.left > span:first-child { display: inline; }
    #wash .eyewrap.left .eyerule {
      display: inline-block; flex: none; width: 44px; margin-left: 12px;
      vertical-align: 0.34em;   /* mid cap-height of the all-caps eyebrow, not mid x-height */
    }
    #wash .eyewrap.left.on .eyerule { width: 44px; }
    /* one line, matching the desktop chip's format */
    .goal-chip .goal-tail { display: none; }

    /* The desktop fade is sized so the copy lands on 78% white, which costs the bottom
       half of the frame — on a 360px phone crop that is exactly where the attendant and
       car are. Shorten the band and feather it faster so the fade starts lower. */
    /* Phone: no caption on the photo. It runs edge to edge and its bottom dissolves
       into the section white, so it reads as one object with the copy underneath
       rather than a captioned card. The card version stays on desktop. */
    #wash .ph-cap { display: none; }
    #wash .photo-col {
      min-height: 340px;
      border-radius: 0;
      margin: 0 -32px;            /* bleed past .wrap padding to the screen edge */
    }
    /* the 340px phone crop sits the attendant low in the frame; drop the window to
       lift them clear of the fade (desktop's taller column still wants 40%) */
    #wash .photo-col img { object-position: 48% 55%; }
    /* Bottom: taller band but a much gentler ramp, so the photo stays readable well
       into the fade instead of washing out early. It still lands on solid white at the
       very bottom — anything less leaves a hard edge where the section takes over. */
    #wash .photo-col::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0;
      height: 46%; pointer-events: none;
      background: linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.22) 38%,
        rgba(255,255,255,0.58) 66%,
        rgba(255,255,255,0.88) 86%,
        #ffffff 100%);
    }
    /* Top: the photo opens on bright limestone and ceiling, so a half-strength white
       wash over it was invisible — it has to reach near-solid at the very edge to read
       as a fade at all. Still a soft ramp, just anchored properly.
       z-index lifts it above the image, which would otherwise paint over a ::before. */
    #wash .photo-col::before {
      content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1;
      height: 26%; pointer-events: none;
      background: linear-gradient(180deg,
        #ffffff 0%,
        rgba(255,255,255,0.72) 26%,
        rgba(255,255,255,0.34) 58%,
        rgba(255,255,255,0.12) 80%,
        rgba(255,255,255,0) 100%);
    }
    /* close the gap so the fade runs straight into the eyebrow */
    #wash .grid2 { gap: 14px; }

    /* Touchless is a card again on a phone, but pulled out to nearly the full width so
       it still reads as its own moment between two dense sections. */
    /* 12px gutter a side, less the 1.5px ring */
    .touchband { --tb-r: 22px; }
    .touchband .wrap { width: calc(100% - 21px); max-width: none; }
    .touchband .tb-inner { border-radius: 22px; padding: 30px 22px; }
    /* The icon rides beside the heading instead of sitting alone under the paragraph,
       where it left a wide empty stretch to its right. tb-copy goes display:contents so
       the h2 and the paragraph can be placed on the same grid as the icon. */
    .touchband .tb-inner {
      display: grid; grid-template-columns: auto 1fr;
      gap: 14px 16px; align-items: center;
    }
    .touchband .tb-copy { display: contents; }
    .touchband .tb-ico { grid-column: 1; grid-row: 1; width: 62px; height: 62px; }
    .touchband .tb-ico svg { width: 26px; height: 26px; }
    .touchband .tb-copy h2 { grid-column: 2; grid-row: 1; font-size: 1.45rem; }
    .touchband .tb-copy p { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }

    .welcome { padding-top: 64px; }
    .welcome .lede { font-size: 1rem; margin-bottom: 22px; }
    .cardcol {
      display: grid; grid-auto-flow: column; grid-template-columns: none;
      grid-auto-columns: 74%; gap: 12px;
      overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory; scroll-padding: 0 32px;
      /* A scroll container clips at its padding box, and the card glow reaches ~20px
         below each card — with only 14px of padding it was being sliced off in a hard
         straight line. Pad enough for the glow to finish, then pull the box back with
         negative margins so the visible spacing is unchanged. */
      margin: -20px -32px -16px; padding: 24px 32px 30px;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .cardcol::-webkit-scrollbar { display: none; }
    .cardcol .feat { scroll-snap-align: center; padding: 20px 18px; }
    .cardcol .feat .bubble-ico { width: 46px; height: 46px; margin-bottom: 12px; }
    .cardcol .feat h3 { font-size: 1rem; }
    .cardcol .feat p { font-size: 0.85rem; }
    /* Swipe affordance for the deck. Drawn as a pseudo-element on the goal line
       (the deck's next sibling on mobile) so the page markup embed stays untouched
       and a change here is a stylesheet-only redeploy. */
    /* Four grey dots on fixed 22px slots, with the active pill riding on top of
       whichever slot the deck script names via a d1/d2/d3 class. The pill is wider
       than the dot it covers, so the dot underneath never shows.
       The active slot is switched by a d1/d2/d3 class rather than a custom property,
       so the pseudo-element never depends on inheriting a var() through its host. */
    .welcome .goal-line::before {
      content: "";
      display: block; width: 82px; height: 5px;
      margin: 0 0 26px;
      background-repeat: no-repeat;
      background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='5'%3E%3Crect width='16' height='5' rx='2.5' fill='%233fb2ec'/%3E%3C/svg%3E"),
        radial-gradient(circle, #c3d5dd 50%, transparent 52%),
        radial-gradient(circle, #c3d5dd 50%, transparent 52%),
        radial-gradient(circle, #c3d5dd 50%, transparent 52%),
        radial-gradient(circle, #c3d5dd 50%, transparent 52%);
      background-size: 16px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px;
      background-position: 0 center, 5.5px center, 27.5px center, 49.5px center, 71.5px center;
      transition: background-position 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .welcome .goal-line.d1::before { background-position: 22px center, 5.5px center, 27.5px center, 49.5px center, 71.5px center; }
    .welcome .goal-line.d2::before { background-position: 44px center, 5.5px center, 27.5px center, 49.5px center, 71.5px center; }
    .welcome .goal-line.d3::before { background-position: 66px center, 5.5px center, 27.5px center, 49.5px center, 71.5px center; }
    @media (prefers-reduced-motion: reduce) {
      .welcome .goal-line::before,
      .revs .cta-c::after { transition: none; }
    }
    /* inline-flex made "Our goal is / 100% satisfaction / every car, every time"
       three flex items, each wrapping into its own narrow column */
    .goal-line { margin-top: 30px; }
    .goal-line .goal-chip {
      display: block; position: relative;
      font-size: 0.95rem; line-height: 1.4;
      /* symmetric padding so both text lines centre on the pill; the star is lifted
         out of the flow, otherwise it rides in line 1 and shifts it off-centre */
      padding: 13px 40px; text-wrap: balance;
    }
    /* centre with top/calc, not translateY — the twinkle keyframes own transform */
    .goal-chip .spark { position: absolute; left: 17px; top: calc(50% - 8.5px);
      width: 17px; height: 17px; margin: 0; }
    .toggle span { padding: 8px 14px; font-size: 0.82rem; }
    .revs .band { padding: 64px 0 36px; }
    /* --- eco: icon rides on the heading's line instead of its own row above it, and
       the padding tightens. Same three cards, same copy, same rising bubbles (those are
       absolutely positioned, so they sit outside the grid). --- */
    .eco { padding: 64px 0 60px; }
    .eco .win { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 22px 20px; }
    .eco .win .toprow { grid-column: 1; grid-row: 1; margin-bottom: 0; }
    .eco .win h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; align-self: center; }
    .eco .win p { grid-column: 1 / -1; grid-row: 2; margin-top: 10px; }
    .eco .head p { font-size: 1rem; }
    .eco .kicker { margin-top: 26px; }

    /* --- process strip: the four steps run down the page instead of across, with the
       dashed line threading through the numbers. One segment per gap rather than a
       single run, so the line stops at the last number instead of overshooting it. --- */
    .flow { padding-bottom: 64px; }
    .flow .steps { grid-template-columns: 1fr; gap: 26px; }
    .flow .steps::before { display: none; }
    .flow .step {
      position: relative; text-align: left; padding: 0;
      display: grid; grid-template-columns: 62px 1fr; column-gap: 16px;
    }
    .flow .step .sn { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
    .flow .step b { grid-column: 2; grid-row: 1; margin-top: 0; }
    .flow .step em { grid-column: 2; grid-row: 2; }
    .flow .step .tag { grid-column: 2; grid-row: 3; justify-self: start; }
    .flow .step:not(:last-child)::after {
      content: ""; position: absolute; left: 30px; top: 66px; bottom: -30px; width: 2px;
      background: repeating-linear-gradient(180deg, rgba(24,120,184,0.5) 0 8px, transparent 8px 16px);
      background-size: 2px 16px;
      animation: flowdash-v 1.6s linear infinite;
    }
    .locs .grid { grid-template-columns: 1fr; }
    .locs .door { height: 420px; }
    /* The copy wraps to more lines at this width, so the info block starts around 23% of
       the card instead of well below halfway — the desktop scrim is still transparent
       there and the heading and address were sitting straight on the photo. Bring the
       darkening up and deepen it so the whole block has a ground. */
    .locs .door::after {
      background: linear-gradient(180deg,
        rgba(13,39,49,0) 0%,
        rgba(13,39,49,0.22) 18%,
        rgba(8,27,36,0.55) 40%,
        rgba(8,27,36,0.82) 72%,
        rgba(8,27,36,0.88) 100%);
    }
    .locs .info { padding: 26px 24px; }
    .locs .info .meta { color: rgba(255, 255, 255, 0.82); }
    .eco .wins { grid-template-columns: 1fr; }
    .head-left { gap: 18px; }
    .foam-zone { margin-top: -30%; margin-bottom: -4%; overflow: hidden; }

    /* --- free wash: the handset mock-up is a picture of a phone shown on a phone, and
       with nothing beside it for scale it reads as a prop rather than a demo. It drops
       out on mobile and the offer stands on its own, centred. --- */
    #free .phone { display: none; }
    #free .fd-grid { gap: 0; }
    #free .eyewrap.left { justify-content: center; }
    .closer { padding: 76px 0 80px; }

    .welcome { margin-top: 0; }
    .foam-img { width: 175%; max-width: none; margin-left: -37%; }
    .hero .foot { padding-bottom: 104px; }
    .fbub:nth-of-type(even), .fpop:nth-of-type(even) { display: none; }
    .fbub, .fpop { bottom: 24px !important; }
  }

  footer { background: var(--ink-deep); color: rgba(255, 255, 255, 0.85); padding: 56px 0 26px; }

  /* ---- footer colophon: one centred stack — mark, tagline, CTA, nav, contact,
     hairline, legal line. The legal line is what the site credit appends to. ---- */
  .colo { text-align: center; }
  /* no white tile in the footer — the logo is a transparent PNG, so it sits straight
     on the dark ground at a larger size */
  .colo .logo-tile { margin: 0 auto 18px; background: none; padding: 0; border-radius: 0; }
  /* left exactly as the artwork is — no filter. The white outline around the wordmark
     carries it on the navy well enough, and lifting it read as inverted. */
  .colo .logo-tile img { height: 46px; }
  .colo-tag { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; line-height: 1.55;
    max-width: 52ch; margin: 0 auto 26px; }
  .colo .pillbtn { margin-bottom: 32px; }
  .colo-nav { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-bottom: 20px; }
  .colo-nav a { color: #d7e5ef; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
  .colo-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .colo-contact { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
    font-size: 0.86rem; margin-bottom: 26px; }
  .colo-contact a { color: #a9cfe8; text-decoration: none; }
  .colo-contact a:hover { color: #fff; }
  .colo-rule { width: 56px; height: 1px; background: rgba(255, 255, 255, 0.22); margin: 0 auto 16px; }
  .colo-legal { font-size: 0.76rem; color: #7fa0b0; line-height: 1.7; }
  /* The credit script appends a " · " separator and then the credit, both inline.
     Dropping it onto its own line here rather than editing the script keeps that script
     byte-identical to the shared template. The separator is the only other span the
     script adds to this line, so hiding non-credit spans hides exactly it. */
  .colo-legal > span:not(.vr-c) { display: none; }
  .colo-legal .vr-c { display: flex; justify-content: center; margin-top: 12px; }
  .foot-top { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .logo-tile { background: #fff; border-radius: 12px; padding: 9px 14px; display: inline-block; }
  .logo-tile img { height: 30px; width: auto; }
  .foot-nav { display: flex; gap: 26px; list-style: none; flex-wrap: wrap; }
  .foot-nav a { color: rgba(255, 255, 255, 0.88); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
  .foot-nav a:hover { color: #a9cfe8; }
  .foot-top .pillbtn { margin-left: auto; font-size: 0.9rem; padding: 10px 10px 10px 20px; }
  .foot-mid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 44px; padding: 44px 0; }
  .loc-block .lbl { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7fc4ee; margin-bottom: 8px; }
  .loc-block .tel, .loc-block .mail { color: #fff; text-decoration: none; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.4rem; }
  .loc-block p { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; margin-top: 6px; }
  .loc-block p a { color: rgba(255, 255, 255, 0.75); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); }
  .loc-block p a:hover { color: #fff; }
  .foot-bar { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.88rem; color: rgba(255, 255, 255, 0.55); }


  /* ===== site-wide type system — Figtree (hero keeps Anton) =====
     Headers 700, card titles 600, prices 800. Accents are colour, not italics.
     Archivo stays for eyebrows, body and UI. */
  .h-sec, .eco .head h2, .locs .h-main, .fd-copy h2 {
    font-family: var(--font-head); font-weight: 700; text-transform: none;
    letter-spacing: -0.02em; line-height: 1.05; color: #17333d;
  }
  .h-sec em, .eco .head h2 em, .locs .h-main em, .fd-copy h2 em {
    font-style: normal; font-weight: inherit; color: #1878b8;
  }
  .fd-copy h2 .onus { font-style: normal; }
  .feat h3, .cardcol .feat h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: #17333d; }
  .eco .win h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.16rem; }
  .locs .info h3 { font-family: var(--font-head); font-weight: 700; text-transform: none; letter-spacing: -0.015em; }
  .ph-cap strong { font-family: var(--font-head); font-weight: 700; text-transform: none; font-size: 1.16rem; letter-spacing: -0.015em; }
  .eco .kicker {
    font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; color: #17333d;
    display: flex; align-items: center; justify-content: center; gap: 18px;
  }
  .eco .kicker::before, .eco .kicker::after {
    content: ""; height: 1px; width: 62px;
    background: linear-gradient(90deg, transparent, rgba(24,120,184,0.45));
  }
  .eco .kicker::after { background: linear-gradient(90deg, rgba(24,120,184,0.45), transparent); }
  .center-head h2 { font-family: var(--font-head); font-weight: 700; text-transform: none; letter-spacing: -0.02em; line-height: 1.05; }
  .revs .band h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; }
  .tier h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.26rem; }
  .tier .price { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.02em; }
  .rcard .pull { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; }

  /* ============================================================
     SCHEDULED SITE NOTICES  —  rained-out + $15 first month
     Both states are OFF by default. The activator at the bottom of the page
     turns one on by adding .promo-on to the matching [data-promo] block and a
     promo-<slug> class to <html>, so bits elsewhere on the page can react to
     the same switch without needing their own wrapper.

     Hidden in CSS rather than JS on purpose: a notice must never flash on a
     page where it is not scheduled.
     ============================================================ */
  [data-promo] { display: none; }
  [data-promo].promo-on { display: block; }

  .notice { position: relative; z-index: 61; }
  .notice .wrap {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; min-height: 46px; padding: 10px 24px;
  }
  .notice p {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 0.93rem; line-height: 1.45; text-align: center;
  }
  .notice .n-ico { width: 20px; height: 20px; flex: none; }

  /* rained out: factual, not an alarm. Reuses the eco section's rain glyph. */
  .notice-rain { background: #0d2731; color: rgba(255, 255, 255, 0.84); }
  .notice-rain b { color: #fff; font-weight: 700; }
  .notice-rain .n-ico { fill: none; stroke: #9adcff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* $15 first month: the accent bar, carrying its own CTA */
  .notice-promo { background: linear-gradient(90deg, #3fb2ec 0%, #1878b8 100%); color: rgba(255, 255, 255, 0.92); }
  .notice-promo b { color: #fff; font-weight: 800; }
  .notice-promo .n-sep { opacity: 0.45; }
  .notice-promo .n-ico { fill: #fff; stroke: none; }
  .notice-promo .n-cta {
    display: inline-flex; align-items: center; gap: 9px; flex: none;
    background: #fff; color: #12333e; text-decoration: none;
    font-weight: 700; font-size: 0.85rem; padding: 8px 16px; border-radius: 999px;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .notice-promo .n-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5); }
  .notice-promo .n-cta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; }

  /* The flag under each monthly price. Driven by the <html> class rather than its own
     [data-promo] wrapper, because #packages.mode-single .only-monthly is ID-scoped and
     has to keep winning when the visitor flips to the single-wash tab. */
  .fm-flag { display: none; }
  html.promo-first-month-15 #packages.mode-monthly .fm-flag {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
    padding: 4px 10px; border-radius: 999px; background: #3fb2ec; color: #08222c;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap;
  }

  /* Rained-out, the approved "Glass" treatment. Root-class driven: the hero banner,
     the card overlays and the pills all hang off html.promo-rained-out, so the one
     switch drives every surface. */
  .hero-rainbar, .hero-rainbar.promo-on { display: none; }
  html.promo-rained-out .hero-rainbar.promo-on {
    display: flex; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
    z-index: 5; align-items: center; gap: 12px; max-width: calc(100% - 32px); text-align: center;
    background: rgba(8, 22, 30, 0.55); border: 1px solid rgba(154, 220, 255, 0.42);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 999px; padding: 13px 24px 13px 18px;
    color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; line-height: 1.45;
  }
  /* the headline is vertically centred; ease it down so the banner always clears it */
  html.promo-rained-out .hero { padding-top: 74px; }
  html.promo-rained-out .hero-rainbar b { color: #fff; font-weight: 700; }
  .hero-rainbar svg { width: 20px; height: 20px; flex: none;
    fill: none; stroke: #9adcff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* Location cards: the photo stays the photo. A rain plate (bright streaks on
     black) screen-blends over it, and one glass pill sits dead centre. The plate
     carries data-src, not src, so a normal visit never fetches the video. */
  .locs .door-rainov { display: none; }
  html.promo-rained-out .locs .door-rainov {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; mix-blend-mode: screen; opacity: 0.65; pointer-events: none;
  }
  html.promo-rained-out .locs .door > img { filter: saturate(0.88) brightness(0.9); }
  html.promo-rained-out .locs .door:hover img { transform: none; }

  .locs .door-pill { display: none; }
  html.promo-rained-out .locs .door-pill {
    position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center;
    padding-top: 22px; z-index: 2; pointer-events: none;
  }
  .locs .door-pill > span {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(8, 22, 30, 0.6); border: 1px solid rgba(154, 220, 255, 0.45);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 999px; padding: 12px 22px 12px 17px;
    color: #fff; font-weight: 700; font-size: 0.98rem;
  }
  .locs .door-pill svg { width: 18px; height: 18px; flex: none;
    fill: none; stroke: #9adcff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* Entry choreography: the closure is the newest fact on the page, so it is the
     one thing that moves on load. Banner settles first, pills surface after. */
  @keyframes rv-drop { from { opacity: 0; transform: translate(-50%, -14px); }
                       to   { opacity: 1; transform: translate(-50%, 0); } }
  @keyframes rv-rise { from { opacity: 0; transform: translateY(10px) scale(0.97); }
                       to   { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes rv-fade { from { opacity: 0; } }
  @media (prefers-reduced-motion: no-preference) {
    html.promo-rained-out .hero-rainbar.promo-on { animation: rv-drop 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards; }
    html.promo-rained-out .locs .door-pill > span { animation: rv-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s backwards; }
    html.promo-rained-out .locs .door-rainov { animation: rv-fade 1.6s ease 0.1s backwards; }
  }

  @media (max-width: 640px) {
    html.promo-rained-out .hero-rainbar.promo-on {
      top: 16px; font-size: 0.85rem; padding: 10px 16px 10px 13px;
      justify-content: center; width: calc(100% - 28px);
    }
    html.promo-rained-out .hero { padding-top: 92px; }
    .locs .door-pill > span { font-size: 0.88rem; padding: 10px 18px 10px 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    /* the pill on the still photo carries the message without the motion */
    html.promo-rained-out .locs .door-rainov { display: none; }
  }

  /* Only ever injected on a URL-forced preview. Deliberately ugly and unbranded:
     it must read as scaffolding, not as part of the site. */
  .promo-preview-flag {
    position: fixed; left: 0; bottom: 0; z-index: 200; pointer-events: none;
    background: #b3261e; color: #fff; border-radius: 0 8px 0 0;
    font-family: "Archivo", sans-serif; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 15px;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
  }

  @media (max-width: 640px) {
    .notice .wrap { flex-direction: column; gap: 10px; padding: 12px 22px; }
    .notice p { font-size: 0.85rem; align-items: flex-start; }
    .notice .n-ico { width: 18px; height: 18px; position: relative; top: 2px; }
    .notice-promo .n-cta { font-size: 0.8rem; padding: 7px 14px; }
    /* the qualifier is the first thing to go when the bar gets tight */
    .notice-promo .n-fine { display: none; }
    html.promo-first-month-15 #packages.mode-monthly .fm-flag { margin-top: 6px; font-size: 0.68rem; padding: 3px 8px; }
  }

  /* ============================================================
     MOBILE LAYER  (<= 640px)
     Appended last on purpose: several desktop rules are ID-scoped
     (#packages.mode-monthly .tier-grid) and beat plain-class
     overrides on specificity no matter where they sit.
     ============================================================ */
  @media (max-width: 640px) {

    /* --- pricing: stacked plans, list on tap ----------------------
       The deck kept the section short but put three of the four plans
       behind a swipe, and pricing is the one place people want to
       compare. Stacking makes every plan reachable by thumb; the check
       list folds behind a toggle so the cards stay short. --- */
    #packages .tier-grid,
    #packages.mode-monthly .tier-grid,
    #packages.mode-single .tier-grid {
      display: flex;
      flex-direction: column;
      grid-template-columns: none;
      gap: 12px;
      overflow: visible;
      margin: 0;
      padding: 0;
    }
    #packages .tier { height: auto; padding: 20px 18px; }
    #packages .tier-top {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    }
    #packages .tier-top h3 { font-size: 1.12rem; margin-bottom: 0; }
    #packages .tier-cost { text-align: right; flex: none; }
    #packages .tier .price { font-size: 2.1rem; }
    #packages .tier .per { margin-top: 4px; font-size: 0.78rem; }
    /* Ribbon hangs off the right edge as it does on desktop. It was made static here
       because, absolute, it landed straight on the price — so the card gains top padding
       to give it a clear band above the name/price row instead. */
    #packages .ribbon {
      position: absolute; top: 14px; right: -8px;
      border-radius: 6px 0 0 6px; margin-bottom: 0;
    }
    #packages .tier.hl { padding-top: 46px; }
    /* The Purewash hides its ribbon in monthly mode, so it needs no extra room */
    #packages.mode-monthly .tier.pop { padding-top: 20px; }
    #packages .tier .gist {
      display: block; margin-top: 10px;
      font-size: 0.85rem; line-height: 1.45; color: rgba(255, 255, 255, 0.72);
    }
    /* A checkbox rather than <details>: the open state is then pure CSS, so the
       desktop layout needs no forced-open override and no script. */
    #packages .incl-t { position: absolute; opacity: 0; width: 1px; height: 1px; }
    #packages .incl-l {
      display: flex; align-items: center; gap: 7px;
      min-height: 44px; margin-top: 4px; cursor: pointer;
      font-size: 0.8rem; font-weight: 700; color: #7fc4ee;
    }
    #packages .incl-l::after {
      content: ""; width: 7px; height: 7px; margin-top: -4px;
      border-right: 1.8px solid #7fc4ee; border-bottom: 1.8px solid #7fc4ee;
      transform: rotate(45deg);
    }
    #packages .incl-t:checked ~ .incl-l::after { transform: rotate(-135deg); margin-top: 2px; }
    #packages .incl-t:focus-visible ~ .incl-l { outline: 2px solid #7fc4ee; outline-offset: 3px; }
    #packages .tier .lad { display: none; }
    #packages .incl-t:not(:checked) ~ .checks { display: none; }
    #packages .tier .checks { margin: 4px 0 0; }
    /* 16px of vertical padding per row over nine rows is most of this card */
    #packages .tier .checks li { font-size: 0.86rem; padding: 6px 0; gap: 10px; }
    #packages .tier .pillbtn { margin-top: 16px; }
    /* Simple Shine is single-wash only. Desktop dims it to 0.62 and restores that on
       hover, which a phone never fires — so on mobile it just drops out of the monthly
       list entirely and comes back when the toggle is switched to Single wash. */
    #packages.mode-monthly .tier.no-monthly { display: none; }

    /* --- reviews: swipe deck instead of the marquee -------------------
       The marquee only pauses on :hover, which a phone never fires, so a
       quote can slide away mid-sentence with no way to stop it. Same six
       cards, but the visitor drives the scroll. --- */
    .revs .rail {
      overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory; scroll-padding: 0 24px;
      -webkit-mask-image: none; mask-image: none;
      padding: 14px 24px 18px; scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .revs .rail::-webkit-scrollbar { display: none; }
    .revs .rail-track { animation: none; gap: 12px; }
    /* the duplicate set existed only so the marquee could loop seamlessly */
    .revs .rail-track .rcard[aria-hidden="true"] { display: none; }
    .revs .rail-track .rcard { width: min(320px, 82vw); scroll-snap-align: center; }

    /* Six-slot indicator under the deck. Grey dots are one pseudo-element and the
       active pill is the other, so only a transform changes between states. */
    .revs .cta-c { position: relative; padding-top: 32px; }
    .revs .cta-c::before,
    .revs .cta-c::after { content: ""; position: absolute; top: 8px; height: 5px; }
    .revs .cta-c::before {
      left: 50%; transform: translateX(-50%); width: 126px;
      background-repeat: no-repeat;
      background-image:
        radial-gradient(circle, rgba(255,255,255,0.3) 50%, transparent 52%),
        radial-gradient(circle, rgba(255,255,255,0.3) 50%, transparent 52%),
        radial-gradient(circle, rgba(255,255,255,0.3) 50%, transparent 52%),
        radial-gradient(circle, rgba(255,255,255,0.3) 50%, transparent 52%),
        radial-gradient(circle, rgba(255,255,255,0.3) 50%, transparent 52%),
        radial-gradient(circle, rgba(255,255,255,0.3) 50%, transparent 52%);
      background-size: 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px;
      background-position: 5.5px center, 27.5px center, 49.5px center,
        71.5px center, 93.5px center, 115.5px center;
    }
    .revs .cta-c::after {
      left: calc(50% - 63px); width: 16px; border-radius: 3px; background: #3fb2ec;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .revs .cta-c.d1::after { transform: translateX(22px); }
    .revs .cta-c.d2::after { transform: translateX(44px); }
    .revs .cta-c.d3::after { transform: translateX(66px); }
    .revs .cta-c.d4::after { transform: translateX(88px); }
    .revs .cta-c.d5::after { transform: translateX(110px); }

    /* tooltips: 260px is too wide beside a 327px card */
    .jt::after { width: min(232px, 62vw); }
    .tier:last-child .jt::after { left: 50%; right: auto; transform: translate(-50%, -4px); }
    .tier:last-child .jt:hover::after,
    .tier:last-child .jt:focus::after,
    .tier:last-child .jt:focus-visible::after { transform: translate(-50%, 0); }

    /* footer colophon on a phone: the rows stack rather than wrap awkwardly */
    .colo-nav { gap: 14px 20px; }
    .colo-contact { flex-direction: column; gap: 10px; margin-bottom: 24px; }
    .colo-tag { font-size: 0.88rem; }
    .colo .pillbtn { margin-bottom: 28px; }

    /* footer: the 3-col rule lives later in the sheet than the old
       960px override, so it never collapsed */
    footer .foot-mid { grid-template-columns: 1fr; gap: 26px; }
    footer .foot-top { flex-direction: column; align-items: flex-start; gap: 18px; }
    footer .foot-bar { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* 17px-tall footer links are unhittable on a phone */
    footer .foot-nav { gap: 2px; }
    footer .foot-nav a { display: block; padding: 11px 0; }
    /* the pricing toggle is the key control in this section */
    #packages .toggle span { min-height: 44px; display: inline-flex; align-items: center; }

    /* tapping to call is a primary action on a phone; 24px is not hittable */
    footer .loc-block .tel,
    footer .loc-block .mail { display: inline-block; padding: 10px 0; }
    footer .loc-block p a { display: inline-block; padding: 9px 0; }
    .pillbtn { min-height: 44px; }
  }

  /* --- touch input: hover tooltips need a tap target -------------
     Width is included alongside (hover:none) so touch laptops and
     narrow windows get the same target, and so it is testable. --- */
  @media (hover: none), (max-width: 640px) {
    /* 14px glyph is far below the 44px minimum. Pad the hit area
       without moving the icon itself. */
    .jt { padding: 15px; margin: -15px -15px -15px -10px; }
  }


  /* ============================================================
     MOBILE HERO — "the sign is the logo"
     The photo runs as a short portrait of the building sign, then dissolves into a
     panel painted the colour of the siding, so photo and panel read as one wall and
     every word sits on flat colour. No scrim, no text shadow needed.
     ============================================================ */
  @media (max-width: 640px) {
    .hero {
      min-height: 0;
      padding: 328px 0 26px;          /* the photo occupies the top 328px */
      background: #20242a;            /* sampled from the building siding */
      justify-content: flex-start;
    }
    /* the <img> is the desktop tower shot; on a phone the sign photo is the background */
    .hero .media { inset: 0 0 auto 0; height: 328px; container-type: normal;
      background: url(https://cdn.prod.website-files.com/6a7bdbb79e9a0602e019a388/6a7cae67df6db16f6694e923_sign-hdr.jpg) 26% 46% / cover no-repeat; }
    .hero .media img { display: none; }
    /* dissolve the foot of the photo into the panel so the seam disappears */
    .hero .media::after {
      content: ""; position: absolute; inset: 0; z-index: 1; -webkit-mask-image: none; mask-image: none;
      background: linear-gradient(180deg, rgba(32,36,42,0) 52%, #20242a 97%);
    }
    .hero .bubs { display: none; }    /* nothing floats over this composition */

    .hero .display { padding: 0 20px; }
    /* The two locations are already at the tail of the tagline, but they read as an
       afterthought there. On a phone the first question is "is this near me", so they
       get their own label above the headline. */
    .hero .display:not(.sub-block)::before {
      content: "Steiner Ranch · Lakeway";
      display: block; margin-bottom: 10px;
      font-family: "Archivo", sans-serif; font-weight: 700; font-size: 0.7rem;
      letter-spacing: 0.2em; text-transform: uppercase; color: #7fcdf2;
    }
    .hero .display h1 { font-size: clamp(2.7rem, 12.6vw, 3.3rem); }
    .hero .display.sub-block { padding: 0 20px; }
    .hero .tagline { margin-top: 14px; font-size: 1rem; color: rgba(255,255,255,0.82); text-shadow: none; }

    /* Markup order is tagline, buttons, rating. On a phone the proof should land
       before the ask, so the block is flexed and the rating is ordered above. */
    .hero .display.sub-block { display: flex; flex-direction: column; align-items: flex-start; }
    .hero .display.sub-block .tagline    { order: 1; }
    .hero .display.sub-block .hero-rating { order: 2; }
    .hero .display.sub-block .cta-row     { order: 3; }
    .hero-rating {
      margin-top: 18px; gap: 6px; padding: 9px 13px; border-radius: 999px;
      background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22);
      text-shadow: none; font-size: 0.78rem; white-space: nowrap;
    }
    .hero-rating b { font-size: 0.94rem; }
    .hero-rating .st { font-size: 0.76rem; letter-spacing: 0.5px; }
    .hero-rating em { font-size: 0.78rem; }
    .hero .cta-row { flex-direction: column; gap: 10px; margin-top: 18px; width: 100%; }
    .hero .cta-row .pillbtn { width: 100%; justify-content: center; min-height: 52px; }
    .hero .cta-row .pillbtn.ghost-dark {
      background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.32);
      -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .foam-zone { margin-top: -13%; }
  }

  /* --- mobile menu ---------------------------------------------
     Below 960px the nav links were display:none with nothing in
     their place, so Packages / The Wash / Locations / Reviews were
     unreachable on a phone. --- */
  .navtoggle { display: none; }
  @media (max-width: 960px) {
    .navtoggle {
      display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
      width: 42px; height: 42px; padding: 0 10px; margin-left: -6px;
      background: none; border: 0; cursor: pointer; border-radius: 12px;
      -webkit-tap-highlight-color: transparent;
    }
    .navtoggle span {
      display: block; height: 2px; width: 22px; border-radius: 2px;
      background: var(--ink); transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
    }
    .navtoggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
    .navtoggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }
    .nav .right .pillbtn { white-space: nowrap; }
    /* Restoring the logo to its true 48px width pushed this button 11px past the pill's
       right edge. The arrow and its divider are decoration, so they come off first. */
    .nav .right .pillbtn .sep,
    .nav .right .pillbtn svg { display: none; }
    .nav .right .pillbtn { gap: 0; padding: 12px 16px; }
  }
  /* 360px-wide phones are still 1px over after that; take it out of the type and padding */
  @media (max-width: 380px) {
    .nav .right .pillbtn { font-size: 0.78rem; padding: 12px 13px; }
  }
  /* Below ~340px there is genuinely no room for burger + logo + a 24-character button.
     The nav CTA steps aside rather than overflowing; the same action sits in the menu
     and again in the hero a short scroll below. */
  @media (max-width: 340px) {
    .nav .right .pillbtn { display: none; }
    .nav .right { margin-left: auto; }
    /* the nowrap chip and the goal pill are the last two things wider than the screen */
    .hero-rating { white-space: normal; }
    .goal-line .goal-chip { max-width: 100%; }
  }

  /* The menu panel belongs to every phone width, not just the narrowest. It was
     swept into the 340px block when the narrow-phone rules were added, so below
     961px it rendered as a plain static list of links under the nav. */
  @media (max-width: 960px) {
    .mobilemenu {
      position: absolute; left: 12px; right: 12px; top: calc(100% + 8px);
      background: rgba(255,255,255,0.97);
      -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
      border: 1px solid var(--hairline); border-radius: 20px;
      box-shadow: 0 24px 60px -18px rgba(6,22,30,0.42);
      padding: 10px; display: flex; flex-direction: column;
      opacity: 0; visibility: hidden; transform: translateY(-8px);
      transition: opacity .22s ease, transform .28s cubic-bezier(.2,.7,.3,1), visibility .22s;
    }
    .mobilemenu.open { opacity: 1; visibility: visible; transform: none; }
    .mobilemenu a {
      display: block; padding: 14px 16px; border-radius: 13px;
      font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
      color: var(--ink); text-decoration: none;
    }
    .mobilemenu a + a { border-top: 1px solid rgba(18,51,62,0.07); }
    .mobilemenu a:active { background: var(--tint-sea); }
    .mobilemenu .mm-member {
      margin-top: 6px; border-top: 0; color: #1878b8;
    }
  }
  @media (min-width: 961px) { .mobilemenu { display: none; } }
  @media (prefers-reduced-motion: reduce) {
    .navtoggle span, .mobilemenu { transition: none; }
  }


  /* ==================== interior pages (location + membership) ==================== */

/* Webflow-reset parity with the live head embed */

/* ============ interior-page layer (shared by the three subpages) ============ */
body.pg-sub { background: #f4f8fa; }
.sub-hero { padding: 130px 0 56px; }
.sub-hero .grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 44px; align-items: center; }
.sub-hero h1 {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.04; color: #17333d; font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  margin: 10px 0 18px; text-wrap: balance;
}
.sub-hero h1 em { font-style: normal; color: #1878b8; }
.sub-hero .lede { font-size: 1.06rem; line-height: 1.65; color: #47616b; max-width: 54ch; margin-bottom: 26px; }
.sub-hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.sub-hero .rating { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  color: #47616b; font-size: 0.92rem; }
.sub-hero .rating b { font-family: var(--font-head); font-weight: 800; font-size: 1.06rem; color: #17333d; }
.sub-hero .rating .st { color: #d99a2b; letter-spacing: 1px; font-size: 0.86rem; }
.sub-hero .gmark { width: 17px; height: 17px; flex: none; }

/* the facts card: the pitch's checklist (address, hours, phone, status) as one object */
.facts {
  background: linear-gradient(170deg, #16414f 0%, #0d2731 100%);
  border-radius: var(--r-card); padding: 30px 30px 28px; color: #fff;
  box-shadow: 0 24px 70px -30px rgba(13, 39, 49, 0.55);
}
.facts h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.015em; margin-bottom: 18px; color: #fff; }
.facts dl { display: flex; flex-direction: column; gap: 0; }
.facts .frow { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.95rem; }
.facts .frow dt { color: rgba(255,255,255,0.55); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding-top: 2px; }
.facts .frow dd { color: rgba(255,255,255,0.92); line-height: 1.5; }
.facts .frow dd a { color: #9adcff; text-decoration: none; font-weight: 600; }
.facts .statuspill { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 20px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px; padding: 7px 14px; font-size: 0.84rem; color: #fff; }
.facts .statuspill i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: none; }
.facts .statuspill.shut i { background: rgba(255,255,255,0.6); }
.facts .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.facts .tel { color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; text-decoration: none; }

/* photo band */
.photo-band { padding: 26px 0 0; }
.photo-band .ph { border-radius: var(--r-big); overflow: hidden; height: 460px; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* map + directions */
.mapsec { padding: 84px 0; }
.mapsec .grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: stretch; }
.mapsec .mapframe { border-radius: var(--r-card); overflow: hidden; min-height: 400px;
  box-shadow: 0 18px 50px -26px rgba(13,39,49,0.4); background: #dfe9ee; }
.mapsec iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; }
.mapsec h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem;
  letter-spacing: -0.02em; color: #17333d; margin-bottom: 14px; }
.mapsec p { color: #47616b; line-height: 1.65; margin-bottom: 14px; max-width: 46ch; }
.mapsec .pillbtn { margin-top: 10px; }

/* what's included: reuse .feat look via a light grid */
.included { padding: 0 0 84px; }
.included h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem;
  letter-spacing: -0.02em; color: #17333d; margin-bottom: 10px; }
.included .sub { color: #47616b; margin-bottom: 30px; max-width: 60ch; }
.igrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.icard { background: #fff; border: 1px solid rgba(18,51,62,0.08); border-radius: var(--r-card);
  padding: 24px 22px; }
.icard h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; color: #17333d; margin: 14px 0 7px; }
.icard p { font-size: 0.9rem; line-height: 1.55; color: #5a707a; }
.icard .bubble-ico { position: static; }

/* membership band (ink) */
.mband { background: var(--ink-deep, #0d2731); color: #fff; padding: 74px 0; }
.mband .grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.mband h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.02em; color: #fff; }
.mband h2 b { color: #3fb2ec; font-weight: 800; }
.mband p { color: rgba(255,255,255,0.75); margin-top: 10px; max-width: 52ch; line-height: 1.6; }

/* review cards on light ground */
.quotes { padding: 84px 0; }
.quotes h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem;
  letter-spacing: -0.02em; color: #17333d; margin-bottom: 8px; }
.quotes .sub { color: #47616b; margin-bottom: 30px; }
.qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qcard { background: #fff; border: 1px solid rgba(18,51,62,0.08); border-radius: var(--r-card);
  padding: 26px 24px; display: flex; flex-direction: column; }
.qcard .pull { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: #17333d; margin-bottom: 6px; }
.qcard .st { color: #d99a2b; letter-spacing: 2px; font-size: 0.82rem; margin-bottom: 12px; }
.qcard blockquote { font-size: 0.93rem; line-height: 1.6; color: #5a707a; flex: 1; }
.qcard .who { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.qcard .av { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex: none; }
.qcard .who strong { display: block; font-size: 0.9rem; color: #17333d; }
.qcard .who span { font-size: 0.8rem; color: #7e939c; }
.qcard .gmark { width: 18px; height: 18px; margin-bottom: 12px; }

/* cross-link door reuses .locs styles inside a single column */
.xlink { padding: 0 0 90px; }
.xlink .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.xlink h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem;
  letter-spacing: -0.02em; color: #17333d; margin-bottom: 26px; }
.xcard { border-radius: var(--r-card); background: linear-gradient(170deg, #16414f 0%, #0d2731 100%);
  color: #fff; padding: 34px 32px; display: flex; flex-direction: column; align-items: flex-start; }
.xcard h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; margin-bottom: 8px; color: #fff; }
.xcard p { color: rgba(255,255,255,0.75); line-height: 1.6; margin-bottom: 22px; }
.xcard .pillbtn { margin-top: auto; }
.xphoto { border-radius: var(--r-card); overflow: hidden; position: relative; min-height: 300px; display: block; }
.xphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xphoto .lbl { position: absolute; left: 24px; bottom: 22px; z-index: 2; color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; }
.xphoto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,39,49,0) 40%, rgba(8,27,36,0.75) 100%); }

@media (max-width: 960px) {
  .sub-hero { padding-top: 112px; }
  .sub-hero .grid, .mapsec .grid, .mband .grid, .xlink .grid { grid-template-columns: 1fr; }
  .igrid { grid-template-columns: repeat(2, 1fr); }
  .qgrid { grid-template-columns: 1fr; }
  .photo-band .ph { height: 320px; }
}
@media (max-width: 560px) {
  .igrid { grid-template-columns: 1fr; }
  .facts { padding: 24px 22px; }
}


/* light-ground ghost button: the shared sheet only ships ghost-dark */
.pillbtn.ghost { background: none; color: #17333d; border: 1.5px solid rgba(18,51,62,0.3); }
.pillbtn.ghost svg { stroke: #17333d; }
.pillbtn.ghost .sep { background: rgba(18,51,62,0.25); }
.pillbtn.ghost:hover { border-color: #17333d; }

  /* ---- membership page layer ---- */

/* membership page: quotes sit after the rules grid, no extra top padding */
body.pg-mem .quotes { padding-top: 0; }



/* membership page layer */
.m-hero { padding: 130px 0 70px; background: linear-gradient(180deg, #eaf3f8 0%, #f4f8fa 100%); }
.m-hero .grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.m-hero h1 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.04; color: #17333d; font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: 18px; text-wrap: balance; }
.m-hero h1 em { font-style: normal; color: #1878b8; }
.m-hero .lede { font-size: 1.06rem; line-height: 1.65; color: #47616b; max-width: 52ch; margin-bottom: 26px; }
.m-hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.m-hero .rating { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; color: #47616b; font-size: 0.92rem; }
.m-hero .rating b { font-family: var(--font-head); font-weight: 800; font-size: 1.06rem; color: #17333d; }
.m-hero .rating .st { color: #d99a2b; letter-spacing: 1px; font-size: 0.86rem; }
.m-hero .gmark { width: 17px; height: 17px; flex: none; }

/* the hero's proof object: what a month of weekly washes costs, both ways */
.mathcard { background: linear-gradient(170deg, #16414f 0%, #0d2731 100%);
  border-radius: var(--r-card); padding: 30px; color: #fff;
  box-shadow: 0 24px 70px -30px rgba(13,39,49,0.55); }
.mathcard h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; margin-bottom: 20px; color: #fff; }
.mathcard .mrow { display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.mathcard .mrow span { color: rgba(255,255,255,0.75); font-size: 0.94rem; }
.mathcard .mrow b { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: #fff; }
.mathcard .mrow.win b { color: #3fb2ec; }
.mathcard .note { margin-top: 16px; font-size: 0.84rem; color: rgba(255,255,255,0.6); line-height: 1.55; }

body.pg-mem #packages { padding: 84px 0; }
/* this page is monthly-only: the single-wash-only tier is homepage context, not a plan */
body.pg-mem #packages .tier.no-monthly { display: none; }
body.pg-mem #packages.mode-monthly .tier-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { body.pg-mem #packages.mode-monthly .tier-grid { grid-template-columns: 1fr; } }
body.pg-mem #packages .center-head h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; }
body.pg-mem #packages .center-head p { margin-bottom: 34px; }

.rules-sec { padding: 0 0 84px; }
.rules-sec h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem;
  letter-spacing: -0.02em; color: #17333d; margin-bottom: 24px; }
.rulegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rulecard { background: #fff; border: 1px solid rgba(18,51,62,0.08); border-radius: var(--r-card); padding: 22px 24px; }
.rulecard h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: #17333d; margin-bottom: 6px; }
.rulecard p { font-size: 0.92rem; line-height: 1.6; color: #5a707a; }



.locband { background: var(--ink-deep, #0d2731); color: #fff; padding: 74px 0; }
.locband h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.02em; margin-bottom: 8px; color: #fff; }
.locband > .wrap > p { color: rgba(255,255,255,0.75); margin-bottom: 30px; }
.locband .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.locband .lcard { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-card); padding: 26px 28px; }
.locband .lcard h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; margin-bottom: 8px; color: #fff; }
.locband .lcard p { color: rgba(255,255,255,0.72); font-size: 0.94rem; line-height: 1.6; margin-bottom: 18px; }
.locband .lcard a.go { color: #9adcff; text-decoration: none; font-weight: 600; font-size: 0.94rem; }



@media (max-width: 960px) {
  .m-hero { padding-top: 112px; }
  .m-hero .grid, .locband .grid { grid-template-columns: 1fr; }
  .rulegrid { grid-template-columns: 1fr; }
  .qgrid { grid-template-columns: 1fr; }
}