@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;
  font-display:swap;src:url(fonts/newsreader-var.woff2) format('woff2-variations')}
/* Self-hosted webfonts — no third-party requests, no Google Fonts
   dependency. Files from @fontsource (Syne: OFL, Inter: OFL). */
@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/inter-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}
/* ═══════════════════════════════════════════════════════════
   Justin Lott Home Selling Team
   Design system adapted from nexu-io/open-design "Velar"
   (MIT). Velar's locked palette is monochrome; per brief the
   one permitted accent is Justin's Pantone 307 C deep blue.
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#f5f0ea;        /* warm off-white ground */
  --ink:#1a1a1a;          /* dark sections */
  --ink-deep:#12222c;     /* preloader — near-black w/ blue cast */
  --statement:#e8e4df;    /* text on dark */
  --accent:#00659E;       /* Pantone 307 C — the only hue */
  --accent-lift:#0079bd;
  --rule:rgba(26,26,26,.14);
  --rule-dark:rgba(255,255,255,.2);
  --display:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --pad:clamp(24px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:400;line-height:1.5;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
/* The nav is fixed, so anchor jumps would otherwise park each section's
   heading underneath it. */
section[id],div[id="darkWrap"]{scroll-margin-top:clamp(78px,8vw,136px)}
::selection{background:var(--accent);color:#fff}

/* ─── PRELOADER ──────────────────────────────────────────── */
#pre{
  position:fixed;inset:0;z-index:100;background:var(--ink-deep);
  display:flex;align-items:center;justify-content:center;
  transition:transform 1.5s cubic-bezier(.45,0,.15,1);
}
#pre.lift{transform:translateY(-100%)}
#pre.parked{transition:none}
/* Both lines are the same wordmark: same face, same weight, same size, same
   white. The only accent is the blue full stop after Lott. Scaled 1.5x from
   the original — the cap is 4.35rem against the 2.9rem it was. The vw term is
   tuned lower than a straight 1.5x because the second line is seventeen
   characters against the first line's twelve, and it is the one that decides
   whether the lockup fits a phone. */
.pre-word{
  font-family:var(--display);font-size:clamp(2.2rem,7.6vw,4.35rem);
  color:#fff;letter-spacing:-.02em;font-weight:300;line-height:1.08;
  display:flex;flex-direction:column;align-items:center;
}
.pre-l1,.pre-l2{display:flex;align-items:center}
.pre-l2{margin-top:.06em}
.pre-word span{opacity:0}
.pre-word span.on{opacity:1}
.pre-word span.dot{font-weight:800;color:var(--accent-lift)}
#cursor{
  width:max(3px,.055em);height:1.02em;background:#fff;border-radius:2px;
  margin-left:.08em;animation:blink .7s step-end infinite;
}
#cursor.off{display:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ─── NAV ────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:clamp(18px,2.2vw,26px) var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  color:var(--ink);transition:color .35s ease;
}
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(to bottom,rgba(18,34,44,.55),rgba(18,34,44,0));
  transition:opacity .35s ease;pointer-events:none;
}
.nav.on-dark{color:#fff}
.nav.on-dark::before{opacity:1}
/* Past the hero the nav sits over light content — it needs its own surface,
   otherwise the wordmark overlaps whatever is beneath it. */
.nav.solid{
  background:rgba(245,240,234,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.nav.solid.on-dark{
  background:rgba(20,20,20,.72);border-bottom-color:rgba(255,255,255,.12);
}
.nav.solid::before{opacity:0}
.mark{
  font-family:var(--display);font-size:clamp(15px,1.35vw,19px);
  font-weight:400;letter-spacing:-.01em;line-height:1.15;
}
.mark b{display:block;font-weight:400;font-size:.62em;letter-spacing:.14em;
  text-transform:uppercase;opacity:.66;margin-top:.28em}
.mark i{font-style:normal;color:var(--accent-lift)}
.nav.on-dark .mark i{color:#4db4e8}
.nav-right{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav-link{
  font-family:var(--body);font-size:12.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;opacity:.72;
  transition:opacity .2s ease;
}
.nav-link:hover{opacity:1}
@media(max-width:900px){.nav-link{display:none}}
.burger{
  width:30px;height:18px;position:relative;cursor:pointer;
  background:none;border:0;padding:0;color:inherit;
}
.burger i{
  position:absolute;left:0;height:1px;width:28px;background:currentColor;
  transition:width .28s ease,transform .28s ease,opacity .2s ease;
}
.burger i:nth-child(1){top:4px}
.burger i:nth-child(2){bottom:4px}
.burger:hover i:nth-child(1){width:20px}
.burger.open i:nth-child(1){transform:translateY(6px) rotate(45deg);width:28px}
.burger.open i:nth-child(2){transform:translateY(-6px) rotate(-45deg);width:28px}

#menu{
  position:fixed;inset:0;z-index:40;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2.4vw,26px);
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
#menu.open{opacity:1;pointer-events:auto}
#menu a{
  font-family:var(--display);font-size:clamp(28px,7vw,54px);font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  transition:color .2s ease;
}
#menu a:hover{color:var(--accent)}

/* ─── HERO ───────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;
}
.hero video,.hero .fallback{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}

/* ── Hero still with a slow drift ───────────────────────────────────────
   The hero was a video loop of a $2.15M house. It is now a photograph of
   a $19M one, because no video of that house exists. A still hero can
   read as dead, so it drifts: a 34-second scale-and-shift that never
   loops back on itself (alternate), slow enough that you notice the room
   has changed rather than watching it move. transform-origin sits on the
   house and pool, not the sky, so the drift pushes into the subject.
   Respects prefers-reduced-motion. */
.hero .hero-media{position:absolute;inset:0;z-index:0;display:block}
.hero .hero-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:58% 62%;
  animation:heroDrift 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{transform:scale(1.04)}
  to{transform:scale(1.13) translate3d(-1.1%,-1.3%,0)}
}
@media(prefers-reduced-motion:reduce){
  .hero .hero-media img{animation:none;transform:scale(1.02)}
}

/* Hero type is white on a bottom-weighted scrim. It had to be, over the
   old mid-dark footage; it still has to be, because the replacement frame
   is bright sunlit travertine at exactly the height the type sits. */
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;
  /* Stops were tuned for mid-dark footage. The replacement frame is
     sunlit travertine right where the headline sits — measured at 0.33
     luminance behind the type, which is under 3:1 against white — so the
     lower half of the ramp is heavier now. Re-measure if the frame changes. */
  background:linear-gradient(to bottom,
    rgba(18,34,44,.44) 0%,
    rgba(18,34,44,.12) 22%,
    rgba(18,34,44,.32) 48%,
    rgba(18,34,44,.80) 78%,
    rgba(18,34,44,.92) 100%);
}
.hero-text{
  position:relative;z-index:2;width:100%;
  padding:0 var(--pad) clamp(38px,7vh,90px);
  opacity:0;transform:translateY(-28px);
}
.hero-text.in{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1) .1s,
             transform .7s cubic-bezier(.22,1,.36,1) .1s;
}
.h-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:-.04em;
}
.h-kicker{
  font-family:var(--display);font-weight:300;text-transform:uppercase;
  letter-spacing:-.03em;line-height:1;color:#fff;
  text-shadow:0 2px 30px rgba(18,34,44,.5);
}
.h-sub{
  font-family:var(--display);font-weight:400;
  font-size:clamp(10px,.95vw,14px);max-width:300px;
  opacity:.9;line-height:1.6;text-align:right;
  letter-spacing:.02em;margin-bottom:.2em;color:#fff;
  text-shadow:0 1px 16px rgba(18,34,44,.6);
}
.h-main-wrap{
  /* The display setting runs a deliberately tight line-height (.86 desktop,
     .9 below), which pushes cap-heights above the line box and descenders
     below it. This used to be overflow:hidden, which sliced 8px off the tops
     of the capitals on desktop and 4px on mobile — enough that the T in
     PONTE read as an apostrophe. The box lets the glyphs out now and pays
     for the extra height with matching negative margins, so nothing around
     it moves. Values are in em so they track the font size. */
  overflow:visible;
  padding:.12em 0 .10em;
  margin:-.12em 0 -.10em;
}
.h-main{font-optical-sizing:auto;font-variation-settings:"opsz" 72;
  font-family:var(--display);font-weight:200;text-transform:uppercase;
  letter-spacing:-.018em;color:#fff;
  text-shadow:0 4px 44px rgba(18,34,44,.42);
}
.h-sub-m{
  font-family:var(--display);font-weight:400;
  font-size:clamp(12px,3vw,15px);opacity:.92;margin-top:.9em;
  line-height:1.55;color:#fff;display:none;
  text-shadow:0 1px 16px rgba(18,34,44,.6);
}
.h-meta{
  display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,26px);
  align-items:center;margin-top:clamp(20px,3vh,34px);
}
.h-meta a{
  font-family:var(--body);font-size:13px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;
  padding:14px 26px;border-radius:2px;
  background:var(--accent);color:#fff;
  transition:background .2s ease,transform .2s ease;
}
.h-meta a:hover{background:var(--accent-lift);transform:translateY(-1px)}
.h-meta a.ghost{
  background:rgba(255,255,255,.10);color:#fff;
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.h-meta a.ghost:hover{background:rgba(255,255,255,.2);border-color:#fff}

@media(max-width:639px){
  .h-sub{display:none}.h-sub-m{display:block}
  .h-top{justify-content:flex-start}
  .h-kicker{font-size:7.5vw}
  .h-main{font-optical-sizing:auto;font-size:15vw;line-height:.9}
  /* Side-by-side pills are too narrow to read at 390px — stack them
     full width so both are the same size and both clear 44px. */
  .h-meta{flex-direction:column;align-items:stretch;gap:10px}
  .h-meta a{width:100%;text-align:center;justify-content:center;padding:16px 20px}
}

/* Portrait viewports: type sits directly on moving footage, so it needs a
   floor under it. Landscape keeps the footage clean. */
@media(max-aspect-ratio:1/1){
  .hero::after{
    content:'';position:absolute;inset:auto 0 0 0;height:74%;
    background:linear-gradient(to top,rgba(12,14,16,.94),rgba(12,14,16,.70) 42%,rgba(12,14,16,.28) 74%,transparent);
    z-index:1;pointer-events:none;
  }
  .hero-text{position:relative;z-index:2}
}
@media(min-width:640px) and (max-width:1023px){
  .h-sub{display:none}.h-sub-m{display:block}
  .h-top{justify-content:flex-start}
  .h-kicker{font-size:5.5vw}
  .h-main{font-optical-sizing:auto;font-size:12vw;line-height:.9}
}
@media(min-width:1024px){
  .h-kicker{font-size:3vw}
  /* "PONTE VEDRA" measures 11.95em wide in Syne 800 at -0.035em
     tracking. 7.4vw keeps it inside the padded container from
     1024px up to 2560px without wrapping or clipping. */
  .h-main{font-optical-sizing:auto;font-size:clamp(56px,7.4vw,168px);line-height:.86;white-space:nowrap}
}

/* ─── SCROLL-DRIVEN ESTATE REVEAL ────────────────────────── */
.stage{position:relative;height:220vh;z-index:5}
.stage-inner{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.estate{
  position:relative;overflow:hidden;
  width:var(--w,62%);aspect-ratio:16/9;
  border-radius:var(--r,10px);
  will-change:width,border-radius;
  box-shadow:0 30px 90px rgba(26,26,26,.22);
}
.estate img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 42%;
}
@media(max-width:700px){
  .estate{aspect-ratio:4/5}
  .estate img{object-position:center 46%}
}
.estate-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(16px,2.4vw,34px);
  background:linear-gradient(to top,rgba(18,34,44,.78),rgba(18,34,44,0));
  color:#fff;opacity:var(--capO,0);transition:opacity .4s ease;
}
.estate-cap .addr{
  font-family:var(--display);font-weight:400;
  font-size:clamp(15px,2vw,26px);letter-spacing:-.01em;
}
.estate-cap .spec{
  font-family:var(--body);font-size:clamp(11px,1.1vw,13.5px);
  letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-top:.5em;
  font-variant-numeric:tabular-nums;
}

/* ─── DARK STATEMENT + STATS ─────────────────────────────── */
.dark-wrap{position:relative;height:135vh;z-index:20}
.spacer{height:4vh;background:var(--ink)}
.dark{
  position:sticky;top:0;height:100svh;background:var(--ink);overflow:hidden;
  display:flex;align-items:flex-start;
}
.dark-in{
  width:100%;padding:clamp(96px,13vh,150px) var(--pad) clamp(50px,7vw,100px);
}
.statement-wrap{max-width:1200px;margin:0 auto;padding-left:25%}
.statement{
  font-family:var(--body);font-weight:300;color:var(--statement);
  letter-spacing:-.02em;line-height:1.35;
  font-size:clamp(20px,2.35vw,37px);
}
.statement em{font-style:normal;color:#fff}
.stats{
  max-width:1200px;margin:clamp(44px,6vw,80px) auto 0;padding-left:25%;
  display:flex;
}
.stat{flex:1}
.stat + .stat{
  border-left:1px solid var(--rule-dark);
  padding-left:clamp(18px,2.5vw,40px);
}
.stat .n{
  font-family:var(--body);font-weight:300;color:#fff;
  font-size:clamp(32px,4.5vw,72px);line-height:1.1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.stat .l{
  font-family:var(--body);font-size:clamp(11px,1.1vw,15px);
  color:rgba(255,255,255,.6);margin-top:clamp(4px,.5vw,8px);
  letter-spacing:.03em;
}
.stats-note{
  max-width:1200px;margin:clamp(22px,3vw,34px) auto 0;padding-left:25%;
  font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.02em;
}
@media(max-width:767px){
  .statement-wrap,.stats,.stats-note{padding-left:0}
  .stats{flex-wrap:wrap;gap:24px}
  .stat{flex:1 1 40%}
  .stat + .stat{border-left:0;padding-left:0}
}
@media(min-width:768px) and (max-width:1023px){
  .statement-wrap,.stats,.stats-note{padding-left:12%}
}

/* ─── GALLERY (slides over the dark section) ─────────────── */
.gal{
  position:relative;z-index:25;
  background:var(--ink);min-height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.ticker{
  position:absolute;inset:0;display:flex;align-items:center;
  overflow:hidden;z-index:0;pointer-events:none;
}
.ticker-track{display:flex;animation:slide 44s linear infinite}
.ticker-track span{
  font-family:var(--display);font-weight:300;
  font-size:clamp(90px,14vw,220px);color:#fff;opacity:.055;
  white-space:nowrap;letter-spacing:-.02em;
  user-select:none;padding-right:.3em;
}
@keyframes slide{to{transform:translateX(-50%)}}
.gal-in{
  position:relative;z-index:1;width:100%;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(84px,10vh,130px) clamp(20px,4vw,60px) clamp(40px,6vh,80px);
  gap:clamp(16px,2.4vw,30px);
}
.gal-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;max-width:1200px;width:100%;margin:0 auto;
}
.gal-head h2{
  font-family:var(--display);font-weight:400;color:#fff;
  font-size:clamp(19px,2.4vw,34px);letter-spacing:-.02em;line-height:1.15;
}
.gal-head p{
  font-family:var(--body);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
.gal-row{
  display:flex;gap:6px;flex:1 1 auto;min-height:0;
  max-width:1200px;width:100%;margin:0 auto;
}
.tile{
  flex:1 1 0%;height:100%;border-radius:10px;overflow:hidden;
  cursor:pointer;position:relative;
  transition:flex .5s cubic-bezier(.4,0,.2,1);
}
.tile img{width:100%;height:100%;object-fit:cover}
.tile .cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
  color:#fff;font-family:var(--body);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;
  opacity:0;transition:opacity .35s ease;
}
.gal-row:hover .tile{flex:1 1 0%}
.gal-row .tile:hover{flex:3.4 1 0%}
.gal-row .tile:hover .cap{opacity:1}
@media(max-width:1023px){
  .gal{height:auto;min-height:100svh;overflow:visible}
  .gal-in{height:auto;padding:100px 16px 64px}
  .gal-row{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    height:auto;max-width:700px;
  }
  .tile{flex:none;height:auto;aspect-ratio:4/5;transition:transform .3s ease}
  .gal-row .tile:hover{flex:none;transform:scale(1.02)}
  .tile .cap{opacity:1}
  .tile:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 4px);justify-self:center}
}

/* ─── LIGHT SECTIONS ─────────────────────────────────────── */
.sec{position:relative;z-index:26;background:var(--paper);padding:clamp(64px,11vh,150px) var(--pad)}
.inner{max-width:1200px;margin:0 auto}
.eyebrow{
  font-family:var(--body);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(26px,4.2vw,58px);letter-spacing:-.03em;
  line-height:1.06;margin-top:.5em;
}
.h2 em{font-style:normal;font-weight:700}
.lede{
  font-size:clamp(15.5px,1.5vw,18px);line-height:1.75;
  color:rgba(26,26,26,.72);max-width:52ch;margin-top:1.2em;
}
.rule{height:1px;background:var(--rule);margin:clamp(34px,5vw,58px) 0}

/* featured listing */
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.feature .shot{border-radius:8px;overflow:hidden}
.spec-list{margin-top:1.8em;border-top:1px solid var(--rule)}
.spec-list div{
  display:flex;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--rule);
  font-size:14.5px;
}
.spec-list dt{color:rgba(26,26,26,.55);letter-spacing:.04em;
  text-transform:uppercase;font-size:11.5px;font-weight:600}
