/* ==========================================================================
   FUN2 KNOW — design system
   Blue Ridge + railroad: cool haze ground, ridge navy, Mill Mountain Star red.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Roanoke: cool ridge haze ground, Blue Ridge navy, Mill Mountain Star red.
     Neutrals are blue-biased on purpose — this is a mountain-and-railroad town,
     not a warm-cream one. */
  --paper:        #EDF0F2;
  --card:         #FFFFFF;
  --card-2:       #E1E7EB;
  --ink:          #0F1D26;
  --ink-soft:     #4E606D;
  --ink-faint:    #7E8F9B;

  --ridge:        #16323F;
  --ridge-2:      #3E6C87;
  --star:         #D8232F;
  --star-soft:    #FBE4E5;
  --gold:         #B08535;
  --sage:         #55786B;
  --mark-mid:     #1E4A63;   /* middle ring of the Roanoke Star mark */

  --line:         rgba(15, 29, 38, 0.13);
  --line-soft:    rgba(15, 29, 38, 0.07);
  --shadow-sm:    0 1px 2px rgba(15,29,38,.07), 0 2px 8px rgba(15,29,38,.05);
  --shadow-md:    0 2px 4px rgba(15,29,38,.05), 0 12px 32px rgba(15,29,38,.10);
  --shadow-lg:    0 4px 8px rgba(15,29,38,.05), 0 24px 60px rgba(15,29,38,.14);

  --radius:       14px;
  --radius-lg:    22px;
  --radius-pill:  999px;

  /* Display: a wide grotesque, set like Norfolk & Western station signage.
     Body: a news serif, because this reads like a local paper, not a startup. */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap:   1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(64px, 9vw, 124px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:     #0B151C;
    --card:      #13222C;
    --card-2:    #1A2C38;
    --ink:       #E9EFF3;
    --ink-soft:  #9FB2BE;
    --ink-faint: #6E828F;
    --ridge:     #BFD6E2;
    --ridge-2:   #8FB2C6;
    --star:      #F0555E;
    --star-soft: #2C1518;
    --gold:      #D2AC5F;
    --sage:      #86A99B;
    --mark-mid:  #8FBCD8;
    --line:      rgba(233, 239, 243, 0.15);
    --line-soft: rgba(233, 239, 243, 0.08);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow-md: 0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.55);

  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:     #0B151C;
  --card:      #13222C;
  --card-2:    #1A2C38;
  --ink:       #E9EFF3;
  --ink-soft:  #9FB2BE;
  --ink-faint: #6E828F;
  --ridge:     #BFD6E2;
  --ridge-2:   #8FB2C6;
  --star:      #F0555E;
  --star-soft: #2C1518;
  --gold:      #D2AC5F;
  --sage:      #86A99B;
  --mark-mid:  #8FBCD8;
  --line:      rgba(233, 239, 243, 0.15);
  --line-soft: rgba(233, 239, 243, 0.08);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.55);

}

/* --------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; }
p  { margin: 0 0 1.1em; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--star);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- typography --- */

.eyebrow {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--star);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1.5px;
  background: currentColor;
  flex: none;
  opacity: .55;
}
.center .eyebrow { justify-content: center; }

.lede {
  font-family: var(--body);
  font-size: clamp(1.06rem, 1.7vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 60ch;
}
.center .lede { margin-inline: auto; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section-head.center { margin-inline: auto; }

/* ------------------------------------------------------------ buttons --- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background .18s ease, opacity .18s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--primary { --btn-bg: var(--star); --btn-fg: #FFF; }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--lg { padding: 1.1rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.center .btn-row { justify-content: center; }

.textlink {
  color: var(--star);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--star) 32%, transparent);
  padding-bottom: 1px;
  transition: border-color .18s ease;
}
.textlink:hover { border-color: var(--star); }

/* --------------------------------------------------------------- nav --- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(22,32,43,.05); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 74px;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -.02em;
}
.brand__name b { color: var(--star); font-weight: 700; }
.brand__sub {
  font-size: .63rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
  font-weight: 600;
}

.nav__links { display: flex; align-items: center; gap: 1.5rem; }
.nav__links a {
  text-decoration: none;
  font-size: .93rem;
  font-weight: 550;
  color: var(--ink-soft);
  transition: color .16s ease;
}
.nav__links a:hover { color: var(--ink); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .55rem .9rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; gap: .5rem; }
  .nav__inner.is-open + .nav__drawer { display: block; }
}

.nav__drawer {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 1rem var(--gutter) 1.6rem;
}
.nav__drawer a {
  display: block;
  padding: .8rem 0;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
}
.nav__drawer .btn { margin-top: 1rem; }

/* -------------------------------------------------------------- hero --- */

.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 92px) 0; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: .35em; }
.hero h1 em {
  font-style: normal;
  color: var(--star);
  font-stretch: 125%;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--star-soft);
  color: var(--star);
  border-radius: var(--radius-pill);
  padding: .45rem 1rem .45rem .6rem;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .01em;
  margin-bottom: 1.6rem;
}
.hero__kicker span.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--star);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--star) 18%, transparent);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
  margin-top: 2.6rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}
