/* ============================================================
   JORGE SELLS — jorgesells.com
   Built from scratch for Jorge Salcedo, Real Estate Broker

   Palette: deep navy + gold on white. Hexes are Jorge's own, from
   his written Phase 1 spec (2026-08-05) — see docs/SPEC_PHASE1.md.
   Everything is driven from the tokens below, so the whole site
   re-skins from this block alone.

   Contrast measured, not guessed. Every pair below was computed
   against the real backgrounds; the numbers are in the comments.
   ============================================================ */

:root {
  --navy: #0a1a33; /* primary dark — hero, bands, footer */
  --navy-2: #10264a; /* navy lift — cards on dark */
  --navy-deep: #061223; /* deepest — gradient ends, scrims */

  /* HIS gold. 6.07:1 on --navy, so it is safe for text on every dark
     surface. On WHITE it is 2.86:1 and fails AA at every size — use
     --gold-dk there instead. That is why gold has two tokens. */
  /* 2026-08-11: "the Gold color has a green tint to it. Can you choose another
     gold color that is less blue/green and more yellowish?" and, on the hero,
     "a brighter color? lighter goldish?"

     His original golds sat at hue 46.7deg, which is the green end of yellow —
     that is the tint he was seeing. All three move DOWN in hue (toward orange,
     which reads warmer) and the two used on dark move UP in brightness.

     Contrast re-measured after the change, not assumed:
       --gold     7.32:1 on navy   (was 6.07)
       --gold-lt 11.51:1 on navy   (was 10.04)
       --gold-dk  4.81:1 on white  (was 4.73)  <- still clears AA, and improves
     The white-background rule is unchanged: --gold-dk is still the only gold
     allowed for text on white. --gold is 2.38:1 there and must never be used
     for type on a light surface. */
  --gold: #d4a017;
  --gold-lt: #f0cf7a; /* 11.51:1 on navy — headline emphasis on dark */
  --gold-dk: #926c00; /* 4.81:1 on white — the ONLY gold for text on white */

  /* HIS blue. 8.13:1 on white. Only 2.14:1 on navy, so it is never
     text on a dark background — it is the logo key and solid buttons
     that carry white text. */
  --blue: #004aad;
  --blue-dark: #00347a;
  --navy-ink: #2d4892; /* his "navy blue font" — 8.56:1 on white */

  --white: #ffffff;
  --off: #f6f7fa; /* neutral off-white section alt */
  --line: #e4e7ee;
  --text: #141c2b;
  --muted: #5a6478;
  --sans: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shadow: 0 10px 30px rgba(10, 26, 51, 0.1);
  --shadow-lg: 0 24px 60px rgba(10, 26, 51, 0.18);
  --radius: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is load-bearing. Every img carries width/height attributes so the
   browser can reserve space before the file lands. The moment max-width:100%
   shrinks one of them, the attribute height stays put and the picture squashes
   (seen on a 431x599 headshot rendering at 280x599 — a 35% horizontal squeeze).
   One line, and it protects every image on the site. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--gold-dk);
  text-decoration: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy-deep);
  color: #b9c2d3;
  font-size: 13px;
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.topbar-areas {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.topbar-areas span {
  color: var(--gold);
  padding: 0 6px;
}
.topbar-contact {
  display: flex;
  gap: 18px;
}
.topbar-contact a {
  color: #fff;
  font-weight: 500;
}
.topbar-contact a:hover {
  color: var(--gold-lt);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* Three columns, not space-between: space-between only balances the OUTER
   edges — with a wide logo on one side and a narrow phone button on the other,
   the links land off-centre. auto/1fr/auto gives the links the whole middle
   column and centres them inside it, so the gap is equal on both sides
   regardless of how wide the logo or the button are. */
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}
/* His own logo, cropped out of the concept sheet he sent and knocked out to
   transparency. images/logo.png = dark version for the white nav,
   images/logo-light.png = white/blue version for the navy footer. */
/* His draft's nav is just the wordmark — no tagline beside it. */
.brand {
  display: flex;
  align-items: center;
  line-height: 1;
}
/* Halved, at his request: "The logo is too big both on the desktop and mobile
   version. Cut the size in half." 164px -> 82px. */
.brand img {
  width: 82px;
  height: auto;
  display: block;
}
.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  align-items: center;
  justify-content: center;
}
.nav-links a {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover {
  color: var(--gold-dk);
}
.nav-links a.active {
  color: var(--gold-dk);
  border-bottom-color: var(--gold);
}
/* Blue, not gold. His 08-05 design uses gold for the hero and the section
   eyebrows, and blue for every button. Blue with white text is 8.13:1. */
.nav-cta {
  background: var(--blue);
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 8px;
  border-bottom: none !important;
  box-shadow: var(--shadow);
}
.nav-cta:hover {
  background: var(--blue-dark);
  color: #fff !important;
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--text);
  margin: 5px 0;
  border-radius: 2px;
  transition: 0.25s;
}

/* ---------- Hero ----------
   His draft: a twilight home photo full-bleed, white copy centred over it, his
   cut-out headshot standing at the right. Photo credit: Michael Gault Photos,
   Pexels #6422928 (free commercial licence). */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--navy);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Scrim, rebuilt 2026-08-07 for the three backgrounds Jorge supplied. His
     images already carry a navy wash down the left, so the old top-to-bottom
     scrim was double-darkening the copy side AND flattening the lit house on
     the right — the part he is actually selling. This runs left-to-right
     instead: heavy where the words sit, clearing by 68% so the photo reads.
     Measured on all three of his files with the scrim composited in, taking the
     brightest pixel in the copy column: SOLD 12.60:1, BUY 5.69:1, LOAN 17.31:1.
     AA needs 4.5:1. BUY is the tight one — re-measure if that image changes. */
  background:
    linear-gradient(
      90deg,
      rgba(5, 11, 28, 0.8) 0%,
      rgba(5, 11, 28, 0.66) 42%,
      rgba(5, 11, 28, 0.18) 68%,
      rgba(5, 11, 28, 0.1) 100%
    ),
    linear-gradient(180deg, rgba(5, 11, 28, 0.34) 0%, transparent 30%, rgba(5, 11, 28, 0.5) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 66px 24px 0;
  display: grid;
  grid-template-columns: 1.21fr 0.79fr;
  gap: 16px;
  align-items: end;
  min-height: 560px;
}
/* His note: "When the image switches to the next image the positioning of the
   YOUR HOME SOLD to BUY YOUR HOME to GET YOUR HOME LOAN are not even."
   He was right, and the cause was this block being bottom-aligned. Each slide
   carries a different amount of copy UNDER the headline — a signature on one,
   a two-line lede on another — so bottom-aligning pushed each h1 to a different
   height. Pinning the copy to the TOP of the grid row puts all three headlines
   on one line and lets the differing content hang below, where it belongs. */
.hero-copy {
  align-self: start;
  padding-top: 4px;
  padding-bottom: 60px;
  text-align: left;
}
.hero h1 {
  font-size: clamp(31px, 4.3vw, 51px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);
}
/* SOLD / HOME / LOAN is the whole hero in his 08-05 design — roughly twice the
   size of the lines around it, on its own line, filled with a gold gradient
   that runs light at the top to deep at the bottom. */
.hero h1 .accent {
  display: block;
  font-size: 2.1em;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 2px 0;
  /* His note: "the gradient looks radial not linear... make it a little
     brighter... 1 or 2 font sizes larger." Three things were making a straight
     180deg ramp read as a radial glow: a mid stop parked at 62%, and a bottom
     stop (#8f6f00) far darker than the top. Even spacing and a bottom stop at
     his own #bd9300 give a clean top-to-bottom fall. Every stop here measures
     at least 6.07:1 on the scrimmed hero. Size 1.85em -> 2.1em. */
  background: linear-gradient(
    180deg,
    #fdf4d8 0%,
    #eed08a 50%,
    var(--gold) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Gradient text drops the shadow that keeps the rest of the headline legible,
     so the gold carries its own instead. */
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.5));
}
/* Solid gold rule under the headline, as in the mockup */
.hero h1::after {
  content: "";
  display: block;
  width: 430px;
  max-width: 100%;
  height: 3px;
  background: var(--gold);
  margin: 18px 0 14px;
}
/* His real signature, supplied as a transparent PNG in his 2026-08-05
   asset pack. This replaced the Great Vibes webfont that was standing in
   for it — he asked for Gistesy, then solved it himself by sending the
   artwork. One less font request, and it is actually his handwriting. */
