/* =====================================================================
   Jeff O'Brien Realty — brokerage website
   Distinct identity (its own, NOT the O'Brien Capital navy/gold):
   warm near-black ink + deep olive dark sections + terracotta/clay accent,
   Bricolage Grotesque display + Hanken Grotesk text. Photography-led.
   ===================================================================== */

:root {
  /* dark surfaces — true black + elevated charcoals (luxury black + gold) */
  --dark-900: #08080a;
  --dark-800: #0d0d10;
  --dark-700: #17171c;
  --dark-600: #242429;

  /* accent — rich antique gold (#986C0D) + lighter partner (#C69A34) for highlights */
  --clay:     #986C0D;
  --clay-deep:#6f4f08;
  --clay-hi:  #C69A34;

  /* type + surfaces — DARK-dominant: light text on black surfaces */
  --ink:      #f4f1e8;
  --ink-soft: #b4afa2;
  --paper:    #0d0d10;
  --mist:     #1a1a1f;
  --mist-2:   #101014;

  --line-d:   rgba(255,255,255,.14);
  --line-l:   rgba(255,255,255,.12);

  --ok:       #5fbf88;
  --err:      #e08a8a;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 48px);
  --sec-y: clamp(76px, 11vw, 150px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

/* skip link (a11y) */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--clay); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 4px 0;
}
.skip:focus { left: 0; }

/* ---------- Type ---------- */
/* Kicker: NOT the tiny-uppercase-tracked eyebrow. A short clay rule + small
   sentence-case label, used deliberately on a few sections, not every one. */
/* Section label. Deliberately NO leading rule: a short bar in front of the text
   reads as an em dash, which is exactly the look we're avoiding. */
.kicker {
  display: inline-block;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 1.1rem;
}
.kicker--light { color: var(--clay-hi); }

.display {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}
.display--light { color: #fff; }
.display .accent, .display em { font-style: italic; color: var(--clay-hi); font-weight: 600; }
.display--light .accent, .display--light em { color: var(--clay-hi); }

.body-lg { font-size: 1.16rem; color: var(--ink-soft); margin-top: 1.2rem; max-width: 46ch; text-wrap: pretty; }
.body { font-size: 1rem; color: var(--ink-soft); margin-top: 1rem; max-width: 60ch; text-wrap: pretty; }
.section--dark .body, .section--dark .body-lg { color: rgba(255,255,255,.82); }

.ul-gold {
  background-image: linear-gradient(var(--clay), var(--clay));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .96rem; font-weight: 600;
  letter-spacing: .01em; text-decoration: none;
  padding: .95em 1.7em; min-height: 48px; border-radius: 3px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--solid { background: var(--clay); color: #fff; }
.btn--solid:hover { background: var(--clay-deep); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: #1a1408; }
.btn--ink:hover { background: #fff; transform: translateY(-2px); }
.btn--full { width: 100%; padding-block: 1.05em; font-size: 1rem; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(8,8,10,0);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease);
}
.nav.is-stuck {
  background: rgba(8,8,10,.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line-d);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; }
.brand__mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 3px;
  background: var(--clay); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.18rem; letter-spacing: .01em;
}
.brand__name { font-family: var(--display); font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; }
.nav__links { display: flex; gap: 2rem; }
.nav__links a {
  color: rgba(255,255,255,.86); text-decoration: none; font-size: .9rem; font-weight: 500;
  position: relative; padding: .2rem 0; transition: color .2s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--clay-hi); transition: width .3s var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { width: 100%; }
.nav__cta { padding: .58em 1.2em; min-height: 0; }

/* ---------- Hero (photography-led, full-bleed) ---------- */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: flex-end;
  background: var(--dark-800); color: #fff; overflow: hidden;
  padding-top: 78px;
}
.hero__media { position: absolute; inset: 0; }
.hero__photo {
  position: absolute; inset: 0;
  background-color: var(--dark-800);
  background-size: cover; background-position: center 42%;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,8,10,.42) 0%, rgba(8,8,10,.20) 34%, rgba(8,8,10,.72) 82%, rgba(8,8,10,.90) 100%),
    linear-gradient(90deg, rgba(8,8,10,.55) 0%, transparent 60%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(40px, 7vh, 84px); max-width: var(--wrap); width: 100%; }
.hero__title {
  font-family: var(--display); font-weight: 600; max-width: 22ch;
  font-size: clamp(3rem, 7vw, 5.4rem); line-height: 1.0; letter-spacing: -.005em;
  text-wrap: balance;
}
.hero__title em { font-style: italic; color: var(--clay-hi); }
.hero__lede { margin-top: 1.5rem; font-size: 1.18rem; color: rgba(255,255,255,.9); max-width: 42ch; text-wrap: pretty; }
.hero__cta { display: flex; gap: 1rem; margin-top: 2.1rem; flex-wrap: wrap; }
.chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: 2.4rem;
  margin-top: 2.8rem; padding-top: 1.8rem; border-top: 1px solid var(--line-d);
}
.chips li { display: flex; flex-direction: column; }
.chips strong { font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--clay-hi); letter-spacing: -.02em; }
.chips span { font-size: .78rem; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.7); margin-top: .25rem; }

