/* ============================================================
   SMALL BATHROOM REMODELING — San Diego
   Redesign v4: "Coastal Modern" — sun-bleached warmth, ocean
   depth, editorial layouts, generous whitespace, split panels,
   illuminated borders on dark sections
   ============================================================ */

/* ── Design tokens ── */
.page-sbr {
  --sbr-ink:      #112833;
  --sbr-teal:     #0e6b7a;
  --sbr-teal-lt:  #d2eef2;
  --sbr-teal-dk:  #094954;
  --sbr-coral:    #d65a3a;
  --sbr-coral-lt: rgba(214,90,58,.08);
  --sbr-sand:     #f5efe6;
  --sbr-dune:     #ece4d6;
  --sbr-paper:    #fcfaf7;
  --sbr-white:    #ffffff;
  --sbr-slate:    #3f5665;
  --sbr-mute:     #5a7383;
  --sbr-rule:     rgba(17,40,51,.08);
  --sbr-serif:    'Fraunces', Georgia, serif;
  --sbr-sans:     'Plus Jakarta Sans', system-ui, sans-serif;
  --sbr-radius:   8px;
  --sbr-radius-lg: 20px;
  font-family: var(--sbr-sans);
  background: var(--sbr-paper);
}

/* ── Base resets ── */
.page-sbr *, .page-sbr *::before, .page-sbr *::after { box-sizing: border-box; }
.page-sbr p { max-width: 72ch; }
.page-sbr h1, .page-sbr h2, .page-sbr h3, .page-sbr h4, .page-sbr h5 { line-height: 1.18; }
.page-sbr [id] { scroll-margin-top: 92px; }
#lead-form { scroll-margin-top: 96px; }

/* ── Eyebrow label ── */
.page-sbr .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sbr-coral);
  margin-bottom: 14px;
}
.page-sbr .eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--sbr-coral);
  border-radius: 2px;
}

/* ── Section spacing ── */
.page-sbr .section-pad        { padding: 110px 0; position: relative; }
.page-sbr .section-pad-compact { padding: 72px 0; }
.page-sbr .section-alt   { background: var(--sbr-sand); }
.page-sbr .section-sand  { background: var(--sbr-paper); }
.page-sbr .section-white { background: var(--sbr-white); }

/* ── Section heading block ── */
.page-sbr .sbr-head { max-width: 700px; margin-bottom: 56px; }
.page-sbr .sbr-head h2 {
  font-family: var(--sbr-serif);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 300;
  color: var(--sbr-ink);
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.page-sbr .sbr-head .intro-text,
.page-sbr .sbr-head p {
  color: var(--sbr-mute);
  font-size: 16px;
  line-height: 1.78;
  margin: 0;
}

/* ── Photo treatment ── */
.page-sbr .sbr-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--sbr-radius-lg);
  background: var(--sbr-dune);
  box-shadow: 0 20px 60px rgba(17,40,51,.12);
}
.page-sbr .sbr-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Utility tags ── */
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px; letter-spacing: .04em; }
.tag-good { background: var(--sbr-teal-lt); color: var(--sbr-teal); }
.tag-note { background: var(--sbr-coral-lt); color: var(--sbr-coral); }

/* ── Fade-in animation ── */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; }
  .fade-in.visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-sbr *, .page-sbr *::before, .page-sbr *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   §1  LEAD FORM — "Blueprint Atelier" — 3-layer stack with
   offset card, editorial photo, floating form
═══════════════════════════════════════════════════════════════ */

.sbr-form-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 10% 90%, rgba(14,107,122,.18) 0%, transparent 50%),
    radial-gradient(ellipse 80% 100% at 95% 20%, rgba(214,90,58,.07) 0%, transparent 45%),
    linear-gradient(160deg, #1a2e38 0%, #0b1c26 35%, #071318 100%);
}
/* Decorative geometric lines */
.sbr-form-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(30deg, transparent 48.5%, rgba(14,107,122,.06) 48.5%, rgba(14,107,122,.06) 49.5%, transparent 49.5%),
    linear-gradient(150deg, transparent 48.5%, rgba(214,90,58,.04) 48.5%, rgba(214,90,58,.04) 49.5%, transparent 49.5%);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* Background image — soft reveal on right */
.sbr-form-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 55%;
  z-index: 0;
}
.sbr-form-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .12;
  mask-image: linear-gradient(to left, rgba(0,0,0,.8), transparent 85%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.8), transparent 85%);
}
.sbr-form-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #0b1c26 0%, transparent 40%);
  pointer-events: none;
}

/* Container — asymmetric golden-ratio grid */
.sbr-form-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  padding: 80px 5% !important;
  align-items: center;
  max-width: 1320px !important;
  margin: 0 auto;
}

/* ── LEFT: Editorial intro ── */
.sbr-form-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sbr-form-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sbr-coral);
  margin-bottom: 20px;
}
.sbr-form-eyebrow::before {
  content: '';
  width: 32px; height: 2px;
  background: var(--sbr-coral);
  border-radius: 2px;
}

