/* ============================================================
   scott.css — HomeSmart theme layer for Scott Anderson.
   Loaded after styles.css + sections.css (the Mark template kit).
   This file only re-tokens the kit for the HomeSmart brand and adds
   the handful of components Scott's page has that Mark's doesn't
   (brand lockup, photo hero, neighborhood cards, review grid,
   contact layout). It deliberately does NOT strip the kit's depth.
   Brand tokens verified against homesmart.com on 2026-09-24.
   ============================================================ */

@font-face {
  font-family: Manrope;
  src: url('assets/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: Manrope, Arial, sans-serif;
  --font-body: Manrope, Arial, sans-serif;
  --brand-primary: #CD1935;
  --brand-primary-dark: #A01429;
  --brand-primary-soft: #F26D82;
  --brand-tint: #FBE9EC;
  --brand-glow: rgba(205,25,53,.32);
  --ink: #161612;
  --paper: #F6F4F2;
  --paper-grey: #F4EDE5;
  --grey-text: #61595D;
  --maxw: 1240px;
  --radius: 16px;
}

/* ---- Type: Manrope carries everything; tighter display tracking ---- */
html { scroll-padding-top: 96px; }
body { font-size: 16.5px; }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.035em; }
.h-display { font-weight: 700; letter-spacing: -.045em; }
.h-section { margin-top: 16px; line-height: 1.08; }
.lead { font-size: clamp(17px, 1.35vw, 19.5px); }
p { line-height: 1.65; }
.eyebrow { font-size: 11.5px; letter-spacing: .2em; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 200; background: #fff; color: var(--ink); padding: 14px; border-radius: 8px; }
.skip-link:focus { top: 14px; }

/* Buttons: keep the kit's gradient, lift and sheen, square the corners for HomeSmart */
.btn { border-radius: 9px; font-size: 15px; }
.btn--primary { box-shadow: 0 6px 18px rgba(205,25,53,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.btn--primary:hover { box-shadow: 0 12px 28px rgba(205,25,53,.34), inset 0 1px 0 rgba(255,255,255,.14); }
.btn--sm { padding: 11px 18px; font-size: 14px; }

/* ---- Header: name + HomeSmart lockup ---- */
.hdr__inner { padding-block: 14px; gap: 24px; }
.hdr__nav { position: static; transform: none; margin-left: auto; gap: 26px; }
.hdr__nav a { font-size: 14.5px; white-space: nowrap; }
.brand { gap: 14px; }
.brand__name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.brand__sub { font-size: 9px; letter-spacing: .14em; margin-top: 4px; }
.brand-divider { height: 28px; width: 1px; background: rgba(255,255,255,.35); flex: none; }
.hdr--scrolled .brand-divider, .hdr--open .brand-divider { background: var(--line); }
.broker-logo { width: 118px; flex: none; }
.broker-logo img { height: auto; }
.logo-dark { display: none; }
.hdr--scrolled .logo-dark, .hdr--open .logo-dark { display: block; }
.hdr--scrolled .logo-light, .hdr--open .logo-light { display: none; }
.hdr--scrolled { background: rgba(246,244,242,.86); }
.hdr__phone { font-size: 14px; }
.hdr__actions { gap: 16px; }
@media (max-width: 1250px) { .hdr__phone { display: none; } }
@media (max-width: 1080px) {
  .hdr--open { background: var(--paper); }
  .hdr--open .brand__sub { color: var(--grey-text); }
  .hdr--open .hdr__burger span { background: var(--ink); }
  .hdr__mobile a:not(.btn) { font-weight: 600; }
}
@media (max-width: 480px) {
  .brand { gap: 10px; }
  .brand__name { font-size: 16px; }
  .brand__sub { font-size: 8px; letter-spacing: .1em; }
  .broker-logo { width: 96px; }
  .hdr__inner { gap: 10px; }
}
@media (max-width: 380px) {
  .brand-divider { display: none; }
  .broker-logo { width: 82px; }
  .brand__name { font-size: 15px; }
}

/* ---- Hero: full-bleed photo with a slow drift, kit overlay + grain on top ---- */
.hero { min-height: max(680px, 100svh); }
.hero__photo { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
}
/* The still stays static: it is frame 0 of the video, so the video fades in over an identical frame. */
.hero__overlay {
  background:
    linear-gradient(90deg, rgba(10,10,8,.78) 0%, rgba(10,10,8,.46) 42%, rgba(10,10,8,.10) 72%, transparent 90%),
    linear-gradient(180deg, rgba(10,10,8,.42) 0%, transparent 18%, transparent 50%, rgba(10,10,8,.86) 100%),
    radial-gradient(90% 70% at 10% 30%, rgba(205,25,53,.14) 0%, transparent 55%);
}
.hero__content { padding-top: 150px; padding-bottom: 64px; }
.hero__title { max-width: 18ch; font-size: clamp(42px, 6vw, 84px); line-height: 1.04; }
.hero__title .accent-i { color: #fff; font-weight: 400; letter-spacing: -.035em; }
.hero__title .accent-i::after { content: ''; display: block; width: 72px; height: 4px; background: var(--brand-primary); margin-top: 26px; border-radius: 2px; }
.hero__sub { max-width: 46ch; margin-top: 24px; color: rgba(255,255,255,.9); }
.hero__cta { margin-top: 32px; }
.hero__trust { margin-top: 28px; }
.hero__trust:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero__trust-stars { color: var(--brand-primary-soft); }
.hero__stats { background: linear-gradient(180deg, rgba(8,8,8,.18) 0%, rgba(8,8,8,.62) 100%); }
.stat__num { font-weight: 700; letter-spacing: -.03em; }
.stat__num span { color: var(--brand-primary-soft); }

/* ---- About: square headshot (source is 657×657), license badge, HomeSmart callout ---- */
.about { align-items: center; }
.about__photo--portrait { aspect-ratio: 1 / 1; border-radius: 22px; background: var(--paper-grey); }
.about__headshot { object-position: center 20%; }
.about__badge-num { color: var(--brand-primary-soft); }
.about__badge-txt { font-weight: 700; letter-spacing: .02em; }
.about__body .lead { margin-top: 22px; }
.body-copy { margin-top: 16px; color: var(--grey-text); }
.about__body .btn { margin-top: 30px; }
.hs-card {
  margin-top: 34px;
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
  background: linear-gradient(160deg, #fff 0%, #F8F3EE 100%);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 26px 22px 30px;
  position: relative; overflow: hidden;
  box-shadow: 0 12px 30px rgba(22,22,18,.08);
}
.hs-card__rule { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark)); }
.hs-card__mark { width: 128px; height: auto; flex: none; }
.hs-card__copy { font-size: 14.5px; line-height: 1.55; color: var(--grey-text); margin: 0; }
.hs-card__copy strong { color: var(--ink); font-weight: 700; }
.hs-card__copy a { color: var(--brand-primary); font-weight: 600; white-space: nowrap; }
.hs-card__copy a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Services tiles: the kit does the flip; these are article elements, not buttons ---- */
.prog__head .h-section { max-width: 15ch; }
.tile { cursor: pointer; }
.tile:focus-visible { outline: 2px solid var(--brand-primary-soft); outline-offset: 4px; border-radius: var(--radius); }
.tile__name { font-weight: 700; letter-spacing: -.03em; }
.tile__icon { color: var(--brand-primary-soft); background: rgba(242,109,130,.10); border-color: rgba(242,109,130,.22); }
.tile__hint { color: var(--brand-primary-soft); }
.tile__back .tile__name { font-size: 23px; }

/* ---- The way forward ---- */
.why__head .lead { margin-top: 18px; max-width: 46ch; }
.vp h3 { font-weight: 700; letter-spacing: -.02em; }

/* ---- Neighborhoods: photo cards ---- */
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 44px; }
.section-heading .lead { max-width: 40ch; }
.areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.area-card {
  position: relative; overflow: hidden; display: block;
  aspect-ratio: 4 / 5; border-radius: 18px; color: #fff; background: var(--ink);
  box-shadow: 0 18px 44px rgba(22,22,18,.14);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.area-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(22,22,18,.20); }
.area-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.area-card:hover img { transform: scale(1.05); }
.area-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22,22,18,.88) 0%, rgba(22,22,18,.25) 45%, transparent 70%); }
.area-card__copy { position: absolute; left: 26px; right: 26px; bottom: 28px; z-index: 1; }
.area-card__copy span { font-size: 13px; color: rgba(255,255,255,.82); }
.area-card__copy strong { display: block; font-family: var(--font-display); font-size: 27px; font-weight: 700; margin-top: 6px; letter-spacing: -.03em; }
.area-arrow {
  position: absolute; right: 18px; top: 18px; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.14); backdrop-filter: blur(6px); font-size: 20px;
  transition: background .3s, transform .3s var(--ease-out);
}
.area-card:hover .area-arrow { background: var(--brand-primary); transform: translate(2px, -2px); }
.area-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 30px; font-size: 14.5px; color: var(--grey-text); }
.area-bottom p { max-width: 60ch; }