/* ---------- Section shells ---------- */
.section { padding-block: var(--sec-y); }
.section--paper { background: var(--paper); }
.section--mist { background: var(--mist-2); }
.section--dark { background: var(--dark-900); color: #fff; }
.section__head { max-width: 46ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.section__head--center { text-align: center; margin-inline: auto; }
.section__head .body { margin-inline: 0; }
.section__head--center .body { margin-inline: auto; }
.section__cta { text-align: center; margin-top: 3rem; }

.grid-2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; display: grid; gap: 1.6rem; }
.checklist li { display: flex; gap: 1.1rem; align-items: flex-start; }
.check {
  flex: none; width: 30px; height: 30px; margin-top: 1px; border-radius: 8px;
  background: rgba(152,108,13,.12); position: relative;
}
.check::after {
  content: ""; position: absolute; left: 11px; top: 7px; width: 7px; height: 12px;
  border: solid var(--clay); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg);
}
.checklist h3 { font-family: var(--display); font-size: 1.16rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.checklist p { font-size: .96rem; color: var(--ink-soft); margin-top: .3rem; }

/* ---------- Fee statement (replaces the metric grid) ---------- */
.feestate { max-width: 980px; margin-inline: auto; }
.feestate__lead {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 4vw, 2.6rem); align-items: center;
  padding-bottom: clamp(2rem, 5vw, 3rem); border-bottom: 1px solid var(--line-d);
}
.feestate__big {
  font-family: var(--display); font-weight: 700; color: var(--clay-hi);
  font-size: clamp(3.6rem, 11vw, 6rem); line-height: .9; letter-spacing: -.04em;
}
.feestate__lead p { font-size: 1.2rem; color: rgba(255,255,255,.9); max-width: 34ch; text-wrap: pretty; }
.feestate__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); margin-top: clamp(2rem, 5vw, 3rem); }
.feestate__col h4 {
  font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--clay-hi); margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line-d);
}
.feestate__col ul { list-style: none; display: grid; gap: .85rem; }
.feestate__col li { display: flex; align-items: flex-start; gap: .7rem; color: rgba(255,255,255,.9); font-size: 1.04rem; }
.feestate__col li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px;
  background-repeat: no-repeat; background-position: center;
}
.feestate__col--keep li::before {
  background-color: rgba(198,154,52,.18);
  background-image: linear-gradient(var(--clay-hi),var(--clay-hi)), linear-gradient(var(--clay-hi),var(--clay-hi));
  background-size: 8px 2px, 2px 8px; background-position: center, center;
}
.feestate__col--drop { opacity: .82; }
.feestate__col--drop li { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.feestate__col--drop li::before {
  background-color: rgba(255,255,255,.06);
  background-image: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5));
  background-size: 9px 2px; background-position: center;
}
.feestate__note { text-align: center; max-width: 60ch; margin: clamp(2rem,5vw,2.8rem) auto 0; color: rgba(255,255,255,.66); font-size: .96rem; }
.gated-note { text-align: center; max-width: 56ch; margin: 2.4rem auto 0; color: rgba(255,255,255,.72); font-size: 1rem; }

