/* ============================================================
   Concept B — "Motion" : dark, motorization-led
   Overrides base tokens + dark-surface component tweaks.
   ============================================================ */
:root {
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --ink:      #FFFFFF;
  --ink-soft: #E4DED8;
  --bg:       #0F0E0D;
  --bg-alt:   #171614;
  --fg:       #FFFFFF;
  --body:     #A9A19B;
  --muted:    #8A827C;
  --line:     rgba(255,255,255,.13);
  --linen:    #1E1C1A;
  --sand:     #171614;
  --radius:   2px;
  --ochre-deep: #D9A03A;
}
h1, h2, h3, h4 { letter-spacing: -0.03em; font-weight: 600; }
strong { color: #fff; }

.header { background: rgba(15,14,13,.92); border-bottom-color: var(--line); }
.topbar { background: #000; }
.burger { background: transparent; border-color: var(--line); }
.burger span, .burger span::before, .burger span::after { background: #fff; }
.mobile-menu { background: var(--bg); border-top-color: var(--line); }
.mobile-menu a { color: #fff; border-bottom-color: var(--line); }
.brand__mark { color: #fff; }
.brand__name { color: #fff; }
.nav__links a { color: #C9C2BC; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: #fff; }

.section--alt { background: var(--bg-alt); }
.section--ink { background: #000; }
.card { background: #171614; border-color: var(--line); }
.card:hover { box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.card__meta li { background: #201E1B; border-color: var(--line); color: #BEB6AF; }
.review { background: #171614; border-color: var(--line); }
.review blockquote { color: #E4DED8; }
.review__who strong { color: #fff; }
.stat { background: var(--bg); }
.section--alt .stat { background: var(--bg-alt); }
.stats { background: var(--line); border-color: var(--line); }
.step::before { background: var(--bg); }
.section--alt .step::before { background: var(--bg-alt); }
.feature__icon { background: rgba(199,135,29,.14); border-color: rgba(199,135,29,.45); color: var(--ochre); }
.filters button { background: #171614; color: #C9C2BC; border-color: var(--line); }
.filters button[aria-pressed="true"] { background: var(--ochre); border-color: var(--ochre); color: #140F04; }
.btn--ghost { color: #fff; border-color: var(--line); }
.btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.btn--dark { background: #fff; color: #111; border-color: #fff; }
.btn--dark:hover { background: var(--ochre); border-color: var(--ochre); }
.field input, .field select, .field textarea { background: #171614; border-color: var(--line); color: #fff; }
.field label { color: #fff; }
.faq { border-top-color: var(--line); }
.faq details { border-bottom-color: var(--line); }
.faq summary { color: #fff; }
.footer { background: #000; }
.mobile-cta { background: var(--line); border-top-color: var(--line); }
.mobile-cta a { background: #171614; color: #fff; }
.map-ph { background: linear-gradient(160deg, #1B1917, #131110); border-color: var(--line); }
.map-ph p { color: var(--ochre); }
.zips li { background: #171614; border-color: var(--line); color: #BEB6AF; }
.ph {
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 13px),
    linear-gradient(150deg, #241F17 0%, #3A2E1A 55%, #1A1714 100%);
  border-color: var(--line);
}
.demo-note { background: #000; color: #A9A19B; border-bottom: 1px solid var(--line); }

/* B-specific hero */
.hero-b {
  position: relative;
  min-height: clamp(560px, 88vh, 860px);
  display: flex; align-items: flex-end;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(199,135,29,.30) 0%, transparent 58%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 15px),
    linear-gradient(160deg, #14120F 0%, #0C0B0A 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-b__inner { padding-block: clamp(3rem, 10vw, 6rem); position: relative; z-index: 2; width: 100%; }
.hero-b h1 { max-width: 16ch; margin-bottom: 1.1rem; }
.hero-b__lead { font-size: clamp(1.05rem, 3.2vw, 1.3rem); color: #C4BCB5; max-width: 44ch; margin-bottom: 2rem; }
.hero-b__meta {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: clamp(2rem, 6vw, 3.5rem);
}
@media (min-width: 700px) { .hero-b__meta { grid-template-columns: repeat(3, 1fr); } }
.hero-b__meta div { background: rgba(12,11,10,.86); padding: 1.1rem 1.25rem; }
.hero-b__meta dt { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); margin-bottom: .35rem; }
.hero-b__meta dd { margin: 0; font-size: .9375rem; color: #D6CFC9; }
.hero-b__shade {
  position: absolute; top: 0; right: 0; width: 42%; height: 100%;
  background: repeating-linear-gradient(180deg, rgba(199,135,29,.22) 0 2px, transparent 2px 16px);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 699px) { .hero-b__shade { width: 60%; opacity: .55; } }

/* B: control panel block */
.panel { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 800px) { .panel { grid-template-columns: repeat(2, 1fr); } }
.panel__cell { background: var(--bg-alt); padding: clamp(1.25rem, 4vw, 2rem); }
.panel__cell h3 { font-family: var(--font-display); font-size: 1.0625rem; margin-bottom: .5rem; }
.panel__cell p { font-size: .9375rem; color: var(--muted); margin: 0; }
.panel__cell--accent { background: var(--ochre); }
.panel__cell--accent h3, .panel__cell--accent p { color: #150F04; }
.panel__num { font-family: var(--font-display); font-size: 2rem; color: var(--ochre); line-height: 1; margin-bottom: .5rem; }
.panel__cell--accent .panel__num { color: #150F04; }

/* --ink is white in this theme, so surfaces that used it as a background need a real value */
.spec-list li { background: var(--bg); }
.spec-list { background: var(--line); border-color: var(--line); }
.hero__badge { background: var(--bg-alt); }