:root {
    --blue: #106bc7;
    --blue-hover: #004c8f;
    --blue-active: #0d375e;
    --navy: #0d375e;
    --ink: #0a2237;
    --text: #475569;
    --muted: #64748b;
    --icon-muted: #8496ae;
    --line: #e2e8f0;
    --line-strong: #becbda;
    --bg: #f6f7f9;
    --white: #ffffff;
    --sky: #a5d8ff;
    --sky-weak: #e7f5ff;
    --amber: #fab005;
    --green: #078843;
    --green-weak: #ebfdf5;
    --red: #e03131;
    --footer: #151d29;
    --overlay-strong: rgba(0, 0, 0, 0.898);
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --container: 1272px;
    --gutter: 24px;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --shadow-card: 0px 8px 28px 0px rgba(36, 41, 46, 0.04), 0px 4px 8px 0px rgba(36, 41, 46, 0.06);
    --shadow-float: 0px 16px 40px 0px rgba(36, 41, 46, 0.08), 0px 4px 12px rgba(36, 41, 46, 0.08);
    --ease: cubic-bezier(.2, .7, .2, 1);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 24px;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4, p { margin: 0; }
  a { color: var(--blue); text-decoration: none; }
  a:hover { color: var(--blue-hover); }
  img, svg { display: block; }
  button { font: inherit; color: inherit; cursor: pointer; }
  input, select, textarea { font: inherit; color: inherit; }
  ul { list-style: none; margin: 0; padding: 0; }
  :focus-visible { outline: 3px solid rgba(34, 139, 230, 0.6); outline-offset: 2px; border-radius: 4px; }
  [hidden] { display: none !important; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ---------- type scale (mirrors the design-system tokens) ---------- */
  .t-heading-2xl { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.56px; color: var(--ink); }
  .t-heading-xl { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.24px; color: var(--ink); }
  .t-heading-lg { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
  .t-heading-sm { font-size: 16px; line-height: 20px; font-weight: 600; color: var(--ink); }
  .t-body { font-size: 16px; line-height: 24px; }
  .t-body-sm { font-size: 14px; line-height: 20px; }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 99999px; padding: 12px 24px; height: 48px;
    font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap;
    text-decoration: none; transition: background-color .15s, color .15s, box-shadow .15s, transform .15s;
  }
  .btn svg { width: 20px; height: 20px; flex: none; }
  .btn-sm { height: 40px; padding: 10px 16px; font-size: 14px; line-height: 20px; }
  .btn-primary { background: var(--blue); color: #fff; }
  .btn-primary:hover { background: var(--blue-hover); color: #fff; }
  .btn-primary:active { background: var(--blue-active); }
  .btn-primary-inverted { background: #fff; color: var(--blue); }
  .btn-primary-inverted:hover { background: var(--sky-weak); color: var(--blue-hover); }
  .btn-secondary { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
  .btn-secondary:hover { background: var(--sky-weak); color: var(--blue-hover); }
  .btn-secondary-inverted { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
  .btn-secondary-inverted:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
  .btn-muted { background: var(--line); color: var(--muted); }
  .btn-muted:hover { background: var(--line-strong); color: var(--ink); }
  .btn:disabled { opacity: .6; cursor: default; }

  .link-inverse { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
  .link-inverse:hover { color: var(--sky); }

  /* ---------- layout ---------- */
  .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
  .page { overflow-x: clip; }
  main { display: flex; flex-direction: column; }

  /* ---------- header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 100; background: #fff; min-height: 79px;   /* reserves its height before the script fills it, so nothing shifts under it */
    box-shadow: 0 1px 0 var(--line), 0 2px 12px rgba(10, 34, 55, 0.04);
  }
  .header-inner {
    height: 79px; display: flex; align-items: center; gap: 8px;
    max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter);
  }
  .header-inner .nav { margin-left: auto; }
  .brand { display: inline-flex; align-items: center; height: 44px; color: var(--ink); }
  /* brand mark */
  :root { --logo: #14211e; }
  /* Inter Black cap height is 0.727em; the icon is sized so its height equals the cap height (as in the reference),
     the icon is 38:22 wide, and the gap is 0.59 x cap height. */
  .logo { display: inline-flex; align-items: center; gap: .43em; color: var(--logo); font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
  .logo svg { width: 1.256em; height: .727em; flex: none; display: block; }
  .logo__word { display: block; line-height: 1; }
  .logo--inverse { color: #fff; }
  .logo--inverse svg rect[fill="#fff"] { fill: var(--ink); }
  .logo--lg { font-size: 32px; }
  .logo--sm { font-size: 16px; }
  .logo--xl { font-size: 40px; }
  .nav { display: flex; align-items: center; gap: 4px; }
  .nav a, .nav button {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
    border-radius: 99999px; background: #fff; border: 0; font-weight: 600; font-size: 16px; color: var(--ink);
    transition: background-color .15s;
  }
  .nav a:hover, .nav button:hover { background: var(--bg); color: var(--ink); }
  .nav svg { width: 20px; height: 20px; }
  .header-actions { display: flex; align-items: center; gap: 8px; }
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    padding: 10px; border: 0; background: transparent; border-radius: 99999px; color: var(--navy);
  }
  .icon-btn:hover { background: var(--bg); color: var(--blue); }
  .icon-btn svg { width: 24px; height: 24px; }
  .header-phone { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 99999px; font-weight: 600; color: var(--ink); }
  .header-phone:hover { background: var(--bg); color: var(--ink); }
  .header-phone svg { width: 20px; height: 20px; color: var(--blue); }
  .menu-pill {
    display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--line-strong); border-radius: 99999px; background: #fff; color: var(--navy);
    transition: box-shadow .15s, background-color .15s;
  }
  .menu-pill:hover { background: var(--bg); box-shadow: 0 2px 8px rgba(10, 34, 55, 0.08); }
  .menu-pill > svg { width: 22px; height: 22px; }
  .subnav { display: none; }

  /* ---------- drawer ---------- */
  .drawer-backdrop { position: fixed; inset: 0; background: rgba(10, 34, 55, 0.5); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: #fff; z-index: 61;
    transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column;
    box-shadow: -8px 0 40px rgba(10, 34, 55, 0.18);
  }
  body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
  body.drawer-open .drawer { transform: translateX(0); }
  body.drawer-open { overflow: hidden; }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--line); }
  .drawer-body { padding: 8px 8px 24px; overflow-y: auto; flex: 1; }
  .drawer-body a.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); font-weight: 600; color: var(--ink); font-size: 16px; }
  .drawer-body a.row:hover { background: var(--bg); }
  .drawer-body a.row > span { display: inline-flex; align-items: center; gap: 10px; }
  .drawer-body a.row svg { width: 20px; height: 20px; color: var(--icon-muted); }
  .drawer-body a.row > span svg { color: var(--ink); }
  .drawer-body a.row[aria-current="page"] { background: var(--sky-weak); color: var(--blue); }
  .drawer-body a.row[aria-current="page"] > span svg { color: var(--blue); }
  .drawer-section { padding: 16px 16px 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .drawer-foot { padding: 16px 24px 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
  .drawer-foot .btn { width: 100%; }
  .drawer-hours { font-size: 14px; line-height: 20px; color: var(--text); }

  /* ---------- hero ---------- */
  .hero { position: relative; z-index: 3; isolation: isolate; min-height: 600px; background: var(--ink); color: #fff; display: flex; align-items: flex-end; }   /* z-index 3: the search menu may hang below the hero, over the next section */
  .hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
  /* Photo fills the hero exactly and is pinned to its bottom: at 1280-1600px the whole 21:9 frame (sign, GMC and open bay) stays in view instead of being overscanned. */
  .hero-photo { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }   /* live v5 framing: neighbours' roll-ups under the headline on the left, the shop sign centred at 60%, GMC 71-93%, open bay 88-99% */
  .hero-tint {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10, 34, 55, 0.65) 0%, rgba(10, 34, 55, 0.45) 30%, rgba(10, 34, 55, 0.1) 55%, rgba(10, 34, 55, 0) 75%),   /* live stops (0.55/0.35/0.08/0) made about 10% stronger at the user's request; clear by the shop sign */
                linear-gradient(180deg, rgba(10, 34, 55, 0.25) 0%, rgba(10, 34, 55, 0) 25%, rgba(10, 34, 55, 0) 70%, rgba(10, 34, 55, 0.45) 100%);
  }
  .hero-inner {
    position: relative; z-index: 1; width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto;
    padding: 196px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 80px;
  }
  .hero-top { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; }   /* headline + search on the LEFT, the shop sign and the bay on the right of the photo */
  .hero h1 {
    font-size: 56px; line-height: 52px; font-weight: 900; letter-spacing: -1.12px; text-transform: uppercase; color: #fff;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
  }
  .hero h1 span { display: block; }
  .search {
    position: relative; width: 480px; max-width: 100%; height: 56px; background: #fff; border: 1px solid var(--icon-muted);
    border-radius: var(--r-sm); display: flex; align-items: center; color: var(--ink);
    transition: box-shadow .15s, border-color .15s;
  }
  .search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.35); }
  .search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink); pointer-events: none; }
  .search input {
    width: 100%; height: 54px; border: 0; border-radius: var(--r-sm); background: transparent;
    padding: 0 16px 0 40px; font-size: 16px; line-height: 24px; color: var(--ink);
  }
  .search:focus-within input, .search.has-value input { padding-right: 56px; }
  .search input::placeholder { color: var(--muted); opacity: 1; }
  .search input:focus { outline: none; }
  .search-go {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 99999px;
    background: var(--blue); color: #fff; border: 0; display: grid; place-items: center; opacity: 0; transition: opacity .15s, background-color .15s;
  }
  .search:focus-within .search-go, .search.has-value .search-go { opacity: 1; }
  .search-go:hover { background: var(--blue-hover); }
  .search-go svg { width: 20px; height: 20px; }
  .search-menu {
    position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); background: #fff; border-radius: var(--r-md);
    box-shadow: var(--shadow-float); padding: 8px; display: none; z-index: 5; color: var(--ink);
    max-height: min(64vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  }
  .search:focus-within .search-menu, .search-menu.is-open { display: block; }
  .search-menu p { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; }
  .search-menu button {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: transparent;
    border-radius: var(--r-sm); text-align: left; font-size: 15px; color: var(--ink);
  }
  .search-menu button:hover, .search-menu button:focus-visible { background: var(--bg); outline: none; }
  .search-menu button svg { width: 18px; height: 18px; color: var(--icon-muted); flex: none; }
  .hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .hero-card {
    position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
    padding: 24px; border-radius: var(--r-sm); min-height: 100px; color: #fff;
    background: rgba(20, 30, 46, 0.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  .hero-card h2 { color: #fff; }
  .hero-card p { color: #fff; margin-top: 4px; }
  .hero-card .hc-short { display: none; align-items: center; gap: 6px; }
  .hero-card .hc-short svg { width: 18px; height: 18px; }

  /* ---------- alternating page bands ---------- */
  .band { padding: 64px 0; }
  .band--white { background: #fff; }
  .band--gray { background: var(--bg); }

  /* ---------- sections + carousels ---------- */
  .section { padding-top: 64px; }
  .section-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
  .section-head h2 { margin-bottom: 4px; }
  .carousel-nav { display: flex; gap: 12px; flex: none; }
  .carousel-btn {
    width: 40px; height: 40px; border-radius: 99999px; border: 2px solid var(--line-strong); background: var(--bg);
    color: var(--line-strong); display: flex; align-items: center; justify-content: center; padding: 0;
    transition: color .15s, border-color .15s, background-color .15s;
  }
  .carousel-btn.is-active { color: var(--blue); border-color: var(--blue); }
  .carousel-btn.is-active:hover { background: var(--sky-weak); }
  .carousel-btn svg { width: 18px; height: 18px; }
  .track {
    display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 2px 0 8px; margin: -2px 0 -8px; overscroll-behavior-x: contain;
  }
  .track::-webkit-scrollbar { display: none; }
  .track > * { scroll-snap-align: start; flex: none; }
  .bleed { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding-left: var(--gutter); }

  /* vehicle style tiles */
  .styles .track { gap: 0; }
  .tile {
    display: flex; flex-direction: column; gap: 10px; padding: 12px; width: 168px; border-radius: var(--r-md);
    color: var(--ink); transition: background-color .15s;
  }
  .tile p { text-align: center; font-size: 14px; line-height: 20px; color: var(--ink); transition: color .15s, font-weight .15s; }
  .tile .frame { width: 124px; height: 112px; margin: 0 auto; display: grid; place-items: center; }
  .tile img { width: 96px; height: 96px; object-fit: contain; object-position: center; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .tile:hover img { transform: scale(1.12); }
  .tile:hover p { color: var(--blue); font-weight: 600; }
  .tile.tile-all { align-items: center; justify-content: center; }
  .tile-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; padding: 0 12px; }
  .tile-row .tile { width: 168px; flex: 0 1 168px; }
  .tile.tile-all .btn { margin: auto 0; }

  /* explore cards */
  .explore-card {
    display: flex; flex-direction: column; justify-content: space-between; width: 300px; height: 365px;
    border-radius: var(--r-lg); padding: 24px; overflow: hidden; position: relative; color: var(--ink);
    transition: box-shadow .2s;
  }
  .explore-card:hover { box-shadow: var(--shadow-float); }
  .explore-card .copy { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
  .explore-card .copy p { font-size: 14px; line-height: 20px; color: var(--text); }
  .explore-card .art { flex: 1; min-height: 0; position: relative; margin: 12px 0; }
  .explore-card .btn { position: relative; z-index: 1; width: 100%; }
  .explore-card.sky { background: var(--sky); }
  .explore-card.gray { background: var(--line); }
  .explore-card.navy { background: var(--navy); background-image: radial-gradient(circle at 20% 15%, rgba(16, 107, 199, 0.9) 0%, rgba(13, 55, 94, 0) 55%), radial-gradient(circle at 90% 110%, rgba(10, 34, 55, 1) 0%, rgba(13, 55, 94, 0) 50%); }
  .explore-card.black { background: var(--overlay-strong); }
  .explore-card.navy, .explore-card.black { color: #fff; }
  .explore-card.navy h2, .explore-card.black h2, .explore-card.navy .copy p, .explore-card.black .copy p { color: #fff; }
  .art-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); box-shadow: 0 10px 24px rgba(10, 34, 55, 0.18); }

  /* popular service cards */
  .service-card {
    display: flex; flex-direction: column; align-items: flex-start; width: 220px; height: 242px; border-radius: var(--r-md);
    background: var(--bg); box-shadow: inset 0 0 0 1px rgba(10, 34, 55, 0.04); color: var(--ink); overflow: hidden;
    transition: box-shadow .2s, background-color .2s;
  }
  .service-card:hover { background: #fff; box-shadow: var(--shadow-float); }
  .service-card .labels { display: flex; flex-direction: column; gap: 2px; padding: 16px 16px 0; }
  .service-card .labels .cat { font-size: 14px; line-height: 20px; color: var(--text); }
  .service-card .labels .name { font-size: 16px; line-height: 20px; font-weight: 600; color: var(--ink); transition: color .15s; }
  .service-card:hover .name { color: var(--blue); }
  .service-card .icon { flex: 1; width: 100%; display: grid; place-items: center; padding: 8px 16px 12px; }
  .service-card .icon img { width: 184px; height: 118px; object-fit: contain; }
  .ico-accent { color: var(--blue); }
  .ico-amber { color: var(--amber); }

  /* estimate banner */
  .banner {
    margin-top: 48px; display: flex; overflow: hidden; border-radius: var(--r-lg);
    background-color: var(--navy);
    background-image: radial-gradient(circle at -3% 117%, var(--ink) 0px, rgba(0, 0, 0, 0) 50%), radial-gradient(circle at 75% 50%, var(--ink) 0px, rgba(0, 0, 0, 0) 40%), linear-gradient(90deg, #0d375e, #0a2237);
  }
  .banner-inner { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 40px; width: 100%; padding: 56px 56px 56px 64px; }
  .banner-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 560px; }
  .banner-copy .eyebrow { color: var(--sky); }
  .banner-copy h2 { color: #fff; }
  .banner-copy p { color: rgba(255, 255, 255, .82); font-size: 16px; line-height: 24px; }
  .banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
  .banner-art { position: relative; align-self: stretch; min-height: 330px; }
  /* Portrait shot on the banner's own navy, so no cut-out edge exists; a soft mask dissolves the
     photo's borders into the gradient. */
  .banner-mech { position: absolute; right: -16px; bottom: -26px; height: 372px; width: auto;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 45%, #000 55%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0) 92%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 60% 70% at 50% 45%, #000 55%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0) 92%);
    mask-composite: intersect; }
  .estimate { position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(-3deg); width: 272px; background: #fff; border-radius: var(--r-md); box-shadow: 0 24px 48px rgba(0, 0, 0, .35); color: var(--ink); overflow: hidden; }
  .estimate__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .estimate__tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .estimate__lines { padding: 6px 16px; }
  .estimate__lines li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 13px; line-height: 18px; color: var(--text); border-bottom: 1px dashed var(--line); }
  .estimate__lines li:last-child { border-bottom: 0; }
  .estimate__lines b { font-weight: 600; color: var(--ink); font-size: 12px; background: var(--sky-weak); padding: 2px 8px; border-radius: 99999px; }
  .estimate__foot { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--green-weak); }
  .estimate__foot b { display: block; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink); }
  .estimate__foot small { font-size: 12px; line-height: 16px; color: var(--text); }
  .estimate__check { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
  .estimate__check svg { width: 16px; height: 16px; }

  /* marketing carousel */
  .marketing { --slide-w: clamp(640px, 55vw, 1032px); --slide-gap: 28px; padding: 72px 0; position: relative; background: #fff; }
  .marketing .track { gap: var(--slide-gap); padding: 0 max(var(--gutter), calc((100% - var(--slide-w)) / 2)) 8px; margin: 0; }
  .marketing .track > * { scroll-snap-align: center; }
  .slide {
    position: relative; width: var(--slide-w); max-width: calc(100vw - var(--gutter) * 2); height: 580px; border-radius: var(--r-lg); overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--ink);
  }
  .marketing .slide { transition: opacity .25s ease-out; }
  .marketing .slide:not(.is-active) { opacity: .28; }
  .slide .media { position: absolute; inset: 0; }
  .slide .media img { width: 100%; height: 100%; object-fit: cover; }
  .slide .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 13, 16, 0) 30%, rgba(11, 13, 16, 0.55) 65%, rgba(11, 13, 16, 0.92) 100%); }   /* was the template navy (10,34,55), which tinted the photos blue on the dark theme */
  /* phones: the copy covers the lower ~60% of the slide, so the shade starts higher and is deeper behind the title */
  @media (max-width: 700px) { .slide .media::after { background: linear-gradient(180deg, rgba(11, 13, 16, 0) 0%, rgba(11, 13, 16, .3) 24%, rgba(11, 13, 16, .8) 46%, rgba(11, 13, 16, .95) 100%); } }
  .slide .slide-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: 0 24px 24px; max-width: 760px; }
  .slide h2 { color: #fff; }
  .slide p { color: #fff; }
  .slide .btn { align-self: flex-start; margin-top: 12px; }
  .slide-stars { position: absolute; left: 24px; top: 24px; z-index: 1; display: flex; flex-direction: column; gap: 8px; background: rgba(10, 34, 55, .55); backdrop-filter: blur(8px); padding: 14px 18px; border-radius: var(--r-md); }
  .slide-stars .num { font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -1.5px; }
  .slide-stars .stars { display: flex; gap: 3px; }
  .slide-stars .stars svg { width: 22px; height: 22px; fill: var(--amber); }
  .marketing-arrows { position: absolute; left: 0; right: 0; top: calc(72px + 290px); transform: translateY(-50%); pointer-events: none; display: flex; justify-content: space-between; padding: 0 max(24px, calc((100% - var(--slide-w)) / 2 - 120px)); }
  .marketing-arrows button {
    pointer-events: auto; width: 56px; height: 56px; border-radius: 99999px; background: rgba(255, 255, 255, .92); color: var(--navy);
    border: 0; box-shadow: var(--shadow-float); display: grid; place-items: center; transition: transform .15s, background-color .15s;
  }
  .marketing-arrows button:hover { background: #fff; }
  .marketing-arrows button svg { width: 22px; height: 22px; }

  /* schedule + hours */
  .schedule { padding-top: 80px; }
  .schedule-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; }
  .schedule-grid--even { grid-template-columns: 1fr 1.25fr; align-items: stretch; }
  .card.card--map { padding: 0; overflow: hidden; min-height: 420px; display: grid; }
  .card--map .map--fill { position: relative; height: auto; min-height: 420px; border-radius: 0; }   /* beats the base .map height */
  .card--map .map--fill iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
  .card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 32px; }
  .card h3 { margin-bottom: 16px; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field.full { grid-column: 1 / -1; }
  .field label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
  .field label .optional { color: var(--muted); font-weight: 400; }
  .field input, .field select, .field textarea {
    width: 100%; height: 56px; border: 1px solid var(--icon-muted); border-radius: var(--r-sm); background: #fff; padding: 0 16px;
    font-size: 16px; color: var(--ink); transition: border-color .15s, box-shadow .15s;
  }
  .field textarea { height: 120px; padding: 14px 16px; resize: vertical; line-height: 22px; }
  .field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2237' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.35); }
  .field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
  .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-actions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
  .form-actions .btn { align-self: flex-start; min-width: 200px; }
  .form-note { font-size: 13px; line-height: 18px; color: var(--muted); }
  .form-message { display: none; padding: 12px 16px; border-radius: var(--r-sm); font-size: 14px; line-height: 20px; }
  .form-message.is-visible { display: block; }
  .form-message.error { background: #fff5f5; color: #b02525; }
  .form-message.info { background: var(--sky-weak); color: var(--navy); }
  .form-message:focus { outline: none; }
  /* failure panel: what happened, in plain words, and one-tap ways to get the same details to the shop */
  .form-fail { display: grid; gap: 10px; color: var(--ink); }
  .form-fail > b { font-size: 16px; line-height: 22px; font-weight: 600; color: #b02525; }
  .form-fail > p { font-size: 14px; line-height: 20px; color: var(--text); }
  .form-fail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .form-fail__actions .btn svg { width: 18px; height: 18px; }
  .form-fail > small { font-size: 13px; line-height: 18px; color: var(--muted); }
  .form-fallback { margin-top: 16px; padding: 16px 18px; border-radius: var(--r-sm); background: #fff5f5; color: var(--ink); }
  .form-fallback b { display: block; color: #b02525; font-weight: 600; margin-bottom: 4px; }
  .form-fallback p { font-size: 14px; line-height: 20px; color: var(--text); }
  .success { display: none; text-align: center; }
  .success.is-visible { display: block; }
  .success svg { width: 56px; height: 56px; margin: 0 auto 12px; color: var(--green); }
  .success h3 { margin-bottom: 8px; }
  .steps { display: grid; gap: 14px; margin: 20px 0 0; padding: 0; counter-reset: step; }
  .steps li { display: flex; gap: 14px; align-items: flex-start; }
  .steps li::before { counter-increment: step; content: counter(step); flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sky-weak); color: var(--blue); font-weight: 700; display: grid; place-items: center; font-size: 14px; }
  .steps strong { display: block; color: var(--ink); font-weight: 600; }
  .steps span { font-size: 14px; line-height: 20px; color: var(--text); }
  .hours-card { display: grid; gap: 20px; }
  .status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 99999px; font-size: 14px; font-weight: 600; width: fit-content; }
  .status .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255, 255, 255, .6); }
  .status.is-open { background: var(--green-weak); color: var(--green); }
  .status.is-closed { background: #fff5f5; color: #b02525; }
  .status .detail { font-weight: 400; color: var(--text); }
  .hours { width: 100%; border-collapse: collapse; }
  .hours td { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }
  .hours td:last-child { text-align: right; color: var(--text); }
  .hours td.closed { color: var(--muted); }
  .hours tr.today td { font-weight: 600; color: var(--blue); }
  .hours tr:last-child td { border-bottom: 0; }
  .hours-note { font-size: 13px; line-height: 18px; color: var(--muted); }
  .address { font-style: normal; color: var(--ink); line-height: 24px; }
  .contact-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 500; }
  .map { border-radius: var(--r-md); overflow: hidden; height: 220px; background: var(--line); }
  .map iframe { width: 100%; height: 100%; border: 0; display: block; }


  /* The roll-up itself is a Web Animation started from components.js (not a CSS transition), so it
     always runs from the at-rest frame even when the page is ready before the door was ever painted. */

  /* statement: big editorial type, one quiet sentence, nothing moving */
  .statement { padding: 120px 0 56px; }
  /* Same geometry as the template's statement (operator 2026-10-15: "too far left a little and doesn't fit right like this" + the
     template): 1.4fr / 1fr columns, so the side text starts at the template's x (786px into a 1320px container), bottom-aligned with a
     10px lift. Johnny's sentence is longer than the template's, so the side column is 420px (not 380) to keep it on 3 lines like the
     template's; 3 lines is what puts the text at the template's height against the headline. */
  .statement__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; }
  .statement h2 { font-size: 88px; line-height: .98; font-weight: 700; letter-spacing: -3.5px; color: var(--ink); }
  .statement h2 span { display: block; }
  .statement h2 .accent { color: var(--blue); }
  .statement__aside { padding-bottom: 10px; max-width: 420px; }
  .statement__aside p { font-size: 18px; line-height: 28px; color: var(--text); margin-bottom: 16px; }

  .welcome { padding: 96px var(--gutter); background: var(--bg); }


  /* brand moment */
  .moment { display: flex; justify-content: center; overflow: hidden; }
  .moment.band { padding: 64px var(--gutter); }
  .moment-inner > img { width: 100%; max-width: var(--container); height: 640px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-float); }
  .moment-inner { position: relative; width: 100%; max-width: var(--container); }
  .moment-badge {
    position: absolute; left: 32px; bottom: 32px; background: rgba(255, 255, 255, .96); color: var(--ink); border-radius: var(--r-md);
    padding: 16px 20px; display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow-float); max-width: 420px;
  }
  .moment-badge .logo { flex: none; }
  .moment-badge strong { display: block; font-weight: 600; }
  .moment-badge span { font-size: 14px; color: var(--text); }

  /* about: wide story banner + text */
  .story-banner { margin-bottom: 36px; }
  .story-banner img { width: 100%; height: 560px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-float); display: block; }
  .story-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .pillar { background: #fff; border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 12px; }
  .pillar__icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--sky-weak); color: var(--blue); display: grid; place-items: center; }
  .pillar__icon svg { width: 22px; height: 22px; fill: none; }
  .pillar__icon svg[data-fill], .pillar__icon .star { fill: currentColor; }
  .pillar h3 { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); }
  .pillar p { font-size: 15px; line-height: 24px; color: var(--text); }
  .pillar p strong { color: var(--ink); font-weight: 600; }

  /* browse by: centred segmented control + stacked panels that cross-fade */
  .browse { padding: 0; }
  .seg { position: relative; display: flex; width: fit-content; max-width: 100%; margin: 0 auto 36px; padding: 4px; background: #e6eaf0; border-radius: 99999px; }
  .seg button { position: relative; z-index: 1; border: 0; background: transparent; padding: 10px 22px; border-radius: 99999px; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; transition: color .35s cubic-bezier(.2, .8, .2, 1); }
  .seg button[aria-selected="true"] { color: var(--ink); }
  .seg button:focus-visible { outline: 3px solid rgba(34, 139, 230, .5); outline-offset: -3px; }
  .seg__pill { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0; background: #fff; border-radius: 99999px; box-shadow: 0 1px 2px rgba(10, 34, 55, .12), 0 4px 12px rgba(10, 34, 55, .08); transition: transform .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1); }
  .browse-panels { display: grid; }
  .browse-panel { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; opacity: 0; transform: translateY(10px) scale(.995); pointer-events: none; visibility: hidden; transition: opacity .4s cubic-bezier(.2, .8, .2, 1), transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .45s; }
  .browse-panel.is-active { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s, 0s, 0s; }
  .browse-panel[hidden] { display: grid; }
  .browse-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 14px 16px; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-card); color: var(--ink); transition: box-shadow .2s, transform .35s cubic-bezier(.2, .8, .2, 1); }
  .browse-item:hover { box-shadow: var(--shadow-float); transform: translateY(-2px); color: var(--ink); }
  .browse-item b { font-weight: 600; font-size: 15px; line-height: 20px; }
  .browse-item .t-short { display: none; }
  .browse-item small { grid-column: 1; font-size: 13px; line-height: 18px; color: var(--text); }
  .browse-item svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--icon-muted); }
  .browse-item:hover svg { color: var(--blue); }
  @media (prefers-reduced-motion: reduce) { .seg button, .seg__pill, .browse-panel, .browse-item { transition: none; } }

  /* footer */
  .site-footer { margin: 80px 20px 20px; background: var(--footer); color: #fff; border-radius: 40px; padding: 64px 64px 40px; }
  .footer-grid { display: grid; grid-template-columns: 1fr repeat(4, 196px); gap: 24px; max-width: 1272px; margin: 0 auto; }
  .footer-brand { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
  .footer-brand .mark { display: inline-flex; }
  .footer-brand p { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .8); max-width: 300px; }
  .footer-brand a { color: #fff; font-weight: 500; font-size: 14px; }
  .footer-brand a:hover { color: var(--sky); }
  .footer-col h3 { font-size: 16px; line-height: 20px; font-weight: 600; color: #fff; margin: 0 0 18px; }
  .fgroup + .fgroup { margin-top: 32px; }
  .fgroup__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; cursor: default; pointer-events: none; }
  .fgroup__head > svg { display: none; width: 20px; height: 20px; color: rgba(255, 255, 255, .6); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .fgroup__body { display: block; }
  .footer-col + .footer-col h3 { }
  .footer-col ul { display: grid; gap: 12px; }
  .footer-col a, .footer-col button { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; line-height: 20px; font-weight: 500; background: transparent; border: 0; padding: 0; }
  .footer-col a:hover { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
  .footer-col a svg { width: 16px; height: 16px; }
  .footer-bottom { max-width: 1272px; margin: 56px auto 0; }
  .footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
  .footer-links ul { display: flex; flex-wrap: wrap; gap: 0; }
  .footer-links li { display: flex; align-items: center; }
  .footer-links li + li::before { content: ""; width: 1px; height: 14px; background: rgba(255, 255, 255, .3); margin: 0 10px; }
  .footer-links a { color: #fff; font-size: 14px; }
  .footer-links a:hover { color: var(--sky); }
  .footer-social { display: flex; gap: 20px; }
  .footer-social a { color: #fff; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
  .footer-social a:hover { color: var(--sky); }
  .footer-social svg { width: 20px; height: 20px; }
  .footer-rule { height: 1px; background: rgba(255, 255, 255, .2); margin: 0 0 24px; }
  .footer-legal { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "copy google"; gap: 12px 24px; align-items: center; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .85); }
  .footer-legal > span { grid-area: copy; }
  .footer-legal > ul { grid-area: tag; }
  .footer-legal .footer-social { grid-area: google; justify-self: end; }
  .footer-legal ul { display: flex; flex-wrap: wrap; }
  .footer-legal li { display: flex; align-items: center; }
  .footer-legal li + li::before { content: ""; width: 1px; height: 14px; background: rgba(255, 255, 255, .3); margin: 0 10px; }
  .footer-legal a { color: #fff; }

  /* floating call button */
  .fab {
    position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 56px; height: 56px; border-radius: 99999px;
    background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(10, 34, 55, 0.35);
    transition: transform .15s, background-color .15s;
  }
  .fab:hover { background: var(--navy); color: #fff; }
  .fab svg { width: 26px; height: 26px; }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

  /* ---------- responsive ---------- */
  @media (max-width: 1180px) {
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .banner-inner { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 1100px) {
    .tile-row { flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
  }
  @media (max-width: 1024px) {
    .browse-panel { grid-template-columns: 1fr 1fr; }
    .statement h2 { font-size: 64px; letter-spacing: -2.4px; }
    .site-header { min-height: 79px; }
    .header-inner { padding: 0 24px; }
    .header-actions { margin-left: auto; margin-right: 0; }
    .nav { display: none; }
    .menu-pill { display: inline-flex; }
    .header-phone .num { display: none; }
    .header-phone { width: 44px; padding: 0; justify-content: center; }
    .schedule-grid { grid-template-columns: 1fr; }
    .card--map { min-height: 320px; }
    .browse-left { flex-direction: column; }
    .site-footer { padding: 48px 32px 32px; margin: 64px 12px 12px; border-radius: 32px; }
  }
  @media (max-width: 860px) {
    /* phones: headline in the sky, search under it, the truck framed in the middle, one CTA row pinned to the bottom */
    .hero { min-height: 640px; align-items: stretch; }
    .hero-inner { display: flex; flex-direction: column; padding: 104px var(--gutter) 16px; gap: 20px; }
    .hero-cards { margin-top: auto; }
    .hero-card--call { display: none; }
    .hero h1 { font-size: 40px; line-height: 40px; letter-spacing: -0.8px; }
    /* photo fills the hero height; the horizontal position centres the GMC (it sits right of centre in the frame) */
    .hero-photo { height: 112%; top: 0; bottom: auto; object-position: 50% 50%; }   /* phones get their own portrait file (hero-phone-v1, via <picture>): sky above the headline, the shop sign and the whole GMC in the middle, asphalt under the cards; 112% from the top enlarges the sign and truck while the sign's edge and the truck bed still fit at 360px wide */
    .hero-tint { background: linear-gradient(180deg, rgba(10, 34, 55, 0.3) 0%, rgba(10, 34, 55, 0.12) 28%, rgba(10, 34, 55, 0.08) 62%, rgba(10, 34, 55, 0.74) 100%); }
    /* one glass panel, two rows: copy on the left, a short button on the right */
    .hero-cards { grid-template-columns: 1fr; gap: 0; border-radius: var(--r-md); overflow: hidden; background: rgba(20, 30, 46, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
    .hero-card { grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px 14px 14px 18px; min-height: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
    .hero-card + .hero-card { border-top: 1px solid rgba(255, 255, 255, 0.12); }
    .hero-card h2 { font-size: 17px; line-height: 22px; letter-spacing: -.1px; }
    .hero-card p { font-size: 13px; line-height: 18px; margin-top: 2px; }
    .hero-card .btn { justify-self: end; height: 40px; padding: 0 16px; }
    .hero-card .hc-long { display: none; }
    .hero-card .hc-short { display: inline-flex; }
    .section { padding-top: 48px; }
    .band { padding: 48px 0; }
    .moment.band { padding: 48px var(--gutter); }
    .carousel-nav { display: none; }
    .banner { margin-top: 40px; }
    .banner-inner { grid-template-columns: 1fr; padding: 28px 24px 0; gap: 20px; }
    .banner-copy h2 { font-size: 22px; line-height: 28px; letter-spacing: -0.2px; }
    .banner-art { min-height: 300px; }
    .banner-mech { right: -36px; bottom: -22px; height: 330px; }
    .estimate { left: 0; top: 36px; transform: rotate(-2deg) scale(.82); transform-origin: top left; width: 228px; }
    .estimate__head { padding: 12px 14px; gap: 10px; }
    .estimate__head .logo { font-size: 12px; }
    .estimate__tag { font-size: 9px; letter-spacing: .06em; white-space: nowrap; }
    .estimate__lines li { font-size: 12px; }
    .estimate__lines li span { max-width: 130px; }
    .marketing { --slide-w: calc(100vw - 48px); --slide-gap: 16px; padding: 48px 0; }
    .marketing .slide:not(.is-active) { opacity: .5; }
    .marketing .track { padding-left: var(--gutter); padding-right: var(--gutter); }
    .slide { height: 480px; }
    .marketing .track { padding-bottom: 8px; }
    .marketing-arrows { display: none; }
    .schedule { padding-top: 56px; }
    .card { padding: 24px; }
    .form-grid { grid-template-columns: 1fr; }
    .statement { padding: 64px 0 40px; }
    .statement__inner { grid-template-columns: 1fr; gap: 24px; }
    .statement h2 { font-size: 48px; letter-spacing: -1.8px; }
    .welcome { padding: 56px var(--gutter); }
    .moment-inner > img { height: 420px; }
    .moment-badge { left: 16px; right: 16px; bottom: 16px; max-width: none; }
    /* mobile: compact two-column chips, titles only, so the section stays short */
    .browse-panel { grid-template-columns: 1fr 1fr; gap: 8px; }
    .browse-item { grid-template-columns: 1fr auto; padding: 12px 12px 12px 14px; border-radius: 10px; }
    .browse-item b { font-size: 14px; line-height: 18px; }
    .browse-item .t-full { display: none; }
    .browse-item .t-short { display: block; }
    .browse-item small { display: none; }
    .browse-item svg { grid-row: 1; width: 16px; height: 16px; }
    .seg { width: 100%; margin-bottom: 24px; }
    .seg button { flex: 1; padding: 10px 8px; font-size: 14px; }
    /* phone footer: brand block, then collapsible groups, then the link strip */
    .footer-grid { grid-template-columns: 1fr; gap: 0; }
    .footer-brand { padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .12); margin-bottom: 4px; }
    .footer-col { display: contents; }
    .fgroup { border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .footer-col:last-child .fgroup:last-child { border-bottom: 0; }   /* the separator rule follows */
    .fgroup + .fgroup { margin-top: 0; }
    .fgroup__head { pointer-events: auto; cursor: pointer; padding: 18px 0; min-height: 56px; }
    .fgroup__head h3 { margin: 0; }
    .fgroup__head > svg { display: block; }
    .fgroup.is-open .fgroup__head > svg { transform: rotate(180deg); }
    .fgroup__body { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1); }
    .fgroup__body > ul { min-height: 0; padding-bottom: 0; transition: padding .4s cubic-bezier(.2, .8, .2, 1); }
    .fgroup.is-open .fgroup__body { grid-template-rows: 1fr; }
    .fgroup.is-open .fgroup__body > ul { padding-bottom: 20px; }
    .footer-col ul { gap: 14px; }
    .footer-col a { font-size: 15px; }
    .footer-bottom { margin-top: 32px; }
    .footer-legal { grid-template-columns: 1fr; grid-template-areas: "google" "copy"; text-align: center; justify-items: center; }
    .footer-legal .footer-social { justify-self: center; margin-bottom: 8px; }
    .footer-social a { min-height: 44px; }
    .fab { bottom: 16px; }
  }
  @media (max-width: 480px) {
    .site-header { min-height: 68px; }
    .header-inner { height: 68px; padding: 0 var(--gutter); }
    .logo { font-size: 21px; }
    .hero-inner { padding-top: 88px; }
    .hero h1 { font-size: 36px; line-height: 36px; }
    .explore-card { width: 280px; }
    .tile { width: 134px; }
    .tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0; }
    .tile-row .tile { width: auto; flex: none; padding: 8px 4px; }
    .tile .frame { width: 100px; height: 96px; }
    .tile img { width: 82px; height: 82px; }
    .site-footer { padding: 40px 24px 24px; margin: 56px 8px 8px; border-radius: 28px; }
  }

  /* ==========================================================================
     Page templates (all pages except the home hero sections)
     ========================================================================== */
  .nav a[aria-current="page"] { background: var(--bg); color: var(--blue); }
  .footer-muted { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .8); }
  .link-plain { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--blue); }
  .link-plain svg { width: 18px; height: 18px; }
  .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--blue); }
  .link-arrow svg { width: 18px; height: 18px; }
  .eyebrow { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
  .muted { color: var(--muted); }
  .chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99999px; background: var(--sky-weak); color: var(--navy); font-size: 12px; font-weight: 600; margin-top: 8px; }

  /* section rhythm */
  .section--pad { padding: 64px 0; scroll-margin-top: calc(var(--header-h, 80px) - 1px); }
  .section--tight { padding: 40px 0; }
  .section--white { background: #fff; }
  .section-head--stack { display: block; margin-bottom: 28px; }
  .section-head--stack .eyebrow { margin-bottom: 8px; }
  .section-head--stack h2 { margin-bottom: 8px; }
  .section-head--stack p { max-width: 640px; }
  .section-head--center { text-align: center; }
  .section-head--center p { margin: 0 auto; }

  /* crumbs */
  .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--muted); margin-bottom: 16px; }
  .crumbs a { color: var(--muted); }
  .crumbs a:hover { color: var(--blue); }
  .crumbs .sep { opacity: .6; }

  /* page hero — light */
  .page-hero { background: #fff; border-bottom: 1px solid var(--line); }
  .page-hero__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding: 56px var(--gutter) 64px; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; }
  .page-hero__inner.is-single { grid-template-columns: 1fr; }
  .page-hero__inner.is-single .page-hero__copy { max-width: 760px; }
  .page-hero h1 { font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -1.2px; color: var(--ink); margin: 10px 0 14px; }
  .page-hero__sub { font-size: 18px; line-height: 28px; color: var(--text); max-width: 600px; }
  .page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
  .page-hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; font-size: 14px; color: var(--text); }
  .page-hero__trust .stars { display: inline-flex; gap: 2px; }
  .page-hero__trust .stars svg { width: 18px; height: 18px; fill: var(--amber); }
  .page-hero__media { position: relative; }
  .page-hero__media img { width: 100%; height: 400px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-float); }
  .page-hero__badge { position: absolute; left: 20px; bottom: 20px; background: rgba(255, 255, 255, .96); color: var(--ink); border-radius: var(--r-md); padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-card); }
  .page-hero__badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }

  /* page hero — photo */
  .page-hero--photo { position: relative; min-height: 460px; background: var(--ink); color: #fff; display: flex; align-items: flex-end; overflow: hidden; border: 0; }
  .page-hero--photo .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .page-hero--photo .hero-tint { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 34, 55, .78) 0%, rgba(10, 34, 55, .45) 45%, rgba(10, 34, 55, .1) 80%), linear-gradient(180deg, rgba(10, 34, 55, .2) 0%, rgba(10, 34, 55, 0) 40%, rgba(10, 34, 55, .55) 100%); }
  .page-hero--photo .page-hero__inner { position: relative; z-index: 1; grid-template-columns: 1fr; padding: 120px var(--gutter) 56px; }
  .page-hero--photo .crumbs, .page-hero--photo .crumbs a { color: rgba(255, 255, 255, .8); }
  .page-hero--photo .eyebrow { color: var(--sky); }
  .page-hero--photo h1 { font-size: 56px; line-height: 52px; font-weight: 900; letter-spacing: -1.12px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, .35); max-width: 760px; }
  .page-hero--photo .page-hero__sub { color: #fff; }
  .page-hero--photo .page-hero__trust { color: #fff; }

  /* promises / value rows */
  .promise-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .promise { background: #fff; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-card); display: flex; gap: 16px; align-items: flex-start; }
  .promise .ico { flex: none; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--sky-weak); color: var(--blue); display: grid; place-items: center; }
  .promise .ico svg { width: 22px; height: 22px; }
  .promise b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
  .promise p { font-size: 14px; line-height: 20px; color: var(--text); }

  /* service detail cards */
  .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .svc-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }   /* an odd last card sits centred, not stranded left */
  .svc-detail { background: #fff; border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--header-h, 80px) + 20px); }
  .svc-detail__head { display: flex; gap: 18px; align-items: flex-start; }
  .svc-detail .frame { flex: none; width: 96px; height: 96px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; }
  .svc-detail .frame img { width: 76px; height: 76px; object-fit: contain; }
  .svc-detail__short { color: var(--text); margin-top: 4px; }
  .svc-detail__desc { color: var(--text); }
  .checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .checklist li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--ink); }
  .checklist svg { flex: none; width: 18px; height: 18px; color: var(--green); margin-top: 1px; }
  .svc-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 4px; }

  /* compact service list (truck page) */
  .svc-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .svc-mini { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-card); color: var(--ink); transition: box-shadow .2s; }
  .svc-mini:hover { box-shadow: var(--shadow-float); color: var(--ink); }
  .svc-mini .frame { flex: none; width: 64px; height: 64px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; }
  .svc-mini .frame img { width: 50px; height: 50px; object-fit: contain; }
  .svc-mini > span:not(.frame) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .svc-mini b { font-weight: 600; }
  .svc-mini small { font-size: 13px; line-height: 18px; color: var(--text); }
  .svc-mini > svg { width: 18px; height: 18px; color: var(--icon-muted); flex: none; }

  /* info cards + stats + steps */
  .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .info-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .info-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .info-card { background: #fff; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-card); }
  .info-card h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 20px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
  .info-card h3 svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
  .info-card p, .info-card li { font-size: 14px; line-height: 20px; color: var(--text); }
  .info-card--accent { background: var(--sky-weak); box-shadow: none; }
  .info-card--navy { background: var(--navy); color: #fff; box-shadow: none; }
  .info-card--navy h3, .info-card--navy p { color: #fff; }
  .info-card--navy h3 svg { color: var(--sky); }
  .contact-list { display: grid; gap: 10px; }
  .contact-list li { display: flex; align-items: flex-start; gap: 10px; }
  .contact-list svg { width: 18px; height: 18px; color: var(--icon-muted); flex: none; margin-top: 1px; }   /* each icon centred on its row's first line (20px): a note or a second address line sits under the text */
  .contact-list a { font-weight: 500; }
  /* the phone with "24/7 scheduling available" under it, the same two lines as the Phone card on Hours & directions (operator 2026-10-21) */
  .contact-list__phone { display: flex; flex-direction: column; }
  .contact-list__phone small { font-size: 13px; line-height: 18px; color: var(--muted); }
  .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .stat { background: #fff; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-card); }
  .stat__num { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -1.5px; color: var(--ink); }
  .stat__num .u { font-size: 20px; letter-spacing: 0; color: var(--blue); margin-left: 2px; }
  .stat__label { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--text); }
  .step-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: st; }
  .step-row--3 { grid-template-columns: repeat(3, 1fr); }
  .step { position: relative; background: #fff; border-radius: var(--r-lg); padding: 24px 24px 24px 24px; box-shadow: var(--shadow-card); }
  .step::before { counter-increment: st; content: counter(st); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; margin-bottom: 14px; }
  .step b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
  .step p { font-size: 14px; line-height: 20px; color: var(--text); }

  /* prose + story */
  .story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
  .story-media { position: relative; }
  .story-media img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-float); }
  .prose h2 { margin: 8px 0 12px; }
  .prose p { color: var(--text); margin-bottom: 14px; }
  .prose p:last-child { margin-bottom: 0; }
  .prose strong { color: var(--ink); font-weight: 600; }

  /* honesty box */
  .notice { display: grid; grid-template-columns: auto 1fr; gap: 16px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--r-lg); padding: 20px 24px; }
  .notice svg { width: 22px; height: 22px; color: var(--amber); margin-top: 2px; }
  .notice b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
  .notice p, .notice li { font-size: 14px; line-height: 20px; color: var(--text); }
  .notice ul { display: grid; gap: 4px; margin-top: 6px; }
  .notice li { display: flex; gap: 8px; }
  .notice li::before { content: "•"; color: var(--icon-muted); }

  /* brands band (no boxes; logos brighten and lift on hover, like the C.A.R.S. build) */
  .brand-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 34px) clamp(24px, 3.4vw, 48px); max-width: 1088px; margin: 0 auto; padding: 8px 0; }
  .brand-logos li { display: inline-flex; align-items: center; justify-content: center; }
  .brand-logos img { height: clamp(28px, 1.4rem + 1.4vw, 46px); width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .58; transition: opacity .22s var(--ease), transform .22s var(--ease), filter .22s var(--ease); }
  .brand-logos li:hover img { opacity: 1; filter: none; transform: translateY(-3px) scale(1.12); }

  /* faq */
  .faq-list { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
  .faq { background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 0 20px; }
  .faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; color: var(--ink); cursor: pointer; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary svg { width: 20px; height: 20px; color: var(--icon-muted); flex: none; transition: transform .2s; }
  .faq[open] summary svg { transform: rotate(180deg); }
  .faq p { padding: 0 0 18px; font-size: 15px; line-height: 22px; color: var(--text); }

  /* cta band */
  .cta-band { margin: 0; border-radius: var(--r-lg); background-color: var(--navy); background-image: radial-gradient(circle at -3% 117%, var(--ink) 0px, rgba(0, 0, 0, 0) 50%), radial-gradient(circle at 75% 50%, var(--ink) 0px, rgba(0, 0, 0, 0) 40%), linear-gradient(90deg, #0d375e, #0a2237); color: #fff; padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .cta-band h2 { color: #fff; margin-bottom: 6px; }
  .cta-band p { color: rgba(255, 255, 255, .85); }
  .cta-band__btns { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }

  /* hours + map page */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .map--tall { height: 360px; }
  .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .method { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-card); }
  .method__icon { flex: none; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--sky-weak); color: var(--blue); display: grid; place-items: center; }
  .method__icon svg { width: 22px; height: 22px; }
  .method b { display: block; color: var(--ink); font-weight: 600; }
  .method .val { display: block; font-weight: 500; margin: 2px 0; color: var(--blue); }
  .method span.val { color: var(--ink); }
  .method small { font-size: 13px; line-height: 18px; color: var(--muted); }

  /* forms: layout, wizard, picks */
  .form-layout { display: grid; grid-template-columns: 1.4fr .8fr; gap: 24px; align-items: start; }
  .form-aside { display: grid; gap: 16px; position: sticky; top: 96px; }
  .form-legend { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); margin-bottom: 4px; }
  .form-sub { color: var(--text); margin-bottom: 20px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .field-row--3 { grid-template-columns: repeat(3, 1fr); }
  .wiz-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 28px; padding: 0; }
  .wiz-dot { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
  .wiz-dot::before { content: ""; position: absolute; top: 16px; left: -50%; right: 50%; height: 2px; background: var(--line); z-index: 0; }
  .wiz-dot:first-child::before { display: none; }
  .wiz-dot.is-done::before, .wiz-dot.is-current::before { background: var(--blue); }
  .wiz-dot button { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line-strong); background: #fff; color: var(--muted); font-weight: 700; font-size: 14px; display: grid; place-items: center; padding: 0; }
  .wiz-dot.is-current button { border-color: var(--blue); background: var(--blue); color: #fff; }
  .wiz-dot.is-done button { border-color: var(--blue); color: var(--blue); }
  .wiz-dot__label { font-size: 13px; font-weight: 600; color: var(--muted); }
  .wiz-dot.is-current .wiz-dot__label { color: var(--ink); }
  .wiz-step[hidden] { display: none; }
  .svc-pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .svc-pick { position: relative; display: grid; justify-items: center; gap: 8px; padding: 16px 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); transition: border-color .15s, box-shadow .15s, background-color .15s; }
  .svc-pick img { width: 56px; height: 56px; object-fit: contain; }
  .svc-pick:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
  .svc-pick.is-on { border-color: var(--blue); background: var(--sky-weak); box-shadow: inset 0 0 0 1px var(--blue); }
  .svc-pick.is-on::after { content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
  .svc-other { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 99999px; background: #fff; font-weight: 600; font-size: 14px; color: var(--ink); }
  .svc-other.is-on { border-color: var(--blue); background: var(--sky-weak); }
  .svc-other .box { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--line-strong); }
  .svc-other.is-on .box { border-color: var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
  .file-drop { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--bg); cursor: pointer; color: var(--text); font-size: 14px; }
  .file-drop:hover { border-color: var(--blue); }
  .file-drop svg { width: 22px; height: 22px; color: var(--blue); flex: none; }
  .file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .file-name { font-size: 13px; color: var(--muted); margin-top: 6px; min-height: 18px; }
  .form-actions.wiz-nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
  .wiz-nav .form-message { flex-basis: 100%; }
  .wiz-nav .btn { align-self: auto; min-width: 0; }
  .wiz-nav .form-note { flex-basis: 100%; }
  /* "Not sure" chip: in the Continue row, pushed to the far right (it comes first in the source for the tab order) */
  .wiz-nav .svc-other { order: 3; margin: 0 0 0 auto; }
  .wiz-nav .form-note { order: 4; }
  .svc-other[hidden] { display: none; }
  /* phones: Continue and the chip cannot share a row, so the chip takes its own full-width row above Continue (the last choice in the list) */
  @media (max-width: 560px) {
    .wiz-nav .svc-other { order: -1; width: 100%; margin: 0; padding: 12px 16px; }
  }
  .wiz-summary { background: var(--bg); border-radius: var(--r-sm); padding: 14px 16px; font-size: 14px; line-height: 22px; color: var(--text); margin-top: 8px; }
  .wiz-summary b { color: var(--ink); font-weight: 600; }
  .req { color: var(--red); }

  /* make / model comboboxes: free text with a filtered dropdown of known makes and their models */
  .combo { position: relative; }
  .combo input { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238496ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
  .combo input:disabled { background-color: var(--bg); }
  .combo-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-float); padding: 6px; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
  .combo-menu[hidden] { display: none; }
  .combo-opt { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: var(--r-sm); padding: 10px 12px; font-size: 15px; line-height: 20px; color: var(--ink); }
  .combo-opt:hover, .combo-opt.is-active { background: var(--bg); }
  .combo-opt.is-selected { color: var(--blue); font-weight: 600; }
  .combo-opt b { font-weight: 700; color: var(--blue); }

  /* drop-off picker: month grid limited to open days, 30-minute times within shop hours */
  .picker { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
  .picker__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .picker__month { font-size: 15px; font-weight: 600; color: var(--ink); }
  .picker__nav { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; padding: 0; transition: border-color .15s, color .15s; }
  .picker__nav svg { width: 18px; height: 18px; }
  .picker__nav:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
  .picker__nav:disabled { opacity: .35; cursor: default; }
  .picker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .picker__wd { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 0 6px; }
  .picker__day { aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; font-size: 14px; font-weight: 500; color: var(--ink); display: grid; place-items: center; padding: 0; transition: background-color .15s, color .15s; }
  .picker__day:hover:not(:disabled) { background: var(--sky-weak); color: var(--blue); }
  .picker__day:disabled { color: var(--line-strong); cursor: default; }
  .picker__day.is-today { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
  .picker__day.is-selected, .picker__day.is-selected:hover { background: var(--blue); color: #fff; box-shadow: none; }
  .picker__hint { margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--muted); }
  .picker__times { display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--line); padding-left: 22px; min-height: 100%; }
  .picker__times-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
  .picker__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .picker__slot { height: 38px; border-radius: 99999px; border: 1.5px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink); padding: 0; transition: border-color .15s, color .15s, background-color .15s; }
  .picker__slot:hover { border-color: var(--blue); color: var(--blue); }
  .picker__slot.is-selected, .picker__slot.is-selected:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
  /* the chosen time: "Drop-off:" on its own line, the day and time under it, the clear button centred beside both (operator 2026-10-21) */
  .picker__choice { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; color: var(--text); padding-top: 4px; }
  .picker__choice-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .picker__choice b { color: var(--ink); font-weight: 600; }
  .picker__clear { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--bg); color: var(--muted); padding: 0; display: grid; place-items: center; }
  .picker__clear svg { display: block; width: 14px; height: 14px; }   /* an icon, not the "×" character, so it sits in the exact centre */
  .picker__clear:hover { background: var(--line); color: var(--ink); }
  .picker__skip { align-self: flex-start; border: 0; background: transparent; padding: 0; font-size: 14px; font-weight: 500; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
  .picker__skip:hover { color: var(--blue-hover); }
  .picker__empty { font-size: 13px; line-height: 18px; color: var(--muted); }

  /* ------------------------------------------------------------ responsive */
  @media (max-width: 1024px) {
    .page-hero__inner { grid-template-columns: 1fr; gap: 28px; padding: 40px var(--gutter) 48px; }
    .page-hero__media img { height: 300px; }
    .promise-row, .info-grid--3, .info-grid--4, .step-row, .method-grid, .svc-mini-grid { grid-template-columns: 1fr 1fr; }
    .stat-row { grid-template-columns: 1fr 1fr; }
    .form-layout { grid-template-columns: 1fr; }
    .form-aside { position: static; }
    .story-grid { grid-template-columns: 1fr; gap: 28px; }
    .story-pillars { grid-template-columns: 1fr; gap: 16px; }
    .story-banner img { height: 300px; }
    /* on phones the badge sits under the photo instead of covering it */
    .story-banner .moment-badge { position: static; margin-top: 12px; max-width: none; box-shadow: var(--shadow-card); }
    .story-media img { height: 320px; }
    .svc-pick-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 860px) {
    .page-hero h1 { font-size: 34px; line-height: 38px; letter-spacing: -.8px; }
    .page-hero--photo { min-height: 380px; }
    .page-hero--photo .page-hero__inner { padding: 96px var(--gutter) 40px; }
    .page-hero--photo h1 { font-size: 40px; line-height: 40px; }
    .page-hero__sub { font-size: 16px; line-height: 24px; }
    .section--pad { padding: 48px 0; scroll-margin-top: calc(var(--header-h, 80px) + 38px); }
    .promise-row, .info-grid, .info-grid--3, .info-grid--4, .step-row, .method-grid, .svc-grid, .split, .svc-mini-grid { grid-template-columns: 1fr; }
    .svc-grid > :last-child:nth-child(odd) { width: 100%; }
    .checklist { grid-template-columns: 1fr; }
    .cta-band { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
    .field-row, .field-row--3 { grid-template-columns: 1fr; }
    .svc-pick-grid { grid-template-columns: 1fr 1fr; }
    .wiz-dot__label { font-size: 12px; }
    .picker { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
    .picker__times { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
    .picker__slots { grid-template-columns: repeat(3, 1fr); }
    .brand-logos { gap: 18px 26px; }
    .brand-logos img { height: clamp(24px, 6vw, 34px); opacity: .65; }
    .map--tall { height: 260px; }
  }
  @media (max-width: 480px) {
    .stat-row { grid-template-columns: 1fr; }
    .svc-detail { padding: 20px; }
    .svc-detail__head { flex-direction: column; }
  }

  /* ==========================================================================
     Header call-to-action, hero search suggestions, gallery + photo viewer
     ========================================================================== */
  .header-cta { flex: none; }
  .header-cta__short { display: none; }

  /* search suggestions: two-line options, keyboard highlight, "best match" tag */
  .search-menu .opt { align-items: flex-start; }
  .search-menu .opt > svg { margin-top: 2px; }
  .search-menu .opt__text { display: grid; gap: 1px; min-width: 0; flex: 1; }
  .search-menu .opt__text b { font-weight: 600; font-size: 15px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .search-menu .opt__text small { font-size: 13px; line-height: 18px; color: var(--text); }
  .search-menu .opt__tag { flex: none; align-self: center; font-style: normal; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); background: var(--sky-weak); border-radius: 99999px; padding: 3px 8px; }
  .search-menu .opt.is-active { background: var(--bg); }
  .search-menu__note { font-size: 13px; line-height: 18px; color: var(--text); padding: 6px 12px 4px; text-transform: none; letter-spacing: 0; font-weight: 400; }
  .search-menu__note b { color: var(--ink); font-weight: 600; }
  .search-menu__note + p { padding-top: 4px; }
  .search-menu .opt--go > svg, .search-menu .opt--go .opt__text b { color: var(--blue); }

  /* gallery: 12-column mosaic, captions always on */
  .gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 250px; gap: 16px; }
  .g-tile { position: relative; display: block; grid-column: span 4; border-radius: var(--r-lg); overflow: hidden; background: var(--line); box-shadow: var(--shadow-card); color: #fff; isolation: isolate; transition: box-shadow .25s var(--ease), transform .35s var(--ease); }
  .g-tile--lead { grid-column: span 8; grid-row: span 2; }
  .g-tile--tall { grid-row: span 2; }
  .g-tile--wide { grid-column: span 8; }
  /* whole photos, no cropping: the operator's 3840x1648 home photo across the grid, the two 3:2 front-office photos side by side */
  .gallery.gallery--fit { grid-auto-rows: auto; }
  .gallery .g-tile--pano { grid-column: 1 / -1; aspect-ratio: 3840 / 1648; }
  .gallery .g-tile--half { grid-column: span 6; aspect-ratio: 3 / 2; }
  .g-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
  .g-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); color: #fff; }
  .g-tile:hover img { transform: scale(1.03); }
  .g-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
  .g-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 18px 16px; display: grid; gap: 2px; background: linear-gradient(180deg, rgba(10, 34, 55, 0) 0%, rgba(10, 34, 55, .55) 55%, rgba(10, 34, 55, .78) 100%); }
  .g-cap b { font-size: 16px; line-height: 20px; font-weight: 600; }
  .g-tile--lead .g-cap, .g-tile--pano .g-cap { padding: 72px 24px 20px; }
  .g-tile--lead .g-cap b, .g-tile--pano .g-cap b { font-size: 22px; line-height: 26px; letter-spacing: -.2px; }
  .g-card { position: relative; grid-column: span 4; overflow: hidden; border-radius: var(--r-lg); padding: 22px; color: #fff; box-shadow: var(--shadow-card); background-color: var(--navy); background-image: radial-gradient(circle at 85% 115%, #17517f 0, rgba(0, 0, 0, 0) 55%), linear-gradient(135deg, #0d375e, #0a2237); }
  .g-card__copy { position: relative; z-index: 1; max-width: 60%; display: grid; gap: 10px; align-content: start; }
  .g-card__copy .logo { font-size: 20px; }
  .g-card__copy b { font-size: 18px; line-height: 22px; font-weight: 600; letter-spacing: -.2px; }
  .g-card__copy p { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .85); }
  .g-card > img { position: absolute; right: -4px; bottom: 0; height: 90%; width: auto; object-fit: contain; object-position: right bottom; }

  /* photo viewer: native <dialog>, navy backdrop, image never upscaled past its own pixels */
  .lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: transparent; color: #fff; display: none; }
  .lb[open] { display: grid; place-items: center; animation: lb-in .2s var(--ease); }
  .lb::backdrop { background: rgba(10, 34, 55, .94); }
  .lb[open]::backdrop { animation: lb-in .25s ease; }
  @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
  .lb__fig { margin: 0; display: grid; gap: 12px; justify-items: center; max-width: min(92vw, 1400px); touch-action: pan-y; }
  .lb__img { max-width: 100%; max-height: 78vh; max-height: 78dvh; width: auto; height: auto; border-radius: var(--r-md); box-shadow: 0 24px 80px rgba(0, 0, 0, .5); user-select: none; -webkit-user-drag: none; }
  .lb figcaption { text-align: center; display: grid; gap: 2px; padding: 0 16px; }
  .lb figcaption b { font-weight: 600; }
  .lb figcaption small { font-size: 12px; color: rgba(255, 255, 255, .55); margin-top: 4px; }
  .lb__close, .lb__nav { position: fixed; z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; transition: background-color .15s; }
  .lb__close:hover, .lb__nav:hover { background: rgba(255, 255, 255, .26); }
  .lb__close:focus-visible, .lb__nav:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
  .lb__close { top: 20px; right: 20px; }
  .lb__nav { top: 50%; transform: translateY(-50%); }
  .lb__nav--prev { left: 20px; }
  .lb__nav--next { right: 20px; }
  .lb__close svg, .lb__nav svg { width: 22px; height: 22px; }
  .lb-open { overflow: hidden; }

  @media (prefers-reduced-motion: reduce) {
    .lb[open], .lb[open]::backdrop { animation: none; }
    .g-tile, .g-tile img { transition: none; }
  }
  @media (max-width: 1024px) {
    .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 230px; }
    .g-tile, .g-card { grid-column: span 1; }
    .g-tile--lead, .g-tile--wide { grid-column: span 2; }
    .g-tile--lead, .g-tile--tall { grid-row: span 2; }
    .gallery .g-tile--half { grid-column: span 1; }
  }
  @media (max-width: 860px) {
    /* the Questions panel keeps its answers on phones: one column, full question + answer */
    .browse-panel--qa { grid-template-columns: 1fr; }
    .browse-panel--qa .browse-item .t-full { display: block; }
    .browse-panel--qa .browse-item .t-short { display: none; }
    .browse-panel--qa .browse-item small { display: block; }
    .browse-panel--qa .browse-item svg { grid-row: 1 / span 2; }
  }
  @media (max-width: 600px) {
    .gallery { grid-auto-rows: 150px; gap: 10px; }
    .gallery .g-tile--half { grid-column: 1 / -1; }   /* phones: one front-office photo per row, full width */
    .g-tile--pano .g-cap { padding: 32px 12px 10px; }
    .g-tile--pano .g-cap b { font-size: 14px; line-height: 18px; }
    .g-cap { padding: 32px 12px 10px; }
    .g-cap b { font-size: 14px; line-height: 18px; }
    .g-tile--lead .g-cap { padding: 48px 14px 12px; }
    .g-tile--lead .g-cap b { font-size: 17px; line-height: 21px; }
    .g-card { grid-column: span 2; padding: 16px; }
    .g-card__copy { max-width: 62%; gap: 6px; }
    .g-card__copy b { font-size: 16px; line-height: 20px; }
    .lb__close { top: 12px; right: 12px; width: 44px; height: 44px; }
    .lb__nav { top: auto; bottom: 16px; transform: none; width: 44px; height: 44px; }
    .lb__nav--prev { left: 16px; }
    .lb__nav--next { right: 16px; }
    .lb__img { max-height: 70vh; max-height: 70dvh; }
  }
  @media (max-width: 480px) {
    .header-cta { height: 36px; padding: 0 14px; font-size: 14px; }
    .header-cta__long { display: none; }
    .header-cta__short { display: inline; }
  }
  @media (max-width: 380px) {
    /* narrowest phones: "Appointment" + menu button must clear the right gutter */
    .header-actions { gap: 6px; }
    .header-cta { padding: 0 11px; font-size: 13px; }
    .hero-card h2 { font-size: 16px; line-height: 20px; }
    .hero-card { gap: 10px; padding: 14px 12px 14px 16px; }
  }

  /* service spotlight: the card a search landed on */
  /* rings the card for five seconds, then fades back to a normal card (the script removes the class after) */
  .svc-detail.is-spotlit { position: relative; animation: spot-ring 5s var(--ease) forwards; }
  @keyframes spot-ring {
    0%   { box-shadow: var(--shadow-card), 0 0 0 0 rgba(16, 107, 199, 0), 0 0 0 0 rgba(16, 107, 199, 0); }
    10%  { box-shadow: var(--shadow-float), 0 0 0 2px var(--blue), 0 0 0 12px rgba(16, 107, 199, .16); }
    55%  { box-shadow: var(--shadow-float), 0 0 0 2px var(--blue), 0 0 0 12px rgba(16, 107, 199, .16); }
    80%  { box-shadow: var(--shadow-float), 0 0 0 2px var(--blue), 0 0 0 0 rgba(16, 107, 199, 0); }
    100% { box-shadow: var(--shadow-card), 0 0 0 0 rgba(16, 107, 199, 0), 0 0 0 0 rgba(16, 107, 199, 0); }
  }
  .spot-tag { position: absolute; top: -14px; right: 20px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: 99999px; background: var(--blue); color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .01em; box-shadow: 0 6px 18px rgba(16, 107, 199, .35); max-width: calc(100% - 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: spot-tag-in .5s var(--ease) .15s both, spot-tag-out .5s ease 4.4s forwards; }
  .spot-tag svg { width: 14px; height: 14px; flex: none; }
  .spot-tag > span { overflow: hidden; text-overflow: ellipsis; }
  @keyframes spot-tag-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes spot-tag-out { to { opacity: 0; transform: translateY(-4px); } }
  @media (prefers-reduced-motion: reduce) { .svc-detail.is-spotlit { animation: none; box-shadow: var(--shadow-float), 0 0 0 2px var(--blue); } .spot-tag { animation: none; } }   /* the script still clears both after 5 s */
  @media (max-width: 860px) { .spot-tag { right: 12px; } }


/* ==========================================================================
   JOHNNY'S ADR — dark theme + brand overrides (appended; later rules win)
   ========================================================================== */
  :root {
    --blue: #eb1d23; --blue-hover: #c8141b; --blue-active: #9e0f15;
    --navy: #2a0f11;
    --ink: #f3f4f6; --text: #c4c9d1; --muted: #8b93a1; --icon-muted: #6f7886;
    --line: #262b32; --line-strong: #3a414b;
    --bg: #0f1113; --white: #171a1e; --surface-2: #121518; --dark: #0b0d10;
    --sky: #ff5a5f; --sky-weak: #2a1416;
    --green: #2ecc71; --green-weak: #10261a; --red: #ff5a5f;
    --footer: #0a0b0d;
    --font-display: "Barlow Semi Condensed", "Inter", system-ui, sans-serif;
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, .05);
    --shadow-float: 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 40px rgba(0, 0, 0, .5);
  }
  body { background: var(--bg); color: var(--text); }
  ::selection { background: rgba(235, 29, 35, .5); color: #fff; }

  /* surfaces that were hard-coded white */
  .site-header { background: #0f1113; border-bottom: 1px solid var(--line); }   /* solid: the home photo's sky now runs up behind it, and the bar stays the same dark everywhere (was .92 + blur) */
  .nav a, .nav button { background: transparent; color: var(--ink); }
  .nav a:hover, .nav a[aria-current="page"] { background: #1c2026; color: #fff; }
  .menu-pill { background: var(--white); color: var(--ink); border: 1px solid var(--line-strong); }
  .drawer { background: var(--bg); color: var(--ink); }
  /* the site header (z 100) sits over the menu panel's own top bar, so that bar's bottom line showed as a second separator 16px under
     the header's line (operator 2026-10-22: "extra separator line above menu"). The header's line is the only one now. */
  .drawer-head { border-bottom: 0; }
  .band--white, .section--white, .marketing { background: var(--surface-2); }
  .page-hero { background: var(--surface-2); }
  .card, .pillar, .promise, .svc-detail, .svc-mini, .info-card, .stat, .step, .notice, .faq, .method, .browse-item, .svc-pick, .svc-other, .combo-menu, .picker, .picker__nav, .picker__slot, .wiz-dot button { background: var(--white); border: 1px solid var(--line); box-shadow: none; }
  .service-card:hover { background: #1c2026; }
  .field input, .field select, .field textarea { background: #0f1113; color: var(--ink); border-color: var(--line-strong); }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(235, 29, 35, .25); }
  .field input::placeholder, .field textarea::placeholder { color: #6f7886; }
  .seg { background: var(--white); border: 1px solid var(--line); }
  .seg__pill { background: #2a2e35; }
  .seg button { color: var(--text); } .seg button[aria-selected="true"] { color: #fff; }
  .search { background: #fff; color: #0a2237; }
  .search input { color: #0a2237; } .search input::placeholder { color: #5f6a76; }
  .search-menu { background: #fff; color: #0a2237; }
  .estimate { background: #fff; color: #0a2237; }
  .marketing-arrows button { background: var(--white); color: var(--ink); border: 1px solid var(--line-strong); }
  .marketing-arrows button:hover { background: #2a2e35; }
  .carousel-btn { background: var(--white); color: var(--ink); border: 1px solid var(--line-strong); }
  .form-message.error, .form-fallback { background: #2a1416; color: #ffb3b5; border: 1px solid #5a1f22; }
  .form-message.error, .form-fail > b, .form-fallback b { color: #ff8a8e; }
  .status.is-closed { background: #2a1416; color: #ff8a8e; }
  .status.is-open { background: var(--green-weak); color: var(--green); }
  .hours td, .hours th { border-color: var(--line); }

  /* dark bands that used --ink / --navy as a background */
  .hero, .slide, .page-hero--photo { background: var(--dark); }
  .fab { background: var(--blue); } .fab:hover { background: var(--blue-hover); }
  .banner, .cta-band { background-color: #1a0c0d; background-image: radial-gradient(circle at -3% 117%, #3a0e10 0px, rgba(0, 0, 0, 0) 50%), radial-gradient(circle at 103% -17%, #2a0f11 0px, rgba(0, 0, 0, 0) 45%); border: 1px solid rgba(235, 29, 35, .25); }
  .explore-card.sky { background: #2a1416; color: var(--ink); }
  .explore-card.sky h2, .explore-card.sky p { color: var(--ink); }
  .explore-card.gray { background: #1c2026; color: var(--ink); }
  .explore-card.gray h2, .explore-card.gray p { color: var(--ink); }
  .explore-card.navy { background: #3a0e10; }
  .explore-card.black { background: #0b0d10; border: 1px solid var(--line); }
  /* operator 2026-10-21: card buttons a muted red so the main Request service button (#eb1d23) pops: "not so light and not intense red
     like a slighter grey button". Brand hue, saturation halved: hsl(358 52% 50%), white text 5.2:1; hover 44%, active 38%. */
  .explore-card .btn-primary { background: #c23d42; }
  .explore-card .btn-primary:hover { background: #ab363a; }
  .explore-card .btn-primary:active { background: #932f32; }
  .info-card--navy, .g-card { background: #2a0f11; background-image: radial-gradient(circle at 85% 115%, #5a1216 0, rgba(0, 0, 0, 0) 55%); }
  .info-card--accent { background: #2a1416; border-color: #4a1b1e; }
  /* the numbered steps on the accent card (operator 2026-10-21: "put 1 2 3 in circles"): the circle's fill was --sky-weak, the card's own
     colour, so only the number showed. A red ring with a light red fill and a white number, centred on the step's title line. */
  .info-card--accent .steps li::before { width: 28px; height: 28px; margin-top: -2px; background: rgba(235, 29, 35, .16); box-shadow: inset 0 0 0 1.5px var(--blue); color: #fff; font-size: 13px; line-height: 1; }
  .hero-tint { background: linear-gradient(90deg, rgba(11, 13, 16, .88) 0%, rgba(11, 13, 16, .7) 30%, rgba(11, 13, 16, .3) 60%, rgba(11, 13, 16, .15) 80%), linear-gradient(180deg, rgba(11, 13, 16, .35) 0%, rgba(11, 13, 16, 0) 30%, rgba(11, 13, 16, .1) 70%, rgba(11, 13, 16, .85) 100%); }
  .page-hero--photo .hero-tint { background: linear-gradient(90deg, rgba(11, 13, 16, .9) 0%, rgba(11, 13, 16, .62) 45%, rgba(11, 13, 16, .25) 80%), linear-gradient(180deg, rgba(11, 13, 16, .3) 0%, rgba(11, 13, 16, 0) 40%, rgba(11, 13, 16, .7) 100%); }
  .hero-photo { filter: saturate(.9) contrast(1.05); }

  /* type: display face for the big headlines */
  .hero h1, .page-hero--photo h1, .statement h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: .005em; }
  .page-hero h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: .005em; }
  .statement h2 .accent { color: var(--blue); }
  .eyebrow { color: var(--sky); }
  a { color: var(--sky); }
  .link-arrow, .link-inverse { color: var(--sky); }
  .btn-secondary { color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); background: transparent; }
  .btn-secondary:hover { background: #1c2026; box-shadow: inset 0 0 0 2px #4a525d; }
  .btn-primary-inverted { background: #fff; color: #0a2237; }
  .page-hero__trust { color: var(--text); } .page-hero__trust b { color: var(--ink); }
  .page-hero__trust .trust-ico { width: 18px; height: 18px; color: var(--sky); }
  .page-hero__badge { background: var(--white); color: var(--ink); border: 1px solid var(--line); }

  /* brand mark: three red doors with A·D·R + wordmark */
  .logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 900; letter-spacing: -.01em; }
  .logo svg.logo__mark { width: auto; height: 22px; flex: none; }
  .logo--lg svg.logo__mark { height: 28px; } .logo--sm svg.logo__mark { height: 18px; }
  .logo--inverse { color: #fff; }
  .estimate .logo { color: #0a2237; }

  /* Service icons are transparent cut-outs (operator 2026-10-14: "no background"): the object floats on the dark card,
     no frame, no box. Renders: research/tile-icons-prompts.json + remove_background, encoded by research/tile-icons-fetch.sh. */
  .tile img, .svc-pick img, .svc-detail img, .svc-mini img { background: transparent; border: 0; border-radius: 0; padding: 0; object-fit: contain; }
  .svc-detail .frame, .svc-mini .frame { background: transparent; border: 0; }
  /* .chip is sky-weak/navy in the template; both tokens are near-black reds on dark, which hid the text. */
  .chip { color: var(--sky); }
  .form-message.info { color: var(--sky); }
  .brand-logos img { filter: invert(1) grayscale(1) brightness(1.6); opacity: .8; }
  .brand-logos li { background: transparent; border: 0; } /* operator 2026-10-14: "remove the weird boxes" around the make logos */

  /* reviews on the about page */

  /* photos are 800 px: keep them crisp by never scaling up past ~1.6x */
  .banner-art--card { display: flex; align-items: center; justify-content: center; }
  .moment-badge { background: rgba(23, 26, 30, .96); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
  .moment-badge strong { color: var(--ink); } .moment-badge span { color: var(--text); }
  .g-card img, .g-card picture { display: none; }
  .g-card { background-color: #2a0f11; background-image: radial-gradient(circle at 85% 115%, #5a1216 0, rgba(0, 0, 0, 0) 55%), linear-gradient(135deg, #1a0c0d, #3a0e10); }
  /* the real logo: a white plate keeps its black and red elements readable on the dark chrome */
  .logo { gap: 0; }
  .logo__img { display: block; height: 56px; width: auto; background: #fff; border-radius: 10px; padding: 4px 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
  .logo--lg .logo__img { height: 84px; padding: 6px 12px; }
  .logo--sm .logo__img { height: 40px; padding: 3px 6px; border-radius: 8px; }
  .estimate .logo__img { box-shadow: none; padding: 0; }
  @media (max-width: 860px) { .logo__img { height: 46px; } .logo--lg .logo__img { height: 68px; } }
  .logo { gap: 12px; }
  .logo__word { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); line-height: 1; }
  .logo__word em { font-style: normal; color: var(--blue); }
  .logo--lg .logo__word { font-size: 32px; } .logo--sm .logo__word { font-size: 18px; }
  .estimate .logo__word { color: #0a2237; }
  @media (max-width: 860px) { .logo__word { font-size: 20px; } .logo--lg .logo__word { font-size: 26px; } }
  @media (max-width: 420px) { .site-header .logo__word { display: none; } }
  /* the emblem is a transparent PNG: no plate, no wordmark */
  .logo__img, .logo--lg .logo__img, .logo--sm .logo__img { background: none; padding: 0; box-shadow: none; border-radius: 0; }
  /* Sizes (operator 2026-10-17: "can we make the logo larger so we can see it clearly"): the emblem is detailed, so the header
     grows around it: 100 px tall in a 116 px header (72 px in 88 under 861 px), footer 120 (100), About badge 60. Was 60 / 92 / 44
     in an 80 px header. --header-h drives the header and every jump target's scroll-margin, so anchors keep their old gap. */
  :root { --header-h: 116px; }
  @media (max-width: 860px) { :root { --header-h: 88px; } }
  .site-header { min-height: var(--header-h); }
  .header-inner { height: var(--header-h); min-height: var(--header-h); }
  .brand { height: auto; }   /* the link's box is the logo's box: the whole emblem is clickable */
  .logo__img { height: 100px; } .logo--lg .logo__img { height: 120px; } .logo--sm .logo__img { height: 60px; }
  .logo__word { display: none; }
  .estimate .logo__img { height: 40px; }
  @media (max-width: 860px) { .logo__img { height: 72px; } .logo--lg .logo__img { height: 100px; } }
  /* the About photo's rule (.story-banner img: full width, cover, shadow) must not reach the badge's logo: it squeezed and cropped it */
  .story-banner .logo__img { width: auto; object-fit: contain; border-radius: 0; box-shadow: none; }

/* ==========================================================================
   JOHNNY'S — home hero (v3 2026-10-12; card set-up 2026-10-15). Red = action,
   yellow = emphasis, heavy italic condensed display face (the oval's lean).
   Solid header above it, as on every page. No door.
   ========================================================================== */
  :root {
    --yellow: #ffe600;            /* the oval's fill (sampled #fcf800, tempered a touch for text on black) */
    --yellow-deep: #e6c800;
    --font-hero: "Barlow Condensed", "Barlow Semi Condensed", "Inter", system-ui, sans-serif;
  }

  /* ---- header (operator 2026-10-15: "make it so the navigation bar is always that dark ... remove the transparency transition"):
     the home page uses the site's solid sticky header, the same as every other page, with the hero starting under it ---- */
  /* the floating call button is redundant while the hero's own Call button is on screen */
  body.home .fab { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
  body.home.past-hero .fab { opacity: 1; transform: none; pointer-events: auto; }

  /* ---- hero shell ---- */
  /* Hero set-up (operator 2026-10-15: "the hero is going to have this format now ... replace the main hero card with this set up",
     a screenshot of the design template). The template's layout with Johnny's type and colour: the photo fills the stage under the
     header, the headline and the search sit on the left, the two glass cards stand on the asphalt along the bottom.
     Photo v9 (operator, 2026-10-15; v5, v6 and v8 had the same framing): the motorhome starts at 44.6% of the frame's width (its mirror) and the wheels stand at 79%
     of its height, so the stage is the photo's own aspect (whole frame, capped at the screen height), the headline and the search
     are sized to end 24px before the motorhome, and the cards sit on the asphalt, 16px above the photo's bottom edge. The vehicle
     blocks follow straight under the photo on the next band's colour (operator: "dont have this random black banner").
     Spacing otherwise the template's: headline to search 24px, cards 24px apart
     with 24px padding; the headline and search centred above them. The photo itself is static and lossless: no filter, no scale, no motion (operator 2026-10-13). */
  .hero--cards { --hero-ratio: .42917;   /* 1648 / 3840: the landscape photo's aspect */
    --hero-focus: 50% 50%;              /* object-position when the screen-height cap trims the photo (ultrawide screens, under 2%) */
    --hero-rv: .445;                    /* the motorhome's left edge (mirror, x 1714 of 3840 = .4464), rounded down */
    --content-left: max(var(--gutter), (100vw - var(--container)) / 2);
    --hero-col: calc(100vw * var(--hero-rv) - var(--content-left) - 24px);   /* room left of the motorhome for the headline and the search */
    --hero-wheels: .79;                 /* the wheels stand at 78.6% of the photo's height (y 1296): the cards never start above 79% */
    --photo-h: min(calc(100vw * var(--hero-ratio)), 100vh);   /* the photo at full width, capped at the screen height */
    position: relative; z-index: 3; isolation: isolate; display: flex; flex-direction: column; align-items: stretch;
    min-height: 0; overflow: visible; background: var(--surface-2); color: #fff; container-type: inline-size; }   /* z-index 3: the search menu may hang below the stage, over the next section */
  @supports (width: 1cqw) and (height: 1svh) {   /* container units leave out a desktop scrollbar */
    .hero--cards { --content-left: max(var(--gutter), (100cqw - var(--container)) / 2); --hero-col: calc(100cqw * var(--hero-rv) - var(--content-left) - 24px);
      --photo-h: min(calc(100cqw * var(--hero-ratio)), 100svh); }
  }
  /* The stage is the photo's height; if the cards need more room than the asphalt under the wheels gives them (about 1024-1200px
     wide), the stage grows below the photo instead, onto the next band's colour, so the cards never cover a vehicle. */
  .hero-stage { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--photo-h); }
  /* The photo's top (sky) slides up behind the bar by 12% of the photo's height (operator 2026-10-17: "the navigation bar doesn't
     have to start so high ... it can START into the sky a little more", with a screenshot cutting ~97 px of sky under the bar at
     1906 px wide = 12%). Photo, headline, search, cards and vehicle blocks move up together, so nothing moves on the photo itself;
     the bar stays on top (z-index 100). */
  .hero--cards { --sky-tuck: .12; }
  .hero--cards .hero-stage { margin-top: calc(var(--photo-h) * var(--sky-tuck) * -1); }
  .hero--cards .hero-bg { position: absolute; top: 0; left: 0; right: 0; height: var(--photo-h); z-index: 0; overflow: hidden; }
  .hero--cards .hero-bg picture { display: contents; }
  .hero-bg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus); }
  /* The template's legibility tint, in the site's near-black instead of its navy, ending at the motorhome so no vehicle is shaded;
     and a fade over the asphalt only (below the wheels) that ends in the next band's colour (--surface-2), drawn on top so the
     photo's last row is exactly that colour: no seam. */
  .hero--cards .hero-tint { position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(18, 21, 24, 0) 0%, rgba(18, 21, 24, 0) 80%, rgba(18, 21, 24, .55) 92%, #121518 100%),
                linear-gradient(90deg, rgba(11, 13, 16, .65) 0%, rgba(11, 13, 16, .45) 25%, rgba(11, 13, 16, .15) 40%, rgba(11, 13, 16, 0) 44.5%); }
  .hero--cards .hero-inner { position: relative; z-index: 1; width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto;
    padding: 32px var(--gutter) 16px; flex: 1 0 auto; display: flex; flex-direction: column; gap: 0; }   /* gap 0: the template's .hero-inner has 80px */
  /* headline + search centred between the header and the cards (operator 2026-10-15: "center this more vertically"): the block takes
     the free height, at least down to 32px above the wheel line, and centres in it, so the space over it equals the space under it */
  .hero--cards .hero-top { position: relative; z-index: 2; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; min-width: 0;
    min-height: calc(var(--photo-h) * var(--hero-wheels) - 64px); }

  /* ---- headline: the template's face (operator 2026-10-15: "use the template's font for the hero ... just the font"): Inter Black,
     upright, uppercase; Johnny's white + yellow kept. "JOHNNY'S" big on the first line, "AUTO. DIESEL. RV." under it at the same
     width (operator 2026-10-21), "JOHNNY'S" centred over the letters of the second line ("isnt centered over the auto diesel RV?"):
     the second line is as wide as the search field under them (--hero-w), its last letter (the V) ends at 97.4% of that width and the
     period hangs out after it, so "JOHNNY'S" spans J to V: 97.4% of the width over its ink width of 5.2736 font-sizes (-0.02em)
     = width / 5.416. The second line is .5813 of that size (+0.02em). Measured on screen in Inter Black from 390 to 1920px wide. ---- */
  .hero--cards { --hero-w: min(560px, var(--hero-col)); --hero-h1: calc(var(--hero-w) / 5.416); }
  .hero--cards .hero-title {
    font-family: var(--font); font-style: normal; font-weight: 900; text-transform: uppercase;
    font-size: var(--hero-h1); width: var(--hero-w);
    line-height: .86; letter-spacing: -.02em; color: #fff;
    text-shadow: 0 0 12px rgba(0, 0, 0, .6), 0 2px 28px rgba(0, 0, 0, .5);   /* the tight layer keeps the yellow line readable where it crosses the white siding; measured under the letters */
    margin: 0;
  }
  .hero--cards .hero-title span, .hero--cards .hero-title em { display: block; white-space: nowrap; }   /* each line is sized to fit; never break */
  .hero--cards .hero-title em { font-style: inherit; color: var(--yellow); font-size: .5813em; letter-spacing: .02em; line-height: 1; margin-top: .04em; }
  /* third line: what and where, in the words people search ("best mechanic", "repair shop", "Kennewick, WA"), small and in normal
     case. Its Inter 600 text is 22.7 font-sizes wide, so up to 20px it shrinks to stay inside the headline's width on narrow screens. */
  .hero--cards .hero-title .hero-title__where { font-size: min(20px, var(--hero-w) / 23.4); font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.3; margin-top: .7em; white-space: normal; text-wrap: balance; }   /* wraps instead of overflowing if Inter fails to load (the fallback is wider) */

  /* ---- the symptom search: the template's white field, Johnny's focus colour ---- */
  .search--light { width: 560px; max-width: 100%; height: 56px; border-radius: 12px; background: #fff; border: 1px solid #d5dbe3; color: #0a2237; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
  .hero--cards .search--light { width: min(560px, var(--hero-col)); }
  .search--light > svg { color: #0a2237; }
  .search--light input { height: 54px; border-radius: 12px; color: #0a2237; }
  .search--light input::placeholder { color: #5f6a76; }
  .search--light:focus-within { border-color: var(--yellow-deep); box-shadow: 0 0 0 3px rgba(255, 230, 0, .5), 0 10px 30px rgba(0, 0, 0, .25); }
  .search--light .search-menu { background: #fff; color: #0a2237; border: 1px solid #e2e8f0; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
  .search--light .search-menu p { color: #64748b; }
  .search--light .search-menu button { color: #0a2237; }
  .search--light .search-menu button svg { color: #8496ae; }
  .search--light .search-menu .opt:hover, .search--light .search-menu .opt:focus-visible, .search--light .search-menu .opt.is-active { background: #f1f3f5; }
  .search--light .search-menu .opt__text small { color: #475569; }
  .search--light .search-menu .opt__tag { color: #b3121a; background: #fdecec; }
  .search--light .search-menu .opt--go > svg, .search--light .search-menu .opt--go .opt__text b { color: #b3121a; }
  .search--light .search-menu__note { color: #475569; }
  .search--light .search-menu__note b { color: #0a2237; }

  /* ---- the two cards ---- */
  .hero--cards .hero-cards { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    margin-top: 32px; }
  .hero--cards .hero-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
    padding: 24px; min-height: 100px; border-radius: 18px; color: #fff;   /* 18px: the vehicle blocks' radius right under them */
    background: rgba(11, 13, 16, .66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
  .hero--cards .hero-card h2 { margin: 0; color: #fff; }
  .hero--cards .hero-card p { margin: 4px 0 0; color: rgba(255, 255, 255, .86); }
  .hero--cards .hero-card .btn { justify-self: end; }
  .hero--cards .hero-card .btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
  /* one label per button ("Request Service", "Call (509) 222-1200"); on narrow phones the words after the first are hidden visually
     but still read out, and the call button gains its phone icon */
  .hero--cards .hero-card .hc-ico { display: none; width: 18px; height: 18px; }
  /* the live open / lunch / closed line (js: paint), dot coloured like the status pills elsewhere */
  .hero-card__status .dot { display: inline-block; width: 8px; height: 8px; margin: 0 9px 0 1px; border-radius: 50%; vertical-align: 1px; background: rgba(255, 255, 255, .5); }
  .hero-card__status.is-open .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(46, 204, 113, .22); }
  .hero-card__status.is-lunch .dot { background: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 230, 0, .22); }
  .hero-card__status.is-closed .dot { background: var(--blue); box-shadow: 0 0 0 3px rgba(235, 29, 35, .25); }
  .hero-card__status .detail { color: rgba(255, 255, 255, .7); }
  @media (forced-colors: active) { .hero--cards .hero-card { border: 1px solid CanvasText; } }
  /* the vehicle blocks: straight under the photo (24px under the cards), on the next band's colour */
  .hero--cards .hero-lanes { padding-top: 8px; }

  /* ---- under 1024px wide, and tablets in portrait: stacked ----
     The headline over the photo would sit on the vehicles here, so the photo keeps its own aspect at the top (lossless crops
     for portrait screens, see the <picture>), and the headline, search and cards follow on the page with the headline's
     first line on the faded asphalt. The two cards become one panel with two rows, the vehicle blocks' style. */
  @media (orientation: portrait) and (max-width: 1023px) { .hero--cards { --hero-ratio: .66667; } }   /* 2472x1648 (3:2) */
  @media (orientation: portrait) and (max-width: 700px) { .hero--cards { --hero-ratio: .75011; } }    /* 2197x1648 (4:3) */
  @media (max-width: 1023px) {
    .hero-stage { min-height: 0; justify-content: flex-start; }
    .hero--cards .hero-stage { margin-top: calc(100vw * var(--hero-ratio) * var(--sky-tuck) * -1); }   /* stacked: the photo is the full width */
    @supports (width: 1cqw) { .hero--cards .hero-stage { margin-top: calc(100cqw * var(--hero-ratio) * var(--sky-tuck) * -1); } }
    .hero--cards .hero-bg { position: relative; inset: auto; flex: none; height: calc(100vw * var(--hero-ratio)); }
    @supports (width: 1cqw) { .hero--cards .hero-bg { height: calc(100cqw * var(--hero-ratio)); } }
    .hero--cards .hero-tint { background: linear-gradient(180deg, rgba(18, 21, 24, 0) 0%, rgba(18, 21, 24, 0) 80%, rgba(18, 21, 24, .7) 93%, #121518 100%); }
    .hero--cards .hero-inner { margin-top: calc(-.42 * var(--hero-h1)); padding: 0 var(--gutter); gap: 0; }   /* the headline's first line sits on the photo's faded bottom edge */
    .hero--cards .hero-cards { margin-top: 22px; }
    .hero--cards .hero-lanes { padding-top: 10px; }   /* the vehicle blocks' own 10px rhythm */
    .hero--cards .hero-top { gap: 18px; min-height: 0; }
    .hero--cards .search--light { width: min(560px, 100%); }
    .hero--cards { --hero-w: min(560px, 100vw - 2 * var(--gutter)); }
    @supports (width: 1cqw) { .hero--cards { --hero-w: min(560px, 100cqw - 2 * var(--gutter)); } }   /* the search field's width here */
    .hero--cards .hero-cards { grid-template-columns: 1fr; gap: 0; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .05); box-shadow: none; }
    .hero--cards .hero-card { padding: 14px 14px 14px 18px; min-height: 0; gap: 14px; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
    .hero--cards .hero-card + .hero-card { border-top: 1px solid rgba(255, 255, 255, .08); }
    .hero--cards .hero-card h2 { font-size: 17px; line-height: 22px; letter-spacing: -.1px; }
    .hero--cards .hero-card p { font-size: 13px; line-height: 18px; margin-top: 2px; }
    .hero--cards .hero-card .btn { height: 40px; padding: 0 16px; }
  }
  @media (max-width: 560px) {
    .hero--cards .hero-card .btn { gap: 6px; }
    .hero--cards .hero-card .hc-ico { display: block; }
    .hero--cards .hero-card .hc-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  }
  @media (max-width: 600px) {
    .hero--cards .search--light { width: 100%; }
  }
  @media (max-width: 480px) {
    .search--light { height: 52px; }
    .search--light input { height: 50px; }
    .search--light input::placeholder { font-size: 15px; }
  }
  @media (max-width: 380px) {
    .hero--cards .hero-card { gap: 10px; padding: 14px 12px 14px 16px; }
    .hero--cards .hero-card h2 { font-size: 16px; line-height: 20px; }
  }

  /* ---- yellow oval sticker (facts on photos/cards) ---- */
  .sticker { display: inline-grid; place-items: center; text-align: center; background: var(--yellow); color: var(--blue); border: 5px solid #0b0d10; border-radius: 50%; box-shadow: 0 0 0 2px var(--yellow), 0 18px 40px rgba(0, 0, 0, .55); font-family: var(--font-hero); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: 1; }
  .sticker small { font-size: 15px; letter-spacing: .04em; color: #0b0d10; font-weight: 800; }
  .sticker b { font-size: 44px; letter-spacing: -.01em; -webkit-text-stroke: 1.5px #0b0d10; paint-order: stroke fill; }

/* =====================================================================
   JOHNNY'S — reviews band on about.html (operator 2026-10-15: "something EXACTLY like this").
   Full-bleed dark band, shop photo on the right fading into black on the left, stars + rating
   line (only when SITE.rating is set), one big quote at a time, "— NAME", round prev/next
   buttons with dots between them (js: reviewsBand).
   ===================================================================== */
.reviews-band { position: relative; isolation: isolate; overflow: hidden; background: #0b0d10; border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); scroll-margin-top: calc(var(--header-h, 80px) - 1px); }
.reviews-band__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: -1; }
.reviews-band__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 0%; }   /* the technician's head is at the photo's top edge */
.reviews-band__photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #0b0d10 0%, rgba(11, 13, 16, .82) 22%, rgba(11, 13, 16, .58) 55%, rgba(11, 13, 16, .5) 100%); }
/* operator 2026-10-15: "too much shadow here cant see the guy"; 2026-10-21: "make this shadow smoother more gradual". On wide screens
   ("i said more gradual you made this a straight line") the shade is one eased curve from solid at the photo's left edge (flat there, so
   the edge never shows) to nothing 300px past the quote's right edge: alpha = 1 - smoothstep(f^1.5), f = x / (text edge + 300px), 17
   stops. Still ~.7 at the quote's right edge, so the text reads; the technician shows at the photo's own exposure (no filter).
   The quote's right edge in the photo box = content left + the 720px quote column - the photo's left (38%). */
.reviews-band { container-type: inline-size; }
@media (min-width: 861px) {
  @supports (width: 1cqw) {
    .reviews-band__photo::after { --rb-text-end: calc(max(var(--gutter), (100cqw - var(--container)) / 2) + 720px - 38cqw);
      background: linear-gradient(90deg,
        rgba(11, 13, 16, 1) 0%,
        rgba(11, 13, 16, 0.999) calc((var(--rb-text-end) + 300px) * 0.0625),
        rgba(11, 13, 16, 0.994) calc((var(--rb-text-end) + 300px) * 0.125),
        rgba(11, 13, 16, 0.981) calc((var(--rb-text-end) + 300px) * 0.1875),
        rgba(11, 13, 16, 0.957) calc((var(--rb-text-end) + 300px) * 0.25),
        rgba(11, 13, 16, 0.919) calc((var(--rb-text-end) + 300px) * 0.3125),
        rgba(11, 13, 16, 0.866) calc((var(--rb-text-end) + 300px) * 0.375),
        rgba(11, 13, 16, 0.797) calc((var(--rb-text-end) + 300px) * 0.4375),
        rgba(11, 13, 16, 0.713) calc((var(--rb-text-end) + 300px) * 0.5),
        rgba(11, 13, 16, 0.616) calc((var(--rb-text-end) + 300px) * 0.5625),
        rgba(11, 13, 16, 0.509) calc((var(--rb-text-end) + 300px) * 0.625),
        rgba(11, 13, 16, 0.396) calc((var(--rb-text-end) + 300px) * 0.6875),
        rgba(11, 13, 16, 0.282) calc((var(--rb-text-end) + 300px) * 0.75),
        rgba(11, 13, 16, 0.177) calc((var(--rb-text-end) + 300px) * 0.8125),
        rgba(11, 13, 16, 0.087) calc((var(--rb-text-end) + 300px) * 0.875),
        rgba(11, 13, 16, 0.024) calc((var(--rb-text-end) + 300px) * 0.9375),
        rgba(11, 13, 16, 0) calc((var(--rb-text-end) + 300px) * 1)); }
  }
}
.reviews-band__inner { display: flex; flex-direction: column; justify-content: center; min-height: 460px; padding-top: 64px; padding-bottom: 52px; }
.reviews-band__inner > * { max-width: 720px; }
.rb-rating { margin-bottom: 0; }
.rb-stars { position: relative; display: inline-block; line-height: 0; margin-bottom: 14px; }
.rb-stars svg { flex: none; width: 18px; height: 18px; margin-right: 4.5px; fill: currentColor; }   /* flex: none, or the clipped row squeezes its stars */
.rb-stars__base { display: inline-flex; color: rgba(255, 255, 255, .16); }
.rb-stars__fill { position: absolute; inset: 0 auto 0 0; display: inline-flex; width: var(--rb-fill, 100%); overflow: hidden; white-space: nowrap; color: var(--blue); }
.rb-eyebrow { margin: 0; font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--sky); }
.rb-slides { display: grid; margin-top: 30px; }
.rb-slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.rb-slide.is-active { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.rb-slide blockquote { margin: 0; }
.rb-slide blockquote p { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 35px; font-weight: 600; letter-spacing: .004em; color: #f3f4f6; text-wrap: pretty; }
.rb-slide figcaption { margin-top: 22px; font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.rb-nav { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.rb-nav[hidden] { display: none; }
.rb-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .34); background: transparent; color: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.rb-btn svg { width: 18px; height: 18px; }
.rb-btn:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.rb-btn:focus-visible, .rb-dot:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.rb-dots { display: flex; align-items: center; }
.rb-dot { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.rb-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); transition: background .2s, transform .2s; }
.rb-dot:hover::before { background: rgba(255, 255, 255, .6); }
.rb-dot.is-active::before { background: var(--blue); transform: scale(1.3); }
@media (max-width: 860px) {
  /* phones/tablets: the photo sits behind the whole band, darker, so the quote reads on top of it */
  .reviews-band__photo { width: 100%; }
  .reviews-band__photo img { object-position: 68% 0%; }   /* centred on the technician */
  .reviews-band__photo::after { background: linear-gradient(180deg, rgba(11, 13, 16, .78) 0%, rgba(11, 13, 16, .84) 50%, rgba(11, 13, 16, .94) 100%); }
  .reviews-band__inner { min-height: 0; padding-top: 52px; padding-bottom: 44px; }
  .rb-slides { margin-top: 24px; }
  .rb-slide blockquote p { font-size: 21px; line-height: 31px; }
  .rb-nav { margin-top: 26px; }
}
@media (max-width: 480px) {
  .rb-slide blockquote p { font-size: 19px; line-height: 28px; }
  .rb-eyebrow { letter-spacing: .2em; }
  .rb-nav { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-slide, .rb-slide.is-active { transition: none; }
}

/* =====================================================================
   JOHNNY'S — "A few things to know" on services.html as small print
   (operator 2026-10-21: "shouldn't be so big and centered in a container. Make it almost like small print but not too small"):
   no box, 13px in the muted grey, a small info icon by the title; centred on the page (operator 2026-10-21: "center this"). The
   four points stay a left-aligned list, centred as a block, so every line still starts at the same edge.
   ===================================================================== */
.fine-print { max-width: 760px; margin: 32px auto 0; font-size: 13px; line-height: 20px; color: var(--muted); text-align: center; }
.fine-print b { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 2px; font-weight: 600; color: var(--text); }
.fine-print b svg { flex: none; width: 14px; height: 14px; color: var(--muted); }
.fine-print p { margin: 0; }
.fine-print ul { display: grid; gap: 2px; width: fit-content; max-width: 100%; margin: 4px auto 0; padding: 0; list-style: none; text-align: left; }
.fine-print li { display: flex; gap: 8px; }
.fine-print li::before { content: "•"; color: var(--icon-muted); }
@media (max-width: 640px) { .fine-print { margin-top: 24px; } }

/* =====================================================================
   JOHNNY'S — vehicle lanes on services.html (2026-10-13)
   Three photo cards: cars / diesel trucks / motorhomes. Dark surface, red
   rate in the display face, checklist, one button. Replaces the former
   diesel-repair and rv-services pages.
   ===================================================================== */
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lane { display: flex; flex-direction: column; background: var(--bg); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r-lg); overflow: hidden; scroll-margin-top: calc(var(--header-h, 80px) + 20px); }
.lane__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.lane__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); transition: transform .6s ease; }
.lane:hover .lane__media img { transform: scale(1.04); }
.lane__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 13, 16, 0) 55%, rgba(11, 13, 16, .85) 100%); pointer-events: none; }
.lane__tag { position: absolute; left: 16px; bottom: 14px; z-index: 1; background: var(--yellow); color: #0b0d10; font-family: var(--font-hero); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; line-height: 1; padding: 8px 12px 7px; border-radius: 4px; }
.lane__body { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 26px; flex: 1; }
.lane__kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.lane__title { font-family: var(--font-hero); font-style: italic; font-weight: 900; font-size: 28px; line-height: 1.05; letter-spacing: .005em; color: var(--ink); margin: -6px 0 0; }
.lane .checklist { flex: 1; grid-template-columns: 1fr; }
.lane .btn { width: 100%; }
@media (max-width: 1023px) { .lanes { grid-template-columns: 1fr; } .lane { flex-direction: row; } .lane__media { flex: 0 0 38%; aspect-ratio: auto; } }
@media (max-width: 640px) { .lane { flex-direction: column; } .lane__media { flex: none; aspect-ratio: 16 / 10; } .lane__title { font-size: 25px; } }

/* =====================================================================
   JOHNNY'S — vehicle blocks in the hero (operator, 2026-10-13: "block it
   out ... RV, cars, truck ... poly, not super detailed but distinct").
   Three blocks under the copy panel, on the dark page, each a low-poly
   vehicle (inline SVG, written into index.html by research/lowpoly-vehicles-generator.py)
   linking to its lane on services.html. Hover/focus drives it in place (js: driveLanes).
   ===================================================================== */
.hero-lanes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 26px; }
.hero-lane { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 18px 12px 12px; min-height: 96px;
  background: rgba(255, 255, 255, .05); border: 1px solid transparent; border-radius: 18px; color: #fff; text-decoration: none; /* no hairline (operator 2026-10-14: "fix the weird lines"); hover still outlines yellow */
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
  transition: border-color .2s, background .2s, transform .2s; }
.hero-lane:hover, .hero-lane:focus-visible { border-color: var(--yellow); background: rgba(255, 255, 255, .09); transform: translateY(-2px); outline: none; }
.hero-lane .veh { display: block; width: 118px; height: auto; aspect-ratio: 230 / 134; }
.hero-lane__text { display: grid; gap: 4px; min-width: 0; }
.hero-lane__text b { font-family: var(--font-hero); font-style: italic; font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: .005em; text-transform: uppercase; color: var(--yellow); }
.hero-lane__text span { font-size: 13px; line-height: 17px; color: rgba(255, 255, 255, .74); }
/* short laptops (1280x720, 1280x800, 1366x768): slimmer vehicle blocks so they still start above the fold under the 680px stage */
@media (min-width: 861px) and (max-height: 820px) {
  .hero-lanes { padding-bottom: 18px; }
  .hero-lane { min-height: 84px; grid-template-columns: 100px minmax(0, 1fr); }
  .hero-lane .veh { width: 100px; }
}
@media (max-width: 1100px) and (min-width: 861px) {
  .hero-lane { grid-template-columns: 92px minmax(0, 1fr); padding: 10px 14px 10px 10px; }
  .hero-lane .veh { width: 92px; }
  .hero-lane__text b { font-size: 22px; }
  .hero-lane__text span { font-size: 12px; line-height: 16px; }
}
@media (max-width: 860px) {
  .hero-lanes { gap: 10px; padding-top: 18px; padding-bottom: 18px; }
  .hero-lane { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 14px 10px 10px; min-height: 0; border-radius: 14px; box-shadow: none; }
  .hero-lane .veh { width: 96px; }
  .hero-lane__text b { font-size: 22px; }
  .hero-lane__text span { font-size: 12px; line-height: 16px; }
}
@media (max-width: 700px) {
  .hero-lanes { grid-template-columns: 1fr; }
}

/* =====================================================================
   JOHNNY'S — no doubled gap where two sections share a background (operator 2026-10-15: "too much space here").
   The second section drops its top padding, so the seam is one section's padding, not two.
   ===================================================================== */
.statement + .band--gray { padding-top: 0; }                   /* home: "Any make. Any model." -> Browse by */
.section--white + .section--white { padding-top: 0; }          /* about: the stats row -> Warranty, now that "What sets Johnny's apart" is gone */
/* hours: Contact details has three cards since "Request service" came out (operator 2026-10-15); where the grid is two columns,
   an odd last card takes the whole row instead of sitting alone in the left column */
@media (max-width: 1024px) { .method-grid > .method:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* R-134a / R-1234yf never break across lines (render.js keepCodes) */
.nowrap { white-space: nowrap; }


/* =====================================================================
   JOHNNY'S — careers page (operator 2026-10-19: a careers page with an application people fill in online or as a PDF).
   Two "ways to apply" cards, then the online application (one card, a fieldset per section) and the upload form, each
   with its side column. Choices are native radios and checkboxes inside pill labels; :has() marks the picked one.
   ===================================================================== */
.apply-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; }   /* two equal cards: upload (opens the popup below) and the PDF */
.apply-way { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border: 1px solid var(--line); }
.apply-way > p { margin: 0; font-size: 15px; line-height: 22px; }
.apply-way__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); }
.apply-way__title svg { width: 22px; height: 22px; color: var(--blue); flex: none; }
.apply-way > .btn { margin-top: auto; }
.apply-way__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: auto; }
.apply-layout, .apply-layout [data-form-wrap] { scroll-margin-top: calc(var(--header-h, 80px) + 16px); }   /* the wizard scrolls its card to the top on each step */

/* Upload popup: a native <dialog>. The dialog fills the screen and scrolls; the card sits centred in it (flex + margin:auto,
   so a card taller than the screen starts at the top instead of being cut off). careers.js opens and closes it. */
.modal { border: 0; padding: 24px 16px; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: inherit; overflow-y: auto; overscroll-behavior: contain; }
.modal:not([open]) { display: none; }                      /* also hides it in browsers that don't know <dialog> */
.modal[open] { display: flex; animation: lb-in .2s var(--ease); }
.modal::backdrop { background: rgba(5, 6, 8, .8); }
.modal[open]::backdrop { animation: lb-in .25s ease; }
.modal__panel { position: relative; width: 100%; max-width: 760px; margin: auto; }
.modal__panel .apply-way__title { margin: 0 44px 6px 0; }
.modal__panel [tabindex="-1"]:focus { outline: none; }        /* the title takes focus on open so screen readers start there; it is not a control */
.modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; background: transparent; color: var(--muted); display: grid; place-items: center; transition: background-color .15s, color .15s; }
.modal__close:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.modal__close:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.modal__close svg { width: 22px; height: 22px; }
.modal .success .btn { margin-top: 16px; }
.modal-open { overflow: hidden; }
/* If the script never runs, the "Upload your application" link still jumps to #upload-form and the form shows in place
   (:target; careers.js marks the dialog .is-ready, which turns this off). Where showModal() is missing, careers.js opens
   it in place instead (.is-inline). */
.modal:target:not([open]):not(.is-ready), .modal.is-inline { display: block; position: static; width: auto; height: auto; padding: 0; overflow: visible; margin: 0 0 40px; }
.modal:target:not([open]):not(.is-ready) [data-modal-close] { display: none; }
@media (prefers-reduced-motion: reduce) { .modal[open], .modal[open]::backdrop { animation: none; } }
@media (max-width: 640px) { .modal { padding: 12px; } }
#pdf { scroll-margin-top: calc(var(--header-h, 80px) + 16px); }

.req { color: var(--blue); font-weight: 600; }
.app-sec { min-width: 0; margin: 0 0 32px; padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--line); }
.app-sec__title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.app-sec__title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--blue); }
.app-sec__note { margin: -6px 0 16px; font-size: 14px; line-height: 20px; color: var(--muted); }
.app-sec > .form-grid + .form-grid { margin-top: 16px; }
.app-sec .choice + .choice, .app-sec .choice + .form-grid { margin-top: 18px; }
.form-grid--csz { grid-template-columns: 2fr 1fr 1fr; }
.form-grid--ref { grid-template-columns: 1.2fr 1fr 1fr; }
.app-entry + .app-entry { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--line-strong); }
.app-entry__title { margin: 0 0 12px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.app-add { margin-top: 16px; }
.app-form textarea[rows="2"] { height: 76px; }

.choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice > legend { margin-bottom: 8px; padding: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.choice__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.opt { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px 10px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: #0f1113; color: var(--ink); font-size: 14px; line-height: 20px; cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.checks .opt { border-radius: var(--r-sm); }
.opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--blue); color-scheme: dark; cursor: pointer; }   /* dark native controls, red when picked */
.opt:hover { border-color: #5a626d; }
.opt:has(input:checked) { border-color: var(--blue); background: rgba(235, 29, 35, .12); }
.opt:has(input:focus-visible) { outline: 3px solid rgba(235, 29, 35, .45); outline-offset: 2px; }
.opt--block { display: flex; border-radius: var(--r-sm); margin: 0 0 18px; }
.app-cert { margin: 0 0 14px; padding: 16px 18px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; line-height: 22px; color: var(--text); }
.field input[readonly] { color: var(--muted); }

.file-drop { position: relative; }
.file-drop:focus-within { border-color: var(--blue); outline: 3px solid rgba(235, 29, 35, .35); outline-offset: 2px; }
.file-name.is-error { color: #ff8a8e; }

.app-list { display: grid; gap: 8px; margin: 0; padding-left: 18px; list-style: disc; font-size: 14px; line-height: 20px; color: var(--text); }
.app-small { margin: 0; font-size: 14px; line-height: 21px; color: var(--text); }
.app-small b { color: var(--ink); }

@media (max-width: 900px) {                                   /* the two cards stack */
  .apply-ways { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 32px; }
}
@media (max-width: 860px) {                                   /* where .form-grid goes to one column */
  .form-grid--csz { grid-template-columns: 1fr 1fr; }
  .form-grid--csz > :first-child { grid-column: 1 / -1; }
  .form-grid--ref { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .checks { grid-template-columns: minmax(0, 1fr); }
  .choice__opts .opt { flex: 1 1 auto; }
}
/* the wizard (six steps, js/careers.js): the request wizard's numbered dots, a "Step 2 of 6" line, one step at a time */
.wiz-bar--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* 28px under it, like the request form: the "Step 1 of 6" line under the dots is for screen readers only (operator 2026-10-21: "the steps with circles are enough") */
.app-step-count { margin: 0 0 22px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.app-step:focus { outline: none; }
.app-step > .app-sec:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.app-step > .app-sec + .app-sec { margin-top: 0; }
.app-turnstile { margin-top: 20px; }
.app-nav { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.app-nav [data-step-next], .app-nav [type="submit"] { margin-left: auto; }
.app-review { margin: 0 0 32px; padding: 0 0 28px; border-bottom: 1px solid var(--line); }
.app-review__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.app-review__title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--blue); }
.app-review__group { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.app-review__group + .app-review__group { margin-top: 10px; }
.app-review__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.app-review__head .link-plain { padding: 4px 0; border: 0; background: none; font-size: 14px; cursor: pointer; }
.app-review dl { display: grid; gap: 6px; margin: 0; }
.app-review dl > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 20px; }
.app-review dt { color: var(--muted); }
.app-review dd { margin: 0; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.app-review__empty { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
@media (max-width: 560px) {
  .wiz-bar--6 { gap: 4px; }
  .wiz-bar--6 .wiz-dot__label { display: none; }
  .app-review dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .app-nav .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .opt { transition: none; } }
@media (forced-colors: active) { .opt:has(input:checked) { outline: 2px solid Highlight; } }

/* ==========================================================================
   Home statement banner in motion (js/statement.js, js/statement-gl.js; source tools/statement3d)
   Static by default: the plain headline. .is-motion: the 3D turntable behind the headline; .is-still (reduced
   motion): no auto-spin or auto-advance. The headline keeps one typeface throughout (Archivo Expanded Black,
   data-face="heavy") with a short line under it.
   ========================================================================== */
/* One fixed height, reserved from the first paint (html.js is set in <head>): the banner never changes size, whether
   the 3D is loading, cutting between vehicles, unavailable, or the phone's address bar moves. */
.statement--motion { --stage-h: 440px; }
.statement--motion .statement__gl { display: none; }
/* embedded in the page: no card, no edges; the studio's far colour is rendered exactly as the page background */
.js .statement--motion { padding: 0 0 96px; }
.js .statement--motion .statement__pin { position: relative; height: var(--stage-h); overflow: hidden; background: var(--bg); }
.statement--motion:is(.is-motion, .is-still) .statement__gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.statement--motion.is-ready .statement__gl { opacity: 1; }
/* operator 2026-10-21: "no line here at the bottom, just smooth". On a real GPU the lamps' wide bloom lifts the studio around the
   vehicle ~3 levels above the page (measured on his screenshot: 18,19,21 inside vs 15,17,19 below), so the canvas's bottom edge
   showed as a step. The last 32px fade into the page; the turntable stays above that, even at full mouse tilt (lowest drawn row
   measured at 405 of 440 for every vehicle). */
.statement--motion:is(.is-motion, .is-still) .statement__gl { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent); }
.js .statement--motion .statement__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; pointer-events: none; }
.statement--motion h2 { transform-origin: 0 50%; --head-w: clamp(300px, 38vw, 560px); }
.statement--motion h2[data-face] { transition: none; font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.02; position: relative; }
.statement--motion h2[data-face] span { white-space: nowrap; }
/* sized so "Any model." renders exactly --head-w wide (factor measured in Chrome at 100px); statement.js corrects the
   size if a fallback font is on screen. */
.statement--motion h2[data-face="heavy"] { font-family: "Archivo", var(--font-display); font-stretch: 125%; font-weight: 900; letter-spacing: -.02em; line-height: 1.04; font-size: calc(var(--head-w) * 0.14443); }
.statement__sub { margin-top: 20px; font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--text); }
.statement--motion:is(.is-motion, .is-still) .statement__pin { cursor: grab; touch-action: pan-y; outline: none; }
.statement--motion.is-dragging .statement__pin { cursor: grabbing; }
.statement--motion:is(.is-motion, .is-still) .statement__pin:focus-visible { box-shadow: inset 0 0 0 2px var(--sky); }
.statement--motion:is(.is-motion, .is-still) :is(h2, .statement__sub) { pointer-events: none; user-select: none; }
.statement__dots { display: none; }
.statement--motion.is-ready .statement__dots { position: absolute; z-index: 3; left: var(--stage-x, 67%); transform: translateX(-50%); bottom: 18px; display: flex; gap: 2px; }   /* centred under the turntable (--stage-x from js/statement.js) */
.statement__dots button { width: 24px; height: 24px; border: 0; padding: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.statement__dots button::after { content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .32); transition: width .3s var(--ease), background-color .3s; }
.statement__dots button:hover::after { background: rgba(255, 255, 255, .6); }
.statement__dots button[aria-current="true"]::after { width: 18px; background: #fff; }
.statement__dots button:focus-visible { outline: 2px solid var(--sky); outline-offset: 0; border-radius: 6px; }
@media (max-width: 860px) {
  .js .statement--motion { padding: 0 0 64px; }
  .js .statement--motion .statement__inner { justify-content: flex-start; padding-top: 28px; }
  .statement--motion h2 { --head-w: min(86vw, 430px); }
  .statement__sub { margin-top: 12px; font-size: 16px; }
}

/* ---- service and vehicle pages (/brake-repair, /diesel-repair, ...; tools/service-pages.mjs) */
.svc-detail__link, .lane__title a { color: inherit; }
.svc-detail__link:hover, .lane__title a:hover { color: var(--sky); }
.page-hero--svc h1 { text-wrap: balance; }   /* "Diesel truck repair in Kennewick, WA" breaks as two even lines, not with "WA" alone */
/* hero, right column on a service page: the service's icon on a panel the size of the vehicle pages' photo */
.svc-hero__visual { height: 400px; display: grid; place-items: center; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-float);
  background: radial-gradient(circle at 50% 46%, rgba(235, 29, 35, .14) 0, rgba(235, 29, 35, 0) 58%), var(--white); }
.page-hero__media.svc-hero__visual img { width: 240px; height: 240px; object-fit: contain; border-radius: 0; box-shadow: none; }
/* the content column (no box) and the pricing / shop cards beside it */
.svc-page { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px 72px; align-items: start; }
.svc-page__lead { margin-top: 14px; font-size: 17px; line-height: 28px; color: var(--text); max-width: 720px; }
.svc-page__sub { margin: 36px 0 16px; }
.svc-page__main .checklist { gap: 12px 28px; }
.svc-page__main .checklist li { font-size: 15px; line-height: 22px; }
.svc-page__main .checklist svg { margin-top: 2px; }
.checklist--signs svg { color: var(--sky); }
.svc-page__for { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; line-height: 22px; color: var(--text); }
.svc-page__for a { font-weight: 500; }
.svc-page__actions { margin-top: 28px; }
.svc-page__aside { display: grid; gap: 16px; }
.svc-cta { padding-bottom: 0; }   /* the footer's own 80px top margin is the gap under the band (64 + 80 looked like a hole) */
.price-list { margin: 4px 0 0; }
.price-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.price-list > div:first-child { border-top: 0; padding-top: 4px; }
.price-list dt { font-size: 14px; line-height: 20px; color: var(--text); }
.price-list dt small { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
.price-list dd { margin: 0; flex: none; max-width: 55%; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); text-align: right; }
.info-card .price-list__note { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--muted); }
/* vehicle pages: four facts under the hero */
.svc-facts { margin-bottom: 56px; }
@media (max-width: 1024px) {
  .svc-hero__visual { height: 280px; }
  .page-hero__media.svc-hero__visual img { width: 190px; height: 190px; }
  .svc-page { grid-template-columns: 1fr; }
  .svc-page__aside { grid-template-columns: 1fr 1fr; align-items: start; }   /* tablets: the two cards side by side under the content */
}
.page-hero--svc .page-hero__trust { flex-wrap: nowrap; align-items: flex-start; }   /* the shield stays beside its line when the text wraps */
.page-hero--svc .page-hero__trust .trust-ico { flex: none; margin-top: 1px; }
@media (max-width: 700px) {
  .svc-hero__visual { height: 200px; }
  .page-hero__media.svc-hero__visual img { width: 140px; height: 140px; }
  .svc-hero__visual .page-hero__badge { display: none; }   /* on a phone the badge would sit on the icon */
  .svc-page__aside { grid-template-columns: 1fr; }
  .svc-page__lead { font-size: 16px; line-height: 26px; }
  .svc-page__sub { margin: 32px 0 14px; }
  .svc-facts { margin-bottom: 40px; grid-template-columns: 1fr 1fr; gap: 12px; }   /* phones: the four facts as a 2 x 2 block */
  .svc-facts .stat { padding: 16px; }
  .svc-facts .stat__num { font-size: 28px; line-height: 32px; letter-spacing: -.8px; }
  .svc-facts .stat__label { font-size: 13px; line-height: 18px; }
}