/* ---------- Sponsor / about ---------- */
.grid-2--sponsor { grid-template-columns: 190px 1fr; gap: clamp(1.8rem, 4vw, 3.4rem); }
.sponsor__media {
  aspect-ratio: 4 / 5; border-radius: 6px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--dark-700), var(--dark-900) 78%);
  border: 1px solid var(--line-l);
}
.sponsor__media[data-slot]::after {
  content: attr(data-slot); position: absolute; inset: auto 0 16px 0; text-align: center;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
/* Real broker portrait (replaces the placeholder silhouette) */
.sponsor__photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.sponsor__media { display: grid; place-items: center; }
.sponsor__art { width: 52%; color: rgba(198,154,52,.55); margin-bottom: 1.4rem; }
.sponsor__art circle, .sponsor__art path { stroke: currentColor; stroke-width: 1.5; fill: none; }
.sponsor__stats { list-style: none; display: flex; gap: 2.6rem; margin-top: 2.2rem; flex-wrap: wrap; }
.sponsor__stats strong { display: block; font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--clay); letter-spacing: -.02em; }
.sponsor__stats span { font-size: .78rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-soft); }

/* ---------- Paths ---------- */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.path {
  background: rgba(255,255,255,.05); border: 1px solid var(--line-d);
  border-radius: 8px; padding: clamp(1.8rem, 3vw, 2.6rem);
  position: relative; cursor: pointer;
}
.path--primary { background: rgba(198,154,52,.1); border-color: rgba(198,154,52,.4); }
.path__tag { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--clay-hi); margin-bottom: .8rem; }
.path h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: #fff; margin-bottom: 1rem; letter-spacing: -.02em; }
.steps { list-style: none; display: grid; gap: .9rem; }
.steps li { display: flex; align-items: center; gap: .9rem; color: rgba(255,255,255,.9); font-size: 1rem; }
.steps span {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  background: var(--clay); color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.05rem;
}
.path__fine { margin-top: 1.3rem; font-size: .9rem; color: rgba(255,255,255,.7); }
.path__cta {
  margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: .96rem; color: var(--clay-hi);
}
.path__cta span { transition: transform .3s var(--ease); }
.path:hover .path__cta span, .path__cta:focus-visible span { transform: translateX(5px); }
.path__cta::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.path__cta:focus-visible { outline: 2px solid var(--clay-hi); outline-offset: 6px; }

/* ---------- Editorial Q&A (buyers/sellers) ---------- */
.qa { border-bottom: 1px solid var(--line-l); }
.qa__row {
  display: grid; grid-template-columns: 1fr 56px 1.1fr; align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(2rem, 4vw, 3.2rem) 0;
  border-top: 1px solid var(--line-l);
}
.qa__q { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.14; color: var(--ink); letter-spacing: -.02em; }
.qa__dot { align-self: center; justify-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 6px rgba(152,108,13,.14); }
.qa__a { color: var(--ink-soft); font-size: 1.02rem; text-wrap: pretty; }

/* ---------- Service areas (with imagery) ---------- */
.areas { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.area {
  border: 1px solid var(--line-l); border-radius: 8px; overflow: hidden; background: var(--dark-700);
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.area:hover { transform: translateY(-4px); box-shadow: 0 24px 46px -30px rgba(0,0,0,.4); border-color: rgba(152,108,13,.4); }
.area__img { aspect-ratio: 16 / 10; background: linear-gradient(160deg, var(--dark-700), var(--dark-900)); background-size: cover; background-position: center; }
.area__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .4rem; }
.area h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.area p { font-size: .94rem; color: var(--ink-soft); }
.area__badge { align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--clay); padding: .25rem .6rem; border-radius: 4px; margin-bottom: .2rem; }
.area--note { background: transparent; border-style: dashed; justify-content: center; }
.area--note:hover { transform: none; box-shadow: none; border-color: var(--line-l); }
.area--note .area__body { padding: 1.6rem; }
.area--note p { font-style: italic; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.quote {
  border: 1px solid var(--line-l); border-radius: 8px; padding: 1.9rem 1.7rem; background: var(--mist-2);
  display: flex; flex-direction: column; gap: 1.3rem;
}
.quote blockquote { font-family: var(--display); font-size: 1.12rem; font-weight: 500; line-height: 1.42; color: var(--ink); letter-spacing: -.01em; }
.quote blockquote::before { content: "\201C"; color: var(--clay); font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 0; vertical-align: -.35em; margin-right: .1em; }
.quote figcaption { display: flex; flex-direction: column; gap: .15rem; margin-top: auto; }
.quote__name { font-weight: 600; color: var(--ink); font-size: .92rem; }
.quote__role { font-size: .76rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--clay); }

