/* =========================================================================
   The Professionals Mobile Detailing — Design System
   Dark-first. Red is an accent only (<=10% of any view, never large fills).
   Display: Anton (uppercase, condensed). Body/UI: Montserrat.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root{
  --red:#C41E23;
  --red-deep:#8E1B1B;
  --black:#0A0A0A;
  --charcoal:#161616;
  --graphite:#222;
  --silver:#A3A3A3;
  --silver-lt:#D9D9D9;
  --off-white:#F4F4F5;
  --white:#fff;
  --radius:6px;
  --maxw:1200px;
  --gap:clamp(1rem,3vw,2rem);
}

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
img,svg,video{display:block;max-width:100%;height:auto}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit}

/* -------------------------------------------------------------------------
   3. Fonts + base typography
   ------------------------------------------------------------------------- */
body{
  background:var(--black);
  color:var(--off-white);
  font:400 1rem/1.6 Montserrat,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:Anton,Impact,sans-serif;
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:.01em;
  font-weight:400;
}
h1{font-size:clamp(2.5rem,6vw,4.5rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:clamp(1.4rem,2.5vw,1.9rem)}
p{max-width:65ch}
.eyebrow{
  display:inline-block;
  font:600 .8rem/1 Montserrat;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red);
}
a{color:inherit}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.maxw{max-width:var(--maxw);margin-inline:auto}
.section{padding-block:clamp(3.5rem,8vw,8rem)}

/* Minimal grid utilities — used by cards/features/gallery grids sitewide */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media (min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font:600 .95rem Montserrat;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:.9rem 1.6rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:.18s;
}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn--outline{border-color:var(--silver);color:var(--white);background:transparent}
.btn--outline:hover{background:var(--charcoal)}
.btn--sm{padding:.55rem 1.1rem;font-size:.8rem}
.btn__icon-g{width:16px;height:16px;flex:none}

/* -------------------------------------------------------------------------
   6. Cards
   ------------------------------------------------------------------------- */
.card{
  background:var(--charcoal);
  border:1px solid var(--graphite);
  border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,2rem);
}
.card--featured{border-top:3px solid var(--red);box-shadow:0 0 40px -18px var(--red)}

/* -------------------------------------------------------------------------
   7. Dividers
   ------------------------------------------------------------------------- */
.divider--angled{clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%)}

/* -------------------------------------------------------------------------
   8. Trust bar — sitewide credential strip
   ------------------------------------------------------------------------- */
.trust-bar{
  background:var(--charcoal);
  border-block:1px solid var(--graphite);
}
.trust-bar__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(.75rem,2vw,2rem);
  padding-block:.9rem;
  text-align:center;
}
.trust-bar__item{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font:600 .75rem/1 Montserrat;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--silver);
}

/* -------------------------------------------------------------------------
   8b. Google review strip — slim CTA under the trust bar (home only)
   ------------------------------------------------------------------------- */
.google-review-strip{
  background:var(--black);
  border-bottom:1px solid var(--graphite);
}
.google-review-strip__inner{
  padding-block:1.1rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem;
  text-align:center;
}
.google-review-strip__text{
  margin:0;
  font-size:.9rem;
  color:var(--silver-lt);
}

/* -------------------------------------------------------------------------
   9. CTA band — full-width call-to-action strip
   ------------------------------------------------------------------------- */
.cta-band{
  background:var(--charcoal);
  border-top:3px solid var(--red);
  text-align:center;
}
.cta-band__inner{
  padding-block:clamp(2.5rem,6vw,4rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}
.cta-band__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
}

/* -------------------------------------------------------------------------
   10. Header / navigation
   ------------------------------------------------------------------------- */
