/* ============================================================
   WHEELS UPFRONT — design system
   East Texas Performance Editorial
   70% warm black · 20% bone · 10% brand red · blue = technical
   ============================================================ */

/* ---------- fonts (self-hosted, latin subsets) ---------- */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/anton-400.woff2') format('woff2')}
@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/rhd-400.woff2') format('woff2')}
@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/rhd-500.woff2') format('woff2')}
@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/rhd-700.woff2') format('woff2')}
@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/rhd-800.woff2') format('woff2')}
@font-face{font-family:'Red Hat Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/rhm-500.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --ink:#0A0B0D;            /* page base — never pure black */
  --carbon:#111318;         /* raised surface */
  --steel:#1A1E24;          /* higher surface */
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --bone:#F4F2ED;           /* light editorial sections */
  --paper:#FFFFFF;
  --ink-on-bone:#141519;
  --mut-on-bone:#5B5F66;
  --text-hi:#F5F6F7;
  --text-lo:#9BA1A8;
  --red:#D20003;            /* brand action red */
  --red-hot:#F60000;        /* logo red — gradient/hover partner */
  --blue:#0079FE;           /* brand blue — technical accent */
  --blue-soft:rgba(0,121,254,.14);
  --gold:#FDC101;           /* ratings only */

  --font-display:'Anton', 'Arial Narrow', sans-serif;
  --font-body:'Red Hat Display', 'Avenir Next', sans-serif;
  --font-mono:'Red Hat Mono', 'SF Mono', monospace;

  --r-sm:6px; --r-md:10px; --r-lg:14px;   /* machined, not pillowy */
  --wrap:1320px;
  --gutter:clamp(20px, 4vw, 48px);
  --sec-y:clamp(84px, 11vw, 152px);
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-soft:0 24px 48px -24px rgba(0,0,0,.55);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:124px}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--text-hi);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--red);color:#fff}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:.75rem 1.25rem;font-weight:700}
.skip-link:focus{left:0}

