/* ============================================================================
   To a T Premium Auto Detailing — design pass: DARK EDITORIAL.
   Near-black layered base, a single electric-blue accent (from the logo), and a
   refined Fraunces serif with italic emphasis words. Loads AFTER styles.css +
   the inline brand-token block, so these win.
   Distinct from Big D's condensed-uppercase look: this one is editorial/serif.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&display=swap');

:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --blue: #3B8BFF;            /* bright electric blue — glows on dark */
  --blue-deep: #1B6FE6;       /* logo blue */
  --blue-soft: rgba(59,139,255,.16);
  --ink: #0A0D14;
  --radius: 10px;

  /* Flip the whole site dark (override the inline brand-token block) */
  --brand-primary: #2C82F6;   /* CTA blue */
  --brand-secondary: #06090F; /* darkest panels (footer, stats, bigcta) */
  --brand-text: #EAF1FA;
  --brand-text-muted: #95A6BC;
  --brand-bg: #0B0F17;
  --brand-bg-alt: #111824;
  --brand-border: rgba(255,255,255,.10);
}

body { background: var(--brand-bg); color: var(--brand-text); }

/* ---- Type: editorial serif headings, italic blue emphasis --------------- */
h1, h2, h3,
.x-hero h1, .x-banner h1, .x-head h2, .x-bigcta h2, .cta-band h2,
.section-head h1, .section-head h2, .x-body h2, .x-prose h2,
.x-svc h3, .card h3, .x-county-block h3 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  color: var(--brand-text);
}
h1 em, h2 em, .x-hero h1 em, .x-banner h1 em, .x-head h2 em {
  font-style: italic; font-weight: 600; color: var(--blue);
}
.x-hero h1 { font-weight: 700; line-height: 1.02; font-size: clamp(2.9rem, 6.4vw, 5.2rem); letter-spacing: -0.02em; }

/* ---- Eyebrows: clean sans, letter-spaced, blue, thin rule --------------- */
.x-head .k, .section-head .eyebrow, .x-areamap-k {
  font-family: 'Inter', system-ui, sans-serif; display: inline-flex; align-items: center; gap: 12px;
  color: var(--blue); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; font-size: .74rem;
}
.x-head .k::before, .section-head .eyebrow::before, .x-areamap-k::before {
  content: ''; width: 30px; height: 2px; background: var(--blue); display: inline-block;
}
.x-head.center .k { justify-content: center; }
.x-head p, .section-head p { color: var(--brand-text-muted); }
.x-head p a { color: var(--blue); }