.site-header{
  background:rgba(10,10,10,.92);
  border-bottom:1px solid var(--graphite);
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:.65rem;
}
.site-header__brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--white);
  flex:none;
}
.site-header__logo{width:44px;height:44px;object-fit:contain}
.site-header__name{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  font:700 .85rem/1.15 Montserrat;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.site-header__name-sub{
  font:500 .68rem/1.2 Montserrat;
  letter-spacing:.08em;
  color:var(--silver);
  text-transform:uppercase;
}
.site-header__call{
  color:var(--off-white);
  text-decoration:none;
  font:600 .9rem Montserrat;
  letter-spacing:.02em;
  white-space:nowrap;
}
.site-header__call:hover{color:var(--red)}

.site-nav{
  display:flex;
  align-items:center;
  gap:clamp(.75rem,1.4vw,1.5rem);
}
.site-nav__list{
  display:flex;
  align-items:center;
  gap:clamp(.5rem,1vw,1rem);
}
.site-nav__list a{
  text-decoration:none;
  font:600 .78rem Montserrat;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--off-white);
  white-space:nowrap;
}
.site-nav__list a:hover{color:var(--red)}
.site-nav__actions{
  display:flex;
  align-items:center;
  gap:.85rem;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:42px;
  height:42px;
  background:transparent;
  border:1px solid var(--graphite);
  border-radius:var(--radius);
  flex:none;
}
.nav-toggle__bar{
  display:block;
  width:20px;
  height:2px;
  background:var(--off-white);
  border-radius:2px;
}

@media (max-width:900px){
  .nav-toggle{display:flex}
  .site-nav{
    display:none;
    position:absolute;
    inset-inline:0;
    top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--charcoal);
    border-bottom:1px solid var(--graphite);
    padding:1rem clamp(1rem,4vw,2rem) 1.5rem;
  }
  .site-nav.is-open{display:flex}
  .site-header__inner{position:relative}
  .site-nav__list{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
  .site-nav__list a{
    display:block;
    padding-block:.7rem;
    width:100%;
    border-bottom:1px solid var(--graphite);
  }
  .site-nav__actions{
    flex-direction:column;
    align-items:stretch;
    gap:.75rem;
    margin-top:1rem;
  }
  .site-header__call{text-align:center}
  .site-nav__actions .btn{justify-content:center}
}

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.site-footer__inner{
  display:grid;
  gap:2.5rem;
  padding-block:clamp(2.5rem,6vw,4rem) 2rem;
}
@media (min-width:700px){
  .site-footer__inner{grid-template-columns:1.3fr 1fr 1fr}
}
.site-footer__brand{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  color:var(--off-white);
  text-decoration:none;
  font:700 .85rem/1.2 Montserrat;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:.75rem;
}
.site-footer__logo{width:36px;height:36px;object-fit:contain}
.site-footer__tagline{font-size:.85rem;color:var(--silver);max-width:30ch}
.site-footer__heading{
  font:600 .8rem Montserrat;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--off-white);
  margin-bottom:.9rem;
}
.site-footer__col ul{display:flex;flex-direction:column;gap:.55rem}
.site-footer__col a{color:var(--silver);text-decoration:none;font-size:.9rem}
.site-footer__col a:hover{color:var(--red)}
.site-footer__social{display:flex;align-items:center;gap:.9rem;margin-top:1rem}
.site-footer__social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  transition:transform .18s,opacity .18s;
}
.site-footer__social-link svg{width:100%;height:100%}
a.site-footer__social-link:hover,
a.site-footer__social-link:focus-visible{transform:scale(1.1)}
.site-footer__social-link.needs-confirm{
  border-bottom:none;
  cursor:help;
  opacity:.85;
}
.needs-confirm{
  border-bottom:1px dashed var(--silver);
  cursor:help;
}
.site-footer__bottom{
  border-top:1px solid var(--graphite);
  padding-block:1.25rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.85rem;
  text-align:center;
}
.site-footer__copyright{font-size:.8rem;color:var(--silver)}
.site-footer__credit{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--silver);
  text-decoration:none;
  font-size:.75rem;
  transition:.2s;
}
.site-footer__credit:hover{color:var(--white)}
.site-footer__credit img{height:20px;width:auto}

/* -------------------------------------------------------------------------
   11b. Mobile sticky CTA bar (mobile only, <=900px)
   ------------------------------------------------------------------------- */