.spec-list dd{font-variant-numeric:tabular-nums;font-weight:500}
@media(max-width:860px){.feature{grid-template-columns:1fr}}

/* areas */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.area{
  position:relative;border-radius:8px;overflow:hidden;aspect-ratio:3/4;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.area:hover{transform:translateY(-4px)}
.area img{width:100%;height:100%;object-fit:cover;filter:brightness(.82)}
.area span{
  position:absolute;left:0;right:0;bottom:0;padding:18px 18px;
  background:linear-gradient(to top,rgba(18,34,44,.8),transparent);
  color:#fff;font-family:var(--display);font-weight:400;
  font-size:clamp(13px,1.3vw,17px);letter-spacing:-.01em;
}
@media(max-width:860px){.areas{grid-template-columns:repeat(2,1fr)}}

.status{
  display:inline-block;font-size:11.5px;font-weight:650;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--ink);
  padding:7px 13px;margin-bottom:1.3em;
}

/* track record */
.sales{border-top:1px solid var(--rule)}
.sales.nb{border-top:0}
.sale{
  display:grid;grid-template-columns:1fr auto;gap:12px 28px;align-items:baseline;
  padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--rule);
}
.sale h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(17px,2.1vw,27px);letter-spacing:-.02em;line-height:1.2;
}
.sale .where{
  font-size:13.5px;color:rgba(26,26,26,.55);margin-top:.45em;letter-spacing:.01em;
}
.sale .amt{
  font-family:var(--body);font-weight:300;
  font-size:clamp(19px,2.4vw,34px);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.sale .note{
  grid-column:1/-1;font-size:13px;color:var(--accent);
  letter-spacing:.05em;text-transform:uppercase;font-weight:600;
}
.creds{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:2px;margin-top:clamp(34px,5vw,56px);
}
.cred{
  background:rgba(26,26,26,.035);padding:clamp(18px,2.4vw,26px);
}
.cred b{
  display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(14px,1.5vw,18px);letter-spacing:-.01em;line-height:1.3;
}
.cred span{
  display:block;font-size:12.5px;color:rgba(26,26,26,.55);
  margin-top:.5em;line-height:1.55;
}
@media(max-width:700px){
  .sale{grid-template-columns:1fr}
  .sale .amt{font-size:22px}
}

/* areas — typographic; each cell carries its own sourced stat line where we have one */
.area-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.area-cell{
  background:var(--paper);padding:clamp(20px,2.6vw,30px);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  transition:background .25s ease;
}
.area-cell:hover{background:#fff}
.area-cell h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(15px,1.7vw,21px);letter-spacing:-.015em;
}
.area-cell p{
  font-size:13px;color:rgba(26,26,26,.55);margin-top:.6em;line-height:1.6;
}
.area-cell .stat{
  font-size:11.5px;font-weight:500;letter-spacing:.02em;
  color:var(--accent);margin-top:.7em;line-height:1.5;
}
.area-cell.lead{background:var(--ink);color:#fff}
.area-cell.lead:hover{background:var(--ink)}
.area-cell.lead h3{color:#fff}
.area-cell.lead p{color:rgba(255,255,255,.62)}
.area-cell.lead .fig{
  font-family:var(--body);font-weight:300;color:#fff;
  font-size:clamp(24px,3vw,40px);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-top:.4em;line-height:1.1;
}

/* about */
.about .shot{aspect-ratio:4/5;overflow:hidden}
.about .shot img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,70px);align-items:center}
@media(max-width:860px){
  .about{grid-template-columns:1fr}
  .about .shot{max-width:300px}
}

/* idx */
.idx{
  border:1px solid var(--rule);border-radius:10px;
  padding:clamp(28px,5vw,64px);text-align:center;
}
.idx-bar{display:flex;gap:8px;max-width:620px;margin:26px auto 0;flex-wrap:wrap}
.idx-bar span{
  flex:1 1 170px;min-height:52px;display:flex;align-items:center;
  padding:0 20px;border:1px solid var(--rule);border-radius:3px;
  color:rgba(26,26,26,.38);font-size:14.5px;background:#fff;
}
.idx-bar b{
  min-height:52px;display:flex;align-items:center;padding:0 30px;
  background:var(--accent);color:#fff;border-radius:3px;
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}

/* placeholder flag */
.flag{
  display:inline-block;font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  color:#8a5a00;background:rgba(255,184,28,.18);
  border:1px solid rgba(255,184,28,.45);
  padding:6px 11px;border-radius:3px;
}

/* contact */
.contact{background:var(--ink);color:#fff;text-align:center}
.contact .h2{color:#fff}
.contact .lede{color:rgba(255,255,255,.66);margin-inline:auto}
.contact .cta{
  display:inline-flex;align-items:center;margin-top:2.4em;
  padding:17px 40px;background:#fff;color:var(--ink);
  font-family:var(--body);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;border-radius:2px;
  transition:transform .2s ease,background .2s ease;
}
.contact .cta:hover{transform:translateY(-2px);background:var(--statement)}
.contact .lines{
  margin-top:2.6em;font-size:14.5px;line-height:2;color:rgba(255,255,255,.72);
}
.contact .lines a:hover{color:#fff}

/* footer */
footer{background:var(--ink);color:rgba(255,255,255,.5);
  padding:0 var(--pad) clamp(38px,6vh,64px);position:relative;z-index:26}
.f-in{max-width:1200px;margin:0 auto;border-top:1px solid var(--rule-dark);padding-top:32px}
.f-cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
.f-cols h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-bottom:12px}
.f-cols a,.f-cols span{display:block;font-size:13.5px;line-height:2;color:rgba(255,255,255,.62)}
.f-cols a:hover{color:#fff}
.legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule-dark);
  font-size:11.5px;line-height:1.85;color:rgba(255,255,255,.34);max-width:900px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  #pre{display:none}
  .hero-text{opacity:1;transform:none}
  .estate{--w:100%;--r:0px}
}

/* ═══════════════════════════════════════════════════════════
   LISTINGS INDEX  (listings.html)
   ═══════════════════════════════════════════════════════════ */
.lst-head{padding:clamp(108px,17vw,158px) var(--pad) var(--pad)}
.lst-count{
  font-family:var(--body);font-size:13px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  color:rgba(26,26,26,.5);margin-top:1.1em;
  font-variant-numeric:tabular-nums;
}
.lst-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:clamp(20px,2.6vw,38px);
  padding:0 var(--pad) calc(var(--pad) * 2);
  max-width:1560px;margin:0 auto;
}
.card{display:block;color:inherit;text-decoration:none}
.card-img{
  position:relative;overflow:hidden;border-radius:3px;
  aspect-ratio:3/2;background:rgba(26,26,26,.06);
}
.card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.card:hover .card-img img{transform:scale(1.04)}
.card-tag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:rgba(245,240,234,.94);color:var(--ink);
  font-family:var(--body);font-size:10.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  padding:7px 11px;border-radius:2px;
}
.card-price{
  font-family:var(--body);font-weight:300;
  font-size:clamp(21px,2vw,27px);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-top:.85em;
}
.card-addr{
  font-family:var(--display);font-weight:400;
  font-size:clamp(15px,1.35vw,18px);letter-spacing:-.015em;
  line-height:1.3;margin-top:.3em;
}
.card-city{
  font-size:13px;color:rgba(26,26,26,.55);margin-top:.35em;letter-spacing:.01em;
}
.card-specs{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-top:.85em;padding-top:.85em;border-top:1px solid var(--rule);
  font-size:12.5px;color:rgba(26,26,26,.62);
  font-variant-numeric:tabular-nums;
}
.card-specs span{white-space:nowrap}
.lst-note{
  max-width:1560px;margin:0 auto;padding:0 var(--pad) calc(var(--pad) * 2);
  font-size:12.5px;color:rgba(26,26,26,.5);line-height:1.7;
}
@media(max-width:520px){
  .lst-grid{grid-template-columns:1fr;gap:26px}
}