.sbr-form-heading {
  font-family: var(--sbr-serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 20px;
}

.sbr-form-lead {
  font-size: 16px;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  margin: 0 0 36px;
  max-width: 48ch;
}

/* Photo card — offset, angled corner */
.sbr-form-photo-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: 4px 40px 4px 4px;
  overflow: hidden;
  box-shadow:
    0 32px 80px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.06);
  margin-bottom: 32px;
}
.sbr-form-photo-card figure {
  margin: 0;
  height: 260px;
  overflow: hidden;
}
.sbr-form-photo-card figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.sbr-form-photo-card:hover figure img { transform: scale(1.07); }
.sbr-form-photo-badge {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, var(--sbr-teal) 0%, var(--sbr-teal-dk) 100%);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 12px 20px;
  letter-spacing: .02em;
}
.sbr-form-photo-badge svg { flex-shrink: 0; color: var(--sbr-teal-lt); }

/* Stats — horizontal row with vertical dividers */
.sbr-form-stats {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  max-width: 420px;
}
.sbr-form-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 12px;
  position: relative;
  gap: 4px;
}
.sbr-form-stat::after {
  content: '';
  position: absolute;
  right: 0; top: 25%; bottom: 25%;
  width: 1px;
  background: rgba(255,255,255,.12);
}
.sbr-form-stat:last-child::after { display: none; }
.sbr-stat-num {
  font-family: var(--sbr-serif);
  font-size: 2rem;
  font-weight: 300;
  color: #fff;
  line-height: 1;
}
.sbr-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  text-align: center;
}

/* Trust list */
.sbr-form-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 420px;
}
.sbr-form-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: 7px 14px;
  border-radius: 100px;
  transition: background .2s, border-color .2s;
}
.sbr-form-trust li:hover {
  background: rgba(14,107,122,.2);
  border-color: rgba(14,107,122,.4);
}
.sbr-form-trust li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sbr-coral);
  flex-shrink: 0;
}

/* ── RIGHT: Form card — elevated, warm ── */
.sbr-form-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbr-form-card {
  background: var(--sbr-white);
  width: 100%;
  max-width: 480px;
  border-radius: 4px 28px 4px 28px;
  padding: 44px 38px 40px;
  box-shadow:
    0 40px 100px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
/* Decorative corner accent */
.sbr-form-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 100px; height: 100px;
  background: linear-gradient(135deg, var(--sbr-teal-lt) 0%, transparent 60%);
  border-radius: 0 28px 0 0;
  pointer-events: none;
  opacity: .5;
}
.sbr-form-card-top { margin-bottom: 22px; position: relative; }
.sbr-form-card-top .form-heading {
  font-family: var(--sbr-serif);
  font-size: clamp(1.45rem, 2.1vw, 1.8rem);
  font-weight: 300;
  color: var(--sbr-ink);
  letter-spacing: -.015em;
  margin: 0 0 6px;
  line-height: 1.2;
}
.sbr-form-card-top .form-subhead {
  color: var(--sbr-mute);
  font-size: 13.5px;
  margin: 0;
}

/* Hide duplicate headings inside estimate-card */
.sbr-form-card .estimate-card .form-heading,
.sbr-form-card .estimate-card .form-subhead { display: none; }

/* Form field overrides inside card */
.sbr-form-card .btn-primary.btn-submit {
  background: var(--sbr-coral);
  border-color: var(--sbr-coral);
  border-radius: 10px;
}
.sbr-form-card .btn-primary.btn-submit:hover { background: #bf4a2c; }

/* Responsive */
@media (max-width: 1024px) {
  .sbr-form-container {
    grid-template-columns: 1fr;
    padding: 60px 24px !important;
    gap: 40px;
  }
  .sbr-form-photo-card, .sbr-form-stats, .sbr-form-trust { max-width: 100%; }
  .sbr-form-card { max-width: 100%; }
}
@media (max-width: 600px) {
  .sbr-form-container { padding: 44px 16px !important; }
  .sbr-form-card { padding: 32px 22px 28px; border-radius: 4px 18px 4px 18px; }
  .sbr-form-stats { flex-wrap: wrap; }
  .sbr-form-stat { min-width: 33%; }
  .sbr-form-trust { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   §2  WHY DIFFICULT — Banner image + numbered counter list
═══════════════════════════════════════════════════════════════ */
#why-difficult { background: var(--sbr-sand); }
.sbr-problems {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: start;
}
.sbr-problems-photo {
  position: sticky;
  top: 100px;
  height: 620px;
  border-radius: var(--sbr-radius-lg);
}
.problems-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  counter-reset: sbr-p;
}
.problem-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 18px;
  padding: 28px 0;
  border-bottom: 1px solid var(--sbr-rule);
  counter-increment: sbr-p;
  align-items: start;
  transition: background .2s;
  position: relative;
}
.problem-card:first-child { border-top: 1px solid var(--sbr-rule); }
.problem-card:hover { background: rgba(14,107,122,.03); }
.problem-card::before {
  content: counter(sbr-p, decimal-leading-zero);
  font-family: var(--sbr-serif);
  font-style: italic;
  font-size: 32px;
  font-weight: 300;
  color: var(--sbr-teal);
  line-height: 1;
  padding-top: 2px;
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: start;
}
.problem-card .problem-icon { display: none; }
.problem-card h4 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--sbr-ink);
  margin-bottom: 6px;
  grid-column: 2;
}
.problem-card p {
  font-size: 14.5px;
  color: var(--sbr-mute);
  margin: 0;
  line-height: 1.62;
  grid-column: 2;
}
.problem-impact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sbr-coral);
  background: var(--sbr-coral-lt);
  padding: 5px 14px;
  border-radius: 100px;
  grid-column: 2;
}

