@font-face{font-family:'Forza Black';src:url(fonts/forza-black.otf) format('opentype');font-weight:900;font-style:normal;font-display:swap}
  @font-face{font-family:'Hazelnuts';src:url(fonts/hazelnuts-extrabold-italic.otf) format('opentype');font-weight:800;font-style:italic;font-display:swap}
  :root{
    --blurple:#2E008B; --blurple-burst:#1E22AA; --cyan:#00A9E0; --red:#EE2737;
    /* Lemon, Pantone 115 C — the brand's scent/variant yellow (VisID p.32).
       10.2:1 on blurple, so it is a strong accent on the dark ground; only
       1.4:1 on white, so never put it on a light background. */
    --lemon:#FDDA25;
    --white:#FFFFFF; --ink:#1a0b3d; --paper:#F4F4F5;
    --font-display:'Forza Black','Arial Narrow',Arial,sans-serif;
    --font-play:'Hazelnuts','Comic Sans MS',cursive;
    --font-body:'Helvetica Neue',Arial,sans-serif;
    --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z' fill='%2300A9E0'/%3E%3C/svg%3E");
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.55}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
  .display{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:.5px}
  .play{font-family:var(--font-play);font-style:italic;font-weight:600;text-transform:lowercase;letter-spacing:0}
  /* Brand name: always Forza ALL CAPS, even inside lowercase Hazelnuts kickers/accents. */
  .brand{font-family:var(--font-display);font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
  .cyan-txt{color:var(--cyan)} .red-txt{color:var(--red)}

  .btn{display:inline-block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;
       letter-spacing:.6px;font-size:.9rem;padding:15px 30px;border-radius:8px;cursor:pointer;border:none;transition:transform .12s ease, filter .12s ease}
  .btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
  .btn-cyan{background:var(--cyan);color:var(--blurple)}
  .btn-red{background:var(--red);color:var(--white)}
  .btn-white{background:var(--white);color:var(--blurple);border:2px solid var(--blurple)}
  .btn-ghost{background:transparent;color:var(--white);border:2px solid var(--white)}

  /* Utility bar */
  .util{background:var(--blurple);color:var(--white);font-size:.82rem}
  .util .wrap{display:flex;gap:22px;align-items:center;justify-content:flex-end;height:38px}
  .util a{opacity:.9;display:inline-flex;align-items:center;gap:6px}
  .util a:hover{opacity:1}
  .util .left{margin-right:auto;font-family:var(--font-play);font-style:italic;font-size:.9rem;opacity:.95;text-transform:lowercase}
  .util svg{stroke:var(--cyan)}

  /* Header (white, per full-color logo legibility) */
  header.nav{background:var(--white);position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(46,0,139,.12)}
  header.nav .wrap{display:flex;align-items:center;gap:28px;height:84px}
  .logo img{height:52px;width:auto}
  nav.main{display:flex;gap:26px;margin-left:12px}
  nav.main a{color:var(--blurple);font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.5px}
  nav.main a:hover{color:var(--cyan)}
  header.nav .cta{margin-left:auto;display:flex;gap:12px;align-items:center}

  /* Hero */
  .hero{background:var(--blurple);color:var(--white);position:relative;overflow:hidden}
  .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;padding:64px 24px 64px;position:relative;z-index:2}
  .hero h1{font-size:clamp(2.6rem,5.4vw,4.5rem)}
  .hero h1 .play{font-size:.82em;display:inline-block}
  .hero p.sub{margin:22px 0 30px;font-size:1.2rem;max-width:26ch;opacity:.95}
  .hero .actions{display:flex;flex-wrap:wrap;gap:14px}
  .hero-man{position:relative;justify-self:center;align-self:end}
  .hero-man img.man{height:clamp(360px,42vw,540px);width:auto;position:relative;z-index:2;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
  /* Blurple burst behind the man, edges faded so no hard square */
  .burst{position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);width:780px;height:780px;z-index:1;
         -webkit-mask-image:radial-gradient(circle,#000 42%,transparent 68%);mask-image:radial-gradient(circle,#000 42%,transparent 68%);opacity:.9}
  .bling{position:absolute;z-index:3;pointer-events:none;width:34px}
  .bling.b1{top:14px;left:40%}
  .bling.b2{top:38%;right:4%}
  .bling.b3{top:10px;right:26%}
  .b1{top:9%;left:47%;width:34px;opacity:.95}
  .b2{top:62%;left:40%;width:54px;opacity:.55}
  .b3{bottom:14%;left:5%;width:26px;opacity:.7}

  section{padding:70px 0}
  .kicker{font-family:var(--font-play);font-style:italic;color:var(--cyan);font-size:1.25rem;margin-bottom:6px;text-transform:lowercase}
  .kicker.on-light{color:var(--red)}
  h2.sec{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:14px}
  .center{text-align:center}
  .lead{max-width:60ch;margin:0 auto 10px;font-size:1.05rem}

  /* Packages */
  .packages{background:var(--white)}
  /* Tile rows are flex rather than a fixed-column grid: a row that isn't full
     centres what is left instead of leaving a hole on the right, so adding or
     cutting a tile from wp-admin cannot break the layout. Each basis reproduces
     the old column count exactly, so nothing moves at the counts we ship. */
  .tier-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:40px}
  .tier-grid>*{flex:0 1 calc((100% - 60px)/4)}
  .tier{background:var(--white);border-radius:14px;padding:26px 22px;border-top:8px solid var(--cyan);
        box-shadow:0 8px 24px rgba(46,0,139,.08);display:flex;flex-direction:column}
  .tier.platinum{border-top-color:var(--blurple)}
  .tier.gold{border-top-color:var(--red)}
  .tier h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;color:var(--blurple);font-size:1.5rem;margin-bottom:10px}
  .tier ul{list-style:none;margin:6px 0 14px;flex:1}
  .tier li{padding:7px 0 7px 28px;position:relative;font-size:.94rem;border-bottom:1px solid #eee}
  .tier li::before{content:"";position:absolute;left:0;top:9px;width:15px;height:15px;background:var(--spark) no-repeat center/contain}
  .tier .plus{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.78rem;color:var(--red);padding:10px 0 2px}
  .tier .price{font-family:var(--font-play);font-style:italic;color:var(--blurple);margin:6px 0 14px;font-size:1rem;text-transform:lowercase}

  /* Unlimited */
  .unlimited{background:var(--blurple);color:var(--white);text-align:center;position:relative;overflow:hidden}
  .unlimited .play{color:var(--cyan)}
  .unlimited .actions{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap}
  .pill-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:34px}
  .pill{background:var(--blurple-burst);border-radius:12px;padding:20px 26px;flex:1 1 220px;max-width:320px;text-align:center;color:var(--white)}
  .pill .big{font-family:var(--font-display);font-weight:900;color:var(--cyan);font-size:2rem}
  .pill .lbl{text-transform:uppercase;font-size:.78rem;letter-spacing:.8px;opacity:.9}

  /* App */
  .app .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .app .device{justify-self:center;width:280px;max-width:100%;background:#0b0026;border-radius:42px;padding:14px;
        box-shadow:0 26px 55px rgba(46,0,139,.38);position:relative}
  .app .screen{background:var(--blurple);border-radius:30px;aspect-ratio:9/19;overflow:hidden;position:relative;
        display:flex;flex-direction:column;align-items:center;padding:30px 16px 0;text-align:center;color:#fff}
  .app .notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:92px;height:16px;background:#0b0026;border-radius:10px;z-index:3}
  .app .screen .applogo{width:150px;margin-top:14px}
  .app .appbtn2{background:var(--cyan);color:var(--blurple);font-family:var(--font-display);font-weight:800;text-transform:uppercase;
        letter-spacing:.3px;font-size:.72rem;padding:12px 8px;border-radius:22px;width:100%;text-align:center;margin-top:11px}
  .app .rewards{background:#fff;color:var(--ink);border-radius:16px 16px 0 0;width:100%;margin-top:auto;padding:15px 16px 10px;text-align:left}
  .app .rewards .rlbl{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.66rem;letter-spacing:.3px;color:var(--blurple)}
  .app .rewards .rpts{font-family:var(--font-display);font-weight:900;color:var(--ink);font-size:1.7rem;line-height:1;margin:3px 0 9px}
  .app .rewards .rpts small{font-family:var(--font-body);font-weight:400;font-size:.58rem;color:#777;text-transform:uppercase;letter-spacing:.4px;margin-left:7px}
  .app .rbar{height:6px;background:#e6e0f2;border-radius:4px;overflow:hidden}
  .app .rbar i{display:block;height:100%;width:32%;background:var(--blurple)}
  .app .rticks{display:flex;justify-content:space-between;font-size:.54rem;color:#9a94ad;margin-top:5px}
  .app .appnav{display:flex;justify-content:space-between;align-items:center;background:#fff;width:100%;padding:9px 16px 13px}
  .app .appnav svg{width:19px;height:19px;stroke:#9a96ad;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .app .appnav .on svg{stroke:var(--cyan)}
  .app .appnav .dots-i{fill:#9a96ad;stroke:none}
  .app .appbling{position:absolute;top:58px;right:24px;width:28px;opacity:.95;z-index:2}

  /* Locations */
  .locations{background:var(--blurple);color:var(--white)}
  .locations h2.sec{color:var(--white)}
  .filterbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:30px 0 8px}
  .filterbar button{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.5px;
        padding:11px 20px;border-radius:30px;border:2px solid rgba(255,255,255,.5);background:transparent;color:#fff;cursor:pointer;transition:.15s}
  .filterbar button:hover{border-color:var(--cyan)}
  .filterbar button.active{background:var(--cyan);border-color:var(--cyan);color:var(--blurple)}
  .loc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
  .loc{background:var(--white);border-radius:12px;padding:16px 16px 14px;text-align:left;display:flex;flex-direction:column;gap:6px;
        transition:transform .12s ease, box-shadow .12s ease;cursor:pointer}
  .loc:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.24)}
  .loc:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
  .loc.hide{display:none}
  .loc .go{margin-top:auto;padding-top:8px;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.66rem;letter-spacing:.4px;color:var(--red)}
  .loc:hover .go{color:var(--blurple)}
  .loc b{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.92rem;color:var(--blurple);display:block;line-height:1.1}
  .loc span{font-size:.8rem;color:#555}
  .badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
  .badge{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:.6rem;letter-spacing:.4px;
        padding:4px 8px;border-radius:20px;white-space:nowrap}
  .badge.express{background:var(--paper);color:var(--blurple)}
  .badge.diy{background:#E4F6FC;color:#0077a8}
  .badge.detailing{background:var(--red);color:#fff}
  .badge.interior{background:var(--cyan);color:var(--blurple)}
  .badge.ceramic{background:var(--blurple);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
  .loc-cta{text-align:center;margin-top:34px}

  /* Services matrix */
  .matrix-wrap{margin-top:56px;overflow-x:auto;border-radius:14px}
  .matrix{width:100%;border-collapse:collapse;background:var(--white);color:var(--ink);min-width:620px;border-radius:14px;overflow:hidden}
  .matrix th,.matrix td{padding:11px 12px;text-align:center;border-bottom:1px solid #e7e1f2;font-size:.85rem}
  .matrix thead th{background:var(--blurple-burst);color:#fff;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.72rem;letter-spacing:.4px}
  .matrix tbody th{text-align:left;font-family:var(--font-display);font-weight:800;text-transform:uppercase;color:var(--blurple);font-size:.8rem;white-space:nowrap}
  .matrix tbody tr:nth-child(even){background:var(--paper)}
  .matrix td.yes::before{content:"";display:inline-block;width:16px;height:16px;background:var(--spark) no-repeat center/contain;vertical-align:middle}
  .matrix .no{color:#c9c2dd;font-size:1.1rem}
  .matrix caption{caption-side:top;color:rgba(255,255,255,.9);font-family:var(--font-play);font-style:italic;font-size:1.15rem;padding-bottom:12px}

  /* Location finder band */
  .finder-band{background:var(--blurple-burst);color:#fff;padding:16px 0}
  .finder-band .wrap{display:flex;gap:16px 22px;align-items:center;justify-content:center;flex-wrap:wrap}
  .finder-band .lbl{font-family:var(--font-play);font-style:italic;text-transform:lowercase;font-size:1.35rem;color:#fff;white-space:nowrap}
  .finder{display:flex;gap:10px;flex-wrap:wrap}
  .finder input{padding:14px 18px;border-radius:8px;border:none;min-width:280px;font-size:1rem;font-family:var(--font-body)}
  .finder input:focus{outline:3px solid var(--cyan)}

  /* Free amenities */
  .amenities{background:var(--white)}
  .amen-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:38px}
  .amen-grid>*{flex:0 1 calc((100% - 54px)/4)}
  .amen{background:var(--paper);border-radius:14px;padding:24px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
  .amen svg{width:46px;height:46px;stroke:var(--blurple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .amen .nm{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.82rem;letter-spacing:.3px;color:var(--blurple);line-height:1.15}
  .amen .free{font-family:var(--font-play);font-style:italic;text-transform:lowercase;color:var(--red);font-size:.85rem}

  /* Why teaser */
  .whyt{background:var(--paper)}
  .why-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:34px}
  .why-grid>*{flex:0 1 calc((100% - 44px)/3)}
  .why-card{background:#fff;border-radius:14px;padding:26px 24px;border-top:8px solid var(--cyan);box-shadow:0 8px 24px rgba(46,0,139,.07)}
  /* Coloured by class, not position: nth-child meant reordering or dropping a
     card silently moved the red and purple onto different cards. */
  .why-card.wc-red{border-top-color:var(--red)}
  .why-card.wc-blurple{border-top-color:var(--blurple)}
  .why-card h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;color:var(--blurple);font-size:1.2rem;margin-bottom:8px;line-height:1.05}
  .why-card p{font-size:.95rem}
  .why-cta{text-align:center;margin-top:30px}

  /* Footer */
  footer{background:var(--blurple);color:var(--white);padding:56px 0 30px;font-size:.9rem}
  footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px}
  footer .brand img{height:150px;width:auto;margin-bottom:14px}
  footer h4{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.85rem;letter-spacing:.6px;margin-bottom:14px;color:var(--cyan)}
  footer a{display:block;opacity:.88;padding:4px 0}
  footer a:hover{opacity:1;color:var(--cyan)}
  footer .legal{border-top:1px solid rgba(255,255,255,.2);padding-top:20px;opacity:.7;font-size:.78rem;line-height:1.7}
  footer .legal a{display:inline;padding:0}

  .proto{background:var(--red);color:#fff;text-align:center;font-size:.8rem;padding:8px 16px}
  .proto b{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.5px}

  @media(max-width:900px){
    nav.main{display:none}
    .hero .wrap{grid-template-columns:1fr;text-align:center}
    .hero-man{order:-1}
    .burst{display:none}
    .bling.b2,.bling.b3{display:none}
    .hero h1{margin-top:8px}
    .hero .actions{justify-content:center}
    .hero p.sub{margin-left:auto;margin-right:auto}
    .tier-grid>*{flex-basis:calc((100% - 20px)/2)}
    .amen-grid>*{flex-basis:calc((100% - 18px)/2)}
    .why-grid>*{flex-basis:100%}
    .app .wrap{grid-template-columns:1fr}
    .loc-grid{grid-template-columns:repeat(2,1fr)}
    footer .cols{grid-template-columns:1fr 1fr}
    .util .left{display:none}
  }
  @media(max-width:560px){ .loc-grid{grid-template-columns:1fr} .tier-grid>*,.amen-grid>*{flex-basis:100%} }
  /* Responsive column-count modifiers (use instead of inline grid-template-columns) */
  .tier-grid.g3>*{flex-basis:calc((100% - 40px)/3)}
  .tier-grid.g2>*{flex-basis:calc((100% - 20px)/2)}
  @media(max-width:820px){ .tier-grid.g3>*,.tier-grid.g2>*{flex-basis:calc((100% - 20px)/2)} }
  @media(max-width:560px){ .tier-grid.g3>*,.tier-grid.g2>*{flex-basis:100%} }
/* ============ Location pages (single-location / archive) ============ */
/* padding:0 defeats the global section{padding:70px 0}, which was wrapping the hero
   in 140px of empty blurple. All of the hero's spacing lives on .wrap below. */
.lhero{background:var(--blurple);color:#fff;position:relative;overflow:hidden;padding:0}
/* No photo: one content column. With a photo: two, the photo beside the text rather
   than below it — the text column sets the height and the photo stretches to match,
   so adding a photo costs no extra vertical space. */
.lhero .wrap{display:block;padding:46px 24px 50px;position:relative;z-index:2}
.lhero .wrap.has-photo{display:grid;grid-template-columns:1fr .82fr;gap:34px;align-items:stretch}
.lhero-body{max-width:760px}
.lhero .wrap.has-photo .lhero-body{max-width:none}
.lhero h1{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:14px}
.lhero h1 .play{color:var(--cyan)} /* standard-mode location name; variant overrides via --c-locname */
/* Deliberately the SAME shape as .svc-check below it — same 1fr 1fr, same 22px
   column gap, same 580px cap — so Phone lands exactly on the amenities' second
   column and the hero resolves onto two vertical lines instead of drifting.
   Address spans the full measure on row one, because at 580px every address in
   the data fits on one line and giving it half the width only forced a pointless
   wrap. Hours and Phone then flow into row two, one short line each for 18 of the
   19 locations (all but Alpharetta read "Daily: 8:00 am - 7:00 pm").
   Only the span is declared: letting Hours and Phone flow means this holds at two
   columns and at one, with no placement to undo in the mobile media queries. */
.meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;max-width:580px;
  font-size:.95rem;margin:6px 0 18px}
.meta .m-addr{grid-column:1 / -1}
.meta b{font-family:var(--font-display);text-transform:uppercase;font-size:.72rem;letter-spacing:.4px;color:var(--cyan);display:block}
/* Services as a checklist rather than badge pills, marked with the brand star. */
.svc-check{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 22px;margin:18px 0 0;padding:0;max-width:580px}
.svc-check li{position:relative;padding:5px 0 5px 24px;font-size:.92rem}
.svc-check li::before{content:"";position:absolute;left:0;top:10px;width:14px;height:14px;background:var(--spark) no-repeat center/contain}

/* The location photo, beside the content. position:relative with an absolutely-filled
   image gives this cell no intrinsic height, so the text column alone sizes the row and
   the photo inherits it — that is what keeps a photo from adding page height. The
   column shape lands near the photos' native 3:2, so little is cropped; the
   per-location focus control (--shot-focus) aims whatever is. */
.lhero-shot{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.34)}
.lhero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--shot-focus,50% 45%)}

/* Secondary hero action (Book detailing) — a link, so the two buttons stay primary. */
.lhero .tlink{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.74rem;letter-spacing:.5px;
  color:var(--cyan);border-bottom:2px solid rgba(0,169,224,.45);padding-bottom:2px;align-self:center}
.lhero .tlink:hover{border-bottom-color:var(--cyan)}
.burstbg{position:absolute;top:50%;right:6%;width:520px;transform:translateY(-50%);z-index:1;
  -webkit-mask-image:radial-gradient(circle,#000 42%,transparent 68%);mask-image:radial-gradient(circle,#000 42%,transparent 68%);opacity:.85}
.kick{font-family:var(--font-play);font-style:italic;text-transform:lowercase;color:var(--red);font-size:1.15rem;margin-bottom:4px}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start}
.svc-list{list-style:none;margin-top:14px}
.svc-list li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid #eee;font-size:1rem}
.svc-list li::before{content:"";position:absolute;left:0;top:13px;width:17px;height:17px;background:var(--spark) no-repeat center/contain}
.callout{border-radius:14px;padding:22px 24px;margin-top:14px}
.callout.warn{background:var(--paper);border:2px solid var(--blurple)}
.callout.good{background:var(--cyan);color:var(--blurple)}
.callout h3{font-family:var(--font-display);text-transform:uppercase;font-size:1rem;letter-spacing:.4px;margin-bottom:8px;color:var(--blurple)}
.callout a{font-weight:700;color:var(--blurple);text-decoration:underline}
.map{background:var(--blurple-burst);color:#fff;border-radius:14px;min-height:280px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.5px;text-align:center;padding:20px}
.pkgs{background:var(--white)}
.pkg-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:26px}
.pkg-row>*{flex:0 1 calc((100% - 48px)/4)}
.pkg{background:#fff;border-radius:12px;padding:20px;border-top:7px solid var(--cyan);box-shadow:0 6px 18px rgba(46,0,139,.07)}
.pkg.gold{border-top-color:var(--red)}.pkg.plat{border-top-color:var(--blurple)}
.pkg h4{font-family:var(--font-display);text-transform:uppercase;color:var(--blurple);font-size:1.15rem;margin-bottom:6px}
.pkg p{font-size:.86rem;color:#555}
@media(max-width:820px){
  .two{grid-template-columns:1fr}
  .burstbg{display:none}
  /* Ordered by class, not position. The nth-child version assumed exactly four
     cards, so adding or cutting one scrambled the running order on mobile. */
  .pkg-row>*{flex-basis:100%}
  .pkg.plat{order:1}.pkg.gold{order:2}.pkg.silver{order:3}.pkg.bronze{order:4}
}

/* ============ Location banner, per-tier pricing, About area ============ */
.svc-banner{padding:16px 0}
.svc-banner .wrap{display:flex;gap:12px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap;font-size:1.02rem}
.svc-banner.good{background:var(--cyan);color:var(--blurple)}
.svc-banner.exp{background:var(--paper);color:var(--blurple)}
.svc-banner strong{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.3px}
.small-note{font-size:.86rem;color:#777;margin-top:16px}
.small-note a{color:var(--blurple);text-decoration:underline;font-weight:600}
.pkg{display:flex;flex-direction:column}
.pkg p{flex:1}
.tier-price{margin-top:12px;display:flex;flex-direction:column;gap:3px;border-top:1px solid #eee;padding-top:10px}
.tier-price .single{font-family:var(--font-display);color:var(--blurple);font-size:1.05rem}
.tier-price .unlim{font-family:var(--font-display);color:var(--red);font-size:1.05rem}
.tier-price em{font-style:normal;color:#888;font-weight:400;font-size:.72rem;text-transform:uppercase;letter-spacing:.3px}
.about-area{background:#fff}
.about-area .wrap{max-width:840px}
.about-area .about-body p{font-size:1.02rem;margin-bottom:12px;color:#333}

/* ---- Emphasize Unlimited price in tier cards ---- */
.tier-price{gap:5px}
.tier-price .unlim{font-family:var(--font-display);font-weight:900;color:var(--red);font-size:1.5rem;line-height:1;letter-spacing:.3px}
.tier-price .unlim em{font-style:normal;font-family:var(--font-body);color:#888;font-size:.62rem;text-transform:uppercase;letter-spacing:.4px;margin-left:5px}
.tier-price .single{font-family:var(--font-body);color:#555;font-size:.82rem;font-weight:600}

/* ---- Interior cleaning add-on card (interior sites only) ---- */
.interior-addon{padding:0 0 56px}
.interior-addon .ia-card{background:var(--blurple);color:#fff;border-radius:18px;padding:34px 36px;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.interior-addon .ia-prices{display:flex;flex-direction:column;gap:16px}
.interior-addon .ia-price{background:var(--burst);border-radius:12px;padding:16px 20px}
.interior-addon .ia-price .amt{display:block;font-family:var(--font-display);font-weight:900;color:var(--cyan);font-size:2.9rem;line-height:1}
.interior-addon .ia-price .amt em{font-style:normal;font-size:.5em;color:#fff;opacity:.8}
.interior-addon .ia-price .lbl{display:block;font-size:.85rem;opacity:.92;margin-top:4px}

/* ---- About area: text only (the location photo sits in the hero, .lhero-shot) ---- */
.about-grid{display:block}
@media(max-width:820px){
  .interior-addon .ia-card{grid-template-columns:1fr}
}

/* ---- Location hero: center burst behind The Man + badge spacing ---- */
.badges{gap:8px;margin:22px 0 26px}
.burstbg{top:50%;left:50%;right:auto;transform:translate(-50%,-46%);width:470px}

/* ---- Location pages: tighter on mobile (most traffic is phones) ---- */
@media(max-width:820px){
  .lhero .wrap{padding:26px 24px 30px}
  /* stack the photo under the text and let it take a natural 3:2 box */
  .lhero .wrap.has-photo{grid-template-columns:1fr;gap:24px}
  /* Stacked, so the photo needs its own height. The image stays absolutely positioned:
     an in-flow img would size the box from its own ratio and aspect-ratio would be
     ignored, which is what a 3:2 photo did here before. */
  .lhero-shot{aspect-ratio:16/9}
  section{padding:40px 0}
  .lhero h1{font-size:2.1rem}
  .two{gap:24px}
  .meta{gap:6px 20px}
}

/* ============ Form / booking pages ============ */
.form-hero{background:var(--blurple);color:#fff;padding:44px 0}
.form-hero h1{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:10px}
.form-hero .play{color:var(--cyan)}
.form-hero p{max-width:60ch;opacity:.95}
.form-wrap{max-width:780px;margin:0 auto}
.scheduler-embed{background:var(--paper);border:2px dashed var(--cyan);border-radius:14px;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--blurple);font-family:var(--font-display);text-transform:uppercase;padding:26px;gap:10px;margin-bottom:26px}
.scheduler-embed span{font-family:var(--font-body);text-transform:none;color:#777;font-size:.85rem;max-width:44ch;line-height:1.5}
.form-note{background:#fff7d6;border:1px solid #e6cf6b;color:#665200;border-radius:8px;padding:10px 14px;font-size:.82rem;margin:14px 0}
/* Make WPForms match the brand */
.wpforms-container input[type=text],.wpforms-container input[type=email],.wpforms-container input[type=tel],.wpforms-container input[type=number],.wpforms-container input[type=date],.wpforms-container input[type=time],.wpforms-container select,.wpforms-container textarea{border:1.5px solid #e7e1f2 !important;border-radius:8px !important;padding:12px 14px !important;font-family:var(--font-body) !important}
.wpforms-container .wpforms-field-label{font-family:var(--font-display) !important;text-transform:uppercase !important;font-size:.72rem !important;letter-spacing:.4px !important;color:var(--blurple) !important}
.wpforms-container button[type=submit]{background:var(--red) !important;color:#fff !important;font-family:var(--font-display) !important;text-transform:uppercase !important;letter-spacing:.5px !important;border:none !important;border-radius:8px !important;padding:14px 28px !important}

/* ============ Platinum emphasis (homepage tiers + location packages) ============ */
.tier{position:relative}
.tier.platinum{box-shadow:0 18px 44px rgba(46,0,139,.24);outline:2px solid var(--blurple)}
.tier .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-family:var(--font-display);text-transform:uppercase;font-size:.62rem;letter-spacing:.5px;padding:6px 13px;border-radius:20px;white-space:nowrap}
.tier li strong{color:var(--blurple)}
.tier .pkg-note{font-size:.72rem;color:#888;margin-top:10px;text-align:left;line-height:1.4}
.pkg{position:relative}
.pkg .ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-family:var(--font-display);text-transform:uppercase;font-size:.58rem;letter-spacing:.4px;padding:5px 11px;border-radius:20px;white-space:nowrap}
.pkg.plat{outline:2px solid var(--blurple);box-shadow:0 14px 34px rgba(46,0,139,.2)}
.pkg .pkg-note{font-size:.7rem;color:#888;margin-top:8px;line-height:1.4}

/* ============ Blog ============ */
.blog-hero{background:var(--blurple);color:#fff;padding:44px 0}
.blog-hero h1{font-size:clamp(2rem,4vw,2.8rem)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.post-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(46,0,139,.08);display:flex;flex-direction:column}
.post-card .thumb{aspect-ratio:16/9;background:var(--paper);overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .pc-body{padding:20px;display:flex;flex-direction:column;flex:1}
.post-card .cat{font-family:var(--font-display);text-transform:uppercase;font-size:.62rem;letter-spacing:.4px;color:var(--red);margin-bottom:6px}
.post-card h3{font-family:var(--font-display);text-transform:uppercase;color:var(--blurple);font-size:1.05rem;line-height:1.12;margin-bottom:8px}
.post-card h3 a:hover{color:var(--cyan)}
.post-card p{font-size:.9rem;color:#555;flex:1}
.post-card .rm{margin-top:12px;font-family:var(--font-display);text-transform:uppercase;font-size:.72rem;color:var(--red)}
.post-meta{color:#888;font-size:.82rem;margin-bottom:10px}
.single-post .wrap{max-width:760px}
.single-post .entry{font-size:1.05rem}
.single-post .entry p{margin-bottom:16px}
.single-post .entry h2,.single-post .entry h3{color:var(--blurple);margin:22px 0 10px}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:34px}
.pagination .page-numbers{padding:8px 14px;border-radius:8px;background:#fff;color:var(--blurple);font-family:var(--font-display);text-decoration:none}
.pagination .page-numbers.current{background:var(--cyan)}
@media(max-width:820px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.post-grid{grid-template-columns:1fr}}

/* ---- Home hero: full mascot on desktop, compact lockup on mobile ---- */
.hero-lockup{display:none}
@media(max-width:900px){
  .hero-man img.man{display:none}
  .hero-lockup{display:block;width:230px;height:auto;margin:0 auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.3))}
}

@media(max-width:900px){.bling{display:none}}

/* ---- Tier benefit blurb + Platinum-first on mobile ---- */
.tier .blurb{font-size:.88rem;color:#555;line-height:1.45;margin:4px 0 6px;text-align:left}
/* Wash tiers only. Unscoped, this also reordered every other .tier-grid that
   uses .gold/.platinum purely as colour modifiers: on mobile the Ceramic
   packages ran $1,000, $1,600, $1,400 and the Family Plan examples ran
   backwards, against the order the templates deliberately set. */
@media(max-width:560px){
  .tier-grid:not(.g2):not(.g3) .tier.platinum{order:1}
  .tier-grid:not(.g2):not(.g3) .tier.gold{order:2}
  .tier-grid:not(.g2):not(.g3) .tier.silver{order:3}
  .tier-grid:not(.g2):not(.g3) .tier.bronze{order:4}
}

/* ---- Footer menus (wp_nav_menu output) render like the link lists ---- */
footer .footer-menu{list-style:none;margin:0;padding:0}
footer .footer-menu li{padding:0}
footer .footer-menu a{display:block;padding:4px 0}

/* ---- Tier left-align, 3-col amenities, finder centering on mobile ---- */
.tier{text-align:left}
/* The card is a stretch-aligned flex column, so the button fills its width — the
   label needs its own centering or it inherits the card's left-align. */
.tier .btn{text-align:center}

/* Price block on a tier card (mrc_home_price_html / mrc_tier_price_html): optional
   playful line, then either the homepage price + small print or the varies line. */
.tier .price{display:flex;flex-direction:column;gap:3px;container-type:inline-size}
/* Platinum's playful line keeps the brand voice — it's the only tier with one. */
.tier .price-flourish{font-family:var(--font-play);font-style:italic;color:var(--blurple);font-size:1rem}
/* "price varies by location" is a disclaimer, not a price. Plain body type so it
   reads as a separate, quieter line instead of matching the flourish above it. */
.tier .price-varies{font-family:var(--font-body);font-style:normal;color:#555;font-size:.85rem;letter-spacing:0;text-transform:none}
.tier .price-amt{font-family:var(--font-display);font-style:normal;font-weight:900;font-size:1.7rem;line-height:1.05;letter-spacing:.3px;text-transform:none}
.tier .price-note{font-family:var(--font-body);font-style:normal;color:#888;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
/* Two prices per card, Unlimited first. Equal type size so neither reads as a
   correction of the other; the divider sits on the single-wash side because
   Unlimited leads. minmax(0,1fr) rather than 1fr so a long figure can shrink
   instead of forcing the card wider — "$44.99" is already 6 characters of Forza
   in a column about 95px wide at the four-across breakpoint. */
.tier .price-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  font-family:var(--font-body);font-style:normal;text-transform:none;margin-top:2px}
.tier .price-pair .pp{min-width:0}
/* Size the figure to the CARD, not the viewport. The squeeze is real but narrow:
   only in the four-across band (roughly 900-1120px) is a column too tight for
   "$44.99" at full size -- 93px of Forza into an 82px column. A media query would
   have to re-encode the .tier-grid breakpoints and would still be wrong for the
   g3/g2 variants on /ceramic/ and /family-plans/, which change columns at 820px
   instead. cqi asks the card how much room it actually has. The floor is set low
   enough never to bind: the narrowest card in the four-across band is ~155cqi,
   where the formula yields ~17px, well above 1rem. */
.tier .price-pair .pp-amt{font-family:var(--font-display);font-weight:900;
  font-size:clamp(1rem, 12.4cqi - 2px, 1.5rem);
  line-height:1.05;letter-spacing:.2px;display:block}
.tier .price-pair .pp-lbl{display:block;font-size:.63rem;font-weight:600;color:#888;
  text-transform:uppercase;letter-spacing:.4px;line-height:1.25;margin-top:2px}
.tier .price-pair .unl .pp-amt{color:var(--red)}
.tier .price-pair .single .pp-amt{color:var(--blurple)}
.tier .price-pair .single{padding-left:10px;border-left:1px solid #EAE4F4}
.amen-grid{max-width:840px;margin-left:auto;margin-right:auto}
.amen-grid>*{flex-basis:calc((100% - 36px)/3)}
@media(max-width:600px){ .amen-grid>*{flex-basis:calc((100% - 18px)/2)} }
@media(max-width:620px){
  .finder-band .wrap{flex-direction:column}
  .finder{width:100%;max-width:420px;flex-wrap:nowrap}
  .finder input{min-width:0;flex:1}
}

.logo img{height:60px;width:auto}

/* ---- Header: keep logo proportional + nav from wrapping/cramping ---- */
.logo{flex-shrink:0}
.logo img{height:60px;width:auto;max-width:none}
nav.main a{white-space:nowrap}
header.nav .cta{flex-shrink:0}

/* ---- Mobile hamburger menu ---- */
.navtoggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:6px}
.navtoggle span{display:block;width:26px;height:3px;background:var(--blurple);border-radius:2px;transition:.25s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobilemenu{display:none;background:var(--blurple)}
.mobilemenu.open{display:block}
.mobilemenu ul{list-style:none;margin:0;padding:0}
.mobilemenu li{list-style:none}
.mobilemenu a{display:block;color:#fff;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1rem;letter-spacing:.5px;padding:15px 24px;border-top:1px solid rgba(255,255,255,.12)}
.mobilemenu a:hover{background:var(--blurple-burst);color:var(--cyan)}
@media(max-width:900px){
  .navtoggle{display:flex}
  header.nav .cta .btn{padding:11px 15px;font-size:.75rem}
}

/* The header collapsed to the hamburger at 900px, but the desktop row — protected
   logo, five links, and the Buy Unlimited button — needs about 1040px to fit. In
   the gap between the two, the CTA pushed past the viewport and EVERY page
   scrolled sideways. Collapsing the nav at the width it actually stops fitting
   fixes it sitewide; 900px stays as-is for the hero and grid changes, which are
   unrelated to whether the nav fits. */
@media(max-width:1040px){
  nav.main{display:none}
  .navtoggle{display:flex}
  header.nav .wrap{gap:16px}
}

/* ============ FAQ page ============ */
.faq-hero{background:var(--blurple);color:#fff;padding:44px 0}
.faq-hero h1{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:14px}
.faq-hero .play{color:var(--cyan)}
.faq-search{max-width:760px;margin:0 auto}
.faq-search input{width:100%;padding:15px 18px;border-radius:10px;border:none;font-size:1rem;font-family:var(--font-body)}
.faq-search input:focus{outline:3px solid var(--cyan)}
.faq-wrap{max-width:860px;margin:0 auto}
.faq-nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 10px}
.faq-nav a{font-family:var(--font-display);text-transform:uppercase;font-size:.72rem;letter-spacing:.4px;padding:9px 16px;border-radius:30px;background:var(--paper);color:var(--blurple)}
.faq-nav a:hover{background:var(--cyan)}
.faq-cat{margin-top:40px}
.faq-cat h2{font-family:var(--font-display);text-transform:uppercase;color:var(--blurple);font-size:1.4rem;margin-bottom:6px;padding-bottom:8px;border-bottom:3px solid var(--cyan)}
.faq-item{border-bottom:1px solid #e7e1f2}
.faq-item summary{cursor:pointer;padding:16px 42px 16px 0;position:relative;font-family:var(--font-display);text-transform:uppercase;font-size:.95rem;letter-spacing:.3px;color:var(--blurple);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:8px;top:12px;font-size:1.5rem;line-height:1;color:var(--red);font-family:var(--font-display)}
.faq-item[open] summary::after{content:"\2013"}
.faq-item .faq-a{padding:0 0 18px;color:#333;font-size:1rem;line-height:1.6}
.faq-item .faq-a a{color:var(--blurple);text-decoration:underline;font-weight:600}
.faq-item .faq-a ul{margin:8px 0 0 20px}
.faq-item .faq-a li{margin-bottom:5px}
.faq-noresult{display:none;color:#777;padding:26px 0;text-align:center;font-size:1.05rem}

/* ---- FAQ: tighten spacing under the hero ---- */
.faq-hero{padding:40px 0 30px}
.faq-body{padding:26px 0 56px}
.faq-nav{margin:0 0 4px}
.faq-cat{margin-top:26px}
.faq-cat:first-of-type{margin-top:4px}

/* FAQ category sections are nested — cancel base section padding */
.faq-cat{padding:0;margin-top:30px}
.faq-cat:first-of-type{margin-top:4px}

.faq-cat:first-of-type{margin-top:22px}

/* ============ Legal pages (Terms, Privacy) ============ */
.legal-hero{background:var(--blurple);color:#fff;padding:44px 0}
.legal-hero h1{font-size:clamp(2rem,4.4vw,2.8rem)}
.legal-hero .meta{opacity:.85;font-size:.9rem;margin-top:10px}
.legal-wrap{max-width:820px;margin:0 auto}
.legal-intro p{color:#333;line-height:1.7;margin-bottom:14px}
.legal-toc{background:var(--paper);border-radius:12px;padding:20px 24px;margin:24px 0 8px}
.legal-toc h2{font-family:var(--font-display);text-transform:uppercase;font-size:.78rem;letter-spacing:.4px;color:var(--blurple);margin-bottom:10px}
.legal-toc a{display:block;color:var(--blurple);text-decoration:none;padding:4px 0;font-size:.92rem}
.legal-toc a:hover{text-decoration:underline;color:var(--red)}
.legal-body h2{font-family:var(--font-display);text-transform:uppercase;color:var(--blurple);font-size:1.2rem;margin:34px 0 10px;scroll-margin-top:90px}
.legal-body p{margin-bottom:14px;color:#333;line-height:1.7}
.legal-body ul{margin:0 0 14px 22px}
.legal-body li{margin-bottom:6px;color:#333;line-height:1.6}
.legal-body a{color:var(--blurple);text-decoration:underline}

/* ============ Location manager / team card ============ */
.gm-sec{background:#fff}
.gm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:16px}
.gm{background:var(--paper);border-radius:16px;padding:22px 24px;display:flex;gap:18px;align-items:center}
.gm .gm-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;flex-shrink:0}
.gm .gm-ph{width:88px;height:88px;border-radius:50%;background:var(--blurple);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2.2rem;flex-shrink:0}
.gm .gm-role{font-family:var(--font-display);text-transform:uppercase;font-size:.68rem;letter-spacing:.4px;color:var(--red)}
.gm .gm-name{font-family:var(--font-display);text-transform:uppercase;color:var(--blurple);font-size:1.2rem;line-height:1.1;margin-top:2px}
.gm .gm-bio{font-size:.9rem;color:#555;margin-top:6px;line-height:1.5}

.team-block.has-divider{margin-top:34px;border-top:1px solid #e7e1f2;padding-top:28px}

/* ---- Team folded into a titled box (tighter) ---- */
.team-block.has-divider{margin-top:22px;border-top:none;padding-top:0}
.gm-box{background:var(--paper);border-radius:16px;padding:22px 24px}
.gm-box-title{font-family:var(--font-play);font-style:italic;font-weight:600;text-transform:lowercase;color:var(--blurple);font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1;margin-bottom:4px}
.gm-box-sub{color:#5a5a66;font-size:.95rem;margin:0 0 18px}
.gm-box .gm{background:none;padding:0}
/* Brand section dividers: cyan sparkle between same-color sections */
.packages+.amenities::before,.pkgs::before,.pkgs+.interior-addon::before,.interior-addon+.about-area::before,.pkgs+.about-area::before,.faq-body+.faq-cat::before{content:"";display:block;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20'%3E%3Cline x1='30' y1='10' x2='125' y2='10' stroke='%23e7e1f2' stroke-width='2'/%3E%3Cline x1='175' y1='10' x2='270' y2='10' stroke='%23e7e1f2' stroke-width='2'/%3E%3Cpath d='M150 1 L153 7 L159 10 L153 13 L150 19 L147 13 L141 10 L147 7 Z' fill='%2300A9E0'/%3E%3C/svg%3E") center / 300px 20px no-repeat}
.packages+.amenities::before,.pkgs::before,.pkgs+.interior-addon::before,.interior-addon+.about-area::before,.pkgs+.about-area::before{margin:-70px auto 70px}
.faq-body+.faq-cat::before{margin:-48px auto 48px}
@media(max-width:820px){.packages+.amenities::before,.pkgs::before,.pkgs+.interior-addon::before,.interior-addon+.about-area::before,.pkgs+.about-area::before{margin:-40px auto 40px}}

/* ============ Why Mr. Clean page ============ */
.whero{background:var(--blurple);color:#fff;position:relative;overflow:hidden}
/* .whero is a <section>, so it inherits section{padding:70px 0}. That 70px at the top
   was pure empty blurple above the eyebrow, and it pushed the fold past the start of
   the next section: hero bottom sat 836px down the page (38px utility bar + 84px nav +
   714px hero), so on any window shorter than about 900px nothing below the hero peeked
   and the page looked like it ended there.

   The bottom band stays, because The Man's negative margin is measured through it --
   but it is now 64px rather than 70+54, and it lives here alone rather than being
   split with .wrap. Keep it equal to .whero .man's margin-bottom. */
.whero{padding-top:0;padding-bottom:64px}

/* Why the hero is as tall as it is, since it is not obvious and it was wrong for a
   while: the bottom band is entirely absorbed by The Man's negative margin, so
   padding down there costs nothing and buys nothing. Hero height is only ever
   `.wrap`'s TOP padding + the figure's visible height. Trimming the hero therefore
   means cropping the figure, and cropping is free here -- object-fit:cover holds the
   figure at a fixed scale (width comes from the pose's own aspect), so a smaller
   height shows less of his legs rather than shrinking him. That was the worry that
   made these heroes tall in the first place.

   Measured before: every interior hero was 560px with the copy ending around 360,
   leaving 201px of flat blurple under it on all fourteen pages. */
.whero.no-figure,.whero.has-shot{padding-bottom:34px}

.whero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;padding:44px 24px 0;position:relative;z-index:2}
.whero h1{font-size:clamp(2.4rem,5vw,3.8rem);margin-bottom:14px}
.whero p{max-width:42ch;opacity:.95;font-size:1.1rem}
/* Desktop hero crop. Interior heroes used to show the whole figure at ~510px, which
   next to the homepage's close crop read small and left a lot of empty blurple. The
   homepage fills its column and lets object-fit:cover clip the legs, showing about the
   top half of the figure; this does the same, but drives the crop off a chosen FIGURE
   height instead of the column width.

   Why: with cover, figure height = box width / aspect. Sizing off the column alone
   would scale each pose differently -- gun-show is 648px wide against arms-crossed's
   387px at the same 1200px height -- so the widest poses would render smallest. Setting
   the width from the pose's own aspect keeps them all near --figure-h instead. The wide
   poses still hit max-width and cap out below it, which is the right way round: arms
   held out genuinely need more room, so they give up a little height for it.

   Only ever applies to desktop: below 861px .whero .man is display:none. */
.whero .man{justify-self:start;align-self:end;
  /* justify-self:start rather than center pulls the narrow poses over against the
     copy instead of floating them in the middle of their column -- arms-crossed only
     needs 403 of the 537px track, so centring left ~67px of dead blurple between the
     headline and him. The wide poses fill the track and land the same either way. */
  --figure-h:1250px;
  width:calc(var(--pose-a,.3225) * var(--figure-h));max-width:100%;
  height:clamp(400px,42vw,505px);
  object-fit:cover;object-position:center top;
  /* Pulls the straight crop edge down through the section's bottom padding so it
     lands flush with the hero's bottom rather than floating as a hard line above
     it. Must equal .whero's padding-bottom exactly: too little and he stops short,
     too much and he hangs into the section below.

     The band used to be split across the wrap (54px) and the section (70px), which
     meant two numbers to keep in step. It is now one, on the section, with the
     wrap's bottom padding at 0. */
  margin-bottom:-64px;filter:drop-shadow(0 18px 28px rgba(0,0,0,.4));position:relative;z-index:2}
/* Short windows only. Tall screens keep the full-size figure; below 900px of viewport
   height the scroll cue matters more than the last 70px of Mr. Clean, so the figure and
   the top padding both give a little back. Keyed on height, not width, because that is
   what actually decides whether anything shows below the fold. */
@media(min-width:861px) and (max-height:900px){
  .whero .wrap{padding-top:32px}
  .whero .man{height:clamp(370px,38vw,450px)}
}
.wburst{display:none} /* retired the spiky sunburst — read as bug legs behind The Man */
.whero::before{content:"";position:absolute;top:44%;left:calc(50% + 320px);width:min(58vw,720px);height:min(58vw,720px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,.05) 40%,transparent 66%);z-index:1;pointer-events:none}
.block{padding:56px 0}
.block .wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.block.altbg{background:var(--paper)}
.block.altbg .txt{order:2}
.block h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;color:var(--blurple);font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.02;margin-bottom:12px}
.block p{font-size:1.05rem;margin-bottom:12px}
.block .lnk{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.4px;color:var(--red)}
.block .lnk:hover{color:var(--blurple)}
.viz{border-radius:20px;min-height:280px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.viz.blurple{background:var(--blurple)}.viz.cyan{background:var(--cyan)}.viz.red{background:var(--red)}.viz.paper{background:var(--paper)}
.viz svg{width:120px;height:120px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.viz.paper svg{stroke:var(--blurple)}
.viz .big-bling{width:120px}
.viz .manimg{height:300px;width:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.3))}
/* width:auto is required, not cosmetic. mrc_man_img() prints intrinsic width and
   height attributes so the hero reserves the right box and does not reflow while the
   figure loads — but anywhere the CSS constrains only the height, the browser keeps
   the attribute's width and the figure comes out stretched. Every rule that sets a
   height on a pose must therefore also set width:auto. */
.nf-man{width:auto}
.whypage-cta{background:var(--blurple-burst);color:#fff;text-align:center;padding:56px 0}
.whypage-cta h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:2rem;margin-bottom:8px}
.whypage-cta .play{color:var(--cyan)}
@media(max-width:860px){.whero .wrap,.block .wrap{grid-template-columns:1fr}.whero .man{display:none}.wburst{display:none}.block.altbg .txt{order:0}.viz{min-height:220px}
  /* The figure is hidden here, so nothing bleeds into the bottom band and it is
     pure empty blurple. Stacked on the next section's own 56px it was a very long
     wait for the next heading on a phone. */
  .whero,.whero.no-figure,.whero.has-shot{padding-bottom:40px}
}

/* Fix: WPForms "medium" field size set a fixed select height that clipped the
   option text against the theme's field padding. Let selects grow to fit. */
.wpforms-container select{height:auto !important;min-height:46px !important;line-height:1.5 !important}

/* Fix: WPForms default confirmation message is green — make it on-brand. */
.wpforms-confirmation-container,.wpforms-confirmation-container-full{background:var(--paper) !important;border:2px solid var(--blurple) !important;color:var(--ink) !important;border-radius:12px !important;padding:22px 24px !important}
.wpforms-confirmation-container p,.wpforms-confirmation-container-full p{color:var(--ink) !important}
.wpforms-confirmation-container a,.wpforms-confirmation-container-full a{color:var(--blurple) !important;font-weight:600}

/* ---- Location hero: fill width, larger meta, evenly-sized buttons (mobile) ---- */
.lhero .meta a{color:#fff;text-decoration:none}
.lhero .meta a:hover{text-decoration:underline}
@media(max-width:820px){
  .lhero .wrap{padding:30px 24px 34px}
  .lhero h1{font-size:clamp(2.4rem,11.5vw,3.4rem);line-height:.95;margin-bottom:16px}
  .lhero .meta{font-size:1.08rem;gap:10px 30px;margin:8px 0 20px}
  .lhero .meta b{font-size:.82rem;margin-bottom:2px}
  .lhero .svc-check{margin:16px 0 20px;grid-template-columns:1fr}
  /* two fact columns still fit at tablet width; phones drop to one, below */
  .lhero .meta{grid-template-columns:1fr 1fr;max-width:none}
  .lhero .actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
  .lhero .actions .btn{width:100%;text-align:center;justify-content:center;padding:14px 12px;font-size:.82rem}
  .lhero .actions .tlink{grid-column:1 / -1;justify-self:start}
}
@media(max-width:560px){
  /* the address needs the full width to itself once the column is this narrow */
  .lhero .meta{grid-template-columns:1fr}
}

/* ---- Location hero action buttons: tidy desktop layout (mobile handled separately) ---- */
@media(min-width:821px){
  .lhero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
  .lhero .actions .btn{text-align:center;justify-content:center}
  /* Four buttons: even 2x2 grid instead of an orphaned 4th on its own row */

}

/* ============ Homepage hero refresh + Variant color scheme ============ */
:root{ --c-finder:#0047BB; --c-locations:#0047BB; --c-map:#0047BB; --c-unlimited:#9B26B6; --c-interior:#9B26B6; --c-why:#9B26B6; --c-pkgkicker:#00B2A9; --c-amenities:#FF6900; --c-locname:#00A9E0; --c-locdir:#00A9E0; --c-locunl:#EE2737; --gold:#FDDA25; }

/* Hero headline: centered stack, each line scaled to fill the width (justified look) */
.hero-head{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:0}
.hero-head span{display:block;line-height:.9}
.hero-head .hl{white-space:nowrap;font-size:2rem}
.hero-head .cars{white-space:nowrap;text-align:center;color:var(--cyan);line-height:1.02;font-size:2rem}
.hero-head .mr-logo{display:block;width:62%;height:auto;margin-top:.06em}

/* Wash-tier car-wash icons */
.tier-ico{width:44px;height:44px;display:block;margin:0 auto 10px;stroke:var(--blurple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tier.bronze .tier-ico,.tier.silver .tier-ico{stroke:var(--cyan)}
.tier.gold .tier-ico{stroke:var(--red)}
.tier.platinum .tier-ico{stroke:var(--blurple)}

/* Desktop (>=901px): big hip-cropped Man; headline centered in its column */
@media(min-width:901px){
  /* .hero is a <section>, which picks up the global `section{padding:70px 0}`.
     That 70px bottom band was showing as empty blurple between the Man and the
     finder bar. Zero it here; the hero manages its own spacing via `.hero .wrap`. */
  .hero{padding:0}
  .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:end;padding-top:44px;padding-bottom:0}
  .hero .wrap>div:first-child{align-self:start;padding-top:0;padding-bottom:44px}
  .hero-man{align-self:stretch;justify-self:center;position:relative;width:100%;height:auto;min-height:500px;overflow:hidden}
  .hero-man img.man{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;max-width:none;margin:0}
}

/* ---- Variant (colorful) scheme: each section has its own Customizer color picker ---- */
/* Page heroes and the footer intentionally stay blurple, matching the homepage's main hero. */
.scheme-variant .finder-band{background:var(--c-finder)}
.scheme-variant .locations{background:var(--c-locations)}
.scheme-variant .map{background:var(--c-map)}
.scheme-variant .unlimited{background:var(--c-unlimited)}
.scheme-variant .interior-addon .ia-card{background:var(--c-interior)}
.scheme-variant .whypage-cta{background:var(--c-why)}
.scheme-variant .whyt .kicker.on-light{color:var(--c-why)}
.scheme-variant .packages .kicker.on-light{color:var(--c-pkgkicker)}
.scheme-variant .amenities .kicker.on-light{color:var(--c-amenities)}
.scheme-variant .amen svg{stroke:var(--c-amenities)}
.scheme-variant .amen .free{color:var(--c-amenities)}
/* Location pages: customizable name text + hero buttons (variant scheme) */
.scheme-variant .lhero h1 .play{color:var(--c-locname)}
.scheme-variant .lhero .actions .btn-cyan{background:var(--c-locdir)}
.scheme-variant .lhero .actions .btn-red{background:var(--c-locunl)}
/* NOTE: wash-package tab + icon colors are fixed (see "Fixed wash-package colors"
   block at end of file) and are intentionally NOT recolored by the variant scheme
   or by the Customizer color pickers. */

/* Hero headline as a single brand image (with hidden SEO text) */
.hero-headline{margin:0}
.hero-headline img{display:block;width:100%;height:auto;max-width:560px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.hero .bling{display:none}

/* ============ Fixed wash-package colors ============ */
/* Bronze / Silver / Gold / Platinum tabs (border-top) and icons use these exact
   metallic hues in BOTH the Standard and Variant schemes. They are literal values,
   so the Customizer color pickers (core + variant accents) never change them. */
:root{
  --pkg-bronze:#CE8946;
  --pkg-silver:#C4C4C4;
  --pkg-gold:#EFBF04;
  --pkg-platinum:#00A9E0;
}
/* Tier cards (homepage, ceramic, family-plans) — tab + icon */
.tier.bronze,   .scheme-variant .tier.bronze   {border-top-color:var(--pkg-bronze)}
.tier.silver,   .scheme-variant .tier.silver   {border-top-color:var(--pkg-silver)}
.tier.gold,     .scheme-variant .tier.gold     {border-top-color:var(--pkg-gold)}
.tier.platinum, .scheme-variant .tier.platinum {border-top-color:var(--pkg-platinum)}
.tier.bronze .tier-ico,   .scheme-variant .tier.bronze .tier-ico   {stroke:var(--pkg-bronze)}
.tier.silver .tier-ico,   .scheme-variant .tier.silver .tier-ico   {stroke:var(--pkg-silver)}
.tier.gold .tier-ico,     .scheme-variant .tier.gold .tier-ico     {stroke:var(--pkg-gold)}
.tier.platinum .tier-ico, .scheme-variant .tier.platinum .tier-ico {stroke:var(--pkg-platinum)}
/* Package cards (location + service pages) — tab */
.pkg.bronze, .scheme-variant .pkg.bronze {border-top-color:var(--pkg-bronze)}
.pkg.silver, .scheme-variant .pkg.silver {border-top-color:var(--pkg-silver)}
.pkg.gold,   .scheme-variant .pkg.gold   {border-top-color:var(--pkg-gold)}
.pkg.plat,   .scheme-variant .pkg.plat   {border-top-color:var(--pkg-platinum)}

/* Buy Unlimited modal (main.js builds the markup) */
html.mrc-modal-lock{overflow:hidden}
.mrc-modal{position:fixed;inset:0;z-index:9999;display:none}
.mrc-modal.open{display:block}
.mrc-modal-backdrop{position:absolute;inset:0;background:rgba(11,0,38,.66)}
.mrc-modal-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(760px,94vw);height:min(88vh,900px);background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(11,0,38,.5)}
.mrc-modal-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--blurple);color:#fff}
.mrc-modal-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.5px;font-size:1rem;font-weight:800}
.mrc-modal-new{margin-left:auto;color:#fff;font-size:.82rem;font-weight:600;text-decoration:underline;opacity:.9}
.mrc-modal-new:hover{opacity:1}
.mrc-modal-x{background:transparent;border:0;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;padding:0 4px}
.mrc-modal-frame-wrap{position:relative;flex:1;min-height:0;background:#fff}
.mrc-modal-loading{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--blurple);font-family:var(--font-display);font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;font-size:.9rem;opacity:.6}
.mrc-modal.is-loaded .mrc-modal-loading{display:none}
/* Inline-content variant of the modal (the Go Unlimited one holds an iframe).
   Height follows the content up to a ceiling, rather than always filling 88vh —
   a short form shouldn't sit in a tall empty box, and a long one still scrolls. */
.mrc-modal-box.is-content{height:auto;max-height:min(88vh,900px)}
.mrc-modal-body{flex:1;min-height:0;overflow:auto;background:#fff;padding:24px}
.mrc-modal-body .mrc-form-grid{margin-top:0}
@media(max-width:520px){ .mrc-modal-body{padding:18px 16px} }
.mrc-modal-frame{width:100%;height:100%;border:0;display:block}
@media (max-width:600px){
  .mrc-modal-box{width:100vw;height:100vh;border-radius:0;top:0;left:0;transform:none}
}

/* Location finder: status message + per-card distance pill */
.finder-msg{width:100%;text-align:center;color:#fff;font-size:.9rem;margin:2px 0 0;min-height:1.15em;opacity:.95}
.finder-msg:empty{display:none;min-height:0;margin:0}
.loc{position:relative}
/* Name and distance pill share one flex row, so a long city name can never end up
   underneath the pill. min-width:0 lets the name wrap instead of shoving the pill
   out of the card. */
.loc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.loc-head b{min-width:0}
/* Must be .loc .loc-dist, not .loc-dist: `.loc span` (0,1,1) outweighs a bare
   `.loc-dist` (0,1,0) and would paint the label #555 on blurple — about 1.8:1,
   i.e. unreadable. The extra class keeps colour and size on the pill's own rule. */
.loc .loc-dist{flex:none;background:var(--blurple);color:#fff;font-family:var(--font-display);font-weight:800;font-size:.68rem;line-height:1.2;letter-spacing:.3px;padding:5px 9px;border-radius:999px;text-transform:uppercase;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.2)}
/* Nearest result after a "find nearest" sort — make the reorder obvious */
.loc--nearest{outline:3px solid var(--cyan);outline-offset:-1px}
.loc--nearest .loc-dist{background:var(--red)}

/* 404 page */
.notfound{background:var(--blurple);color:#fff;text-align:center;padding:70px 0 84px}
.notfound .wrap{max-width:720px}
.notfound .nf-man{width:150px;height:auto;margin:0 auto 18px;display:block}
.notfound h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:14px}
.notfound .nf-lead{opacity:.92;max-width:52ch;margin:0 auto 22px;line-height:1.6}

/* Cookie notice (main.js builds the markup) */
.mrc-cookie{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:var(--blurple);color:#fff;box-shadow:0 -6px 24px rgba(11,0,38,.35)}
.mrc-cookie-inner{max-width:1180px;margin:0 auto;padding:16px 22px;display:flex;gap:14px 26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mrc-cookie-txt{font-size:.86rem;line-height:1.5;margin:0;max-width:74ch}
.mrc-cookie-txt a{color:#fff;text-decoration:underline}
.mrc-cookie-btns{display:flex;gap:10px;flex-shrink:0}
.mrc-cookie .btn{padding:10px 20px}
@media (max-width:600px){
  .mrc-cookie-inner{flex-direction:column;align-items:stretch}
  .mrc-cookie-btns{justify-content:flex-end}
}

/* Custom lead forms */
.mrc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.mrc-field--full{grid-column:1 / -1}
.mrc-field label{display:block;font-weight:700;font-size:.86rem;color:var(--blurple);margin-bottom:6px}
.mrc-field .req{color:var(--red)}
.mrc-form input,.mrc-form select,.mrc-form textarea{width:100%;padding:12px 14px;border:1.5px solid #d9d5e6;border-radius:9px;font-size:1rem;font-family:var(--font-body);background:#fff;color:#222}
.mrc-form input:focus,.mrc-form select:focus,.mrc-form textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,169,224,.25)}
.mrc-form textarea{resize:vertical}
.mrc-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.mrc-captcha{margin-top:18px;min-height:65px}
.mrc-form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.mrc-form-status{margin:0;font-size:.9rem;color:var(--blurple)}
.mrc-form-status.is-error{color:var(--red);font-weight:600}
.mrc-form-done{background:var(--paper);border:2px solid var(--blurple);color:var(--blurple);padding:18px 20px;border-radius:12px;font-weight:600}
.mrc-form-done:focus{outline:none}
.mrc-form-done p{margin:0;font-weight:400;line-height:1.55}
.mrc-done-title{margin:0 0 8px;font-family:var(--font-display,inherit);text-transform:uppercase;font-size:1.5rem;line-height:1.1}
.mrc-done-ref{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin:18px 0 4px;padding:18px;background:#fff;border-radius:12px}
.mrc-done-reflab{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.mrc-done-refno{font-family:'Arial Black',Arial,sans-serif;font-size:1.5rem;letter-spacing:.12em}
.mrc-done-refhint{font-size:.78rem;font-weight:400;color:#5a5a66}
.mrc-done-steps{margin-top:18px}
.mrc-done-steps h4{margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.mrc-done-steps ol{margin:0;padding-left:1.2em}
.mrc-done-steps li{margin-bottom:8px;line-height:1.45}
.mrc-done-steps li span{display:block;font-weight:400;color:#5a5a66;font-size:.88rem}
.mrc-hint{display:block;margin-top:5px;font-size:.78rem;color:#5a5a66;line-height:1.4}
.mrc-when{display:none}
.mrc-when.is-shown{display:block}
@media (max-width:560px){ .mrc-form-grid{grid-template-columns:1fr} }

/* Manage Membership: app how-to stepper */
.app-steps{list-style:none;counter-reset:step;max-width:600px;margin:26px auto 0;padding:0;text-align:left}
.app-steps li{position:relative;padding:0 0 20px 62px;line-height:1.5;color:#222;font-size:1.05rem}
.app-steps li:last-child{padding-bottom:0}
.app-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-3px;width:40px;height:40px;border-radius:50%;background:var(--blurple);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.1rem;display:flex;align-items:center;justify-content:center}
.app-steps li:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:2px;width:2px;background:rgba(46,0,139,.18)}
.app-steps-alt{max-width:600px;margin:8px auto 0;padding:14px 18px;background:var(--paper);border-radius:12px;font-size:.92rem;color:#333;text-align:left}
.mm-support{background:var(--paper);padding:26px 0 40px}
.mm-support p{color:#555;font-size:.98rem;margin:0}
.mm-support a{color:var(--blurple);font-weight:600;text-decoration:underline}
/* Manage Membership: interactive app walkthrough (carousel + tap markers) */
.app-howto-lead{text-align:center;font-family:var(--font-play);font-style:italic;color:var(--blurple);font-size:1.05rem;margin:34px 0 0}
.app-walk{position:relative;max-width:360px;margin:22px auto 48px;display:flex;align-items:center;justify-content:center}
.app-walk-view{overflow:hidden;width:250px}
.app-walk-track{display:flex}                 /* flex stretches all slides to the tallest -> no height jump */
.app-walk-slide{min-width:100%;display:flex;flex-direction:column;align-items:center}
.phone{position:relative;width:100%;background:#0b0026;border-radius:28px;padding:8px;box-shadow:0 16px 40px rgba(11,0,38,.3)}
.phone img{display:block;width:100%;border-radius:20px}
.tap{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;border:3px solid var(--cyan);background:rgba(0,169,224,.15);z-index:2;pointer-events:none;animation:tapPulse 1.5s infinite}
@keyframes tapPulse{0%{box-shadow:0 0 0 0 rgba(0,169,224,.55)}70%{box-shadow:0 0 0 15px rgba(0,169,224,0)}100%{box-shadow:0 0 0 0 rgba(0,169,224,0)}}
.app-walk-slide figcaption{margin-top:16px;font-size:.95rem;color:#333;line-height:1.45;max-width:250px}
.app-walk-slide .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--blurple);color:#fff;font-family:var(--font-display);font-weight:800;font-size:.78rem;margin-right:7px;vertical-align:middle}
.app-walk-arw{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:0;background:var(--blurple);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;margin:0 6px}
.app-walk-arw:hover{background:var(--cyan)}
.app-walk-dots{position:absolute;bottom:-32px;left:0;right:0;display:flex;gap:8px;justify-content:center}
.app-walk-dots .awd{width:10px;height:10px;border-radius:50%;border:0;background:rgba(46,0,139,.25);cursor:pointer;padding:0}
.app-walk-dots .awd.on{background:var(--blurple)}
@media(prefers-reduced-motion:reduce){ .tap{animation:none} .app-walk-track{transition:none} }

/* Manage Membership: FAQ accordion */
.mm-faq{margin:24px auto 0;max-width:760px}
.mm-faq details{border:1px solid #e3e0ec;border-radius:12px;background:#fff;margin-bottom:12px}
.mm-faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-family:var(--font-display);text-transform:uppercase;font-size:.88rem;letter-spacing:.3px;color:var(--blurple);display:flex;justify-content:space-between;align-items:center;gap:14px}
.mm-faq summary::-webkit-details-marker{display:none}
.mm-faq summary::after{content:"+";font-size:1.4rem;color:var(--cyan);line-height:1;flex:0 0 auto}
.mm-faq details[open] summary::after{content:"\2013"}
.mm-faq p{margin:0;padding:0 20px 18px;color:#333;line-height:1.6;font-size:.95rem}
.mm-faq a{color:var(--blurple);text-decoration:underline}

/* ---- Careers / Join Our Team ---- */
.perk-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:940px;margin:34px auto 0}
.perk-grid>*{flex:0 1 calc((100% - 36px)/3)}
.perk{background:#fff;border-radius:14px;padding:26px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(46,0,139,.07)}
.perk svg{width:44px;height:44px;stroke:var(--blurple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.perk .nm{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.82rem;letter-spacing:.3px;color:var(--blurple);line-height:1.15}
.perk .sub{font-family:var(--font-play);font-style:italic;text-transform:lowercase;color:var(--red);font-size:.9rem;line-height:1.25}
@media(max-width:820px){ .perk-grid>*{flex-basis:calc((100% - 18px)/2)} }
@media(max-width:520px){ .perk-grid>*{flex-basis:100%} }
/* Four-item variant. The default 3-up leaves a four-step row as 3 + 1, which
   reads as a mistake. This goes 4 across, then 2 x 2, then stacked — never an
   orphan. */
.perk-grid--four{max-width:1040px}
.perk-grid--four>*{flex-basis:calc((100% - 54px)/4)}
@media(max-width:980px){ .perk-grid--four{max-width:720px} .perk-grid--four>*{flex-basis:calc((100% - 18px)/2)} }
@media(max-width:520px){ .perk-grid--four>*{flex-basis:100%} }

/* Open-positions hand-off card. The Paycom portal is NOT iframed: it ships its
   own header bar, nav, cookie banner and brand colours, none of which can be
   restyled from a cross-origin frame. Linking out keeps this page on-brand and
   avoids the SameSite cookie problems that break in-frame applications. */
.jobs-sec{background:var(--paper)}
.jobs-card{background:#fff;border-radius:18px;max-width:680px;margin:0 auto;padding:44px 32px;text-align:center;box-shadow:0 10px 34px rgba(46,0,139,.10)}
.jobs-ico{width:56px;height:56px;stroke:var(--blurple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.jobs-card h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;color:var(--blurple);font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.05;margin-bottom:10px}
.jobs-card p{font-size:1.02rem;max-width:44ch;margin:0 auto 22px}
.jobs-note{font-size:.82rem !important;color:#6b6b78;margin:14px auto 0 !important}
@media(max-width:560px){ .jobs-card{padding:34px 22px} }

/* ============================================================
   Home page — search-first locations section (replaces the old
   four-column .loc-grid). Fixed height regardless of how many
   locations exist; see the comment in front-page.php.
   ============================================================ */
.findbox{position:relative;display:flex;align-items:center;gap:10px;max-width:560px;
  margin:22px auto 0;background:var(--white);border-radius:12px;padding:5px 6px 5px 16px}
.findbox-ico{display:flex;color:var(--blurple);flex:none}
.findbox-ico svg{width:18px;height:18px}
.findbox input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--font-body);font-size:1rem;padding:14px 0;color:var(--ink)}
.findbox input::placeholder{color:#8b83a0}
.findbox .btn{flex:none;padding:12px 18px;font-size:.78rem}
.findlist{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--white);
  border-radius:12px;overflow:hidden;z-index:20;text-align:left;
  box-shadow:0 16px 38px rgba(10,4,30,.42)}
.findlist[hidden]{display:none}
.findlist button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;background:none;border:none;border-bottom:1px solid #EAE8EF;cursor:pointer;
  font-family:var(--font-body);text-align:left}
.findlist button:last-child{border-bottom:none}
.findlist button:hover,.findlist button:focus-visible{background:var(--paper);outline:none}
.findlist .fn{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:.78rem;color:var(--blurple);letter-spacing:.3px}
.findlist .fs{font-size:.72rem;color:#6a6280;margin-top:2px}
.findlist .fd{font-size:.7rem;font-weight:800;color:var(--red);white-space:nowrap;
  font-variant-numeric:tabular-nums}

.top3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;text-align:left}
.t3{background:var(--white);border-radius:12px;padding:18px 17px;display:flex;flex-direction:column;
  gap:7px;color:var(--ink);transition:transform .13s ease,box-shadow .13s ease}
.t3:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.24)}
.t3:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.t3-top{display:flex;justify-content:space-between;align-items:center;gap:9px}
.t3-name{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:.9rem;color:var(--blurple);letter-spacing:.3px;line-height:1.1}
.t3-dist{font-family:var(--font-display);font-weight:800;font-size:.64rem;color:#fff;
  background:var(--red);padding:4px 9px;border-radius:999px;white-space:nowrap;
  font-variant-numeric:tabular-nums;flex:none}
.t3-addr{font-size:.78rem;color:#544c66}
.t3 .badges{margin:auto 0 0;padding-top:8px}
.t3 .go{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:.64rem;letter-spacing:.5px;color:var(--red)}
.t3:hover .go{color:var(--blurple)}

.all-locs{margin-top:24px;font-size:.86rem;line-height:2;color:rgba(255,255,255,.92)}
.all-locs-lab{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:.62rem;letter-spacing:.8px;color:var(--cyan);margin-right:10px}
.all-locs a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.32);
  text-underline-offset:3px}
.all-locs a:hover{color:var(--cyan);text-decoration-color:var(--cyan)}
.all-locs .sep{opacity:.4;margin:0 4px}

@media(max-width:760px){
  .top3{grid-template-columns:1fr}
  .findbox{flex-wrap:wrap;padding:10px}
  .findbox input{padding:8px 0}
  .findbox .btn{width:100%}
}

/* ============================================================
   /locations/ — search-first, with the sortable service table under it.
   Replaced the Leaflet map and the region-grouped rows. See
   archive-location.php for why the map went.
   ============================================================ */
.locpage .wrap{text-align:left}
.locpage-head{max-width:760px;padding-top:8px}
.locpage-head h1{margin-bottom:12px}
.locpage-head .lead{margin-left:0}

/* search */
.locsearch{margin-top:24px}
.locsearch-box{display:flex;align-items:center;gap:10px;background:var(--white);
  border-radius:12px;padding:5px 6px 5px 16px;max-width:620px}
.lsi{display:flex;color:var(--blurple);flex:none}
.lsi svg{width:18px;height:18px}
.locsearch-box input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--font-body);font-size:1rem;padding:14px 0;color:var(--ink)}
.locsearch-box input::placeholder{color:#8b83a0}
/* The theme's .btn is display:inline-block with no rule for an svg child, so the
   icon rendered at a replaced element's default size — a ~120px square — and the
   label stacked underneath it. Both of those need fixing here, not globally:
   inline-flex to sit the icon beside the text, and an explicit icon size. */
.locsearch-box .btn{flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:13px 17px;font-size:.74rem;line-height:1;white-space:nowrap}
.locsearch-box .btn svg{width:16px;height:16px;flex:none;display:block}
.locsearch-msg{margin-top:11px;font-size:.86rem;color:rgba(255,255,255,.86);font-weight:600;min-height:1.3em}

/* result rows */
.locresults{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.lr{display:grid;grid-template-columns:112px 1fr auto;gap:0;background:var(--white);
  color:var(--ink);border-radius:12px;overflow:hidden;align-items:stretch;
  transition:transform .12s ease,box-shadow .12s ease}
.lr:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22)}
.lr:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.lr.hide{display:none}
.lr--near{box-shadow:0 0 0 3px var(--cyan)}
.lr--near:hover{box-shadow:0 0 0 3px var(--cyan),0 12px 26px rgba(0,0,0,.22)}
.lr-ph{background:#0E0430;position:relative;min-height:104px}
.lr-ph img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.lr-bd{padding:14px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.lr-nm{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:.92rem;color:var(--blurple);letter-spacing:.3px;line-height:1.12}
.lr-ad{font-size:.79rem;color:#544c66}
.lr-bg{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:7px}
.lr-rt{padding:14px 18px 14px 8px;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;gap:8px;text-align:right}
.lr-dist{font-family:var(--font-display);font-weight:800;font-size:.66rem;color:#fff;
  background:var(--red);padding:5px 10px;border-radius:999px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.lr-go{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:.63rem;letter-spacing:.5px;color:var(--red);white-space:nowrap}
.lr:hover .lr-go{color:var(--blurple)}
.locresults-none{margin-top:18px;font-size:.92rem;color:rgba(255,255,255,.9)}
.lnk-btn{background:none;border:none;padding:0;font:inherit;color:var(--cyan);
  font-weight:700;text-decoration:underline;cursor:pointer}

/* the table beneath */
.loctable-wrap{margin-top:54px;padding-top:40px;border-top:1px solid rgba(255,255,255,.2)}
.loctable-h{margin-bottom:8px}
/* The section heading is flush left, so the intro under it must be too: .lead is
   `margin:0 auto` at 60ch, which centres the box and leaves the text ~300px in. */
.loctable-wrap .lead{margin-left:0}
.locpage .filterbar{justify-content:flex-start;margin:0 0 16px}
table.matrix.sortable thead th{cursor:pointer;user-select:none;white-space:nowrap}
table.matrix.sortable thead th span{display:inline-flex;align-items:center;gap:6px}
/* Arrow drawn in CSS so the sorted column is obvious without an extra element. */
table.matrix.sortable thead th span::after{content:"\2195";opacity:.34;font-size:.9em}
table.matrix.sortable thead th[aria-sort] span::after{opacity:1}
table.matrix.sortable thead th[aria-sort="ascending"] span::after{content:"\2191"}
table.matrix.sortable thead th[aria-sort="descending"] span::after{content:"\2193"}
table.matrix.sortable thead th:hover span,
table.matrix.sortable thead th:focus-visible span{color:var(--white)}
table.matrix.sortable th[scope="row"] a{text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
table.matrix.sortable th[scope="row"] a:hover{color:var(--cyan);text-decoration-color:var(--cyan)}
table.matrix td.dist{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
table.matrix tr.hide{display:none}
/* Screen-reader-only: the tick cells carry no text otherwise, so a screen reader
   would read an empty column.
   The cells must be position:relative. Without a positioned ancestor these absolute
   spans resolve against the initial containing block and land at their static
   position — which, inside a table 981px wide that scrolls inside its wrapper, is
   past the right edge of the viewport. Three 1px spans out there stretched the
   document and gave every narrow screen a horizontal scrollbar. */
.matrix th,.matrix td,.matrix caption{position:relative}
.scr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The locations heading takes the brand lemon rather than cyan — it sits on
   blurple, where lemon is the stronger of the two (10.2:1 against 5.2:1). */
.locpage-head h1 .play{color:var(--lemon)}

@media(max-width:760px){
  .lr{grid-template-columns:96px 1fr}
  /* Distance and the CTA drop to their own row, which leaves the photo column
     spanning two rows — cap it or a 96px-wide photo stretches to 150 tall. */
  .lr-ph{grid-row:1;max-height:104px}
  .lr-rt{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;
    padding:0 18px 14px;text-align:left}
}
/* On a phone a 96px-wide column of a landscape storefront is a vertical sliver
   with no building in it. Below this the photo becomes a banner across the top of
   the card instead, which is the only width where the shot is actually legible.
   Capped so nineteen rows don't turn into nineteen screens. */
@media(max-width:620px){
  .lr{grid-template-columns:1fr}
  .lr-ph{grid-row:1;width:100%;aspect-ratio:16/9;max-height:180px;min-height:0}
  .lr-bd{padding:14px 16px 0}
  .lr-rt{padding:12px 16px 14px}
}
/* The field and the button only stop fitting side by side well below tablet width.
   Wrapping at 760 stacked them on screens with 200px to spare. */
@media(max-width:560px){
  .locsearch-box{flex-wrap:wrap;padding:10px}
  .locsearch-box input{padding:8px 0;min-width:0}
  .locsearch-box .btn{width:100%;justify-content:center}
}

/* ============================================================
   Photography. Photos replace the icon in the .viz slot on the
   service and story blocks, so no block layout changes — see
   mrc_photo_viz() in functions.php.
   ============================================================ */
/* min-width:0 and max-width:100% are both load-bearing. .viz is a flex box and
   .viz-wrap a grid item, and a flex/grid item's default min-width:auto refuses to
   shrink below its min-content — which, combined with width:100% and a fixed
   aspect-ratio, pushed these blocks about 9px past the viewport on 360px phones
   and made every page with a photo scroll sideways. */
.viz.photo{padding:0;background:none;border-radius:14px;overflow:hidden;
  box-shadow:0 14px 34px rgba(20,10,50,.26);aspect-ratio:3/2;
  width:100%;max-width:100%;min-width:0}
.viz-wrap{min-width:0}
.viz.photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Portrait variant. Capped rather than filling the column: at the full ~538px track a
   3:4 photo is 717px tall and towers over the paragraph beside it, which turns a
   supporting picture into the subject of the section. 420px keeps it a photo. */
.viz.photo.tall{aspect-ratio:3/4;max-width:420px;margin-inline:auto}
@media(max-width:860px){.viz.photo.tall{max-width:320px}}

/* Home-page "Why Mr. Clean" cards: photo above the heading. */
.why-card .why-shot{display:block;margin:-4px -4px 14px;border-radius:10px;overflow:hidden;
  aspect-ratio:16/9}
.why-card .why-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* On the narrowest phones the header row — unshrinkable logo, Buy Unlimited, and
   the hamburger — ran about 6px past the viewport, so the whole page scrolled
   sideways. The logo scales down proportionally here, which is a size change and
   not the stretch/squish the brand guidelines prohibit; .logo keeps
   flex-shrink:0 so flex can still never squash it. Padding and the CTA tighten
   with it so the button survives on mobile, where it converts hardest. */
@media(max-width:480px){
  .logo img{height:44px}
  header.nav .wrap{gap:10px;padding:0 14px}
  header.nav .cta .btn{padding:10px 12px;font-size:.7rem;letter-spacing:.3px}
  .navtoggle{padding:6px;margin-left:0}
}

/* 360px-class phones (older Androids, first-gen SE) are still real traffic and
   still couldn't fit the row. One more proportional step on the logo clears it
   without dropping the CTA, which is the last thing to sacrifice on mobile. */
@media(max-width:380px){
  .logo img{height:38px}
  header.nav .wrap{gap:8px;padding:0 12px;height:72px}
  header.nav .cta .btn{padding:9px 10px;font-size:.66rem}
}

/* ---- Free amenities: one real photograph beside the checklist ----
   Replaced a grid of six mono-line icons. Only two of the six amenities are
   photographed anywhere in the library, so the section leads with the vacuum
   bays rather than inventing the other four. See front-page.php. */
.amen-split{display:grid;grid-template-columns:1fr .9fr;gap:38px;align-items:center;text-align:left}
.amen-txt .kicker,.amen-txt h2{text-align:left}
.amen-txt .lead{margin-left:0;max-width:52ch}
.amen-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;
  margin:22px 0 0;padding:0;max-width:520px}
.amen-list li{position:relative;padding:7px 0 7px 26px;font-size:.95rem;font-weight:600}
.amen-list li::before{content:"";position:absolute;left:0;top:12px;width:15px;height:15px;
  background:var(--spark) no-repeat center/contain}
.amen-shot{border-radius:14px;overflow:hidden;box-shadow:0 16px 38px rgba(20,10,50,.24);
  aspect-ratio:3/2;min-width:0}
.amen-shot img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){
  .amen-split{grid-template-columns:1fr;gap:24px}
  .amen-shot{order:-1}
}
@media(max-width:520px){
  .amen-list{grid-template-columns:1fr}
}

/* Keeps a phrase together so a headline breaks where we choose, not mid-phrase. */
.nb{white-space:nowrap}

/* ============ Ceramic gallery (/ceramic/) ============ */
/* A scroll rail, not a grid. Eight frames in a 3-up grid runs three rows deep on desktop
   and eight screens deep on a phone, on a page that already carries the packages table
   above it. Native scroll-snap does all the scrolling -- swipe, the arrow
   buttons, or the arrow keys once it has focus -- so the rail still scrolls with JS off;
   main.js only adds the buttons and the end-of-rail state, and only once it has run.

   Portrait 4:5 tiles on purpose. The ceramic library is 354 portrait frames against 2
   landscape, so a 3:2 tile would throw away half of every shot; 4:5 trims ~250px off a
   4032px-tall source. aspect-ratio keeps the rail even whatever the source, and cover
   means a stray frame can't distort. */
.cer-work{padding:56px 0}
.cer-rail{position:relative;margin-top:32px}
.cer-gallery{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;
  overscroll-behavior-x:contain}
.cer-gallery::-webkit-scrollbar{display:none}
/* The rail is focusable so it can be scrolled with the arrow keys, which means it also
   needs a visible ring; the tiles themselves clip, so the ring goes on the scroller. */
.cer-gallery:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:14px}
.cer-gallery figure{flex:0 0 calc((100% - 32px)/3);margin:0;border-radius:14px;overflow:hidden;
  background:#EFEAF7;aspect-ratio:4/5;min-width:0;scroll-snap-align:start}
.cer-gallery img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
@media(hover:hover){.cer-gallery figure:hover img{transform:scale(1.04)}}
/* Arrows are hidden until main.js adds .ready, so they are never visible-but-dead. They
   show at every width, including phones: a swipe is not the only way people meet this rail
   -- a narrowed desktop window has no touch, the scrollbar is hidden, and a wheel scrolls
   the page rather than the rail, which left it with no way to scroll at all. */
.cer-arw{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:0;background:var(--blurple);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;padding:0;
  box-shadow:0 4px 14px rgba(11,0,38,.28);transition:background .2s ease,opacity .2s ease}
.cer-arw:hover{background:var(--cyan)}
.cer-prev{left:-18px}
.cer-next{right:-18px}
.cer-rail.ready .cer-arw{display:flex;align-items:center;justify-content:center}
.cer-rail.at-start .cer-prev,.cer-rail.at-end .cer-next{opacity:0;pointer-events:none}
/* Fractional basis below 860px leaves the next tile peeking, so the rail reads as having
   more in it rather than as a single photo, before anyone reaches for an arrow. */
@media(max-width:860px){
  .cer-gallery{gap:12px}
  .cer-gallery figure{flex-basis:74%}
  /* Inside the edges rather than in the gutter -- there is no gutter to spare at this
     width, and an arrow hanging outside the rail would put the page into overflow. */
  .cer-arw{width:34px;height:34px;font-size:1.25rem}
  .cer-prev{left:6px}
  .cer-next{right:6px}
}
@media(max-width:430px){.cer-gallery{gap:9px}.cer-gallery figure{flex-basis:82%}}
@media(prefers-reduced-motion:reduce){
  .cer-gallery{scroll-behavior:auto}
  .cer-gallery img{transition:none}
  .cer-gallery figure:hover img{transform:none}
}

/* ============ Detailing services menu (page-detailing-services.php) ============ */

/* The flat rate, stated once above the menu instead of on all five cards. */
.det-flat{text-align:center;font-family:var(--font-display);font-weight:900;color:var(--red);
  font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;letter-spacing:.5px;margin-top:18px}
.det-flat span{font-family:var(--font-play);font-style:italic;font-weight:400;
  text-transform:lowercase;color:var(--blurple);font-size:.4em;letter-spacing:0;margin-left:6px}

/* Flex, not grid. The menu is five cards, and no fixed column count divides into five
   without stranding a remainder: 4 leaves one alone, and grid's 3+2 leaves the second
   row ragged against the left edge with a card-shaped hole beside it. Wrapping flex
   items with justify-content:center gives 3 over a centred 2, and degrades to 2+2+1
   and then 1 -- every row centred, no hole, at any width. */
.det-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:32px auto 0;max-width:980px}
.det-card{flex:0 1 300px;background:#fff;border-radius:12px;padding:22px 20px;
  border-top:7px solid var(--cyan);box-shadow:0 6px 18px rgba(46,0,139,.07)}
.det-card h3{font-family:var(--font-display);text-transform:uppercase;color:var(--blurple);
  font-size:1.02rem;letter-spacing:.3px;line-height:1.15;margin-bottom:8px}
.det-card p{font-size:.88rem;color:#555;line-height:1.5}
@media(max-width:560px){ .det-card{flex-basis:100%} }

/* À la carte menu. Rows are dt/dd pairs wrapped in a div -- valid inside a dl, and
   the only way to flex a term against its price without losing the list semantics.
   Deliberately quiet: an earlier pass had a dotted leader on every row on top of a
   rule between every row, so eight prices carried fifteen lines and the list read as
   ruling rather than as a menu. The price is right-aligned instead, which is what the
   leader was there to help with, and the rules are barely-there hairlines. */
.alc{max-width:760px;margin:30px auto 0;background:#fff;border-radius:14px;
  padding:10px 28px;box-shadow:0 6px 18px rgba(46,0,139,.07)}
.alc dl{margin:0}
.alc .alc-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:16px 0;
  border-bottom:1px solid #F6F3FB}
.alc .alc-row:last-child{border-bottom:0}
.alc dt{font-weight:700;color:var(--blurple);min-width:0}
.alc .alc-hint{display:block;font-weight:400;font-size:.82rem;color:#8A8A96;line-height:1.4;margin-top:3px}
.alc dd{margin:0;font-family:var(--font-display);font-weight:900;color:var(--red);
  font-size:1.02rem;letter-spacing:.3px;white-space:nowrap;text-align:right}
@media(max-width:480px){
  .alc{padding:10px 18px}
  .alc .alc-row{gap:14px}
}

/* ---- Location links inside body copy (mrc_location_name_list) ---- */
/* --blurple-burst rather than --blurple: these sit in body copy set in --ink
   (#1a0b3d), and #2E008B against that is two dark purples -- the underline was doing
   all the work. #1E22AA is visibly bluer and brighter, and 11:1 on white. Red was the
   other candidate and was dropped: 4.2:1 on white fails AA at body size. */
.loc-lnk{color:var(--blurple-burst);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;font-weight:600}
.loc-lnk:hover,.loc-lnk:focus-visible{color:var(--red)}
/* Safety net for any dark band that does carry one of these lists. White, not cyan:
   the band's colour is customiser-driven, and on the variant scheme's #9B26B6 cyan
   measured 2.32:1 while white is 6.27:1. The underline is the affordance here. */
.whypage-cta .loc-lnk{color:var(--white)}
.whypage-cta .loc-lnk:hover,.whypage-cta .loc-lnk:focus-visible{color:var(--lemon)}

/* ---- Rotating offer: top strip + homepage band (inc/offers.php) ---- */
/* The strip ships visible and is hidden before first paint by the head script in
   inc/offers.php, when that script finds this offer's key already in localStorage.
   It used to be the other way round — `hidden` on the element, revealed by main.js
   from the footer — which meant every page painted without the strip and then shifted
   the whole document down. Do not put `hidden` back on the markup.

   The trade is that with JavaScript off the strip always shows and cannot be
   dismissed, where before it never showed at all. That is the better failure: the
   offer is the point, and a stale dismissal is cheaper than a shift on every view. */
.mrc-offer-off .offer-bar{display:none}
/* …but the dismiss button is not offered when it could not work. `mrc-js` is set by
   that same head script, so it is present whenever scripting is. */
.offer-bar-x{display:none}
.mrc-js .offer-bar-x{display:block}
.offer-bar{background:var(--lemon);color:var(--blurple)}
.offer-bar .wrap{position:relative;display:flex;align-items:center;gap:10px 18px;padding:10px 24px}
/* The anchor is the whole strip minus the close button, so the copy is tappable. */
.offer-bar-link{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:4px 16px;
  flex-wrap:wrap;color:inherit;text-decoration:none}
.offer-bar-head{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  letter-spacing:.3px;font-size:.92rem;line-height:1.25}
.offer-bar-sub{font-size:.88rem;line-height:1.35;opacity:.85}
.offer-bar-cta{margin-left:auto;flex:0 0 auto;background:var(--blurple);color:var(--white);
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  font-size:.8rem;padding:8px 16px;border-radius:999px}
.offer-bar-x{flex:0 0 auto;background:none;border:0;cursor:pointer;color:var(--blurple);
  font-size:1.5rem;line-height:1;padding:0 2px;opacity:.7}
/* hover:hover only. On a touch screen the hover state latches after the tap, which
   left a red button sitting on the yellow strip until the next navigation. */
@media(hover:hover){
  .offer-bar-cta:hover{background:var(--red)}
  .offer-bar-x:hover{opacity:1}
}
.offer-bar-link:focus-visible,.offer-bar-x:focus-visible{outline:2px solid var(--blurple);outline-offset:2px}
.offer-bar-x:focus-visible{opacity:1}

/* Phones and tablets: three tight lines instead of two lines plus a pill. The button
   drops its chrome and becomes an underlined line of text with an arrow — the tap
   target is the whole strip by then, so the pill was only ever costing height.
   Roughly 40% of the strip's height comes back, which on a 375px screen is most of
   the logo.

   860px rather than a phone-width breakpoint, matching the one the rest of the theme
   uses. Between the two, the headline and the small print no longer fit on one line
   and the pill wrapped onto a row of its own, leaving the close button stranded at
   the top of an empty column. */
@media(max-width:860px){
  .offer-bar .wrap{gap:0;padding:9px 46px 10px 20px}
  .offer-bar-link{flex-direction:column;align-items:flex-start;gap:2px;width:100%}
  .offer-bar-head{font-size:.84rem;letter-spacing:.2px}
  .offer-bar-sub{font-size:.75rem;opacity:.8}
  .offer-bar-cta{margin:2px 0 0;padding:0;background:none;color:var(--blurple);
    font-size:.75rem;border-radius:0;text-decoration:underline;text-underline-offset:3px;
    text-decoration-thickness:1.5px}
  .offer-bar-cta::after{content:" \2192";text-decoration:none;display:inline-block;margin-left:3px}
  /* Full-height strip on the right rather than a 20px glyph: a dismiss control has to
     be hittable one-handed, and it must not sit where a thumb reaching for the offer
     will find it. */
  .offer-bar-x{position:absolute;top:0;right:0;bottom:0;width:46px;padding:0;
    display:flex;align-items:center;justify-content:center;font-size:1.35rem;opacity:.7}
}

/* Homepage band. Red rather than the strip's yellow: on the homepage it sits between
   the finder and the package cards and has to read as its own section, not as a
   second utility bar. */
.offer-band{background:var(--red);color:var(--white);padding:38px 0}
.offer-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.offer-band-copy{flex:1 1 420px;min-width:0}
.offer-band .kicker{color:var(--lemon)}
.offer-band h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0}
.offer-band .lead{margin:10px 0 0;opacity:.95;max-width:56ch}
.offer-band-act{flex:0 0 auto;text-align:center}
.offer-band-act .btn-red{background:var(--white);color:var(--red)}
.offer-band-act .btn-red:hover,.offer-band-act .btn-red:focus-visible{background:var(--lemon);color:var(--blurple)}
.offer-band-fine{margin:10px 0 0;font-size:.78rem;opacity:.85}

/* ---- Promotion landing pages (single-promo.php, inc/promos.php) -----------
   Built out of the chrome the rest of the site already uses — .whero for the top,
   .block for the sections, .faq-item for the questions, .whypage-cta for the join
   band — so a promo page looks like part of the site rather than a microsite that
   happens to share a logo. Only the price table and the benefit list are new. */

/* A promo with no Mr. Clean chosen: one column, and the copy given room to breathe
   rather than sitting in a 1.05fr track with nothing beside it. */
.promo-hero.no-figure .wrap{grid-template-columns:1fr}
.promo-hero.no-figure .wrap > div{max-width:34em}

/* The offer stated in one line, between the headline and the paragraph. Heavier and
   larger than body copy because on a promo page it is the actual proposition —
   people who read two things read the headline and this. */
.promo-sub{font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:600;line-height:1.3;
  margin:14px 0 12px;max-width:24ch}
.promo-hero p{margin-bottom:10px}

.promo-h2{text-align:center;margin-bottom:18px}
.promo-sec .wrap > .promo-h2 + .promo-prose{margin-top:0}
.promo-act{text-align:center;margin-top:28px}

/* Free-form copy: the "what the offer is" field, and anything written in the block
   editor. Measured rather than full-width — a 1200px line of prose is unreadable. */
.promo-prose{max-width:62ch;margin:0 auto}
.promo-prose > *{margin-bottom:14px}
.promo-prose > *:last-child{margin-bottom:0}
.promo-prose p{font-size:1.05rem}
.promo-prose h2,.promo-prose h3{font-family:var(--font-display);text-transform:uppercase;
  color:var(--blurple);line-height:1.05;margin-top:26px}
.promo-prose h2{font-size:1.5rem}
.promo-prose h3{font-size:1.15rem}
.promo-prose ul,.promo-prose ol{margin-left:22px}
.promo-prose li{margin-bottom:6px}
.promo-prose a{color:var(--blurple);text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* The price table. Horizontally scrollable rather than squeezed, for the window
   between the stacked layout and a table that fits — a promo can have any number of
   columns, so there is no width at which it is guaranteed to fit. */
.promo-table-wrap{max-width:940px;margin:0 auto;overflow-x:auto}
.promo-table{width:100%;border-collapse:collapse;background:var(--white);
  border-radius:14px;overflow:hidden;box-shadow:0 2px 14px rgba(46,0,139,.08)}
.promo-table th,.promo-table td{padding:14px 16px;text-align:left;font-size:.98rem;
  border-bottom:1px solid #e7e1f2;vertical-align:middle}
.promo-table thead th{background:var(--blurple);color:var(--white);
  font-family:var(--font-display);text-transform:uppercase;font-size:.74rem;
  letter-spacing:.5px;border-bottom:0;white-space:nowrap}
.promo-table tbody th[scope=row]{font-family:var(--font-display);text-transform:uppercase;
  color:var(--blurple);font-size:.95rem;letter-spacing:.3px;white-space:nowrap}
/* The last column is the promotional price — the one number the page exists to
   show. Driven off :last-child rather than a class so it follows the table however
   many columns a future promo has. */
.promo-table tbody td:last-child{font-family:var(--font-display);color:var(--red);
  font-size:1.05rem;white-space:nowrap}
.promo-table tbody tr:last-child th,.promo-table tbody tr:last-child td{border-bottom:0}
.promo-table tbody tr:nth-child(even){background:#faf9fc}
.promo-tablenote{max-width:940px;margin:16px auto 0;text-align:center;
  font-family:var(--font-play);font-style:italic;color:var(--blurple);font-size:1.15rem}

@media(max-width:700px){
  /* Each row becomes its own card, every value labelled with the column heading it
     came from. Five columns at 375px is not a table anybody can read, and dropping
     columns would drop the price comparison the page is built around. */
  .promo-table,.promo-table tbody,.promo-table tr,.promo-table th,.promo-table td{display:block}
  .promo-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .promo-table{box-shadow:none;background:transparent;border-radius:0}
  .promo-table tbody tr{background:var(--white);border-radius:14px;margin-bottom:14px;
    padding:6px 4px;box-shadow:0 2px 12px rgba(46,0,139,.1)}
  .promo-table tbody tr:nth-child(even){background:var(--white)}
  .promo-table tbody th[scope=row]{font-size:1.1rem;padding-bottom:6px;border-bottom:1px solid #e7e1f2}
  .promo-table tbody td{display:flex;justify-content:space-between;align-items:baseline;
    gap:16px;border-bottom:0;padding:7px 16px;white-space:normal}
  .promo-table tbody td::before{content:attr(data-label);flex:0 0 auto;
    font-family:var(--font-display);text-transform:uppercase;font-size:.7rem;
    letter-spacing:.4px;color:#6b6480}
  /* A cell whose column had no heading has nothing to line up against, so it reads
     as a plain descriptive line instead of a half-empty key/value row. */
  .promo-table tbody td[data-label=""]::before{display:none}
  .promo-table tbody td[data-label=""]{justify-content:flex-start;color:#555;font-size:.92rem;padding-top:2px}
  .promo-table tbody td:last-child{text-align:right}
}

/* What you get. Two columns of title + sentence, one on a phone. */
.promo-benefits{list-style:none;max-width:940px;margin:0 auto;display:grid;
  grid-template-columns:repeat(2,1fr);gap:22px 36px}
.promo-benefits li{padding-left:30px;position:relative}
.promo-benefits li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;
  background:var(--spark) center/contain no-repeat}
.promo-benefits strong{display:block;font-family:var(--font-display);text-transform:uppercase;
  color:var(--blurple);font-size:.95rem;letter-spacing:.3px;margin-bottom:3px}
.promo-benefits span{display:block;color:#333;font-size:1rem;line-height:1.55}
@media(max-width:700px){.promo-benefits{grid-template-columns:1fr;gap:18px}}

.promo-join .promo-act{margin-top:18px}
.promo-joinnote{margin:14px 0 0;opacity:.9;font-size:.95rem}
.promo-joinnote a{text-decoration:underline;text-underline-offset:3px}

.promo-faq{max-width:860px;margin:0 auto}

/* Terms. Quiet, but present on the page rather than behind a link — the offer's
   conditions are the half of a promotion that gets argued about. */
.promo-terms{background:var(--paper);padding:44px 0}
.promo-terms .wrap{max-width:860px}
.promo-terms h2{font-family:var(--font-display);text-transform:uppercase;color:var(--blurple);
  font-size:1rem;letter-spacing:.4px;margin-bottom:10px}
.promo-terms p{font-size:.85rem;color:#555;line-height:1.65;margin-bottom:10px}

/* Only ever seen signed in: the promo is outside its dates, so a visitor is being
   redirected and the person looking at it needs to know that before they conclude
   the takedown did not work. */
.promo-staffbar{background:var(--lemon);color:var(--blurple);font-size:.88rem;padding:10px 0}
.promo-staffbar .wrap{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.promo-staffbar a{text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* Hero artwork on a promotion. Three treatments, chosen per promo, because a
   campaign hands over two quite different kinds of file: a photograph, which wants
   to sit beside the headline, and a finished banner with the offer already drawn
   into it, which does not — putting one of those next to a live <h1> says the same
   thing twice, in two typefaces. */

/* Beside the copy, in place of Mr. Clean.

   Whatever shape it is uploaded in, and never cropped. A location photo is a
   photograph and survives a crop; promotional artwork is a composition with a logo
   in one corner and a price in another, and cropping it to a fixed slot is how you
   end up with a hero that says "4 FALL!" and "PER MONTH". So the height follows the
   file, and only the width is constrained. */
.promo-shot{align-self:center;justify-self:end;width:100%}
.promo-shot img{width:100%;height:auto;border-radius:20px;box-shadow:0 18px 34px rgba(0,0,0,.32)}
@media(max-width:860px){
  /* Above the copy on a phone, not below it. The hero stacks to one column here, and
     the artwork is the thing that says "this is the promo you tapped" — leaving it
     under the paragraph meant the first screen was words on blurple, identical to
     every other page on the site, with the campaign a scroll away.

     order:-1 rather than reordering the markup: on desktop the image belongs after
     the copy in reading order, because the headline is what a screen reader should
     reach first. This changes the visual order only, and only where it helps. */
  .promo-shot{order:-1;justify-self:stretch;margin:0 0 18px}
}

/* Across the top. Held to a card rather than run edge to edge: a 2:1 banner at full
   viewport width is 800px tall on a large screen, which is taller than the laptop it
   is being read on. Rounded on the blurple so it reads as the campaign's artwork
   placed on the page, not as a second page grafted above it. */
.promo-hero.has-banner .wrap{padding-top:28px}
/* 1200 + the 24px gutters either side, which is exactly .wrap — so the banner lines
   its edges up with the logo on the left and Buy Unlimited on the right rather than
   floating at some width of its own. */
.promo-banner{position:relative;z-index:2;max-width:1248px;margin:0 auto;padding:28px 24px 0}
.promo-banner img{width:100%;height:auto;border-radius:16px;
  box-shadow:0 16px 34px rgba(0,0,0,.3)}
@media(max-width:700px){
  .promo-banner{padding:18px 16px 0}
  .promo-banner img{border-radius:12px}
}

/* Behind the copy. The gradient is not decoration — white text over an arbitrary
   photograph fails contrast somewhere in every image, and this guarantees the left
   side stays dark enough to read whatever is uploaded. */
.promo-hero.has-bg .promo-bg{position:absolute;inset:0;z-index:0}
.promo-hero.has-bg .promo-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.promo-hero.has-bg .promo-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(46,0,139,.94) 0%,rgba(46,0,139,.86) 38%,rgba(46,0,139,.45) 72%,rgba(46,0,139,.3) 100%)}
.promo-hero.has-bg::before{display:none} /* the stock radial glow fights a photograph */
.promo-hero.has-bg .wrap{position:relative;z-index:2}
@media(max-width:860px){
  .promo-hero.has-bg .promo-bg::after{background:linear-gradient(180deg,rgba(46,0,139,.82) 0%,rgba(46,0,139,.93) 55%)}
}