/* ============================================================
   MLHS Book Wizard — 2028 Editorial Redesign
   Cream canvas · oversized serif display · moss accent
   Instrument Serif + Inter + JetBrains Mono
   Companion styles for book.html; overrides earlier stack.
   ============================================================ */

:root {
  --paper:       #FBF9F4;
  --paper-alt:   #F5F1E8;
  --paper-3:     #EFEADD;
  --line:        #E5E0D3;
  --line-soft:   #EEEAE0;
  --line-strong: #C8C1AE;

  --ink:      #14140F;
  --ink-80:   #2A2A24;
  --ink-70:   #4A4A42;
  --ink-50:   #5F5F55;   /* was #7A7A70 (4.12 on cream) — darkened to ~7:1 so eyebrows/step-numbers/labels read solidly */
  --ink-30:   #6E6E64;   /* was #B0AEA3 (2.12 on cream), then #8A8A80 (3.31 — still under AA). Now ~5.0:1 — city sublines cleared. */
  --ink-15:   #D4D1C6;

  --moss:       #2A4735;
  --moss-hover: #1E362A;
  --moss-tint:  rgba(42,71,53,0.06);
  --moss-line:  rgba(42,71,53,0.20);
  --gold:       #8A6A2E;   /* was #B08947 — 3.06 on cream. Darkened to ~4.7:1 so ★ rating pills and stars read as real badges, not decoration. */
  --clay:       #A94C2E;
  --sky:        #4A6D8C;

  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  --gutter: 40px;
  --max-w:  1360px;
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;

  --dur-fast: 180ms;
  --dur-med:  360ms;
  --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Reset only what conflicts */
body.mlhs-book.book-2028,
body.mlhs-book.book-2028 * { box-sizing: border-box; }
body.mlhs-book.book-2028 {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide the pre-existing MLHS chrome from earlier CSS; we ship a new one */
body.book-2028 .mlhs-announce,
body.book-2028 .mlhs-nav,
body.book-2028 .mlhs-book-hero,
body.book-2028 .mlhs-footer { display: none !important; }

/* Wrap the main app-shell offsets so hero flows correctly */
body.book-2028 { padding: 0 !important; }

/* ============================================================
   NAV (2028)
   ============================================================ */
.b2028-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 249, 244, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  padding: 16px var(--gutter);
}
.b2028-nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.b2028-mark { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 600; letter-spacing: -0.01em; font-size: 15px; color: var(--ink); }
.b2028-mark em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--moss); font-size: 20px; }
.b2028-nav-links { display: flex; gap: 30px; justify-content: center; }
.b2028-nav-links a { font-size: 13.5px; color: var(--ink-70); font-weight: 500; padding: 6px 2px; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.b2028-nav-links a:hover { color: var(--ink); }
.b2028-nav-links a.is-active { color: var(--ink); border-bottom-color: var(--moss); }
.b2028-nav-cta { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
.b2028-phone { font-family: var(--mono); font-size: 12px; color: var(--ink-70); letter-spacing: 0.02em; }
.b2028-phone:hover { color: var(--ink); }
.b2028-menu { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--ink-15); border-radius: 999px; background: transparent; }
.b2028-mobile-sheet { display: none; padding: 20px var(--gutter) 28px; border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.b2028-mobile-sheet.is-open { display: flex; flex-direction: column; gap: 4px; }
.b2028-mobile-sheet a { font-family: var(--serif); font-size: 22px; color: var(--ink); padding: 8px 0; border-bottom: 1px solid var(--line-soft); }

@media (max-width: 900px) {
  .b2028-nav-links, .b2028-nav-cta .b2028-phone { display: none; }
  .b2028-nav-inner { grid-template-columns: 1fr auto; }
  .b2028-menu { display: inline-flex; }
}

/* Reusable button
   Book uses <body class="ls-page mlhs mlhs-book book-2028">. The
   generic '.mlhs a { color: var(--mlhs-green); }' rule in
   mlhs-brand.css has equal specificity to '.b2028-btn' but loads
   later, so plain '.b2028-btn' on an anchor rendered as dark green
   forest text on the near-black button pill (1.97 contrast). Bump
   selector specificity with 'a.b2028-btn' variants so the paper text
   color wins on link buttons too. */
.b2028-btn,
a.b2028-btn,
a.b2028-btn:visited { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--ink); color: var(--paper); border-radius: 999px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; border: 0; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.b2028-btn:hover,
a.b2028-btn:hover { transform: translateY(-1px); background: var(--moss); color: var(--paper); }
.b2028-btn.sm,
a.b2028-btn.sm { padding: 9px 18px; font-size: 12.5px; }
.b2028-btn.lg,
a.b2028-btn.lg { padding: 16px 30px; font-size: 15px; }
.b2028-btn.ghost,
a.b2028-btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink-15); }
.b2028-btn.ghost:hover,
a.b2028-btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.b2028-btn:disabled { background: var(--ink-15); color: var(--ink-50); cursor: not-allowed; transform: none; }

