/* ============================================================================
   REALTOR TEMPLATE — one stylesheet, every client.
   Nothing client-specific lives here. The three colour tokens are written into
   a :root block by build.mjs from site.config.json; change them there and the
   whole site changes coherently — eyebrows, rules, hairlines, buttons, hovers
   and every hover state read from --accent / --primary / --ink.

   Framework and section shapes are lifted from the mwsla demo (the landscape
   architect build): fixed header that takes a bar once the photography ends,
   full-bleed cinematic hero with a CSS camera move, band sections, cards that
   lift on hover with a cursor-tracking glow, sticky-media split, lightbox.
   ============================================================================ */

*{box-sizing:border-box}
/* `<picture>` wraps an `<img>` for AVIF/WebP sources; display:contents drops
   the wrapper out of layout so every existing `.foo img` rule below still
   sizes the image exactly as it did with no `<picture>` in the tree. */
picture{display:contents}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
/* NB: no overflow-x:hidden on body. It computes to `hidden auto`, which makes
   body a scroll container and silently breaks IntersectionObserver and sticky. */
body{background:var(--ink);color:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased}
/* ⛔ LINING NUMERALS EVERYWHERE THE SERIF CARRIES A NUMBER (Steven, 09-06: "the way it stylizes the
   numbers I don't like"). Cormorant defaults to OLD-STYLE figures — the 9 hangs below the line,
   the 1 sits short — which reads as styling on a stat. Lining figures are cap-height and uniform. */
.fig .f,.lcard .price,.factbar .price,.sold-card .p,h1,h2,.sig,.oh h3,.lcard h3,.sold-card h3{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
img{max-width:100%;display:block}
a{color:inherit}
section[id]{scroll-margin-top:88px}

/* ============================================================
   HEADER
   ============================================================ */
/* ⛔ THE HEADER OUTRANKS THE OPEN MENU (z-index 70 vs the sheet's 60) — the Texas Best rule
   (08-29). Under the sheet, the burger was buried the moment the menu opened and a second
   close button had to be parked inside the drawer. On top, one button does both jobs. */
.head{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;
  justify-content:space-between;padding:clamp(16px,3vw,40px) clamp(16px,4vw,60px);
  transition:padding .35s ease,background .35s ease,border-color .35s ease}
.head::before{content:"";position:absolute;left:0;right:0;top:0;height:180px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.54) 42%,rgba(0,0,0,.16) 76%,transparent 100%)}
.head.stuck{padding-top:12px;padding-bottom:12px;background:color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.09)}
.head.stuck::before{opacity:0}
/* with the menu open the header scrim shortens to the header's own depth — it does not switch
   off (the wordmark and the X still sit on bright sky) and it no longer veils the first pill */