.hero__proof div strong {
  display: block;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}
.hero__proof div span {
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}

/* portrait card */
.portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(165deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__placeholder {
  text-align: center;
  padding: 2rem;
  color: var(--ink-faint);
  font-size: .84rem;
  line-height: 1.5;
}
.portrait__placeholder svg { margin: 0 auto 1rem; opacity: .5; }
.portrait__badge {
  position: absolute;
  left: 1.1rem; bottom: 1.1rem; right: 1.1rem;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  box-shadow: var(--shadow-sm);
}
.portrait__badge b { font-size: .92rem; display: block; }
.portrait__badge small { color: var(--ink-faint); font-size: .76rem; }

/* ridgeline divider */
.ridge {
  display: block;
  width: 100%;
  margin-top: clamp(40px, 6vw, 70px);
  color: var(--ridge);
}

/* ------------------------------------------------------------ marquee --- */

.marquee {
  border-block: 1px solid var(--line);
  background: var(--card);
  overflow: hidden;
  padding-block: 1.05rem;
}
.marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: slide 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.marquee__track span::after {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--star); opacity: .7;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* -------------------------------------------------------------- cards --- */

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
  display: flex;
  flex-direction: column;
}
a.card { text-decoration: none; }
a.card:hover, .card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--star) 40%, var(--line));
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1rem; }
.card > :last-child { margin-bottom: 0; margin-top: auto; }

.card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--star-soft);
  color: var(--star);
  margin-bottom: 1.2rem;
}

/* path cards (buy / sell / relocate) */
.path {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}
.path::after {
  content: "→";
  position: absolute;
  right: 1.6rem; bottom: 1.4rem;
  font-size: 1.35rem;
  color: var(--star);
  transition: transform .22s ease;
}
.path:hover::after { transform: translateX(5px); }

/* ------------------------------------------------------- value module --- */

.valuation {
  background: var(--ridge);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3.4rem);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.valuation::before {
  content: "";
  position: absolute;
  inset: auto -10% -55% auto;
  width: 460px; height: 460px;
  background: radial-gradient(circle, color-mix(in srgb, var(--star) 55%, transparent), transparent 62%);
  pointer-events: none;
}
.valuation__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  position: relative;
}
@media (max-width: 900px) { .valuation__grid { grid-template-columns: 1fr; } }
.valuation h2 { color: inherit; }
.valuation p { color: color-mix(in srgb, currentColor 76%, transparent); }
.valuation .eyebrow { color: color-mix(in srgb, var(--star) 72%, var(--paper)); }

/* --------------------------------------------------------------- form --- */

.form {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}

.field { margin-bottom: 1rem; }
.field:last-of-type { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .45rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--star);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--star) 15%, transparent);
  outline: none;
}
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .6rem 1.1rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--paper);
  transition: all .16s ease;
  user-select: none;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:hover { border-color: var(--ink-faint); }
.chip:has(input:checked) {
  background: var(--star);
  border-color: var(--star);
  color: #fff;
}
.chip:has(input:focus-visible) { outline: 2.5px solid var(--star); outline-offset: 3px; }

.form__steps {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.5rem;
}
.form__steps i {
  height: 4px;
  flex: 1;
  border-radius: 99px;
  background: var(--line);
  transition: background .3s ease;
}
.form__steps i.on { background: var(--star); }

