/* Use Local Visibility — Website V1.1 (local preview)
   Brand colors and rules per Brand/visual-identity.md — do not add colors beyond
   these three plus neutral tints/grays for practical UI needs. */

:root {
  /* Opts the whole site out of Chrome/Android "Auto Dark Theme" heuristic
     re-coloring. Without this, browsers that don't see an explicit scheme
     declaration may algorithmically invert/re-tint the page when the
     device is in system dark mode — producing inconsistent results (e.g.
     header staying light while the body gets darkened). This site is
     light-only by design; declaring that here is the standard fix. */
  color-scheme: light;

  --color-primary: #1E55AD;   /* Trust Blue */
  --color-primary-dark: #163f82;
  --color-dark: #1F2328;      /* Charcoal */
  --color-white: #FFFFFF;
  --color-tint: #F5F7FA;      /* neutral light tint for subtle section backgrounds */
  --color-tint-2: #EEF2F7;
  --color-border: #E3E6EB;    /* neutral light gray for borders/dividers */
  --color-text-muted: #495057;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max-width: 1140px;
  --prose-width: 680px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 28px;
  --space-lg: 48px;
  --space-xl: 88px;

  --radius: 10px;
  --shadow-soft: 0 4px 18px rgba(31, 35, 40, 0.06);

  /* ===== Premium Dimensional Design System (Phase 1) =====
     Depth, motion, and perspective tokens for the "premium restrained 3D"
     direction (Option B). Additive only — nothing below is applied to any
     page element yet. Utility classes (.depth-card, .reveal-on-scroll,
     .tilt-target) are defined further down and are inert until a future
     phase adds them to actual markup. */

  /* Layered shadow scale — small to large, for cards/mockups/floating
     elements. All neutral (Charcoal-based), no new colors introduced. */
  --shadow-1: 0 1px 2px rgba(31, 35, 40, 0.04), 0 1px 3px rgba(31, 35, 40, 0.06);
  --shadow-2: 0 2px 8px rgba(31, 35, 40, 0.06), 0 6px 16px rgba(31, 35, 40, 0.07);
  --shadow-3: 0 8px 24px rgba(31, 35, 40, 0.09), 0 16px 40px rgba(31, 35, 40, 0.08);
  --shadow-4: 0 16px 48px rgba(31, 35, 40, 0.12), 0 28px 64px rgba(31, 35, 40, 0.10);

  /* Motion timing — restrained, premium-feeling easing rather than linear/
     default easing. Durations stay short so nothing feels sluggish. */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;

  /* Perspective/depth for CSS 3D transforms (hero mockups, card tilt). */
  --perspective-depth: 1200px;
  --tilt-max: 6deg; /* capped, restrained range — not a gimmick effect */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-dark);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Never break mid-word; wrap only at natural word boundaries */
body, p, h1, h2, h3, li, label, a, button, input, textarea, select {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Local preview banner — remove only once site is actually ready to publish */
.preview-banner {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  font-size: 0.85rem;
  padding: 10px 16px;
  letter-spacing: 0.2px;
}

/* ============ Header ============ */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
  min-height: 96px;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
}

/* 222px → 224px: original padding (14px) and min-height (96px) are
   unchanged, so this is the largest width whose proportional height
   (224 * 241/800 ≈ 67.5px) still fits the original 68px content
   budget (96 - 2*14) without growing the header past 96px. Original
   222px already used nearly all of that budget (~67px), so this is
   a small, safety-margined increase, not the earlier 10-12% target. */
