/* ============================================================================
   Top Rated Auto Care — bespoke design layer (Dark Dramatic track).
   Loads AFTER styles.css + the inline brand-token block, so it wins.
   Theme: near-black, surgical orange accent, Fraunces editorial headings with
   italic accent words, layered glows + grain, motion. Signature = the two-shop
   location picker + the services marquee.
   ============================================================================ */

/* ---- Editorial headings ------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-heading); letter-spacing: -0.015em; }
.accent { font-style: italic; font-weight: 500; color: var(--brand-primary); }
.x-hero h1, .x-banner h1, .x-bigcta h2 { font-weight: 900; }
.x-head h2, .x-body h2, .pick-head h1 { font-weight: 900; }

/* ---- Layered dark canvas ------------------------------------------------ */
body {
  background-color: #08080A;
  background-image:
    radial-gradient(1100px 520px at 88% -8%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 60%),
    radial-gradient(900px 600px at -10% 12%, rgba(80,90,140,0.10), transparent 55%);
  background-attachment: fixed;
}
/* Hairline grid texture — the "never flat" rule */
main::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 30%, #000, transparent 78%);
}
main > * { position: relative; z-index: 1; }

/* ---- Header: glassy, dark -----------------------------------------------
   The glass lives on a ::before pseudo, NOT on .site-header itself. A
   backdrop-filter on the header would make it the containing block for the
   position:fixed mobile menu panel (collapsing it to header height). Putting
   the filter on a pseudo keeps the header a normal box so the panel anchors to
   the viewport. (Hard-won: do not move backdrop-filter back onto .site-header.) */
.site-header { background: transparent; }
.site-header:not(.is-pick)::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(8,8,11,0.72);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Picker: transparent header, but guarantee logo/phone legibility over any
   image swapped behind it. */
.site-header.is-pick::before {
  content: ''; position: absolute; inset: 0 0 -48px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,11,.7), transparent);
}
.nav-logo img { height: 42px; border-radius: 7px; }
.nav-logo span { font-family: var(--font-heading); font-weight: 900; letter-spacing: -.01em; font-size: 1.18rem; }
.nav-links a { font-weight: 600; }
.nav-cta { box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-primary) 38%, transparent); }
.nav-loc .nav-parent { color: var(--brand-text); display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-weight: 600; }
.nav-loc .nav-parent svg:first-child { width: 15px; height: 15px; color: var(--brand-primary); }
.nav-loc .nav-parent:hover { border-color: var(--brand-primary); }
@media (max-width: 860px){
  .nav-loc .nav-parent { border: none; padding: var(--space-4) 0; border-radius: 0; }
}

/* ============================================================================
   SIGNATURE 1 — Location picker (root)
   ============================================================================ */
.page-pick { min-height: 100vh; }
.site-header.is-pick { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; position: absolute; width: 100%; }
.pick-phone { display: inline-flex; align-items: center; gap: 9px; color: var(--brand-text); font-weight: 600; border: 1px solid rgba(255,255,255,.2); padding: 9px 16px; border-radius: 999px; white-space: nowrap; flex: none; }
.pick-phone:hover { text-decoration: none; border-color: var(--brand-primary); color: #fff; }
.pick-phone svg { width: 16px; height: 16px; color: var(--brand-primary); flex: none; }
/* Tight mobile header: collapse the phone to a round icon-only tap-to-call so
   the number never wraps next to the logo. */
@media (max-width: 560px){
  .pick-phone span { display: none; }
  .pick-phone { padding: 11px; gap: 0; }
  .pick-phone svg { width: 19px; height: 19px; }
  .site-header.is-pick .nav-logo span { font-size: 1.02rem; }
}

.pick { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 120px 0 70px; overflow: hidden; }
.pick-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 420px at 22% 18%, color-mix(in srgb, var(--brand-primary) 22%, transparent), transparent 60%),
    radial-gradient(620px 480px at 84% 82%, rgba(70,80,130,.20), transparent 60%); }