.head:has(#burger[aria-expanded="true"])::before{height:118px}
.mark{font-family:var(--serif);line-height:1.05;text-decoration:none;color:#fff}
.mark .n{display:block;font-size:clamp(22px,2.4vw,34px);letter-spacing:.05em;font-weight:600;
  text-shadow:0 2px 24px rgba(0,0,0,.8)}
.mark .r{display:block;font-family:var(--sans);font-size:clamp(11px,1.1vw,14px);letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent-soft);margin-top:.6em;font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.95)}
/* the wordmark keeps its size when the bar darkens (Steven, 09-05) */
nav.desk{display:flex;gap:clamp(14px,2.2vw,32px);align-items:center}
nav.desk a{color:#fff;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  padding:6px 0;border-bottom:1px solid transparent;transition:.25s;text-shadow:0 1px 2px rgba(0,0,0,1)}
nav.desk a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* ⛔ JET BLACK BEHIND BRIGHT GOLD, BOLD (Steven, 09-06). #000, not the ink navy; the number is
   bright gold at 800. And ⛔ THE FONT LINK MUST CARRY 700;800 — it loaded 300–600 only, so every
   bold on this site was the browser faking it. That was the whole 'it will not bold' fight. */
nav.desk a.call{border:1px solid var(--accent);padding:10px 18px;color:#ffd700;font-weight:800;
  background:#000}
/* ⛔ THE HOVER IS A SOLID GOLD FILL, NEVER A WHITE BORDER (Steven, 09-06: a white border on three
   sides with gold on the fourth read as 'three-quarters of a button', and white-on-dark is pastel
   next to the page). Border stays on all four sides; the fill is what pops. Contrast is king. */
nav.desk a.call:hover{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700;text-shadow:none;backdrop-filter:none}
.burger{display:none;background:none;border:0;color:var(--accent-soft);cursor:pointer;padding:8px;
  filter:drop-shadow(0 1px 10px rgba(0,0,0,.9))}
.burger svg{width:28px;height:28px}
/* One button, two glyphs. aria-expanded is already set by the script for screen readers, so
   it drives the visual too — no extra class to keep in sync, and they can never disagree. */
.burger .ic-x{display:none}
.burger[aria-expanded="true"] .ic-bars{display:none}
.burger[aria-expanded="true"] .ic-x{display:block}

/* ---- the phone menu: the Texas Best pills (Steven, 09-09: "those nice gold outline pills") ---- */
/* The menu sits ON the hero, it does not hide it — the photograph reads through it. */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(8,8,8,.07);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:15px;
  /* ⛔ THE PILLS CLEAR THE HEADER, THEY DO NOT TUCK UNDER IT. The clamp floor is what matters —
     vh alone collapses the gap on a short viewport, which is exactly where it hurts. */
  padding-top:clamp(158px,22vh,270px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.sheet.open{opacity:1;visibility:visible}
.sheet a{font-family:var(--serif);font-size:26px;font-weight:300;text-decoration:none;
  color:var(--accent-soft);letter-spacing:.02em;padding:11px 44px;border-radius:999px;
  background:rgba(6,6,6,.93);min-width:224px;text-align:center;
  font-variant-numeric:lining-nums;
  /* ⭐ THE TRIM IS THE POINT: gold at .8 reads as trim on dark lacquer; the outer glow stops a
     hard 1px line looking pasted on over photography. Border on all four sides, always. */
  border:1px solid color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), 0 6px 22px rgba(0,0,0,.5)}
/* the press is a solid gold fill with ink text — the same hover law as the desktop call button */
.sheet a:active{background:var(--accent);border-color:var(--accent-soft);color:#000}

/* ============================================================
   HERO — one plate, slow camera move, three-stop scrim
   ============================================================ */
.hero{position:relative;height:100svh;min-height:560px;width:100%;overflow:hidden;background:#000}
.hero .stage{position:absolute;inset:0}
.hero .img{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;
  transform-origin:center;animation:kbSlow 26s linear infinite alternate;will-change:transform}
@keyframes kbSlow{from{transform:scale(1.00) translate3d(0,.5%,0)}to{transform:scale(1.06) translate3d(0,-.5%,0)}}
.scrim{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(94% 62% at 50% 52%, rgba(0,0,0,.50) 0%, rgba(0,0,0,.32) 46%, rgba(0,0,0,.08) 80%, transparent 100%),
  linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 16%, rgba(0,0,0,.14) 42%, rgba(0,0,0,.30) 74%, rgba(0,0,0,.82) 100%)}
.copy{position:absolute;z-index:10;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(1100px,88vw);text-align:center}
.badge{display:inline-block;padding:9px 20px;margin-bottom:clamp(18px,3vw,32px);
  border:1px solid rgba(255,255,255,.34);background:rgba(0,0,0,.42);backdrop-filter:blur(6px);
  font-size:clamp(9px,.9vw,11.5px);letter-spacing:.24em;text-transform:uppercase;color:#fff;font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,1)}
h1{font-family:var(--serif);font-weight:300;margin:0;color:#fff;font-size:clamp(34px,6.2vw,88px);
  line-height:1.05;letter-spacing:.01em;text-shadow:0 2px 30px rgba(0,0,0,.85)}
/* white, never accent. A brass headline sits at the same luminance as brick,
   stone and a lit window — no scrim makes it reliable over photography. */
h1 em{font-style:normal;color:#fff}
.sub{margin:clamp(16px,2.4vw,28px) auto 0;max-width:58ch;color:#fff;font-weight:400;
  font-size:clamp(14.5px,1.15vw,18px);line-height:1.75;
  text-shadow:0 1px 2px rgba(0,0,0,1),0 -1px 2px rgba(0,0,0,.85),1px 0 2px rgba(0,0,0,.85),
              -1px 0 2px rgba(0,0,0,.85),0 2px 26px rgba(0,0,0,1)}
.cta{display:inline-block;margin-top:clamp(22px,3.2vw,40px);padding:16px 40px;border:1px solid var(--accent);
  color:var(--accent-soft);text-decoration:none;background:rgba(0,0,0,.34);backdrop-filter:blur(6px);
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;transition:.3s}
/* ⛔ .statement .cta strips the background LATER in the cascade with equal specificity, so a plain
   .cta:hover lost its fill and went black-on-black (09-06). Name both. */
.cta:hover,.statement .cta:hover{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700;text-shadow:none;backdrop-filter:none}
.cta.solid{background:var(--accent);color:#000;font-weight:700}
.cta.solid:hover{background:var(--accent-soft)}

/* ============================================================
   THE STATEMENT — the first band under a hero that carries no words.
   ⛔ IT IS NOT A DUPLICATE OF THE HERO COPY, IT IS THE SAME COPY MOVED.
   When the photograph is left alone, the headline, the paragraph and the
   button land here instead, and this section owns the page's only h1.
   ============================================================ */
.statement{background:var(--ink);padding:clamp(52px,7vw,104px) clamp(20px,5vw,80px) clamp(46px,6vw,92px);
  text-align:center}
.statement .wrap{max-width:1000px;margin:0 auto}
.statement h1{font-size:clamp(34px,5.4vw,74px);margin:0}
.statement .sub{margin:clamp(18px,2.4vw,28px) auto 0;max-width:58ch;color:rgba(255,255,255,.72);
  font-weight:300;font-size:clamp(15.5px,1.2vw,19px);line-height:1.8;text-shadow:none}
.statement .cta{margin-top:clamp(24px,3.2vw,40px);background:none;backdrop-filter:none}

/* ============================================================
   BANDS
   ============================================================ */
.band{padding:clamp(56px,8vw,124px) clamp(18px,5vw,80px);background:var(--ink)}
.band.deep{background:var(--primary)}
.band.bone{background:var(--bone);color:var(--ink)}
.wrap{max-width:1280px;margin:0 auto}
.rule{height:1px;background:rgba(255,255,255,.08);max-width:1280px;margin:0 auto}
.eyebrow{font-size:clamp(13px,1.2vw,17px);letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
  text-align:center;font-weight:500}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.8vw,54px);text-align:center;
  margin:22px 0 0;line-height:1.15}
.lede{max-width:min(80ch,1100px);margin:24px auto 0;text-align:center;color:rgba(255,255,255,.68);
  font-weight:300;line-height:1.8;font-size:clamp(15.5px,1.3vw,21px)}
.band.bone .lede{color:rgba(11,16,23,.7)}
.band.bone .eyebrow{color:var(--primary)}

/* ============================================================
   PROOF STRIP — ONE strip, never a wall of trophies
   ============================================================ */
.proof{background:var(--primary);padding:clamp(40px,5vw,72px) clamp(18px,5vw,80px);
  border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.figs{display:grid;gap:clamp(18px,3vw,34px);grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:1180px;margin:0 auto;text-align:center}
.fig .f{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.2vw,60px);line-height:1;color:#fff}
.fig .l{margin-top:12px;font-size:clamp(12px,1vw,14px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-soft);line-height:1.6;font-weight:500}
.honors{max-width:1180px;margin:clamp(30px,4vw,52px) auto 0;padding-top:clamp(22px,3vw,34px);
  border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center}
.honors span{font-size:clamp(13px,1.05vw,15.5px);color:rgba(255,255,255,.82);font-weight:300;line-height:1.7}
.honors span::before{content:"";display:inline-block;width:5px;height:5px;background:var(--accent);
  border-radius:50%;margin-right:11px;vertical-align:middle}

/* ============================================================
   OUR LISTINGS — the cinematic tier
   ⛔ This tier and the feed tier below share NO css and must never be merged.
   ============================================================ */
.lgrid{display:grid;gap:26px;margin:clamp(34px,4.5vw,64px) auto 0;max-width:1280px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.lcard{position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),border-color .5s,box-shadow .5s}
.lcard:hover{transform:translateY(-9px) scale(1.012);border-color:rgba(212,165,49,.55);
  box-shadow:0 26px 70px -22px rgba(0,0,0,.95)}
.lcard .ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:rgba(255,255,255,.02)}
.lcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.lcard:hover .ph img{transform:scale(1.07)}
.lcard .pill{position:absolute;top:16px;left:16px;z-index:2;padding:7px 14px;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;background:rgba(11,16,23,.82);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);color:#fff}
.lcard .pill.is-active{border-color:var(--accent);color:var(--accent-soft)}
.lcard .body{padding:24px 26px 28px}
.lcard .price{font-family:var(--serif);font-size:clamp(27px,2.3vw,34px);font-weight:400;line-height:1;color:#fff}
.lcard h3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,23px);margin:12px 0 0;
  line-height:1.35;color:rgba(255,255,255,.92)}
.lcard .place{margin:6px 0 0;font-size:14px;color:rgba(255,255,255,.58);font-weight:300}
.lcard .facts{margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.10);
  display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;letter-spacing:.06em;color:rgba(255,255,255,.72)}
.lcard .facts b{color:#fff;font-weight:500}
.lcard .go{display:inline-block;margin-top:18px;padding:10px 18px;border:1px solid var(--accent);
  font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-soft);
  transition:.3s}
/* ⛔ THE CARD'S CALL TO ACTION IS A SQUARE PILL THAT SAYS WHAT TO DO (Steven, 09-06): "See this home →"
   only glowed and blended in. Same square pill as the phone number and the For Sale tag; on hover it
   fills gold with black bold text like every other pill on the site. */
.lcard:hover .go{background:var(--accent);border-color:var(--accent);color:#000}
.lcard .glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(212,165,49,.15),transparent 62%)}
.lcard:hover .glow{opacity:1}
/* ⛔ AN ODD CARD NEVER SITS BESIDE A HOLE — centred at the SAME width, never stretched.
   In the CSS, not the markup, because the listing count changes every week. */
.lgrid .lcard.solo{grid-column:1/-1;max-width:calc(50% - 13px);margin-left:auto;margin-right:auto}
@media (max-width:920px){.lgrid .lcard.solo{max-width:100%}}

/* ============================================================
   SEARCH EVERY HOME — the feed tier. Plain, uniform, no motion.
   ============================================================ */
.fgridwrap{max-width:1280px;margin:clamp(32px,4vw,56px) auto 0}
.fbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px}
.fbar span{padding:12px 20px;border:1px solid rgba(255,255,255,.16);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(255,255,255,.03)}
.fbar span.go{border-color:var(--accent);color:var(--accent-soft)}
.fcards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.fcard{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);overflow:hidden}
.fcard .ph{aspect-ratio:4/3;position:relative;
  background:linear-gradient(150deg,var(--primary),var(--ink) 78%)}
