/* Van Nuys Auto Glass — "Redline Dial" design system
   Metaphor: the instrument cluster (the logo's tachometer arc).  Tone: confident / precise / sunlit.
   Type: ONE variable family, Mona Sans: sentence-case display (wght 540, -.035em) + light 300 counter-phrase;
   the wide 125% cut is reserved for uppercase labels and for figures (prices, phone, dial) as instrument readouts. */
:root{
  --paper:#f5f5f2; --paper-2:#eae9e4; --white:#ffffff;
  --ink:#131416; --ink-soft:#4a4d53; --ink-mute:#6a6d73;
  --line:rgba(19,20,22,.14); --line-soft:rgba(19,20,22,.08);
  --carbon:#141517; --carbon-2:#1e2023; --carbon-3:#2a2d31;
  --on-dark:#f2f2ee; --on-dark-soft:#a8abb1; --line-dark:rgba(242,242,238,.14);
  --red:#c40000; --red-deep:#930000; --red-hot:#ff5a4c;  /* red = text on light · deep = hover · hot = on carbon */
  --ease:cubic-bezier(.16,1,.3,1);
  --bar-h:76px;
  --sec-pad:clamp(72px,10vh,124px);
  --sec-pad-tight:clamp(52px,7vh,84px);
  --wrap:1240px;
  --f-disp:'Mona Sans','Arial Narrow',sans-serif;
  --f-body:'Mona Sans',system-ui,sans-serif;
  --f-mono:'Mona Sans',system-ui,sans-serif;  /* labels: always paired with font-stretch:125% */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.7 var(--f-body);letter-spacing:-.003em;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;font-kerning:normal}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px}
.skip:focus{left:8px}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
section[id]{scroll-margin-top:calc(var(--bar-h) + 20px)}

/* ---------- type primitives ---------- */
.mono{font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;font-stretch:125%;text-transform:uppercase}
/* same label look, but NEVER case-transformed — for spans that carry the client's own words */
.mono-src{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.05em;font-stretch:112%;text-transform:none}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.15em;font-stretch:125%;text-transform:uppercase;color:var(--ink-soft)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--red)}
.inv .eyebrow{color:var(--on-dark-soft)}
.inv .eyebrow::before{background:var(--red-hot)}
.h2{font-family:var(--f-disp);font-weight:540;letter-spacing:-.032em;line-height:1.06;font-size:clamp(30px,3.2vw,44px);text-wrap:balance}
.h2 .x{font-weight:300;color:var(--ink-mute)}
.inv .h2 .x{color:var(--on-dark-soft)}
.lede{font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:var(--ink-soft);max-width:52ch}
.inv{background:var(--carbon);color:var(--on-dark)}
.inv .lede{color:var(--on-dark-soft)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;border-radius:4px;font:560 15px/1 var(--f-body);letter-spacing:-.005em;text-decoration:none;overflow:hidden;isolation:isolate;transition:color .25s var(--ease),border-color .25s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-101%);transition:transform .5s var(--ease)}
.btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .45s var(--ease)}
.btn-red{background:var(--red);color:#fff}
.btn-red::before{background:var(--ink)}
.btn-line{border:1.5px solid var(--ink);color:var(--ink)}
.btn-line::before{background:var(--ink)}
.inv .btn-line{border-color:var(--on-dark);color:var(--on-dark)}
.inv .btn-line::before{background:var(--on-dark)}
.inv .btn-red::before{background:var(--red-deep)}
@media(hover:hover){
  .btn:hover::before{transform:none}
  .btn-line:hover{color:var(--paper)}
  .inv .btn-line:hover{color:var(--ink)}
  .btn:hover svg{transform:translateX(4px)}
}
.btn:focus-visible::before{transform:none}
.btn-line:focus-visible{color:var(--paper)}
.inv .btn-line:focus-visible{color:var(--ink)}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:560;color:var(--red);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;line-height:1.3}
.tlink svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .45s var(--ease)}
@media(hover:hover){.tlink:hover{color:var(--red-deep)}.tlink:hover svg{transform:translateX(5px)}}
.inv .tlink{color:var(--red-hot)}