/* ---------- FAQ accordion ---------- */
.faq-wrap { max-width: 820px; margin-inline: auto; }
.faq__item { border-top: 1px solid var(--line-l); }
.faq__item:last-child { border-bottom: 1px solid var(--line-l); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 1.4rem 3rem 1.4rem 0; position: relative;
  font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px;
  margin-top: -6px; background:
    linear-gradient(var(--clay), var(--clay)) center/13px 2px no-repeat,
    linear-gradient(var(--clay), var(--clay)) center/2px 13px no-repeat;
  transition: transform .3s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 2rem 1.5rem 0; color: var(--ink-soft); font-size: 1rem; }
.faq__a p { max-width: 68ch; text-wrap: pretty; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: var(--dark-900); color: #fff; text-align: center; padding-block: clamp(80px, 12vw, 140px); overflow: hidden; }
.cta-band__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(152,108,13,.24), transparent 58%),
    linear-gradient(180deg, var(--dark-800), var(--dark-900));
}
.cta-band__inner { position: relative; z-index: 2; max-width: 680px; margin-inline: auto; }
.cta-band__lede { margin: 1.2rem auto 2rem; color: rgba(255,255,255,.85); font-size: 1.12rem; max-width: 46ch; text-wrap: pretty; }
.cta-band--photo { background-size: cover; background-position: center 58%; }
.cta-band--photo .cta-band__scrim {
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(152,108,13,.30), transparent 56%),
    linear-gradient(180deg, rgba(8,8,10,.80), rgba(8,8,10,.90));
}

