/* ============================================================
   Howard Resource — Stylesheet
   Brand: Black · White · Electric Blue (#3b82f6)
   Mirror's Edge aesthetic — dark, clean, edge-lit
   ============================================================ */

/* ── Brand tokens (dark-first, always) ─────────────────────── */
:root {
  --bg:             #0d0d0d;
  --bg-alt:         #141414;
  --panel:          rgba(255,255,255,.07);
  --panel2:         rgba(255,255,255,.11);
  --text:           #ffffff;
  --muted:          rgba(255,255,255,.55);
  --line:           rgba(255,255,255,.07);
  --accent:         #3b82f6;
  --accent-text:    #7eb6ff;
  --accent2:        #60a5fa;
  --accent-dim:     rgba(59,130,246,.1);
  --accent-border:  rgba(59,130,246,.28);
  --surface-1:      rgba(255,255,255,.03);
  --surface-2:      rgba(255,255,255,.06);
  --surface-hover:  rgba(255,255,255,.08);
  --border:         rgba(255,255,255,.08);
  --border-hover:   rgba(59,130,246,.4);
  --topbar-bg:      rgba(13,13,13,.97);
  --header-bg:      rgba(13,13,13,.96);
  --header-border:  rgba(255,255,255,.06);
  --nav-hover:      rgba(255,255,255,.05);
  --input-bg:       rgba(255,255,255,.04);
  --input-border:   rgba(255,255,255,.1);
  --input-focus:    rgba(59,130,246,.3);
  --shadow-sm:      0 2px 12px rgba(0,0,0,.4);
  --shadow:         0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:      0 12px 48px rgba(0,0,0,.6);
  --glow:           0 0 16px rgba(59,130,246,.2), 0 0 32px rgba(59,130,246,.08);
  --glow-sm:        0 0 8px rgba(59,130,246,.15);
  --dot:            rgba(255,255,255,.018);
  --radius:         2px;
  --radius-lg:      3px;
  --max:            1100px;
  --ease:           cubic-bezier(0.4,0,0.2,1);
  --t:              0.22s;
}

