/* ══════════════════════════════════════════════════════════
   Cardiff Car Wash — design system
   Palette sampled from the ABC sign proof (2718_PS-SI-S).
   Display: Anton, skewed -8deg. Body: Archivo.
   ══════════════════════════════════════════════════════════ */

:root{
  --sun:#FAC021;
  --sun-deep:#EE920B;
  --burnt:#BB510B;
  --sky:#57A0D7;
  --deep:#08699E;
  --navy:#092145;
  --navy-soft:#123156;
  --tan:#E7A557;
  --foam:#F1F8FC;
  --line:#E3EDF5;
  --white:#fff;
  --ink:#12233B;
  --ink-soft:#5C6C82;

  --display:"Anton",Impact,sans-serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --gutter:clamp(1.15rem, 4vw, 5rem);
  --skew:-8deg;

  --t-hero:clamp(2.4rem, 1rem + 5.5vw, 5.6rem);
  --t-h2:clamp(2rem, 1.1rem + 3vw, 4rem);
  --t-h3:clamp(1.05rem, .95rem + .5vw, 1.35rem);
  --t-micro:.7rem;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
/* skewX() pushes skewed headings a few px past the viewport edge.
   `clip` (not `hidden`) kills the sideways scroll without breaking position:sticky on .nav */
html,body{overflow-x:clip}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
/* NB: anything that also carries .wrap must use padding-block, never the
   `padding` shorthand — the shorthand zeroes padding-inline and kills the gutter. */
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ─────────────────────────────────────────── */
.slant{font-family:var(--display);font-weight:400;text-transform:uppercase;
  transform:skewX(var(--skew));letter-spacing:.005em;line-height:.92;margin:0}
.eyebrow{font-family:var(--display);text-transform:uppercase;transform:skewX(var(--skew));
  font-size:clamp(.95rem,.85rem + .45vw,1.35rem);color:var(--sky);letter-spacing:.02em;margin:0 0 .5rem}
.eyebrow--sun{color:var(--sun)}
.eyebrow--burnt{color:var(--burnt)}
.pop{color:var(--sun)}
.pop--deep{color:var(--deep)}

/* ── buttons ──────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);
  text-transform:uppercase;font-size:.95rem;letter-spacing:.02em;padding:.85rem 1.5rem;
  border-radius:999px;border:2px solid transparent;cursor:pointer;transform:skewX(var(--skew));
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.btn > *{transform:skewX(calc(-1 * var(--skew)))}
.btn--sun{background:var(--sun);color:var(--navy);box-shadow:0 6px 0 var(--sun-deep)}
.btn--sun:hover{transform:skewX(var(--skew)) translateY(-2px);box-shadow:0 8px 0 var(--sun-deep)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 6px 0 #04122a}
.btn--navy:hover{transform:skewX(var(--skew)) translateY(-2px)}
.btn--sm{font-size:.8rem;padding:.6rem 1.1rem}

/* ── chrome: utility bar + nav ────────────────────── */
/* Utility bar. Was plain text separated by pipes — the dated part. Now the
   right-hand side is a row of chips, and Call + Directions live here so they are
   on every page rather than only in the mobile sticky bar. */
.util{background:var(--navy);color:rgba(255,255,255,.82);font-size:.78rem}
.util__in{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;justify-content:space-between;align-items:center;padding-block:.45rem}
.util a{font-weight:600}
.util__meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.util__rating{display:inline-flex;align-items:center;gap:.35rem;color:rgba(255,255,255,.82);
  padding:.28rem .6rem;border-radius:999px;transition:background .2s var(--ease)}
.util__rating b{color:var(--sun);font-weight:700}
.util__rating:hover{background:rgba(255,255,255,.1)}
.util__addr{color:rgba(255,255,255,.6);font-weight:500}
.util__addr:hover{color:#fff}
/* Call + Directions chips */
.util__act{display:inline-flex;align-items:center;gap:.38rem;padding:.3rem .75rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.3);color:#fff;letter-spacing:.02em;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.util__act:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);color:#fff}
.util__act svg{flex:none;opacity:.85}
.util__act--sun{background:var(--sun);border-color:var(--sun);color:var(--navy)}
.util__act--sun:hover{background:#ffce4a;border-color:#ffce4a;color:var(--navy)}
@media(max-width:900px){.util__addr{display:none}}
/* below 820 the sticky cta-bar already carries Call + Directions — don't show
   them twice */
@media(max-width:820px){.util__act{display:none}}

/* Flat + a hairline instead of the old blue gradient; the gradient plus
   underline-on-hover links was the "2010s hyperlink bar" look. */
.nav{background:var(--deep);position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 4px 24px rgba(9,33,69,.22)}
.nav__in{display:flex;align-items:center;gap:1.5rem;padding-block:.55rem}
.nav__logo{flex:none;width:74px}
.nav__links{display:flex;gap:.2rem;margin-left:auto;list-style:none;padding:0}
/* Pill links, matching the button language (both are border-radius:999px) —
   the hover is a filled chip rather than an underline. */
.nav__links a{position:relative;display:block;color:rgba(255,255,255,.88);font-weight:700;
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;padding:.55rem .85rem;
  border-radius:999px;transition:background .2s var(--ease),color .2s var(--ease)}
.nav__links a:hover{background:rgba(255,255,255,.13);color:#fff}
.nav__links a[aria-current]{background:rgba(255,255,255,.1);color:#fff}
/* the current page keeps a sun marker so state is not carried by colour alone */
.nav__links a[aria-current]::after{content:"";position:absolute;left:50%;bottom:.3rem;
  width:14px;height:3px;border-radius:999px;background:var(--sun);transform:translateX(-50%)}
.nav__cta{display:flex;gap:.6rem;flex:none}
@media(max-width:1000px){.nav__links{display:none}}
@media(max-width:520px){.nav__cta .btn--ghost{display:none}}


/* Purchase receipt on the thank-you pages — populated from the Stripe return
   params, hidden until JS fills it so it never flashes an empty chip. */
.receipt{display:inline-block;margin:1.1rem 0 0;padding:.5rem .95rem;border-radius:.7rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;
  font-size:.85rem;color:#fff}
.receipt[hidden]{display:none}

/* ── hero ─────────────────────────────────────────── */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
picture{display:contents}
.hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:55% 50%}
/* video sits above the still image (both z-index:-2, later in DOM wins) */
.hero__bg--video{z-index:-2}
@media (max-width:700px){.hero__bg--video{display:none}}
@media (prefers-reduced-motion:reduce){.hero__bg--video{display:none}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,33,69,.94) 0%,rgba(9,33,69,.86) 42%,rgba(8,105,158,.55) 100%)}
.hero__in{padding-block:clamp(2.5rem,7vh,5.5rem) clamp(6rem,14vh,10rem)}
.hero h1{font-size:var(--t-hero);text-shadow:0 6px 0 rgba(0,0,0,.22);white-space:nowrap}
/* Long DYNAMIC titles (blog posts) must wrap at every width — nowrap clipped
   them at the viewport edge on desktop/tablet with no ellipsis. */
.hero h1.hero-h1--wrap{white-space:normal;max-width:22ch}
@media(max-width:520px){.hero h1{white-space:normal}}
.hero__sub{margin:1.6rem 0 0;max-width:46ch;color:rgba(255,255,255,.86);font-size:clamp(1rem,.95rem + .35vw,1.18rem)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

/* ── the dog surfs the page's own wave dividers ──────
   He is never pasted over a photograph. He sits on the crest of the wave that
   separates two sections, so his wave and the page's wave are the same wave. */
.surf{position:relative;line-height:0}
/* wave sits ABOVE the dog so the crest cuts across his board — he's in the water, not on it */
.surf .wave{position:relative;z-index:2}
.surf__dog{
  position:absolute;z-index:1;
  right:clamp(1rem,7vw,7rem);
  bottom:16%;
  width:clamp(110px,14vw,210px);
  filter:drop-shadow(0 10px 14px rgba(9,33,69,.35));
  animation:bob 5.5s ease-in-out infinite;
  transform-origin:50% 90%;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-1.6deg)}}
@media(max-width:560px){.surf__dog{width:84px;bottom:2%}}
.hero__stats{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;margin-top:2.6rem;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700}

/* suds — screen-blended so they read as soap, not ball bearings */
.sud{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;mix-blend-mode:screen;
  background:
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.9) 0 6%,rgba(255,255,255,.28) 22%,rgba(255,255,255,0) 55%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 62%,rgba(180,225,255,.34) 88%,rgba(255,255,255,0) 100%);
  animation:rise linear infinite}
