/* ==========================================================================
   RED LINE AUTO SERVICE — Design System
   Palette: charcoal / steel / fog with signal-red + hazard-yellow accents
   Display: Oswald | Body: Work Sans | Utility/data: Inter
   Signature: inspection-sticker badges + work-order ticket cards
   ========================================================================== */

:root{
  --charcoal:#1B1E21;
  --charcoal-2:#24282C;
  --charcoal-soft:#33383D;
  --steel:#545C63;
  --steel-light:#9AA1A7;
  --fog:#F3F2EF;
  --fog-2:#EAE8E3;
  --white:#FFFFFF;
  --red:#D2232A;
  --red-dark:#9E181D;
  --hazard:#F2B705;

  --font-display:'Oswald', sans-serif;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'Inter', sans-serif;

  --container:1220px;
  --radius:4px;
  --shadow-1:0 1px 2px rgba(27,30,33,.06), 0 6px 20px rgba(27,30,33,.06);
  --shadow-2:0 12px 32px rgba(27,30,33,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--fog);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--charcoal);
}
p{margin:0 0 1em;color:var(--steel);}
.mono{font-family:var(--font-mono);}

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

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

.section{padding:88px 0;}
.section--tight{padding:64px 0;}
.section--dark{background:var(--charcoal);color:var(--white);}
.section--dark p{color:var(--steel-light);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--white);}
.section--panel{background:var(--fog-2);}

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  font-weight:600;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--red);
  display:inline-block;
}
.section--dark .eyebrow{color:var(--hazard);}
.section--dark .eyebrow::before{background:var(--hazard);}

.section-head{
  max-width:640px;
  margin-bottom:48px;
}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .eyebrow{justify-content:center;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.75rem);}
.section-head p{font-size:1.05rem;max-width:56ch;}
.section-head.center p{margin-left:auto;margin-right:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:15px 28px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--red);border-color:var(--red);color:var(--white);}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);}
.btn-dark{background:var(--charcoal);border-color:var(--charcoal);color:var(--white);}
.btn-dark:hover{background:var(--charcoal-soft);}
.btn-outline{background:transparent;border-color:var(--charcoal);color:var(--charcoal);}
.btn-outline:hover{background:var(--charcoal);color:var(--white);}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.55);color:var(--white);}
.btn-outline-light:hover{background:var(--white);color:var(--charcoal);border-color:var(--white);}
.btn-block{width:100%;}
.btn-sm{padding:11px 20px;font-size:.8rem;}

/* ---------- Hazard divider (used sparingly) ---------- */
.hazard-strip{
  height:10px;
  background:repeating-linear-gradient(135deg,var(--charcoal) 0 18px,var(--hazard) 18px 36px);
}

/* ---------- Header / Nav ---------- */
.topbar{
  background:var(--charcoal);
  color:var(--steel-light);
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.03em;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
  gap:16px;
  flex-wrap:wrap;
}
.topbar a{color:var(--steel-light);}
.topbar a:hover{color:var(--white);}
.topbar__item{display:inline-flex;align-items:center;gap:6px;}
.topbar__item + .topbar__item{margin-left:18px;}

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--fog-2);
  transition:box-shadow .25s var(--ease);
}
.site-header.is-scrolled{box-shadow:0 6px 18px rgba(0,0,0,.08);}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand__mark{
  height:52px;width:auto;flex:none;
  object-fit:contain;
}
.brand__word{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.02em;
  line-height:1.05;
  color:var(--charcoal);
  text-transform:uppercase;
}
.brand__word span{
  display:block;
  font-family:var(--font-mono);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.62rem;
  color:var(--red);
  margin-top:3px;
}

