/* ============================================================================
   Sandora's Detailing — bespoke design layer (loads AFTER the brand-token block)
   Track: Dark Dramatic + editorial serif. Red (#FF3A30) on true black, Fraunces
   display headings with italic red accents, layered backgrounds, motion.
   Kept regen-safe: pure CSS on the generator's existing DOM (+ a hand-built
   signature "Coating Tiers" section on the home). No em dashes in copy.
   ============================================================================ */

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

:root {
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --brand-secondary: #0a0a0b;      /* refine pure black to a deep ink */
  --brand-text: #16171a;
  --brand-text-muted: #5b6270;
  --brand-bg-alt: #f6f5f3;         /* warm off-white, not cold grey */
  --brand-border: #e7e5e1;
  --ink: #0a0a0b;
  --red: #FF3A30;
  --red-deep: #d81f16;
}

/* --- Editorial headings ------------------------------------------------------ */
h1, h2, .x-head h2, .x-hero h1, .x-bigcta h2 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
}
h1, h2 { font-weight: 900; }
/* Italic red accent word inside a heading */
.x-em { font-style: italic; color: var(--red); font-weight: 900; }
.x-head h2 .x-em { color: var(--red); }
/* On dark bands the accent glows a touch */
.x-hero h1 .x-em, .x-transform .x-head h2 .x-em { color: var(--red); text-shadow: 0 0 34px rgba(255,58,48,.45); }

/* Eyebrow: refined, not a solid block by default (hero keeps the block) */
.x-head .k, .x-eyebrow { font-family: var(--font-body); }
.x-head .k { display:inline-flex; align-items:center; gap:9px; }
.x-head .k::before { content:''; width:26px; height:2px; background:var(--red); display:inline-block; }
.x-head.center .k { justify-content:center; }

/* --- Layered backgrounds (depth = premium) ---------------------------------- */
body { background: var(--brand-bg); }
/* faint automotive "grid" texture + red glow on the alt sections */
.section-alt {
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(255,58,48,.06), transparent 60%),
    linear-gradient(0deg, var(--brand-bg-alt), var(--brand-bg-alt));
  position: relative;
}
.section-alt::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(10,10,11,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,11,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
}
.section-alt > .container { position: relative; z-index: 1; }

/* --- Hero ------------------------------------------------------------------- */
.x-hero { min-height: 92vh; }
.x-hero .x-hero-scrim {
  background:
    radial-gradient(70% 90% at 15% 100%, rgba(255,58,48,.22), transparent 55%),
    linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.35) 35%, rgba(10,10,11,.94) 100%);
}
.x-hero::after { /* top vignette so the sticky nav reads on the photo */
  content:''; position:absolute; top:0; left:0; right:0; height:180px; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,11,.55), transparent); pointer-events:none;
}
.x-hero .container { z-index:2; padding-bottom:76px; }
.x-eyebrow { background:var(--red); border-radius:4px; box-shadow:0 8px 24px rgba(255,58,48,.35); }
.x-hero h1 { font-size:clamp(2.7rem,6.4vw,5rem); line-height:1.0; max-width:16ch; text-shadow:0 2px 40px rgba(0,0,0,.5); }
.x-hero .x-sub { color:rgba(255,255,255,.9); font-family:var(--font-body); }

/* staggered entrance (no JS) */
.x-hero .x-eyebrow { animation: snUp .7s cubic-bezier(.2,.7,.2,1) both; }
.x-hero h1 { animation: snUp .7s cubic-bezier(.2,.7,.2,1) .1s both; }
.x-hero .x-sub { animation: snUp .7s cubic-bezier(.2,.7,.2,1) .2s both; }
.x-hero .x-cta-row { animation: snUp .7s cubic-bezier(.2,.7,.2,1) .3s both; }
.x-hero .x-chips { animation: snUp .7s cubic-bezier(.2,.7,.2,1) .42s both; }
@keyframes snUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .x-hero * { animation:none !important; } }

/* Buttons: red primary with lift + glow */
.x-btn-primary { background:var(--red); box-shadow:0 12px 30px rgba(255,58,48,.32); }
.x-btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(255,58,48,.42); }
.x-chip { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(3px); }

/* --- Stats strip ------------------------------------------------------------ */
.x-stats { background:var(--ink); border-top:1px solid rgba(255,255,255,.06); border-bottom:3px solid var(--red); }
.x-stat .num { font-family:var(--font-heading); font-weight:900; }

/* --- Service tiles: hover choreography -------------------------------------- */
.x-svc { border:1px solid rgba(255,255,255,.04); box-shadow:0 10px 34px rgba(0,0,0,.16); transition:transform .3s ease, box-shadow .3s ease; }
.x-svc:hover { transform:translateY(-6px); box-shadow:0 22px 50px rgba(0,0,0,.28); }
.x-svc::before { /* red underline sweep */
  content:''; position:absolute; left:0; bottom:0; height:4px; width:100%; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease; z-index:3;
}
.x-svc:hover::before { transform:scaleX(1); }
.x-svc h3 { font-family:var(--font-heading); }