/* ── Light mode tokens ─────────────────────────────────────── */
html[data-theme="light"] {
  --bg:             #f9f9f7;
  --bg-alt:         #f0f0ec;
  --panel:          rgba(255,255,255,.68);
  --panel2:         rgba(255,255,255,.85);
  --text:           #0d0d0d;
  --muted:          rgba(0,0,0,.78);
  --line:           rgba(0,0,0,.08);
  --accent:         #2563eb;
  --accent-text:    #1d4ed8;
  --accent2:        #1d4ed8;
  --accent-dim:     rgba(37,99,235,.08);
  --accent-border:  rgba(37,99,235,.22);
  --surface-1:      rgba(0,0,0,.03);
  --surface-2:      rgba(0,0,0,.06);
  --surface-hover:  rgba(0,0,0,.05);
  --border:         rgba(0,0,0,.1);
  --border-hover:   rgba(37,99,235,.35);
  --topbar-bg:      rgba(249,249,247,.97);
  --header-bg:      rgba(249,249,247,.96);
  --header-border:  rgba(0,0,0,.08);
  --nav-hover:      rgba(0,0,0,.04);
  --input-bg:       rgba(0,0,0,.03);
  --input-border:   rgba(0,0,0,.14);
  --input-focus:    rgba(37,99,235,.18);
  --shadow-sm:      0 2px 12px rgba(0,0,0,.07);
  --shadow:         0 4px 24px rgba(0,0,0,.1);
  --shadow-lg:      0 12px 48px rgba(0,0,0,.14);
  --glow:           0 0 16px rgba(37,99,235,.1), 0 0 32px rgba(37,99,235,.04);
  --glow-sm:        0 0 8px rgba(37,99,235,.08);
  --dot:            rgba(0,0,0,.04);
}
html[data-theme="light"] body {
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
}
html[data-theme="light"] body::before,
html[data-theme="light"] body::after { opacity: 0.3; }
html[data-theme="light"] .nav.nav--open { background: rgba(249,249,247,.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #0d0d0d; }
html[data-theme="light"] .nav.nav--open a { color: #0d0d0d; }
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4 { color: var(--text); }
html[data-theme="light"] .builds-hero h1,
html[data-theme="light"] .builds-hero p { color: #ffffff !important; }
html[data-theme="light"] .hero-px__inner,
html[data-theme="light"] .hero-px__inner h1,
html[data-theme="light"] .hero-px__inner p { color: #ffffff !important; }
html[data-theme="light"] .hero-px__eyebrow { color: #93c5fd !important; }
html[data-theme="light"] .hero__copy,
html[data-theme="light"] .hero__copy h1,
html[data-theme="light"] .hero__copy p,
html[data-theme="light"] .hero__copy .pill,
html[data-theme="light"] .hero__copy .lead,
html[data-theme="light"] .hero__copy .trust__big,
html[data-theme="light"] .hero__copy .trust__small { color: rgba(255,255,255,0.88) !important; }
html[data-theme="light"] .hero__copy h1 { color: #ffffff !important; }
html[data-theme="light"] .hero__card,
html[data-theme="light"] .hero__card h3,
html[data-theme="light"] .hero__card p,
html[data-theme="light"] .hero__card li,
html[data-theme="light"] .hero__card span,
html[data-theme="light"] .hero__card div,
html[data-theme="light"] .hero__card .muted { color: rgba(255,255,255,0.82) !important; }
html[data-theme="light"] .hero__card h3 { color: #ffffff !important; font-weight: 700; }
html[data-theme="light"] .section--alt { background: var(--bg-alt); }
html[data-theme="light"] .build-card__img { background: rgba(0,0,0,.02); }
html[data-theme="light"] .quote-modal__inner { background: #ffffff; border-color: rgba(0,0,0,.12); box-shadow: 0 24px 64px rgba(0,0,0,.18); }
html[data-theme="light"] .quote-modal__close { background: #f0f0ec; border-color: rgba(0,0,0,.1); color: #0d0d0d; }
html[data-theme="light"] .quote-modal__close:hover { background: #e0e0dc; }
html[data-theme="light"] .modal-specs { background: #f5f5f2; border-color: rgba(0,0,0,.1); }
html[data-theme="light"] .modal-specs .modal-spec { color: #0d0d0d; }
html[data-theme="light"] .quote-modal input { background: #f5f5f2; border-color: rgba(0,0,0,.15); color: #0d0d0d; }
html[data-theme="light"] .quote-modal input:focus { border-color: var(--accent-text); background: #fff; }
html[data-theme="light"] .modal-config-row { background: rgba(6,182,212,.06); }
html[data-theme="light"] .modal-deposit-btn { color: #fff; }
/* The footer is dark in BOTH palettes, so it needs the dark voice's token
   values even in light mode. Setting only background+color left every
   descendant that reads var(--muted) or var(--text) resolving to near-black
   on a near-black ground — invisible on 126 pages. Redeclare the tokens so
   the whole subtree inherits correctly. */
html[data-theme="light"] .footer {
  background: #0d0d0d;
  color: #fff;
  --text:   #ffffff;
  --muted:  rgba(255,255,255,.68);
  --subtle: rgba(255,255,255,.5);
  --border: rgba(255,255,255,.12);
  --line:   rgba(255,255,255,.10);
}
html[data-theme="light"] .footer a { color: rgba(255,255,255,.7); }

/* Trust pills sit on the hero photograph, and .hero__copy forces their text
   white — but .trust__item's own background is var(--panel), which is
   near-white in the light palette, so it rendered white-on-pale-grey. Give
   them a glassy dark ground instead so the white text reads. */
html[data-theme="light"] .hero .trust__item {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}

/* Rating stars are set inline as #f59e0b, which is only 1.9:1 on the light
   sand band. Darken them in the light palette; they stay amber on dark. */
html[data-theme="light"] [style*="#f59e0b"] { color: #b45309 !important; }

/* .btn--ghost takes color: var(--text), which is near-black in the light
   palette — invisible against a dark hero photograph. The heroes' h1 and p
   already had light-mode overrides; the buttons were missed. .bp-hero is the
   builds page, .builds-hero the older markup it replaced. */
html[data-theme="light"] .bp-hero .btn--ghost,
html[data-theme="light"] .builds-hero .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.45);
}
html[data-theme="light"] .nav a { color: rgba(0,0,0,.7); }
html[data-theme="light"] .nav a:hover { color: var(--accent-text); }
html[data-theme="light"] .nav a.active { color: var(--accent-text); }
html[data-theme="light"] .header__phone { color: var(--text); }
html[data-theme="light"] .burger span { background: var(--text); }
html[data-theme="light"] .theme-toggle { color: var(--text); }

.nav.nav--open {
  background: rgba(13,13,13,.96);
}
.aff-amazon { color: #f90 !important; }
.aff-newegg { color: #f60 !important; }
.section--repair { background: rgba(251,191,36,.015); }
.service-eyebrow--repair { color: #fbbf24; }
.build-compat { border-color: rgba(74,222,128,.15); background: rgba(74,222,128,.04); }
.build-compat-item { color: rgba(74,222,128,.85); }

/* ── Theme toggle button ───────────────────────────────────── */
.header__right {
  display: flex; align-items: center; gap: 10px; flex: 1 1 0; justify-content: flex-end;
}
.header__phone {
  font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none;
  opacity: .85; letter-spacing: -.01em; white-space: nowrap;
  transition: opacity .15s, color .15s;
  padding: 6px 12px; border-radius: var(--radius);
  border: 1px solid var(--border);
}
.header__phone:hover { opacity: 1; color: var(--accent-text); border-color: var(--accent-border); }
@media (max-width: 860px) {
  .header__phone {
    font-size: 12px;
    padding: 5px 8px;
    border: none;
    opacity: 1;
  }
}
/* ── Header cart icon ─────────────────────────────────────── */
.header__cart {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--surface-1);
  cursor: pointer; color: var(--muted); flex-shrink: 0; position: relative;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.header__cart:hover { background: var(--surface-2); border-color: var(--accent-border); color: var(--accent-text); }
.header__cart svg { display: block; pointer-events: none; }
.header-cart-badge {
  position: absolute; top: -5px; right: -5px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
  pointer-events: none;
}
html[data-theme="light"] .header__cart { color: var(--text); }

/* keep theme-toggle styles in case any page still references it */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-1);
  cursor: pointer; color: var(--muted); flex-shrink: 0;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.theme-toggle:hover { background: var(--surface-2); border-color: var(--accent-border); color: var(--accent-text); }
.theme-toggle svg { display: block; pointer-events: none; }

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Offset all anchor targets by sticky header height */
[id] { scroll-margin-top: 80px; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--text);
  line-height: 1.78;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ambient blue orbs — Mirror's Edge edge lighting */
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(59,130,246,.04) 0%, transparent 65%);
  top: -300px; right: -250px;
  animation: driftA 28s ease-in-out infinite;
}
body::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,.025) 0%, transparent 65%);
  bottom: -200px; left: -180px;
  animation: driftB 34s ease-in-out infinite;
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.22; font-weight: 600; color: var(--text); }
h1 { font-size: clamp(30px, 5vw, 48px); font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.018em; font-weight: 600; }
h3 { font-size: clamp(15px, 1.8vw, 17px); font-weight: 600; }
h4 { font-size: 14px; font-weight: 600; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: .8; }
p { line-height: 1.7; }

.muted  { color: var(--muted); }
.tiny   { font-size: 12px; letter-spacing: .02em; }
.lead   { font-size: 17px; color: var(--muted); line-height: 1.85; margin-bottom: 16px; }
.hero .lead { color: rgba(255,255,255,0.85); text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.accent { background: linear-gradient(90deg, var(--accent), var(--accent2));
          -webkit-background-clip: text; background-clip: text; color: transparent; }
em      { font-style: italic; color: var(--accent-text); }

/* ── Layout ────────────────────────────────────────────────── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 48px; }
.grid      { display: grid; gap: 24px; }
.cards     { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Parallax Hero ─────────────────────────────────────────── */
.hero-px {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 64px; /* offset for sticky header */
}
.hero-px__bg {
  position: absolute;
  inset: 0;
  /* Image reference removed: IMG_6839.JPG was deleted in 4f3a102 and no page
     currently uses .hero-px. Set a background here if this block is revived. */
  z-index: 0;
}
.hero-px__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
}
.hero-px__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  will-change: transform;
  padding: 48px 56px;
  max-width: 900px;
  width: 100%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-px__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 24px;
  opacity: 0;
  animation: slideUp .6s var(--ease) .1s both;
}
.hero-px__h1 {
  font-size: clamp(32px, 5.5vw, 62px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.0;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 4px 32px rgba(0,0,0,0.6);
  margin-bottom: 40px;
  opacity: 0;
  animation: slideUp .8s var(--ease) .2s both;
}
.hero-px__scroll {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
  opacity: 0;
  animation: slideUp .6s var(--ease) .6s both;
}
.hero-px__sub {
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 32px;
  opacity: 0;
  animation: slideUp .7s var(--ease) .35s both;
}
.hero-px__ctas {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px;
  opacity: 0; animation: slideUp .6s var(--ease) .45s both;
}
.hero-px__trust {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  flex-wrap: wrap; font-size: 12px; color: var(--muted);
  opacity: 0; animation: slideUp .6s var(--ease) .55s both;
}
.hero-px__trust span { white-space: nowrap; }

/* ── Diagnostic snap section ───────────────────────────────── */
.diag-snap {
  padding: 144px 0;
  position: relative;
}
.diag-snap__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}
.diag-snap__q {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
}
@media (max-width: 900px) {
  .diag-snap__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-px__h1 { font-size: clamp(28px, 8vw, 52px); }
}
@media (max-width: 560px) {
  .hero-px__h1 { font-size: clamp(26px, 9vw, 42px); }
}

/* ── Sticky top wrapper ────────────────────────────────────── */
.site-top {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── Footer info row ───────────────────────────────────────── */
.footer__info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.footer__contact-row { display: flex; align-items: center; gap: 8px; }
.footer__contact-row a { color: var(--accent-text); font-weight: 500; transition: opacity var(--t); }
.footer__contact-row a:hover { opacity: .7; text-decoration: underline; }
@media (max-width: 640px) {
  .footer__info-row { flex-direction: column; text-align: center; }
  .footer__contact-row { justify-content: center; }
}

/* ── Header / Nav ──────────────────────────────────────────── */
.header {
  position: relative;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  transition: padding var(--t) var(--ease);
}
.header--scrolled { padding: 10px 24px; }

.brand { display: flex; gap: 10px; align-items: center; overflow: hidden; flex: 1 1 0; min-width: 0; }
.brand__mark { display: none; }
.brand__text {
  overflow: hidden;
  max-width: 280px;
  opacity: 1;
  transition: max-width .35s var(--ease), opacity .3s var(--ease);
}
.brand__name { display: block; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--text); }
.brand__tag  { display: none; }

.header--scrolled .brand__text { max-width: 280px; opacity: 1; }

.nav { display: flex; gap: 0; align-items: center; }
.nav a {
  font-size: 14px;
  color: rgba(255,255,255,.78);
  padding: 8px 13px;
  border-radius: var(--radius);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  position: relative;
  font-weight: 500;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--nav-hover); opacity: 1; }
.nav a.active { color: var(--text); font-weight: 600; }
.nav a.active::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* ── Nav dropdowns ─────────────────────────────────────────── */
.nav__item {
  position: relative;
}
.nav__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  white-space: nowrap;
  border: none;
  background: none;
  font-family: inherit;
}
.nav__trigger:hover,
.nav__item:hover .nav__trigger { color: var(--text); background: var(--nav-hover); }
.nav__trigger::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
  transition: transform .18s var(--ease);
}
.nav__item:hover .nav__trigger::after { transform: rotate(225deg) translateY(-2px); }
/* trigger is now an <a> — keep its button-era look over the generic .nav a rules */
.nav a.nav__trigger { color: var(--muted); padding: 7px 14px; font-weight: 500; text-decoration: none; }
.nav a.nav__trigger:hover,
.nav__item:hover a.nav__trigger { color: var(--text); background: var(--nav-hover); }
html[data-theme="light"] .nav a.nav__trigger { color: var(--muted); }
html[data-theme="light"] .nav a.nav__trigger:hover,
html[data-theme="light"] .nav__item:hover a.nav__trigger { color: var(--text); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--header-bg, rgba(8,12,18,.97));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* visibility flips instantly on the way IN and is delayed on the way OUT.
     Transitioning it symmetrically gated focusability on a 180ms animation, so
     a fast keyboard user could tab straight past a dropdown that had not become
     focusable yet. Focus must never wait on a transition. */
  transition: opacity .18s var(--ease), visibility 0s linear .18s, transform .18s var(--ease);
  z-index: 150;
}
/* :focus-within is load-bearing, not polish. The closed state below is
   `visibility:hidden`, which removes the links from the tab order — so without
   this a keyboard user on desktop reached ZERO of the 27 dropdown destinations,
   including every managed-IT funnel entry. Verified by tabbing, not by reading. */
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown,
.nav__item.open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s var(--ease), visibility 0s, transform .18s var(--ease);
}
.nav__dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  white-space: nowrap;
}
.nav__dropdown a:hover { color: var(--text); background: var(--nav-hover); opacity: 1; }
.nav__dropdown a .drop-icon { font-size: 16px; flex-shrink: 0; }
.nav__dropdown a .drop-label { flex: 1; }
.nav__dropdown a .drop-price { font-size: 11px; color: var(--accent-text); font-weight: 700; }
.nav__dropdown-divider { height: 1px; background: var(--border); margin: 4px 6px; }

/* ── Filters (global) ─────────────────────────────────────── */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-btn {
  padding: 6px 16px; border-radius: 2px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--panel); color: var(--muted);
  cursor: pointer; transition: all .15s var(--ease); font-family: inherit; white-space: nowrap;
}
.filter-btn:hover { border-color: var(--accent-text); color: var(--accent-text); }
.filter-btn.active { background: var(--accent); border-color: var(--accent-text); color: #fff; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  letter-spacing: .02em;
  box-shadow: none;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  position: relative;
}
.btn:hover {
  opacity: 1;
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: var(--glow-sm);
}
.btn:active { box-shadow: none; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: rgba(255,255,255,.18);
  box-shadow: none;
}
.btn--ghost:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.35);
  box-shadow: none;
}
.hero-px .btn--ghost,
.hero .btn--ghost {
  color: #ffffff;
  border-color: rgba(255,255,255,.5);
}
.hero-px .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.8);
}
.btn--ghost:active { transform: translateY(0); box-shadow: none; }