.hero-script {
  display: block;
  width: clamp(190px, 22vw, 268px);
  height: auto;
  margin: 24px 0 6px;
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.55));
}
.hero-role {
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eef2ff;
}
/* USC Marshall, moved off the LPT bar to sit under his name. Quieter than the
   role line above it so it reads as a footnote to his name, not a second title. */
.hero-role-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-lt);
  margin-top: 3px;
}
.hero-cred {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 4px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(3px);
}
.hero-cred svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: #fff;
}
.hero-cred span {
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #fff;
}
.hero-cred b {
  font-weight: 800;
  letter-spacing: 0.1em;
}
.hero-sub {
  color: var(--gold-lt);
  margin: 0;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* The uppercase gold treatment is built for a short punch line ("No exceptions.
   No excuses."). A full sentence set that way turns into a wall. Slide 3 uses
   Jorge's own sentence verbatim, so it gets sentence case instead. */
.hero-sub.lede {
  color: #e8ecf4;
  font-size: clamp(15px, 1.5vw, 17.5px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  max-width: 30em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}
.hero-ctas .btn {
  padding: 15px 24px;
  font-size: 13px;
  letter-spacing: 0.05em;
  border-radius: 4px;
}
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 9px;
  cursor: pointer;
  border: 0;
  transition: 0.2s;
  text-align: center;
}
.btn-primary {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 10px 26px rgba(189, 147, 0, 0.38);
}
.btn-primary:hover {
  background: var(--gold-lt);
  transform: translateY(-2px);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* Inline button that sits inside a card rather than under one. Used for the two
   gold buttons Jorge asked for inside the selling/buying images — they were
   plain text links before, and he wanted a button he could see. */
.btn-sm {
  padding: 11px 20px;
  font-size: 12.5px;
}
.btn-white {
  background: #fff;
  color: var(--navy);
}
.btn-white:hover {
  transform: translateY(-2px);
}
.hero-photo {
  position: relative;
  align-self: end;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* His three cut-outs are 431x599, 378x594 and 443x581. Left to size themselves
   against the column WIDTH he came out 558px tall on one slide, 594 on the next
   and 527 on the third — a 67px jump as the carousel turned, which is what he
   meant by "disproportionate."

   A fixed box height plus object-fit:contain settles it: every slide gets the
   same 560px stage, the picture fits inside it, and contain will never distort
   — that is the whole contract of the keyword. object-position stands him on
   the floor of the box so he does not appear to hover. The column also widened
   (0.72fr -> 0.79fr) because his widest cut-out needs 427px at this height and
   only had 402. */
.hero-photo img {
  height: 560px;
  width: 100%;
  object-fit: contain;
  object-position: bottom center;
  margin: 0 auto;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.65));
}
/* Graceful state while Jorge's headshot is not saved yet */
.hero-photo .photo-note {
  width: min(330px, 90%);
  margin: 0 auto 60px;
  text-align: center;
  padding: 70px 22px;
  font-size: 13px;
  color: #9db0e0;
  line-height: 1.7;
  border: 1.5px dashed rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.hero-photo .photo-note b {
  display: block;
  color: #dfe7ff;
  font-size: 14.5px;
  margin-bottom: 6px;
}
.hero-photo img + .photo-note {
  display: none;
}

/* Search band overlapping hero bottom */
.searchband {
  position: relative;
  z-index: 5;
  margin-top: -46px;
}
/* Six cells on the home page now — Jorge's spec splits price into Min and Max.
   minmax(0, ...) so a long placeholder cannot push a track past its share. */
.searchband-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)) minmax(150px, auto);
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
}
/* The button sat in an `auto` track that could shrink below "SEARCH HOMES"
   at full width, wrapping the text and clipping the last letter (Jorge,
   08-30). minmax(150px, auto) above stops the track from collapsing;
   nowrap stops the text itself from ever wrapping once it can't. */
.searchband-card .btn {
  white-space: nowrap;
}
.searchband-card label {
  display: none;
}
.searchband-card input,
.searchband-card select {
  font-family: var(--sans);
  font-size: 15px;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  width: 100%;
}
.searchband-card input:focus,
.searchband-card select:focus {
  outline: none;
  border-color: var(--gold);
}

/* ---------- Sections ---------- */
.section {
  padding: 84px 0;
}
.section.alt {
  background: var(--off);
}
.section.dark {
  background: var(--navy);
  color: #fff;
}
/* Jorge asked for the same swap on every section of his 2026-08-07 revisions:
   "make gold top text larger and [the heading] a little smaller, make it all
   CAPs." So the eyebrow goes up (12.5 -> 16px) and .section-title comes down
   and takes uppercase. Tracking eases from .22em to .16em — letter-spacing that
   wide reads as decoration at 12px and as a gap at 16px. */
.eyebrow {
  display: block;
  color: var(--gold-dk);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section.dark .eyebrow {
  color: var(--gold-lt);
}
/* ...but not when it sits inside a white card on a dark section (2.14:1 on white) */
.section.dark .connect-card .eyebrow {
  color: var(--gold-dk);
}
/* Navy blue, not near-black. Jorge's 08-05 design sets every section heading
   in his #2d4892 with a gold eyebrow above it. 8.56:1 on white. */
.section-title {
  font-size: clamp(21px, 2.5vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  /* Caps need the tracking opened back up; -0.01em was tuned for sentence case. */
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--navy-ink);
}
.section.dark .section-title,
.page-hero .section-title {
  color: #fff;
}
.section-intro {
  color: var(--muted);
  max-width: 640px;
  margin-top: 14px;
  font-size: 16.5px;
}
/* His note on the social section: change this line "to a lighter goldish
   color." 6.6:1 on --navy. */
.intro-gold {
  color: #e8d5a0 !important;
}
.section.dark .section-intro {
  color: #bcc8ea;
}
.center {
  text-align: center;
}
.center .section-intro {
  margin-left: auto;
  margin-right: auto;
}
.section-head {
  margin-bottom: 44px;
}

/* ---------- Cards / grids ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  transition: 0.25s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.card h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 10px;
}
.card p {
  color: var(--muted);
  font-size: 15px;
}
.card .card-link {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-dk));
  color: var(--navy);
  margin-bottom: 18px;
}
.card-icon svg {
  width: 26px;
  height: 26px;
}

/* Steps (Sell My Home) */
.step-card {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 34px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: 0.25s;
}
.step-card:hover {
  transform: translateY(-5px);
}
.step-num {
  font-size: 64px;
  font-weight: 800;
  opacity: 0.18;
  position: absolute;
  top: 6px;
  right: 18px;
  line-height: 1;
}
.step-kicker {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #bcd0ff;
  font-weight: 600;
}
.step-card h3 {
  font-size: 21px;
  margin: 8px 0 10px;
}
.step-card p {
  color: #d5e0ff;
  font-size: 14.5px;
}
.step-card .btn {
  margin-top: 18px;
  padding: 11px 20px;
  font-size: 12.5px;
}

/* Social strip */
/* Real vertical (9:16) Shorts thumbnails flush against each other, with an eye
   icon + view count in the bottom-left of each.
   SIX now, not five — Jorge listed the exact six videos he wants in his Phase 1
   spec (2026-08-05). Six divides cleanly into 3x2 on tablet, which five never did. */
/* Jorge: "Are you able to add a space between the videos? And maybe a play
   button in the middle? And arrows on edge." All three below. The six cards
   used to be a flush grid with gap:0 and one shared rounded corner — now each
   card is its own tile. */
.social-rail {
  position: relative;
}
/* A real rail at every width, not a grid that happens to fit.

   The first build made this a 6-up grid on desktop, so all six cards were
   always visible and the arrows Jorge asked for had nothing to scroll — they
   were hidden above the phone breakpoint. That meant explaining to him why his
   own request only half-happened.

   Sizing each card to 18.6% puts 5.3 of them in view: the sixth peeks at the
   right edge, which is the standard cue that a row continues, and the arrows do
   real work at every size. His thumbnails get bigger too — 188px in the old
   grid, 210px now. */
/* No scroll snapping here — it is switched on for phones further down, where
   the rail is long enough to want it.

   Snap on the desktop rail was quietly destructive. Total travel is 211px while
   the snap grid is one card plus one gap, 226px apart, so the nearest snap point
   from anywhere was the far end. The rail pinned itself to 211, main.js saw
   scrollLeft at maximum and disabled the next arrow, and the arrow Jorge asked
   for looked present and did nothing. Measured: setting scrollLeft to 150
   returned 211, and the arrow's own click handler never fired because the button
   was already disabled.

   A rail whose entire travel is shorter than one snap interval must not snap. */
/* scroll-behavior drives the arrow glide; main.js only sets the destination.
   prefers-reduced-motion is handled in JS, which jumps straight to the target
   rather than gliding. */
.social-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.social-strip::-webkit-scrollbar {
  display: none;
}
.social-strip .video-card {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 18.6%;
}
/* One of his six is a full-length 16:9 video, not a Short. Its thumbnail is
   centre-cropped by object-fit so the row keeps one clean height. */
.video-card.is-wide img {
  object-position: center 42%;
}
.video-card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 10px;
  background: #0b1226;
  transition: 0.25s;
}
/* Play button, centred. It is decorative — the whole card is already the link,
   so this carries aria-hidden and never takes focus of its own. */