/* ============================================================
   HERO
   ============================================================ */
.b2028-hero { padding: 72px var(--gutter) 40px; border-bottom: 1px solid var(--line-soft); }
.b2028-hero-inner { max-width: var(--max-w); margin: 0 auto; }
.b2028-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-50); font-weight: 500; margin-bottom: 20px; }
.b2028-eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--ink-30); }
.b2028-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 8vw, 112px); line-height: 0.95; letter-spacing: -0.03em; color: var(--ink); max-width: 14ch; margin-bottom: 22px; }
.b2028-hero h1 em { font-style: italic; color: var(--moss); }
.b2028-hero-sub { font-family: var(--sans); font-size: 18px; line-height: 1.5; color: var(--ink-70); max-width: 56ch; }

@media (max-width: 700px) {
  .b2028-hero { padding: 40px 24px 24px; }
  .b2028-hero h1 { font-size: clamp(42px, 12vw, 64px); }
  .b2028-hero-sub { font-size: 16px; }
}

/* ============================================================
   PROGRESS RAIL (Step indicator)
   ============================================================ */
.b2028-rail-wrap { position: sticky; top: 71px; z-index: 30; background: rgba(251, 249, 244, 0.94); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line-soft); }
.b2028-rail { max-width: var(--max-w); margin: 0 auto; padding: 22px var(--gutter); display: flex; align-items: center; gap: 0; }
.progress-step { display: flex; align-items: center; gap: 12px; flex-shrink: 0; opacity: 0.4; transition: opacity var(--dur-med) var(--ease); }
.progress-step.active,
.progress-step.done { opacity: 1; }
.progress-step .step-circle { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink-15); font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-50); background: var(--paper); transition: all var(--dur-med) var(--ease); }
.progress-step.active .step-circle { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.progress-step.done .step-circle { background: var(--moss); color: var(--paper); border-color: var(--moss); }
.progress-step span:not(.step-circle) { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-70); }
.progress-step.active span:not(.step-circle) { color: var(--ink); font-weight: 600; }
.progress-line { flex: 1; height: 1px; min-width: 30px; margin: 0 18px; background: var(--ink-15); position: relative; }
.progress-line::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--moss); transition: width var(--dur-med) var(--ease); }
.progress-line.done::after { width: 100%; }

@media (max-width: 700px) {
  .b2028-rail-wrap { top: 63px; }
  .b2028-rail { padding: 14px 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .progress-step span:not(.step-circle) { display: none; }
  .progress-step.active span:not(.step-circle) { display: inline; }
  .progress-line { margin: 0 10px; min-width: 20px; }
}

/* ============================================================
   BODY LAYOUT
   ============================================================ */
.mlhs-book-wrap { max-width: var(--max-w); margin: 0 auto; padding: 60px var(--gutter) 120px; background: var(--paper); }
.mlhs-book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 60px; align-items: start; }
.book-container { max-width: none !important; }

@media (max-width: 1080px) {
  .mlhs-book-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
  .mlhs-book-wrap { padding: 40px 20px 80px; }
}

/* ============================================================
   STEP FRAMES
   ============================================================ */
