/* ============================================================
   home.css — homepage-only experience layer
   Loaded by index.html after the shared stylesheets. Uses the
   tokens in main.css; sage stands for the Georgia mountains,
   ocean for the Alabama coast.
   ============================================================ */

/* ------------------------------------------------------------
   HERO — two doors. The tagline is split across the seam:
   "From mountain views" over the mountains, "to coastal
   breeze." over the Gulf. Hovering or focusing a side widens it.
   ------------------------------------------------------------ */
.doors {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: grid-template-columns 0.9s var(--ease);
  background: var(--color-brand);
  overflow: hidden;
}
.doors:has(.door--ga:hover, .door--ga:focus-within) { grid-template-columns: 1.5fr 1fr; }
.doors:has(.door--al:hover, .door--al:focus-within) { grid-template-columns: 1fr 1.5fr; }

.door {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-height) + 9rem) clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 6vh, 4.5rem);
  color: #fff;
  min-width: 0;
  overflow: hidden;
}
.door__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.06);
  animation: heroPan 18s ease-out forwards;
  transition: filter 0.9s var(--ease);
}
.door::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transition: opacity 0.9s var(--ease);
}
.door--ga::before { background: linear-gradient(180deg, rgba(20,24,22,0.45) 0%, rgba(20,24,22,0.05) 35%, rgba(35,47,37,0.86) 100%); }
.door--al::before { background: linear-gradient(180deg, rgba(20,24,22,0.45) 0%, rgba(20,24,22,0.05) 35%, rgba(22,52,68,0.86) 100%); }
/* The side not being chosen recedes */
.doors:has(.door--ga:hover, .door--ga:focus-within) .door--al .door__bg,
.doors:has(.door--al:hover, .door--al:focus-within) .door--ga .door__bg { filter: grayscale(0.55) brightness(0.7); }

.door--al { text-align: right; align-items: flex-end; }