.video-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 16, 34, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.92);
  color: #fff;
  backdrop-filter: blur(2px);
  transition: 0.25s var(--ease);
  pointer-events: none;
}
.video-play svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}
.video-card:hover .video-play,
.video-card:focus-visible .video-play {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  transform: translate(-50%, -50%) scale(1.1);
}
/* Edge arrows. They only earn their place when the rail actually scrolls, which
   is the phone layout — main.js adds .has-overflow after measuring. On desktop
   all six cards are visible and an arrow would be a lie. */
.rail-arrow {
  display: none;
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  box-shadow: var(--shadow);
  place-items: center;
}
.social-rail.has-overflow .rail-arrow {
  display: grid;
}
.rail-arrow.prev {
  left: -6px;
}
.rail-arrow.next {
  right: -6px;
}
.rail-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-arrow[disabled] {
  opacity: 0.32;
  cursor: default;
}
.video-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.video-card:hover img,
.video-card:focus-visible img {
  transform: scale(1.05);
}
.video-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
  pointer-events: none;
}
.video-views {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.video-views svg {
  width: 15px;
  height: 15px;
}
.video-card .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.social-follow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.social-follow > span {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
}
.social-follow a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  transition:
    transform 0.2s,
    filter 0.2s;
}
.social-follow a:hover {
  transform: translateY(-3px);
  filter: brightness(1.12);
}
.social-follow svg {
  width: 21px;
  height: 21px;
}
.sf-yt {
  background: #ff0000;
}
.sf-fb {
  background: #1877f2;
}
.sf-ig {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 48%, #6228d7);
}
.sf-tt {
  background: #010101;
}
.sf-li {
  background: #0a66c2;
}
.sf-gg {
  background: #1a73e8;
}

/* Listings */
.listing-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: 0.25s;
}
.listing-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.listing-media {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(140deg, #dfe6f7, #c6d3f2);
  display: grid;
  place-items: center;
  color: var(--muted);
}
.listing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.listing-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--gold);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
}
.listing-body {
  padding: 20px 20px 24px;
}
.listing-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
}
.listing-addr {
  color: var(--muted);
  font-size: 14px;
  margin: 6px 0 12px;
}
.listing-specs {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.listing-specs span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* News */
.news-card {
  display: flex;
  flex-direction: column;
}
.news-media {
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(140deg, #dfe6f7, #c6d3f2);
  margin-bottom: 16px;
}
.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dk);
}
.news-card h3 {
  font-size: 17.5px;
  margin: 6px 0 8px;
}

/* Newsletter */
/* Newsletter + neighbourhood-guide side by side, as in his draft */
.signup-pair {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: stretch;
}
/* Jorge: "Can you add an image to the background?" — and he attached the aerial
   twilight estate. His blue stays over it as a scrim so the white copy keeps
   its contrast, and the alpha is set to the lightest value that still passes:
   at .86/.90 the body text measures 4.71:1, and one step lighter (.82/.88)
   drops it to 4.28:1 and fails. The photo reads as texture rather than as a
   picture — that is the ceiling for white text over a photograph, and the
   alternative was failing AA. It is decorative, so it lives in CSS rather than
   an <img> and takes no alt text it has not earned. */
.newsletter {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(115deg, rgba(0, 74, 173, 0.86) 0%, rgba(6, 25, 60, 0.9) 100%),
    url("../images/scenes/estate-aerial.jpg") center / cover no-repeat;
  border-radius: var(--radius);
  color: #fff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  box-shadow: var(--shadow-lg);
}
.newsletter h3 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
}
.newsletter p {
  color: #d5e0ff;
  margin-top: 10px;
  font-size: 15px;
}
.newsletter form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.newsletter input {
  flex: 1 1 200px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 0;
  font-family: var(--sans);
  font-size: 15px;
}
.newsletter .btn {
  /* His 08-11 note: "make the sign up button gold with blue or black letters".
     Navy-deep on this gold measures 7.90:1 — comfortably past AA. */
  background: var(--gold);
  color: var(--navy-deep, #0a1a33);
}
.newsletter .btn:hover {
  background: var(--gold-lt);
  color: var(--navy-deep, #0a1a33);
}

.guide-box {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow);
}
.guide-box h3 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}
.guide-box > p {
  color: var(--muted);
  font-size: 14.5px;
  margin: 10px 0 20px;
}
.guide-box form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guide-box input {
  padding: 13px 15px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  font-family: var(--sans);
  font-size: 15px;
  width: 100%;
}
.guide-box input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.guide-box .btn {
  width: 100%;
}

/* Reviews */
.review-card {
  position: relative;
}
/* darker gold — #c9a227 on white measured 2.42:1, this passes AA */
.review-stars {
  color: #8a6d10;
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.review-card blockquote {
  font-size: 15px;
  color: var(--text);
}
.review-card figcaption {
  margin-top: 14px;
  font-weight: 700;
  font-size: 14px;
}
.review-card .review-src {
  color: var(--muted);
  font-weight: 400;
  font-size: 12.5px;
}
.g-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  box-shadow: var(--shadow);
}

/* Contact split */
.connect {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
}
/* "Center name and title" — his note on the signature block under the photo. */
.connect > div:first-child {
  text-align: center;
}
.connect .hero-script {
  margin-left: auto;
  margin-right: auto;
}
/* Same contract as the hero headshot: a fixed stage plus object-fit:contain,
   which cannot distort and cannot overflow. min(380px, 100%) was the wrong tool
   — the parent has no definite height, so the 100% resolved to auto, the whole
   min() became invalid, and the picture rendered at roughly twice the size it
   should have. */
.connect-photo img {
  height: clamp(260px, 34vw, 400px);
  width: 100%;
  object-fit: contain;
  object-position: bottom center;
  margin: 0 auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}
.connect-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-grid .full {
  grid-column: 1 / -1;
}
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  background: #fff;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.field textarea {
  min-height: 110px;
  resize: vertical;
}
.form-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
}
.form-success {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #14532d;
  background: #dcfce7;
  border: 1px solid #86efac;
}
.form-error {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: #7f1d1d;
  background: #fee2e2;
  border: 1px solid #fca5a5;
}
.form-error a {
  color: #7f1d1d;
  font-weight: 700;
  text-decoration: underline;
}
.hidden {
  display: none !important;
}

/* Search panel (IDX slot) — banner styled like Jorge's draft */
/* Jorge: "Change the background color to white or a light grey. The dark blue
   looks weird." He is right — the panel sat on a white section, so a navy slab
   full of white inputs read as a foreign object. Light grey with a hairline
   border keeps it a defined panel without shouting. */