.nav__links{
  display:flex;
  align-items:center;
  gap:30px;
}
.nav__links a{
  font-family:var(--font-display);
  font-size:.88rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--charcoal-soft);
  padding:6px 2px;
  position:relative;
}
.nav__links a::after{
  content:"";
  position:absolute;left:0;right:100%;bottom:0;
  height:2px;background:var(--red);
  transition:right .22s var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after{right:0;}
.nav__links a[aria-current="page"]{color:var(--charcoal);}

.nav__cta{display:flex;align-items:center;gap:12px;}
.nav__call{
  display:flex;flex-direction:column;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--steel);
  text-align:right;
}
.nav__call strong{
  font-family:var(--font-display);
  font-size:1rem;
  color:var(--charcoal);
  letter-spacing:.02em;
}
.nav__toggle{
  display:none;
  background:none;border:0;cursor:pointer;
  width:40px;height:40px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.nav__toggle span{width:22px;height:2px;background:var(--charcoal);display:block;}

@media (max-width: 980px){
  .nav__call{display:none;}
  /* .site-header is position:sticky, which makes it a positioned containing
     block — so top:100% / height:calc(100vh - 100%) here always resolve
     against the header's *actual* rendered height, however tall it gets.
     This replaces the old hardcoded inset:66px, which broke as soon as the
     brand text wrapped onto more lines than expected. */
  .nav__links{
    position:absolute;
    top:100%;left:0;right:0;
    height:calc(100vh - 100%);
    background:var(--white);
    flex-direction:column;
    align-items:flex-start;
    padding:28px;
    gap:4px;
    transform:translateX(100%);
    transition:transform .3s var(--ease);
    overflow-y:auto;
    z-index:5;
  }
  .nav__links.is-open{transform:translateX(0);}
  .nav__links a{width:100%;padding:14px 4px;border-bottom:1px solid var(--fog-2);}
  .nav__toggle{display:flex;}
  .topbar__item.hide-mobile{display:none;}
  /* The sticky mobile call bar at the bottom already puts a call action in
     front of the user at all times, so repeating the number up in the
     topbar just eats space next to the address on narrow screens. */
  .topbar .topbar__phone{display:none;}
  .topbar .container{
    justify-content:center;
    flex-direction:column;
    gap:6px;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
  }
  .topbar .container > div{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
  }
  .topbar__item + .topbar__item{margin-left:0;}
}

@media (max-width: 760px){
  /* The header's own "Book Appointment" button is redundant with the sticky
     mobile call bar at the bottom of the screen, and on narrow widths it was
     the main thing squeezing the brand text into 3-5 wrapped lines and
     inflating the header's height unpredictably. Drop it here. */
  .nav__cta .btn{display:none;}
}

@media (max-width: 480px){
  .nav{padding:10px 0;}
  .brand__mark{height:44px;width:auto;}
  .brand__word{font-size:.86rem;}
  .brand__word span{font-size:.56rem;margin-top:2px;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  color:var(--white);
  overflow:hidden;
  min-height:640px;
  display:flex;
  align-items:flex-end;
}
.hero__bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
}
.hero__bg::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(15,17,19,.92) 0%, rgba(15,17,19,.72) 42%, rgba(15,17,19,.42) 75%, rgba(15,17,19,.28) 100%),
    linear-gradient(0deg, rgba(15,17,19,.55), rgba(15,17,19,.1) 45%);
}
.hero__content{
  position:relative;
  z-index:2;
  padding:120px 0 72px;
  max-width:680px;
}
.hero__kicker{
  position:relative;
  display:inline-flex;
  align-items:flex-start;
  gap:10px;
  font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hazard);
  margin-bottom:20px;
  line-height:1.5;
}
/* Dot is now a flex sibling instead of an absolutely-positioned pseudo-element,
   so it stays pinned to the first line's cap-height even when the kicker text
   wraps onto two lines on narrow screens — the old absolute top:.5em was
   measured against the *whole* (multi-line) box, which is what pushed it out
   of alignment on mobile. */
.hero__kicker::before{content:"";flex:none;width:8px;height:8px;margin-top:.5em;background:var(--red);border-radius:50%;}
.hero h1{
  font-size:clamp(2.6rem,5.6vw,4.4rem);
  margin-bottom:.32em;
  color:var(--white);
}
.hero h1 em{
  font-style:normal;
  color:var(--red);
}
.hero__lede{
  color:rgba(255,255,255,.82);
  font-size:1.12rem;
  max-width:52ch;
  margin-bottom:34px;
}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px;}