.fcard .ph img{width:100%;height:100%;object-fit:cover}
.fcard .b{padding:16px 18px 18px}
.fcard .p{font-size:19px;font-weight:600;letter-spacing:.01em;color:#fff}
.fcard .a{margin-top:6px;font-size:13.5px;color:rgba(255,255,255,.66);line-height:1.5;font-weight:300}
.fcard .s{margin-top:12px;display:flex;gap:14px;font-size:12.5px;color:rgba(255,255,255,.6)}
.fcard .c{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
  font-size:10.5px;line-height:1.7;color:rgba(255,255,255,.42)}
.fnote{margin-top:26px;font-size:11.5px;line-height:1.8;color:rgba(255,255,255,.40);font-weight:300;
  max-width:96ch}
.fnote b{color:rgba(255,255,255,.62);font-weight:500}

/* ============================================================
   SPLIT — sticky media beside flowing copy
   ⛔ THE TEXT COLUMN STACKS FIRST ON A PHONE. Always. See the phone block.
   ============================================================ */
.split{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;max-width:1280px;margin:clamp(30px,4vw,56px) auto 0}
.split .col-text{order:1}
.split .col-media{order:2;align-self:start}
/* her bio is long now (09-25): on a laptop her twin rides beside it instead of leaving an empty column */
#about .split .col-media{position:sticky;top:110px}
.split .col-media img{width:100%;height:auto;border:1px solid rgba(255,255,255,.10)}
.body-copy h2{text-align:left;margin-top:18px}
.body-copy .eyebrow{text-align:left}
.body-copy p{color:rgba(255,255,255,.70);font-weight:300;line-height:1.95;
  font-size:clamp(15.5px,1.08vw,18px);margin:22px 0 0;max-width:68ch}
.body-copy p.first{color:rgba(255,255,255,.9);font-size:clamp(17.5px,1.3vw,22px);line-height:1.75}
/* her bio's section titles and her quote (09-25) */
.body-copy h3{font-family:var(--serif);font-weight:400;color:#fff;font-size:clamp(21px,1.6vw,26px);margin:38px 0 0}
.body-copy blockquote{margin:34px 0 0;padding:4px 0 4px 22px;border-left:2px solid var(--accent);max-width:60ch;
  font-family:var(--serif);font-style:italic;color:#fff;font-size:clamp(19px,1.45vw,24px);line-height:1.5}
.sig{margin-top:32px;font-family:var(--serif);font-size:28px;color:#fff}
.sig small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin-top:10px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{position:relative;overflow:hidden;background:var(--ink)}
.contact form{margin:clamp(30px,4vw,50px) auto 0;display:grid;gap:18px;grid-template-columns:1fr 1fr;max-width:860px}
/* ⛔ KAY'S ASSISTANT - part of the page (Steven, 2026-09-23: the website owns its words; the agent
   server is only the brain). Replaces the iframe that the server used to draw. */
.asst{display:flex;flex-direction:column;align-items:center;max-width:460px;margin:clamp(30px,4vw,50px) auto 0;text-align:center}
.asst-photo{width:220px;height:220px;border-radius:50%;object-fit:cover;border:4px solid var(--accent);
  box-shadow:0 0 0 4px rgba(240,179,35,.22);margin-bottom:14px;background:rgba(255,255,255,.04)}
@media (max-width:480px){.asst-photo{width:160px;height:160px}}
.asst-who{font-family:var(--sans);font-weight:800;font-size:19px;color:#fff;margin-bottom:10px}
.asst-sub{font-size:15px;color:#c9d2e6;margin:0 0 18px}
/* the orb: the slashed speaker, with a wide glow - three soft rings breathing outward (Steven, 09-24) */
.asst-orb{width:84px;height:84px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;
  background:var(--accent);cursor:pointer;animation:asstpulse 2.6s ease-in-out infinite;margin:50px 0 50px}
@keyframes asstpulse{
  0%,100%{box-shadow:0 0 0 10px rgba(240,179,35,.22),0 0 0 22px rgba(240,179,35,.12),0 0 0 36px rgba(240,179,35,.06),0 0 40px 18px rgba(240,179,35,.18)}
  50%{box-shadow:0 0 0 14px rgba(240,179,35,.26),0 0 0 30px rgba(240,179,35,.14),0 0 0 48px rgba(240,179,35,.07),0 0 56px 26px rgba(240,179,35,.24)}}
.asst-orb svg{width:54px;height:54px;stroke:#0A0E27;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.asst-orb.hide{display:none}
.asst-state{color:var(--accent);font-weight:700;font-size:14px;min-height:18px;margin-bottom:10px}
.asst-log{width:100%;text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(240,179,35,.25);
  border-radius:14px;padding:14px 16px;font-size:18px;line-height:1.5;color:#fff}
.asst-log .who{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9fb0c9;margin-top:10px}
.asst-log .who:first-child{margin-top:0}
/* No chat box (Steven, 09-30: "why is it a box that looks interactive if all we do is cover it up"). Her opening
   line is plain copy under the heading, like his own site; the mid-call card takes this space. */
.asst-log{background:none;border:0;padding:0;border-radius:0;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#e6ebf5}
.asst-log .who{display:none}
.asst-tiles{display:none;flex-direction:column;gap:8px;width:100%;margin-top:12px}
.asst-tiles.show,html.se-on .asst-tiles{display:flex}
.asst-tile{background:rgba(240,179,35,.08);color:var(--accent-soft);border:1px solid rgba(240,179,35,.35);border-radius:12px;
  padding:12px 14px;font-family:var(--sans);font-size:14px;font-weight:700;text-align:left;cursor:pointer}
.asst-tile.hidden{display:none}
.asst{--twin-accent:var(--accent);--twin-accent-ink:#0A0E27;--twin-font:var(--sans)}
.asst-card{width:100%}
.asst-card .twin-card{margin-top:12px}
@media (prefers-reduced-motion:reduce){.asst-orb{animation:none}}
form label{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:9px}
form input,form textarea{width:100%;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.15);
  color:#fff;padding:14px 16px;font-family:var(--sans);font-size:15px;font-weight:300;transition:.25s}
form input:focus,form textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.075)}
form .full{grid-column:1/-1}
form textarea{min-height:130px;resize:vertical}
form button{grid-column:1/-1;justify-self:start;padding:17px 46px;background:transparent;
  border:1px solid var(--accent);color:var(--accent-soft);font-family:var(--sans);font-size:13px;
  letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:.3s}
form button:hover{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700}
.callrow{margin:clamp(26px,3vw,40px) auto 0;display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;
  font-size:clamp(15px,1.2vw,18px);color:rgba(255,255,255,.82);font-weight:300}
.callrow a{text-decoration:none;border-bottom:1px solid var(--accent);display:inline-block;padding:6px 0}
.callrow b{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  margin-bottom:7px;font-weight:500}

/* ============================================================
   FOOTER — the ONLY place a link leaves this site
   ============================================================ */
footer{border-top:1px solid rgba(255,255,255,.08);padding:clamp(40px,5vw,66px) clamp(18px,5vw,80px) 38px;
  background:var(--ink)}
.fgrid{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start;
  max-width:1280px;margin:0 auto}
footer .mark .n{font-size:22px}
.fnav{display:flex;flex-wrap:wrap;gap:22px}
.fnav a{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);
  text-decoration:none;transition:.25s;display:inline-block;padding:11px 0}
.fnav a:hover{color:var(--accent-soft)}
/* ⛔ ONE small row of icons, in the footer, and nowhere else on the page.
   Traffic flows INTO the site; a social button in the body is an exit door. */
.social{display:flex;gap:14px;align-items:center}
.social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;
  place-items:center;color:rgba(255,255,255,.62);transition:.25s}
.social a:hover{border-color:var(--accent);color:var(--accent-soft)}
.social svg{width:15px;height:15px;fill:currentColor}
.fine{max-width:1280px;margin:36px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:11.5px;
  color:rgba(255,255,255,.34);font-weight:300;line-height:1.8}

/* ============================================================
   LISTING PAGE
   ============================================================ */
/* ⛔ STEVEN, 2026-09-23: "whether they are on a laptop or a phone, the media fills
   the entire canvas." ONE hero, edge to edge, at every width — ~90vh on a laptop,
   ~100svh on a phone (svh, not vh: the URL bar cannot steal the fold). A walkthrough
   video plays here when the listing has one; otherwise photo 1, on a srcset so a
   phone pulls 1024 and a laptop pulls 1600/2560. */
.lhero{position:relative;width:100%;height:90vh;min-height:560px;overflow:hidden;background:var(--ink)}
.lhero img,.lhero video{width:100%;height:100%;object-fit:cover;display:block}
/* ⛔ NEVER LETTERBOX AND NEVER A PHOTO IN A BLACK VOID. object-fit:cover on a
   filled container, always — that is the exact failure on the old gallery. */
.lhero .scrim{background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.22) 22%,transparent 48%,
  rgba(0,0,0,.30) 76%,rgba(0,0,0,.80) 100%)}
.lhero .cap{position:absolute;z-index:5;left:clamp(18px,5vw,72px);right:clamp(18px,5vw,72px);
  bottom:clamp(34px,5vw,64px)}
.lhero .cap .pill{display:inline-block;padding:7px 14px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;border:1px solid var(--accent);color:var(--accent-soft);
  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);margin-bottom:18px}
.lhero .cap h1{font-size:clamp(30px,4.6vw,66px);text-align:left}
.lhero .cap .place{margin-top:10px;font-size:clamp(15px,1.4vw,20px);color:#fff;font-weight:300;
  text-shadow:0 1px 2px rgba(0,0,0,1),0 2px 22px rgba(0,0,0,1)}
/* ---- the gallery below the hero — full canvas, not a padded card ----
   1-up on a phone, 2-up on a tablet, 3-up on a laptop, edge to edge at every size. */
.galwrap{padding:0;background:var(--ink)}
.gal{display:grid;grid-template-columns:1fr;gap:3px;width:100%;margin:0}
.gal button{padding:0;border:0;background:rgba(255,255,255,.02);cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;text-align:left;width:100%}
.gal img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.gal button:hover img{transform:scale(1.04)}
.gal .capline{padding:10px clamp(14px,3vw,22px) 16px;font-size:13px;line-height:1.6;
  color:rgba(255,255,255,.6);font-weight:300}
@media (min-width:641px){ .gal{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .gal{grid-template-columns:repeat(3,minmax(0,1fr))} }
.factbar{background:var(--primary);padding:clamp(26px,3vw,40px) clamp(18px,5vw,80px)}
.factbar .in{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px);
  align-items:baseline}
.factbar .price{font-family:var(--serif);font-size:clamp(32px,3.6vw,50px);font-weight:300;line-height:1}
.factbar .f{font-size:clamp(14px,1.15vw,17px);color:rgba(255,255,255,.86);font-weight:300}
.factbar .f b{font-weight:600;color:#fff}
.factbar .mls{margin-left:auto;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.desc{max-width:74ch;margin:0 auto}
.plancard{display:block;width:100%;max-width:900px;margin:28px auto 0;background:#fff;border:0;
  padding:clamp(14px,3vw,26px);cursor:pointer;border-radius:2px}
.plancard picture,.plancard img{display:block;width:100%;height:auto}
/* the walkthrough again, after the photographs - edge to edge like the gallery */
.rewatch{background:var(--ink);margin-top:clamp(24px,3vw,40px)}
.rewatch video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.plancard:hover{box-shadow:0 16px 46px rgba(0,0,0,.35)}
.desc p{color:rgba(255,255,255,.74);font-weight:300;line-height:2;font-size:clamp(16px,1.15vw,18.5px);
  margin:0 0 20px}
.oh{max-width:74ch;margin:clamp(32px,4vw,52px) auto 0;border:1px solid var(--accent);padding:26px 28px;
  background:rgba(212,165,49,.07)}
.oh h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 14px}
.oh ul{margin:0;padding:0;list-style:none}
.oh li{font-size:16px;line-height:1.9;color:rgba(255,255,255,.84);font-weight:300}
.backrow{max-width:1280px;margin:0 auto;padding-top:clamp(30px,4vw,48px)}
.backrow a{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-soft);
  text-decoration:none;display:inline-block;padding:12px 0}
.backrow a:hover{color:#fff}

/* ---- compliance footer. Rendered by the builder on every listing page,
        below the fold, in small type. Never a CTA, never above the fold. ---- */
.compliance{border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.38);
  padding:clamp(30px,4vw,48px) clamp(18px,5vw,80px)}
.compliance .in{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:20px 46px;align-items:center}
.compliance .logo{font-family:var(--sans);font-size:15px;letter-spacing:.42em;font-weight:500;
  color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.20);padding:11px 18px}
.compliance .t{font-size:12px;line-height:1.85;color:rgba(255,255,255,.46);font-weight:300;max-width:62ch}
/* a phone number broken across two lines is unreadable and un-tappable */
.nw{white-space:nowrap}
.compliance .t a{color:rgba(255,255,255,.46);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding:6px 0}
.compliance .eho{width:26px;height:26px;flex:none;fill:rgba(255,255,255,.5)}

/* ---- lightbox ----
   ⛔ STEVEN, 2026-09-23: on a phone the photo anchors to the TOP under a slim
   bar (close + counter), fills the width at its natural aspect (no crop, no
   letterbox bands), the caption reads at 19-22px under it, and PREV/NEXT are
   two big labelled buttons pinned to the bottom — never floating on the photo.
   Desktop keeps the photo centred with side arrows in the gutters. */
.lb{position:fixed;inset:0;z-index:200;background:color-mix(in srgb, var(--ink) 96%, #000);display:none;
  flex-direction:column;outline:none}
.lb.open{display:flex}
.lb-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  height:44px;padding:calc(env(safe-area-inset-top,0) + 4px) 14px 0 14px}
.lb-close{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:none}
.lb-close:hover{background:rgba(255,255,255,.12)}
.lb-count{font-size:16px;letter-spacing:.06em;color:#fff}
.lb-frame{position:relative;flex:0 0 auto;width:100%}
.lb-frame picture{display:block;width:100%;line-height:0}
.lb-frame img{width:100%;height:auto;display:block;object-fit:contain}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.45);color:#fff;cursor:pointer;
  display:none;align-items:center;justify-content:center;transition:.25s}
.lb-nav:hover{background:var(--accent);border-color:transparent;color:#000}
.lb-nav svg{width:16px;height:16px;fill:currentColor}
.lb-cap{flex:0 1 auto;min-height:0;max-height:34%;overflow-y:auto;padding:16px 20px}
.lb-caption{font-size:clamp(19px,5vw,22px);line-height:1.45;color:#fff;font-weight:300}
.lb-cap .lb-count{display:none}
.lb-strip{flex:1 1 auto;min-height:0;display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(auto-fill, minmax(88px, 1fr));grid-auto-columns:132px;gap:6px;
  overflow-x:auto;overflow-y:hidden;padding:8px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lb-strip::-webkit-scrollbar{display:none}
.lb-thumb{width:100%;height:100%;padding:0;border:2px solid transparent;
  border-radius:2px;overflow:hidden;cursor:pointer;background:rgba(255,255,255,.06);opacity:.55;transition:.2s}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb.active{border-color:var(--accent);opacity:1}
.lb-bottom{flex:0 0 auto;display:flex;padding-bottom:env(safe-area-inset-bottom,0)}
.lb-btn{flex:1 1 50%;min-height:56px;border:0;border-top:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);color:#fff;font-family:var(--sans);font-size:14px;font-weight:500;
  letter-spacing:.03em;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.lb-btn:active{background:rgba(255,255,255,.14)}
.lb-btn svg{width:15px;height:15px;fill:currentColor}
.lb-prev-btn{border-right:1px solid rgba(255,255,255,.14)}

/* PHONE, upright (Steven, 2026-09-23: "it doesn't resize to a phone"). A room is wider than an upright
   phone, so the photo RESIZES to fit: the whole photo at full width, centred in the space between the
   bar and the caption, still, one at a time. Turn the phone sideways and it fills the screen (below).
   Close + counter on top, the caption in white under the photo, arrows on the photo, tap the left third
   to go back and anywhere else to go forward. No strip, no button bar. */
@media (max-width:640px){
  .lb{background:#000;overflow:hidden}
  .lb.open{display:flex}
  .lb-top{flex:0 0 auto;height:auto;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 8px}
  .lb-close{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
  .lb-frame{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
  .lb-frame picture{width:100%;height:100%;display:flex;align-items:center;justify-content:center;line-height:0}
  .lb-frame img{width:100%;height:100%;object-fit:contain}
  .lb-nav{display:flex;width:44px;height:44px;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.4);z-index:2}
  .lb-prev{left:10px}.lb-next{right:10px}
  .lb-cap{flex:0 0 auto;max-height:40vh;overflow-y:auto;padding:14px 20px calc(env(safe-area-inset-bottom,0px) + 22px)}
  .lb-cap:not(.on){display:none}
  .lb-caption{font-weight:400}
  .lb-strip{display:none}
  .lb-bottom{display:none}
}

/* PHONE, sideways: the photo fills the screen; the bar and the caption ride on shades over it. */
@media (orientation:landscape) and (max-height:520px){
  .lb{background:#000;overflow:hidden}
  .lb.open{display:block}
  .lb-top{position:absolute;left:0;right:0;top:0;z-index:3;height:auto;
    padding:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 14px) 22px calc(env(safe-area-inset-left,0px) + 14px);
    background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
  .lb-top > *{pointer-events:auto}
  .lb-count{text-shadow:0 1px 3px rgba(0,0,0,.8)}
  .lb-frame{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
  .lb-frame picture{width:100%;height:100%;display:flex;align-items:center;justify-content:center;line-height:0}
  .lb-frame img{width:100%;height:100%;object-fit:cover}
  .lb-nav{display:flex;width:44px;height:44px;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.4);z-index:2}
  .lb-prev{left:calc(env(safe-area-inset-left,0px) + 10px)}.lb-next{right:calc(env(safe-area-inset-right,0px) + 10px)}
  .lb-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;max-height:42%;overflow-y:auto;
    padding:34px calc(env(safe-area-inset-right,0px) + 24px) calc(env(safe-area-inset-bottom,0px) + 12px) calc(env(safe-area-inset-left,0px) + 24px);
    background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,0) 100%)}
  .lb-cap:not(.on){display:none}
  .lb-caption{font-size:17px;font-weight:400;text-shadow:0 1px 2px rgba(0,0,0,.7)}
  .lb-strip,.lb-bottom{display:none}
}

.lb-pill{display:none}
@media (min-width:641px) and (min-height:521px){
  /* Laptop/tablet: 32px black above the photo at every width; the photo box is 95% of the
     width, as tall as the screen allows but never taller than 4:3 (so a tablet does not crop
     the sides off every room); the close + counter pill rides INSIDE the box, 16px in. */
  .lb{background:#000;padding:32px 2.5vw 16px;justify-content:center}
  .lb-top{display:none}
  .lb-frame{position:relative;flex:0 0 auto;width:100%;
    height:min(calc(100vh - 48px - 132px), calc(95vw * .75));
    overflow:hidden;display:flex;align-items:center;justify-content:center;background:#000}
  .lb-frame picture{width:100%;height:100%;display:flex}
  .lb-frame img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;box-shadow:none}
  .lb-pill{position:absolute;top:16px;right:16px;z-index:3;display:flex;align-items:center;gap:14px;
    padding:6px 18px 6px 6px;background:rgba(0,0,0,.6);border-radius:999px;white-space:nowrap}
  .lb-pill .lb-close{border-color:rgba(255,255,255,.4)}
  .lb-nav{display:flex;width:56px;height:56px;background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.3);z-index:2}
  .lb-nav svg{width:20px;height:20px}
  .lb-prev{left:16px}.lb-next{right:16px}
  .lb-cap{flex:0 0 auto;height:132px;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;
    text-align:center;padding:10px 20px;max-width:70ch;margin:0 auto;background:#000}
  .lb-caption{font-size:22px;color:#fff;opacity:1;line-height:1.3}
  .lb-cap .lb-count{display:block;margin-top:6px}
  .lb-strip{display:none}
  .lb-bottom{display:none}
  .gal .capline{color:#fff}
}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width:1080px){
  .figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
}
@media (max-width:920px){
  nav.desk{display:none}
  .burger{display:block}
  .split{grid-template-columns:1fr}
  /* ⛔ TEXT FIRST. A bought design ships the photo first and it is invisible on a
     laptop — a portrait above the headline on the screen most people use. */
  .split .col-text{order:1}
  .split .col-media{order:2;position:relative;top:0;max-width:440px;width:100%;justify-self:center}
  .contact form{grid-template-columns:1fr}
}

/* ============================================================
   PHONE — 390px is a primary canvas, not a fallback.
   ⛔ THE RECURRING BUG IN EVERY BOUGHT DESIGN: type is clamp(floor, Xvw, cap)
   tuned on a desktop, so below the crossover the FLOOR freezes and a 390px
   phone renders what a 700px tablet renders. Every floor below is lowered on
   purpose, and each one lands on its old value at the 640px edge.
   ⭐ AND A PHONE HAS HEIGHT, NOT WIDTH — stack, do not shrink.
   ============================================================ */
@media (max-width:640px){
  h1{font-size:clamp(30px,8.6vw,44px);line-height:1.12}
  h2{font-size:clamp(25px,6.8vw,34px);line-height:1.22}
  .lede{font-size:15px;line-height:1.85}
  .sub{font-size:14.5px;max-width:40ch}
  .eyebrow{font-size:11.5px;letter-spacing:.24em}
  .band{padding:clamp(46px,10vw,64px) 20px}
  .hero{height:auto;min-height:0}
  .hero .stage{position:relative;inset:auto;aspect-ratio:4/5;height:auto}
  .hero .copy{position:relative;left:auto;top:auto;transform:none;width:100%;padding:30px 20px 40px;
    background:var(--ink)}
  .hero .scrim{background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,transparent 46%,rgba(0,0,0,.45) 100%)}
  .badge{font-size:9.5px;letter-spacing:.18em;line-height:1.8;max-width:86vw}
  .statement{padding:34px 20px 38px}
  .statement h1{font-size:clamp(30px,8.6vw,42px)}
  .statement .sub{font-size:15px;line-height:1.75;max-width:38ch}
  .head .mark .r{font-size:9.5px;letter-spacing:.26em}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .fig .f{font-size:clamp(30px,9vw,40px)}
  .fig .l{font-size:11px;letter-spacing:.1em}
  .honors{flex-direction:column;align-items:flex-start;gap:9px}
  .honors span{font-size:13.5px}
  .lgrid{gap:20px}
  .lcard .body{padding:20px 20px 24px}
  .fcards{grid-template-columns:1fr}
  .factbar .in{gap:14px 26px}
  .factbar .mls{margin-left:0;width:100%}
  .callrow{flex-direction:column;gap:22px;align-items:flex-start;text-align:left}
  .compliance .in{gap:18px}
  .gal .capline{font-size:17px;line-height:1.4}
  /* the hero fills the whole first screen on a phone — svh, so the browser's
     own chrome (the URL bar sliding away) can never leave a gap under it. */
  .lhero{height:100svh;min-height:0}
  .lhero .cap{padding:0 0 4px}
  .lhero .cap h1{font-size:clamp(27px,8vw,36px)}
  .lhero .cap .place{margin-top:8px;font-size:15px;color:rgba(255,255,255,.72)}
  .lhero .cap .pill{padding:6px 12px;font-size:9.5px;margin-bottom:14px}
}
/* ⛔ A WIDE-TRACKED DESCRIPTOR WILL NOT FIT ANY PHONE HEADER, and shrinking it is
   the wrong trade — we have height, not width. One word per line, tracking intact,
   desktop untouched, and NO second copy of the string to go stale. */
@media (max-width:430px){
  /* ⭐ ONE WORD PER LINE, TRACKING INTACT — but only for a descriptor that will
     not fit. The builder adds .stack when the string is long enough to need it,
     because a SHORT descriptor stacked reads as an accident: "REALTOR® / · /
     COMPASS" puts the separator on its own line. One string, one rule, decided
     from the config at build time. */
  .head .mark .r.stack{width:min-content;word-spacing:100vw;line-height:1.5}
  .head{padding:14px 16px}
  .cta{padding:14px 26px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .hero .img{animation:none;transform:scale(1.03)}
  .lcard,.lcard .ph img,.gal img{transition:none}
}

/* ============================================================
   SOLD — the closed-sale pages, their index, and the home strip.
   ⛔ EVERY RULE HERE IS SCOPED TO A .sold- CLASS. A bare h2{} or
   header{} in this block would repaint the whole site.
   The photograph is never stretched past its real pixels: the
   frame is capped at 1120px because the source tops out at 1024.
   ============================================================ */
.sold-grid{display:grid;gap:clamp(14px,1.6vw,22px);max-width:1280px;margin:clamp(30px,4vw,52px) auto 0;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.sold-card{display:block;text-decoration:none;color:inherit;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),border-color .5s,box-shadow .5s}
.sold-card:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 22px 50px -28px rgba(0,0,0,.9)}
.sold-card .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(255,255,255,.02)}
.sold-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.sold-card:hover .ph img{transform:scale(1.05)}
.sold-card .tag{position:absolute;top:12px;left:12px;z-index:2;padding:6px 12px;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:#fff;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.sold-card .tag.win{left:auto;right:12px;background:var(--accent);border-color:var(--accent);color:#000;font-weight:800}
.sold-card .go{display:inline-block;margin-top:16px;padding:9px 16px;border:1px solid var(--accent);
  font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-soft);transition:.3s}
.sold-card:hover .go{background:var(--accent);border-color:var(--accent);color:#000}
.sold-stats{display:flex;justify-content:center;text-align:center;margin-top:30px}
.sold-split{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,3vw,40px);max-width:1000px;margin:34px auto 0;text-align:center}
.sold-split b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(34px,4vw,54px);line-height:1;color:#fff;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.sold-split span{display:block;margin-top:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-soft);font-weight:700}
@media (max-width:640px){.sold-split{grid-template-columns:repeat(2,1fr);row-gap:26px}}
/* the one line under the counties, the same size as the section's h1 (Steven, 09-24) */
.sold-stats span{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(34px,5vw,64px);line-height:1.1;
  color:var(--accent-soft);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.win-line{display:inline-block;margin-bottom:16px;padding:8px 16px;background:var(--accent);color:#000;
  font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.sold-card .b{padding:18px 20px 22px}
.sold-card .p{font-family:var(--serif);font-size:clamp(23px,1.9vw,29px);font-weight:400;line-height:1;color:#fff}
.sold-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.3vw,20px);margin:11px 0 0;line-height:1.25}
.sold-card .pl{margin:5px 0 0;font-size:13.5px;color:rgba(255,255,255,.58);font-weight:300}
.sold-card .s{margin:15px 0 0;padding:13px 0 0;border-top:1px solid rgba(255,255,255,.10);
  display:flex;gap:16px;font-size:12.5px;color:rgba(255,255,255,.62);font-weight:300}
.sold-card .s b{color:#fff;font-weight:500}

/* the stand-in for a photograph another brokerage owns */
.sold-plate{width:100%;height:100%;
  background:linear-gradient(135deg,var(--primary) 0%,var(--ink) 100%)}
.sold-plate::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px)}
.sold-plate.tall{aspect-ratio:3/2;height:auto;position:relative}

.sold-more{text-align:center;margin-top:clamp(28px,3.4vw,44px)}
.sold-more a{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-soft);
  text-decoration:none;border:1px solid var(--accent);padding:15px 30px;display:inline-block;transition:.3s}
.sold-more a:hover{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700}

.sold-top{padding:calc(clamp(16px,3vw,40px) + 120px) clamp(18px,5vw,80px) clamp(30px,4vw,52px);
  background:var(--primary)}
.sold-top .in{max-width:1280px;margin:0 auto}
.sold-top h1{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5vw,64px);
  margin:18px 0 0;line-height:1.1;text-align:center}
.sold-year h2{display:flex;align-items:baseline;justify-content:center;gap:18px}
.sold-year h2 span{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-soft);font-weight:500}
.sold-year{padding-top:clamp(34px,4vw,60px);padding-bottom:0}
.sold-year:last-of-type{padding-bottom:clamp(56px,8vw,124px)}

.sold-page{padding:calc(clamp(16px,3vw,40px) + 120px) clamp(18px,5vw,80px) clamp(56px,8vw,110px)}
.sold-page .in{max-width:940px;margin:0 auto}
.sold-page .crumbs{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.44);font-weight:400}
.sold-page .crumbs a{color:rgba(255,255,255,.66);text-decoration:none}
.sold-page .crumbs a:hover{color:var(--accent-soft)}
.sold-page .crumbs span{padding:0 8px;color:rgba(255,255,255,.28)}
.sold-page .tag{display:inline-block;margin-top:26px;padding:7px 14px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;color:var(--accent-soft);border:1px solid var(--accent)}
.sold-page h1{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.4vw,58px);
  margin:18px 0 0;line-height:1.1}