/* ---------- type scale ---------- */
.display{
  font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.01em;line-height:1;/* .94 let a trailing comma sit on the line below */
  font-size:clamp(2.9rem, 7.2vw, 6.4rem);
}
.display--sub{font-size:clamp(2.2rem, 4.6vw, 3.9rem)}
.display .accent{color:var(--red-hot)}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.01em}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.32em;color:var(--blue);
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--blue);flex:none}
.light .eyebrow{color:#0063D1}
.light .eyebrow::before{background:#0063D1}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--text-lo);max-width:56ch;font-weight:500}
.light .lede{color:var(--mut-on-bone)}
.mono{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.light{background:var(--bone);color:var(--ink-on-bone)}
.grid{display:grid;gap:clamp(1.25rem,2.5vw,2.5rem)}
@media(min-width:900px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-2-wide{grid-template-columns:1.25fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* tread tick ornament — echoes tire tread */
.ticks{display:flex;gap:6px;height:12px;margin-bottom:1.6rem}
.ticks span{width:3px;background:var(--red);transform:skewX(-18deg)}
.ticks span:nth-child(2n){height:70%;align-self:flex-end;background:var(--line-strong)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.85rem;
  font-weight:700;font-size:.95rem;letter-spacing:.02em;
  padding:1rem 1.5rem;border-radius:var(--r-sm);
  transition:transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
  will-change:transform;
}
.btn:active{transform:scale(.975)}
.btn .tip{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);
  transition:transform .45s var(--ease);
}
.btn .tip svg{width:13px;height:13px}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-hot)}
.btn--ghost{border:1px solid var(--line-strong);color:var(--text-hi)}
.btn--ghost:hover{border-color:var(--text-hi)}
.btn--ghost .tip{background:rgba(255,255,255,.09)}
.light .btn--ghost{border-color:rgba(0,0,0,.25);color:var(--ink-on-bone)}
.light .btn--ghost:hover{border-color:var(--ink-on-bone)}
.light .btn--ghost .tip{background:rgba(0,0,0,.07)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:#1E8AFF}
.btn--lg{padding:1.15rem 1.9rem;font-size:1.02rem}

/* ---------- header ---------- */
.topbar{
  background:var(--carbon);border-bottom:1px solid var(--line);
  font-size:.8rem;color:var(--text-lo);
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:1rem}
.topbar a{color:var(--text-hi);font-weight:700}
.topbar a:hover{color:var(--red-hot)}
.topbar .loc-note{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
@media(max-width:720px){.topbar .loc-note{display:none}}

.header{
  position:sticky;top:0;z-index:110;
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease);
}
.header.scrolled{box-shadow:0 12px 32px -18px rgba(0,0,0,.7)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:76px}
.brand img{width:190px;height:auto}
.nav{display:flex;gap:2rem;align-items:center}
.nav a{
  font-weight:700;font-size:.92rem;letter-spacing:.03em;color:var(--text-lo);
  padding:.35rem 0;position:relative;transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text-hi)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header .btn{padding:.8rem 1.2rem}
@media(max-width:1080px){.nav,.header .btn--red{display:none}}

/* burger */
.burger{display:none;width:44px;height:44px;position:relative;z-index:101}
.burger span{
  position:absolute;left:10px;right:10px;height:2px;background:var(--text-hi);
  transition:transform .5s var(--ease), opacity .3s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1080px){.burger{display:block}}

/* mobile menu */
.mnav{overflow-y:auto;
  position:fixed;inset:0;z-index:100;background:color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease), visibility 0s .5s;
}
.mnav.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.mnav a.mlink{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2rem,9vw,3.2rem);line-height:1.18;color:var(--text-hi);
  transform:translateY(28px);opacity:0;
  transition:transform .7s var(--ease-out), opacity .7s var(--ease-out), color .3s;
}
.mnav a.mlink:hover{color:var(--red-hot)}
.mnav.open a.mlink{transform:translateY(0);opacity:1}
.mnav .mnav-foot{margin-top:2.5rem;display:flex;flex-direction:column;gap:.7rem;color:var(--text-lo);font-size:.95rem}
.mnav .mnav-foot a{color:var(--text-hi);font-weight:700}

/* ---------- hero (headline section + shared kicker/cta/specline) ---------- */
.hero-kicker{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--text-hi);display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem;
  text-shadow:0 1px 14px rgba(10,11,13,.9);
}
.hero-kicker em{text-shadow:0 1px 10px rgba(10,11,13,1), 0 0 22px rgba(10,11,13,.9)}
@media(max-width:899px){.hero-kicker{font-size:.64rem;letter-spacing:.2em;white-space:nowrap}}
.hero-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--red-hot);box-shadow:0 0 12px rgba(246,0,0,.8);flex:none}
.hero-kicker em{font-style:normal;color:var(--blue)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem}
.hero-specline{
  margin-top:3.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;gap:.6rem 2.6rem;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;color:#B9BEC4;text-transform:uppercase;
}
.hero-specline b{color:#fff;font-weight:500}

h1.hero-title--cine{font-size:clamp(3rem, 7.8vw, 7.2rem);line-height:.96;max-width:none}
.hero-follow{background:var(--ink);padding-block:clamp(64px,9vh,104px) clamp(64px,9vh,104px)}
.hero-follow .hero-kicker{margin-bottom:1.1rem}
.hero-follow .hero-ctas{margin-top:1.4rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero-follow .hero-specline--cine{margin-top:1.4rem;opacity:.86}
.hero-specline--cine{margin-top:1.3rem;opacity:.86}

/* ---------- scroll film (pinned frame-scrub section) ---------- */
/* default = static fallback (no-JS, mobile, reduced-motion): captions stacked over poster */
.scrolly{position:relative;background:var(--ink)}
.scrolly-pin{position:relative;overflow:clip;padding-block:clamp(72px,10vh,120px)}
.scrolly-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.scrolly-canvas{display:none}
.scrolly-mvid{display:none}
.scrolly-cue{
  position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;pointer-events:none;
  font-family:var(--font-mono);font-size:.62rem;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--text-lo);
  opacity:1;transition:opacity .5s var(--ease);
}
.scrolly-cue svg{width:15px;height:15px;animation:cue-bob 1.8s var(--ease) infinite}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.scrolly.cue-off .scrolly-cue{opacity:0}
@media(prefers-reduced-motion:reduce){.scrolly-cue svg{animation:none}}
.scrolly-cap{position:relative;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);padding-block:2rem}
.scrolly-sub{color:var(--text-lo);max-width:44ch;margin-top:1rem;font-size:1.05rem;font-weight:500}
.scrolly-progress{display:none}
@media(max-width:899px){
  /* phones: the film plays once as an inline video band + flowing captions */
  .scrolly .scrolly-pin{padding-block:0 2.2rem}
  .scrolly .scrolly-fallback{display:none}
  .scrolly .scrolly-mvid{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ink)}
  .scrolly .scrolly-cap{padding-block:1.5rem 0}
  .scrolly [data-cap="0"] .scrolly-sub{display:none}
  .scrolly-cue{top:calc(100vw * 9 / 16 - 3.2rem);bottom:auto}
}

