:root {
  --primary: #0d1b3e;
  --primary-focus: #cac6c1;
  --ink: #1d1d1f;
  --ink-muted-80: #333333;
  --ink-muted-48: #7a7a7a;
  --canvas: #ffffff;
  --canvas-parchment: #f5f5f7;
  --surface-pearl: #fafafc;
  --surface-grey: #eef0f2;
  --hairline: #e0e0e0;
  --divider-soft: #f0f0f0;

  --champagne: #b9986a;
  --champagne-soft: #f1e6d3;
  --sky: #3d6a99;
  --sky-soft: #dce8f5;

  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

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

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-huge: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Belt-and-suspenders against sideways scroll on mobile: nothing on this
   page is meant to be wider than the viewport, so clip anything that
   miscalculates (a long unbroken headline word, a carousel edge case, etc.)
   at the document edge instead of letting it drag the whole page sideways.
   Inner horizontal scrollers (the packages carousel) use their own
   overflow-x: auto and are unaffected by this. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Scroll reveal — sections fade + scale up into place as they enter the
   viewport, like they're stacked behind the section above and expand
   forward into it, then reverse the same way scrolling back past them. */
[data-reveal] {
  opacity: 0; transform: scale(0.9);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .9, .32, 1);
}
[data-reveal].is-visible { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.display-1 { font-weight: 700; font-size: clamp(32px, 5vw + 1rem, 50px); line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.title-2 { font-weight: 700; font-size: clamp(26px, 3vw + 1rem, 40px); line-height: 1.15; margin: 0; text-wrap: balance; }
.title-3 { font-weight: 700; font-size: 28px; line-height: 34px; margin: 0; }
.headline { font-weight: 600; font-size: 20px; line-height: 26px; margin: 0; }
.body-copy { font-weight: 400; font-size: 17px; line-height: 24px; margin: 0; }
.callout { font-weight: 400; font-size: 15px; line-height: 20px; margin: 0; color: var(--ink-muted-80); }
.caption { font-weight: 400; font-size: 13px; line-height: 18px; margin: 0; color: var(--ink-muted-48); }

.btn-primary, .btn-outline, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-family: var(--font-sans); font-weight: 600; font-size: 17px; line-height: 24px;
  padding: var(--space-md) var(--space-xl); border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; transition: opacity .15s ease, background-color .15s ease;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { opacity: .9; }
.btn-outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--canvas-parchment); }
.btn-ghost { background: var(--canvas-parchment); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-grey); }

.card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-xl); }
.card--highlighted { border: 2px solid var(--track-accent, var(--primary-focus)); }

.chip { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-base); border-radius: var(--radius-pill); font-weight: 600; font-size: 13px; line-height: 18px; background: var(--canvas-parchment); color: var(--ink-muted-80); }
.chip--accent { background: var(--track-accent-soft, var(--canvas-parchment)); color: var(--track-accent, var(--ink-muted-80)); }

.section { padding: var(--space-huge) var(--space-xl); }
.section-inner { max-width: 1040px; margin: 0 auto; }
.section--parchment { background: var(--canvas-parchment); }
.section--pearl { background: var(--surface-pearl); }
.section--grey { background: var(--surface-grey); }

@media (max-width: 640px) {
  .section { padding: var(--space-xxl) var(--space-base); }
}

/* Ambient section motion lives at the end of this file (search "Ambient
   section motion") so its background-image rules reliably win over any
   earlier background shorthand, regardless of where those are declared. */

/* Nav */
.track-nav, .gateway-nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.track-nav__inner, .gateway-nav__inner {
  max-width: 1040px; margin: 0 auto; padding: var(--space-base) var(--space-xl);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
}
.track-nav__links { display: flex; gap: var(--space-xl); }
.track-nav__links a { color: var(--ink-muted-80); }
.track-nav__links a:hover { color: var(--ink); }
.track-nav__cross-link {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-base); border-radius: var(--radius-pill);
  background: var(--canvas-parchment); font-size: 13px; font-weight: 600; color: var(--ink-muted-80); overflow: hidden;
}
.track-nav__cross-link-text { max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden; transition: max-width .25s ease, opacity .2s ease; }
.track-nav__cross-link:hover .track-nav__cross-link-text, .track-nav__cross-link:focus-visible .track-nav__cross-link-text { max-width: 240px; opacity: 1; }
.track-nav__cross-link:hover, .track-nav__cross-link:focus-visible { color: var(--primary); background: var(--surface-pearl); }

.track-nav__cta {
  display: inline-flex; align-items: center; flex: none;
  padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill);
  background: var(--track-accent, var(--primary)); color: #fff;
  font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap;
  transition: opacity .15s ease;
}
.track-nav__cta:hover, .track-nav__cta:focus-visible { opacity: .88; }