/* --- Why-us + steps --------------------------------------------------------- */
.x-feat { padding:24px; border:1px solid var(--brand-border); border-radius:14px; background:#fff; transition:transform .2s, box-shadow .2s, border-color .2s; }
.x-feat:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(10,10,11,.08); border-color:color-mix(in srgb, var(--red) 40%, var(--brand-border)); }
.x-feat .ic { background:var(--red); }
.x-feat .ic svg { color:#fff; }
.x-feat h4 { font-family:var(--font-heading); font-weight:900; }
.x-step .n { font-family:var(--font-heading); color:var(--red); opacity:.9; -webkit-text-stroke:0; }
.x-step h4 { font-family:var(--font-heading); font-weight:900; }

/* --- Cards (service areas) -------------------------------------------------- */
.card { border-radius:12px; position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; }
.card::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red); transform:scaleY(0); transform-origin:top; transition:transform .25s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(10,10,11,.1); border-color:color-mix(in srgb, var(--red) 30%, var(--brand-border)); }
.card:hover::after { transform:scaleY(1); }
.card h3 { font-family:var(--font-heading); font-weight:900; }

/* --- Transform (dark before/after band) ------------------------------------- */
.x-transform {
  background:
    radial-gradient(50% 70% at 80% 10%, rgba(255,58,48,.16), transparent 60%),
    var(--ink);
}
.x-transform .ba-frame { border-radius:14px; box-shadow:0 30px 70px rgba(0,0,0,.5); }

/* --- FAQ -------------------------------------------------------------------- */
.x-faq details { border-bottom:1px solid var(--brand-border); }
.x-faq summary { font-family:var(--font-heading); font-weight:600; }

/* --- Big CTA band: black with red glow, not flat red ------------------------ */
.x-bigcta {
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(255,58,48,.35), transparent 60%),
    var(--ink);
  border-top:3px solid var(--red);
}
.x-bigcta .x-btn-white { background:var(--red); color:#fff; box-shadow:0 14px 34px rgba(255,58,48,.4); }
.x-bigcta .x-btn-white:hover { transform:translateY(-3px); color:#fff; }

/* --- Prose headings on service/area pages ---------------------------------- */
.x-body h2, .x-body h3 { font-family:var(--font-heading); }
.x-body h2 { font-weight:900; }
.x-crumbs a:hover { color:var(--red); }

/* --- Nav accents ------------------------------------------------------------ */
.nav-cta { background:var(--red); }
.nav-links a:hover { color:var(--red); }
.nav-logo { font-family:var(--font-heading); font-weight:900; }

/* ============================================================================
   Signature section — Nasiol Ceramic Coating tiers (home only, hand-built).
   Unique to Sandora; showcases the premium coating ladder honestly.
   ============================================================================ */
.sn-tiers { background:
    radial-gradient(50% 60% at 12% 0%, rgba(255,58,48,.14), transparent 55%),
    var(--ink);
  color:#fff; }
.sn-tiers .x-head h2 { color:#fff; }
.sn-tiers .x-head p { color:rgba(255,255,255,.72); }
.sn-tiers .x-head .k { color:var(--red); }
.sn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1040px; margin:0 auto; }
@media (max-width:820px){ .sn-grid { grid-template-columns:1fr; } }
.sn-tier {
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:32px 26px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sn-tier:hover { transform:translateY(-6px); border-color:color-mix(in srgb, var(--red) 55%, transparent); box-shadow:0 26px 60px rgba(0,0,0,.45); }
.sn-tier.is-flagship { border-color:var(--red); box-shadow:0 20px 50px rgba(255,58,48,.14); }
.sn-flag { position:absolute; top:-12px; left:26px; background:var(--red); color:#fff; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:20px; }
.sn-tier .sn-name { font-family:var(--font-heading); font-weight:900; font-size:1.45rem; margin:0 0 4px; color:#fff; }
.sn-tier .sn-life { color:var(--red); font-weight:800; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 18px; }
.sn-tier .sn-price { font-family:var(--font-heading); font-weight:900; font-size:2.4rem; color:#fff; line-height:1; margin:0 0 4px; }
.sn-tier .sn-price small { font-family:var(--font-body); font-size:.8rem; font-weight:600; color:rgba(255,255,255,.55); letter-spacing:.02em; }
.sn-tier .sn-desc { color:rgba(255,255,255,.78); font-size:.98rem; line-height:1.6; margin:16px 0 0; }
.sn-note { text-align:center; color:rgba(255,255,255,.6); font-size:.92rem; margin:30px auto 0; max-width:640px; }
.sn-note strong { color:rgba(255,255,255,.85); }

/* ============================================================================
   Service-page additions — pricing table + included checklist accents
   ============================================================================ */
.sn-priceband { background:var(--brand-bg-alt); border:1px solid var(--brand-border); border-left:4px solid var(--red); border-radius:14px; padding:26px 28px; margin:28px 0; }
.sn-priceband h3 { font-family:var(--font-heading); font-weight:900; margin:0 0 4px; font-size:1.25rem; }
.sn-priceband .sn-pb-sub { color:var(--brand-text-muted); font-size:.95rem; margin:0 0 18px; }
.sn-prices { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:640px){ .sn-prices { grid-template-columns:1fr; } }
.sn-pcard { background:#fff; border:1px solid var(--brand-border); border-radius:12px; padding:18px 16px; text-align:center; }
.sn-pcard .sn-pc-veh { font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; font-weight:800; color:var(--brand-text-muted); margin:0 0 8px; }
.sn-pcard .sn-pc-amt { font-family:var(--font-heading); font-weight:900; font-size:1.9rem; color:var(--ink); line-height:1; }
.sn-pcard .sn-pc-amt small { font-family:var(--font-body); font-size:.72rem; font-weight:700; color:var(--brand-text-muted); display:block; margin-top:6px; letter-spacing:.02em; }
.sn-priceband .sn-pb-fine { margin:16px 0 0; font-size:.9rem; color:var(--brand-text-muted); }
.sn-priceband .sn-pb-fine strong { color:var(--ink); }
/* single-price variant (headlight) */
.sn-prices.is-single { grid-template-columns:1fr; max-width:280px; }