/* ── Redress: short-term rental management ─────────────────────────────
   Layout and components modeled on atlia.com (split hero with app mock,
   pill CTAs, two-mode ROI calculator, orbit "property brain", hairline
   cards); palette and type are the Redress house system: ink/paper/bronze,
   PP Editorial New display over PP Neue Montreal. */

/* ── Fonts ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --dark:       #1c1a17;  /* ink: hero surface */
  --dark-deep:  #11100e;  /* closing + footer */
  --dark-card:  #24211d;  /* result card on the warm section */
  --offwhite:   #f6f4ef;  /* paper */
  --sage:       #efebe1;  /* warm alt-section tone (Atlia's sage, in bronze) */
  --white:      #ffffff;

  --ink:        #1c1a17;
  --head:       #1c1a17;
  --mut:        #57534b;  /* secondary on light */
  --mut-dark:   #a5a099;  /* secondary on dark */

  --bronze:       #d3b384;
  --bronze-ink:   #8a6a3a;
  --line:       rgba(0, 0, 0, .09);
  --line-dark:  rgba(255, 255, 255, .12);

  --serif: "PP Editorial New", Georgia, "Times New Roman", serif;
  --sans:  "PP Neue Montreal", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --wrap: 1120px;
  --pad:  clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--dark-deep);
  scroll-padding-top: 110px;
}
/* Smooth scrolling only once something in the page has focus (clicking an
   anchor link counts). A bare `html { scroll-behavior: smooth }` also
   animates the browser's scroll restoration, so every reload visibly
   scrolls itself back down the page. */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--narrow { max-width: 800px; }

.page-section { padding-block: clamp(64px, 9vw, 110px); }

.section-title {
  font-family: var(--serif);
  font-size: clamp(30px, 3.8vw, 40px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: normal;
  color: var(--head);
}
.section-title--center { text-align: center; }
/* The house accent: an italic serif aside in bronze. */
.section-title em,
.closing__title em {
  font-style: italic;
  color: var(--bronze-ink);
}
.closing__title em { color: var(--bronze); }
.hero__title-dot { color: var(--bronze); }

.lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin-top: 18px;
  max-width: 56ch;
}
.lede--muted { color: var(--mut); }
.lede--center { margin-inline: auto; text-align: center; }

/* ── Pills ──────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 10px 18px;
  transition: background-color .18s ease, color .18s ease;
}
.pill--lg { font-size: 15px; padding: 13px 24px; }
.pill--green {
  background: var(--offwhite);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .18);
}
.pill--green:hover { background: #fff; }
.pill--dark {
  background: var(--dark);
  color: var(--offwhite);
  border: 1px solid rgba(255, 255, 255, .1);
  margin-top: 26px;
}
.pill--dark:hover { background: #35322c; }
.pill__arrow { transition: transform .18s ease; }
.pill:hover .pill__arrow { transform: translateX(3px); }

/* ── Nav ────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: 26px;
  transition: background-color .3s ease, padding .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled {
  background: rgba(17, 16, 14, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding-block: 14px;
  box-shadow: 0 1px 0 var(--line-dark);
}
.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav__logo { margin-right: auto; display: flex; align-items: center; }
.nav__logo img { display: block; height: 30px; width: auto; }
.nav__links {
  display: flex;
  gap: 28px;
  font-size: 14.5px;
  color: rgba(246, 244, 239, .78);
}
.nav__links a { transition: color .18s ease; }
.nav__links a:hover { color: var(--offwhite); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(90% 120% at 85% 10%, rgba(211, 179, 132, .16) 0%, rgba(211, 179, 132, 0) 55%),
    linear-gradient(180deg, #2a2620 0%, var(--dark) 55%, var(--dark-deep) 100%);
  color: var(--offwhite);
  overflow: hidden;
}
.hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 150px var(--pad) 0;
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__copy {
  padding-bottom: 72px;
  animation: hero-rise .9s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.hero__title {
  font-family: var(--serif);
  font-size: clamp(40px, 5.2vw, 62px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: .012em;
  max-width: 14ch;
}
.hero__sub {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(246, 244, 239, .78);
  max-width: 46ch;
}
.hero__ctas { margin-top: 32px; }
.hero__kicker {
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* Hero media column: a real property photo with the product mock's glass
   cards floating over it, standing in for a product video. */