@keyframes rise{from{transform:translateY(20px) scale(.9);opacity:0}
  15%{opacity:.7} 85%{opacity:.45} to{transform:translateY(-130px) scale(1.06);opacity:0}}

/* ── wave dividers ────────────────────────────────── */
.wave{display:block;width:100%;height:auto;margin-bottom:-1px}
/* A divider wave is transparent above its curve. The wrapper carries the colour
   of the section ABOVE it (set inline by wave()/surfWave()), so the gap shows
   that section and the wave sits flush.
   Do NOT reintroduce a negative margin here: pulling the wave up over the
   previous section clips that section's content whenever its bottom padding is
   less than the wave's rendered height (7.64vw) — that is what was cutting the
   bottom off the wash cards. */
.wave-wrap{line-height:0}

/* ── the difference diagram ───────────────────────── */
.diff{background:linear-gradient(180deg,var(--foam),#fff);padding:0 0 clamp(3rem,7vh,6rem)}
.diff--pad{padding-top:clamp(2.75rem,7vh,4.5rem)}
.diff__head{text-align:center;max-width:56ch;margin:0 auto clamp(2rem,5vh,3.5rem)}
.diff__head h2{font-size:var(--t-h2);color:var(--navy)}
.diff__head p{color:var(--ink-soft);margin:1.1rem 0 0}
.rig{position:relative;max-width:1080px;margin-inline:auto}
.rig__car{border-radius:1.5rem;overflow:hidden;box-shadow:0 30px 60px -22px rgba(9,33,69,.55);
  aspect-ratio:16/10;background:var(--navy)}
.rig__car img{width:100%;height:100%;object-fit:cover}
.call{display:grid;gap:1rem;margin-top:1.5rem;grid-template-columns:repeat(2,1fr)}
.call > .call__item:last-child:nth-child(odd){grid-column:span 2}
@media(max-width:700px){.call{grid-template-columns:1fr}.call > .call__item:last-child:nth-child(odd){grid-column:auto}}
.call__item{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:2px solid var(--line);
  border-radius:1rem;padding:1rem 1.1rem;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.call__item:hover{border-color:var(--sun);transform:translateY(-3px)}
.call__dot{flex:none;width:2.35rem;height:2.35rem;border-radius:50%;background:var(--foam);color:var(--deep);
  display:grid;place-items:center;font-family:var(--display);font-size:.95rem}
.call__item h3{font-family:var(--display);text-transform:uppercase;font-size:.98rem;margin:.15rem 0 .2rem;
  color:var(--navy);letter-spacing:.01em}
.call__item p{margin:0;font-size:.86rem;color:var(--ink-soft);line-height:1.5}
/* Float the callouts around the car ONLY inside .rig. Elsewhere (.faqs, wash tiers)
   .call stays a plain grid — unscoped, these absolute rules stack every item on top of itself. */
@media(min-width:1080px){
  .rig{padding:0 15.5rem}
  .rig .call{display:block;margin:0}
  .rig .call__item{position:absolute;width:15rem;margin:0;background:rgba(255,255,255,.97);backdrop-filter:blur(4px)}
  .rig .call__item::after{content:"";position:absolute;top:50%;width:3.2rem;height:2px;background:var(--sky)}
  .rig .call__item[data-side="l"]::after{right:-3.2rem}
  .rig .call__item[data-side="r"]::after{left:-3.2rem}
  .rig .call__item:nth-child(1){left:0;top:2%}
  .rig .call__item:nth-child(2){left:0;top:38%}
  .rig .call__item:nth-child(3){left:0;top:74%}
  .rig .call__item:nth-child(4){right:0;top:2%}
  .rig .call__item:nth-child(5){right:0;top:38%}
  .rig .call__item:nth-child(6){right:0;top:74%}
}

/* ── plan cards ───────────────────────────────────── */
/* padding-top is load-bearing: without it a child margin collapses out and
   opens a white gap above the section. */
.plans{background:var(--navy);color:#fff;position:relative;
  padding:clamp(2.5rem,7vh,4.5rem) 0 clamp(3rem,7vh,5rem)}
.plans__head{text-align:center;max-width:56ch;margin:0 auto}
.plans__head h2{font-size:var(--t-h2)}
.plans__head p{color:rgba(255,255,255,.72);margin:1.1rem 0 0}
.plans__toggle{text-align:center}
.toggle{display:inline-flex;background:rgba(255,255,255,.1);border-radius:999px;padding:.35rem;
  margin:2rem auto 0;border:1px solid rgba(255,255,255,.2)}
.toggle button{appearance:none;border:0;cursor:pointer;background:transparent;color:rgba(255,255,255,.7);
  font-family:var(--display);text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;
  padding:.7rem 1.5rem;border-radius:999px;transition:background .3s var(--ease),color .3s var(--ease)}
.toggle button[aria-pressed="true"]{background:var(--sun);color:var(--navy)}

.cards{display:grid;gap:1.75rem;margin-top:3rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}
.card{position:relative;background:#fff;color:var(--ink);border-radius:1.5rem;padding:2.25rem 2rem 2rem;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.6)}
.card--best{border:4px solid var(--sun)}
.flag{position:absolute;top:-.95rem;left:50%;transform:translateX(-50%) skewX(var(--skew));background:var(--sun);
  color:var(--navy);font-family:var(--display);text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;
  padding:.4rem 1.1rem;border-radius:.4rem;white-space:nowrap}
.card h3{font-family:var(--display);text-transform:uppercase;font-size:1.9rem;color:var(--navy);margin:0;
  transform:skewX(var(--skew))}
.card__note{color:var(--ink-soft);font-size:.92rem;margin:.4rem 0 0}
.price{display:flex;align-items:flex-start;gap:.2rem;margin:1.5rem 0 .3rem;min-height:4.6rem}
.price__cur{font-family:var(--display);font-size:1.6rem;color:var(--deep);margin-top:.55rem}
.price__num{font-family:var(--display);font-size:clamp(3.6rem,2.4rem + 3vw,4.8rem);line-height:.9;
  color:var(--navy);font-variant-numeric:tabular-nums}
.price__per{align-self:flex-end;color:var(--ink-soft);font-size:.9rem;font-weight:600;margin-bottom:.55rem}
.price__sub{font-size:.88rem;color:var(--ink-soft);margin:0;min-height:1.4rem}
.price__sub b{color:var(--burnt)}
.card ul{list-style:none;margin:1.6rem 0 0;padding:0}
.card li{display:flex;gap:.75rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid #EDF2F6;font-size:.94rem}
.card li::before{content:"";flex:none;width:.75rem;height:.75rem;border-radius:50%;background:var(--sun);
  box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--sun-deep);transform:translateY(-.05rem)}
.card .btn{width:100%;justify-content:center;margin-top:1.9rem}

/* ── break-even ledger ────────────────────────────── */
.even{background:var(--sun);color:var(--navy);padding:clamp(3rem,7vh,5rem) 0}
.even__in{display:grid;gap:2rem}
@media(min-width:860px){.even__in{grid-template-columns:1.05fr .95fr;align-items:center;gap:3.5rem}}
.even h2{font-size:var(--t-h2)}
.even p{margin:1.1rem 0 0;max-width:44ch;color:#3a3212;font-weight:500}
.ledger{background:var(--navy);color:#fff;border-radius:1.25rem;padding:1.75rem;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.ledger__row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 0;
  border-bottom:1px solid rgba(255,255,255,.14)}
.ledger__row:last-child{border-bottom:0}
.ledger__k{font-size:.9rem;color:rgba(255,255,255,.72)}
.ledger__v{font-family:var(--display);font-size:1.7rem;font-variant-numeric:tabular-nums}
.ledger__v--sun{color:var(--sun)}

/* ── plates (link cards) ──────────────────────────── */
.plates{padding:clamp(3.5rem,9vh,6.5rem) 0}
.plates h2{font-size:var(--t-h2);color:var(--navy);text-align:center}
.plates__grid{display:grid;gap:1.75rem;margin-top:2.75rem;grid-template-columns:1fr}
@media(min-width:900px){
  .plates__grid{grid-template-columns:repeat(6,1fr)}
  .plates__grid > .plate{grid-column:span 2}
  .plates__grid > .plate:nth-last-child(1):nth-child(3n+1){grid-column:3/span 2}
  .plates__grid > .plate:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}}
.plate{display:block;border-radius:1.25rem;overflow:hidden;background:#fff;border:2px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.plate:hover{transform:translateY(-5px);border-color:var(--sun)}
.plate__img{aspect-ratio:4/3;overflow:hidden}
.plate__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.plate:hover .plate__img img{transform:scale(1.06)}
.plate__body{padding:1.4rem 1.5rem 1.7rem}
.plate h3{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;color:var(--navy);margin:0 0 .4rem;
  transform:skewX(var(--skew))}
.plate p{margin:0;color:var(--ink-soft);font-size:.9rem}
.plate span{display:inline-block;margin-top:.9rem;font-family:var(--display);text-transform:uppercase;
  font-size:.8rem;color:var(--sun-deep);letter-spacing:.04em}

/* ── wash menu strip ──────────────────────────────── */
.menu{background:var(--foam);padding:clamp(3.5rem,9vh,6rem) 0}
.menu__head{text-align:center;max-width:52ch;margin:0 auto clamp(2rem,5vh,3rem)}
.menu__head h2{font-size:var(--t-h2);color:var(--navy)}
.menu__head p{color:var(--ink-soft);margin:1.1rem 0 0}
.menu__grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.menu__grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.menu__grid--4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:560px) and (max-width:899px){
  .menu__grid--3{grid-template-columns:repeat(2,1fr)}
  .menu__grid--3 > *:last-child:nth-child(odd){grid-column:span 2}}
@media(min-width:900px){
  .menu__grid--3{grid-template-columns:repeat(6,1fr)}
  .menu__grid--3 > *{grid-column:span 2}
  .menu__grid--3 > *:nth-last-child(1):nth-child(3n+1){grid-column:3/span 2}
  .menu__grid--3 > *:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}}
.wash{background:#fff;border:2px solid var(--line);border-radius:1.25rem;padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.wash:hover{border-color:var(--sun);transform:translateY(-4px)}
.wash h3{font-family:var(--display);text-transform:uppercase;font-size:1.35rem;color:var(--navy);margin:0;
  transform:skewX(var(--skew))}
.wash__price{font-family:var(--display);font-size:2.3rem;color:var(--deep);line-height:1;margin:.85rem 0 .1rem;
  font-variant-numeric:tabular-nums}
.wash__price small{font-size:1rem;color:var(--ink-soft)}
.wash__meta{font-size:.85rem;color:var(--ink-soft);margin:0}
.wash__link{margin-top:auto;padding-top:1.1rem;font-family:var(--display);text-transform:uppercase;
  font-size:.78rem;letter-spacing:.05em;color:var(--sun-deep)}
/* Membership hook, at the moment the price is being read. Gold + Platinum only. */
.even__cta{margin-top:1.5rem}
.wash__upsell{align-self:flex-start;margin-top:.9rem;background:var(--sun);color:var(--navy);
  border:2px solid var(--navy);border-radius:999px;padding:.3rem .7rem;
  font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.04em;
  box-shadow:2px 3px 0 var(--navy)}
.wash__upsell--member{background:var(--deep);color:#fff}
/* block, not inline-block: inside .plate__body the next element is the inline
   "See details →" span, which otherwise sits on the same line and overlaps the pill.
   Colour is restated here because `.plate span` (0,1,1) sets the link orange and
   outranks the pill's own colour rule (0,1,0). */
.plate .wash__upsell{display:block;width:fit-content;margin:.6rem 0 .55rem;color:var(--navy)}
.plate .wash__upsell--member{color:#fff}

/* ── photo band ───────────────────────────────────── */
.band{background:var(--navy);padding:clamp(3rem,8vh,5.5rem) 0 clamp(2rem,5vh,3.25rem)}
.band__head{text-align:center;max-width:54ch;margin:0 auto clamp(2rem,5vh,3rem);color:#fff}
.band__head h2{font-size:var(--t-h2)}
.band__head p{color:rgba(255,255,255,.7);margin:1.1rem 0 0}
.band__grid{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)}
.band__cell{overflow:hidden;border-radius:1rem;aspect-ratio:4/3}
.band__cell img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.band__cell:hover img{transform:scale(1.06)}
@media(max-width:759px){.band__cell:nth-child(5){grid-column:span 2}}
/* 2x2 feature + four 1x1 tiles the 4-col x 2-row grid exactly */
@media(min-width:760px){
  .band__grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,clamp(9rem,17vw,15rem))}
  .band__cell{aspect-ratio:auto;height:100%}
  .band__cell:nth-child(1){grid-column:span 2;grid-row:span 2}
}
/* gallery — masonry columns so portrait + landscape shots pack naturally */
.gallery{display:grid;gap:.9rem;margin-top:2.5rem;grid-template-columns:repeat(2,1fr)}
.gallery > .gallery__item:last-child:nth-child(odd){grid-column:span 2}
@media(min-width:640px){.gallery{grid-template-columns:repeat(3,1fr)}
  .gallery > .gallery__item:last-child:nth-child(odd){grid-column:auto}}
.gallery__item{overflow:hidden;border-radius:1rem;background:#0d2a4d;aspect-ratio:4/3}
.gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.gallery__item:hover img{transform:scale(1.05)}

/* ── service area ─────────────────────────────────── */
.area{padding:clamp(3.5rem,9vh,6rem) 0;text-align:center}
.area h2{font-size:var(--t-h2);color:var(--navy)}
.area p{color:var(--ink-soft);max-width:52ch;margin:1.1rem auto 0}
.area__list{display:grid;gap:.6rem;margin-top:2.2rem;list-style:none;padding:0;grid-template-columns:repeat(2,1fr)}
.area__list li:last-child:nth-child(odd){grid-column:span 2}
@media(min-width:820px){
  .area__list{grid-template-columns:repeat(6,1fr)}
  .area__list li{grid-column:span 2}
  .area__list li:last-child:nth-child(odd){grid-column:span 2}
  .area__list li:last-child:nth-child(3n+1){grid-column:3/5}
  .area__list li:nth-last-child(2):nth-child(3n+1){grid-column:2/4}
  .area__list li:last-child:nth-child(3n+2){grid-column:4/6}
}
.area__list li{text-align:center}
.area__list li{border:2px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;font-size:.85rem;
  font-weight:600;color:var(--ink-soft);transition:border-color .25s var(--ease),color .25s var(--ease)}
.area__list li:hover{border-color:var(--sun);color:var(--navy)}

/* ── join ─────────────────────────────────────────── */
.join{position:relative;background:var(--deep);color:#fff;overflow:hidden;text-align:center;isolation:isolate}
.join__in{padding-block:clamp(3.5rem,9vh,6.5rem) clamp(4rem,10vh,7rem)}
.join h2{font-size:var(--t-h2)}
.join p{color:rgba(255,255,255,.82);max-width:44ch;margin:1.2rem auto 0}
.join__actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

/* ── footer ───────────────────────────────────────── */
.foot{background:var(--navy);color:rgba(255,255,255,.6);font-size:.85rem;padding:2.5rem 0}
.foot__in{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;align-items:center}
.foot a{color:rgba(255,255,255,.85);font-weight:600}
.foot a:hover{color:var(--sun)}

/* ── motion ───────────────────────────────────────────
   Gated behind .js: without JS (or if IntersectionObserver never fires) content
   must still be VISIBLE. Hiding by default made the service-area chips vanish. */
.js .rise{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none}
  .surf__dog{animation:none}
  .sud{display:none}
  *{animation:none!important;transition:none!important}
}


/* ── Carter contact form ─────────────────────────────
   Speech bubble + dog on the left, sticker-style form on the right. The bubble
   tail points down-right at Carter. Inputs get the Chrome-autofill inset-shadow
   fix — autofill's yellow paint otherwise covers the white field. */
.cform{background:var(--foam);padding-block:clamp(3rem,8vh,5.5rem)}
.cform__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.cform__carter{position:sticky;top:110px;text-align:center}
.cform__bubble{position:relative;background:#fff;border:3px solid var(--navy);border-radius:1.25rem;
  padding:1.3rem 1.4rem;text-align:left;box-shadow:6px 7px 0 var(--navy)}
.cform__bubble p{margin:0;font-size:.97rem;line-height:1.55}
.cform__bubble::after{content:"";position:absolute;bottom:-16px;right:22%;width:26px;height:26px;
  background:#fff;border-right:3px solid var(--navy);border-bottom:3px solid var(--navy);
  transform:rotate(45deg);clip-path:polygon(100% 0,100% 100%,0 100%)}
.cform__dog{width:clamp(150px,14vw,210px);height:auto;margin:1.4rem auto 0;display:block;
  filter:drop-shadow(0 10px 14px rgba(9,33,69,.25))}
.cform__form{background:#fff;border:3px solid var(--navy);border-radius:1.1rem;
  box-shadow:8px 9px 0 var(--navy);padding:1.7rem 1.6rem}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.cform__form label{display:block;margin-bottom:1.05rem;font-family:var(--display);text-transform:uppercase;
  font-size:.8rem;letter-spacing:.05em;color:var(--navy)}
.cform__opt{color:var(--ink-soft);text-transform:none;font-family:var(--sans);font-weight:400}
.cform__form input,.cform__form textarea{display:block;width:100%;margin-top:.35rem;
  font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:2px solid var(--line);border-radius:.7rem;padding:.65rem .8rem;
  transition:border-color .2s var(--ease)}
.cform__form input:focus,.cform__form textarea:focus{outline:none;border-color:var(--deep)}
.cform__form input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset;-webkit-text-fill-color:var(--ink)}
.cform__form textarea{resize:vertical;min-height:7.5rem}
.cform__form .btn{margin-top:.3rem}
.cform__hp{position:absolute !important;left:-9999px;top:-9999px}
.cform__note{margin:1rem 0 0;font-size:.95rem;background:#FFF4D6;border:2px solid var(--sun-deep);
  border-radius:.7rem;padding:.8rem 1rem}
.cform__note--ok{background:#E8F7EC;border-color:#2E7D48}
.cform__note[hidden]{display:none}
@media(max-width:900px){
  .cform__in{grid-template-columns:1fr}
  .cform__carter{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:end;text-align:left}
  .cform__bubble::after{right:-14px;bottom:22%;transform:rotate(-45deg)}
  .cform__dog{width:110px;margin:0}
  .cform__row{grid-template-columns:1fr}
}


/* City pages: joinCTA's wave (with Carter on it) directly follows the plan
   cards — give the cards room so his board never clips the Platinum card. */
.plans--cleardog{padding-bottom:clamp(4.5rem,10vh,7.5rem)}



/* ── Carter newsletter band (sitewide, above the footer) ───────── */
.news{background:var(--sand);border-top:1px solid rgba(9,33,69,.14);padding-block:clamp(1.8rem,4.5vh,2.8rem)}
.news__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.news__carter{display:flex;gap:1rem;align-items:flex-end}
.news__dog{width:92px;height:auto;flex:none;filter:drop-shadow(0 6px 8px rgba(9,33,69,.22))}
.news__bubble{position:relative;background:#fff;border:2.5px solid var(--navy);border-radius:1rem;
  padding:.8rem 1rem;box-shadow:4px 5px 0 var(--navy)}
.news__bubble p{margin:0;font-size:.9rem;line-height:1.5}
.news__bubble::after{content:"";position:absolute;left:-11px;bottom:18%;width:18px;height:18px;background:#fff;
  border-left:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg);
  clip-path:polygon(0 0,0 100%,100% 100%)}
.news__form{display:flex;gap:.6rem;flex-wrap:wrap;position:relative}
.news__form input[type="email"]{flex:1 1 14rem;font:inherit;font-size:1rem;color:var(--ink);
  border:2px solid var(--navy);border-radius:999px;padding:.72rem 1.1rem;background:#fff}
.news__form input[type="email"]:focus{outline:none;border-color:var(--deep)}
.news__form input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset;-webkit-text-fill-color:var(--ink)}
.news__note{flex-basis:100%;margin:.4rem 0 0;font-size:.88rem;background:#FFF4D6;
  border:2px solid var(--sun-deep);border-radius:.7rem;padding:.6rem .9rem}
.news__note--ok,.cform__note--ok{background:#E8F7EC;border-color:#2E7D48}
.news__note[hidden]{display:none}
@media(max-width:900px){.news__in{grid-template-columns:1fr;gap:1.2rem}}

/* checkout failure notice on /join/ */
.join__error{margin:1.5rem auto 0;max-width:44ch;text-align:center;background:#FFF4D6;
  border:2px solid var(--sun);border-radius:1rem;padding:1rem 1.25rem;color:var(--ink);font-weight:600}

/* ── footer nav: the site's link graph ────────────── */
.foot__nav{background:#071B39;color:rgba(255,255,255,.62);padding:clamp(2.5rem,6vh,4.5rem) 0 1rem;
  border-bottom:1px solid rgba(255,255,255,.08)}
.foot__grid{display:grid;align-items:start;gap:2rem clamp(1.5rem,3vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.foot__col h3{font-family:var(--display);text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;
  color:var(--sun);margin:0 0 .9rem;transform:skewX(var(--skew))}
.foot__col ul{list-style:none;margin:0;padding:0}
.foot__col li{margin:0 0 .5rem;line-height:1.35}
.foot__col a{font-size:.85rem;color:rgba(255,255,255,.66);transition:color .2s var(--ease)}
.foot__col a:hover{color:#fff}

/* ── blog teaser ──────────────────────────────────── */
.reads{background:var(--foam);padding:clamp(3.5rem,9vh,6rem) 0}
.reads__head{text-align:center;max-width:52ch;margin:0 auto clamp(2rem,5vh,3rem)}
.reads__head h2{font-size:var(--t-h2);color:var(--navy)}
.reads__head p{color:var(--ink-soft);margin:1.1rem 0 0}
.reads__grid{display:grid;gap:1.5rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.reads__grid{grid-template-columns:1fr 1fr}
  .reads__grid > .read:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:640px){.reads__grid{grid-template-columns:1fr}}
.read{background:#fff;border:2px solid var(--line);border-radius:1.25rem;padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.read:hover{border-color:var(--sun);transform:translateY(-4px)}
.read h3{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;line-height:1.2;
  color:var(--navy);margin:0 0 .6rem;transform:skewX(var(--skew))}
.read p{margin:0;font-size:.88rem;color:var(--ink-soft)}
.read span{margin-top:auto;padding-top:1.1rem;font-family:var(--display);text-transform:uppercase;
  font-size:.78rem;letter-spacing:.05em;color:var(--sun-deep)}
.reads__all{text-align:center;margin-top:2.5rem}

/* ── coupons ──────────────────────────────────────── */
/* Explicit 6-track grid (not auto-fit): each card spans 2, so a full row is 3.
   The nth-child math centers a lone last card or a last pair — no orphans. */
.coupons__grid{display:grid;gap:1.5rem;grid-template-columns:repeat(6,1fr)}
.coupons__grid > .coupon{grid-column:span 2}
.coupons__grid > .coupon:last-child:nth-child(3n+1){grid-column:3/5}
.coupons__grid > .coupon:nth-last-child(2):nth-child(3n+1){grid-column:2/4}
.coupons__grid > .coupon:last-child:nth-child(3n+2){grid-column:4/6}
@media(max-width:1000px){
  .coupons__grid{grid-template-columns:1fr 1fr}
  .coupons__grid > .coupon{grid-column:auto}
  .coupons__grid > .coupon:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:min(100%,34rem)}
}
@media(max-width:640px){.coupons__grid{grid-template-columns:1fr}
  .coupons__grid > .coupon:last-child:nth-child(odd){width:100%}}
.coupon{position:relative;background:#fff;border:2px dashed var(--sun-deep);border-radius:1.25rem;
  padding:1.75rem 1.6rem 1.4rem;display:flex;flex-direction:column}
.coupon__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:2px dashed var(--line);padding-bottom:1rem;margin-bottom:1.1rem}
.coupon h3{font-family:var(--display);text-transform:uppercase;font-size:1.15rem;color:var(--navy);
  margin:0;transform:skewX(var(--skew));line-height:1.1}
.coupon__val{font-family:var(--display);font-size:2rem;color:var(--sun-deep);margin:0;
  line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.coupon__val small{font-size:.9rem;color:var(--ink-soft)}
/* struck-through regular price — only rendered when it comes from real menu data */
.coupon__was{font-size:1.15rem;color:var(--ink-soft);text-decoration-thickness:2px;
  text-decoration-color:var(--burnt);margin-right:.15rem}
.coupon ul{list-style:none;margin:0;padding:0}
.coupon li{font-size:.9rem;padding:.35rem 0;display:flex;gap:.6rem;align-items:baseline}
.coupon li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--sun)}
.coupon__fine{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.72rem;line-height:1.5;color:var(--ink-soft)}

/* ── trust stats strip ────────────────────────────── */
.stats{background:var(--foam);padding:clamp(2rem,5vh,3.25rem) 0;border-bottom:1px solid var(--line)}
.stats__grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(50%,10rem),1fr));text-align:center}
.stat__v{display:block;font-family:var(--display);font-size:clamp(2rem,1.2rem + 2vw,2.9rem);
  color:var(--deep);line-height:1;transform:skewX(var(--skew))}
.stat__l{display:block;margin-top:.5rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft)}

/* ── how it works ─────────────────────────────────── */
.how{background:#fff;padding:clamp(3.5rem,9vh,6rem) 0}
.how__head{text-align:center;max-width:56ch;margin:0 auto clamp(2rem,5vh,3rem)}
.how__head h2{font-size:var(--t-h2);color:var(--navy)}
.how__head p{color:var(--ink-soft);margin:1.1rem 0 0}
.how__grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:900px){.how__grid{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--foam);border-radius:1.25rem;padding:2rem 1.75rem}
.step__n{font-family:var(--display);font-size:3rem;color:var(--sun);line-height:1;display:block;
  transform:skewX(var(--skew));margin-bottom:.75rem}
.step h3{font-family:var(--display);text-transform:uppercase;font-size:1.15rem;color:var(--navy);
  margin:0 0 .5rem;transform:skewX(var(--skew))}
.step p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* ── reviews ──────────────────────────────────────── */
.says{background:var(--navy);color:#fff;padding:clamp(3.5rem,9vh,6rem) 0}
.says__head{text-align:center;margin:0 auto clamp(2rem,5vh,3rem)}
.says__head h2{font-size:var(--t-h2)}
.says__grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:640px){.says__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.says__grid{grid-template-columns:repeat(4,1fr)}}
.say{margin:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:1.25rem;padding:1.75rem 1.5rem;display:flex;flex-direction:column}
.say__stars{color:var(--sun);letter-spacing:.15em;font-size:.95rem;margin-bottom:.9rem}
.say blockquote{margin:0;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.88)}
.say figcaption{margin-top:auto;padding-top:1.2rem;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.5)}

