:root {
  --ink: #1a1613;
  --ink-soft: #453c33;
  --paper: #fbf9f5;
  --paper-alt: #eee6d8;
  --accent: #a3603f;       /* muted brick/terracotta - subdued, not candy-bright */
  --accent-2: #9c8148;     /* antique brass */
  --accent-3: #6e3b40;     /* deep oxblood */
  --accent-deep: #7a4128;
  --ocean: #35524f;        /* deep coastal teal - dusk over Malibu water */
  --ocean-deep: #203635;
  --gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --gradient-warm: linear-gradient(135deg, #5c2c22 0%, var(--accent) 50%, var(--accent-2) 100%);
  --gradient-dusk: linear-gradient(160deg, var(--ocean-deep) 0%, var(--accent-3) 55%, var(--accent) 100%);
  --line: #e2d8c4;
  --muted: #655c4d;
  --max: 1120px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Native cross-document view transitions: on browsers that support it
   (Chrome/Edge 126+, Safari 18.2+ as of writing), internal navigations
   between any two pages on this site crossfade smoothly instead of a hard
   cut. Every page shares this stylesheet, so every internal link
   qualifies automatically. Browsers without support (Firefox, older
   Safari/Chrome) simply ignore this at-rule and navigate exactly as they
   already do today - nothing to fall back to, nothing that can break. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.45s;
    animation-timing-function: ease;
  }
}

html { scroll-behavior: smooth; }

html {
  overflow-x: hidden;
}

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(156, 129, 72, 0.08), transparent 60%),
    radial-gradient(1000px 500px at 100% 20%, rgba(110, 59, 64, 0.06), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, blockquote {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

p { margin: 0 0 1em; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.center { text-align: center; }

/* consistent, on-brand keyboard focus ring for every interactive element */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.nav-toggle:focus-visible,
.guide-modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 500;
  margin: 0 0 18px;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* thin accent-colored reading-progress bar, fixed to the very top of the
   viewport on every page - purely decorative, position:fixed so it never
   affects document flow or layout */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--gradient);
  z-index: 1000;
  pointer-events: none;
  transition: width 0.12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}

/* subtle film-grain texture over the whole page */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(28, 26, 23, 0.04);
}

.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.site-header.scrolled::before { transform: scaleX(1); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
}

.logo {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--ink);
}

.logo.small { font-size: 1.15rem; }

.ae { color: var(--accent); }

nav#siteNav {
  display: flex;
  align-items: center;
  gap: 28px;
}

nav#siteNav a:not(.cta) {
  position: relative;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

nav#siteNav a:not(.cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1.5px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

nav#siteNav a:not(.cta):hover { color: var(--accent-deep); }
nav#siteNav a:not(.cta):hover::after { transform: scaleX(1); transform-origin: left; }

/* current section, tracked via IntersectionObserver in script.js */
nav#siteNav a:not(.cta).active { color: var(--accent-deep); }
nav#siteNav a:not(.cta).active::after { transform: scaleX(1); transform-origin: left; }

.cta {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 8px 22px rgba(163, 96, 63, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.cta:hover::before { left: 130%; }

.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(163, 96, 63, 0.45); filter: brightness(1.04); }

.cta-large {
  padding: 16px 38px;
  font-size: 0.92rem;
}

.cta-outline {
  background: none;
  border: 1.5px solid var(--accent);
  color: var(--accent-deep);
  box-shadow: none;
}

.cta-outline:hover { background: var(--gradient); border-color: transparent; color: #fff; box-shadow: 0 10px 24px rgba(163, 96, 63, 0.35); }

/* nav-sized variant of the same button - identical gradient, shadow, shine
   sweep, and hover treatment as every other Book a Consultation CTA, just
   scaled down to fit the header */
.cta-nav {
  padding: 10px 22px;
  font-size: 0.82rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

/* while the mobile nav is open, lock the page behind it so it can't
   scroll/jump underneath the overlay */
body.nav-open {
  overflow: hidden;
}

.nav-toggle span {
  width: 22px;
  height: 1px;
  background: var(--ink);
  display: block;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 190px 0 0;
  overflow: hidden;
  text-align: center;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 22, 19, 0.6) 0%, rgba(26, 22, 19, 0.68) 45%, rgba(26, 22, 19, 0.92) 100%),
    linear-gradient(135deg, rgba(163, 96, 63, 0.3), rgba(110, 59, 64, 0.24));
}

/* Cursor-reactive spotlight glow, shared by every dark video section
   (hero, contact, notfound). JS only sets --spot-x/--spot-y and only on
   devices with a real mouse; the glow itself is pure CSS and simply never
   appears if those custom properties are never set (touch devices, or
   prefers-reduced-motion, both skip the JS entirely). */
.spot-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(520px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 255, 255, 0.09), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero:hover .spot-glow,
  .contact:hover .spot-glow,
  .notfound:hover .spot-glow {
    opacity: 1;
  }
}

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