.search-panel {
  background: #f4f6fa;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 2px 10px rgba(10, 26, 51, 0.05);
}
.search-panel-title {
  color: var(--navy-ink);
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.search-panel .searchband-card {
  box-shadow: none;
  background: transparent;
  padding: 0;
  max-width: none;
}
/* Was a hardcoded green (#0f9d76) left over from the first build. On a navy and
   gold page it read as a different site's button. Gold on navy text measures
   6.07:1, and the panel behind it is navy, so this is the same button as every
   other primary action on the site. */
/* His blue, used for every in-page action button. Gold stays in the hero,
   the eyebrows and the LPT band, which is how his 08-05 design splits them. */
.btn-blue,
.btn-search {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 74, 173, 0.3);
}
.btn-blue:hover,
.btn-search:hover {
  background: var(--blue-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* Google reviews block — real layout, live data fills it in */
.reviews-block {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 30px;
  align-items: start;
}
.reviews-rating {
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 18px;
  box-shadow: var(--shadow);
}
.reviews-word {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.reviews-rating .review-stars {
  font-size: 19px;
  margin: 8px 0 6px;
}
.reviews-count {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.reviews-g {
  font-weight: 700;
  font-size: 15px;
  margin-top: 12px;
  color: var(--text);
}
.reviews-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.review-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  min-height: 180px;
}
/* skeleton lines — clearly "loading", never mistaken for a real quote */
.sk {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: #e9edf7;
  margin-bottom: 11px;
}
.sk-40 {
  width: 40%;
  height: 13px;
}
.sk-25 {
  width: 25%;
}
.sk-70 {
  width: 70%;
}

/* Calculator */
.calc {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
}
.calc-out {
  background: linear-gradient(160deg, var(--navy), var(--navy-2));
  color: #fff;
  border-radius: var(--radius);
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.calc-out .payment {
  font-size: 44px;
  font-weight: 800;
  margin: 6px 0;
}
.calc-out .payment small {
  font-size: 16px;
  font-weight: 500;
  color: #bcd0ff;
}
.calc-out ul {
  list-style: none;
  margin-top: 18px;
}
.calc-out li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14.5px;
  color: #d5e0ff;
}
.calc-out li strong {
  color: #fff;
}

/* Rates table */
.rates-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.rates-table th {
  background: var(--navy);
  color: #fff;
  text-align: left;
  padding: 14px 18px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rates-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.rates-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}

/* FAQ */
.faq-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 12px;
  background: #fff;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 18px 22px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::after {
  content: "+";
  color: var(--gold-dk);
  font-size: 22px;
  font-weight: 400;
}
.faq-item[open] summary::after {
  content: "–";
}
.faq-item p {
  padding: 0 22px 18px;
  color: var(--muted);
  font-size: 15px;
}

/* CTA band. Written as .section.cta-band on purpose: these bands sit on
   <section class="section alt cta-band">, and the plain .cta-band selector
   (0,1,0) lost to .section.alt (0,2,0) — which is why the "Ready to start?"
   band Jorge circled on 08-11 was still light. Same specificity + later in
   the file = the navy wins. */
.section.cta-band,
.cta-band {
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  text-align: center;
}
.cta-band .section-title {
  color: #fff;
}
.cta-band .section-intro {
  color: #d5e0ff;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--navy);
  color: #aeb9dc;
  padding: 64px 0 30px;
  font-size: 14px;
}
.footer a {
  color: #dfe6fb;
}
.footer a:hover {
  color: var(--gold-lt);
}
/* minmax(0, ...) not 1fr: a plain `1fr` track floors at min-content, and
   "jorge@jorgesells.com" is one unbreakable 151px word. On a 375px phone that
   forced the grid 16px wider than the screen and the whole page scrolled
   sideways. The overflow-wrap below lets the address break instead. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  margin-bottom: 40px;
}
.footer-grid ul,
.footer-grid li,
.footer-grid a {
  overflow-wrap: anywhere;
}
/* "Make logo smaller" — his footer note. 168px -> 100px, matching the halved
   nav logo so the two read as the same mark at two scales. */
.footer-brand img {
  width: 100px;
  height: auto;
  display: block;
}
.footer-brand p {
  margin-top: 14px;
  font-size: 13.5px;
}
.footer h4 {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer ul {
  list-style: none;
}
.footer li {
  margin-bottom: 9px;
}
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.footer-social a:hover {
  border-color: var(--gold);
}
.footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.footer-fine {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 22px;
  font-size: 12px;
  color: #7f8bb0;
  line-height: 1.7;
}
.footer-fine + .footer-fine {
  border-top: 0;
  padding-top: 10px;
}
.footer-fine b {
  color: #aeb9dc;
}
.eho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* The Equal Housing Opportunity house, which he asked for by name. HUD's mark
   is a US government work in the public domain; drawn inline as SVG so it stays
   crisp at any size and needs no image file. */
.eho-mark {
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: -4px;
}
/* Builder credit line. Quiet on purpose — it is a signature, not an ad. */
.footer-credit {
  display: inline-block;
  margin-top: 4px;
  opacity: 0.72;
}
.footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-credit a:hover {
  color: var(--gold-lt);
}
.footer-legal {
  margin: 18px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 12.5px;
}
.footer-copy {
  font-size: 12px;
  color: #97a3c9;
}

/* ---------- Reveal ----------
   Only hide content once JS has confirmed it can reveal it again. The .js class is
   set by main.js, so with JS off or broken the whole site still renders. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: linear-gradient(
    120deg,
    var(--navy-deep) 0%,
    var(--navy) 55%,
    var(--navy-2) 100%
  );
  color: #fff;
  padding: 64px 0;
}
.page-hero .eyebrow {
  color: var(--gold-lt);
}
.page-hero h1 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
}
.page-hero p {
  color: #ccd4e2;
  max-width: 620px;
  margin-top: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  /* minmax(0, 1fr), not 1fr. A 1fr track floors at min-content, and the
     headshot's min-content is its intrinsic 431px — measured, the single column
     came out 430px wide inside a 327px viewport and the copy was being clipped
     by the hero's overflow:hidden. minmax(0,...) lets the track go narrower
     than its contents want. */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 52px;
  }
  .hero-copy {
    padding-bottom: 28px;
  }
  /* Jorge stays visible on phones and tablets — most of his traffic is mobile.
     The 560px desktop stage would eat a phone screen, so it scales here. */
  .hero-photo {
    min-height: 0;
  }
  .hero-photo img {
    height: clamp(240px, 62vw, 360px);
    width: 100%;
    max-width: 100%;
  }
  .searchband {
    margin-top: -30px;
  }
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .connect,
  .calc,
  .signup-pair,
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .searchband-card {
    grid-template-columns: 1fr 1fr;
  }
  .searchband-card .btn {
    grid-column: 1 / -1;
  }
  .reviews-block {
    grid-template-columns: 1fr;
  }
  .reviews-rail {
    grid-template-columns: 1fr 1fr;
  }
}
/* Measured in the DOM, not guessed at. Jorge's Phase 1 nav swapped "Rent" for
   "Schedule Call", which is nine characters longer, so this number moved:
     nav-links scrollWidth  827px
     logo                   164px
     .nav-inner padding      48px
     flex gap                18px
     --------------------------------
     minimum viewport      1057px
   It was 1000px for the old seven links and that is now 57px too low — the row
   would wrap between 1000 and 1057. 1080 gives a little headroom for font
   rendering differences across platforms. Re-measure if a nav item changes.

   2026-08-07: the logo halved to 82px, so the number dropped by 82 to 975.
   Kept at 1080 anyway — the extra room does no harm and the hamburger is the
   better experience on a tablet regardless. */
@media (max-width: 1080px) {
  /* Four children (brand, toggle, nav, phone) will not sit in three grid
     columns. Below the breakpoint the bar goes back to flex. */
  .nav-inner {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .nav-inner .nav-cta {
    order: 3;
    margin-left: auto;
  }
  .nav-toggle {
    order: 4;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 18px 24px 24px;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-toggle {
    display: block;
  }
}
@media (max-width: 720px) {
  .topbar-areas {
    display: none;
  }
  .topbar-inner {
    justify-content: center;
  }
  .grid-3,
  .grid-4,
  .form-grid,
  .reviews-rail {
    grid-template-columns: 1fr;
  }
  /* The rail itself is the base rule for every width. On a phone the cards get
     tighter, and snapping earns its place here: 2.2 cards in view against six
     means plenty of travel, and a thumb-swipe wants to land on a card edge. */
  .social-strip {
    gap: 10px;
    scroll-snap-type: x proximity;
  }
  .social-strip .video-card {
    scroll-snap-align: start;
  }
  /* "The social media icons on the mobile version are way to big." 42px -> 34px,
     which still clears the 34px minimum tap target once the 12px gap counts as
     spacing around it. */
  .social-follow a {
    width: 34px;
    height: 34px;
  }
  .social-follow svg {
    width: 17px;
    height: 17px;
  }
  .social-follow > span {
    font-size: 16px;
  }
  .video-play {
    width: 38px;
    height: 38px;
  }
  .video-play svg {
    width: 18px;
    height: 18px;
  }
  /* Two and a bit cards on a phone instead of five and a bit.
     flex-shrink stays spelled out: `flex: 0 0 44%` shorthand computes shrink
     as 1, and the cards squash to ~60px instead of overflowing into a row. */
  .social-strip .video-card {
    flex-basis: 44%;
  }
  .search-panel {
    padding: 22px;
  }
  .searchband {
    margin-top: 0;
  }
  .searchband-card {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
  .hero-copy {
    padding-bottom: 44px;
  }
  .hero-ctas .btn {
    width: 100%;
  }
  .section {
    padding: 60px 0;
  }
  .newsletter {
    padding: 28px;
  }
  .newsletter form {
    flex-direction: column;
  }
}

/* ============================================================
   SECTIONS FROM JORGE'S 2026-07-31 MOCKUP
   Stats band, six-reason grid, buy/sell split cards, tool cards,
   and the signed footer note. Navy + gold throughout.
   ============================================================ */

/* --- Hero promise badges (Proven Results / Expert Guidance / Maximum Value) --- */
.hero-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: flex-start;
  margin: 26px 0 4px;
}
.promise {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
}
.promise-ico {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: grid;
  place-items: center;
  color: var(--gold-lt);
  background: rgba(189, 147, 0, 0.12);
}
.promise-ico svg {
  width: 21px;
  height: 21px;
}
.promise b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.promise b span {
  color: var(--gold-lt);
}
.promise small {
  font-size: 12px;
  color: #c3cbd9;
  line-height: 1.35;
  display: block;
}

/* --- Hero contact lines --- */
.hero-contact {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 22px;
  align-items: flex-start;
}
.hero-contact a,
.hero-contact span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #eef1f6;
  font-size: 15px;
  font-weight: 500;
}
.hero-contact svg {
  width: 17px;
  height: 17px;
  color: var(--gold-lt);
  flex: none;
}
.hero-contact a:hover {
  color: var(--gold-lt);
}
.hero-licence {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: #aeb7c6;
  margin-top: 6px;
}

/* --- Stats band --- */
.stats-band {
  background: var(--navy-deep);
  color: #fff;
  border-top: 1px solid rgba(189, 147, 0, 0.28);
}
.stats-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.stat {
  padding: 6px 34px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.stat:first-child {
  border-left: 0;
}
.stat b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--gold-lt);
  line-height: 1.1;
}
.stat b em {
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.stat small {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c6cdd9;
}
.stat.stat-text b {
  font-size: 17px;
  color: #fff;
  letter-spacing: 0.02em;
}
.stat.stat-text b span {
  color: var(--gold-lt);
  display: block;
}

/* --- Six reasons --- */
.reasons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.reason {
  padding: 6px 20px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.reason:first-child {
  border-left: 0;
}
.reason-ico {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--navy);
  background: linear-gradient(150deg, #f2e6c8, #e6d3a2);
  box-shadow: 0 6px 16px rgba(189, 147, 0, 0.3);
}
.reason-ico svg {
  width: 25px;
  height: 25px;
}
.reason h3 {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 8px;
}
.reason p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* --- Buy / Sell split cards --- */
.split-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.split-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.split-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.split-card:hover img {
  transform: scale(1.06);
}
/* Jorge: "The images look a little dull. Are you able to make the images a
   little brighter?"

   The first attempt just lightened the card-wide scrim, and measuring killed
   it: white body copy fell to 2.86:1 against the brightest window in the photo.
   Measuring also turned up that the ORIGINAL card was already at 3.53:1 — it
   had been failing AA since it was built, and no amount of tuning a single
   gradient fixes it, because the text runs across three quarters of a photo
   with blown highlights in it.

   So the two jobs are separated. The card scrim goes light, which is what
   actually makes his photo brighter. And the copy gets its own plate underneath
   it, fading out before the photo runs clear. Because that plate has an alpha
   floor, contrast barely depends on what is in the picture any more. Measured
   over both of his images, worst pixel in the text column:

     body #d7dce5   6.23:1   (was 2.86:1 brightened, 3.53:1 before that)
     white h3       8.57:1
     gold h3 span   4.95:1

   AA needs 4.5:1. Re-measure if he swaps a photo, but the floor makes a
   failure unlikely rather than merely unobserved. */
.split-card img {
  filter: brightness(1.16) saturate(1.14) contrast(1.03);
}
.split-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(6, 18, 35, 0.4) 0%,
    rgba(6, 18, 35, 0.28) 50%,
    rgba(6, 18, 35, 0.1) 100%
  );
}
/* padding-right, not max-width. The icon is absolutely positioned against THIS
   box, so a percentage max-width does not reserve space for it — measured 70px
   of the paragraph running underneath the circle. Reserving 132px on the right
   (74px icon + 28px offset + 30px breathing room) makes the overlap impossible
   at any card width instead of merely unlikely at one. */
.split-body {
  position: relative;
  z-index: 2;
  padding: 32px 132px 32px 32px;
  max-width: 100%;
}
/* The copy's own plate — see the note on .split-card::after. It stretches past
   the body box on both sides so the fade happens in empty space rather than
   under a word, and sits behind the text with z-index.

   2026-08-11: "There's a black box behind the text. If you remove that black
   background is the white text as visible with it? If so remove the black
   background. The goal is to show the image in the background."

   Measured before touching it rather than guessing. Across the whole region the
   copy occupies, the BRIGHTEST pixel in either of his two images is rgb(56,66,78)
   — white text on that is 10.21:1, and the average is 18.8:1. AA needs 4.5:1.
   His images carry the contrast on their own, so the heavy plate was doing
   nothing but hiding the photo he wanted seen.

   What is left is a light wash on the left edge only. It is not needed for the
   two images shipping today; it is insurance for the day he swaps in a brighter
   photo, so a future image cannot silently drop the text below AA. Worst case
   with the two current images: still above 12:1. */
.split-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 -40px;
  background: linear-gradient(
    90deg,
    rgba(6, 18, 35, 0.45) 0%,
    rgba(6, 18, 35, 0.28) 55%,
    rgba(6, 18, 35, 0.12) 78%,
    rgba(6, 18, 35, 0) 100%
  );
}
.split-body h3 {
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 800;
  line-height: 1.2;
}
.split-body h3 span {
  color: var(--gold-lt);
}
.split-body p {
  color: #d7dce5;
  font-size: 14.5px;
  margin: 10px 0 18px;
}
.split-icon {
  position: absolute;
  z-index: 2;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--gold);
  background: rgba(10, 26, 51, 0.55);
  color: var(--gold-lt);
  transition: transform 0.4s var(--ease);
}
.split-card:hover .split-icon {
  transform: translateY(-50%) scale(1.08);
}
.split-icon svg {
  width: 32px;
  height: 32px;
}