.step { display: none; animation: fadeUp .35s cubic-bezier(.2,.8,.3,1); }
.step.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } }

.step__label {
  font-family: var(--display);
  font-stretch: 108%;
  font-size: 1.35rem;
  margin-bottom: 1.2rem;
  line-height: 1.2;
}

.form__nav { display: flex; gap: .7rem; align-items: center; margin-top: 1.2rem; }
.form__nav .back {
  background: none; border: none; font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--ink-faint); cursor: pointer; padding: .5rem;
}
.form__nav .back:hover { color: var(--ink); }

.form__fine {
  font-size: .78rem;
  color: var(--ink-faint);
  line-height: 1.5;
  margin: 1rem 0 0;
}

.form__done { text-align: center; padding: 1.5rem 0; }
.form__done svg { margin: 0 auto 1rem; color: var(--sage); }

/* honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* ------------------------------------------------------ testimonials --- */

.quote {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: -.15em; right: .5rem;
  font-family: var(--body);
  font-size: 5rem;
  line-height: 1;
  color: var(--star);
  opacity: .13;
  pointer-events: none;
}
.quote p {
  font-family: var(--body);
  font-size: 1.14rem;
  line-height: 1.52;
  color: var(--ink);
  position: relative;
}
.quote footer {
  font-size: .84rem;
  color: var(--ink-faint);
  font-weight: 600;
  letter-spacing: .03em;
}
.stars { color: var(--gold); letter-spacing: .18em; font-size: .9rem; margin-bottom: .7rem; }

/* ----------------------------------------------------- neighborhoods --- */

.hood {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--card-2), var(--card));
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
.hood:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hood svg.hood__art {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: var(--ridge-2);
  opacity: .16;
  pointer-events: none;
}
.hood b { font-family: var(--display); font-size: 1.28rem; font-weight: 600; position: relative; }
.hood span { font-size: .85rem; color: var(--ink-soft); position: relative; }

/* -------------------------------------------------------------- faq --- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  font-weight: 600;
  position: relative;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: .3rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--star);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--ink-soft); padding-right: 2.5rem; margin-bottom: 1.35rem; }

/* ------------------------------------------------------------ footer --- */

.footer {
  background: var(--ridge);
  color: color-mix(in srgb, var(--paper) 92%, transparent);
  padding-block: clamp(3rem, 6vw, 4.6rem) 2rem;
  margin-top: var(--section);
}

.footer a { color: inherit; text-decoration: none; opacity: .8; }
.footer a:hover { opacity: 1; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 1rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: .92rem; }
.footer__legal {
  padding-top: 1.8rem;
  font-size: .78rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-start;
  justify-content: space-between;
}
.footer__badges { display: flex; align-items: center; gap: 1rem; flex: none; }
.footer__badges svg { opacity: .85; }

/* ------------------------------------------------------- sticky cta --- */

.stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  gap: .6rem;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.stickybar .btn { flex: 1; padding: .85rem 1rem; font-size: .92rem; }
@media (max-width: 900px) {
  .stickybar { display: flex; }
  body { padding-bottom: 74px; }
}

/* ------------------------------------------------------- animations --- */

/* Content is visible by default. The hidden-then-revealed state is opted into
   by script (html.js-anim), so if JavaScript never runs — an email preview
   pane, a locked-down browser, a file opened from an attachment — the page
   still reads in full instead of going blank below the hero. */
[data-reveal] { opacity: 1; transform: none; }