.book-step { display: block; }
.book-step.hidden { display: none !important; }
.step-header { margin-bottom: 40px; }
.step-header h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.5vw, 56px); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 14px; max-width: 20ch; }
.step-header p { font-size: 16px; color: var(--ink-70); max-width: 60ch; line-height: 1.55; }
.step-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.step-actions .b2028-btn { flex: 0 0 auto; }
.step-actions .btn-primary, .step-actions .btn-lg { padding: 16px 32px; font-size: 15px; background: var(--ink); color: var(--paper); border-radius: 999px; border: 0; font-weight: 500; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.step-actions .btn-primary:hover { transform: translateY(-1px); background: var(--moss); }
.step-actions .btn-primary:disabled { background: var(--ink-15); color: var(--ink-50); cursor: not-allowed; transform: none; }
.step-actions .btn-ghost { padding: 14px 24px; background: transparent; color: var(--ink); border: 1px solid var(--ink-15); border-radius: 999px; font-weight: 500; font-size: 14px; cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.step-actions .btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

@media (max-width: 700px) {
  .step-header h1 { font-size: 32px; }
  .step-actions { margin-top: 32px; padding-top: 24px; flex-wrap: wrap-reverse; }
  .step-actions .btn-primary { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   STEP 1 · Service selection
   ============================================================ */
.b2028-callout { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 28px; flex-wrap: wrap; }
.b2028-callout-body { font-size: 14px; color: var(--ink-70); line-height: 1.5; max-width: 40ch; }
.b2028-callout-body strong { color: var(--ink); font-weight: 600; }

/* Tier tabs */
#client-tier-wrap { max-width: 100% !important; margin: 0 0 32px !important; }
#client-tier-wrap > label { font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important; color: var(--ink-50) !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; margin-bottom: 12px !important; text-align: left !important; }
#client-tier-wrap [role="tablist"] { grid-template-columns: 1fr 1fr !important; gap: 0 !important; background: var(--paper-alt) !important; border: 1px solid var(--line) !important; padding: 4px !important; border-radius: 999px !important; max-width: 320px; }
.tier-btn { background: transparent !important; color: var(--ink-70) !important; border: 0 !important; padding: 10px 20px !important; border-radius: 999px !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: -0.005em !important; cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.tier-btn.tier-active { background: var(--ink) !important; color: var(--paper) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
#tier-hint { font-size: 12px !important; color: var(--ink-50) !important; margin-top: 10px !important; text-align: left !important; font-family: var(--sans) !important; }

/* Service selection grid */
.service-select-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 8px; }
.service-option { display: block; cursor: pointer; position: relative; }
.service-option input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.service-option-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: all var(--dur-fast) var(--ease); cursor: pointer; }
.service-option-card:hover { border-color: var(--ink-30); transform: translateY(-1px); }
.service-option input:checked + .service-option-card { border-color: var(--moss); background: var(--moss-tint); box-shadow: 0 8px 24px rgba(42,71,53,0.10); }
.service-option .svc-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--paper-alt); display: inline-flex; align-items: center; justify-content: center; color: var(--moss); flex-shrink: 0; transition: background var(--dur-fast) var(--ease); }
.service-option input:checked + .service-option-card .svc-icon { background: var(--moss); color: var(--paper); }
.service-option .svc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.service-option .svc-info strong { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.service-option .svc-info span { font-size: 12.5px; color: var(--ink-50); line-height: 1.4; }
.service-option .svc-popular {
  /* Undo the .ls-page green pill treatment from landing.css and the absolute
     positioning from style.css so the pill flows into the card's third grid
     column instead of overlapping the border. */
  position: static !important;
  top: auto !important;
  right: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
  justify-self: end;
  align-self: center;
}
.service-option .svc-popular [data-rating-avg] { color: var(--gold); font-weight: 500; }
.service-option .svc-popular [data-rating-stars] { letter-spacing: 0.05em; color: var(--gold); }

@media (max-width: 700px) {
  .service-select-grid { grid-template-columns: 1fr; gap: 10px; }
  .service-option-card { padding: 16px; }
}

/* ============================================================
   STEP 2 · Schedule + Job detail
   ============================================================ */
.avail-notice { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 28px; }
.avail-notice > svg { flex-shrink: 0; color: var(--moss); margin-top: 2px; }
.avail-notice > div { display: flex; flex-direction: column; gap: 2px; }
.avail-notice strong { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); }
.avail-notice span { font-size: 13px; color: var(--ink-70); line-height: 1.5; }

/* Job-detail panel */
.q-card { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; padding: 24px !important; margin-bottom: 24px !important; }
.q-card.hidden { display: none !important; }
.q-card > div:first-child { margin-bottom: 16px; }
.q-card > div:first-child strong { font-family: var(--serif) !important; font-size: 22px !important; font-weight: 400 !important; color: var(--ink) !important; letter-spacing: -0.01em !important; }
.q-card > div:first-child > div { font-size: 13px !important; color: var(--ink-50) !important; margin-top: 4px !important; }
.jd-block.hidden { display: none !important; }
.jd-block label { font-family: var(--mono) !important; font-size: 10.5px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--ink-50) !important; font-weight: 500 !important; }
.jd-block input[type="number"], .jd-block textarea { font-family: var(--sans); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--ink); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.jd-block input[type="number"]:focus, .jd-block textarea:focus { outline: 0; border-color: var(--moss); box-shadow: 0 0 0 3px var(--moss-tint); }
.jd-block > div[id$="-out"] { color: var(--moss) !important; font-family: var(--sans) !important; font-size: 13px !important; font-weight: 500 !important; margin-top: 12px !important; }

.jd-pick { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; transition: all var(--dur-fast) var(--ease); text-align: center; -webkit-tap-highlight-color: transparent; }
.jd-pick:hover { border-color: var(--ink-30); }
.jd-pick.selected { background: var(--moss); border-color: var(--moss); color: var(--paper); }

/* Yard tier picker */
.yard-tier-section { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; padding: 24px !important; margin: 0 0 24px !important; }
.yard-tier-section.hidden { display: none !important; }
.yard-tier-section > div:first-child strong { font-family: var(--serif) !important; font-size: 22px !important; font-weight: 400 !important; color: var(--ink) !important; letter-spacing: -0.01em !important; }
.yard-tier-section > div:first-child > div { font-size: 13px !important; color: var(--ink-50) !important; margin-top: 4px !important; }
.yard-tier-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; }
.yard-tier-opt { display: block; cursor: pointer; position: relative; }
.yard-tier-opt input { position: absolute; opacity: 0; pointer-events: none; }
.yard-tier-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 14px; text-align: center; transition: all var(--dur-fast) var(--ease); }
.yard-tier-card:hover { border-color: var(--ink-30); }
.yard-tier-opt input:checked + .yard-tier-card { border-color: var(--moss); background: var(--moss-tint); box-shadow: 0 6px 16px rgba(42,71,53,0.10); }
.yard-tier-card .tier-name { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; }
.yard-tier-card .tier-sub { font-family: var(--mono); font-size: 10.5px; color: var(--ink-50); letter-spacing: 0.10em; text-transform: uppercase; margin-top: 6px; }
.yard-tier-card .tier-price { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--moss); margin-top: 14px; letter-spacing: -0.01em; }
.yard-tier-card.xl .tier-price { font-size: 15px; color: var(--gold); font-family: var(--mono); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; }
#yard-tier-xl-notice { background: rgba(176,137,71,0.08) !important; border: 1px solid rgba(176,137,71,0.30) !important; color: var(--ink-70) !important; border-radius: var(--radius) !important; padding: 14px 18px !important; margin-top: 16px !important; }
#yard-tier-xl-notice.hidden { display: none !important; }
#yard-tier-xl-notice a { color: var(--gold) !important; font-weight: 600; text-decoration: underline; }