/* --- Tool cards --- */
.tool-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tool-card {
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: 0.3s var(--ease);
}
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
.tool-thumb {
  position: relative;
}
.tool-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tool-thumb .tool-ico {
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--gold-lt);
  border: 2px solid #fff;
  box-shadow: var(--shadow);
}
.tool-thumb .tool-ico svg {
  width: 20px;
  height: 20px;
}
.tool-body {
  padding: 20px 20px 20px 32px;
}
.tool-body h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tool-body p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 7px 0 12px;
}
.tool-body a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dk);
}
.tool-body a:hover {
  color: var(--navy);
}

/* --- Footer signed note --- */
.footer-note {
  border: 1px solid rgba(189, 147, 0, 0.45);
  border-radius: 10px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.04);
}
.footer-note p {
  font-size: 13.5px;
  color: #d5dae3;
  line-height: 1.6;
}
.footer-note .sig {
  display: block;
  width: 168px;
  height: auto;
  margin-top: 12px;
  opacity: 0.92;
}

/* --- Responsive for the new sections --- */
@media (max-width: 1000px) {
  .reasons {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
  }
  .reason:nth-child(4) {
    border-left: 0;
  }
  .tool-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px) {
  .split-cards {
    grid-template-columns: 1fr;
  }
  .split-body {
    max-width: 100%;
    padding-right: 108px;
  }
  .stat {
    padding: 10px 20px;
  }
}
@media (max-width: 620px) {
  .reasons {
    grid-template-columns: 1fr 1fr;
  }
  .reason {
    border-left: 0;
  }
  .stats-inner {
    gap: 4px;
  }
  .stat {
    border-left: 0;
    flex: 1 1 44%;
  }
  .hero-promises {
    gap: 16px;
    flex-direction: column;
    align-items: center;
  }
  .promise {
    width: 100%;
    max-width: 260px;
  }
  .split-icon {
    width: 56px;
    height: 56px;
    right: 18px;
  }
  .split-icon svg {
    width: 24px;
    height: 24px;
  }
  .split-body {
    padding: 24px;
    padding-right: 86px;
  }
}