html.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1);
  transition-delay: var(--d, 0ms);
}
html.js-anim [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js-anim [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------ prose --- */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4em; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { color: var(--ink-soft); padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose > :first-child { margin-top: 0; }

.pagehead { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.crumbs { font-size: .82rem; color: var(--ink-faint); margin-bottom: 1.2rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--star); }

table.data { font-family: var(--sans); font-variant-numeric: tabular-nums; width: 100%; border-collapse: collapse; font-size: .93rem; margin-bottom: 1.5rem; }
table.data th, table.data td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--line); }
table.data th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 650; }
table.data tr:hover td { background: var(--card-2); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------ fill-in tokens --- */
/* Anything wrapped in .tok is a placeholder waiting on real info.
   Run ./personalize.sh to replace them all at once. */
.tok {
  border-bottom: 2px dashed color-mix(in srgb, var(--star) 55%, transparent);
  padding-bottom: .05em;
}

/* ==========================================================================
   Night panel — a band that stays dark in BOTH themes on purpose.
   These four tokens never flip; everything inside a .night surface reads
   from them, so the panel holds regardless of the viewer's theme.
   ========================================================================== */

:root {
  --night:      #0A1720;
  --night-2:    #13242F;
  --night-fg:   #EDF2F5;
  --night-soft: #93A9B6;
}

.night {
  background:
    radial-gradient(ellipse 90% 60% at 78% -10%, rgba(216,35,47,.20), transparent 62%),
    radial-gradient(ellipse 70% 50% at 8% 110%, rgba(62,108,135,.30), transparent 60%),
    var(--night);
  color: var(--night-fg);
}
.night h1, .night h2, .night h3 { color: var(--night-fg); }
.night p, .night .lede { color: var(--night-soft); }
.night .btn--ghost { --btn-fg: var(--night-fg); border-color: rgba(237,242,245,.26); }
.night .btn--ghost:hover { border-color: var(--night-fg); background: rgba(237,242,245,.06); }

/* ------------------------------------------------------- hero lockup --- */

.hero--night {
  position: relative;
  overflow: hidden;
  border-radius: clamp(18px, 2.4vw, 30px);
  margin: clamp(10px, 1.6vw, 20px) 0 0;
  padding: clamp(2.6rem, 6vw, 5.4rem) 0 clamp(1.8rem, 3vw, 2.6rem);
}
.hero--night .wrap { max-width: 1240px; }

/* faint ridgeline sitting behind the type */
.hero__ridge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  color: #3E6C87;
  opacity: .3;
  pointer-events: none;
}

.lockup { position: relative; }

.lockup__name {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 125%;
  font-size: clamp(2.7rem, 9.4vw, 7.2rem);
  line-height: .9;
  letter-spacing: -.042em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.lockup__name span { display: block; }
.lockup__name .last { color: var(--night-fg); }

/* the name play, set like a dictionary respelling */
.phon {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .55rem .9rem;
  margin: 1.5rem 0 0;
  font-family: var(--sans);
  font-size: clamp(.82rem, 1.5vw, 1rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--night-soft);
}
.phon__say {
  color: var(--star);
  font-stretch: 118%;
  font-weight: 700;
  letter-spacing: .2em;
}
.phon__rule {
  flex: 1;
  min-width: 30px;
  height: 1px;
  background: linear-gradient(90deg, rgba(237,242,245,.32), transparent);
  align-self: center;
}

/* entrance: one orchestrated moment, not scattered effects */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero--night [data-rise] {
  animation: riseIn .8s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: var(--rd, 0ms);
}
@media (prefers-reduced-motion: reduce) { .hero--night [data-rise] { animation: none; } }

.hero__lede {
  font-family: var(--body);
  font-size: clamp(1.06rem, 1.75vw, 1.3rem);
  line-height: 1.6;
  color: var(--night-soft);
  max-width: 46ch;
  margin: 1.9rem 0 0;
}
.hero__lede strong { color: var(--night-fg); font-weight: 600; }

/* stat band across the bottom of the hero */
.statband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(2.4rem, 5vw, 4rem);
  background: rgba(237,242,245,.14);
  border: 1px solid rgba(237,242,245,.14);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 720px) { .statband { grid-template-columns: repeat(2, 1fr); } }
.statband div {
  background: var(--night);
  padding: 1.2rem 1.3rem;
}
.statband b {
  display: block;
  font-family: var(--display);
  font-stretch: 118%;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--night-fg);
}
.statband span {
  display: block;
  margin-top: .5rem;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--night-soft);
}

/* portrait inside the night panel */
.portrait--night {
  border: 1px solid rgba(237,242,245,.16);
  background: linear-gradient(165deg, var(--night-2), var(--night));
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.monogram {
  display: grid;
  place-items: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
}
.monogram b {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(3.4rem, 8vw, 5.4rem);
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--night-fg);
  opacity: .92;
}
.monogram small {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--night-soft);
  max-width: 24ch;
  line-height: 1.7;
}