/* ---------- Forms ---------- */
.field { display: grid; gap: .45rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field label { font-size: .84rem; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
.opt { font-weight: 400; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: .82em .9em; border: 1.5px solid var(--line-l); border-radius: 4px; background: #16161b;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(152,108,13,.16);
}
/* Inline text links (the mailto in the contact/agent modals, and any link in body copy).
   Without this they fall back to the browser's default blue / visited-purple, which is
   effectively unreadable on our black surfaces. */
.body a, .body-lg a, .modal__form a, .faq__a a, .qa__a a, .calc__disclaimer a {
  color: var(--clay-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(198,154,52,.55);
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.body a:hover, .body-lg a:hover, .modal__form a:hover, .faq__a a:hover, .qa__a a:hover {
  color: #fff;
  text-decoration-color: rgba(255,255,255,.7);
}

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; color: var(--ink-soft); line-height: 1.5; }
.consent input { margin-top: .25rem; accent-color: var(--clay); flex: none; width: 18px; height: 18px; }
.form-status { font-size: .92rem; min-height: 1.2em; }
.form-status.is-ok { color: var(--ok); }
.form-status.is-err { color: var(--err); }

/* ---------- Footer ---------- */
.footer { background: var(--dark-900); color: rgba(255,255,255,.72); padding-block: 3.5rem 2.5rem; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 2rem; border-bottom: 1px solid var(--line-d); }
.footer__brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
/* Brand links (nav + footer) hint that they're clickable. On the agent sub-site they lead home. */
a.brand:hover .brand__name, a.footer__brand:hover .brand__name { color: var(--clay-hi); }
a.brand .brand__name, a.footer__brand .brand__name { transition: color .2s var(--ease); }
.footer__contact { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.footer__contact a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .92rem; transition: color .2s; }
.footer__contact a:hover { color: var(--clay-hi); }
.footer__legal { padding-top: 2rem; }
.footer__badges { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.eho { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.82); font-size: .82rem; letter-spacing: .02em; }
.eho svg { color: var(--clay-hi); flex: none; }
.footer__dre { font-size: .82rem; color: rgba(255,255,255,.7); }
.disclosures { margin-top: 1.8rem; font-size: .82rem; color: rgba(255,255,255,.68); line-height: 1.7; max-width: 96ch; }
.disclosures__flag { color: var(--clay-hi); font-weight: 600; margin-bottom: .8rem; letter-spacing: .01em; }
.disclosures__meta { margin-top: 1.4rem; color: rgba(255,255,255,.6); }
.disclosures a[data-pending] { color: rgba(255,255,255,.78); text-decoration: underline dotted rgba(255,255,255,.4); }

/* ---------- Pending markers ---------- */
.note-inline { color: var(--clay); font-size: .8em; font-style: italic; }
.pending, .pending-block { color: var(--ink-soft); font-style: italic; }
.section--dark .pending { color: rgba(255,255,255,.6); }
[data-pending] { opacity: .7; }

/* anchor offset so sections clear the fixed nav */
section[id] { scroll-margin-top: 84px; }

/* ---------- Agent funnel (nav link + strip) ---------- */
/* The cross-site nav link ("For Agents" / "Buy or Sell") deliberately inherits the SAME
   color as every other nav link. Gold text sat on top of the hero photo and was hard to
   read. The trailing arrow is what marks it as leaving the site. */

.agent-strip {
  background: linear-gradient(180deg, var(--dark-800), var(--dark-900));
  border-top: 1px solid rgba(152,108,13,.30);
  border-bottom: 1px solid var(--line-d);
  padding-block: clamp(2.8rem, 6vw, 4.6rem);
}
.agent-strip__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.6rem, 4vw, 3.4rem); flex-wrap: wrap;
}
.agent-strip__copy { max-width: 58ch; }
.agent-strip__copy .display { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.agent-strip__copy .body { margin-top: .8rem; margin-bottom: 0; }
.agent-strip .btn { flex: none; }
@media (max-width: 640px) { .agent-strip .btn { width: 100%; } }

/* Brand context tag (agent site nav) */
.brand__tag {
  font-family: var(--sans); font-size: .6rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--clay-hi); align-self: center;
  border: 1px solid rgba(152,108,13,.45); border-radius: 3px; padding: .18rem .42rem; margin-left: .15rem;
}
@media (max-width: 420px) { .brand__tag { display: none; } }

/* ---------- Agent savings calculator ---------- */
.calc {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 0;
  background: var(--dark-700); border: 1px solid var(--line-d); border-radius: 14px; overflow: hidden;
  box-shadow: 0 44px 100px -56px rgba(0,0,0,.85); max-width: 980px; margin-inline: auto;
}
.calc__inputs { padding: clamp(1.6rem, 3vw, 2.5rem); }
.calc__group { margin-bottom: 1.35rem; }
.calc__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .86rem; font-weight: 600; color: var(--ink); margin-bottom: .55rem;
}
.calc__val { font-family: var(--display); font-size: 1.25rem; font-weight: 700; color: var(--clay-hi); letter-spacing: -.01em; }
input[type=range].calc__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.14); outline: none; cursor: pointer;
}
input[type=range].calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--clay); border: 2px solid #1a1408; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.6);
  transition: transform .15s var(--ease);
}
input[type=range].calc__range:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range].calc__range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--clay); border: 2px solid #1a1408; cursor: pointer;
}
input[type=range].calc__range:focus-visible { outline: 2px solid var(--clay-hi); outline-offset: 6px; }
.calc__adv { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-l); }
.calc__adv .field label { font-size: .74rem; color: var(--ink-soft); font-weight: 500; }
.calc__adv .field input { padding: .55em .6em; font-size: .92rem; }
.calc__advnote { font-size: .76rem; color: var(--ink-soft); margin-top: .9rem; }