/* ═══════ v3 "beach depth" pass — Moxom layering × sticker borders × Waves warmth ═══════ */
:root{--sand:#F7EFDC;--sand-deep:#EFE2C2}

/* layered hero: giant type behind, framed video card in front, dog on the frame */
.h3{position:relative;background:var(--sand);color:var(--navy);overflow:hidden;isolation:isolate}
.h3__word{position:absolute;z-index:0;top:clamp(.5rem,3vh,2rem);left:50%;transform:translateX(-50%) skewX(-8deg);
  font-family:Anton,sans-serif;font-size:clamp(7rem,23vw,21rem);line-height:.9;
  color:transparent;-webkit-text-stroke:2px rgba(9,33,69,.13);white-space:nowrap;user-select:none;pointer-events:none}
.h3__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:center;
  padding-block:clamp(3.5rem,9vh,6.5rem) clamp(4.5rem,11vh,8rem)}
.h3 h1{font-size:clamp(2.1rem,.9rem + 3.9vw,4.15rem)}
.h3__sub{margin:1.5rem 0 0;max-width:44ch;color:rgba(9,33,69,.78);font-size:clamp(1rem,.95rem + .35vw,1.15rem)}
.h3__stats{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:2.4rem;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(9,33,69,.55)}
.chrome{background:linear-gradient(180deg,#FFE28C 8%,#FAC021 38%,#EE920B 64%,#BB510B 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(2px 3px 0 rgba(9,33,69,.92))}

.vcard{position:relative;border:5px solid var(--navy);border-radius:1.4rem;background:var(--navy);
  box-shadow:14px 16px 0 var(--navy),14px 16px 0 1px rgba(9,33,69,.2);transform:rotate(1.5deg)}
.vcard--tall{max-width:clamp(280px,26vw,370px);margin-left:auto;transform:rotate(2deg)}
.vcard--tall .vcard__media{aspect-ratio:9/16}
.vcard__media{border-radius:.95rem;overflow:hidden;display:block;aspect-ratio:16/10;background:var(--navy)}
.vcard__media video,.vcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.vcard__dog{position:absolute;z-index:3;left:-2.2rem;bottom:-2.4rem;width:clamp(90px,9vw,135px);
  transform:rotate(-7deg);transform-origin:50% 90%;
  filter:drop-shadow(0 10px 12px rgba(9,33,69,.35));animation:bob 5.5s ease-in-out infinite}
.chip{position:absolute;z-index:3;background:#fff;border:3px solid var(--navy);border-radius:999px;
  padding:.5rem 1.05rem;font-weight:800;font-size:.86rem;color:var(--navy);
  box-shadow:5px 6px 0 var(--navy);white-space:nowrap}
.chip--sun{background:var(--sun)}
/* Chips hang off the card corners on wide screens. Once the card sits against
   the gutter (tablet) that overhang gets clipped by .h3's overflow, so tuck them
   inside instead of letting half the price chip disappear. */
.chip--tr{top:-1.15rem;right:-.7rem}
.chip--br{bottom:-1.25rem;right:-.8rem}
@media(max-width:1000px){
  .chip--tr{top:-1rem;right:.6rem}
  /* the card is narrow here, so this chip's text runs left under the surfing dog
     and loses its first characters. The address is already in the util bar, the
     hero copy and the footer — drop the chip rather than have the two collide. */
  .chip--br{display:none}
}
.chip b{font-family:Anton,sans-serif;font-weight:400;font-size:1.02rem;letter-spacing:.03em;margin-right:.3rem}
/* Stack at 820, NOT 950. The two breakpoints have to agree: below 820 the sticky
   cta-bar takes over the hero's buttons, so stacking at 950 left 820–950px with a
   single-column hero, no sticky bar, and the giant word running through the H1. */
@media(max-width:820px){
  .h3__in{grid-template-columns:1fr;gap:1.6rem;padding-block:clamp(1.6rem,4vh,3rem) clamp(4.5rem,10vh,7rem)}
  .vcard{transform:rotate(0);margin-left:1.5rem;margin-right:.5rem}
  .vcard--tall{margin:.4rem auto 0;max-width:min(70vw,300px)}
  .h3__word{font-size:clamp(6rem,26vw,12rem)}
  .h3__sub{margin-top:1rem}
  .h3 .hero__actions{margin-top:1.4rem}
}
/* mobile: the sticky cta-bar already carries Call + Join — don't repeat them in
   the hero; one button + the video reel above the fold instead */
@media(max-width:820px){
  .h3 .hero__actions .btn--sun,.h3 .hero__actions .btn--line{display:none}
  .h3__stats{display:none}
}

/* Phone: get the video reel above the fold. Everything above it is on a budget —
   the sub is clamped (full text stays in the DOM for crawlers), padding is tight,
   and the card goes 4/5 instead of 9/16 so it is wide rather than tall. Tuned
   against 390x844 minus the 70px sticky cta-bar. */
@media(max-width:560px){
  .h3__in{padding-block:1rem 3rem;gap:1.1rem}
  .h3__sub{margin-top:.7rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden}
  .h3 .hero__actions{margin-top:1rem}
  .vcard--tall{max-width:min(76vw,290px);margin-top:0}
  /* Fixed ratio on purpose. Do NOT size this from 100dvh: dvh changes as Safari's
     URL bar collapses on scroll, so the card visibly resizes mid-scroll and
     reflows the page under the reader. A stable card that may sit slightly under
     the fold beats one that jumps. */
  .vcard--tall .vcard__media{aspect-ratio:4/5}
  .util__in{padding-block:.4rem}
}

/* benefits ticker */
.tick{background:var(--navy);overflow:hidden}
.tick__row{display:flex;width:max-content;white-space:nowrap;padding-block:.72rem;
  font-family:Anton,sans-serif;color:var(--sun);text-transform:uppercase;letter-spacing:.07em;
  font-size:clamp(.95rem,.85rem + .5vw,1.25rem);animation:tickmove 32s linear infinite}
.tick__row span{padding-inline:1.35rem;display:inline-flex;align-items:center}
.tick__row .tick__dot{color:var(--sky);padding-inline:0}
@keyframes tickmove{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tick__row{animation:none}}

/* Moxom-style numbered stats */
.nstats{background:var(--sand);border-top:1px solid rgba(9,33,69,.14);border-bottom:1px solid rgba(9,33,69,.14)}
.nstats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.nstat{display:flex;gap:.85rem;align-items:baseline;padding:1.9rem 1.5rem;border-left:1px solid rgba(9,33,69,.14)}
.nstat:first-child{border-left:0}
.nstat__n{font-family:Anton,sans-serif;font-size:clamp(2.4rem,1.8rem + 2.2vw,3.9rem);line-height:1;color:var(--deep)}
.nstat__l{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--burnt)}
.nstat__v{display:block;font-family:Anton,sans-serif;font-size:clamp(1.05rem,1rem + .5vw,1.5rem);color:var(--navy);margin-top:.2rem}
@media(max-width:820px){
  .nstats__grid{grid-template-columns:1fr 1fr}
  .nstat{padding:1.05rem .95rem;gap:.65rem;align-items:flex-start}
  .nstat:nth-child(3){border-left:0}
  .nstat:nth-child(n+3){border-top:1px solid rgba(9,33,69,.14)}
  .nstat__n{font-size:1.9rem;line-height:1.05}
  .nstat__l{font-size:.58rem;letter-spacing:.09em;line-height:1.45}
  .nstat__v{font-size:1.12rem;margin-top:.1rem}
}

/* sticker cards (wash menu, sitewide) */
.menu{background:var(--sand)}
.wash{border:3px solid var(--navy);border-radius:1.1rem;box-shadow:8px 9px 0 var(--navy);
  transition:transform .18s ease,box-shadow .18s ease}
.wash:hover{transform:translate(-3px,-4px);box-shadow:12px 14px 0 var(--navy);border-color:var(--navy)}

/* polaroid photo band */
.band__cell{background:#fff;padding:.5rem .5rem 1.6rem;border-radius:.45rem;
  box-shadow:0 16px 32px rgba(0,0,0,.38);transform:rotate(-1.2deg);
  display:flex;flex-direction:column}
.band__cell:nth-child(2n){transform:rotate(1deg)}
.band__cell:nth-child(5){transform:rotate(-.6deg)}
.band__cell img{border-radius:.25rem;flex:1 1 auto;min-height:0;width:100%;height:100%;object-fit:cover}
.band__cell:hover{transform:rotate(0) scale(1.02);transition:transform .25s ease}

/* v3 CTA architecture */
.btn--line{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--line:hover{background:rgba(9,33,69,.08)}
.nav__call{border-color:rgba(255,255,255,.5)!important}
@media(max-width:700px){.nav__call{display:none}}
.diff__cta{text-align:center;margin:2.2rem 0 0}
.cta-bar{display:none}
@media(max-width:820px){
  body{padding-bottom:70px}
  /* Three EQUAL columns. The old 1fr/1.25fr/1.6fr ratio left the bar visibly
     ragged; the label shrinks to fit rather than the button growing. */
  .cta-bar{position:fixed;bottom:0;left:0;right:0;z-index:70;display:grid;
    grid-template-columns:repeat(3,1fr);gap:.55rem;background:var(--navy);
    border-top:3px solid var(--sun);padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom))}
  .cta-bar a{display:flex;align-items:center;justify-content:center;font-family:var(--display);
    text-transform:uppercase;letter-spacing:.02em;font-size:clamp(.68rem,3vw,.92rem);color:#fff;
    white-space:nowrap;border:2px solid rgba(255,255,255,.4);border-radius:.7rem;padding:.68rem .3rem}
  .cta-bar a.cta-bar__join{background:var(--sun);color:var(--navy);border-color:var(--sun)}
}