/* activated by JS on desktop: 320vh runway, sticky stage, canvas scrub */
.scrolly--active{height:320vh}
.scrolly--active .scrolly-pin{
  position:sticky;top:0;height:100dvh;padding:0;
  display:block;
}
.scrolly--active .scrolly-fallback{opacity:1;transition:opacity .5s var(--ease)}
.scrolly--active.frames-ready .scrolly-fallback{opacity:0}
.scrolly--active .scrolly-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.scrolly--active .scrolly-cap{
  position:absolute;left:0;right:0;bottom:clamp(64px,12vh,140px);
  margin:0;max-width:none;padding-inline:max(var(--gutter), calc((100% - var(--wrap)) / 2));
  opacity:0;transform:translateY(30px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  pointer-events:none;
}
.scrolly--active .scrolly-cap .scrolly-sub{margin-top:1rem;text-shadow:0 1px 12px rgba(10,11,13,.9)}
.scrolly--active .scrolly-cap.is-on{opacity:1;transform:none;pointer-events:auto}
.scrolly--active .scrolly-cap .display{text-shadow:0 2px 24px rgba(10,11,13,.65)}
.scrolly--active .scrolly-progress{
  display:block;position:absolute;right:calc(var(--gutter) * .55);top:50%;
  width:2px;height:120px;transform:translateY(-50%);
  background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden;
}
.scrolly--active .scrolly-progress span{
  display:block;width:100%;height:100%;background:var(--red-hot);
  transform-origin:top;transform:scaleY(0);
}

/* ---------- trust strip ---------- */
.trust{background:var(--carbon);border-block:1px solid var(--line)}
.trust .wrap{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0;
}
@media(min-width:900px){.trust .wrap{grid-template-columns:repeat(4,1fr)}}
.trust-item{
  padding:1.7rem 1.4rem;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:.25rem;
}
.trust-item:last-child{border-right:0}
@media(max-width:899px){.trust-item:nth-child(2n){border-right:0}.trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.trust-item .big{font-family:var(--font-display);font-size:1.9rem;letter-spacing:.02em;line-height:1}
.trust-item .big .u{color:var(--red-hot)}
.trust-item small{color:var(--text-lo);font-size:.82rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.star{color:var(--gold)}

/* ---------- cards / panels ---------- */
.panel{
  background:var(--carbon);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem;position:relative;overflow:clip;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .55s var(--ease), border-color .55s var(--ease);
}
.panel--flush{padding:0}
.light .panel{background:var(--paper);border-color:rgba(0,0,0,.09);box-shadow:0 20px 44px -28px rgba(20,21,25,.25)}

/* goal cards */
.goal{
  display:flex;flex-direction:column;gap:.8rem;min-height:230px;justify-content:flex-start;
  padding-top:3.9rem;
  text-decoration:none;
}
.goal .num{
  font-family:var(--font-mono);font-size:.72rem;color:var(--blue);letter-spacing:.2em;
  position:absolute;top:1.6rem;left:2rem;
}
.goal h3{font-size:1.35rem;letter-spacing:-.01em}
.goal p{color:var(--text-lo);font-size:.95rem;line-height:1.55}
.light .goal p{color:var(--mut-on-bone)}
.goal .go{
  position:absolute;top:1.35rem;right:1.6rem;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;
  transition:background .45s var(--ease), transform .45s var(--ease), border-color .45s;
}
.light .goal .go{border-color:rgba(0,0,0,.18)}
.goal .go svg{width:15px;height:15px;stroke:currentColor}

/* service rows (editorial list, not card grid) */
.svc-list{border-top:1px solid var(--line)}
.light .svc-list{border-color:rgba(0,0,0,.14)}
.svc-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;
  padding:1.5rem .5rem;border-bottom:1px solid var(--line);
  text-decoration:none;position:relative;transition:padding .45s var(--ease), background .45s var(--ease);
}
.light .svc-row{border-color:rgba(0,0,0,.14)}
.svc-row .idx{font-family:var(--font-mono);font-size:.74rem;color:var(--blue);width:2.4rem}
.svc-row h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:.02em}
.svc-row p{grid-column:2;color:var(--text-lo);font-size:.92rem;max-width:52ch}
.light .svc-row p{color:var(--mut-on-bone)}
.svc-row .go{color:var(--text-lo);transition:transform .45s var(--ease), color .3s}

/* ---------- wheel spin split ---------- */
.spin-stage{position:relative;display:flex;align-items:center;justify-content:center;padding-bottom:3.4rem}
.spin-stage .halo{
  position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(0,121,254,.16), transparent 62%);
}
.spin-wheel{width:min(76%,460px);will-change:transform;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))}
.spin-caption{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-lo);
  white-space:nowrap;
}

/* ---------- brand rail ---------- */
.rail{overflow:clip;border-block:1px solid var(--line);background:var(--carbon);padding-block:1.5rem}
.rail-track{display:flex;gap:4.5rem;width:max-content;animation:rail 46s linear infinite}
.rail-track span{
  font-family:var(--font-display);text-transform:uppercase;font-size:1.7rem;letter-spacing:.05em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34);white-space:nowrap;
  transition:color .4s;
}
@keyframes rail{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rail-track{animation:none;flex-wrap:wrap;width:auto}}