/* ═══════════════════════════════════════════════════════════════
   §3  LAYOUT STRATEGIES — Two-column: intro+photo | options | plans
═══════════════════════════════════════════════════════════════ */
#layout { background: var(--sbr-paper); }

/* Top row: heading left, hero image right */
.layout-section-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
  margin-bottom: 56px;
}
.layout-hero-side {
  height: 340px;
  border-radius: var(--sbr-radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 52px rgba(17,40,51,.11);
}
.layout-hero-side img { width: 100%; height: 100%; object-fit: cover; }

/* Body: options list left, before/after plans right */
.layout-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* legacy — keep for safety but no longer used */
.sbr-layout-hero { display: none; }
.layout-grid { max-width: 100%; }

.layout-options { display: flex; flex-direction: column; }
.layout-option {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--sbr-rule);
  align-items: flex-start;
}
.layout-option:first-child { border-top: 1px solid var(--sbr-rule); }
.layout-option-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--sbr-teal-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sbr-teal);
  transition: background .25s, color .25s, transform .25s;
}
.layout-option:hover .layout-option-icon { background: var(--sbr-teal); color: #fff; transform: scale(1.08); }
.layout-option h4 { font-size: 16px; font-weight: 700; color: var(--sbr-ink); margin-bottom: 6px; }
.layout-option p { font-size: 14.5px; color: var(--sbr-mute); margin: 0; line-height: 1.62; }

/* Before/after plans */
.sbr-plans {
  background: var(--sbr-white);
  border: 1px solid var(--sbr-rule);
  border-radius: var(--sbr-radius-lg);
  padding: 40px 36px 32px;
  box-shadow: 0 16px 52px rgba(17,40,51,.07);
  margin-top: 52px;
}
.sbr-plans-head h4 {
  font-family: var(--sbr-serif);
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  font-weight: 300;
  color: var(--sbr-ink);
  margin: 0 0 28px;
  letter-spacing: -.015em;
}
.sbr-plans-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sbr-plan {
  border: 1.5px solid var(--sbr-rule);
  border-radius: var(--sbr-radius-lg);
  overflow: hidden;
}
.sbr-plan--before { border-color: rgba(214,90,58,.25); }
.sbr-plan--after  { border-color: rgba(14,107,122,.22); }
.sbr-plan-photo { margin: 0; position: relative; overflow: hidden; height: 180px; }
.sbr-plan-photo img { width: 100%; height: 100%; object-fit: cover; }
.sbr-plan-photo span {
  position: absolute;
  left: 14px; bottom: 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--sbr-ink);
  color: #fff;
}
.sbr-plan--before .sbr-plan-photo span { background: var(--sbr-coral); }
.sbr-plan-sheet { padding: 14px; background: var(--sbr-sand); }
.space-diagram { width: 100%; }
.sbr-plan-keys {
  margin-top: 24px;
  padding: 20px 24px;
  background: var(--sbr-teal-lt);
  border-radius: 14px;
}
.sbr-plan-keys h5 { font-size: 14px; color: var(--sbr-teal-dk); margin: 0 0 12px; font-weight: 700; }
.sbr-plan-keys ul { display: grid; gap: 9px; }
.sbr-plan-keys li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--sbr-slate);
  align-items: flex-start;
}
.sbr-plan-keys li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sbr-coral);
  flex-shrink: 0;
  margin-top: 6px;
}
.sbr-plan-fine { font-style: italic; font-size: 13px; color: var(--sbr-mute); margin-top: 14px; }
.sbr-plan-details { margin-top: 8px; }
.sbr-plan-details summary { font-size: 13px; color: var(--sbr-mute); cursor: pointer; padding: 6px 0; }
.sbr-plan-details p { font-size: 13px; color: var(--sbr-mute); margin-top: 8px; line-height: 1.65; }
.diagram-caption { font-size: 12.5px; color: var(--sbr-mute); margin-top: 12px; text-align: center; }
.demolition-note {
  margin-top: 24px;
  background: var(--sbr-coral-lt);
  border-left: 3px solid var(--sbr-coral);
  padding: 18px 22px;
  border-radius: 0 14px 14px 0;
  font-size: 14.5px;
  color: var(--sbr-ink);
  line-height: 1.62;
}