@media (max-width: 640px) {
  .track-nav__links {
    min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .track-nav__links::-webkit-scrollbar { display: none; }
  .track-nav__links a { flex: none; }
  .track-nav__cta { padding: var(--space-sm) var(--space-base); font-size: 13px; }
  /* The realtor/business nav is crowded (5 links + cross-link + CTA + search) —
     give the link strip its own full-width row instead of squeezing it into
     whatever's left, which was truncating words like "Pricing". The gateway
     nav (just "About") is simple enough to size naturally, so this is scoped
     to .track-nav specifically and left alone on .gateway-nav. */
  .track-nav .track-nav__links { flex: 1 1 100%; max-width: 100%; gap: var(--space-lg); }
}

/* Wordmark — JD Casey's hand-drawn monogram */
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); }
.wordmark__mark, .wordmark svg { display: block; width: 32px; height: 32px; flex: none; object-fit: contain; }
.wordmark--lg .wordmark__mark, .wordmark--lg svg { width: 96px; height: 96px; }
.wordmark--md .wordmark__mark, .wordmark--md svg { width: 56px; height: 56px; }
.wordmark__text { font-weight: 700; font-size: 17px; letter-spacing: .02em; color: var(--ink); }
.wordmark--on-dark .wordmark__text { color: #fff; }
.wordmark--lg .wordmark__text { font-size: 26px; }

/* The mark's ink is mid-tone — give it a light disc on dark backgrounds
   (the footer) so it doesn't wash out, same job the old white circle did. */
.footer .wordmark__mark {
  background: rgba(255, 255, 255, .92); border-radius: 50%;
  padding: 5px; box-sizing: border-box;
}

/* AI FOR YOU hero mark */
.ai-for-you-wrap { width: 100%; max-width: 880px; margin: 0 auto; will-change: transform; }
.ai-for-you-wrap svg { width: 100%; height: auto; display: block; }

/* Magnetic cursor pull — JS sets the transform on mousemove; this transition
   only governs the snap-back when the pointer leaves the hero. */
.ai-for-you-wrap.is-magnetic-reset { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  .ai-for-you-wrap { transform: none !important; transition: none !important; }
}
.gateway-hero__lede { max-width: 540px; margin: var(--space-lg) auto 0; color: var(--ink-muted-80); }
.gateway-hero__byline { margin-top: var(--space-xs); }

/* Hero */
.hero { padding: var(--space-huge) var(--space-xl); text-align: center; background-color: var(--track-accent-soft); }
/* [data-hero-shrink] (below) makes .hero itself a flex row so it can center
   its one child vertically and horizontally. That leaves .hero__inner sized
   by shrink-to-fit unless told otherwise — and an unbreakable word like
   "REALTOR" or "BUSINESS" in .hero-mark__word has a min-content width the
   item won't shrink below by default, so without an explicit width/min-width
   here it was ballooning past the screen edge on narrow phones and dragging
   the whole page into horizontal scroll. width:100% + min-width:0 make it
   fill the row and actually shrink to it, so the word wraps/breaks instead. */
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); width: 100%; min-width: 0; }
.hero__title { max-width: 720px; }
.hero__subtitle { max-width: 560px; color: var(--ink-muted-80); }

/* Hero shrink — fills the screen on first load, shrinks back to its normal
   size as you scroll past it. --p (0 to 1) is set from scroll position in
   script.js; everything here is a pure function of it. */
[data-hero-shrink] {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh * (1 - var(--p, 0)));
  overflow: hidden;
}
[data-hero-shrink] .hero__inner {
  transform: scale(calc(1.22 - 0.22 * var(--p, 0)));
}
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: calc(1 - var(--p, 0) * 4);
  color: var(--track-accent, var(--primary));
}
.hero-scroll-cue__label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.hero-scroll-cue__arrow { display: flex; animation: heroScrollBounce 1.6s ease-in-out infinite; }
.hero-scroll-cue__arrow svg { width: 20px; height: 20px; display: block; }
@keyframes heroScrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@media (max-width: 640px) {
  [data-hero-shrink] { min-height: calc(88vh * (1 - var(--p, 0))); }
  /* The zoom-in-on-load effect above scales .hero__inner up to 122% at the
     top of the page — great on desktop, but on a narrow phone that's 22%
     wider than the screen itself, which is what was dragging the whole page
     into horizontal scroll before you'd scrolled at all. Cut on mobile. */
  [data-hero-shrink] .hero__inner { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-hero-shrink] { min-height: 0 !important; }
  [data-hero-shrink] .hero__inner { transform: none !important; }
  .hero-scroll-cue { display: none; }
  .hero-scroll-cue__arrow { animation: none; }
}

/* Hero mark — the track name rendered big, echoing the gateway page's
   AI FOR YOU treatment but simple: solid track-accent color, no gradient.
   Realtor gets a plain ® next to the word (text only — no trademarked
   artwork, no membership-status assumptions); business stays text-only. */
.hero-mark { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); max-width: 100%; min-width: 0; }
.hero-mark__word {
  font-weight: 700; font-size: clamp(40px, 9vw + 1rem, 88px);
  line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--track-accent, var(--primary)); margin: 0;
  max-width: 100%; min-width: 0; overflow-wrap: break-word;
}
.hero-mark__reg {
  font-size: 0.3em; font-weight: 600; vertical-align: super;
  letter-spacing: 0; text-transform: none;
}