/* --- Video wall on navy --- */
.section.dark .section-title {
  color: #fff;
}
.social-strip {
  border: 1px solid rgba(189, 147, 0, 0.38);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* Settle the thumbnails down a touch so they sit in the palette,
   then bring them to full strength on hover. */
.video-card img {
  filter: saturate(0.88) brightness(0.94);
}
.video-card:hover img,
.video-card:focus-visible img {
  filter: none;
}
.section.dark .social-follow > span {
  color: #fff;
}

/* --- Even up the six reason headings --- */
/* Two of his six labels wrap to a second line. A min-height keeps every
   description starting on the same baseline instead of stair-stepping. */
/* Two lines at 13px/1.6 measure 41.6px. 2.6em only reserved 33.8px, so the
   two-line labels still pushed their text down. 3.2em reserves both lines. */
.reason h3 {
  min-height: 3.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 620px) {
  .reason h3 {
    min-height: 0;
  }
}

/* ============================================================
   PHASE 1 — built to Jorge's written spec, 2026-08-05.
   The home page follows the agreed section order.
   ============================================================ */

/* ---------- Section 1: hero carousel ----------
   The hero is a carousel of three images: Sell, Buy,
   Get Pre-Approved.

   Progressive enhancement, the same contract as .reveal. Slide 1 is visible in
   plain CSS. Slides 2 and 3 are only hidden once `.js` is on <html>, which the
   inline script in <head> sets before paint. If JS never runs the visitor gets
   one complete hero, never an empty box or three stacked heroes. */
.hero-carousel {
  position: relative;
}
.hero-slide {
  position: relative;
}
/* With JS off, show slide 1 only. Measured: leaving all three in flow stacked
   three full heroes for ~1970px before any real content.
   Nothing unique is lost — slides 2 and 3 lead to Buy and Get Pre-Approved,
   and both are in the nav, in Section 3 and in Section 4. */
.hero-slide + .hero-slide {
  display: none;
}
.js .hero-slide + .hero-slide {
  display: block;
}
.js .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.7s var(--ease),
    visibility 0s linear 0.7s;
}
.js .hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.7s var(--ease),
    visibility 0s;
}
/* Crossfade, not a translateX track: nothing to measure, so it cannot drift
   out of sync on a resize, and it costs one compositor property. */
@media (prefers-reduced-motion: reduce) {
  .js .hero-slide {
    transition: none;
  }
}

/* Bottom-left, under the copy column. Centred at 92px they sat level with the
   CTA buttons and read as a third button. */
.hero-dots {
  position: absolute;
  z-index: 5;
  left: max(24px, calc((100% - 1180px) / 2 + 24px));
  bottom: 30px;
  display: flex;
  gap: 10px;
}
.hero-dots button {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.38);
  transition: background 0.3s var(--ease);
}
.hero-dots button[aria-current="true"] {
  background: var(--gold-lt);
}
.hero-dots button:hover {
  background: rgba(255, 255, 255, 0.7);
}
.hero-dots button:focus-visible,
.hero-arrow:focus-visible {
  outline: 2px solid var(--gold-lt);
  outline-offset: 3px;
}

.hero-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(6, 18, 35, 0.42);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.hero-arrow:hover {
  background: rgba(6, 18, 35, 0.75);
  border-color: var(--gold);
}
.hero-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-arrow.prev {
  left: 18px;
}
.hero-arrow.next {
  right: 18px;
}
/* No JS, no controls — they would do nothing. */
.hero-dots,
.hero-arrow {
  display: none;
}
.js .hero-dots {
  display: flex;
}
.js .hero-arrow {
  display: grid;
}

/* ---------- The LPT band ----------
   Jorge's mockup puts his brokerage's marks and figures under the hero.
   LPT approved the logo for use, so it ships — but grouped under an
   explicit "LPT Realty" label so the $30 Billion reads as the BROKERAGE's
   number, which it is, and not as Jorge's personal production.
   Deliberately NOT here: the USC Marshall wordmark (a university trademark
   Jorge cannot license — his MBA appears as text instead) and the "5-Star
   Review" star graphic (it asserts a rating with no review feed behind it;
   his real rating appears in Section 2 once his Trustindex code arrives). */
.lpt-band {
  background: var(--navy-deep);
  border-top: 1px solid rgba(189, 147, 0, 0.22);
  border-bottom: 1px solid rgba(189, 147, 0, 0.22);
  padding: 20px 0;
}
.lpt-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
}
.lpt-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 34px;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
}
.lpt-mark img {
  width: 54px;
  height: auto;
}
.lpt-mark span {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #93a0b6;
  line-height: 1.5;
  max-width: 92px;
}
.lpt-claim {
  text-align: center;
  color: #fff;
}
.lpt-claim b {
  display: block;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gold-lt);
  line-height: 1.15;
}
/* His note: "make the white letters below the gold letters bold or larger.
   They get lost." Both — 10.5px/400 grey to 12px/700 near-white.
   #d7deea on --navy-deep measures 13.2:1. */
.lpt-claim small {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #d7deea;
  margin-top: 5px;
}
.lpt-note {
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: #6d7a90;
  margin-top: 4px;
}

/* ---------- Section 3: Selling or Buying ---------- */
/* Same gold-up treatment as .eyebrow — this one sits above "START HERE". */
/* 2026-08-11: "The gap between selling or buying and Start here is smaller than
   the other sections."  He was right, and this was the cause: every other
   section uses .eyebrow, which carries margin-bottom:10px. This class was a
   near-copy of it that left the margin out, so the two lines sat tighter here
   than anywhere else on the page. Matching .eyebrow fixes it everywhere at
   once. */
.startline {
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: 10px;
}

/* ---------- Section 4: community tiles ----------
   These work today: each one is a real search link. They keep working the day
   the IDX feed goes live, because the destination does not change. */
.communities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.community {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.community img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.community:hover img {
  transform: scale(1.06);
}
.community::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 18, 35, 0.1) 30%,
    rgba(6, 18, 35, 0.82) 100%
  );
}
.community-label {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  color: #fff;
}
.community-label b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* "view homes make it bold" — his note on all four tiles. */
.community-label span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-top: 2px;
}

/* ---------- Third-party embeds ----------
   GoHighLevel and rss.app both render inside iframes, so their styling is
   theirs, not ours. These wrappers give them a frame that belongs to the site
   even when the contents do not. */
.booking-wrap,
.rss-wrap,
.ghl-form-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rss-wrap {
  padding: 8px;
  min-height: 340px;
}
.ghl-form-wrap {
  padding: 6px;
}
.ghl-form-wrap iframe,
.booking-wrap iframe,
.rss-wrap iframe {
  display: block;
  width: 100%;
  border: 0;
}
.booking-fallback,
.embed-fallback {
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 18px;
}
.booking-fallback a,
.embed-fallback a {
  font-weight: 600;
}

/* ---------- Phase 1 responsive ---------- */
@media (max-width: 1000px) {
  .communities {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-dots {
    bottom: 24px;
  }
  .hero-arrow {
    display: none !important;
  }
}
@media (max-width: 720px) {
  .lpt-inner {
    gap: 20px 26px;
  }
  .lpt-mark {
    width: 100%;
    justify-content: center;
    padding-right: 0;
    padding-bottom: 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }
  .lpt-mark span {
    max-width: none;
  }
  .hero-dots {
    left: 24px;
    bottom: 18px;
  }
}
@media (max-width: 520px) {
  .communities {
    grid-template-columns: 1fr;
  }
}

/* Section 2 holding panel. Real, finished UI — not loading skeletons, which
   would claim something is loading when nothing is until his Trustindex embed
   code arrives. The whole block is replaced by that code in one paste. */
.reviews-invite {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 44px 36px 40px;
}
.reviews-invite .reviews-g svg {
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  display: block;
}
.reviews-invite h3 {
  font-size: clamp(20px, 2.3vw, 25px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy-ink);
  margin-bottom: 12px;
}
.reviews-invite p {
  color: var(--muted);
  font-size: 16px;
  max-width: 52ch;
  margin: 0 auto;
}
.reviews-invite-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Footer stacks on a phone. Two columns still fit, but 145px is too narrow for
   the address block to read as anything but a ransom note. */
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* ============================================================
   RESUME / SELLER PRESENTATION  (resume.html)
   Rebuilt 2026-08-13 from his 12-page Canva deck. Everything here
   reuses the tokens at the top of this file — no new colours.
   ============================================================ */

/* --- p.1 cover --- */
.resume-cover {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  padding: 96px 0 84px;
  overflow: hidden;
}
.resume-cover-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
}
/* The scrim is what makes the white text legible over a photo whose brightness
   we do not control. Without it the sub-line lands at ~2:1 in the bright band
   near the horizon. */