.btn--sm { padding: 7px 16px; font-size: 13px; }
.btn--full { width: 100%; }

/* ── Pricing plan card (shared; also defined inline on business.html) ── */
.plan-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; position: relative; }
.plan-card.featured { border-color: var(--accent-text); background: var(--accent-dim); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 14px; border-radius: 99px; white-space: nowrap; }
.plan-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.plan-price { font-size: 36px; font-weight: 900; letter-spacing: -.03em; margin-bottom: 4px; }
.plan-price span { font-size: 14px; font-weight: 400; color: var(--muted); }
.plan-desc { font-size: 13px; color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
.plan-features { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 9px; flex: 1; }
.plan-features li { font-size: 13px; display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.plan-features li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }

/* ── Hero split (headline + side card) — stacks on mobile ────── */
.hero-split { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
@media (max-width: 760px) { .hero-split { grid-template-columns: 1fr; gap: 24px; } }

/* ── Burger ────────────────────────────────────────────────── */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--t) var(--ease);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.burger:hover { background: var(--surface-2); }
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.burger::after { content: none; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
html[data-theme="light"] .burger { color: var(--text); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 84px 0 80px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -60px; left: 10%;
  width: 700px; height: 520px;
  background: radial-gradient(ellipse, rgba(37,99,235,.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
@media (prefers-color-scheme: dark) {
  .hero::before { background: radial-gradient(ellipse, rgba(56,189,248,.06) 0%, rgba(167,139,250,.03) 45%, transparent 70%); }
}
.hero__bg {
  display: block;
  position: absolute;
  inset: 0;
  /* Real bench photo. The previous file (IMG_6840.JPG) was deleted in 4f3a102 but
     this reference was left behind, so the hero had no background for months. */
  background: url('images/repair-hero.jpg') center 38% / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
}
.hero__graphic { display: none; }

.hero__copy .pill   { animation: slideUp .6s var(--ease) .05s both; }
.hero__copy h1      { animation: slideUp .65s var(--ease) .15s both; }
.hero__copy .lead   { animation: slideUp .6s var(--ease) .28s both; }
.hero__copy .cta    { animation: slideUp .6s var(--ease) .38s both; }
.hero__copy .trust  { animation: slideUp .6s var(--ease) .48s both; }
.hero__card         { animation: slideUp .8s var(--ease) .22s both, float 7s ease-in-out 1.02s infinite; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__copy {
  max-width: 660px;
  padding: 40px 48px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Hero text sits on a dark photo in BOTH themes — force white unconditionally so
   in-app browsers (Facebook, Instagram, etc.) that inject their own heading-color
   overrides can't turn it black. */
.hero__copy, .hero__copy h1, .hero__copy p, .hero__copy .pill, .hero__copy .lead,
.hero__copy .trust__big, .hero__copy .trust__small,
.hero-px__inner, .hero-px__inner h1, .hero-px__inner p,
.hero__card, .hero__card h3, .hero__card p, .hero__card li, .hero__card span, .hero__card div,
.builds-hero h1, .builds-hero p {
  color: rgba(255,255,255,0.9) !important;
}
.hero__copy h1, .hero-px__inner h1, .hero__card h3, .builds-hero h1 { color: #ffffff !important; }

/* ── Pill ──────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 2px;
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent-text);
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* ── CTA group ─────────────────────────────────────────────── */
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 40px 0 60px; }

/* ── Trust bar ─────────────────────────────────────────────── */
.trust { display: flex; gap: 10px; flex-wrap: wrap; }
.trust__item {
  padding: 9px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.trust__item:hover { border-color: var(--accent-border); box-shadow: var(--shadow); }
.trust__big   { display: block; font-weight: 700; font-size: 13px; }
.trust__small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Hero card ─────────────────────────────────────────────── */
.hero__card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(13,13,13,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  will-change: transform;
}

/* ── Sections ──────────────────────────────────────────────── */
.section { padding: 144px 0; position: relative; }
.section::before {
  content: '';
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.section--alt { background: var(--bg-alt); }
.section--alt::before { display: none; }

.section--repair { background: rgba(251,191,36,.04); }
.section--repair::before { background: linear-gradient(90deg, transparent, rgba(251,191,36,.2), transparent); }
@media (prefers-color-scheme: dark) {
  .section--repair { background: rgba(251,191,36,.015); }
}

/* ── Service eyebrow labels ─────────────────────────────────── */
.service-eyebrow { display:inline-block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; padding:4px 12px; border-radius: 2px; margin-bottom:14px; }
.service-eyebrow--repair { background:rgba(251,191,36,.12); color:#b45309; border:1px solid rgba(251,191,36,.35); }
.service-eyebrow--builds { background:var(--accent-dim); color:var(--accent-text); border:1px solid var(--accent-border); }
@media (prefers-color-scheme: dark) {
  .service-eyebrow--repair { color:#fbbf24; }
}

/* ── Service cards ──────────────────────────────────────────── */
.service-icon {
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  margin-bottom: 20px;
  flex-shrink: 0;
}
.card--repair:hover { border-color:rgba(251,191,36,.3); background:rgba(251,191,36,.04); }
.section__head { margin-bottom: 88px; }
.section__head h2 { margin-bottom: 18px; }
.section__head p  { margin: 0; font-size: 16px; max-width: 560px; line-height: 1.8; }
.section__head.centered { text-align: center; }
.section__head.centered p { margin-left: auto; margin-right: auto; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 40px;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.09);
}
.card--link { cursor: pointer; }
.card h3 { margin-bottom: 10px; }
.card--highlight {
  border-color: var(--accent-border);
  background: var(--accent-dim);
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px var(--accent-border);
}
/* Mirror's Edge glow stripe on highlighted cards */
.card--highlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(59,130,246,.7), 0 0 24px rgba(59,130,246,.3);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── Product image ─────────────────────────────────────────── */
.product-img { width:100%; height:200px; border-radius:var(--radius); overflow:hidden; margin-bottom:18px; }
.product-img img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Specs ─────────────────────────────────────────────────── */
.specs { margin-top: 16px; }
.specs strong { display:block; font-size:18px; font-weight:700; color:var(--accent-text); margin-bottom:10px; }
.list { padding-left:20px; display:grid; gap:4px; }
.list li { color:var(--muted); font-size:14px; }

/* ── Tabs ──────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--surface-1);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: fit-content;
}
.tab-btn {
  padding: 7px 18px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  letter-spacing: .01em;
}
.tab-btn:hover { color: var(--text); background: var(--surface-2); }
.tab-btn.active {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) {
  .tab-btn.active { background: var(--accent-dim); border-color: var(--accent-border); }
}
.tab-content { animation: fadeUp .3s var(--ease); }
.hidden { display: none !important; }

/* ── Steps ─────────────────────────────────────────────────── */
.steps { display: grid; gap: 8px; }
.step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.step:hover { border-color: var(--accent-border); box-shadow: var(--shadow); }
.step__num {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-text);
  flex-shrink: 0;
}
.step h3 { margin-bottom: 4px; }

/* ── Forms ─────────────────────────────────────────────────── */
.form { display: grid; gap: 14px; margin-top: 20px; }
.sms-consent-label { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 12px; font-size: 13px; font-weight: 400; color: var(--muted); cursor: pointer; line-height: 1.55; }
.sms-consent-label input[type="checkbox"] { width: 22px !important; height: 22px !important; flex-shrink: 0; margin-top: 1px; accent-color: var(--accent-text); cursor: pointer; }
.sms-consent-label a { color: var(--accent-text); }
/* Larger tap target on mobile */
@media (max-width: 768px) {
  .sms-consent-label { padding: 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); }
  .sms-consent-label input[type="checkbox"] { width: 24px !important; height: 24px !important; }
}
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
input, textarea, select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--input-focus);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .5; }
select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
option { background: #1a1a1a; color: #f8fafc; }
option:hover, option:checked { background: #2a2a2a; color: #ffffff; }

/* ── Checkbox label ────────────────────────────────────────── */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-1);
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.checkbox-label:hover { border-color: var(--accent-border); background: var(--accent-dim); color: var(--text); }
.checkbox-label input[type="checkbox"] {
  width: 20px; height: 20px;
  flex-shrink: 0; margin-top: 1px;
  accent-color: var(--accent-text);
  cursor: pointer;
  border-radius: 4px;
}
.checkbox-label:has(input:checked) {
  border-color: var(--accent-text);
  background: var(--accent-dim);
  color: var(--text);
}
/* Also style the SMS consent checkbox larger */
.sms-consent-label input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent-text);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Contact ───────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact h2 { margin-bottom: 10px; }
.contact__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chip {
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.chip:hover { border-color: var(--accent-border); color: var(--accent-text); opacity: 1; box-shadow: var(--shadow); }
.fineprint { margin-top: 20px; }
.fineprint p { margin: 6px 0; line-height: 1.55; }

/* ── Quotes ────────────────────────────────────────────────── */
.quote {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 12px;
  position: relative;
  padding-left: 18px;
}
.quote::before {
  content: '"';
  position: absolute;
  left: 0; top: -4px;
  font-size: 24px;
  font-weight: 900;
  color: var(--accent-text);
  line-height: 1;
  opacity: .4;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  padding: 32px 0;
  border-top: 1px solid var(--line);
  margin-top: 24px;
  background: var(--bg-alt);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 32px;
  align-items: center;
}
.footer__copy { display: flex; flex-direction: column; gap: 6px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.footer__links a { color: var(--muted); transition: color var(--t); }
.footer__links a:hover { color: var(--accent-text); opacity: 1; }
.footer__social { display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.footer__social a { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius); background:var(--surface-1); border:1px solid var(--border); color:var(--muted); transition:background .15s, color .15s, border-color .15s, box-shadow .15s; }
.footer__social a:hover { background:var(--accent-dim); border-color:var(--accent-border); color:var(--accent-text); box-shadow:var(--shadow-sm); }
.footer__social a svg { display:block; }

/* ── Survey ────────────────────────────────────────────────── */
.survey {
  background: var(--panel);
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  animation: fadeUp .35s var(--ease);
}
.survey-header { margin-bottom: 24px; }
.survey-header h3 { margin-bottom: 16px; }
.progress-bar { height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .35s var(--ease); }
.progress-text { font-size: 12px; color: var(--muted); }
.survey-step { animation: fadeUp .3s var(--ease); }
.survey-step h4 { margin-bottom: 18px; font-size: 17px; }
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-label {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius);
  background: var(--surface-1); border: 1px solid var(--border);
  cursor: pointer; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); font-weight: 500;
}
.radio-label:hover { background: var(--accent-dim); border-color: var(--accent-border); }
.radio-label input[type="radio"] { accent-color: var(--accent-text); width: 16px; height: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; }
.survey-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 24px; }

/* ── SMS consent — shared card-style checkbox ───────────────── */
.sms-consent-label {
  display: flex; flex-direction: row; align-items: flex-start; gap: 14px;
  padding: 18px 20px; margin-bottom: 20px;
  background: var(--panel); border: 1.5px solid var(--border); border-radius: var(--radius);
  cursor: pointer;
  font-weight: 400; font-size: 13px; color: var(--text); line-height: 1.6;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.sms-consent-label:hover { border-color: var(--accent-text); }
.sms-consent-label:has(input:checked) { border-color: var(--accent-text); background: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-dim); }
.sms-consent-label input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; flex-shrink: 0; margin: 0;
  border: 2px solid var(--border); border-radius: 5px;
  background: var(--input-bg); cursor: pointer;
  transition: all .18s; position: relative;
}
.sms-consent-label input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent-text); }
.sms-consent-label input[type="checkbox"]:checked::after {
  content: ''; position: absolute;
  left: 7px; top: 3px; width: 6px; height: 11px;
  border: 2.5px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg);
}
.sms-consent-label .sms-required {
  display: inline-block; font-style: normal;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(239,68,68,.12); color: #ef4444;
  margin-left: 4px; vertical-align: 1px;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ── Reveal animations ─────────────────────────────────────── */
/* Progressive enhancement, not a default. Scoped to .js because without it
   `opacity:0` was the permanent state when JavaScript did not run — 37 of 40
   blocks on /builds and 9 of 16 on the homepage never appeared at all. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
/* The comment further down claims "All motion respects prefers-reduced-motion."
   It did not — the three reduced-motion blocks covered the call bar, a nav
   pseudo-element and button letter-spacing, while .reveal governs most of the
   content on the site and animated for everyone regardless. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--left, .reveal--right {
    opacity: 1; transform: none; transition: none; transition-delay: 0s;
  }
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal--left  { transform: translateX(-16px); }
.reveal--right { transform: translateX(16px); }
.reveal--left.is-visible, .reveal--right.is-visible { transform: none; }
.reveal--delay-1 { transition-delay: .06s; }
.reveal--delay-2 { transition-delay: .12s; }
.reveal--delay-3 { transition-delay: .18s; }
.reveal--delay-4 { transition-delay: .24s; }
.reveal--delay-5 { transition-delay: .30s; }
.reveal--delay-6 { transition-delay: .36s; }

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes slideUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes driftA { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(-40px,60px) scale(1.08);} 100%{transform:translate(20px,-30px) scale(0.96);} }
@keyframes driftB { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(50px,-40px) scale(1.05);} 100%{transform:translate(-30px,50px) scale(1.02);} }
@keyframes float { 0%,100%{transform:translateY(0px);} 50%{transform:translateY(-10px);} }

/* ── Responsive: tablet ────────────────────────────────────── */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 56px 0 60px; }
  .contact { grid-template-columns: 1fr; gap: 64px; }
  .section { padding: 96px 0; }
  .section__head { margin-bottom: 60px; }
  .container { padding: 0 32px; }
}
@media (max-width: 700px) {
  /* service split cards stack on mobile */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* all-services grid: 1 col on mobile */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

  /* compact service cards on mobile */
  .card[style*="padding:48px"] { padding: 28px 24px !important; gap: 14px !important; }
  .card[style*="padding:40px"] { padding: 24px !important; }
  .card[style*="padding:36px"] { padding: 24px !important; }

  /* tighten section padding on mobile */
  [style*="padding-top:80px"] { padding-top: 48px !important; }
  [style*="padding-bottom:80px"] { padding-bottom: 48px !important; }
  [style*="padding:100px 0"] { padding: 64px 0 !important; }

  /* hide lower-priority checklist items in service cards on mobile */
  .card .mobile-hide { display: none !important; }
}

