/*
Theme Name: Snappy Lube
Theme URI: https://snappylubenc.com
Description: Custom theme for Snappy Lube. Locations, services and coupons come from the Snappy Lube Core plugin, which must be active.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: snappy-lube
*/

/* Snappy Lube
   Brand: the script logo, the turtle, red / white / black with the mascot's greens, Big Shoulders headlines,
   checkered flags, ticket coupons.
   One system for type, width and spacing (tokens below). Sections stack their heading over their content,
   and supporting text sits next to what it explains.
   Finder states are kept apart:
     hover        the location name underlines, and its map pin gets a dark ring
     focus        a 3px focus outline on whatever has focus (links, buttons, map pins)
     selected     a red border on the card, a large red map pin, and a "Selected" or "Closest" tag
   Green only ever means "Open Now". */
:root {
  --red: #E0161D;
  --red-deep: #B10F15;
  --red-dark: #8F0C11;
  --ink: #151A15;
  --ink-soft: #2B302B;
  --paper: #FFFFFF;
  --grey: #F3F4F3;          /* alternate section background (neutral, not beige) */
  --line: #E1E3E1;
  --line-strong: #C4C7C4;
  --muted: #565B56;
  --on-dark: #FFFFFF;
  --on-dark-muted: #B7BCB7;
  --green: #0B6B26;         /* mascot shell green: "Open Now" */
  --lime: #8BE04E;          /* mascot belly green: small accents on black */
  --note: #FFF4C2;          /* prototype notes only */
  --note-line: #C9A800;

  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Type: three headline sizes in Big Shoulders; everything else in Archivo. */
  --fs-hero: clamp(2.875rem, 3.4vw + 1.5rem, 4.75rem);
  --fs-page: clamp(2.375rem, 2vw + 1.6rem, 3.5rem);
  --fs-h2: clamp(1.875rem, 1.3vw + 1.4rem, 2.625rem);
  --fs-title: 1.1875rem;
  --fs-lede: 1.1875rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --wrap: 72rem;
  --gutter: clamp(20px, 4.5vw, 48px);
  --section: clamp(3.25rem, 6vw, 5rem);
  --stack: clamp(1.5rem, 2.5vw, 2rem);    /* heading to content */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(21, 26, 21, 0.08), 0 4px 14px -6px rgba(21, 26, 21, 0.14);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
  --flag: conic-gradient(var(--ink) 25%, var(--paper) 0 50%, var(--ink) 0 75%, var(--paper) 0);
  color-scheme: light;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0; text-wrap: balance; overflow-wrap: break-word; }