.calc__result {
  background: linear-gradient(165deg, var(--dark-900), #14110a);
  color: #fff; padding: clamp(1.8rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid rgba(152,108,13,.3);
}
.calc__reslabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.calc__save { font-family: var(--display); font-size: clamp(2.9rem, 6.5vw, 3.8rem); font-weight: 700; color: var(--clay-hi); line-height: 1; margin: .25rem 0 .15rem; letter-spacing: -.02em; }
.calc__per { font-size: .92rem; color: rgba(255,255,255,.78); margin-bottom: 1.5rem; }
.calc__break { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.1rem; }
.calc__brow { display: flex; justify-content: space-between; gap: 1rem; font-size: .96rem; margin: .55rem 0; color: rgba(255,255,255,.82); }
.calc__brow b { color: #fff; font-weight: 600; }
.calc__brow--jeff b { color: var(--clay-hi); }
.calc__note { font-size: .78rem; color: rgba(255,255,255,.55); margin-top: 1.1rem; }
.calc__cta { margin-top: 1.5rem; }
.calc__disclaimer { text-align: center; max-width: 74ch; margin: 1.8rem auto 0; font-size: .78rem; color: var(--ink-soft); }
@media (max-width: 820px) {
  .calc { grid-template-columns: 1fr; }
  .calc__result { border-left: 0; border-top: 1px solid rgba(152,108,13,.3); }
}
@media (max-width: 520px) { .calc__adv { grid-template-columns: 1fr; } }

/* ---------- Mobile nav toggle ---------- */
.nav__toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line-d);
  background: transparent; border-radius: 4px; cursor: pointer;
  flex-direction: column; gap: 5px; align-items: center; justify-content: center;
}
.nav__toggle span { width: 18px; height: 2px; background: #fff; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.nav.open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav.is-stuck, .nav { background: rgba(8,8,10,.96); backdrop-filter: blur(12px); }
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }
  .nav__links {
    display: flex; position: absolute; top: 78px; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: .5rem var(--pad) 1.4rem;
    background: rgba(8,8,10,.98); border-top: 1px solid var(--line-d);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav__links a { padding: .95rem 0; border-bottom: 1px solid var(--line-d); font-size: 1rem; }
  .nav.open .nav__links { transform: none; opacity: 1; pointer-events: auto; }
  .hero { align-items: flex-end; }
  .hero__scrim { background: linear-gradient(180deg, rgba(8,8,10,.4) 0%, rgba(8,8,10,.35) 30%, rgba(8,8,10,.85) 85%); }
  .grid-2, .grid-2--sponsor { grid-template-columns: 1fr; }
  .feestate__lead { grid-template-columns: 1fr; text-align: left; }
  .paths, .feestate__cols { grid-template-columns: 1fr; }
  .areas, .quotes { grid-template-columns: 1fr 1fr; }
  .sponsor__media { max-width: 190px; }
  .qa__row { grid-template-columns: 1fr; gap: .8rem; padding: 2rem 0; }
  .qa__dot { display: none; }
}
@media (max-width: 600px) {
  .areas, .quotes { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .chips { gap: 1.6rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
}

/* ---------- Hero photo on portrait screens ----------
   The hero photo is 3:2 landscape. In a portrait viewport the hero box is roughly 1:2,
   and background-size:cover fills that box by scaling the photo until it covers the
   HEIGHT, which throws away about two thirds of its width. That is the "zoomed in" look.
   Cover always crops, so background-position cannot fix it.

   So on portrait screens the photo gets its own 3:2 band at the top of the hero, matching
   the image exactly (nothing is cropped, the whole house is visible), and the copy sits on
   the hero's own dark background underneath. The scrim fades the foot of the band into that
   background so it still reads as one hero rather than a photo with a caption.

   Landscape phones and tablets are deliberately left alone: their hero box is already wider
   than it is tall, so cover behaves and the full-bleed treatment is the better look. */
@media (max-width: 900px) and (orientation: portrait) {
  .hero { display: block; min-height: 0; }
  .hero__media { position: relative; inset: auto; width: 100%; aspect-ratio: 3 / 2; }
  .hero__photo { background-position: center center; }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(8,8,10,.34) 0%,
      rgba(8,8,10,.04) 34%,
      rgba(13,13,16,.55) 84%,
      var(--dark-800) 100%);
  }
  .hero__inner { padding-block: 2rem 3rem; }
  .hero__cue { display: none; }
}

/* =====================================================================
   Motion system  (impeccable /animate pass)
   Progressive enhancement: initial hidden states apply ONLY under html.anim
   (JS-set, with a load failsafe). No JS / reduced-motion => fully visible.
   ===================================================================== */
:root {
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
  --ease-out: var(--ease-out-expo);
}

.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--clay), var(--clay-hi));
}