.brand-logo {
  width: 224px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Tablet-only: the full desktop logo size (222px) combined with the
   still-visible full nav + CTA text causes real horizontal overflow in
   this narrower range (confirmed empirically ~920-935px). Step back to
   the original 200px here; the mobile rule below already governs ≤780px
   with its own larger size, and the full 222px desktop size resumes once
   there's enough room (≥961px, confirmed zero overflow). */
@media (max-width: 960px) and (min-width: 781px) {
  /* 200px → 224px: same original 68px content budget as the desktop
     tier above (96px min-height, 14px padding, both unchanged). This
     tier's original 200px render (60px tall) had real slack against
     that budget, so it reaches the same 224px ceiling the desktop
     tier is limited to, still safely under the 68px budget (~67.5px). */
  .brand-logo {
    width: 224px;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-dark);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
  justify-content: center;
}

.site-nav a {
  text-decoration: none;
  color: var(--color-dark);
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--color-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.nav-cta.btn {
  font-size: 0.92rem;
  padding: 13px 22px;
  white-space: nowrap;
}

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  text-align: center;
  transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 16px 32px;
  font-size: 1.02rem;
  box-shadow: 0 6px 16px rgba(30, 85, 173, 0.22);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  padding: 12px 22px;
  font-size: 0.92rem;
}

.btn-secondary:hover {
  background: var(--color-tint);
}

.btn-white {
  background: var(--color-white);
  color: var(--color-primary);
  padding: 16px 32px;
  font-size: 1.02rem;
}

.btn-white:hover {
  background: var(--color-tint);
  transform: translateY(-1px);
}

/* ============ Page sections & rhythm ============ */
section {
  padding: var(--space-xl) 0;
}

section.tint {
  background: var(--color-tint);
}

section + section {
  border-top: none;
}

.section-head {
  max-width: var(--prose-width);
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.eyebrow {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  max-width: 100%;
}

h1 {
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.75rem;
  line-height: 1.3;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.12rem;
  margin: 0 0 8px;
}

p {
  margin: 0 0 16px;
}

.lede {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: var(--prose-width);
}

.prose {
  max-width: var(--prose-width);
  margin: 0 auto;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ============ Hero ============ */
.hero {
  padding: 72px 0 var(--space-xl);
}

/* Scoped to How It Works page only: tighten the gap between the intro
   subtitle and the first process card without affecting other pages that
   share .hero and the generic section spacing. */
.hero-tight {
  padding-bottom: 12px;
}

/* .section-head and .steps are shared classes used on other pages (and, for
   .steps, on the homepage too) — scope these overrides to the How It Works
   page only via the .hero-tight / .tight-top ancestor, instead of editing
   the shared rules directly. */
.hero-tight .section-head {
  margin-bottom: 12px;
}

.tight-top {
  padding-top: 12px;
}

.tight-top .steps {
  margin-top: 8px;
}

/* Scoped to contact.html only: tighten the gap between the intro paragraph
   and the top of the form card. New class names, only used on this page. */
.contact-hero-tight {
  padding-bottom: 16px;
}

.contact-hero-tight .section-head {
  margin-bottom: 16px;
}

/* Neutralize the lede's own default margin-bottom so it can't collapse with
   (and override) the smaller scoped section-head margin above/below. */
.contact-hero-tight .lede {
  margin-bottom: 0;
}

.contact-form-section {
  padding-top: 16px;
}

@media (max-width: 780px) {
  .contact-hero-tight {
    padding-bottom: 12px;
  }

  .contact-hero-tight .section-head {
    margin-bottom: 12px;
  }

  .contact-form-section {
    padding-top: 12px;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero-copy h1 {
  font-size: 2.6rem;
}

.hero-copy .lede {
  max-width: 560px;
}

.hero-cta {
  margin-top: var(--space-md);
  text-align: center;
}

/* Desktop hero is a left-aligned copy column next to the visual — the CTA
   stays left-aligned under it there. Previously this was an inline style
   on the element; moved into CSS so the mobile media query below can
   cleanly re-center it for the stacked/centered mobile hero without
   fighting inline-style specificity. */
.hero-copy .hero-cta {
  text-align: left;
}

.hero-simple {
  text-align: center;
}

.hero-simple .lede {
  margin-left: auto;
  margin-right: auto;
}

/* Hero checklist card */
.review-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-soft);
}

.review-card h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

.review-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.review-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
}

.review-card li:last-child {
  border-bottom: none;
}

.review-check {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-tint-2);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ============ Card grid (three pillars / what we do) ============ */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-soft);
}

.card p {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

.icon {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  color: var(--color-primary);
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.7;
}

/* ============ Steps (How It Works) ============ */
.steps {
  counter-reset: step;
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.step-number {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.step p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ============ Lists ============ */
.plain-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 620px;
}

.plain-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.check-list li::before {
  content: "\2713";
  color: var(--color-primary);
  font-weight: 700;
}

/* ============ FAQ ============ */
.faq-group {
  max-width: var(--prose-width);
  margin: 0 auto var(--space-lg);
}

.faq-group h2 {
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item h3 {
  margin-bottom: 8px;
}

.faq-item p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ============ Final CTA band ============ */
.cta-band {
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
}

.cta-band h2 {
  color: var(--color-white);
}

.cta-band .lede {
  color: rgba(255, 255, 255, 0.85);
}

/* ============ Forms ============ */
.form-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--shadow-soft);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 8px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.optional-tag {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--color-tint);
  color: var(--color-dark);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  background: var(--color-white);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

.consent {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 22px 0;
}

.form-status {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--color-tint);
  border: 1px solid var(--color-border);
  display: none;
}

.form-status.visible {
  display: block;
}

.draft-tag {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ============================================================
   Multi-step Visibility Review form (Phase 3)
   ============================================================ */

.form-progress {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 24px 0 32px;
}

/* Same fix as .modal-overlay[hidden] above: the flex display rule is an
   author rule and silently beats the browser's default [hidden] handling
   — without this, setting form-progress.hidden = true (done when the
   inline success confirmation replaces the form) would have no visible
   effect. */
.form-progress[hidden] {
  display: none;
}

.form-progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  position: relative;
}

.form-progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.form-progress-step.is-complete:not(:last-child)::after {
  background: var(--color-primary);
}

.form-progress-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-tint);
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  position: relative;
  z-index: 1;
  transition: background-color var(--duration-base) var(--ease-premium),
              border-color var(--duration-base) var(--ease-premium),
              color var(--duration-base) var(--ease-premium);
}

.form-progress-step.is-active .form-progress-num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.form-progress-step.is-complete .form-progress-num {
  background: var(--color-white);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.form-progress-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.form-progress-step.is-active .form-progress-label {
  color: var(--color-dark);
}

.form-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

.form-step[data-step="2"] .form-step-actions {
  justify-content: space-between;
}

.form-step[data-step="3"] .form-step-actions {
  justify-content: flex-start;
}

.option-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 8px;
}

.option-fieldset legend,
.checkbox-fieldset legend {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 12px;
  padding: 0;
  width: 100%;
}

.option-fieldset-compact {
  margin-top: 24px;
}

.option-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  background: var(--color-white);
  transition: border-color var(--duration-fast) var(--ease-premium),
              background-color var(--duration-fast) var(--ease-premium);
}

.option-card:hover {
  border-color: var(--color-primary);
}

.option-card.is-selected {
  border-color: var(--color-primary);
  background: var(--color-tint);
}

.option-card input[type="radio"] {
  margin-top: 3px;
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.option-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.option-card-title {
  font-weight: 700;
  color: var(--color-dark);
}

.option-card-desc {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.checkbox-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 0.94rem;
  padding: 8px 0;
  cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--color-primary);
}

