:root {
  --black: #0b0b0c;
  --black-soft: #1c1c1e;
  --yellow: #ffc700;
  --yellow-dark: #e0ac00;
  --navy: #0b0b0c;       /* legacy alias, dark/bg-black elements */
  --navy-dark: #000000;  /* legacy alias, darkest black */
  --teal: #ffc700;       /* legacy alias, now the yellow accent */
  --teal-dark: #e0ac00;  /* legacy alias, darker yellow for hover */
  --gold: #ffc700;       /* legacy alias, now yellow */
  --ink: #111111;
  --ink-soft: #4a4a4a;
  --bg: #fbfaf6;
  --bg-alt: #f3f1ea;
  --frame: #141414;
  --radius: 14px;
  --surface: #ffffff;
  --menu-bg: #ffffff;
  --border: #e5e5e0;
  --header-bg: rgba(11, 11, 12, 0.94);
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --error: #b3261e;
  --error-bg: #fdecea;
  --error-border: #f3c2bd;
  --max-width: 1140px;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }

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

h1, h2, h3 { line-height: 1.2; font-weight: 700; color: var(--navy); }
h2 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); margin: 0 0 0.5rem; }
h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
p { margin: 0 0 1rem; color: var(--ink-soft); }
a { color: var(--black); font-weight: 600; text-decoration: none; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
a:hover { text-decoration: underline; text-decoration-color: var(--yellow-dark); text-decoration-thickness: 2px; }
button { font-family: inherit; }

.section { padding: 72px 0; }
.section-alt { background: var(--bg-alt); }
.section-lead { max-width: 620px; color: var(--ink-soft); margin-bottom: 2rem; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary {
  background: var(--yellow);
  color: var(--black);
  font-weight: 800;
}
a.btn-primary { color: var(--black); }
.btn-primary:hover {
  background: var(--yellow-dark);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 199, 0, 0.35);
}
.btn-ghost {
  background: transparent;
  border-color: var(--black);
  color: var(--black);
  font-weight: 700;
}
.btn-ghost:hover { background: var(--black); color: #fff; text-decoration: none; }
.btn-block { width: 100%; text-align: center; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

:focus-visible { outline: 3px solid rgba(255, 199, 0, 0.55); outline-offset: 2px; }

/* SPA pages */
.page { display: none; }
.page.active { display: block; }
.page-hidden-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.logo span { color: var(--yellow); }
.logo:hover { text-decoration: none; }

.nav { display: flex; align-items: center; gap: 20px; }
.nav a,
.nav button.nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover,
.nav button.nav-link:hover { color: var(--yellow); text-decoration: none; }
.nav a[aria-current="page"],
.nav button.nav-link[aria-current="page"] { color: var(--yellow); }
.nav-cta {
  background: var(--yellow);
  color: var(--black) !important;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}
.nav-cta:hover { background: var(--yellow-dark) !important; color: var(--black) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: #fff;
  display: block;
}

/* NAV DROPDOWN */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}
.nav-dropdown-toggle:hover { color: var(--yellow); }
.nav-dropdown-caret { transition: transform 0.15s ease; flex-shrink: 0; }
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--menu-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-width: 180px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a,
.nav-dropdown-menu button.menu-link {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 8px 10px;
  border-radius: 6px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu button.menu-link:hover { background: var(--bg-alt); color: var(--black); text-decoration: none; }

/* HERO */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding: 80px 0 90px;
  color: #fff;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
/* Grid items default to min-width:auto, which lets a wide descendant
   (the price-stack on mobile) force the whole track — and the page —
   wider than the viewport. min-width:0 makes them respect the track. */
.hero-copy, .hero-visual { min-width: 0; }
.hero h1 {
  color: var(--yellow);
  font-size: clamp(2.6rem, 6.5vw, 4.75rem);
  font-weight: 900;
  line-height: 1.02;
  margin: 0 0 1rem;
  letter-spacing: -0.03em;
  min-height: 3.06em; /* reserve space so layout doesn't jump while typing */
}
.hero-caret {
  display: inline-block;
  width: 0.58em;
  height: 0.82em;
  background: var(--yellow);
  margin-left: 0.08em;
  vertical-align: -0.08em;
  animation: hero-caret-blink 0.85s steps(1) infinite;
}
@keyframes hero-caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-caret { animation: none; display: none; }
  .hero h1 { min-height: 0; }
}
.hero-sub {
  color: #fff;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  max-width: 560px;
}
.hero .btn-primary { font-size: 1.02rem; padding: 15px 22px; }
/* The one hero option: a single big Tread my Tax button */
.hero .btn-primary.hero-main-cta { font-size: 1.18rem; padding: 19px 30px; }
.hero-note { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); margin: 0; }

/* Secondary-page hero (non-resident) — same black/yellow hero band,
   smaller single-column headline instead of the giant two-column one */
.hero-sub-page { padding: 64px 0 56px; }
.hero-sub-page .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 0.75rem;
}
.hero-sub-page h1 {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.15;
  max-width: 760px;
}
.hero-sub-page .hero-sub { max-width: 640px; margin-bottom: 0.5rem; }
.hero-sub-page .hero-options { max-width: 520px; }

.hero-options {
  display: flex;
  gap: 16px;
  margin: 1.75rem 0 1.25rem;
  flex-wrap: wrap;
}
.hero-option { flex: 1; min-width: 190px; }
.hero-option-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 8px 4px 0;
  line-height: 1.4;
}

/* Secondary hero actions — Business Tax / Non-Resident match the two
   big hero buttons' pill style in a different color (white), just a
   step down in size; More Services stays a quiet pill so the yellow
   buttons remain the focal point. */