h1, h2 { font: 900 var(--fs-h2)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
h1 { font-size: var(--fs-page); }
h3 { font: 600 var(--fs-title)/1.3 var(--body); }
p, figure { margin: 0; }
main [id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 84px); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.site-header :focus-visible, .site-footer :focus-visible, .section-red :focus-visible, .section-dark :focus-visible, .finish-line :focus-visible { outline-color: var(--paper); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
.visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 0.7rem 1rem; background: var(--paper); color: var(--ink); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }

/* Eyebrows: small, tracked, with a little checkered flag */
.eyebrow, .kicker, .foot-title, .picked-label, .list-title, .label {
  font: 700 var(--fs-label)/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 0.55rem; color: var(--red-deep); margin-bottom: 0.75rem; }
.eyebrow::before { content: ""; flex: 0 0 auto; width: 16px; height: 12px; background: var(--flag) 0 0 / 8px 8px; }
.section-title { margin-bottom: var(--stack); }

/* Lists: indented, with a red marker */
.check-list, .dash-list, .service-text ul, .legal-doc ul, .page-content ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.dash-list li, .service-text li, .legal-doc li, .page-content ul li { position: relative; padding-left: 1.4rem; }
.dash-list li::before, .service-text li::before, .legal-doc li::before, .page-content ul li::before { content: ""; position: absolute; left: 0.1rem; top: 0.78em; width: 0.65rem; height: 2px; border-radius: 2px; background: var(--red); }
.check-list li { position: relative; padding-left: 1.7rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.1rem; height: 1.1rem; background: var(--red); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }

/* Checkered separator: two rows of squares, used only between major parts of a page */
.checker { height: 24px; background: var(--flag) 0 0 / 24px 24px; }

/* ---------- Header: black, white script logo, Title Case links, one red action, a red rule ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--ink); color: var(--paper); transition: box-shadow .2s ease; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--red); pointer-events: none; }
.site-header.is-scrolled { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45); }
.site-header .wrap { display: flex; align-items: center; gap: 2rem; min-height: 72px; padding-bottom: 3px; }
.brand { display: block; width: clamp(150px, 13vw, 184px); flex-shrink: 0; padding-block: 12px; }
.nav { display: flex; gap: 0.25rem; margin-left: auto; align-items: center; }
.nav a, .nav .nav-drop-btn { text-decoration: none; }
.nav a.nav-link, .nav .nav-drop-btn { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.85rem; font: 600 0.9375rem/1 var(--body); letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.86); transition: color .15s ease; }
.nav a.nav-link::after, .nav .nav-drop-btn::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 8px; height: 2px; border-radius: 2px; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform .2s ease; }
.nav a.nav-link:hover, .nav .nav-drop-btn:hover, .nav .nav-drop-btn[aria-expanded="true"] { color: var(--paper); }
.nav a.nav-link:hover::after, .nav .nav-drop-btn:hover::after, .nav .nav-drop-btn[aria-expanded="true"]::after { transform: scaleX(1); }
.nav .btn-cta { position: relative; margin-left: 1.25rem; min-height: 44px; padding: 0 1.15rem; gap: 0.5rem; border-radius: 6px; font: 600 0.9375rem/1 var(--body); background: var(--red); border-color: var(--red); color: var(--paper); }
.nav .btn-cta:hover { background: var(--red-deep); border-color: var(--red-deep); }
.nav .btn-cta::before { content: ""; position: absolute; left: -1.25rem; top: 50%; width: 1px; height: 22px; margin-top: -11px; background: rgba(255, 255, 255, 0.18); }
.nav .btn-cta::after { content: ""; order: -1; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--pin) center / contain no-repeat; mask: var(--pin) center / contain no-repeat; }
:root { --pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-5.5 10.2-7.4 11.8a1 1 0 0 1-1.2 0C9.5 20.2 4 15 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.menu-btn { display: none; }
.mobile-menu { display: grid; background: var(--ink); padding-block: 0 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1); max-height: calc(100dvh - 63px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu a, .mobile-drop summary { display: flex; align-items: center; min-height: 56px; padding: 0 var(--gutter); color: var(--paper); text-decoration: none; font: 600 1rem/1.35 var(--body); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-menu > :first-child, .mobile-menu > .mobile-drop:first-child summary { border-top: 0; }
.mobile-menu a:hover { background: rgba(255, 255, 255, 0.06); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, background-color .2s ease; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-open .menu-icon { background: transparent; }
.menu-open .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 960px) and (min-width: 761px) {
  .site-header .wrap { gap: 1.25rem; }
  .brand { width: 144px; }
  .nav a.nav-link, .nav .nav-drop-btn { padding-inline: 0.6rem; }
  .nav a.nav-link::after, .nav .nav-drop-btn::after { left: 0.6rem; right: 0.6rem; }
  .nav .btn-cta { margin-left: 0.85rem; }
  .nav .btn-cta::before { left: -0.85rem; }
}
@media (max-width: 760px) {
  .site-header .wrap { min-height: 60px; gap: 0.75rem; }
  .brand { width: 136px; padding-block: 12px; }
  .nav { gap: 0.5rem; }
  .nav a.nav-link { display: none; }
  .nav .btn-cta { margin-left: 0; padding: 0 0.85rem; gap: 0.4rem; font-size: 0.875rem; }
  .nav .btn-cta::before { display: none; }
  .nav .btn-cta::after { width: 14px; height: 14px; }
  .menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; background: transparent; color: var(--paper); cursor: pointer; }
  .menu-btn:hover { border-color: var(--paper); }
}
@media (min-width: 761px) { .mobile-menu { display: none !important; } }
@media (max-width: 380px) { .brand { width: 112px; } .nav .btn-cta { padding-inline: 0.7rem; } .nav .btn-cta::after { display: none; } }
@media (max-width: 340px) { .site-header .wrap { gap: 0.5rem; } .brand { width: 100px; } .nav { gap: 0.375rem; } }

/* Locations dropdown: a white sheet hung from the red rule */
.nav-drop { position: relative; }
.nav-drop-btn { gap: 0.45rem; border: 0; background: none; cursor: pointer; }
.caret { width: 7px; height: 7px; border: 0; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.nav-drop-btn[aria-expanded="true"] .caret { transform: translateY(1px) rotate(-135deg); }
.nav-drop-panel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); z-index: 30; width: min(38rem, calc(100vw - 2 * var(--gutter))); padding: 1.1rem 1.35rem 1.25rem; background: var(--paper); color: var(--ink); border-top: 3px solid var(--red); border-radius: 0 0 8px 8px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); }
.nav-drop-panel ul { list-style: none; margin: 0.85rem 0 0; padding: 0.6rem 0 0; border-top: 1px solid var(--line); columns: 3 9rem; column-gap: 1.5rem; }
.nav-drop-panel li { break-inside: avoid; }
.nav-drop-panel a { display: block; margin-inline: -0.5rem; padding: 0.45rem 0.5rem; border-radius: 6px; color: var(--ink); text-decoration: none; font-weight: 400; font-size: 0.9375rem; white-space: nowrap; }
.nav-drop-panel a:hover { background: var(--grey); }
.nav-drop-panel .nav-drop-all { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.25rem 0; font-weight: 600; color: var(--red-deep); }
.nav-drop-panel .nav-drop-all:hover { background: none; text-decoration: underline; }
.nav-drop-panel .nav-drop-all::after { content: "\2192"; transition: transform .15s ease; }
.nav-drop-panel .nav-drop-all:hover::after { transform: translateX(3px); }
.nav-drop-panel :focus-visible { outline-color: var(--ink); }
@media (pointer: coarse) { .nav-drop-panel a { min-height: 44px; display: flex; align-items: center; } }
@media (max-width: 760px) { .nav-drop { display: none; } }
.mobile-drop summary { justify-content: space-between; list-style: none; cursor: pointer; }
.mobile-drop summary::-webkit-details-marker { display: none; }
.mobile-drop summary::after { content: ""; width: 7px; height: 7px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.mobile-drop[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.mobile-drop ul { list-style: none; margin: 0; padding: 0 0 0.5rem; }
.mobile-menu .mobile-drop a { min-height: 44px; padding-left: calc(var(--gutter) + 1rem); font-weight: 400; color: rgba(255, 255, 255, 0.86); border-top: 0; }
.mobile-menu .mobile-drop a.nav-drop-all { font-weight: 600; color: var(--paper); }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; white-space: nowrap; min-height: 48px; padding: 0 1.25em; border: 1.5px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 600 var(--fs-body)/1 var(--body); text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover { background: var(--grey); }
.btn-red { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn-red:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn-white { background: var(--paper); border-color: var(--paper); color: var(--red-deep); }
.btn-white:hover { background: #F6E9E9; border-color: #F6E9E9; }
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn-small { min-height: 44px; padding: 0 1em; font-size: var(--fs-small); }
.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.text-link, .locate-btn, .list-reset { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 var(--fs-small)/1.2 var(--body); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.text-link:hover, .locate-btn:hover, .list-reset:hover { text-decoration-color: currentColor; }
.locate-btn svg { width: 1.15em; height: 1.15em; color: var(--red); }
.arrow-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 600; color: var(--red-deep); text-decoration: none; }
.arrow-link::after { content: "\2192"; transition: transform .15s ease; }
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover::after { transform: translateX(3px); }

/* ---------- Hero: black stage, white headline, the turtle in a race-gauge roundel ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); grid-template-areas: "title art" "lede art" "finder art"; grid-template-rows: auto auto 1fr; align-items: center; column-gap: clamp(1.5rem, 5vw, 4.5rem); padding-block: clamp(3rem, 5.5vw, 5rem) clamp(3rem, 5vw, 4.5rem); }
.hero h1 { grid-area: title; align-self: end; font-size: clamp(3rem, 4.4vw + 1rem, 5.5rem); line-height: 0.92; color: var(--paper); }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .lede { grid-area: lede; font-size: var(--fs-lede); line-height: 1.5; max-width: 30rem; margin-top: 1.25rem; color: #C6CBC6; text-wrap: pretty; }
.hero .finder-card { grid-area: finder; align-self: start; margin-top: 2rem; width: 100%; max-width: 32rem; }
.hero .finder-card label { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.7rem; font: 700 var(--fs-label)/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-muted); }
.hero .finder-card label::before { content: ""; width: 16px; height: 12px; background: conic-gradient(var(--paper) 25%, var(--ink) 0 50%, var(--paper) 0 75%, var(--ink) 0) 0 0 / 8px 8px; }
.hero .search-field input { height: 60px; border: 0; border-radius: 8px; padding-left: 1.15rem; }
.hero .search-field input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); }
.hero .search-field .btn { right: 6px; top: 6px; bottom: 6px; padding: 0 1.4em; border-radius: 6px; }
.hero .finder-links { margin-top: 0.4rem; }
.hero .text-link { color: var(--paper); text-decoration-color: rgba(255, 255, 255, 0.4); }
.hero .text-link:hover { text-decoration-color: var(--paper); }
.hero .text-link::after { content: "\2192"; display: inline-block; color: var(--red); transition: transform .15s ease; }
.hero .text-link:hover::after { transform: translateX(3px); }
.hero :focus-visible { outline-color: var(--paper); }
/* The roundel: a white disc inside a tachometer bezel with a red redline. The turtle drives in through the disc. */
.hero-art { grid-area: art; position: relative; align-self: center; justify-self: center; width: min(100%, 420px); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.hero-art:focus-visible { outline-offset: 6px; border-radius: 50%; }
.hero-art .ring { position: absolute; inset: 0; background: url("assets/img/gauge.svg") center / 100% 100% no-repeat; }
.turtle-clip { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 7px var(--paper), inset 0 0 0 8px var(--line-strong); }
.turtle-clip::before { content: ""; position: absolute; left: 22%; right: 16%; bottom: 13%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(21, 26, 21, 0.16), transparent); }
.turtle-car { position: absolute; left: 9%; bottom: 14%; width: 78%; animation: drive-in .9s cubic-bezier(.2,1.2,.4,1) 1s both; }
.turtle-car.arrived { animation: none; }
.turtle-car img { width: 100%; position: relative; transform-origin: 62% 92%; transform: translate(calc(var(--lean-x, 0) * 5px), calc(var(--lean-y, 0) * 2px)) rotate(calc(var(--lean-x, 0) * 3deg)); transition: transform .4s cubic-bezier(.2,.8,.3,1); }
.turtle-car.lap { animation: lap 1.6s cubic-bezier(.55,0,.35,1) both; }
@keyframes drive-in { from { transform: translateX(-140%); } to { transform: none; } }
@keyframes lap { 0% { transform: none; } 12% { transform: translateX(-4%) rotate(2deg); } 45% { transform: translateX(150%) rotate(-4deg); } 45.1% { transform: translateX(-150%); } 85% { transform: translateX(3%); } 100% { transform: none; } }
.hero + .checker { height: 16px; background-size: 16px 16px; }
@media (max-width: 1000px) and (min-width: 761px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 2.5rem; } }
@media (max-width: 760px) {
  /* Phones: headline, then the lede beside the roundel, then the search, all on the first screen */
  .hero-grid { grid-template-columns: minmax(0, 1fr) clamp(116px, 34vw, 170px); grid-template-areas: "title title" "lede art" "finder finder"; grid-template-rows: auto auto auto; column-gap: 1rem; padding-block: 1.75rem 2.25rem; }
  .hero h1 { font-size: clamp(2.75rem, 14vw, 4.25rem); }
  .hero .lede { font-size: var(--fs-body); margin-top: 1rem; align-self: center; text-wrap: wrap; }
  .hero-art { width: 100%; margin-top: 1rem; }
  .hero-art .ring { background-image: url("assets/img/gauge-sm.svg"); }
  .turtle-car { left: 9%; bottom: 12%; width: 80%; }
  .turtle-clip { box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--line-strong); }
  .hero .finder-card { margin-top: 1.5rem; max-width: none; }
}

/* ---------- Search field (hero and finder) ---------- */
.finder-card label, .finder label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field input { width: 100%; min-width: 0; height: 56px; padding: 0 7.25rem 0 1rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 400 1.0625rem/1 var(--body); transition: border-color .15s ease, box-shadow .15s ease; }
.search-field input::placeholder { color: #6E736E; }
.search-field input:hover { border-color: var(--muted); }
.search-field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(21, 26, 21, 0.2); }
.search-field .btn { position: absolute; right: 5px; top: 5px; bottom: 5px; min-height: 0; padding: 0 1.1em; }
.finder-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; margin-top: 0.35rem; }
.hero .finder-links { margin-top: 0.25rem; }
.finder-msg { font-size: var(--fs-small); margin-top: 0.5rem; color: var(--muted); }
.finder-msg:empty { display: none; }
.finder-msg.error { color: var(--red-deep); font-weight: 600; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section-grey { background: var(--grey); }
.section-red { background: var(--red); color: var(--paper); }
.section-dark { background: var(--ink); color: var(--on-dark); }
.section-dark h2, .section-dark .list-title, .section-dark .picked-label, .section-dark .finder label { color: var(--paper); }
.section-dark .eyebrow { color: var(--paper); }
.section-dark .eyebrow::before { background: conic-gradient(var(--paper) 25%, var(--ink) 0 50%, var(--paper) 0 75%, var(--ink) 0) 0 0 / 8px 8px; }
.section-dark .text-link, .section-dark .locate-btn, .section-dark .list-reset { color: var(--paper); text-decoration-color: rgba(255, 255, 255, 0.45); }
.section-dark .text-link:hover, .section-dark .locate-btn:hover, .section-dark .list-reset:hover { text-decoration-color: var(--paper); }
.section-dark .locate-btn svg { color: var(--paper); }
.section-dark .finder-msg { color: var(--on-dark-muted); }
.section-dark .finder-msg.error { color: #FF9C9C; }
.section-dark .search-field input { border-color: var(--paper); }
.section-dark .search-field input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); }
.section-dark :focus-visible { outline-color: var(--paper); }
.section-dark .shop :focus-visible, .section-dark .map-panel :focus-visible { outline-color: var(--ink); }
.section-dark .shop, .section-dark .map-panel { box-shadow: none; }
.btn-light { background: transparent; border-color: var(--paper); color: var(--paper); }
.btn-light:hover { background: rgba(255, 255, 255, 0.12); }
.section-red .eyebrow { color: var(--paper); }
.section-red .eyebrow::before { background: conic-gradient(var(--paper) 25%, var(--ink) 0 50%, var(--paper) 0 75%, var(--ink) 0) 0 0 / 8px 8px; }

/* ---------- Locations ---------- */
.locator { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; }
.locator-side h2 { margin-bottom: 1.5rem; }
.finder { max-width: 30rem; }
.picked-wrap { margin-top: 1.5rem; max-width: 30rem; }
.picked-label { color: var(--ink); margin-bottom: 0.6rem; }
.picked { list-style: none; margin: 0; padding: 0; }
.map-panel { position: relative; background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.75rem); box-shadow: var(--shadow); container-type: inline-size; }
.nc-map { width: 100%; height: auto; display: block; overflow: visible; }
.nc-map .state { fill: var(--grey); stroke: var(--ink); stroke-linejoin: round; }
.nc-map .pin { cursor: pointer; }
.nc-map .pin:focus { outline: none; }
.nc-map .pin .dot { fill: var(--red); stroke: var(--paper); stroke-width: 2; }
.nc-map .pin .hit { fill: transparent; }
.nc-map .mark { pointer-events: none; }
.nc-map .mark-hover { fill: var(--red); stroke: var(--ink); stroke-width: 2.5; }
.nc-map .mark-selected { fill: var(--red); stroke: var(--ink); stroke-width: 3.5; }
.nc-map .mark-focus { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 4 3; }
.nc-map .origin { fill: var(--ink); }
.nc-map .city-label { font-family: var(--body); font-weight: 700; fill: var(--muted); text-transform: uppercase; letter-spacing: .06em; pointer-events: none; }
@container (max-width: 420px) { .nc-map .city-label { display: none; } }
.map-tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; white-space: nowrap; padding: 0.35rem 0.6rem; border-radius: 6px; background: var(--ink); color: var(--paper); font: 600 var(--fs-small)/1.2 var(--body); }
.map-tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
/* Several pins under one tap: a short list to choose from */
.map-chooser { position: absolute; z-index: 4; transform: translate(-50%, 12px); min-width: 13rem; padding: 0.4rem; background: var(--paper); border-radius: var(--radius-sm); box-shadow: 0 12px 30px rgba(21, 26, 21, 0.28); }
.map-chooser p { padding: 0.35rem 0.6rem 0.25rem; font: 700 var(--fs-label)/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.map-chooser button { display: block; width: 100%; min-height: 44px; padding: 0 0.6rem; border: 0; border-radius: 6px; background: none; text-align: left; font: 600 var(--fs-small)/1.2 var(--body); color: var(--ink); cursor: pointer; }
.map-chooser button:hover { background: var(--grey); }

.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; margin: clamp(2.25rem, 4vw, 3rem) 0 0.75rem; }
.list-title { color: var(--ink); }
.shop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