.hero__badge{
  position:absolute;
  right:6%;
  top:120px;
  z-index:3;
}

.hero__stats{
  position:relative;
  z-index:2;
  background:rgba(27,30,33,.72);
  border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
}
.hero__stats .container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding-top:22px;padding-bottom:22px;
}
.hero__stat{border-left:2px solid var(--red);padding-left:14px;}
.hero__stat b{
  display:block;font-family:var(--font-display);font-size:1.5rem;
}
.hero__stat span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--steel-light);text-transform:uppercase;}

@media (max-width: 760px){
  .hero{min-height:auto;}
  .hero__content{padding:116px 0 44px;}
  .hero__badge{display:none;}
  .hero__stats .container{grid-template-columns:repeat(2,1fr);row-gap:18px;}
  .hero__kicker{
    font-size:.7rem;
    letter-spacing:.07em;
    line-height:1.5;
    max-width:280px;
    margin-bottom:28px;
  }
  /* The sticky mobile-call bar at the bottom of the screen already puts a
     call action in front of the user at all times, so this button was a
     third copy of the same phone number stacked above the fold. */
  .hero__ctas .btn-outline-light{display:none;}
}

/* ---------- Inspection-sticker badge (signature element) ---------- */
.sticker{
  --sticker-ring:var(--hazard);
  width:150px;height:150px;
  border-radius:50%;
  background:var(--white);
  color:var(--charcoal);
  display:flex;
  align-items:center;justify-content:center;
  text-align:center;
  position:relative;
  box-shadow:var(--shadow-2);
  transform:rotate(-8deg);
  border:3px solid var(--charcoal);
  flex:none;
}
.sticker::before{
  content:"";
  position:absolute;inset:9px;
  border-radius:50%;
  border:2px dashed var(--sticker-ring);
}
.sticker__inner{
  font-family:var(--font-display);
  line-height:1.05;
  padding:0 14px;
}
.sticker__top{
  display:block;
  font-size:.6rem;
  letter-spacing:.16em;
  font-family:var(--font-mono);
  color:var(--red);
  margin-bottom:4px;
}
.sticker__main{display:block;font-size:1.15rem;font-weight:700;text-transform:uppercase;}
.sticker__sub{display:block;font-size:.58rem;font-family:var(--font-mono);letter-spacing:.1em;color:var(--steel);margin-top:4px;}
.sticker--sm{width:96px;height:96px;}
.sticker--sm .sticker__main{font-size:.78rem;}
.sticker--sm .sticker__top{font-size:.5rem;}
.sticker--sm .sticker__sub{font-size:.46rem;}
.sticker--red{background:var(--red);color:var(--white);border-color:var(--charcoal);}
.sticker--red .sticker__top{color:var(--hazard);}
.sticker--red .sticker__sub{color:rgba(255,255,255,.75);}

/* Stamp-in entrance for guarantee/warranty badges — plays once the badge scrolls into view */
.sticker{opacity:0;}
.sticker.is-stamped{
  animation:stampIn .9s cubic-bezier(.19,1.64,.42,1) both;
}
@keyframes stampIn{
  0%{opacity:0;transform:rotate(-42deg) scale(2.6);}
  50%{opacity:1;transform:rotate(-2deg) scale(.94);}
  72%{transform:rotate(-11deg) scale(1.05);}
  100%{opacity:1;transform:rotate(-8deg) scale(1);}
}
.sticker.is-stamped::before{
  animation:stampRing .5s ease-out .45s both;
}
@keyframes stampRing{
  0%{opacity:0;transform:scale(.7);}
  100%{opacity:1;transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .sticker{opacity:1;transform:rotate(-8deg);animation:none;}
  .sticker.is-stamped{animation:none;}
}

/* ---------- Trust strip ---------- */
.trust-strip{
  background:var(--white);
  border-bottom:1px solid var(--fog-2);
}
.trust-strip .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
  padding-top:22px;padding-bottom:22px;
}
.trust-strip__item{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--steel);
  letter-spacing:.02em;
}
.trust-strip__item strong{color:var(--charcoal);font-family:var(--font-display);font-size:.95rem;letter-spacing:.02em;}
.trust-strip__icon{width:20px;height:20px;flex:none;color:var(--red);}