.checkbox-option-standalone {
  border-top: 1px solid var(--color-border);
  margin-top: 6px;
  padding-top: 14px;
}

.conditional-field {
  margin: 4px 0 20px;
}

.field-helper {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 8px;
}

.field-error {
  font-size: 0.86rem;
  font-weight: 600;
  color: #b3261e;
  margin-top: 8px;
}

.service-level-preselect-note {
  background: var(--color-tint);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.form-clarification {
  margin-top: 12px;
}

@media (max-width: 780px) {
  .form-progress-label {
    font-size: 0.66rem;
  }

  .form-progress-step:not(:last-child)::after {
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
  }

  .form-step-actions {
    flex-wrap: wrap;
  }
}

/* ============ Draft/legal notice banner ============ */
.draft-notice {
  background: var(--color-tint);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: var(--space-md);
  font-size: 0.92rem;
  max-width: var(--prose-width);
  margin-left: auto;
  margin-right: auto;
}

.legal-page h2 {
  font-size: 1.2rem;
  margin-top: var(--space-md);
}

/* ============ Footer ============ */
.site-footer {
  background: var(--color-dark);
  color: #d7dae0;
  padding-top: var(--space-xl);
}

.site-footer a {
  color: #d7dae0;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-white);
}

/* Footer CTA hover/focus contrast fix. .site-footer a's generic link
   color rules (above) have higher specificity than .btn-secondary's own
   color/background, so without this the footer CTA's hover state
   inherited .btn-secondary:hover's near-white background plus
   .site-footer a:hover's white text — white-on-near-white, unreadable.
   Scoped to .site-footer .btn-secondary only; no other button uses this
   selector, so header/hero/package CTAs are unaffected. */
.site-footer .btn-secondary:hover,
.site-footer .btn-secondary:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.footer-heading {
  color: #9aa0aa;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-logo-wrap {
  background: var(--color-white);
  display: inline-block;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.footer-logo {
  width: 180px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.tagline {
  font-size: 0.88rem;
  color: #aeb3bc;
  max-width: 260px;
}

.footer-nav,
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.92rem;
}

.footer-contact p {
  font-size: 0.9rem;
  margin-bottom: 14px;
  color: #c3c7ce;
}

.footer-bottom {
  border-top: 1px solid #33383f;
  padding: 18px 0;
  font-size: 0.8rem;
  color: #9aa0aa;
}

/* ============ Mobile ============ */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy .lede {
    max-width: 100%;
  }
}

/* Isolated fix: between 781px and ~902px the header's logo + full nav
   links + full-text CTA cannot all fit at their natural (non-shrinking)
   widths, causing a real ~1-3px horizontal scrollWidth overflow across
   this whole range (confirmed by measurement, not just at one width).
   Scoped narrowly to only this range and only the CTA, so it doesn't
   touch the existing ≤780px mobile block (hamburger/nav/hero rules)
   or desktop composition at ≥903px. */
@media (min-width: 781px) and (max-width: 920px) {
  .nav-cta.btn {
    display: none;
  }
}

@media (max-width: 780px) {
  .header-inner {
    min-height: auto;
  }

  /* Reverted to the original 172px. Mobile header-inner has
     min-height:auto (no floor) — its height is exactly
     logo-height + 28px padding with zero slack, so any width
     increase here changes the 80px mobile header height 1:1.
     Preserving the original 80px means preserving the original
     172px width; there is no safe increase available at this tier. */
  .brand-logo {
    width: 172px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .nav-toggle {
    display: flex;
    order: 3;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--color-border);
    display: none;
    gap: 16px;
  }

  .site-nav.open {
    display: flex;
  }

  .header-actions {
    order: 2;
  }

  /* Pre-existing sitewide bug fix: the full-text CTA button next to the
     hamburger toggle caused real horizontal overflow at narrow mobile
     widths (confirmed on multiple pages, not introduced by Phase 2).
     The same CTA remains prominent in the hero, mid-page, final CTA band,
     footer, and "Contact" nav link on every page, so hiding this
     secondary header copy on mobile loses no real functionality. */
  .nav-cta.btn {
    display: none;
  }

  h1 {
    font-size: 1.7rem;
  }

  .hero-copy h1 {
    font-size: 1.7rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-card {
    padding: 26px 20px;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  /* Sprint 2 — mobile viewport framing: the sitewide 88px section padding
     and 62px-tall CTA buttons were unscaled for mobile, giving every
     section heavy top/bottom whitespace and an oversized, "zoomed in"
     feel on small screens even though nothing technically overflowed.
     Trim vertical rhythm and the most prominent type/CTA sizes so the
     page reads as intentionally composed for a phone, not just shrunk. */
  section {
    padding: 56px 0;
  }

  .hero {
    padding: 48px 0 56px;
  }

  .lede {
    font-size: 1.05rem;
  }

  .btn-primary,
  .btn-secondary {
    padding: 14px 26px;
    line-height: 1.3;
  }
}

/* ============================================================
   Premium Dimensional Design System (Phase 1) — utility classes
   Not yet applied to any page element. Defined here so Phase 2
   can wire them into markup without touching this file again.
   ============================================================ */

/* Depth card: layered shadow that deepens on hover, restrained lift.
   Intended for premium card/mockup surfaces (hero mockups, showcase
   cards). Purely additive — does not change existing .card behavior. */
.depth-card {
  box-shadow: var(--shadow-2);
  transform: translateY(0);
  transition: box-shadow var(--duration-base) var(--ease-premium),
              transform var(--duration-base) var(--ease-premium);
  will-change: transform, box-shadow;
}

.depth-card:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-4px);
}

/* Scroll reveal: base hidden/offset state. A small IntersectionObserver
   utility (see script.js) adds .is-visible when the element enters the
   viewport. Falls back to fully visible if JS doesn't run. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-premium),
              transform var(--duration-slow) var(--ease-premium);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* No-JS fallback: if JavaScript fails to load/run, content must still be
   visible — never hide real content behind a script dependency. */
.no-js .reveal-on-scroll {
  opacity: 1;
  transform: none;
}

/* Tilt target: perspective wrapper for restrained pointer-responsive
   depth (e.g. a hero device mockup). The actual rotation is driven by a
   small JS utility in a later phase; this only sets up the 3D context
   and a capped, smooth transform transition. */
.tilt-target {
  perspective: var(--perspective-depth);
}

.tilt-target > * {
  transition: transform var(--duration-fast) var(--ease-premium);
  transform-style: preserve-3d;
}

/* Respect prefers-reduced-motion sitewide: disable all motion/transform
   transitions and snap scroll-reveal content to its final, visible state
   immediately. This is a hard requirement, not an afterthought. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }

  .depth-card:hover {
    transform: none;
  }

  .level-card:hover {
    transform: none;
  }

  .tilt-target > * {
    transform: none !important;
  }
}

/* ============================================================
   Homepage Premium Hero (Phase 2 — Option A: Balanced Premium
   Dimensional). Scoped to .hero-premium / its children only —
   no other page's .hero is affected.
   ============================================================ */

.hero-premium {
  position: relative;
  overflow: hidden;
}

.hero-bg-glow {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 620px;
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(30, 85, 173, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 10%, rgba(30, 85, 173, 0.06), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-premium .container {
  position: relative;
  z-index: 1;
}

.hero-visual {
  position: relative;
}

/* Mobile-only decorative asymmetry chip — see ≤780px rules for
   positioning/styling. Hidden on desktop, where the existing layered
   browser+phone+card composition already reads as intentional. */
.hero-status-chip {
  display: none;
}

/* Browser mockup — back layer, stays static (no tilt), grounds the composition */
.mockup-browser {
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-3);
}

.mockup-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--color-tint);
  border-bottom: 1px solid var(--color-border);
}

.mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.mockup-dot-red { background: #ff5f57; }
.mockup-dot-yellow { background: #febc2e; }
.mockup-dot-green { background: #28c840; }

.mockup-url {
  margin-left: 10px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  background: var(--color-white);
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
}

.mockup-browser-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile-only decorative backdrop for .mockup-browser — inert on desktop
   (the real screenshot is used there). See the ≤780px rules below. */
.mockup-browser-fill {
  display: none;
}

/* Front row: phone mockup + checklist card, overlapping the browser
   mockup's bottom edge — this overlap is what creates the depth/lighting
   separation (shadow gap) between the back and front layers. */
.hero-visual-front {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: -64px;
  padding: 0 18px;
  position: relative;
  z-index: 2;
}

.mockup-phone-wrap {
  flex: none;
  width: 34%;
  max-width: 148px;
}

.mockup-phone {
  border-radius: 24px;
  border: 6px solid var(--color-dark);
  background: var(--color-dark);
  overflow: hidden;
  box-shadow: var(--shadow-4);
}

.mockup-phone-notch {
  height: 18px;
  background: var(--color-dark);
  position: relative;
}

.mockup-phone-notch::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 6px;
  border-radius: 4px;
  background: #000;
}

/* Live miniature of the real hero copy — not a screenshot. Rendering the
   actual headline/eyebrow/lede/CTA as small live text avoids the aspect-
   ratio mismatch a raster screenshot has against this portrait screen slot
   (any landscape desktop capture either crops text or leaves large empty
   space when letterboxed) and always stays in sync with the real copy. */
.mockup-phone-screen {
  width: 100%;
  height: 206px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mockup-phone-screen-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--color-border);
  flex: none;
}

.mockup-phone-screen-url {
  font-size: 5px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.mockup-phone-screen-body {
  flex: 1;
  min-height: 0;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

/* Desktop: wraps the real-copy miniature (unchanged content/behavior —
   same flex-column + gap the body itself used to provide directly,
   now one level deeper since .mockup-phone-screen-outcome is a sibling). */
.mockup-phone-screen-copy {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Mobile-only outcome view — see the ≤780px rules for its contents.
   Inert/hidden on desktop, where the phone still mirrors the real hero
   copy via .mockup-phone-screen-copy above. */
.mockup-phone-screen-outcome {
  display: none;
}

.mockup-phone-screen-eyebrow {
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.mockup-phone-screen-h1 {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-dark);
  margin: 0;
  letter-spacing: -0.01em;
}

.mockup-phone-screen-lede {
  font-size: 6px;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
}

.mockup-phone-screen-cta {
  margin-top: auto;
  align-self: flex-start;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 5px;
  font-weight: 700;
  padding: 5px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Compact variant of .review-card for this narrow hero context — the
   standalone .review-card sizing (used on other pages) is too large
   here. Overrides padding/type scale only; same content, same colors. */
.hero-visual-front .review-card {
  flex: 1;
  min-width: 0;
  padding: 18px 20px;
}

.hero-visual-front .review-card h3 {
  font-size: 0.72rem;
  margin-bottom: 10px;
}

.hero-visual-front .review-card li {
  padding: 8px 0;
  gap: 8px;
  font-size: 0.82rem;
  line-height: 1.3;
}

.hero-visual-front .review-card .review-check {
  width: 18px;
  height: 18px;
  font-size: 0.65rem;
}

/* Reduced-motion / no-tilt safety: the phone mockup's tilt is already
   handled by the shared .tilt-target rules and the pointer:fine check in
   script.js — nothing extra needed here beyond what Phase 1 established. */

@media (max-width: 900px) {
  .hero-visual-front {
    margin-top: -40px;
  }
}

@media (max-width: 780px) {
  /* Mobile: single stacked composition — drop the browser mockup and the
     overlap math entirely, show phone + checklist card stacked cleanly. */
  .mockup-browser {
    display: none;
  }

  .hero-visual-front {
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
    padding: 0;
    gap: 20px;
  }

  .mockup-phone-wrap {
    width: 140px;
    max-width: 140px;
    margin: 0 auto;
  }

  .hero-bg-glow {
    height: 420px;
  }
}

/* ============================================================
   Proof & Reviews architecture (Phase 2)
   ============================================================ */

.reviews-container {
  max-width: 720px;
  margin: var(--space-lg) auto 0;
}

.review-entry {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--duration-base) var(--ease-premium);
}

.review-entry:hover {
  box-shadow: var(--shadow-3);
}

.review-entry-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-tint-2);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.review-entry-quote {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.review-entry-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-entry-name {
  font-weight: 700;
}

.review-entry-meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ============================================================
   Before / After illustrative section (Phase 2)
   ============================================================ */

.before-after {
  max-width: 640px;
  margin: var(--space-lg) auto 0;
}

.before-after-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  justify-content: center;
}

.before-after-tab {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-premium),
              color var(--duration-fast) var(--ease-premium);
}

.before-after-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.before-after-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-2);
}