.mobile-cta-bar{
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:900;
  min-height:64px;
  background:var(--charcoal);
  border-top:1px solid var(--graphite);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-cta-bar__item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  min-height:44px;
  color:var(--off-white);
  text-decoration:none;
  border-right:1px solid var(--graphite);
  transition:background .15s;
}
.mobile-cta-bar__item:last-child{border-right:none}
.mobile-cta-bar__item:active{background:var(--graphite)}
.mobile-cta-bar__item--primary{background:var(--red);color:#fff}
.mobile-cta-bar__item--primary:active{background:var(--red-deep)}
.mobile-cta-bar__icon{width:20px;height:20px;flex:none}
.mobile-cta-bar__label{
  font:600 .68rem/1 Montserrat;
  text-transform:uppercase;
  letter-spacing:.03em;
}
@media (max-width:900px){
  .mobile-cta-bar{display:flex}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* Let the open mobile nav menu take full priority over the CTA bar */
  body:has(.site-nav.is-open) .mobile-cta-bar{display:none}
}
@media (min-width:901px){
  .mobile-cta-bar{display:none}
}

/* -------------------------------------------------------------------------
   12. Trust bar icon
   ------------------------------------------------------------------------- */
.trust-bar__icon{width:14px;height:14px;color:var(--silver);flex:none}

/* -------------------------------------------------------------------------
   13. Scroll-reveal hook
   ------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.is-in{opacity:1;transform:none;transition:.6s cubic-bezier(.2,.7,.2,1)}

/* -------------------------------------------------------------------------
   14. Focus states
   ------------------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* =========================================================================
   Home page
   ========================================================================= */

/* -------------------------------------------------------------------------
   15. Hero
   ------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:clamp(560px,92vh,920px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--black);
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.5) 55%, rgba(10,10,10,.96) 100%),
    linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 40%, rgba(10,10,10,.05) 74%);
}
.hero__content{position:relative;z-index:2;padding-block:clamp(2.5rem,8vw,5rem);max-width:720px}
.hero__eyebrow{margin-bottom:1rem}
.hero__content h1{color:var(--white);margin-bottom:1.25rem}
.hero__sub{color:var(--off-white);font-size:clamp(1rem,1.6vw,1.2rem);max-width:52ch;margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem}

/* -------------------------------------------------------------------------
   16. Section headers / surfaces
   ------------------------------------------------------------------------- */
.section-head{max-width:640px;margin-inline:auto;margin-bottom:clamp(2rem,5vw,3.5rem);text-align:center}
.section-head .eyebrow{margin-bottom:.75rem}
.section-head p{margin-inline:auto;color:var(--silver)}
.section--surface{background:var(--charcoal)}

/* -------------------------------------------------------------------------
   17. Service cards
   ------------------------------------------------------------------------- */
.service-card{display:flex;flex-direction:column;padding:0;overflow:hidden;transition:transform .25s,border-color .25s;text-decoration:none;color:inherit}
.service-card:hover{transform:translateY(-6px);border-color:var(--silver)}
.service-card__media{aspect-ratio:3/2;overflow:hidden;background:var(--graphite);flex:none}
.service-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.service-card:hover .service-card__media img{transform:scale(1.05)}
.service-card__body{display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.1rem,2.6vw,1.75rem);flex:1}
.service-card__icon{width:26px;height:26px;color:var(--silver);flex:none;transition:color .2s}
.service-card:hover .service-card__icon{color:var(--red)}
.service-card h3{font-size:1.15rem;letter-spacing:.01em}
.service-card p{font-size:.9rem;color:var(--silver);margin-bottom:.25rem}
.service-card__link{margin-top:auto;font:600 .78rem Montserrat;text-transform:uppercase;letter-spacing:.06em;color:var(--off-white);transition:color .2s}
.service-card:hover .service-card__link{color:var(--red)}

/* -------------------------------------------------------------------------
   18. Package cards
   ------------------------------------------------------------------------- */
.package-card{position:relative;display:flex;flex-direction:column}
.package-card__badge{
  position:absolute;
  top:-.85rem;
  left:50%;
  transform:translateX(-50%);
  background:var(--red);
  color:#fff;
  font:600 .68rem Montserrat;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.35rem .9rem;
  border-radius:var(--radius);
  white-space:nowrap;
}
.package-card h3{margin-bottom:.4rem}
.package-card__tagline{color:var(--silver);font-size:.88rem;margin-bottom:1.25rem}
.package-card__list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.5rem}
.package-card__list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--off-white)}
.package-card__list svg{width:16px;height:16px;flex:none;margin-top:.15rem;color:var(--red)}
.package-card .btn{margin-top:auto;align-self:flex-start}

