/* ============================================================================
   Moose Automotive Detailing — per-client design pass
   Track: DARK DRAMATIC, MONOCHROME. The brand is literally black & white, so
   this site uses NO hue at all — near-black surfaces, platinum/chrome type,
   white hairlines. Think watch-ad / showroom-floor, not neon detail shop.
   Loads AFTER the brand-token block (linked via _derived.design_pack).
   Signature: split-panel hero with the moose badge ghosted in via screen
   blend + giant outline MOOSE wordmark behind the services grid.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700&display=swap');

:root {
  --brand-bg:        #0b0c0e;
  --brand-bg-alt:    #121316;
  --brand-text:      #f0f2f5;
  --brand-text-muted:#9aa3ad;
  --brand-border:    rgba(255,255,255,.09);
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  /* chrome gradient used for display type + stat numerals */
  --chrome: linear-gradient(180deg, #ffffff 0%, #d9dee5 45%, #8e99a8 100%);
}

/* ---- Layered monochrome backdrop ----------------------------------------- */
body {
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(800px 500px at 92% 30%, rgba(255,255,255,.025), transparent 55%),
    #0b0c0e;
  /* no background-attachment:fixed — it black-holes headless captures and
     repaints badly on iOS (see Eau Claire notes) */
  position: relative;
}
/* fine diagonal hairlines, faded from the top — texture without color */
body::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 22px);
  mask-image: radial-gradient(ellipse 100% 75% at 50% 0%, #000 25%, transparent 80%);
}
/* lift content above the body texture — but do NOT touch .site-header here:
   base.css has it sticky at z-index:100, and flattening it to 1 painted the
   open mobile drawer underneath the page sections */
main, footer, section { position: relative; z-index: 1; }

