/* ============ Tokens ============ */
:root {
  /* Palettes (overridden by data-palette) */
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;

  --ink-900: #0b1220;
  --ink-800: #101a2e;
  --ink-700: #1e293b;
  --ink-600: #334155;
  --ink-500: #475569;
  --ink-400: #64748b;
  --ink-300: #94a3b8;
  --ink-200: #cbd5e1;
  --ink-150: #dbe1ea;
  --ink-100: #e2e8f0;
  --ink-50:  #f1f5f9;
  --ink-25:  #f8fafc;

  --bg: #ffffff;
  --bg-soft: #f7f9fc;
  --bg-softer: #eef3f9;
  --surface: #ffffff;
  --border: #e5eaf2;
  --border-strong: #d5dde8;
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-subtle: var(--ink-400);

  --success: #059669;
  --warn: #d97706;
  --star: #f59e0b;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, .05), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 8px 24px -6px rgba(15, 23, 42, .1), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, .18), 0 4px 12px rgba(15,23,42,.05);
  --shadow-brand: 0 10px 30px -10px color-mix(in oklab, var(--brand-600) 55%, transparent);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --container: 1200px;
  --container-wide: 1320px;

  --nav-h: 72px;
}

/* Palette: Electric blue (default) */
[data-palette="electric-blue"] {
  --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-300:#93c5fd;
  --brand-400:#60a5fa; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8;
  --brand-800:#1e40af; --brand-900:#1e3a8a;
}
[data-palette="navy-orange"] {
  --brand-50:#fff7ed; --brand-100:#ffedd5; --brand-200:#fed7aa; --brand-300:#fdba74;
  --brand-400:#fb923c; --brand-500:#f97316; --brand-600:#ea580c; --brand-700:#c2410c;
  --brand-800:#9a3412; --brand-900:#0b1b3f;
  --ink-900:#0b1b3f;
}
[data-palette="emerald"] {
  --brand-50:#ecfdf5; --brand-100:#d1fae5; --brand-200:#a7f3d0; --brand-300:#6ee7b7;
  --brand-400:#34d399; --brand-500:#10b981; --brand-600:#059669; --brand-700:#047857;
  --brand-800:#065f46; --brand-900:#064e3b;
}
[data-palette="midnight-lime"] {
  --brand-50:#f7fee7; --brand-100:#ecfccb; --brand-200:#d9f99d; --brand-300:#bef264;
  --brand-400:#a3e635; --brand-500:#84cc16; --brand-600:#65a30d; --brand-700:#4d7c0f;
  --brand-800:#3f6212; --brand-900:#0a0a0a;
  --ink-900:#0a0a0a;
}
[data-palette="magenta"] {
  --brand-50:#fdf4ff; --brand-100:#fae8ff; --brand-200:#f5d0fe; --brand-300:#f0abfc;
  --brand-400:#e879f9; --brand-500:#d946ef; --brand-600:#c026d3; --brand-700:#a21caf;
  --brand-800:#86198f; --brand-900:#701a75;
}
[data-palette="crimson"] {
  --brand-50:#fef2f2; --brand-100:#fee2e2; --brand-200:#fecaca; --brand-300:#fca5a5;
  --brand-400:#f87171; --brand-500:#ef4444; --brand-600:#dc2626; --brand-700:#b91c1c;
  --brand-800:#991b1b; --brand-900:#7f1d1d;
}

/* Fonts */
[data-fontpair="jakarta"] { --font-display:'Plus Jakarta Sans',sans-serif; --font-body:'Plus Jakarta Sans',sans-serif; }
[data-fontpair="dm"] { --font-display:'DM Sans',sans-serif; --font-body:'DM Sans',sans-serif; }
[data-fontpair="mix"] { --font-display:'Plus Jakarta Sans',sans-serif; --font-body:'DM Sans',sans-serif; }

/* Dark mode */
[data-dark="true"] {
  --bg: #07101f;
  --bg-soft: #0b1628;
  --bg-softer: #101d34;
  --surface: #0f1b30;
  --border: #1c2a44;
  --border-strong: #253552;
  --text: #eaf0fb;
  --text-muted: #9fb0ce;
  --text-subtle: #7c8cab;
  --ink-25: #0f1b30;
  --ink-50: #13223b;
  --ink-100: #1c2a44;
  --ink-150: #253552;
  --ink-200: #334267;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px -6px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 48px -12px rgba(0,0,0,.55);
}