.resume-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--navy-deep) 8%, rgba(6, 18, 35, 0.82) 46%, rgba(6, 18, 35, 0.55) 100%);
}
.resume-cover-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
}
.resume-cover .eyebrow {
  color: var(--gold-lt);
}
.resume-cover h1 {
  font-size: clamp(32px, 5.4vw, 60px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.resume-cover h1 .accent {
  color: var(--gold-lt);
}
.resume-cover-sub {
  color: var(--gold-lt);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(13px, 1.5vw, 16px);
  margin-top: 14px;
}
.resume-script {
  width: clamp(150px, 20vw, 210px);
  height: auto;
  margin: 22px 0 6px;
}
.resume-cover-meta {
  color: #c9d6ee;
  font-size: 13.5px;
  letter-spacing: 0.04em;
}
.resume-cover-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* --- p.2 bio --- */
.resume-lede {
  color: var(--muted);
  font-size: 16.5px;
  margin-bottom: 14px;
}
.resume-goals {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold-dk);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: var(--off);
}
.resume-goals h3 {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy-ink);
  margin-bottom: 12px;
}
.resume-goals ul {
  list-style: none;
  display: grid;
  gap: 10px;
}
.resume-goals li {
  position: relative;
  padding-left: 26px;
  color: var(--text);
  font-size: 15.5px;
}
.resume-goals li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dk));
}

/* --- p.3 resume figures + panels --- */
.resume-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: center;
}
.resume-figure {
  border: 1px solid rgba(224, 194, 116, 0.4);
  border-radius: var(--radius);
  padding: 28px 18px;
  background: rgba(255, 255, 255, 0.04);
}
.resume-figure b {
  display: block;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 800;
  color: var(--gold-lt);
  line-height: 1.1;
}
.resume-figure small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9d6ee;
}
.resume-figures-note {
  text-align: center;
  margin-top: 14px;
  font-size: 12.5px;
  color: #9fb2d0;
}
.resume-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 26px 24px;
  background: rgba(255, 255, 255, 0.04);
}
.resume-panel h3 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 16px;
}
.resume-list {
  list-style: none;
  display: grid;
  gap: 14px;
}
.resume-list li {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 15.5px;
  color: #fff;
}
.resume-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.resume-list b {
  display: block;
  font-weight: 700;
}
.resume-list span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-style: italic;
  color: #c9d6ee;
}
.resume-list-2 {
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}

/* --- p.4 accent card --- */
.resume-card-accent {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  border-color: transparent;
  display: grid;
  align-items: center;
}
.resume-card-accent p {
  color: #e7eeff;
  font-size: 16px;
}
.resume-card-accent b {
  color: var(--gold-lt);
}

/* --- p.5 commitments --- */
.resume-commitments {
  list-style: none;
  counter-reset: rc;
  display: grid;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
.resume-commitments li {
  counter-increment: rc;
  position: relative;
  padding: 18px 22px 18px 68px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15.5px;
  color: var(--text);
  box-shadow: var(--shadow);
}
.resume-commitments li::before {
  content: counter(rc) ".";
  position: absolute;
  left: 22px;
  top: 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--gold-dk);
}

/* --- pp.6-7 listing process --- */
.resume-process {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.resume-process li {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  box-shadow: var(--shadow-lg);
}
.resume-process .rp-num {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gold-lt);
  margin-bottom: 8px;
}
.resume-process p {
  font-size: 15px;
  color: #dbe5fb;
}
.resume-process b {
  color: #fff;
  font-weight: 700;
}

/* --- p.8 photography --- */
.resume-photo-claims {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.resume-photo-claims div {
  border: 1px solid rgba(224, 194, 116, 0.4);
  border-radius: var(--radius);
  padding: 20px 14px;
}
.resume-photo-claims b {
  color: var(--gold-lt);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.resume-photo-note {
  max-width: 720px;
  margin: 26px auto 0;
  text-align: center;
  color: #dbe5fb;
  font-size: 16px;
}
.resume-photo-note b {
  color: var(--gold-lt);
}

/* --- p.9 marketing plan --- */
.resume-marketing {
  counter-reset: rm;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  max-width: 1000px;
  margin: 0 auto;
}
.resume-marketing li {
  counter-increment: rm;
  position: relative;
  padding: 14px 18px 14px 56px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--text);
}
.resume-marketing li::before {
  content: counter(rm);
  position: absolute;
  left: 16px;
  top: 13px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-dk));
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}
.resume-marketing-close {
  text-align: center;
  margin-top: 28px;
  font-size: 17px;
  color: var(--navy-ink);
}

/* --- p.10 compensation --- */
.resume-comp {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold-dk);
  border-radius: var(--radius);
  padding: 30px 28px;
  background: var(--off);
}
.resume-comp h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--navy-ink);
  margin-bottom: 12px;
}
.resume-comp p {
  color: var(--muted);
  font-size: 16px;
  max-width: 70ch;
}

/* --- p.11 testimonials --- */
.resume-quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.resume-quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
}
.resume-stars {
  color: var(--gold-dk);
  letter-spacing: 0.16em;
  font-size: 15px;
  margin-bottom: 14px;
}
.resume-quote blockquote p {
  color: var(--muted);
  font-size: 15.5px;
  margin-bottom: 12px;
}
.resume-quote figcaption {
  margin-top: 8px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-ink);
}
.resume-quotes-note {
  text-align: center;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--muted);
}

/* --- p.12 close --- */
.resume-close-quote {
  font-size: clamp(18px, 2.4vw, 24px);
  font-style: italic;
  color: #fff;
  line-height: 1.5;
}
.resume-close .resume-script {
  margin: 18px auto 10px;
}
.resume-close-meta {
  color: #c9d6ee;
  font-size: 15px;
  line-height: 1.9;
}
.resume-close-meta a {
  color: var(--gold-lt);
}

/* --- responsive --- */
@media (max-width: 900px) {
  .resume-process,
  .resume-figures,
  .resume-photo-claims {
    grid-template-columns: repeat(2, 1fr);
  }
  .resume-marketing,
  .resume-quotes,
  .resume-list-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .resume-process,
  .resume-figures,
  .resume-photo-claims {
    grid-template-columns: minmax(0, 1fr);
  }
  .resume-cover {
    padding: 64px 0 56px;
  }
  .resume-commitments li {
    padding: 16px 18px 16px 56px;
  }
}

/* ============================================================
   2026-08-11 REVISIONS (Jorge's marked-up PDF)
   ============================================================ */

/* His seller line above the signature on slide 1. Italic and quoted exactly as
   he wrote it. Capped at 46ch so it breaks to two lines, not four. */
.hero-quote {
  font-style: italic;
  color: #eaf0fb;
  font-size: clamp(14.5px, 1.5vw, 17px);
  line-height: 1.5;
  max-width: 46ch;
  margin-top: 16px;
}
/* "Make my signature smaller" — roughly 30% down from the default block above,
   which is the same reduction he asked for on the contact form. */
.hero-script-sm {
  width: clamp(132px, 15vw, 188px);
  margin-top: 14px;
}

/* Two of his three new videos have no thumbnail yet — YouTube's image CDN is
   unreachable from the build environment. Rather than ship a broken <img>,
   these cards render as a branded panel that still plays on click. Drop a
   file at images/videos/<id>.jpg and swap the class to retire this. */
.video-card-pending {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  display: grid;
  place-items: center;
  min-height: 0;
  aspect-ratio: 9 / 16;
}
.video-card-pending::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(224, 194, 116, 0.18), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(0, 74, 173, 0.22), transparent 55%);
}

/* "Only on the mobile view I want to remove that very top bar with the number
   & email address" (08-11). Desktop keeps it. The number is still one tap away
   in the nav bar and in the footer, so nothing is lost by hiding it here. */
@media (max-width: 760px) {
  .topbar {
    display: none;
  }
}

/* "Move my image up so that it's close to the button. A small gap is fine but
   right now it's too far away. Goal is show as much as possible on the mobile
   version before visitor starts to scroll." Tightens the copy-to-photo gap and
   trims the slide's own padding; both were tuned for desktop. */
@media (max-width: 760px) {
  .hero-inner {
    gap: 6px;
  }
  .hero-slide .hero-inner {
    padding-top: 26px;
    padding-bottom: 0;
  }
  .hero-photo img {
    margin-bottom: 0;
  }
  .hero-quote {
    margin-top: 12px;
  }
}