.hero__media {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-photo {
  position: relative;
  width: min(360px, 100%);
  animation: hero-rise .9s .15s cubic-bezier(.22, .8, .3, 1) both;
}
/* The frame clips the slow push-in; the glass cards hang outside it. */
.hero-photo__frame {
  border-radius: 18px;
  border: 1px solid rgba(246, 244, 239, .14);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.hero-photo__frame img {
  display: block;
  width: 100%;
  height: auto;
  /* A slow push-in, in place of the product video's motion. */
  animation: ken-burns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
/* Ink glass, not paper glass: the cards sit on photography now, so they
   need a darker ground to keep their type readable over bright windows. */
.mock-card {
  background: rgba(24, 22, 19, .62);
  border: 1px solid rgba(246, 244, 239, .16);
  border-radius: 14px;
  padding: 14px;
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.mock-card--property {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
}
.mock-card--msg {
  position: absolute;
  left: -34px;
  bottom: 120px;
  width: 236px;
}
.mock-card--payout {
  position: absolute;
  right: -26px;
  bottom: -20px;
  width: 232px;
}
.mock-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mock-card__title { font-size: 14.5px; }
.mock-card__sub   { font-size: 12px; color: var(--mut-dark); margin-top: 3px; }
.mock-chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
}
.mock-chip--live {
  background: rgba(211, 179, 132, .2);
  color: var(--bronze);
  border: 1px solid rgba(211, 179, 132, .45);
}
.mock-msg__from  { font-size: 11px; color: var(--mut-dark); }
.mock-msg__text  { font-size: 14px; margin-top: 5px; }
.mock-msg__reply {
  font-size: 12px;
  color: var(--bronze);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(246, 244, 239, .08);
}
.mock-payout__label  { font-size: 11px; color: var(--mut-dark); }
.mock-payout__amount {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: normal;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.mock-payout__note { font-size: 12px; color: var(--mut-dark); margin-top: 5px; }
.mock-payout__note span { color: var(--bronze); }

/* ── Full-service blurb ─────────────────────────────────────────────── */
.product-blurb { background: var(--offwhite); text-align: center; }
.product-blurb .lede { margin-inline: auto; }

/* Three properties under management: the middle one rides higher, so the
   row reads as a hand-laid spread rather than a grid. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  margin-top: clamp(40px, 5vw, 60px);
}
.gallery__item {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(28, 26, 23, .14);
}
.gallery__item--lift { transform: translateY(-22px); }
.gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s ease;
}
.gallery__item:hover img { transform: scale(1.04); }

/* ── ROI calculator ─────────────────────────────────────────────────── */
.roi { background: var(--sage); }
.roi__head { max-width: 620px; margin-bottom: 40px; }

.roi__tabs {
  display: inline-flex;
  gap: 4px;
  background: rgba(28, 26, 23, .06);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 36px;
}
.roi__tab {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--mut);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.roi__tab.is-active {
  background: var(--white);
  color: var(--head);
  box-shadow: 0 1px 4px rgba(28, 26, 23, .1);
}

.roi__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
/* Tab swap: the grid re-fades when the mode changes. */
.roi__grid.is-swapping { animation: roi-swap .36s ease; }
@keyframes roi-swap {
  from { opacity: .35; }
  to   { opacity: 1; }
}

.roi__control {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 24px 18px;
}
.roi__control + .roi__control { margin-top: 16px; }
.roi__control-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.roi__control-head label { font-size: 14px; color: var(--mut); }
.roi__control-head output {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: normal;
  color: var(--head);
  font-variant-numeric: tabular-nums;
}
.roi__control input[type="range"] {
  width: 100%;
  accent-color: var(--bronze-ink);
  cursor: grab;
}
.roi__control input[type="range"]:active { cursor: grabbing; }
.roi__scale {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--mut);
  margin-top: 6px;
}

.roi__result {
  background: var(--dark-card);
  color: var(--offwhite);
  border-radius: 8px;
  padding: 28px;
}
.roi__result-lead {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
}
.roi__result-big {
  font-family: var(--serif);
  font-size: clamp(40px, 4.6vw, 56px);
  letter-spacing: normal;
  line-height: 1;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.roi__result-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mut-dark);
  margin-top: 12px;
  max-width: 34ch;
}
.roi__rows { margin-top: 24px; border-top: 1px solid var(--line-dark); }
.roi__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 14px;
}
.roi__row dt { color: var(--mut-dark); }
.roi__row dd { font-variant-numeric: tabular-nums; }
.roi__row--hl dt, .roi__row--hl dd { color: var(--bronze); }
.roi__result-note { font-size: 11.5px; color: var(--mut-dark); margin-top: 16px; line-height: 1.5; }

/* ── Workload stats ─────────────────────────────────────────────────── */
.ops { background: var(--white); }
.ops__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ops__photo {
  margin: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(28, 26, 23, .18);
}
.ops__photo img { display: block; width: 100%; height: auto; }
.ops__photo-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(24, 22, 19, .62);
  border: 1px solid rgba(246, 244, 239, .16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--offwhite);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ops__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: clamp(28px, 4vw, 40px);
}
.ops__stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 20px 22px;
  background: var(--offwhite);
}
.ops__figure {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 38px);
  letter-spacing: normal;
  color: var(--head);
  font-variant-numeric: tabular-nums;
}
.ops__label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mut);
  margin-top: 8px;
}
.ops__source {
  font-size: 12px;
  font-weight: 400;
  color: var(--mut);
  margin-top: 26px;
  max-width: 68ch;
  line-height: 1.55;
}