.anim .reveal { opacity: 0; transform: translateY(30px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.anim .reveal.in { opacity: 1; transform: none; }

.anim .reveal--wipe { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--ease-out-quint); }
.anim .reveal--wipe.in { clip-path: inset(0 0 0 0); }
.anim .reveal--scale { opacity: 0; transform: scale(.95); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out-quint); }
.anim .reveal--scale.in { opacity: 1; transform: none; }

.anim .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.anim .stagger.in > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 60ms); }

.anim .ul-gold { background-size: 0% 2px; transition: background-size .95s var(--ease-out-quart) .15s; }
.anim .in .ul-gold, .anim .in.ul-gold { background-size: 100% 2px; }

[data-parallax] { will-change: transform; }

/* Hero: headline line-by-line mask reveal */
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line__in { display: block; }
.anim .hero__title .line__in { transform: translateY(115%); animation: lineUp 1s var(--ease-out-quint) both; }
.anim .hero__title .line:nth-child(1) .line__in { animation-delay: .22s; }
.anim .hero__title .line:nth-child(2) .line__in { animation-delay: .36s; }
@keyframes lineUp { to { transform: translateY(0); } }

.anim .hero-intro > *:not(.hero__title) { opacity: 0; animation: heroUp .85s var(--ease-out) both; }
.anim .hero-intro > *:nth-child(1) { animation-delay: .12s; }
.anim .hero-intro > *:nth-child(3) { animation-delay: .56s; }
.anim .hero-intro > *:nth-child(4) { animation-delay: .70s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Hero scroll cue */
.hero__cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: 26px; height: 42px; z-index: 3; border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 16px; display: grid; place-items: start center; opacity: .7;
  transition: opacity .3s var(--ease);
}
.hero__cue:hover { opacity: 1; }
.hero__cue span { width: 3px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--clay-hi); animation: cue 1.9s var(--ease) infinite; }
@keyframes cue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(13px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* Micro-interactions */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  transform: translateX(-130%); transition: transform .7s var(--ease-out-quart);
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.28) 50%, transparent 66%);
}
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(0) scale(.985); }

.path { transition: transform .35s var(--ease-out-quint), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out); }
.path:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -26px rgba(0,0,0,.6); border-color: rgba(198,154,52,.5); }

.nav--hidden { transform: translateY(-100%); }
.nav__links a.active { color: #fff; }
.nav__links a.active::after { width: 100%; }

.faq__item[open] .faq__a { animation: faqIn .45s var(--ease-out-quart); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Modals (native dialog) ---------- */
.modal {
  border: 0; padding: 0; position: fixed; inset: 0; margin: auto;
  max-width: 520px; width: calc(100% - 2rem); max-height: calc(100dvh - 2rem);
  background: transparent; color: var(--ink);
}
.modal::backdrop { background: rgba(20, 24, 15, .62); backdrop-filter: blur(3px); }
.modal__form {
  position: relative; background: var(--paper); border-radius: 8px; border-top: 4px solid var(--clay);
  padding: clamp(1.8rem, 4vw, 2.6rem); display: grid; gap: 1.1rem;
  box-shadow: 0 40px 100px -34px rgba(0, 0, 0, .6);
  max-height: calc(100dvh - 2rem); overflow-y: auto;
}
.modal__title { font-family: var(--display); font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin-bottom: .1rem; }
.modal__form .body { margin-top: 0; }
.modal__close {
  position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-l); background: transparent; color: var(--ink-soft);
  font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease);
}
.modal__close:hover { background: var(--mist); color: var(--ink); }
.modal[open] { animation: modalIn .32s var(--ease-out-quart); }
.modal[open]::backdrop { animation: modalFade .32s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.field[hidden] { display: none; }

/* ---------- Reduced motion: everything static, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim .reveal, .anim .reveal--wipe, .anim .reveal--scale, .anim .stagger > *,
  .anim .hero-intro > *:not(.hero__title), .anim .hero__title .line__in {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    transition: none !important; animation: none !important;
  }
  .anim .ul-gold { background-size: 100% 2px !important; transition: none; }
  .hero__cue span { animation: none; }
  [data-parallax] { transform: none !important; }
  .btn::after { display: none; }
  .modal[open], .modal[open]::backdrop { animation: none; }
  .path__cta span { transition: none; }
  html { scroll-behavior: auto; }
}