.hero .eyebrow { color: var(--accent-2); }

.hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  max-width: 820px;
  margin: 0 auto 28px;
  color: #fff;
}

.hero h1 em {
  font-style: italic;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lede {
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.08rem;
  color: #efe6da;
}

.hero-actions {
  margin-top: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.link-arrow {
  text-decoration: none;
  font-size: 0.9rem;
  color: #efe6da;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
}

.contact-direct {
  margin-top: 18px;
  font-size: 0.88rem;
  color: #d9cec0;
}

.contact-direct a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* keep the hero (and its echo in the contact section) calm and static for
   users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .hero-video, .contact-video { display: none; }
  .hero-media { background: center / cover no-repeat url("/media/hero-poster.jpg"); }
  .contact-media { background: center / cover no-repeat url("/media/hero-poster.jpg"); }
}

.hero-stats {
  position: relative;
  z-index: 1;
  margin-top: 90px;
  border-top: 1px solid var(--line);
  background: var(--paper-alt);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 40px 28px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-left: 1px solid var(--line);
}

.stat:first-child { border-left: none; }

.stat-num {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ---------- philosophy ---------- */
.philosophy {
  position: relative;
  overflow: hidden;
  padding: 130px 0;
  text-align: center;
}

.philosophy::before,
.philosophy::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
}

.philosophy::before {
  width: 480px;
  height: 480px;
  top: -220px;
  left: -180px;
  background: radial-gradient(circle, var(--accent-2), transparent 70%);
  opacity: 0.28;
}

.philosophy::after {
  width: 420px;
  height: 420px;
  bottom: -220px;
  right: -160px;
  background: radial-gradient(circle, var(--accent-3), transparent 70%);
  opacity: 0.22;
}

.philosophy .wrap { position: relative; z-index: 1; }

.pull-quote {
  max-width: 760px;
  margin: 0 auto 32px;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-style: italic;
  color: var(--ink);
}

.philosophy-body {
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- about ---------- */
.about {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background: var(--paper-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  top: -160px;
  right: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  filter: blur(100px);
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}

.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 72px;
  align-items: start;
}

.about-portrait {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  padding: 5px;
  background: var(--gradient-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 40px rgba(163, 96, 63, 0.25);
}

.about-portrait::before {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163, 96, 63, 0.22), transparent 72%);
  filter: blur(6px);
  z-index: -1;
}

.about-portrait span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--accent-deep);
  letter-spacing: 0.05em;
}

.about-portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.about-copy h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-bottom: 24px;
  max-width: 620px;
}

.about-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 10px;
}

.about-list li {
  padding-left: 22px;
  position: relative;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(163, 96, 63, 0.18);
}

.about-direct {
  margin-top: 22px;
  font-size: 0.92rem;
}

.about-direct a {
  color: var(--accent-deep);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- focus areas ---------- */
.focus { position: relative; overflow: hidden; padding: 130px 0; }

.focus::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  top: -210px;
  right: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-2), transparent 70%);
  filter: blur(100px);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

.focus .wrap { position: relative; z-index: 1; }

.focus h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  max-width: 620px;
  margin: 0 auto 56px;
}

.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.focus-card {
  position: relative;
  background: var(--paper);
  padding: 40px 32px;
  border-top: 3px solid var(--accent);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.focus-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(163, 96, 63, 0.2);
  background: linear-gradient(180deg, var(--paper) 55%, rgba(163, 96, 63, 0.05));
}

.focus-card:nth-child(3n+2) { border-top-color: var(--accent-2); }
.focus-card:nth-child(3n+3) { border-top-color: var(--accent-3); }
.focus-card:nth-child(3n+2) .focus-icon { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.focus-card:nth-child(3n+3) .focus-icon { background: linear-gradient(135deg, var(--accent-3), var(--accent-deep)); }

.focus-card:nth-child(3n+2):hover {
  box-shadow: 0 22px 44px rgba(156, 129, 72, 0.22);
  background: linear-gradient(180deg, var(--paper) 55%, rgba(156, 129, 72, 0.06));
}

.focus-card:nth-child(3n+3):hover {
  box-shadow: 0 22px 44px rgba(110, 59, 64, 0.22);
  background: linear-gradient(180deg, var(--paper) 55%, rgba(110, 59, 64, 0.06));
}

.focus-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-bottom: 20px;
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 10px 22px rgba(163, 96, 63, 0.28);
  transition: transform 0.35s ease;
}