/* ═══════════════════════════════════════════════════════════
   LISTING DETAIL  (listings/*.html)
   ═══════════════════════════════════════════════════════════ */
.pd-hero{position:relative;height:min(78vh,760px);overflow:hidden;background:var(--ink)}
.pd-hero img{width:100%;height:100%;object-fit:cover}
.pd-hero::after{
  content:'';position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(to top,rgba(12,14,16,.82),rgba(12,14,16,.25) 55%,transparent);
}
.pd-hero-text{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:var(--pad);color:#fff;
}
.pd-price{
  font-family:var(--body);font-weight:200;
  font-size:clamp(30px,4.4vw,62px);letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.pd-addr{
  font-family:var(--display);font-weight:300;
  font-size:clamp(19px,2.4vw,34px);letter-spacing:-.025em;
  line-height:1.15;margin-top:.35em;
}
.pd-city{font-size:clamp(13px,1.2vw,16px);color:rgba(255,255,255,.72);margin-top:.5em}
.pd-body{
  display:grid;grid-template-columns:1.5fr 1fr;
  gap:clamp(30px,5vw,80px);
  padding:calc(var(--pad) * 1.4) var(--pad);
  max-width:1560px;margin:0 auto;align-items:start;
}
.pd-spec{border-top:1px solid var(--rule)}
.pd-spec div{
  display:flex;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--rule);
}
.pd-spec dt{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(26,26,26,.5);font-weight:500;
}
.pd-spec dd{font-size:15px;font-variant-numeric:tabular-nums;text-align:right}
.pd-gal{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:6px;padding:0 var(--pad) calc(var(--pad) * 1.6);
  max-width:1560px;margin:0 auto;
}
.pd-gal figure{margin:0;overflow:hidden;background:rgba(26,26,26,.06)}
.pd-gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;display:block}
.pd-gal figure:first-child{grid-column:1/-1}
.pd-gal figure:first-child img{aspect-ratio:16/9}
.pd-back{
  display:inline-block;margin-top:1.6em;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:500;
}
.pd-back:hover{color:var(--accent-lift)}
@media(max-width:860px){
  .pd-body{grid-template-columns:1fr}
  .pd-hero{height:min(62vh,560px)}
}