/* ------------------------------------------------- section numbering --- */
/* Used only where order is real (the transaction actually runs 1→4). */
.step-list { counter-reset: s; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.step-list > div {
  counter-increment: s;
  background: var(--card);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
}
.step-list > div::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--star);
  padding-top: .35rem;
}
.step-list h3 { margin-bottom: .35rem; font-size: 1.12rem; }
.step-list p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* --------------------------------------------------------- pull rule --- */
.rule {
  display: flex; align-items: center; gap: 1.2rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 650;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 2.4rem;
}
.rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ==========================================================================
   Nested-surface reset.
   .valuation / .night set a light `color` for text sitting directly on the
   dark panel. Light cards and forms placed INSIDE that panel are their own
   surface, so they must re-enter the normal token set — otherwise they
   inherit near-white text onto a white card.
   ========================================================================== */

.valuation .card,
.valuation .form,
.night .card,
.night .form { color: var(--ink); }

.valuation .card h1, .valuation .card h2, .valuation .card h3,
.valuation .form h1, .valuation .form h2, .valuation .form h3,
.night .card h3, .night .form h3 { color: var(--ink); }

.valuation .card p,
.valuation .form p,
.night .card p,
.night .form p { color: var(--ink-soft); }

.valuation .field label,
.night .field label { color: var(--ink-faint); }

/* ---------------------------------------------------- hero corrections --- */

/* keep the lockup from running into the portrait at wide viewports */
.lockup__name { font-size: clamp(2.15rem, 6.4vw, 5.5rem); }
@media (min-width: 1500px) { .lockup__name { font-size: 6rem; } }

/* the night panel needs its own edge, or it dissolves into a dark page ground */
.hero--night { border: 1px solid rgba(237, 242, 245, .10); }

/* license line stays on one line inside the badge */
.portrait__badge small { white-space: nowrap; font-size: .72rem; }

/* ------------------------------------------------------------- mobile --- */

@media (max-width: 560px) {
  .btn-row .btn { flex: 1 1 100%; }
  .brand__sub .hide-sm { display: none; }
  .brand__name { font-size: 1.08rem; }
}
.brand__sub { white-space: nowrap; }

/* left column of a two-up section rides along on tall screens */
@media (min-width: 941px) {
  .sticky-col { position: sticky; top: 104px; }
}

/* --------------------------------------------------------- sales table --- */
.data--sales { font-size: .92rem; }
/* Header stays put. Sticking it detached the row and floated it over the first
   two sales, hiding exactly the numbers it was labelling. */
.data--sales thead th {
  background: var(--card);
  border-bottom-color: var(--ink-faint);
}
.data--sales td:first-child { color: var(--star); white-space: nowrap; }
.data--sales td:nth-child(4),
.data--sales td:nth-child(5),
.data--sales td:nth-child(6) { text-align: right; color: var(--ink-soft); }
.data--sales th:nth-child(4),
.data--sales th:nth-child(5),
.data--sales th:nth-child(6) { text-align: right; }
.data--sales tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------- #NeverSettle --- */
.neversettle {
  margin: 1.8rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: .98rem;
}
.neversettle span {
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 115%;
  letter-spacing: .02em;
  color: var(--star);
}