/* A location card: the name and address are one link to the location's page. The card itself isn't a link. */
.shop { position: relative; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }
.section:not(.section-grey) .shop { box-shadow: none; border: 1px solid var(--line); }
.shop.is-selected { box-shadow: inset 0 0 0 2px var(--red), var(--shadow); }
.shop-link { display: block; padding: 1.1rem 1.2rem 0; margin-bottom: 0.15rem; text-decoration: none; color: inherit; border-radius: var(--radius) var(--radius) 0 0; }
.shop-name { display: block; padding-right: 3.75rem; font: 600 var(--fs-title)/1.25 var(--body); }
.shop-name::after { content: "\203A"; display: inline-block; margin-left: 0.3rem; color: var(--red); transition: transform .15s ease; }
.shop-link:hover .shop-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.shop-link:hover .shop-name::after { transform: translateX(3px); }
.shop-link:focus-visible { outline-offset: -3px; border-radius: var(--radius) var(--radius) 0 0; }
.shop-address { display: block; margin-top: 0.3rem; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.distance { position: absolute; right: 1.1rem; top: 1.15rem; font: 600 var(--fs-small)/1.3 var(--body); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.shop-tag { align-self: flex-start; margin: 0.6rem 1.2rem 0; padding: 0.2rem 0.5rem; border-radius: 5px; background: var(--red); color: var(--paper); font: 700 0.6875rem/1.3 var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.shop-hours { display: grid; gap: 0.15rem; padding: 0.6rem 1.2rem 0; font-size: var(--fs-small); }
.shop-week { color: var(--muted); line-height: 1.45; }
.shop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: auto; padding: 1rem 1.2rem 1.2rem; }
.shop-actions .btn { width: 100%; }
.shop-actions .btn svg { color: var(--red); }
.shop-actions .btn-red svg { color: currentColor; }

.status { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--muted); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status.open { color: var(--green); }
.status.closed { color: var(--ink); }
.status.closed::before { background: var(--red); }

.show-all { display: none; margin: 1rem auto 0; width: 100%; }
@media (max-width: 1080px) { .shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .locator { grid-template-columns: 1fr; }
  .finder, .picked-wrap { max-width: none; }
  .shop-list.is-collapsed > li:nth-child(n+7) { display: none; }
  .shop-list.is-collapsed + .show-all { display: flex; }
}
@media (max-width: 620px) { .shop-list { grid-template-columns: 1fr; } }

/* ---------- Services ---------- */
.service-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
.service-group { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.sg-photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grey); }
.sg-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.sg-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; transition: opacity 1s linear; }
.sg-photo video.on { opacity: 1; }
@media (max-width: 760px) { .sg-photo > img, .sg-photo video { object-position: var(--pos-m, var(--pos, 50% 50%)); } }
.sg-body { padding: 1.25rem clamp(1.1rem, 2.5vw, 1.5rem) 0.75rem; }
.sg-body h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.services { list-style: none; margin: 0; padding: 0; }
.services > li + li { border-top: 1px solid var(--line); }
.services summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding-block: 0.6rem; cursor: pointer; list-style: none; font: 600 var(--fs-body)/1.35 var(--body); }
.services summary::-webkit-details-marker { display: none; }
.services summary::after { content: ""; flex: 0 0 auto; width: 13px; height: 13px; background: linear-gradient(var(--red), var(--red)) center / 13px 2px no-repeat, linear-gradient(var(--red), var(--red)) center / 2px 13px no-repeat; transition: background-size .2s ease; }
.services details[open] summary::after { background-size: 13px 2px, 2px 0; }
.services summary:hover { color: var(--red-deep); }
.services summary:focus-visible { outline-offset: 2px; }
.service-text { color: var(--ink-soft); padding: 0 0 1rem; max-width: 62ch; }
.service-text a { color: var(--red-deep); font-weight: 600; }
.services details[open] .service-text { animation: open-in .25s ease; }
@keyframes open-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .service-groups { grid-template-columns: 1fr; } }

/* ---------- Why Snappy Lube ---------- */
.why { background: var(--grey); color: var(--ink); }
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: var(--section); }

.why-list { margin-top: var(--stack); gap: 1.1rem; }
.why-list li { display: grid; gap: 0.15rem; }
.why-list strong { font-weight: 600; color: var(--ink); }
.why-list li > span { color: var(--muted); }
.why-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: var(--radius); }
.why-photo figcaption { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } .why-photo { max-width: 34rem; } }

/* ---------- Coupons: tickets with notched cutouts at the perforation ---------- */
.coupons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.coupons > :only-child { grid-column: 1 / -1; max-width: calc(50% - 0.625rem); }
.coupon {
  --stub: 10.5rem; --notch: 11px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub);
  background: var(--paper); color: var(--ink); border-radius: var(--radius);
  -webkit-mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.coupon-main { display: grid; align-content: center; gap: 0.3rem; padding: 1.4rem 1.5rem; }
.coupon .amount { font: 900 clamp(2.5rem, 1.6vw + 1.9rem, 3.25rem)/0.9 var(--display); color: var(--red); text-transform: uppercase; }
.coupon h3 { font-size: 1.1875rem; margin-top: 0.3rem; }
.coupon .fine { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); max-width: 42ch; }
.coupon-stub { display: grid; align-content: center; justify-items: center; gap: 0.75rem; padding: 1.25rem 1rem; text-align: center; border-left: 2px dashed var(--line-strong); }
.coupon .valid { font: 600 var(--fs-small)/1.4 var(--body); color: var(--ink-soft); }
.coupon-stub .btn { width: 100%; padding-inline: 0.75rem; }
.section:not(.section-red) .coupon { border: 1px solid var(--line); }
@media (max-width: 1000px) {
  .coupons { grid-template-columns: 1fr; max-width: 40rem; }
  .coupons > :only-child { max-width: none; }
}
@media (max-width: 520px) {
  .coupon {
    --stub-h: 4.75rem;
    grid-template-columns: 1fr;
    -webkit-mask: radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub-h)), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub-h)), #0000 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub-h)), #0000 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub-h)), #0000 98%, #000) right / 51% 100% no-repeat;
  }
  .coupon-main { padding: 1.25rem 1.25rem 1.1rem; }
  .coupon-stub { height: var(--stub-h); grid-template-columns: 1fr auto; align-items: center; justify-items: start; text-align: left; border-left: 0; border-top: 2px dashed var(--line-strong); padding: 0 1.25rem; }
  .coupon-stub .btn { width: auto; }
}
/* "Show at Counter": the coupon full screen, easy to read across a counter */
.coupon-dialog { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.coupon-dialog::backdrop { background: rgba(21, 26, 21, 0.75); }
.cd-ticket { display: grid; justify-items: center; gap: 0.6rem; padding: 2rem 1.75rem 1.5rem; text-align: center; }
.cd-ticket img { width: 190px; margin-bottom: 0.5rem; }
.cd-ticket .amount { font: 900 clamp(4rem, 18vw, 6.25rem)/0.85 var(--display); color: var(--red); text-transform: uppercase; }
.cd-ticket h2 { font: 600 1.5rem/1.25 var(--body); text-transform: none; letter-spacing: 0; }
.cd-ticket .fine { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); max-width: 34ch; }
.cd-ticket .valid { margin-top: 0.25rem; font-weight: 600; }
.cd-actions { display: flex; justify-content: center; padding: 1rem 1.5rem 1.5rem; border-top: 2px dashed var(--line-strong); }
.cd-actions .btn { min-width: 10rem; }