/* ============ Reset & base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  font-size: 16px;
}
h1, h2, h3, h4, h5 { font-family: var(--font-display); margin: 0; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* ============ Layout ============ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-wide { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-700);
  padding: 6px 12px; background: var(--brand-50);
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--brand-600) 15%, transparent);
}
[data-dark="true"] .eyebrow { background: color-mix(in oklab, var(--brand-600) 18%, transparent); color: var(--brand-200); }

.section-title { font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; max-width: 820px; }
.section-lede { font-size: clamp(16px, 1.3vw, 19px); color: var(--text-muted); max-width: 680px; margin-top: 16px; }

/* ============ Buttons ============ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:12px; font-weight:600; font-size:15px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; white-space: nowrap; }
.btn-primary { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); }
.btn-ghost { background: var(--ink-25); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--ink-50); border-color: var(--border-strong); }
.btn-dark { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: var(--ink-800); }
[data-dark="true"] .btn-dark { background: #fff; color: var(--ink-900); }
.btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 14px; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.btn-block { display:flex; width:100%; }

/* ============ Nav ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
  display: flex; align-items: center;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display:flex; align-items:center; gap: 10px; font-weight: 800; font-size: 18px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; display:grid; place-items:center;
  box-shadow: 0 6px 16px -4px color-mix(in oklab, var(--brand-600) 60%, transparent);
}
.nav-links { display:flex; gap: 4px; }
.nav-links a { padding: 8px 14px; border-radius: 10px; font-size: 14.5px; color: var(--text-muted); font-weight: 500; transition: color .15s ease, background .15s ease; }
.nav-links a:hover { color: var(--text); background: var(--ink-25); }
.nav-cta { display:flex; align-items:center; gap: 10px; }
.nav-phone { display:flex; align-items:center; gap: 8px; font-weight: 600; color: var(--text); font-size: 14.5px; }
.nav-phone:hover { color: var(--brand-700); }
@media (max-width: 900px) {
  .nav-links { display:none; }
  .nav-phone span { display: none; }
}

/* ============ Hero ============ */
.hero {
  position: relative;
  padding: 48px 0 96px;
  overflow: hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% 0%, color-mix(in oklab, var(--brand-400) 22%, transparent), transparent 60%),
    radial-gradient(40% 40% at 0% 30%, color-mix(in oklab, var(--brand-600) 14%, transparent), transparent 60%);
}
.hero-grid {
  position:relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }

.hero-badge {
  display:inline-flex; align-items:center; gap: 10px;
  padding: 6px 8px 6px 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; font-size: 13px; color: var(--text-muted); box-shadow: var(--shadow-xs);
}
.hero-badge-pill { background: var(--brand-600); color: #fff; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.hero-title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800; letter-spacing: -.025em; margin-top: 18px;
}
.hero-title em { font-style: normal; color: var(--brand-600); position: relative; }
.hero-title em::after {
  content:""; position:absolute; left:0; right:0; bottom: 4px; height: 10px;
  background: color-mix(in oklab, var(--brand-400) 35%, transparent);
  z-index:-1; border-radius: 2px;
}
.hero-sub { font-size: clamp(16px, 1.4vw, 19px); color: var(--text-muted); margin-top: 18px; max-width: 540px; }
.hero-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

.trust-row { display:flex; align-items:center; gap: 20px; margin-top: 32px; flex-wrap: wrap; }
.avatars { display:flex; }
.avatars img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -8px; box-shadow: var(--shadow-xs); }
.avatars img:first-child { margin-left: 0; }
.trust-text { font-size: 13.5px; color: var(--text-muted); line-height: 1.35; }
.trust-text strong { color: var(--text); font-weight: 700; }
.stars { color: var(--star); letter-spacing: 1px; font-size: 14px; }

