/* ============================================================================
   Scrub N' Go Mobile Detailing — per-client design pass
   Track: DARK DRAMATIC (DESIGN-PASS.md). Loads AFTER the brand-token block, so
   these win the cascade. Survives regen (copyShared never overwrites custom.css;
   linked because _derived.design_pack is set).
   Accent = electric blue (#0056D6, brand primary). Yellow (#FEFB41, secondary)
   used surgically — eyebrows, hairlines, step numbers. Editorial serif headings.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,700;1,9..144,900&display=swap');

:root {
  --brand-bg:        #0a0d12;   /* near-black base */
  --brand-bg-alt:    #11151d;   /* raised surface  */
  --brand-text:      #eef2f7;
  --brand-text-muted:#97a4b6;
  --brand-border:    rgba(255,255,255,.09);
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --accent:  #2b7bff;           /* lifted blue for glows on dark */
  --accent2: #FEFB41;           /* yellow, surgical */
}

/* ---- Layered, never-flat background -------------------------------------- */
body {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(43,123,255,.18), transparent 60%),
    radial-gradient(900px 520px at 8% 14%, rgba(43,123,255,.08), transparent 55%),
    linear-gradient(180deg, #0a0d12 0%, #0a0d12 100%);
  background-attachment: fixed;
}
/* faint grid texture overlay — depth without noise */
body::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: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);
}
/* NOTE: .site-header is intentionally NOT in this group — it must keep its
   sticky/z-index:100 from styles.css so the mobile menu (a fixed child) paints
   above the hero. Demoting it to z-index:1 put it level with sections. */
main, footer, section { position: relative; z-index: 1; }