.sold-page .pl{margin:10px 0 0;font-size:clamp(15px,1.2vw,18px);color:rgba(255,255,255,.6);font-weight:300}
.sold-page .price{font-family:var(--serif);font-size:clamp(30px,3.4vw,46px);font-weight:300;
  color:var(--accent-soft);margin-top:20px;line-height:1}
.sold-page .shot{margin:clamp(26px,3.4vw,44px) 0 0;max-width:1120px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10)}
.sold-page .shot img{width:100%;height:auto}
.sold-page .stats{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,46px);margin-top:clamp(24px,3vw,36px);
  padding:22px 0;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.sold-page .stats div{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.56);font-weight:300}
.sold-page .stats b{display:block;font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);
  letter-spacing:0;text-transform:none;color:#fff;font-weight:400;margin-bottom:5px}
.sold-page .lead{margin:clamp(24px,3vw,36px) 0 0;font-size:clamp(16.5px,1.35vw,20px);line-height:1.8;
  color:rgba(255,255,255,.84);font-weight:300}
.sold-page .desc{margin-top:clamp(20px,2.6vw,32px);max-width:74ch}
.sold-page .desc p{color:rgba(255,255,255,.72);font-weight:300;line-height:2;
  font-size:clamp(15.5px,1.1vw,17.5px);margin:0 0 18px}