/* ── Nav: mobile ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav { display: none; }
  .burger { display: flex; }
  /* nav is gone on mobile — let the brand take its natural width so it never truncates */
  .brand { flex: 0 0 auto; min-width: auto; }
  .header__right { flex: 0 0 auto; }
  .brand__name { font-size: 14px; letter-spacing: -.2px; }
  /* Hide phone from header on mobile — sticky bar has it */
  .header__phone { display: none; }

  /* Backdrop */
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    z-index: 190;
    animation: fadeIn .2s ease;
  }
  .nav-backdrop.visible { display: block; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .nav.nav--open {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-left: 1px solid var(--border);
    background: #0d0d0d;
    box-shadow: -8px 0 48px rgba(0,0,0,.5);
    z-index: 200;
    animation: slideIn .22s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }
  @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

  .nav.nav--open::before {
    content: 'Menu';
    display: block;
    padding: 20px 20px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
  }

  .nav.nav--open a {
    display: block;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: background .12s, color .12s;
  }
  .nav.nav--open a:last-of-type { border-bottom: none; }
  .nav.nav--open a:hover,
  .nav.nav--open a:active { background: var(--surface-1); color: var(--accent-text); }
  .nav.nav--open a[style*="color:var(--accent-text)"] { color: var(--accent-text) !important; }

  /* Phone number at bottom of mobile menu */
  .nav.nav--open::after {
    content: '(706) 203-2563';
    display: block;
    margin-top: auto;
    padding: 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-text);
    border-top: 1px solid var(--line);
  }

  /* Dropdown categories become tap-to-expand accordions in the mobile drawer */
  .nav.nav--open .nav__item { display: block; width: 100%; border-bottom: 1px solid var(--line); }
  .nav.nav--open .nav__trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 15px 20px; margin: 0; border-radius: 0;
    font-size: 15px; font-weight: 700; color: var(--text);
    background: none; white-space: normal;
  }
  .nav.nav--open .nav__trigger::after {
    content: '+'; display: block; width: auto; height: auto;
    border: none; transform: none; opacity: .55;
    font-size: 20px; font-weight: 400; line-height: 1;
  }
  .nav.nav--open .nav__item.open .nav__trigger { color: var(--accent-text); }
  .nav.nav--open .nav__item.open .nav__trigger::after { content: '\2013'; }
  .nav.nav--open .nav__dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; min-width: 0; padding: 0; margin: 0;
    background: var(--surface-1); border: none; border-radius: 0;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav.nav--open .nav__item.open .nav__dropdown { display: block; }
  .nav.nav--open .nav__dropdown a {
    padding: 13px 20px 13px 38px; font-size: 14px; font-weight: 500;
    color: var(--muted); border-bottom: 1px solid var(--line); white-space: normal;
  }
  .nav.nav--open .nav__dropdown a:last-child { border-bottom: none; }
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  h1 { font-size: 30px; letter-spacing: -.3px; }
  h2 { font-size: 23px; }
  h3 { font-size: 17px; }
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }
  .section__head { margin-bottom: 48px; }
  .hero { padding: 44px 0 52px; }
  .hero__grid { gap: 36px; }
  .hero .lead { font-size: 16px; line-height: 1.8; }
  .hero__copy { text-align: center; }
  .cta { justify-content: center; gap: 12px; margin: 32px 0 44px; }
  .trust { justify-content: center; }
  .trust__item { padding: 10px 16px; }
  .trust__big { font-size: 13px; }
  .trust__small { font-size: 10px; }
  .btn { padding: 13px 22px; font-size: 14px; }
  .btn--sm { padding: 8px 16px; font-size: 12px; }
  .btn--full { padding: 14px; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .trust-sep { display: none; }
  .card { padding: 28px 24px; }
  .card h3 { font-size: 17px; margin-bottom: 10px; }
  .step { grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 20px; }
  .step__num { width: 40px; height: 40px; font-size: 16px; }
  .tabs { width: 100%; justify-content: stretch; }
  .tab-btn { flex: 1; padding: 9px 6px; font-size: 12px; text-align: center; }
  .form { gap: 14px; }
  input, textarea, select { padding: 12px 14px; font-size: 15px; }
  .contact { gap: 52px; }
  .contact__chips { gap: 10px; }
  .chip { font-size: 12px; padding: 9px 14px; }
  .survey { padding: 22px 18px; }
  .radio-label { padding: 12px 14px; font-size: 14px; }
  .footer__grid { grid-template-columns: 1fr; text-align: center; } .footer__social { justify-content: center; }
  .footer { padding: 40px 0; }
  .pill { font-size: 10px; padding: 5px 12px; margin-bottom: 24px; }
}