/* Trust strip */
.trust-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg) var(--space-xl); }
.trust-strip__item { display: flex; align-items: center; gap: var(--space-sm); font-size: 14px; font-weight: 600; color: var(--ink-muted-80); }
.trust-strip__dot { flex: none; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--track-accent, var(--primary)); }

/* Gateway */
.gateway-hero { padding: var(--space-huge) var(--space-xl); background-color: var(--canvas-parchment); text-align: center; }
.gateway-hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }
.gateway-hero__title { max-width: 720px; }
.gateway-hero__subtitle { max-width: 560px; color: var(--ink-muted-80); }
.gateway-tracks { padding: var(--space-huge) var(--space-xl); }
.gateway-tracks__grid { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; gap: var(--space-xl); align-items: start; }
.gateway-track-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gateway-track-card:hover, .gateway-track-card:focus-visible {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 48px -20px rgba(13, 27, 62, 0.28);
}
.gateway-track-card__inner {
  display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl);
  background: var(--canvas); position: relative;
  transition: transform .45s cubic-bezier(.22,.9,.32,1);
}
.gateway-track-card__visual {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); margin-bottom: var(--space-base);
  box-shadow: 0 24px 48px -24px rgba(13,27,62,.25);
}
.gateway-track-card__desc { color: var(--ink-muted-80); }
.gateway-track-card__cta { margin-top: var(--space-sm); color: var(--primary); font-weight: 600; }
@media (max-width: 640px) { .gateway-tracks__grid { grid-template-columns: 1fr; max-width: 360px; } }

/* Gateway sneak-peek panel — the whole card (photo + text) slides as one unit,
   the panel fills exactly the space it vacates (slide distance == panel width,
   and only one of left/right is ever set, so the two never fight over layout) */
.gateway-track-card__panel {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: var(--canvas); padding: var(--space-xl);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-xs);
  opacity: 0; transition: opacity .3s ease, transform .45s cubic-bezier(.22,.9,.32,1);
}
.gateway-track-card__panel-eyebrow {
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--track-accent, var(--ink-muted-48)); margin-bottom: var(--space-xs);
}
.gateway-track-card__panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.gateway-track-card__panel-list li { display: flex; align-items: flex-start; gap: var(--space-sm); color: var(--ink-muted-80); }
.gateway-track-card__panel-list li::before {
  content: ""; flex: none; margin-top: 7px; width: 6px; height: 6px;
  border-radius: var(--radius-pill); background: var(--track-accent, var(--primary));
}

.gateway-track-card--realtors .gateway-track-card__panel { right: 0; transform: translateX(100%); }
.gateway-track-card--realtors:hover .gateway-track-card__inner,
.gateway-track-card--realtors:focus-visible .gateway-track-card__inner,
.gateway-track-card--realtors.is-open .gateway-track-card__inner { transform: translateX(-50%); }
.gateway-track-card--realtors:hover .gateway-track-card__panel,
.gateway-track-card--realtors:focus-visible .gateway-track-card__panel,
.gateway-track-card--realtors.is-open .gateway-track-card__panel { transform: translateX(0); opacity: 1; }

.gateway-track-card--business .gateway-track-card__panel { left: 0; transform: translateX(-100%); }
.gateway-track-card--business:hover .gateway-track-card__inner,
.gateway-track-card--business:focus-visible .gateway-track-card__inner,
.gateway-track-card--business.is-open .gateway-track-card__inner { transform: translateX(50%); }
.gateway-track-card--business:hover .gateway-track-card__panel,
.gateway-track-card--business:focus-visible .gateway-track-card__panel,
.gateway-track-card--business.is-open .gateway-track-card__panel { transform: translateX(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gateway-track-card__inner, .gateway-track-card__panel, .gateway-track-card { transition: none; }
}

/* Process */
.process { padding: var(--space-huge) var(--space-xl); }
.process__eyebrow { text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-sm); }
.process h2 { margin-bottom: var(--space-xxl); }
.process__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); counter-reset: step; }
.process__step {
  display: flex; flex-direction: column; gap: var(--space-md); counter-increment: step;
  padding: var(--space-lg); border-radius: var(--radius-lg);
}
.process__dot {
  width: 28px; height: 28px; border-radius: var(--radius-pill); flex: none;
  background: var(--track-accent, var(--primary)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.process__dot::before { content: counter(step); }
.process__desc { color: var(--ink-muted-80); }
@media (max-width: 768px) { .process__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .process__steps { grid-template-columns: 1fr; } }

/* Pricing */
.pricing__title { margin-bottom: var(--space-xxl); }
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); align-items: stretch; }
.pricing__card {
  display: flex; flex-direction: column; gap: var(--space-sm);
  position: relative; text-decoration: none; color: inherit; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pricing__card:hover, .pricing__card:focus-visible {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 24px 48px -20px rgba(13, 27, 62, 0.22);
}

/* Liquid glass — pricing cards, package cards, and process steps all read as
   frosted, brand-tinted panels rather than flat white boxes. Adapted for
   this site's light theme from a dark-glass reference (same blur/border/
   shadow recipe, a lighter tint so it still fits a cream/parchment page):
   background rgba(18,18,18,.65) → color-mix with the page's own accent. */
.pricing__card, .package-card, .process__step {
  background: color-mix(in srgb, var(--track-accent, var(--primary)) 9%, rgba(255, 255, 255, .28));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--track-accent, var(--primary)) 24%, rgba(255, 255, 255, .3));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 8px 32px rgba(13, 27, 62, .12);
}
.pricing__card.card--highlighted, .package-card.is-selected {
  border: 1.5px solid var(--track-accent, var(--primary));
}
.pricing__chip { align-self: flex-start; margin-bottom: var(--space-xs); }
.pricing__card .headline { text-align: center; text-transform: uppercase; letter-spacing: .03em; }
.pricing__price { display: flex; align-items: baseline; gap: var(--space-xs); margin: var(--space-xs) 0; }
.pricing__desc { color: var(--ink-muted-80); margin-bottom: var(--space-sm); text-align: left; }
.pricing__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.pricing__feature { display: flex; align-items: flex-start; gap: var(--space-sm); }
.pricing__feature-dot { flex: none; margin-top: 7px; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--track-accent, var(--primary)); }
@media (max-width: 768px) { .pricing__grid { grid-template-columns: 1fr; } }