.focus-icon svg { width: 22px; height: 22px; }

/* Icons "draw themselves" in once their card scrolls into view, reusing
   the existing .reveal/.in-view mechanism from script.js (no new JS).
   pathLength="1" is set on every shape in these icons (see index.html /
   lori.html) so one dasharray/dashoffset pair works correctly regardless
   of each icon's actual path geometry. */
.focus-icon svg * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.8s ease 0.15s;
}

.focus-card.in-view .focus-icon svg * {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .focus-icon svg * {
    stroke-dashoffset: 0;
    transition: none;
  }
}

.focus-card:hover .focus-icon { transform: scale(1.08) rotate(-6deg); }

.focus-card h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.focus-card p { font-size: 0.92rem; }

/* ---------- how it works ---------- */
.process { padding: 130px 0; }

.process h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  max-width: 620px;
  margin: 0 auto 56px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.process-step { text-align: center; }

.process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 20px;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 10px 24px rgba(163, 96, 63, 0.28);
}

.process-step h3 { font-size: 1.2rem; margin-bottom: 10px; }
.process-step p { font-size: 0.92rem; max-width: 300px; margin: 0 auto; }

/* ---------- faq ---------- */
.faq { padding: 130px 0; background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.faq h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  max-width: 620px;
  margin: 0 auto 48px;
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(163, 96, 63, 0.1);
}

.faq-item[open] {
  border-color: var(--accent);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 28px 18px 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--ink);
  position: relative;
  transition: color 0.2s ease;
}

.faq-item summary:hover { color: var(--accent-deep); }

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after { content: "\2212"; }

.faq-item p {
  font-size: 0.92rem;
  padding-bottom: 20px;
}

/* ---------- services ---------- */
.services { position: relative; overflow: hidden; padding: 130px 0; background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.services::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  bottom: -230px;
  left: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ocean), transparent 70%);
  filter: blur(110px);
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
}

.services .wrap { position: relative; z-index: 1; }

.services h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 16px; }

.services-sub {
  max-width: 480px;
  margin: 0 auto 56px;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.tier {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 4px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tier:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(163, 96, 63, 0.18);
  border-color: var(--accent);
}

.tier h3 { font-size: 1.5rem; }

.tier-desc { font-size: 0.92rem; min-height: 66px; }

.tier ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  flex: 1;
}

.tier ul li {
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}

.tier ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.tier .cta { align-self: flex-start; }

.tier-featured {
  border-color: transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--gradient-warm) border-box;
  border: 2px solid transparent;
  box-shadow: 0 24px 55px rgba(163, 96, 63, 0.22);
  transform: translateY(-8px);
}

/* overrides the generic .tier:hover so the featured card deepens from its
   own already-elevated resting state instead of losing its gradient
   border (border-color would otherwise get clobbered to a flat accent) */
.tier-featured:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 65px rgba(163, 96, 63, 0.32);
  border-color: transparent;
}

.tier-badge {
  position: absolute;
  top: -13px;
  left: 32px;
  background: var(--gradient);
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(163, 96, 63, 0.35);
}

/* ---------- discretion ---------- */
.discretion {
  padding: 120px 0;
  background: var(--gradient-dusk);
}

.discretion-grid {
  max-width: 700px;
  text-align: center;
  margin: 0 auto;
}

.discretion h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  margin-bottom: 20px;
  color: #fff;
}

.discretion p { color: rgba(255, 255, 255, 0.9); }

/* ---------- wave divider (discretion -> contact) ---------- */
.wave-divider {
  display: block;
  line-height: 0;
  background: var(--gradient-dusk);
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 56px;
}

.wave-divider path { fill: var(--ink); }

/* ---------- contact ---------- */
.contact {
  position: relative;
  overflow: hidden;
  padding: 130px 0 150px;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
}

/* Echoes the hero video at the bottom of the page - lazy-loaded by
   script.js only once this section is about to scroll into view, so it
   never costs bandwidth/battery for visitors who don't scroll this far. */
.contact-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.5;
}