/* ── SVG card icons ────────────────────────────────────────── */
.card-icon {
  display: block; width: 32px; height: 32px;
  stroke: var(--accent); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 16px; flex-shrink: 0;
}
.card-icon-wrap { display: inline-flex; align-items: center; margin-right: 8px; vertical-align: middle; }
.card-icon-wrap .card-icon { width: 22px; height: 22px; margin-bottom: 0; }
[style*="font-size:36px"] .card-icon { width: 36px; height: 36px; }
[style*="font-size:28px"] .card-icon { width: 28px; height: 28px; }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-inner {
  background: #111111;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  max-width: 400px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(59,130,246,.1);
  max-height: 90vh;
  overflow-y: auto;
}

/* ── Builds 2-col grid ─────────────────────────────────────── */
#buildsGrid2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
  #buildsGrid2 { grid-template-columns: 1fr !important; }
}

/* ── Repair request 2-col grid ─────────────────────────────── */
.request-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 860px) {
  .request-grid { grid-template-columns: 1fr; gap: 40px; }
  .request-grid .card[style*="padding:40px"] { padding: 28px !important; }
}

/* ── Carousel ─────────────────────────────────────────────── */
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
  min-height: 260px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { scroll-snap-align: start; flex: 0 0 calc((100% - 32px) / 3); min-width: 0; display: flex; }
.carousel__slide .aff-card { width: 100%; }
.carousel__nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px; }
.carousel__btn {
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); background:var(--panel);
  color:var(--text); cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
  flex-shrink:0; box-shadow:var(--shadow-sm);
}
.carousel__btn:hover { background:var(--accent-dim); border-color:var(--accent-border); }
.carousel__dots { display:flex; gap:0; align-items:center; }
/* WCAG 2.5.8 measures the hit area, not the ink. The dot stays 6px visually;
   the button around it is 24x24 with transparent padding, which is why the
   flex gap is 0 — the padding now provides the spacing. */