/* ═══════════════════════════════════════════════════════════
   BRAND MARK
   Two files, because the nav sits on dark video at the top of
   the page and on warm paper everywhere else:
     assets/logo-light.*  — white version, shown over dark
     assets/logo-dark.*   — full-color version, shown over paper
   Until both exist the JS below falls back to the text wordmark,
   so a missing file degrades instead of breaking.
   ═══════════════════════════════════════════════════════════ */
.mark-img{position:relative;display:none;align-items:center;line-height:0}
.mark-img.on{display:flex}
.mark-img img{background:none;position:static;
  /* The lockup is 463x274 (1.69:1) with a three-line stack: mark, JUSTIN LOTT,
     Home Selling Team. Below ~52px the tagline stops being legible, so this
     floors higher than a wordmark-only logo would need. Sized up ~20% on
     request; the nav grows with it, so scroll-margin-top below grew too or
     anchored headings would land underneath the bar. */
  height:clamp(54px,5.2vw,76px);width:auto;display:block;
  transition:opacity .35s ease;
}
@media(max-width:520px){ .mark-img img{background:none;position:static;height:50px} }
.mark-img img.m-white{position:absolute;top:0;left:0;opacity:0}
.nav.on-dark .mark-img img.m-color{opacity:0}
.nav.on-dark .mark-img img.m-white{opacity:1}
.mark.hidden{display:none}