/* v3 photo density: card image tops, step photos, filmstrip marquee */
.wash{overflow:hidden}
.wash__img{margin:-1.6rem -1.5rem 1.1rem;border-bottom:3px solid var(--navy);aspect-ratio:16/9;overflow:hidden}
.wash__img img{width:100%;height:100%;object-fit:cover}
/* Tier badge. A contained sticker chip, NOT a full-bleed panel: blown up to
   hero size these line icons read thin and cheap, and the empty gradient around
   them dwarfed the price. Each tier tints a step deeper so the row still reads
   as a ladder. */
.wash__badge{width:5.4rem;height:5.4rem;flex:none;border-radius:1rem;margin-bottom:1rem;
  display:grid;place-items:center;background:#EAF3FB;
  border:3px solid var(--navy);box-shadow:4px 5px 0 var(--navy)}
.wash__badge--2{background:#DDEDFA}
.wash__badge--3{background:#CFE4F7}
.wash__badge--4{background:#BFDAF3}
.wash__ico{display:block;width:3.5rem;height:3.5rem;object-fit:contain}
.wash:hover .wash__badge,.plate:hover .wash__badge{transform:translate(-2px,-2px);
  box-shadow:6px 7px 0 var(--navy);transition:transform .2s ease,box-shadow .2s ease}
.plate__badge{margin:1.4rem 1.5rem 0}
.step__img{border-radius:.8rem;overflow:hidden;aspect-ratio:16/10;margin-bottom:1rem;border:3px solid var(--navy);box-shadow:6px 7px 0 var(--navy)}
.step__img img{width:100%;height:100%;object-fit:cover}
.strip{background:var(--navy);padding-block:1.6rem;overflow:hidden;position:relative}
.strip__row{display:flex;gap:1rem;width:max-content;animation:tickmove 55s linear infinite}
.strip__cell{width:clamp(200px,24vw,320px);aspect-ratio:3/2;border-radius:.8rem;overflow:hidden;
  border:3px solid rgba(255,255,255,.9);transform:rotate(-1.2deg)}
.strip__cell:nth-child(2n){transform:rotate(1.1deg)}
.strip__cell img{width:100%;height:100%;object-fit:cover}
.strip__cta{text-align:center;margin-top:1.4rem}
@media(prefers-reduced-motion:reduce){.strip__row{animation:none}}

/* ── mobile header: burger + slide-down menu ── */
.nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:transparent;border:2px solid rgba(255,255,255,.5);border-radius:.6rem;cursor:pointer;padding:9px}
.nav__burger span{display:block;height:2.5px;border-radius:2px;background:#fff;transition:transform .22s var(--ease),opacity .22s}
.nav__burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(max-width:1000px){.nav__burger{display:flex}}
.mnav{position:absolute;top:100%;left:0;right:0;background:var(--navy);z-index:49;
  box-shadow:0 24px 40px rgba(4,14,30,.5);border-top:3px solid var(--sun)}
.nav{position:sticky}
.mnav__links{list-style:none;margin:0;padding:.6rem 0}
.mnav__links a{display:block;padding:.85rem var(--gutter);color:#fff;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.08)}
.mnav__links a:active,.mnav__links a:hover{background:rgba(255,255,255,.06);color:var(--sun)}
/* Deliberate 2-col grid, not flex-wrap: wrapping left the three buttons ragged
   (long Join button on its own line, then two odd-width ghosts). Join spans the
   full width; Call and Directions are exact halves. */
.mnav__actions{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;padding:1rem var(--gutter) 1.3rem}
.mnav__actions > .btn{width:100%;justify-content:center;padding-inline:.75rem;text-align:center}
.mnav__actions > .btn:first-child{grid-column:1 / -1}
/* tighten small-screen chrome */
@media(max-width:640px){
  .util__in > span:last-child{display:none}
  .util__in{justify-content:center}
}
@media(max-width:520px){
  .nav__logo{width:60px}
  .nav__in{gap:.8rem}
  .nav__cta{margin-left:auto}
  .nav__cta .btn--sm{font-size:.74rem;padding:.55rem .9rem}
}
.says__all{text-align:center;margin:2rem 0 0}

/* cookie consent banner */
.cookiebar{position:fixed;z-index:80;left:1rem;bottom:1rem;max-width:26rem;background:#fff;
  border:3px solid var(--navy);border-radius:1rem;box-shadow:8px 9px 0 var(--navy);
  padding:1rem 1.1rem;font-size:.9rem;line-height:1.5}
.cookiebar p{margin:0 0 .8rem;color:var(--ink)}
.cookiebar a{color:var(--deep);font-weight:700;text-decoration:underline}
.cookiebar__btns{display:flex;gap:.6rem;flex-wrap:wrap}
.cookiebar button{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;
  font-size:.85rem;padding:.55rem 1rem;border-radius:999px;cursor:pointer;border:2px solid var(--navy)}
.cookiebar__accept{background:var(--sun);color:var(--navy);box-shadow:0 4px 0 var(--sun-deep)}
.cookiebar__accept:hover{transform:translateY(-1px)}
.cookiebar__min{background:#fff;color:var(--navy)}
.cookiebar__min:hover{background:rgba(9,33,69,.06)}
@media(max-width:820px){
  .cookiebar{left:.7rem;right:.7rem;max-width:none;bottom:calc(78px + env(safe-area-inset-bottom))}
}

/* service-area city cards: one clean grid, drive times instead of link lists */
.area__grid{display:grid;gap:.9rem;margin-top:2.4rem;grid-template-columns:repeat(3,1fr)}
.citycard{display:flex;flex-direction:column;gap:.15rem;background:#fff;border:2px solid var(--navy);
  border-radius:.9rem;padding:.95rem 1.1rem;box-shadow:5px 6px 0 var(--navy);
  transition:transform .18s ease,box-shadow .18s ease;text-align:left}
.citycard b{font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;color:var(--navy);font-size:1.02rem}
.citycard span{font-size:.78rem;color:var(--ink-soft)}
.citycard:hover{transform:translate(-2px,-3px);box-shadow:8px 10px 0 var(--navy)}
@media(max-width:700px){.area__grid{grid-template-columns:repeat(2,1fr)}
  .citycard:last-child:nth-child(odd){grid-column:span 2}}

/* modern util bar: live open status + rating */
.util__open{display:inline-flex;align-items:center;gap:.45rem}
.util__open b{font-weight:700;letter-spacing:.02em}
.util__dot{width:.55rem;height:.55rem;border-radius:50%;background:#2ecc71;box-shadow:0 0 0 0 rgba(46,204,113,.55);animation:pulse 2.2s infinite}
.util__dot--closed{background:#e67e22;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,.55)}70%{box-shadow:0 0 0 7px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
@media(max-width:640px){.util__addr{display:none}.util__meta .util__sep{display:none}}

/* detailing reel section */
.reel{background:var(--sand);padding-block:clamp(2.5rem,7vh,4.5rem)}
.reel__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.reel h2{font-size:var(--t-h2);color:var(--navy)}
.reel p{color:var(--ink-soft);max-width:48ch}
@media(max-width:900px){.reel__in{grid-template-columns:1fr;gap:1.8rem}}