/* ---------- Card grids ---------- */
.grid{display:grid;gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.service-card{
  background:var(--white);
  border:1px solid var(--fog-2);
  border-radius:var(--radius);
  padding:30px 26px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  position:relative;
  overflow:hidden;
}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-1);border-color:var(--charcoal);}
.service-card__icon{
  width:52px;height:52px;
  color:var(--red);
  margin-bottom:18px;
}
.service-card__icon img{width:100%;height:100%;object-fit:contain;display:block;}
.service-card h3{font-size:1.12rem;margin-bottom:.4em;}
.service-card p{font-size:.94rem;margin-bottom:0;}
.service-card__tag{
  position:absolute;top:18px;right:18px;
  font-family:var(--font-mono);
  font-size:.65rem;
  color:var(--steel-light);
  letter-spacing:.06em;
}
.service-card__link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.03em;
  color:var(--red);font-weight:600;
}

/* ---------- Why choose us ---------- */
.reason{
  display:flex;gap:18px;
  padding:26px 0;
  border-bottom:1px solid var(--fog-2);
}
.reason:last-child{border-bottom:0;}
.reason__num{
  font-family:var(--font-mono);
  color:var(--steel-light);
  font-size:.85rem;
  padding-top:3px;
  flex:none;
  width:34px;
}
.reason h3{font-size:1.1rem;margin-bottom:.3em;}
.reason p{margin-bottom:0;font-size:.95rem;}

.feature-tile{
  background:var(--charcoal);
  color:var(--white);
  border-radius:var(--radius);
  padding:32px 28px;
}
.feature-tile p{color:var(--steel-light);}
.feature-tile__icon{width:40px;height:40px;color:var(--hazard);margin-bottom:16px;}

/* ---------- Work-order testimonial card (signature element) ---------- */
.ticket{
  background:var(--white);
  border:1px solid var(--fog-2);
  border-radius:2px;
  position:relative;
  padding:28px 26px 24px;
  box-shadow:var(--shadow-1);
}
.ticket::before,
.ticket::after{
  content:"";
  position:absolute;
  width:20px;height:20px;
  background:var(--fog);
  border-radius:50%;
  top:50%;
  transform:translateY(-50%);
}
.ticket::before{left:-11px;}
.ticket::after{right:-11px;}
.section--panel .ticket::before,
.section--panel .ticket::after{background:var(--fog-2);}
.ticket__head{
  display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:1px dashed var(--fog-2);
  padding-bottom:14px;margin-bottom:16px;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.05em;
  color:var(--steel-light);
  text-transform:uppercase;
}
.ticket__status{
  color:var(--red);
  font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
  opacity:0;
  transform:scale(2.2) rotate(-18deg);
}
.ticket__status::before{content:"✓";display:inline-block;width:15px;height:15px;background:var(--red);color:#fff;border-radius:50%;font-size:.6rem;line-height:15px;text-align:center;}
.reveal.is-visible .ticket__status{
  animation:stampPunch .45s cubic-bezier(.19,1.64,.42,1) .35s both;
}
@keyframes stampPunch{
  0%{opacity:0;transform:scale(2.4) rotate(-22deg);}
  60%{opacity:1;transform:scale(.9) rotate(4deg);}
  100%{opacity:1;transform:scale(1) rotate(0deg);}
}
@media (prefers-reduced-motion: reduce){
  .ticket__status{opacity:1;transform:none;animation:none;}
}
.ticket__stars{color:var(--hazard);letter-spacing:2px;margin-bottom:10px;font-size:.95rem;}
.ticket blockquote{
  margin:0 0 18px;
  font-size:1rem;
  color:var(--charcoal);
  font-style:normal;
}
.ticket__foot{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);
  font-size:.76rem;
  color:var(--steel);
  border-top:1px dashed var(--fog-2);
  padding-top:12px;
}
.ticket__foot b{color:var(--charcoal);font-family:var(--font-body);font-weight:600;}

