/* ==========================================================================
   Pavilion — audience pages: Homeowners (homeowners.html) and
   Property Managers (property-managers.html). Shared sections live here;
   <body class="theme-homeowner | theme-pm"> switches the accent colors.
   Figma: "Homeowners – Desktop (1440)" / "For Homeowners – Mobile (402)",
          "Property Managers – Desktop (1440)" / "For Property Managers – Mobile (402)"
   ========================================================================== */

.theme-homeowner { --band: var(--color-purple-100); --pill: var(--color-purple-200); --dot-accent: var(--color-purple-300); }
.theme-pm        { --band: var(--color-blue-200);   --pill: var(--color-blue-200);   --dot-accent: var(--color-blue-300); }

/* ---------- Hero: wide photo band, then title (+ stats) ---------- */
.ahero {
  --img-w: 112.2%;                   /* Figma: 1616-wide image in a 1440 frame */
  --img-ratio: 1616 / 692;
  background: var(--color-gray-100); overflow: hidden;
  padding: 20px var(--gutter) 80px; display: flex; flex-direction: column; align-items: center;
}
.theme-pm .ahero { --img-w: 115.3%; --img-ratio: 1660 / 664; background: linear-gradient(180deg, var(--color-gray-100), var(--color-off-white)); padding-bottom: 128px; }
.ahero__media { display: block; width: var(--img-w); max-width: none; aspect-ratio: var(--img-ratio); flex: none; }   /* transparent PNG/WebP: page background shows through */
.ahero__media img { width: 100%; height: 100%; object-fit: cover; }
.ahero__intro { width: min(846px, 100%); display: flex; flex-direction: column; align-items: center; gap: 80px; text-align: center; }
.theme-pm .ahero__intro { gap: 48px; }
.ahero__lede { max-width: 628px; color: var(--color-black); }
.ahero__stats { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.stat { width: 229px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.stat + .stat { border-left: 1px solid var(--color-gray-300); margin-left: 40px; padding-left: 40px; box-sizing: content-box; }
.stat__pill {
  display: inline-flex; align-items: center; min-height: 54px; padding: 0 24px; border-radius: 999px;
  background: var(--pill); font-size: var(--fs-body-xl); line-height: 1; color: var(--color-black);
}
.stat__label { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--color-gray-400); text-wrap: balance; }
.ahero__cta { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.btn--maroon.btn--cream { color: var(--color-yellow-100); }

/* ---------- Split: text + illustration ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;
  padding: 80px 32px 0; background: var(--color-white);
}
.split__text { display: flex; flex-direction: column; gap: 48px; max-width: 422px; margin: 0 auto; }
.split__art { display: flex; justify-content: center; }
.split__art img { width: min(676px, 100%); height: auto; }
.split--reverse .split__art { order: -1; }
.split--believe .split__text { text-align: center; align-items: center; }
.split--pm { background: var(--color-off-white); padding-bottom: 80px; }
.split--pm .split__text { max-width: 518px; }
.split--pm .split__art img { width: min(606px, 100%); }

/* ---------- Three promises (yellow band) ---------- */
.features { background: var(--color-white); }
.features__track {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px;
  padding: 40px 48px 128px;   /* Figma: the yellow fill on this frame is hidden */
}
.feature { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.feature__art { height: 185px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.feature__art img { max-height: 185px; width: auto; mix-blend-mode: multiply; }
.feature .t-body { max-width: 352px; }

/* ---------- Homes carousel ---------- */
.homes { background: var(--band); padding: 80px 0 64px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.homes__title { text-align: center; padding: 0 40px; }
.homes__track {
  width: 100%; display: flex; gap: 20px; padding: 0 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
}
@media (min-width: 1760px) { .homes__track { justify-content: center; } }
.home-card {
  flex: 0 0 328px; scroll-snap-align: start; background: var(--color-white); border-radius: 30px; padding: 16px;
  display: flex; flex-direction: column;
}
.home-card__media { position: relative; aspect-ratio: 296 / 177; border-radius: 10px; overflow: hidden; background: var(--color-gray-200); margin-bottom: 20px; }
.home-card__media img { width: 100%; height: 100%; object-fit: cover; }
.home-card__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }   /* same 30% scrim as the company tiles, so the white location reads on bright photos */
.home-card__media .t-h5 { z-index: 1; }
.home-card__media .t-h5 {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 60px; text-align: center;
  color: var(--color-white); text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}
.home-card .t-label { margin-bottom: 20px; }
.home-card__value { font-size: clamp(34px, 34px + 14 * var(--fluid), 48px); line-height: 1.1; letter-spacing: -.02em; color: var(--color-black); text-box: trim-both cap alphabetic; margin-bottom: 80px; }
.home-card__company {
  align-self: flex-end; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--color-gray-200); border-radius: 999px; font-size: 14px; color: var(--color-black);
}
.homes .dots { --dot: var(--dot-accent); }
@media (min-width: 1100px) { .homes__track[data-carousel-center] .home-card { scroll-snap-align: center; } }

/* ---------- Full-service grid ---------- */
.services { background: var(--color-off-white); padding: 80px 32px; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.services__grid { width: min(1062px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 64px; }
.service { border-top: 1px solid var(--color-gray-300); padding-top: 20px; display: flex; flex-direction: column; gap: 22px; }
.service__text { display: flex; flex-direction: column; gap: 24px; }
.service__text .t-body-lg { color: var(--color-black); font-weight: 400; }

/* ---------- Advantage cards ---------- */
.advantage { background: var(--color-off-white); padding: 96px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 64px; }
.advantage__grid { width: min(1280px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.adv-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.adv-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 32px; min-height: 114px; }
.adv-card__head .t-h5 { color: var(--color-black); }
.adv-card--orange .adv-card__head { background: var(--color-orange-200); } .adv-card--orange .icon-circle { background: var(--color-orange-300); }
.adv-card--purple .adv-card__head { background: var(--color-purple-200); } .adv-card--purple .icon-circle { background: var(--color-purple-300); }
.adv-card--blue .adv-card__head   { background: var(--color-blue-200); }   .adv-card--blue .icon-circle   { background: var(--color-blue-300); }
.adv-card--yellow .adv-card__head { background: var(--color-yellow-200); } .adv-card--yellow .icon-circle { background: var(--color-yellow-300); }
.adv-card__body { padding: 40px 32px 32px; display: flex; flex-direction: column; gap: 40px; flex: 1; }
.adv-card__with, .adv-card__others { display: flex; flex-direction: column; gap: 18px; }
.adv-card__with .t-label { color: var(--color-black); }
.adv-card__others { margin-top: auto; border-top: 1px solid var(--color-gray-200); padding-top: 18px; }
.adv-card__others .t-label, .adv-card__others .t-body { color: var(--color-gray-400); }

/* ---------- Quote ---------- */
.quote { background: var(--band); padding: 80px var(--gutter); }
.quote__inner { margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 80px; max-width: 1280px; }
.quote__img { width: 304px; height: 304px; flex: none; border-radius: 37px; object-fit: cover; background: var(--color-maroon); }
.quote__text { display: flex; flex-direction: column; gap: 40px; max-width: 570px; }
.quote__text blockquote { margin: 0; }
.theme-homeowner .quote__text { max-width: 463px; }


/* ---------- Steps / accordions beside art ---------- */
.steps { background: var(--color-off-white); padding: 80px var(--gutter); }
.steps__label { color: var(--color-black); margin-bottom: 20px; max-width: 1280px; margin-inline: auto; }
.steps__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.steps__left { display: flex; flex-direction: column; gap: 40px; }
.steps__art { width: min(412px, 100%); height: auto; }
.steps__right { display: flex; flex-direction: column; gap: 80px; }
.steps__right .t-body-lg { color: var(--color-black); }

/* Text + accordions beside an illustration (PM) */
.model { background: var(--color-off-white); padding: 80px var(--gutter); }
.model__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.model__text { display: flex; flex-direction: column; gap: 80px; }
.model__intro { display: flex; flex-direction: column; gap: 48px; }
.model__art { display: flex; align-items: flex-start; }
.model__art img { width: min(512px, 100%); height: auto; }
.model--art-left .model__art { order: -1; }

/* ---------- PM: overview + results ---------- */
.overview { background: var(--color-blue-200); padding: 80px var(--gutter); }
.overview__inner { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.overview__inner > .t-label { color: var(--color-black); }
.overview__label-results { padding-top: 20px; }
.overview__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.overview__row--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ov-card { border-radius: 20px; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ov-card--yellow { background: var(--color-yellow-200); } .ov-card--yellow .icon-circle { background: var(--color-yellow-300); }
.ov-card--purple { background: var(--color-purple-200); } .ov-card--purple .icon-circle { background: var(--color-purple-300); }
.ov-card--orange { background: var(--color-orange-200); } .ov-card--orange .icon-circle { background: var(--color-orange-300); }
.ov-card--brown { background: var(--color-brown-200); }
.ov-card__badge { width: 45px; height: 50px; flex: none; }
.ov-card__text { display: flex; flex-direction: column; gap: 16px; }
.ov-card__num { font-size: clamp(26px, 26px + 6 * var(--fluid), 32px); line-height: 1.2; letter-spacing: -.02em; color: var(--color-black); text-box: trim-both cap alphabetic; }
.ov-card .t-body { color: var(--color-black); }
.result { background: var(--color-white); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 40px; }
.result__head { display: flex; flex-direction: column; gap: 20px; }
.result__num { font-size: clamp(40px, 40px + 16 * var(--fluid), 56px); line-height: 1; letter-spacing: -.02em; color: var(--color-black); text-box: trim-both cap alphabetic; }
.result__head .t-body { color: var(--color-black); }
.result > .t-body { color: var(--text-muted); }   /* Figma: Black @ 66% */

/* ---------- PM: leadership ---------- */
.team { background: var(--color-off-white); padding: 80px 72px; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.team__head { display: flex; flex-direction: column; align-items: center; gap: 48px; text-align: center; max-width: 628px; }
.team__head .t-label { color: var(--color-black); }
.team__grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 20px; max-width: 1140px; }
.person { width: 212px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.person__photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; background: var(--color-maroon); }
.person__text { display: flex; flex-direction: column; gap: 12px; }
.person__name { color: var(--color-black); }
.person__role { color: var(--color-gray-400); }
.person__link { display: inline-flex; opacity: .8; }
.person__link:hover { opacity: 1; }
.person__link img { width: 24px; height: 24px; }
.team__hint { display: none; }

/* ---------- Form section ---------- */
.form-section { background: var(--color-off-white); padding: 80px var(--gutter) 128px; display: grid; grid-template-columns: 353px minmax(0, 1fr); gap: 80px; max-width: var(--page-max); margin: 0 auto; }
.form-section__intro { display: flex; flex-direction: column; gap: 40px; }
.theme-pm .form-section__intro { gap: 48px; }
.cf-title { color: var(--color-black); padding-bottom: 20px; }
.contact-form--homeowner { --form-bg: var(--color-purple-200); --field-bg: var(--color-purple-100); }
.contact-form--pm { --form-bg: var(--color-blue-200); --field-bg: var(--color-blue-100); }
.cf-textarea--tall { min-height: 112px; }

/* ==========================================================================
   TABLET 768–1099
   ========================================================================== */
@media (max-width: 1099px) {
  .ahero__stats { gap: 0; }
  .stat { width: auto; flex: 1; max-width: 229px; }
  .stat + .stat { margin-left: 24px; padding-left: 24px; }
  .split { grid-template-columns: 1fr; padding: 80px var(--gutter) 0; gap: 48px; }
  .split__text { margin: 0; max-width: 560px; }
  .split--reverse .split__art { order: 0; }
  .features__track { gap: 32px; padding: 40px 32px 80px; }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
  .advantage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote__inner { gap: 48px; }
  .quote__img { width: 240px; height: 240px; }
  .steps__grid, .model__grid { grid-template-columns: 1fr; gap: 48px; }
  .model__art { order: 2; }
  .model--art-left .model__art { order: 2; }
  .overview__row { gap: 12px; }
  .overview__row--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-card { padding: 24px; min-height: 0; }
  .team { padding-inline: var(--gutter); }
  .form-section { grid-template-columns: 1fr; gap: 40px; padding-bottom: 96px; }
  .form-section__intro { max-width: 560px; }
}

/* ==========================================================================
   MOBILE < 768 — multi-card rows become swipe carousels with dots
   ========================================================================== */
@media (max-width: 767px) {
  .ahero { --img-w: 118.4%; --img-ratio: 476 / 217; padding: 0 0 64px; }
  .theme-pm .ahero { --img-w: 134.8%; --img-ratio: 542 / 217; padding: 0 0 64px; }
  .ahero__media { margin-bottom: 0; }
  .ahero__intro { gap: 40px; padding: 0 20px 0 30px; align-items: flex-start; text-align: left; }
  .theme-pm .ahero__intro { padding: 24px 20px 0; gap: 40px; }
  .ahero__intro .t-h1 { margin-top: 0; }
  .ahero__stats { flex-direction: column; gap: 8px; width: 100%; }
  .stat { flex-direction: row; gap: 10px; width: 100%; max-width: none; justify-content: center; }   /* Figma: each row centred */
  .stat + .stat { border: 0; margin: 0; padding: 0; }
  .stat__pill { min-height: 35px; padding: 0 16px; font-size: 18px; flex: none; }
  .stat__label { font-size: 16px; text-align: left; }
  .ahero__cta { align-items: flex-start; }

  .split { padding: 64px 20px; gap: 32px; }
  .split__text { gap: 40px; }
  .split--pm { padding: 40px 20px; }
  .split--pm .split__art img { width: 212px; }

  .features { padding: 8px 0 0; }
  .features__track {
    display: flex; gap: 12px; background: none; border-radius: 16px; padding: 8px 20px 24px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
  }
  .feature { flex: 0 0 260px; scroll-snap-align: start; gap: 20px; }
  .feature__art { height: 140px; margin-bottom: 0; }
  .feature__art img { max-height: 140px; }
  .features .dots { padding: 4px 0 40px; }

  .homes { padding: 64px 0; gap: 40px; }
  .home-card { flex: 0 0 250px; border-radius: 16px; padding: 12px; }
  .home-card__media { border-radius: 8px; margin-bottom: 15px; }
  .home-card__media .t-h5 { padding: 0 50px; }
  .home-card .t-label { margin-bottom: 15px; }
  .home-card__value { font-size: 26px; margin-bottom: 60px; }
  .home-card__company { min-height: 33px; padding: 0 15px; font-size: 11px; }
  .homes__track { gap: 12px; }

  .services { padding: 64px 0; gap: 24px; }
  .services .section-head { padding: 0 20px; }
  .services__grid {
    display: flex; gap: 12px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; width: 100%;
  }
  .service { flex: 0 0 260px; scroll-snap-align: start; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 16px; padding: 24px; gap: 20px; }
  .service__text { gap: 20px; }

  .advantage { padding: 64px 0; gap: 24px; }
  .advantage .section-head { padding: 0 20px; }
  .section-head__lede { margin-top: 20px; }
  .advantage__grid { display: flex; gap: 12px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; }
  .adv-card { flex: 0 0 280px; scroll-snap-align: start; border-radius: 16px; }
  .adv-card__head { padding: 24px 24px 20px; min-height: 94px; }
  .adv-card__body { padding: 20px 24px 24px; gap: 28px; }
  .adv-card__with, .adv-card__others { gap: 14px; }
  .adv-card__others { padding-top: 14px; }

  .quote { padding: 64px 20px 40px; }
  .theme-pm .quote { padding: 40px; }
  .quote__inner { flex-direction: column; align-items: center; text-align: center; gap: 24px; }   /* Figma: centred on mobile (both pages) */
  .quote__img { width: 160px; height: 160px; border-radius: 16px; }
  .quote__img--hide-mobile { display: none; }
  .theme-homeowner .quote__inner { align-items: center; text-align: center; }
  .theme-homeowner .quote__text { align-items: center; }
  .quote__text { gap: 40px; }

  .steps, .model { padding: 64px 20px; }
  .theme-pm .model { padding: 40px 20px 64px; }
  .steps__label { margin-bottom: 16px; }
  .steps__grid { gap: 24px; }
  .steps__left { display: contents; }
  .steps__left .t-h2 { order: 0; }
  .steps__right { order: 1; gap: 32px; }
  .steps__art { order: 2; justify-self: center; width: min(362px, 100%); }
  .model__text { gap: 32px; }
  .model__art { display: none; }   /* Figma mobile drops these illustrations */
  .model__intro { gap: 32px; }

  .overview { background: var(--color-off-white); padding: 64px 0; }
  .overview__inner > .t-label { padding: 0 20px; }
  .overview__row--stats { grid-template-columns: 1fr; gap: 12px; padding: 0 20px; }
  .ov-card { flex-direction: row; align-items: center; padding: 20px; border-radius: 16px; }
  .ov-card__text { gap: 12px; }
  .overview__row--results { display: flex; gap: 12px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; }
  .result { flex: 0 0 270px; scroll-snap-align: start; padding: 24px; border-radius: 16px; background: var(--color-blue-300); }   /* Figma mobile: Blue-300 */

  .team { padding: 64px 0; gap: 32px; }
  .team__head { padding: 0 20px; gap: 48px; align-items: center; text-align: center; }
  .team__grid {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 160px;
    gap: 28px 12px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    justify-content: start; max-width: 100%; width: 100%;
  }
  .person { width: 160px; scroll-snap-align: start; align-items: flex-start; text-align: left; gap: 16px; }
  .person__photo { width: 120px; height: 120px; }
  .team__hint { display: block; padding: 0 20px; color: var(--color-maroon); align-self: center; text-align: center; }

  .form-section { padding: 64px 20px; gap: 32px; }
  .theme-pm .form-section { padding-top: 40px; }
  .form-section__intro { gap: 40px; }
  .cf-title { padding-bottom: 20px; }
  .cf-textarea--tall { min-height: 100px; }
}

@media (min-width: 1441px) {
  .split { padding-inline: calc((100% - 1440px) / 2 + 32px); }
  .features { padding-inline: calc((100% - 1440px) / 2); }
  .services { padding-inline: calc((100% - 1440px) / 2 + 32px); }
  .team { padding-inline: calc((100% - 1440px) / 2 + 72px); }
  .form-section { padding-inline: 80px; }
}

/* ---------- Homeowners mobile: "Find a Pavilion company near you." ----------
   Figma "For Homeowners – Mobile (402)" → Companies module / Mobile:
   40 between headline and intro, 40 between blocks, 64/40 padding, divider below. */
@media (max-width: 767px) {
  [data-page="homeowners"] .companies { padding: 64px 0 40px; gap: 40px; border-bottom: 1px solid var(--color-gray-200); }
  [data-page="homeowners"] .companies__head { gap: 40px; }
}

/* ---------- Mobile alignment + dividers (Figma "For Homeowners – Mobile" / "Property Managers – Mobile") ---------- */
@media (max-width: 767px) {
  .quote__text { align-items: center; }
  .theme-homeowner .ahero__intro { align-items: center; text-align: center; padding: 0 20px; }
  .theme-homeowner .ahero__cta { align-items: center; }
  /* 1px Gray/200 divider below these modules */
  .theme-pm .overview, .split--pm, .theme-homeowner .services { border-bottom: 1px solid var(--color-gray-200); }
}


/* ==========================================================================
   Oct 2026 Figma update — hero CTA on both pages, shared Pavilion Overview
   module (HO + PM), HO homes carousel restyle.
   Figma: "Homeowners – Dektop (1440)", "Property Managers – Dektop (1440)",
          "For Homeowners – Mobile (402)", "For Property Managers – Mobile (402)"
   ========================================================================== */
/* Hero: title → lede + CTA on both pages (48 gap) */
.ahero__intro, .theme-pm .ahero__intro { gap: 48px; }

/* Overview: Gray-100 band; stat cards = number on top, icon pinned to the bottom */
.overview { background: var(--color-gray-100); padding: 80px var(--gutter); }
.overview--ho { padding-bottom: 40px; }
.overview__label-results { padding-top: 40px; }
.ov-card { min-height: 200px; padding: 32px 32px 30px; justify-content: space-between; gap: 20px; }
.ov-card__text { gap: 16px; }
.ov-card__num { font-size: clamp(26px, 26px + 6 * var(--fluid), 32px); line-height: 1.1; }   /* Stat S */
/* Results: Stat S number, Body Big label, muted Body description */
.result__num { font-size: clamp(26px, 26px + 6 * var(--fluid), 32px); line-height: 1.1; }
.result__head .t-body { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }

/* HO homes: same band as the overview, small left-aligned label, row starts on the content edge */
.homes {
  --edge: max(var(--gutter), (100% - var(--content-max)) / 2);
  background: var(--color-gray-100); padding: 0 0 64px; align-items: stretch; gap: 20px;
}
.homes__title { text-align: left; padding: 0 var(--edge); color: var(--color-black); }
.homes__track { padding: 0 var(--edge); scroll-padding-inline: var(--edge); }
.home-card { flex-basis: 310px; }
.home-card__media .t-h5 { padding: 0 32px; }
.result__head .t-body, .ov-card .t-body { letter-spacing: -.01em; }   /* Body / Body Big: -1% */
.homes__dots { justify-content: flex-end; padding: 40px var(--edge) 0; }
.homes__dots span { opacity: 1; background: var(--color-gray-300); }
.homes__dots span.is-active { background: var(--color-black); }
@media (min-width: 1760px) { .homes__track { justify-content: flex-start; } }

@media (max-width: 1099px) {
  .ov-card { min-height: 0; padding: 24px; }
}

@media (max-width: 767px) {
  /* Hero: centred on both pages */
  .ahero__intro, .theme-pm .ahero__intro { align-items: center; text-align: center; }
  .ahero__cta { align-items: center; }
  .theme-homeowner .ahero { background: linear-gradient(180deg, var(--color-gray-100), var(--color-off-white)); }

  /* Overview */
  .overview { padding: 64px 0; }
  .theme-pm .overview { background: var(--color-off-white); }
  .overview__label-results { padding-top: 20px; }
  .ov-card { min-height: 0; padding: 20px; border-radius: 16px; }
  .ov-card__text { gap: 12px; }
  .ov-card__num { font-size: 26px; line-height: 1.2; }
  .ov-card .t-body { font-size: 16px; }
  /* PM mobile: full-width rows, icon on the left */
  .theme-pm .ov-card { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
  .theme-pm .ov-card .icon-circle, .theme-pm .ov-card__badge { order: -1; }
  /* HO mobile: 2×2 grid, number on top, smaller icon at the bottom */
  .overview--ho { padding: 64px 0 40px; }
  .overview--ho .overview__row--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview--ho .ov-card { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 20px; }
  .overview--ho .icon-circle { width: 40px; height: 40px; }
  .overview--ho .icon-circle img { width: 21px; height: 21px; }
  .overview--ho .ov-card__badge { width: 36px; height: 40px; }
  /* Results: Gray-200 cards, Stat L number */
  .result { background: var(--color-gray-200); }
  .result__num { font-size: 40px; line-height: 1; }
  .result > .t-body { color: var(--color-black); }

  /* HO homes */
  .homes { padding: 0 0 64px; gap: 20px; }
  .home-card { flex-basis: 250px; }
  .home-card__media .t-h5 { padding: 0 40px; }
  .homes__dots { justify-content: center; padding-top: 40px; }
}

/* Two-column text modules: more air between columns on desktop (was 20px — headline ran into the body copy).
   "List with Pavilion" (HO) and "The Pavilion model" rows (PM). Tablet/mobile stack, unchanged. */
@media (min-width: 1100px) {
  .steps__grid, .model__grid { column-gap: 80px; }
}

/* ---------- Homeowners backgrounds (Figma, Oct 2): desktop runs off-white top to bottom except the
   purple quote; mobile keeps the gray header + gray→off-white hero fade and a pure white "Your home deserves" ---------- */
[data-page="homeowners"] .site-header--gray,
[data-page="homeowners"] .ahero,
[data-page="homeowners"] .split--believe,
[data-page="homeowners"] .features,
[data-page="homeowners"] .overview--ho,
[data-page="homeowners"] .homes { background: var(--color-off-white); }
@media (max-width: 767px) {
  [data-page="homeowners"] .site-header--gray { background: var(--color-gray-100); }
  [data-page="homeowners"] .ahero { background: linear-gradient(180deg, var(--color-gray-100), var(--color-off-white)); }
  [data-page="homeowners"] .split--believe { background: var(--color-white); }
}
/* property cards get a hairline Gray-200 border (Figma stroke, inside) */
.home-card { box-shadow: inset 0 0 0 1px var(--color-gray-200); }

/* PM mobile overview — Figma 6342:11881 update: white 240×260 results cards, 40px before the arrows */
@media (max-width: 767px) {
  .theme-pm .result { flex-basis: 240px; min-height: 260px; background: var(--color-white); }
  .theme-pm .overview .carousel-nav { margin-top: 20px; }   /* 20px inner gap + 20 = 40 */
}
/* PM mobile: Gray-200 divider under the hero intro (Figma "Hero text" bottom stroke) */
@media (max-width: 767px) {
  .theme-pm .ahero { border-bottom: 1px solid var(--color-gray-200); }
}

/* Homes carousel company buttons are links now */
a.home-card__company { text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
a.home-card__company:hover { background: var(--color-gray-100); border-color: var(--color-gray-300); }
a.home-card__company:focus-visible { outline: 2px solid var(--color-maroon); outline-offset: 2px; }


/* ---------- Homeowners desktop (Figma "Homeowners – Dektop (1440)", 10/02) ----------
   Section dividers after the hero, the three promises, the homes carousel and Full-service
   management (desktop/tablet only; the mobile frame has none). */
@media (max-width: 767px) { .rule--wide { display: none; } }
@media (min-width: 768px) {
  /* Homes: 40px under the arrows; the row stops at the 1440 frame so cards past it are hidden */
  [data-page="homeowners"] .homes { position: relative; padding-bottom: 40px; }
  [data-page="homeowners"] .homes__track {
    --edge-in: max(var(--gutter), (min(100%, 1440px) - var(--content-max)) / 2);
    width: min(100%, 1440px); align-self: center;
    padding: 0 var(--edge-in); scroll-padding-inline: var(--edge-in);
  }
}
/* 1440 and up: the homes row shows exactly four cards (4 × 310 + 3 × 20 = 1300) from the content edge;
   the rest are hidden until the arrows page over, four at a time (data-carousel-page in site.js). */
@media (min-width: 1440px) {
  [data-page="homeowners"] .homes__track {
    width: 1300px; align-self: flex-start; margin-left: var(--edge);
    padding: 0; scroll-padding-inline: 0;
  }
  [data-page="homeowners"] .homes .carousel-nav { padding-inline: var(--edge) !important; }
}
@media (min-width: 1100px) {
  /* Full-service management: 1280 wide, three 400px columns, 40px apart, 60px between rows */
  [data-page="homeowners"] .services__grid { width: min(1280px, 100%); gap: 60px 40px; }
  [data-page="homeowners"] .services .section-head { gap: 40px; }   /* label → headline, as in Figma */
}

/* ---------- Homeowners owner-quotes carousel (Figma "Quote" 6357:8251; quotes from the
   "Pavilion_Owner_Quotes" sheet, logos from the Companies module tiles) ----------
   One quote per slide; arrows bottom-right of the 1280 content, no gap (Figma). */
.quote--carousel .quote__track {
  max-width: 1280px; margin: 0 auto; display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.quote--carousel .quote__slide { flex: 0 0 100%; max-width: none; margin: 0; box-sizing: border-box; scroll-snap-align: start; }
[data-page="homeowners"] .quote--carousel .quote__slide { padding: 0 108px; justify-content: flex-start; }   /* Figma HO quote: logo box 108px in */
.quote__logo {
  width: 304px; height: 304px; flex: none; border-radius: 37px; background: var(--color-maroon);
  display: grid; place-items: center;
}
.quote__logo img { max-width: 71%; max-height: 40%; width: auto; height: auto; object-fit: contain; }
[data-page="homeowners"] .quote--carousel .quote__text { flex: 1 1 0; max-width: none; }
.quote--carousel .carousel-nav { max-width: 1280px; margin: 0 auto !important; padding-inline: 0 !important; }
.quote--carousel .carousel-nav__btn { width: 42px; height: 42px; border-color: transparent; }
@media (max-width: 1099px) {
  [data-page="homeowners"] .quote--carousel .quote__slide { padding: 0; }
  .quote--carousel .quote__slide { gap: 48px; }
  .quote__logo { width: 240px; height: 240px; border-radius: 30px; }
}
@media (max-width: 767px) {
  .quote__logo { display: none; }                         /* Figma mobile: text only, centred */
  .quote--carousel .quote__slide { gap: 0; }
  .quote--carousel .carousel-nav { margin-top: 40px !important; }
}

/* Homeowners desktop/tablet (Figma 10/02 update): Pavilion Overview and the homes carousel sit on
   one Gray-100 band (mobile stays Off-White); 60px under the overview cards; the home-card company
   button is Body (STK Bureau Sans 18/1.3, -1%) with 16/20 padding. */
@media (min-width: 768px) {
  [data-page="homeowners"] .overview--ho,
  [data-page="homeowners"] .homes { background: var(--color-gray-100); }
  [data-page="homeowners"] .overview--ho { padding-bottom: 60px; }
  [data-page="homeowners"] .home-card__company {
    font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: -.01em; padding: 11px 20px; min-height: 0;
  }
}

/* ---------- Hero art, tablet/desktop (wide artwork, 10/02) ----------
   At 1440 the art is Figma's height (Homeowners 692, PM 664) and scales with the window below that.
   The files are wider than the frame (HO 5008×1384, PM 5000×1328 at 2×), so above 1440 the height
   holds and more of the illustration shows on both sides instead of the art ending. Centred, and
   clipped by .ahero's overflow. */
@media (min-width: 768px) {
  .ahero__media { aspect-ratio: 5008 / 1384; width: calc(min(100vw, 1440px) * 2504 / 1440); }
  .theme-pm .ahero__media { aspect-ratio: 5000 / 1328; width: calc(min(100vw, 1440px) * 2500 / 1440); }
}

/* ---------- Homes carousel cards (Figma "Home card", 10/02 update; desktop/tablet) ----------
   Location in Body UPPERCASE at the photo's top-left (18px in), lighter 15% scrim, 180px photo;
   revenue (Stat S) and "1-year revenue" (Caption, Gray-400) share one row, 20px under the photo
   and 80px above the company button. Mobile keeps the stacked layout. */
.home-card__stat { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.home-card__stat .t-label, .home-card__stat .home-card__value { margin-bottom: 0; }
.home-card .home-card__stat { gap: 20px; margin-bottom: 80px; }
@media (max-width: 767px) {
  .home-card .home-card__stat { gap: 15px; margin-bottom: 60px; }
}
@media (min-width: 768px) {
  [data-page="homeowners"] .home-card__media { aspect-ratio: auto; height: 180px; }
  [data-page="homeowners"] .home-card__media::after { background: rgba(0, 0, 0, .15); }
  [data-page="homeowners"] .home-card__media .t-h5 {
    inset: 18px auto auto 18px; display: block; padding: 0; text-align: left; text-shadow: none;
    font-family: var(--font-mono); font-size: 14px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase;
  }
  [data-page="homeowners"] .home-card .home-card__stat {
    flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 12px; padding-right: 10px;   /* Figma row is 266 of 276 */
  }
  [data-page="homeowners"] .home-card__stat .home-card__value { font-size: 32px; line-height: 1.1; letter-spacing: -.02em; }
  [data-page="homeowners"] .home-card__stat .home-card__label {
    font-family: var(--font-sans); font-size: 14px; line-height: 1.4; letter-spacing: -.01em; text-transform: none;
    color: var(--color-gray-400); opacity: 1; white-space: nowrap; text-box: trim-both cap alphabetic;
  }
}

/* ---------- Homes carousel: same columns as the Pavilion overview cards (desktop, 1100+) ----------
   Four cards across the content width with the overview's 20px gaps, so both rows start and end on
   the same edges. The arrows page four at a time (data-carousel-page). The revenue row may wrap
   on the narrowest desktop widths, where a card is ~225px. */
@media (min-width: 1100px) {
  [data-page="homeowners"] .homes__track {
    width: auto; align-self: stretch; margin: 0 var(--edge); padding: 0; scroll-padding-inline: 0;
  }
  [data-page="homeowners"] .home-card { flex: 0 0 calc((100% - 60px) / 4); min-width: 0; }
  [data-page="homeowners"] .homes .carousel-nav { padding-inline: var(--edge) !important; }
  [data-page="homeowners"] .home-card .home-card__stat { flex-wrap: wrap; row-gap: 8px; }
}

/* ---------- Quote carousels on mobile: height follows the quote on screen ----------
   Slides keep their own height and js/site.js sizes the track to the visible one, gliding between
   heights, so a short quote doesn't sit above a long quote's worth of space. --quote-min-h keeps
   the shortest ones from collapsing (Homeowners 225–374px → 260 min; PM 385–529px → 400 min). */
@media (max-width: 767px) {
  .quote--carousel .quote__track { --quote-min-h: 260px; align-items: flex-start; transition: height .35s cubic-bezier(.2, .7, .2, 1); }
  .theme-pm .quote--carousel .quote__track { --quote-min-h: 400px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .quote--carousel .quote__track { transition: none; }
}

/* Quote attribution (Property Managers, Figma 10/03): no eyebrow; script name, then "Title, Company"
   as a small Caption line in Maroon underneath. */
.quote__by { display: flex; flex-direction: column; gap: 8px; }
.quote__by .t-script { display: block; }
.quote__role { color: var(--color-maroon); }
@media (max-width: 767px) { .quote__by { align-items: center; text-align: center; } }
@media (max-width: 767px) {
  .theme-pm .quote--carousel .quote__slide { gap: 24px; }   /* Figma PM mobile: 24px between the photo and the quote */
}

/* Quote carousels: the track scrolls sideways, and a scroll container clips anything outside it. The
   type trims line boxes to the letters (text-box), so descenders and cap tops sit a few px outside
   their boxes and were cut at the track's edges. 16px of inner room above and below, cancelled by
   negative margins, keeps the layout identical and every glyph visible. */
.quote--carousel .quote__track { padding-block: 16px; margin-block: -16px; }
/* Sideways only: on phones the track takes the visible quote's height while longer quotes sit beside it,
   which made the track scroll up/down inside itself. Vertical swipes now scroll the page. */
.quote--carousel .quote__track { overflow-y: hidden; overscroll-behavior-y: auto; }
.quote--carousel .carousel-nav { position: relative; }