.sold-page .about{margin-top:clamp(32px,4vw,54px);border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);padding:clamp(22px,3vw,34px)}
.sold-page .about h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);
  margin:0 0 20px;text-align:left}
.sold-page .about dl{display:grid;gap:14px 34px;margin:0;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.sold-page .about dt{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.44);font-weight:500}
.sold-page .about dd{margin:6px 0 0;font-size:15.5px;color:#fff;font-weight:300;line-height:1.5}
.sold-page .about .map{display:inline-block;margin-top:26px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-soft);text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:7px}
.sold-page .about .map:hover{color:#fff}
.sold-page .ask{margin-top:clamp(32px,4vw,54px);border-left:2px solid var(--accent);padding:6px 0 6px 26px}
.sold-page .ask h2{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.6vw,36px);
  margin:0;text-align:left}
.sold-page .ask p{margin:14px 0 0;font-size:clamp(15.5px,1.2vw,18px);line-height:1.85;
  color:rgba(255,255,255,.72);font-weight:300}
.sold-page .ask a{color:var(--accent-soft);text-decoration:none;border-bottom:1px solid var(--accent)}
.sold-page .ask .cta{display:inline-block;margin-top:22px;border:1px solid var(--accent);border-bottom-width:1px;
  padding:15px 30px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;transition:.3s}