/* ═══════════════════════════════════════════════════════════
   IDX SEARCH PAGE  (search.html)
   FBS confirmed the SmartFrame is a plain <iframe>, fluid in
   width but with NO postMessage height reporting. So the frame
   gets a fixed height and scrolls internally. Giving it its own
   page and sizing it to the viewport avoids the double-scrollbar
   problem you get embedding it inside a longer page.
   ═══════════════════════════════════════════════════════════ */
.idx-page{padding:0}
.idx-intro{
  padding:clamp(108px,17vw,158px) var(--pad) calc(var(--pad) * .7);
  max-width:1560px;margin:0 auto;
}
.idx-frame-wrap{
  width:100%;background:#fff;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.idx-frame{
  display:block;width:100%;border:0;
  /* viewport minus nav and intro; the frame scrolls its own content */
  height:calc(100vh - 272px);min-height:560px;
}
.idx-placeholder{
  display:flex;align-items:center;justify-content:center;
  height:calc(100vh - 272px);min-height:560px;
  background:
    repeating-linear-gradient(45deg,rgba(26,26,26,.035) 0 14px,rgba(26,26,26,.055) 14px 28px);
  text-align:center;padding:var(--pad);
}
.idx-placeholder div{max-width:52ch}
.idx-placeholder p{font-size:14px;line-height:1.75;color:rgba(26,26,26,.62);margin-top:1em}
.idx-placeholder code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:rgba(26,26,26,.07);padding:2px 5px;border-radius:3px;
}
@media(max-width:700px){
  .idx-frame,.idx-placeholder{height:calc(100vh - 230px);min-height:520px}
}