/* ---------- Footer ---------- */
.finish-line { position: relative; }
.site-footer { background: var(--ink); color: var(--on-dark); font-size: var(--fs-small); }
.site-footer .wrap { padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); }
.foot-brand a { display: inline-block; padding-block: 8px; }
.foot-brand img { width: 150px; }
.foot-brand p { color: var(--on-dark-muted); margin-top: 0.85rem; max-width: 24ch; line-height: 1.5; }
.foot-title { color: var(--on-dark-muted); margin-bottom: 0.5rem; }
.foot-shops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
.foot-shops li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; min-height: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.foot-shops a { color: var(--on-dark); text-decoration: none; }
.foot-shops a:hover { text-decoration: underline; }
.foot-shops .foot-phone { color: var(--on-dark-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.foot-shops .foot-phone:hover { color: var(--on-dark); }
.legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.14); color: var(--on-dark-muted); }
.legal .copy { margin-right: auto; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.legal a, .motion-toggle { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-muted); }
.legal a:hover, .motion-toggle:hover { color: var(--on-dark); }
.motion-toggle { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 1080px) { .foot-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .foot-shops { grid-template-columns: 1fr; } .legal .copy { flex-basis: 100%; } }
/* The small turtle at the finish line drives in when it scrolls into view, then parks. He's the Back to Top button. */
.finish-turtle { position: absolute; bottom: 8px; right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); width: 64px; padding: 0; border: 0; background: none; cursor: pointer; }
.finish-turtle img { width: 100%; height: auto; display: block; transform-origin: 50% 100%; }
.finish-turtle:hover img, .finish-turtle:focus-visible img { animation: hop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes hop { 0% { transform: none; } 40% { transform: translateY(-9px) rotate(-4deg); } 100% { transform: none; } }
.finish-tip { position: absolute; bottom: calc(100% + 6px); right: -6px; white-space: nowrap; pointer-events: none; padding: 0.35rem 0.6rem; border-radius: 6px; background: var(--ink); color: var(--paper); font: 600 var(--fs-small)/1 var(--body); opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.finish-turtle:hover .finish-tip, .finish-turtle:focus-visible .finish-tip, .finish-turtle.tip .finish-tip { opacity: 1; transform: none; }
.finish-turtle.waiting { transform: translateX(-100vw); }
.finish-turtle.go { animation: finish 1.5s cubic-bezier(.25,1.15,.4,1) both; }
@keyframes finish { from { transform: translateX(-100vw); } to { transform: none; } }

/* ---------- Location pages ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line-strong); }
.crumbs a { color: var(--ink); }
.loc-top .wrap { padding-block: 1.25rem clamp(2.25rem, 4vw, 3.25rem); }
.loc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; margin-top: clamp(1.25rem, 3vw, 2rem); }
.kicker { display: block; color: var(--red-deep); margin-bottom: 0.6rem; }
.loc-id h1 { font-size: var(--fs-page); }
.loc-address { margin-top: 1rem; font-size: 1.0625rem; }
.loc-status { margin-top: 0.4rem; }
.loc-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.loc-rating { margin-top: 0.75rem; }
.rating { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-size: var(--fs-small); color: var(--muted); }
.rating:hover { color: var(--ink); }
.stars { display: inline-block; width: 5.4em; height: 1em; --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3 6.1 20.6l1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E"); background: linear-gradient(90deg, #C98A00 var(--pct), var(--line-strong) var(--pct)); -webkit-mask: var(--star) 0 0 / 1.08em 1em repeat-x; mask: var(--star) 0 0 / 1.08em 1em repeat-x; }
.hours-card { padding: 1.25rem 1.4rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.hours-card h2 { font: 700 var(--fs-label)/1.2 var(--body); letter-spacing: 0.14em; color: var(--muted); margin-bottom: 0.5rem; }
.hours { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 0.45rem 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours td { text-align: right; }
.hours tr.today th, .hours tr.today td { font-weight: 700; }
.hours tr.today th::after { content: "Today"; margin-left: 0.5rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--ink); color: var(--paper); font: 700 0.625rem/1.3 var(--body); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 0.15em; }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; }
.visit-copy h2 { margin-bottom: 1rem; }
.visit-address { font-weight: 600; font-size: 1.0625rem; }
.visit-address a { text-decoration-color: var(--line-strong); }
.visit-address a:hover { text-decoration-color: currentColor; }
.section-dark .visit-address a { text-decoration-color: rgba(255, 255, 255, 0.45); }
.landmark { margin-top: 0.5rem; color: var(--ink-soft); max-width: 46ch; }
.section-dark .landmark { color: var(--on-dark-muted); }
.section-dark .shop-photo figcaption { color: var(--on-dark-muted); }
.visit-copy .btn { margin-top: 1.25rem; }
.shop-photo { margin-top: 1.75rem; }
.shop-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: var(--radius); background: var(--ink-soft); }
.shop-photo figcaption { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--muted); }
.map-embed { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--ink-soft); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.loc-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.loc-groups h3 { font-size: 1.0625rem; margin-bottom: 0.75rem; }
.loc-groups .check-list { gap: 0.4rem; font-size: 0.9375rem; }
.loc-services-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.local-note { max-width: 62ch; color: var(--ink-soft); }
.local-note strong { font-weight: 600; }
.nearby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1000px) { .loc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nearby { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .loc-grid, .visit-grid { grid-template-columns: 1fr; }
  .shop-photo img { aspect-ratio: 16 / 10; object-position: var(--pos-m, var(--pos, 50% 50%)); }
}
@media (max-width: 560px) { .loc-groups, .nearby { grid-template-columns: 1fr; } .loc-cta .btn { flex: 1 1 100%; } }

/* ---------- Legal and other pages ---------- */
.legal-doc { max-width: 44rem; padding-block: 2.5rem 4.5rem; }
.legal-doc h1 { font-size: var(--fs-page); margin-bottom: 1rem; }
.legal-doc h2, .page-content h2 { font: 600 var(--fs-title)/1.3 var(--body); text-transform: none; letter-spacing: 0; margin-top: 2.25rem; margin-bottom: 0.6rem; }
.legal-doc p, .legal-doc li, .page-content p, .page-content li { line-height: 1.65; }
.legal-doc p + p, .page-content p + p { margin-top: 0.8rem; }
.legal-doc ul, .page-content ul { margin-top: 0.6rem; }
.legal-doc a, .page-content a { color: var(--red-deep); }
.page-content > * + * { margin-top: 0.9rem; }
.page-content ol { padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.not-found { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 2rem; align-items: center; padding-block: 3rem 4.5rem; }
.not-found .lede { font-size: var(--fs-lede); line-height: 1.55; margin-top: 1rem; max-width: 40ch; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
@media (max-width: 600px) { .not-found { grid-template-columns: 1fr; } .not-found img { width: 150px; } }
mark.fill { background: var(--note); outline: 1px dashed var(--note-line); padding: 0 0.2em; border-radius: 3px; color: var(--ink); }

/* ---------- Motion controls ---------- */
.vid-pause { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: rgba(21, 26, 21, 0.6); color: var(--paper); cursor: pointer; display: grid; place-items: center; transition: background-color .15s ease; }
.vid-pause:hover { background: rgba(21, 26, 21, 0.85); }
.vid-pause:focus-visible { outline-color: var(--paper); outline-offset: 2px; }
.vid-pause::before { content: ""; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.vid-pause.is-paused::before { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.motion-off *, .motion-off *::before, .motion-off *::after { animation-play-state: paused !important; }
.motion-off .turtle-car, .motion-off .finish-turtle { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .turtle-car, .finish-turtle.go, .services details[open] .service-text { animation: none; }
  .finish-turtle.waiting { transform: none; }
  .btn, .shop-name::after, .arrow-link::after { transition: none; }
}


/* =====================================================================
   Refinements per area (finder, services, coupons, Why)
   ===================================================================== */
/* ---------- Location finder: calm cards, hours at a glance, one action bar per card ---------- */
#locations .map-panel { box-shadow: none; border: 1px solid var(--line); }
#locations .nc-map .city-label { paint-order: stroke; stroke: var(--grey); stroke-width: 5px; stroke-linejoin: round; }
#locations .picked-label { display: flex; align-items: center; gap: 0.55rem; }
#locations .picked-label::before { content: ""; flex: 0 0 auto; width: 16px; height: 12px; background: var(--flag) 0 0 / 8px 8px; }
#locations .list-head { margin: clamp(2.75rem, 5vw, 4rem) 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.shop { border: 1px solid var(--line); box-shadow: none; }
.section-grey .shop { box-shadow: 0 1px 2px rgba(21, 26, 21, 0.05); }
.shop.is-selected { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.shop-link { padding: 1.25rem 1.35rem 0; }
.shop:has(> .distance[hidden]) .shop-name { padding-right: 0; }
.distance { top: 1.55rem; right: 1.35rem; }
.shop-tag { margin: 0.75rem 1.35rem 0; }
.shop-hours { gap: 0.6rem; padding: 0.85rem 1.35rem 1.2rem; }
.shop-week { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 1.75rem; }
.wk { display: grid; gap: 0.1rem; }
.wk-day { font: 700 var(--fs-label)/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wk-time { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-time.is-closed { color: var(--muted); }
.shop-actions { gap: 0; padding: 0; border-top: 1px solid var(--line); }
.shop-actions .btn { min-height: 48px; border: 0; border-radius: 0; background: transparent; font-size: var(--fs-small); }
.shop-actions .btn + .btn { border-left: 1px solid var(--line); }
.shop-actions .btn:first-child { border-bottom-left-radius: calc(var(--radius) - 1px); }
.shop-actions .btn:last-child { border-bottom-right-radius: calc(var(--radius) - 1px); }
.shop-actions .btn:hover { background: var(--grey); }
.shop-actions .btn:focus-visible { outline-offset: -3px; }
.shop-actions .btn-red { background: var(--red); color: var(--paper); }
.shop-actions .btn-red:hover { background: var(--red-deep); }
@media (max-width: 420px) {
  .shop-link { padding: 1.1rem 1.15rem 0; }
  .distance { top: 1.4rem; right: 1.15rem; }
  .shop-tag { margin-inline: 1.15rem; }
  .shop-hours { padding: 0.8rem 1.15rem 1.1rem; }
  .shop-week { column-gap: 1.25rem; }
  #locations .search-field input { padding-right: 5.9rem; }
  #locations .search-field .btn { padding-inline: 0.9em; }
}
@media print { .shop-actions, .show-all, .list-reset { display: none; } }
@media (min-width: 861px) { #locations .map-panel { position: sticky; top: 96px; } }

/* ---------- Services: editorial columns instead of boxed cards ---------- */
.service-groups { column-gap: clamp(1.5rem, 4vw, 3.5rem); row-gap: clamp(2.75rem, 5vw, 4rem); align-items: start; }
.service-group { border: 0; border-radius: 0; overflow: visible; background: none; }

/* Photo / video: rounded on its own, with a hairline so light frames don't melt into the page */
.sg-photo { border-radius: var(--radius); isolation: isolate; }
.sg-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(21, 26, 21, 0.08); pointer-events: none; }
.sg-photo .vid-pause { right: 8px; bottom: 8px; border: 6px solid transparent; background-clip: padding-box; background-color: rgba(21, 26, 21, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.sg-photo .vid-pause:hover { background-color: rgba(21, 26, 21, 0.8); }
.sg-photo .vid-pause:focus-visible { outline-offset: -2px; }
.sg-photo .vid-pause::before { width: 8px; height: 10px; border-left-width: 2px; border-right-width: 2px; }
.sg-photo .vid-pause.is-paused::before { width: 0; height: 0; border-width: 5px 0 5px 8px; margin-left: 2px; }

.sg-body { padding: clamp(1.1rem, 2vw, 1.4rem) 0 0; }
.sg-body h3 { font-size: var(--fs-title); margin-bottom: 0.85rem; }

/* Ruled list: one ink rule under the title, hairlines between rows, a hairline to close */
.service-group .services { border-top: 1px solid var(--ink); }
.service-group .services > li { border-top: 1px solid var(--line); }
.service-group .services > li:first-child { border-top: 0; }
.service-group .services > li:last-child { border-bottom: 1px solid var(--line); }
.service-group .services summary { min-height: 52px; padding-block: 0.7rem; gap: 1.25rem; font-weight: 400; transition: color .15s ease; }
.service-group .services summary::after { width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; background: linear-gradient(var(--red), var(--red)) center / 10px 2px no-repeat, linear-gradient(var(--red), var(--red)) center / 2px 10px no-repeat; transition: transform .25s ease, background-color .2s ease, border-color .2s ease; }
.service-group .services summary:hover::after { border-color: var(--red); background-color: #FDECEC; }
.service-group .services details[open] > summary { font-weight: 600; }
.service-group .services details[open] > summary::after { border-color: var(--red); background: linear-gradient(var(--paper), var(--paper)) center / 10px 2px no-repeat, linear-gradient(var(--paper), var(--paper)) center / 2px 0 no-repeat, var(--red); transform: rotate(180deg); }

/* Open state: text stops short of the icon column */
.service-group .service-text { padding: 0 2.75rem 1.25rem 0; }
.service-group .service-text ul { gap: 0.5rem; }
.service-group .service-text li { line-height: 1.55; }

/* Brand detail: a short red lead on the title rule, like a start line */
.service-group .services { position: relative; }
.service-group .services::before { content: ""; position: absolute; left: 0; top: -2px; width: 2rem; height: 3px; background: var(--red); }

@media (max-width: 560px) { .service-group .service-text { padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .service-group .services summary, .service-group .services summary::after { transition: none; } }

/* review fixes */
.sg-photo .vid-pause:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 4px rgba(21, 26, 21, 0.55); }
@media (hover: none) {
  .service-group .services summary:hover { color: inherit; }
  .service-group .services summary:hover::after { border-color: var(--line-strong); background-color: transparent; }
}

/* ===== Coupons: refined tickets ===== */
.coupons { --coupon-gap: clamp(1rem, 2vw, 1.5rem); gap: var(--coupon-gap); }
.coupons > :only-child { max-width: calc(50% - var(--coupon-gap) / 2); }
/* On red the tickets sit on the surface: a soft shadow that follows the notched shape (the mask clips box-shadow) */
.section-red .coupons { filter: drop-shadow(0 12px 18px rgba(90, 0, 4, 0.22)) drop-shadow(0 1px 1px rgba(90, 0, 4, 0.2)); }
.coupon { --stub: 11.5rem; --notch: 13px; }
.coupon-main { align-content: start; gap: 0; padding: clamp(1.4rem, 2.2vw, 1.9rem) clamp(1.35rem, 2.4vw, 2rem); }
.coupon .amount { font-size: var(--fs-page); line-height: 0.85; }
.coupon h3 { font-size: var(--fs-title); margin-top: 0.85rem; }
.coupon .fine { margin-top: 0.35rem; max-width: 40ch; }
.coupon-stub { position: relative; border-left: 0; background: var(--grey); grid-template-rows: minmax(0, 1fr) auto auto; align-content: stretch; justify-items: stretch; text-align: left; gap: 0; padding: clamp(1.4rem, 2.2vw, 1.9rem) 1.25rem; }
.coupon-stub::before { content: ""; position: absolute; left: -2px; top: calc(var(--notch) + 6px); bottom: calc(var(--notch) + 6px); width: 4px; background: radial-gradient(circle, var(--line-strong) 0 1.5px, transparent 2px) center top / 4px 9px repeat-y; }
.coupon-logo { width: 6.5rem; height: auto; align-self: start; margin-bottom: 1.25rem; }
.coupon .valid { font: 700 var(--fs-label)/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.coupon-stub .btn { width: 100%; }
.coupon :focus-visible { outline-color: var(--ink); }
@media (max-width: 1000px) { .coupons { max-width: none; } .coupons > :only-child { max-width: none; } }
@media (max-width: 520px) {
  .coupon { --stub-h: 5rem; }
  .coupon-stub { grid-template-rows: none; align-content: center; border-top: 0; padding: 0 1.25rem; gap: 0.75rem; }
  .coupon-stub::before { left: calc(var(--notch) + 6px); right: calc(var(--notch) + 6px); top: -2px; bottom: auto; width: auto; height: 4px; background: radial-gradient(circle, var(--line-strong) 0 1.5px, transparent 2px) left center / 9px 4px repeat-x; }
  .coupon-logo { display: none; }
  .coupon .valid { margin-bottom: 0; }
}
@media print { .section-red .coupons { filter: none; } .coupon-stub { background: none; } }

/* ===== Why Snappy Lube: editorial ===== */
.why-list { gap: 0; margin-top: clamp(1.75rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line-strong); }
.why-list li { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.15rem; padding: 1rem 0 1.05rem; border-top: 1px solid var(--line-strong); }
.why-list li::before { position: static; grid-row: 1 / 3; width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; }
.why-list strong { grid-column: 2; font-size: var(--fs-title); line-height: 1.3; }
.why-list li > span { grid-column: 2; }
.why-photo img { outline: 1px solid rgba(21, 26, 21, 0.08); outline-offset: -1px; }
.why-photo figcaption { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; }
.why-photo figcaption::before { content: ""; flex: 0 0 1.5rem; height: 2px; background: var(--red); }

@media (min-width: 761px) {
  .why-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .why-photo { max-width: none; }
}
/* Wide screens: the photo runs the full height of the copy, so its foot lines up with the last rule */
@media (min-width: 1080px) {
  .why-photo { position: relative; align-self: stretch; display: grid; contain: size; min-height: 22rem; }
  .why-photo img { height: 100%; aspect-ratio: auto; object-position: var(--pos, 40% 50%); }
  .why-photo figcaption { position: absolute; top: 100%; left: 0; right: 0; }
  .why-photo > img, .why-photo > .note { grid-area: 1 / 1; }
  .why-photo > .note { align-self: end; margin: 0.75rem; }
}

/* ===== Review fixes ===== */
/* Between 1080 and 1199px the stretched photo goes nearly square and crops the NC inspection sign (or the awning).
   Keep the 3:2 top-aligned photo there; stretch only from 1200px, with a left bias that keeps sign and awning in frame. */
@media (min-width: 1080px) and (max-width: 1199px) {
  .why-photo { display: block; contain: none; align-self: start; min-height: 0; }
  .why-photo img { height: auto; aspect-ratio: 3 / 2; }
  .why-photo figcaption { position: static; }
  .why-photo > .note { margin: 0.75rem 0 0; }
}
@media (min-width: 1200px) { .why-photo img { object-position: var(--pos, 20% 50%); } }
/* 761-959px: at 5:6 the copy column is ~300px and the item titles break onto two lines */
@media (min-width: 761px) and (max-width: 959px) {
  .why-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.75rem, 4vw, 2.5rem); }
  .why-list li { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.5rem; }
}
.why-list li > span, .coupon .fine { text-wrap: pretty; }
/* "Show at Counter" dialog: same round-dot perforation as the tickets instead of the old dashed rule */
.cd-actions { border-top: 0; background: radial-gradient(circle, var(--line-strong) 0 1.5px, transparent 2px) 0 0 / 9px 4px repeat-x; }


/* =====================================================================
   Refinements per area (footer, legal pages, location pages)
   ===================================================================== */
/* ===== Finish line, footer and legal pages (sec-footer-legal) ===== */

/* Finish line: a crisp checkered strip with a top rule; the turtle parks on top of it, wheels on the line */
.finish-line { height: 26px; border-top: 2px solid var(--ink); background: var(--flag) 0 0 / 24px 24px; }
.finish-turtle { bottom: calc(100% - 4px); width: clamp(52px, 4vw + 26px, 80px); }

/* Footer: brand column + a column-ordered directory of locations, then a quiet legal bar */
.site-footer .wrap { padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.foot-grid { grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); }
.foot-brand a { padding-block: 6px; }
.foot-brand img { width: 176px; }
.foot-brand p { margin-top: 1rem; max-width: none; font-size: var(--fs-body); line-height: 1.5; color: var(--on-dark-muted); text-wrap: balance; }
.site-footer .foot-title { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.85rem; color: var(--on-dark-muted); }
.site-footer .foot-title::before { content: ""; flex: 0 0 auto; width: 16px; height: 12px; background: conic-gradient(var(--paper) 25%, var(--ink) 0 50%, var(--paper) 0 75%, var(--ink) 0) 0 0 / 8px 8px; }
.foot-shops { grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: 2rem; }
.foot-shops li { border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.foot-shops a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.foot-shops a:not(.foot-phone) { min-width: 44px; font-weight: 600; }
.foot-shops a:hover { text-decoration-color: currentColor; text-underline-offset: 4px; }

.site-footer .legal { margin-top: clamp(2.5rem, 5vw, 3.75rem); padding-block: 0.75rem 1rem; border-top-color: rgba(255, 255, 255, 0.14); }
.site-footer .legal-links { align-items: center; gap: 0 1.75rem; }
.site-footer .legal a, .site-footer .motion-toggle { text-decoration: none; }
.site-footer .legal a:hover, .site-footer .motion-toggle:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.site-footer .motion-toggle { position: relative; gap: 0.55rem; }
.site-footer .motion-toggle::after { content: ""; position: absolute; left: calc(-0.875rem - 0.5px); top: 50%; width: 1px; height: 1rem; margin-top: -0.5rem; background: rgba(255, 255, 255, 0.22); }
.site-footer .motion-toggle::before { content: ""; flex: 0 0 auto; width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.site-footer .motion-toggle.is-off-legacy::before { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }

@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; }
  .foot-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 2rem; }
  .foot-brand p { margin-top: 0; max-width: none; }
  .foot-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); column-gap: clamp(2rem, 5vw, 3rem); }
}
@media (max-width: 520px) {
  .foot-shops { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
  .foot-shops a { white-space: normal; }
  .foot-shops .foot-phone { white-space: nowrap; }
  .site-footer .legal .copy { order: 2; flex-basis: 100%; padding-block: 0.5rem 0.25rem; }
  .site-footer .legal-links { gap: 0 1.5rem; }
  .site-footer .motion-toggle::after { content: none; }
}

/* Legal pages: a document header, numbered sections, and an "On This Page" index on wide screens */
.legal-doc { max-width: none; padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(4.5rem, 9vw, 6.5rem); }
.legal-doc > h1, .legal-doc > .note, .legal-doc > .page-content { max-width: 42rem; }
.legal-doc h1 { margin-bottom: 0.9rem; }
.legal-doc .page-content { counter-reset: legal; }
.legal-doc .page-content > p:first-child { padding-bottom: 1.5rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.legal-doc .page-content > p:first-child em { font-style: normal; }
.legal-doc .page-content > p:first-child + p { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 600px) { .legal-doc .page-content > p:first-child + p { font-size: var(--fs-body); line-height: 1.65; } }
.legal-doc .page-content h2 { display: flex; align-items: baseline; gap: 0.65rem; margin-top: 2.75rem; margin-bottom: 0.7rem; }
.legal-doc .page-content h2::before { counter-increment: legal; content: counter(legal, decimal-leading-zero); flex: 0 0 auto; min-width: 1.5rem; font: 900 var(--fs-title)/1 var(--display); color: var(--red); letter-spacing: 0.02em; }
.legal-doc .page-content a { text-decoration-color: rgba(177, 15, 21, 0.4); text-underline-offset: 3px; }
.legal-doc .page-content a:hover { text-decoration-color: currentColor; }

.legal-toc { display: none; }
@media (min-width: 1024px) {
  .legal-doc { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 15rem); justify-content: space-between; column-gap: 3rem; }
  .legal-doc > * { grid-column: 1; }
  .legal-doc > .legal-toc { display: block; grid-column: 2; grid-row: 2 / span 2; align-self: start; }
}
@media (min-width: 1024px) and (min-height: 760px) { .legal-doc > .legal-toc { position: sticky; top: 100px; } }
.legal-toc { counter-reset: toc; padding-left: 1.25rem; border-left: 1px solid var(--line); font-size: var(--fs-small); }
.legal-toc-title { font: 700 var(--fs-label)/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-doc .legal-toc li { padding-left: 0; }
.legal-doc .legal-toc li::before { content: none; }
.legal-toc a { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; color: var(--ink-soft); text-decoration: none; line-height: 1.3; }
.legal-toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); min-width: 1.25rem; font: 900 var(--fs-body)/1 var(--display); color: var(--muted); }
.legal-toc a:hover::before { color: var(--red); }
.legal-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

@media print { .legal-doc { display: block; } .legal-toc { display: none !important; } }

/* ===== Location page: refined top, Getting Here, services, nearby ===== */

/* ---- Top: breadcrumb, name, address, status, actions, rating, hours ---- */
.loc-top .wrap { padding-block: 0.5rem clamp(2.5rem, 4.5vw, 3.5rem); }
.loc-top .crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration-color: var(--line-strong); }
.loc-top .crumbs a:hover { text-decoration-color: currentColor; }
.loc-top .crumbs li { display: inline-flex; align-items: center; }
.loc-top .loc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); align-items: center; gap: 2rem clamp(2rem, 6vw, 5rem); margin-top: clamp(0.5rem, 2vw, 1.25rem); }

.loc-id .kicker { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.85rem; }
.loc-id .kicker::before { content: ""; flex: 0 0 auto; width: 16px; height: 12px; background: var(--flag) 0 0 / 8px 8px; }
.loc-id h1 { line-height: 0.95; }
.loc-id .loc-address { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1.1rem; color: var(--ink); }
.loc-id .loc-address::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 0.22em; background: var(--red); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-5.5 10.2-7.4 11.8a1 1 0 0 1-1.2 0C9.5 20.2 4 15 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-5.5 10.2-7.4 11.8a1 1 0 0 1-1.2 0C9.5 20.2 4 15 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.loc-id .loc-status { margin-top: 0.3rem; }
.loc-id .loc-status .status { gap: 0.5rem; }
.loc-id .loc-status .status::before { margin-inline: 4px; }
.loc-id .loc-cta { gap: 0.625rem; margin-top: 1.6rem; }
.loc-id .loc-cta .btn:not(.btn-red) svg { color: var(--red); }
.loc-id .loc-rating { margin-top: 0.85rem; }
.loc-id .rating { color: var(--muted); text-decoration-color: var(--line-strong); }
.loc-id .rating:hover { color: var(--ink); text-decoration-color: currentColor; }

.loc-top .hours-card { padding: 1.1rem 1.1rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.loc-top .hours-card h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0 0.6rem 0.8rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.loc-top .hours-card h2::before { content: ""; width: 15px; height: 15px; background: var(--red); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.loc-top .hours { border-collapse: separate; border-spacing: 0; }
.loc-top .hours th, .loc-top .hours td { padding: 0.42rem 0.6rem; border-bottom: 0; }
.loc-top .hours td.is-closed { color: var(--muted); }
.loc-top .hours tr.today th, .loc-top .hours tr.today td { background: var(--grey); font-weight: 600; color: var(--ink); }
.loc-top .hours tr.today th { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.loc-top .hours tr.today td { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.loc-top .hours tr.today th::after { margin-left: 0.55rem; }

/* ---- Getting Here: photo and map share one bottom edge ---- */
#getting-here .visit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; }
#getting-here .visit-copy { display: flex; flex-direction: column; align-items: flex-start; }
#getting-here .visit-copy h2 { margin-bottom: 1.1rem; }
#getting-here .visit-address { font-size: var(--fs-title); line-height: 1.35; text-wrap: balance; }
#getting-here .visit-address a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
#getting-here .landmark { margin-top: 0.4rem; }
#getting-here .visit-copy .btn { margin-top: 1.4rem; }
#getting-here .shop-photo { position: relative; width: 100%; margin-top: auto; padding-top: 2rem; }
#getting-here .shop-photo img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
#getting-here .shop-photo figcaption { position: absolute; left: 0.75rem; bottom: 0.75rem; margin: 0; padding: 0.3rem 0.6rem; border-radius: 6px; background: rgba(21, 26, 21, 0.85); color: var(--paper); font: 600 var(--fs-label)/1.3 var(--body); letter-spacing: 0.02em; }
#getting-here .map-embed { aspect-ratio: auto; min-height: 22rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
/* No shop photo: the copy sits beside a wide map instead of under-filling a tall column */
#getting-here .visit-grid:not(:has(.shop-photo)) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); align-items: center; }
#getting-here .visit-grid:not(:has(.shop-photo)) .map-embed { aspect-ratio: 16 / 10; min-height: 0; }

/* ---- Services: four even groups, each under a rule ---- */
.loc-groups { gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
.loc-groups > div { position: relative; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.loc-groups > div::before { content: ""; position: absolute; left: 0; top: -1px; width: 2rem; height: 3px; background: var(--red); }
.loc-groups h3 { margin-bottom: 0.85rem; }
.loc-services-foot { margin-top: clamp(2rem, 4vw, 2.75rem); padding: 1.1rem clamp(1.1rem, 2.5vw, 1.5rem); border-top: 0; border-radius: var(--radius); background: var(--grey); }
.loc-services-foot .local-note { color: var(--ink-soft); }
.loc-services-foot .local-note strong { color: var(--ink); }

/* ---- Nearby locations ---- */

@media (max-width: 1000px) {
  .loc-top .loc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 18.5rem); gap: 2rem; }
}
@media (max-width: 760px) {
  .loc-top .loc-grid { grid-template-columns: 1fr; align-items: start; }
  #getting-here .visit-grid, #getting-here .visit-grid:not(:has(.shop-photo)) { grid-template-columns: 1fr; align-items: start; }
  #getting-here .shop-photo { padding-top: 1.5rem; }
  #getting-here .map-embed, #getting-here .visit-grid:not(:has(.shop-photo)) .map-embed { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 560px) {
  .loc-groups { gap: 1.75rem; }
}


/* ---------- Review fixes: footer directory, finish line, legal index, location pages ---------- */
@media (max-width: 1240px) { .foot-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); } }
@media (max-width: 620px) {
  .foot-shops { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
  .foot-shops a { white-space: normal; }
  .foot-shops .foot-phone { white-space: nowrap; }
}
.foot-shops li { flex-wrap: wrap; }
.finish-turtle { width: calc(var(--section) - 2px); }
.legal-doc .page-content h2 { gap: 0.5rem; }
.legal-doc .page-content h2::before { min-width: 0; }
.legal-toc a::before { display: inline-block; font: 600 var(--fs-small)/1 var(--body); font-variant-numeric: tabular-nums; }
#getting-here .shop-photo figcaption { right: auto; max-width: calc(100% - 1.5rem); text-wrap: balance; }
#getting-here .visit-address a { padding: 0.6rem; margin: -0.6rem; }
#getting-here .visit-address a:focus-visible { outline-offset: -0.4rem; }
#getting-here .visit-address .addr-part { white-space: nowrap; }
#getting-here .landmark { text-wrap: pretty; }
.loc-id .loc-address { text-wrap: balance; }
.loc-top .hours-card { box-shadow: 0 1px 2px rgba(21, 26, 21, 0.05); }


/* ---------- Final review fixes ---------- */
/* Arrow links: the underline stops at the text; the arrow sits beside it and nudges on hover */
.hero .text-link, .arrow-link, .nav-drop-panel .nav-drop-all { position: relative; padding-right: 1.45em; }
.hero .text-link::after, .arrow-link::after, .nav-drop-panel .nav-drop-all::after { position: absolute; right: 0; top: 50%; line-height: 1; transform: translateY(-50%); }
.hero .text-link:hover::after, .arrow-link:hover::after, .nav-drop-panel .nav-drop-all:hover::after { transform: translate(3px, -50%); }
@media (max-width: 760px) { .hero .lede { text-wrap: pretty; } }
.hero .search-field .btn:focus-visible { outline-color: var(--ink); outline-offset: 2px; }
.finish-line .finish-turtle:focus-visible { outline-color: var(--ink); }
.finder-msg { text-wrap: pretty; }
.finder-msg:empty { display: block; margin: 0; }
.search-field input { border-color: #868B86; }
.search-field input[aria-invalid="true"] { border-color: var(--red-deep); }
@container (max-width: 560px) { .nc-map .city-label { font-size: 18px; } }
/* No layout jumps when the script fills things in */
.loc-id .loc-status { display: flex; min-height: 1.6em; }
@media (max-width: 760px) { .nav:not(:has(.menu-btn))::after { content: ""; flex: 0 0 44px; height: 44px; } }
.finder-links #locate[hidden] { display: inline-flex !important; visibility: hidden; }
/* Coupon dialog */
.cd-ticket img { margin-bottom: 1rem; }
.cd-ticket .fine { text-wrap: pretty; }
@media (max-height: 540px) {
  .cd-ticket { gap: 0.3rem; padding: 1rem 1.5rem 0.75rem; }
  .cd-ticket img { width: 120px; margin-bottom: 0; }
  .cd-ticket .amount { font-size: clamp(2.75rem, 14vh, 4.5rem); }
  .cd-ticket h2 { font-size: 1.25rem; }
  .cd-ticket .fine { font-size: var(--fs-small); }
  .cd-actions { padding: 0.75rem 1.5rem 1rem; }
}
/* Pause Animations also stops smooth scrolling and hides the per-video buttons */
html.motion-off { scroll-behavior: auto; }
.motion-off .vid-pause { display: none; }
.site-footer .motion-toggle.is-off::before { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }
/* Legal headings start on one line, whatever the width of their number */
.legal-doc .page-content h2::before { min-width: 1.3rem; }
/* A location page with no Nearby section ends on light coupons instead of stacking red on the black footer */
main > .section-red:last-child { background: var(--grey); color: var(--ink); }
main > .section-red:last-child .coupons { filter: none; }
main > .section-red:last-child .coupon { border: 1px solid var(--line-strong); }
main > .section-red:last-child .coupon-stub { background: var(--paper); }
main > .section-red:last-child :focus-visible { outline-color: var(--ink); }
/* Nearby cards follow the finder list's columns; an odd last card takes the whole row */
@media (max-width: 1080px) { .nearby { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .nearby { grid-template-columns: 1fr; } }
@media (min-width: 621px) and (max-width: 1080px) {
  .nearby > li:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .nearby > li:last-child:nth-child(odd) .shop-link { grid-column: 1; grid-row: 1; padding-bottom: 1.2rem; }
  .nearby > li:last-child:nth-child(odd) .shop-name { padding-right: 0; }
  .nearby > li:last-child:nth-child(odd) .distance { position: static; grid-column: 1; grid-row: 1; justify-self: end; align-self: start; margin: 1.55rem 1.35rem 0 0; }
  .nearby > li:last-child:nth-child(odd) .shop-hours { grid-column: 2; grid-row: 1; padding-top: 1.25rem; }
  .nearby > li:last-child:nth-child(odd) .shop-actions { grid-column: 1 / -1; grid-row: 2; }
}
/* Location services: four columns only where every title fits on one line */
@media (max-width: 1240px) { .loc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .loc-groups { grid-template-columns: 1fr; } }
.loc-id .loc-cta { width: fit-content; max-width: 100%; }
.loc-id .loc-cta .btn { flex: 1 0 auto; }

/* =====================================================================
   Review round 3: larger titles, one search, lighter cards and footer,
   every service tile in motion, leaner location pages
   ===================================================================== */
:root {
  --fs-page: clamp(2.75rem, 2.6vw + 1.75rem, 4.25rem);
  --fs-h2: clamp(2.25rem, 1.9vw + 1.6rem, 3.5rem);
}
/* Display titles get room between lines, so a comma never touches the line below */
h1, h2 { line-height: 1.1; }
.loc-id h1 { line-height: 1.05; }

/* Hero: the headline leads; the finder right below is the one search */
.hero-grid { grid-template-areas: "title art" "lede art"; grid-template-rows: 1fr 1fr; }
.hero h1 { font-size: clamp(3.25rem, 6vw + 1rem, 7.25rem); line-height: 1.05; }
.hero .lede { align-self: start; margin-top: 1.5rem; max-width: 32rem; }
@media (max-width: 760px) {
  .hero-grid { grid-template-areas: "title title" "lede art"; grid-template-rows: auto auto; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.75rem); }
}

/* Location cards: name, address, Directions and Call. Six show until the visitor asks for all */
.shop-link { padding-bottom: 1.15rem; }
.shop-tag { margin: -0.4rem 1.35rem 1rem; }
.shop-list.is-collapsed > li:nth-child(n+7) { display: none; }
.shop-list.is-collapsed + .show-all { display: flex; }
.show-all { width: fit-content; min-width: min(100%, 16rem); margin: 1.5rem auto 0; }
@media (max-width: 620px) {
  .shop-list.is-collapsed > li:nth-child(n+5) { display: none; }
  .show-all { width: 100%; }
  .shop-tag { margin-inline: 1.15rem; }
}

/* Service tiles: videos play whenever they're on screen; the tire photo drifts slowly to match */
@keyframes sl-drift { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-2.5%, -1.5%, 0); } }
.sg-photo > img.drift { animation: sl-drift 16s ease-in-out infinite alternate; transform-origin: 60% 45%; }
.sg-photo.is-paused > img.drift, .motion-off .sg-photo > img.drift { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sg-photo > img.drift { animation: none; } }
.sg-photo .vid-pause { right: 10px; bottom: 10px; width: 40px; height: 40px; border: 0; background: rgba(21, 26, 21, 0.6); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .2s ease, background-color .15s ease; }
.sg-photo .vid-pause:hover { background: rgba(21, 26, 21, 0.85); }
.sg-photo .vid-pause:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(21, 26, 21, 0.6); }
.sg-photo .vid-pause::before { width: 10px; height: 12px; border-left-width: 3px; border-right-width: 3px; }
.sg-photo .vid-pause.is-paused::before { width: 0; height: 0; border-width: 6px 0 6px 10px; margin-left: 3px; }
/* With a mouse, the button shows on hover or focus (and stays while paused), so the tiles read as photos */
@media (hover: hover) {
  .sg-photo .vid-pause { opacity: 0; }
  .sg-photo:hover .vid-pause, .sg-photo .vid-pause:focus-visible, .sg-photo .vid-pause.is-paused { opacity: 1; }
}

/* Footer: black, with location names only (phone numbers are on each location page).
   The names spread across the full width in even columns, beside the logo down to tablet size */
.site-footer .wrap { padding-block: clamp(2.5rem, 4.5vw, 3.5rem) 0; }
.foot-grid { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: start; }
.foot-brand img { width: 150px; }
.site-footer .foot-title { margin-bottom: 0.4rem; color: var(--on-dark-muted); }
.foot-shops { grid-auto-flow: column; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 2rem; }
.foot-shops li { display: block; min-height: 0; border: 0; }
.site-footer .foot-shops a { min-height: 32px; font-weight: 400; color: var(--on-dark-muted); white-space: normal; }
.site-footer .foot-shops a:hover { color: var(--paper); }
.site-footer .legal { margin-top: clamp(2rem, 3.5vw, 2.75rem); padding-block: 0.35rem 0.6rem; font-size: 0.8125rem; }
.site-footer .legal a, .site-footer .motion-toggle { min-height: 36px; }
.site-footer .legal-links { column-gap: 1.25rem; }
.site-footer .motion-toggle::after { left: calc(-0.625rem - 0.5px); height: 0.875rem; margin-top: -0.4375rem; }
.site-footer .motion-toggle::before { width: 8px; height: 9px; }
@media (max-width: 1080px) { .foot-grid { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); column-gap: 2rem; } .foot-brand { display: block; } }
@media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; } }
@media (max-width: 620px) {
  .foot-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); column-gap: 1.5rem; }
}

/* Location pages: the address links to Google Maps, hours are grouped, services are four tiles */
.loc-id .loc-address a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.loc-id .loc-address a:hover { text-decoration-color: currentColor; }
.loc-top .hours-card .hours-none { margin: 0; padding: 0.42rem 0.6rem; }
/* Grouped hours stay on one line: the card keeps the width "Monday–Friday  Today  8 AM–7 PM" needs */
.loc-top .hours th, .loc-top .hours td { white-space: nowrap; }
@media (max-width: 1000px) and (min-width: 761px) { .loc-top .loc-grid { grid-template-columns: minmax(0, 1fr) 20.5rem; } }
.svc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 1.75rem); }
.svc-tile { grid-row: 1; display: block; width: 100%; margin: 0 0 1.25rem; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.svc-panel { grid-row: 2; grid-column: 1 / -1; margin-bottom: 1.25rem; padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.75rem); border-radius: var(--radius); background: var(--grey); }
.svc-panel[hidden] { display: none; }
.svc-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--grey); transition: box-shadow .2s ease; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.svc-tile:hover .svc-img img { transform: scale(1.04); }
.svc-tile[aria-expanded="true"] .svc-img { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--red); }
.svc-name { display: block; margin-top: 0.8rem; padding-right: 1.5rem; position: relative; font: 600 var(--fs-title)/1.3 var(--body); text-wrap: balance; }
/* A chevron that points down, and up while the group is open */
.svc-name::after { content: ""; position: absolute; right: 0.25rem; top: 0.3em; width: 0.5em; height: 0.5em; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(45deg); transition: transform .2s ease, top .2s ease; }
.svc-tile[aria-expanded="true"] .svc-name::after { top: 0.55em; transform: rotate(225deg); }
.svc-tile:hover .svc-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.svc-tile:focus-visible { outline-offset: 4px; }
/* The open group's services: the same rows as the homepage, in two columns on wide screens */
.svc-panel .services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.svc-panel .services > li { border-bottom: 1px solid var(--line-strong); }
.svc-panel .services > li + li { border-top: 0; }
.svc-panel .services summary { min-height: 52px; padding-block: 0.7rem; gap: 1.25rem; font-weight: 400; }
.svc-panel .services summary::after { width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; background: linear-gradient(var(--red), var(--red)) center / 10px 2px no-repeat, linear-gradient(var(--red), var(--red)) center / 2px 10px no-repeat; transition: transform .25s ease, background-color .2s ease, border-color .2s ease; }
.svc-panel .services summary:hover::after { border-color: var(--red); background-color: #FDECEC; }
.svc-panel .services details[open] > summary { font-weight: 600; }
.svc-panel .services details[open] > summary::after { border-color: var(--red); background: linear-gradient(var(--paper), var(--paper)) center / 10px 2px no-repeat, linear-gradient(var(--paper), var(--paper)) center / 2px 0 no-repeat, var(--red); transform: rotate(180deg); }
.svc-panel .service-text { padding: 0 2.75rem 1.1rem 0; }
.svc-panel .service-text ul { gap: 0.5rem; }
.svc-panel .service-text li { line-height: 1.55; }
.nowrap { white-space: nowrap; }
.svc-tiles + .local-note { max-width: none; margin-top: clamp(0.75rem, 2vw, 1.25rem); padding-top: 1.1rem; border-top: 1px solid var(--line); }
/* Two tiles per row: each pair's panel opens right under that pair */
@media (max-width: 1000px) {
  .svc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-tile:nth-of-type(n+3) { grid-row: 3; }
  .svc-panel:nth-of-type(n+3) { grid-row: 4; }
}
@media (max-width: 760px) { .svc-panel .services { grid-template-columns: minmax(0, 1fr); } }
/* Phones: one row per group (small photo and name), each opening right under itself */
@media (max-width: 560px) {
  .svc-tiles { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
  .svc-tile, .svc-tile:nth-of-type(n+3), .svc-panel, .svc-panel:nth-of-type(n+3) { grid-row: auto; }
  .svc-tile { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 0.9rem; margin: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .svc-img { border-radius: 8px; }
  .svc-name { margin-top: 0; }
  .svc-panel { margin: 0.75rem 0; }
  .svc-panel .service-text { padding-right: 0; }
  .svc-tile[aria-expanded="true"] .svc-img { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--red); }
}
@media (hover: none) { .svc-tile:hover .svc-name { text-decoration: none; } .svc-tile:hover .svc-img img { transform: none; } }
@media (prefers-reduced-motion: reduce) { .svc-img, .svc-img img, .svc-name::after, .svc-panel .services summary::after { transition: none; } }

/* =====================================================================
   Type and color system. Every piece of text is one of these roles, at every screen size:
   - Display (Big Shoulders, uppercase, 0.01em): homepage headline, page titles, section titles, coupon amounts
   - Title 19/600 · Lede 19/400 (16 on phones) · Body 16/400 · UI 16/600 (buttons, nav, labels on forms)
   - Small 14/400 (addresses, captions, fine print) · Small UI 14/600 (small buttons, text links)
   - Label 12/700 uppercase, tracked · Legal line 12/400
   Colors on light backgrounds: ink (titles, UI), ink-soft (body), muted (small print, utility labels),
   red-deep (section labels, links in text). On dark: paper (titles), on-dark (body, UI), on-dark-muted
   (small print, labels). Green only means "Open Now".
   ===================================================================== */
.coupon .amount { letter-spacing: 0.01em; }

/* Title */
.shop-name, .sg-body h3, .coupon-main h3, .why-list strong, .svc-name, .legal-doc .page-content h2 { font-size: var(--fs-title); font-weight: 600; line-height: 1.3; }

/* Lede: 19px on wider screens, body size on phones */
.hero .lede, .legal-doc .page-content > p:first-child + p { font-size: var(--fs-lede); line-height: 1.5; }
@media (max-width: 760px) { .hero .lede, .legal-doc .page-content > p:first-child + p { font-size: var(--fs-body); line-height: 1.6; } }

/* Body */
.page-content p, .page-content li, .service-text li, .why-list span, .landmark, .local-note, .loc-id .loc-address { font-size: var(--fs-body); font-weight: 400; line-height: 1.6; }
.page-content p, .page-content li, .service-text li, .why-list span, .landmark, .local-note { color: var(--ink-soft); }
.page-content strong, .local-note strong { font-weight: 600; color: var(--ink); }
.service-group .service-text li, .svc-panel .service-text li { line-height: 1.6; }
.legal-toc .legal-toc-title { line-height: 1.35; }
.legal-doc h1 { line-height: 1.05; }
.page-content a, .service-text a { font-weight: inherit; color: var(--red-deep); }
.hero .lede, .section-dark .landmark, #getting-here .landmark { color: var(--on-dark); }

/* UI: the header links and button match the other buttons */
.nav a.nav-link, .nav .nav-drop-btn, .nav .btn-cta { font-size: var(--fs-body); letter-spacing: 0; }
@media (max-width: 760px) { .nav .btn-cta { font-size: var(--fs-small); } }

/* Small */
.shop-address, .fine, .crumbs, .rating, .why-photo figcaption, .shop-photo figcaption, .legal-toc a, .legal-doc .page-content > p:first-child { font-size: var(--fs-small); font-weight: 400; line-height: 1.5; }
.site-footer .foot-shops a { font-size: var(--fs-small); line-height: 1.5; }
/* The Getting Here photo caption sits under the photo like the homepage one, not on top of it */
#getting-here .shop-photo figcaption { position: static; display: flex; align-items: center; gap: 0.6rem; max-width: none; margin-top: 0.75rem; padding: 0; border-radius: 0; background: none; color: var(--on-dark-muted); font: 400 var(--fs-small)/1.5 var(--body); letter-spacing: 0; }
#getting-here .shop-photo figcaption::before { content: ""; flex: 0 0 1.5rem; height: 2px; background: var(--red); }

/* Labels: section labels (with the checker) are red; utility labels are gray */
.eyebrow, .kicker, .foot-title, .picked-label, .list-title, .label, .hours-card h2, .coupon .valid, .legal-toc-title { font: 700 var(--fs-label)/1.35 var(--body); letter-spacing: 0.14em; text-transform: uppercase; }
#locations .picked-label { color: var(--red-deep); }
.list-title, .loc-top .hours-card h2, .coupon .valid, .legal-toc-title { color: var(--muted); }
.site-footer .foot-title { color: var(--on-dark-muted); }

/* Legal line */
.site-footer .legal { font-size: var(--fs-label); }
.site-footer .foot-shops a:hover, .site-footer .legal a:hover, .site-footer .motion-toggle:hover { color: var(--paper); text-decoration-color: currentColor; }

/* ---------- Print ---------- */
@media print {
  .site-header, .finish-line, .vid-pause, .notes-toggle, .menu-btn, .hero-art, .map-panel, .finder-card, .finder, .coupon-stub .btn, .map-embed { display: none !important; }
  .section, .loc-top .wrap { padding-block: 1rem; }
  .section-red, .why, .site-footer { background: none !important; color: var(--ink) !important; }
  .coupon { -webkit-mask: none; mask: none; border: 2px dashed var(--ink); }
}


/* ---------------------------------------------------------------------------
   WordPress-only rules (the rest of this file is shared with the preview)
   ------------------------------------------------------------------------ */
@media (min-width: 783px) { .admin-bar .site-header { top: calc(env(safe-area-inset-top, 0px) + 32px); } }
.page-content img { height: auto; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, figcaption { font-size: var(--fs-small); color: var(--muted); }