/* ============================================================
   Richfield MN Home Inspection — Shared Brand System
   Ink + Electric Blue · Stripe/Linear-premium · mobile-first
   Used by all 8 homepage mockups for visual consistency.
   ============================================================ */

@font-face {
  font-family: 'Geist';
  src: local('Geist'), local('Inter'), local('-apple-system');
  font-display: swap;
  font-weight: 100 900;
}

:root {
  /* Brand */
  --ink:        #0A0A0F;   /* base background */
  --ink-2:      #11131c;   /* raised surface  */
  --ink-3:      #181b27;   /* card surface    */
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);
  --txt:        #ffffff;
  --txt-mute:   #9aa3b2;
  --txt-dim:    #6b7385;
  --blue:       #DC2626;   /* brand red accent (var names kept for compatibility) */
  --blue-2:     #EF4444;
  --blue-soft:  rgba(220,38,38,.14);
  --good:       #22c55e;

  /* Spacing scale 4/8/12/16/24/32/48/64 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:24px;
  --maxw:1180px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Geist','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--ink); color:var(--txt);
  line-height:1.5; font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }

/* Skip link */
.skip { position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 8px 0; }
.skip:focus { left:0; }

/* Layout */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--s5); }
.eyebrow { font-family:'Geist Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-2); font-weight:600; }
.muted { color:var(--txt-mute); }

h1,h2,h3 { line-height:1.08; letter-spacing:-.02em; font-weight:700; }
h1 { font-size:clamp(2.1rem,6vw,3.9rem); }
h2 { font-size:clamp(1.6rem,4vw,2.6rem); }
h3 { font-size:1.18rem; }
p  { color:var(--txt-mute); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.96rem;
  padding:13px 22px; border-radius:var(--r); border:1px solid transparent; cursor:pointer;
  transition:transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
  min-height:48px; }
.btn-primary { background:var(--blue); color:#fff; box-shadow:0 6px 24px rgba(220,38,38,.35); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(220,38,38,.45); }
.btn-ghost { background:transparent; color:var(--txt); border-color:var(--line-2); }
.btn-ghost:hover { border-color:var(--blue); color:var(--blue-2); }

/* Pills / badges */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600;
  padding:6px 12px; border-radius:999px; background:var(--blue-soft); color:var(--blue-2); border:1px solid var(--line); }
.trust-strip { display:flex; flex-wrap:wrap; gap:var(--s5); align-items:center; color:var(--txt-mute); font-size:.9rem; }
.trust-strip strong { color:var(--txt); }

/* Cards */
.card { background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); }
.grid { display:grid; gap:var(--s4); }

/* Header (shared) */
.nav { position:sticky; top:0; z-index:100; backdrop-filter:saturate(160%) blur(14px);
  background:rgba(10,10,15,.72); border-bottom:1px solid var(--line); }
.nav-in { display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; }
.logo .dot { width:30px; height:30px; }
.nav-links { display:flex; gap:var(--s5); align-items:center; }
.nav-links a { font-size:.92rem; color:var(--txt-mute); }
.nav-links a:hover { color:var(--txt); }
.nav-cta { display:flex; gap:var(--s2); align-items:center; }
.nav-phone { font-weight:600; color:var(--txt); }
.burger { display:none; background:none; border:1px solid var(--line-2); border-radius:8px; width:42px; height:42px; color:#fff; }

/* Sections */
section { padding:var(--s9) 0; }
.lead { font-size:1.12rem; max-width:62ch; }

/* Stat row */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
.stat .n { font-size:2.4rem; font-weight:800; letter-spacing:-.03em; }
.stat .n b { color:var(--blue-2); }
.stat .l { color:var(--txt-mute); font-size:.88rem; }

/* FAQ via native details (zero JS, accessible) */
.faq details { border-bottom:1px solid var(--line); padding:var(--s4) 0; }
.faq summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--blue-2); font-size:1.4rem; line-height:1; }
.faq details[open] summary::after { content:'\2212'; }
.faq p { margin-top:var(--s3); }

/* Quote embed frame holder (reserves height → no CLS) */
.quote-embed { min-height:600px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.quote-embed iframe { width:100%; height:600px; border:0; display:block; }

/* Footer */
.footer { border-top:1px solid var(--line); padding:var(--s8) 0 var(--s7); color:var(--txt-dim); font-size:.88rem; }
.footer a { color:var(--txt-mute); }
.footer a:hover { color:var(--txt); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s6); margin-bottom:var(--s7); }
.footer h4 { color:var(--txt); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:var(--s3); }
.footer ul { list-style:none; display:grid; gap:8px; }

/* Sticky mobile CTA */
.mobile-cta { position:fixed; bottom:0; left:0; right:0; display:none; gap:8px; z-index:90;
  padding:10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  background:rgba(10,10,15,.92); backdrop-filter:blur(12px); border-top:1px solid var(--line); }
.mobile-cta .btn { flex:1; justify-content:center; }

/* Responsive */
@media (max-width:1023px){
  .footer-grid { grid-template-columns:1fr 1fr; gap:var(--s5); }
}
@media (max-width:768px){
  .nav-links { display:none; }
  .burger { display:inline-flex; align-items:center; justify-content:center; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .mobile-cta { display:flex; }
  section { padding:var(--s8) 0; }
  body { padding-bottom:74px; } /* room for sticky bar */
  .nav-cta .nav-phone { display:none; }
}
@media (max-width:480px){
  .footer-grid { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
}

/* Motion safety */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}

/* Mockup index banner (only on index page) */
.mx-banner { background:var(--blue); color:#fff; text-align:center; padding:10px; font-size:.85rem; font-weight:600; }