@media (max-width: 700px) {
  .yard-tier-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Day-grid & time chips */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full { grid-column: 1 / -1; }
.form-group > label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); font-weight: 500; }
.form-group .optional { color: var(--ink-30); font-weight: 500; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 11px; margin-left: 6px; }
.form-group input[type="text"], .form-group input[type="tel"], .form-group input[type="email"], .form-group select, .form-group textarea { font-family: var(--sans); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 15px; color: var(--ink); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); width: 100%; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 0; border-color: var(--moss); box-shadow: 0 0 0 3px var(--moss-tint); }
.form-group .field-hint { font-size: 12px; color: var(--ink-50); line-height: 1.4; }

@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
}

.day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 4px; }
.day-grid-loading { grid-column: 1 / -1; padding: 32px; text-align: center; color: var(--ink-50); font-size: 13px; font-family: var(--mono); letter-spacing: 0.05em; }
.day-chip { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; text-align: center; cursor: pointer; transition: all var(--dur-fast) var(--ease); min-height: 76px; display: flex; flex-direction: column; justify-content: center; align-items: center; -webkit-tap-highlight-color: transparent; }
.day-chip:hover { border-color: var(--ink-30); transform: translateY(-1px); }
.day-chip .dow { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink-50); text-transform: uppercase; letter-spacing: 0.14em; }
.day-chip .num { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--ink); line-height: 1.1; margin-top: 4px; letter-spacing: -0.02em; }
.day-chip .mon { font-family: var(--mono); font-size: 10px; color: var(--ink-50); margin-top: 2px; letter-spacing: 0.10em; text-transform: uppercase; }
.day-chip .dot { width: 6px; height: 6px; border-radius: 50%; margin: 6px auto 0; background: var(--ink-15); }
.day-chip.open .dot { background: var(--moss); }
.day-chip.partial .dot { background: var(--gold); }
.day-chip.blocked { opacity: 0.35; cursor: not-allowed; background: var(--paper-alt); }
.day-chip.blocked:hover { transform: none; border-color: var(--line); }
.day-chip.blocked .dot { background: var(--ink-15); }
.day-chip.selected { border-color: var(--moss); background: var(--moss-tint); box-shadow: 0 6px 16px rgba(42,71,53,0.14); }
.day-chip.selected .num { color: var(--moss); }