.pricing__bubble {
  position: absolute; top: -14px; left: 50%; z-index: 2;
  transform: translate(-50%, -6px) scale(.92); opacity: 0; pointer-events: none;
  background: var(--track-accent, var(--primary)); color: #ffffff;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  padding: var(--space-xs) var(--space-base); border-radius: var(--radius-pill);
  box-shadow: 0 10px 24px -10px rgba(13,27,62,.5);
  transition: opacity .18s ease, transform .18s ease;
}
.pricing__bubble::after {
  content: ""; position: absolute; bottom: -4px; left: 50%;
  width: 8px; height: 8px; background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.pricing__card:hover .pricing__bubble, .pricing__card:focus-visible .pricing__bubble {
  opacity: 1; transform: translate(-50%, 0) scale(1);
}
@media (hover: none), (max-width: 768px) {
  .pricing__bubble {
    position: static; opacity: 1; transform: none; pointer-events: none;
    align-self: flex-start; margin-bottom: var(--space-xs); box-shadow: none;
  }
  .pricing__bubble::after { display: none; }
}

/* FAQ */
.faq__inner { max-width: 760px; }
.faq__title { margin-bottom: var(--space-xl); }
.faq__list { display: flex; flex-direction: column; }
.faq__item { padding: var(--space-lg) 0; border-bottom: 1px solid var(--hairline); }
.faq__item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 20px; color: var(--ink-muted-48); transition: transform .2s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { margin-top: var(--space-sm); color: var(--ink-muted-80); }

/* Contact */
.contact { padding: var(--space-huge) var(--space-xl); text-align: center; }
.contact__inner { max-width: 640px; margin: 0 auto; }
.contact__desc { color: var(--ink-muted-80); margin: var(--space-base) 0 var(--space-xl); }
.contact__actions { display: flex; justify-content: center; gap: var(--space-base); flex-wrap: wrap; }

/* Footer */
.footer { background: #272729; padding: var(--space-xxl) var(--space-xl); }
.footer__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-base); margin-bottom: var(--space-base); }
.footer__cross-link { color: #fff; }
.footer__cross-link:hover { color: var(--track-accent, #a0cdf9); }
.footer .trust-strip { justify-content: flex-start; margin-bottom: var(--space-lg); }
.footer .trust-strip__item { color: #cccccc; }
.footer .trust-strip__dot { background: var(--track-accent, #6b7a99); }
.footer__tagline { color: #e8e8ea; margin-bottom: var(--space-sm); max-width: 480px; }
.footer__legal { color: #cccccc; }
.footer__seo { color: #999999; margin-top: var(--space-xs); max-width: 560px; }

/* About */
.about { padding: var(--space-huge) var(--space-xl) var(--space-xxl); }
.about-hero__grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-xxl); align-items: center; }
.about-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 24px 48px -24px rgba(13,27,62,.25); }
.about-bio p + p { margin-top: var(--space-base); }
.about-bio { display: flex; flex-direction: column; gap: var(--space-base); }
.about-eyebrow { text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-sm); }
@media (max-width: 720px) {
  .about-hero__grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 280px; margin: 0 auto; }
}

/* Nav utilities — search, always present */
.nav-utils { display: flex; align-items: center; gap: var(--space-sm); margin-left: var(--space-sm); }
.nav-search__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; border-radius: var(--radius-pill);
  background: var(--canvas-parchment); color: var(--ink-muted-80);
  font-family: var(--font-sans); cursor: pointer; border: none;
  transition: background-color .15s ease, color .15s ease;
}
.nav-search__btn:hover, .nav-search__btn:focus-visible { background: var(--surface-grey); color: var(--ink); }

@media (max-width: 640px) {
  .track-nav__inner, .gateway-nav__inner { flex-wrap: wrap; row-gap: var(--space-sm); }
  .nav-utils { margin-left: 0; }
}

/* Site search overlay */
.site-search__overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(13,27,62,.45); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh var(--space-base) var(--space-base);
}
/* [hidden] is otherwise beaten by the class's own `display: flex` (author
   styles win over the UA stylesheet's [hidden]{display:none} regardless of
   specificity), so it has to be restated explicitly here. */
.site-search__overlay[hidden] { display: none !important; }
.site-search__panel {
  width: 100%; max-width: 560px; background: var(--canvas);
  border-radius: var(--radius-lg); box-shadow: 0 32px 64px -24px rgba(13,27,62,.5);
  overflow: hidden; max-height: 70vh; display: flex; flex-direction: column;
}
.site-search__row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-lg); border-bottom: 1px solid var(--hairline); flex: none; }
.site-search__icon { color: var(--ink-muted-48); flex: none; }
.site-search__input { flex: 1; border: none; outline: none; font: inherit; font-size: 17px; background: transparent; color: var(--ink); min-width: 0; }
.site-search__close { border: none; background: none; font-size: 26px; line-height: 1; color: var(--ink-muted-48); cursor: pointer; padding: 0 var(--space-xs); }
.site-search__close:hover { color: var(--ink); }
.site-search__results { list-style: none; margin: 0; padding: var(--space-sm); overflow-y: auto; }
.site-search__result { display: flex; flex-direction: column; gap: 2px; padding: var(--space-md) var(--space-base); border-radius: var(--radius-lg); }
.site-search__result:hover, .site-search__result:focus-visible { background: var(--canvas-parchment); }
.site-search__result-label { color: var(--ink); font-weight: 600; }
.site-search__empty { padding: var(--space-lg); text-align: center; display: block; }

