/* Yota Pros preview. JT Studio house kit (SNIPPETS.md 1, 2.1, 12 to 15, 19 to 25) on the Carbon Oval palette. */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-wdth-latin.woff2") format("woff2-variations"),url("../fonts/archivo-wdth-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Fallback";src:local("Arial");size-adjust:104%;ascent-override:88%;descent-override:22%}

:root{
  --step--1:clamp(0.8333rem,0.8177rem + 0.0780vw,0.8908rem);
  --step-0:clamp(1rem,0.9492rem + 0.2542vw,1.1875rem);
  --step-1:clamp(1.2rem,1.0962rem + 0.5192vw,1.5829rem);
  --step-2:clamp(1.44rem,1.2583rem + 0.9086vw,2.1101rem);
  --step-3:clamp(1.728rem,1.4338rem + 1.4708vw,2.8127rem);
  --step-4:clamp(2.0736rem,1.6192rem + 2.2722vw,3.75rem);
  --step-5:clamp(2.4883rem,1.8078rem + 3.4028vw,5rem);
  --step-hero:clamp(2.6rem,1.55rem + 4.4vw,5.6rem);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --section-y:clamp(64px,6vw + 40px,150px);
  --gutter:clamp(16px,4vw,48px);
  --container:1240px;
  --header-h:64px;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-out-expo:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.55,0,1,.45);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-overshoot:cubic-bezier(.34,1.56,.64,1);
  --dur-press:34ms;--dur-1:120ms;--dur-2:200ms;--dur-3:300ms;--dur-4:450ms;--dur-reveal:700ms;--dur-image:1200ms;

  /* Carbon Oval (Brand Playbook K) */
  --sand:#F6F4F1;--chrome:#E4E5E8;--graphite:#1B1D20;--gunmetal:#4B5058;--red:#A51F1A;--oxblood:#6E100C;--teal:#1E7480;--chrome-text:#A9AEB5;
  --bg:var(--sand);--surface:var(--sand);--surface-2:var(--chrome);--ink:var(--graphite);--muted:var(--gunmetal);--line:rgb(75 80 88 / .2);--star:var(--red);
  --accent:var(--red);--accent-strong:var(--oxblood);--on-accent:#fff;--focus:var(--red);
  --graphite-line:rgb(255 255 255 / .12);
  --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-card:18px;--radius-btn:999px;
  --shadow-color:220deg 8% 20%;
  --shadow-1:0 1px 1px hsl(var(--shadow-color) / .06),0 2px 3px hsl(var(--shadow-color) / .06);
  --shadow-2:0 1px 1px hsl(var(--shadow-color) / .06),0 3px 6px hsl(var(--shadow-color) / .07),0 10px 20px hsl(var(--shadow-color) / .07);
  --shadow-3:0 2px 2px hsl(var(--shadow-color) / .05),0 8px 16px hsl(var(--shadow-color) / .07),0 20px 40px hsl(var(--shadow-color) / .09),0 36px 64px hsl(var(--shadow-color) / .08);
  --font:"Archivo","Archivo Fallback",Arial,sans-serif;
}
@media (min-width:1024px){:root{--header-h:80px}}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
html{scroll-padding-top:calc(var(--header-h) + 8px);scrollbar-gutter:stable;background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--step-0);line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
figure,blockquote{margin:0}
.makes>*,.problem>*,.svc-layout>*,.owners>*,.loc>*,.story>*,.records>*,.form-wrap>*,.faq-wrap>*,.close__grid>*,.hero__grid>*{min-width:0}
h1,h2,h3,blockquote{text-wrap:balance;margin:0}
p,li,figcaption{text-wrap:pretty}
p{margin:0}
h1,h2,h3,.display{font-family:var(--font);font-weight:800;color:inherit}
h2{font-size:var(--step-4);line-height:1.06;letter-spacing:-.025em;max-width:22ch}
h3{font-size:var(--step-2);line-height:1.18;letter-spacing:-.015em}
.lead{font-size:var(--step-1);line-height:1.42;max-width:48ch}
p,li{max-width:65ch}
a{color:inherit}
ul,ol{margin:0;padding:0}
.section{padding-block:var(--section-y);padding-inline:var(--gutter)}
.container{width:min(var(--container),100%);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:var(--gutter);top:8px;z-index:200;padding:12px 16px;border-radius:8px;background:var(--ink);color:#fff;transform:translateY(-150%);transition:transform .2s var(--ease-out)}
.skip-link:focus-visible{transform:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.dark :focus-visible,.site-header :focus-visible,.site-footer :focus-visible,.band-red :focus-visible,.menu :focus-visible{outline-color:#fff}
.icon{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:18px;height:18px}
.icon-lg{width:32px;height:32px;stroke-width:1.5}
main{position:relative;z-index:1;background:var(--bg);display:block}
main:focus{outline:none}

/* Preview bar (templates/sky.html) */
.preview-bar{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center;align-items:center;padding:9px 16px;background:var(--graphite);border-bottom:1px solid var(--graphite-line);color:#fff;font-size:13px;line-height:1.4;text-align:center}
.preview-bar p{max-width:none}
.preview-bar a{color:#fff;opacity:.8;text-decoration:none;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.preview-bar a:hover{opacity:1}}

/* Header (SNIPPETS 14, sticky variant so the preview bar can sit above) */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h);display:flex;align-items:center;gap:var(--space-4);padding-inline:max(var(--gutter),calc((100% - 1440px) / 2));background:var(--graphite);color:#fff;border-bottom:1px solid var(--graphite-line);transition:transform 350ms var(--ease-out);view-transition-name:site-header}
.site-header[data-hidden="true"]{transform:translateY(-100%)}
.site-header:focus-within{transform:none}
.logo{display:inline-flex;align-items:center;gap:10px;margin-right:auto;color:#fff;text-decoration:none;white-space:nowrap;flex-shrink:0;min-height:44px}
.logo img{width:62px;height:auto}
.logo span{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
@media (min-width:1024px){.logo img{width:72px}}
.nav-desktop{display:none}
@media (min-width:1024px){.nav-desktop{display:flex}}
.nav-desktop>ul{display:flex;gap:0;list-style:none}
.nav-link{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 11px;color:#fff;text-decoration:none;font-weight:500;font-size:16px;white-space:nowrap}
.nav-link::after{content:"";position:absolute;left:11px;right:11px;bottom:8px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform var(--dur-3) var(--ease-out)}
.nav-link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;background:#fff}
@media (hover:hover) and (pointer:fine){.nav-link:hover::after{transform:scaleX(1);transform-origin:left}}
.nav-link:focus-visible::after{transform:scaleX(1);transform-origin:left}
.header-phone{display:none;align-items:center;gap:8px;min-height:44px;color:#fff;font-weight:600;text-decoration:none;white-space:nowrap;flex-shrink:0}
.header-phone .icon{color:var(--chrome-text)}
@media (min-width:1280px){.header-phone{display:inline-flex}}
.site-header .btn{min-height:44px;padding:0 20px;font-size:16px;white-space:nowrap;flex-shrink:0}
@media (max-width:1023px){.site-header .btn{display:none}}
.menu-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid rgb(255 255 255 / .45);border-radius:999px;background:none;color:#fff;font:600 16px/1 var(--font);cursor:pointer;white-space:nowrap;flex-shrink:0}
@media (min-width:1024px){.site-header .menu-toggle{display:none}}
.burger{position:relative;width:18px;height:12px}
.burger span{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease-in-out),top .35s var(--ease-in-out) .1s,opacity .2s}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:5px}.burger span:nth-child(3){top:10px}
[aria-expanded="true"] .burger span{transition:top .3s var(--ease-in-out),transform .35s var(--ease-in-out) .15s,opacity .2s}
[aria-expanded="true"] .burger span:nth-child(1){top:5px;transform:rotate(45deg)}
[aria-expanded="true"] .burger span:nth-child(2){opacity:0}
[aria-expanded="true"] .burger span:nth-child(3){top:5px;transform:rotate(-45deg)}

/* Mobile menu (SNIPPETS 20) */
.menu{margin:0;padding:0;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:var(--graphite);color:#fff;overflow:auto;overscroll-behavior:contain}
.menu::backdrop{background:transparent}
html.menu-open{background:var(--graphite)}
.menu-inner{min-height:100%;display:flex;flex-direction:column;padding:calc(var(--header-h) + 24px) var(--gutter) 32px;position:relative}
.menu-close{position:absolute;top:10px;right:var(--gutter)}
.menu-links{list-style:none}
.menu-links a{display:block;padding:8px 0;font-size:clamp(30px,8.5vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:#fff;text-decoration:none}
.menu-links a[aria-current="page"]{color:var(--chrome-text)}
.menu-links .mask{display:block;overflow:hidden}
.menu-links .mask>span{display:block}
.menu-foot{margin-top:auto;padding-top:32px;border-top:1px solid var(--graphite-line);display:grid;gap:12px}
.menu-foot a{color:#fff;font-weight:600}
.menu-foot span{color:var(--chrome-text)}

/* Buttons (SNIPPETS 12) */
.btn{--btn-bg:var(--accent);--btn-fg:var(--on-accent);--btn-sweep:var(--accent-strong);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:var(--radius-btn);background:var(--btn-bg);color:var(--btn-fg);font:600 var(--step-0)/1.1 var(--font);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform 450ms var(--ease-out),box-shadow 450ms var(--ease-out);text-align:center}
.btn--secondary{--btn-bg:transparent;--btn-fg:var(--ink);--btn-sweep:color-mix(in srgb,var(--ink) 8%,transparent);min-height:48px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 40%,transparent)}
.dark .btn--secondary,.band-red .btn--secondary{--btn-fg:#fff;--btn-sweep:rgb(255 255 255 / .1);box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .55)}
.band-red .btn--primary{--btn-bg:#fff;--btn-fg:var(--oxblood);--btn-sweep:var(--chrome)}
.btn--sweep::before,.btn--secondary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-sweep);transform:scaleX(0);transform-origin:right center;transition:transform 450ms var(--ease-out)}
.btn__icon{display:inline-grid;transition:transform 300ms var(--ease-out)}
.btn__icon svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transition-duration:150ms;box-shadow:0 8px 24px hsl(0 60% 20% / .2)}
  .btn--secondary:hover{box-shadow:inset 0 0 0 1.5px currentColor}
  .btn--sweep:hover::before,.btn--secondary:hover::before{transform:scaleX(1);transform-origin:left center;transition-duration:300ms}
  .btn:hover .btn__icon{transform:translateX(4px)}
}
.btn:focus-visible .btn__icon{transform:translateX(4px)}
.btn:active{transform:translateY(1px) scale(.98);transition-duration:34ms}
.btn[aria-busy="true"] .btn__label,.btn[aria-busy="true"] .btn__icon{opacity:0}
.btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:btn-spin 700ms linear infinite}
@keyframes btn-spin{to{transform:rotate(1turn)}}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--red);text-decoration:none;min-height:44px}
.text-link .icon{width:18px;height:18px;transition:transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.text-link:hover .icon{transform:translateX(4px)}}
.text-link:focus-visible .icon{transform:translateX(4px)}
.phone-link{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:600;text-decoration:none}

/* Stars + proof line */
.stars{display:inline-flex;gap:2px;color:var(--star)}
.dark .stars,.band-red .stars,.pull:not(.pull--light) .stars,.odo-card .stars{color:var(--chrome)}
.stars svg{width:18px;height:18px;fill:currentColor;stroke:none}
.proof-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:var(--step--1);font-weight:500}

/* Hero (dark graphite, split, real photo) */
.hero{position:relative;background:var(--graphite);color:#fff;padding:clamp(28px,4vw,64px) var(--gutter) clamp(48px,6vw,96px);overflow:clip;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 85% 30%,rgb(165 31 26 / .22),transparent 70%),var(--graphite)}
.hero__grid{display:grid;gap:clamp(28px,4vw,64px);align-items:center;min-height:clamp(440px,calc(72svh - var(--header-h)),680px)}
@media (min-width:900px){.hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.hero__h1{font-size:var(--step-0);font-weight:600;letter-spacing:0;color:var(--chrome-text);max-width:none;display:flex;align-items:center;gap:10px;line-height:1.3}
.hero__h1::before{content:"";width:28px;height:3px;background:var(--red);border-radius:2px;flex:0 0 auto}
.hero__header{font-size:var(--step-hero);line-height:1;letter-spacing:-.035em;font-weight:800;max-width:20ch;margin-top:var(--space-4);text-wrap:balance}
.hero--short .hero__header{font-size:var(--step-5)}
.hero--short .hero__grid{min-height:0;grid-template-columns:1fr}
.hero__sub{font-size:var(--step-1);line-height:1.42;max-width:50ch;margin-top:var(--space-5);color:var(--chrome)}
.hero__offer{margin-top:var(--space-4);color:var(--chrome-text);font-size:var(--step-0)}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:var(--space-6)}
.hero__micro{margin-top:var(--space-4);font-size:var(--step--1);color:var(--chrome-text)}
.hero .proof-line{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--graphite-line)}
.breadcrumb{font-size:var(--step--1);color:var(--chrome-text);margin-bottom:var(--space-4)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.breadcrumb li{display:inline-flex;align-items:center;gap:4px}
.breadcrumb a{color:#fff;text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.breadcrumb svg{width:14px;height:14px}
.hero__media{position:relative;justify-self:end;width:100%;max-width:520px}
.hero__frame{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgb(0 0 0 / .45);outline:1px solid rgb(255 255 255 / .08);aspect-ratio:4/5;background:var(--gunmetal)}
.hero__frame img{width:100%;height:100%;object-fit:cover}
.hero__media--small{max-width:420px}
.hero__tag{position:absolute;left:-18px;bottom:28px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--sand);color:var(--ink);box-shadow:var(--shadow-3);font-weight:600;font-size:15px;line-height:1.2}
.hero__tag .icon{color:var(--red)}
@media (max-width:899px){
  .hero__grid{min-height:0}
  .hero__media{justify-self:stretch;max-width:none}
  .hero__frame{aspect-ratio:4/3}
  .hero__tag{left:12px;bottom:12px}
}
.js-motion .hero__frame img{animation:hero-in 1.2s var(--ease-out-expo) both}
@keyframes hero-in{from{clip-path:inset(8% 6% 8% 6% round 22px);transform:scale(1.06)}to{clip-path:inset(0 round 0);transform:none}}

/* Section heads */
.sec-head{display:grid;gap:var(--space-4);margin-bottom:clamp(32px,4vw,56px)}
.sec-head p{color:var(--muted);font-size:var(--step-1);line-height:1.45;max-width:52ch}
.sec-head--split{align-items:end}
@media (min-width:1024px){.sec-head--split{grid-template-columns:1.1fr .9fr;gap:var(--space-7)}}
.dark{background:var(--graphite);color:#fff}
.dark .sec-head p{color:var(--chrome-text)}
.alt{background:var(--chrome)}
.white{background:var(--sand)}

/* Problem */
.problem{display:grid;gap:clamp(32px,5vw,80px)}
@media (min-width:1024px){.problem{grid-template-columns:1.15fr .85fr;align-items:start}}
.problem__body{display:grid;gap:var(--space-5);margin-top:var(--space-6);font-size:var(--step-0);color:var(--ink)}
.problem__body p:first-child{font-size:var(--step-1);line-height:1.45}
.pull{position:relative;padding:clamp(28px,3vw,44px);border-radius:var(--radius-card);background:var(--graphite);color:#fff;box-shadow:var(--shadow-3)}
.pull .icon-quote{width:40px;height:40px;color:var(--red);fill:currentColor;stroke:none;margin-bottom:var(--space-4)}
.pull blockquote{font-size:var(--step-2);line-height:1.25;font-weight:700;letter-spacing:-.01em}
.pull figcaption{margin-top:var(--space-5);color:var(--chrome-text);font-size:var(--step--1);display:flex;align-items:center;gap:10px}
.pull + .pull{margin-top:var(--space-5)}
.pull--light{background:var(--sand);color:var(--ink);box-shadow:var(--shadow-2);border:1px solid var(--line)}
.pull--light figcaption{color:var(--muted)}
.sticky-col{align-self:start}
@media (min-width:1024px){.sticky-col{position:sticky;top:calc(var(--header-h) + 32px)}}

/* Steps */
.steps{list-style:none;display:grid;gap:var(--space-5);counter-reset:s}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding:clamp(24px,2.6vw,36px);border-radius:var(--radius-card);background:var(--sand);display:grid;align-content:start;gap:var(--space-3);overflow:hidden;max-width:none}
.step__num{font-size:clamp(56px,6vw,88px);line-height:.9;font-weight:800;letter-spacing:-.05em;color:var(--red);font-variant-numeric:tabular-nums}
.step h3{font-size:var(--step-2)}
.step p{color:var(--muted)}
.step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease-out-expo) .2s}
.step.is-in::after,html:not(.js-motion) .step::after{transform:scaleX(1)}

/* Makes + odometer */
.makes{display:grid;gap:clamp(32px,4vw,56px)}
@media (min-width:1024px){.makes{grid-template-columns:1fr 1fr;align-items:start}}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-6)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid rgb(255 255 255 / .28);color:#fff;text-decoration:none;font-weight:600;transition:background-color var(--dur-3) var(--ease-out),border-color var(--dur-3),color var(--dur-3)}
.chip svg{width:16px;height:16px;transition:transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.chip:hover{background:#fff;color:var(--ink);border-color:#fff}.chip:hover svg{transform:translateX(3px)}}
.chip:focus-visible{background:#fff;color:var(--ink)}
.makes__note{margin-top:var(--space-6);color:var(--chrome-text)}
.odo-card{padding:clamp(24px,3vw,40px);border-radius:22px;color:#fff;background:linear-gradient(160deg,rgb(75 80 88 / .35),transparent 60%),var(--graphite);border:1px solid var(--graphite-line);box-shadow:0 30px 60px rgb(0 0 0 / .35)}
.odo{display:inline-flex;align-items:center;gap:4px;padding:10px 12px;border-radius:12px;background:var(--graphite);box-shadow:inset 0 2px 8px rgb(0 0 0 / .8),0 0 0 1px rgb(255 255 255 / .08);font-variant-numeric:tabular-nums}
.odo__d{position:relative;display:block;width:clamp(30px,4.4vw,52px);height:clamp(46px,6.4vw,76px);overflow:hidden;border-radius:6px;background:linear-gradient(180deg,var(--gunmetal),var(--graphite) 45%,var(--graphite) 55%,var(--gunmetal));color:var(--sand);font-weight:700;font-size:clamp(30px,4.6vw,54px);line-height:clamp(46px,6.4vw,76px);text-align:center}
.odo__d:last-of-type{color:#fff;background:linear-gradient(180deg,var(--red),var(--oxblood) 45%,var(--oxblood) 55%,var(--red))}
.odo__strip{display:block;transform:translateY(calc(var(--v,0) * -100% / 11));will-change:transform}
.odo__strip span{display:block}
.odo__sep{color:var(--chrome-text);font-size:clamp(26px,4vw,44px);font-weight:700;padding:0 1px}
.odo__unit{margin-left:10px;color:var(--chrome-text);font-weight:600;font-size:var(--step-0)}
.odo-card blockquote{margin-top:var(--space-6);font-size:var(--step-2);line-height:1.25;font-weight:700}
.odo-card figcaption{margin-top:var(--space-4);color:var(--chrome-text);font-size:var(--step--1);display:flex;gap:10px;align-items:center}
.mini-quotes{list-style:none;display:grid;gap:var(--space-4);margin-top:var(--space-5)}
@media (min-width:640px){.mini-quotes{grid-template-columns:repeat(3,1fr)}}
.mini-quote{padding:20px;border-radius:16px;background:rgb(255 255 255 / .05);border:1px solid var(--graphite-line);display:flex;flex-direction:column;gap:12px;max-width:none}
.mini-quote .mq{font-weight:600;line-height:1.4}
.mini-quote span{margin-top:auto;color:var(--chrome-text);font-size:var(--step--1)}
.mini-quote b{color:#fff;font-weight:700}

/* Reviews */
.reviews{list-style:none;display:grid;gap:var(--space-5)}
@media (min-width:768px){.reviews{grid-template-columns:repeat(var(--cols,3),1fr)}}
.review{display:flex;flex-direction:column;gap:var(--space-4);padding:clamp(24px,2.6vw,36px);border-radius:var(--radius-card);background:var(--sand);border:1px solid var(--chrome);box-shadow:var(--shadow-2);height:100%;max-width:none}
.review blockquote{font-size:clamp(1.2rem,1.1rem + .5vw,1.5rem);line-height:1.35;font-weight:700;letter-spacing:-.01em}
.review figcaption{margin-top:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--step--1);padding-top:var(--space-4);border-top:1px solid var(--line)}
.review figcaption b{color:var(--ink)}
.g-badge{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--chrome);font-weight:800;font-size:14px;color:var(--ink);flex:0 0 auto}
.rating-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(28px,3vw,44px)}
.rating-row .proof-line{font-size:var(--step-0)}

/* FAQ */
.faq-wrap{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:1024px){.faq-wrap{grid-template-columns:5fr 7fr}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:18px 0;cursor:pointer;font-weight:700;font-size:var(--step-1);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);transition:transform 300ms var(--ease-out),background-color 300ms,border-color 300ms}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:currentColor;border-radius:2px;transition:transform 300ms var(--ease-out)}
.faq summary .plus::after{transform:rotate(90deg)}
.faq details[open] .plus{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(180deg)}
.faq details[open] .plus::after{transform:rotate(0)}
@media (hover:hover) and (pointer:fine){.faq summary:hover .plus{border-color:var(--red)}}
.faq .answer{padding:0 0 22px;color:var(--muted);max-width:62ch}
.faq .answer p{font-size:var(--step-0)}

/* Location */
.loc{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media (min-width:900px){.loc{grid-template-columns:6fr 6fr}}
.nap{display:grid;gap:var(--space-4);margin-top:var(--space-6)}
.nap p{display:flex;gap:12px;align-items:flex-start}
.nap .icon{color:var(--red);margin-top:2px}
.embed{position:relative;aspect-ratio:4/3;border-radius:var(--radius-card);overflow:clip;background:var(--graphite);box-shadow:var(--shadow-2)}
.embed>img,.embed>iframe{width:100%;height:100%;border:0;object-fit:cover;display:block}
.embed{display:grid;place-items:center;background:radial-gradient(80% 80% at 50% 40%,rgb(75 80 88 / .6),transparent 70%),var(--graphite)}
.embed--map{aspect-ratio:auto;min-height:clamp(300px,34vw,420px)}
.embed__stack{display:grid;justify-items:center;gap:16px;padding:32px 16px;text-align:center}
.embed__addr{color:var(--chrome);font-weight:600;max-width:28ch}
.embed__stack .embed__load{position:static;translate:none}
.embed__load{position:absolute;left:50%;bottom:var(--space-5);translate:-50% 0;white-space:nowrap}
.embed__pin{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--teal);color:#fff;box-shadow:0 0 0 10px rgb(30 116 128 / .25)}

/* Close band */
.close{text-align:left}
.close__grid{display:grid;gap:var(--space-6);align-items:end}
@media (min-width:1024px){.close__grid{grid-template-columns:7fr 5fr}}
.close h2{font-size:var(--step-5);max-width:16ch;line-height:1.02;letter-spacing:-.03em}
.close__body{display:grid;gap:var(--space-4);color:var(--chrome);margin-top:var(--space-5);font-size:var(--step-1);line-height:1.45}
.close__cta{display:grid;gap:12px;justify-items:start}
.close__cta .micro{color:var(--chrome-text);font-size:var(--step--1)}

/* Gallery */
.gallery{list-style:none;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery li{max-width:none}
.gallery figure{margin:0;display:flex;flex-direction:column;height:100%;border-radius:14px;overflow:hidden;background:var(--sand);border:1px solid var(--chrome)}
.gallery .g-img{aspect-ratio:4/3;overflow:hidden;background:var(--chrome)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.gallery figure:hover img{transform:scale(1.04)}}
.gallery figcaption{padding:10px 12px;font-size:var(--step--1);color:var(--muted);line-height:1.35}


.award{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin-top:var(--space-7);padding:20px;border-radius:var(--radius-card);background:var(--chrome);max-width:640px}
.award figure{margin:0;width:120px;border-radius:8px;overflow:hidden}
.award p{font-weight:600}

/* Contact form */
.form-wrap{display:grid;gap:clamp(32px,4vw,64px)}
@media (min-width:1024px){.form-wrap{grid-template-columns:5fr 7fr;align-items:start}}
.form{display:grid;gap:18px;padding:clamp(22px,3vw,40px);border-radius:22px;background:var(--chrome);box-shadow:var(--shadow-2)}
.form .row{display:grid;gap:18px}
@media (min-width:640px){.form .row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:16px}
.field label .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;min-height:52px;padding:12px 14px;border-radius:12px;border:1.5px solid rgb(75 80 88 / .7);background:var(--sand);color:var(--ink);font:400 17px/1.4 var(--font);transition:border-color 200ms,box-shadow 200ms}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 30%,transparent)}
.field .err{display:none;color:var(--red);font-size:15px;font-weight:600}
.field[data-invalid="true"] input{border-color:var(--red)}
.field[data-invalid="true"] .err{display:block}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form .micro{color:var(--muted);font-size:var(--step--1)}
.form-done{display:none;padding:20px;border-radius:14px;background:var(--sand);border-left:4px solid var(--red);font-weight:600}
.preview-line{padding:12px 16px;border-radius:12px;background:var(--sand);font-weight:600}
.preview-line a{color:var(--red)}
.form.is-done .form-done{display:block}
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.hours dt{font-weight:600}
.hours dd{margin:0;color:var(--muted)}
.contact-card{display:grid;gap:var(--space-5);padding:clamp(22px,3vw,36px);border-radius:22px;background:var(--sand);border:1px solid var(--chrome)}
.contact-card .note{padding:14px 16px;border-radius:12px;background:var(--chrome)}
.open-dot{display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-weight:600}

/* 404 */
.nf{min-height:clamp(420px,70svh,720px);display:grid;place-items:center;text-align:center}
.nf__inner{display:grid;gap:var(--space-5);justify-items:center;max-width:720px}
.nf h1{font-size:var(--step-5);line-height:1.02;letter-spacing:-.03em;max-width:16ch}
.nf ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* Footer */
.site-footer{background:var(--graphite);border-top:1px solid var(--graphite-line);color:#fff;padding:clamp(56px,6vw,96px) var(--gutter) calc(24px + env(safe-area-inset-bottom));position:relative;z-index:0}
.site-footer[data-reveal-footer]{position:sticky;bottom:0}
.site-footer:focus-within{position:relative}
.site-footer a{color:inherit}
.f-grid{display:grid;gap:36px;padding-bottom:40px}
@media (min-width:768px){.f-grid{grid-template-columns:1.3fr 1fr 1fr}}
@media (min-width:1024px){.f-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.f-brand img{width:96px}
.f-brand p{margin-top:16px;color:var(--chrome-text);max-width:30ch}
.f-col h2{font-size:15px;font-weight:700;letter-spacing:0;color:#fff;margin-bottom:14px}
.f-col address{font-style:normal;color:var(--chrome-text);display:grid;gap:6px}
.f-col ul{list-style:none;display:grid;gap:2px}
.f-col a{display:inline-flex;min-height:44px;align-items:center;color:var(--chrome);text-decoration:none}
.f-col .hours dt{color:#fff;font-weight:600;white-space:nowrap}.f-col .hours dd{color:var(--chrome-text);white-space:nowrap}
.link-draw{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat right 85% / 0 1px;transition:background-size 350ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.link-draw:hover{background-size:100% 1px;background-position-x:left}}
.link-draw:focus-visible{background-size:100% 1px}
.f-word{font-size:clamp(64px,15vw,240px);line-height:.8;font-weight:800;letter-spacing:-.05em;color:rgb(228 229 232 / .05);margin:8px 0 28px;white-space:nowrap;user-select:none}
.f-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding-top:22px;border-top:1px solid var(--graphite-line)}
.fcopy{font:500 13px/1.4 var(--font);color:var(--chrome-text);max-width:none}
.fcopy a{color:var(--chrome-text)}
.preview-note{font-size:13px;color:var(--chrome-text)}

/* JT credit, house standard credit-std.css (1.10.2026) */
footer .studio-credit{position:relative;display:inline-grid!important;justify-items:center;align-items:center;gap:5px;margin:0 0 0 auto!important;padding:4px 6px 9px!important;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
footer .studio-credit span{font:600 8px/1 var(--font)!important;letter-spacing:.16em!important;padding-left:.16em;text-transform:uppercase;text-align:center;color:var(--chrome-text)!important;white-space:nowrap}
footer .studio-credit img{display:block;width:64px!important;height:auto!important;margin:0 auto;opacity:.92;filter:drop-shadow(0 0 0 rgba(40,124,255,0));transition:filter .45s ease,opacity .2s ease,transform .45s cubic-bezier(.16,1,.3,1)}
footer .studio-credit:before{content:"";position:absolute;left:0!important;right:0!important;bottom:0;width:auto!important;height:1px;background:linear-gradient(90deg,transparent 2%,rgba(40,124,255,.55) 30%,rgba(40,124,255,.55) 70%,transparent 98%)!important;opacity:.42;transform:scaleX(.72);transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s ease,filter .35s ease}
footer .studio-credit:hover img,footer .studio-credit:focus-visible img{opacity:1;filter:drop-shadow(0 0 2px rgba(40,124,255,.48)) drop-shadow(0 0 7px rgba(40,124,255,.2));transform:translateY(-1px)}
footer .studio-credit:hover:before,footer .studio-credit:focus-visible:before{opacity:.82;transform:scaleX(1);filter:drop-shadow(0 0 3px rgba(40,124,255,.42))}
footer .studio-credit:focus-visible{outline:2px solid #287cff;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){footer .studio-credit img,footer .studio-credit:before{transition:none}footer .studio-credit:hover img{transform:none}}
.f-bottom .fcopy{flex:1 1 200px}

/* Mobile CTA bar (SNIPPETS 13) */
.cta-bar{position:fixed;inset:auto 0 0 0;z-index:90;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));background:var(--sand);box-shadow:0 -8px 24px hsl(220 30% 10% / .12);transform:translateY(110%);transition:transform 300ms var(--ease-out)}
.cta-bar.is-on{transform:none}
.cta-bar .btn{min-height:56px;padding:0 10px;font-size:16px;line-height:1.15}
.cta-bar .btn__label{text-wrap:balance}
.nowrap{white-space:nowrap}
@media (max-width:440px){.cta-bar .btn{font-size:15px}.cta-bar .btn .icon{display:none}}
.cta-bar .btn--secondary{--btn-fg:var(--ink)}
body.has-cta-bar{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
html:has(body.has-cta-bar){scroll-padding-bottom:88px}
body.has-cta-bar .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
html.menu-open .cta-bar{display:none}
@media (min-width:1024px){.cta-bar{display:none}body.has-cta-bar{padding-bottom:0}html:has(body.has-cta-bar){scroll-padding-bottom:0}body.has-cta-bar .site-footer{padding-bottom:calc(24px + env(safe-area-inset-bottom))}}


/* Reveals (SNIPPETS 5.1) */
.js-motion [data-reveal]{opacity:0;transform:translateY(24px)}
.js-motion [data-reveal].is-in{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);transition-delay:calc(var(--d,0) * 80ms)}
.js-motion [data-clip]{clip-path:inset(10% 8% 10% 8% round 18px)}
.js-motion [data-clip] img{transform:scale(1.08)}
.js-motion [data-clip].is-in{clip-path:inset(0 0 0 0 round 0);transition:clip-path var(--dur-image) var(--ease-out-expo)}
.js-motion [data-clip].is-in img{transform:none;transition:transform var(--dur-image) var(--ease-out-expo)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Page transitions (SNIPPETS 23.1) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:180ms cubic-bezier(.55,0,1,.45) both jt-vt-fade-out}
::view-transition-new(root){animation:320ms cubic-bezier(.22,1,.36,1) 120ms both jt-vt-fade-in,420ms cubic-bezier(.16,1,.3,1) both jt-vt-rise}
@keyframes jt-vt-fade-out{to{opacity:0}}
@keyframes jt-vt-fade-in{from{opacity:0}}
@keyframes jt-vt-rise{from{transform:translateY(16px)}}
::view-transition-group(site-header){animation:none;z-index:100}
::view-transition-old(site-header){display:none}
::view-transition-new(site-header){animation:none}
::view-transition{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root){animation:150ms linear both jt-vt-fade-out}
  ::view-transition-new(root){animation:150ms linear both jt-vt-fade-in}
  ::view-transition-group(*){animation-duration:0s}
}

@media (min-width:900px){
  .hero{padding-top:clamp(28px,3.4vw,52px)}
  .hero__header{font-size:min(var(--step-hero),10.5svh)}
  .hero--short .hero__header{font-size:min(var(--step-5),9svh)}
}
.svc-layout .card p{min-height:calc(3 * 1.55em)}

/* ---- Round 2 (audit 2026-10-03) ---- */
:root{--pbar:37px}                 /* preview bar height; set to 0px at launch when the preview bar is removed */
.hero__media{max-width:min(520px,var(--capw,520px))}
.hero__media--small{max-width:min(420px,var(--capw,420px))}
@media (min-width:900px){
  .hero{min-height:clamp(520px,calc(100svh - var(--header-h) - var(--pbar) - 60px),780px);display:grid;align-items:center;padding-block:clamp(24px,3vh,44px)}
  .hero__grid{min-height:0;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .hero__header{font-size:min(4.6rem,4.9vw,9.2svh)}
  .hero--short{min-height:0}
  .hero--short .hero__header{font-size:min(var(--step-5),9svh)}
  .hero__frame{height:min(calc(100svh - var(--header-h) - var(--pbar) - 150px),calc(var(--capw,520px) * 1.25),620px);width:auto;max-width:100%;margin-left:auto}
  .hero__media{display:flex;justify-content:flex-end}
  .hero .proof-line{margin-top:var(--space-4);padding-top:var(--space-4)}
  .hero__ctas{margin-top:var(--space-5)}
  .hero__sub{margin-top:var(--space-4)}
}
@media (max-width:899px){.hero__media,.hero__media--small{max-width:min(100%,var(--capw,520px))}}
/* close band: CTA column holds proof, button, micro; centred with the copy */
.close__grid{align-items:center}
.close__cta{gap:16px}
/* links inside copy */
.inline-link{color:var(--red);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgb(165 31 26 / .45);transition:text-decoration-color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.inline-link:hover{text-decoration-color:currentColor}}
.link-line{margin-top:var(--space-5);font-size:var(--step-0);max-width:70ch}
.faq .answer .inline-link{color:var(--red)}
/* Lexus services */
.lexus-svc{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:1024px){.lexus-svc{grid-template-columns:5fr 7fr;align-items:start}}
.lexus-svc>*{min-width:0}
.ticks{list-style:none;display:grid;gap:12px}
.ticks li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:var(--chrome);max-width:none}
.ticks .icon{color:var(--red);margin-top:1px}
/* tips */
.tips{list-style:none;display:grid;gap:12px}
@media (min-width:768px){.tips{grid-template-columns:1fr 1fr;column-gap:24px}}
.tips li{display:flex;gap:16px;align-items:center;padding:16px 18px;border-radius:14px;background:var(--chrome);max-width:none}
.tip__n{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
/* core belief */
.belief{margin-top:var(--space-6);padding:20px 24px;border-left:4px solid var(--red);background:var(--chrome);border-radius:0 14px 14px 0;font-size:var(--step-1);line-height:1.45;font-weight:600}
/* video facade */
.video-wrap .embed{margin-inline:0}
.embed--video>picture img{opacity:.92}
.embed__play{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;border:0;background:linear-gradient(0deg,rgb(27 29 32 / .55),rgb(27 29 32 / .15));color:#fff;font:600 var(--step-0)/1.2 var(--font);cursor:pointer;width:100%;translate:none;left:0;bottom:0}
.embed__playicon{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--red);box-shadow:0 10px 30px rgb(0 0 0 / .35);transition:transform 300ms var(--ease-out),background-color 300ms}
.embed__playicon svg{width:30px;height:30px;margin-left:4px}
@media (hover:hover) and (pointer:fine){.embed__play:hover .embed__playicon{transform:scale(1.06);background:var(--oxblood)}}
.embed__play:focus-visible .embed__playicon{transform:scale(1.06)}
.embed--video>iframe{position:absolute;inset:0}
.embed--video{aspect-ratio:16/9}
.embed picture{position:absolute;inset:0}
.embed picture img{width:100%;height:100%;object-fit:cover;display:block}
.fcopy{padding-bottom:5px}
@media (min-width:900px){.hero:not(.hero--short) .hero__grid{min-height:min(calc(100svh - var(--header-h) - var(--pbar) - 150px),620px)}}
/* ---- Round 3 ---- */
.dark .inline-link,.band-red .inline-link{color:var(--sand);text-decoration-color:var(--red);text-decoration-thickness:2px}
.band-red .inline-link{text-decoration-color:var(--sand)}
@media (hover:hover) and (pointer:fine){.dark .inline-link:hover{color:var(--chrome);text-decoration-color:var(--sand)}}
.nf__lead{color:var(--chrome)}
.video-wrap--split{display:grid;gap:clamp(24px,4vw,64px);align-items:center}
@media (min-width:900px){.video-wrap--split{grid-template-columns:minmax(0,1fr) 360px}.video-wrap--split .sec-head{margin-bottom:0}}
.video-wrap--split .embed{width:100%;max-width:360px}
.makes .sec-head{align-self:center}

/* ===== Home hero (copy deck rev 8): one full bleed photo, ghost text behind the vehicles, info bar band under it. ===== */
:root{--red-on-dark:#E2453D;--graphite-raised:color-mix(in srgb,var(--graphite),#fff 6%)}   /* one dark family: graphite #1B1D20 and one raised step */
.hhero{background:var(--graphite)}
.hcard{position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;background:var(--graphite);display:flex;flex-direction:column}
.hcard::after{content:"";position:absolute;inset:0 0 auto 0;height:46%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgb(27 29 32 / .9),rgb(27 29 32 / 0))}
.hcard__top{order:0;position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:28px var(--gutter) 0}
.hcard__copy{min-width:0}
.hcard__h1{margin:0}
.hcard__header{margin:12px 0 0;max-width:none;font-size:clamp(1.6rem,7.6cqw,3.4rem);line-height:1.04;letter-spacing:-.035em;font-weight:800;color:#fff}
.hcard__l1,.hcard__l2{display:block;text-wrap:balance}
.hcard__l2{color:var(--red-on-dark)}
/* phones and tablets: copy first, then the whole photo full width (both vehicles always in frame), tucked up under the copy */
/* true scale photo (4 Oct 2026): roofs at 22% of the photo height, tyres at 61%, Lexus GX 550 spans 4 to 48% of the width,
   Tundra 52 to 97.5%. Phones and tablets show the top 85% of the photo, so the floor reflection is trimmed. */
.hcard__media{order:1;position:relative;z-index:1;aspect-ratio:1920/916;margin-top:-7%;container-type:inline-size}
.hcard__ghost{position:absolute;left:0;right:0;top:5.4cqw;z-index:0;margin:0;max-width:none;height:1em;text-align:center;white-space:nowrap;font-size:10.6cqw;line-height:1;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;color:rgb(255 255 255 / .1);pointer-events:none;user-select:none}
.hcard__img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 70%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 25%),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 25%),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
/* 1100px and up: full bleed, about one screen tall, copy over the photo top left */
@media (min-width:1100px){
  .hcard{--hh:min(clamp(560px,100svh - var(--header-h) - var(--pbar),920px),58vw);display:block;height:var(--hh)}
  /* The photo shows at its natural ratio, full width, never side cropped. On very wide screens it stops at 2.3 times the
     hero height, centred with feathered sides. The box is placed so the roofs sit at 38% of the hero height, under the
     copy; the floor reflection below the tyres runs off the bottom of the hero (overflow hidden). */
  .hcard{--mw:min(100cqw,var(--hh) * 2.3)}
  .hcard__media{position:absolute;top:calc(var(--hh) * .38 - var(--mw) / 1.781 * .22);left:50%;width:var(--mw);transform:translateX(-50%);margin:0;aspect-ratio:1920/1078}
  .hcard__img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(180deg,transparent 0,#000 20%),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .hcard__top{position:absolute;inset:0 0 auto 0;flex-direction:row;justify-content:space-between;gap:32px;padding:clamp(28px,3cqw,48px) max(var(--gutter),calc((100% - 1440px) / 2))}
  .hcard__header{font-size:min(4.1cqw,5rem,var(--hh) * .085)}
  .hcard__cta{flex:0 0 auto}
}
.hinfo-band{border-top:1px solid var(--graphite-line);padding:clamp(14px,1.6vw,22px) 0}
.hinfo{list-style:none;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;max-width:calc(var(--container) + 2 * var(--gutter))}
.hinfo li{min-width:0;max-width:none}
.hinfo__item{display:flex;align-items:center;gap:12px;min-height:48px;color:#fff;text-decoration:none}
.hinfo__badge{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--red)}
.hinfo__badge .icon{width:20px;height:20px;color:#fff}
.hinfo__text{min-width:0}
.hinfo__label{display:block;font-size:var(--step--1);line-height:1.25;color:var(--chrome-text)}
.hinfo__value{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-weight:600;font-size:var(--step-0);line-height:1.3}
.hinfo__value--nowrap{white-space:nowrap}
.hinfo__value .stars svg{width:15px;height:15px}
a.hinfo__item:hover .hinfo__value>span:last-child,a.hinfo__item:hover .hinfo__value:not(:has(span)){text-decoration:underline;text-underline-offset:3px}
a.hinfo__item:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:12px}
@media (min-width:900px){.hinfo{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
@media (max-width:599px){
  .hinfo{gap:18px 12px}
  .hinfo__item{flex-direction:column;align-items:flex-start;gap:8px}
  .hinfo__badge{width:38px;height:38px}.hinfo__badge .icon{width:18px;height:18px}
  .hinfo__value{font-size:15px}
}

/* Makes section, phones and tablets: heading and intro, then the odometer card with its quotes, then the model chips and note */
@media (max-width:1023px){
  .makes__main{display:contents}
  .makes .sec-head{order:1}
  .makes__proof{order:2}
  .makes .chips{order:3;margin-top:0}
  .makes__note{order:4;margin-top:calc(var(--space-4) - clamp(32px,4vw,56px))}
}

/* Ghost words (deck rev 9): LEXUS centred behind the Lexus on the left (26% of the photo width), TOYOTA behind the Tundra on the right (74.8%), true scale photo */
.hcard__gw{position:absolute;top:0;transform:translateX(-50%)}
.hcard__gw--l{left:26%}.hcard__gw--r{left:74.8%}

/* ===== Motion (BRIEF section 7, SNIPPETS 5.1). Hidden states apply only under html.js-motion, which the head script
   adds when motion is allowed and removes again if site.js never takes over. Reduced motion and no JS: everything at rest. ===== */
.js-motion .hhero :is(.hcard__img,.hcard__h1,.hcard__l1,.hcard__l2,.hcard__cta,.hcard__ghost,.hinfo li),
.js-motion .hero .hero__copy>*{opacity:0}

/* =====================================================================================================================
   Revision 12 redesign (4 Oct 2026, Justin: "screams cheap template"). Everything below the home hero and the inner pages.
   Strict 12-column grid, left aligned. Graphite and off-white surfaces only. Oval Red on the primary CTA, the ruler's
   active tick and small accents (#E2453D for text on dark). Display type: Archivo condensed (wdth 70); body: Archivo 100.
   No card shadows, no badge pills, no gradient blobs. Hairline rules carry the structure.
   ===================================================================================================================== */
:root{
  --paper:#F6F4F1;--ink-2:#3C4047;--hair:rgb(27 29 32 / .16);--hair-dark:rgb(255 255 255 / .16);
  --display:"Archivo","Archivo Fallback",Arial Narrow,Arial,sans-serif;
  --sx:clamp(88px,6vw + 56px,176px);
  --col-gap:clamp(16px,2.2vw,32px);
  --container:1280px;
  --shadow-1:none;--shadow-2:none;--shadow-3:none;
  --h2:clamp(2.6rem,1.55rem + 4.3vw,5.75rem);
  --h-sub:clamp(1.9rem,1.35rem + 2.2vw,3.25rem);
}
body{background:var(--paper)}
main{background:var(--paper)}
h2,h3,.hero__header,.close h2,.nf h1{font-family:var(--display);font-stretch:70%}
h2{font-size:var(--h2);line-height:.94;letter-spacing:-.018em;font-weight:800;max-width:15ch}
h3{font-stretch:82%;font-weight:700;letter-spacing:-.01em}
.h-sub{font-size:var(--h-sub);line-height:.98;max-width:18ch}
.lead{font-size:var(--step-1);line-height:1.42;color:var(--ink-2);max-width:44ch}
.dark .lead,.sx--dark .lead{color:var(--chrome)}
.micro{font-size:var(--step--1);color:var(--muted)}
.dark .micro{color:var(--chrome-text)}

/* bands */
.sx{padding:var(--sx) var(--gutter);position:relative}
.sx--paper{background:var(--paper);color:var(--ink)}
.sx--dark{background:var(--graphite);color:#fff}
.sx--rule{padding-top:0}
.sx--rule>.container{border-top:1px solid var(--hair);padding-top:var(--sx)}
.sx-gap{margin-top:clamp(72px,8vw,136px)}
.sx-gap-sm{margin-top:clamp(48px,5vw,80px)}
.shead{display:grid;gap:clamp(18px,1.8vw,28px);align-content:start;margin-bottom:clamp(32px,3.5vw,56px)}
.shead .lead{margin:0}
.prose{display:grid;gap:var(--space-4);max-width:56ch;font-size:var(--step-0);line-height:1.6;color:var(--ink-2)}
.prose p:first-child{font-size:var(--step-1);line-height:1.45;color:var(--ink)}
.sx--dark .prose,.dark .prose{color:var(--chrome-text)}
.sx--dark .prose p:first-child,.dark .prose p:first-child{color:#fff}

/* 12-column splits, left aligned */
.split{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,5vw,72px);column-gap:var(--col-gap)}
.split>*{min-width:0}
@media (min-width:1024px){
  .split{grid-template-columns:repeat(12,minmax(0,1fr))}
  .split--7-5>:first-child{grid-column:1 / span 7}.split--7-5>:last-child{grid-column:9 / span 4}
  .split--6-6>:first-child{grid-column:1 / span 6}.split--6-6>:last-child{grid-column:7 / span 6}
  .split--5-7>:first-child{grid-column:1 / span 5}.split--5-7>:last-child{grid-column:6 / span 7}
  .split--4-8>:first-child{grid-column:1 / span 4}.split--4-8>:last-child{grid-column:5 / span 8}
  .split--6-6>:last-child{padding-left:clamp(0px,3vw,48px)}
  .split--5-7>:last-child,.split--4-8>:last-child{padding-left:clamp(0px,2vw,32px)}
}

/* text links: ink with a hairline, red only as a small accent on the arrow */
.text-link{color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:var(--hair)}
.text-link .icon{color:var(--red)}
.dark .text-link .icon,.sx--dark .text-link .icon{color:var(--red-on-dark)}
.dark .text-link,.sx--dark .text-link{text-decoration-color:var(--hair-dark)}
@media (hover:hover) and (pointer:fine){.text-link:hover{text-decoration-color:currentColor}}
.inline-link{color:inherit;text-decoration-color:var(--red)}
.dark .inline-link,.sx--dark .inline-link{color:#fff;text-decoration-color:var(--red-on-dark)}
.link-line{margin-top:clamp(24px,2.5vw,36px);color:var(--ink-2)}
.sx--dark .link-line{color:var(--chrome-text)}

/* quotes: typographic, no cards */
.quotes{display:grid;gap:clamp(28px,3vw,44px);align-content:start}
@media (min-width:768px){.quotes--2{grid-template-columns:1fr 1fr;column-gap:var(--col-gap)}}
.q{display:grid;gap:14px;padding-top:20px;border-top:1px solid var(--hair);max-width:34ch}
.sx--dark .q,.dark .q{border-top-color:var(--hair-dark)}
.q blockquote{font-family:var(--display);font-stretch:82%;font-weight:700;font-size:var(--step-2);line-height:1.18;letter-spacing:-.01em}
.q--lg blockquote{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);line-height:1.1}
.q--xl{border-top:0;padding-top:0;max-width:30ch}
.q--xl blockquote{font-stretch:72%;font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.5vw,2.6rem);line-height:1.04}
.q--sm blockquote{font-size:var(--step-1);line-height:1.3}
.q figcaption{display:flex;align-items:center;gap:10px;font-size:var(--step--1);color:var(--muted)}
.sx--dark .q figcaption,.dark .q figcaption{color:var(--chrome-text)}
.q .stars svg{width:14px;height:14px}

/* menu rows (dealer-style service menu): name | one line | arrow, hairlines between */
.mlist{list-style:none;border-top:1px solid var(--hair)}
.sx--dark .mlist,.dark .mlist{border-top-color:var(--hair-dark)}
.mrow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:6px 24px;padding:clamp(18px,1.8vw,26px) 0;border-bottom:1px solid var(--hair);max-width:none}
.sx--dark .mrow,.dark .mrow{border-bottom-color:var(--hair-dark)}
.mrow__name{grid-column:1;font-size:clamp(1.3rem,1.1rem + .8vw,1.9rem);line-height:1.08;font-stretch:76%;font-weight:800;letter-spacing:-.01em}
.mrow__line{grid-column:1;display:grid;gap:8px}
.mrow__line p{color:var(--ink-2);max-width:60ch}
.sx--dark .mrow__line p,.dark .mrow__line p{color:var(--chrome-text)}
.mrow__line .text-link{min-height:36px;justify-self:start}
.mrow__arrow{grid-column:2;grid-row:1 / span 2;align-self:center;display:grid;place-items:center;width:28px;height:28px;color:var(--ink);transition:transform 300ms var(--ease-out)}
.mrow__arrow svg{width:22px;height:22px}
.mrow__link{color:inherit;text-decoration:none}
.mrow__link::after{content:"";position:absolute;inset:0;z-index:1}
.mrow__link:focus-visible{outline:none}
.mrow__link:focus-visible::after{outline:3px solid var(--focus);outline-offset:2px}
.mrow--link .mrow__name{background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 2px;transition:background-size 350ms var(--ease-out);justify-self:start}
@media (hover:hover) and (pointer:fine){
  .mrow--link:hover .mrow__arrow{transform:translateX(6px);color:var(--red)}
  .mrow--link:hover .mrow__name{background-size:100% 2px}
}
@media (min-width:768px){
  .mrow{grid-template-columns:minmax(0,5fr) minmax(0,7fr) 28px;align-items:baseline}
  .mrow__line{grid-column:2}
  .mrow__arrow{grid-column:3;grid-row:1;align-self:center}
  .mlist--compact .mrow{grid-template-columns:minmax(0,4fr) minmax(0,8fr) 28px}
}
.mlist--svc .mrow{scroll-margin-top:calc(var(--header-h) + 8px)}
.menu-foot{margin-top:clamp(24px,2.5vw,36px);color:var(--ink-2);max-width:62ch}
.also{margin-top:clamp(24px,2.5vw,36px);color:var(--ink-2);max-width:62ch}

/* steps: big numerals, hairline top, no boxes */
.steps{list-style:none;display:grid;gap:clamp(28px,3vw,48px)}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap)}}
.step{padding:22px 0 0;border-top:1px solid var(--hair);border-radius:0;background:none;gap:12px;overflow:visible}
.step::after{display:none}
.step__num{font-family:var(--display);font-stretch:70%;font-size:clamp(3rem,2.2rem + 2.6vw,4.75rem);line-height:.85;color:var(--ink);letter-spacing:-.02em}
.step h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.9rem);line-height:1.08}
.step p{color:var(--ink-2)}

/* photos */
.photo{margin:0;overflow:hidden;background:var(--graphite)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--4x3{aspect-ratio:4/3}
.aside .photo{margin-top:clamp(8px,1vw,16px)}
.sx--dark .photo--4x3{margin-top:clamp(32px,3vw,48px)}

/* inner page hero: copy on the left half, one large photo on the right */
.hero::before{background:var(--graphite)}
.hero{background:var(--graphite)}
.hero__header{font-weight:800;letter-spacing:-.02em;line-height:.92}
@media (min-width:900px){
  .hero{min-height:clamp(560px,calc(100svh - var(--header-h) - var(--pbar)),860px)}
  .hero__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .hero__copy{grid-column:1 / span 6}
  .hero__media{grid-column:7 / span 6;max-width:none;justify-self:stretch;display:block}
  .hero__media--portrait{grid-column:8 / span 5;max-width:440px;justify-self:end}
  .hero__header{font-size:min(5.6rem,6.2vw,11svh)}
  .hero--short .hero__header{font-size:min(5.2rem,6vw,10svh)}
  .hero--short .hero__copy{grid-column:1 / span 9}
}
.hero__frame,.hero__media .hero__frame{height:auto!important;width:100%!important;aspect-ratio:3/2;border-radius:0;box-shadow:none;outline:0;background:var(--graphite)}
.hero__media--portrait .hero__frame{aspect-ratio:4/5}
.hero__frame img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.hero__media,.hero__media--small{max-width:none}.hero__media--portrait{max-width:min(100%,420px)}}
.js-motion .hero__frame img{animation:hero-in2 1.1s var(--ease-out-expo) both}
@keyframes hero-in2{from{clip-path:inset(0 0 14% 0);transform:scale(1.05)}to{clip-path:inset(0);transform:none}}

/* home: the 300,000-mile Toyota (paper; odometer card stays graphite) */
.miles .makes{gap:var(--col-gap)}
@media (min-width:1024px){
  .miles .makes{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:0}
  .miles .makes__main{grid-column:1 / span 5}
  .miles .makes__proof{grid-column:7 / span 6}
}
.miles .sec-head,.sx .sec-head{gap:clamp(18px,1.8vw,28px);margin-bottom:0}
.chips{margin-top:clamp(28px,3vw,44px);gap:8px}
.chip{border-radius:2px;border:1px solid var(--hair);color:var(--ink);min-height:44px;padding:0 16px;font-weight:600;background:transparent}
@media (hover:hover) and (pointer:fine){.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}}
.chip:focus-visible{background:var(--ink);color:#fff}
.dark .chip,.nf .chip{border-color:var(--hair-dark);color:#fff}
@media (hover:hover) and (pointer:fine){.dark .chip:hover,.nf .chip:hover{background:#fff;color:var(--ink)}}
.odo-card{border-radius:0;box-shadow:none;background:var(--graphite);border:0;padding:clamp(28px,3.4vw,52px)}
.odo-card blockquote{font-family:var(--display);font-stretch:78%;font-size:clamp(1.5rem,1.2rem + 1.1vw,2.2rem);line-height:1.1}
.mini-quotes{gap:0;margin-top:0;border-left:0}
@media (min-width:640px){.mini-quotes{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap)}}
.mini-quote{border-radius:0;background:none;border:0;border-top:1px solid var(--hair);padding:18px 0 0;margin-top:clamp(24px,2.5vw,36px);min-height:0}
.mini-quote .mq{color:var(--ink);font-weight:600}
.mini-quote span{color:var(--muted)}
.mini-quote b{color:var(--ink)}
.sx--dark .makes{display:grid;gap:clamp(40px,5vw,72px)}
@media (min-width:1024px){.sx--dark .makes{grid-template-columns:repeat(12,minmax(0,1fr))}.sx--dark .makes>.sec-head{grid-column:1 / span 5}.sx--dark .makes>.makes__proof{grid-column:7 / span 6}}
.sx--dark .odo-card{background:var(--graphite-raised)}

/* home: service by the mile (signature: pinned ruler on desktop, vertical on phones) */
.ruler{position:relative;isolation:isolate;overflow:clip;background:var(--graphite);color:#fff;padding:var(--sx) var(--gutter)}
.ruler__bg{position:absolute;inset:0;z-index:-1}
.ruler__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.55}
.ruler__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(27 29 32 / .82) 0%,rgb(27 29 32 / .35) 38%,rgb(27 29 32 / .72) 62%,rgb(27 29 32 / .96) 100%)}
.ruler__inner{display:grid;gap:clamp(40px,6vw,96px)}
.ruler__head h2{max-width:12ch}
.ruler__head .lead{margin-top:clamp(16px,1.6vw,24px);color:var(--chrome)}
.ruler__track{list-style:none;position:relative;display:grid;gap:0;--p:1}
.ruler__stop{position:relative;max-width:none}
.ruler__mark{display:block;font-family:var(--display);font-stretch:70%;font-weight:800;font-size:clamp(2rem,1.4rem + 2.2vw,3.4rem);line-height:.9;letter-spacing:-.01em;white-space:nowrap}
.ruler__tick{display:block;background:rgb(255 255 255 / .55);transition:background-color 300ms var(--ease-out),transform 300ms var(--ease-out)}
.ruler__stop.is-active .ruler__tick{background:var(--red-on-dark)}
.ruler__text{color:var(--chrome);font-size:var(--step-0);line-height:1.45;max-width:30ch;transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.ruler__marker{position:absolute;list-style:none;pointer-events:none;display:none}
.ruler__link{color:var(--chrome-text)}
/* phones and tablets: vertical ruler, no pin; a fill line follows the scroll */
@media (max-width:1023px){
  .ruler{background:var(--graphite)}
  .ruler__bg{position:relative;inset:auto;margin:calc(-1 * var(--sx)) calc(-1 * var(--gutter)) clamp(32px,6vw,56px);aspect-ratio:16/9}
  .ruler__bg img{opacity:1}
  .ruler__bg::after{background:linear-gradient(180deg,transparent 55%,var(--graphite) 100%)}
  .ruler__track{padding-left:36px;gap:clamp(28px,6vw,40px)}
  .ruler__track::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:rgb(255 255 255 / .25)}
  .ruler__track::after{content:"";position:absolute;left:8px;top:6px;width:1px;height:calc((100% - 12px) * var(--p));background:#fff}
  .ruler__tick{position:absolute;left:-36px;top:.55em;width:17px;height:3px}
  .ruler__text{margin-top:8px}
}
/* desktop: horizontal ruler; ticks on one baseline; marker needle travels across */
@media (min-width:1024px){
  .ruler{padding:0}
  .ruler.is-live{height:calc(min(100svh,1100px) + min(100vh,1100px) * 1.6)}
  .ruler__sticky{position:relative;min-height:min(100svh,1100px);display:grid;align-items:center;padding:calc(var(--header-h) + clamp(32px,4vw,64px)) var(--gutter) clamp(40px,5vw,72px);overflow:hidden;isolation:isolate}
  .ruler.is-live .ruler__sticky{position:sticky;top:0;height:min(100svh,1100px)}
  .ruler__inner{width:min(var(--container),100%);margin-inline:auto;align-content:space-between;min-height:calc(min(100svh,1100px) - var(--header-h) - clamp(72px,9vw,136px))}
  .ruler__track{grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--col-gap);--colw:calc((100% - (var(--n) - 1) * var(--col-gap)) / var(--n));--base:calc(clamp(2rem,1.4rem + 2.2vw,3.4rem) * .9 + 25px)}
  .ruler__track::before{content:"";position:absolute;left:0;right:var(--colw);top:var(--base);height:1px;background:rgb(255 255 255 / .3)}
  .ruler__track::after{content:"";position:absolute;left:0;top:var(--base);height:1px;width:calc((100% - var(--colw)) * var(--p));background:#fff}
  .ruler__tick{width:3px;height:22px;margin:14px 0 18px}
  .ruler__marker{display:block;left:calc((100% - var(--colw)) * var(--p) - 1px);top:calc(var(--base) - 26px);width:3px;height:52px;background:#fff}
  .ruler.is-live .ruler__marker{display:block}
}
.ruler:not(.is-live) .ruler__marker{display:none}
/* scrubbed state (JS adds .is-live only when motion is allowed): text of stops not yet passed waits, dimmed */
.ruler.is-live .ruler__stop:not(.is-passed) .ruler__text{opacity:0;transform:translateY(10px)}
.ruler.is-live .ruler__stop:not(.is-passed) .ruler__mark{opacity:.45}
.ruler__mark{transition:opacity 400ms var(--ease-out)}

/* home: the people behind the shop */
.people{display:grid;gap:clamp(48px,6vw,96px)}
@media (min-width:1024px){.people{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}.people__text{grid-column:1 / span 6}.people__team{grid-column:8 / span 5}}
.people__text{display:grid;gap:clamp(24px,2.6vw,40px);align-content:start}
.people__text .shead{margin-bottom:0}
.plaque{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;max-width:52ch}
.plaque figure{width:72px;margin:0}
.plaque p{color:var(--ink-2)}
.plaque--wide{margin-top:clamp(40px,4vw,64px);padding-top:24px;border-top:1px solid var(--hair);max-width:none}
.plaque--wide figure{width:96px}
.portraits{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);align-items:start}
.portrait{max-width:none}
.portrait figure{margin:0}
.portrait img{width:100%;max-width:240px;aspect-ratio:3/4;object-fit:cover;background:var(--chrome);filter:grayscale(.15)}
.portrait figcaption{margin-top:10px;font-family:var(--display);font-stretch:76%;font-weight:800;font-size:var(--step-1);line-height:1.1}
@media (min-width:640px){.portraits:not(.portraits--about) .portrait:nth-child(2){margin-top:clamp(24px,3vw,48px)}.portraits:not(.portraits--about) .portrait:nth-child(3){margin-top:clamp(12px,1.5vw,24px)}}
.portraits--about{max-width:900px}
.portraits--about figcaption{display:grid;gap:6px}
.portraits--about figcaption span{font-family:var(--font);font-stretch:100%;font-weight:400;font-size:var(--step-0);line-height:1.45;color:var(--ink-2)}
.people__reviews{display:grid;gap:28px;margin-top:clamp(40px,4vw,64px)}

/* home: bring your Toyota by */
.visit__main{display:grid;gap:clamp(20px,2vw,32px);align-content:start}
.visit__main h2{font-size:clamp(3rem,1.8rem + 5vw,6.75rem);max-width:10ch}
.visit__ctas{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:8px}
.visit__info{display:grid;gap:24px;align-content:start}
.facts{display:grid;grid-template-columns:minmax(0,1fr);margin:0;border-top:1px solid var(--hair-dark)}
.facts dt{padding-top:16px;font-size:var(--step--1);color:var(--chrome-text)}
.facts dd{margin:4px 0 0;padding-bottom:16px;border-bottom:1px solid var(--hair-dark);font-size:var(--step-1);line-height:1.35}
.facts .text-link{margin-top:6px;font-size:var(--step-0)}
.storefront{margin:0;max-width:240px}
.storefront img{width:100%;height:auto}
.note{color:var(--chrome-text)}
.sx--paper .note{color:var(--ink-2)}

/* offer + FAQ */
.offer2{display:grid;gap:clamp(18px,1.8vw,28px);align-content:start}
.offer2 .prose p:first-child{font-size:var(--step-0);color:var(--ink-2)}
.offer2__cta{display:grid;gap:10px;justify-items:start;margin-top:8px}
.offer__quote{font-weight:600}
.offer__quote span{color:var(--muted);font-weight:400}
.faqcol .h-sub{margin-bottom:clamp(20px,2vw,32px)}
.faq{border-top-color:var(--hair)}
.faq details{border-bottom-color:var(--hair)}
.faq summary{font-family:var(--display);font-stretch:82%;font-size:clamp(1.2rem,1.05rem + .6vw,1.6rem);font-weight:700}
.faq summary .plus{border-color:var(--hair);border-radius:50%}
.faq details[open] .plus{background:var(--ink);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.faq summary:hover .plus{border-color:var(--ink)}}
.faq .answer{color:var(--ink-2)}

/* close band */
.close{padding-block:var(--sx)}
.close__grid{gap:clamp(32px,4vw,56px)}
@media (min-width:1024px){.close__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}.close__grid>:first-child{grid-column:1 / span 7}.close__grid>:last-child{grid-column:9 / span 4}}
.close h2{font-size:clamp(2.8rem,1.6rem + 4.6vw,6rem);line-height:.92;max-width:13ch;letter-spacing:-.018em}

/* tips (maintenance), facts (about), gallery, ticks (Lexus) */
.tips{gap:0;border-top:1px solid var(--hair-dark)}
@media (min-width:768px){.tips{grid-template-columns:1fr 1fr;column-gap:var(--col-gap)}}
.tips li{background:none;border-radius:0;padding:18px 0;border-bottom:1px solid var(--hair-dark);gap:20px;align-items:baseline}
.tip__n{width:auto;height:auto;background:none;border-radius:0;color:var(--chrome-text);font-family:var(--display);font-stretch:70%;font-size:var(--step-2);font-weight:800;display:inline}
.tips p{color:#fff}
.ticks{gap:0;border-top:1px solid var(--hair-dark)}
.ticks li{background:none;border-radius:0;padding:16px 0;border-bottom:1px solid var(--hair-dark);color:var(--chrome)}
.ticks .icon{color:var(--red-on-dark)}
.facts-list{list-style:none;display:grid;gap:0;border-top:1px solid var(--hair-dark);align-content:start}
.facts-list li{display:flex;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--hair-dark);font-family:var(--display);font-stretch:76%;font-weight:700;font-size:clamp(1.3rem,1.1rem + .8vw,1.9rem);line-height:1.1;max-width:none}
.facts-list .icon{color:var(--chrome-text)}
.facts-list .stars{color:var(--chrome)}
.gallery{gap:var(--col-gap)}
@media (min-width:768px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery figure{border-radius:0;border:0;background:none}
.gallery .g-img{background:var(--graphite)}
.gallery figcaption{padding:10px 0 0;color:var(--ink-2)}
.belief{background:none;border-radius:0;border-left:0;border-top:1px solid var(--hair);padding:20px 0 0;margin-top:clamp(28px,3vw,44px);font-family:var(--display);font-stretch:82%;font-size:var(--step-2);line-height:1.2;font-weight:700;max-width:30ch}

/* contact */
.form{border-radius:0;background:transparent;box-shadow:none;padding:0;gap:20px}
.field input,.field textarea,.field select{border-radius:2px;border:1px solid rgb(75 80 88 / .55);background:#fff}
.preview-line{border-radius:0;background:none;border-left:3px solid var(--ink);padding:4px 0 4px 14px}
.preview-line a{color:inherit}
.form-done{border-radius:0;background:#fff;border-left-color:var(--ink)}
.contact-card{background:none;border:0;border-radius:0;padding:0;color:#fff;gap:24px}
.contact-card .hours dt{color:#fff}.contact-card .hours dd{color:var(--chrome-text)}
.contact-card .nap{margin-top:0}
.contact-card .nap a{color:#fff}
.contact-card .note{background:none;border-radius:0;padding:14px 0 0;border-top:1px solid var(--hair-dark)}
.nap .icon{color:var(--chrome-text)}
.sx--paper .nap .icon{color:var(--ink-2)}
.loc-media{display:grid;gap:var(--col-gap);align-content:start}
.embed,.embed--map{border-radius:0;box-shadow:none;background:var(--graphite)}
.embed__pin{background:transparent;border:1px solid var(--hair-dark);box-shadow:none}
.embed--type{display:block;aspect-ratio:16/9;background:var(--graphite);border:1px solid var(--hair)}
.embed--type .embed__play{background:none}
.video-col{display:grid;gap:clamp(18px,1.8vw,28px);align-content:start}
.video-col .shead{margin-bottom:0}
.video-col .embed{max-width:none!important;width:100%}
.sx--dark .video-col .embed{border:1px solid var(--hair-dark)}

/* reviews in the hero proof line: stars stay small accents */
.stars{color:var(--red)}
.dark .stars,.sx--dark .stars,.hero .stars,.odo-card .stars{color:var(--chrome)}
.g-badge{display:none}

/* footer: generated photos note (house rule) */

/* sticky column only on wide screens */
@media (min-width:1024px){.aside .sticky-col{position:sticky;top:calc(var(--header-h) + 32px)}}
.embed__playicon{background:#fff;color:var(--ink);box-shadow:none}
@media (hover:hover) and (pointer:fine){.embed__play:hover .embed__playicon{background:var(--chrome)}}
.ruler__link{margin-top:clamp(28px,3vw,40px)}
@media (min-width:1024px){.ruler__marker{width:1px;left:calc((100% - var(--colw)) * var(--p))}.ruler__stop.is-active .ruler__tick{width:5px;margin-left:-1px}}

/* ===== Revision 14 (sales copy): offer, scarcity and guarantee blocks, warnings, P.S. lines, preview notes ===== */
/* [CONFIRM WITH SHOP: ...] placeholders: small dashed preview notes for Justin's sales call, never finished copy */
.confirm{display:inline-block;max-width:100%;font:500 .78rem/1.5 var(--font);font-stretch:100%;letter-spacing:0;color:var(--ink-2);border:1px dashed currentColor;border-radius:3px;padding:1px 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:normal;vertical-align:baseline}
.dark .confirm{color:var(--chrome-text)}
.block{display:grid;gap:14px;align-content:start}
.block__h{font-size:clamp(1.5rem,1.15rem + 1.3vw,2.25rem);line-height:1.02;font-stretch:72%;font-weight:800;max-width:20ch}
h2.block__h{font-size:var(--h-sub)}
.block__lead{font-size:var(--step-1);line-height:1.42;color:var(--ink-2);max-width:44ch}
.dark .block__lead{color:var(--chrome)}
.block__line{color:var(--ink-2);max-width:56ch}
.dark .block__line{color:var(--chrome-text)}
.block__cta{margin-top:8px}
.block .q{margin-top:8px}
.ticks--offer{border-top-color:var(--hair)}
.ticks--offer li{border-bottom-color:var(--hair);color:var(--ink);padding:14px 0}
.ticks--offer .icon{color:var(--red)}
.dark .ticks--offer{border-top-color:var(--hair-dark)}.dark .ticks--offer li{border-bottom-color:var(--hair-dark);color:#fff}.dark .ticks--offer .icon{color:var(--red-on-dark)}
.guar .block__line{font-size:var(--step-1);line-height:1.4}
.sx--tight{padding-bottom:clamp(56px,4vw + 32px,104px)}
.warn{font-family:var(--display);font-stretch:82%;font-weight:700;font-size:var(--step-1);line-height:1.3;max-width:46ch;padding-left:16px;border-left:3px solid var(--red)}
.dark .warn{border-left-color:var(--red-on-dark);color:#fff}
.ps{max-width:60ch;color:var(--ink-2)}
.dark .ps{color:var(--chrome)}
.close__body .warn{font-size:var(--step-1)}
.close__body{gap:20px}
/* home miles: problem, story, solution, credentials */
.prose--problem p,.prose--problem p:first-child{font-size:var(--step-0);color:var(--ink-2)}
.prose--problem p:first-child{font-size:var(--step-1);color:var(--ink)}
.story{font-family:var(--display);font-stretch:82%;font-weight:700;font-size:var(--step-1);line-height:1.3;max-width:40ch;padding-top:18px;border-top:1px solid var(--hair)}
.solution{color:var(--ink);max-width:52ch;line-height:1.6}
.cred{margin-top:clamp(24px,2.5vw,36px);padding-top:16px;border-top:1px solid var(--hair);color:var(--ink-2);font-size:var(--step--1);max-width:60ch}
.makes__cta{margin-top:20px}
@media (max-width:1023px){.makes__cred{order:4;margin-top:0}.makes__cta{order:5;margin-top:0}}
/* ruler: benefit line under each check line, warning under the track */
.ruler__gain{color:#fff;margin-top:8px}
.ruler__foot{display:grid;gap:14px;margin-top:clamp(24px,3vw,40px)}
.ruler__foot .warn{font-size:var(--step-0);max-width:60ch}
.ruler__foot .ruler__link{margin-top:0}
@media (min-width:1024px){
  .ruler__text{font-size:var(--step--1);line-height:1.4}
  .ruler__inner{gap:clamp(24px,3.5vw,56px)}
}
/* close bands */
.blocks2{display:grid;gap:clamp(28px,3vw,44px);margin:clamp(8px,1vw,16px) 0}
@media (min-width:768px){.blocks2{grid-template-columns:1fr 1fr;column-gap:var(--col-gap)}}
.blocks3{display:grid;gap:clamp(36px,4vw,56px);padding-top:clamp(32px,3vw,48px);border-top:1px solid var(--hair-dark)}
@media (min-width:1024px){.blocks3{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap)}}
.visit__main .warn{margin-top:4px}
.facts-strip{list-style:none;display:grid;grid-template-columns:1fr;border-top:1px solid var(--hair)}
.facts-strip li{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--hair);font-family:var(--display);font-stretch:78%;font-weight:700;font-size:clamp(1.15rem,1rem + .5vw,1.45rem);line-height:1.15;max-width:none}
.facts-strip .icon{color:var(--ink-2)}
@media (min-width:768px){.facts-strip{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}}
@media (min-width:1024px){.facts-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.before-after{display:grid;gap:clamp(24px,2.5vw,36px)}
@media (min-width:768px){.before-after{grid-template-columns:1fr 1fr;column-gap:var(--col-gap)}}
.contact-card .scar-body{color:var(--chrome-text)}
#appointment-form .ostack,#appointment-form .guar{margin-top:clamp(20px,2vw,32px)}
#appointment-form .q{margin-top:clamp(20px,2vw,32px)}
/* ruler on short desktop screens (768 to 820px tall): tighter type so the held frame fits */
@media (min-width:1024px) and (max-height:860px){
  .ruler__sticky{padding-top:calc(var(--header-h) + 20px);padding-bottom:20px}
  .ruler__head h2{font-size:clamp(2.2rem,6.4svh,3.6rem)}
  .ruler__head .lead{font-size:var(--step-0);margin-top:10px}
  .ruler__mark{font-size:clamp(1.6rem,4.4svh,2.2rem)}
  .ruler__track{--base:calc(clamp(1.6rem,4.4svh,2.2rem) * .9 + 25px)}
  .ruler__inner{gap:18px}
  .ruler__foot{margin-top:16px;gap:8px}
  .ruler__gain{margin-top:4px}
}
.split + .steps{margin-top:clamp(40px,4vw,64px)}