.pick-inner { position: relative; z-index: 2; }
.pick-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.pick-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .28em; font-size: 12px; font-weight: 800; color: var(--brand-primary); margin-bottom: 18px; }
.pick-head h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.02; margin: 0 0 20px; color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,.5); }
.pick-sub { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--brand-text-muted); max-width: 56ch; margin: 0 auto; }

.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1040px; margin: 0 auto; }
@media (max-width: 760px){ .pick-grid { grid-template-columns: 1fr; } }
.pick-card { position: relative; display: block; border-radius: 18px; overflow: hidden; min-height: 460px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 70px rgba(0,0,0,.5); isolation: isolate; }
.pick-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.pick-scrim { position: absolute; inset: 0; background: linear-gradient(175deg, rgba(8,8,11,.18) 0%, rgba(8,8,11,.46) 46%, rgba(8,8,11,.93) 100%); transition: background .4s ease; }
.pick-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--brand-primary) 70%, transparent); box-shadow: 0 36px 90px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--brand-primary) 50%, transparent); }
.pick-card:hover img { transform: scale(1.07); }
.pick-card-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 34px 32px; display: flex; flex-direction: column; gap: 8px; }
.pick-k { display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; color: #fff; }
.pick-k svg { width: 14px; height: 14px; color: var(--brand-primary); }
.pick-h { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2rem, 4vw, 2.7rem); color: #fff; line-height: 1; letter-spacing: -.02em; }
.pick-addr { color: rgba(255,255,255,.74); font-size: .95rem; }
.pick-svc { color: rgba(255,255,255,.74); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.pick-enter { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; align-self: flex-start; background: var(--brand-primary); color: #fff; font-weight: 800; padding: 13px 22px; border-radius: 10px; box-shadow: 0 12px 30px color-mix(in srgb, var(--brand-primary) 40%, transparent); transition: gap .2s ease, transform .15s ease; }
.pick-enter svg { width: 18px; height: 18px; }
.pick-card:hover .pick-enter { gap: 15px; transform: translateY(-2px); }
.pick-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 36px; margin-top: 48px; color: var(--brand-text-muted); font-size: .98rem; }
.pick-foot span { display: inline-flex; align-items: center; gap: 9px; }
.pick-foot svg { width: 17px; height: 17px; color: var(--brand-primary); }
.pick-foot a { color: var(--brand-text); font-weight: 600; }

/* ============================================================================
   SIGNATURE 2 — Services marquee
   ============================================================================ */
.marquee { overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.015); padding: 16px 0; }
.marquee-track { display: inline-flex; align-items: center; gap: 30px; white-space: nowrap; animation: marquee 34s linear infinite; }
.marquee-track span { font-family: var(--font-heading); font-style: italic; font-weight: 500; font-size: 1.35rem; color: rgba(255,255,255,.42); }
.marquee-track .dot { display: inline-flex; }
.marquee-track .dot svg { width: 16px; height: 16px; color: var(--brand-primary); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track { animation: none; } }

/* ---- Hero polish -------------------------------------------------------- */
.x-hero { min-height: 88vh; }
.x-hero .x-hero-scrim { background: linear-gradient(180deg, rgba(8,8,11,.35) 0%, rgba(8,8,11,.42) 38%, rgba(8,8,11,.95) 100%); }
.x-banner .x-hero-scrim { background: linear-gradient(180deg, rgba(8,8,11,.6), rgba(8,8,11,.9)); }
.x-banner--short .container { padding-top: 120px; padding-bottom: 44px; }
.hero-price { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.85); font-weight: 600; font-size: 1.02rem; }
.hero-price b { color: var(--brand-primary); font-size: 1.25rem; }