@media (max-width: 480px) {
  .day-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .day-chip { min-height: 64px; padding: 8px 4px; }
  .day-chip .num { font-size: 20px; }
}

.time-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.time-chip { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; transition: all var(--dur-fast) var(--ease); -webkit-tap-highlight-color: transparent; }
.time-chip:hover { border-color: var(--ink-30); }
.time-chip.selected { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,0.14); }
.time-chip.booked { background: var(--paper-alt); color: var(--ink-30); text-decoration: line-through; cursor: not-allowed; }

/* Estimated time badge */
#hours-display { padding: 14px 18px !important; background: var(--paper-alt) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; font-size: 14px !important; color: var(--ink) !important; font-family: var(--sans) !important; }
#hours-display-text { color: var(--ink); font-weight: 500; }

/* Recurring & autopay */
.recurring-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.recurring-btn { position: relative; display: block; cursor: pointer; }
.recurring-btn input { position: absolute; opacity: 0; pointer-events: none; }
.recurring-btn span { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; text-align: center; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink); transition: all var(--dur-fast) var(--ease); }
.recurring-btn:hover span { border-color: var(--ink-30); }
.recurring-btn input:checked + span { background: var(--moss); border-color: var(--moss); color: var(--paper); }

#autopay-optin { background: var(--paper-alt) !important; border: 1px solid var(--moss-line) !important; border-radius: var(--radius) !important; padding: 16px 18px !important; margin-top: 14px !important; }
#autopay-optin label span:first-of-type { color: var(--moss) !important; font-family: var(--sans) !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; }
#autopay-optin label span:last-of-type { color: var(--ink-70) !important; font-size: 13px !important; }
#autopay-optin label span strong { color: var(--ink) !important; }
#autopay-optin input[type="checkbox"] { accent-color: var(--moss) !important; }

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

/* Add-ons */
.addons-section { margin: 24px 0 0; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.addons-section.hidden { display: none !important; }
.addons-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.addons-header > svg { color: var(--moss); }
.addons-header strong { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; margin-right: 8px; }
.addons-header span { font-size: 13px; color: var(--ink-50); }
.addon-list { display: grid; gap: 10px; }
.addon-option { display: block; cursor: pointer; position: relative; }
.addon-option input { position: absolute; opacity: 0; pointer-events: none; }
.addon-card { display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: 14px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; transition: all var(--dur-fast) var(--ease); }
.addon-card:hover { border-color: var(--ink-30); }
.addon-option input:checked + .addon-card { border-color: var(--moss); background: var(--moss-tint); }
.addon-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--paper-alt); display: inline-flex; align-items: center; justify-content: center; color: var(--moss); }
.addon-option input:checked + .addon-card .addon-icon { background: var(--moss); color: var(--paper); }
.addon-info strong { display: block; font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.addon-info span { font-size: 12.5px; color: var(--ink-50); }
.addon-check { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease); }
.addon-option input:checked + .addon-card .addon-check { background: var(--moss); border-color: var(--moss); }
.addon-option input:not(:checked) + .addon-card .addon-check svg { opacity: 0; }
.addon-option input:checked + .addon-card .addon-check svg { opacity: 1; }