.btn-line{
  display:inline-block;font-family:var(--body);font-size:13px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;
  background:var(--accent);padding:16px 30px;border-radius:2px;
  transition:background .2s ease,transform .2s ease;
}
.btn-line:hover{background:var(--accent-lift);transform:translateY(-1px)}

/* ═══════════════════════════════════════════════════════════
   SOLD PORTFOLIO  (sold.html)
   No photography exists for these transactions apart from
   149 Twelve Oaks, so this is set as a typographic ledger
   rather than a photo grid. Avoids nine grey placeholder
   boxes pretending to be a gallery.
   ═══════════════════════════════════════════════════════════ */
.sold-hero{position:relative;height:min(66vh,620px);overflow:hidden;background:var(--ink)}
.sold-hero img{width:100%;height:100%;object-fit:cover}
.sold-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,14,16,.86),rgba(12,14,16,.30) 62%,rgba(12,14,16,.18));
}
.sold-hero-text{position:absolute;inset:auto 0 0 0;z-index:2;padding:var(--pad);color:#fff}
.sold-hero-text .eyebrow{color:rgba(255,255,255,.72)}
.sold-hero-text h1{
  font-family:var(--display);font-weight:200;font-optical-sizing:auto;
  font-size:clamp(30px,5.2vw,72px);letter-spacing:-.02em;line-height:1;margin-top:.3em;
}
.sold-lede{
  max-width:60ch;padding:calc(var(--pad) * 1.6) var(--pad) 0;margin:0 auto;
  max-width:1560px;
}
.sold-lede p{
  font-size:clamp(16px,1.5vw,19px);line-height:1.75;color:rgba(26,26,26,.72);max-width:62ch;
}
.ledger{max-width:1560px;margin:0 auto;padding:calc(var(--pad) * 1.1) var(--pad) calc(var(--pad) * 2)}
.ledger-band{
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  padding-bottom:14px;margin-top:clamp(38px,4.5vw,64px);border-bottom:1px solid var(--ink);
}
.ledger-band span{float:right;color:rgba(26,26,26,.42);letter-spacing:.1em}
.sale-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:6px 34px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule);
}
.sale-row .addr{
  font-family:var(--display);font-weight:400;font-size:clamp(17px,2vw,25px);
  letter-spacing:-.018em;line-height:1.2;
}
.sale-row .where{
  font-size:13px;color:rgba(26,26,26,.55);margin-top:.4em;letter-spacing:.01em;
}
.sale-row .amt{
  font-family:var(--body);font-weight:200;font-size:clamp(20px,2.5vw,34px);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;
}
.sale-row .when{
  font-size:12px;color:rgba(26,26,26,.45);margin-top:.45em;text-align:right;
  font-variant-numeric:tabular-nums;
}
.sale-row.note-row{border-bottom:1px solid var(--rule)}
.sale-row .note{
  grid-column:1/-1;font-size:12.5px;color:var(--accent);
  letter-spacing:.05em;text-transform:uppercase;font-weight:500;margin-top:8px;
}
.ledger-foot{
  margin-top:clamp(34px,4vw,56px);padding-top:22px;border-top:1px solid var(--rule);
  font-size:12.5px;color:rgba(26,26,26,.5);line-height:1.75;max-width:80ch;
}
@media(max-width:640px){
  .sale-row{grid-template-columns:1fr;gap:2px}
  .sale-row .amt,.sale-row .when{text-align:left}
  .sale-row .amt{margin-top:8px}
  .ledger-band span{float:none;display:block;margin-top:6px}
}