/* Gateway cards — mobile tap-to-reveal (the .is-open rules live with the hover
   states above, so the slide distance and panel width can never drift apart) */
@media (max-width: 640px) {
  .gateway-track-card__inner, .gateway-track-card__panel { padding: var(--space-lg); }
  .gateway-track-card__panel { gap: 6px; }
  .gateway-track-card__panel-list li { font-size: 14px; line-height: 18px; }
  .gateway-track-card__panel-eyebrow { font-size: 12px; }
  .gateway-track-card__cta { display: inline-flex; align-items: center; gap: 4px; }
  .gateway-track-card__cta::after { content: "(tap again to open)"; font-size: 11px; font-weight: 400; color: var(--ink-muted-48); }
  .gateway-track-card.is-open .gateway-track-card__cta::after { content: ""; }
}

/* Packages — a-la-carte, add-on section. Sits on a neutral background so it
   reads as its own zone against the accent-tinted hero above it, instead of
   blending into it. Cards show only title + price by default; description
   and the add control reveal on hover (desktop) or tap (touch, via
   .is-expanded from script.js). */
.section.packages { background-color: var(--surface-grey); }
.packages__title { margin-bottom: var(--space-sm); }
.packages__subtitle { color: var(--ink-muted-80); margin-bottom: var(--space-xxl); max-width: 640px; }

/* Packages carousel — a "coverflow": the centered card sits forward, full
   size and fully opaque; cards to either side recede — smaller, fainter,
   pushed slightly back — like a floating stack of cards viewed at an angle.
   script.js measures each card's distance from the track's center on every
   scroll frame and writes the scale/opacity/lift/z-index that produce this;
   the CSS below only sets the resting (centered) state and the transition
   that smooths between JS-driven updates. Fixed card widths (vs. the old
   percentage grid) are what let a card sit centered with neighbors peeking
   in on both sides. */
.packages__carousel { position: relative; }
.packages__grid {
  --card-w: 300px;
  display: flex; align-items: center; gap: var(--space-xl);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: var(--space-xxl) calc(50% - (var(--card-w) / 2));
  scroll-padding-inline: calc(50% - (var(--card-w) / 2));
}
.packages__grid::-webkit-scrollbar { display: none; }
.packages__grid:focus-visible { outline: 2px solid var(--track-accent, var(--primary)); outline-offset: 4px; }
.package-card {
  display: flex; flex-direction: column; cursor: pointer; position: relative;
  scroll-snap-align: center; flex: 0 0 var(--card-w); width: var(--card-w); min-width: 0;
  transform-origin: 50% 50%;
  transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}
@media (max-width: 900px) { .packages__grid { --card-w: 280px; } }
@media (max-width: 640px) { .packages__grid { --card-w: min(78vw, 320px); } }

/* Packages — desktop ring: on wide, pointer-capable screens script.js swaps
   the track into a full circle of floating cards instead of the linear
   coverflow above. The front card reads clearly; the rest curve away and
   behind it all the way around, so the whole set reads as one floating ring
   you rotate with the arrows or by clicking a card to bring it forward.
   Narrower / touch viewports never get this class and keep the swipeable
   coverflow untouched. */