/* Hero info bar */
.hero-infobar {
  margin-top: 48px; display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.hero-infobar > div { padding: 18px 20px; border-right: 1px solid var(--border); }
.hero-infobar > div:last-child { border-right: none; }
.hero-info-label { font-size: 11.5px; letter-spacing:.1em; text-transform: uppercase; color: var(--text-subtle); font-weight: 600; }
.hero-info-value { font-size: 15px; font-weight: 700; margin-top: 4px; }
@media (max-width: 760px) {
  .hero-infobar { grid-template-columns: repeat(2, 1fr); }
  .hero-infobar > div:nth-child(2n) { border-right: none; }
  .hero-infobar > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* ============ Booking Widget (hero right) ============ */
.booking {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 28px;
  position: relative;
}
.booking::before {
  content:""; position:absolute; inset: -1px; border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand-400) 40%, transparent), transparent 40%, color-mix(in oklab, var(--brand-600) 30%, transparent));
  z-index: -1; filter: blur(20px); opacity: .4;
}
.booking-head { display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 20px; }
.booking-title { font-size: 18px; font-weight: 700; }
.booking-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.booking-steps { display:flex; align-items:center; gap: 6px; }
.booking-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-150); transition: background .2s ease; }
.booking-step-dot.active { background: var(--brand-600); }
.booking-step-dot.done { background: var(--brand-300); }

.booking-stepwrap { min-height: 280px; }
.booking-steplabel { font-size: 12px; letter-spacing:.1em; text-transform: uppercase; color: var(--text-subtle); font-weight: 600; margin-bottom: 10px; }
.booking-question { font-size: 20px; font-weight: 700; margin-bottom: 18px; }

.brand-grid, .issue-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 460px) { .brand-grid, .issue-grid { grid-template-columns: repeat(2, 1fr); } }
.brand-chip, .issue-chip {
  padding: 14px 10px; background: var(--ink-25); border: 1.5px solid var(--border);
  border-radius: 12px; text-align: center; font-weight: 600; font-size: 13.5px;
  transition: all .15s ease; display:flex; flex-direction:column; align-items:center; gap: 6px;
}
.brand-chip:hover, .issue-chip:hover { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); transform: translateY(-1px); }
.brand-chip.selected, .issue-chip.selected {
  border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-500) 18%, transparent);
}
[data-dark="true"] .brand-chip, [data-dark="true"] .issue-chip { background: var(--ink-50); }
[data-dark="true"] .brand-chip:hover, [data-dark="true"] .brand-chip.selected,
[data-dark="true"] .issue-chip:hover, [data-dark="true"] .issue-chip.selected { background: color-mix(in oklab, var(--brand-600) 18%, var(--surface)); color: var(--brand-200); }
.brand-logo { font-size: 18px; font-weight: 800; }
.issue-emoji { font-size: 22px; }

.model-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
@media (max-width: 460px) { .model-list { grid-template-columns: 1fr; } }
.model-row {
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 12px; background: var(--ink-25); border: 1px solid var(--border);
  border-radius: 10px; font-size: 13.5px; font-weight: 600;
}
.model-row:hover { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-700); }
.model-row.selected { background: var(--brand-50); border-color: var(--brand-600); color: var(--brand-700); }
[data-dark="true"] .model-row { background: var(--ink-50); }
[data-dark="true"] .model-row:hover, [data-dark="true"] .model-row.selected { background: color-mix(in oklab, var(--brand-600) 18%, var(--surface)); color: var(--brand-200); }

.quote-summary {
  padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--ink-25);
  margin-bottom: 14px;
}
.quote-line { display:flex; justify-content:space-between; padding: 6px 0; font-size: 14px; }
.quote-line + .quote-line { border-top: 1px dashed var(--border); }
.quote-price {
  font-size: 42px; font-weight: 800; color: var(--brand-700);
  margin: 12px 0 4px; letter-spacing: -.02em;
}
.quote-note { font-size: 12.5px; color: var(--text-muted); }

.booking-footer { display:flex; justify-content:space-between; align-items:center; margin-top: 20px; gap: 10px; }
.back-link { font-size: 14px; color: var(--text-muted); font-weight: 600; padding: 8px 12px; border-radius: 8px; }
.back-link:hover { background: var(--ink-25); color: var(--text); }

