/* ================= AUTO4 — shared styles ================= */
:root{
  --black:#000000; --white:#FFFFFF; --silver:#C0C0C0;
  --grey-900:#2B2B2B; --grey-500:#6E6E6E;
  --grey-100:#F7F7F7; --grey-300:#D9D9D9;
  --head:'Roboto Condensed',"Helvetica Neue Condensed","Arial Narrow",Arial,sans-serif;
  --body:'Inter',"Helvetica Neue",Arial,sans-serif;
  --ease-smooth:cubic-bezier(.22,1,.36,1);
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-fade:cubic-bezier(.25,.1,.25,1);
  --ease-luxe:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--grey-100);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before,body::after{content:"";position:fixed;pointer-events:none;opacity:1}
body::before{inset:0;z-index:100;background:var(--black);animation:loaderFade .55s var(--ease-standard) .46s forwards}
body::after{left:50%;top:50%;z-index:101;width:min(360px,62vw);aspect-ratio:1522/296;background:linear-gradient(110deg,var(--grey-500),var(--white),var(--silver),var(--grey-500));background-size:220% 100%;transform:translate(-50%,-50%);-webkit-mask:url('brand/auto4-lockup-white.png') center/contain no-repeat;mask:url('brand/auto4-lockup-white.png') center/contain no-repeat}
body::after{animation:loaderSheen 1.15s var(--ease-smooth) infinite,loaderFade .55s var(--ease-standard) .46s forwards}
/* Loader plays only on the first page of a visit (set by inline head script) */
html.no-loader body::before,html.no-loader body::after{display:none}
h1,h2,h3{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--white);line-height:1.1}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
body>header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(6,6,6,.92);border-bottom:1px solid rgba(192,192,192,.12);backdrop-filter:blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo{display:inline-flex;transition:opacity .28s var(--ease-standard),transform .28s var(--ease-smooth)}
.nav-logo:hover,.nav-logo:focus-visible{opacity:.86;transform:translateY(-1px)}
.nav-logo img{height:24px;width:auto}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{position:relative;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:13px;text-decoration:none;color:var(--grey-300);transition:color .28s var(--ease-standard)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--white)}
.nav-links a.active{color:var(--white)}
.nav-links a.active::after{content:"";display:block;height:2px;background:var(--silver);margin-top:5px}
.nav-links a:not(.active)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--silver);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-smooth)}
.nav-links a:not(.active):hover::after,.nav-links a:not(.active):focus-visible::after{transform:scaleX(1)}
.nav-cta{display:inline-block;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;text-decoration:none;background:var(--white);color:var(--black);padding:9px 18px;transition:background .28s var(--ease-standard),transform .28s var(--ease-smooth),box-shadow .28s var(--ease-standard)}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--silver);transform:translateY(-1px);box-shadow:0 10px 22px rgba(255,255,255,.08)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--white);margin:5px 0;transition:transform .32s var(--ease-smooth),opacity .24s var(--ease-standard)}
@media(max-width:820px){
  .nav-links{position:fixed;inset:64px 0 auto 0;background:rgba(0,0,0,.96);flex-direction:column;gap:0;padding:12px 24px 24px;transform:translateY(-130%);transition:transform .38s var(--ease-smooth);border-bottom:1px solid rgba(192,192,192,.12)}
  .nav-links.open{transform:translateY(0)}
  .nav-links li{padding:12px 0}
  .nav-links a.active::after{display:none}
  .burger{display:block}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#streaks{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;z-index:2;text-align:center;padding:96px 24px 64px}
.wordmark{display:block;width:min(560px,78vw);aspect-ratio:1522/296;margin:0 auto;
  -webkit-mask:url('brand/auto4-lockup-white.png') center/contain no-repeat;
  mask:url('brand/auto4-lockup-white.png') center/contain no-repeat;
  background:linear-gradient(110deg,var(--grey-300) 0%,var(--white) 18%,var(--silver) 38%,#8f8f8f 50%,var(--silver) 62%,var(--white) 82%,var(--grey-300) 100%);
  background-size:250% 100%;
  animation:sheen 6.5s ease-in-out infinite;
}
.hero-brand-image{display:block;width:min(820px,86vw);height:auto;margin:0 auto}
@keyframes sheen{0%{background-position:120% 0}55%{background-position:-20% 0}100%{background-position:-20% 0}}
.tagline{margin-top:28px;font-family:var(--head);font-weight:700;text-transform:uppercase;color:var(--silver);letter-spacing:.42em;font-size:clamp(12px,2.4vw,17px);text-indent:.42em}
.hero-sub{margin:20px auto 0;max-width:460px;color:var(--grey-300);font-size:15px}
.hero-ctas{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:14px;text-decoration:none;padding:15px 30px;transition:background .28s var(--ease-standard),color .28s var(--ease-standard),border-color .28s var(--ease-standard),transform .28s var(--ease-smooth),box-shadow .28s var(--ease-standard)}
.btn-solid{background:var(--white);color:var(--black)}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--silver);transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,255,255,.1)}
.btn-ghost{border:1px solid var(--grey-500);color:var(--grey-100)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--white);color:var(--white);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:var(--grey-500);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translate(-50%,0);opacity:.7}50%{transform:translate(-50%,8px);opacity:1}}