.packages__grid.is-circular {
  display: block; position: relative;
  height: 460px; padding: 0; margin: 0;
  overflow: visible; scroll-snap-type: none;
}
.packages__grid.is-circular .package-card {
  position: absolute; top: 50%; left: 50%; margin: 0;
  width: var(--card-w);
  transition: transform .6s cubic-bezier(.22, .9, .32, 1), opacity .6s ease, box-shadow .3s ease;
}
.packages__grid.is-circular .package-card.is-front {
  box-shadow: 0 28px 56px -20px rgba(13, 27, 62, .4);
}
@media (prefers-reduced-motion: reduce) {
  .packages__grid.is-circular .package-card { transition: box-shadow .3s ease; }
}

.packages__nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 40px; height: 40px; border-radius: var(--radius-pill); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--canvas); border: 1px solid var(--hairline); color: var(--ink);
  cursor: pointer; box-shadow: 0 12px 24px -12px rgba(13, 27, 62, .35);
  transition: opacity .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}
.packages__nav-btn:hover { border-color: var(--track-accent, var(--primary)); color: var(--track-accent, var(--primary)); }
.packages__nav-btn:disabled { opacity: 0; pointer-events: none; }
.packages__nav-btn--prev { left: 4px; }
.packages__nav-btn--next { right: 4px; }
@media (hover: none), (max-width: 640px) {
  .packages__nav-btn { display: none; }
}
.package-card:hover, .package-card:focus-within, .package-card.is-expanded {
  border-color: var(--track-accent, var(--primary));
  box-shadow: 0 20px 40px -18px rgba(13, 27, 62, .32);
}
@media (prefers-reduced-motion: reduce) {
  .package-card { transition: border-color .15s ease, box-shadow .18s ease; }
}
.package-card.is-selected {
  border-color: var(--track-accent, var(--primary));
  box-shadow: 0 0 0 1.5px var(--track-accent, var(--primary));
}
.package-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-sm); }
.package-card__head .headline {
  flex: 1 1 100%; min-width: 0;
  text-align: center; text-transform: uppercase; letter-spacing: .03em;
}
.package-card__price { white-space: nowrap; font-weight: 700; color: var(--track-accent, var(--primary)); flex: none; }
.package-card__chevron {
  flex: none; color: var(--ink-muted-48);
  transition: transform .25s ease, color .15s ease;
}
.package-card:hover .package-card__chevron,
.package-card:focus-within .package-card__chevron,
.package-card.is-expanded .package-card__chevron { transform: rotate(180deg); color: var(--track-accent, var(--primary)); }

.package-card__body {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(.22,.9,.32,1), opacity .25s ease, margin-top .4s ease;
}
.package-card:hover .package-card__body,
.package-card:focus-within .package-card__body,
.package-card.is-expanded .package-card__body {
  max-height: 320px; opacity: 1; margin-top: var(--space-base);
}
.package-card__desc { color: var(--ink-muted-80); text-align: left; }
.package-card__check-row {
  display: flex; align-items: center; gap: var(--space-sm);
  padding-top: var(--space-sm); margin-top: var(--space-sm); border-top: 1px solid var(--hairline);
}
.package-card__check { width: 18px; height: 18px; flex: none; accent-color: var(--track-accent, var(--primary)); cursor: pointer; }
.package-card__check-label { font-size: 14px; font-weight: 600; color: var(--ink-muted-80); cursor: pointer; }