/* ============ Repair services grid ============ */
.repair-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 48px; }
.repair-card {
  grid-column: span 4;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  display:flex; flex-direction:column;
}
.repair-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.repair-card.featured { grid-column: span 6; }
.repair-card.featured .repair-visual { aspect-ratio: 16/9; }
.repair-visual {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--brand-50), var(--ink-25));
  position: relative; overflow:hidden;
}
[data-dark="true"] .repair-visual { background: linear-gradient(135deg, color-mix(in oklab, var(--brand-600) 20%, var(--surface)), var(--ink-50)); }
.repair-visual-art {
  position:absolute; inset:0; display:grid; place-items:center;
  font-size: 64px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.12));
}
.repair-badge {
  position:absolute; top: 14px; left: 14px;
  padding: 5px 10px; font-size: 11px; font-weight: 700; letter-spacing:.06em; text-transform: uppercase;
  background: var(--ink-900); color: #fff; border-radius: 999px;
}
.repair-badge.pop { background: var(--brand-600); }
.repair-badge.free { background: var(--success); }
.repair-body { padding: 20px 22px 22px; display:flex; flex-direction:column; flex: 1; }
.repair-title { font-size: 20px; font-weight: 700; }
.repair-desc { font-size: 14px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.repair-meta { display:flex; justify-content:space-between; align-items:center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.repair-price { font-size: 13px; color: var(--text-muted); }
.repair-price strong { color: var(--text); font-size: 17px; font-weight: 800; }
.repair-arrow { color: var(--brand-600); font-weight: 700; font-size: 18px; transition: transform .2s ease; }
.repair-card:hover .repair-arrow { transform: translateX(3px); }

@media (max-width: 900px) {
  .repair-card, .repair-card.featured { grid-column: span 6; }
}
@media (max-width: 560px) {
  .repair-card, .repair-card.featured { grid-column: span 12; }
}

/* ============ Plans ============ */
.plans-head { display:flex; justify-content:space-between; align-items:end; flex-wrap: wrap; gap: 20px; margin-bottom: 36px; }
.plan-toggle {
  display:inline-flex; padding: 4px; background: var(--ink-25); border: 1px solid var(--border);
  border-radius: 999px;
}
.plan-toggle button {
  padding: 10px 22px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--text-muted);
  transition: all .2s ease;
}
.plan-toggle button.active { background: var(--ink-900); color: #fff; box-shadow: var(--shadow-sm); }
[data-dark="true"] .plan-toggle button.active { background: var(--brand-600); }

.plan-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .plan-grid { grid-template-columns: 1fr; } }
.plan {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  padding: 28px; display:flex; flex-direction:column; position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.plan.featured {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-500) 15%, transparent), var(--shadow-md);
}
.plan-tag {
  position:absolute; top:-12px; left:50%; transform: translateX(-50%);
  background: var(--brand-600); color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
}
.plan-name { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.plan-price { display:flex; align-items:baseline; gap: 4px; margin: 14px 0 4px; }
.plan-price .dollar { font-size: 22px; font-weight: 700; color: var(--text-muted); }
.plan-price .num { font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.plan-price .per { font-size: 15px; color: var(--text-muted); margin-left: 4px; }
.plan-data { font-size: 15px; font-weight: 700; color: var(--brand-700); margin-bottom: 18px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 22px; display:flex; flex-direction:column; gap: 10px; flex: 1; }
.plan-features li { display:flex; gap: 10px; font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.plan-features li::before {
  content:"✓"; color: var(--brand-600); font-weight: 800; flex-shrink: 0;
}
.plan-footer-note { font-size: 13px; color: var(--text-muted); text-align: center; margin-top: 36px; max-width: 760px; margin-inline: auto; line-height: 1.6; }
.plan-footer-note strong { color: var(--text); }

/* Plan style: minimal (tweak) */
[data-planstyle="minimal"] .plan { border-radius: 6px; padding: 22px; box-shadow: none; }
[data-planstyle="minimal"] .plan.featured { box-shadow: 0 0 0 2px var(--brand-600); border-color: transparent; }
[data-planstyle="minimal"] .plan-price .num { font-size: 44px; }

/* Plan style: slabs (tweak) */
[data-planstyle="slabs"] .plan-grid { gap: 0; border: 1px solid var(--border); border-radius: 22px; overflow:hidden; }
[data-planstyle="slabs"] .plan { border-radius: 0; border: none; border-right: 1px solid var(--border); box-shadow: none; }
[data-planstyle="slabs"] .plan:last-child { border-right: none; }
[data-planstyle="slabs"] .plan.featured { background: var(--brand-50); box-shadow: inset 0 4px 0 var(--brand-600); }
[data-dark="true"][data-planstyle="slabs"] .plan.featured { background: color-mix(in oklab, var(--brand-600) 18%, var(--surface)); }
@media (max-width: 960px) {
  [data-planstyle="slabs"] .plan { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ============ Bento repairs grid ============ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
  margin-top: 48px;
}
.bento-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink-900);
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: var(--shadow-sm);
  min-height: 220px;
  text-decoration: none;
}
.bento-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.bento-hero  { grid-column: span 2; grid-row: span 2; }
.bento-tall  { grid-column: span 1; grid-row: span 2; }
.bento-wide  { grid-column: span 2; grid-row: span 1; }
.bento-small { grid-column: span 1; grid-row: span 1; }
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .bento-hero { grid-column: span 2; grid-row: span 2; }
  .bento-tall { grid-column: span 1; grid-row: span 2; }
  .bento-wide { grid-column: span 2; grid-row: span 1; }
  .bento-small { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 180px; }
  .bento-hero, .bento-tall, .bento-wide, .bento-small { grid-column: span 1; grid-row: span 1; }
  .bento-hero { grid-row: span 2; }
}
.bento-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .5s ease;
}
.bento-card:hover .bento-img { transform: scale(1.06); }
.bento-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.82) 100%);
}
.bento-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.95); color: var(--ink-900); border-radius: 999px;
  backdrop-filter: blur(8px);
}
.bento-badge.pop { background: var(--brand-600); color: #fff; }
.bento-badge.free { background: #16a34a; color: #fff; }
.bento-body {
  position: relative; padding: 22px 24px; z-index: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.bento-hero .bento-body { padding: 28px 30px; }
.bento-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.bento-hero .bento-title { font-size: 30px; }
.bento-desc { font-size: 14px; color: rgba(255,255,255,.78); max-width: 380px; line-height: 1.5; }
.bento-small .bento-desc { display: none; }
.bento-meta {
  display: flex; justify-content: space-between; align-items: center; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18);
}
.bento-price { font-size: 14px; font-weight: 700; }
.bento-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9);
  transition: transform .2s ease, color .2s ease;
}
.bento-card:hover .bento-arrow { color: #fff; transform: translateX(3px); }

/* ============ Accessories ============ */
.acc-visual {
  aspect-ratio: 4/3; background: var(--ink-25);
  display:grid; place-items:center; position: relative; overflow:hidden;
}
.acc-img {
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition: transform .4s ease;
}
.acc-card:hover .acc-img { transform: scale(1.05); }

/* ============ Accessories grid (legacy name) ============ */
.acc-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .acc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .acc-grid { grid-template-columns: 1fr; } }
.acc-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow:hidden;
  transition: all .2s ease; display:flex; flex-direction:column;
}
.acc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.acc-visual {
  aspect-ratio: 4/3; background: var(--ink-25);
  display:grid; place-items:center; position: relative; overflow:hidden;
}
.acc-img { position:absolute; inset:0; background-size:cover; background-position:center; transition: transform .4s ease; }
.acc-card:hover .acc-img { transform: scale(1.05); }
.acc-tag {
  position:absolute; top: 14px; right: 14px;
  padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing:.06em; text-transform: uppercase;
  background: var(--brand-600); color: #fff; border-radius: 999px;
}
.acc-tag.sale { background: #e11d48; }
.acc-body { padding: 18px 22px 22px; display:flex; flex-direction:column; gap: 4px; }
.acc-title { font-size: 17px; font-weight: 700; }
.acc-desc { font-size: 14px; color: var(--text-muted); }
.acc-price { margin-top: 10px; font-weight: 700; color: var(--brand-700); font-size: 15px; }

/* ============ Brands ============ */
.brand-strip {
  display:grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 40px;
}
@media (max-width: 900px) { .brand-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .brand-strip { grid-template-columns: repeat(2, 1fr); } }
.brand-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 10px; text-align:center; transition: all .2s ease;
}
.brand-tile:hover { border-color: var(--brand-500); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.brand-tile-name { font-size: 15px; font-weight: 700; margin-top: 8px; }
.brand-tile-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.brand-tile-logo { font-size: 28px; font-weight: 800; color: var(--brand-700); font-family: var(--font-display); }

/* ============ Features / why us ============ */
.why-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.why-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  padding: 28px; position: relative; overflow:hidden;
}
.why-card.span-7 { grid-column: span 7; }
.why-card.span-5 { grid-column: span 5; }
.why-card.span-4 { grid-column: span 4; }
.why-card.span-8 { grid-column: span 8; }
.why-card.dark { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.why-card.dark .why-sub { color: rgba(255,255,255,.7); }
[data-dark="true"] .why-card.dark { background: var(--brand-800); border-color: var(--brand-800); }
@media (max-width: 900px) {
  .why-card.span-7, .why-card.span-5, .why-card.span-4, .why-card.span-8 { grid-column: span 12; }
}

.why-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-600); }
.why-title { font-size: 24px; font-weight: 700; margin-top: 8px; max-width: 460px; }
.why-sub { font-size: 15px; color: var(--text-muted); margin-top: 10px; max-width: 460px; line-height: 1.55; }