.carousel__dot {
  width:24px; height:24px; border-radius:50%; padding:0;
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:opacity var(--t) var(--ease);
}
.carousel__dot::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--border); transition:all var(--t) var(--ease);
}
.carousel__dot.active::before { background:var(--accent); width:18px; border-radius:3px; }
@media (max-width: 900px) { .carousel__slide { flex: 0 0 calc((100% - 16px) / 2); } }
@media (max-width: 560px) { .carousel__slide { flex: 0 0 100%; } }

/* ── Affiliate cards ───────────────────────────────────────── */
.aff-card { display:flex; flex-direction:column; }
.aff-img-wrap {
  width:100%; height:130px; border-radius:var(--radius); overflow:hidden;
  margin-bottom:12px; background:#fff; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; padding:10px;
  flex-shrink:0;
}
.aff-img { width:100%; height:100%; object-fit:contain; }
.aff-badge {
  display:inline-block; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  padding:3px 9px; border-radius:var(--radius);
  background:var(--accent-dim); color:var(--accent-text); border:1px solid var(--accent-border);
  margin-bottom:8px; width:fit-content;
}
.aff-card h3 { font-size:14px; margin-bottom:5px; line-height:1.3; }
.aff-desc {
  font-size:12px; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; line-clamp:3; overflow:hidden;
}
.aff-why { font-size:12px; color:var(--muted); margin:8px 0 0; font-style:italic; opacity:.7; }
.aff-price { font-size:19px; font-weight:800; color:var(--accent-text); margin:12px 0 0; }
.aff-links {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.aff-links a {
  flex:1; min-width:80px; text-align:center;
  font-size:12px; font-weight:600; padding:8px 10px;
  border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface-1); color:var(--text);
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.aff-links a:hover { background:var(--surface-2); border-color:var(--accent-border); opacity:1; }
.aff-amazon { border-color:rgba(180,100,0,.4) !important; color:#92400e !important; background:rgba(255,153,0,.1) !important; font-weight:700 !important; }
.aff-amazon:hover { background:rgba(255,153,0,.18) !important; border-color:rgba(180,100,0,.6) !important; }
.aff-newegg { border-color:rgba(180,70,0,.4) !important; color:#9a3412 !important; background:rgba(255,102,0,.1) !important; font-weight:700 !important; }
.aff-newegg:hover { background:rgba(255,102,0,.18) !important; border-color:rgba(180,70,0,.6) !important; }
@media (prefers-color-scheme: dark) {
  .aff-amazon { color:#f90 !important; }
  .aff-newegg { color:#f60 !important; }
}
html[data-theme="dark"] .aff-amazon { color:#f90 !important; }
html[data-theme="dark"] .aff-newegg { color:#f60 !important; }
html[data-theme="light"] .aff-amazon { color:#92400e !important; }
html[data-theme="light"] .aff-newegg { color:#9a3412 !important; }

/* ── Glass utility — sticky panels, drawers, modals ────────── */
.build-purchase,
.co-form-wrap,
.co-summary {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Build cards (products page) ───────────────────────────── */
.build-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.build-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow); transform: translateY(-3px); }
.build-card__header {
  padding: 24px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.build-card__body { padding: 16px 24px; flex: 1; }
.build-card__footer {
  padding: 16px 24px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.build-price {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent-text);
  line-height: 1;
}
.build-price span { font-size: 13px; font-weight: 400; color: var(--muted); }
.build-specs { width: 100%; border-collapse: collapse; margin-top: 12px; }
.build-specs td { padding: 4px 12px 4px 0; font-size: 12px; vertical-align: top; line-height: 1.4; }
.build-specs td:first-child, .build-specs-label { color: var(--muted); font-weight: 600; white-space: nowrap; width: 90px; padding: 4px 12px 4px 0; font-size: 12px; vertical-align: top; }
.build-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 2px;
}
.build-status {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 2px; border: 1px solid;
}
.build-compat {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid rgba(34,197,94,.2); background: rgba(34,197,94,.05);
  display: grid; gap: 4px;
}
.build-compat-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #16a34a; }
@media (prefers-color-scheme: dark) {
  .build-compat { border-color: rgba(74,222,128,.15); background: rgba(74,222,128,.04); }
  .build-compat-item { color: rgba(74,222,128,.85); }
}
.build-highlights { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.build-highlight {
  font-size: 11px; padding: 3px 10px; border-radius: 2px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--muted);
}
.build-note {
  font-size: 11px; color: var(--muted); margin-top: 10px;
  padding: 8px 10px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-1); line-height: 1.5;
}

/* ── Build survey v2 ───────────────────────────────────────── */
.step-dot {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  border:1.5px solid var(--border); background:var(--surface-1); color:var(--muted);
  transition:all .25s;
}
.step-dot.active { border-color:var(--accent-text); background:var(--accent-dim); color:var(--accent-text); }
.step-dot.done   { border-color:var(--accent-text); background:var(--accent); color:#fff; }
.step-line { flex:1; height:1px; background:var(--border); max-width:60px; transition:background .25s; }
.step-line.done { background:var(--accent); }

.use-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:860px; margin:0 auto; }
.use-card {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:20px 14px; border-radius:var(--radius-lg);
  border:1px solid var(--border); background:var(--panel);
  box-shadow:var(--shadow-sm);
  cursor:pointer; transition:border-color .2s, background .2s, transform .2s, box-shadow .2s; gap:6px;
}
.use-card input { display:none; }
.use-card:hover { border-color:var(--accent-border); background:var(--accent-dim); transform:translateY(-2px); box-shadow:var(--shadow); }
.use-card:has(input:checked) { border-color:var(--accent-text); background:var(--accent-dim); box-shadow:var(--shadow); }
.use-icon { font-size:26px; margin-bottom:4px; }
.use-name { font-weight:700; font-size:14px; color:var(--text); }
.use-desc { font-size:12px; color:var(--muted); line-height:1.5; }

.budget-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:700px; margin:0 auto; }
.budget-card {
  display:flex; flex-direction:column; gap:4px;
  padding:18px 20px; border-radius:var(--radius-lg);
  border:1px solid var(--border); background:var(--panel);
  box-shadow:var(--shadow-sm);
  cursor:pointer; transition:border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.budget-card input { display:none; }
.budget-card:hover { border-color:var(--accent-border); transform:translateY(-2px); box-shadow:var(--shadow); }
.budget-card:has(input:checked) { border-color:var(--accent-text); background:var(--accent-dim); }
.budget-range { font-size:18px; font-weight:800; color:var(--accent-text); }
.budget-label { font-weight:700; font-size:14px; color:var(--text); }
.budget-desc  { font-size:13px; color:var(--muted); line-height:1.5; }

.pref-grid { display:flex; flex-wrap:wrap; gap:8px; max-width:700px; margin:0 auto; justify-content:center; }
.pref-chip {
  display:flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--panel);
  cursor:pointer; font-size:14px; font-weight:600; color:var(--muted);
  box-shadow:var(--shadow-sm);
  transition:border-color .2s, color .2s, background .2s; user-select:none;
}
.pref-chip input { display:none; }
.pref-chip:hover { border-color:var(--accent-border); color:var(--accent-text); background:var(--accent-dim); }
.pref-chip:has(input:checked) { border-color:var(--accent-text); background:var(--accent-dim); color:var(--accent-text); }

.survey-step-new { animation:fadeUp .3s var(--ease); max-width:900px; margin:0 auto; }

@media (max-width: 700px) {
  .use-grid { grid-template-columns:repeat(2,1fr); }
  .budget-grid { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .use-grid { grid-template-columns:1fr; }
}

/* ── Builds grid (homepage) ────────────────────────────────── */
@media (max-width: 768px) {
  #buildsGrid2 { grid-template-columns: 1fr !important; }
}

/* ── Affiliate cards: tighter on mobile ──────────────────── */
@media (max-width: 768px) {
  .aff-why { display: none; }
  .aff-desc { -webkit-line-clamp: 2; line-clamp: 2; }
  .aff-img-wrap { height: 100px; }
  .aff-links { flex-direction: column; }
  .aff-links a { min-width: unset; text-align: center; }
  .aff-buy-btn { font-size: 13px !important; padding: 10px !important; }
}

/* ── FAQ (websites page) ───────────────────────────────────── */
.faq-item { border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow var(--t) var(--ease); }
.faq-item:hover { box-shadow:var(--shadow); }
.faq-item summary, .faq-item button { all:unset; display:flex; justify-content:space-between; align-items:center; padding:18px 22px; font-weight:600; cursor:pointer; width:100%; box-sizing:border-box; color:var(--text); }
.faq-item .faq-body { padding:0 22px 18px; color:var(--muted); font-size:15px; line-height:1.7; }

/* ── Mirror's Edge glow utilities ──────────────────────────── */

/* Thin glowing blue line — use as a section divider or card accent */
.glow-line {
  display: block;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(59,130,246,.8), 0 0 20px rgba(59,130,246,.35);
  border: none;
  width: 100%;
}

.glow-line--sm {
  width: 48px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(59,130,246,.7), 0 0 16px rgba(59,130,246,.3);
  border-radius: 2px;
  display: block;
  margin-bottom: 20px;
}

/* Cards with left glow edge */
.card--glow-edge {
  border-left: 2px solid var(--accent);
  box-shadow: -4px 0 16px rgba(59,130,246,.2), var(--shadow-sm);
}

/* Section top glow divider */
.section::before {
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.25), transparent);
  box-shadow: 0 0 8px rgba(59,130,246,.1);
}

/* Accent text with glow */
.glow-text {
  color: var(--accent-text);
  text-shadow: 0 0 20px rgba(59,130,246,.5);
}

/* Nav active indicator glow */
.nav a.active::after {
  box-shadow: 0 0 6px rgba(59,130,246,.7);
}

/* ── Sticky mobile call button ─────────────────────────────── */
.mobile-call-bar {
  display: none;
}
@media (max-width: 768px) {
  /* Sits on the page rather than on top of it: translucent, blurred, and
     built from the same theme tokens as everything else so it reads as part
     of the site in both light and dark. It also stays out of the way until
     you've actually scrolled — landing on a page and immediately having the
     bottom covered is what made it feel pushy. */
  .mobile-call-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid var(--border);
    box-shadow: 0 -1px 10px rgba(0,0,0,.14);
    transform: translateY(115%);
    opacity: 0;
    transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .28s ease;
  }
  .mobile-call-bar.mcb-in { transform: translateY(0); opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .mobile-call-bar { transition: opacity .2s ease; transform: none; }
  }

  .mobile-call-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 10px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: .01em;
    transition: background .15s, border-color .15s;
  }
  /* Calling is the action that earns money, so it keeps the accent — but
     without the outer glow, which is what made it shout. */
  .mobile-call-bar .mcb-call {
    background: var(--accent);
    color: #fff;
  }
  .mobile-call-bar .mcb-call:active { background: color-mix(in srgb, var(--accent) 85%, #000); }
  .mobile-call-bar .mcb-book {
    background: var(--surface-1);
    color: var(--text);
    border: 1px solid var(--border);
  }
  .mobile-call-bar .mcb-book:active { background: var(--accent-dim); border-color: var(--accent-border); }
  .mobile-call-bar .mcb-close {
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 19px; line-height: 1;
    padding: 0; flex-shrink: 0; font-family: inherit;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    opacity: .6; transition: opacity .15s;
  }
  .mobile-call-bar .mcb-close:hover,
  .mobile-call-bar .mcb-close:focus-visible { opacity: 1; }
  /* Only reserve footer space once the bar is actually on screen, so pages
     don't carry dead space at the bottom before it appears. */
  body.mcb-active { padding-bottom: 64px; }
}

/* Fixed 3D PC background */
.pcbg {
  position: fixed;
  right: 6%; top: 50%;
  transform: translateY(-50%);
  width: min(420px, 36vw);
  pointer-events: none;
  z-index: -1;
  perspective: 900px;
}
.pcbg__tilt {
  transform: rotateX(14deg) rotateY(-12deg) rotateZ(3deg);
  transform-style: preserve-3d;
}
.pcbg__svg { width: 100%; height: auto; display: block; opacity: 0.55; }
.pcbg-part { will-change: transform, opacity; }
@media (max-width: 1100px) { .pcbg { right: 2%; width: min(320px, 32vw); } .pcbg__svg { opacity: 0.35; } }
@media (max-width: 800px) { .pcbg { right: 50%; transform: translate(50%,-50%); width: min(280px, 60vw); } .pcbg__svg { opacity: 0.15; } }
@media (max-width: 500px) { .pcbg { display: none; } }

/* ── Techy accents + frosted-glass hover ───────────────────── */
:root { --font-mono: ui-monospace,'SF Mono','Cascadia Code',Menlo,Consolas,monospace; }
.eyebrow-tech { font-family: var(--font-mono); letter-spacing: .22em !important; font-weight: 600 !important; }
.heading-tech { letter-spacing: -.045em; }
/* subtle frosted hover: blue on buttons, grey in nav */
.btn:hover { background: rgba(37,99,235,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nav a:hover,
.header__cart:hover,
.header__phone:hover { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nav__item { position: relative; display: inline-flex; align-items: center; }

/* ══════════════════════════════════════════════════════════════════════
   B2B PAGE LAYER  —  add class="page--b2b" to <body>
   ══════════════════════════════════════════════════════════════════════
   One design system, two voices. Business IT and Websites sell to people
   who are comparing vendors and expect a software-company look — softer
   corners, more air, calmer surfaces. Repair and Builds stay warm and
   founder-led, because there the differentiator is that a person answers
   the phone. Everything below is scoped so it cannot leak onto those.
   ────────────────────────────────────────────────────────────────────── */

.page--b2b {
  --radius:     10px;
  --radius-lg:  16px;
  --panel:      rgba(255,255,255,.045);
  --panel2:     rgba(255,255,255,.07);
  --border:     rgba(255,255,255,.10);
  --muted:      rgba(255,255,255,.62);
  --section-y:  clamp(64px, 9vw, 120px);
}

/* Generous, even vertical rhythm — the main thing that reads as "premium". */
.page--b2b .section { padding: var(--section-y) 0; }
.page--b2b .section__head { max-width: 680px; margin-bottom: clamp(36px, 5vw, 60px); }
.page--b2b .section__head h2 { letter-spacing: -.035em; line-height: 1.12; margin-bottom: 14px; }
.page--b2b .section__head p { font-size: 16.5px; line-height: 1.75; }

/* Softer corners across the board. */
.page--b2b .btn,
.page--b2b .card,
.page--b2b .panel,
.page--b2b input,
.page--b2b select,
.page--b2b textarea { border-radius: var(--radius); }

.page--b2b .btn {
  padding: 12px 24px; font-weight: 600; letter-spacing: -.01em;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.page--b2b .btn:hover { transform: translateY(-1px); }
.page--b2b .btn--lg { padding: 15px 30px; font-size: 15.5px; }

/* Hero: a calm gradient wash instead of a photograph. */
.page--b2b .b2b-hero {
  position: relative; padding: clamp(72px, 11vw, 132px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.page--b2b .b2b-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 15% 0%,  rgba(59,130,246,.16), transparent 60%),
    radial-gradient(50% 70% at 85% 10%, rgba(96,165,250,.10), transparent 65%);
}
.page--b2b .b2b-hero > * { position: relative; z-index: 1; }
.page--b2b .b2b-hero h1 {
  font-size: clamp(34px, 5.2vw, 60px); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.06; margin-bottom: 20px; max-width: 16ch;
}
.page--b2b .b2b-hero .lede {
  font-size: clamp(16px, 1.7vw, 19px); line-height: 1.7;
  color: var(--muted); max-width: 56ch; margin-bottom: 32px;
}

/* Stat band — the cheapest way to look established. */
.page--b2b .b2b-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.page--b2b .b2b-stat { background: var(--bg); padding: 26px 22px; }
.page--b2b .b2b-stat__n {
  font-size: clamp(26px, 3vw, 36px); font-weight: 800;
  letter-spacing: -.03em; color: var(--accent-text); line-height: 1; margin-bottom: 7px;
}
.page--b2b .b2b-stat__l { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Feature grid. */
.page--b2b .b2b-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.page--b2b .b2b-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 26px;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.page--b2b .b2b-card:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.page--b2b .b2b-card h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 9px;
}
.page--b2b .b2b-card p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0; }

/* Pricing tiers. */
.page--b2b .b2b-tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px;
}
.page--b2b .b2b-tier {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 30px 26px; display: flex; flex-direction: column;
}
.page--b2b .b2b-tier--featured {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 1px var(--accent-border), var(--shadow);
}
.page--b2b .b2b-tier__name {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 14px;
}
.page--b2b .b2b-tier__price {
  font-size: clamp(30px, 3.4vw, 40px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1; margin-bottom: 6px;
}
.page--b2b .b2b-tier__unit { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; }
.page--b2b .b2b-tier__list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.page--b2b .b2b-tier__list li {
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
  padding-left: 24px; position: relative;
}
.page--b2b .b2b-tier__list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--accent-text); font-weight: 700;
}
.page--b2b .b2b-tier .btn { margin-top: auto; }

/* Quiet divider for long pages. */
.page--b2b .b2b-rule { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   ARCHITECTURAL REFINEMENT LAYER
   Appended last so it refines the system without rewriting it. Three ideas:
   (1) glass that behaves like real glass — blur + saturation + a lit top
   edge; (2) neon used scarcely, on intent only (focus, primary hover,
   active nav) — restraint is what reads as premium; (3) architectural
   rhythm — precise hairlines, wider tracking on micro-labels, quiet space.
   Voice-agnostic: works for both the sharp pages and .page--b2b.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --neon:          #4d9fff;
  --neon-soft:     rgba(77,159,255,.30);
  --neon-ring:     0 0 0 1px rgba(77,159,255,.38), 0 0 24px rgba(77,159,255,.26);
  --glass-hi:      rgba(255,255,255,.10);
  --glass-blur:    blur(18px) saturate(1.6);
  --rule:          rgba(255,255,255,.07);
}
html[data-theme="light"]{
  --neon:          #1f6feb;
  --neon-soft:     rgba(31,111,235,.22);
  --neon-ring:     0 0 0 1px rgba(31,111,235,.30), 0 0 20px rgba(31,111,235,.16);
  --glass-hi:      rgba(255,255,255,.85);
  --glass-blur:    blur(18px) saturate(1.4);
  --rule:          rgba(13,17,25,.08);
}

/* ── 1. Realistic frosted glass ─────────────────────────────────────── */
.header{
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.nav__dropdown{
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 60px -20px rgba(0,0,0,.55);
}
.card{
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 10px rgba(0,0,0,.06);
}
/* the sheen a real pane catches along its top edge */
.card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:120px; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 70%);
}
html[data-theme="light"] .card::after{ background: linear-gradient(180deg, rgba(255,255,255,.6), transparent 70%); }
.card:hover{ box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 40px -12px rgba(0,0,0,.30); }

/* ── 2. Neon, used only where intent lives ──────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--neon);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:hover{ box-shadow: var(--neon-ring); }
.btn--ghost:hover{ border-color: var(--neon); color: var(--neon); box-shadow: 0 0 18px -4px var(--neon-soft); }
.header__phone:hover{ color: var(--neon); }

/* Precise underline that draws in. Uses ::before and is desktop-only —
   ::after is already taken: a chevron on desktop and the +/- expander in
   the open mobile menu. Never reuse it here. */
@media (min-width: 901px){
  .nav__trigger{ position: relative; }
  .nav__trigger::before{
    content:""; position:absolute; left:14px; right:14px; bottom:2px; height:1.5px;
    background: var(--neon); transform: scaleX(0); transform-origin: left;
    transition: transform .26s cubic-bezier(.2,.8,.2,1); pointer-events:none;
  }
  .nav__item:hover .nav__trigger::before, .nav__trigger[aria-current="page"]::before{ transform: scaleX(1); }
}

/* ── 3. Architectural rhythm ────────────────────────────────────────── */
.section--alt{ border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pill{
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  letter-spacing: .16em;
}
.section__head h2{ letter-spacing: -.03em; }
.heading-tech{ letter-spacing: -.03em; }

/* photographic surfaces get a defined edge rather than a soft one */
.card img, .section img{ border-radius: var(--radius); }

@media (prefers-reduced-motion: reduce){
  .nav__trigger::after{ transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   DEPTH LAYER — the fix for "flat and blank"
   Large fields of pure black read as a void rather than a surface. Three
   cheap additions give the page material and atmosphere without adding
   noise to the content: a fine grain, a faint accent bloom at section
   boundaries, and staggered entrances so sections assemble instead of
   appearing all at once. All motion respects prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Film grain — makes black read as a material, not an absence.
      Fixed, non-interactive, and barely there (3%). */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="light"] body::after{ opacity:.02; mix-blend-mode:multiply; }

/* 2. A faint accent bloom where sections meet — depth at the seams. */
.section{ position:relative; }
.section--alt::before{
  content:""; position:absolute; left:50%; top:-1px; transform:translateX(-50%);
  width:min(900px,80%); height:180px; pointer-events:none; z-index:0;
  background:radial-gradient(60% 100% at 50% 0%, var(--accent-dim), transparent 70%);
  opacity:.7;
}
.section--alt > *{ position:relative; z-index:1; }

/* 3. Sections assemble rather than pop — a light stagger on grid children. */
.grid > .reveal:nth-child(2), .cards > .reveal:nth-child(2), .val > .reveal:nth-child(2),
.bp-grid4 > .reveal:nth-child(2), .bp-tiers > .reveal:nth-child(2), .hp-tiers > .reveal:nth-child(2){ transition-delay:.07s; }
.grid > .reveal:nth-child(3), .cards > .reveal:nth-child(3), .val > .reveal:nth-child(3),
.bp-grid4 > .reveal:nth-child(3), .bp-tiers > .reveal:nth-child(3), .hp-tiers > .reveal:nth-child(3){ transition-delay:.14s; }
.grid > .reveal:nth-child(4), .cards > .reveal:nth-child(4), .val > .reveal:nth-child(4),
.bp-grid4 > .reveal:nth-child(4){ transition-delay:.21s; }

/* 4. Arrows lean into the click. */
.btn{ overflow:hidden; }
.btn::after{ content:none; }
.btn:hover{ letter-spacing:.022em; }

/* 5. Photographs lift slightly out of the page. */
.card img, .bp-gal figure, .bp-procmedia img, .bp-note img{
  box-shadow:0 18px 40px -22px rgba(0,0,0,.85);
}
html[data-theme="light"] .card img, html[data-theme="light"] .bp-gal figure{
  box-shadow:0 18px 40px -24px rgba(20,30,60,.35);
}

@media (prefers-reduced-motion: reduce){
  .btn:hover{ letter-spacing:normal; }
}

/* Skip link — WCAG 2.4.1. The nav is 52 lines on every page; without this a
   keyboard or screen-reader user tabs through all of it on every navigation.
   Visible only on focus, and it must sit above the sticky header. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 10000;
  background: var(--accent, #1f4fd8); color: #fff;
  padding: 10px 16px; border-radius: 0 0 6px 6px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* <picture> wraps images for WebP with a JPEG fallback. It must not introduce a
   box of its own — several of these images are absolutely positioned or are flex
   children, and an extra inline wrapper would shift them. */
picture { display: contents; }