/* sections are transparent so the body gradient reads through; alt = raised panel */
.section { background: transparent; }
.section-alt {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* ---- Editorial typography ------------------------------------------------ */
h1, h2, h3, h4 { font-family: var(--font-heading); }
h1, h2 { letter-spacing: -.005em; font-weight: 900; }
.x-head h2, .section-head h2 { letter-spacing: -.01em; }
.x-head h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
/* eyebrow → yellow, the one place the secondary leads */
.x-head .k, .section-head .eyebrow {
  color: var(--accent2);
  text-shadow: 0 0 18px rgba(254,251,65,.25);
}
.x-head p, .section-head p { color: var(--brand-text-muted); }

/* ---- Nav: dark glass ----------------------------------------------------- */
.site-header {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* Glass blur lives on a pseudo-element, NOT on .site-header itself: a
   backdrop-filter on the header would make it the containing block for the
   fixed mobile menu (a position:fixed descendant), clipping the menu to the
   72px header box instead of letting it fill the viewport. */
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(10,13,18,.72);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}
.nav-links a { color: #d7dee8; }
.nav-links a:hover { color: #fff; }
/* The hamburger button holds an inline <svg> with fill:none paths; taps in the
   gaps between the icon strokes don't register on the button and the menu
   never opens. Make the icon transparent to pointer events so every tap on the
   button toggles the menu. */
.nav-toggle svg, .nav-toggle svg * { pointer-events: none; }
@media (max-width: 860px) {
  .nav-links { background: #0c1018; border-left: 1px solid rgba(255,255,255,.08); }
}

/* ---- Hero: deepen the drama --------------------------------------------- */
.x-hero { min-height: 94vh; }
.x-hero .x-hero-scrim {
  background:
    radial-gradient(900px 520px at 80% 20%, rgba(43,123,255,.28), transparent 60%),
    linear-gradient(180deg, rgba(8,10,14,.55) 0%, rgba(8,10,14,.45) 38%, rgba(8,10,14,.96) 100%);
}
.x-hero h1 {
  font-size: clamp(2.7rem, 6.4vw, 5rem);
  line-height: 1.0; letter-spacing: -.01em;
}
.x-hero .x-sub { color: rgba(255,255,255,.9); max-width: 46ch; }
/* eyebrow badge above the H1 */
.x-hero .x-cta-row + *, .x-hero .container > .k { }
/* staggered entrance */
.x-hero h1, .x-hero .x-sub, .x-hero .x-cta-row, .x-hero .x-chips,
.x-hero [class*="badge"], .x-hero .x-eyebrow {
  opacity: 0; animation: sngUp .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.x-hero [class*="badge"], .x-hero .x-eyebrow { animation-delay:.05s; }
.x-hero h1        { animation-delay:.16s; }
.x-hero .x-sub    { animation-delay:.30s; }
.x-hero .x-cta-row{ animation-delay:.42s; }
.x-hero .x-chips  { animation-delay:.54s; }
@keyframes sngUp { from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){
  .x-hero h1,.x-hero .x-sub,.x-hero .x-cta-row,.x-hero .x-chips,
  .x-hero [class*="badge"],.x-hero .x-eyebrow{opacity:1;animation:none;}
}

/* ---- Buttons ------------------------------------------------------------- */
.x-btn-primary {
  background: linear-gradient(180deg, #2f80ff, var(--brand-primary));
  box-shadow: 0 12px 34px rgba(43,123,255,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.x-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(43,123,255,.52); }
.nav-cta { box-shadow: 0 8px 22px rgba(43,123,255,.35); }

/* ---- Stats: kill the yellow fill, go dark + glowing numerals ------------- */
.x-stats {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.x-stat .num { color: #4d92ff; text-shadow: 0 0 24px rgba(43,123,255,.45); }

/* ---- Service cards (.x-svc) — refined hover ------------------------------ */
.x-svc {
  background: #0a0d12;          /* override yellow secondary fallback that peeked at edges */
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.x-svc:hover { transform: translateY(-6px); border-color: rgba(43,123,255,.55); box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(43,123,255,.25); }
.x-svc::after { background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(6,9,14,.92) 100%); }
.x-svc h3 { font-family: var(--font-heading); }
.x-svc .x-arrow span { color: var(--accent2); }

/* ---- Cards / why / steps — dark panels with accent choreography ---------- */
.card, .x-feat, .x-step {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 26px;
  position: relative; overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card::before, .x-feat::before, .x-step::before {
  content:''; position:absolute; left:0; top:0; height:3px; width:100%;
  background: linear-gradient(90deg, var(--brand-primary), var(--accent2));
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.card:hover, .x-feat:hover, .x-step:hover {
  transform: translateY(-5px);
  border-color: rgba(43,123,255,.4);
  box-shadow: 0 20px 48px rgba(0,0,0,.5);
}
.card:hover::before, .x-feat:hover::before, .x-step:hover::before { transform: scaleX(1); }

.x-feat .ic { background: rgba(43,123,255,.16); }
.x-feat .ic svg { color: #5b9bff; }
.x-feat h4, .x-step h4 { font-family: var(--font-heading); color: #fff; }

/* ---- Signature: connected, glowing process timeline ---------------------- */
.x-steps { position: relative; }
@media (min-width: 821px) {
  .x-steps::before {
    content:''; position:absolute; top:46px; left:12%; right:12%; height:2px;
    background: linear-gradient(90deg, transparent, rgba(43,123,255,.55), rgba(254,251,65,.5), transparent);
    z-index:0;
  }
}
.x-step { padding-top: 30px; }
.x-step .n {
  font-family: var(--font-heading); font-style: italic;
  font-size: 3.4rem; line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, #6aa6ff, var(--brand-primary));
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
}

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

/* ---- Big CTA band: gradient + glow --------------------------------------- */
.x-bigcta {
  background:
    radial-gradient(700px 360px at 50% -40%, rgba(254,251,65,.18), transparent 60%),
    linear-gradient(135deg, #0a4fd6, #1f6bff);
  border-top: 1px solid rgba(255,255,255,.12);
}

/* ---- Body prose on dark (service/area pages) ----------------------------- */
.x-prose, .x-prose p, .x-prose li, .prose, .prose p, .prose li,
main p, main li { color: #c4cdda; }
main h1, main h2, main h3, main h4 { color: #fff; }
.x-crumbs, .x-crumbs a { color: var(--brand-text-muted); }
.x-crumbs a:hover { color: #fff; }

/* ---- Footer: base uses --brand-secondary as bg (assumes dark navy); this
   client's secondary is yellow, so force a deep dark surface ---------------- */
.site-footer {
  background: #07090d;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-grid h4 { color: #fff; font-family: var(--font-heading); }
.footer-links a:hover { color: var(--accent2); }

/* embedded GHL forms/surveys sit on white iframes — frame them so they read as
   intentional panels on the dark page */
iframe { border-radius: 14px; }

/* selection + links in body copy */
::selection { background: rgba(43,123,255,.4); color:#fff; }