.stat-row { display:flex; gap: 32px; margin-top: 22px; flex-wrap: wrap; }
.stat { display:flex; flex-direction:column; }
.stat-num { font-size: 36px; font-weight: 800; letter-spacing: -.02em; }
.stat-label { font-size: 12px; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-top: 4px; }
.why-card.dark .stat-label { color: rgba(255,255,255,.6); }

.process-strip {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 22px;
  border: 1px solid var(--border); border-radius: 16px; overflow:hidden;
}
.process-step { padding: 18px; border-right: 1px solid var(--border); }
.process-step:last-child { border-right: none; }
.process-step-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--brand-600); color: #fff;
  display:grid; place-items:center; font-weight: 700; font-size: 13px;
}
.process-step-title { font-weight: 700; margin-top: 10px; font-size: 14.5px; }
.process-step-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ============ Testimonials ============ */
.t-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .t-grid { grid-template-columns: 1fr; } }
.t-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 26px; display:flex; flex-direction:column; gap: 16px;
}
.t-stars { color: var(--star); font-size: 15px; letter-spacing: 2px; }
.t-quote { font-size: 15.5px; line-height: 1.55; color: var(--text); }
.t-author { display:flex; align-items:center; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.t-author img { width: 42px; height: 42px; border-radius: 50%; }
.t-author-name { font-weight: 700; font-size: 14.5px; }
.t-author-source { font-size: 12.5px; color: var(--text-muted); }

.t-stats { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
@media (max-width: 700px) { .t-stats { grid-template-columns: repeat(2, 1fr); } }
.t-stat { text-align: center; padding: 22px; background: var(--bg-soft); border-radius: 16px; }
.t-stat-num { font-size: 32px; font-weight: 800; color: var(--brand-700); letter-spacing: -.02em; }
.t-stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* ============ Warranty ============ */
.warr-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 900px) { .warr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .warr-grid { grid-template-columns: 1fr; } }
.warr-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 24px;
}
.warr-check {
  width: 36px; height: 36px; border-radius: 10px; background: var(--brand-50); color: var(--brand-700);
  display:grid; place-items:center; font-size: 18px; font-weight: 800;
}
[data-dark="true"] .warr-check { background: color-mix(in oklab, var(--brand-600) 20%, transparent); color: var(--brand-200); }
.warr-title { font-weight: 700; margin-top: 14px; font-size: 16px; }
.warr-desc { font-size: 13.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

/* ============ FAQ ============ */
.faq-list { max-width: 820px; margin: 40px auto 0; display:flex; flex-direction:column; gap: 10px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; transition: border-color .2s ease;
}
.faq-item[data-open="true"] { border-color: var(--brand-600); box-shadow: var(--shadow-sm); }
.faq-q {
  width:100%; padding: 18px 22px; display:flex; justify-content:space-between; align-items:center;
  font-weight: 700; font-size: 16px; text-align:left;
}
.faq-toggle { width: 28px; height: 28px; border-radius: 50%; background: var(--ink-25); display:grid; place-items:center; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.faq-item[data-open="true"] .faq-toggle { background: var(--brand-600); color: #fff; transform: rotate(45deg); }
.faq-a { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }
.faq-item[data-open="true"] .faq-a { padding: 0 22px 20px; max-height: 400px; }

/* ============ Store / contact ============ */
.store-grid {
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: stretch;
  margin-top: 40px;
}
@media (max-width: 900px) { .store-grid { grid-template-columns: 1fr; } }

.store-info-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 32px;
  display:flex; flex-direction:column; gap: 22px;
}
.store-row { display:flex; gap: 16px; align-items: flex-start; }
.store-icon {
  width: 42px; height: 42px; border-radius: 12px; background: var(--brand-50); color: var(--brand-700);
  display:grid; place-items:center; font-size: 18px; flex-shrink: 0;
}
[data-dark="true"] .store-icon { background: color-mix(in oklab, var(--brand-600) 20%, transparent); color: var(--brand-200); }
.store-row-title { font-weight: 700; font-size: 15px; }
.store-row-body { font-size: 14px; color: var(--text-muted); margin-top: 4px; line-height: 1.55; }
.hours-table { width: 100%; font-size: 13.5px; margin-top: 8px; }
.hours-table td { padding: 4px 0; color: var(--text-muted); }
.hours-table td:last-child { text-align: right; color: var(--text); font-weight: 600; }
.open-now-pill {
  display:inline-flex; align-items:center; gap: 8px; padding: 6px 12px; background: #dcfce7; color: #15803d;
  border-radius: 999px; font-size: 12.5px; font-weight: 700; margin-top: 10px;
}
[data-dark="true"] .open-now-pill { background: color-mix(in oklab, #10b981 20%, transparent); color: #86efac; }
.open-dot { width: 8px; height: 8px; border-radius:50%; background: #16a34a; box-shadow: 0 0 0 4px color-mix(in oklab, #16a34a 25%, transparent); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ============ Quote form ============ */
.form-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 32px;
}
.form-title { font-size: 22px; font-weight: 700; }
.form-sub { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.form-field { display:flex; flex-direction:column; gap: 6px; }
.form-field.full { grid-column: span 2; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } .form-field.full { grid-column: span 1; } }
.form-field label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; }
.form-field input, .form-field select, .form-field textarea {
  padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text);
  font-size: 14.5px; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--brand-600);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-500) 18%, transparent);
}
.form-error { font-size: 12px; color: #dc2626; }
.form-success {
  margin-top: 14px; padding: 14px 18px; background: #dcfce7; color: #15803d;
  border-radius: 12px; font-size: 14.5px; font-weight: 600;
  display:flex; align-items:center; gap: 10px;
}
[data-dark="true"] .form-success { background: color-mix(in oklab, #10b981 18%, transparent); color: #86efac; }

/* ============ Footer ============ */
.footer { background: var(--ink-900); color: #fff; padding: 64px 0 36px; }
[data-dark="true"] .footer { background: #020814; }
.footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; } }
.footer h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 700; margin-bottom: 16px; }
.footer ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px; }
.footer ul a { font-size: 14.5px; color: rgba(255,255,255,.8); }
.footer ul a:hover { color: #fff; }
.footer-desc { color: rgba(255,255,255,.7); font-size: 14.5px; margin-top: 12px; max-width: 320px; line-height: 1.6; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13.5px; color: rgba(255,255,255,.55); flex-wrap: wrap; gap: 10px; }

/* ============ Sticky call CTA (mobile) ============ */
.mobile-call-cta {
  position: fixed; bottom: 20px; left: 20px; right: 20px; z-index: 40;
  background: var(--brand-600); color: #fff; padding: 14px 22px; border-radius: 14px;
  display:none; justify-content:center; align-items:center; gap: 10px; font-weight: 700;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 720px) { .mobile-call-cta { display:flex; } }

/* ============ Hero variant: editorial ============ */
[data-herovariant="editorial"] .hero-grid { grid-template-columns: 1fr; text-align: center; }
[data-herovariant="editorial"] .hero-sub { margin-inline: auto; }
[data-herovariant="editorial"] .hero-ctas { justify-content: center; }
[data-herovariant="editorial"] .booking { max-width: 720px; margin: 48px auto 0; }
[data-herovariant="editorial"] .hero-title { font-size: clamp(48px, 7vw, 88px); max-width: 1000px; margin-inline: auto; }
[data-herovariant="editorial"] .trust-row { justify-content: center; }

/* ============ Hero variant: full-bleed ============ */
[data-herovariant="fullbleed"] .hero { padding: 0; }
[data-herovariant="fullbleed"] .hero-grid { grid-template-columns: 1fr; min-height: 88vh; align-content: center; padding: 80px 0; }
[data-herovariant="fullbleed"] .hero-bg {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ink-900) 30%, transparent), color-mix(in oklab, var(--ink-900) 78%, transparent)),
    radial-gradient(60% 50% at 80% 20%, var(--brand-600), transparent 70%),
    radial-gradient(50% 50% at 20% 80%, var(--brand-800), transparent 70%),
    var(--ink-900);
}
[data-herovariant="fullbleed"] .hero-title, [data-herovariant="fullbleed"] .hero-sub, [data-herovariant="fullbleed"] .hero-badge { color: #fff; }
[data-herovariant="fullbleed"] .hero-sub { color: rgba(255,255,255,.8); }
[data-herovariant="fullbleed"] .hero-title em { color: #fff; }
[data-herovariant="fullbleed"] .hero-title em::after { background: var(--brand-500); }
[data-herovariant="fullbleed"] .hero-badge { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.15); }
[data-herovariant="fullbleed"] .booking { max-width: 560px; margin-top: 36px; }
[data-herovariant="fullbleed"] .trust-text { color: rgba(255,255,255,.75); }
[data-herovariant="fullbleed"] .trust-text strong { color: #fff; }
[data-herovariant="fullbleed"] .hero-infobar { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); backdrop-filter: blur(10px); }
[data-herovariant="fullbleed"] .hero-infobar > div { border-color: rgba(255,255,255,.1); }
[data-herovariant="fullbleed"] .hero-info-value { color: #fff; }
[data-herovariant="fullbleed"] .hero-info-label { color: rgba(255,255,255,.6); }

/* ============ Tweaks panel ============ */
.tweaks-panel {
  position: fixed; bottom: 20px; right: 20px; z-index: 100;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); width: 320px; padding: 20px;
  transition: transform .25s ease, opacity .25s ease;
}
.tweaks-panel.closed { transform: translateY(20px); opacity: 0; pointer-events: none; }
.tweaks-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px; }
.tweaks-head h3 { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tweaks-close { color: var(--text-muted); font-size: 18px; padding: 4px 8px; border-radius: 6px; }
.tweaks-close:hover { background: var(--ink-25); color: var(--text); }
.tweaks-group { margin-bottom: 16px; }
.tweaks-group-label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.tweaks-swatches { display:flex; gap: 8px; }
.tweaks-swatch {
  width: 28px; height: 28px; border-radius: 8px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, border-color .15s ease;
}
.tweaks-swatch:hover { transform: scale(1.1); }
.tweaks-swatch.active { border-color: var(--text); }
.tweaks-row { display:flex; gap: 6px; flex-wrap: wrap; }
.tweaks-chip {
  padding: 8px 12px; font-size: 12px; font-weight: 600; border-radius: 8px;
  background: var(--ink-25); color: var(--text-muted); border: 1px solid var(--border);
  transition: all .15s ease;
}
.tweaks-chip:hover { color: var(--text); border-color: var(--border-strong); }
.tweaks-chip.active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
[data-dark="true"] .tweaks-chip.active { background: var(--brand-600); border-color: var(--brand-600); }