/* ---------- About / photo band ---------- */
.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px;}}

/* Contact page uses a slightly different column ratio + top alignment.
   Appointment page uses its own ratio too. Both kept as real classes
   (not inline styles) so they can't override the mobile single-column
   breakpoint above. */
@media (min-width:901px){
  .split--contact{grid-template-columns:1.1fr .9fr;align-items:start;}
  .split--appointment{grid-template-columns:1.2fr .8fr;align-items:start;}
}
.split.reverse .split__media{order:2;}
.split__media{position:relative;}
.split__media img{
  width:100%;height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius);
}
.split__media .sticker{position:absolute;bottom:-24px;left:-24px;}
@media (max-width:640px){.split__media .sticker{display:none;}}

.stat-row{display:flex;gap:34px;flex-wrap:wrap;margin-top:26px;}
.stat-row div b{
  display:block;font-family:var(--font-display);font-size:2rem;color:var(--red);
}
.stat-row div span{font-family:var(--font-mono);font-size:.72rem;color:var(--steel);text-transform:uppercase;letter-spacing:.05em;}

/* ---------- Team ---------- */
.team-card{text-align:left;}
.team-card__photo{
  width:100%;aspect-ratio:1/1;
  border-radius:var(--radius);
  object-fit:cover;
  margin-bottom:14px;
  filter:grayscale(.15);
}
.team-card h3{font-size:1.02rem;margin-bottom:.15em;}
.team-card span{font-family:var(--font-mono);font-size:.74rem;color:var(--red);text-transform:uppercase;letter-spacing:.05em;}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--red);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(135deg, rgba(0,0,0,.08) 0 26px, transparent 26px 52px);
  pointer-events:none;
}
.cta-band .container{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding:56px 28px;
}
.cta-band h2{color:var(--white);font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.2em;}
.cta-band p{color:rgba(255,255,255,.86);margin-bottom:0;}
.cta-band__actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Forms ---------- */
.form-card{
  background:var(--white);
  border:1px solid var(--fog-2);
  border-radius:var(--radius);
  padding:34px;
  box-shadow:var(--shadow-1);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:640px){.form-row{grid-template-columns:1fr;}}

@media (max-width:600px){
  .section{padding:56px 0;}
  .section--tight{padding:44px 0;}
  .form-card{padding:24px 20px;}
  .info-card{padding:24px 20px;}
}
@media (max-width:420px){
  .container{padding:0 18px;}
}
.field{margin-bottom:20px;}
.field label{
  display:block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:7px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 14px;
  border:1.5px solid var(--fog-2);
  background:var(--fog);
  border-radius:3px;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--charcoal);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--red);
  background:var(--white);
}
.field textarea{resize:vertical;min-height:110px;}
.field--check{display:flex;align-items:flex-start;gap:10px;}
.field--check input{width:auto;margin-top:3px;}
.field--check label{margin:0;font-family:var(--font-body);font-size:.85rem;text-transform:none;letter-spacing:0;color:var(--steel);}
.form-note{
  font-family:var(--font-mono);
  font-size:.76rem;
  color:var(--steel-light);
  margin-top:14px;
}
.form-success{
  display:none;
  background:var(--charcoal);
  color:var(--white);
  padding:18px 20px;
  border-radius:3px;
  font-family:var(--font-mono);
  font-size:.86rem;
  margin-top:18px;
  align-items:center;
  gap:10px;
}
.form-success.is-visible{
  display:flex;
  animation:successPop .4s cubic-bezier(.19,1.64,.42,1) both;
}
@keyframes successPop{
  0%{opacity:0;transform:scale(.9) translateY(6px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .form-success.is-visible{animation:none;}
}

/* ---------- Info card (contact) ---------- */
.info-card{
  background:var(--charcoal);
  color:var(--white);
  border-radius:var(--radius);
  padding:32px;
}
.info-card h3{color:var(--white);font-size:1.1rem;}
.info-card p{color:var(--steel-light);}
.info-list{margin-top:18px;}
.info-list li{
  display:flex;gap:14px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.92rem;
}
.info-list li:first-child{border-top:0;}
.info-list svg{width:20px;height:20px;flex:none;color:var(--hazard);margin-top:2px;}
.hours-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.9rem;}
.hours-table td{padding:7px 0;border-top:1px solid rgba(255,255,255,.1);}
.hours-table td:last-child{text-align:right;font-family:var(--font-mono);color:var(--white);}
.hours-table tr:first-child td{border-top:0;}

.map-frame{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--fog-2);
  height:100%;
  min-height:340px;
}
.map-frame iframe{width:100%;height:100%;min-height:340px;border:0;display:block;}