/* the mark's middle ring reverses on the always-dark surfaces */
.footer, .night { --mark-mid: #E9EFF3; }

/* ---------------------------------------------------- hero, small screens ---
   On desktop the portrait sits beside the name. Stacked, it fell below the
   name, the pronunciation, the lede and both buttons — 84% down the fold, so
   on a phone you saw a sliver of hair and nothing else. For an agent the face
   is the trust signal, so it leads. Height is capped and the crop tightened to
   her face so the name and the primary CTA still land on the first screen. */
@media (max-width: 860px) {
  .hero__grid { gap: 1.3rem; }

  /* Stacked, the portrait leads. It must be FULL WIDTH and crop to a height —
     aspect-ratio plus max-height was the bug: the cap shrank the width too, so
     the photo became a small box marooned beside empty space. Fixed height with
     object-fit doing the cropping is what was wanted. */
  .hero__grid .portrait {
    order: -1;
    aspect-ratio: auto;
    width: 100%;
    height: clamp(280px, 44vw, 400px);
    max-height: none;
  }
  .hero__grid .portrait img { object-position: center 28%; }

  /* badge scales with the shorter frame instead of swamping it */
  .hero__grid .portrait__badge {
    left: .9rem; right: auto; bottom: .9rem;
    padding: .55rem .9rem;
    gap: .6rem;
  }
  .hero__grid .portrait__badge svg { width: 21px; height: 21px; }
  .hero__grid .portrait__badge b { font-size: .85rem; }
  .hero__grid .portrait__badge small { font-size: .68rem; }

  .hero--night { padding-top: clamp(1.6rem, 4vw, 2.6rem); }
  .hero__kicker { margin-bottom: 1rem; padding: .38rem .85rem .38rem .55rem; font-size: .74rem; }
  .hero__lede { margin-top: 1.2rem; }
  .hero__grid .btn-row { margin-top: 1.4rem !important; }
}

@media (max-width: 420px) {
  .hero__grid .portrait { height: clamp(230px, 60vw, 280px); }
  .hero__lede { font-size: 1rem; }
}

/* ==========================================================================
   Hero portrait: full-bleed, like the share card.

   A bordered, rounded, drop-shadowed card floating inside a dark panel reads
   as a widget pasted on top of the design. Running the photo full height to
   the panel's own edge and dissolving its inner edge into the ground makes
   the photo part of the panel instead of an object sitting on it.

   The stat band's cells are solid --night and sit above, so the photo appears
   to run from the top of the panel down to the band.
   ========================================================================== */

@media (min-width: 861px) {
  .hero--night { position: relative; }

  /* the grid must stay unpositioned, or it becomes the containing block and
     the photo anchors to it instead of to the panel edges */
  .hero--night .hero__grid { grid-template-columns: 1fr; }
  .hero--night .hero__grid > div:first-child {
    position: relative;
    z-index: 2;
    max-width: min(58%, 700px);
  }

  .hero--night .portrait {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(360px, 44%, 620px);
    height: auto;
    aspect-ratio: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    z-index: 1;
  }
  .hero--night .portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 34%;
  }
  /* inner edge dissolves into the panel */
  .hero--night .portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, var(--night) 0%, color-mix(in srgb, var(--night) 62%, transparent) 34%, transparent 72%),
      linear-gradient(0deg, var(--night) 0%, transparent 26%);
  }
  /* the name badge belongs on the card, not over a bleeding photo —
     the licence also appears in About and the footer */
  .hero--night .portrait__badge { display: none; }

  .hero--night .statband { position: relative; z-index: 3; }
}

@media (min-width: 1400px) {
  .hero--night .portrait { width: clamp(420px, 46%, 720px); }
}

/* ------------------------------------------------- long-string wrapping ---
   Her email is a 29-character unbreakable token. Below ~360px it cannot fit
   its card and pushes the whole page into horizontal scroll. Only breaks
   words that would otherwise overflow, so prose is unaffected.
   (Keep this last-in-file rule intact — it was once lost to an edit that
   replaced from a marker to end-of-file.) */
/* Only the places that actually contain unbreakable tokens — her email, URLs.
   Applying this to the whole body let the h1 break mid-word: "FONTENE / AU"
   whenever the display font fell back to a wider face, which happens during
   the webfont swap and in any screenshotter that does not load Google Fonts. */
.card a, .card span, .card small,
.footer a, .footer p { overflow-wrap: anywhere; }

/* Her name must never hyphenate or split, at any size, in any font. */
h1, h2, h3, h4, .lockup__name, .lockup__name span, .brand__name {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* -------------------------------------------- stacked hero, no box either ---
   Removing the frame on desktop but leaving it on phones just moves the
   problem. Stacked, the photo bleeds to the panel's own edges — left, right
   and top — and fades into the ground at the bottom, same idea as desktop. */
@media (max-width: 860px) {
  .hero--night { padding-top: 0; }

  .hero__grid .portrait {
    position: relative;
    width: auto;
    margin-inline: calc(var(--gutter) * -1);
    height: clamp(300px, 54vw, 430px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  .hero__grid .portrait img { object-position: center 26%; }
  .hero__grid .portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, var(--night) 2%, transparent 42%);
  }
  /* same reasoning as desktop — licence lives in About and the footer */
  .hero__grid .portrait__badge { display: none; }
}