/* Sell page "How selling works" — his 08-11 notes on that block:
   "Give the numbers a yellow color. Keep it faded." and "Make the step one and
   two and three larger."  The kicker goes up in size and takes the gold; the
   big watermark numeral goes up too and stays faded, as he asked. */
.step-num {
  font-size: 92px;
  opacity: 0.16;
  color: var(--gold-lt);
}
.step-kicker {
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--gold-lt);
  font-weight: 700;
}
/* "Fill in the colors box to be gold and request valuation blue/black." The
   card gets his gold; the button inside flips to navy so it still reads on it.
   btn-white on gold measured 1.4:1 — invisible. This pairing is 8.9:1. */
/* His 08-13 reversal: "Change gold to blue and the buttons inside the boxes to
   gold with blue/black letters on all three steps." The 08-11 round had asked
   for the opposite. Measured after the swap: white heading on this blue is
   9.86:1, body #dbe3f5 is 7.51:1, and navy-deep on the gold button is 7.90:1 —
   all past AA. */
.sell-steps .step-card {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
}
.sell-steps .step-card h3 {
  color: #fff;
}
.sell-steps .step-card p {
  color: #dbe3f5;
}
.sell-steps .step-kicker {
  color: var(--gold-lt);
}
.sell-steps .step-num {
  color: #fff;
  opacity: 0.18;
}
.sell-steps .step-card .btn-white {
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold);
}
.sell-steps .step-card .btn-white:hover {
  background: var(--gold-lt);
  color: var(--navy-deep);
  border-color: var(--gold-lt);
}

/* His valuation section wanted a photo beside the form: "Add an image of a home
   on the left side of what is your home worth." Stacks under it on a phone. */
.value-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: start;
}
.value-split img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(6, 18, 35, 0.18);
}
@media (max-width: 860px) {
  .value-split { grid-template-columns: 1fr; gap: 22px; }
}

/* The before/after photography grid from his deck. */
.resume-photo-grid {
  margin: 30px auto 0;
  max-width: 560px;
}
.resume-photo-grid img {
  width: 100%;
  border-radius: 12px;
  display: block;
}
.resume-photo-grid figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 13.5px;
  color: #b9c4dc;
}

/* "I like the background image. Can you use the same background image on all
   sub pages?" (08-13 p.7) — the seller-presentation cover photo, now behind
   every inner page header. The gradient stays on top of it so the scrim keeps
   doing the contrast work rather than the photo. */
.page-hero {
  background-image:
    linear-gradient(120deg, rgba(6, 18, 35, 0.93) 0%, rgba(10, 26, 51, 0.86) 55%, rgba(16, 38, 74, 0.8) 100%),
    url("../images/scenes/hero-sold.jpg");
  background-size: cover;
  background-position: center 38%;
}

/* "The background of the outside portion of the form should be transparent. Is
   there a way to remove the white color?" (08-11) — yes: it is the wrapper's
   own background, not the iframe. The white card, border, padding and shadow
   all come off, so his GHL form sits straight on the navy band.

   The iframe's INNER background is served by GoHighLevel and cannot be reached
   from here; his form there is already white-on-white, so the seam does not
   show. If he ever restyles it in GHL this may need revisiting. */
.section.dark .ghl-form-wrap {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* His valuation embed on the sell page. */
.ghl-embed {
  max-width: 720px;
  margin: 0 auto;
}
.ghl-embed iframe {
  display: block;
  width: 100%;
  background: transparent;
}
.ghl-fallback {
  margin-top: 12px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}


/* The reviews widget paints ~9s after load and injects into a shadow root, so
   until then this box is 0px tall. Two problems: the page jumps when the
   reviews land, and a zero-height element never triggers IntersectionObserver,
   which left the fallback watchdog in js/main.js permanently unarmed. Reserving
   the height fixes both. */
.reviews-embed { min-height: 300px; }
@media (max-width: 640px) { .reviews-embed { min-height: 420px; } }

/* ============================================================
   IDX BROKER WIDGETS
   ============================================================
   His IDX Broker widgets (2026-08-24) render as Vue custom elements inside a
   shadow root, and the widget writes its own colours INLINE onto a wrapper div
   INSIDE that shadow root, reading them from his IDX Broker account settings.

   Measured on 2026-08-24 from the rendered widget:
     host element              --idx-banners-color  #0a1a33  (a rule here wins)
     wrapper inside the shadow --idx-banners-color  #0071b3  (his account wins)

   An inline value on an element inside a shadow root cannot be overridden from
   an external stylesheet, with or without !important. So the card colours, the
   heart, the banners and the enquiry box behind the heart are set in IDX
   Broker's own control panel, NOT here. That is also why the CSS Jorge tried
   on his widget had no effect: it was never a mistake in his CSS.

   What this file can still do is everything AROUND the widget: the container,
   its width and reserved height, the site font for anything that inherits, and
   the panel shown when a widget id is missing. That is what is below.

   The listing attribution ("Listed by: agent, DRE #, brokerage") is required on
   every IDX display by CRMLS. Never add a rule that hides, shrinks or fades it. */

.idx-embed {
  font-family: var(--sans);
  min-height: 320px;
}

.idx-embed > * { max-width: 100%; }

/* The panel shown when a widget id is missing or dead, so a broker's page
   never carries an empty strip where listings should be. */
.idx-empty {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 40px 28px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.idx-empty h3 { font-size: 21px; font-weight: 800; margin-bottom: 8px; }
.idx-empty p { color: var(--muted); max-width: 480px; margin: 0 auto 22px; }

@media (max-width: 640px) {
  .idx-embed { min-height: 420px; }
  .idx-empty { padding: 32px 20px; }
}

/* His 08-25 email: the map search sat in the page column with a dead gap on
   the right — the widget lays itself out for full width. This breaks the map
   embed out of the container to the viewport edges on wide screens. */
.idx-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 24px;
}
.idx-fullbleed .idx-embed { min-height: 560px; }
@media (max-width: 900px) { .idx-fullbleed { padding: 0 12px; } }

/* The address line our script adds to each showcase card (the vendor template
   omits it; the data is in the feed). Styled to sit under price and beds. */
/* (Lives inside the widget's shadow root — rule kept here for reference only;
   the actual styles ride in with js/main.js because outside CSS cannot reach
   a shadow root.) */

/* The real search bar above the map (his 08-25 ask). Posts to his IDX results
   page, which is the only page that can render a filtered set — the map widget
   exposes no hook. Styled to match the home page's search band. */
.idx-searchbar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 20px 16px;
  max-width: 1100px;
  margin: 0 auto 26px;
  box-shadow: 0 10px 30px rgba(10, 26, 51, .06);
}
.idx-searchbar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
}
.idx-searchbar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: uppercase;
}
.idx-searchbar select,
.idx-searchbar input[type="text"] {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  min-height: 44px;           /* touch target */
  width: 100%;
}
.idx-searchbar select:focus-visible,
.idx-searchbar input[type="text"]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}
/* Same bug as the home page button (Jorge, 09-02 follow-up): this button
   sits in an auto-fit(minmax(140px,...)) track alongside 7 other fields, and
   140px isn't enough room for "SEARCH HOMES" plus its own padding, so the
   padding got crushed and the letters ran to the edges. min-width forces
   the track to give it real room. */
.idx-searchbar .btn { min-height: 44px; min-width: 190px; white-space: nowrap; }
.idx-searchbar-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 700px) {
  .idx-searchbar { padding: 16px 14px 12px; border-radius: 14px; }
  .idx-searchbar-grid { grid-template-columns: 1fr 1fr; }
  .idx-searchbar .btn { grid-column: 1 / -1; }
}

/* ============================================================
   MOBILE: the sideways swipe into white space
   ============================================================
   His 2026-08-27 email: "I can move the page to the right and its all white
   when I swipe right." Measured at 375px: the document scrolled to 565px wide.
   The overflow is 15 .idx-tooltip nodes the IDX widget appends straight to
   <body> and parks off-screen right; they are the vendor's own tooltips and
   are positioned, so they cannot be reached by a container rule.

   `clip` rather than `hidden` on purpose: hidden would make <html> a scroll
   container and break the sticky nav. clip stops the sideways scroll and
   leaves position:sticky working. The `hidden` line is the fallback for
   Safari before 16, which ignores clip. */
html { overflow-x: hidden; overflow-x: clip; }

/* The vendor's tooltips are the specific offenders. Off-screen absolutely
   positioned nodes on <body> have no reason to extend the page box. */
body > .idx-tooltip { display: none !important; }