/* ── Ledger rows that have photography ─────────────────────────────────
   A closing with images becomes a link to its own page and carries a
   thumbnail. Rows without images stay exactly as they were — plain
   <article> text rows — so the ledger degrades honestly rather than
   showing an empty frame where a photo would be. */
a.sale-row{
  text-decoration:none;color:inherit;
  grid-template-columns:auto minmax(0,1fr) auto;
  transition:background .35s ease;
}
a.sale-row .thumb{
  width:clamp(84px,9vw,132px);aspect-ratio:3/2;overflow:hidden;
  background:var(--statement);align-self:center;
}
a.sale-row .thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
a.sale-row .addr{transition:color .3s ease}
a.sale-row:hover{background:rgba(0,101,158,.04)}
a.sale-row:hover .thumb img{transform:scale(1.06)}
a.sale-row:hover .addr{color:var(--accent)}
a.sale-row .note{grid-column:2/-1}
@media(max-width:640px){
  a.sale-row{grid-template-columns:auto minmax(0,1fr);gap:4px 16px}
  a.sale-row > div{grid-column:2}
  a.sale-row .amt,a.sale-row .when{text-align:left}
  a.sale-row .amt{margin-top:8px}
  a.sale-row .thumb{grid-row:1/3;align-self:start}
}

/* ── Meet Justin ────────────────────────────────────────────────────────
   The full About section sits near the foot of the page, which meant
   Justin's face did not appear until you had scrolled past six sections.
   This band puts it two screens from the top instead, and breaks up what
   was otherwise a run of four dark blocks (hero, estate stage, statement,
   gallery) with a paper ground. Deliberately not placed above the estate
   reveal: that hero-to-reveal sequence is the choreography the design was
   chosen for. */
.meet-sec{padding-top:clamp(52px,8vh,104px);padding-bottom:clamp(52px,8vh,104px)}
.meet{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(26px,4.5vw,64px);align-items:center;
}
.meet-shot{
  width:clamp(150px,19vw,248px);aspect-ratio:4/5;overflow:hidden;
  border-radius:6px;background:var(--statement);
}
.meet-shot img{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;
}
.meet-name{
  font-family:var(--display);font-weight:200;
  font-size:clamp(30px,4.4vw,60px);line-height:1.02;letter-spacing:-.022em;
  margin:.32em 0 0;
}
.meet-name em{font-style:italic}
.meet-cred{
  font-family:var(--body);font-size:11.5px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(26,26,26,.5);margin:1em 0 1.2em;
}
.meet-body .lede{max-width:58ch}
.meet-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.7em}
.meet-links a{
  font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
  padding:14px 24px;background:var(--accent);color:#fff;
  transition:background .3s ease,border-color .3s ease;
}
.meet-links a:hover{background:var(--accent-lift)}
.meet-links a.meet-ghost{background:none;color:var(--ink);border:1px solid var(--rule)}
.meet-links a.meet-ghost:hover{background:rgba(26,26,26,.05);border-color:var(--ink)}
@media(max-width:700px){
  .meet{grid-template-columns:1fr;gap:24px}
  .meet-shot{width:100%;max-width:230px}
  .meet-links a{flex:1 1 100%;text-align:center}
}

/* ── Social links ───────────────────────────────────────────────────────
   Inline SVG rather than an icon font or a sprite: three glyphs is not
   worth a network request, and the site is otherwise self-contained.
   currentColor so they inherit the footer's link colour and its hover. */
.f-social{display:flex;gap:14px;margin-top:2px}
.f-social a{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--rule-dark);border-radius:100px;
  color:rgba(255,255,255,.62);
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.f-social a:hover,.f-social a:focus-visible{
  color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);
}
.f-social svg{width:17px;height:17px;fill:currentColor;display:block}
/* An unset link should look unset rather than silently going nowhere. */
.f-social a[href="#"]{opacity:.4;cursor:not-allowed}
.f-social a[href="#"]:hover{background:none;border-color:var(--rule-dark);color:rgba(255,255,255,.62)}
#menu .m-social{
  display:flex;gap:16px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--rule);
}
#menu .m-social a{
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--rule);border-radius:100px;font-size:0;
}
#menu .m-social svg{width:19px;height:19px;fill:currentColor}

/* ── Client reviews ─────────────────────────────────────────────────────
   Replaces the scroll-driven estate reveal that used to sit here. Social
   proof directly under the hero, before the argument the dark section
   makes, because a stranger deciding whether to call wants the verdict of
   people who already did.

   Deliberately not four equal cards: one quote carries hard numbers and
   earns display size, the rest support it at reading size under a rule.
   Rating uses the typographic numeral rather than a row of gold stars —
   the small accent stars are recognition, not decoration. */