.door__line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6.2vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
  max-width: 9ch;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.door__region {
  font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.92); margin-bottom: 0.35rem;
}
.door__towns { font-size: 1.02rem; line-height: 1.5; color: rgba(255,255,255,0.88); margin-bottom: 1.4rem; max-width: 24rem; }
.door--al .door__towns { margin-left: auto; }
.door__actions { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.door--al .door__actions { justify-content: flex-end; }
.door__more { font-size: 0.9rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.45); padding-bottom: 2px; transition: border-color var(--transition-fast); }
.door__more:hover { border-color: #fff; }
.door--ga .btn { background: var(--color-warm-white); color: var(--color-sage); }
.door--al .btn { background: var(--color-warm-white); color: var(--color-ocean); }
.door .btn:hover { background: var(--color-warm-white); }

/* Brand plate sits on the seam, above both doors */
.doors__brand {
  position: absolute; z-index: 3;
  top: calc(var(--nav-now) + clamp(1.5rem, 5vh, 3.5rem));
  left: 50%; transform: translateX(-50%);
  text-align: center; color: #fff; width: max-content; max-width: 92vw;
  pointer-events: none;
}
.doors__brand .logo-mark { margin: 0 auto 0.9rem; }
.doors__brand .hero__eyebrow { color: rgba(255,255,255,0.92); text-shadow: 0 1px 14px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.3); }
.doors__brand .hero__brand { color: #fff; font-size: clamp(2.4rem, 4.6vw, 3.9rem); font-style: italic; font-weight: 500; text-shadow: 0 2px 30px rgba(0,0,0,0.4); margin: 0.2rem 0 1.2rem; }
.doors__brand > * { opacity: 0; animation: fadeUp 0.9s var(--ease) forwards; }
/* the name paints at once: it is the first thing to read and the page's largest text */
.doors__brand > .hero__brand { opacity: 1; animation: none; }
.doors__brand > *:nth-child(2) { animation-delay: 0.12s; }
.doors__brand > *:nth-child(3) { animation-delay: 0.24s; }

/* The seam — a fine luminous line between the two worlds */
.doors__seam {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: 1px;
  left: var(--seam, 50%);
  background: linear-gradient(180deg, transparent 10%, rgba(255,253,249,0.6) 50%, transparent 90%);
  pointer-events: none;
}
.doors:has(.door--ga:hover, .door--ga:focus-within) .doors__seam,
.doors:has(.door--al:hover, .door--al:focus-within) .doors__seam { opacity: 0; }

.doors__sell {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(1rem, 2.5vh, 1.6rem); transform: translateX(-50%);
  font-size: 0.85rem; color: rgba(255,255,255,0.85); white-space: nowrap;
}
.doors__sell a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); }
.doors__sell a:hover { border-color: #fff; }

.door__region, .door__live, .door__towns, .door__actions { opacity: 0; animation: fadeUp 1s var(--ease) forwards; }
/* the big line is the largest paint on the page, so it is visible from the first frame and only rises */
.door__line { animation: riseIn 1s var(--ease) both; }
@keyframes riseIn { from { transform: translateY(18px); } to { transform: none; } }
.door--ga .door__line { animation-delay: 0.35s; }
.door--al .door__line { animation-delay: 0.6s; }
.door__region, .door__live, .door__towns { animation-delay: 0.8s; }
.door__actions { animation-delay: 0.95s; }

@media (max-width: 760px) {
  .doors { grid-template-columns: 1fr; grid-template-rows: auto 1fr 1fr; }
  .doors:has(.door--ga:hover, .door--ga:focus-within),
  .doors:has(.door--al:hover, .door--al:focus-within) { grid-template-columns: 1fr; }
  .doors__brand { position: relative; top: auto; left: auto; transform: none; width: auto; padding: calc(var(--nav-height) + 1.5rem) 1rem 1.5rem; background: var(--color-brand-ground); }
  .door { padding: 4rem 1.25rem 2rem; min-height: 46svh; }
  .door--al { text-align: left; align-items: flex-start; }
  .door--al .door__actions { justify-content: flex-start; }
  .doors__seam { display: none; }
  .doors__sell { position: static; transform: none; grid-row: 4; padding: 1rem; text-align: center; background: var(--color-brand-ground); white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .doors__brand > *, .door__line, .door__region, .door__live, .door__towns, .door__actions { opacity: 1; }
}


/* ------------------------------------------------------------
   SEARCH AS A SENTENCE — each blank is a native <select>,
   set in the display face and sized to its current answer.
   ------------------------------------------------------------ */
.mad-search { max-width: 62rem; margin-inline: auto; text-align: center; }
.mad-search__sentence {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.45;
  color: var(--color-ink-40);
  margin-bottom: 2rem;
}
.mad-search__pick {
  appearance: none; -webkit-appearance: none;
  field-sizing: content;
  font: inherit; color: var(--color-ink);
  background: transparent;
  border: 0; border-bottom: 2px solid var(--color-ink-20);
  border-radius: 0;
  padding: 0 0.15em 0.02em;
  margin-inline: 0.08em;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.mad-search__pick:hover { border-color: var(--color-sage); }
.mad-search__pick:focus-visible { outline: none; border-color: var(--color-ocean); color: var(--color-ocean); }
/* An answered blank turns the colour of its market */
.mad-search__pick.is-set { color: var(--color-sage); border-color: var(--color-sage); }
.mad-search__pick.is-set.is-coast { color: var(--color-ocean); border-color: var(--color-ocean); }
.mad-search__pick option, .mad-search__pick optgroup { font-family: var(--font-body); font-size: 1rem; color: var(--color-ink); }
.mad-search__go { min-width: 16rem; }

@media (max-width: 600px) {
  .mad-search { text-align: left; }
  .mad-search__go { width: 100%; }
}

/* ------------------------------------------------------------
   MOUNTAIN → COAST — a pinned scroll moment. home.js sets --p
   (0 → 1) from scroll position and redraws the line.
   ------------------------------------------------------------ */
.journey { --p: 0; position: relative; height: 240vh; background: var(--color-brand-ground); }
.journey__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; place-items: center; isolation: isolate;
}
.journey__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.journey__bg--ga { transform: scale(calc(1.12 - var(--p) * 0.12)); }
.journey__bg--al { opacity: var(--p); transform: scale(calc(1 + var(--p) * 0.08)); }
.journey__stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,24,22,0.55), rgba(20,24,22,0.35) 45%, rgba(20,24,22,0.7));
}
.journey__line {
  position: absolute; left: 0; right: 0; top: 18%; width: 100%; height: 26vh;
  overflow: visible;
}
.journey__line path { fill: none; stroke: rgba(255,255,255,0.9); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.journey__label {
  position: absolute; top: calc(18% - 2.5rem); font-size: 0.95rem; font-weight: 500; color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.journey__label--ga { left: var(--gutter); opacity: calc(1 - var(--p) * 2); }
.journey__label--al { right: var(--gutter); opacity: calc(var(--p) * 2 - 1); }
.journey__copy { position: relative; margin-top: 22vh; text-align: center; color: #fff; max-width: 40rem; padding-inline: 1.25rem; }
.journey__title { font-size: clamp(2.6rem, 6vw, 5rem); color: #fff; margin-bottom: 1.1rem; text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.journey__text { font-size: 1.1rem; color: rgba(255,255,255,0.9); margin: 0 auto 1.9rem; max-width: 34rem; }

/* Without scroll motion the section is a single still frame */
@media (prefers-reduced-motion: reduce) {
  .journey { height: auto; }
  .journey__stage { position: relative; }
}

/* ------------------------------------------------------------
   REGION MAP — Georgia + Alabama with each town pinned.
   Hover/focus a town in the list to light its pin.
   ------------------------------------------------------------ */
.region-map { background: var(--color-brand-ground); color: var(--color-on-brand); padding-block: clamp(4rem, 8vw, 7rem); }
.region-map__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.region-map__svg { width: 100%; height: auto; display: block; overflow: visible; }
.region-map__state { fill: rgba(255,255,255,0.03); stroke: rgba(241,241,238,0.38); stroke-width: 1.2; stroke-linejoin: round; }
.region-map__gulf { fill: url(#gulf-fade); }
.region-map__state-name { fill: rgba(241,241,238,0.32); font-family: var(--font-display); font-size: 30px; text-anchor: middle; }
.region-map__water { fill: rgba(141,190,214,0.6); font-family: var(--font-display); font-style: italic; font-size: 20px; text-anchor: middle; }
.region-map__halo--ga { fill: rgba(107,127,96,0.28); }
.region-map__halo--al { fill: rgba(74,143,168,0.3); }
.region-map__pin { stroke: var(--color-ink); stroke-width: 1.5; transition: r 0.35s var(--ease), fill 0.35s var(--ease); }
.region-map__pin--ga { fill: var(--color-sage-mid); }
.region-map__pin--al { fill: var(--color-ocean-mid); }
.region-map__pin.is-lit { r: 9px; fill: #fff; }
.region-map__tip { fill: #fff; font-family: var(--font-body); font-size: 17px; font-weight: 600; paint-order: stroke; stroke: var(--color-ink); stroke-width: 5px; opacity: 0; transition: opacity 0.25s; }
.region-map__tip.is-shown { opacity: 1; }

.region-map__title { color: var(--color-warm-white); margin-bottom: 1rem; }
.region-map__lead { color: rgba(241,241,238,0.75); max-width: 30rem; margin-bottom: 2.2rem; }
.region-map__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.region-map__region { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: 2px solid; }
.region-map__region--ga { color: #a9bf9c; border-color: var(--color-sage-mid); }
.region-map__region--al { color: #8dbed6; border-color: var(--color-ocean-mid); }
.region-map__towns li + li { margin-top: 0.15rem; }
.region-map__towns a {
  font-family: var(--font-display); font-size: 1.45rem; color: var(--color-cream);
  display: inline-block; padding-block: 0.15rem; transition: color var(--transition-fast), transform var(--transition-fast);
}
.region-map__towns a:hover, .region-map__towns a:focus-visible { color: #fff; transform: translateX(6px); }

@media (max-width: 900px) {
  .region-map__grid { grid-template-columns: 1fr; }
  .region-map__figure { max-width: 34rem; margin-inline: auto; width: 100%; }
}
@media (max-width: 420px) {
  .region-map__lists { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   TOWN RAIL — tall cards that run off the right edge, with
   arrow buttons and a progress line. Native scroll + snap, so
   touch, trackpad and keyboard all work without the arrows.
   ------------------------------------------------------------ */
.rail-controls { display: flex; align-items: center; gap: 0.75rem; }
.rail-controls .text-link { margin-right: 1rem; }

.town-rail {
  --rail-inset: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
  display: flex; gap: 1.25rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-inset);
  padding: 0.5rem var(--rail-inset) 1.5rem;
  scrollbar-width: none;
}
.town-rail::-webkit-scrollbar { display: none; }
.town-rail:focus-visible { outline: 3px solid var(--color-ocean); outline-offset: -3px; }
.town-rail .town-card { flex: 0 0 clamp(240px, 27vw, 380px); aspect-ratio: 3 / 4; scroll-snap-align: start; }
.town-rail .town-card__body { padding: 1.6rem; }
.town-rail .town-card__name { font-size: clamp(1.8rem, 2.4vw, 2.4rem); }


@media (max-width: 640px) {
  .rail-btn { display: none; }
  .town-rail .town-card { flex-basis: 74vw; }
}

/* ------------------------------------------------------------
   MATCHMAKER — three questions, one at a time, ending on a
   matching search and an offer to send the answers to Amanda.
   ------------------------------------------------------------ */
.match { background: var(--color-sage); color: var(--color-cream); position: relative; overflow: hidden; }
.match::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 120% at 100% 0%, rgba(45,107,138,0.35), transparent 60%); pointer-events: none; }
.match__inner { position: relative; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.match__title { color: var(--color-warm-white); margin-bottom: 1rem; }
.match__text { color: rgba(255,255,255,0.82); max-width: 26rem; }

.match__step { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
.match__q { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); color: #fff; line-height: 1.1; margin-bottom: 1.4rem; padding: 0; }
.match__count { display: block; font-family: var(--font-body); font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-bottom: 0.6rem; }
.match__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.match__opt { position: relative; cursor: pointer; }
.match__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.match__opt span {
  display: block; padding: 1.1rem 1.25rem; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.06);
  font-size: 1.02rem; color: #fff;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.match__opt:hover span { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.55); }
.match__opt input:checked + span { background: var(--color-warm-white); color: var(--color-sage); border-color: var(--color-warm-white); }
.match__opt input:focus-visible + span { outline: 3px solid var(--color-earth-light); outline-offset: 3px; }
.match__nav { display: flex; gap: 1rem; align-items: center; }
.match__back, .match__restart { color: #fff; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.5); padding: 0 0 2px; }

/* Stepper mode (JS on): one question visible, others parked */
.match--stepped .match__step { display: none; }
.match--stepped .match__step.is-current { display: block; animation: fadeUp 0.5s var(--ease); }
.match--stepped .match__submit { display: none; }

.match__result-kicker { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-bottom: 0.5rem; }
.match__result-title { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem); color: #fff; line-height: 1.08; margin-bottom: 1.6rem; }
.match__result-actions { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 2.25rem; flex-wrap: wrap; }
.match__send { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1.6rem; }
.match__send-label { display: block; color: #fff; font-weight: 500; margin-bottom: 0.75rem; }
.match__send-row { display: flex; gap: 0.65rem; flex-wrap: wrap; }

@media (max-width: 860px) {
  .match__inner { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .match__opts { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   HOME VALUATION — three short steps, address first.
   Earth is the sellers' colour here.
   ------------------------------------------------------------ */
.value { background: var(--color-earth-pale); }
.value__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.value__title { margin-bottom: 1.1rem; }
.value__lead { font-size: 1.12rem; max-width: 32rem; margin-bottom: 2.4rem; }
.value__sub { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--color-earth); margin-bottom: 0.9rem; }
.value__list li { padding: 0.75rem 0; border-top: 1px solid rgba(122,92,58,0.18); font-size: 0.98rem; }
.value__list strong { color: var(--color-ink); font-weight: 600; }

.value__card {
  background: var(--color-warm-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 3.5vw, 3rem); position: relative; overflow: hidden; min-height: 25rem;
  display: flex; flex-direction: column;
}
.value__progress { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--color-earth-pale); }
.value__progress span { display: block; height: 100%; background: var(--color-earth); width: calc(var(--v-step, 1) / 3 * 100%); transition: width 0.5s var(--ease); }
.value__count { font-size: 0.85rem; color: var(--color-ink-40); margin-bottom: 0.6rem; }
.value__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.value__q { font-family: var(--font-display); font-size: clamp(1.8rem, 2.8vw, 2.4rem); color: var(--color-ink); line-height: 1.1; margin-bottom: 1.4rem; padding: 0; }
.value__label { font-size: 0.9rem; font-weight: 500; color: var(--color-ink-70); margin: 0.4rem 0 0.6rem; }
.value__chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1rem; }
.value__chip span { padding: 0.65rem 1rem; color: var(--color-ink); border-color: var(--color-rule); background: var(--color-cream); font-size: 0.95rem; }
.value__chip:hover span { background: var(--color-earth-pale); border-color: var(--color-earth-light); }
.value__chip input:checked + span { background: var(--color-earth); color: #fff; border-color: var(--color-earth); }
.value__chip input:focus-visible + span { outline-color: var(--color-ocean); }
.value__input {
  width: 100%; padding: 0.95rem 1.1rem; border: 1px solid var(--color-rule); border-radius: var(--radius);
  font: inherit; font-size: 1rem; background: var(--color-warm-white); color: var(--color-ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.value__input:focus { outline: none; border-color: var(--color-earth); box-shadow: 0 0 0 3px var(--color-earth-pale); }
.value__input--big { font-family: var(--font-display); font-size: 1.6rem; padding: 0.8rem 1.1rem; }
.value__input[aria-invalid="true"] { border-color: #a4402c; }
.value__fields { display: grid; gap: 0.9rem; }
.value__field span { display: block; font-size: 0.88rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--color-ink-70); }
.value__field em { font-style: normal; color: var(--color-ink-40); font-weight: 400; }
.value__error { color: #a4402c; font-size: 0.9rem; margin-top: 0.6rem; }
.value__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: auto; padding-top: 1.75rem; }
.value__back { font-size: 0.95rem; color: var(--color-ink-70); border-bottom: 1px solid var(--color-ink-20); padding-bottom: 2px; }
.value__next { margin-left: auto; min-width: 11rem; }
.value__nav[hidden] { display: none; }
.value__done:focus { outline: none; }
.value__done-text { font-size: 1.05rem; }

/* Stepper mode (JS on) */
.value--stepped .value__step { display: none; }
.value--stepped .value__step.is-current { display: block; animation: fadeUp 0.45s var(--ease); }
.value:not(.value--stepped) .value__step + .value__step { margin-top: 1.75rem; }

/* On one column the form sits right under its heading, the list after it */
@media (max-width: 900px) {
  .value__grid { grid-template-columns: 1fr; gap: 0; }
  .value__copy { display: contents; }
  .value__title { order: 1; }
  .value__lead { order: 2; margin-bottom: 1.75rem; }
  .value__card { order: 3; margin-bottom: 2.5rem; min-height: 0; }
  .value__sub { order: 4; }
  .value__list { order: 5; }
}

/* ------------------------------------------------------------
   HOW IT WORKS — buying and selling as four real steps each.
   The connecting line is drawn in the path's colour.
   ------------------------------------------------------------ */
.path { --path: var(--color-sage); }
.path:has(.path__panel--sell.is-current) { --path: var(--color-earth); }
.path__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.path__tabs { display: inline-flex; padding: 0.3rem; border-radius: 999px; background: var(--color-warm-white); border: 1px solid var(--color-rule); }
.path__tabs[hidden] { display: none; }
.path__tab { padding: 0.7rem 1.6rem; border-radius: 999px; font-size: 1rem; font-weight: 500; color: var(--color-ink-70); transition: background var(--transition-fast), color var(--transition-fast); }
.path__tab[aria-selected="true"] { background: var(--path); color: #fff; }

.path__steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); counter-reset: path; margin-bottom: 2.5rem; position: relative; }
.path__steps::before { content: ''; position: absolute; top: 1.6rem; left: 1.6rem; right: 0; height: 2px; background: var(--path); opacity: 0.35; }
.path__step { counter-increment: path; position: relative; }
.path__step::before {
  content: counter(path); display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--color-cream); border: 2px solid var(--path); color: var(--path);
  font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 1.4rem; position: relative;
}
.path__step-title { font-size: 1.6rem; margin-bottom: 0.5rem; }
.path__step p { font-size: 0.98rem; max-width: 22rem; }
.path__nojs { font-weight: 600; color: var(--path); margin-bottom: 1rem; }
.path__panel + .path__panel { margin-top: 3.5rem; }
.path__panel--sell { --path: var(--color-earth); }

/* Tabs mode (JS on) */
.path--tabbed .path__nojs { display: none; }
.path--tabbed .path__panel { display: none; margin-top: 0; }
.path--tabbed .path__panel.is-current { display: block; }
.path--tabbed .path__panel.is-current .path__step { animation: fadeUp 0.6s var(--ease) both; }
.path--tabbed .path__panel.is-current .path__step:nth-child(2) { animation-delay: 0.08s; }
.path--tabbed .path__panel.is-current .path__step:nth-child(3) { animation-delay: 0.16s; }
.path--tabbed .path__panel.is-current .path__step:nth-child(4) { animation-delay: 0.24s; }

@media (max-width: 860px) {
  .path__steps { grid-template-columns: 1fr; gap: 1.6rem; }
  .path__steps::before { top: 0; bottom: 0; left: 1.6rem; right: auto; width: 2px; height: auto; }
  .path__step { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1.25rem; }
  .path__step::before { margin-bottom: 0; grid-row: span 2; }
}

/* ------------------------------------------------------------
   MEET AMANDA — her own headshot, whole, in a plain mat (.skyline in
   components.css), her name underneath.
   ------------------------------------------------------------ */
.meet__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.meet__portrait { position: relative; margin: 0; }
.meet__caption {
  margin: 1.4rem 10px 0; font-family: var(--font-display); font-size: 1.35rem; color: var(--color-ink); line-height: 1.2;
}
.meet__caption span { display: block; font-family: var(--font-body); font-size: 0.82rem; color: var(--color-ink-40); }
.meet__title { margin-bottom: 1.5rem; }
.meet__copy .lead { margin-bottom: 1.2rem; }
.meet__reach { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 2rem 0 1.75rem; }
.meet__way {
  flex: 1 1 14rem; padding: 1rem 1.2rem; border: 1px solid var(--color-rule); border-radius: var(--radius);
  background: var(--color-warm-white); font-size: 1.1rem; font-weight: 500; color: var(--color-ink);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.meet__way span { display: block; font-size: 0.82rem; font-weight: 400; color: var(--color-ink-40); }
.meet__way:hover { border-color: var(--color-sage); transform: translateY(-2px); }
.meet__compliance { margin-top: 1.75rem; font-size: 0.78rem; color: var(--color-ink-40); }

@media (max-width: 860px) {
  .meet__grid { grid-template-columns: 1fr; }
  .meet__portrait { max-width: 20rem; margin: 1.25rem auto 1rem; width: calc(100% - 2.5rem); }
  .meet__caption { font-size: 1.15rem; }
  .meet__caption span { font-size: 0.72rem; }
}


/* ------------------------------------------------------------
   SPEED — phones get 800px heroes; the inline 1600px photos are
   for desktop. Photos below the first screen are <img loading=lazy>.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .door--ga .door__bg { background-image: url('../images/ga-porch-first-light.jpg') !important; background-image: image-set(url('../images/w/ga-porch-first-light-720.webp') type('image/webp'), url('../images/ga-porch-first-light.jpg') type('image/jpeg')) !important; }
  .door--al .door__bg { background-image: url('../images/al-orange-beach-walkover.jpg') !important; background-image: image-set(url('../images/w/al-orange-beach-walkover-720.webp') type('image/webp'), url('../images/al-orange-beach-walkover.jpg') type('image/jpeg')) !important; }
}
/* Photos that used to be CSS backgrounds: same box, filled the same way */
img.lazy-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
img.town-card__bg, img.community-panel__bg, img.journey__bg { position: absolute; inset: 0; }
img.guide-card__media { height: auto; aspect-ratio: 3 / 2; }

/* ------------------------------------------------------------
   LOGO REVEAL — the hero mark draws itself in once, left to right:
   mountain first, then the wave. Same pixels as her file; a moving
   gradient mask uncovers it. Reduced motion shows it whole.
   ------------------------------------------------------------ */
.doors__brand .logo-glyph {
  -webkit-mask: url('../images/brand/logo-mark.png') center / contain no-repeat,
                linear-gradient(90deg, #000 45%, transparent 55%) 0 0 / 220% 100% no-repeat;
  -webkit-mask-composite: source-in;
          mask: url('../images/brand/logo-mark.png') center / contain no-repeat,
                linear-gradient(90deg, #000 45%, transparent 55%) 0 0 / 220% 100% no-repeat;
          mask-composite: intersect;
  -webkit-mask-position: center, 100% 0;
          mask-position: center, 100% 0;
  animation: logoDraw 2.2s cubic-bezier(.45,.05,.25,1) 0.3s forwards;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.35));
}
@keyframes logoDraw { to { -webkit-mask-position: center, 0 0; mask-position: center, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .doors__brand .logo-glyph { animation: none; -webkit-mask-position: center, 0 0; mask-position: center, 0 0; }
}

/* Quick picks under the sentence search */
.picks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 1.75rem; }
.picks__label { font-size: 0.9rem; color: var(--color-ink-70); margin-right: 0.35rem; }
.picks__chip {
  padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--color-rule); background: var(--color-warm-white);
  font-size: 0.92rem; color: var(--color-ink); transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.picks__chip::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.5rem; vertical-align: 1px; background: var(--color-ink-20); }
.picks__chip--ga::before { background: var(--color-sage-mid); }
.picks__chip--al::before { background: var(--color-ocean-mid); }
.picks__chip--sell::before { background: var(--color-earth-light); }
.picks__chip:hover { border-color: var(--color-brand); transform: translateY(-2px); }
@media (max-width: 600px) {
  .picks { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 0.25rem var(--gutter) 0.5rem; }
  .picks::-webkit-scrollbar { display: none; }
  .picks__chip, .picks__label { flex: 0 0 auto; }
}

/* Hero "Search in your own words" */
.hero-ask {
  pointer-events: auto; margin: 1.4rem auto 0; display: inline-flex; align-items: center; gap: 0.8rem;
  width: min(30rem, 88vw); padding: 0.85rem 0.9rem 0.85rem 1.15rem; border-radius: 999px; text-align: left;
  background: rgba(251,251,249,0.95); color: var(--color-ink-70); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.5);
  font-size: 0.98rem; transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.hero-ask:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -18px rgba(0,0,0,0.55); }
.hero-ask svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--color-brand); stroke-width: 2; stroke-linecap: round; }
.hero-ask__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.hero-ask__eg { font-size: 0.82rem; color: var(--color-ink-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.1em; }
.hero-ask kbd { font: 600 0.8rem var(--font-body); padding: 0.2rem 0.5rem; border-radius: 6px; border: 1px solid var(--color-rule); color: var(--color-ink-40); }
@media (max-width: 760px) { .hero-ask kbd { display: none; } }

/* ------------------------------------------------------------
   HERO DEPTH — home.js sets --mx/--my (pointer, -1..1) and --sy
   (scroll, 0..1). The photos drift against the pointer, the words
   drift with it, and scrolling away pushes the photos in and lets
   the brand plate rise and fade. Uses the independent translate /
   scale properties so the load-in pan keeps running underneath.
   ------------------------------------------------------------ */
.doors { --mx: 0; --my: 0; --sy: 0; }
.door__bg { translate: calc(var(--mx) * -14px) calc(var(--my) * -10px + var(--sy) * 60px); scale: calc(1.04 + var(--sy) * 0.08); transition: filter 0.9s var(--ease), translate 0.6s cubic-bezier(.2,.8,.2,1); }
.door__line { translate: calc(var(--mx) * 8px) calc(var(--my) * 6px + var(--sy) * -40px); transition: translate 0.6s cubic-bezier(.2,.8,.2,1); }
.doors__brand { opacity: calc(1 - var(--sy) * 1.6); }
.doors__brand .logo-mark, .doors__brand .hero__brand { translate: 0 calc(var(--sy) * -50px); }
@media (prefers-reduced-motion: reduce) {
  .door__bg, .door__line, .doors__brand .logo-mark, .doors__brand .hero__brand { translate: none; scale: none; }
  .doors__brand { opacity: 1; }
}

/* Matchmaker: the homes that fit, dealt in like cards */
.match__found { color: rgba(255,255,255,0.85); margin: -0.6rem 0 0.9rem; font-size: 0.98rem; }
.match__homes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.6rem; perspective: 900px; }
.match__home { display: block; border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: #fff; animation: dealIn 0.7s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 0.12s + 0.15s); transform-origin: 50% 120%; transition: transform var(--transition-fast), border-color var(--transition-fast); }
.match__home:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.5); }
.match__home img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.match__home span { display: block; padding: 0.6rem 0.7rem 0.7rem; font-size: 0.82rem; line-height: 1.35; color: rgba(255,255,255,0.85); }
.match__home b { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: #fff; }
@keyframes dealIn { from { opacity: 0; transform: translateY(30px) rotateX(-35deg) rotate(calc((var(--i) - 1) * 6deg)); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .match__homes { grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; } .match__home span { font-size: 0.72rem; padding: 0.45rem; } .match__home b { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .match__home { animation: none; } }

/* The tagline's words rise one at a time (home.js wraps them) */
.door__line.is-split { opacity: 1; animation: none; }
.door__line .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.04em 0.14em; margin-bottom: -0.14em; }
.door__line .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: 0 100%; animation: wordUp 1.1s var(--ease-out-expo) forwards; animation-delay: var(--d, 0s); }
@keyframes wordUp { to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .door__line .w > span { animation: none; transform: none; }
}

/* Region map card: the lit town's photo and homes for sale, beside its pin */
.region-map__figure { position: relative; }
.region-map__card {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 3; width: 15rem;
  display: block; border-radius: 14px; overflow: hidden; background: var(--color-warm-white); color: var(--color-ink);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,0.6); pointer-events: none;
  opacity: 0; transform: translate(1.6rem, -30%) scale(0.92); transform-origin: 0 50%;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease-out-expo);
}
.region-map__card.is-coast { transform: translate(1.6rem, -85%) scale(0.92); transform-origin: 0 100%; }
.region-map__card.is-shown { opacity: 1; pointer-events: auto; transform: translate(1.6rem, -30%); }
.region-map__card.is-coast.is-shown { transform: translate(1.6rem, -85%); }
.region-map__photo { display: none; aspect-ratio: 16 / 10; overflow: hidden; }
.region-map__card.has-photo .region-map__photo { display: block; }
.region-map__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease-out-expo); }
.region-map__card.is-shown .region-map__photo img { transform: scale(1); }
.region-map__card-body { display: block; padding: 0.75rem 0.95rem 0.85rem; }
.region-map__name { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; line-height: 1.1; }
.region-map__count { font-size: 0.86rem; color: var(--color-ink-70); }
.region-map__count::after { content: ' →'; }
.region-map__all, body:has(.doors) .region-map__all { margin-top: 2rem; color: var(--color-warm-white); }
@media (max-width: 900px) {
  .region-map__card, .region-map__card.is-coast { left: 50%; top: auto; bottom: 0; width: 13rem; transform: translate(-50%, 12px) scale(0.94); transform-origin: 50% 100%; }
  .region-map__card.is-shown, .region-map__card.is-coast.is-shown { transform: translate(-50%, 0); }
  .region-map__photo { aspect-ratio: 16 / 8; }
}
@media (prefers-reduced-motion: reduce) { .region-map__card, .region-map__photo img { transition: none; } }
.region-map__figure:has(.region-map__card.is-shown) .region-map__tip { opacity: 0; }

/* ------------------------------------------------------------
   WAYS TO LIVE — one large photo and a list of the guides. The
   line you point at (or focus) opens its sentence and brings its
   photo forward with a slow push-in (home.js). Phones get a small
   photo in each line instead.
   ------------------------------------------------------------ */
.lives { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.lives__media { position: relative; margin: 0; aspect-ratio: 4 / 4.6; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-sand); }
.lives__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity 0.9s var(--ease), transform 6s cubic-bezier(.2,.7,.2,1); }
.lives__media img.is-on { opacity: 1; transform: scale(1); }
.lives__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.lives__row {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'where go' 'title go' 'desc go';
  padding: 1.35rem 0.25rem 1.35rem 0; border-top: 1px solid var(--color-rule); color: var(--color-ink);
}
.lives__list li:last-child .lives__row { border-bottom: 1px solid var(--color-rule); }
.lives__thumb { display: none; }
.lives__where { grid-area: where; font-family: var(--font-body); font-style: normal; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-sage); }
.lives__list li:nth-child(3) .lives__where { color: var(--color-ocean); }
.lives__title { grid-area: title; font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; color: var(--color-ink-40); transition: color 0.4s var(--ease), transform 0.5s var(--ease-out-expo); }
.lives__desc { grid-area: desc; max-height: 0; overflow: hidden; opacity: 0; color: var(--color-ink-70); transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease), margin 0.5s var(--ease); }
.lives__go { grid-area: go; align-self: center; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-12px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out-expo); }
.lives__row.is-on .lives__title { color: var(--color-ink); transform: translateX(6px); }
.lives__row.is-on .lives__desc { max-height: 4.5rem; opacity: 1; margin-top: 0.35rem; }
.lives__row.is-on .lives__go { opacity: 1; transform: none; }
.lives__row:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 900px) {
  .lives { grid-template-columns: 1fr; }
  .lives__media { display: none; }
  .lives__row { grid-template-columns: 72px 1fr auto; grid-template-areas: 'thumb where go' 'thumb title go' 'thumb desc go'; column-gap: 1rem; }
  .lives__thumb { display: block; grid-area: thumb; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; align-self: center; }
  .lives__title { color: var(--color-ink); font-size: 1.6rem; }
  .lives__desc { max-height: none; opacity: 1; font-size: 0.92rem; }
  .lives__go { opacity: 1; transform: none; width: 22px; }
  .lives__row.is-on .lives__title { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .lives__media img, .lives__title, .lives__desc, .lives__go { transition: none; } }

/* How it works as a trail (wide screens, home.js): the line, a numbered
   pin over each step and a walker that lights the steps as it passes */
.path__trail { display: none; }
@media (min-width: 861px) {
  .path--tabbed .path__trail { display: block; position: relative; height: 90px; margin: 0 0 1.2rem; }
  .path__trail svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .path__trail path { fill: none; stroke: var(--path); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.6; }
  .path__pin {
    position: absolute; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--color-cream); border: 2px solid var(--path); color: var(--path); font: 500 1.2rem/1 var(--font-display);
    transform: scale(0.85); transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.5s var(--ease-out-expo);
  }
  .path__pin.is-lit { background: var(--path); color: #fff; transform: scale(1); }
  .path__walker { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--path); box-shadow: 0 0 0 6px color-mix(in srgb, var(--path) 22%, transparent); z-index: 2; transition: opacity 0.5s var(--ease); }
  .path__walker.is-done { opacity: 0; }
  .path--tabbed .path__steps::before, .path--tabbed .path__step::before { display: none; }
  .path--tabbed .path__panel.is-current .path__step { animation: none; opacity: 0.4; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out-expo); transform: translateY(8px); }
  .path--tabbed .path__panel.is-current .path__step.is-lit { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .path--tabbed .path__panel.is-current .path__step { opacity: 1; transform: none; } }

/* ------------------------------------------------------------
   BOOKEND — the last section echoes the hero: the mountain photo
   with the Gulf washing in from the right along the same foam line.
   home.js moves the line (--bx) from right to left as the section
   scrolls through the screen. Text sits on a dark scrim.
   ------------------------------------------------------------ */
@property --bx { syntax: '<length>'; inherits: true; initial-value: 100vw; }
.bookend { position: relative; isolation: isolate; overflow: hidden; background: var(--color-brand-deep); color: #fff; padding-block: clamp(6rem, 14vw, 10rem) clamp(7rem, 14vw, 11rem); --bx: 100vw; --by: 0px; transition: --bx 2.2s var(--ease); }
/* The stamp changes the view (home.js POSTCARD): the Coast stamp brings the Gulf
   in across the whole scene along the foam line; Mountains takes it back out */
.bookend.is-coast { --bx: -120px; }
.bookend.is-coast .bookend__scene::after { background: linear-gradient(90deg, rgba(8, 30, 44, 0.8) 0%, rgba(8, 30, 44, 0.48) 55%, rgba(8, 30, 44, 0.22) 100%); }
.bookend__scene::after { transition: background 1.2s var(--ease); }
.bookend__scene { position: absolute; inset: 0; z-index: -1; }
.bookend__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bookend__sea {
  position: absolute; inset: 0;
  /* the solid part of the mask runs past the right edge, so with the foam line off the
     left edge (is-coast, --bx -120px) the Gulf still covers the whole scene */
  -webkit-mask: var(--wave-fill) calc(var(--bx) - 79px) var(--by) / 80px 260px repeat-y, linear-gradient(#000, #000) var(--bx) 0 / calc(100% + 240px) 100% no-repeat;
          mask: var(--wave-fill) calc(var(--bx) - 79px) var(--by) / 80px 260px repeat-y, linear-gradient(#000, #000) var(--bx) 0 / calc(100% + 240px) 100% no-repeat;
}
.bookend__foam { position: absolute; top: 0; bottom: 0; left: 0; width: 80px; translate: calc(var(--bx) - 79px) 0; background: var(--wave-line) 0 var(--by) / 80px 260px repeat-y; opacity: 0.85; filter: drop-shadow(0 0 5px rgba(255,255,255,0.8)); pointer-events: none; }
.bookend__scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,26,26,0.82) 0%, rgba(12,26,26,0.55) 55%, rgba(12,26,26,0.35) 100%); }
.bookend .contact-banner__title, .bookend .contact-banner__line, .bookend .contact-banner__line a { color: #fff; }
.bookend .contact-banner__text { color: rgba(255,255,255,0.88); }
.bookend .contact-banner__line span { color: rgba(255,255,255,0.7); }
.bookend .contact-banner__title { font-size: clamp(2.6rem, 5vw, 4.2rem); text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.bookend .btn--earth { background: var(--color-warm-white); color: var(--color-ink); }
.bookend .btn--earth:hover { background: var(--color-warm-white); }
.bookend + .footer { margin-top: -46px; }
@media (prefers-reduced-motion: reduce) { .bookend { --bx: 55vw; } }

/* Amanda and her brokerage as one lockup under the mark */
.hero__eyebrow--lockup { display: flex; align-items: center; justify-content: center; gap: 1rem; width: fit-content; margin-inline: auto; }
.hero__rule { width: 1px; height: 28px; background: rgba(255,255,255,0.55); }
.hero__eyebrow--lockup .brokerage__mask { filter: drop-shadow(0 1px 8px rgba(0,0,0,0.45)); }
.hero__eyebrow--lockup > span:first-child { white-space: nowrap; }
@media (max-width: 760px) { .hero__eyebrow--lockup { font-size: 1.05rem; gap: 0.75rem; } .hero__eyebrow--lockup .brokerage__mask { height: 26px; } .hero__rule { height: 24px; } }


/* ------------------------------------------------------------
   POSTCARD — the homepage ends with a postcard to Amanda. The
   back is the form (note, stamp, from, reply to); on send it
   turns over to a "Greetings from" front with the chosen place
   showing through the letters (home.js POSTCARD).
   ------------------------------------------------------------ */
.bookend .contact-banner__inner { grid-template-columns: 0.9fr 1.25fr; }
.postcard-wrap { perspective: 1600px; }
.postcard { position: relative; color: var(--color-ink); }
.postcard__flip { position: relative; display: grid; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.3,.7,.2,1); transform: rotate(-1.6deg); }
.postcard.is-sent .postcard__flip { transform: rotate(1.2deg) rotateY(180deg); }
.postcard__back, .postcard__front { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; box-shadow: 0 40px 70px -30px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.2); }
.postcard__back {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; padding: 1.6rem 1.7rem 1.5rem;
  background: #f7f1e3 linear-gradient(180deg, rgba(255,255,255,0.4), rgba(0,0,0,0.02));
}
.postcard__write { padding-right: 1.5rem; border-right: 1px solid rgba(60,50,30,0.25); display: flex; flex-direction: column; }
.postcard__dear, .postcard__sign { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--color-ink); }
.postcard__sign { font-size: 1.15rem; margin-top: 0.4rem; color: var(--color-ink-70); }
.postcard__write textarea {
  flex: 1; min-height: 9.5rem; resize: none; border: 0; padding: 0.2rem 0; margin-top: 0.3rem;
  font-family: var(--font-display); font-size: 1.22rem; line-height: 2rem; color: #2c3a4a;
  background: transparent linear-gradient(transparent calc(2rem - 1px), rgba(60,50,30,0.22) calc(2rem - 1px)) 0 0 / 100% 2rem;
}
.postcard__write textarea:focus { outline: none; }
.postcard__write:focus-within { outline: 2px solid var(--color-brand); outline-offset: 6px; border-radius: 2px; }
.postcard__side { padding-left: 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.postcard__stamps { border: 0; margin: 0 0 0.3rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }
.postcard__legend { font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--color-ink-70); text-align: right; width: 100%; padding-bottom: 0.3rem; }
.stamp { cursor: pointer; }
.stamp input { position: absolute; opacity: 0; pointer-events: none; }
.stamp__face {
  position: relative; display: block; width: 72px; height: 88px; background-size: cover; background-position: center;
  border: 4px solid #fff; outline: 1px dashed rgba(60,50,30,0.35); outline-offset: -1px;
  -webkit-mask: radial-gradient(circle at 4px 4px, transparent 2.4px, #000 2.9px) -4px -4px / 8px 8px, linear-gradient(#000, #000) center / calc(100% - 8px) calc(100% - 8px) no-repeat;
          mask: radial-gradient(circle at 4px 4px, transparent 2.4px, #000 2.9px) -4px -4px / 8px 8px, linear-gradient(#000, #000) center / calc(100% - 8px) calc(100% - 8px) no-repeat;
  filter: grayscale(0.85) opacity(0.6); transform: rotate(3deg); transition: filter 0.3s var(--ease), transform 0.4s var(--ease-out-expo);
}
.stamp:nth-child(3) .stamp__face { transform: rotate(-4deg); }
.stamp__face i { position: absolute; left: 0; right: 0; bottom: 3px; font-style: normal; font-size: 0.6rem; letter-spacing: 0.05em; text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.stamp input:checked + .stamp__face { filter: none; transform: rotate(0) scale(1.06); }
.stamp input:focus-visible + .stamp__face { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.postcard__to { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.35; padding: 0.4rem 0 0.55rem; border-bottom: 1px solid rgba(60,50,30,0.22); }
.postcard__to span, .postcard__line span { display: block; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--color-ink-70); }
.postcard__line { display: block; border-bottom: 1px solid rgba(60,50,30,0.22); padding-bottom: 0.2rem; }
.postcard__line input { width: 100%; border: 0; background: transparent; font-family: var(--font-display); font-size: 1.15rem; padding: 0.1rem 0; color: #2c3a4a; }
.postcard__line input:focus { outline: none; }
.postcard__line:focus-within { border-color: var(--color-brand); }
.postcard__line input[aria-invalid="true"] { box-shadow: 0 2px 0 #b2492e; }
.postcard__error { font-size: 0.8rem; color: #9b3b22; }
.postcard__send { margin-top: 0.4rem; align-self: flex-start; }
.postcard__front {
  transform: rotateY(180deg); display: grid; place-items: center; overflow: hidden;
  background: #17363b repeating-conic-gradient(from 0deg at 50% 120%, rgba(255,226,170,0.05) 0 6deg, transparent 6deg 12deg); padding: 1.2rem; border: 10px solid #f7f1e3;
}
.postcard__front::before { content: ''; position: absolute; inset: 0; background: var(--pc-img, url('../images/w/ga-ridges-lake-aerial-960.webp')) center / cover; opacity: 0.45; mix-blend-mode: luminosity; }
.postcard__greet { position: relative; text-align: center; line-height: 0.9; }
.postcard__greet span { display: block; font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 2.2vw, 2rem); color: #f7e6c4; margin-bottom: 0.4rem; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.postcard__greet b {
  display: block; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(3rem, 6.4vw, 5.6rem); line-height: 0.92;
  background: var(--pc-img, url('../images/w/ga-ridges-lake-aerial-960.webp')) center / cover; -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px #f7e6c4; filter: drop-shadow(4px 5px 0 #b5552f) drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}
.postcard__done { margin-top: 1.4rem; font-size: 1.02rem; color: rgba(255,255,255,0.92); }
.postcard__done:focus { outline: none; }
.postcard__rather { margin-top: 1.4rem; font-size: 0.92rem; color: rgba(255,255,255,0.78); }
.postcard__rather a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.45); }
@media (max-width: 1100px) { .bookend .contact-banner__inner { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .postcard__back { grid-template-columns: 1fr; padding: 1.3rem 1.2rem; }
  .postcard__write { padding: 0 0 1rem; border-right: 0; border-bottom: 1px solid rgba(60,50,30,0.25); }
  .postcard__side { padding: 1rem 0 0; }
  .postcard__stamps { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .postcard__flip { transition: none; } }

/* ------------------------------------------------------------
   SATURDAY — the same Saturday in both places, hour by hour.
   The strip at the top stays put while the hours scroll under
   it; its sky runs from dawn to night and the sun crosses it
   (home.js sets --p, the sky colours and the lit hour).
   ------------------------------------------------------------ */
.saturday { position: relative; background: var(--color-warm-white, #faf8f3); padding-bottom: clamp(4rem, 8vw, 7rem); --p: 0; --sky1: #f1c7a3; --sky2: #f7e6d2; }
.saturday__top { position: sticky; top: var(--nav-now); z-index: 2; color: var(--color-ink); transition: color 0.6s var(--ease); }
.saturday.is-dusk .saturday__top { color: #fff; }
.saturday__sky { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--sky1), var(--sky2)); }
.saturday__sun {
  position: absolute; width: 74px; height: 74px; border-radius: 50%; left: calc(30% + var(--p) * 42%); top: calc(85% - sin(var(--p) * 180deg) * 62%);
  translate: -50% -50%; background: radial-gradient(circle, #fff6d8 0 38%, #ffd88a 52%, rgba(255,200,120,0) 72%);
}
.saturday.is-night .saturday__sun { background: radial-gradient(circle, #f4f1e6 0 30%, rgba(240,236,220,0.35) 46%, rgba(240,236,220,0) 66%); }
.saturday__ridge {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 46px; background: var(--color-warm-white, #faf8f3);
  -webkit-mask: var(--ridge-mask, linear-gradient(#000,#000)) bottom / 100% 100% no-repeat; clip-path: polygon(0 70%, 9% 38%, 17% 58%, 27% 20%, 36% 52%, 44% 40%, 50% 62%, 56% 64%, 62% 58%, 68% 66%, 74% 60%, 80% 68%, 86% 62%, 93% 70%, 100% 64%, 100% 100%, 0 100%);
}
.saturday__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: clamp(2.6rem, 5vw, 4.2rem); }
.saturday__head h2 { margin: 0; color: inherit; }
.saturday__clock { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-variant-numeric: tabular-nums; line-height: 1; }
.saturday__cols, .saturday__hour { display: grid; grid-template-columns: 7rem 1fr 1fr; gap: clamp(1rem, 3vw, 3rem); }
.saturday__cols { position: relative; padding: 1.1rem 0 1.6rem; font-size: 0.85rem; font-weight: 500; }
.saturday__hours { list-style: none; margin: 0; padding: 0; }
.saturday__hour { padding: clamp(1.6rem, 4vh, 2.6rem) 0; border-top: 1px solid var(--color-line, rgba(0,0,0,0.1)); }
/* hours not yet lit step back in colour (still readable), not in opacity */
.saturday__hour :is(.saturday__time, .saturday__line) { transition: color 0.5s var(--ease); }
.saturday__hour:not(.is-on) :is(.saturday__time, .saturday__time span, .saturday__line) { color: var(--color-ink-70); }
.saturday__hour:not(.is-on) .saturday__pic { filter: grayscale(1) opacity(0.55); }
.saturday__pic { transition: transform 0.7s var(--ease-out-expo), filter 0.5s var(--ease); }
.saturday__time { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; }
.saturday__time span { font-size: 0.95rem; margin-left: 0.25rem; color: var(--color-ink-70); }
.saturday__line { display: flex; gap: 1rem; align-items: center; font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; color: var(--color-ink); }
.saturday__pic { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; transform: scale(0.8); transition: transform 0.7s var(--ease-out-expo), filter 0.5s var(--ease); }
.saturday__hour.is-on .saturday__pic { transform: none; }
.saturday__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1rem; margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--color-line, rgba(0,0,0,0.1)); }
.saturday__ask p { font-family: var(--font-display); font-size: 1.6rem; margin-right: auto; }
.saturday__ask .btn--outline-light { background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); }
@media (max-width: 760px) {
  .saturday__cols { display: none; }
  .saturday__hour { grid-template-columns: 1fr; gap: 0.8rem; }
  .saturday__line { font-size: 1.2rem; }
  .saturday__line { flex-wrap: wrap; }
  .saturday__line--ga::before, .saturday__line--al::before { flex-basis: 100%; font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: var(--color-ink-70); margin-bottom: -0.5rem; }
  .saturday__line--ga::before { content: 'In the mountains'; }
  .saturday__line--al::before { content: 'On the coast'; }
  .saturday__head { padding-bottom: 2.4rem; }
  .saturday__head h2 { font-size: 1.9rem; }
  .saturday__clock { font-size: 1.9rem; white-space: nowrap; }
  .saturday__ridge { height: 26px; }
  .saturday__sun { width: 54px; height: 54px; left: calc(46% + var(--p) * 10%); top: calc(60% - sin(var(--p) * 180deg) * 40%); }
  .saturday__pic { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) { .saturday__pic { transform: none; } }

/* The road between the two markets, drawn by the same scroll (--p) */
.road { position: absolute; z-index: 0; left: clamp(1.5rem, 5vw, 5rem); bottom: clamp(5rem, 11vh, 7rem); width: clamp(200px, 21vw, 320px); height: auto; overflow: visible; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); }
.road__state { fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.45); stroke-width: 2; vector-effect: non-scaling-stroke; }
.road__route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.road__route--ghost { stroke: rgba(255,255,255,0.35); stroke-width: 3; stroke-dasharray: 2 10; }
.road__route--done { stroke: #ffd9a0; stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.road__way circle { fill: #17363b; stroke: rgba(255,255,255,0.6); stroke-width: 3; transition: fill 0.4s var(--ease), stroke 0.4s var(--ease); }
.road__way text { fill: rgba(255,255,255,0.7); font: 500 34px var(--font-body); paint-order: stroke; stroke: rgba(10,20,20,0.5); stroke-width: 6px; transition: fill 0.4s var(--ease); }
.road__way.is-passed circle { fill: #ffd9a0; stroke: #fff; }
.road__way.is-passed text { fill: #fff; }
.road__car { fill: #fff; stroke: #ffd9a0; stroke-width: 5; }
@media (max-width: 760px) { .road { display: none; } }
@media (prefers-reduced-motion: reduce) { .road__route--done { stroke-dashoffset: 0; } }

/* Region map as a lit relief: land shaded from forest to the sandy coast,
   hillshade and ridgelines over the North Georgia mountains, moving water
   in the Gulf. The ridges draw themselves when the map comes into view. */
.region-map__state { fill: url(#land); stroke: rgba(241,241,238,0.5); }
.region-map__relief { mix-blend-mode: soft-light; opacity: 0.85; }
.region-map__ridges path { fill: none; stroke: rgba(236,240,226,0.22); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 2.4s var(--ease-out-expo); transition-delay: calc(var(--k) * 60ms); }
.region-map.is-in .region-map__ridges path { stroke-dashoffset: 0; }
.region-map__waves path { fill: none; stroke: rgba(141,190,214,0.35); stroke-width: 1.5; }
@keyframes mapWave { to { transform: translateX(80px); } }
.region-map__state-name { fill: rgba(241,241,238,0.5); }
@media (prefers-reduced-motion: reduce) { .region-map__ridges path { stroke-dashoffset: 0; transition: none; } .region-map__waves path { animation: none; } }

/* Quiz answers as pictures: each choice is a view to pick */
.match__opts:has(.match__opt--pic) { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.match__opt--pic span {
  position: relative; display: flex; align-items: flex-end; min-height: 13rem; padding: 1rem 1.1rem; overflow: hidden; isolation: isolate;
  background: none; border: 2px solid transparent; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15;
  box-shadow: 0 18px 34px -20px rgba(0,0,0,0.6);
}
.match__opt--pic span::before {
  content: ''; position: absolute; inset: 0; z-index: -2; background: var(--pic) center / cover;
  transform: scale(1.04); transition: transform 0.9s var(--ease-out-expo), filter 0.4s var(--ease);
}
/* both: the mountains under, the coast over the right half on a slant */
.match__opt--both span::before { background: linear-gradient(180deg, rgba(10,20,18,0) 35%, rgba(10,20,18,0.78)), var(--pic) center / cover; }
.match__opt--both.match__opt--pic span::after, .match__opt--both.match__opt--pic input:checked + span::after {
  background: linear-gradient(180deg, rgba(10,20,18,0) 35%, rgba(10,20,18,0.78)), var(--pic2) center / cover;
  -webkit-mask: linear-gradient(100deg, transparent 52%, #000 52.3%); mask: linear-gradient(100deg, transparent 52%, #000 52.3%);
  border-left: 0;
}
.match__opt--pic span::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,20,18,0) 30%, rgba(10,20,18,0.88)); }
.match__opt--pic:hover span { background: none; border-color: rgba(255,255,255,0.6); }
.match__opt--pic:hover span::before { transform: scale(1.12); }
.match__opt--pic input:checked + span { background: none; color: #fff; border-color: var(--color-warm-white); }
.match__opt--pic input:checked + span::after { background: linear-gradient(180deg, rgba(10,20,18,0) 25%, rgba(10,20,18,0.85)); }
.match__opt--pic input:checked + span::before { transform: scale(1.12); }
.match__opt--pic input:checked + span { box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 18px 34px -20px rgba(0,0,0,0.6); }
@media (max-width: 760px) { .match__opt--pic span { min-height: 9rem; font-size: 1.15rem; } }
/* (--pic urls are written relative to this stylesheet, where var() resolves them) */
.match__opts:has(.match__opt--pic:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.match__opts:has(.match__opt--pic:nth-child(4)) .match__opt--pic span { min-height: 11rem; font-size: 1.15rem; }
@media (max-width: 760px) { .match__opts:has(.match__opt--pic) { grid-template-columns: 1fr 1fr; } .match__opts:has(.match__opt--pic:nth-child(4)) { grid-template-columns: 1fr 1fr; } }
.match__opt--pic span { text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.5); }


/* Shortcuts under the search sentence: plain links, not pills */
.picks { gap: 0.4rem 1.4rem; }
.picks__chip { padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--color-rule); border-radius: 0; background: none; box-shadow: none; font-size: 0.92rem; }
.picks__chip:hover { border-color: currentColor; background: none; }
.picks__chip::before { display: none; }
.value__then { margin-top: 1.4rem; max-width: 32rem; font-size: 0.98rem; line-height: 1.65; color: var(--color-ink-70); padding-top: 1.2rem; border-top: 1px solid var(--color-rule); }

/* Phones: the hero name line puts the market center logos on their own row,
   the shortcuts wrap, and the carousel's buttons keep their words on one line */
@media (max-width: 760px) {
  .hero__eyebrow--lockup { flex-direction: column; gap: 0.55rem; }
  .hero__eyebrow--lockup .hero__rule { display: none; }
  .picks { flex-wrap: wrap; justify-content: flex-start; padding-inline: var(--gutter); overflow: visible; }
  .picks__label { flex-basis: 100%; }
  .flow__acts .btn { white-space: nowrap; padding-inline: 1rem; flex: 1; text-align: center; }
  .flow__acts { display: flex; gap: 0.5rem; width: 100%; }
  .picks { margin-inline: 0; }
}

/* ------------------------------------------------------------
   FLIGHT — the hero is one drone shot: the Blue Ridge, a cloud
   bank, Orange Beach, and back through the cloud to the ridges,
   so the loop has no seam. The side of the tagline whose place
   is on screen is lit; the other rests (home.js FLIGHT). Phones
   get a portrait cut of the same flight behind the name and the
   search. Under reduced motion or Save-Data the poster stays.
   ------------------------------------------------------------ */
.flight { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #8fa9b8 url('../images/hero-flight-poster.webp') center / cover; }
.flight__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flight__shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14,22,24,0.5) 0%, rgba(14,22,24,0.08) 30%, rgba(14,22,24,0.08) 55%, rgba(14,26,30,0.78) 100%),
    radial-gradient(60% 40% at 50% 26%, rgba(14,22,24,0.32), transparent 70%); }
.doors:has(.flight) .door__bg, .doors:has(.flight) .doors__seam { display: none; }
.doors:has(.flight), .doors:has(.flight):has(.door--ga:hover, .door--ga:focus-within), .doors:has(.flight):has(.door--al:hover, .door--al:focus-within) { grid-template-columns: 1fr 1fr; }
.doors:has(.flight) .door { z-index: 1; }
.doors:has(.flight) .door::before { display: none; }
/* the place on screen keeps its words lit; the other side waits its turn */
.doors:has(.flight) .door > * { transition: opacity 1.1s var(--ease), filter 1.1s var(--ease); }
.doors.on-ga .door--al :is(.door__line, .door__region, .door__towns),
.doors.on-al .door--ga :is(.door__line, .door__region, .door__towns) { opacity: 0.55 !important; }
.doors.on-ga .door--al:is(:hover, :focus-within) :is(.door__line, .door__region, .door__towns),
.doors.on-al .door--ga:is(:hover, :focus-within) :is(.door__line, .door__region, .door__towns) { opacity: 1 !important; }
.flight__toggle {
  position: absolute; z-index: 3; right: clamp(0.9rem, 2vw, 1.6rem); bottom: clamp(0.9rem, 2vw, 1.6rem);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; opacity: 0.35; background: rgba(10,16,16,0.18); cursor: pointer;
  transition: opacity 0.4s var(--ease), background 0.4s var(--ease);
}
.flight__toggle:is(:hover, :focus-visible), .flight__toggle[aria-pressed="true"] { opacity: 0.95; background: rgba(10,16,16,0.4); }
.flight__toggle span { width: 7px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.flight__toggle[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
.flight__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 760px) {
  .flight { background-image: url('../images/hero-flight-poster-portrait.webp'); }
  .doors:has(.flight) { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .doors:has(.flight) .doors__brand { background: none; z-index: 2; }
  .doors:has(.flight) .door { min-height: 0; padding: 1.25rem 1.25rem 0.5rem; justify-content: flex-start; }
  .doors:has(.flight) .door--ga { justify-content: flex-end; }
  .doors:has(.flight) .door--al { padding-top: 0.5rem; }
  .doors:has(.flight) .door__line { font-size: clamp(2.3rem, 11vw, 3.2rem); margin-bottom: 0.6rem; }
  .doors:has(.flight) .door__towns, .doors:has(.flight) .door__region, .doors:has(.flight) .door__live { display: none; }
  .doors:has(.flight) .door--ga .door__actions { margin-bottom: 0.4rem; }
  .doors:has(.flight) .doors__sell { background: none; position: relative; z-index: 2; }
}
/* The film is the motion in the hero; the tagline itself stands still from the
   first paint, so the largest text on the page never waits on a script */
.doors:has(.flight) .door__line { opacity: 1; animation: none; }
.doors:has(.flight) .door__line .w > span { transform: none; animation: none; }

/* ------------------------------------------------------------
   THE JOURNEY — the homepage reads top to bottom the way the
   tagline does: mountain tones under the film and Meet Amanda,
   coastal tones by the valuation and the postcard. --j (home.js)
   is how far down the page the visitor is; the page's ground and
   its links mix from pine and mist to the Gulf and sea glass.
   ------------------------------------------------------------ */
:root { --j: 0; }
body:has(.doors) {
  --journey-ground: color-mix(in oklab, var(--color-mist) calc((1 - var(--j)) * 100%), var(--color-ocean-pale));
  --journey-tone: color-mix(in oklab, var(--color-sage) calc((1 - var(--j)) * 100%), var(--color-ocean));
  background-color: var(--journey-ground);
  background-image: none;
}
body:has(.doors) .text-link, body:has(.doors) .meet__way:hover, body:has(.doors) .lives__row.is-on .lives__title { color: var(--journey-tone); }
body:has(.doors) ::selection { background: var(--journey-tone); color: #fff; }
.meet { background: linear-gradient(180deg, var(--color-sage-pale), transparent 70%); }
.meet__way { border-color: color-mix(in oklab, var(--color-sage-pale), var(--color-sage) 25%); }
.value { background: linear-gradient(180deg, transparent, var(--color-ocean-pale) 40%, var(--color-ocean-pale)); }
.section.bg-cream { background: var(--color-shell); }
@media (prefers-reduced-motion: no-preference) { body:has(.doors) { transition: background-color 0.3s linear; } }

/* ------------------------------------------------------------
   SWAP — selling one place, buying the other (home.js SWAP).
   Two photographs lean past each other; the flip swaps them.
   ------------------------------------------------------------ */
.swap { background: var(--color-shell); position: relative; overflow: hidden; }
.swap__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.swap__title { margin: 0.6rem 0 1.2rem; max-width: 14ch; }
.swap__steps { list-style: none; padding: 0; counter-reset: step; margin: 1.8rem 0 2rem; display: grid; gap: 1.1rem; max-width: 34rem; }
.swap__steps li { counter-increment: step; position: relative; padding-left: 3rem; }
.swap__steps li::before { content: counter(step); position: absolute; left: 0; top: 0.05em; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.15rem; color: #fbfbf9; background: var(--color-brand-ground); } /* the number stays pale on the teal in every sky */
.swap__steps b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--color-ink); line-height: 1.2; margin-bottom: 0.15rem; }
.swap__steps span { font-size: 0.98rem; color: var(--color-ink-70); }
.swap__actions { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.swap__pictures { position: relative; }
/* Trade the view: one frame, two porches. The seam is a range input laid over the
   whole frame (opacity 0), so a drag anywhere moves it and the arrow keys work. */
@property --x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.trade { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--color-sand); isolation: isolate; touch-action: pan-y; }
.trade__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trade__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.trade__cap { position: absolute; bottom: 0.9rem; z-index: 2; padding: 0.4rem 0.85rem; border-radius: 999px; background: rgba(251,251,249,0.92); color: #1e1c18; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 1px 3px rgba(20,24,22,0.18); pointer-events: none; } /* the caption sits on a photograph, so its ink is pinned dark in every sky */
.trade__cap--ga { left: 1rem; }
.trade__cap--al { right: 1rem; }
.trade__seam { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; z-index: 2; background: rgba(251,251,249,0.95); box-shadow: 0 0 0 1px rgba(20,24,22,0.14); pointer-events: none; }
.trade__handle { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--color-warm-white); color: var(--color-brand); box-shadow: var(--shadow-md); display: grid; place-items: center; transition: transform 0.3s var(--ease); }
.trade__handle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trade__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.trade:has(.trade__range:active) .trade__handle, .trade:has(.trade__range:focus-visible) .trade__handle { transform: scale(1.12); }
.trade:has(.trade__range:focus-visible) { outline: 3px solid var(--color-brand); outline-offset: 4px; }
.trade__hint { margin: 0.8rem 0 0; text-align: center; font-size: 0.85rem; color: var(--color-ink-70); transition: opacity var(--transition-fast); }
.trade.is-moved + .trade__hint { opacity: 0.55; }
@media (max-width: 600px) { .trade__cap { font-size: 0.78rem; } .trade__cap--al { bottom: auto; top: 0.9rem; } }
@media (prefers-reduced-motion: no-preference) {
  .trade.is-nudging { animation: tradeNudge 1.8s var(--ease) 1; }
  @keyframes tradeNudge { 0%, 100% { --x: 50%; } 40% { --x: 60%; } 72% { --x: 45%; } }
}
.swap__flip-text { grid-column: 1 / -1; justify-self: end; font-size: 0.9rem; color: var(--color-ink-70); border-bottom: 1px solid var(--color-ink-20); padding: 0 0 2px; margin-top: -1rem; transition: color var(--transition-fast); }
.swap__flip-text:hover { color: var(--color-ink); }
@media (max-width: 900px) {
  .swap__grid { grid-template-columns: 1fr; }
  .swap__pictures { max-width: 34rem; width: 100%; margin: 0 auto; order: -1; }
  .swap__flip-text { justify-self: start; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .swap__pic, .swap__flip { transition: none; } }

/* ------------------------------------------------------------
   PHONE HERO — one clean screen. The name and market centers are
   already in the strip above, so the hero keeps only the line
   "Guiding you home", the search, the two halves of the tagline
   and two buttons side by side. Nothing is cut off.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .doors:has(.flight) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto auto auto auto auto auto;
    grid-template-areas: "brand brand" ". ." "ga ga" "gafrom gafrom" "al al" "alfrom alfrom" "actga actal" "sell sell";
    column-gap: 0.6rem;
    padding: 0 1.25rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    min-height: 100svh;
  }
  .doors:has(.flight) .doors__brand { grid-area: brand; padding-inline: 0; }
  .doors:has(.flight) .hero__eyebrow--lockup { display: none; }
  .doors:has(.flight) .doors__brand .hero__brand { margin-top: 0.4rem; font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .doors:has(.flight) .door { display: contents; }
  .doors:has(.flight) .door__line { margin: 0; padding: 0; max-width: none; font-size: clamp(2rem, 9.4vw, 2.7rem); line-height: 1.02; }
  .doors:has(.flight) .door--ga .door__line { grid-area: ga; }
  .doors:has(.flight) .door--al .door__line { grid-area: al; margin-top: 0.1em; margin-bottom: 1rem; }
  .doors:has(.flight) .door__actions { margin: 0; }
  .doors:has(.flight) .door--ga .door__actions { grid-area: actga; }
  .doors:has(.flight) .door--al .door__actions { grid-area: actal; }
  .doors:has(.flight) .door__actions .btn { width: 100%; padding-inline: 0.5rem; font-size: 0.92rem; white-space: nowrap; text-align: center; }
  .doors:has(.flight) .doors__sell { grid-area: sell; padding: 0.9rem 0 0; white-space: normal; font-size: 0.84rem; left: auto; bottom: auto; }
  .doors:has(.flight) .flight__toggle { bottom: auto; top: calc(var(--nav-now) + 0.6rem); right: 0.8rem; }
  .doors.on-ga .door--al .door__line, .doors.on-al .door--ga .door__line { opacity: 0.6 !important; }
}

/* Your drive on the map (home.js YOUR DRIVE) */
.region-map__road { fill: none; stroke: rgba(255,255,255,0.75); stroke-width: 2; stroke-dasharray: 0.03 0.012; stroke-linecap: round; opacity: 0; transition: opacity 0.4s; }
.region-map__road--ga { stroke: #cfe0c6; } .region-map__road--al { stroke: #b7dbe7; }
.region-map__drive.is-drawn .region-map__road { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .region-map__drive .region-map__road { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .region-map__drive.is-drawn .region-map__road { animation: roadDraw 1.4s var(--ease-out-expo) forwards; }
  .region-map__drive.is-drawn .region-map__road--al { animation-delay: 0.25s; }
}
@keyframes roadDraw { to { stroke-dashoffset: 0; } }
.region-map__you { fill: #f6efdc; stroke: var(--color-ink); stroke-width: 2; }
.region-map__you-label, .region-map__road-label { fill: #fff; font-family: var(--font-body); font-weight: 600; paint-order: stroke; stroke: var(--color-brand-deep); stroke-width: 5px; stroke-linejoin: round; }
.region-map__you-label { font-size: 18px; }
.region-map__road-label { font-size: 15px; text-anchor: middle; opacity: 0; transition: opacity 0.5s 0.9s; }
.region-map__drive.is-drawn .region-map__road-label { opacity: 1; }
.region-map__svg.has-drive .region-map__halo--ga, .region-map__svg.has-drive .region-map__halo--al { opacity: 0.8; }

/* The first screen answers the first question: once the visitor has said where
   they drive from, each half of the tagline says how far that place is */
.door__from { margin: -0.6rem 0 1rem; font-size: 0.95rem; color: rgba(255,255,255,0.92); text-shadow: 0 1px 10px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 0.45rem; }
.door--al .door__from { justify-content: flex-end; }
.door__from::before { content: ''; width: 18px; height: 18px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13 5.5 7h13L21 13v6h-2a2 2 0 0 1-4 0H9a2 2 0 0 1-4 0H3Z'/%3E%3Ccircle cx='7' cy='17' r='1'/%3E%3Ccircle cx='17' cy='17' r='1'/%3E%3C/svg%3E") center / contain no-repeat; }
.door__from--ga span::before { content: 'Blue Ridge, '; }
.door__from--al span::before { content: 'Gulf Shores, '; }
.door__from:has(> [hidden]) { display: none; }
.doors.on-ga .door--al .door__from, .doors.on-al .door--ga .door__from { opacity: 0.55; }
@media (max-width: 760px) {
  .doors:has(.flight) .door__from { margin: 0.15rem 0 0.35rem; font-size: 0.82rem; justify-content: flex-start; position: relative; z-index: 2; }
  .doors:has(.flight) .door--ga .door__from { grid-area: gafrom; }
  .doors:has(.flight) .door--al .door__from { grid-area: alfrom; margin-bottom: 1rem; }
  .doors:has(.flight) .door--al .door__line { margin-bottom: 0; }
  .doors:has(.flight) .door--al .door__from:has(> [hidden]) + .door__region + .door__towns + .door__actions { margin-top: 1rem; }
}

/* The map's "Compare the towns" link stays cream on the dark map (the journey tint colours other links) */
body:has(.doors) .region-map .region-map__all { color: var(--color-warm-white); }

/* Start with the drive: quick cities under the hero search (home.js) */
.hero-from { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 0.5rem; margin: 0.9rem auto 0; max-width: 40rem; pointer-events: auto; font-size: 0.86rem; color: rgba(255,255,255,0.9); text-shadow: 0 1px 10px rgba(0,0,0,0.5); opacity: 0; animation: fadeUp 0.9s var(--ease) 0.4s forwards; }
.hero-from[hidden] { display: none; }
.hero-from__label { margin-right: 0.2rem; }
.hero-from__chip { padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.45); background: rgba(10,16,16,0.25); color: #fff; font: inherit; font-size: 0.84rem; font-weight: 500; backdrop-filter: blur(6px); transition: background var(--transition-fast), border-color var(--transition-fast); }
.hero-from__chip:hover, .hero-from__chip:focus-visible { background: rgba(255,255,255,0.92); color: var(--color-brand); border-color: #fff; }
.hero-from__more .from { font-family: var(--font-body); font-size: 0.84rem; gap: 0.3em; color: rgba(255,255,255,0.9); }
.hero-from__more .from__sel { color: #fff; border-bottom-width: 1px; padding-right: 1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-size: 0.7em; }
@media (max-width: 760px) {
  .doors:has(.flight) .hero-from { margin-top: 0.7rem; gap: 0.3rem 0.35rem; font-size: 0.78rem; }
  .doors:has(.flight) .hero-from__chip { padding: 0.28rem 0.6rem; font-size: 0.78rem; }
  .doors:has(.flight) .hero-from__more { flex-basis: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .hero-from { opacity: 1; animation: none; } }

/* ------------------------------------------------------------
   SAME MONEY, THE OTHER PLACE — pairs from the feed (home.js PAIRS).
   A mountain home on the left, the coastal home closest in price on
   the right, and the gap between them on the seam.
   ------------------------------------------------------------ */
.pairs { background: var(--color-warm-white); position: relative; }
.pairs::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-sage-pale) 0%, transparent 38%, transparent 62%, var(--color-ocean-pale) 100%); opacity: 0.7; pointer-events: none; }
.pairs .container { position: relative; }
.pairs__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.pairs__head .display-md { margin: 0.6rem 0 1rem; }
.pairs__sub { max-width: 40rem; }
.pairs__list { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(0.8rem, 2vw, 1.6rem); }
.pair__home { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 42%; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-warm-white); border: 1px solid var(--color-rule); box-shadow: var(--shadow-sm); color: var(--color-ink); transition: transform var(--transition), box-shadow var(--transition); }
.pair__home:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pair__home--al { grid-template-columns: 42% minmax(0, 1fr); }
.pair__home--al .pair__media { order: -1; }
.pair__media { position: relative; min-height: 190px; background: var(--color-sand); }
.pair__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out-expo); }
.pair__home:hover .pair__media img { transform: scale(1.05); }
.pair__where { position: absolute; left: 0.75rem; top: 0.75rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--color-sage); }
.pair__home--al .pair__where { background: var(--color-ocean); }
.pair__body { padding: 1.2rem 1.3rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.pair__price { font-family: var(--font-display); font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1.05; color: var(--color-ink); }
.pair__what { font-size: 0.95rem; color: var(--color-ink-70); }
.pair__town { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--color-ink); }
.pair__from { font-size: 0.82rem; color: var(--color-earth); min-height: 1.2em; }
.pair__from:empty { display: none; }
.pair__office { margin-top: auto; padding-top: 0.6rem; font-size: 0.72rem; color: var(--color-ink-40); }
.pair__sample { position: absolute; right: 0.75rem; top: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(251,251,249,0.92); color: var(--color-ink-70); font-size: 0.7rem; font-weight: 600; }
.pair__gap { align-self: center; display: grid; justify-items: center; gap: 0.3rem; width: clamp(5.5rem, 9vw, 7.5rem); text-align: center; }
.pair__gap-line { width: 1px; height: clamp(1.2rem, 3vw, 2.2rem); background: var(--color-ink-20); }
.pair__gap-amount { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; color: var(--color-ink); }
.pair__gap-amount small { display: block; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-40); margin-top: 0.3rem; }
.pair__both { font-size: 0.8rem; font-weight: 600; color: var(--color-brand); border: 1px solid var(--color-brand); border-radius: 999px; padding: 0.4rem 0.8rem; white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast); }
.pair__both:hover { background: var(--color-brand); color: var(--color-warm-white); }
.pairs__foot { margin-top: clamp(1.6rem, 3vw, 2.4rem); font-size: 1rem; color: var(--color-ink-70); }
.pairs__foot a { color: var(--color-brand); border-bottom: 1px solid currentColor; }
@media (max-width: 900px) {
  .pair { grid-template-columns: 1fr; gap: 0.6rem; }
  .pair__gap { width: auto; grid-auto-flow: column; align-items: center; gap: 0.9rem; padding: 0.3rem 0; }
  .pair__gap-line { width: 2.2rem; height: 1px; }
  .pair__home, .pair__home--al { grid-template-columns: 40% minmax(0, 1fr); }
  .pair__media { order: -1; min-height: 150px; }
}
@media (max-width: 480px) {
  .pair__home, .pair__home--al { grid-template-columns: 1fr; }
  .pair__media { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .pair__home, .pair__media img { transition: none; } }

/* ------------------------------------------------------------
   THE BUYER'S VIEW (sellers page, home.js SEEN): the owner's home as
   a card the way a buyer from a city sees it, beside what the site
   does for that buyer.
   ------------------------------------------------------------ */
.seen { background: var(--color-warm-white); border-top: 1px solid var(--color-rule); }
.seen__head { max-width: 50rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.seen__head .display-md { margin: 0.6rem 0 1rem; }
.seen__head .display-md span { font-style: italic; color: var(--color-earth); }
.seen__form { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; margin-top: 1.4rem; }
.seen__form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--color-ink-70); }
.seen__form select { min-width: 12rem; padding: 0.65rem 0.8rem; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-warm-white); font: inherit; font-size: 0.95rem; font-weight: 400; color: var(--color-ink); }
.seen__grid { display: grid; grid-template-columns: minmax(18rem, 24rem) 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.seen__card-wrap { position: sticky; top: calc(var(--nav-now) + 1.5rem); }
.seen__card-note { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-40); margin: 0 0 0.7rem; }
.seen__card { box-shadow: var(--shadow-lg); transform: rotate(-1.2deg); }
.seen__card .home-card__media img { transition: opacity 0.5s var(--ease); }
.seen__card .home-card__price, .seen__card .home-card__walk { pointer-events: none; }
.seen__from { margin-top: 0.65rem; }
.seen__from svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.seen__list { list-style: none; margin: 0; padding: 0; counter-reset: seen; display: grid; gap: 1.4rem; }
.seen__list li { counter-increment: seen; position: relative; padding-left: 3.2rem; }
.seen__list li::before { content: counter(seen); position: absolute; left: 0; top: 0.1em; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.25rem; color: var(--color-warm-white); background: var(--color-earth); }
.seen__list b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--color-ink); margin-bottom: 0.3rem; }
.seen__list span { font-size: 1rem; color: var(--color-ink-70); }
.seen__list em { font-style: normal; font-weight: 600; color: var(--color-earth); }
.seen__cta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 860px) {
  .seen__grid { grid-template-columns: 1fr; }
  .seen__card-wrap { position: static; max-width: 24rem; }
}
@media (prefers-reduced-motion: reduce) { .seen__card .home-card__media img { transition: none; } }

/* What's behind each door: how many homes are for sale in that place right now
   and the lowest asking price, from the feed (home.js DOORS) */
.door__live { display: flex; align-items: baseline; gap: 0.45rem; margin: 0 0 0.6rem; font-size: 0.95rem; color: rgba(255,255,255,0.92); text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.door--al .door__live { justify-content: flex-end; }
.door__live b { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; line-height: 1; color: #fff; }
.door__live[hidden] { display: none; }
.doors.on-ga .door--al .door__live, .doors.on-al .door--ga .door__live { opacity: 0.55 !important; }
.doors.on-ga .door--al:is(:hover, :focus-within) .door__live, .doors.on-al .door--ga:is(:hover, :focus-within) .door__live { opacity: 1 !important; }

/* ------------------------------------------------------------
   CHAPTERS — the rail down the left naming the homepage's parts
   (home.js CHAPTERS). Desktop only; it fades in after the film.
   ------------------------------------------------------------ */
.chapters { position: fixed; left: clamp(0.6rem, 1.4vw, 1.4rem); top: 50%; transform: translate(-8px, -50%); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.chapters.is-shown { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.chapters ol { list-style: none; margin: 0; padding: 0.35rem 0.25rem; display: grid; gap: 0.15rem; border-radius: 999px; background: rgba(251,251,249,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); }
.chapters a { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.4rem; color: var(--color-ink-40); text-decoration: none; border-radius: 999px; }
.chapters i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.55; flex: 0 0 auto; transition: transform var(--transition-fast), opacity var(--transition-fast); }
.chapters span { position: absolute; left: 100%; top: 50%; transform: translate(-4px, -50%); margin-left: 0.3rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--color-brand-ground); color: var(--color-mark); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em; opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); white-space: nowrap; }
.chapters a { position: relative; }
.chapters a:hover span, .chapters a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.chapters a.is-now { color: var(--color-brand); }
.chapters a.is-now i { transform: scale(1.6); opacity: 1; }
.chapters a:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
@media (max-width: 1199px), (prefers-reduced-motion: reduce) { .chapters { display: none; } }

/* A Saturday → plan it */
.saturday__plan { flex-basis: 100%; margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--color-ink-70); }
.saturday__plan a { color: var(--color-brand); border-bottom: 1px solid currentColor; }

/* ------------------------------------------------------------
   BOTH PLACES, BY THE NUMBERS (home.js NUMBERS)
   ------------------------------------------------------------ */
.numbers { background: var(--color-warm-white); border-top: 1px solid var(--color-rule); }
.numbers__head { max-width: 46rem; margin-bottom: clamp(1.6rem, 3.5vw, 2.8rem); }
.numbers__head .display-md { margin: 0.6rem 0 0.9rem; }
.numbers__sub { color: var(--color-ink-70); margin: 0; }
.numbers__sample { display: block; margin-top: 0.4rem; color: var(--color-earth); font-size: 0.9rem; }
.numbers__table { display: grid; gap: 0.2rem; }
.numbers__row { display: grid; grid-template-columns: minmax(9rem, 0.9fr) 1fr 1fr; gap: 0.8rem clamp(1rem, 3vw, 2.5rem); align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--color-rule); }
.numbers__row--head { border-bottom: 2px solid var(--color-ink); padding-bottom: 0.6rem; }
.numbers__row--head span { font-family: var(--font-display); font-size: 1.35rem; color: var(--color-ink); }
.numbers__row--head .is-ga { color: var(--color-sage); } .numbers__row--head .is-al { color: var(--color-ocean); }
.numbers__row [role="rowheader"] { font-size: 0.95rem; color: var(--color-ink-70); }
.numbers__row [role="cell"] { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem; }
.numbers__row [role="cell"] i { display: block; height: 10px; border-radius: 10px; background: var(--color-rule); overflow: hidden; position: relative; }
.numbers__row [role="cell"] i::after { content: ''; position: absolute; inset: 0; width: calc(var(--w) * 100%); border-radius: 10px; background: var(--color-sage); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out-expo); }
.numbers__row .is-al i::after { background: var(--color-ocean); }
.numbers.is-in .numbers__row [role="cell"] i::after { transform: scaleX(1); }
.numbers__row [role="cell"] b { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--color-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.numbers__foot { margin-top: 1.4rem; font-size: 0.95rem; color: var(--color-ink-70); }
.numbers__foot a { color: var(--color-brand); border-bottom: 1px solid currentColor; }
@media (max-width: 700px) {
  .numbers__row { grid-template-columns: 1fr 1fr; }
  .numbers__row [role="rowheader"] { grid-column: 1 / -1; padding-bottom: 0.2rem; }
  .numbers__row--head [role="columnheader"]:first-child { display: none; }
  .numbers__row [role="cell"] { grid-template-columns: 1fr; gap: 0.3rem; }
}
@media (prefers-reduced-motion: reduce) { .numbers__row [role="cell"] i::after { transition: none; transform: scaleX(1); } }

.hero-ask__eg { transition: opacity 0.3s var(--ease); }
.hero-ask__eg.is-out { opacity: 0; }

/* Where the homes sit: dots on one price line, a row per place */
.numbers__strip { margin-top: 2.4rem; --dot-ga: var(--color-sage); --dot-al: var(--color-ocean); } /* the dots take the season's ridge colour and the Gulf's */
.strip__title { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--color-ink); margin: 0 0 1rem; }
.strip__row { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: center; }
.strip__row + .strip__row { margin-top: 0.4rem; }
.strip__label { font-size: 0.95rem; color: var(--color-ink); font-weight: 500; line-height: 1.25; }
.strip__label small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--color-ink-40); }
.strip__track { position: relative; height: 54px; border-bottom: 1px solid var(--color-rule); }
.strip__dot { position: absolute; bottom: 4px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; transform: translateY(calc(var(--lift, 0) * -24px)); transition: transform var(--transition-fast); }
.strip__dot::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--dot-ga); box-shadow: 0 0 0 2px var(--color-warm-white); transition: box-shadow var(--transition-fast); }
.is-al .strip__dot::before { background: var(--dot-al); }
.strip__dot:hover, .strip__dot:focus-visible { transform: translateY(calc(var(--lift, 0) * -24px)) scale(1.3); z-index: 2; }
.strip__dot:hover::before, .strip__dot:focus-visible::before { box-shadow: 0 0 0 2px var(--color-warm-white), 0 0 0 4px var(--color-ink-20); }
.strip__median { position: absolute; top: 0; bottom: 0; width: 0; }
.strip__median i { position: absolute; top: 8px; bottom: 0; left: -1px; width: 2px; background: var(--color-ink-20); }
.strip__median b { position: absolute; top: -6px; left: 14px; font-size: 0.72rem; font-weight: 500; color: var(--color-ink-40); white-space: nowrap; }
.strip__axis { position: relative; height: 1.4rem; }
.strip__axis span { position: absolute; top: 0.25rem; transform: translateX(-50%); font-size: 0.78rem; color: var(--color-ink-40); font-variant-numeric: tabular-nums; }
.strip__tip { margin: 0.6rem 0 0 9rem; min-height: 1.4rem; font-size: 0.92rem; color: var(--color-ink-70); }
.strip__tip[hidden] { display: block; visibility: hidden; }
@media (max-width: 700px) {
  .strip__row { grid-template-columns: 1fr; gap: 0.2rem; }
  .strip__row--axis > span:first-child { display: none; }
  .strip__tip { margin-left: 0; }
}

/* Say it: the mic in the ask bar */
.hero-ask__wrap { position: relative; display: inline-block; margin: 1.4rem auto 0; pointer-events: auto; }
.hero-ask__wrap .hero-ask { margin: 0; }
.hero-ask__wrap.has-mic .hero-ask { padding-right: 3.4rem; }
.hero-ask__wrap.has-mic .hero-ask kbd { display: none; }
.hero-ask__mic { position: absolute; right: 0.5rem; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: var(--color-brand-ground); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px -8px rgba(0,0,0,0.5); transition: transform var(--transition-fast), background var(--transition-fast); }
.hero-ask__mic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-ask__mic:hover { transform: scale(1.06); }
.hero-ask__mic.is-listening { background: var(--color-earth); animation: micPulse 1.1s ease-in-out infinite; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(122,92,58,0.45); } 50% { box-shadow: 0 0 0 10px rgba(122,92,58,0); } }
@media (prefers-reduced-motion: reduce) { .hero-ask__mic.is-listening { animation: none; } }

/* Sellers hero: the typed address points to the buyer's view below */
.showcase__ask-see { display: table; margin: 0.7rem 0 1rem; font-size: 0.92rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); }
.showcase__ask-see:hover { border-color: #fff; }

.door__new { color: inherit; border-bottom: 1px solid rgba(255,255,255,0.5); }
.door__new:hover { border-color: #fff; }

/* ------------------------------------------------------------
   THE HERO KEEPS THE HOUR (round three). The film was shot by
   day; the sky over it (main.css SKY) lays a first-light blush, a
   golden-hour warmth, a dusk violet or a night blue over it, the
   stars come out above the ridge after dark, and the brand line
   glows like a porch light.
   ------------------------------------------------------------ */
.flight__sky, .flight__stars { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
:root[data-sky="dawn"] .flight__sky { opacity: 1; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(255, 196, 160, 0.55), rgba(255, 220, 200, 0.15) 55%, transparent); }
:root[data-sky="golden"] .flight__sky { opacity: 1; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(255, 176, 90, 0.6), rgba(255, 150, 70, 0.3) 50%, rgba(140, 70, 20, 0.35)); }
:root[data-sky="dusk"] .flight__sky { opacity: 1; mix-blend-mode: multiply; background: linear-gradient(180deg, rgba(60, 56, 110, 0.5), rgba(30, 36, 70, 0.52)); }
:root[data-sky="night"] .flight__sky { opacity: 1; mix-blend-mode: multiply; background: linear-gradient(180deg, rgba(12, 24, 48, 0.62), rgba(10, 26, 38, 0.56)); }
.flight__stars { background-image: radial-gradient(1.5px 1.5px at 42% 11%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 51% 43%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 7% 6%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 69% 8%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 47% 39%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 8% 34%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 28% 4%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 12% 29%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 54% 6%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 31% 7%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 71% 29%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 8% 38%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 16% 16%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 81% 42%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 75% 5%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 74% 39%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 51% 5%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 29% 4%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 72% 10%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 38% 28%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 19% 36%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 16% 38%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 40% 37%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 88% 13%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 14% 39%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 74% 42%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 25% 25%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 13% 37%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 92% 6%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 73% 5%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 80% 15%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 64% 36%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 55% 22%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 60% 39%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 59% 25%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 39% 17%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 24% 17%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 11% 38%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 39% 35%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 64% 23%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 94% 30%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 37% 40%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 10% 9%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 66% 28%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 22% 23%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 20% 33%, rgba(255,255,255,0.7) 50%, transparent 52%); }
:root[data-sky="night"] .flight__stars { opacity: 1; animation: starsBreathe 6s ease-in-out infinite alternate; }
:root[data-sky="dusk"] .flight__stars { opacity: 0.4; }
@keyframes starsBreathe { from { opacity: 0.75; } to { opacity: 1; } }
:root[data-sky="night"] .hero__brand, :root[data-sky="dusk"] .hero__brand { text-shadow: 0 0 34px rgba(255, 222, 170, 0.5), 0 0 90px rgba(255, 200, 120, 0.25), 0 2px 10px rgba(0, 0, 0, 0.5); }
:root[data-sky="golden"] .hero__brand { text-shadow: 0 0 30px rgba(255, 190, 110, 0.45), 0 2px 10px rgba(0, 0, 0, 0.4); }
@media (prefers-reduced-motion: reduce) { :root[data-sky="night"] .flight__stars { animation: none; } }

/* At night the towns on the map are lit windows: the pins glow warm, the
   ridges take moonlight. (round three) */
:root[data-sky="night"] .region-map__pin, :root[data-sky="dusk"] .region-map__pin { fill: #ffd98a; stroke: #fff2cc; filter: drop-shadow(0 0 5px rgba(255, 214, 130, 0.95)) drop-shadow(0 0 14px rgba(255, 190, 90, 0.6)); animation: porchLight 4s ease-in-out infinite alternate; }
:root[data-sky="night"] .region-map__pin:nth-of-type(2n), :root[data-sky="dusk"] .region-map__pin:nth-of-type(2n) { animation-delay: -1.7s; }
:root[data-sky="night"] .region-map__pin:nth-of-type(3n), :root[data-sky="dusk"] .region-map__pin:nth-of-type(3n) { animation-delay: -2.9s; }
:root[data-sky="night"] .region-map__ridges path { stroke: rgba(220, 230, 240, 0.32); }
@keyframes porchLight { from { opacity: 0.8; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .region-map__pin { animation: none !important; } }

/* Night details (main.js): the moon in its phase over the ridge, and the
   fireflies on summer nights */
.flight__moon { position: absolute; right: 9%; top: 14%; width: 64px; height: 64px; opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none; filter: drop-shadow(0 0 14px rgba(240, 236, 220, 0.7)) drop-shadow(0 0 40px rgba(240, 236, 220, 0.35)); }
.flight__moon svg { width: 100%; height: 100%; display: block; }
:root[data-sky="night"] .flight__moon { opacity: 1; }
:root[data-sky="dusk"] .flight__moon { opacity: 0.8; }
.flight__fireflies { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2s var(--ease); }
.flight__fireflies i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #f3f08a; box-shadow: 0 0 6px 2px rgba(243, 240, 138, 0.8), 0 0 14px 5px rgba(243, 240, 138, 0.35); animation: firefly 7s ease-in-out infinite; animation-delay: calc(var(--i) * -0.9s); }
:root[data-season="summer"][data-sky="night"] .flight__fireflies, :root[data-season="summer"][data-sky="dusk"] .flight__fireflies { opacity: 1; }
@keyframes firefly { 0%, 100% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 30% { opacity: 0.2; transform: translate(14px, -18px); } 50% { opacity: 1; transform: translate(-10px, -34px); } 70% { opacity: 0; transform: translate(18px, -52px); } }
@media (max-width: 760px) { .flight__moon { width: 44px; height: 44px; right: 7%; top: 11%; } }
@media (prefers-reduced-motion: reduce) { .flight__fireflies i { animation: none; opacity: 0.8; } }

/* what the light is doing in each place, under the door's name (listings.js From.paintClocks) */
.door__light { font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); margin: -0.3rem 0 0.6rem; font-variant-numeric: tabular-nums; min-height: 1.5em; }
@media (max-width: 760px) { .door__light { min-height: 3em; } }
.door__light[hidden] { display: block; visibility: hidden; } /* keeps its room before it is filled, so nothing below moves */