/* ---------- financing ---------- */
.fin-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:clip}
@media(min-width:720px){.fin-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.fin-grid{grid-template-columns:repeat(3,1fr)}}
/* 4-partner strip (index): 4 across desktop, 2x2 tablet, stack mobile. Compound selector leaves the 6-item specials and 3-item wheels grids on the base rule. */
@media(min-width:720px){.fin-grid.fin-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.fin-grid.fin-grid--4{grid-template-columns:repeat(4,1fr)}}
.fin-cell{background:var(--carbon);padding:1.9rem;display:flex;flex-direction:column;gap:.65rem;transition:background .45s var(--ease)}
.fin-cell[hidden]{display:none}
.fin-cell h3{font-size:1.12rem}
.fin-cell .fit{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.fin-cell p{color:var(--text-lo);font-size:.9rem;line-height:1.55;flex:1}
.fin-cell a{font-weight:700;font-size:.9rem;color:var(--text-hi);display:inline-flex;gap:.5rem;align-items:center}
.fin-cell a:hover{color:var(--red-hot)}
.fin-cell a svg{width:13px;height:13px}

/* ---------- value stack ---------- */
.stack-row{
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;
  padding:1.7rem .25rem;border-bottom:1px solid rgba(0,0,0,.14);
}
.stack-row .val{
  font-family:var(--font-display);font-size:clamp(1.9rem,4vw,3rem);color:var(--ink-on-bone);
  min-width:4.2ch;
}
.stack-row .val em{font-style:normal;color:var(--red)}
.stack-row h3{font-size:1.15rem;margin-bottom:.25rem}
.stack-row p{color:var(--mut-on-bone);font-size:.95rem;max-width:60ch}

/* ---------- reviews ---------- */
.review-band{position:relative}
.review-band blockquote{
  font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:500;line-height:1.45;letter-spacing:-.01em;
  max-width:26ch;
}
.review-band blockquote::before{content:"“";color:var(--red-hot);font-family:var(--font-display);font-size:1.4em;line-height:0;vertical-align:-.12em;margin-right:.1em}
.review-meta{margin-top:1.4rem;color:var(--text-lo);font-size:.9rem;display:flex;align-items:center;gap:1rem}
.gbadge{
  display:inline-flex;align-items:center;gap:.9rem;margin-top:2.4rem;
  border:1px solid var(--line-strong);border-radius:var(--r-md);padding:1rem 1.4rem;
  transition:border-color .4s;
}
.gbadge:hover{border-color:var(--text-hi)}
.gbadge .g{font-family:var(--font-display);font-size:2rem;line-height:1}
.gbadge small{color:var(--text-lo);font-size:.8rem;letter-spacing:.04em}

/* ---------- locations ---------- */
.loc-card{display:flex;flex-direction:column;gap:1.1rem}
.loc-card .city{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:.02em}
.loc-card .city em{font-style:normal;color:var(--red-hot)}
.light .loc-card .city em{color:var(--red)}
.loc-card address{font-style:normal;color:var(--text-lo);line-height:1.6}
.light .loc-card address{color:var(--mut-on-bone)}
.loc-card .tel{font-family:var(--font-mono);font-size:1.25rem;font-weight:500;color:inherit}
.loc-card .tel:hover{color:var(--red-hot)}
.hours{width:100%;border-collapse:collapse;font-size:.9rem}
.hours td{padding:.42rem 0;border-bottom:1px solid var(--line)}
.light .hours td{border-color:rgba(0,0,0,.12)}
.hours td:last-child{text-align:right;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em}
.hours .today td{color:var(--blue);font-weight:700}
.light .hours .today td{color:#0063D1}
.loc-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.4rem}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.35rem}
.field label{font-weight:700;font-size:.9rem;letter-spacing:.02em}
.field .hint{font-size:.8rem;color:var(--text-lo)}
.light .field .hint{color:var(--mut-on-bone)}
.field input,.field select,.field textarea{
  font:inherit;color:inherit;background-color:var(--steel);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:.9rem 1rem;transition:border-color .3s, background .3s;
  width:100%;
}
.light .field input,.light .field select,.light .field textarea{background-color:#fff;border-color:rgba(0,0,0,.22);color:var(--ink-on-bone)}
.field input:not([type="radio"]):focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.radio-row input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.field select{appearance:none;padding-right:2.6rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239BA1A8' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.form-grid{display:grid;gap:0 1.25rem}
@media(min-width:720px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}}
.radio-row{display:flex;gap:1.4rem;flex-wrap:wrap}
.radio-row label{display:flex;align-items:center;gap:.5rem;font-weight:500;cursor:pointer;white-space:nowrap;min-height:40px}
fieldset.field{border:0;padding:0;margin:0 0 1.35rem}
fieldset.field legend{font-weight:700;font-size:.9rem;letter-spacing:.02em;margin-bottom:.5rem;padding:0}
.field .radio-row input[type="radio"]{width:1.1rem;height:1.1rem;min-height:0;flex:none;padding:0;border:0;border-radius:50%;background:none;accent-color:var(--red);appearance:auto;-webkit-appearance:radio}
.form-note{font-size:.82rem;color:var(--text-lo);max-width:60ch}
.light .form-note{color:var(--mut-on-bone)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:clip;background:var(--red);color:#fff;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(102deg, transparent 42%, rgba(0,0,0,.22) 42.2%, rgba(0,0,0,.22) 58%, transparent 58.2%);
}
.cta-band .wrap{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:2rem;justify-content:space-between;padding-block:clamp(56px,8vw,96px)}
.cta-band .display{font-size:clamp(2.2rem,5vw,4rem)}
.cta-band .btn--ghost{border-color:rgba(255,255,255,.6);color:#fff}
.cta-band .btn--ghost:hover{border-color:#fff}
.cta-band .btn--dark{background:var(--ink);color:#fff}
.cta-band .btn--dark:hover{background:#000}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line)}
.light .faq details{border-color:rgba(0,0,0,.14)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.45rem .25rem;font-weight:700;font-size:1.06rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{
  width:30px;height:30px;flex:none;border:1px solid var(--line-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;position:relative;transition:transform .45s var(--ease), background .3s, border-color .3s;
}
.light .faq summary .pm{border-color:rgba(0,0,0,.2)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:currentColor;width:11px;height:1.5px}
.faq summary .pm::after{transform:rotate(90deg);transition:transform .45s var(--ease)}
.faq details[open] summary .pm{background:var(--red);border-color:var(--red);color:#fff}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq .faq-a{padding:0 .25rem 1.6rem;color:var(--text-lo);max-width:68ch}
.light .faq .faq-a{color:var(--mut-on-bone)}

/* ---------- footer ---------- */
.footer{background:var(--carbon);border-top:1px solid var(--line);padding-block:clamp(56px,7vw,88px) 2rem}
.footer-grid{display:grid;gap:2.6rem}
@media(min-width:900px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr .9fr .9fr}}
.footer h2{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-lo);margin-bottom:1.1rem}
.footer ul{display:flex;flex-direction:column;gap:.6rem}
.footer a{color:var(--text-lo);font-size:.93rem;transition:color .3s}
.footer a:hover{color:var(--text-hi)}
.footer .brand-blurb{color:var(--text-lo);font-size:.92rem;max-width:34ch;margin-top:1.2rem}
.footer-base{
  margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.78rem;color:var(--text-lo);
}
.footer-base a:hover{color:var(--text-hi)}
.socials{display:flex;gap:.8rem;margin-top:1.4rem}
.socials a{
  width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:border-color .3s, background .3s;
}
.socials svg{width:16px;height:16px;fill:var(--text-hi)}

/* ---------- sticky mobile bar ---------- */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb, var(--carbon) 92%, transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-strong);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobar a{
  display:flex;flex-direction:column;align-items:center;gap:.28rem;
  padding:.65rem 0 .55rem;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-lo);
}
.mobar a svg{width:19px;height:19px;stroke:var(--text-hi)}
.mobar a.hot{color:#fff;background:var(--red)}
.mobar a.hot svg{stroke:#fff}
@media(max-width:899px){.mobar{display:grid}body:has(.mobar){padding-bottom:calc(64px + env(safe-area-inset-bottom))}}
@media(max-width:899px){body.has-mobar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}
@media (scripting: none){.rv{opacity:1;transform:none}}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
}

/* ---------- page hero (interior pages) ---------- */
.page-hero{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(120px,17vh,190px) clamp(56px,8vh,88px)}
.page-hero .media{position:absolute;inset:0;z-index:-2}
.page-hero .media img{width:100%;height:100%;object-fit:cover;opacity:.5}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(78deg, rgba(10,11,13,.94) 8%, rgba(10,11,13,.55) 60%, rgba(10,11,13,.3)),linear-gradient(to top, var(--ink) 2%, transparent 40%)}
.crumbs{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-lo);margin-bottom:1.6rem;display:flex;gap:.8rem;align-items:center}
.crumbs a:hover{color:var(--text-hi)}
.crumbs .sep{color:var(--red-hot)}


/* ---------- wheel visualizer embed ---------- */

/* misc */
.split-media{border-radius:var(--r-lg);overflow:clip;position:relative;box-shadow:var(--shadow-soft)}
.split-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);border-radius:inherit;pointer-events:none}
.split-media img{width:100%;height:100%;object-fit:cover}
.tag-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.tag{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:999px;padding:.42rem .95rem;color:var(--text-lo);
}
.light .tag{border-color:rgba(0,0,0,.2);color:var(--mut-on-bone)}
.num-stat{display:flex;flex-direction:column;gap:.55rem}
.num-stat .n{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);line-height:1}
.num-stat .n em{font-style:normal;color:var(--red-hot);margin-left:.13em}
.light .num-stat .n em{color:var(--red)}
.num-stat small{color:var(--text-lo);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-family:var(--font-mono)}
.light .num-stat small{color:var(--mut-on-bone)}