/* ---- Cards / sections on dark ------------------------------------------ */
.x-head p { color: var(--brand-text-muted); }
.x-feat { padding: 4px; }
.x-feat .ic { background: color-mix(in srgb, var(--brand-primary) 16%, transparent); border: 1px solid color-mix(in srgb, var(--brand-primary) 32%, transparent); }
.section-dark, .x-areamap { background: linear-gradient(180deg, #0d0d12, #08080a); }
.x-areamap-sub { color: rgba(255,255,255,.78); }

/* Service tiles foot (price + arrow) */
.x-svc { border: 1px solid rgba(255,255,255,.08); }
.x-svc::after { background: linear-gradient(180deg, rgba(0,0,0,0) 24%, rgba(0,0,0,.92) 100%); }
.x-svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.price-tag { font-size: .9rem; color: rgba(255,255,255,.9); font-weight: 600; }
.price-tag b { color: var(--brand-primary); font-weight: 800; }
.price-tag i { font-style: normal; color: rgba(255,255,255,.66); font-weight: 500; font-size: .78rem; display: block; }
.price-tag--quote { color: var(--brand-primary); font-weight: 800; }

/* ---- Service page layout ------------------------------------------------ */
.svc-grid { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
@media (max-width: 900px){ .svc-grid { grid-template-columns: 1fr; gap: 32px; } }
.svc-aside { position: sticky; top: 92px; }
@media (max-width: 900px){ .svc-aside { position: static; } }
.svc-card { background: linear-gradient(180deg, #15151b, #101015); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 28px; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.svc-card h3 { margin: 0 0 6px; font-size: 1.5rem; }
.svc-price { font-family: var(--font-heading); font-weight: 900; font-size: 2rem; color: var(--brand-primary); line-height: 1; margin-bottom: 14px; }
.svc-price small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .8rem; color: var(--brand-text-muted); margin-top: 5px; }
.svc-card p { color: var(--brand-text-muted); font-size: .98rem; }
.svc-call { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; color: var(--brand-text); font-weight: 700; }
.svc-call svg { width: 17px; height: 17px; color: var(--brand-primary); }
.svc-hours { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); color: var(--brand-text-muted); font-size: .88rem; }
.svc-hours svg { width: 16px; height: 16px; color: var(--brand-primary); flex: none; }

/* ---- FAQ on dark -------------------------------------------------------- */
.x-faq details { border-bottom: 1px solid rgba(255,255,255,.1); }
.x-faq summary { color: var(--brand-text); }
.x-faq details p { color: var(--brand-text-muted); }

/* ---- Service areas page ------------------------------------------------- */
.area-map { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); margin-bottom: 34px; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.area-map iframe { width: 100%; height: 380px; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px){ .area-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .area-grid { grid-template-columns: 1fr; } }
.area-block { background: linear-gradient(180deg, #131319, #0e0e13); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 24px; transition: transform .18s ease, border-color .18s ease; }
.area-block:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.area-block h3 { font-size: 1.25rem; margin: 0 0 10px; display: flex; align-items: center; gap: 7px; }
.area-block h3 svg { width: 17px; height: 17px; color: var(--brand-primary); }
.area-block p { color: var(--brand-text-muted); font-size: .96rem; margin: 0 0 14px; }
.area-link { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-primary); font-weight: 700; font-size: .92rem; }
.area-link svg { width: 15px; height: 15px; transition: transform .15s ease; }
.area-link:hover { text-decoration: none; } .area-link:hover svg { transform: translateX(4px); }

/* ---- Contact page ------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
@media (max-width: 900px){ .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.contact-card { background: linear-gradient(180deg, #15151b, #101015); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 28px; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.contact-card h3 { margin: 0 0 18px; font-size: 1.4rem; }
.contact-card .ci { display: flex; gap: 13px; align-items: flex-start; margin: 0 0 16px; color: var(--brand-text-muted); font-size: .98rem; }
.contact-card .ci svg { width: 19px; height: 19px; color: var(--brand-primary); flex: none; margin-top: 2px; }
.contact-card .ci a { color: var(--brand-text); font-weight: 600; }
.embed-wrap { background: #fff; border-color: rgba(255,255,255,.12); border-radius: 14px; }

/* ---- Reviews + 404 ------------------------------------------------------ */
.reviews-page { padding: 120px 0 90px; text-align: center; }
.reviews-page .container { max-width: 760px; }
.reviews-logo { height: 84px; width: auto; margin: 0 auto 26px; border-radius: 14px; }
.reviews-page h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 14px; }
.reviews-page p { color: var(--brand-text-muted); font-size: 1.12rem; max-width: 52ch; margin: 0 auto 34px; }

/* ---- Legal -------------------------------------------------------------- */
.legal-body { max-width: 820px; }
.legal-body h2, .legal-body h3 { color: var(--brand-text); }
.legal-body p, .legal-body li { color: var(--brand-text-muted); }
.legal-body a { color: var(--brand-primary); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: linear-gradient(180deg, #0d0d12, #050507); border-top: 1px solid rgba(255,255,255,.08); }
.footer-loc, .footer-grid--pick h4 { color: var(--brand-primary); }
.footer-loc { font-weight: 600; font-size: .85em; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.footer-social a:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.footer-social svg { width: 18px; height: 18px; }
/* Inline icons inside footer text (pin, clock, arrow) — base.css makes bare SVGs
   display:block + full width, so constrain them to a small inline glyph. */
.site-footer p svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; flex: none; }

/* ---- Motion ------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1 !important; transform: none !important; } }

/* Area chips: ensure a gap between the city and the state abbreviation (the
   literal space collapses inside the inline-flex chip). */
.x-area-chips .st { margin-left: 5px; }

/* Smooth-scroll offset so anchored sections clear the sticky header */
:target { scroll-margin-top: 90px; }

/* ---- Accessibility: brighter accent for SMALL text + focus ring --------- */
:root { --accent-bright: #FF8A52; }
/* Small orange text needs more luminance than the heading/button orange to clear AA */
.area-link { color: var(--accent-bright); }
.x-head .k, .x-areamap-k { color: var(--accent-bright); }
:where(a, button, summary, .nav-parent, .pick-card, .x-svc, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Stat strip: spec-bar feel + non-numeric label tiles ---------------- */
.x-stats { border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, #0e0e13, #0a0a0d); }
.x-stat { position: relative; }
.x-stat + .x-stat::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); height: 42px; width: 1px; background: rgba(255,255,255,.1); }
@media (max-width: 680px){ .x-stat + .x-stat::before { display: none; } }
/* Label tiles (e.g. "Free Estimates") render the value at body scale so they
   read as an intentional label, not a missing number. */
.x-stat--label .num { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-style: italic; font-weight: 600; }

/* ---- Hero eyebrow accent rule (bespoke editorial touch) ----------------- */
.x-hero .x-eyebrow { position: relative; }
.x-hero h1 { margin-top: 6px; }
.x-hero .x-sub { position: relative; padding-top: 18px; }
.x-hero .x-sub::before { content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 3px; background: var(--brand-primary); border-radius: 2px; }

/* ---- Service-page inline figure (breaks the prose wall) ----------------- */
.svc-figure { margin: 26px 0 30px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.svc-figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.hero-price .q { font-style: normal; color: rgba(255,255,255,.6); font-weight: 500; font-size: .85rem; }

/* ---- Picker: "Opening Soon" placeholder treatment ----------------------- */
.pick-card--soon img { filter: grayscale(.45) brightness(.7); }
.pick-card--soon .pick-h, .pick-card--soon .pick-addr { color: rgba(255,255,255,.78); }
.pick-card--soon .pick-enter { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); box-shadow: none; }
.pick-card--soon:hover .pick-enter { background: rgba(255,255,255,.2); }
.pick-ribbon {
  position: absolute; top: 18px; right: -38px; z-index: 3;
  transform: rotate(45deg); background: var(--brand-primary); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 44px; box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

/* ---- "Opening Soon" location stub --------------------------------------- */
.coming { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 80px; }
.coming-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) brightness(.55); }
.coming-scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(8,8,11,.92) 0%, rgba(8,8,11,.7) 55%, rgba(8,8,11,.5) 100%); }
.coming-inner { position: relative; z-index: 2; max-width: 720px; }
.coming-inner h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); color: #fff; line-height: 1.04; margin: 6px 0 18px; }
.coming-sub { color: var(--brand-text-muted); font-size: 1.12rem; max-width: 56ch; margin: 0 0 30px; }