.ba-mock {
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ba-mock-before {
  background: var(--color-tint);
  border: 1px dashed var(--color-border);
}

.ba-mock-after {
  background: var(--color-tint-2);
  border: 1px solid var(--color-primary);
}

.ba-mock-row {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

.ba-mock-row-short {
  width: 45%;
  height: 12px;
  padding: 0;
  background: var(--color-border);
}

.ba-mock-row-empty {
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
}

.ba-mock-row-filled {
  background: rgba(30, 85, 173, 0.08);
  color: var(--color-primary-dark);
}

/* ============================================================
   Levels of Support (Phase 2) — replaces the earlier Website
   Showcase concept. These three cards represent who performs and
   manages the work after a Quick Visibility Review, not website
   quality tiers, templates, or pricing. Reuses the .card/.depth-card
   base (same shadow-elevation + hover-lift system used sitewide)
   plus scoped .level-* rules for the responsibility copy layout.
   ============================================================ */

.level-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border-color: rgba(31, 35, 40, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(31, 35, 40, 0.05),
    0 10px 20px rgba(31, 35, 40, 0.06),
    0 24px 48px rgba(31, 35, 40, 0.07);
  transition: box-shadow var(--duration-base) var(--ease-premium),
              transform var(--duration-base) var(--ease-premium);
  will-change: transform, box-shadow;
}

.level-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(31, 35, 40, 0.07),
    0 20px 32px rgba(31, 35, 40, 0.10),
    0 40px 72px rgba(31, 35, 40, 0.12);
}

.level-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-tint);
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.level-badge-signature {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.level-tagline {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.35;
  margin-bottom: 10px;
}

.level-description {
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

.level-points {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  position: relative;
}

.level-points li {
  position: relative;
  padding-left: 20px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.level-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.7;
}

/* Dedicated CTA area: pinned to the bottom of the flex-column card via
   margin-top: auto (independent of how much text/points precede it) and
   horizontally centers the button regardless of label width — while the
   card's own text/bullets above stay left-aligned for readability. */
.level-cta-area {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  justify-content: center;
  position: relative;
}

.level-cta {
  position: relative;
}

/* Signature Premium: slightly stronger visual emphasis — accent border,
   solid CTA already via .btn-primary, restrained contained ULV-blue
   illumination in the shadow itself (not just the decorative glow layer),
   no badges, prices, or "most popular" labeling. */
.level-card-signature {
  border-color: rgba(30, 85, 173, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(31, 35, 40, 0.05),
    0 14px 28px rgba(30, 85, 173, 0.12),
    0 30px 60px rgba(31, 35, 40, 0.09);
}

.level-card-signature:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 4px rgba(31, 35, 40, 0.07),
    0 24px 40px rgba(30, 85, 173, 0.16),
    0 48px 84px rgba(31, 35, 40, 0.14);
}

.level-card-signature-glow {
  position: absolute;
  inset: -25% -20% auto -20%;
  height: 55%;
  background: radial-gradient(ellipse 60% 60% at 30% 15%, rgba(30, 85, 173, 0.10), transparent 70%);
  pointer-events: none;
}

.level-card-signature .level-badge,
.level-card-signature .level-tagline,
.level-card-signature .level-description,
.level-card-signature .level-points,
.level-card-signature .level-cta-area {
  position: relative;
}

.level-clarification {
  max-width: 620px;
  margin: var(--space-lg) auto 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ============================================================
   Final CTA band — subtle depth only, copy/CTA unchanged (Phase 2)
   ============================================================ */

.cta-band-premium {
  position: relative;
  overflow: hidden;
}

.cta-band-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 140%;
  background: radial-gradient(ellipse 60% 60% at 50% 30%, rgba(255, 255, 255, 0.10), transparent 70%);
  pointer-events: none;
}

.cta-band-premium .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 780px) {
  .before-after-panel {
    padding: 20px;
  }

  .levels-grid {
    gap: 24px;
  }
}

/* ============================================================
   Mobile Composition Refinement (Sprint 3)
   Scoped entirely to ≤780px — desktop/tablet (≥781px) is untouched.
   Adds a reusable mobile type + spacing scale, then applies it across
   the hero, pillar cards, steps, proof, before/after, levels-of-
   support, and footer to trim the oversized vertical rhythm carried
   over from the desktop composition. Copy, CTA wording, package
   logic, and content are unchanged — only sizing/spacing.
   The logo white-box issue is explicitly out of scope for this
   sprint: .footer-logo-wrap is intentionally not touched here.
   ============================================================ */
@media (max-width: 780px) {
  :root {
    /* Mobile-only spacing scale */
    --m-space-2xs: 6px;
    --m-space-xs: 12px;
    --m-space-sm: 18px;
    --m-space-md: 24px;
    --m-space-lg: 32px;
    --m-space-xl: 40px;

    /* Mobile-only type scale */
    --m-eyebrow: 0.76rem;
    --m-h1: 1.55rem;
    --m-h2: 1.32rem;
    --m-lede: 1rem;
    --m-body: 1rem;
    --m-card-title: 1.02rem;
    --m-card-body: 0.92rem;
    --m-level-tagline: 0.98rem;
    --m-level-body: 0.88rem;
    --m-footer-link: 0.9rem;
    --m-footer-body: 0.85rem;
  }

  /* ---- Sitewide rhythm ---- */
  section {
    padding: var(--m-space-xl) 0;
  }

  .section-head {
    margin-bottom: var(--m-space-lg);
  }

  .eyebrow {
    font-size: var(--m-eyebrow);
  }

  h1,
  .hero-copy h1 {
    font-size: var(--m-h1);
    line-height: 1.18;
  }

  h2 {
    font-size: var(--m-h2);
  }

  .lede {
    font-size: var(--m-lede);
  }

  /* ---- Hero ---- */
  .hero {
    padding: var(--m-space-lg) 0 var(--m-space-xl);
  }

  .hero-cta {
    margin-top: var(--m-space-md);
  }

  .hero-visual-front {
    gap: var(--m-space-md);
  }

  .hero-visual-front .review-card {
    padding: 16px 18px;
  }

  .hero-visual-front .review-card h3 {
    margin-bottom: 8px;
  }

  .hero-visual-front .review-card li {
    padding: 6px 0;
  }

  /* ---- Pillar cards (Visibility / Trust / Contact Path) ---- */
  .grid-3 {
    gap: var(--m-space-sm);
    margin-top: var(--m-space-lg);
  }

  .card {
    padding: var(--m-space-md) var(--m-space-sm);
  }

  .icon {
    width: 36px;
    height: 36px;
    margin-bottom: var(--m-space-xs);
  }

  .card h3 {
    font-size: var(--m-card-title);
    margin-bottom: 6px;
  }

  .card p {
    font-size: var(--m-card-body);
    line-height: 1.5;
  }

  /* ---- How It Works steps ---- */
  .steps {
    gap: var(--m-space-sm);
    margin-top: var(--m-space-lg);
  }

  .step {
    padding: var(--m-space-sm);
    gap: var(--m-space-sm);
  }

  .step h3 {
    font-size: var(--m-card-title);
  }

  .step p {
    font-size: var(--m-card-body);
  }

  /* ---- Proof / founder story ---- */
  .reviews-container {
    margin-top: var(--m-space-lg);
  }

  .review-entry {
    padding: var(--m-space-md);
  }

  .review-entry-quote {
    font-size: var(--m-body);
  }

  /* ---- Before / After ---- */
  .before-after {
    margin-top: var(--m-space-lg);
  }

  .before-after-panel {
    padding: var(--m-space-sm);
  }

  .before-after-tab {
    padding: 9px 18px;
  }

  /* ---- Who we serve ---- */
  .plain-list li {
    padding: 10px 0;
  }

  /* ---- Levels of Support ---- */
  .levels-grid {
    gap: var(--m-space-sm);
  }

  .level-badge {
    margin-bottom: var(--m-space-xs);
  }

  .level-tagline {
    font-size: var(--m-level-tagline);
    margin-bottom: 8px;
  }

  .level-description {
    font-size: var(--m-level-body);
    margin-bottom: var(--m-space-sm);
  }

  .level-points {
    gap: 8px;
    margin-bottom: var(--m-space-md);
  }

  .level-points li {
    font-size: var(--m-level-body);
  }

  .level-cta-area {
    padding-top: var(--m-space-sm);
  }

  .level-cta.btn {
    padding: 13px 24px;
  }

  .level-clarification {
    margin-top: var(--m-space-md);
  }

  /* ---- Footer: grouped, centered — brand and contact span full width,
     Explore/Legal sit side-by-side so the footer stays centered and
     organized without stacking into one long single column. ---- */
  .site-footer {
    padding-top: var(--m-space-xl);
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--m-space-lg) var(--m-space-md);
    text-align: center;
    padding-bottom: var(--m-space-lg);
  }

  .footer-brand,
  .footer-contact {
    grid-column: 1 / -1;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tagline {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-nav,
  .footer-legal {
    align-items: center;
    gap: var(--m-space-xs);
    font-size: var(--m-footer-link);
  }

  .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-contact p {
    font-size: var(--m-footer-body);
  }

  .footer-bottom {
    text-align: center;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   Mobile Alignment & Visual Consistency (Sprint 4)
   Scoped entirely to ≤780px — desktop/tablet (≥781px) is untouched.
   Centers visual-hierarchy elements (eyebrows, headings, icons, titles,
   badges, CTAs) while keeping longer body copy, descriptions, and bullet
   lists left-aligned for readability. Most section headings were already
   centered via .section-head + .lede.center (existing, unchanged) — this
   block only addresses the hero, the two mobile-only pillar/checklist
   cards, and the Levels of Support card headers, which had no such rule.
   ============================================================ */
@media (max-width: 780px) {
  /* ---- Hero: center the whole copy stack ---- */
  .hero-copy {
    text-align: center;
  }

  .hero-copy .hero-cta {
    text-align: center;
  }

  /* ---- Quick Visibility Review checklist card ---- */
  .hero-visual-front .review-card h3 {
    text-align: center;
  }

  /* ---- Pillar cards (Visibility / Trust / Contact Path): icon, title,
     and body are short enough to center as one aligned family. The icon
     is a fixed-width block box, so it needs margin auto (text-align
     alone only centers inline content, not block-level children). ---- */
  .grid-3 .card:not(.level-card) {
    text-align: center;
  }

  .grid-3 .icon {
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- Levels of Support: centered header, left-aligned detail ----
     Badge and tagline are short (one line) — centered. Description runs
     2-3 lines of explanatory copy, same length class as "longer card
     descriptions" elsewhere on the page, so it stays left-aligned for
     scanability. Bullets were already left-aligned (unchanged). The CTA
     was already centered via .level-cta-area's existing flex rule. */
  .level-badge {
    align-self: center;
  }

  .level-tagline {
    text-align: center;
  }
}

/* ============================================================
   Mobile Hero Proportion & Line-Break Refinement (Sprint 5)
   Scoped entirely to ≤780px AND to the homepage hero specifically
   (.hero-premium / .hero-copy / .hero-visual-front are unique to
   index.html's hero — this does not touch the generic .hero, .eyebrow,
   .lede, or h1 rules that other pages' simpler heroes also use).
   Sizes below were measured against the real headline/lede/CTA text
   at 360–430px, not guessed — see the sprint report for the specific
   widths tested.
   ============================================================ */
@media (max-width: 780px) {
  .hero-premium {
    padding: 26px 0 28px;
  }

  /* Eyebrow: sized/tracked so "Massachusetts contractors & service
     businesses" fits on one line at 390px and above; still wraps at
     360–375px, where text-wrap: balance keeps the two lines even
     instead of stranding one short word on its own line. */
  .hero-copy .eyebrow {
    font-size: 0.67rem;
    letter-spacing: 0.025em;
    text-wrap: balance;
  }

  /* Headline: sized so the second sentence ("Your online presence
     should show it.") fits on one line at 390–430px, producing a
     3-line composition with the first (longer) sentence's 2 lines. */
  .hero-copy h1 {
    font-size: 1.2rem;
    margin-bottom: 12px;
  }

  .hero-copy .lede {
    font-size: 0.98rem;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .hero-copy .hero-cta {
    margin-top: 18px;
  }

  /* Narrower, less dominant CTA — still one line, still ≥44px tall. */
  .hero-copy .hero-cta .btn-primary {
    font-size: 0.92rem;
    padding: 13px 20px;
  }

  .hero-visual-front {
    gap: 16px;
  }
}

/* ============================================================
   Mobile Hero Illustration & Spacing Rhythm (Sprint 6)
   Scoped entirely to ≤780px AND to the homepage hero (.hero-premium /
   .mockup-browser / .hero-visual-front are unique to index.html).
   Brings back a compact "browser window" backdrop behind the phone —
   using the same .depth-card shadow language as desktop, plus an
   abstract content placeholder in place of the desktop screenshot
   (which is the wrong aspect ratio and illegible at mobile width) —
   so mobile reads as the same layered visual system as desktop
   instead of a phone floating alone. Also collapses the unscoped
   88px hero-grid gap (a real leftover from the desktop two-column
   layout that was never overridden for the single-column mobile
   stack) down to one repeated 18px unit, used consistently for both
   the CTA→illustration and illustration→checklist transitions.
   ============================================================ */
@media (max-width: 780px) {
  .hero-premium .hero-grid {
    gap: 18px;
  }

  .mockup-browser {
    display: block;
  }

  .mockup-browser-image {
    display: none;
  }

  .mockup-browser-fill {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
  }

  /* Phone + checklist card overlap the compact browser's bottom edge —
     same overlap mechanism as desktop (.hero-visual-front already
     carries position:relative/z-index:2 from the shared base rule). */
  .hero-visual-front {
    margin-top: -58px;
  }
}

/* ============================================================
   Mobile Hero Outcome Visualization & Composition Lock (Sprint 7)
   Scoped entirely to ≤780px AND to the homepage hero. Replaces the
   Sprint 6 generic skeleton-bar backdrop with a simplified local-
   business profile view (mbf-*), replaces the phone's copy-mirror
   content with a simplified outcome view (mpso-*) via the
   .mockup-phone-screen-copy / .mockup-phone-screen-outcome swap
   defined in the base (non-media) rules above, reduces the phone
   ~7% with a slight rightward offset for controlled asymmetry, adds
   one decorative status chip, steps the shadow tokens down one tier
   for a tighter/more controlled depth feel, and tightens the phone→
   checklist gap for a more integrated composition.
   ============================================================ */
@media (max-width: 780px) {
  /* ---- Browser backdrop: simplified profile view ---- */
  .mbf-profile-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mbf-avatar {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-tint-2);
    border: 1px solid var(--color-border);
  }

  .mbf-profile-lines {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mbf-profile-line {
    height: 6px;
    border-radius: 3px;
    background: var(--color-tint);
  }

  .mbf-profile-name {
    width: 65%;
  }

  .mbf-profile-sub {
    width: 40%;
  }

  .mbf-status-pill {
    flex: none;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-tint-2);
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
  }

  .mbf-proof-row {
    display: flex;
    gap: 6px;
  }

  .mbf-proof-thumb {
    flex: 1;
    height: 28px;
    border-radius: 6px;
    background: var(--color-tint);
    border: 1px solid var(--color-border);
  }

  .mbf-contact-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .mbf-contact-check {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-tint-2);
    color: var(--color-primary);
    font-size: 0.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mbf-contact-label {
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  /* ---- Phone: outcome view replaces the copy-mirror ---- */
  .mockup-phone-screen-copy {
    display: none;
  }

  .mockup-phone-screen-outcome {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .mpso-profile {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .mpso-avatar {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-tint-2);
    border: 1px solid var(--color-border);
  }

  .mpso-profile-lines {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .mpso-line {
    height: 4px;
    border-radius: 2px;
    background: var(--color-tint);
  }

  .mpso-name {
    width: 60%;
  }

  .mpso-sub {
    width: 38%;
  }

  .mpso-trust-pill {
    align-self: flex-start;
    font-size: 5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-primary);
    background: var(--color-tint-2);
    padding: 3px 6px;
    border-radius: 8px;
    white-space: nowrap;
  }

  .mpso-proof {
    display: flex;
    gap: 4px;
  }

  .mpso-proof-thumb {
    flex: 1;
    height: 24px;
    border-radius: 4px;
    background: var(--color-tint);
  }

  .mpso-actions {
    margin-top: auto;
    display: flex;
    gap: 4px;
  }

  .mpso-action-btn {
    flex: 1;
    text-align: center;
    font-size: 5px;
    font-weight: 700;
    padding: 4px 0;
    border-radius: 4px;
    background: var(--color-primary);
    color: var(--color-white);
  }

  .mpso-action-btn-outline {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
  }

  /* ---- Proportion: phone ~7% smaller, offset right for asymmetry ---- */
  .mockup-phone-wrap {
    width: 130px;
    max-width: 130px;
    transform: translateX(10px);
  }

  .mockup-phone-screen {
    height: 192px;
  }

  /* ---- Depth: one shadow tier tighter than the shared .depth-card
     tokens (--shadow-3/--shadow-4), which read as too broad/hazy at
     this smaller mobile scale. Same token system, no new values. ---- */
  .mockup-browser {
    box-shadow: var(--shadow-2);
  }

  .mockup-phone {
    box-shadow: var(--shadow-3);
  }

  /* ---- Asymmetry chip: hangs off the browser box's top-left corner,
     mostly outside it, so it clears both the CTA above (only 18px of
     gap there) and the browser's own URL pill without touching either. */
  .hero-status-chip {
    display: inline-block;
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 3;
    background: var(--color-white);
    color: var(--color-dark);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-2);
    white-space: nowrap;
  }

  /* ---- Checklist integration: close enough that the card still reads
     as part of the same composition, but with enough breathing room
     that the phone's bottom edge doesn't feel like it's touching the
     card above it. (Sprint 7 originally set this to 10px, which read
     as too tight on real-device review — widened here.) ---- */
  .hero-visual-front {
    gap: 26px;
  }
}

/* ============================================================
   Post-submission success modal (contact.html only)
   Identical on mobile and desktop — not scoped to any breakpoint.
   Shown by script.js only after a confirmed Formspree success.
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(31, 35, 40, 0.55);
}

/* .modal-overlay's own `display: flex` is an author rule and silently
   beats the browser's built-in `[hidden] { display: none }` default —
   without this override the modal renders open on every page load
   regardless of the hidden attribute in the markup. Higher specificity
   than the bare class ensures the hidden state actually wins. */
.modal-overlay[hidden] {
  display: none;
}

body.modal-open {
  overflow: hidden;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--color-white);
  border-radius: 16px;
  padding: 40px 32px 32px;
  box-shadow: var(--shadow-4);
  text-align: center;
}

/* Slightly smaller than the sitewide h2 so the locked headline wraps to
   two balanced lines on laptop/desktop instead of three — combined with
   the modal's max-width bump above (440px → 480px). Copy is unchanged;
   this is sizing only. Mobile keeps its existing (smaller) h2 size via
   the override in the ≤780px block below. */
.modal-card h2 {
  font-size: 1.6rem;
  margin-bottom: 16px;
}

.modal-card p {
  color: var(--color-text-muted);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}

.modal-close:hover,
.modal-close:focus-visible {
  color: var(--color-dark);
  background: var(--color-tint);
}

.modal-got-it {
  margin-top: 8px;
}

@media (max-width: 780px) {
  .modal-card {
    padding: 32px 22px 24px;
  }

  /* Preserve the original (smaller, sitewide) mobile h2 size — the
     desktop-only 1.6rem override above is scoped back down here so
     mobile wrapping/composition is unaffected by the laptop fix. */
  .modal-card h2 {
    font-size: var(--m-h2);
  }
}

/* ============================================================
   Inline success confirmation (contact.html only) — guaranteed
   layer-1 confirmation rendered directly in the page, independent of
   the popup above. Same sizing conventions as .modal-card so the two
   confirmation layers read as one consistent design.
   ============================================================ */
.inline-success {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 24px 0;
}

.inline-success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-tint-2);
  color: var(--color-primary);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.inline-success h2 {
  font-size: 1.6rem;
  margin-bottom: 16px;
}

.inline-success p {
  color: var(--color-text-muted);
}

@media (max-width: 780px) {
  .inline-success h2 {
    font-size: var(--m-h2);
  }
}