/* ---------- FAQ ---------- */
.faq-item{
  border-bottom:1px solid var(--fog-2);
}
.faq-item:first-child{border-top:1px solid var(--fog-2);}
.faq-q{
  width:100%;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:none;border:0;
  text-align:left;
  padding:22px 4px;
  cursor:pointer;
  font-family:var(--font-display);
  font-size:1.02rem;
  text-transform:none;
  letter-spacing:0;
  color:var(--charcoal);
}
.faq-q__plus{
  flex:none;
  width:26px;height:26px;
  border:1.5px solid var(--charcoal);
  border-radius:50%;
  position:relative;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.faq-q__plus::before,
.faq-q__plus::after{
  content:"";
  position:absolute;background:var(--charcoal);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.faq-q__plus::before{width:10px;height:1.5px;}
.faq-q__plus::after{width:1.5px;height:10px;transition:opacity .2s var(--ease);}
.faq-item.is-open .faq-q__plus{background:var(--red);border-color:var(--red);}
.faq-item.is-open .faq-q__plus::before,
.faq-item.is-open .faq-q__plus::after{background:var(--white);}
.faq-item.is-open .faq-q__plus::after{opacity:0;}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s var(--ease);
}
.faq-a__inner{padding:0 4px 24px;max-width:70ch;}
.faq-a__inner p{margin-bottom:0;}

/* ---------- Review summary ---------- */
.review-summary{
  display:flex;align-items:center;gap:20px;
  flex-wrap:wrap;
}
.review-summary__score{
  font-family:var(--font-display);
  font-size:3rem;
  color:var(--charcoal);
  line-height:1;
}
.review-summary__stars{color:var(--hazard);font-size:1.2rem;letter-spacing:3px;}
.review-summary__meta{font-family:var(--font-mono);font-size:.78rem;color:var(--steel);}
.link-arrow{width:14px;height:14px;display:inline-block;vertical-align:-2px;flex:none;}

/* ---------- Live Google reviews widget placeholder ---------- */
.google-reviews-widget-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;
  max-width:520px;margin:0 auto;
  padding:40px 32px;
  border:1.5px dashed var(--fog-2);
  border-radius:12px;
  color:var(--steel);
}
.google-reviews-widget-placeholder svg{color:var(--red);}
.google-reviews-widget-placeholder p{margin:0;font-size:.95rem;line-height:1.5;}

.filter-row{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-bottom:36px;
}
.filter-chip{
  padding:9px 18px;
  border:1.5px solid var(--fog-2);
  border-radius:20px;
  font-family:var(--font-mono);
  font-size:.78rem;
  background:var(--white);
  cursor:pointer;
  color:var(--steel);
  transition:all .18s var(--ease);
}
.filter-chip.is-active,
.filter-chip:hover{border-color:var(--charcoal);color:var(--charcoal);}
.filter-chip.is-active{background:var(--charcoal);color:var(--white);border-color:var(--charcoal);}