/* ---------- Page head (inner pages) ---------- */
.page-head{padding:150px 0 40px}
.page-head .kicker{margin-bottom:14px}
.page-head h1{font-size:clamp(38px,7vw,68px)}
.contact-methods{display:flex;gap:18px 28px;flex-wrap:wrap;margin-top:24px}
.contact-methods a{position:relative;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--silver);text-decoration:none;font-size:clamp(16px,2.4vw,22px);transition:color .28s var(--ease-standard)}
.contact-methods a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-smooth)}
.contact-methods a:hover,.contact-methods a:focus-visible{color:var(--white)}
.contact-methods a:hover::after,.contact-methods a:focus-visible::after{transform:scaleX(1)}
.page-actions{margin-top:30px}

/* ---------- Sections ---------- */
section{padding:110px 0}
.kicker{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.3em;font-size:12px;color:var(--grey-500);margin-bottom:16px}
h2{font-size:clamp(30px,5vw,44px);margin-bottom:24px}

/* ---------- Home: intro + links ---------- */
.intro p{max-width:640px;color:var(--grey-300);font-size:17px}
.intro p+p{margin-top:16px}
.quicklinks{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(192,192,192,.15);margin-top:56px}
@media(max-width:640px){.quicklinks{grid-template-columns:1fr}}
.ql{background:var(--grey-900);padding:38px 30px;text-decoration:none;display:block;transition:background .32s var(--ease-standard),transform .32s var(--ease-smooth),box-shadow .32s var(--ease-standard)}
.ql:hover,.ql:focus-visible{background:#232323;transform:translateY(-3px);box-shadow:0 18px 36px rgba(0,0,0,.2)}
.ql .kicker{margin-bottom:10px}
.ql h3{font-size:22px;letter-spacing:.06em;margin-bottom:10px}
.ql p{color:var(--grey-300);font-size:14.5px}
.ql .arrow{margin-top:16px;color:var(--silver);font-family:var(--head);font-weight:700;letter-spacing:.1em;font-size:13px;transition:transform .3s var(--ease-smooth),color .28s var(--ease-standard)}
.ql:hover .arrow,.ql:focus-visible .arrow{color:var(--white);transform:translateX(4px)}

/* ---------- About ---------- */
.about{position:relative;overflow:hidden}
.about-mark{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(420px,55vw);opacity:.07;pointer-events:none}
.about p{max-width:620px;color:var(--grey-300);font-size:17px}
.about p+p{margin-top:16px}

.values{background:var(--grey-900)}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(192,192,192,.15);margin-top:48px}
@media(max-width:980px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.values-grid{grid-template-columns:1fr}}
.value{background:var(--grey-900);padding:40px 28px;transition:background .32s var(--ease-standard),transform .32s var(--ease-smooth),box-shadow .32s var(--ease-standard)}
.value:hover{background:#232323;transform:translateY(-3px);box-shadow:0 18px 36px rgba(0,0,0,.16)}
.value .num{font-family:var(--head);font-weight:700;font-size:15px;color:var(--grey-500);letter-spacing:.15em}
.value svg{margin:22px 0 18px;stroke:var(--silver);transition:transform .34s var(--ease-smooth),stroke .28s var(--ease-standard)}
.value:hover svg{stroke:var(--white);transform:translateY(-2px)}
.value h3{font-size:19px;letter-spacing:.08em;margin-bottom:10px}
.value p{color:var(--grey-300);font-size:14.5px}

.inventory-cta{background:var(--black)}
.inventory-panel{display:flex;align-items:center;justify-content:space-between;gap:32px;border-top:1px solid rgba(192,192,192,.15);border-bottom:1px solid rgba(192,192,192,.15);padding-top:44px;padding-bottom:44px}
.inventory-panel h2{margin-bottom:12px}
.inventory-panel p:not(.kicker){max-width:520px;color:var(--grey-300);font-size:17px}
@media(max-width:720px){.inventory-panel{align-items:flex-start;flex-direction:column}.inventory-panel .btn{width:100%;text-align:center}}

/* ---------- Contact / Visit ---------- */
.visit-flex{display:flex;gap:56px;align-items:flex-start;flex-wrap:wrap}
.visit-info{flex:1;min-width:280px}
.visit-info address{font-style:normal;color:var(--grey-300);font-size:17px;margin-bottom:8px}
.visit-info .muted{color:var(--grey-500);font-size:14px;margin-bottom:32px}
.hours-dropdown{max-width:360px;margin:22px 0 32px;border-top:1px solid rgba(192,192,192,.15);border-bottom:1px solid rgba(192,192,192,.15);color:var(--grey-300)}
.hours-dropdown summary{cursor:pointer;list-style:none;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--silver);padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;transition:color .28s var(--ease-standard)}
.hours-dropdown summary:hover,.hours-dropdown summary:focus-visible{color:var(--white)}
.hours-dropdown summary::-webkit-details-marker{display:none}
.hours-dropdown summary::after{content:"+";font-size:20px;line-height:1;color:var(--white);transition:transform .28s var(--ease-smooth)}
.hours-dropdown[open] summary::after{content:"-"}
.hours-dropdown[open] summary::after{transform:rotate(180deg)}
.hours-dropdown dl{padding:0 0 18px}
.hours-dropdown div{display:flex;justify-content:space-between;gap:20px;padding:8px 0;border-top:1px solid rgba(192,192,192,.08)}
.hours-dropdown dt{color:var(--grey-500)}
.hours-dropdown dd{font-weight:500;text-align:right}
.visit-ctas{display:flex;gap:14px;flex-wrap:wrap}
.visit-map{flex:1;min-width:300px;width:100%}
.visit-map iframe{display:block;width:100%;height:360px;border:1px solid rgba(192,192,192,.15);background:var(--grey-900);
  filter:invert(.92) hue-rotate(180deg) contrast(.9) brightness(.95)}