.sold-page .ask /* ⛔ .statement .cta strips the background LATER in the cascade with equal specificity, so a plain
   .cta:hover lost its fill and went black-on-black (09-06). Name both. */
.cta:hover,.statement .cta:hover{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700;text-shadow:none;backdrop-filter:none}
.sold-page .backrow{padding-top:clamp(34px,4vw,52px)}
@media (max-width:640px){
  .sold-grid{grid-template-columns:1fr}
  .sold-page .stats{gap:16px 28px}
  .sold-page .about dl{grid-template-columns:1fr}
}

/* ⛔ THE HERO ON A PHONE, BOTH WAYS (Steven, 2026-09-23: "two canvas possibilities, vertical and horizontal ...
   people go horizontal for YouTube videos, which is the hero section"). Upright, the walkthrough plays WHOLE the
   way YouTube plays on an upright phone: full width, 16:9, under the header, the address beneath it. Sideways,
   it fills the screen. A listing with no video keeps its full-screen photo. */
@media (max-width:640px) and (orientation:portrait){
  .lhero.has-video{height:auto;min-height:0;padding-top:var(--headH,76px)}
  .lhero.has-video video{height:auto;aspect-ratio:16/9;object-fit:cover}
  .lhero.has-video .scrim{display:none}
  .lhero.has-video .cap{position:static;padding:22px 20px 28px}
}
@media (orientation:landscape) and (max-height:520px){
  .lhero{height:100svh;min-height:0}
  .lhero .cap{bottom:18px}
  .lhero .cap h1{font-size:clamp(24px,4vw,34px)}
  .lhero .cap .pill{margin-bottom:10px}
}

/* ⛔ EDGE TO EDGE ON AN iPHONE (Steven, 2026-09-23: sideways showed black strips left and right). The page is
   viewport-fit=cover; ordinary content keeps clear of the camera cut-out through the body's padding, the hero
   bleeds to the glass, and the fixed header and the photo viewer keep their own controls inside the safe area. */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.lhero{margin-left:calc(-1 * env(safe-area-inset-left,0px));margin-right:calc(-1 * env(safe-area-inset-right,0px));width:auto}
.head{padding-left:max(clamp(16px,4vw,60px), env(safe-area-inset-left,0px));
  padding-right:max(clamp(16px,4vw,60px), env(safe-area-inset-right,0px))}
@media (max-width:640px){.head{padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}}

/* "Turn your phone sideways for full screen" - upright phone only, only on the hero video and a wide photo.
   No animation. */
.turn-hint{display:none}
@media (max-width:640px) and (orientation:portrait){
  .turn-hint{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.9);font-size:14px;line-height:1.3}
  .turn-hint svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .lhero.has-video .cap .turn-hint{margin:0 0 16px}
  .lb-frame .turn-hint{position:absolute;top:16px;left:16px;right:16px;justify-content:center;z-index:2}
  .lb-frame:not(.wide) .turn-hint{display:none}
}

/* "Watch full screen" on the hero video - phones and small tablets; the phone's own player, no browser bars. */
.fs-btn{display:none}
@media (max-width:940px){
  .lhero.has-video .fs-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.55);color:#fff;
    border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 15px;font:600 14px/1 var(--sans);cursor:pointer}
  .fs-btn svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}
@media (max-width:640px) and (orientation:portrait){.lhero.has-video .cap .fs-btn{margin:0 0 16px}}
@media (orientation:landscape) and (max-height:520px){
  .lhero.has-video .fs-btn{position:absolute;right:calc(env(safe-area-inset-right,0px) + 4px);bottom:4px;z-index:6}
}