/* ── Property brain ─────────────────────────────────────────────────── */
/* overflow: the orbit's edge labels overhang the box on narrow screens;
   clip here so they never widen the page. */
.brain { background: var(--offwhite); overflow: hidden; }
.brain__head { max-width: 620px; }
.brain__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 56px);
}

.brain__orbit {
  position: relative;
  aspect-ratio: 1;
  max-width: 420px;
  margin-inline: auto;
  width: 100%;
}
.orbit-ring {
  position: absolute;
  border: 1px dashed rgba(28, 26, 23, .2);
  border-radius: 50%;
}
.orbit-ring--outer { inset: 6%; }
.orbit-ring--inner { inset: 24%; animation: orbit-spin 50s linear infinite; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* A bronze satellite riding the outer ring: the track is an invisible disc
   the same size as the ring, spun slowly, with the dot pinned to its top. */
.orbit-track {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  animation: orbit-spin 24s linear infinite;
}
.orbit-satellite {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--bronze-ink);
  box-shadow: 0 0 0 5px rgba(211, 179, 132, .28);
}

.orbit-center {
  position: absolute;
  inset: 36%;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, #35312a 0%, var(--dark) 55%);
  color: var(--offwhite);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  border: 1px solid rgba(211, 179, 132, .35);
  box-shadow:
    0 12px 36px rgba(28, 26, 23, .28),
    inset 0 0 0 5px rgba(246, 244, 239, .04);
}
.orbit-center img { display: block; height: 20px; width: auto; opacity: .95; }

/* The stops: real buttons, seated on the ring, synced with the card. */
.orbit-chip {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  transform: translate(-50%, -50%);
  font: inherit;
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--bronze-ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(28, 26, 23, .06);
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}
.orbit-chip:hover {
  border-color: rgba(138, 106, 58, .5);
  box-shadow: 0 4px 14px rgba(28, 26, 23, .12);
}
.orbit-chip.is-active {
  background: var(--dark);
  color: var(--offwhite);
  border-color: var(--dark);
  box-shadow: 0 6px 18px rgba(28, 26, 23, .28);
}

.brain__detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 30px 32px;
  min-height: 240px;
}
.brain__detail.is-swapping { animation: roi-swap .36s ease; }
.brain__detail-tag {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze-ink);
}
.brain__detail-title {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--head);
  margin-top: 12px;
}
.brain__detail-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mut);
  margin-top: 10px;
  max-width: 44ch;
}
.brain__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.brain__dots { display: flex; gap: 8px; }
.brain__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(28, 26, 23, .18);
  cursor: pointer;
  transition: background-color .3s ease, transform .3s ease;
}
.brain__dots button.is-on { background: var(--bronze-ink); transform: scale(1.3); }
.brain__arrows { display: flex; gap: 8px; }
.brain__arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  font-size: 15px;
  color: var(--head);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.brain__arrow:hover {
  background: var(--dark);
  color: var(--offwhite);
  border-color: var(--dark);
}