@media(prefers-reduced-motion:no-preference){.visit-map iframe{transition:filter .35s var(--ease-standard),transform .35s var(--ease-smooth)}}
.visit-map iframe:hover{filter:none;transform:translateY(-2px)}

.contact{background:var(--grey-900);text-align:center}
.contact h2{font-size:clamp(38px,7vw,64px)}
.contact .phone{font-family:var(--head);font-weight:700;font-size:clamp(20px,3.4vw,28px);letter-spacing:.06em;color:var(--silver);text-decoration:none;display:inline-block;margin:8px 0 36px}
.contact .phone{transition:color .28s var(--ease-standard),transform .28s var(--ease-smooth)}
.contact .phone:hover,.contact .phone:focus-visible{color:var(--white);transform:translateY(-1px)}
.socials{display:flex;justify-content:center;gap:26px;margin-top:44px}
.socials a{color:var(--silver);transition:color .28s var(--ease-standard),transform .28s var(--ease-smooth)}
.socials a:hover,.socials a:focus-visible{color:var(--white);transform:translateY(-2px)}
.socials svg{width:24px;height:24px;display:block}

footer{border-top:1px solid rgba(192,192,192,.12);padding:44px 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot img{height:20px;width:auto}
.foot p{color:var(--grey-500);font-size:13px}
.foot .tag{font-family:var(--head);text-transform:uppercase;letter-spacing:.3em;font-size:11px;color:var(--grey-500)}
.foot-socials{margin-top:0;gap:18px}
.foot-socials svg{width:20px;height:20px}

/* ---------- Reveal ---------- */
.rv,.foot>*{opacity:1;transform:none}

/* ---------- Page transitions ----------
   The outgoing page uses a short fade only; incoming text stays sharp. */
body.leaving main,body.leaving footer{opacity:0;transition:opacity .24s var(--ease-standard)}

@keyframes softFadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes loaderSheen{
  from{background-position:120% 0}
  to{background-position:-40% 0}
}
@keyframes loaderFade{
  to{opacity:0}
}
@keyframes riseIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes headerIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes revealFade{
  from{opacity:0;transform:translateY(14px);filter:blur(5px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

@media(prefers-reduced-motion:no-preference){
  body>header{animation:headerIn .56s var(--ease-smooth)}
  main{animation:softFadeIn .5s var(--ease-standard) .04s backwards}
  footer{animation:softFadeIn .5s var(--ease-standard) .18s backwards}
  .page-head .wrap{animation:riseIn .64s var(--ease-smooth) .08s backwards}
  /* Hero unfolds element by element instead of rising as one block */
  .hero .hero-brand-image,.hero .tagline,.hero .hero-sub,.hero .hero-ctas{animation:riseIn .9s var(--ease-luxe) backwards}
  .hero .hero-brand-image{animation-delay:.12s}
  .hero .tagline{animation-delay:.26s}
  .hero .hero-sub{animation-delay:.4s}
  .hero .hero-ctas{animation-delay:.54s}
  .scroll-cue{animation:cue 2.4s ease-in-out infinite,softFadeIn .7s var(--ease-standard) .7s backwards}
  .rv.rv-watch,.foot>*.rv-watch{opacity:0;transform:translateY(14px);filter:blur(5px);will-change:opacity,transform,filter}
  .rv.rv-in,.foot>*.rv-in{animation:revealFade 1.1s var(--ease-luxe) both;will-change:opacity,transform,filter}
  .rv-d1.rv-in{animation-delay:.12s}
  .rv-d2.rv-in{animation-delay:.24s}
  .rv-d3.rv-in{animation-delay:.36s}
  .quicklinks .rv.rv-in,.values-grid .rv.rv-in{animation-duration:1.2s}
  /* Footer children cascade in instead of popping together */
  .foot>*:nth-child(2).rv-in{animation-delay:.08s}
  .foot>*:nth-child(3).rv-in{animation-delay:.16s}
  .foot>*:nth-child(4).rv-in{animation-delay:.24s}
  .foot>*:nth-child(5).rv-in{animation-delay:.32s}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before,body::after{display:none}
  .wordmark{animation:none;background:var(--silver)}
  .scroll-cue{animation:none}
  body.leaving main,body.leaving footer{transition:none;opacity:1}
  .nav-logo:hover,.nav-logo:focus-visible,
  .nav-cta:hover,.nav-cta:focus-visible,
  .btn-solid:hover,.btn-solid:focus-visible,
  .btn-ghost:hover,.btn-ghost:focus-visible,
  .ql:hover,.ql:focus-visible,
  .ql:hover .arrow,.ql:focus-visible .arrow,
  .value:hover,.value:hover svg,
  .visit-map iframe:hover,
  .contact .phone:hover,.contact .phone:focus-visible,
  .socials a:hover,.socials a:focus-visible{transform:none}
}
:focus-visible{outline:2px solid var(--silver);outline-offset:3px}