/* ---------- Timeline (about) ---------- */
.timeline{position:relative;padding-left:34px;}
.timeline::before{
  content:"";
  position:absolute;left:6px;top:6px;bottom:6px;
  width:2px;background:var(--fog-2);
}
.timeline__item{position:relative;padding-bottom:36px;}
.timeline__item:last-child{padding-bottom:0;}
.timeline__item::before{
  content:"";
  position:absolute;left:-34px;top:4px;
  width:14px;height:14px;border-radius:50%;
  background:var(--red);
  border:3px solid var(--fog);
  box-shadow:0 0 0 2px var(--red);
}
.timeline__year{font-family:var(--font-mono);color:var(--red);font-size:.82rem;letter-spacing:.05em;display:block;margin-bottom:4px;}
.timeline__item h3{font-size:1.08rem;margin-bottom:.3em;}

/* ---------- Breadcrumb / page hero (inner pages) ---------- */
.page-hero{
  background:var(--charcoal);
  color:var(--white);
  padding:72px 0 54px;
  position:relative;
  overflow:hidden;
}
.page-hero__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent);
}
.page-hero .container{position:relative;}
.breadcrumb{
  font-family:var(--font-mono);
  font-size:.76rem;
  color:var(--steel-light);
  margin-bottom:18px;
  letter-spacing:.03em;
}
.breadcrumb a{color:var(--steel-light);}
.breadcrumb a:hover{color:var(--white);}
.breadcrumb span{color:var(--hazard);}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.1rem);margin-bottom:.3em;color:var(--white);}
.page-hero p{color:var(--steel-light);max-width:60ch;font-size:1.05rem;margin-bottom:0;}

/* ---------- Logo strip ---------- */
.logo-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:28px;
  opacity:.75;
}
.logo-strip span{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--steel);
  letter-spacing:.05em;
  border:1px solid var(--fog-2);
  padding:9px 16px;
  border-radius:20px;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--charcoal);
  color:var(--steel-light);
  padding-top:64px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{
  color:var(--white);
  font-size:.86rem;
  letter-spacing:.08em;
  margin-bottom:18px;
}
.footer-grid ul li{margin-bottom:11px;font-size:.9rem;}
.footer-grid ul a:hover{color:var(--white);}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.footer-brand .brand__word{color:var(--white);}
.footer p{color:var(--steel-light);font-size:.9rem;max-width:36ch;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 0;
  font-family:var(--font-mono);
  font-size:.74rem;
  color:var(--steel-light);
  flex-wrap:wrap;
  gap:10px;
}
.footer-bottom a:hover{color:var(--white);}
.social-row{display:flex;gap:10px;margin-top:16px;}
.social-row a{
  width:36px;height:36px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.social-row a:hover{border-color:var(--white);}
.social-row svg{width:16px;height:16px;}

/* ---------- Sticky call button (mobile) ---------- */
.mobile-call{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:70;
  background:var(--red);
  color:var(--white);
  display:none;
  align-items:center;justify-content:center;
  gap:8px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  font-family:var(--font-display);
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.84rem;
  border-top:3px solid var(--hazard);
  box-shadow:0 -6px 20px rgba(0,0,0,.2);
}
/* Without an explicit cap, an inline <svg> here scales to its own viewBox
   instead of the surrounding text, which is what was blowing the bar up —
   same root cause already fixed for .topbar__item svg above. */
.mobile-call svg{width:16px!important;height:16px!important;min-width:16px;min-height:16px;flex:none;}
@media (max-width:760px){
  .mobile-call{display:flex;}
  body{padding-bottom:calc(48px + env(safe-area-inset-bottom));}
}

/* ---------- Utility ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible{opacity:1;transform:none;}

/* Progressive enhancement: if JS never runs, don't hide content behind it */
.no-js .reveal{opacity:1;transform:none;}
.no-js .sticker{opacity:1;transform:rotate(-8deg);}
.no-js .ticket__status{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none;opacity:1;transform:none;}
}

.badge-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

.icon-list li{
  display:flex;gap:12px;
  padding:10px 0;
  font-size:.95rem;
}
.icon-list svg{width:18px;height:18px;color:var(--red);flex:none;margin-top:2px;}

.topbar__item svg{width:18px!important;height:18px!important;min-width:18px;min-height:18px;display:inline-block;vertical-align:middle;flex:none;}
.topbar__item,.topbar__item a{display:inline-flex;align-items:center;gap:8px;}