/* ---- Reviews: three cards, static (three reviews is not a marquee) ---- */
.reviews__head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 40px; }
.reviews__summary {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.reviews__summary:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.reviews__summary-num { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.03em; line-height: 1; }
.reviews__summary-stars { color: var(--brand-primary); letter-spacing: 3px; font-size: 15px; }
.reviews__summary-meta { font-size: 13px; color: var(--grey-text); flex-basis: 100%; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review blockquote { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.reviews__foot { margin-top: 30px; }

/* ---- Contact: copy + methods on the left, lead card on the right ---- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.contact-copy .lead { margin-top: 20px; max-width: 42ch; }
.contact-methods { margin-top: 34px; }
.contact-methods > a {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease-out);
}
.contact-methods > a:hover { padding-left: 6px; }
.contact-methods span { grid-column: 1; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--grey-text); }
.contact-methods strong { grid-column: 1; font-size: 17px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.contact-methods svg { grid-column: 2; grid-row: 1 / 3; width: 22px; height: 22px; color: var(--brand-primary); }
.office-note { margin-top: 30px; font-size: 14.5px; }
.office-note > span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--grey-text); }
.office-note p { margin-top: 8px; }
.office-note a { display: inline-block; color: var(--brand-primary); font-weight: 600; margin-top: 8px; }
.office-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.leadcard .eyebrow { margin-bottom: 12px; }
.leadcard__title { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; }
.leadcard__intro { color: var(--grey-text); margin-top: 12px; font-size: 15px; }
.field label span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--grey-text); }
.field select {
  font-family: inherit; font-size: 15.5px; padding: 13px 40px 13px 15px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361595D' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  transition: border .2s, background-color .2s, box-shadow .2s; min-height: 44px;
}
.field select:focus { outline: none; border-color: var(--brand-primary); background-color: #fff; box-shadow: 0 0 0 4px rgba(205,25,53,.10); }
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 4px rgba(205,25,53,.10); }
.leadform__submit { width: 100%; }
.leadform__status { font-size: 13.5px; line-height: 1.5; padding: 14px 16px; border-radius: 10px; background: var(--brand-tint); color: var(--ink); }
.leadform__status a { color: var(--brand-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- CTA band ---- */
.applyband__title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; }
.applyband .lead { margin-top: 10px; }

/* ---- Footer ---- */
.footer-logo { width: 170px; height: auto; margin-bottom: 22px; }
.footer-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.footer-role { font-size: 13px; color: rgba(250,248,245,.62); margin-top: 4px; letter-spacing: .02em; }
.footer__contact a:hover { color: var(--brand-primary-soft); }
.footer__contact { overflow-wrap: anywhere; }
.mm-logo img { height: 26px; width: auto; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .section-heading, .reviews__head { display: block; }
  .section-heading .lead, .reviews__summary { margin-top: 22px; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .reviews-grid .review:last-child { grid-column: 1 / -1; max-width: none; }
  .about__media { max-width: 400px; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-copy { max-width: 620px; }
  .areas-grid { gap: 16px; }
  .area-card__copy strong { font-size: 22px; }
}
@media (max-width: 760px) {
  .areas-grid { grid-template-columns: 1fr; }
  .area-card { aspect-ratio: 16 / 10; }
  .area-card__copy strong { font-size: 27px; }
  .area-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .hero__content { padding-top: 130px; }
  .hs-card { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
}
@media (max-width: 620px) {
  .hero__title { max-width: none; font-size: clamp(34px, 9.6vw, 44px); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__title .accent-i::after { margin-top: 18px; }
  .stat__num { font-size: 30px; }
  .contact-methods strong { font-size: 16px; }
}

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .area-card, .area-card img, .reviews__summary, .contact-methods > a { transition: none; }
}

/* ============================================================
   Scale pass (2026-09-24): everything a notch smaller, and on
   desktop every section is exactly one screen tall with its
   content sized to fit. Phones keep a natural flow.
   ============================================================ */
:root { --maxw: 1160px; --header-height: 64px; }
body { font-size: 16px; }
.h-display { font-size: clamp(40px, 5.2vw, 70px); }
.h-section { font-size: clamp(30px, 3.5vw, 44px); }
.lead { font-size: clamp(16px, 1.2vw, 18px); }
.btn { padding: 13px 22px; font-size: 14.5px; }
.btn--sm { padding: 10px 17px; font-size: 13.5px; }
.section { padding-block: clamp(56px, 8vw, 96px); }
.hero__title { font-size: clamp(42px, 5.4vw, 74px); }
.hero__sub { font-size: clamp(15.5px, 1.15vw, 17.5px); }
.tile__face { padding: 22px; }
.tile__name { font-size: 22px; }
.tile__back .tile__name { font-size: 21px; }
.tile__one { font-size: 13.5px; }
.tile__back li { font-size: 13.5px; }
.vp { padding: 24px 22px 26px; }
.vp__icon { width: 44px; height: 44px; margin-bottom: 18px; }
.vp h3 { font-size: 18px; }
.vp p { font-size: 14px; }
.review { padding: 26px 24px; }
.review blockquote { font-size: 16.5px; }
.leadcard { padding: clamp(22px, 2.4vw, 30px); }
.leadcard__title { font-size: clamp(22px, 2vw, 26px); }
.field input, .field textarea, .field select { padding: 11px 13px; font-size: 15px; min-height: 40px; }
.leadform { gap: 11px; }
.area-card__copy strong { font-size: 24px; }
.hs-card__copy { font-size: 13.5px; }
.about__list li { font-size: 15px; }

@media (min-width: 981px) {
  html { scroll-padding-top: 0; }
  main > .hero, main > .section, .closing { box-sizing: border-box; height: 100dvh; min-height: 0; }
  main > .section {
    display: flex; flex-direction: column; justify-content: center;
    padding-block: calc(var(--header-height) + 16px) 28px;
    overflow-y: auto; overflow-x: clip;
  }
  main > .section > .wrap { width: 100%; flex: none; }

  /* Hero: content row grows, stat bar keeps its own row so it never clips */
  .hero { display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); padding: 0; }
  .hero__content { min-height: 0; padding-top: calc(var(--header-height) + 24px); padding-bottom: 32px; justify-content: center; }
  .hero__title { font-size: clamp(40px, min(5.2vw, 9.2dvh), 74px); margin-top: clamp(12px, 2dvh, 22px); }
  .hero__title .accent-i::after { margin-top: clamp(14px, 2.4dvh, 24px); }
  .hero__sub { font-size: clamp(15px, 2.1dvh, 17.5px); margin-top: clamp(14px, 2.4dvh, 24px); }
  .hero__cta { margin-top: clamp(18px, 3dvh, 30px); }
  .hero__trust { margin-top: clamp(14px, 2.4dvh, 26px); }
  .stat { padding-block: clamp(14px, 2.4dvh, 24px); }
  .stat__num { font-size: clamp(26px, 4dvh, 40px); }

  .h-section { font-size: clamp(28px, 5.2dvh, 44px); }
  .prog__head, .why__head, .section-heading, .reviews__head { margin-bottom: clamp(18px, 3.4dvh, 36px); }
  .why__head .lead, .prog__intro, .section-heading .lead { font-size: clamp(15px, 2.1dvh, 18px); }

  /* About: cap the square photo by height so the column never outgrows the screen */
  .about { gap: clamp(32px, 4vw, 64px); }
  .about__media { width: 100%; max-width: 56dvh; }
  .about__body .lead { margin-top: clamp(12px, 2dvh, 20px); font-size: clamp(15px, 2.1dvh, 18px); }
  .body-copy { margin-top: clamp(10px, 1.6dvh, 16px); font-size: clamp(14px, 1.9dvh, 16px); }
  .about__list { margin-top: clamp(14px, 2.4dvh, 26px); gap: clamp(8px, 1.4dvh, 13px); }
  .about__body .btn { margin-top: clamp(16px, 2.6dvh, 26px); }
  .hs-card { margin-top: clamp(16px, 2.6dvh, 30px); padding: clamp(12px, 1.8dvh, 18px) 22px clamp(12px, 1.8dvh, 18px) 26px; }

  /* Services: six tiles in two rows, sized by screen height */
  .prog__grid { gap: clamp(12px, 2dvh, 20px); }
  .tile { aspect-ratio: auto; height: clamp(170px, 27dvh, 250px); }
  .tile__face { padding: clamp(16px, 2.4dvh, 22px) 22px; }
  .tile__icon { width: clamp(34px, 5dvh, 44px); height: clamp(34px, 5dvh, 44px); }

  .why__grid { gap: clamp(12px, 2dvh, 22px); }
  .vp { padding: clamp(16px, 2.4dvh, 26px) 22px; }
  .vp__icon { width: clamp(38px, 5.6dvh, 46px); height: clamp(38px, 5.6dvh, 46px); margin-bottom: clamp(10px, 1.8dvh, 18px); }

  .areas-grid { gap: clamp(12px, 2dvh, 22px); }
  .area-card { aspect-ratio: auto; height: clamp(220px, 44dvh, 420px); }
  .area-bottom { margin-top: clamp(12px, 2dvh, 24px); }

  .reviews-grid { gap: 16px; }
  .review { padding: clamp(18px, 2.8dvh, 26px) 24px; }
  .review blockquote { font-size: clamp(15px, 2.1dvh, 17px); margin: clamp(10px, 1.6dvh, 16px) 0 clamp(12px, 2dvh, 20px); }
  .reviews__foot { margin-top: clamp(12px, 2dvh, 24px); }

  /* Contact: card fields compress with the screen */
  .contact-layout { gap: clamp(32px, 4vw, 64px); align-items: center; }
  .contact-copy .lead { margin-top: clamp(12px, 2dvh, 20px); }
  .contact-methods { margin-top: clamp(14px, 2.4dvh, 28px); }
  .contact-methods > a { padding-block: clamp(9px, 1.5dvh, 16px); }
  .office-note { margin-top: clamp(12px, 2dvh, 24px); }
  .leadcard { padding: clamp(18px, 2.8dvh, 30px) clamp(20px, 2.2vw, 30px); }
  .leadcard .eyebrow { margin-bottom: 8px; }
  .leadcard__intro { margin-top: 8px; font-size: 14px; }
  .leadform { margin-top: clamp(10px, 1.8dvh, 18px); gap: clamp(8px, 1.3dvh, 12px); }
  .field { gap: 4px; }
  .field input, .field select { padding: clamp(8px, 1.3dvh, 11px) 13px; min-height: 0; }
  .field textarea { padding: clamp(8px, 1.3dvh, 11px) 13px; min-height: 0; height: clamp(64px, 11dvh, 96px); resize: none; }
  .leadform__note { font-size: 11.5px; }

  /* Closing screen: red band on top, footer fills the rest */
  .closing { display: flex; flex-direction: column; }
  .closing .applyband { flex: none; padding-block: clamp(32px, 5.5dvh, 56px); }
  .closing .footer { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(28px, 4dvh, 48px) 24px; }
  .closing .footer > .wrap { width: 100%; }
  .footer__top { padding-bottom: clamp(20px, 3.4dvh, 40px); }
  .footer__compliance { padding-top: clamp(18px, 3dvh, 32px); }
}
/* Narrow laptops (981–1120px): the about column wraps more, so trim it to keep one screen */
@media (min-width: 981px) and (max-width: 1120px) {
  .about__body .lead { font-size: 15px; }
  .body-copy { font-size: 13.5px; line-height: 1.5; }
  .about__list { gap: 8px; }
  .about__list li { font-size: 14px; }
  .hs-card { padding: 10px 18px 10px 22px; gap: 14px; }
  .hs-card__mark { width: 100px; }
  .hs-card__copy { font-size: 13px; }
}

/* ---- Hero video: sits over the poster still, fades in once frames are actually rendering ---- */
.hero__video {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  opacity: 0; transition: opacity 1.4s var(--ease-out); pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* ---- Hero pinned to the left edge: header, headline and stat bar span the full width and share one gutter ---- */
.hdr__inner, .hero__content, .hero__stats-inner { max-width: none; }
.hero__content { padding-inline: var(--gutter); }
.hero__title { max-width: 16ch; }
.hero__sub { max-width: 44ch; }
@media (min-width: 981px) { .hero__stats-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Nav has five links now; tighten so the phone number still fits on laptops */
.hdr__nav { gap: 22px; }
.hdr__nav a { font-size: 14px; }
@media (max-width: 1320px) { .hdr__phone { display: none; } }

/* ==== 2026-09-28: Scott's revisions (full name, new bio, on-site form) ====
   The brand lockup now reads "Scott Dalton Anderson"; trimmed a touch so the
   header still fits at laptop widths. The about column carries three
   paragraphs of Scott's own bio (no checklist): on desktop the photo column
   shrinks to its height-capped width so the text gets the rest of the row and
   the section stays one screen. Honeypot field for the delivered-form mode. */
.brand__name { font-size: 17px; }
@media (max-width: 1200px) { .brand__name { font-size: 16px; } .hdr__nav { gap: 18px; } }
.leadform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (min-width: 981px) {
  .about { grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 3.5vw, 60px); }
  .about__media { width: clamp(260px, 44dvh, 400px); max-width: none; }
  .about__body .lead { max-width: 72ch; font-size: clamp(13.5px, 1.85dvh, 16px); line-height: 1.55; color: var(--ink); }
  .about__body .body-copy { max-width: 72ch; font-size: clamp(13.5px, 1.8dvh, 15.5px); line-height: 1.55; margin-top: clamp(8px, 1.4dvh, 14px); }
  .hs-card { margin-top: clamp(12px, 2dvh, 22px); padding: clamp(10px, 1.5dvh, 16px) 20px clamp(10px, 1.5dvh, 16px) 24px; gap: 18px; }
  .hs-card__mark { width: 108px; }
  .hs-card__copy { font-size: 13.5px; line-height: 1.5; }
}
/* Narrow laptops (981–1120px): the bio column is narrowest here, so give it more of the row */
@media (min-width: 981px) and (max-width: 1120px) {
  .about__media { width: clamp(240px, 36dvh, 300px); }
  .about__body .lead, .about__body .body-copy { font-size: 13px; line-height: 1.5; }
  .hs-card__copy { font-size: 12.5px; }
}

/* ==== 2026-10-11: audit — readable branding on the open mobile menu ==== */
.hdr.hdr--open .brand__name { color: var(--ink); }
.hdr.hdr--open .brand__sub { color: var(--grey-text); }

/* ==== 2026-10-12: IDX Broker wrapper + content area ====
   idx-wrapper.html is fetched by IDX Broker and wrapped around its hosted pages
   (search, results, listing detail, saved searches, valuation). The one-screen
   rule does not apply there. These rules restyle IDX's markup with the site's
   tokens; class names are IDX Broker's documented ones. */
body[data-wrapper] { background: var(--paper); }
body[data-wrapper] .hdr { position: sticky; }
.idx-main { min-height: calc(100dvh - var(--header-height)); padding: calc(var(--header-height) + 24px) 0 64px; }
.idx-wrap { max-width: var(--maxw); }
#IDX-main, #IDX-main * { font-family: var(--font-body) !important; }
/* Font Awesome icons (dropdown chevrons, hearts) must keep their icon font or they render as boxes. */
#IDX-main .fa, #IDX-main .fa::before { font-family: FontAwesome !important; }
#IDX-main h1, #IDX-main h2, #IDX-main h3, #IDX-main .IDX-resultsTitle { font-family: var(--font-display) !important; color: var(--ink); letter-spacing: -.02em; }
#IDX-main a { color: var(--brand-primary); }
#IDX-main input[type="submit"], #IDX-main button.IDX-searchButton {
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark)); color: #fff; border: 0; border-radius: 999px;
  padding: 12px 22px; font-weight: 700; box-shadow: 0 10px 24px var(--brand-glow); cursor: pointer;
}
#IDX-main .IDX-resultsCell, #IDX-main .IDX-showcaseCell, #IDX-main .IDX-detailsCell {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(22,22,18,.08); overflow: hidden;
}
#IDX-main .IDX-resultsPrice, #IDX-main .IDX-showcasePrice { color: var(--ink); font-weight: 800; }
#IDX-main input[type="text"], #IDX-main select { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }

/* Market section: RapidStats charts are fixed 1250×645 iframes; .chart-frame scales them to the stage */
.market { margin-top: clamp(14px, 2.4dvh, 28px); }
.chart-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.chart-tab { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 16px; font: 600 13.5px/1 var(--font-body); cursor: pointer; }
.chart-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chart-stage { position: relative; margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(22,22,18,.08); overflow: hidden; aspect-ratio: var(--chart-ar, 1.938); }
.chart-frame { position: absolute; inset: 0; display: none; }
.chart-frame.is-active { display: block; }
.chart-frame iframe { position: absolute; top: 0; left: 0; width: 1250px; height: 645px; border: 0; transform-origin: 0 0; }
.chart-source { margin-top: 10px; font-size: 12px; color: var(--grey-text); }
.report-form { margin-top: clamp(14px, 2.4dvh, 26px); }
.report-form__lead { font-size: 15px; color: var(--grey-text); }
.report-form__lead strong { color: var(--ink); }
.report-form__row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.report-form__row input { flex: 1 1 160px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; background: #fff; font: 15px var(--font-body); }
.report-form__status { margin-top: 10px; font-size: 13.5px; padding: 12px 14px; border-radius: 10px; background: var(--brand-tint); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 981px) {
  /* Height-limited on desktop; width follows the chart's 1250:645 shape so the frame hugs it (no empty side bands). */
  /* Frame keeps the chart's 1250:645 shape: full column width, capped by a height budget (no empty bands). */
  .chart-stage { aspect-ratio: var(--chart-ar, 1.938); width: 100%; max-width: calc(clamp(230px, 41dvh, 440px) * var(--chart-ar, 1.938)); }
  .market { margin-top: clamp(10px, 1.8dvh, 22px); }
  .report-form { margin-top: clamp(10px, 1.8dvh, 20px); }
  #market .section-heading { margin-bottom: clamp(12px, 2.4dvh, 28px); }
  .report-form__row { flex-wrap: nowrap; }
}

/* Six nav links: hide the phone number from a wider breakpoint so the header stays one row */
@media (max-width: 1400px) { .hdr__phone { display: none; } }

/* Search section: IDX widgets restyled as a row of cards; hidden until IDX.live */
#search[hidden] { display: none; }
/* 2026-10-15: live widgets. #idxOmnibar holds the legacy Quick Search widget (20882): a form of
   .IDX-qsFieldWrap blocks laid out here as a wrapping row of pill fields. #idxShowcase holds the
   new-builder Listings Showcase (179263), a <idx-listings-showcase> custom element with its own
   shadow-DOM grid (3 columns, 3 listings); it only needs full width. */
.idx-omnibar { margin-top: clamp(14px, 2.4dvh, 28px); }
.idx-omnibar .IDX-quicksearchWrapper, .idx-omnibar .IDX-quicksearchForm { display: block; width: 100% !important; max-width: 100%; box-sizing: border-box; margin: 0; }
.idx-omnibar .IDX-quicksearchForm { display: flex !important; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.idx-omnibar .IDX-qsFieldWrap { display: flex !important; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; max-width: 100%; width: auto !important; margin: 0 !important; }
@media (min-width: 981px) { .idx-omnibar .IDX-quicksearchForm { flex-wrap: nowrap; } .idx-omnibar .IDX-qsFieldWrap { flex: 1 1 0; } }
.idx-omnibar .IDX-qsFieldWrap.IDX-qsSubmitWrap { flex: 0 0 auto; }
.idx-omnibar .IDX-qsLabel { display: block !important; font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6b6a63); margin: 0 0 0 14px; }
.idx-omnibar .IDX-qsInput, .idx-omnibar select.IDX-qsInput { display: block; width: 100% !important; box-sizing: border-box; height: 46px; border: 1px solid var(--line); border-radius: 999px; padding: 0 18px; font: 15px var(--font-body); color: inherit; background: #fff; margin: 0; }
.idx-omnibar .IDX-qsHiddenInput, .idx-omnibar #IDX-qsIdxID-20882, .idx-omnibar #IDX-qsCCZHidden-20882, .idx-omnibar #IDX-qsQuickSearch-20882 { display: none !important; }
.idx-omnibar .IDX-qsSubmitWrap input, .idx-omnibar .IDX-qsSubmitWrap button { display: inline-block; height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--brand-primary); color: #fff; font: 700 15px var(--font-body); cursor: pointer; white-space: nowrap; }
.idx-showcase { margin-top: clamp(14px, 2.4dvh, 24px); display: block; }
.idx-showcase idx-listings-showcase { display: block; width: 100%; max-width: 100%; }
/* The widget picks its column count from its own width, so on desktop it is zoomed down slightly:
   that widens the layout box it measures (three columns from ~981px) and keeps the row inside one screen. */
@media (min-width: 981px) { .idx-showcase idx-listings-showcase { zoom: .9; } }
@media (min-width: 981px) and (max-width: 1199px) { .idx-showcase idx-listings-showcase { zoom: .8; } }
/* The widget's card has a 311px minimum; on the narrowest phones (280px content box) zoom it down so nothing spills off-screen. */
@media (max-width: 360px) { .idx-showcase idx-listings-showcase { zoom: .78; } }
.idx-more { margin-top: clamp(12px, 2dvh, 22px); }
@media (max-width: 640px) { .idx-omnibar .IDX-qsFieldWrap { flex-basis: calc(50% - 6px); } .idx-omnibar .IDX-qsFieldWrap.IDX-qsSubmitWrap { flex-basis: 100%; } }

/* ==== 2026-10-15: IDX hosted pages, audit fixes (checked against live results + detail pages) ====
   The wrapper header is sticky (in flow), so the content only needs a small top gap.
   IDX themes its pages with --idx-* custom properties (default IDX blue #3561B7), so the
   brand goes in through those rather than per-button overrides, which fought IDX's own
   selectors (red text on red buttons, glow on transparent links).
   On phones IDX sizes its results grid from a 375px card minimum, which clipped cards
   and pushed its bottom action bar off-screen. */
body[data-wrapper] .idx-main { padding-top: 24px; }
#IDX-main {
  --idx-primary-color: var(--brand-primary);
  --idx-button-color: var(--brand-primary);
  --idx-button-text-color: #fff;
  --idx-secondary-button-color: var(--ink);
  --idx-secondary-button-text-color: #fff;
  --idx-darkest-gray: var(--ink);
  --idx-font-family: var(--font-body);
}
#IDX-main .IDX-btn { box-shadow: none; }
#IDX-main #IDX-detailsHeaderActions, #IDX-main .idx-results__mobile-menu { overflow-x: auto; scrollbar-width: none; }
#IDX-main .idx-results__mobile-menu { justify-content: flex-start; gap: 6px; padding: 8px 10px; }
#IDX-main .idx-results__mobile-menu .IDX-btn, #IDX-main .idx-results__mobile-menu a, #IDX-main .idx-results__mobile-menu button { flex: 0 0 auto; padding: 10px 14px !important; font-size: 13px !important; white-space: nowrap; }
@media (max-width: 600px) {
  #IDX-main .idx-results__content, #IDX-main .idx-results__category, #IDX-main .IDX-resultsCell { grid-template-columns: minmax(0, 1fr) !important; }
}

.chart-full { color: var(--brand-primary); font-weight: 600; white-space: nowrap; }

/* ==== 2026-10-15: search box + IDX results width ====
   Quick Search: the widget's own CSS adds a hard grey outline shadow (1px 1px 5px #777);
   it now matches the white listing card below. Its two selects get the pill look of the inputs.
   IDX results: IDX fixes the map at 569px and cards at 375px, which looked small on big screens;
   map and listings now split the width and cards fill a fluid grid. */
.idx-omnibar .IDX-quicksearchWrapper { box-shadow: 0 12px 30px rgba(22,22,18,.06) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: #fff !important; padding: 16px 18px !important; }
.idx-omnibar select.IDX-qsInput { -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161612' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
.idx-omnibar .IDX-qsSubmitWrap input, .idx-omnibar .IDX-qsSubmitWrap button { background: var(--brand-primary) !important; color: #fff !important; border: 0 !important; }
body[data-wrapper] .idx-wrap { max-width: 1440px; }
@media (min-width: 981px) {
  #IDX-main #idx-results-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  #IDX-main .idx-results__category { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; }
}
/* Quick Search follow-up: the submit wrapper is a plain .IDX-qsFieldWrap with id IDX-qsSubmitWrap-<id>,
   and the button is input.IDX-qsButtonInput; selects get a tighter chevron so "Residential" fits. */
.idx-omnibar [id^="IDX-qsSubmitWrap"] { flex: 0 0 auto !important; }
.idx-omnibar input.IDX-qsButtonInput { background: var(--brand-primary) !important; color: #fff !important; border: 0 !important; padding: 0 28px !important; font: 700 15px var(--font-body) !important; cursor: pointer; box-shadow: 0 10px 24px var(--brand-glow); }
.idx-omnibar input.IDX-qsButtonInput:hover { background: var(--brand-primary-dark) !important; }
.idx-omnibar select.IDX-qsInput { padding: 0 30px 0 16px; background-position: right 12px center; background-size: 14px; text-overflow: ellipsis; }
@media (min-width: 981px) { .idx-omnibar [id^="IDX-qsPtWrap"], .idx-omnibar [id^="IDX-qsCityListWrap"] { flex-grow: 1.35 !important; } }

/* 2026-10-15: market layout. On desktop the zip-report form sits beside the chart as a card
   instead of a full-width row under it, so the chart frame can hug the chart without leaving
   an empty band on the right, and the freed height goes to the chart. */
@media (min-width: 981px) {
  .market-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: clamp(20px, 2.6vw, 40px); align-items: end; }
  .market-layout .chart-stage { max-width: calc(clamp(240px, 50dvh, 540px) * var(--chart-ar, 1.938)); }
  .market-layout .report-form { margin: 0 0 calc(1.6em + 10px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(22,22,18,.06); padding: 22px; }
  .market-layout .report-form__row { flex-direction: column; flex-wrap: nowrap; }
  .market-layout .report-form__row input { flex: 0 0 auto; }
  .market-layout .report-form__row .btn { width: 100%; justify-content: center; }
}
/* The Showcase widget appends hidden open-house tooltips to <body>, parked off-screen; on narrow
   phones that created sideways scroll. Hide them until the widget shows one (.show). */
body > .idx-tooltip:not(.show) { display: none !important; }

/* ==== 2026-10-18: "A plan for your next move" — Scott's two-card layout (replaces six flip tiles) ==== */
#services .plan__head { text-align: center; max-width: 760px; margin: 0 auto clamp(20px, 4dvh, 44px); }
#services .plan__head .h-section { color: #fff; }
#services .plan__head .lead { margin: clamp(10px, 1.6dvh, 16px) auto 0; color: rgba(246,244,242,.74); }
.plan__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); max-width: 1040px; margin: 0 auto; }
.plan-card { background: #fff; color: var(--ink); border-radius: calc(var(--radius) + 4px); padding: clamp(22px, 3.6dvh, 36px) clamp(22px, 2.6vw, 36px); box-shadow: 0 24px 50px rgba(0,0,0,.28); display: flex; flex-direction: column; }
.plan-card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.6dvh, 34px); letter-spacing: -.03em; line-height: 1.1; }
.plan-card__title::after { content: ''; display: block; width: 72px; height: 3px; border-radius: 3px; margin-top: clamp(12px, 2dvh, 18px); background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-soft)); }
.plan-card__list { list-style: none; padding: 0; margin: clamp(14px, 2.6dvh, 24px) 0 clamp(18px, 3dvh, 28px); display: grid; gap: clamp(8px, 1.4dvh, 14px); }
.plan-card__list li { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(14px, 1.9dvh, 16px); line-height: 1.45; color: var(--ink-soft); }
.plan-card__check { flex: none; width: 22px; height: 22px; fill: var(--brand-primary); margin-top: 1px; }
.plan-card__btn { margin-top: auto; width: 100%; justify-content: center; }
.plan-links { display: flex; justify-content: center; flex-wrap: wrap; margin: clamp(18px, 3.4dvh, 36px) auto 0; max-width: 1040px; }
.plan-links a { display: inline-flex; align-items: center; gap: 10px; padding: 6px clamp(14px, 2vw, 28px); color: rgba(246,244,242,.9); font-size: 15px; font-weight: 500; text-decoration: none; border-left: 1px solid rgba(246,244,242,.18); transition: color .2s; }
.plan-links a:first-child { border-left: 0; }
.plan-links__arrow { color: var(--brand-primary-soft); transition: transform .2s; }
.plan-links a:hover { color: #fff; }
.plan-links a:hover .plan-links__arrow { transform: translateX(3px); }
@media (max-width: 760px) {
  .plan__grid { grid-template-columns: 1fr; }
  .plan-links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 0; }
  .plan-links a { border-left: 0; padding: 10px 6px; font-size: 14px; }
}

/* 2026-10-18: admin bindings. Stat values are wrapped so the unit span keeps its own styling; an empty unit takes no space. */
.stat__val { font-style: normal; }
.stat__num span:empty { display: none; }
.about__paras { display: contents; }