/* ---- Header: deep glass, no second color, blue underline sweep ---------- */
.site-header {
  background: rgba(8,11,18,.86);
  border-bottom: 1px solid var(--brand-border);
  /* NOTE: no backdrop-filter/transform here — it breaks the fixed mobile nav. */
}
/* Blue/black logo on white reads poorly on near-black — keep it on a white plate. */
.nav-logo img { height: 46px; background: #fff; padding: 6px 11px; border-radius: 10px; box-sizing: content-box; box-shadow: 0 2px 14px rgba(0,0,0,.4); }
.nav-links a { color: var(--brand-text); }
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-links a:hover { color: #fff; }
.nav-cta { letter-spacing: .02em; background: var(--brand-primary); box-shadow: 0 8px 24px rgba(44,130,246,.35); }
@media (max-width: 860px) { .nav-links { background: var(--brand-secondary); } .nav-links a { border-color: var(--brand-border); } }

/* ---- Hero: cinematic dark scrim + blue glow + grid texture -------------- */
.x-hero { min-height: 100vh; background: var(--brand-secondary); position: relative; }
.x-hero-bg { filter: saturate(1.05) contrast(1.04); }
.x-hero-scrim {
  background:
    radial-gradient(115% 80% at 78% 16%, rgba(59,139,255,.22), transparent 56%),
    linear-gradient(180deg, rgba(6,9,15,.42) 0%, rgba(6,9,15,.40) 32%, rgba(6,9,15,.97) 100%),
    linear-gradient(90deg, rgba(6,9,15,.86) 0%, rgba(6,9,15,.20) 62%);
}
.x-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0) 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0) 70%);
}
.x-hero .container { position: relative; z-index: 2; border-left: 3px solid var(--blue); padding-left: clamp(20px,3vw,40px); }
.x-eyebrow {
  background: transparent; color: var(--blue); font-family: 'Inter', sans-serif; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; border: 1px solid rgba(59,139,255,.42);
  border-radius: 999px; padding: 7px 16px; box-shadow: 0 0 28px rgba(59,139,255,.22) inset;
}
.x-hero h1 { text-shadow: 0 6px 44px rgba(0,0,0,.6); }
.x-hero .x-sub { font-size: clamp(1.1rem,2vw,1.42rem); max-width: 44ch; color: #C7D5E6; font-style: italic; font-family: var(--font-display); font-weight: 500; }
.x-chip { background: rgba(255,255,255,.05); border: 1px solid var(--brand-border); border-radius: 999px; }
.x-chip svg { color: var(--blue); }
/* scroll cue */
.x-hero .container::after { content:''; position:absolute; left:clamp(20px,3vw,40px); bottom:16px; width:22px; height:34px; border:2px solid rgba(255,255,255,.5); border-radius:12px; }
.x-hero .container > .x-chips { position: static; }
@keyframes toatScroll { 0%,100%{opacity:0;transform:translateY(0)} 50%{opacity:1;transform:translateY(6px)} }

/* entrance motion */
@keyframes toatUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
.x-hero .x-eyebrow { animation: toatUp .6s .05s both; }
.x-hero h1 { animation: toatUp .6s .16s both; }
.x-hero .x-sub { animation: toatUp .6s .28s both; }
.x-hero .x-cta-row { animation: toatUp .6s .40s both; }
.x-hero .x-chips { animation: toatUp .6s .52s both; }

/* ---- Buttons ------------------------------------------------------------ */
.x-btn { letter-spacing: .01em; border-radius: 8px; font-weight: 700; }
.x-btn-primary { background: var(--brand-primary); color: #fff; box-shadow: 0 12px 38px rgba(44,130,246,.4); }
.x-btn-primary:hover { background: #4b96ff; box-shadow: 0 16px 46px rgba(44,130,246,.5); }
.x-btn-ghost { border: 1px solid rgba(255,255,255,.3); color: #fff; }
.x-btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.x-btn-white { color: var(--ink); }
.btn-primary, .nav-cta { background: var(--brand-primary); border-color: var(--brand-primary); }

/* ---- Sections: layered dark, hairline rhythm ---------------------------- */
.section-alt {
  background:
    radial-gradient(1000px 460px at 84% -12%, rgba(59,139,255,.10), transparent 60%),
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px) 0 0 / 100% 34px,
    var(--brand-bg-alt);
  border-top: 1px solid var(--brand-border); border-bottom: 1px solid var(--brand-border);
}

/* ---- Stat ledger (signature) — on pure black, serif numerals ------------ */
.x-stats { border-top: 1px solid var(--brand-border); background: var(--brand-secondary); }
.x-stats .container { gap: 0; padding-top: 46px; padding-bottom: 46px; }
.x-stat { position: relative; padding: 6px 24px; }
.x-stat + .x-stat::before { content:''; position:absolute; left:0; top:14%; height:72%; width:1px; background:rgba(255,255,255,.12); }
.x-stat .num { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: clamp(1.9rem,3.2vw,2.9rem); }
.x-stat .num::after { content:''; display:block; width:28px; height:2px; background:var(--blue); margin:10px auto 0; box-shadow:0 0 14px rgba(59,139,255,.7); }
.x-stat .lbl { color: var(--brand-text-muted); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
@media (max-width: 680px){ .x-stat + .x-stat:nth-child(odd)::before { display:none; } }

/* ---- Trust band — glass on black ---------------------------------------- */
.x-trustband { background: var(--brand-secondary); border-top: 1px solid var(--brand-border); border-bottom: 1px solid var(--brand-border); padding: 30px 0; }
.x-trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px 30px; }
@media (max-width:860px){ .x-trust-grid{ grid-template-columns: repeat(2,1fr); gap:22px; } }
@media (max-width:440px){ .x-trust-grid{ grid-template-columns: 1fr; } }
.x-trust-item { display:flex; align-items:center; gap:14px; }
.x-trust-ic { width:46px; height:46px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--blue-soft); border:1px solid rgba(59,139,255,.28); }
.x-trust-ic svg { width:23px; height:23px; color:var(--blue); }
.x-trust-tx strong { display:block; font-size:.98rem; line-height:1.18; color:var(--brand-text); font-weight:700; }
.x-trust-tx span { display:block; font-size:.82rem; color:var(--brand-text-muted); margin-top:3px; }

/* ---- Service tiles ------------------------------------------------------ */
/* Force a fixed 2×2 grid for the 4 home services (base.css auto-fit would
   spread them into a single row of 4 on wide desktops). 1-up on phones. */
.x-services { grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 1040px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .x-services { grid-template-columns: 1fr; } }
.x-svc { border-radius: 12px; transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 10px 36px rgba(0,0,0,.5); border: 1px solid var(--brand-border); overflow: hidden; }
.x-svc::before { content:''; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:3; background:linear-gradient(90deg,var(--blue-deep),var(--blue)); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.x-svc:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(0,0,0,.6); }
.x-svc:hover::before { transform: scaleX(1); }
.x-svc h3 { font-size: 1.4rem; }
.x-svc-body p { color: var(--brand-text-muted); }
.x-svc .x-arrow span, .x-svc .x-arrow { color: var(--blue); }

/* ---- Feature / cards as glass panels ------------------------------------ */
.x-feat, .card { background: rgba(255,255,255,.035); border: 1px solid var(--brand-border); border-radius: 12px; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.x-feat { padding: 28px; }
.x-feat:hover, .card:hover { transform: translateY(-4px); border-color: rgba(59,139,255,.5); background: rgba(255,255,255,.055); box-shadow: 0 18px 42px rgba(0,0,0,.45); }
.x-feat .ic { background: var(--blue-soft); border: 1px solid rgba(59,139,255,.28); border-radius: 10px; }
.x-feat .ic svg { color: var(--blue); }
.x-feat h4, .card h3 { font-family: var(--font-display); font-weight: 600; color: var(--brand-text); }
.x-feat p, .card p { color: var(--brand-text-muted); }

/* ---- Process steps ------------------------------------------------------ */
.x-step .n { font-family: var(--font-display); font-weight: 700; color: var(--blue); -webkit-text-fill-color: currentColor; text-shadow: 0 0 28px rgba(59,139,255,.45); opacity: .85; }
.x-step h4 { font-family: var(--font-display); font-weight: 600; }
.x-step p { color: var(--brand-text-muted); }

/* ---- Long-form body / prose -------------------------------------------- */
.x-body p, .x-body ul li, .x-prose p { color: #C6D3E2; }
.x-body .x-lead { color: var(--brand-text); font-family: var(--font-display); font-style: italic; font-weight: 500; }
.x-body h2, .x-prose h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.x-body ul li::before { background: var(--blue); box-shadow: inset 0 0 0 3px var(--brand-bg), 0 0 0 1px var(--blue); }
.x-body ul.x-checklist .x-ck { color: var(--blue); }
.x-crumbs, .x-crumbs a { color: rgba(255,255,255,.55); }
.x-crumbs a:hover { color: var(--blue); }

/* ---- Area page lists + county blocks ------------------------------------ */
.x-county-block h3 { font-family: var(--font-display); font-weight: 600; border-bottom-color: rgba(59,139,255,.4); }
.x-town-list a { color: var(--brand-text); transition: color .2s ease; }
.x-town-list a:hover { color: var(--blue); }
.x-area-chips a { transition: color .2s ease, border-color .2s ease; }
.x-area-chips a:hover { color: var(--blue); border-color: var(--blue); }
.x-areamap, .x-areamap-panel { border-color: var(--brand-border); }

/* Home "Areas we serve" cards — hover turns blue (heading + border + tint). */
.card-grid .card h3 { transition: color .2s ease; }
.card-grid .card:hover { border-color: var(--blue); background: rgba(59,139,255,.10); box-shadow: 0 18px 42px rgba(0,0,0,.45), 0 0 0 1px rgba(59,139,255,.4); }
.card-grid .card:hover h3 { color: var(--blue); }

/* ---- FAQ ---------------------------------------------------------------- */
.x-faq summary { font-family: var(--font-display); font-weight: 600; color: var(--brand-text); }
.x-faq summary::after { color: var(--blue); }
.x-faq details { border-bottom-color: var(--brand-border); }
.x-faq details p { color: var(--brand-text-muted); }

/* ---- Big CTA: glowing blue on black ------------------------------------- */
.x-bigcta { background: var(--brand-secondary); position: relative; overflow: hidden; }
.x-bigcta::before { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(720px 320px at 50% 0%, rgba(59,139,255,.32), transparent 70%); }
.x-bigcta::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--blue),transparent); }
.x-bigcta .container { position: relative; z-index: 1; }
.x-bigcta h2 { font-size: clamp(2rem,4vw,3.2rem); }
.x-bigcta p { color: #C6D3E2; }

/* ---- Contact / embed — GHL forms have dark text, so keep them on white --- */
.embed-wrap { background: #fff; border: 1px solid var(--brand-border); border-radius: 10px; padding: 10px; }
.embed-wrap iframe, .x-formcard iframe, .x-instaquote-form iframe { background: #fff; border-radius: 8px; display: block; width: 100%; }

/* ---- Owner section (no portrait) — center it as an editorial quote -------- */
.x-owner-grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; text-align: center; }
.x-owner-body .eyebrow { display: inline-flex; justify-content: center; color: var(--blue); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; font-size: .74rem; }
.x-owner-body h2 { font-family: var(--font-display); font-weight: 700; }
.x-owner-quote { border-left: none; padding: 14px 0 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem,2.4vw,1.7rem); line-height: 1.5; color: var(--brand-text); position: relative; }
.x-owner-quote::before { content: '\201C'; display: block; font-family: var(--font-display); color: var(--blue); font-size: 3rem; line-height: .4; margin-bottom: 8px; opacity: .8; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--brand-border); background: var(--brand-secondary); }
.site-footer a:hover { color: var(--blue); }

/* ---- Gallery ------------------------------------------------------------ */
.x-gcat { border-radius: 12px; overflow: hidden; border: 1px solid var(--brand-border); }
.x-gcat-cap h3, .x-gsub { font-family: var(--font-display); font-weight: 600; }
.x-gphoto { border-radius: 10px; }

/* ---- Banner (service / area heroes) ------------------------------------- */
.x-banner .x-hero-scrim { background: radial-gradient(90% 80% at 80% 10%, rgba(59,139,255,.18), transparent 55%), linear-gradient(180deg, rgba(6,9,15,.55), rgba(6,9,15,.94)); }
.x-banner h1 { font-weight: 700; }

/* ---- In-body service photo strip --------------------------------------- */
.x-svc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 10px 0 28px; }
.x-svc-gallery figure { margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--brand-border); }
.x-svc-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.x-svc-gallery figure:hover img { transform: scale(1.06); }