.contact-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 22, 19, 0.78) 0%, rgba(26, 22, 19, 0.88) 55%, var(--ink) 100%),
    linear-gradient(135deg, rgba(163, 96, 63, 0.22), rgba(110, 59, 64, 0.2));
}

.contact > .wrap { position: relative; z-index: 1; }

.contact .eyebrow { color: var(--accent-2); }
.contact h2 { color: var(--paper); font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 18px; }
.contact > .wrap > p { color: #d9cec0; max-width: 480px; margin-left: auto; margin-right: auto; }
.contact .cta { margin-top: 30px; }

/* ---------- contact panels (inline Calendly + direct options) ---------- */
.contact-panels {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
  gap: 32px;
  margin-top: 56px;
  text-align: left;
}

.contact-panel {
  background: rgba(251, 249, 245, 0.06);
  border: 1px solid rgba(251, 249, 245, 0.14);
  border-radius: 14px;
  padding: 28px;
  /* Frosted-glass effect over the video playing behind this section.
     Browsers without backdrop-filter support just show the plain
     translucent background above - no breakage either way. */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.contact-book {
  padding: 12px;
}

/* Calendly's inline embed is NOT self-resizing by default - per Calendly's
   own docs, the container needs an explicit height or it collapses to a
   near-empty box (exactly what "min-width only, no height" produced).
   data-resize="true" (set on the div in the HTML) lets Calendly grow this
   height further via postMessage if the rendered content needs more room
   than the base height below, which is also what fixes the earlier
   cut-off-calendar/scrollbar issue without going back to a hard clip. */
.contact-book .calendly-inline-widget {
  border-radius: 8px;
  overflow: hidden;
  min-width: 320px;
  height: 750px;
}

.contact-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-side h3 {
  color: var(--paper);
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.contact-side p {
  color: #d9cec0;
  max-width: none;
  margin: 0 0 20px 0;
  text-align: left;
}

.contact-side .cta-outline {
  border-color: rgba(251, 249, 245, 0.4);
  color: var(--paper);
  display: inline-block;
  text-decoration: none;
  margin-top: 0;
  margin-bottom: 18px;
}

.contact-side .cta-outline:hover { color: #fff; }

.contact-side .link-arrow {
  display: block;
  width: fit-content;
}

@media (max-width: 860px) {
  .contact-panels { grid-template-columns: 1fr; }
}

/* ---------- lead magnet (free guide) ---------- */
.lead-magnet {
  padding: 110px 0;
  background: var(--paper-alt);
  position: relative;
  overflow: hidden;
}

.lead-magnet::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--gradient-warm);
  opacity: 0.14;
  filter: blur(70px);
  pointer-events: none;
}

.lead-magnet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.lead-magnet-copy .eyebrow { color: var(--accent); }
.lead-magnet-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 16px; }
.lead-magnet-copy > p { color: var(--ink-soft); margin-bottom: 22px; max-width: 480px; }

.lead-tick {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lead-tick li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.lead-tick li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.lead-magnet-card {
  background: var(--paper);
  border-radius: 16px;
  padding: 40px 36px;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--gradient-warm) border-box;
  box-shadow: 0 24px 50px rgba(26, 22, 19, 0.14);
}

.lead-magnet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-warm);
  color: #fff;
  margin-bottom: 18px;
}

.lead-magnet-icon svg { width: 22px; height: 22px; }

.lead-magnet-card h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  line-height: 1.3;
}

.lead-magnet-card > p {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 22px;
}

.lead-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lead-form-row input[type="email"] {
  flex: 1 1 200px;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.92rem;
  background: #fff;
  color: var(--ink);
}

.lead-form-row input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(163, 96, 63, 0.12);
}

.lead-form-row .cta {
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  white-space: nowrap;
  padding: 13px 24px;
}

.lead-form-status {
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--muted);
  min-height: 1.2em;
}

.lead-form-status.is-error { color: var(--accent-deep); }
.lead-form-status.is-success { color: var(--ocean); font-weight: 600; }

.lead-form-success {
  display: none;
}

.lead-form-success.is-visible {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.lead-form-success .cta {
  margin: 0;
  display: inline-block;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}

.lead-form-success .link-arrow {
  font-size: 0.85rem;
}

@media (max-width: 860px) {
  .lead-magnet-grid { grid-template-columns: 1fr; }
  .lead-magnet-card { padding: 30px 26px; }
}

/* ---------- guide reading modal (on-site, no download required) ---------- */
.guide-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 19, 0.72);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.guide-modal-overlay.is-open {
  display: flex;
  opacity: 1;
}