/* ═══════════════════════════════════════════════════════════════
   §4  STORAGE — Alternating horizontal cards + quote strip
═══════════════════════════════════════════════════════════════ */
#storage { background: var(--sbr-sand); }
.storage-zone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.storage-card {
  background: var(--sbr-white);
  border-radius: var(--sbr-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 28px rgba(17,40,51,.06);
  border: 1.5px solid transparent;
  transition: border-color .25s, box-shadow .3s, transform .3s;
}
.storage-card:nth-child(1),
.storage-card:nth-child(4) {
  grid-column: span 2;
  flex-direction: row;
}
.storage-card:nth-child(1) .sbr-card-img,
.storage-card:nth-child(4) .sbr-card-img {
  width: 42%;
  height: auto;
  min-height: 280px;
}
.storage-card:hover {
  border-color: var(--sbr-teal-lt);
  box-shadow: 0 20px 56px rgba(14,107,122,.1);
  transform: translateY(-4px);
}
.storage-card .sbr-card-img { height: 200px; overflow: hidden; margin: 0; flex-shrink: 0; }
.storage-card .sbr-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.storage-card:hover .sbr-card-img img { transform: scale(1.06); }
.storage-card .sbr-card-body { padding: 26px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.storage-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: var(--sbr-teal-lt);
  color: var(--sbr-teal);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
  align-self: flex-start;
}
.storage-card h4 { font-size: 17px; color: var(--sbr-ink); margin-bottom: 8px; font-weight: 700; }
.storage-card p { font-size: 14.5px; color: var(--sbr-mute); line-height: 1.62; margin: 0; }
.storage-card ul { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.storage-card li {
  font-size: 13.5px;
  color: var(--sbr-slate);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
}
.storage-card li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--sbr-teal);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}

/* Homeowner priorities — pull-quote cards */
.homeowner-priorities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.priority-card {
  background: var(--sbr-white);
  border-radius: var(--sbr-radius-lg);
  padding: 32px 26px;
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--sbr-teal);
  box-shadow: 0 6px 24px rgba(17,40,51,.06);
}
.priority-card::before {
  content: '\201C';
  font-family: var(--sbr-serif);
  font-size: 72px;
  font-style: italic;
  font-weight: 300;
  color: var(--sbr-teal-lt);
  position: absolute;
  top: -4px; left: 18px;
  line-height: 1;
}
.priority-card p {
  font-size: 15px;
  color: var(--sbr-slate);
  line-height: 1.68;
  font-style: italic;
  margin: 0;
  position: relative;
  z-index: 1;
}
.priority-card .priority-type {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--sbr-teal);
  margin-top: 18px;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   §5  SHOWER VS TUB — Split hero comparison