/* -------------------------------------------------------------------------
   19. Before / after showcase
   ------------------------------------------------------------------------- */
.ba-pair{overflow:hidden}
.ba-pair__images{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--graphite);border-radius:var(--radius);overflow:hidden;margin-bottom:1rem}
.ba-pair__img{position:relative}
.ba-pair__img img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.ba-pair__tag{
  position:absolute;
  bottom:.6rem;
  left:.6rem;
  font:700 .68rem Montserrat;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.3rem .6rem;
  border-radius:var(--radius);
  background:rgba(10,10,10,.75);
  color:var(--white);
}
.ba-pair__img--after .ba-pair__tag{background:var(--red)}
.ba-pair__label{font:600 .95rem Montserrat;color:var(--off-white)}

/* -------------------------------------------------------------------------
   20. Reviews
   ------------------------------------------------------------------------- */
.review-card{display:flex;flex-direction:column;gap:1rem}
.review-card p{color:var(--off-white);font-size:.95rem;line-height:1.65}
.review-card__name{font:600 .8rem Montserrat;letter-spacing:.04em;text-transform:uppercase;color:var(--silver);margin-top:auto;font-style:normal}

/* -------------------------------------------------------------------------
   21. Service-area strip
   ------------------------------------------------------------------------- */
.area-strip{text-align:center}
.area-strip__list{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-block:2rem 2.5rem}
.area-chip{border:1px solid var(--graphite);border-radius:var(--radius);padding:.55rem 1.1rem;font:600 .8rem Montserrat;letter-spacing:.03em;color:var(--off-white);background:var(--black)}
.area-strip__cta{text-align:center}

/* =========================================================================
   Services page
   ========================================================================= */

/* -------------------------------------------------------------------------
   22. Page intro band
   ------------------------------------------------------------------------- */
.page-intro{
  padding-block:clamp(3rem,10vw,6rem) clamp(2rem,6vw,3.5rem);
  text-align:center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(196,30,35,.14), transparent 65%),
    var(--black);
}
.page-intro__inner{max-width:720px;margin-inline:auto}
.page-intro h1{color:var(--white);margin-block:1rem 1.25rem}
.page-intro__sub{color:var(--silver);margin-inline:auto;font-size:clamp(1rem,1.6vw,1.15rem)}

/* -------------------------------------------------------------------------
   23. Service blocks — alternating image + copy
   ------------------------------------------------------------------------- */
.service-block{scroll-margin-top:110px}
.service-block__inner{
  display:grid;
  gap:2.5rem;
  align-items:center;
}
@media (min-width:900px){
  .service-block__inner{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem)}
}
.service-block__media{
  order:1;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--graphite);
}
.service-block__media picture,
.service-block__media img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.service-block__content{order:2}
.service-block__content .eyebrow{margin-bottom:.6rem}
.service-block__content h2{color:var(--white);margin-bottom:1rem}
.service-block__content > p{color:var(--off-white);margin-bottom:1.5rem}
.service-block__points{display:flex;flex-direction:column;gap:.65rem;margin-bottom:2rem}
.service-block__points li{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;color:var(--off-white)}
.service-block__points svg{width:17px;height:17px;flex:none;margin-top:.2rem;color:var(--red)}
.service-block__actions{display:flex;flex-wrap:wrap;gap:1rem}
@media (min-width:900px){
  .service-block--reverse .service-block__media{order:2}
  .service-block--reverse .service-block__content{order:1}
}

/* =========================================================================
   Packages page
   ========================================================================= */

/* -------------------------------------------------------------------------
   24. Package card actions + add-ons note
   ------------------------------------------------------------------------- */
.package-card__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:auto}
.package-card__actions .btn{margin-top:0;align-self:auto}
.package-addons{
  max-width:640px;
  margin:clamp(2.5rem,6vw,3.5rem) auto 0;
  padding-top:1.75rem;
  border-top:1px solid var(--graphite);
  text-align:center;
  font-size:.9rem;
  color:var(--silver);
}

/* =========================================================================
   Gallery page
   ========================================================================= */

/* -------------------------------------------------------------------------
   25. Filter bar
   ------------------------------------------------------------------------- */