/* ============================================================
   GOOGLE REVIEWS (.gr-) :: appended block, 2026-08-20
   Scoped: every selector below is prefixed .gr- so concurrent
   edits elsewhere in this file cannot collide with it.
   Used on index.html + about.html review sections.
   ============================================================ */
.gr-section{background:var(--carbon);border-block:1px solid var(--line)}

/* header: copy left, per-location scoreboard right */
.gr-head{display:grid;gap:2.5rem;align-items:end;margin-bottom:clamp(2.4rem,4vw,3.4rem)}
@media(min-width:900px){.gr-head{grid-template-columns:1.25fr 1fr}}
.gr-scores{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:clip;
}
@media(max-width:479px){.gr-scores{grid-template-columns:1fr}}
.gr-score{background:var(--ink);padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.4rem}
.gr-score-city{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}
.gr-score-num{font-family:var(--font-mono);font-weight:500;font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;color:var(--text-hi)}
.gr-score-count{font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-lo);margin-top:.25rem}

/* gold star rows :: gold is reserved for ratings site-wide */
.gr-stars{color:var(--gold);font-size:1.02rem;letter-spacing:.14em;line-height:1;white-space:nowrap}
.gr-stars--49{
  /* 4.9 of 5 = 98% gold fill; never displayed as a full five */
  background:linear-gradient(90deg,var(--gold) 0 98%,rgba(255,255,255,.28) 98% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* review cards */
.gr-grid{
  display:grid;gap:1.25rem;grid-template-columns:1fr;
  list-style:none;margin:0;padding:0;
}
@media(min-width:700px){.gr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.gr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gr-card{
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.7rem;display:flex;flex-direction:column;gap:1.1rem;min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .55s var(--ease), border-color .55s var(--ease);
}
.gr-card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
/* simple styled G letterform marks the source; no logo art */
.gr-g{
  width:30px;height:30px;flex:none;border:1px solid var(--line-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:800;font-size:.92rem;line-height:1;color:var(--text-hi);
}
.gr-quote{margin:0;flex:1}
.gr-quote p{font-size:.95rem;line-height:1.62;color:var(--text-lo);overflow-wrap:anywhere;max-width:60ch}
.gr-quote p::before{
  content:"\201C";color:var(--red-hot);font-family:var(--font-display);
  font-size:1.35em;line-height:0;vertical-align:-.12em;margin-right:.12em;
}
.gr-meta{display:flex;flex-direction:column;gap:.25rem;border-top:1px solid var(--line);padding-top:1rem}
.gr-name{font-weight:700;font-size:.95rem;color:var(--text-hi)}
.gr-src{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-lo)}

/* outbound links + fine print */
.gr-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem}
.gr-note{margin-top:1.2rem}

/* light-section safety: keep cards legible if ever placed on bone */
.light .gr-section{background:var(--bone);border-block-color:rgba(0,0,0,.12)}
.light .gr-card,.light .gr-score{background:var(--paper);border-color:rgba(0,0,0,.09)}
.light .gr-name,.light .gr-score-num{color:var(--ink-on-bone)}
.light .gr-quote p,.light .gr-src,.light .gr-score-count{color:var(--mut-on-bone)}
.light .gr-g{color:var(--ink-on-bone);border-color:rgba(0,0,0,.2)}

@media(max-width:899px){.topbar a{display:inline-flex;align-items:center;min-height:40px}}
@media(max-width:899px){.mnav .mnav-foot a{display:inline-flex;align-items:center;min-height:44px}}

/* in-page anchor jumps clear the sticky topbar + header (~114px) */
.section[id]{scroll-margin-top:124px}

/* hover-only enhancements: skip on touch so tapped elements don't latch-stuck */
@media (hover:hover) and (pointer:fine){
  .panel:hover{transform:translateY(-4px);border-color:var(--line-strong)}
  .goal:hover .go{background:var(--red);border-color:var(--red);transform:translate(2px,-2px)}
  .goal:hover .go svg{stroke:#fff}
  .svc-row:hover{padding-left:1.2rem;background:rgba(255,255,255,.03)}
  .light .svc-row:hover{background:rgba(0,0,0,.03)}
  .svc-row:hover .go{transform:translateX(6px);color:var(--red-hot)}
  .rail:hover .rail-track{animation-play-state:paused}
  .fin-cell:hover{background:var(--steel)}
  .gr-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
  .socials a:hover{border-color:var(--red);background:var(--red)}
  .btn:hover .tip{transform:translate(3px,-1px)}
  .rail-track span:hover{color:var(--text-hi);-webkit-text-stroke-color:transparent}
}

/* ============================================================
   GHL CHAT WIDGET (.lc-) :: appended block, 2026-08-24
   The Conversation AI bubble is fixed bottom-right. On phones the
   sticky .mobar occupies the bottom 64px + safe-area, so the bubble
   must be lifted clear of it or it sits on top of the Call buttons.
   Selectors are defensive: LeadConnector has shipped several
   container ids/classes. Verified against the live preview.
   ============================================================ */
@media (max-width: 899px) {
  chat-widget,
  #chat-widget-container,
  .lc_text-widget--wrapper,
  .lc_text-widget--bubble,
  .lc_text-widget {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
}

/* ---------- Shop chooser (financing apply links) ----------
   Tyler and Longview hold separate finance-partner accounts, so apply links
   must resolve per store. Apply links stay inert until a shop is chosen. */
.shop-choice{
  margin:3rem 0 0;padding:clamp(1.8rem,4vw,2.8rem);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--carbon);
}
.light .shop-choice{border-color:rgba(0,0,0,.14);background:var(--paper)}
.shop-choice__q{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.02;margin:0 0 .55rem;color:var(--text-hi);
}
.light .shop-choice__q{color:var(--ink-on-bone)}
.shop-choice__why{color:var(--text-lo);max-width:60ch;margin:0 0 1.6rem}
.light .shop-choice__why{color:var(--mut-on-bone)}
.shop-choice__grid{display:grid;gap:1rem}
@media(min-width:600px){.shop-choice__grid{grid-template-columns:1fr 1fr}}

.shop-tile{
  display:flex;flex-direction:column;gap:.2rem;text-align:left;
  padding:1.35rem 1.4rem;border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--ink);color:var(--text-hi);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.light .shop-tile{background:var(--bone);border-color:rgba(0,0,0,.16);color:var(--ink-on-bone)}
.shop-tile__name{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.5rem,3.2vw,2rem);line-height:1;
}
.shop-tile__addr{font-size:.92rem;color:var(--text-lo);margin-top:.35rem}
.light .shop-tile__addr{color:var(--mut-on-bone)}
.shop-tile__tel{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em;color:var(--text-lo)}
.light .shop-tile__tel{color:var(--mut-on-bone)}
.shop-tile__pick{
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;color:var(--blue);margin-top:.85rem;
}
.shop-tile.shop-btn--on{
  border-color:var(--red);
  background:color-mix(in srgb, var(--red) 9%, var(--ink));
  box-shadow:inset 0 0 0 1px var(--red);
}
.light .shop-tile.shop-btn--on{background:color-mix(in srgb, var(--red) 8%, var(--paper))}
.shop-tile.shop-btn--on .shop-tile__pick{color:var(--red);font-weight:700}
.shop-tile.shop-btn--on .shop-tile__pick::before{content:"\2713  "}

.shop-choice__note{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;
  color:var(--text-lo);margin:1.4rem 0 0;
}
.light .shop-choice__note{color:var(--mut-on-bone)}
/* Before a shop is picked the apply buttons read "Select a location" (set in
   shop-choice.js) and take the visitor to the chooser instead of a store's form. */
.apply-link--waiting{background:transparent;border:1px solid var(--line-strong)}
.apply-link--waiting .tip{background:rgba(255,255,255,.1)}
@media (hover:hover) and (pointer:fine){
  .shop-tile:hover{border-color:var(--text-hi);transform:translateY(-2px)}
  .shop-tile.shop-btn--on:hover{border-color:var(--red)}
  .apply-link--waiting:hover{background:transparent;border-color:var(--text-hi)}
}


/* ============================================================
   MOBILE PASS (2026-09-07) :: appended block
   Root causes from the 390px audit: desktop padding floors, wrapped
   button rows, numeral-left rows, orphaned split images, forced card
   heights, single-column footer, and on index the caption stack ahead
   of the H1. Every rule below is scoped to a max-width query; desktop is
   untouched. Inline min-heights in the HTML are desktop values and are
   overridden here with !important rather than edited page by page.
   ============================================================ */
.cta-actions{display:flex;gap:1rem;flex-wrap:wrap}
.nb{white-space:nowrap}
.trust-item .big .u{margin-left:.06em}
.light .svc-row .idx{color:#0063D1}
.split-media{display:grid}
.hours-wrap summary{display:none;list-style:none;cursor:pointer;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;padding:.55rem 0;color:var(--text-hi)}
.light .hours-wrap summary{color:var(--ink-on-bone)}
.hours-wrap summary::-webkit-details-marker{display:none}
details.fine summary{display:none}
.hours-wrap summary::after{content:" \25BE";color:var(--text-lo)}
.hours-wrap[open] summary::after{content:" \25B4"}

@media(max-width:1080px){
  html{scroll-padding-top:88px}
  .section[id],.fin-cell[id]{scroll-margin-top:88px!important}
}

@media(max-width:899px){
  :root{--sec-y:clamp(52px,9vw,64px)}
  .section--tight{padding-block:44px}
  .page-hero{padding-block:clamp(84px,12vh,112px) clamp(40px,6vh,56px)}
  .hero-follow{padding-block:clamp(32px,6vh,52px)}
  .header .wrap{min-height:62px}
  .brand img{width:164px}
  .scrolly .scrolly-cap,.scrolly-cue{display:none}
  .scrolly .scrolly-pin{padding-bottom:0}
  h1.hero-title--cine{font-size:clamp(2.4rem,11.4vw,4.4rem)}
  .ticks{display:none}
  .rail-track span{color:var(--text-lo);-webkit-text-stroke:0;font-size:1.3rem;letter-spacing:.08em}
  .rail{padding-block:1rem}
  .rail-track{gap:2.6rem}
  .panel.goal{min-height:0;padding:1.3rem 3.9rem 1.3rem 1.35rem!important;gap:.35rem}
  .goal .num{position:static;margin-bottom:.1rem}
  .goal .go{top:50%;transform:translateY(-50%);right:1.1rem;width:36px;height:36px}
  .goal h3{font-size:1.2rem}
  @media (hover:hover) and (pointer:fine){.goal:hover .go{transform:translate(2px,calc(-50% - 2px))}}
  .grid-4,.grid-3{gap:.75rem}
  .split-media{order:-1;min-height:0!important;aspect-ratio:16/10;max-height:240px;margin-bottom:.5rem}
  /* the img must fill the band box, otherwise it renders at its intrinsic height and the
     band merely clips its top; only then do object-fit/position choose the crop */
  .split-media img{position:absolute;inset:0;width:100%;height:100%;object-position:50% 45%}
  .spin-stage{min-height:0!important;padding-bottom:2.4rem}
  .spin-wheel{width:min(64%,300px)}
  .spin-caption{white-space:normal;text-align:center;width:100%;left:0;transform:none;letter-spacing:.16em;font-size:.62rem;padding-inline:1rem}
  .footer{padding-block:44px 1.5rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem 1.25rem}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-base{margin-top:2rem}
  .footer ul{gap:0}
  .footer ul a,.footer-base a{display:inline-flex;align-items:center;min-height:44px}
  .socials a{width:44px;height:44px}
  .fin-cell a{min-height:44px;align-items:center}
  .loc-card .tel{display:inline-flex;align-items:center;min-height:44px}
  nav.tag-row .tag{min-height:44px;display:inline-flex;align-items:center;color:var(--text-hi)}
  .mobar a{font-size:.7rem;letter-spacing:.06em}
  .hours-wrap summary{display:block}
  .loc-card{gap:.85rem}
  .panel.loc-card{padding:1.5rem}
}

@media(max-width:719px){
  #partners .fin-grid{gap:1rem;background:transparent;border:0;border-radius:0;overflow:visible}
  #partners .fin-cell{border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:1.5rem 1.25rem!important}
  #partners .fin-cell .grid>div{display:flex;flex-direction:column;gap:.65rem}
  #partners .fin-cell h3.display{margin-top:.15rem!important;margin-bottom:.1rem}
}

@media(max-width:699px){
  .gr-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.85rem;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter) .5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gr-grid::-webkit-scrollbar{display:none}
  .gr-card{flex:0 0 84%;scroll-snap-align:start}
  .gr-quote p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
}

@media(max-width:599px){
  .lede{font-size:1rem;line-height:1.55}
  .eyebrow{letter-spacing:.22em;gap:.7rem}
  .eyebrow::before{width:22px}
  .hero-ctas,.hero-follow .hero-ctas,.cta-actions,.gr-actions,.loc-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.7rem;width:100%;margin-top:1.6rem}
  .hero-ctas .btn,.cta-actions .btn,.gr-actions .btn,.loc-actions .btn{justify-content:center;padding-inline:1rem;min-height:52px}
  .hero-ctas .btn--red,.hero-ctas .btn--blue,.cta-actions .btn--red,.cta-actions .btn--dark,.cta-actions .btn--blue,.gr-actions .btn,.hero-ctas .btn:only-child,.cta-actions .btn:only-child{grid-column:1/-1}
  /* phones: label centred in the button, arrow pinned to the right edge */
  .hero-ctas .btn:has(.tip),.cta-actions .btn:has(.tip){justify-content:center;position:relative;padding-inline:3.4rem}
  .hero-ctas .btn:has(.tip) .tip,.cta-actions .btn:has(.tip) .tip{position:absolute;right:1rem;top:50%;transform:translateY(-50%)}
  @media (hover:hover) and (pointer:fine){.hero-ctas .btn:has(.tip):hover .tip,.cta-actions .btn:has(.tip):hover .tip{transform:translate(3px,calc(-50% - 1px))}}
  /* a primary + one ghost: both full width, never a half-width orphan */
  .hero-ctas .btn:nth-child(2):last-child,.cta-actions .btn:nth-child(2):last-child{grid-column:1/-1}
  /* a button carrying a phone number cannot share a row: the number must not wrap */
  /* two rules on purpose: an unsupported :has() would invalidate a shared selector list */
  .hero-ctas .btn--tel,.cta-actions .btn--tel,.loc-actions .btn--tel{grid-column:1/-1}
  .hero-ctas .btn:has(.nb),.cta-actions .btn:has(.nb){grid-column:1/-1}
  .hero-ctas .btn,.cta-actions .btn,.gr-actions .btn,.loc-actions .btn{min-width:0}
  .cta-band .wrap{display:block}
  .cta-band .display{margin-bottom:1.3rem}
  .hero-specline{display:grid;grid-template-columns:1fr 1fr;gap:.45rem .9rem;font-size:.66rem;letter-spacing:.1em;margin-top:2rem}
  .tag-row{gap:.45rem;margin-top:1.1rem}
  .tag{font-size:.64rem;letter-spacing:.1em;padding:.36rem .7rem}
  .stack-row{grid-template-columns:1fr;gap:.35rem;align-items:start;padding:1.35rem 0}
  .stack-row .val{font-size:1.5rem;min-width:0;line-height:1}
  .stack-row p{max-width:none}
  .svc-row{grid-template-columns:1fr auto;gap:.25rem 1rem;padding:1.1rem 0;align-items:start}
  .svc-row .idx{grid-column:1;grid-row:1;width:auto;font-size:.66rem;letter-spacing:.2em}
  .svc-row h3{grid-column:1;grid-row:2;font-size:1.3rem;line-height:1.02}
  .svc-row p{grid-column:1/-1;grid-row:3;max-width:none;font-size:.92rem}
  .svc-row .mono{grid-column:2;grid-row:1;align-self:start}
  .svc-row .go{grid-column:2;grid-row:2;align-self:center}
  .fin-cell .fit{display:block;line-height:1.5;letter-spacing:.12em;margin-bottom:.15rem}
  .shop-choice{padding:1.4rem 1.2rem}
  .shop-choice__why{font-size:.95rem;margin-bottom:1rem}
  .shop-tile{padding:1rem 1.1rem;gap:.1rem}
  .shop-tile__pick{margin-top:.55rem}
  .shop-choice__note{margin-top:1rem}
  /* same treatment as the hero buttons: label centred, arrow pinned to the right edge */
  #partners .apply-link{width:100%;justify-content:center;position:relative;padding-inline:3.4rem;min-height:52px}
  #partners .apply-link .tip{position:absolute;right:1rem;top:50%;transform:translateY(-50%)}
  .apply-link--waiting{background:var(--steel);color:var(--text-hi)}
  .panel:not(.goal){padding:1.5rem 1.25rem!important}
  details.fine summary{display:block;cursor:pointer;font-weight:700;padding:.4rem 0;list-style:none}
  details.fine summary::after{content:" \25BE"}
  details.fine[open] summary::after{content:" \25B4"}
}

/* ---------- phones: opening frame (MK review, 2026-09-07) ----------
   The film and the headline share one full-screen frame instead of a
   video band sitting above the title. The film is 16:9; a full-bleed
   cover crop on a portrait screen would keep only the door, so it fills
   the middle band and the ink feathers in above and below. Headline at
   the top, CTAs at the bottom above the mobar, the truck between them.
   Desktop: .hero-stage is a plain block, nothing changes. */
.hero-stage{position:relative;background:var(--ink)}
@media(max-width:899px){
  .hero-stage{display:grid;isolation:isolate;overflow:clip}
  .hero-stage>.scrolly,.hero-stage>.hero-follow{grid-area:1/1}
  .hero-stage .scrolly{z-index:0;min-height:0}
  .hero-stage .scrolly .scrolly-pin{position:absolute;inset:0;padding:0;overflow:clip}
  .hero-stage .scrolly .scrolly-mvid{position:absolute;left:0;top:9%;width:100%;height:68%;aspect-ratio:auto;object-fit:cover;object-position:30% 50%}
  /* the scrim stays near-opaque through the film's top edge and the studio ceiling light (top 17% of the
     frame), so the headline sits on ink and the truck emerges below it */
  .hero-stage .scrolly .scrolly-pin::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 12%,rgba(10,11,13,.94) 21%,rgba(10,11,13,.45) 27%,rgba(10,11,13,0) 34%,rgba(10,11,13,0) 56%,rgba(10,11,13,.7) 68%,var(--ink) 76%)}
  /* the film box ends at 9% + 68% = 77%; the scrim must be solid ink before that edge or the edge shows */
  /* 11vw keeps "Every ride covered." on one line down to 360px; 11.4vw wrapped it at 390 */
  .hero-stage h1.hero-title--cine{font-size:clamp(2.3rem,11vw,4.4rem)}
  .hero-stage .hero-follow{z-index:1;background:transparent;display:flex;
    min-height:calc(100vh - 100px);min-height:calc(100svh - 100px);
    padding-block:clamp(24px,4vh,36px) calc(78px + env(safe-area-inset-bottom))}
  .hero-stage .hero-follow .wrap{display:flex;flex-direction:column;flex:1 1 auto;width:100%;min-width:0}
  .hero-stage .hero-follow .hero-ctas{margin-top:auto}
  .hero-stage .hero-follow .hero-specline--cine{display:none}
  .hero-stage h1.hero-title--cine{text-shadow:0 2px 18px rgba(10,11,13,.8)}
}