.section { background: transparent; }
.section-alt {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ---- Editorial typography: italic serif display, chrome fill ------------- */
h1, h2, h3, h4 { font-family: var(--font-heading); }
.x-head h2 {
  font-style: italic; font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .08em; /* keep descenders inside the clip box */
}
.x-head .k {
  color: #cfd6df; letter-spacing: .34em; font-weight: 600;
}
.x-head .k::before, .x-head .k::after { content:'—'; margin:0 12px; color:rgba(255,255,255,.25); }
.x-head p, .x-lead { color: var(--brand-text-muted); }

/* ---- Nav: solid ink, single hairline, white pill CTA --------------------- */
/* NOTE: no backdrop-filter here — filter/backdrop-filter on .site-header makes
   it the containing block for the fixed-position mobile .nav-links drawer,
   which collapses the menu to a 65px sliver. Solid ink instead. */
.site-header {
  background: rgba(9,10,12,.97);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-links a { color: #cfd6df; }
.nav-links a:hover { color: #fff; }
.nav-cta { background:#fff !important; color:#0b0c0e !important; box-shadow: 0 8px 26px rgba(255,255,255,.14); }
.nav-cta:hover { opacity:.9; }
@media (max-width: 860px) {
  .nav-links { background: #0d0e11; border-left: 1px solid rgba(255,255,255,.08); }
}

/* ---- Hero: asymmetric split panel ----------------------------------------
   Photo clipped to the right with a diagonal edge; type sits center-left on
   ink with the moose badge ghosted behind it (screen blend drops the badge
   JPG's black background out). */
.x-hero { min-height: 92vh; align-items: center; background: #0a0b0d; }
.x-hero .x-hero-bg {
  inset: 0 0 0 auto; width: 46%;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
  filter: grayscale(.3) contrast(1.06) brightness(.92);
}
.x-hero .x-hero-scrim {
  background:
    linear-gradient(90deg, #0a0b0d 53%, rgba(10,11,13,.25) 68%, rgba(10,11,13,.55) 100%),
    linear-gradient(0deg, rgba(10,11,13,.85) 0%, transparent 26%);
}
/* moose badge ghost — white linework only, floats behind the headline */
.x-hero::before {
  content:''; position:absolute; z-index:1; pointer-events:none;
  left:-120px; top:50%; transform:translateY(-52%);
  width:620px; height:680px;
  background:url('/assets/logo-bdda0cb1.jpg') center/contain no-repeat;
  mix-blend-mode:screen; opacity:.08;
}
.x-hero .container { padding-top: 130px; padding-bottom: 90px; }
.x-hero h1 {
  font-weight: 700; font-size: clamp(2.8rem, 6.2vw, 5.2rem);
  line-height: 1.02; letter-spacing: -.015em; max-width: 15ch;
}
.x-hero .x-sub { color: rgba(255,255,255,.78); max-width: 44ch; }
/* eyebrow: hairline-framed, letterspaced — no filled badge */
.x-hero .x-eyebrow, .x-banner .x-eyebrow {
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  color: #dfe4ea; letter-spacing: .26em; font-weight: 600; border-radius: 2px;
}
.x-chip svg { color: #cfd6df; }   /* base paints these brand-primary = black */
.x-chips { border-top-color: rgba(255,255,255,.14); }

/* staggered entrance with a blur-in — same discipline, different feel */
.x-hero .x-eyebrow, .x-hero h1, .x-hero .x-sub, .x-hero .x-cta-row, .x-hero .x-chips {
  opacity:0; animation: mooseIn .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.x-hero .x-eyebrow { animation-delay:.05s; }
.x-hero h1         { animation-delay:.15s; }
.x-hero .x-sub     { animation-delay:.30s; }
.x-hero .x-cta-row { animation-delay:.44s; }
.x-hero .x-chips   { animation-delay:.58s; }
@keyframes mooseIn { from{opacity:0; transform:translateY(18px); filter:blur(5px);} to{opacity:1; transform:none; filter:none;} }
@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{opacity:1;animation:none;}
}

@media (max-width: 860px) {
  /* split collapses: photo returns to full-bleed under heavy ink */
  .x-hero .x-hero-bg { inset:0; width:100%; clip-path:none; opacity:.38; }
  .x-hero .x-hero-scrim { background: linear-gradient(180deg, rgba(10,11,13,.6), rgba(10,11,13,.92)); }
  .x-hero::before { left:50%; transform:translate(-50%,-52%); opacity:.06; }
}

/* ---- Buttons: inverted — white is the accent ------------------------------ */
.x-btn-primary {
  background: #fff; color: #0b0c0e;
  box-shadow: 0 14px 38px rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.12);
}
.x-btn-primary:hover { transform: translateY(-2px); color:#0b0c0e; box-shadow: 0 18px 48px rgba(255,255,255,.24); }
.x-btn-primary svg { color: #0b0c0e; }
.x-btn-ghost { border-color: rgba(255,255,255,.4); }
.x-btn-ghost:hover { border-color: #fff; }

/* ---- Stats: chrome serif numerals on ink (base paints this white-on-white) */
.x-stats {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.x-stat .num {
  font-family: var(--font-heading); font-style: italic; font-weight: 700;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.x-stat .lbl { color: var(--brand-text-muted); letter-spacing:.18em; }

/* ---- Signature: giant outline wordmark behind the services grid ----------- */
.section:has(.x-services) { overflow: hidden; }
.section:has(.x-services)::before {
  content:'MOOSE'; position:absolute; z-index:0; pointer-events:none;
  right:-2%; top:-30px;
  font-family: var(--font-heading); font-style: italic; font-weight: 800;
  font-size: clamp(120px, 22vw, 320px); line-height: 1; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.055);
}
.section:has(.x-services) .container { position:relative; z-index:1; }

/* ---- Service cards: hairline frames, chrome arrow ------------------------- */
.x-svc {
  background:#0d0e11; border:1px solid rgba(255,255,255,.09); border-radius:4px;
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.x-svc:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.38); box-shadow: 0 28px 64px rgba(0,0,0,.65); }
.x-svc::after { background: linear-gradient(180deg, rgba(0,0,0,0) 28%, rgba(8,9,11,.94) 100%); }
.x-svc img { filter: grayscale(.25); transition: transform .5s ease, filter .5s ease; }
.x-svc:hover img { filter: grayscale(0); }
.x-svc h3 { font-weight: 600; }
.x-svc .x-arrow span { color: #cfd6df; }

/* ---- Cards / why / steps: hairline panels, top border sweep --------------- */
.card, .x-feat, .x-step {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 4px; 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:2px; width:100%;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
  transform: scaleX(0); transform-origin:left; transition: transform .4s ease;
}
.card:hover, .x-feat:hover, .x-step:hover {
  transform: translateY(-5px); border-color: rgba(255,255,255,.28);
  box-shadow: 0 22px 52px rgba(0,0,0,.55);
}
.card:hover::before, .x-feat:hover::before, .x-step:hover::before { transform: scaleX(1); }
.card h3, .x-feat h4, .x-step h4 { color:#fff; }
.card p { color: var(--brand-text-muted); }
.x-feat .ic { background: rgba(255,255,255,.08); }
.x-feat .ic svg { color: #e6eaef; }

/* steps: oversized chrome italic numerals */
.x-step .n {
  font-family: var(--font-heading); font-style: italic; font-weight: 700;
  font-size: 3.6rem; line-height: 1;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* checklist ticks (service pages) — .x-ck IS the check svg; base paints it
   brand-primary (black here), invisible on ink */
svg.x-ck { color:#fff; background:rgba(255,255,255,.08); border-radius:4px; padding:4px; }

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

/* ---- Big CTA: the inverted plate — white panel, ink serif ----------------- */
.x-bigcta {
  background: linear-gradient(180deg, #ffffff, #e8ebef);
  color: #0b0c0e;
  border-top: 1px solid rgba(255,255,255,.2);
}
.x-bigcta h2 {
  color: #0b0c0e; font-style: italic; font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
}
.x-bigcta p { color: #3c434c; }
.x-bigcta .x-btn-white, .x-bigcta .x-btn {
  background: #0b0c0e; color: #fff; box-shadow: 0 14px 38px rgba(11,12,14,.3);
}
.x-bigcta .x-btn-white:hover { transform: translateY(-2px); color:#fff; }
.x-bigcta .x-btn-white svg { color:#fff; }

/* The inner-page CTA uses .cta-band, whose default bg is --brand-secondary.
   This client's secondary is white, so the default white text vanished on a
   white band. Match it to the .x-bigcta light-panel treatment. */
.cta-band {
  background: linear-gradient(180deg, #ffffff, #e8ebef);
  color: #0b0c0e;
}
.cta-band h2 { color: #0b0c0e; font-style: italic; font-weight: 700; }
.cta-band p { color: #3c434c; }
.cta-band .btn-primary {
  background: #0b0c0e; color: #fff; border-color: #0b0c0e;
  box-shadow: 0 14px 38px rgba(11,12,14,.3);
}

/* ---- Pricing cards (by vehicle size) -------------------------------------- */
.x-pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:20px 0 10px; }
@media (max-width:640px){ .x-pricing{ grid-template-columns:1fr; } }
.x-price-card {
  background:#11131a; border:1px solid rgba(255,255,255,.1); border-radius:14px;
  padding:24px 18px; text-align:center;
}
.x-price-veh { font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:10px; }
.x-price-amt { font-family:var(--font-heading); font-size:1.7rem; font-weight:700; color:#fff; line-height:1.1; }
.x-price-note { font-size:.9rem; color:rgba(255,255,255,.6); margin-top:6px; }

/* ---- Inner-page banner heroes --------------------------------------------- */
.x-banner { background: #0a0b0d; }
.x-banner h1 { font-weight: 700; }
/* legacy section-head pages (contact, about, book): eyebrow + plain links were
   brand-primary (black) on ink */
.section-head .eyebrow { color: #cfd6df; letter-spacing: .3em; }
.section-head h1, .section-head h2 { color: #fff; }
.section-head p { color: var(--brand-text-muted); }
section a:not([class]) { color: #e6eaef; text-decoration-color: rgba(255,255,255,.35); }
section a:not([class]):hover { color: #fff; }
.x-crumbs, .x-crumbs a { color: var(--brand-text-muted); }
.x-crumbs a:hover { color: #fff; }

/* ---- Body prose on dark ---------------------------------------------------- */
main p, main li, .x-prose p, .x-prose li { color: #c2c9d2; }
main h1, main h2, main h3, main h4 { color: #fff; }
main a:not(.x-btn):not(.card):not(.x-svc) { color: #e6eaef; text-decoration-color: rgba(255,255,255,.35); }

/* ---- Footer: base uses --brand-secondary (#FFFFFF here) as bg — force ink -- */
.site-footer {
  background: #08090b;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-grid h4 { color:#fff; font-family: var(--font-heading); }
.site-footer a:hover { color:#fff; }

/* embedded GHL forms/surveys are white iframes — frame them as intentional
   light plates on the dark page */
iframe { background:#fff; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

::selection { background: rgba(255,255,255,.85); color: #0b0c0e; }