.gallery-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin-bottom:2.5rem;
}
.filter-btn{
  background:transparent;
  border:1px solid var(--graphite);
  color:var(--off-white);
  border-radius:999px;
  padding:.55rem 1.15rem;
  font:600 .78rem Montserrat;
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
  transition:.18s;
}
.filter-btn:hover{border-color:var(--silver)}
.filter-btn.is-active{background:var(--red);border-color:var(--red);color:#fff}

/* -------------------------------------------------------------------------
   26. Gallery status / fallback messaging
   ------------------------------------------------------------------------- */
.gallery-status,
.gallery-fallback{
  text-align:center;
  color:var(--silver);
  margin-bottom:2rem;
}
.gallery-fallback a{color:var(--red);text-decoration:underline}

/* -------------------------------------------------------------------------
   27. Gallery grid
   ------------------------------------------------------------------------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.6rem;
}
@media (min-width:640px){
  .gallery-grid{grid-template-columns:repeat(3,1fr);gap:.85rem}
}
@media (min-width:1000px){
  .gallery-grid{grid-template-columns:repeat(4,1fr)}
}
.gallery-grid__item{list-style:none}
.gallery-grid__btn{
  display:block;
  width:100%;
  padding:0;
  border:1px solid var(--graphite);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--charcoal);
  cursor:pointer;
  aspect-ratio:4/3;
}
.gallery-grid__btn img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease,filter .35s ease;
}
.gallery-grid__btn:hover img,
.gallery-grid__btn:focus-visible img{
  transform:scale(1.06);
  filter:brightness(1.08);
}

/* -------------------------------------------------------------------------
   28. Lightbox
   ------------------------------------------------------------------------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox[hidden]{display:none}
body.lightbox-open{overflow:hidden}
.lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,10,10,.94);
}
.lightbox__content{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:1rem;
  max-width:min(92vw,1100px);
  padding:1rem;
}
.lightbox__figure{display:flex;flex-direction:column;align-items:center;gap:.75rem;min-width:0}
.lightbox__figure picture{display:block;max-width:100%}
.lightbox__figure img{
  max-width:100%;
  max-height:78vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:var(--radius);
  border:1px solid var(--graphite);
}
.lightbox__caption{color:var(--silver);font-size:.85rem;text-align:center}
.lightbox__close{
  position:absolute;
  top:-.5rem;
  right:-.5rem;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--charcoal);
  border:1px solid var(--graphite);
  color:var(--white);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.lightbox__close:hover{border-color:var(--red);color:var(--red)}
.lightbox__nav{
  flex:none;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--charcoal);
  border:1px solid var(--graphite);
  color:var(--white);
  font-size:1.2rem;
  cursor:pointer;
}
.lightbox__nav:hover{border-color:var(--red);color:var(--red)}
@media (max-width:700px){
  .lightbox__content{flex-direction:column;padding:3.5rem 1rem 1.5rem}
  .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%)}
  .lightbox__nav--prev{left:.25rem}
  .lightbox__nav--next{right:.25rem}
  .lightbox__close{top:.5rem;right:.5rem}
}

/* -------------------------------------------------------------------------
   29. Before / after comparison sliders
   ------------------------------------------------------------------------- */
.ba-compare-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:1fr;
}
@media (min-width:720px){
  .ba-compare-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
  .ba-compare-grid{grid-template-columns:repeat(3,1fr)}
}
.ba-compare__frame{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--graphite);
  --pos:50%;
}
.ba-compare__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.ba-compare__img--before{
  z-index:2;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.ba-compare__tag{
  position:absolute;
  top:.6rem;
  z-index:3;
  font:700 .68rem Montserrat;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.3rem .6rem;
  border-radius:var(--radius);
  background:rgba(10,10,10,.75);
  color:var(--white);
  pointer-events:none;
}
.ba-compare__tag--before{left:.6rem}
.ba-compare__tag--after{right:.6rem;background:var(--red)}
.ba-compare__range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  z-index:5;
  opacity:0;
  cursor:ew-resize;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
}
.ba-compare__range::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:1px}
.ba-compare__range::-moz-range-thumb{width:1px;height:1px;border:none}
.ba-compare__divider{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos);
  width:2px;
  background:var(--red);
  transform:translateX(-1px);
  z-index:4;
  pointer-events:none;
}
.ba-compare__divider::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--red);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px rgba(10,10,10,.65);
}
.ba-compare__range:focus-visible ~ .ba-compare__divider{
  outline:2px solid var(--white);
  outline-offset:3px;
  border-radius:50%;
}
.ba-compare__caption{
  margin-top:.85rem;
  font:600 .95rem Montserrat;
  color:var(--off-white);
  text-align:center;
}