/* ── Who it's for ───────────────────────────────────────────────────── */
.who { background: var(--offwhite); border-top: 1px solid var(--line); }
.who .wrap {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.who__photo {
  margin: 30px 0 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(28, 26, 23, .14);
}
.who__photo img { display: block; width: 100%; height: auto; }

.who__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.who__item {
  display: flex;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.who__item:first-child { padding-top: 6px; }
.who__num {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(138, 106, 58, .5);
  color: var(--bronze-ink);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 15px;
}
.who__title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--head);
}
.who__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mut);
  margin-top: 8px;
  max-width: 52ch;
}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { background: var(--white); }
.faq__list { margin-top: 34px; }
.faq__item  { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 2px;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: normal;
  color: var(--head);
  cursor: pointer;
  list-style: none;
  transition: color .18s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: "\203A";
  flex: none;
  color: var(--bronze-ink);
  font-size: 20px;
  line-height: 1;
  transition: transform .25s ease;
}
.faq__item[open] .faq__q::before { transform: rotate(90deg); }
.faq__q:hover { color: var(--bronze-ink); }
.faq__a {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mut);
  padding: 0 2px 22px 36px;
  max-width: 62ch;
}

/* ── Closing ────────────────────────────────────────────────────────── */
/* A real property at dusk behind an ink scrim: the photo carries the
   warmth, the scrim keeps the type on top of it. */
.closing {
  position: relative;
  overflow: hidden;
  background: var(--dark-deep);
  color: var(--offwhite);
  text-align: center;
  padding-block: clamp(96px, 13vw, 170px);
}
.closing__bg {
  position: absolute;
  inset: 0;
  background-image: url("img/closing-villa.jpg");
  background-size: cover;
  background-position: center 65%;
}
.closing__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(17, 16, 14, .92) 0%, rgba(17, 16, 14, .66) 50%, rgba(17, 16, 14, .9) 100%),
    rgba(17, 16, 14, .18);
}
.closing__inner { position: relative; }
.closing__title {
  font-family: var(--serif);
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: normal;
  max-width: 22ch;
  margin-inline: auto;
}
.closing__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mut-dark);
  max-width: 46ch;
  margin: 18px auto 32px;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer {
  background: var(--dark-deep);
  color: var(--mut-dark);
  border-top: 1px solid var(--line-dark);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr);
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(44px, 6vw, 64px) 36px;
}
.footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__bird { display: block; height: 28px; width: auto; }
.footer__word {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--offwhite);
}
.footer__blurb { font-size: 14px; line-height: 1.6; margin-top: 12px; max-width: 34ch; }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.footer__head {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin-bottom: 16px;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.footer__col a { transition: color .18s ease; }
.footer__col a:hover { color: var(--offwhite); }
.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 18px;
  border-top: 1px solid var(--line-dark);
  font-size: 12.5px;
}
.footer__legal-links { display: flex; gap: 20px; }
.footer__legal a:hover { color: var(--offwhite); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .nav__links { display: none; }

  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 130px;
  }
  .hero__copy { padding-bottom: 0; }
  .hero__media { padding-bottom: 72px; }
  .hero-photo { width: min(380px, 100%); margin-inline: auto; }
  /* No room to hang off the edges on a phone: tuck the cards inside. */
  .mock-card--msg    { left: 12px; bottom: 122px; }
  .mock-card--payout { right: 12px; bottom: -18px; }

  .roi__grid { grid-template-columns: 1fr; }
  .ops__grid { grid-template-columns: 1fr; }
  /* Copy first on a phone; the photo follows it. */
  .ops__photo { order: 2; max-width: 480px; }
  .ops__stats { grid-template-columns: 1fr; }
  .brain__grid { grid-template-columns: 1fr; }
  .who .wrap { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }

  .gallery { gap: 12px; margin-inline: calc(-1 * var(--pad) / 2); }
  .gallery__item--lift { transform: translateY(-10px); }

  .roi__tabs { display: flex; width: 100%; }
  .roi__tab { flex: 1; padding-inline: 10px; }
}

@media (max-width: 560px) {
  .orbit-chip { font-size: 10.5px; padding: 5px 9px; }
  .orbit-center { font-size: 9.5px; letter-spacing: .12em; }
  .orbit-center img { height: 16px; }
  .brain__detail { padding: 24px 22px; }
  .faq__a { padding-left: 0; }
  .footer__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}