body.guide-modal-open { overflow: hidden; }

.guide-modal {
  background: var(--paper);
  width: 100%;
  max-width: 640px;
  max-height: 84vh;
  overflow-y: auto;
  border-radius: 18px;
  padding: 48px 42px 40px;
  position: relative;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
  transform: translateY(12px);
  transition: transform 0.25s ease;
  text-align: left;
}

.guide-modal-overlay.is-open .guide-modal { transform: translateY(0); }

.guide-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.guide-modal-close:hover { background: var(--paper-alt); color: var(--ink); }

.guide-modal .eyebrow { color: var(--accent); margin-bottom: 8px; }
.guide-modal h2 { font-size: 1.55rem; margin: 0 0 22px; line-height: 1.25; }

.guide-modal h3 {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-3);
  font-weight: 600;
  margin: 30px 0 10px;
}

.guide-modal h3:first-of-type { margin-top: 4px; }

.guide-modal p {
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.65;
}

.guide-modal ul {
  margin: 6px 0 16px;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.guide-modal ul li { margin-bottom: 7px; }

.guide-modal-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  margin: 16px 0 26px;
  line-height: 1.55;
}

.guide-modal-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-3);
}

.guide-modal-tiers { margin: 8px 0 6px; }

.guide-modal-tier-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.guide-modal-tier-row:first-child { border-top: 1px solid var(--line); }

.guide-modal-tier-row strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 500;
  flex: 0 0 auto;
}

.guide-modal-tier-row span {
  color: var(--muted);
  max-width: 60%;
  text-align: right;
}

.guide-modal-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.guide-modal-footer .cta {
  margin: 0;
  text-decoration: none;
}

.guide-modal-footer .link-arrow { font-size: 0.85rem; }