.hero-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0.25rem 0 1.1rem;
}
.btn-hero-alt {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #fff;
  color: var(--black);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-hero-alt:hover {
  background: #f0eee6;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.22);
  text-decoration: none;
}
.btn-hero-alt[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--yellow); }
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  text-decoration: none;
}
.btn-hero-secondary[aria-expanded="true"] {
  background: rgba(255, 199, 0, 0.14);
  border-color: rgba(255, 199, 0, 0.65);
  color: var(--yellow);
}
.hero-services-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -0.35rem 0 1.1rem;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.hero-services-menu[hidden] { display: none; }
.hero-services-link {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.hero-services-link:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

/* Price comparison card stack (hero visual) */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.price-stack {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 230px;
  margin: 0 auto;
}
.price-card {
  position: absolute;
  width: 160px;
  border-radius: 14px;
  padding: 16px 18px;
}
.price-card-brand {
  font-weight: 800;
  font-size: 0.95rem;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.price-card-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.price-card-row:last-child { border-bottom: none; }
.price-card-row span { color: inherit; opacity: 0.75; }
.price-card-row strong {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.price-dollar {
  font-family: inherit;
  font-size: 1em;
  font-weight: 900;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Offsets are horizontal-first (small vertical drift only) so each card's
   brand label — the thing that identifies it — always clears the card(s)
   in front of it instead of being hidden under their corner. */
.price-card-1 { left: 0; top: 0; z-index: 3; transform: rotate(-3deg); }
.price-card-2 { left: 152px; top: 24px; z-index: 2; transform: rotate(2deg); }
.price-card-3 { left: 304px; top: 48px; z-index: 1; transform: rotate(5deg); }

.price-card--featured {
  background: #fff;
  border: 3px solid var(--yellow);
  color: var(--black);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}
.price-card--featured .price-card-brand,
.price-card--featured .price-card-row strong { color: var(--black); }

.price-card--dim {
  background: #3a3a3a;
  color: #d8d8d8;
  opacity: 0.7;
  filter: grayscale(0.4);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}
.price-card--dim .price-card-brand { color: #cfcfcf; }
.price-card--dim .price-card-row { border-bottom-color: rgba(255, 255, 255, 0.12); }
.price-card--dim .price-card-row strong { color: #eaeaea; }

.price-card--dimmer {
  background: #232323;
  color: #a8a8a8;
  opacity: 0.5;
  filter: grayscale(0.6);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.price-card--dimmer .price-card-brand { color: #aeaeae; }
.price-card--dimmer .price-card-row { border-bottom-color: rgba(255, 255, 255, 0.08); }
.price-card--dimmer .price-card-row strong { color: #c6c6c6; }

.hero-visual-caption {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  max-width: 320px;
  margin: 0;
}

/* TRUST STRIP */
.trust-strip { background: var(--black); }
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  justify-content: center;
  padding: 18px 24px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--yellow);
  text-align: center;
}

/* CARDS */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--yellow); transform: translateY(-2px); }

/* STEPS */
.steps {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.steps .step { flex: 1; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-weight: 800;
  margin-bottom: 12px;
}
.step-arrow {
  color: var(--yellow-dark);
  flex-shrink: 0;
  margin-top: 34px;
  opacity: 0.85;
}

/* ABOUT */
.about-inner { max-width: 760px; }
.about-brand {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
  max-width: 900px;
}
.about-copy { flex: 1 1 320px; }
.about-mark {
  width: 168px;
  height: 168px;
  object-fit: cover;
  border-radius: 18px;
  border: 3px solid var(--yellow);
  box-shadow: var(--shadow);
  background: var(--yellow);
  flex-shrink: 0;
}

/* PHILOSOPHY SCROLLER — replaces About on home */
.philosophy-section {
  background: var(--black);
  color: #fff;
  overflow: hidden;
}
.philosophy-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.philosophy-head h2 { color: #fff; margin-bottom: 6px; }
.philosophy-head p { color: rgba(255,255,255,.68); max-width: 560px; margin: 0; }
.philosophy-eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 8px;
}
.philosophy-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.philosophy-track {
  display: flex;
  gap: 18px;
  width: max-content;
  padding: 6px 2px 10px;
  animation: philosophy-scroll 32s linear infinite;
}
.philosophy-section:hover .philosophy-track,
.philosophy-section:focus-within .philosophy-track { animation-play-state: paused; }
@keyframes philosophy-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.philosophy-card {
  width: 300px;
  flex: 0 0 300px;
  background: #171719;
  border: 1px solid rgba(255,255,255,.12);
  border-top: 4px solid var(--yellow);
  border-radius: 14px;
  padding: 24px 22px 22px;
  min-height: 220px;
}
.philosophy-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--black);
  font-weight: 900;
  font-size: .9rem;
  margin-bottom: 16px;
}
.philosophy-card h3 { color: #fff; font-size: 1.12rem; margin-bottom: 8px; line-height: 1.25; }
.philosophy-card p { color: rgba(255,255,255,.72); font-size: .94rem; line-height: 1.55; margin: 0; }
.philosophy-note { font-size: .82rem; color: rgba(255,255,255,.45); margin-top: 16px; }
@media (max-width: 640px) {
  .philosophy-head { flex-direction: column; align-items: flex-start; }
  .philosophy-card { width: 272px; flex-basis: 272px; min-height: 208px; padding: 20px 18px; }
  .philosophy-track { animation-duration: 24s; }
}
@media (prefers-reduced-motion: reduce) {
  .philosophy-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .philosophy-track { animation: none; width: max-content; }
}

/* SUBPAGE HEADER (contact page) */
.page-header { padding-bottom: 0; }
.page-title { font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 0.5rem; }
.contact-page { padding-top: 24px; }
.contact-alt { margin-top: 1.5rem; font-size: 0.9rem; }
/* CONTACT */
.contact-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
}
.contact-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.contact-list li { margin-bottom: 1.1rem; font-size: 0.95rem; }
.contact-list strong { display: block; color: var(--navy); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }

.contact-form {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.form-row { margin-bottom: 16px; }
.form-row label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.form-row .optional { font-weight: 400; color: var(--ink-soft); }
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--surface);
  color: var(--ink);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.35);
}
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status {
  min-height: 1.2em;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 12px 0 0;
}
.form-status.success { color: var(--black); }
.form-status.error { color: var(--error); }
.form-disclaimer { font-size: 0.78rem; color: var(--ink-soft); margin: 14px 0 0; }

/* Subtle placeholder hints (email + phone) */
input::placeholder,
textarea::placeholder {
  color: rgba(74, 74, 74, 0.55);
  font-style: italic;
}

/* "Message sent" confirmation dialog (contact page) */
.success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 210;
  padding: 20px;
}
.success-overlay[hidden] { display: none; }
.success-card {
  background: var(--surface);
  border: 2px solid var(--yellow);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  max-width: 380px;
  width: 100%;
  padding: 32px 28px;
  text-align: center;
}
.success-card h2 { margin: 0 0 8px; font-size: 1.4rem; }
.success-card p { margin: 0 0 22px; color: var(--ink-soft); }
.success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
}

/* SECURITY */
.security-inner .card-grid { margin-top: 1rem; }
.security-heading { display: flex; align-items: center; gap: 10px; }
.lock-icon { color: var(--black); flex-shrink: 0; }

/* BOTTOM CTA */
.bottom-cta-inner { text-align: center; max-width: 560px; margin: 0 auto; }
.bottom-cta-inner p { margin-bottom: 1.75rem; }

/* LOWER-MY-BILL PAGE */
.btn-hero-cta {
  font-size: 1.2rem;
  padding: 19px 40px;
  margin: 1.75rem 0 1rem;
  box-shadow: 0 10px 28px rgba(255, 199, 0, 0.35);
}
.hero-cta-note {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 520px;
  margin: 0 0 1.25rem;
}
.method-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow-dark);
  margin-bottom: 0.5rem;
}
.method-points {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 22px;
  max-width: 900px;
}
.method-points li {
  position: relative;
  padding-left: 20px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.method-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--yellow);
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.method-points strong { color: var(--ink); }
.cta-dark {
  background: var(--black);
  color: #fff;
  text-align: center;
}
.cta-dark h2 { color: #fff; }
.cta-dark p { color: rgba(255, 255, 255, 0.65); max-width: 560px; margin: 0 auto 0.5rem; }
.cta-dark .btn-hero-cta { margin-bottom: 0.5rem; }
@media (max-width: 600px) {
  .btn-hero-cta { width: 100%; padding: 17px 22px; font-size: 1.08rem; }
}

/* COMING SOON (stub service pages) */
.coming-soon-inner { text-align: center; max-width: 600px; margin: 0 auto; padding: 48px 0 24px; }
.coming-soon-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--black);
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.coming-soon-actions { display: flex; gap: 14px; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }

/* FOOTER — layout mirrors the Baby Blessings & Beyond footer
   (brand block + info columns + closing bar), restyled in TreadTax
   black / yellow. */
.site-footer {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 56px 0 28px;
  border-top: 3px solid var(--yellow);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.2fr 0.65fr 0.75fr 0.7fr;
  gap: 32px;
  margin-bottom: 2rem;
}
.footer-label {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
}
.footer-heading {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 0.6rem;
  max-width: 420px;
}
.footer-invite {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.92rem;
  margin: 0 0 1.4rem;
  max-width: 380px;
}
.footer-main p { color: rgba(255, 255, 255, 0.7); margin: 0 0 0.9rem; font-size: 0.92rem; }
.footer-main p:last-child { margin-bottom: 0; }
.site-footer a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 199, 0, 0.55);
  text-underline-offset: 4px;
}
.site-footer a:hover { text-decoration-color: var(--yellow); }
.footer-contact-link { font-weight: 700; }
.footer-quick-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 199, 0, 0.55);
  text-underline-offset: 4px;
  cursor: pointer;
}
.footer-quick-link:hover { text-decoration-color: var(--yellow); color: var(--yellow); }
.footer-bottom {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
}
.footer-bottom p { margin: 0; color: rgba(255, 255, 255, 0.65); }
.footer-top-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 199, 0, 0.55);
  text-underline-offset: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.footer-top-link:hover { color: var(--yellow); text-decoration-color: var(--yellow); }
.footer-legal { text-align: center; margin-top: 1.4rem; }
.footer-legal p { margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }
.footer-disclaimer { max-width: 640px; margin: 8px auto 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); }
@media (max-width: 860px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-main { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-legal { text-align: left; }
  .footer-disclaimer { margin-left: 0; }
}

/* RESPONSIVE */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; }
  .about-brand { flex-direction: column; align-items: center; }
  .about-mark { width: 140px; height: 140px; }
  .nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--black);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 28px;
    gap: 16px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav-toggle { display: flex; }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; color: #fff; padding: 4px 0; }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 0 0 12px;
  }
  .nav-dropdown-menu a,
  .nav-dropdown-menu button.menu-link { color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; padding: 6px 0; }
  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu button.menu-link:hover { color: var(--yellow); background: none; }
  .steps { flex-direction: column; gap: 20px; }
  .step-arrow { align-self: center; margin: -6px 0; transform: rotate(90deg); }
}

@media (max-width: 640px) {
  /* Keep the desktop overlapping fan on mobile — just scaled down
     to fit the viewport instead of stretching into a vertical list. */
  .price-stack {
    height: 205px;
    max-width: 340px;
  }
  .price-card {
    width: 34.5%;
    padding: 12px 11px;
    border-radius: 12px;
  }
  .price-card-brand {
    font-size: 0.82rem;
    margin-bottom: 6px;
  }
  .price-card-row {
    font-size: 0.62rem;
    padding: 4px 0;
    line-height: 1.3;
  }
  .price-card-row strong { font-size: 1.12rem; }
  .price-card-1 { left: 0; top: 0; }
  .price-card-2 { left: 32.75%; top: 20px; }
  .price-card-3 { left: 65.5%; top: 40px; }
}