/* =========================================================================
   About page
   ========================================================================= */

/* -------------------------------------------------------------------------
   30. Founder story block
   ------------------------------------------------------------------------- */
.founder-block__inner{
  display:grid;
  gap:2.5rem;
  align-items:start;
}
@media (min-width:900px){
  .founder-block__inner{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
}
.founder-block__media{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--graphite);
}
.founder-block__media picture,
.founder-block__media img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.founder-block__content .eyebrow{margin-bottom:.6rem}
.founder-block__content h2{color:var(--white);margin-bottom:1.1rem}
.founder-block__content > p{color:var(--off-white)}
.founder-block__content > p + p{margin-top:1.1rem}

/* -------------------------------------------------------------------------
   31. Pull-quote
   ------------------------------------------------------------------------- */
.pull-quote{
  border-left:3px solid var(--red);
  padding-left:1.5rem;
  margin-block:1.5rem;
}
.pull-quote__icon{width:26px;height:26px;color:var(--red);margin-bottom:.6rem}
.pull-quote p{
  font-size:1rem;
  line-height:1.75;
  color:var(--off-white);
  max-width:none;
}
.pull-quote cite{
  display:block;
  margin-top:1rem;
  font:600 .8rem Montserrat;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--silver);
  font-style:normal;
}

/* -------------------------------------------------------------------------
   32. Founder byline / owner portrait
   ------------------------------------------------------------------------- */
.founder-byline{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:1.75rem;
}
.owner-portrait{
  width:64px;
  height:64px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  background:linear-gradient(160deg,var(--graphite),var(--charcoal));
  border:1px solid var(--red);
}
.founder-byline__text{
  display:flex;
  flex-direction:column;
  font-size:.85rem;
  color:var(--silver);
  line-height:1.4;
}
.founder-byline__text strong{
  font:600 .92rem Montserrat;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--white);
}

/* -------------------------------------------------------------------------
   33. Values row
   ------------------------------------------------------------------------- */
.value-card{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
}
.value-card__icon{width:32px;height:32px;color:var(--silver)}
.value-card h3{font-size:1.1rem}
.value-card p{font-size:.88rem;color:var(--silver);max-width:26ch}

/* =========================================================================
   Reviews page
   ========================================================================= */

/* -------------------------------------------------------------------------
   34. Rating summary badges
   ------------------------------------------------------------------------- */
.rating-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:2rem;
}
.rating-badge{
  display:flex;
  align-items:center;
  gap:.6rem;
  border:1px solid var(--graphite);
  background:var(--charcoal);
  border-radius:var(--radius);
  padding:.75rem 1.25rem;
  font:600 .85rem Montserrat;
  color:var(--off-white);
}
.rating-badge__icon{width:20px;height:20px;color:var(--red);flex:none}
.rating-badge--link{text-decoration:none;cursor:pointer;transition:.18s}
.rating-badge--link:hover,
.rating-badge--link:focus-visible{border-color:var(--red);background:var(--graphite)}

/* -------------------------------------------------------------------------
   35. Review cards — recommend indicator + age
   ------------------------------------------------------------------------- */
.review-card__recommend{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font:600 .72rem Montserrat;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--red);
}
.review-card__recommend svg{width:16px;height:16px}
.review-card__age{font:500 .78rem Montserrat;color:var(--silver);margin-top:-.5rem}
.review-card--no-comment p{color:var(--silver);font-style:italic}

/* -------------------------------------------------------------------------
   36. Leave-a-review CTA
   ------------------------------------------------------------------------- */
.reviews-cta{text-align:center}

/* =========================================================================
   FAQ page
   ========================================================================= */

/* -------------------------------------------------------------------------
   37. Accordion
   ------------------------------------------------------------------------- */