@media (max-width: 640px) {
  .guide-modal { padding: 56px 24px 30px; max-height: 88vh; }
  .guide-modal-footer { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------- footer ---------- */
.site-footer {
  padding: 36px 0;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-nav { display: flex; gap: 24px; }
.footer-nav a { text-decoration: none; font-size: 0.85rem; color: var(--muted); }
.footer-nav a:hover { color: var(--accent-deep); }

.footer-meta { font-size: 0.8rem; color: var(--muted); }
.footer-meta a { color: var(--accent-deep); text-decoration: none; }
.footer-meta a:hover { text-decoration: underline; }

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- simple sub-page hero ---------- */
.page-hero {
  padding: 170px 0 80px;
  background:
    radial-gradient(1100px 480px at 85% -20%, rgba(53, 82, 79, 0.35), transparent 60%),
    radial-gradient(900px 420px at 5% 110%, rgba(163, 96, 63, 0.18), transparent 55%),
    var(--ink);
  color: var(--paper);
  text-align: center;
}

.page-hero .eyebrow { color: var(--accent-2); }
.page-hero h1 { color: var(--paper); font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin-bottom: 18px; }
.page-hero p { color: #d9cec0; max-width: 560px; margin: 0 auto; }

/* ---------- 404 page ---------- */
.notfound {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: center;
  padding: 150px 0 90px;
}

.notfound-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.notfound-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.notfound-overlay {
  position: absolute;
  inset: 0;
  /* Kept deliberately light so the video reads through clearly - text
     legibility comes from the text-shadow on the copy below instead of
     from darkening the footage. */
  background:
    linear-gradient(180deg, rgba(26, 22, 19, 0.22) 0%, rgba(26, 22, 19, 0.32) 55%, rgba(26, 22, 19, 0.7) 100%),
    linear-gradient(135deg, rgba(163, 96, 63, 0.16), rgba(110, 59, 64, 0.12));
}

.notfound .wrap { position: relative; z-index: 1; }

.notfound-code {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  margin-bottom: 8px;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.45));
}

.notfound .eyebrow {
  color: var(--accent-2);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.notfound h1 {
  color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  max-width: 640px;
  margin: 0 auto 20px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

.notfound .lede {
  max-width: 520px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: #efe6da;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.notfound-actions {
  margin-top: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.notfound-actions .link-arrow { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .notfound-video { display: none; }
  .notfound-media { background: center / cover no-repeat url("/media/404-poster.jpg"); }
}

@media (max-width: 640px) {
  .notfound { padding: 120px 0 70px; }
  .notfound-actions { flex-direction: column; gap: 18px; }
}

/* ---------- prose (privacy / terms) ---------- */
.page-content {
  padding: 80px 0 120px;
}

.page-content .wrap { max-width: 780px; }

.page-content h2 {
  font-size: 1.5rem;
  margin: 48px 0 16px;
}

.page-content h2:first-child { margin-top: 0; }

.page-content p,
.page-content li {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.page-content ul,
.page-content ol {
  padding-left: 22px;
  display: grid;
  gap: 8px;
  margin: 0 0 1em;
}

.page-content strong { color: var(--ink); }

.updated-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.legal-callout {
  background: var(--paper-alt);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 28px 0;
}

.legal-callout p { margin: 0; font-size: 0.92rem; }
.legal-callout p + p { margin-top: 10px; }

/* ---------- intake form ---------- */
.form-page { padding: 80px 0 120px; }
.form-page .wrap { max-width: 760px; }

.form-note {
  background: var(--paper-alt);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 0 0 48px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.form-section {
  padding: 36px 0;
  border-top: 1px solid var(--line);
}

.form-section:first-of-type { border-top: none; padding-top: 0; }

.form-section h2 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.form-section .section-hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 24px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field.full { grid-column: 1 / -1; }

.field label {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  font-weight: 500;
}

.field .req { color: var(--accent-3); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea { resize: vertical; min-height: 110px; font-family: var(--sans); line-height: 1.6; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(163, 96, 63, 0.15);
}

.radio-group,
.checkbox-group {
  display: grid;
  gap: 10px;
}

.radio-group label,
.checkbox-group label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--ink-soft);
  cursor: pointer;
}

.radio-group input,
.checkbox-group input {
  margin-top: 3px;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.consent-box {
  background: var(--paper-alt);
  border-radius: 6px;
  padding: 20px;
  margin-top: 8px;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.consent-box-error {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(122, 65, 40, 0.12);
}

/* honeypot field - hidden from real visitors, catches simple bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit {
  margin-top: 12px;
  text-align: center;
}

.form-submit .cta {
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}

.form-status {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

.form-status-error {
  color: var(--accent-deep);
}

.form-status-error a {
  color: inherit;
  text-decoration: underline;
}

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { width: 140px; height: 140px; }
  .focus-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-grid { grid-template-columns: 1fr; }
  .tier-featured { transform: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .stat:nth-child(3) { border-left: none; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }

  /* Smooth dropdown anchored under the header - not a full-screen takeover.
     Deliberately built on the most boring, battle-tested CSS possible:
     position:fixed (viewport-relative, no containing-block ambiguity from
     the sticky/backdrop-filter header) + a max-height/opacity transition
     (universally supported, no CSS Grid fr-unit animation quirks). visible
     open target close to the real content height so the animation reads
     as one smooth motion rather than snapping open early. */
  nav#siteNav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 44px rgba(26, 22, 19, 0.16);
    padding: 0 28px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease,
      visibility 0s linear 0.35s;
  }

  nav#siteNav.open {
    max-height: 480px;
    opacity: 1;
    padding: 14px 28px 26px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: visible;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease,
      visibility 0s linear 0s;
  }

  nav#siteNav.no-transition { transition: none !important; }

  nav#siteNav a:not(.cta) {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    flex-shrink: 0;
  }

  nav#siteNav a.cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-top: 20px;
    padding: 15px 0;
    font-size: 0.95rem;
    flex-shrink: 0;
  }

  .focus-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 100px; }
  .hero-stats { margin-top: 50px; }

  .page-hero { padding: 130px 0 60px; }
  .page-content,
  .form-page { padding: 56px 0 80px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .legal-callout,
  .form-note { padding: 16px 18px; }

  .philosophy,
  .about,
  .focus,
  .process,
  .services,
  .faq,
  .discretion { padding: 76px 0; }

  .process-grid { grid-template-columns: 1fr; gap: 36px; }
  .faq-item { padding: 4px 18px; }
  .faq-item summary { padding: 16px 26px 16px 0; font-size: 1rem; }

  .contact { padding: 90px 0 100px; }

  .about-grid { gap: 40px; }
  .about-portrait { width: 120px; height: 120px; }
  .about-portrait span { font-size: 2.1rem; }

  .focus-card { padding: 32px 24px; }
  .tier { padding: 32px 24px; }

  .wrap { padding: 0 22px; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr 1fr; padding: 28px 20px; gap: 20px 0; }
  .stat { border-left: none !important; }
  .hero-actions { gap: 16px; }
  .cta-large { padding: 14px 30px; font-size: 0.88rem; }
}