@media (max-width: 380px) {
  .price-stack { height: 192px; }
  .price-card { padding: 10px 9px; }
  .price-card-brand { font-size: 0.76rem; }
  .price-card-row { font-size: 0.58rem; }
  .price-card-row strong { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card { transition: none; }
}

/* ============ TYPED SUBPAGE HEROES + CONTACT POPUP ============ */
.typed-headline {
  color: var(--yellow) !important;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.08;
  min-height: 2.2em;
}
.typed-headline .typed-text { white-space: pre-line; }
.subpage-typed-wrap { max-width: 820px; }
.subpage-typed-intro {
  color: rgba(255,255,255,.82);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 600;
  max-width: 640px;
  margin-top: 14px;
}
.typed-lines-list {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.typed-lines-list li {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 999px; padding: 7px 12px;
  font-size: .84rem; font-weight: 700;
}

/* Contact popup — BBB structure, TreadTax colors */
.contact-overlay {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.contact-overlay[hidden] { display: none; }
.contact-modal {
  background: var(--surface);
  width: 100%; max-width: 520px;
  max-height: min(92dvh, 860px);
  overflow: auto;
  border-radius: 18px;
  border: 2px solid var(--yellow);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  padding: 22px 22px 20px;
}
.contact-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 14px;
}
.contact-modal-head h2 { margin: 0; font-size: 1.45rem; }
.contact-modal-head p { margin: 4px 0 0; font-size: .92rem; }
.contact-close {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-alt);
  font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink);
}
.contact-close:hover { border-color: var(--black); }
.contact-banners { display: grid; gap: 10px; margin: 6px 0 16px; }
.contact-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px 16px; border-radius: 12px;
  font-weight: 900; font-size: 1rem; line-height: 1.15;
  border: 2px solid transparent; text-decoration: none;
}
.contact-banner small { display: block; font-weight: 700; font-size: .78rem; opacity: .78; margin-top: 2px; }
.contact-banner-call { background: var(--yellow); color: var(--black); }
.contact-banner-call:hover { background: var(--yellow-dark); text-decoration: none; }
.contact-banner-text { background: var(--black); color: #fff; border-color: var(--black); }
.contact-banner-text:hover { background: #232326; text-decoration: none; color: #fff; }
.contact-banner-text small { color: rgba(255,255,255,.72); }
.contact-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 14px; color: var(--ink-soft);
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.contact-divider::before, .contact-divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }
.contact-modal .contact-form { background: transparent; border: none; padding: 0; border-radius: 0; }
.contact-modal-success { text-align: center; padding: 14px 4px 6px; }
.contact-modal-success[hidden] { display: none; }
@media (max-width: 640px) {
  .typed-headline { min-height: 2.6em; }
  .contact-modal { padding: 18px 16px 16px; border-radius: 16px; }
}

/* Single light scheme by design: white/off-white background, black lines, yellow accents. */

/* ============ LIGHT "WINDOW" REDESIGN — black / white / yellow, thin crisp rounded black lines ============ */
/* Heroes become white panels framed by a thin black line (a clear window) */
.hero { background: transparent; color: var(--ink); padding: 38px 20px 46px; }
.hero-sub-page { padding: 38px 20px 42px; }
.hero .wrap {
  background: var(--surface);
  border: 1.5px solid var(--frame);
  border-radius: 22px;
  padding: 44px 40px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}
.hero h1 { color: var(--black); }
.typed-headline { color: var(--black) !important; }
.hero-sub { color: var(--ink); }
.hero-sub-page .eyebrow { color: var(--yellow-dark); }
.subpage-typed-intro { color: var(--ink-soft); }
.hero-option-desc { color: var(--ink-soft); }
.hero-note { color: var(--ink-soft); }
.typed-lines-list li { border: 1.5px solid var(--frame); background: var(--surface); color: var(--ink); }
.hero-services-menu { border: 1.5px solid var(--frame); background: var(--surface); }
.hero-services-link { border: 1.5px solid var(--frame); color: var(--ink); background: transparent; }
.hero-services-link:hover { border-color: var(--frame); background: var(--yellow); color: var(--black); }
.btn-hero-alt { border: 2px solid var(--frame); background: var(--surface); color: var(--black); }
.btn-hero-alt:hover { background: var(--yellow); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
.btn-hero-secondary { border: 1.5px solid var(--frame); background: var(--surface); color: var(--ink); }
.btn-hero-secondary:hover { background: var(--bg-alt); border-color: var(--frame); color: var(--black); }
.btn-hero-secondary[aria-expanded="true"] { background: rgba(255, 199, 0, 0.25); border-color: var(--frame); color: var(--black); }

/* The one big landing-page services button — solid black, yellow text */
.btn-hero-main {
  display: inline-flex;
  align-items: center;
  padding: 17px 38px;
  border-radius: 999px;
  border: 2px solid var(--frame);
  background: var(--black);
  color: var(--yellow);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-hero-main:hover { transform: translateY(-1px); background: #232326; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); text-decoration: none; }

/* Price fan recolored for the light panel */
.price-card--dim { background: #edeae1; color: #5a5a54; opacity: 1; filter: none; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); }
.price-card--dim .price-card-brand { color: #4c4c46; }
.price-card--dim .price-card-row { border-bottom-color: rgba(0, 0, 0, 0.10); }
.price-card--dim .price-card-row strong { color: #33332f; }
.price-card--dimmer { background: #e3e0d3; color: #76766c; opacity: 1; filter: none; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10); }
.price-card--dimmer .price-card-brand { color: #6a6a62; }
.price-card--dimmer .price-card-row { border-bottom-color: rgba(0, 0, 0, 0.08); }
.price-card--dimmer .price-card-row strong { color: #55554d; }
.hero-visual-caption { color: var(--ink-soft); }

/* Cards: thin crisp black frame + Our Fees footer button */
.card {
  border: 1.5px solid var(--frame);
  border-radius: var(--radius);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}
.card:hover { border-color: var(--frame); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10); }
.btn-card-fees {
  margin-top: auto;
  align-self: flex-start;
  background: var(--yellow);
  color: var(--black);
  border: 1.5px solid var(--frame);
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: 999px;
}
.btn-card-fees:hover { background: var(--yellow-dark); text-decoration: none; }
.compare-card .btn-card-fees { margin-top: 16px; }

/* Pillars (icon-led values, no numbers) */
.pillars-head { max-width: 640px; }
.pillars-eyebrow {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--yellow-dark); margin: 0 0 8px;
}
.pillar-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: flex-start;
  margin-bottom: 14px; color: #111; flex-shrink: 0;
}
.pillar-icon svg { width: 36px; height: 36px; }
.pillars-note { font-size: 0.9rem; color: var(--ink-soft); margin-top: 1.75rem; }

/* Fees tables */
.fees-frame { background: var(--surface); border: 1.5px solid var(--frame); border-radius: 16px; overflow: hidden; }
.fees-table { width: 100%; border-collapse: collapse; }
.fees-table th, .fees-table td { padding: 18px 20px; text-align: left; vertical-align: top; }
.fees-table thead th {
  background: var(--bg-alt); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1.5px solid var(--frame);
}
.fees-table thead th.fees-price-head { text-align: right; }
.fees-table tbody tr + tr { border-top: 1px solid var(--border); }
.fees-table tbody th { font-size: 1.05rem; color: var(--ink); white-space: nowrap; }
.fees-table td { color: var(--ink-soft); }
.fees-table .fees-price { text-align: right; font-weight: 900; font-size: 1.4rem; color: var(--black); white-space: nowrap; }
.fees-table .fees-price small { display: block; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.02em; }
.fees-table .fees-price-tbd { font-size: 1rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.fees-table .fees-price-note { font-size: 1.05rem; color: var(--black); }
.fees-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 1rem; }
@media (max-width: 640px) {
  .fees-table thead { display: none; }
  .fees-table tbody tr { display: block; padding: 16px 18px; }
  .fees-table tbody tr + tr { border-top: 1px solid var(--border); }
  .fees-table th, .fees-table td { display: block; padding: 0; }
  .fees-table tbody th { margin-bottom: 4px; white-space: normal; }
  .fees-table .fees-price { text-align: left; margin-top: 8px; }
}

/* Price comparison cards */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.compare-card {
  background: var(--surface); border: 1.5px solid var(--frame); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}
.compare-card--featured { border-top: 6px solid var(--yellow); }
.compare-brand { font-weight: 900; font-size: 1.15rem; margin: 0 0 6px; color: var(--ink); letter-spacing: -0.01em; }
.compare-badge {
  display: inline-block; align-self: flex-start;
  background: var(--yellow); color: var(--black); border: 1.5px solid var(--frame);
  font-weight: 800; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; margin-bottom: 14px;
}
.compare-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.compare-row:last-of-type { border-bottom: none; }
.compare-label { font-size: 0.88rem; color: var(--ink-soft); }
.compare-value { font-weight: 900; font-size: 1.12rem; color: var(--ink); white-space: nowrap; text-align: right; }
.compare-value small { display: block; font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); white-space: normal; }
.compare-note { font-size: 0.78rem; line-height: 1.5; color: var(--ink-soft); margin: 14px 0 0; }
.compare-source { font-size: 0.78rem; color: var(--ink-soft); margin-top: 1rem; }

/* Framed forms + menus */
.form-row input, .form-row textarea { border: 1.5px solid var(--frame); border-radius: 10px; }
.contact-form { border: 1.5px solid var(--frame); }
.nav-dropdown-menu { border: 1.5px solid var(--frame); border-radius: 12px; }

/* Typewriter containment — typed lines may wrap; never spill sideways */
.hero h1 { overflow-wrap: break-word; }
.typed-headline { overflow-wrap: break-word; }
@media (max-width: 640px) {
  .hero { padding: 22px 14px 30px; }
  .hero-sub-page { padding: 22px 14px 28px; }
  .hero .wrap { padding: 28px 20px; border-radius: 18px; }
  .hero h1 { font-size: clamp(1.8rem, 9.2vw, 2.35rem); min-height: 4.15em; }
  .hero-sub-page h1.typed-headline { font-size: clamp(1.55rem, 7.6vw, 2rem); }
}

/* ============ Home hero: three typed steps + "See the full process" ============ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero-steps { list-style: none; margin: 0 0 1.1rem; padding: 0; container-type: inline-size; }
.hero-step-title {
  position: relative;
  margin: 0;
  color: var(--black);
  /* Each statement stays on its own single line at every screen size:
     the size scales with the column width (cqi) instead of wrapping. */
  font-size: clamp(1.3rem, 8.4cqi, 4.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* Invisible full copy reserves the line's space; the typed copy sits on top */
.hero-step-ghost { visibility: hidden; }
.hero-step-typed { position: absolute; inset: 0; }
/* Smooth open/close: animating grid rows from 0fr to 1fr slides the text open */
.hero-step-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.6s;
}
.hero-step-detail-inner { overflow: hidden; min-height: 0; }
.hero-step-detail p {
  margin: 0;
  padding: 0.45rem 0 1.15rem 0.95rem;
  border-left: 3px solid var(--yellow);
  max-width: 520px;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.55;
}
.hero-steps.is-open .hero-step-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.5s ease 0.1s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s;
}
/* Open top to bottom, one step after another */
.hero-steps.is-open .hero-step:nth-child(2) .hero-step-detail { transition-delay: 0.08s, 0.18s, 0.08s, 0s; }
.hero-steps.is-open .hero-step:nth-child(3) .hero-step-detail { transition-delay: 0.16s, 0.26s, 0.16s, 0s; }
.hero-process-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 0.25rem; padding: 4px 0;
  border: none; background: none;
  color: var(--ink-soft);
  font: inherit; font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
}
.hero-process-toggle:hover, .hero-process-toggle[aria-expanded="true"] { color: var(--ink); }
.hero-process-chevron { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-process-toggle[aria-expanded="true"] .hero-process-chevron { transform: rotate(180deg); }
@media (max-width: 640px) {
  .hero-step-detail p { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-step-detail, .hero-steps.is-open .hero-step-detail, .hero-process-chevron { transition: none !important; }
}

/* Home hero: small text link under the main button */
.hero-secondary-link { margin: 0 0 1rem; font-size: 0.92rem; font-weight: 600; }
.hero-secondary-link a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; }
.hero-secondary-link a:hover { text-decoration-color: var(--ink); }

/* Leaving a page for Tread my Tax: everything slides down and fades */
@keyframes page-slide-away { to { transform: translateY(48px); opacity: 0; } }
body.page-leaving .page.active,
body.page-leaving .site-footer { animation: page-slide-away 0.42s cubic-bezier(0.55, 0, 0.75, 0.3) forwards; }
body.page-leaving { overflow: hidden; }

/* ============ TREAD MY TAX: a quiet conversation ============
   Minimal on purpose: white and soft grays, thin hairlines, regular-weight text.
   Yellow is only an accent (progress, check marks, send button). Top third: the
   running summary. Bottom two-thirds: the conversation, answer buttons and an
   always-open text box. */
body.chat-active { overflow: hidden; }
body.chat-active .site-footer { display: none; }
/* A light header on this page, menu links tucked behind the menu button */
body.chat-active .site-header { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid #eeeeec; }
body.chat-active .logo { color: #1d1d1f; font-size: 1.1rem; }
body.chat-active .site-header .header-inner { height: 52px; }
body.chat-active .nav-toggle { padding: 6px; }
body.chat-active .nav-toggle span { width: 20px; }
body.chat-active .nav-toggle { display: flex; }
body.chat-active .nav-toggle span { background: #1d1d1f; }
body.chat-active .nav {
  position: absolute; top: 52px; right: 0; left: auto; width: min(320px, 100%);
  background: #fff; border: 1px solid #eeeeec; border-top: none; border-radius: 0 0 14px 14px;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.18);
  flex-direction: column; align-items: flex-start; padding: 18px 22px 22px; gap: 14px; display: none;
}
body.chat-active .nav.open { display: flex; }
body.chat-active .nav a, body.chat-active .nav button.nav-link, body.chat-active .nav-dropdown-toggle { color: #3a3a3c; }
body.chat-active .nav .nav-cta { background: none; color: #3a3a3c !important; padding: 0; font-weight: 600; }

.intake {
  --ink-1: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #a1a1a6;
  --line: #ececea;
  --fill: #f5f5f3;
  --accent: #ffc700;
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  background: #fff; color: var(--ink-1);
}
.intake [hidden] { display: none !important; }
.page-chat.active { display: flex; flex-direction: column; height: calc(100dvh - 52px); min-height: 420px; background: #fff; }
.page.page-chat.active { animation: none; }
@keyframes intake-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
.page-chat.active .intake-summary { animation: intake-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.page-chat.active .intake-panel { animation: intake-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; }

/* ----- Summary: refund first, then progress, then a one-line ticker ----- */
.intake { position: relative; }
.intake-summary { flex: 0 0 auto; border-bottom: 1px solid var(--line); background: #fff; }
.intake-summary-inner { max-width: 760px; margin: 0 auto; padding: 10px 20px 8px; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: end; }
.intake-refund[hidden] + .intake-status { grid-column: 1 / -1; }
.intake-refund { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: left center; }
.intake-refund.is-changed { transform: scale(1.04); }
.intake-refund-amount { font-size: clamp(2.1rem, 9vw, 3rem); font-weight: 700; letter-spacing: -0.035em; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.intake-refund.is-empty .intake-refund-amount { color: #d6d6d3; }
.intake-refund.is-owed .intake-refund-amount { color: #8e3b2f; }
.intake-refund-label { margin-top: 4px; font-size: 0.72rem; color: var(--ink-2); }
.intake-refund-flag { margin-top: 3px; font-size: 0.72rem; font-weight: 600; color: #b4530a; }
.intake-status { margin: 0 0 2px; min-width: 0; }
.intake-left { margin: 4px 0 0; font-size: 0.72rem; color: var(--ink-3); text-align: right; }
.intake-progress-row { display: flex; align-items: center; gap: 8px; }
.intake-progress-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.intake-progress-bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.intake-pct { font-size: 0.75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.intake-ticker-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.intake-ticker {
  flex: 1; min-width: 0; overflow: hidden; cursor: pointer;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
}
.intake-ticker-track { display: inline-flex; white-space: nowrap; }
.intake-ticker-track.is-moving { animation: intake-ticker linear infinite; }
.intake-ticker:hover .intake-ticker-track.is-moving { animation-play-state: paused; }
@keyframes intake-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.intake-ticker-set { display: inline-flex; gap: 18px; padding-right: 18px; padding-left: 4px; }
.intake-tick { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--ink-1); }
.intake-tick svg { width: 11px; height: 11px; color: var(--accent); stroke-width: 2.6; flex: 0 0 auto; }
.intake-tick.is-tag { color: #8a6d00; }
.intake-tick.is-empty, .intake-tick.is-pending { color: var(--ink-3); }
.intake-tick .intake-spinner { width: 9px; height: 9px; }
.intake-summary-open {
  flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-2); cursor: pointer;
}
.intake-summary-open:hover, .intake-summary-open[aria-expanded="true"] { color: var(--ink-1); border-color: #cfcfcb; }
.intake-summary-open svg { width: 15px; height: 15px; }

/* Full summary: drops down over the page; edit any line; the up arrow folds it away */
.intake-summary-full { position: absolute; inset: 0; z-index: 5; background: #fff; display: flex; flex-direction: column; }
.intake-summary-full-inner { flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: 680px; margin: 0 auto; padding: 20px 20px 12px; }
.intake-full-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.intake-full-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink-1); }
.intake-full-refund { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.intake-summary-full .intake-check { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.intake-summary-full .intake-check:last-child { border-bottom: none; }
.intake-summary-close {
  flex: 0 0 auto; align-self: center; margin: 6px 0 14px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-1); cursor: pointer;
  box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.25);
}
.intake-summary-close:hover { border-color: #cfcfcb; }
.intake-summary-close svg { width: 22px; height: 22px; }
.intake-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 6px; }
.intake-tags:empty { display: none; }
.intake-tag { font-size: 0.8rem; color: #8a6d00; }
.intake-tag::before { content: "+ "; color: var(--accent); font-weight: 700; }
.intake-summary-empty { margin: 12px 0 0; font-size: 0.82rem; color: var(--ink-3); }
.intake-checklist { list-style: none; margin: 8px 0 0; padding: 0; }
.intake-check { display: grid; grid-template-columns: 16px 1fr 26px; gap: 8px; align-items: center; padding: 3px 0; font-size: 0.88rem; line-height: 1.35; color: var(--ink-1); }
.intake-check-mark { display: inline-flex; width: 14px; height: 14px; color: var(--accent); }
.intake-check-mark svg { width: 14px; height: 14px; stroke-width: 2.4; }
.intake-check-text { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.intake-check.is-pending .intake-check-text { color: var(--ink-3); }
.intake-check.is-fresh .intake-check-text { animation: intake-fresh 1.6s ease; }
@keyframes intake-fresh { 0%, 30% { background: rgba(255, 199, 0, 0.18); } 100% { background: transparent; } }
.intake-spinner { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--line); border-top-color: var(--accent); animation: intake-spin 0.8s linear infinite; }
@keyframes intake-spin { to { transform: rotate(360deg); } }
.intake-pencil { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer; }
.intake-pencil svg { width: 14px; height: 14px; }
.intake-pencil:hover { color: var(--ink-1); background: var(--fill); }

/* ----- The question and its cards: most of the screen ----- */
.intake-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.intake-history-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; height: 32px; padding: 0 8px;
  border: none; border-radius: 16px; background: none; font: inherit; font-size: 0.72rem; color: var(--ink-3); cursor: pointer;
}
.intake-history-toggle svg { width: 14px; height: 14px; }
.intake-history-toggle:hover, .intake-history-toggle[aria-expanded="true"] { color: var(--ink-1); background: var(--fill); }
.intake-thread {
  width: 100%; max-width: 760px; margin: 0 auto; max-height: 40vh; overflow-y: auto;
  padding: 8px 20px 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line);
}
.intake-msg { max-width: 88%; font-size: 0.88rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.intake-msg.is-bot { align-self: flex-start; }
.intake-msg.is-you { align-self: flex-end; background: var(--fill); color: var(--ink-1); padding: 6px 12px; border-radius: 14px; }
.intake-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
/* The question and its cards sit in the middle of the screen */
.intake-stage-inner { position: relative; width: 100%; max-width: 760px; margin: auto; padding: 14px 20px 16px; }
.intake-ack { margin: 0 0 6px; min-height: 1.2em; font-size: 0.88rem; line-height: 1.4; color: var(--ink-2); }
.intake-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.intake-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: intake-dot 1.1s ease-in-out infinite; }
.intake-dots span:nth-child(2) { animation-delay: 0.15s; }
.intake-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes intake-dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
/* The question: the largest text on screen after the refund */
.intake-question { margin: 0 0 20px; font-size: clamp(1.55rem, 6.4vw, 2.3rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: var(--ink-1); }

.intake-question:has(+ .intake-qhint:not([hidden])) { margin-bottom: 6px; }
.intake-qhint { margin: 0 0 18px; font-size: 0.92rem; line-height: 1.4; color: var(--ink-2); }
/* Answer cards. Up to four choices: square tiles, all visible at once.
   Longer checklists: a scrolling list of rows. */
.intake-cards { display: grid; gap: 12px; }
.intake-cards.is-squares { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.intake-cards.is-squares.is-1 { grid-template-columns: minmax(0, 200px); }
.intake-cards.is-squares.is-2 { grid-template-columns: repeat(2, minmax(0, 220px)); }
.intake-cards.is-squares.is-3 { grid-template-columns: repeat(3, minmax(0, 210px)); }
.intake-cards.is-squares.is-5, .intake-cards.is-squares.is-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.is-squares.is-fitted .intake-card { aspect-ratio: auto; height: var(--card-h); }
.intake-cards.is-list { grid-template-columns: 1fr; gap: 8px; }
.intake-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 16px; border: 1px solid #e4e4e1; border-radius: 18px; background: #fff;
  font: inherit; font-size: 1.05rem; font-weight: 600; line-height: 1.25; color: var(--ink-1); text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease, background-color 0.2s ease;
}
.is-squares .intake-card { aspect-ratio: 1 / 1; }
.is-list .intake-card { flex-direction: row; justify-content: flex-start; align-items: center; gap: 16px; min-height: 58px; padding: 12px 16px; border-radius: 14px; }
.intake-card:hover { border-color: #c9c9c5; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.28); text-decoration: none; }
.intake-card:active { transform: scale(0.98); }
.intake-card.is-picked { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.intake-card:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.intake-card:focus-visible, .intake-card:focus-within { outline: none; box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.15); }
.intake-card-icon { display: inline-flex; color: #111; }
.intake-card-icon svg { width: 44px; height: 44px; }
.is-list .intake-card-icon svg { width: 26px; height: 26px; }
.intake-card-label { display: flex; flex-direction: column; gap: 2px; }
.intake-card-label small { font-size: 0.8rem; font-weight: 400; color: var(--ink-2); }
.intake-upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ----- The composer: always open, pinned to the bottom ----- */
.intake-dock { flex: 0 0 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 16px 8px; }
.intake-composer {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 12px 10px 16px; border: 1px solid #e6e6e3; border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
.intake-composer:focus-within { border-color: #d2d2ce; box-shadow: 0 12px 34px -16px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 199, 0, 0.16); }
.intake-composer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.intake-composer-lead { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-2); }
.intake-input { width: 100%; border: none; outline: none; resize: none; background: transparent; font: inherit; font-size: 1.05rem; line-height: 1.4; color: var(--ink-1); padding: 2px 0; max-height: 120px; }
.intake-input::placeholder { color: var(--ink-3); font-style: normal; }
.intake-composer-bar { display: flex; align-items: center; gap: 8px; }
.intake-bar-gap { flex: 1; }
.intake-tool {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid #e4e4e1; border-radius: 999px; background: #fff;
  font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink-1); cursor: pointer; white-space: nowrap;
}
.intake-tool:hover { border-color: #c9c9c5; }
.intake-tool svg { width: 16px; height: 16px; flex: 0 0 auto; }
.intake-tool span { overflow: hidden; text-overflow: ellipsis; }
.intake-composer-bar { flex-wrap: wrap; }
.intake-composer-bar > .intake-tool:not(.is-continue) { min-width: 0; flex: 0 1 auto; }
/* "That's everything…" gets its own full-width row so it's never cut off */
.intake-tool.is-continue { background: #111; border-color: #111; color: #fff; order: -1; flex: 1 1 100%; justify-content: center; height: 40px; }
.intake-tool.is-continue:disabled { opacity: 0.3; cursor: default; }
.intake-kind select {
  height: 28px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink-1); background-color: var(--fill);
  border: 1px solid transparent; border-radius: 999px; padding: 0 28px 0 12px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16l-7-7h14z' fill='%23111'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; max-width: 46vw;
}
.intake-send { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #111; color: #fff; cursor: pointer; }
.intake-send:hover { background: #333; }
.intake-send svg { width: 18px; height: 18px; }
.intake-send.is-wide { width: auto; border-radius: 999px; padding: 0 16px; font: inherit; font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.intake-form-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; max-height: 34vh; overflow-y: auto; }
.intake-field-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; }
/* The box name sits on a gray chip; the amount goes in a white, outlined field */
/* Box number on top in bold, what the box is called underneath in small type */
.intake-field-row span { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 5px 10px; border-radius: 8px; background: var(--fill); color: var(--ink-1); }
.intake-field-row span b { font-size: 0.86rem; font-weight: 700; line-height: 1.15; }
.intake-field-row span small { font-size: 0.7rem; font-weight: 500; line-height: 1.2; color: var(--ink-2); overflow-wrap: anywhere; }
.intake-field-row input { box-sizing: border-box; flex: 0 0 44%; min-width: 0; border: 1px solid #d6d6d2; border-radius: 8px; outline: none; background: #fff; text-align: right;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink-1); padding: 9px 10px; font-variant-numeric: tabular-nums; }
.intake-field-row input::placeholder { color: #b8b8bc; font-weight: 400; }
.intake-field-row input:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.25); }
.intake-field-row.is-custom input:first-child { flex: 0 0 76px; text-align: left; background: var(--fill); border-color: transparent; }
.intake-field-row.is-custom input:last-child { flex: 1 1 auto; }
.intake-fineprint { margin: 6px 0 0; font-size: 0.68rem; color: var(--ink-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .intake-fineprint-wide { display: none; } }
.intake-fineprint a { color: var(--ink-2); text-decoration: none; }
.intake-fineprint-link { border: none; background: none; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  .page-chat.active { height: calc(100dvh - 52px); min-height: 0; }
  .intake-summary-inner { padding: 8px 16px 6px; column-gap: 14px; }
  .intake-summary-full-inner { padding: 16px 16px 10px; }
  .intake-thread { padding: 8px 16px 10px; }
  .intake-stage-inner { padding: 10px 16px 14px; }
  .intake-question { margin-bottom: 14px; }
  .intake-cards.is-squares { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .intake-cards.is-squares.is-1 { grid-template-columns: minmax(0, 1fr); }
  .is-squares .intake-card { padding: 14px; border-radius: 16px; }
  .intake-card-icon svg { width: 38px; height: 38px; }
  .is-list .intake-card-icon svg { width: 26px; height: 26px; }
  .intake-dock { padding: 6px 10px 6px; }
  .intake-form-rows { grid-template-columns: minmax(0, 1fr); max-height: 30vh; }
  .intake-cards.is-squares.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-squares.is-3 .intake-card:last-child { grid-column: 1 / -1; }
  .is-squares.is-3 .intake-card:last-child, .is-squares.is-3.is-fitted .intake-card:last-child,
  .is-squares.is-1 .intake-card, .is-squares.is-1.is-fitted .intake-card { aspect-ratio: auto; height: auto; min-height: 76px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-chat.active .intake-summary, .page-chat.active .intake-panel, .intake-check.is-fresh .intake-check-text, .intake-ticker-track.is-moving { animation: none; }
  .intake-progress-bar span { transition: none; }
  .intake-ticker { overflow-x: auto; }
}

/* ============ Fluid motion across the site ============ */
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.page.active { animation: page-in 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.nav.open, .nav-dropdown.open .nav-dropdown-menu, .hero-services-menu:not([hidden]) { animation: menu-in 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.contact-overlay:not([hidden]) { animation: overlay-in 0.25s ease; }
.contact-overlay:not([hidden]) .contact-modal { animation: modal-in 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
a, button { transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: 0.2s; }
@media (prefers-reduced-motion: reduce) {
  .page.active, .nav.open, .nav-dropdown.open .nav-dropdown-menu, .hero-services-menu:not([hidden]),
  .contact-overlay:not([hidden]), .contact-overlay:not([hidden]) .contact-modal { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Mid-size screens (tablets in landscape): the full menu doesn't fit, so it
   folds behind the menu button, and the tilted price cards can't widen the page. */
@media (min-width: 861px) and (max-width: 1100px) {
  .nav {
    position: absolute; top: 72px; right: 0; left: auto; width: min(340px, 100%);
    background: var(--black); border: 1px solid rgba(255, 255, 255, 0.1); border-top: none;
    flex-direction: column; align-items: flex-start; padding: 20px 24px 28px; gap: 16px; display: none;
  }
  .nav.open { display: flex; }
  .nav-toggle { display: flex; }
}
.hero { overflow-x: clip; }

/* Scrolling: a slim scrollbar that's always visible, plus a soft fade when there's more below */
.intake-stage, .intake-form-rows, .intake-thread, .intake-summary-full-inner {
  scrollbar-width: thin; scrollbar-color: #d4d4d0 transparent; scrollbar-gutter: stable;
}
.intake-stage::-webkit-scrollbar, .intake-form-rows::-webkit-scrollbar, .intake-thread::-webkit-scrollbar, .intake-summary-full-inner::-webkit-scrollbar { width: 6px; }
.intake-stage::-webkit-scrollbar-thumb, .intake-form-rows::-webkit-scrollbar-thumb, .intake-thread::-webkit-scrollbar-thumb, .intake-summary-full-inner::-webkit-scrollbar-thumb { background: #d4d4d0; border-radius: 3px; }
.intake-stage::-webkit-scrollbar-track, .intake-form-rows::-webkit-scrollbar-track, .intake-thread::-webkit-scrollbar-track, .intake-summary-full-inner::-webkit-scrollbar-track { background: transparent; }
.intake-stage::after {
  content: ""; position: sticky; bottom: 0; display: block; flex: 0 0 auto; height: 72px; margin-top: -72px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
}
.intake-stage.has-more::after { opacity: 1; }

/* Under the cards: the "What happens with each?" drop-down and the end-screen steps */
.intake-extra { margin-top: 14px; }
.intake-details { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 0 14px; }
.intake-details summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; font-size: 0.9rem; font-weight: 600; color: var(--ink-1); }
.intake-details summary::-webkit-details-marker { display: none; }
.intake-details summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.25s ease; }
.intake-details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.intake-details p { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.intake-details p b { color: var(--ink-1); }
.intake-more .intake-cards { margin: 0 0 12px; }
.intake-stop { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.intake-details[open] p { animation: intake-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.intake-next { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); }
.intake-next b { color: var(--ink-1); }
.intake-privacy-list { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 10px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.intake-privacy-list b { color: var(--ink-1); }
.intake-privacy { z-index: 6; }

/* Back buttons: in the header on every page but home, and above each intake question */
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.site-back, .intake-back { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 6px 12px 6px 9px; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; line-height: 1;
  transition: border-color 0.2s ease, transform 0.2s ease; }
.site-back[hidden], .intake-back[hidden] { display: none; }
.site-back:hover, .intake-back:hover { border-color: var(--ink); }
.site-back:active, .intake-back:active { transform: scale(0.96); }
.site-back svg, .intake-back svg { width: 16px; height: 16px; }
.intake-topline { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; min-width: 0; }
.intake-reading { margin: 0; display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 0.8rem; color: var(--ink-2);
  background: #fff8db; border-radius: 999px; padding: 5px 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intake-reading .intake-spinner { flex: 0 0 auto; }
.intake-back { margin: 0; padding: 5px 11px 5px 8px; font-size: 0.8rem; color: #3a3a3c; border-color: #e3e3e0; }
body.chat-active .site-back { display: none; }
@media (max-width: 420px) { .site-back span { display: none; } .site-back { padding: 7px; } }

/* Answer cards: tidy wrapping, smaller text when a square is small, and a check mark on "tap all that apply" cards */
.intake-card-label { text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.is-squares .intake-card { container-type: size; }
@container (max-height: 104px) {
  .intake-card-label small { display: none; }
  .intake-card-icon svg { width: 30px; height: 30px; }
  .intake-card-label { font-size: 0.95rem; }
}
.intake-card-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cfcfcb; background: #fff; color: transparent;
  display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.intake-card-check svg { width: 14px; height: 14px; }
.is-squares .intake-card-check { position: absolute; top: 12px; right: 12px; }
.is-list .intake-card-check { margin-left: auto; }
.intake-card.is-picked .intake-card-check { background: #111; border-color: #111; color: #fff; }
.intake-cards.is-more { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 0 0 12px; }
.is-more .intake-card { aspect-ratio: auto; min-height: 112px; }

/* Desktop: questions and cards on the left, refund, progress and summary on the right */
@media (min-width: 1000px) {
  .intake { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr); }
  .intake-panel { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
  .intake-summary { grid-column: 2; grid-row: 1; border-bottom: none; border-left: 1px solid var(--line); }
  .intake-summary-inner { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 28px 24px 10px; }
  .intake-refund-amount { font-size: 3.4rem; }
  .intake-ticker, .intake-summary-open { display: none; }
  .intake-ticker-row { margin-top: 0; justify-content: flex-end; }
  .intake #intake-summary-full, .intake #intake-summary-full[hidden] { display: flex !important; position: static; grid-column: 2; grid-row: 2; min-height: 0; border-left: 1px solid var(--line); z-index: auto; }
  .intake #intake-summary-full .intake-summary-full-inner { padding: 4px 24px 20px; }
  .intake #intake-summary-full .intake-summary-close, .intake #intake-full-refund { display: none; }
  .intake-privacy { grid-column: 1 / -1; grid-row: 1 / -1; }
}

/* Last step: a black "Pay by card" button under step 1; the card checkout drops down under it */
.intake-pay-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 10px 0 2px; height: 48px;
  border: none; border-radius: 999px; background: #111; color: #fff; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.intake-pay-btn svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
.intake-pay-btn[aria-expanded="true"] svg { transform: rotate(90deg); }
.intake-pay-btn:active { transform: scale(0.98); }
.intake-pay-btn.is-light { background: #fff; color: #111; border: 1px solid #111; height: 44px; font-size: 0.92rem; margin-top: 12px; }
.intake-pay { margin-top: 8px; }
.intake-pay-slot { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: #fafaf8; }
.intake-pay-slot p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.intake-pay-slot p b { color: var(--ink-1); }
.intake-pay-done { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-weight: 600; color: var(--ink-1); }
.intake-pay-done svg { width: 16px; height: 16px; }

/* The moment after an answer: what just happened, big and black, before the next question */
.intake-moment { margin: 0 0 12px; font-size: clamp(1.7rem, 7vw, 2.6rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.025em; color: var(--ink-1); transform-origin: left top; cursor: pointer; }
.intake-stage-inner.is-moment > :not(.intake-moment):not(.intake-topline) { display: none !important; }
.intake-stage-inner.is-moment .intake-back { visibility: hidden; }

/* Help tips: a small, quiet "?" that opens a short explanation */
.help-tip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 0 0 4px; padding: 0;
  border: 1px solid #cfcfcb; border-radius: 50%; background: #fff; color: #6e6e73; font: 700 11px/1 Inter, -apple-system, sans-serif;
  vertical-align: middle; cursor: pointer; position: relative; top: -1px; }
.help-tip::after { content: ""; position: absolute; inset: -10px; }
.help-tip:hover, .help-tip[aria-expanded="true"] { border-color: #111; color: #111; }
.help-bubble { position: fixed; z-index: 1000; padding: 12px 14px; border-radius: 12px; background: #111; color: #fff;
  font-size: 0.86rem; line-height: 1.5; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.45); animation: help-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes help-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .help-bubble { animation: none; } }

/* Secure numbers: their own encrypted boxes, never the chat */
.intake-secure { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fafaf8; display: grid; gap: 6px; }
.intake-secure-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 700; color: var(--ink-1); }
.intake-secure-head svg { width: 18px; height: 18px; }
.intake-secure .ssn-input { letter-spacing: 0.08em; }
.intake-secure-show { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink-2); margin-top: 2px; }
.intake-secure .intake-pay-btn svg { width: 16px; height: 16px; }
.intake-secure-note { margin: 2px 0 0; font-size: 0.8rem; color: var(--ink-2); }

/* Our Services menu: one line per item on desktop */
@media (min-width: 861px) { .nav-dropdown-menu { min-width: 250px; } .nav-dropdown-menu .menu-link { white-space: nowrap; } }
.intake-pay-slot.is-stripe { padding: 0; background: #fff; overflow: hidden; min-height: 320px; }
.intake-moment.is-long { font-size: clamp(1.3rem, 5.2vw, 1.9rem); line-height: 1.25; }

/* Document verification: a small label above the identity questions */
.intake-section { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.intake-section svg { width: 13px; height: 13px; }
.intake-attest { margin: 12px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--ink-2); }