/* ============================================================
   Belmont's Garage — race + 50s nostalgia + reliability
   ============================================================ */

:root{
  /* palette pulled from the shop's own logo + mural */
  --asphalt:    #15130F;
  --asphalt-2:  #211d16;
  --asphalt-3:  #2b261d;
  --red:        #D81E2C;
  --red-deep:   #A4121C;
  --blue:       #1B3A8C;   /* logo cobalt */
  --blue-2:     #25489f;
  --cream:      #F6EFE1;
  --cream-2:    #ece1cb;
  --teal:       #2FA5B6;   /* mural sky */
  --gold:       #E9B54A;   /* mural neon */
  --ink:        #1a1712;   /* text on cream */
  --ink-soft:   #4a4334;

  --chrome-hi:  #ffffff;
  --chrome-mid: #c7ccd2;
  --chrome-lo:  #8b9099;

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --f-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --f-script:  "Pacifico", cursive;
  --f-cond:    "Barlow Semi Condensed", system-ui, sans-serif;
  --f-body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:78px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.6;
  color:var(--cream);
  background:var(--asphalt);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* film-grain overlay across the whole site */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared layout ---------- */
.section{ padding:clamp(64px,9vw,128px) clamp(20px,5vw,48px); position:relative; }
.section--dark{ background:var(--asphalt); }
.section--cream{ background:var(--cream); color:var(--ink); }
.section__head{ max-width:var(--maxw); margin:0 auto clamp(36px,5vw,64px); text-align:center; }
.section__lead{ max-width:640px; margin:18px auto 0; color:var(--ink-soft); font-size:1.1rem; }
.section--dark .section__lead{ color:#cfc6b4; }

.eyebrow{
  font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.32em;
  font-weight:700; font-size:.85rem; color:var(--red); margin:0 0 12px;
}
.eyebrow--light{ color:var(--gold); }

.display{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.3rem,6vw,4.2rem); line-height:.98; letter-spacing:.01em;
  text-transform:uppercase; margin:0; color:var(--ink);
}
.display--light{ color:var(--cream); }
.script{
  font-family:var(--f-script); text-transform:none; letter-spacing:0;
  color:var(--red); font-size:.82em; display:inline-block;
}
.display--light .script{ color:var(--gold); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-cond); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:1rem;
  padding:.78em 1.5em; border-radius:6px; cursor:pointer; border:2px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  white-space:nowrap;
}
.btn__icon{ font-size:1.05em; line-height:1; }
.btn--lg{ font-size:1.12rem; padding:.95em 1.8em; }
.btn--primary{ background:var(--red); color:#fff; box-shadow:0 8px 22px -8px rgba(216,30,44,.8); }
.btn--primary:hover{ background:var(--red-deep); transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(216,30,44,.9); }
.btn--call{ background:var(--gold); color:#1a1305; box-shadow:0 8px 22px -8px rgba(233,181,74,.7); }
.btn--call:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(233,181,74,.85); }
.btn--ghost{ background:transparent; color:var(--cream); border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:var(--cream); color:var(--ink); transform:translateY(-3px); }

/* ---------- racing stripes ---------- */
.stripes{ position:absolute; left:0; right:0; height:10px; z-index:3;
  background:repeating-linear-gradient(90deg,
    var(--red) 0 60px, var(--cream) 60px 70px, var(--blue) 70px 130px, var(--cream) 130px 140px);
  background-size:280px 100%;
}
.stripes--thin{ height:6px; }
.stripes--top{ top:0; }
.stripes--bottom{ bottom:0; }

/* ---------- checkered flag strip ---------- */
.checker{
  position:absolute; top:0; left:0; right:0; height:26px; z-index:3;
  background-image:
    linear-gradient(45deg,#0c0a07 25%,transparent 25%,transparent 75%,#0c0a07 75%),
    linear-gradient(45deg,#0c0a07 25%,#f4eddd 25%,#f4eddd 75%,#0c0a07 75%);
  background-size:26px 26px; background-position:0 0,13px 13px; background-color:#f4eddd;
  opacity:.92;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .35s var(--ease), box-shadow .35s, padding .35s;
  padding:14px 0;
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__logo{ height:54px; width:auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); transition:height .35s var(--ease); }
.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links > a:not(.btn){
  font-family:var(--f-cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; font-size:.96rem; color:var(--cream);
  position:relative; padding:6px 0; text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.nav__links > a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:3px;
  background:var(--red); transition:width .28s var(--ease);
}
.nav__links > a:not(.btn):hover::after,
.nav__links > a.active::after{ width:100%; }
.nav__call{ font-size:.92rem; padding:.6em 1.1em; }

.nav.scrolled{ background:rgba(18,16,12,.92); backdrop-filter:blur(10px); box-shadow:0 6px 24px rgba(0,0,0,.4); padding:8px 0; }
.nav.scrolled .nav__logo{ height:44px; }

.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__toggle span{ width:26px; height:3px; background:var(--cream); border-radius:2px; transition:.3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:120px 20px 90px;
}
.hero__bg{
  position:absolute; inset:-8% 0; z-index:0;
  background:url("../assets/img/mural.jpg") center/cover no-repeat;
  transform:scale(1.08); will-change:transform; filter:saturate(1.05);
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(21,19,15,.25), rgba(21,19,15,.82) 75%),
    linear-gradient(180deg, rgba(21,19,15,.7) 0%, rgba(21,19,15,.35) 40%, rgba(21,19,15,.92) 100%);
}
.hero__content{ position:relative; z-index:4; max-width:880px; }
.hero__kicker{
  font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.3em;
  font-weight:600; color:var(--cream); font-size:clamp(.75rem,2.2vw,.95rem);
  margin:0 0 18px; text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.hero__title{
  font-family:var(--f-display); font-weight:400; margin:0;
  font-size:clamp(3.2rem,13vw,8.5rem); line-height:.86; letter-spacing:.01em;
  color:var(--cream);
  text-shadow:0 4px 0 var(--red-deep), 0 6px 28px rgba(0,0,0,.6);
}
.hero__title span{ display:block; color:var(--cream);
  -webkit-text-stroke:2px rgba(255,255,255,.0); text-shadow:0 4px 0 var(--blue), 0 6px 28px rgba(0,0,0,.6); }
.hero__script{
  font-family:var(--f-script); color:var(--gold);
  font-size:clamp(1.3rem,4.5vw,2.4rem); margin:.5em 0 .2em;
  text-shadow:0 3px 12px rgba(0,0,0,.65);
}
.hero__sub{
  max-width:560px; margin:14px auto 30px; color:#e9e2d2; font-size:1.12rem;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.hero__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* speedometer flourish */
.speedo{ margin:42px auto 0; width:200px; }
.speedo__svg{ width:200px; height:120px; overflow:visible; }
.speedo__arc{ stroke:rgba(246,239,225,.35); stroke-width:3; stroke-linecap:round; }
.speedo__ticks line{ stroke:rgba(246,239,225,.6); stroke-width:3; stroke-linecap:round; }
.speedo__needle{
  stroke:var(--red); stroke-width:4; stroke-linecap:round;
  transform-origin:100px 110px; transform:rotate(-90deg);
  animation:needle 2.6s var(--ease) .4s forwards;
}
.speedo__hub{ fill:var(--chrome-mid); stroke:var(--asphalt); stroke-width:2; }
.speedo__label{
  display:block; text-align:center; margin-top:6px;
  font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.22em;
  font-size:.72rem; color:var(--gold); text-shadow:0 2px 6px rgba(0,0,0,.7);
}
@keyframes needle{
  0%{ transform:rotate(-90deg); }
  70%{ transform:rotate(72deg); }
  85%{ transform:rotate(48deg); }
  100%{ transform:rotate(58deg); }
}

.hero__scroll{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:4; width:26px; height:44px; border:2px solid rgba(246,239,225,.6); border-radius:14px; }
.hero__scroll span{ position:absolute; top:8px; left:50%; width:4px; height:8px; margin-left:-2px; background:var(--gold); border-radius:2px; animation:scrolldot 1.6s infinite; }
@keyframes scrolldot{ 0%{ opacity:0; transform:translateY(0); } 40%{ opacity:1; } 80%{ opacity:0; transform:translateY(14px); } 100%{ opacity:0; } }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust{ position:relative; background:linear-gradient(180deg,var(--blue) 0%, #16306f 100%); padding:64px 20px 56px; }
.trust__grid{
  max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.stat{ text-align:center; position:relative; }
.stat::after{ content:""; position:absolute; right:-10px; top:14%; height:72%; width:1px; background:rgba(255,255,255,.18); }
.stat:last-child::after{ display:none; }
.stat__num{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.6rem,6vw,4rem); line-height:1; color:var(--cream);
  text-shadow:0 3px 0 rgba(0,0,0,.25);
}
.stat__num--text{ color:var(--gold); }
.stat__label{
  display:block; margin-top:6px; font-family:var(--f-cond); text-transform:uppercase;
  letter-spacing:.14em; font-size:.82rem; color:#cdd8f5; font-weight:600;
}

/* ============================================================
   STORY
   ============================================================ */
.story{ background:var(--cream); color:var(--ink); }
.story__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,6vw,72px); align-items:center; }
.story__copy p{ margin:0 0 18px; color:var(--ink-soft); font-size:1.12rem; }
.story__sign{ font-family:var(--f-script); color:var(--blue) !important; font-size:1.35rem; margin:8px 0 26px !important; }

.story__media{ position:relative; min-height:420px; }
.polaroid{
  position:absolute; margin:0; background:#fff; padding:12px 12px 0; border-radius:3px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.45); border:1px solid rgba(0,0,0,.06);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); width:64%;
}
.polaroid img{ border-radius:2px; aspect-ratio:16/10; object-fit:cover; }
.polaroid figcaption{ font-family:var(--f-script); color:var(--ink-soft); text-align:center; padding:10px 4px 12px; font-size:1rem; }
.polaroid--a{ top:0; left:0; transform:rotate(-5deg); z-index:3; }
.polaroid--b{ top:34%; right:0; transform:rotate(4deg); z-index:2; width:58%; }
.polaroid--c{ bottom:0; left:8%; transform:rotate(-2deg); z-index:1; width:54%; }
.story__media:hover .polaroid--a{ transform:rotate(-7deg) translateY(-6px); }
.story__media:hover .polaroid--b{ transform:rotate(6deg) translateY(-6px); }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background:linear-gradient(180deg,var(--asphalt) 0%, var(--asphalt-2) 100%); }
.services__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card{
  position:relative; overflow:hidden; background:linear-gradient(180deg,#2a261d 0%, #211d15 100%);
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:34px 28px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--red),var(--blue)); }
.card:hover{ transform:translateY(-8px); border-color:rgba(255,255,255,.18); box-shadow:0 26px 50px -22px rgba(0,0,0,.85); }
.card--featured{ background:linear-gradient(180deg,#33291a 0%, #271f14 100%); border-color:rgba(233,181,74,.35); }
.card__shine{ position:absolute; top:0; left:-60%; width:50%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); transition:left .7s var(--ease); }
.card:hover .card__shine{ left:130%; }
.card__icon{ width:58px; height:58px; border-radius:12px; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 25%,var(--chrome-hi),var(--chrome-mid) 45%,var(--chrome-lo)); margin-bottom:18px; box-shadow:0 6px 14px rgba(0,0,0,.4); }
.card__icon svg{ width:30px; height:30px; fill:var(--asphalt); }
.card h3{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:1.7rem; margin:0 0 8px; color:var(--cream); }
.card > p{ color:#cabfa9; margin:0 0 16px; font-size:1.02rem; }
.card ul{ list-style:none; padding:0; margin:0; }
.card li{ position:relative; padding:6px 0 6px 24px; color:#ddd3bf; font-size:1rem; border-top:1px solid rgba(255,255,255,.06); }
.card li::before{ content:""; position:absolute; left:2px; top:50%; transform:translateY(-50%) rotate(45deg); width:8px; height:8px; background:var(--red); }
.card--featured li::before{ background:var(--gold); }

/* ============================================================
   SHOWCASE / GALLERY
   ============================================================ */
.showcase{ background:var(--cream); color:var(--ink); }
.gallery{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; grid-auto-flow:dense; }
.gallery__item{
  position:relative; overflow:hidden; border-radius:12px; cursor:pointer; border:0; padding:0;
  background:#222; aspect-ratio:4/3; box-shadow:0 14px 30px -16px rgba(0,0,0,.5);
}
.gallery__item--wide{ grid-column:span 2; aspect-ratio:auto; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .4s; }
.gallery__item:hover img{ transform:scale(1.08); filter:saturate(1.1); }
.gallery__item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(10,8,5,.78)); opacity:.85; }
.gallery__cap{
  position:absolute; left:16px; bottom:14px; z-index:2; color:var(--cream);
  font-family:var(--f-cond); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:1rem; transform:translateY(6px); transition:transform .35s var(--ease);
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}
.gallery__item:hover .gallery__cap{ transform:translateY(0); }
.gallery__item:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }

.showcase__cta{ text-align:center; max-width:var(--maxw); margin:48px auto 0; }
.showcase__cta p{ font-family:var(--f-script); color:var(--blue); font-size:1.4rem; margin:0 0 18px; }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews__media{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.reviews__photo{ margin:0; border-radius:14px; overflow:hidden; box-shadow:0 16px 36px -18px rgba(0,0,0,.45); border:6px solid #fff; }
.reviews__photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/7; }
/* live Google rating summary */
.reviews__summary{ display:flex; align-items:center; justify-content:center; gap:14px; max-width:var(--maxw); margin:0 auto 30px; flex-wrap:wrap; }
.reviews__summary .reviews__score{ font-family:var(--f-display); font-size:2.6rem; color:var(--ink); line-height:1; }
.reviews__summary .reviews__stars{ color:var(--gold); font-size:1.6rem; letter-spacing:2px; }
.reviews__summary .reviews__count{ font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); font-weight:600; font-size:.95rem; }

/* live Google review cards */
.reviews__cards{ max-width:var(--maxw); margin:0 auto 44px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.reviews__cards:empty{ margin:0; }
.rcard{ background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:14px; padding:22px; box-shadow:0 14px 32px -20px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:12px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.rcard:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -22px rgba(0,0,0,.5); }
.rcard__head{ display:flex; align-items:center; gap:12px; }
.rcard__ava{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 46px; }
.rcard__ava--i{ display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--red)); color:#fff; font-family:var(--f-display); font-size:1.25rem; }
.rcard__id{ min-width:0; }
.rcard__name{ margin:0; font-weight:700; color:var(--ink); font-size:1.05rem; }
.rcard__meta{ margin:2px 0 0; font-size:.85rem; color:var(--ink-soft); }
.rcard__stars{ color:var(--gold); letter-spacing:1px; }
.rcard__text{ margin:0; color:#34302a; font-size:1rem; line-height:1.55; }
.rcard__more{ background:none; border:0; color:var(--blue); font-weight:700; cursor:pointer; padding:0; font:inherit; text-decoration:underline; }
@media (max-width:920px){ .reviews__cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .reviews__cards{ grid-template-columns:1fr; } }

.reviews__cta{ text-align:center; max-width:560px; margin:42px auto 0; }
.reviews__google{ width:54px; height:54px; margin:0 auto 6px; border-radius:50%; object-fit:cover; box-shadow:0 6px 16px rgba(0,0,0,.18); }
.reviews__cta p{ font-family:var(--f-script); color:var(--blue); font-size:1.25rem; margin:8px 0 18px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:linear-gradient(180deg,var(--asphalt-2) 0%, var(--asphalt) 100%); padding-top:84px; }
.contact__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,64px); align-items:stretch; }
.contact__phone{
  display:inline-flex; align-items:center; gap:.4em; margin:8px 0 24px;
  font-family:var(--f-display); font-weight:400; font-size:clamp(2rem,5vw,3rem);
  color:var(--gold); letter-spacing:.01em;
}
.contact__phone:hover{ color:#fff; }
.contact__list{ list-style:none; padding:0; margin:0 0 28px; }
.contact__list li{ padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); color:#ddd3bf; font-size:1.06rem; }
.contact__list strong{ display:inline-block; min-width:96px; color:var(--cream); font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.06em; font-size:.92rem; }
.contact__map{ border-radius:16px; overflow:hidden; border:6px solid #fff; box-shadow:0 20px 44px -20px rgba(0,0,0,.7); min-height:380px; }
.contact__map iframe{ width:100%; height:100%; min-height:380px; border:0; display:block; filter:saturate(1.05); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; background:#0e0c09; padding:48px 20px 26px; }
.footer__inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer__logo{ height:64px; width:auto; }
.footer__nav{ display:flex; gap:24px; flex-wrap:wrap; }
.footer__nav a{ font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:#cabfa9; font-size:.95rem; }
.footer__nav a:hover{ color:var(--gold); }
.footer__phone{ font-family:var(--f-display); color:var(--gold); font-size:1.5rem; }
.footer__base{ max-width:var(--maxw); margin:26px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer__base p{ margin:0; color:#8d8675; font-size:.9rem; }
.footer__credit a, .footer__credit{ color:#8d8675; }
.footer__brand{ display:flex; align-items:center; gap:18px; }
.footer__nap{ font-style:normal; color:#cabfa9; font-size:.95rem; line-height:1.55; }
.footer__nap strong{ color:var(--cream); }
.footer__nap a{ color:var(--gold); }
.footer__social{ display:flex; gap:14px; }
.footer__social a{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); transition:background .25s var(--ease), transform .25s var(--ease); }
.footer__social a:hover{ background:var(--red); transform:translateY(-3px); }
.footer__social svg{ width:20px; height:20px; fill:var(--cream); }

/* ---------- FAQ ---------- */
.faq{ background:linear-gradient(180deg,var(--asphalt-2) 0%, var(--asphalt) 100%); }
.faq__list{ max-width:820px; margin:0 auto; }
.faq__item{
  border:1px solid rgba(255,255,255,.1); border-radius:12px; margin-bottom:14px;
  background:rgba(255,255,255,.03); overflow:hidden; transition:border-color .3s, background .3s;
}
.faq__item[open]{ border-color:rgba(233,181,74,.4); background:rgba(255,255,255,.05); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:20px 56px 20px 24px; position:relative;
  font-family:var(--f-cond); font-weight:600; font-size:1.18rem; color:var(--cream);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-size:1.8rem; line-height:1; color:var(--gold); transition:transform .3s var(--ease); font-family:var(--f-body);
}
.faq__item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq__item p{ margin:0; padding:0 24px 22px; color:#d6ccb8; font-size:1.05rem; }
.faq__item p a{ color:var(--gold); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:9500; display:none; place-items:center;
  background:rgba(8,7,5,.94); padding:40px; opacity:0; transition:opacity .3s;
}
.lightbox.open{ display:grid; opacity:1; }
.lightbox__figure{ margin:0; max-width:92vw; max-height:88vh; text-align:center; }
.lightbox__figure img{ max-width:92vw; max-height:78vh; border-radius:8px; border:5px solid #fff; box-shadow:0 30px 60px rgba(0,0,0,.6); }
.lightbox__figure figcaption{ margin-top:14px; font-family:var(--f-cond); color:var(--cream); text-transform:uppercase; letter-spacing:.1em; font-size:.95rem; }
.lightbox__close{ position:absolute; top:20px; right:26px; background:none; border:0; color:#fff; font-size:2.6rem; line-height:1; cursor:pointer; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:0; color:#fff; font-size:2.4rem; width:56px; height:56px; border-radius:50%; cursor:pointer; transition:background .25s; }
.lightbox__nav:hover{ background:var(--red); }
.lightbox__prev{ left:20px; } .lightbox__next{ right:20px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .story__grid,.contact__grid{ grid-template-columns:1fr; }
  .services__grid{ grid-template-columns:1fr 1fr; }
  .story__media{ min-height:380px; margin-top:12px; }
  .reviews__media{ grid-template-columns:1fr; }
  .contact__map{ min-height:320px; }
}

@media (max-width:720px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(80vw,320px); flex-direction:column;
    align-items:flex-start; justify-content:center; gap:26px; padding:40px;
    background:rgba(14,12,9,.97); backdrop-filter:blur(12px);
    transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:-20px 0 50px rgba(0,0,0,.5);
  }
  .nav__links.open{ transform:translateX(0); }
  .nav__links > a:not(.btn){ font-size:1.3rem; }
  .nav__call{ margin-top:8px; }
  .services__grid,.gallery{ grid-template-columns:1fr; }
  .gallery__item--wide{ grid-column:span 1; }
  .stat::after{ display:none; }
  .footer__inner{ flex-direction:column; text-align:center; }
  .footer__base{ flex-direction:column; text-align:center; }
}

@media (max-width:480px){
  .trust__grid{ grid-template-columns:1fr 1fr; gap:30px 12px; }
  .hero{ padding-top:104px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__bg{ transform:scale(1.02); }
  .speedo__needle{ transform:rotate(58deg); }
}