.packages__summary {
  position: sticky; bottom: var(--space-lg); margin-top: var(--space-xl); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  background: var(--primary); color: #fff; padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg); box-shadow: 0 24px 48px -20px rgba(13,27,62,.4);
  flex-wrap: wrap;
}
.packages__summary[hidden] { display: none !important; }
.packages__summary-text { display: flex; flex-direction: column; gap: 2px; }
.packages__summary-count { font-size: 13px; opacity: .8; }
.packages__summary-total { font-size: 22px; font-weight: 700; }
.packages__summary .btn-primary { background: #fff; color: var(--primary); }
.packages__summary .btn-primary:hover { opacity: .9; }
.packages__note { margin-top: var(--space-base); color: var(--ink-muted-48); }

.packages__request-form {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-base);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  margin-top: var(--space-xl);
}
.packages__request-form.is-visible { display: grid; }
.packages__field { display: flex; flex-direction: column; gap: var(--space-xs); }
.packages__field--wide { grid-column: 1 / -1; }
.packages__field .caption { color: var(--ink-muted-48); font-weight: 600; }
.packages__input {
  font-family: var(--font-sans); font-size: 15px; color: var(--ink);
  padding: var(--space-sm) var(--space-md); border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--surface-pearl);
}
.packages__input:focus-visible { outline: 2px solid var(--track-accent, var(--primary)); outline-offset: 1px; }
.packages__textarea { resize: vertical; min-height: 72px; font-family: var(--font-sans); }
.packages__form-status { grid-column: 1 / -1; margin: 0; color: var(--ink-muted-48); }
.packages__form-status[hidden] { display: none !important; }
.packages__form-status.is-error { color: #b3261e; }
.packages__form-fallback { grid-column: 1 / -1; margin: 0; color: var(--ink-muted-48); }
.packages__form-fallback[hidden] { display: none !important; }
.packages__copy-btn {
  font: inherit; font-weight: 600; color: var(--track-accent, var(--primary));
  background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer;
}
[data-packages-request].is-disabled { opacity: .55; pointer-events: none; }

@media (max-width: 640px) {
  .packages__summary { position: static; flex-direction: column; align-items: stretch; text-align: center; }
  .packages__request-form { grid-template-columns: 1fr; }
}

/* ==================================================================
   Ambient section motion — five distinct techniques (plus a special
   rotating one for the gateway hero) instead of one effect copy-pasted
   everywhere, so different parts of the site read as deliberately
   different rather than one background slapped on every section.
   Each .bg-* class is a MOTION technique; color is separate, supplied
   by --drift-a/-b/-c, set per semantic section class below (.hero,
   .section--grey, etc.) so the same technique can be reused across
   pages while still picking up that page's own accent. All of them are
   pure background-image/position/size animation (the .bg-aurora rotor
   is the one exception, and it's clipped by its own section, so none
   of this can cause page-level overflow the way an unclipped absolutely
   positioned element could).
   ================================================================== */

/* --- Orbit: 3 soft blobs drifting on independent slow loops. The busiest
   of the set — reserved for hero sections, which already have their own
   "shrinks as you scroll" motion, so this reads as an extension of that
   rather than a second, competing animation. --- */
@keyframes bgOrbit {
  0%   { background-position: 12% 22%, 84% 18%, 46% 86%; }
  50%  { background-position: 40% 58%, 58% 52%, 28% 48%; }
  100% { background-position: 78% 14%, 22% 78%, 70% 26%; }
}
.bg-orbit {
  background-image:
    radial-gradient(circle, var(--drift-a, transparent) 0%, transparent 70%),
    radial-gradient(circle, var(--drift-b, transparent) 0%, transparent 70%),
    radial-gradient(circle, var(--drift-c, transparent) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 70% 70%, 60% 60%, 80% 80%;
  background-position: 12% 22%, 84% 18%, 46% 86%;
  animation: bgOrbit 46s ease-in-out infinite alternate;
}

/* --- Sweep: a soft diagonal band of light sliding across once per cycle,
   like a shimmer passing over glass. Used where cards sit on top (packages,
   the gateway tracks) so the motion reads as a surface highlight, not a
   moving blob competing with the cards. --- */
@keyframes bgSweep {
  0%   { background-position: -30% -10%; }
  100% { background-position: 130% 110%; }
}
.bg-sweep {
  background-image: linear-gradient(115deg,
    transparent 32%,
    var(--drift-a, transparent) 46%,
    var(--drift-b, transparent) 54%,
    transparent 68%);
  background-repeat: no-repeat;
  background-size: 220% 220%;
  animation: bgSweep 16s linear infinite;
}

/* --- Pulse: a single glow breathing in place — grows/fades rather than
   moving sideways. Calmer, for a "sit and compare plans" section. --- */
@keyframes bgPulse {
  0%, 100% { background-size: 85% 85%, 65% 65%; opacity: .65; }
  50%      { background-size: 125% 125%, 100% 100%; opacity: 1; }
}
.bg-pulse {
  background-image:
    radial-gradient(circle at 28% 34%, var(--drift-a, transparent) 0%, transparent 68%),
    radial-gradient(circle at 76% 72%, var(--drift-b, transparent) 0%, transparent 68%);
  background-repeat: no-repeat;
  background-position: 28% 34%, 76% 72%;
  animation: bgPulse 11s ease-in-out infinite;
}

/* --- Wave: two soft vertical bands sliding side to side past each other —
   an unhurried left-right motion, distinct from orbit's looping path. --- */
@keyframes bgWave {
  0%   { background-position: 0% 50%, 100% 50%; }
  50%  { background-position: 100% 50%, 0% 50%; }
  100% { background-position: 0% 50%, 100% 50%; }
}
.bg-wave {
  background-image:
    radial-gradient(50% 90% at 50% 50%, var(--drift-a, transparent) 0%, transparent 75%),
    radial-gradient(50% 90% at 50% 50%, var(--drift-b, transparent) 0%, transparent 75%);
  background-repeat: no-repeat;
  background-size: 65% 100%, 65% 100%;
  animation: bgWave 28s ease-in-out infinite;
}

/* --- Glow: a single fixed-position blob that slowly cycles hue instead of
   moving at all — color changing, not position, so it doesn't pull the eye
   away from a call-to-action button sitting on top of it. --- */
@keyframes bgGlow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.bg-glow {
  background-image: radial-gradient(60% 60% at 50% 38%, var(--drift-a, transparent) 0%, transparent 72%);
  background-repeat: no-repeat;
  animation: bgGlow 32s linear infinite;
}

/* --- Aurora: the brand's own three colors — navy, champagne, sky — turning
   slowly behind the content, like light passing through a room rather than
   a generic rainbow gradient mesh. Reserved for the homepage hero. Needs an
   actual rotating element (background-position can't animate a conic
   gradient's angle), so it's a pseudo-element sized well past its own box;
   the section clips it, so the oversized rotation is always contained and
   can never cause page-level overflow no matter how it swings. --- */
.bg-aurora { position: relative; overflow: hidden; }
.bg-aurora::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 170%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--primary) 12%, transparent),
    color-mix(in srgb, var(--champagne) 13%, transparent),
    transparent 45%,
    color-mix(in srgb, var(--sky) 12%, transparent),
    color-mix(in srgb, var(--primary) 12%, transparent));
  filter: blur(64px);
  opacity: .8;
  animation: bgAuroraSpin 110s linear infinite;
  z-index: 0;
}
.bg-aurora > * { position: relative; z-index: 1; }
@keyframes bgAuroraSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bg-orbit, .bg-sweep, .bg-pulse, .bg-wave, .bg-glow { animation: none; }
  .bg-aurora::before { animation: none; }
}