.rev-sec{padding-top:clamp(60px,9vh,120px);padding-bottom:clamp(60px,9vh,120px)}
.rev-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;flex-wrap:wrap;margin-bottom:clamp(34px,5vh,60px);
}
.rev-score{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px)}
.rev-meta{display:flex;flex-direction:column;gap:9px}
.rev-num{
  font-family:var(--display);font-weight:200;
  font-size:clamp(52px,7vw,104px);line-height:.86;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.rev-of{
  font-family:var(--body);font-weight:300;font-size:clamp(13px,1.2vw,16px);
  color:rgba(26,26,26,.5);
}
.rev-stars{display:flex;gap:3px}
.rev-stars svg{width:14px;height:14px;fill:var(--accent);display:block}
.rev-stars svg.half{opacity:.42}
.rev-src{
  font-family:var(--body);font-size:12px;letter-spacing:.02em;
  color:rgba(26,26,26,.55);text-align:right;max-width:42ch;line-height:1.7;
}
.rev-src a{color:var(--accent)}

.rev-lead{border-top:1px solid var(--ink);padding-top:clamp(26px,4vh,46px)}
.rev-lead blockquote{
  font-family:var(--display);font-weight:200;
  font-size:clamp(21px,2.9vw,40px);line-height:1.34;letter-spacing:-.015em;
  max-width:34ch;margin:0;
}
.rev-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.4vw,52px);
  margin-top:clamp(38px,5.5vh,72px);
  padding-top:clamp(26px,3.4vh,42px);border-top:1px solid var(--rule);
}
.rev-grid blockquote{
  font-size:clamp(14px,1.35vw,16.5px);line-height:1.72;
  color:rgba(26,26,26,.76);margin:0;
}
.rev-by{
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-top:1.5em;
}
.rev-by span{
  display:block;font-weight:300;letter-spacing:.06em;text-transform:none;
  color:rgba(26,26,26,.45);margin-top:.5em;font-size:11.5px;
}
.rev-foot{
  margin-top:clamp(32px,4.5vh,56px);padding-top:20px;border-top:1px solid var(--rule);
  font-size:12px;color:rgba(26,26,26,.46);line-height:1.8;max-width:88ch;
}
.rev-foot a{color:var(--accent)}
@media(max-width:900px){
  .rev-grid{grid-template-columns:1fr;gap:0}
  .rev-grid blockquote{padding-top:26px}
  .rev-grid > div + div{border-top:1px solid var(--rule);margin-top:26px}
}
@media(max-width:620px){
  .rev-head{align-items:flex-start}
  .rev-src{text-align:left}
}

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX
   Built on the grammar the auction houses use for property
   galleries, checked against Sotheby's own full-screen viewer
   rather than guessed at: a deep navy ground instead of black,
   the photograph floated with no shadow and no border so it
   reads as a print rather than a widget, and no circular
   buttons anywhere — navigation is a long hairline rule with a
   small arrowhead, the count set between them. Chrome dims when
   the mouse goes still.
   ═══════════════════════════════════════════════════════════ */
.pd-hero img,.pd-gal img{cursor:zoom-in}
.pd-gal figure{transition:opacity .45s cubic-bezier(.16,1,.3,1)}
.pd-gal figure:hover{opacity:.88}

.lb{
  position:fixed;inset:0;z-index:200;
  background:rgba(10,20,27,.975);
  -webkit-backdrop-filter:blur(18px) saturate(.85);
  backdrop-filter:blur(18px) saturate(.85);
  opacity:0;visibility:hidden;
  transition:opacity .42s cubic-bezier(.16,1,.3,1),visibility .42s;
  -webkit-user-select:none;user-select:none;
}
.lb.on{opacity:1;visibility:visible}

.lb-stage{
  position:absolute;left:0;right:0;top:0;bottom:clamp(84px,12vh,124px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,4.5vh,54px) clamp(16px,6vw,96px) 0;
}
.lb-img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  opacity:0;transform:scale(.965);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1);
}
.lb-img.ready{opacity:1;transform:none}

/* click the left or right third of the frame to move through the set */
.lb-zone{position:absolute;top:0;bottom:clamp(84px,12vh,124px);width:32%;z-index:3;background:none;border:0;padding:0}
.lb-zone.prev{left:0;cursor:w-resize}
.lb-zone.next{right:0;cursor:e-resize}
.lb-zone[disabled]{cursor:default}

/* ── the rail ───────────────────────────────────────────── */
.lb-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:0 clamp(18px,5vw,64px) clamp(22px,3.4vh,38px);
  display:flex;flex-direction:column;align-items:center;gap:.85em;
  transition:opacity .5s ease;
}
.lb.idle .lb-foot,.lb.idle .lb-close{opacity:.22}
.lb-cap{
  font-family:var(--display);font-weight:300;
  font-size:clamp(14px,1.55vw,18px);line-height:1.4;
  color:rgba(255,255,255,.9);text-align:center;margin:0;
}
.lb-rail{display:flex;align-items:center;gap:clamp(14px,2vw,26px);width:100%;max-width:640px}
.lb-arrow{
  background:none;border:0;padding:0;cursor:pointer;flex:1;
  display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.62);
  transition:color .25s ease,opacity .25s ease;
}
.lb-arrow:hover{color:#fff}
.lb-arrow[disabled]{opacity:.2;cursor:default}
.lb-arrow .ln{flex:1;height:1px;background:currentColor;display:block}
.lb-arrow svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lb-arrow.next{flex-direction:row}
.lb-num{
  font-family:var(--display);font-size:clamp(12.5px,1.15vw,15px);
  font-weight:300;letter-spacing:.14em;color:rgba(255,255,255,.72);
  white-space:nowrap;flex:none;font-variant-numeric:tabular-nums;
}
.lb-close{
  position:absolute;top:clamp(16px,2.4vh,30px);right:clamp(18px,3vw,42px);z-index:5;
  background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--body);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);transition:color .25s ease,opacity .5s ease;
}
.lb-close:hover{color:#fff}
/* position in the set, as a hairline along the very bottom */
.lb-prog{position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:rgba(255,255,255,.12);z-index:5}
.lb-prog i{display:block;height:100%;width:0;background:var(--accent-lift);
  transition:width .5s cubic-bezier(.16,1,.3,1)}
body.lb-open{overflow:hidden}

@media(max-width:640px){
  .lb-stage,.lb-zone{bottom:104px}
  .lb-rail{max-width:none}
  .lb-zone{width:26%}
}
@media(prefers-reduced-motion:reduce){
  .lb,.lb-img,.lb-prog i,.lb-foot{transition:none}
  .lb-img{transform:none}
}