/* ---------- navbar (sticky, never hides) ---------- */
.bar{position:sticky;top:0;z-index:100;background:rgba(245,245,242,.94);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.bar.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(0,0,0,.5)}
.bar-in{display:flex;align-items:stretch;gap:28px;height:var(--bar-h);width:min(1320px,100% - 40px);margin-inline:auto}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:60px;width:auto}
.nav{margin-left:auto;display:flex}
.nav-list{display:flex;align-items:stretch;gap:4px}
.nav-item{position:relative;display:flex;align-items:stretch}
.nav-trig,.nav-link{display:flex;align-items:center;gap:7px;padding:0 14px;background:none;border:0;cursor:pointer;font:520 15px/1 var(--f-body);text-decoration:none;color:var(--ink);position:relative}
.nav-trig svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .3s var(--ease)}
.nav-trig::after,.nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:18px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-link[aria-current]::after,.nav-trig[data-current]::after{transform:scaleX(1)}
@media(hover:hover){.nav-link:hover::after,.nav-trig:hover::after{transform:scaleX(1)}}
.nav-trig[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu{position:absolute;top:100%;left:0;min-width:280px;background:var(--white);border:1px solid var(--line);border-top:2px solid var(--red);border-radius:0 0 6px 6px;box-shadow:0 24px 50px -24px rgba(0,0,0,.35);padding:18px 18px 16px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s var(--ease),transform .35s var(--ease),visibility 0s .35s;overflow:auto;overscroll-behavior:contain}
.menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.menu-2{width:520px}
.menu-2 ul{columns:2;column-gap:18px}
.menu li{break-inside:avoid}
.menu a{display:block;padding:8px 10px;border-radius:4px;font-size:14.5px;line-height:1.35;text-decoration:none;color:var(--ink)}
.menu a[aria-current]{color:var(--red);font-weight:600}
@media(hover:hover){.menu a:hover{background:var(--paper-2)}}
.menu a:focus-visible{background:var(--paper-2)}
.menu-lab{font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.15em;font-stretch:125%;text-transform:uppercase;color:var(--ink-mute);padding:0 10px 10px;margin-bottom:8px;border-bottom:1px solid var(--line-soft)}
.has-menu.open .menu{opacity:1;visibility:visible;transform:none;transition:opacity .22s var(--ease),transform .35s var(--ease),visibility 0s}
.bar-call{align-self:center;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;border-radius:4px;background:var(--ink);color:var(--paper);text-decoration:none;font:520 15px/1 var(--f-body);font-stretch:112%;font-variant-numeric:tabular-nums;white-space:nowrap;transition:background .25s var(--ease)}
.bar-call-dot{width:8px;height:8px;border-radius:50%;background:var(--red-hot);box-shadow:0 0 0 3px rgba(255,90,76,.22)}
@media(hover:hover){.bar-call:hover{background:var(--red)}}
.burger{display:none;align-self:center;width:46px;height:46px;border:1px solid var(--line);border-radius:4px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;left:0;right:0;bottom:0;top:var(--mnav-top,var(--bar-h));z-index:99;background:var(--paper);overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
.mnav-in{padding:12px 20px 40px;display:flex;flex-direction:column}
.macc{border-bottom:1px solid var(--line)}
.macc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font:540 23px/1 var(--f-disp);letter-spacing:-.025em}
.macc summary::-webkit-details-marker{display:none}
.macc summary::after{content:"+";font:400 26px/1 var(--f-body);color:var(--red);transition:transform .3s var(--ease)}
.macc[open] summary::after{transform:rotate(45deg)}
.macc ul{padding:0 0 16px;columns:2;column-gap:14px}
.macc a{display:block;padding:9px 0;font-size:15px;line-height:1.3;text-decoration:none;break-inside:avoid}
.macc a[aria-current]{color:var(--red);font-weight:600}
.mnav-link{padding:18px 0;border-bottom:1px solid var(--line);font:540 23px/1 var(--f-disp);letter-spacing:-.025em;text-decoration:none}
.mnav-call{margin-top:24px;justify-content:center}
body.nav-open{overflow:hidden}
body.nav-open .fab{opacity:0;pointer-events:none}
@media(max-width:1100px){.nav-trig,.nav-link{padding:0 10px}.nav-trig::after,.nav-link::after{left:10px;right:10px}.bar-in{gap:16px}}
@media(max-width:980px){
  :root{--bar-h:66px}
  .nav{display:none}
  .burger{display:flex}
  .bar-call{margin-left:auto;height:42px;padding:0 14px;font-size:14px}
  .brand img{height:42px}
}
@media(max-width:560px){.bar-call{display:none}.burger{margin-left:auto}.macc ul{columns:1}}

/* ---------- call FAB (mobile) ---------- */
.fab{position:fixed;right:16px;bottom:16px;z-index:90;width:58px;height:58px;border-radius:50%;background:var(--red);display:none;align-items:center;justify-content:center;box-shadow:0 12px 30px -10px rgba(196,0,0,.6);transition:opacity .25s var(--ease)}
.fab svg{width:24px;height:24px;fill:#fff}
@media(max-width:980px){.fab{display:flex}}

/* ---------- footer ---------- */
.foot{background:var(--carbon);color:var(--on-dark);padding:clamp(64px,9vh,100px) 0 0;border-top:1px solid var(--line-dark)}
.foot-in{display:grid;grid-template-columns:1.1fr .95fr 1.25fr .8fr;gap:48px}
.foot-brand img{width:210px}
.foot-nap{font-style:normal;display:flex;flex-direction:column;gap:6px;margin-top:22px;color:var(--on-dark-soft);font-size:15px}
.foot-nap a{color:var(--on-dark);font-family:var(--f-disp);font-weight:450;font-stretch:125%;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:21px;text-decoration:none}
.foot-h{font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.15em;font-stretch:125%;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:16px}
.foot-col a{display:inline-block;padding:4px 0;font-size:14.5px;color:var(--on-dark);text-decoration:none;opacity:.86}
@media(hover:hover){.foot-col a:hover{opacity:1;color:var(--red-hot)}}
.foot-areas ul{columns:2;column-gap:20px}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:64px;padding:22px 0 26px;border-top:1px solid var(--line-dark);font-size:13px;color:var(--on-dark-soft)}
.foot-colo{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.14em;font-stretch:125%;text-transform:uppercase}
@media(max-width:980px){.foot-in{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-in{grid-template-columns:1fr;gap:36px}.foot{padding-bottom:70px}}

/* ---------- reveal primitive (JS-gated so no-JS shows everything) ---------- */
.js .ro{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .ro.in{opacity:1;transform:none}
.js .ro.d1{transition-delay:.08s}.js .ro.d2{transition-delay:.16s}.js .ro.d3{transition-delay:.24s}.js .ro.d4{transition-delay:.32s}

/* ---------- material: faint grain ---------- */
body::before{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.45;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;transition-delay:0s!important}
  .js .ro{opacity:1!important;transform:none!important}
}