/* ---- Contact forms ------------------------------------------------------ */
.x-twoforms { display: grid; gap: 30px; }
.x-formcard h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 600; color: var(--brand-text); }
.x-formcard iframe { width: 100%; min-height: 560px; border: 0; border-radius: 8px; display: block; }

/* ---- Site-wide booking band --------------------------------------------- */
.x-instaquote {
  padding: 76px 0; border-top: 1px solid var(--brand-border);
  background: radial-gradient(820px 380px at 50% -12%, rgba(59,139,255,.12), transparent 60%), var(--brand-bg-alt);
}
.x-instaquote .container { max-width: 720px; }
.x-instaquote-form { background: rgba(255,255,255,.04); border: 1px solid var(--brand-border); border-radius: 10px; padding: 10px; }
.x-instaquote-form iframe { width: 100%; min-height: 540px; border: 0; border-radius: 8px; display: block; }

/* ---- Scroll-driven reveal (progressive; never hides on unsupported) ----- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes toatReveal { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
    .x-head, .x-svc, .x-feat, .x-step, .card, .x-trust-item, .x-gcat, .x-prose > *, .x-body > * {
      animation: toatReveal linear both; animation-timeline: view(); animation-range: entry 0% entry 42%;
    }
  }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .x-hero .x-eyebrow, .x-hero h1, .x-hero .x-sub, .x-hero .x-cta-row, .x-hero .x-chips { animation: none; }
  .x-svc, .x-feat, .card { transition: none; }
}