═══════════════════════════════════════════════════════════════ */
#shower-tub { background: var(--sbr-paper); }
.shower-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.compare-card {
  background: var(--sbr-white);
  border-radius: var(--sbr-radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(17,40,51,.08);
  border: 1.5px solid transparent;
  transition: border-color .25s, transform .3s, box-shadow .3s;
}
.compare-card:hover { border-color: var(--sbr-teal-lt); transform: translateY(-5px); box-shadow: 0 24px 64px rgba(14,107,122,.12); }
.compare-card .sbr-card-img { height: 280px; margin: 0; overflow: hidden; position: relative; }
.compare-card .sbr-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.compare-card:hover .sbr-card-img img { transform: scale(1.05); }
.compare-card .sbr-card-body { padding: 32px 28px 36px; }
.compare-card h4 {
  font-family: var(--sbr-serif);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--sbr-ink);
  margin-bottom: 20px;
  letter-spacing: -.015em;
}
.compare-item { display: flex; flex-direction: column; }
.compare-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--sbr-rule);
}
.compare-row:last-child { border-bottom: none; }
.compare-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sbr-teal);
  min-width: 100px;
  flex-shrink: 0;
  padding-top: 2px;
}
.compare-val { font-size: 14.5px; color: var(--sbr-mute); line-height: 1.55; }
.consider-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.consider-item { display: flex; gap: 12px; font-size: 14.5px; color: var(--sbr-mute); align-items: flex-start; }
.consider-icon { color: var(--sbr-teal); flex-shrink: 0; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   §6  MATERIALS — Sticky sidebar photo + styled table
═══════════════════════════════════════════════════════════════ */
#materials { background: var(--sbr-sand); }
.sbr-materials {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 44px;
}
.sbr-materials-photo {
  height: 400px;
  border-radius: var(--sbr-radius-lg);
  position: sticky;
  top: 100px;
}
.table-wrap {
  overflow-x: auto;
  border-radius: var(--sbr-radius-lg);
  border: 1px solid var(--sbr-rule);
  background: var(--sbr-white);
  box-shadow: 0 8px 32px rgba(17,40,51,.06);
}
.table-wrap:focus { outline: 2px solid var(--sbr-teal); outline-offset: 2px; }
.page-sbr table { width: 100%; border-collapse: collapse; min-width: 560px; }
.page-sbr thead { background: var(--sbr-teal-dk); }
.page-sbr th {
  text-align: left;
  padding: 16px 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.page-sbr td { padding: 14px 20px; font-size: 14px; color: var(--sbr-ink); vertical-align: top; line-height: 1.55; }
.page-sbr tr:nth-child(even) td { background: var(--sbr-sand); }
.page-sbr tr:hover td { background: var(--sbr-teal-lt); }
.sbr-finish-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}
.sbr-finish-pair > div {
  background: var(--sbr-white);
  border-radius: var(--sbr-radius-lg);
  padding: 30px 28px;
  border-left: 4px solid var(--sbr-teal);
  box-shadow: 0 6px 24px rgba(17,40,51,.05);
}
.sbr-finish-pair h4 { font-size: 17px; color: var(--sbr-ink); margin-bottom: 12px; font-weight: 700; }
.sbr-finish-pair p { font-size: 15px; color: var(--sbr-mute); line-height: 1.68; margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   §7  LIGHTING — Dark section, illuminated-border cards
═══════════════════════════════════════════════════════════════ */
.sbr-night {
  background: linear-gradient(165deg, #0a1e2a 0%, #152e3c 100%);
  color: rgba(255,255,255,.85);
  position: relative;
  overflow: hidden;
}
.sbr-night::before {
  content: '';
  position: absolute;
  top: -150px; right: -150px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,107,122,.35) 0%, transparent 70%);
  pointer-events: none;
}
.sbr-night::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,90,58,.12) 0%, transparent 70%);
  pointer-events: none;
}
.sbr-night h2,
.sbr-night .sbr-head h2,
.sbr-night h4 { color: #fff; }
.sbr-night .eyebrow { color: var(--sbr-teal-lt); }
.sbr-night .eyebrow::before { background: var(--sbr-teal-lt); }
.sbr-night .intro-text,
.sbr-night .sbr-head p { color: rgba(255,255,255,.6); }
.sbr-night-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.sbr-night-hero .sbr-photo {
  height: 300px;
  box-shadow: 0 28px 72px rgba(0,0,0,.4);
  border-radius: var(--sbr-radius-lg);
}
.lighting-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lighting-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--sbr-radius-lg);
  padding: 28px 24px;
  backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.lighting-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(14,107,122,.5);
  transform: translateY(-4px);
  box-shadow: 0 0 24px rgba(14,107,122,.2), inset 0 0 0 1px rgba(14,107,122,.3);
}
.lighting-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(210,238,242,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px;
  color: var(--sbr-teal-lt);
}
.lighting-card h4 { font-size: 16px; color: #fff; margin-bottom: 10px; font-weight: 700; }
.lighting-card p { font-size: 14.5px; color: rgba(255,255,255,.58); line-height: 1.62; margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   §8  ACCESSIBILITY — Timeline list + sticky photo
═══════════════════════════════════════════════════════════════ */
#accessibility { background: var(--sbr-paper); }
.sbr-access {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: start;
}
.sbr-access-photo {
  position: sticky;
  top: 100px;
  height: 640px;
  border-radius: var(--sbr-radius-lg);
  min-height: 0;
  order: 2;
}
.access-features {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 32px;
  order: 1;
}
.access-features::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--sbr-teal) 0%, var(--sbr-coral) 100%);
  border-radius: 2px;
}
.access-feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 24px;
  margin-left: 0;
  position: relative;
  background: var(--sbr-white);
  border-radius: var(--sbr-radius);
  border: 1.5px solid transparent;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  box-shadow: 0 2px 14px rgba(17,40,51,.04);
  margin-bottom: 12px;
}
.access-feature::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 32px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sbr-teal);
  border: 2px solid var(--sbr-paper);
}
.access-feature:hover {
  border-color: var(--sbr-teal-lt);
  box-shadow: 0 12px 36px rgba(14,107,122,.08);
  transform: translateX(4px);
}
.access-feature-icon {
  width: 42px; height: 42px;
  background: var(--sbr-teal-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sbr-teal);
}
.access-feature h4 { font-size: 15.5px; color: var(--sbr-ink); margin-bottom: 5px; font-weight: 700; }
.access-feature p { font-size: 14px; color: var(--sbr-mute); margin: 0; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   §9  PROCESS — Vertical spine + aside panel
═══════════════════════════════════════════════════════════════ */
#process { background: var(--sbr-sand); }
.sbr-process {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 60px;
  align-items: start;
}
.process-steps {
  display: flex;
  flex-direction: column;
  position: relative;
  list-style: none;
  padding: 0; margin: 0;
}
.process-steps::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 52px;
  bottom: 52px;
  width: 2px;
  background: linear-gradient(180deg, var(--sbr-teal) 0%, var(--sbr-coral) 100%);
  border-radius: 2px;
}
.process-step {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 28px 0;
  position: relative;
}
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sbr-white);
  color: var(--sbr-teal);
  border: 2px solid var(--sbr-teal);
  font-family: var(--sbr-serif);
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
  box-shadow: 0 6px 20px rgba(14,107,122,.12);
}
.process-step:hover .step-num {
  background: var(--sbr-teal);
  color: #fff;
  border-color: var(--sbr-teal);
  transform: scale(1.1);
}
.step-content { padding-top: 14px; }
.step-content h4 { font-size: 17px; color: var(--sbr-ink); margin-bottom: 8px; font-weight: 700; }
.step-content p { font-size: 14.5px; color: var(--sbr-mute); margin: 0; line-height: 1.62; }