.faq-list{
  max-width:800px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.faq-item{
  background:var(--charcoal);
  border:1px solid var(--graphite);
  border-radius:var(--radius);
  overflow:hidden;
}
.faq-item__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  background:transparent;
  border:none;
  text-align:left;
  padding:1.1rem 1.4rem;
  font:600 1rem/1.4 Montserrat;
  letter-spacing:.01em;
  color:var(--white);
  cursor:pointer;
}
.faq-item__q:hover{color:var(--red)}
.faq-item__icon{
  width:20px;
  height:20px;
  flex:none;
  color:var(--silver);
  transition:transform .25s ease,color .2s ease;
}
.faq-item__q[aria-expanded="true"] .faq-item__icon{
  transform:rotate(180deg);
  color:var(--red);
}
.faq-item__a{
  padding:0 1.4rem 1.4rem;
}
.faq-item__a p{
  color:var(--silver);
  font-size:.95rem;
  line-height:1.7;
  max-width:none;
}

/* =========================================================================
   Service Areas page
   ========================================================================= */

/* -------------------------------------------------------------------------
   30. Responsive map embed
   ------------------------------------------------------------------------- */
.map-embed{
  position:relative;
  width:100%;
  max-width:900px;
  margin-inline:auto;
  aspect-ratio:16/9;
  border:1px solid var(--graphite);
  border-radius:var(--radius);
  overflow:hidden;
}
.map-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* =========================================================================
   Contact page
   ========================================================================= */

/* -------------------------------------------------------------------------
   31. Contact methods
   ------------------------------------------------------------------------- */
.contact-method{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}
.contact-method__icon{width:30px;height:30px;color:var(--red);margin-bottom:.25rem}
.contact-method h3{font-size:1.05rem}
.contact-method p{font-size:.85rem;color:var(--silver);max-width:24ch}
.contact-method__link{
  font:600 .95rem Montserrat;
  color:var(--off-white);
  text-decoration:none;
  word-break:break-word;
}
.contact-method__link:hover{color:var(--red)}
.contact-methods__note{
  text-align:center;
  color:var(--silver);
  margin-top:clamp(2rem,4vw,3rem);
  font-size:.95rem;
}

/* -------------------------------------------------------------------------
   32. Quote form
   ------------------------------------------------------------------------- */
.quote-form{max-width:900px;margin-inline:auto}
.form-field--honeypot{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media (min-width:700px){
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .form-field--full{grid-column:1/-1}
}
.form-field{display:flex;flex-direction:column;gap:.5rem}
.form-field label{
  font:600 .8rem Montserrat;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--silver-lt);
}
.form-field__required{color:var(--red)}
.form-field input,
.form-field select,
.form-field textarea{
  font:400 .95rem Montserrat;
  color:var(--off-white);
  background:var(--charcoal);
  border:1px solid var(--graphite);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  width:100%;
}
.form-field textarea{resize:vertical;min-height:120px}
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--silver)}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:2px solid var(--red);
  outline-offset:2px;
  border-color:var(--red);
}
.form-field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:18px;
  padding-right:2.5rem;
}
.quote-form__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.25rem;
  margin-top:2rem;
}
.quote-form__actions .btn{opacity:1;transition:opacity .18s}
.quote-form__actions .btn:disabled{opacity:.6;cursor:not-allowed}
.form-status{
  font:600 .85rem Montserrat;
  color:var(--silver);
  margin:0;
}
.form-status--success{color:#6FCF97}

/* -------------------------------------------------------------------------
   17. Legal / prose pages
   ------------------------------------------------------------------------- */
.legal{
  max-width:70ch;
  margin-inline:auto;
  color:var(--off-white);
}
.legal h2{
  color:var(--white);
  font-size:clamp(1.3rem,2.2vw,1.7rem);
  margin-top:2.5rem;
  margin-bottom:.85rem;
}
.legal p{
  max-width:none;
  color:var(--off-white);
  margin-bottom:1.1rem;
}
.legal ul{
  margin:0 0 1.1rem;
  display:grid;
  gap:.5rem;
}
.legal ul li{
  position:relative;
  padding-left:1.4rem;
  color:var(--off-white);
}
.legal ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
}
.legal a{
  color:var(--red);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal a:hover{color:var(--white)}
.legal__updated{color:var(--silver-lt)}
.legal__note{
  color:var(--silver);
  font-size:.9rem;
  font-style:italic;
}
.form-status--error{color:var(--red)}