/* Full screen from the photo viewer: the button sits by the counter; the slideshow video is never seen on the page. */
.lb-right{display:flex;align-items:center;gap:12px}
.lb-fs{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.35);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.lb-fs svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-fs:hover{background:var(--accent);color:#000;border-color:transparent}

/* the full-screen button says so in words when the phone is sideways - that is the moment it is needed */
.lb-fs-t{display:none}
@media (orientation:landscape) and (max-height:520px){
  .lb-fs{width:auto;height:38px;padding:0 14px 0 12px;border-radius:999px;gap:8px;background:rgba(0,0,0,.5)}
  .lb-fs .lb-fs-t{display:inline;font:600 14px/1 var(--sans)}
}

/* captions are centred wherever they live - under a photo in the gallery, in the viewer, in the slideshow (Steven, 2026-09-23) */
.lb-cap,.lb-caption,.gal .capline{text-align:center}

/* ---- THE DISCLOSURE: her side, who listed it, who brought the buyer (Steven, 2026-09-23) ---- */
.sold-who{margin:18px 0 0;padding:14px 18px;border:1px solid rgba(240,179,35,.4);background:rgba(240,179,35,.05);display:grid;gap:9px}
.sold-who div{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.sold-who dt{flex:0 0 150px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft)}
.sold-who dd{margin:0;color:#fff;font-size:15px;font-weight:300;line-height:1.45}
@media (max-width:640px){.sold-who dt{flex-basis:100%}}
.sold-card .who{margin:7px 0 0;font-size:12px;line-height:1.4;color:var(--accent-soft)}
.sold-card.nophoto .ph{aspect-ratio:auto;height:48px;background:rgba(240,179,35,.06)}
.sold-card.nophoto .sold-plate{display:none}
.sold-maplink{text-align:center;margin-top:8px}

/* ---- THE SOLD MAP (2026-09-23): gold = her listing, ring = she brought the buyer; a tap opens the card ---- */
.map-top{padding-bottom:clamp(18px,2.4vw,28px)}
.map-top .lede{margin-top:14px}
.map-key{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:16px;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.map-key span{display:inline-flex;align-items:center;gap:9px}
.map-key i{display:inline-block;width:13px;height:13px;border-radius:50%;background:var(--accent);border:1px solid #0b0b0b}
.map-key i.ring{background:transparent;border:2.5px solid var(--accent)}
.soldmap-wrap{padding:0 clamp(18px,5vw,80px)}
.soldmap-box{position:relative;max-width:1280px;margin:0 auto}
.soldmap{height:min(76vh,860px);min-height:420px;border:1px solid rgba(255,255,255,.12);background:#101010}
.soldmap-more{text-align:center}
.soldmap .maplibregl-ctrl-attrib{font-size:11px}
@media (max-width:640px){
  .soldmap-wrap{padding:0}
  .soldmap{height:72svh;min-height:380px;border-left:0;border-right:0}
}
@media (orientation:landscape) and (max-height:520px){
  .soldmap{height:88svh;min-height:0}
}

/* the map page held sideways: a short title so the map fits the screen */
@media (orientation:landscape) and (max-height:520px){
  .map-top{padding-top:calc(env(safe-area-inset-top,0px) + 78px);padding-bottom:10px}
  .map-top h1{font-size:26px;margin-top:0}
  .map-top .lede{display:none}
  .map-key{margin-top:8px}
  .soldmap{height:80svh;min-height:0}
}

/* the laptop pointer label on the sold map */
.maplibregl-popup.soldtip .maplibregl-popup-content{background:#0f0f0f;color:#fff;padding:8px 12px;border:1px solid rgba(240,179,35,.6);
  border-radius:0;box-shadow:0 8px 22px rgba(0,0,0,.55);font-family:var(--sans);font-size:12.5px;line-height:1.4}
.maplibregl-popup.soldtip .maplibregl-popup-tip{display:none}
.soldtip b{display:block;font-family:var(--serif);font-weight:400;font-size:16px}
.soldtip span{color:rgba(255,255,255,.66)}

/* Steven, 2026-09-23: "cut the padding in half - you have to scroll down too far to see her." The gap between a
   sale's details and Kay's twin is the page's bottom padding plus the section's top padding; both are halved. */
.sold-page{padding-bottom:clamp(28px,4vw,55px)}
.band.sold-twin{padding-top:clamp(28px,4vw,62px)}

/* THE MAP GETS THE WHOLE CANVAS (Steven, 2026-09-23: "just like we did with the photo gallery and videos on an
   iPhone, I want the whole damn canvas, same thing on a laptop"). Edge to edge and the full height of the screen;
   the site header floats over its top on a soft shade, and a small panel carries the title and the key. */
.soldmap-full{position:relative;height:100vh;height:100svh;min-height:420px;background:#101010;
  margin-left:calc(-1 * env(safe-area-inset-left,0px));margin-right:calc(-1 * env(safe-area-inset-right,0px))}
.soldmap-full .soldmap{position:absolute;inset:0;width:100%;height:100%;min-height:0;border:0}
.soldmap-full::before{content:"";position:absolute;left:0;right:0;top:0;z-index:4;pointer-events:none;
  height:calc(var(--headH,96px) + 36px);background:linear-gradient(rgba(11,16,23,.9),rgba(11,16,23,0))}
.map-panel{position:absolute;z-index:5;left:max(14px,env(safe-area-inset-left,0px));top:calc(var(--headH,96px) + 12px);
  width:min(340px,calc(100% - 28px));padding:14px 18px 16px;background:rgba(11,16,23,.84);border:1px solid rgba(240,179,35,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.map-panel h1{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.2vw,32px);line-height:1.1;margin:0;text-align:left;color:#fff}
.map-panel .lede{margin:6px 0 0;max-width:none;text-align:left;font-size:14px}
.map-panel .map-key{justify-content:flex-start;gap:8px 18px;margin-top:10px;font-size:10.5px}
.map-panel .map-list{display:inline-block;margin-top:12px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-soft);text-decoration:none}
.map-panel .map-list:hover{color:#fff}
@media (max-width:640px){
  .map-panel{padding:10px 14px 12px;top:calc(var(--headH,72px) + 8px)}
  .map-panel h1{font-size:21px}
  .map-panel .lede{display:none}
}
@media (orientation:landscape) and (max-height:520px){
  .map-panel{width:auto;max-width:300px;padding:8px 12px;top:calc(var(--headH,64px) + 6px)}
  .map-panel h1{font-size:18px}
  .map-panel .lede,.map-panel .map-list{display:none}
}

/* THE SLIM BAR (Steven, 2026-09-24): one line under the header that tells people what to do - the title, the key,
   the tap hint - and the light/dark switch. It replaces the corner panel. */
.map-bar{position:absolute;z-index:5;left:0;right:0;top:var(--headH,96px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:6px 26px;padding:9px max(16px,env(safe-area-inset-left,0px));color:#fff;
  background:rgba(11,16,23,.84);border-top:1px solid rgba(240,179,35,.22);border-bottom:1px solid rgba(240,179,35,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.map-bar h1{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.2;margin:0;color:inherit;text-align:left}
.map-bar .map-key{display:inline-flex;gap:16px;margin:0;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.map-bar .map-hint{font-size:13px;color:rgba(255,255,255,.74)}
.map-mode{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;background:transparent;cursor:pointer;
  border:1px solid rgba(240,179,35,.6);color:var(--accent-soft);font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.map-mode svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.soldmap-full.mode-dark .map-mode .moon,.soldmap-full.mode-light .map-mode .sun{display:none}
.map-mode:hover{background:var(--accent);border-color:var(--accent);color:#000}
/* the light map: every text and dot color flips with it, so nothing goes invisible */
.soldmap-full.mode-light{background:#f2f2f0}
.soldmap-full.mode-light .map-bar{background:rgba(255,255,255,.92);color:#0b1017;border-color:rgba(138,98,0,.3)}
.soldmap-full.mode-light .map-bar .map-key{color:rgba(11,16,23,.82)}
.soldmap-full.mode-light .map-bar .map-hint{color:rgba(11,16,23,.7)}
.soldmap-full.mode-light .map-key i{background:#e2a100;border-color:#3a2a00}
.soldmap-full.mode-light .map-key i.ring{background:rgba(255,255,255,.75);border-color:#a87400}
.soldmap-full.mode-light .map-mode{color:#6e4f00;border-color:rgba(110,79,0,.55)}
.soldmap-full.mode-light .map-mode:hover{background:#0b1017;border-color:#0b1017;color:#fff}
.soldmap-full.mode-light .maplibregl-popup.soldtip .maplibregl-popup-content{background:#fff;color:#0b1017;border-color:rgba(138,98,0,.55)}
.soldmap-full.mode-light .soldtip span{color:rgba(11,16,23,.66)}
@media (max-width:640px){
  .map-bar{gap:5px 14px;padding:7px 12px}
  .map-bar h1{font-size:16px}
  .map-bar .map-key{gap:12px;font-size:9.5px;letter-spacing:.12em}
  .map-bar .map-hint{font-size:12px}
}
@media (orientation:landscape) and (max-height:520px){
  .map-bar{gap:4px 18px;padding:5px 12px}
  .map-bar h1{font-size:15px}
  .map-bar .map-hint{display:none}
}

/* THE KEY SITS AT THE BOTTOM (Steven, 2026-09-24: "I don't like how it's competing with the navigation section").
   The bar docks to the bottom edge; the zoom buttons and the map credits ride above it, and so does the owner's
   edit button. */
.map-bar{top:auto;bottom:0;border-bottom:0;padding-bottom:max(9px,env(safe-area-inset-bottom,0px))}
.soldmap-full .maplibregl-ctrl-bottom-right,.soldmap-full .maplibregl-ctrl-bottom-left{bottom:var(--barH,52px)}
body:has(.soldmap-full) #se-bar{bottom:calc(var(--barH,52px) + 14px)}

/* THE MAP CREDIT AS MOUSE PRINT (Steven, 2026-09-24: "I just don't like that it's taking up any eyeball space").
   OpenStreetMap's license needs the credit present and readable, not loud: tiny, dim, matched to each mode, and it
   still folds to the small (i) once the visitor moves the map. */
.soldmap-full .maplibregl-ctrl-attrib.maplibregl-compact{background:rgba(11,16,23,.5);min-height:16px;border-radius:8px;margin:0 8px 6px 0;padding:1px 18px 1px 0}
.soldmap-full .maplibregl-ctrl-attrib.maplibregl-compact-show{padding:1px 20px 1px 7px}
.soldmap-full .maplibregl-ctrl-attrib-inner{font-size:9.5px;line-height:14px;color:rgba(255,255,255,.5)}
.soldmap-full .maplibregl-ctrl-attrib a{color:rgba(255,255,255,.55)}
.soldmap-full .maplibregl-ctrl-attrib-button{width:16px;height:16px;background-size:12px;background-color:transparent;opacity:.5;filter:invert(1)}
.soldmap-full.mode-light .maplibregl-ctrl-attrib.maplibregl-compact{background:rgba(255,255,255,.55)}
.soldmap-full.mode-light .maplibregl-ctrl-attrib-inner{color:rgba(11,16,23,.5)}
.soldmap-full.mode-light .maplibregl-ctrl-attrib a{color:rgba(11,16,23,.55)}
.soldmap-full.mode-light .maplibregl-ctrl-attrib-button{filter:none}

/* THE KEY, TWO SIZES LARGER (Steven, 2026-09-24), titled in Kay's own voice: "My Last 575 Sold Transactions". */
.map-bar h1{font-size:24px}
.map-bar .map-key{font-size:12.5px}
.map-bar .map-key i{width:15px;height:15px}
.map-bar .map-hint{font-size:15.5px}
.map-mode{font-size:12px;padding:6px 14px}
.map-mode svg{width:16px;height:16px}
@media (max-width:640px){
  .map-bar h1{font-size:19px}
  .map-bar .map-key{font-size:11px}
  .map-bar .map-hint{font-size:13.5px}
  .map-mode{font-size:11px}
}
@media (orientation:landscape) and (max-height:520px){
  .map-bar h1{font-size:17px}
}
/* her record inside About, under the first paragraph (Steven, 09-24) - sized to the text column */
.about-record{margin:30px 0 34px;padding:26px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.about-record .sold-stats{justify-content:flex-start;text-align:left;margin-top:0}
.about-record .sold-stats span{font-size:clamp(26px,2.6vw,38px)}
.about-record .sold-split{grid-template-columns:repeat(4,1fr);max-width:none;margin:22px 0 0;text-align:left;gap:18px}
.about-record .sold-split b{font-size:clamp(30px,3vw,44px)}
.about-record .sold-split span{font-size:10.5px;letter-spacing:.14em}
@media (max-width:640px){.about-record .sold-split{grid-template-columns:repeat(2,1fr);row-gap:20px}}
/* About and the twin below it sit closer (Steven, 09-24: "too much top padding") */
#about{padding-top:clamp(28px,3.5vw,56px)}
/* the twin in the About column: pinned in view while the story scrolls past on a desktop */
#about .col-media .asst{margin:0 auto;max-width:460px}
/* A mid-call card shows right under the orb, in place of the message bubble, so it never lands below the fold (09-30) */
#about .col-media .asst-card{order:1}
#about .col-media .asst-log{order:2}
#about .col-media .asst-tiles{order:3}
#about .col-media .asst:has(.asst-card:not(:empty)) .asst-log{display:none}
#about .col-media .asst-photo{width:min(190px,55%);height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;border:4px solid var(--accent)}
/* Sara on a listing, laptop: two columns so the section fits above the fold (Steven, 09-24) -
   her face, name and orb on the left, the conversation on the right. A phone keeps the single column. */
@media (min-width:921px){
  .asst-wide{padding-top:clamp(32px,3vw,48px)}
  /* ONE LAYOUT FOR EVERY TWIN (Steven, 09-30), the same as his own site: the LEFT column carries the words - eyebrow,
     heading, then her message; the RIGHT column is the orb on top, the caption, the photo, the name. The eyebrow lines
     up with the top of the orb. A mid-call card covers the left column (assets/assistant.js places it). */
  .asst-wide .wrap{max-width:1100px;display:grid;position:relative;text-align:left;
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(40px,5vw,80px);align-items:start;
    grid-template-areas:"eyebrow photo" "h2 photo" "log who" "log orb" "log sub" "tiles state"}
  .asst-wide .asst{display:contents}
  .asst-wide .eyebrow{grid-area:eyebrow;justify-self:start;align-self:end;margin-top:24px}
  .asst-wide h2{grid-area:h2;justify-self:start;text-align:left;margin:.25em 0 0}
  .asst-wide .asst-photo{grid-area:photo;width:190px;height:190px;justify-self:center;margin-top:24px}
  .asst-wide .asst-who{grid-area:who;justify-self:center;text-align:center;margin-top:12px}
  .asst-wide .asst-sub{grid-area:sub;justify-self:center;text-align:center;margin:0 0 6px;font-size:13.5px;color:#fff}
  .asst-wide .asst-orb{grid-area:orb;justify-self:center;align-self:start;margin:72px 0 72px}
  .asst-wide .asst-state{grid-area:state;justify-self:center}
  .asst-wide .asst-log{grid-area:log;align-self:start;margin-top:28px;width:100%}
  .asst-wide .asst-tiles{grid-area:tiles;align-self:start}
  .asst-wide .twin-end{grid-area:orb;justify-self:center;align-self:center;margin:72px 0}
  /* A card that pops up mid-call takes the right column from under the orb to the bottom of the section, over the
     conversation, so it is never cut off (Steven, 09-30 - same idea as his own site). The orb stays in view above it. */
}
/* Home bio: the same stack in the right-hand column - orb, caption, photo, name, then her message. */
@media (min-width:921px){
  #about .col-media .asst-orb{order:3;margin:72px 0 72px}
  #about .col-media .asst-sub{order:4}
  #about .col-media .asst-photo{order:1;margin:0 0 10px}
  #about .col-media .asst-who{order:2}
  #about .col-media .asst-state{order:5}
  #about .col-media .asst-log{order:6}
  #about .col-media .asst-tiles{order:7}
  #about .col-media .twin-end{order:3;margin:72px auto}
  /* A mid-call card goes to the LEFT of the twin, from the top of the orb to the bottom of the photo, over the words -
     never under the orb, never below the fold. assets/assistant.js measures and places it. */
  .asst{position:relative}
  .asst-card.placed{position:absolute;z-index:5;overflow:auto;background:var(--ink,#0A0E17);margin:0}
  .asst-card.placed .twin-card{margin-top:0}
  .asst-card:empty{display:none}
}

/* ONE COLUMN IS ALL A PHONE GETS (Steven, 09-28 - the rule across every site we build). Checked at the five canvas
   sizes: phone upright 390 (360-430), phone sideways ~844, tablet upright ~820, tablet sideways ~1180, laptop 1280+.
   The number tiles stack below 640px. The beds/baths/acres strip (.stats) is a spec line, not columns, and stays. */
@media (max-width:639px){
  .figs, .sold-split, .about-record .sold-split { grid-template-columns: minmax(0,1fr) !important; }
}

/* Listed-by line at the bottom of every listing (09-30) */
.listed-by{padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.listed-by .lb-line{font-size:14px;color:#9fb0c9;margin:0 0 6px;letter-spacing:.01em}.listed-by strong{color:#e6ebf5;font-weight:600}.listed-by a{color:var(--accent)}

/* Privacy + terms pages (10-22): one readable column on the site's own dark ground */
.legal{background:var(--ink);color:#d9dfeb;padding:clamp(120px,14vw,170px) 16px clamp(64px,8vw,110px)}
.legal-in{max-width:760px;margin:0 auto;font-size:17px;line-height:1.75}
.legal-eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);font-weight:600}
.legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,54px);line-height:1.1;color:#fff;margin:14px 0 6px}
.legal-date{color:#8d9ab0;font-size:14px;margin:0 0 30px}
.legal h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,30px);color:#fff;margin:40px 0 10px}
.legal ul{padding-left:1.2em;margin:0}.legal li{margin:0 0 10px}.legal p{margin:0 0 16px}
.legal a{color:var(--accent)}.legal strong{color:#fff;font-weight:600}
.legal-alt{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.fine a{color:inherit;text-decoration:underline;text-underline-offset:3px}