/* Estimate box (STEP 2 preview) */
.estimate-box { margin: 32px 0 0; padding: 26px 28px; background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.estimate-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; font-size: 14px; }
.estimate-row.hidden { display: none !important; }
.estimate-row span { color: rgba(251,249,244,0.65); font-family: var(--sans); }
.estimate-row strong { color: var(--paper); font-family: var(--sans); font-weight: 500; }
.estimate-row.total { padding: 16px 0 0; font-size: 20px; }
.estimate-row.total span { color: rgba(251,249,244,0.75); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.estimate-row.total strong { font-family: var(--serif); font-size: 40px; font-weight: 400; color: var(--paper); letter-spacing: -0.02em; }
.estimate-divider { height: 1px; background: rgba(251,249,244,0.14); margin: 8px 0 4px; }
.estimate-note { font-size: 12px; color: rgba(251,249,244,0.55); margin-top: 12px; line-height: 1.5; }

/* ============================================================
   STEP 4 · Confirm card
   ============================================================ */
.confirm-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.confirm-section { padding: 24px 0; border-bottom: 1px solid var(--line-soft); }
.confirm-section:first-child { padding-top: 0; }
.confirm-section:last-child { border-bottom: 0; padding-bottom: 0; }
.confirm-section.hidden { display: none !important; }
.confirm-section h3 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 16px; }
.confirm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; font-size: 14px; }
.confirm-row.hidden { display: none !important; }
.confirm-row span { color: var(--ink-70); }
.confirm-row strong { color: var(--ink); font-family: var(--sans); font-weight: 500; text-align: right; }
.confirm-row.total { padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line-soft); font-size: 16px; }
.confirm-row.total span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); }
.confirm-row.total strong { font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--moss); letter-spacing: -0.01em; }
.conf-notes-text { font-size: 14px; color: var(--ink-70); line-height: 1.55; }

@media (max-width: 700px) {
  .confirm-card { padding: 24px 20px; }
  .confirm-row.total strong { font-size: 22px; }
}

/* ============================================================
   SIDE PANEL (2028)
   ============================================================ */
.mlhs-side-panel { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 160px; }
.mlhs-side-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.mlhs-side-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 16px; }
.mlhs-included { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.mlhs-included li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-70); line-height: 1.5; }
.mlhs-included li svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--moss); margin-top: 3px; }
.mlhs-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mlhs-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-70); background: var(--paper-alt); border: 1px solid var(--line); font-weight: 500; }
.mlhs-pill--gold { color: var(--gold); border-color: rgba(176,137,71,0.30); background: rgba(176,137,71,0.06); }
.mlhs-stars { font-size: 14px; color: var(--gold); letter-spacing: 0.10em; margin-bottom: 10px; }
.mlhs-attrib { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-50); font-weight: 500; }
.mlhs-attrib span { display: block; margin-top: 2px; color: var(--ink-30); }
.mlhs-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--ink); color: var(--paper); border-radius: 999px; font-size: 13.5px; font-weight: 500; text-decoration: none; transition: all var(--dur-fast) var(--ease); }
.mlhs-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink-15); }
.mlhs-btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mlhs-btn.sm { padding: 10px 18px; font-size: 12.5px; }

@media (max-width: 1080px) {
  .mlhs-side-panel { position: static; }
}

/* Ensure loader.js styles don't push us */
[data-testimonial="representative"] p { font-family: var(--serif); font-size: 20px; line-height: 1.4; color: var(--ink); font-weight: 400; font-style: italic; letter-spacing: -0.005em; }

/* Utility */
.hidden { display: none !important; }

/* ============================================================
   FOOTER (2028)
   ============================================================ */
.b2028-footer { border-top: 1px solid var(--line-soft); padding: 64px var(--gutter) 40px; background: var(--paper); }
.b2028-footer-inner { max-width: var(--max-w); margin: 0 auto; }
.b2028-footer-tag { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 44px); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); max-width: 20ch; margin-bottom: 48px; }
.b2028-footer-tag em { font-style: italic; color: var(--moss); }
.b2028-footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-soft); }
.b2028-footer-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-50); font-weight: 500; margin-bottom: 16px; }
.b2028-footer-col a { display: block; font-size: 14px; color: var(--ink-70); padding: 4px 0; transition: color var(--dur-fast) var(--ease); }
.b2028-footer-col a:hover { color: var(--ink); }
.b2028-footer-col p { font-size: 14px; color: var(--ink-70); line-height: 1.55; margin-top: 4px; }
.b2028-footer-brand { font-family: var(--serif); font-size: 24px; font-style: italic; color: var(--moss); margin-bottom: 8px; letter-spacing: -0.01em; }
.b2028-footer-bar { padding-top: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; color: var(--ink-50); text-transform: uppercase; }

@media (max-width: 900px) {
  .b2028-footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .b2028-footer-cols { grid-template-columns: 1fr; gap: 28px; }
}