/* Process aside */
.sbr-process-aside .sbr-photo { height: 320px; margin-bottom: 24px; }
.sbr-note-card {
  background: var(--sbr-white);
  border-radius: var(--sbr-radius-lg);
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 8px 28px rgba(17,40,51,.06);
  border-top: 4px solid var(--sbr-teal);
}
.sbr-note-card h4 { font-size: 16.5px; color: var(--sbr-ink); margin-bottom: 12px; font-weight: 700; }
.sbr-note-card p { font-size: 14.5px; color: var(--sbr-mute); line-height: 1.68; }
.sbr-note-warn {
  background: var(--sbr-coral-lt);
  border-radius: var(--sbr-radius-lg);
  padding: 26px;
  border: 1.5px solid rgba(214,90,58,.18);
}
.sbr-note-warn h4 { color: var(--sbr-coral); margin-bottom: 12px; font-size: 16px; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   §10  DESIGN CONCEPTS — Featured first card + 2-col below
═══════════════════════════════════════════════════════════════ */
#concepts { background: var(--sbr-paper); }
.concepts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.concepts-grid .concept-card:first-child {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
}
.concepts-grid .concept-card:first-child .concept-visual {
  height: auto;
  min-height: 320px;
}
.concept-card {
  background: var(--sbr-white);
  border-radius: var(--sbr-radius-lg);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
  box-shadow: 0 6px 28px rgba(17,40,51,.07);
  border: 1.5px solid transparent;
}
.concept-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(17,40,51,.12);
  border-color: var(--sbr-teal-lt);
}
.concept-visual { height: 260px; position: relative; overflow: hidden; }
.concept-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.concept-card:hover .concept-visual img { transform: scale(1.06); }
.concept-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17,40,51,.7) 0%, transparent 50%);
  pointer-events: none;
}
.concept-label {
  position: absolute;
  bottom: 16px; left: 22px;
  color: rgba(255,255,255,.92);
  font-family: var(--sbr-serif);
  font-size: 26px;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  text-shadow: 0 3px 14px rgba(0,0,0,.5);
  z-index: 1;
}
.concept-proof { display: none; }
.concept-body { padding: 26px 24px 24px; }
.concept-body h4 {
  font-family: var(--sbr-serif);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--sbr-ink);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.concept-body p { font-size: 14px; color: var(--sbr-mute); line-height: 1.62; margin: 0; }
.concept-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.concept-tag {
  font-size: 11px;
  font-weight: 700;
  background: var(--sbr-sand);
  color: var(--sbr-teal);
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid var(--sbr-teal-lt);
}