/* --- Color context: which --drift colors a section uses, independent of
   which .bg-* motion technique it's paired with, so the same technique can
   be reused across pages while picking up each one's own palette. --- */
.hero, .contact {
  --drift-a: color-mix(in srgb, var(--track-accent, var(--primary)) 30%, transparent);
  --drift-b: color-mix(in srgb, var(--track-accent, var(--primary)) 16%, transparent);
  --drift-c: color-mix(in srgb, #ffffff 55%, transparent);
}
.section--grey, .section.packages {
  --drift-a: color-mix(in srgb, var(--track-accent, var(--primary)) 14%, transparent);
  --drift-b: color-mix(in srgb, var(--champagne) 12%, transparent);
  --drift-c: color-mix(in srgb, var(--sky) 10%, transparent);
}
.section--pearl {
  --drift-a: color-mix(in srgb, var(--track-accent, var(--primary)) 12%, transparent);
  --drift-b: color-mix(in srgb, var(--sky) 10%, transparent);
  --drift-c: color-mix(in srgb, var(--champagne) 10%, transparent);
}
.gateway-tracks {
  --drift-a: color-mix(in srgb, var(--champagne) 12%, transparent);
  --drift-b: color-mix(in srgb, var(--sky) 10%, transparent);
  --drift-c: color-mix(in srgb, var(--primary) 8%, transparent);
}
/* About page has no track-accent wrapper (it's not realtor- or business-
   specific), so it gets its own neutral navy/champagne/sky mix. */
.about {
  --drift-a: color-mix(in srgb, var(--primary) 10%, transparent);
  --drift-b: color-mix(in srgb, var(--champagne) 12%, transparent);
  --drift-c: color-mix(in srgb, var(--sky) 10%, transparent);
}

/* ---------- Intro reveal — the logo animation that plays once, on a
   visitor's first landing on the homepage, then shrinks into the header
   wordmark's exact position before handing off to the page underneath.

   The backdrop is a soft blur of the real page showing through (not a
   solid card), and the video itself is edge-masked so its flat backing
   colour feathers into nothing — no visible box, just the mark floating
   over a frosted hint of the site. ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  background: color-mix(in srgb, var(--surface-pearl) 78%, transparent);
  backdrop-filter: blur(34px) saturate(1.15);
  -webkit-backdrop-filter: blur(34px) saturate(1.15);
  opacity: 1;
  transition: opacity .7s ease;
}
.intro[hidden] { display: none; }
.intro.is-leaving { opacity: 0; pointer-events: none; }

.intro__video {
  width: min(78vw, 720px);
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: contain;
  transform: translate(0, 0) scale(1);
  transform-origin: 50% 50%;
  transition: transform .85s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
  background: transparent;
  opacity: .95;
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 78%, transparent 100%);
}
.intro__video.is-shrinking {
  transition: transform .85s cubic-bezier(.65, 0, .35, 1), opacity .5s ease .25s;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, .06));
  opacity: 0;
}

.intro__tag {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.intro__tag.is-visible { opacity: .82; transform: translateY(0); }
.intro__tag.is-leaving { opacity: 0 !important; transition: opacity .3s ease; }

.intro__skip {
  position: fixed;
  top: calc(var(--space-lg) + env(safe-area-inset-top, 0px));
  right: var(--space-lg);
  padding: var(--space-xs) var(--space-md);
  border: none;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 82%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font: 600 12px var(--font-sans);
  letter-spacing: .04em;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s ease .35s, background .2s ease;
}
.intro__skip.is-visible { opacity: .9; }
.intro__skip.is-leaving { opacity: 0 !important; transition: opacity .2s ease; }
.intro__skip:hover { background: var(--primary); }
.intro__skip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}