/* ═══════════════════════════════════════════════════════════════
   §11  SERVICE AREAS — Dark panel with colored region tiles
═══════════════════════════════════════════════════════════════ */
.sbr-service-areas {
  background: linear-gradient(150deg, #0c222e 0%, #132d3a 100%);
  color: rgba(255,255,255,.82);
  position: relative;
  overflow: hidden;
}
.sbr-service-areas::after {
  content: '';
  position: absolute;
  bottom: -120px; left: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,107,122,.25) 0%, transparent 70%);
  pointer-events: none;
}
.sbr-service-areas .sbr-head h2 { color: #fff; }
.sbr-service-areas .eyebrow { color: var(--sbr-teal-lt); }
.sbr-service-areas .eyebrow::before { background: var(--sbr-teal-lt); }
.sbr-service-areas .sbr-head p { color: rgba(255,255,255,.55); }
.sbr-areas-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 48px;
  position: relative;
  z-index: 1;
}
.sbr-area-group {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--sbr-radius-lg);
  padding: 26px 22px;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.sbr-area-group:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-4px);
  box-shadow: 0 16px 44px rgba(0,0,0,.2);
}
.sbr-area-region {
  font-family: var(--sbr-serif);
  font-size: 1rem;
  font-weight: 300;
  color: #fff;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.sbr-area-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
.sbr-area-dot--coast   { background: #4db8d4; color: #4db8d4; }
.sbr-area-dot--central { background: var(--sbr-coral); color: var(--sbr-coral); }
.sbr-area-dot--north   { background: #6ab87a; color: #6ab87a; }
.sbr-area-dot--east    { background: #d4b84e; color: #d4b84e; }
.sbr-area-dot--south   { background: #b478d4; color: #b478d4; }
.sbr-area-list { list-style: none; margin: 0; padding: 0; }
.sbr-area-list li {
  font-size: .9rem;
  color: rgba(255,255,255,.55);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  line-height: 1.4;
}
.sbr-area-list li:last-child { border-bottom: none; }
.sbr-areas-cta {
  text-align: center;
  margin-top: 44px;
  padding: 26px 32px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  position: relative;
  z-index: 1;
}
.sbr-areas-cta p { margin: 0; font-size: 1rem; color: rgba(255,255,255,.55); }
.sbr-areas-cta a { color: var(--sbr-teal-lt); font-weight: 700; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════
   §12  FAQ — Sticky sidebar + bordered accordion cards
═══════════════════════════════════════════════════════════════ */
#faqs { background: var(--sbr-sand); scroll-margin-top: 68px; }
.sbr-faqs {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: start;
}
.sbr-faqs-head { position: sticky; top: 100px; }
.sbr-faqs-head h2 {
  font-family: var(--sbr-serif);
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  font-weight: 300;
  color: var(--sbr-ink);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 20px;
}
.sbr-faqs-head .eyebrow { margin-bottom: 12px; }
.sbr-faqs-head .sbr-photo { height: 240px; margin-top: 28px; border-radius: var(--sbr-radius-lg); }
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: none !important; }
.faq-item {
  background: var(--sbr-white);
  border-radius: var(--sbr-radius);
  overflow: hidden;
  border: 1.5px solid var(--sbr-rule);
  transition: border-color .25s, box-shadow .25s;
}
.faq-item:hover { border-color: var(--sbr-teal-lt); }
.faq-item[open] { border-color: var(--sbr-teal); box-shadow: 0 8px 32px rgba(14,107,122,.08); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--sbr-ink);
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: none;
  border: none;
  transition: background .18s;
}
.faq-q:hover { background: var(--sbr-teal-lt); }
.faq-q:focus-visible { outline: 2px solid var(--sbr-teal); outline-offset: -2px; }
.faq-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sbr-dune);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sbr-teal);
  transition: transform .25s, background .2s, color .2s;
}
.faq-item[open] .faq-icon { transform: rotate(180deg); background: var(--sbr-teal); color: #fff; }
.faq-a {
  padding: 0 26px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .25s;
}
.faq-a.open { max-height: 700px; padding-bottom: 24px; }
.faq-a-inner { padding-top: 18px; border-top: 1px solid var(--sbr-dune); }
.faq-a p { font-size: 15px; color: var(--sbr-mute); line-height: 1.72; margin-bottom: 14px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: var(--sbr-ink); }
.faq-noscript { padding: 0 26px 24px; }
noscript .faq-a { max-height: none; padding-bottom: 24px; display: block; }

/* ═══════════════════════════════════════════════════════════════
   §13  FINAL CTA — Split panel: image left, content right
═══════════════════════════════════════════════════════════════ */
.cta-section {
  position: relative;
  overflow: hidden;
  background: var(--sbr-ink);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  min-height: 400px;
}
.sbr-cta-bg {
  position: relative;
  grid-column: 1;
  grid-row: 1;
}
.sbr-cta-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(1.1); }
.cta-section .container {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 52px;
  background: var(--sbr-white);
  position: relative;
  z-index: 1;
}
.cta-section h2 {
  font-family: var(--sbr-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  color: var(--sbr-ink);
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-align: left;
}
.cta-section p {
  color: var(--sbr-mute);
  font-size: 16.5px;
  margin: 0 0 36px;
  max-width: 480px;
  line-height: 1.68;
  text-align: left;
}
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; }

/* ═══════════════════════════════════════════════════════════════
   LEGACY / unused classes — kept for safety
═══════════════════════════════════════════════════════════════ */
.sbr-atlas h3 { font-family: var(--sbr-serif); font-weight: 300; font-size: 1.5rem; color: var(--sbr-ink); margin-bottom: 12px; }
.checklist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; counter-reset: sbr-q; }
.checklist-item {
  background: #fff; border-radius: var(--sbr-radius-lg); padding: 20px 22px;
  display: flex; gap: 14px; align-items: flex-start;
  counter-increment: sbr-q; box-shadow: 0 3px 14px rgba(17,40,51,.05);
  border: 1.5px solid transparent; transition: border-color .2s;
}
.checklist-item:hover { border-color: var(--sbr-teal-lt); }
.checklist-q-icon {
  width: 38px; height: 38px; background: var(--sbr-sand); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: transparent; font-size: 0; position: relative;
}
.checklist-q-icon::after {
  content: counter(sbr-q, decimal-leading-zero);
  color: var(--sbr-coral); font-family: var(--sbr-serif); font-style: italic; font-size: 16px; font-weight: 300;
}
.checklist-item h4 { font-size: 15px; color: var(--sbr-ink); margin-bottom: 4px; }
.checklist-item p { font-size: 14px; color: var(--sbr-mute); margin: 0; line-height: 1.55; }
.city-tag {
  display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12); border-radius: 100px; padding: 7px 16px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); transition: .2s;
}
.city-tag:hover { border-color: var(--sbr-teal-lt); background: rgba(210,238,242,.1); }
.city-dot { width: 6px; height: 6px; background: var(--sbr-coral); border-radius: 50%; }
.availability-note {
  background: rgba(210,238,242,.12); border-left: 3px solid var(--sbr-teal-lt);
  padding: 16px 20px; border-radius: 0 14px 14px 0; font-size: 15px; color: rgba(255,255,255,.75); margin-top: 20px;
}
.cta-phone-note { font-size: 13px; color: rgba(255,255,255,.45); margin-top: 12px; }
.btn-demo { cursor: default; opacity: .75; }
.jurisdiction-box {
  background: rgba(255,255,255,.06); border-radius: var(--sbr-radius-lg);
  padding: 30px; margin-top: 30px; border: 1px solid rgba(255,255,255,.1);
}
.jurisdiction-box h4 { font-size: 17px; color: #fff; margin-bottom: 14px; }
.jurisdiction-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.jurisdiction-col { font-size: 14px; color: rgba(255,255,255,.6); }
.jurisdiction-col strong { display: block; color: rgba(255,255,255,.85); font-weight: 700; margin-bottom: 7px; }
.jurisdiction-col ul { display: flex; flex-direction: column; gap: 5px; }
.jurisdiction-col li::before {
  content: ''; display: inline-block; width: 5px; height: 5px;
  background: var(--sbr-teal-lt); border-radius: 50%; margin-right: 8px; vertical-align: middle;
}

/* Concepts intro grid */
@media (max-width: 900px) {
  .sbr-concepts-intro-wrap { grid-template-columns: 1fr !important; }
  .sbr-concepts-intro-wrap figure { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .page-sbr .section-pad { padding: 80px 0; }
  .layout-section-top,
  .layout-body-grid,
  .sbr-problems,
  .sbr-materials,
  .sbr-night-hero,
  .sbr-access,
  .sbr-process,
  .sbr-faqs { grid-template-columns: 1fr; }
  .sbr-problems-photo { position: static; height: 280px; }
  .sbr-access-photo { position: static; height: 300px; min-height: 0; order: 0; }
  .access-features { order: 0; }
  .sbr-faqs-head { position: static; }
  .layout-hero-side { height: 240px; }
  .sbr-materials-photo { position: static; }
  .storage-zone-grid { grid-template-columns: 1fr 1fr; }
  .storage-card:nth-child(1),
  .storage-card:nth-child(4) { grid-column: span 2; }
  .concepts-grid { grid-template-columns: repeat(2, 1fr); }
  .concepts-grid .concept-card:first-child { grid-column: span 2; }
  .sbr-areas-grid { grid-template-columns: repeat(3, 1fr); }
  .cta-section { grid-template-columns: 1fr; }
  .sbr-cta-bg { position: absolute; inset: 0; }
  .sbr-cta-bg img { filter: brightness(.2); }
  .cta-section .container { grid-column: 1; background: transparent; text-align: center; padding: 60px 24px; }
  .cta-section h2 { color: #fff; text-align: center; }
  .cta-section p { color: rgba(255,255,255,.75); text-align: center; margin-left: auto; margin-right: auto; }
  .cta-actions { justify-content: center; }
}
@media (max-width: 767px) {
  .page-sbr .section-pad { padding: 60px 0; }
  .page-sbr .section-pad-compact { padding: 48px 0; }
  .problems-grid,
  .shower-compare,
  .lighting-grid,
  .access-features,
  .concepts-grid,
  .checklist-grid,
  .homeowner-priorities,
  .storage-zone-grid,
  .sbr-finish-pair,
  .sbr-plans-pair { grid-template-columns: 1fr; }
  .storage-card:nth-child(1),
  .storage-card:nth-child(4) { grid-column: span 1; flex-direction: column; }
  .storage-card:nth-child(1) .sbr-card-img,
  .storage-card:nth-child(4) .sbr-card-img { width: 100%; min-height: 200px; }
  .concepts-grid .concept-card:first-child { grid-column: span 1; display: flex; flex-direction: column; }
  .concepts-grid .concept-card:first-child .concept-visual { min-height: 200px; }
  .cta-actions { flex-direction: column; align-items: center; }
  .sbr-areas-grid { grid-template-columns: repeat(2, 1fr); }
  .layout-section-top, .layout-body-grid { grid-template-columns: 1fr; }
  .access-features { padding-left: 0; }
  .access-features::before { display: none; }
  .access-feature::before { display: none; }
}
@media (max-width: 480px) {
  .lighting-grid { grid-template-columns: 1fr; }
  .sbr-areas-grid { grid-template-columns: 1fr; }
}