/* ============================================================
   KIANI REALTY — design system
   Tokens · type · chrome · sections · components · motion
   ============================================================ */

/* Tenor Sans (display, single weight, no italic — accents are colour, not slant) + Albert Sans (body) */
@font-face{font-family:'Albert Sans';src:url(../assets/fonts/AlbertSans-400i.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Albert Sans';src:url(../assets/fonts/AlbertSans-400.woff2) format('woff2-variations'),url(../assets/fonts/AlbertSans-400.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Tenor Sans';src:url(../assets/fonts/TenorSans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --onyx:#0F0C0A; --espresso:#1C1512; --bark:#2A211B; --bark-2:#352A22;
  --ivory:#F5EFE6; --sand:#E9DCC7; --linen:#FBF8F2; --dune:#D9CBB3;
  --gold:#D4AA7B; --gold-deep:#B8894F; --bronze:#7A5626; --gold-soft:#E7CFA6; --copper:#C86A2E;
  --ink:#171310; --slate:#4A433D; --mist:#6F665E;
  --display:'Tenor Sans',system-ui,sans-serif;
  --body:'Albert Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(20px,4.5vw,64px);
  --head-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;letter-spacing:0;line-height:1.02}
h1 em,h2 em,h3 em,.em{font-style:normal;color:var(--gold)}
p{margin:0}
.wrap{width:min(1440px,100%);margin:0 auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--gold);color:var(--onyx)}

/* ---------- type scale ---------- */
.t-hero{font-size:clamp(42px,6.4vw,98px);line-height:1}
.t-1{font-size:clamp(38px,5vw,76px);line-height:1.02}
.t-2{font-size:clamp(32px,3.8vw,58px);line-height:1.02}
.t-3{font-size:clamp(24px,2.4vw,34px);line-height:1.1}
.eyebrow{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze)}
[data-tone="dark"] .eyebrow{color:var(--gold)}
.lede{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--slate);max-width:56ch}
[data-tone="dark"] .lede{color:var(--sand)}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 28px;border:1px solid var(--gold);color:var(--onyx);background:var(--gold);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;line-height:1;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{background:var(--gold-soft);border-color:var(--gold-soft);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor;opacity:.9}
.btn.ghost:hover{background:rgba(212,170,123,.12);opacity:1;border-color:var(--gold)}
.btn.dark{background:var(--onyx);border-color:var(--onyx);color:var(--ivory)}
.btn.dark:hover{background:var(--espresso);border-color:var(--espresso)}
.btn .ar{width:14px;height:14px;transition:transform .35s var(--ease)}
.btn .bub{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--onyx);color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums;margin-left:-4px}
.btn.dark .bub{background:var(--gold);color:var(--onyx)}
.btn:hover .ar{transform:translateX(4px)}
.link{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:6px;transition:color .3s,border-color .3s}
.link:hover{color:var(--gold-deep)}
[data-tone="dark"] .link:hover{color:var(--gold)}

/* ---------- header ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--head-h);display:flex;align-items:center;color:var(--ivory);transition:color .4s var(--ease),background .4s var(--ease),height .4s var(--ease)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.site-head.on-light{color:var(--ink)}
.site-head.is-scrolled{height:68px;background:rgba(15,12,10,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.site-head.is-scrolled.on-light{background:rgba(245,239,230,.82)}
.brand{display:flex;align-items:center;gap:14px;font-weight:500;font-size:14px;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap}
.brand svg{width:34px;height:34px;flex:none}
.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a{font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;position:relative;padding:6px 0;opacity:.88}
.site-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .35s var(--ease)}
.site-nav a:hover:after,.site-nav a[aria-current]:after{right:0}
.site-nav a[aria-current]{opacity:1}
.head-cta{display:flex;align-items:center;gap:18px}
.head-cta .phone{font-weight:500;font-size:13px;letter-spacing:.12em;opacity:.9}
.head-cta .btn{padding:13px 20px}
.menu-btn{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;align-items:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:none;border:0;color:inherit;cursor:pointer}
.menu-btn span{width:24px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),opacity .3s;pointer-events:none}
@media (max-width:640px){.head-cta .btn{display:none}.head-cta .phone{display:inline!important;font-size:12px}.brand{font-size:12px;letter-spacing:.28em;gap:10px}.brand svg{width:28px;height:28px}}
@media (max-width:1080px){
  .site-nav,.head-cta .phone{display:none}
  .menu-btn{display:flex}
  /* He reported: the menu opens at the top of the page and stops opening once you scroll.
     Two things switch on at exactly that moment and BOTH are iOS tap-targeting hazards on a
     position:fixed element — a `backdrop-filter` compositing layer, and an animated height.
     Neither is worth a menu that will not open, so on phones the header keeps one height and
     uses an opaque background instead of a blur. Desktop keeps both. */
  .site-head{transition:color .4s var(--ease),background .4s var(--ease)}
  .site-head.is-scrolled{height:var(--head-h);backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(15,12,10,.94)}
  .site-head.is-scrolled.on-light{background:rgba(245,239,230,.96)}
  /* `justify-content:center` clips BOTH ends once the links are taller than the screen, and
     nothing scrolled, so in landscape 5 of the 8 links were unreachable and at 320px Contact
     was cut off. `safe center` still centres when it fits but falls back to start when it does
     not, and overflow-y lets the menu itself scroll. overscroll-behavior:contain stops that
     scroll chaining to the page behind, which is what actually holds on iOS — `overflow:hidden`
     on body does not. */
  body.nav-open .site-nav{display:flex;position:fixed;inset:0;background:var(--onyx);color:var(--ivory);flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:calc(var(--head-h) + 20px) var(--gutter) 36px;gap:4px;z-index:55;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* the nav is a CHILD of the header, so a fixed z-index:55 overlay paints above
     its siblings and swallowed the close button. Lift the brand and the toggle. */
  .site-head .brand,.site-head .head-cta{position:relative;z-index:56}
  body.nav-open .site-nav a{font-family:var(--display);font-size:clamp(34px,8vw,56px);letter-spacing:-.01em;text-transform:none;font-weight:400;padding:4px 0}
  body.nav-open .site-head{color:var(--ivory);background:transparent}
  body.nav-open .menu-btn span:first-child{transform:translateY(7.5px) rotate(45deg)}
  body.nav-open .menu-btn span:nth-child(2){opacity:0}
  body.nav-open .menu-btn span:last-child{transform:translateY(-7.5px) rotate(-45deg)}
  body.nav-open .site-nav a:first-of-type{margin-top:auto}
  body.nav-open .site-nav a:last-of-type{margin-bottom:auto}
  body.nav-open{overflow:hidden}
}
/* Short viewports: eight links at 34px do not fit under 760px tall. Measured at 360x640 the
   menu wanted 720px in a 640px box. Scaling the type by viewport HEIGHT is what makes it fit
   at 640, 568 and landscape alike; 852-tall phones keep the full-size type. */
@media (max-width:900px) and (max-height:700px){
  body.nav-open .site-nav{padding:calc(var(--head-h) + 10px) var(--gutter) 18px;gap:0}
  body.nav-open .site-nav a{font-size:clamp(18px,4.4vh,30px);padding:3px 0}
}
/* Landscape is wide and short: a single column forces 34px links, under the 44px minimum tap
   target. Two columns of four gives each link real height without scrolling. */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  body.nav-open .site-nav{display:grid;grid-template-columns:1fr 1fr;align-content:center;
    justify-items:start;column-gap:var(--gutter);row-gap:2px}
  body.nav-open .site-nav a{font-size:clamp(21px,6vh,30px);padding:9px 0}
}

/* ---------- section tones ---------- */
section{position:relative}
[data-tone="dark"]{background:var(--onyx);color:var(--ivory)}
[data-tone="espresso"]{background:var(--espresso);color:var(--ivory)}
[data-tone="light"]{background:var(--ivory);color:var(--ink)}
[data-tone="sand"]{background:var(--sand);color:var(--ink)}
.sec{padding-block:clamp(72px,8vw,128px)}
.sec-head{display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.sec-head .eyebrow{margin-bottom:22px}
.sec-head .lede{margin-top:22px}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}}
.rule{height:1px;background:linear-gradient(90deg,var(--gold),rgba(212,170,123,0));opacity:.7}

/* ---------- HERO — through the keyhole ---------- */
.hero{height:240vh;color:var(--ivory);background:var(--onyx)}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--kh:66;--khx:68;--khy:50;--khh:min(calc(var(--kh) * 1vh),calc(var(--kh) * .6vw))}
.hero-media{position:absolute;inset:0;
  -webkit-mask:url(../assets/brand/house-mask.svg) calc(var(--khx) * 1%) calc(var(--khy) * 1%) / auto var(--khh) no-repeat;
  mask:url(../assets/brand/house-mask.svg) calc(var(--khx) * 1%) calc(var(--khy) * 1%) / auto var(--khh) no-repeat}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform:scale(1.02)}
.hero-media:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 45%,rgba(15,12,10,.55) 100%);opacity:var(--vig,0)}
.hero-hole{position:absolute;height:var(--khh);width:calc(var(--khh) * 560 / 660);pointer-events:none}
.hero-hole svg{width:100%;height:100%;display:block}
.hero-text{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) clamp(56px,7vh,84px);display:grid;grid-template-columns:1fr;gap:22px;align-items:end;pointer-events:none;max-width:min(46vw,680px)}
.hero-text>*{pointer-events:auto}
.hero-text .eyebrow{margin-bottom:22px}
.hero-text h1{max-width:min(12ch,46vw);text-wrap:balance}
.hero-side{justify-self:start;max-width:440px;text-align:left}
.hero-side p{font-size:16px;line-height:1.55;color:var(--sand);margin-bottom:22px;max-width:44ch}
.hero-side .btn+.btn{margin-left:8px}
.hero-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);opacity:.8;display:flex;align-items:center;gap:10px}
.hero-scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero-after{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(56px,7vh,84px);opacity:0;transform:translateY(20px);display:flex;justify-content:space-between;align-items:end;gap:24px}
.hero-after .eyebrow{color:var(--gold)}
.hero-after h2{margin-top:14px;max-width:16ch}
@media (max-width:900px){
  .hero{height:200vh}
  .hero-stage{--kh:44;--khx:50;--khy:26;--khh:calc(var(--kh) * 1vh)}
  .hero-text{max-width:none}
  .hero-text{grid-template-columns:1fr;gap:20px;padding-bottom:64px}
  .hero-side{justify-self:start;max-width:none}
  .hero-side p{display:none}
  .hero-text h1{max-width:none}
  .hero-after{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-after h2{font-size:clamp(26px,7vw,40px)}
  .hero-media video,.hero-media img{object-position:60% 55%}
}
html.no-motion .hero{height:100vh}
html.no-motion .hero-stage{--kh:66;--khx:66;--khy:50}

/* ---------- search band ---------- */
.search-band{background:var(--linen);border-bottom:1px solid var(--dune)}
.search-band .wrap{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding-block:22px}
.search-band .lab{font-family:var(--display);font-size:24px;white-space:nowrap}
.search-band form{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:12px;align-items:center}
.field{position:relative}
.field input,.field select{width:100%;background-color:transparent;border:0;border-bottom:1px solid var(--dune);padding:14px 0 12px;font:inherit;font-size:15px;color:var(--ink);outline:0;border-radius:0;-webkit-appearance:none;appearance:none}
/* Dropdowns used to be indistinguishable from text fields — the .form-grid rule above
   was setting `background` and wiping the chevron image. A select now carries a warm tint,
   a larger bronze chevron in its own gutter, and a caret on its label. */
.field select{-webkit-appearance:none;appearance:none;cursor:pointer;padding:14px 42px 12px 12px;
  background-color:rgba(212,170,123,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%237A5626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  border-bottom-color:var(--gold-deep);transition:background-color .25s}
.field select:hover{background-color:rgba(212,170,123,.2)}
.field select:focus{background-color:rgba(212,170,123,.22);border-bottom-color:var(--bronze)}
.field:has(select) > label::after{content:"\2009\25BE";color:var(--bronze);font-size:11px}
[data-tone="dark"] .field select,[data-tone="espresso"] .field select{
  background-color:rgba(212,170,123,.16);border-bottom-color:rgba(212,170,123,.5);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%23E7CFA6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-tone="dark"] .field select:hover,[data-tone="espresso"] .field select:hover{background-color:rgba(212,170,123,.26)}
[data-tone="dark"] .field:has(select) > label::after,[data-tone="espresso"] .field:has(select) > label::after{color:var(--gold)}
.field select option{background:var(--linen);color:var(--ink)}
/* the compact filter bar and hero search keep a tighter gutter */
.search-band .field select,.filters .field select{padding:14px 34px 12px 10px;background-position:right 10px center}
.field input:focus,.field select:focus{border-color:var(--gold-deep)}
.field label{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);font-weight:500}
@media (max-width:1000px){.search-band .wrap{grid-template-columns:1fr}.search-band form{grid-template-columns:1fr 1fr}.search-band .btn{grid-column:1/-1;justify-content:center}}

/* ---------- statement / founder ---------- */
.statement .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
.statement h2{margin:22px 0 28px;text-wrap:balance}
.statement .lede{margin-bottom:34px}
.founder{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--onyx)}
.founder img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.06);transition:transform 1.4s var(--ease-out)}
.founder:hover img{transform:scale(1)}
.founder figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;background:linear-gradient(transparent,rgba(15,12,10,.9));color:var(--sand);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.founder figcaption b{display:block;font-family:var(--display);font-size:26px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ivory);margin-bottom:6px}
.stats{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(24px,4vw,56px);margin-top:48px;padding-top:34px;border-top:1px solid var(--dune)}
.stats b{display:block;font-family:var(--display);font-size:clamp(38px,4vw,56px);line-height:1;font-weight:400}
.stats span{display:block;margin-top:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);font-weight:500}
@media (max-width:900px){.statement .grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,auto)}}

/* ---------- listing cards ---------- */
.card{position:relative;background:var(--linen);color:var(--ink);box-shadow:0 24px 48px rgba(28,21,18,.08);overflow:hidden;display:flex;flex-direction:column;transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.card:hover{transform:translateY(-6px);box-shadow:0 34px 60px rgba(28,21,18,.16)}
.card .pic{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sand)}
.card .pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease-out)}
.card:hover .pic img{transform:scale(1.08)}
.chip{position:absolute;left:16px;top:16px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;padding:8px 11px;background:var(--copper);color:#fff}
.chip.lease{background:var(--onyx);color:var(--gold)}
.chip.pending{background:var(--sand);color:var(--ink)}
.card .body{padding:20px 22px 22px}
.card .price{font-size:24px;font-weight:600;letter-spacing:-.01em}
.card .price small{font-size:13px;font-weight:500;color:var(--slate);margin-left:4px;letter-spacing:0}
.card .addr{font-family:var(--display);font-size:22px;margin-top:8px;line-height:1.1}
.card .city{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-top:6px;font-weight:500}
.card .specs{display:flex;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--sand);font-size:13px;color:var(--slate)}
.card .specs b{color:var(--ink);font-weight:600}
.card>a.cover{position:absolute;inset:0;z-index:2}

/* ---------- featured rail ---------- */
.rail{position:relative}
.rail.sec{padding-top:clamp(40px,4.5vw,64px)}
.rail .sec-head{margin-bottom:clamp(24px,3vw,40px)}
.rail-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 40px;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.rail-track::-webkit-scrollbar{display:none}
.rail-track.is-drag{cursor:grabbing;scroll-snap-type:none}
.rail-track .card{flex:0 0 clamp(300px,28vw,400px);scroll-snap-align:start}
.rail-nav{display:flex;gap:10px}
.rail-nav button{width:52px;height:52px;border:1px solid var(--dune);display:grid;place-items:center;transition:background .3s,border-color .3s}
.rail-nav button:hover{background:var(--onyx);color:var(--ivory);border-color:var(--onyx)}
.rail-nav svg{width:18px;height:18px}

/* ---------- chapters (sticky stack) ---------- */
.chapters{background:var(--onyx);color:var(--ivory)}
.chapters-intro{padding:clamp(88px,10vw,150px) 0 clamp(40px,5vw,72px)}
.chapter{position:relative;height:175vh}
.chapter .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-items:end;isolation:isolate;box-shadow:0 -30px 60px rgba(0,0,0,.45)}
.chapter:last-child{height:100vh}
.chapter .bg{position:absolute;inset:0;z-index:-1}
.chapter .bg img,.chapter .bg video{width:100%;height:108%;object-fit:cover;position:absolute;left:0;top:-4%;will-change:transform}
.chapter .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,10,.25),rgba(15,12,10,.15) 45%,rgba(15,12,10,.92))}
.chapter .inner{padding:0 var(--gutter) clamp(56px,8vh,96px);display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
.chapter .stage{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:20px;display:flex;align-items:center;gap:14px}
.chapter .stage:before{content:"";width:34px;height:1px;background:var(--gold)}
.chapter h3{font-size:clamp(42px,6.2vw,96px);line-height:1}
.chapter .txt{max-width:420px;justify-self:end}
.chapter .txt p{color:var(--sand);font-size:16px;line-height:1.55;margin-bottom:22px}
@media (max-width:820px){.chapter{height:150vh}.chapter .inner{grid-template-columns:1fr;gap:18px}.chapter .txt{justify-self:start}}
html.no-motion .chapter{height:auto}html.no-motion .chapter .pin{position:relative}

/* ---------- markets ---------- */
.markets{background:var(--onyx);color:var(--ivory);overflow:hidden}
.markets .bg{position:absolute;inset:0}
.markets .bg video,.markets .bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.markets .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--onyx),rgba(15,12,10,.35) 30%,rgba(15,12,10,.5) 70%,var(--onyx))}
.markets .wrap{position:relative}
.market-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(212,170,123,.25);border:1px solid rgba(212,170,123,.25);margin-top:clamp(40px,5vw,72px)}
.market{background:rgba(15,12,10,.72);backdrop-filter:blur(6px);padding:34px 30px 30px}
.market h3{font-size:clamp(34px,3.4vw,50px)}
.market .eyebrow{margin-bottom:16px}
.market p{color:var(--sand);font-size:15px;line-height:1.55;margin-top:14px}
.market .link{margin-top:22px;font-size:11px}
@media (max-width:820px){.market-grid{grid-template-columns:1fr}}

/* ---------- languages ticker ---------- */
.ticker{overflow:hidden;border-top:1px solid rgba(212,170,123,.3);border-bottom:1px solid rgba(212,170,123,.3);padding:11px 0;white-space:nowrap;margin-top:clamp(36px,4vw,56px)}
.markets.sec{padding-bottom:clamp(32px,3.5vw,48px)}
#team.sec{padding-top:clamp(48px,5vw,80px)}
#reviews.sec{padding-block:clamp(64px,7vw,112px)}
.ticker-track{display:inline-flex;gap:0;will-change:transform;animation:tick 40s linear infinite}
.ticker-track span{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding:0 18px;display:inline-flex;align-items:center;gap:18px}
.ticker-track span:after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold-deep);display:inline-block}
@keyframes tick{to{transform:translateX(-50%)}}
html.no-motion .ticker-track{animation:none}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.agent{position:relative;display:block}
.agent .ph{aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.agent .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:saturate(.92);transition:transform 1.2s var(--ease-out),filter .6s}
.agent:hover .ph img{transform:scale(1.06);filter:saturate(1)}
.agent .nm{font-family:var(--display);font-size:20px;margin-top:12px;line-height:1.1}
.agent .rl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-top:5px;font-weight:500}
@media (max-width:1100px){.team-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.team-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
.achievers{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--dune);border:1px solid var(--dune);margin-top:clamp(40px,5vw,72px)}
.achievers>div{background:var(--linen);padding:clamp(28px,3vw,44px);display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.achievers .ph{width:150px;aspect-ratio:4/5;overflow:hidden;border:6px solid var(--gold)}
.achievers .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.achievers .month{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);font-weight:500}
.achievers .nm{font-family:var(--display);font-size:clamp(28px,2.6vw,40px);margin:8px 0 10px}
.achievers p{color:var(--slate);font-size:15px}
@media (max-width:820px){.achievers{grid-template-columns:1fr}.achievers>div{grid-template-columns:1fr}.achievers .ph{width:120px}}

/* ---------- testimonials ---------- */
.quotes{position:relative;min-height:60vh;display:grid;align-items:center}
.quote{display:none;max-width:1000px}
.quote.is-on{display:block}
.quote blockquote{margin:0;font-family:var(--display);font-style:normal;font-size:clamp(28px,3.6vw,54px);line-height:1.12;color:var(--ivory);text-wrap:balance}
.quote blockquote:before{content:"\201C";color:var(--gold);margin-right:.1em}
.quote figcaption{margin-top:30px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500}
.quote-dots{display:flex;gap:10px;margin-top:40px}
.quote-dots button{width:36px;height:2px;background:rgba(212,170,123,.3);transition:background .3s}
.quote-dots button.is-on{background:var(--gold)}

/* ---------- forms / contact ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.form-grid .full{grid-column:1/-1}
.form-grid .field input,.form-grid .field select,.form-grid .field textarea{width:100%;background-color:transparent;border:0;border-bottom:1px solid var(--dune);padding:14px 0 12px;font:inherit;font-size:16px;color:inherit;outline:0;border-radius:0;resize:vertical}
[data-tone="dark"] .form-grid .field input,[data-tone="dark"] .form-grid .field select,[data-tone="dark"] .form-grid .field textarea{border-color:rgba(212,170,123,.35);color:var(--ivory)}
.form-grid .field input:focus,.form-grid .field textarea:focus,.form-grid .field select:focus{border-color:var(--gold-deep)}
.form-note{font-size:13px;color:var(--mist);margin-top:14px}
.form-err{color:#B0432E}
.hp{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.cf-turnstile{margin-top:18px}
.form-done{display:none;padding:34px;border:1px solid var(--gold);font-family:var(--display);font-size:26px;line-height:1.2}
form.is-done .form-grid,form.is-done .btn,form.is-done .form-note{display:none}form.is-done .form-done{display:block}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start}
.contact-grid h2{margin:20px 0 26px}
.office{margin-top:34px;display:grid;gap:22px;border-top:1px solid var(--dune);padding-top:28px}
.office b{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);margin-bottom:6px;font-weight:500}
.office a:hover{color:var(--gold-deep)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta-band{background:var(--espresso);color:var(--ivory)}
.cta-band .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding-block:clamp(56px,7vw,96px)}
.cta-band h2{margin-top:18px;max-width:18ch}
@media (max-width:820px){.cta-band .wrap{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-foot{background:var(--onyx);color:var(--sand);padding:clamp(64px,7vw,110px) 0 36px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(212,170,123,.22)}
.foot-grid h4{font-family:var(--body);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:20px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px}
.foot-grid a:hover{color:var(--gold)}
.foot-brand{padding-right:clamp(24px,3vw,56px);border-right:1px solid rgba(212,170,123,.28)}
@media (max-width:900px){.foot-brand{padding-right:0;border-right:0;padding-bottom:28px;border-bottom:1px solid rgba(212,170,123,.28)}}
.foot-brand .brand{color:var(--ivory);margin-bottom:22px}
.foot-brand p{max-width:34ch;font-size:15px;line-height:1.6}
.foot-quote{font-family:var(--body);font-style:italic;font-weight:400;font-size:22px;color:var(--gold-soft);max-width:30ch;margin-top:24px;line-height:1.25}
.foot-legal{display:flex;flex-wrap:wrap;gap:16px 34px;justify-content:space-between;padding-top:28px;font-size:12px;color:var(--mist)}
.foot-legal a{text-decoration:underline;text-underline-offset:3px}
.foot-legal a:hover{color:var(--gold)}
.socials{display:flex;gap:14px;margin-top:24px}
.socials a{width:40px;height:40px;border:1px solid rgba(212,170,123,.35);display:grid;place-items:center;transition:background .3s,border-color .3s}
.socials a:hover{background:var(--gold);color:var(--onyx);border-color:var(--gold)}
.socials svg{width:16px;height:16px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- inner page hero ---------- */
.page-hero{position:relative;min-height:72vh;display:grid;align-items:end;color:var(--ivory);background:var(--onyx);overflow:hidden;padding-top:var(--head-h)}
.page-hero .bg{position:absolute;inset:0}
.page-hero .bg img,.page-hero .bg video{width:100%;height:100%;object-fit:cover;opacity:.7}
.page-hero .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,10,.5),rgba(15,12,10,.1) 40%,rgba(15,12,10,.92))}
.page-hero .wrap{position:relative;padding-bottom:clamp(48px,6vw,88px)}
.page-hero h1{margin-top:20px;max-width:14ch;text-wrap:balance}
.page-hero .lede{margin-top:24px}
.page-hero.short{min-height:52vh}

/* ---------- stages (process) ---------- */
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--dune);border:1px solid var(--dune)}
[data-tone="dark"] .stages{background:rgba(212,170,123,.25);border-color:rgba(212,170,123,.25)}
.stage-c{background:var(--linen);padding:30px 26px 34px;min-height:260px;display:flex;flex-direction:column}
[data-tone="dark"] .stage-c{background:var(--espresso)}
.stage-c .when{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);font-weight:500}
[data-tone="dark"] .stage-c .when{color:var(--gold)}
.stage-c h3{font-size:28px;margin:16px 0 14px}
.stage-c p{font-size:14.5px;line-height:1.55;color:var(--slate)}
[data-tone="dark"] .stage-c p{color:var(--sand)}
@media (max-width:1100px){.stages{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.stages{grid-template-columns:1fr}.stage-c{min-height:0}}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.split.flip>.media{order:2}
.split .media{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.split .media img,.split .media video{width:100%;height:100%;object-fit:cover}
.split h2{margin:20px 0 24px;text-wrap:balance}
.split ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.split li{padding-left:26px;position:relative;font-size:16px;color:var(--slate)}
[data-tone="dark"] .split li{color:var(--sand)}
.split li:before{content:"";position:absolute;left:0;top:11px;width:14px;height:1px;background:var(--gold-deep)}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.flip>.media{order:0}}

/* ---------- properties page ---------- */
.filters{position:sticky;top:68px;z-index:20;background:rgba(245,239,230,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--dune)}
.filters .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding-block:14px}
.filters form{display:flex;gap:18px;flex-wrap:wrap}
.filters .field{min-width:140px}
.filters .count{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-weight:500;white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--dune)}
.seg button{padding:12px 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--slate)}
.seg button.is-on{background:var(--onyx);color:var(--ivory)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:1000px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .filters{position:static;backdrop-filter:none;background:var(--linen)}
  .filters .wrap{grid-template-columns:1fr;gap:16px}
  .filters form{gap:12px}
  .filters .field{flex:1 1 40%;min-width:0}
  /* five segments do not fit a phone in one row — wrap instead of overflowing the page */
  .seg{flex-wrap:wrap;width:100%}
  .seg button{flex:1 1 auto;padding:12px 14px;font-size:10px}
}
@media (max-width:600px){.grid-3{grid-template-columns:1fr}}
.empty{padding:80px 0;text-align:center;font-family:var(--display);font-size:28px;color:var(--slate)}

/* ---------- property detail ---------- */
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:min(72vh,720px);padding-top:var(--head-h)}
.gallery figure{margin:0;overflow:hidden;background:var(--sand)}
.gallery figure:first-child{grid-row:1/3}
.gallery img{width:100%;height:100%;object-fit:cover}
@media (max-width:800px){.gallery{grid-template-columns:1fr;grid-template-rows:auto;height:auto}.gallery figure{aspect-ratio:3/2}.gallery figure:first-child{grid-row:auto}}
.detail{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(40px,6vw,96px);align-items:start}
.detail .chip{position:static;display:inline-block}
.detail .price{font-size:clamp(34px,3.6vw,52px);font-weight:600;letter-spacing:-.02em}
.detail .price small{font-size:16px;color:var(--slate);font-weight:500;margin-left:6px}
.detail h1{font-size:clamp(34px,4vw,60px);margin-top:10px}
.detail .city{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-top:10px;font-weight:500}
.spec-row{display:flex;flex-wrap:wrap;gap:0;margin:34px 0;border-top:1px solid var(--dune);border-bottom:1px solid var(--dune)}
.spec-row div{padding:18px 28px 18px 0;margin-right:28px;border-right:1px solid var(--dune)}
.spec-row div:last-child{border:0}
.spec-row b{display:block;font-size:22px;font-weight:600}
.spec-row span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-weight:500}
.detail .desc{font-size:18px;line-height:1.6;color:var(--slate);max-width:62ch}
.feat{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.feat li{padding-left:26px;position:relative;font-size:15px}
.feat li:before{content:"";position:absolute;left:0;top:11px;width:14px;height:1px;background:var(--gold-deep)}
.side{position:sticky;top:100px;display:grid;gap:22px}
.side .box{background:var(--linen);border:1px solid var(--dune);padding:28px}
.side .agent-row{display:flex;gap:18px;align-items:center;margin-bottom:22px}
.side .agent-row img{width:72px;height:88px;object-fit:cover;object-position:50% 12%}
.side .agent-row b{font-family:var(--display);font-size:22px;font-weight:400;display:block}
.side .agent-row span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);font-weight:500}
@media (max-width:900px){.detail{grid-template-columns:1fr}.side{position:static}}

/* ---------- agent profile ---------- */
.profile{display:grid;grid-template-columns:340px 1fr;gap:clamp(40px,6vw,96px);align-items:start;padding-top:calc(var(--head-h) + 40px)}
.profile .ph{aspect-ratio:4/5;overflow:hidden;background:var(--sand);position:sticky;top:100px;max-width:340px}/* headshots are 397px wide: never show them larger than ~2x that on Retina */
.profile .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 10%}
.profile h1{margin-top:16px}
.profile .bio{font-size:18px;line-height:1.6;color:var(--slate);margin-top:30px;max-width:60ch}
.profile .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
@media (max-width:900px){.profile{grid-template-columns:1fr}.profile .ph{position:static;max-width:420px}}

/* ---------- join ---------- */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.perk{padding:34px 30px;background:var(--linen);border:1px solid var(--dune)}
[data-tone="dark"] .perk{background:var(--espresso);border-color:rgba(212,170,123,.25)}
.perk h3{font-size:28px;margin-bottom:14px}
.perk p{font-size:15px;line-height:1.55;color:var(--slate)}
[data-tone="dark"] .perk p{color:var(--sand)}
@media (max-width:900px){.perks{grid-template-columns:1fr}}

/* ---------- reveal motion ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}.rv-d4{transition-delay:.48s}
html.no-motion .rv{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.ticker-track{animation:none}}

/* ============================================================
   CINEMATIC LAYER
   ============================================================ */
/* ---------- keyhole page wipe ---------- */
@property --w{syntax:'<number>';inherits:false;initial-value:0}
.kh-wipe{position:fixed;inset:0;z-index:120;background:var(--onyx);pointer-events:none;
  -webkit-mask:linear-gradient(#000,#000),url(../assets/brand/house-mask.svg) center/auto calc(var(--w) * 1vh) no-repeat;-webkit-mask-composite:xor;
  mask:linear-gradient(#000,#000),url(../assets/brand/house-mask.svg) center/auto calc(var(--w) * 1vh) no-repeat;mask-composite:exclude;
  animation:khopen 1.05s cubic-bezier(.65,0,.35,1) .1s forwards}
.kh-wipe.is-closing{animation:khclose .62s cubic-bezier(.65,0,.35,1) forwards;pointer-events:auto}
.kh-wipe.is-off{display:none}
/* the house only shows inside the viewport below ~190vh, so the curves spend their time there */
@keyframes khopen{0%{--w:0}70%{--w:190}100%{--w:440}}
@keyframes khclose{0%{--w:440}25%{--w:190}100%{--w:0}}
html.no-motion .kh-wipe{display:none}
@media (prefers-reduced-motion:reduce){.kh-wipe{display:none}}

/* ---------- wordmark draw ---------- */
.brand.draw svg{stroke-dasharray:150;stroke-dashoffset:150;fill-opacity:0;animation:draw 1.4s cubic-bezier(.16,1,.3,1) .4s forwards,ink .6s ease 1.1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ink{to{fill-opacity:1}}

/* ---------- line-mask reveals (.sl = split lines; .split is the two-column layout) ---------- */
.sl{visibility:hidden}
.sl.is-split{visibility:visible}
.sl .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.sl .ln>span{display:block;transform:translateY(112%);transition:transform 1.05s var(--ease-out)}
.sl.in .ln>span{transform:none}
.sl .w{font-style:normal}.sl .w.em{color:var(--gold)}
html.no-motion .sl .ln>span{transform:none}

/* ---------- pointer-reactive hero ---------- */
.hero-stage{--px:0;--py:0}
.hero-media{-webkit-mask-position:calc((var(--khx) + var(--px)) * 1%) calc((var(--khy) + var(--py)) * 1%);mask-position:calc((var(--khx) + var(--px)) * 1%) calc((var(--khy) + var(--py)) * 1%)}
.hero-hole{left:calc((var(--khx) + var(--px)) * 1% - var(--khh) * 560 / 660 * (var(--khx) + var(--px)) / 100);top:calc((var(--khy) + var(--py)) * 1% - var(--khh) * (var(--khy) + var(--py)) / 100)}
.hero-media video,.hero-media img{transform:translate(calc(var(--px) * -.5%),calc(var(--py) * -.5%)) scale(1.06)}

/* ---------- custom cursor ---------- */
.cur{display:none}
@media (hover:hover) and (pointer:fine){
  .cur{display:block;position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid var(--gold);border-radius:50%;pointer-events:none;z-index:110;opacity:0;transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .3s,border-color .3s,opacity .3s}
  .cur.on{opacity:1}
  .cur.big{width:40px;height:40px;margin:-20px 0 0 -20px;border-color:rgba(212,170,123,.7)}
  .cur.lab{width:74px;height:74px;margin:-37px 0 0 -37px;background:var(--gold);border-color:var(--gold);mix-blend-mode:normal}
  .cur.down{transform:scale(.85)}
  .cur span{position:absolute;inset:0;display:grid;place-items:center;font:600 10px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--onyx);opacity:0;transition:opacity .2s}
  .cur.lab span{opacity:1}
  .card,.rail-track,.agent,.founder,.gallery figure{cursor:none}
  .card a,.agent a{cursor:none}
}

/* ---------- chapter rail ---------- */
.ch-rail{position:fixed;right:clamp(14px,2vw,32px);top:50%;transform:translateY(-50%) translateX(12px);z-index:50;display:grid;gap:14px;opacity:0;pointer-events:none;transition:opacity .4s,transform .5s var(--ease-out)}
.ch-rail.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
.ch-rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:rgba(245,239,230,.55);transition:color .3s}
.ch-rail a:after{content:"";width:18px;height:1px;background:currentColor;transition:width .3s}
.ch-rail a.is-on{color:var(--gold)}.ch-rail a.is-on:after{width:34px}
.ch-rail a:hover{color:var(--ivory)}
@media (max-width:900px){.ch-rail{display:none}}

/* ---------- grain ---------- */
.grain{position:fixed;inset:-40%;width:180%;height:180%;pointer-events:none;z-index:105;opacity:.055;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@media (hover:none),(prefers-reduced-motion:reduce){.grain{display:none}}
html.no-motion .grain{display:none}

/* ============================================================
   UTILITY LAYER
   ============================================================ */
/* ---------- saved hearts ---------- */
.save{position:absolute;right:14px;top:14px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(15,12,10,.55);backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--ivory);transition:background .3s,transform .3s var(--ease-out)}
.save svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;transition:fill .3s,transform .3s var(--ease-out)}
.save:hover{transform:scale(1.08);background:rgba(15,12,10,.75)}
.save.is-on{background:var(--gold);color:var(--onyx)}.save.is-on svg{fill:currentColor;transform:scale(1.1)}
.seg button b{font-weight:600;color:var(--gold-deep);margin-left:4px}.seg button.is-on b{color:var(--gold)}

/* ---------- mortgage calculator ---------- */
.calc-pay{display:flex;align-items:baseline;gap:10px;margin:14px 0 22px}
.calc-pay b{font-size:clamp(30px,2.6vw,38px);font-weight:600;letter-spacing:-.02em}
.calc-pay span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-weight:500}
.rng{display:block;margin:0 0 16px}
.rng>span{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-weight:500;margin-bottom:10px}
.rng output{color:var(--ink);font-weight:600;letter-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
.rng input[type=range]{--p:20%;width:100%;height:22px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.rng input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--gold-deep) var(--p),var(--dune) var(--p))}
.rng input[type=range]::-moz-range-track{height:2px;background:var(--dune)}
.rng input[type=range]::-moz-range-progress{height:2px;background:var(--gold-deep)}
.rng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ivory);border:2px solid var(--gold-deep);margin-top:-8px;box-shadow:0 2px 8px rgba(28,21,18,.2)}
.rng input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ivory);border:2px solid var(--gold-deep)}
.calc-br{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--sand);font-size:13px}
.calc-br dt{color:var(--slate)}.calc-br dd{margin:0;text-align:right;font-weight:600}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:130;background:rgba(15,12,10,.94);display:grid;grid-template-columns:auto 1fr auto;align-items:center;opacity:0;pointer-events:none;transition:opacity .35s;padding:0 clamp(8px,2vw,24px);touch-action:pan-y}
.lb.on{opacity:1;pointer-events:auto}
.lb figure{margin:0;display:grid;place-items:center;height:100vh;padding:64px 0 56px;position:relative}
.lb img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.96);transition:transform .45s var(--ease-out)}
.lb.on img{transform:none}
.lb figcaption{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);font-weight:500}
.lb button{width:52px;height:52px;border:1px solid rgba(212,170,123,.35);color:var(--ivory);display:grid;place-items:center;transition:background .3s}
.lb button:hover{background:var(--gold);color:var(--onyx)}
.lb button svg{width:18px;height:18px}
.lb-x{position:absolute!important;right:clamp(8px,2vw,24px);top:16px;border-radius:50%}
.lb-x:before,.lb-x:after{content:"";position:absolute;width:18px;height:1.5px;background:currentColor;transform:rotate(45deg)}.lb-x:after{transform:rotate(-45deg)}
body.lb-open{overflow:hidden}
@media (max-width:640px){.lb{grid-template-columns:1fr}.lb-p,.lb-n2{display:none}}

/* ---------- estimator ---------- */
.est-out{margin-top:32px;padding:28px;border:1px solid var(--gold);background:var(--linen)}
.est-range{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:12px 0 10px}
.est-range b{font-size:clamp(28px,3vw,42px);font-weight:600;letter-spacing:-.02em}
.est-range i{font-style:normal;font-family:var(--display);font-size:18px;color:var(--slate)}

/* ---------- language filter ---------- */
.lang-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px}
.lang-filter button{padding:11px 16px;border:1px solid var(--dune);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--slate);transition:background .3s,color .3s,border-color .3s}
.lang-filter button:hover{border-color:var(--gold-deep);color:var(--ink)}
.lang-filter button.is-on{background:var(--onyx);color:var(--gold);border-color:var(--onyx)}
.lang-empty{padding:48px 0 16px;text-align:left;font-size:22px;color:var(--slate)}

/* ============================================================
   PLAIN SECTIONS — manifesto · services ledger · markets (plain) · solo break
   ============================================================ */
/* ---------- manifesto ---------- */
.manifesto.sec{padding-block:clamp(72px,8vw,120px)}
.mf-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,80px);align-items:center}
.mf-grid h2{max-width:20ch;margin-top:22px}
.mf-grid .lede{margin-top:26px}
.mf-mark{justify-self:end;width:min(100%,360px);aspect-ratio:560/660;opacity:.9}
.mf-mark svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 18px rgba(212,170,123,.18))}
.mf-mark .dr{stroke-dasharray:1;stroke-dashoffset:1}
html.no-motion .mf-mark .dr{stroke-dasharray:none;stroke-dashoffset:0}
.dayrail{margin-top:clamp(48px,6vw,88px);position:relative}
.dr-line{position:relative;height:1px;background:rgba(212,170,123,.3)}
.dr-line:after{content:"";position:absolute;left:0;top:0;height:1px;width:var(--p,0%);background:var(--gold);transition:width .15s linear}
.dr-dot{position:absolute;top:50%;left:var(--p,0%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(212,170,123,.18),0 0 24px rgba(212,170,123,.55);transition:left .15s linear}
.dr-marks{list-style:none;margin:0;padding:22px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.dr-marks li{position:relative;padding-top:14px;opacity:.45;transition:opacity .5s}
.dr-marks li:before{content:"";position:absolute;left:0;top:-23px;width:1px;height:14px;background:rgba(212,170,123,.5)}
.dr-marks li.is-on{opacity:1}
.dr-marks b{display:block;font-family:var(--display);font-size:clamp(22px,2vw,30px);font-weight:400;color:var(--gold);margin-bottom:8px}
.dr-marks span{font-size:14.5px;line-height:1.5;color:var(--sand)}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(48px,6vw,80px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(212,170,123,.3)}
.principles>div{position:relative;padding-top:18px;text-align:center}
.principles>div:before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;height:1px;width:0;background:var(--gold);transition:width 1.1s var(--ease-out) .2s}
.principles>div.in:before{width:44px}
.principles h3{font-size:clamp(22px,1.8vw,28px);margin-bottom:14px;color:var(--ivory)}
.principles p{font-size:15.5px;line-height:1.6;color:var(--sand);max-width:36ch;margin-inline:auto}
@media (max-width:900px){.mf-grid{grid-template-columns:1fr}.mf-mark{justify-self:start;width:180px}.dr-marks{grid-template-columns:1fr 1fr;gap:20px}.principles{grid-template-columns:1fr;gap:28px}}

/* ---------- services ledger with a fixed preview frame ---------- */
.ledger.sec{padding-top:clamp(36px,4vw,56px)}
.ledger-head{margin-bottom:clamp(20px,2.6vw,36px)}
.ledger-head h2{margin-top:18px}
.ledger-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,4vw,72px);align-items:start}
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--dune)}
.svc-row{display:grid;grid-template-columns:clamp(150px,16vw,240px) minmax(0,1fr);gap:clamp(18px,2.5vw,40px);align-items:start;padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--dune);cursor:default}
.svc-row h3{font-size:clamp(26px,2.2vw,34px);line-height:1.05;transition:color .3s;padding-top:2px;min-width:0;overflow-wrap:break-word;hyphens:auto}
.svc-row .tag{font-size:clamp(16px,1.2vw,18px);line-height:1.35;color:var(--ink);margin-bottom:8px}
.svc-row p{font-size:14.5px;line-height:1.55;color:var(--slate);max-width:54ch}
.svc-row .link{font-size:10.5px;margin-top:14px}
.svc-row.is-on h3,.svc-row:hover h3{color:var(--gold-deep)}
.svc-frame{position:sticky;top:110px;aspect-ratio:4/3;overflow:hidden;background:var(--sand);box-shadow:0 30px 60px rgba(28,21,18,.14)}
.svc-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease-out),transform 1.4s var(--ease-out)}
.svc-frame img.is-on{opacity:1;transform:scale(1)}
.svc-cap{position:absolute;left:18px;bottom:16px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--ivory);background:rgba(15,12,10,.55);padding:8px 12px;backdrop-filter:blur(6px)}
/* The sticky preview frame is hover-driven, so a phone never saw any of the five images.
   Each row carries its own instead: hidden on desktop (the frame does that job), shown inline
   under the heading on a phone. Same files, so no extra downloads. */
/* `.stats span` styles the LABEL under each figure (display:block, uppercase, slate), and it
   was also catching this one, which put the "+" on its own line in its own colour. */
.num .suf{display:inline;margin:0;font-size:.58em;vertical-align:.30em;letter-spacing:0;
  font-weight:inherit;color:inherit;text-transform:none}
.svc-shot{display:none}
@media (max-width:1000px){
  .ledger-grid{grid-template-columns:1fr}
  .svc-frame{display:none}
  .svc-row{grid-template-columns:1fr;gap:8px}
  .svc-shot{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:12px 0 16px;
    background:var(--sand);box-shadow:0 14px 30px rgba(28,21,18,.13)}
}
.markets.plain{background:var(--sand);color:var(--ink)}
.markets.plain .market{background:var(--linen);backdrop-filter:none}
.markets.plain .market h3{color:var(--ink)}
.markets.plain .lede{color:var(--slate)}
.markets.plain .eyebrow{color:var(--bronze)}
.markets.plain .link:hover{color:var(--gold-deep)}
.markets.plain .market-grid{background:var(--dune);border-color:var(--dune)}
.markets.plain .market p{color:var(--slate)}
.markets.plain .ticker{border-color:var(--dune)}
.markets.plain .ticker-track span{color:var(--bronze);font-weight:600}
.markets.plain .ticker-track span:after{background:var(--bronze);opacity:.65}
.chapter.solo{height:100vh;height:100svh}
.chapter.solo .pin{position:relative;box-shadow:none}

/* ---- the solo break on phones: a wide band, not a full-bleed portrait crop ----
   A 1920x1080 clip cannot fill a DPR-3 portrait screen. Full-bleed it painted only 543 of
   its 1920 px wide and upscaled them 2.22x, which is exactly why it read fuzzy, and the
   portrait slice threw away the architecture -- you saw a tree and a doorway instead of the
   building. As a band the browser DOWNSCALES the source, so it is sharp and the whole shot
   survives. The clip still plays and loops; only its box changed.
   The 108% height / -4% top stays: main.js parallaxes this child yPercent -3 -> 3 and
   without that slack the band would expose an edge at the extremes. */
@media (max-width:820px){
  .chapter.solo{height:auto}
  .chapter.solo .pin{position:relative;height:auto;display:block;overflow:visible;isolation:auto;box-shadow:none}
  .chapter.solo .bg{position:relative;inset:auto;z-index:0;height:480px;overflow:hidden}
  .chapter.solo .bg:after{background:linear-gradient(180deg,rgba(15,12,10,.20),rgba(15,12,10,0) 45%,rgba(15,12,10,.55))}
  .chapter.solo .inner{padding:30px var(--gutter) 62px;background:var(--onyx);align-items:start}
}

/* ---------- reviews over the Houston skyline ---------- */
.reviews{position:relative;overflow:hidden}
.reviews .bg{position:absolute;inset:0}
.reviews .bg video,.reviews .bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.reviews .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--onyx) 0%,rgba(15,12,10,.55) 30%,rgba(15,12,10,.6) 70%,var(--onyx) 100%)}
.reviews .wrap{position:relative}
.reviews .quote blockquote{text-shadow:0 2px 24px rgba(0,0,0,.45)}
/* half the display size over the skyline — the photograph carries the section, not the type */
.reviews .quote blockquote{font-size:clamp(15px,1.8vw,27px);line-height:1.3;max-width:36ch}
.reviews .quote figcaption{margin-top:22px}
.reviews .quotes{min-height:0}
.reviews .quote-dots{margin-top:30px}

/* ============================================================
   SCROLL-SCRUBBED PROPERTY TOUR HERO (preview: hero-tour.html)
   ============================================================ */
/* A plain one-screen hero clip. It used to be 420vh of scroll driving a frame sequence
   through a keyhole mask; that is gone. The clip simply plays and loops behind the copy. */
.hero.tour{height:100vh;height:100svh}
.hero.tour .hero-stage{background:var(--onyx);--grade:1}   /* the scrub used to animate --grade; it is just on now */
/* The keyhole is back, but it is NOT scroll-driven any more: it opens once on load and then
   stays open. Same brand moment, nothing tied to the thumb. --kh has to be registered or it
   cannot be animated (a plain custom property would jump straight to the end value). */
@property --kh{syntax:'<number>';inherits:true;initial-value:44}
.hero.tour .hero-stage{--kh:44;--khx:50;--khy:46;
  --khh:min(calc(var(--kh) * 1svh),calc(var(--kh) * .9vw));
  /* The mask clears the screen at about --kh 260 (phone) / 190 (desktop), so animating to 900
     on an ease-OUT spent the whole visible range in the first 150 ms and the keyhole was gone
     before you saw it. Stop at 300, and ease in-out so the shape holds for a beat first. */
  animation:khOpen 2.4s cubic-bezier(.62,0,.30,1) .35s both}
@keyframes khOpen{from{--kh:44}to{--kh:300}}
/* Reduce Motion gets the room straight away, no opening. */
html.no-motion .hero.tour .hero-stage{animation:none;--kh:300}
.tour-media{position:absolute;inset:0;
  -webkit-mask:url(../assets/brand/house-mask.svg) calc(var(--khx) * 1%) calc(var(--khy) * 1%) / auto var(--khh) no-repeat;
  mask:url(../assets/brand/house-mask.svg) calc(var(--khx) * 1%) calc(var(--khy) * 1%) / auto var(--khh) no-repeat}
.hero.tour #tourCanvas,.hero.tour .tour-poster,.hero.tour .tour-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease-out)}
.hero.tour .tour-fallback{will-change:transform}
.hero.tour #tourCanvas.is-on,.hero.tour .tour-poster.is-on,.hero.tour .tour-fallback.is-on{opacity:1}
.hero.tour .tour-poster{opacity:1}
.hero.tour .tour-poster.is-fading{opacity:0}
.hero.tour .tour-grade{position:absolute;inset:0;pointer-events:none;opacity:var(--grade,0);transition:opacity .4s linear;
  /* The scrub used to fade this in as the keyhole opened; it is constant now (--grade:1).
     The clip is brightest exactly where the chrome and the copy sit, so the top stop carries
     the ivory nav and the bottom carries the headline and the buttons. Measured on the live
     page: nav band and headline band both need to land under about 110/255. */
  background:linear-gradient(180deg,rgba(15,12,10,.78) 0%,rgba(15,12,10,.52) 9%,
    rgba(15,12,10,.16) 26%,rgba(15,12,10,.10) 42%,rgba(15,12,10,.52) 64%,rgba(15,12,10,.88) 100%)}
.hero.tour .hero-hole{left:calc(var(--khx) * 1% - var(--khh) * 560 / 660 * var(--khx) / 100);top:calc(var(--khy) * 1% - var(--khh) * var(--khy) / 100);transition:opacity .2s linear}

.tour-copy{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) clamp(72px,9vh,110px);pointer-events:none}
.tour-beat{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(56px,7vh,110px);max-width:min(52vw,760px)}
.tour-beat .eyebrow{color:var(--gold-soft);margin-bottom:20px;font-weight:600;text-shadow:0 1px 2px rgba(15,12,10,.95),0 2px 14px rgba(15,12,10,.85)}
.tour-beat h1,.tour-beat h2{color:var(--ivory);text-wrap:balance;text-shadow:0 2px 20px rgba(15,12,10,.6),0 1px 3px rgba(15,12,10,.45)}
.tour-beat .t-hero{font-size:clamp(42px,5.6vw,88px);max-width:12ch}
.tour-beat p{margin-top:22px;font-size:17px;line-height:1.55;color:var(--sand);max-width:42ch;text-shadow:0 1px 14px rgba(15,12,10,.65)}
.tour-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}

.tour-rail{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(34px,4.5vh,52px);height:1px;background:rgba(212,170,123,.25)}
.tour-rail i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 12px rgba(212,170,123,.7)}
.hero.tour .hero-scroll{bottom:clamp(12px,2vh,20px)}

.tour-load{position:absolute;left:var(--gutter);top:calc(var(--head-h) + 24px);z-index:5;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600;transition:opacity .5s}
.tour-load i{display:block;width:120px;height:1px;background:rgba(212,170,123,.28)}
.tour-load b{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.tour-load.is-gone{opacity:0}

@media (max-width:900px){
  /* One-screen hero. The clip is bright exactly where the copy sits, so the scrim has to
     carry it: measured background luma under the headline is 108/255 against ivory type. */
  .hero.tour{height:100vh;height:100svh}
  .tour-beat{max-width:none}
  .tour-beat .eyebrow{font-size:9px;letter-spacing:.22em;margin-bottom:14px}
  .tour-beat .t-hero{font-size:clamp(34px,9.2vw,46px);max-width:14ch;line-height:1.06}
  .hero.tour .tour-grade{background:linear-gradient(180deg,
     rgba(15,12,10,.76) 0%,rgba(15,12,10,.46) 11%,rgba(15,12,10,.14) 26%,rgba(15,12,10,.12) 38%,
     rgba(15,12,10,.62) 58%,rgba(15,12,10,.92) 100%)}
}
html.no-motion .hero.tour{height:100vh}
html.no-motion .hero.tour .hero-stage{--kh:400}
html.no-motion .tour-beat{position:static;opacity:1;transform:none;max-width:none}
html.no-motion .tour-beat:not([data-beat="0"]){display:none}

/* ---------- markets: line-drawn Texas with the three markets pinned ---------- */
.mk-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center;margin-bottom:clamp(28px,3.5vw,48px)}
.mk-head h2{margin-top:20px}
.mk-head .lede{margin-top:24px}
.tx-map{margin:0;justify-self:end;width:min(100%,390px)}
.tx-map svg{width:100%;height:auto;display:block;overflow:visible}
.tx-edge{fill:rgba(212,170,123,.07);stroke:var(--gold-deep);stroke-width:2;stroke-linejoin:round;stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 2.6s var(--ease-out) .1s}
.tx-tri{fill:none;stroke:var(--gold-deep);stroke-width:1.3;stroke-dasharray:5 6;opacity:0;transition:opacity 1s var(--ease-out) 1.5s}
.tx-pin circle{fill:var(--bronze);opacity:0;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.2);transition:opacity .5s var(--ease-out) calc(1.2s + var(--d)),transform .7s var(--ease-out) calc(1.2s + var(--d))}
.tx-pin .tx-ring{fill:none;stroke:var(--gold-deep);stroke-width:1.5;opacity:0;transition:opacity .6s ease calc(1.5s + var(--d))}
.tx-pin text{font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink);opacity:0;transition:opacity .7s var(--ease-out) calc(1.45s + var(--d))}
.tx-map.in .tx-edge{stroke-dashoffset:0}
.tx-map.in .tx-tri{opacity:.7}
.tx-map.in .tx-pin circle{opacity:1;transform:none}
.tx-map.in .tx-pin .tx-ring{opacity:.55}
.tx-map.in .tx-pin text{opacity:1}
.tx-map figcaption{margin-top:18px;text-align:right;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);font-weight:600}
html.no-motion .tx-edge{stroke-dashoffset:0}
html.no-motion .tx-tri{opacity:.85}
html.no-motion .tx-pin circle,html.no-motion .tx-pin text{opacity:1;transform:none}
html.no-motion .tx-pin .tx-ring{opacity:.55}
@media (max-width:900px){.mk-head{grid-template-columns:1fr}.tx-map{justify-self:start;width:min(100%,320px)}.tx-map figcaption{text-align:left}}

/* ---------- join: the brokerage offer ---------- */
.offer{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(212,170,123,.28);border:1px solid rgba(212,170,123,.28);margin-top:clamp(40px,5vw,72px)}
.offer > div{background:var(--espresso);padding:clamp(28px,3vw,40px) clamp(22px,2.4vw,32px)}
.offer b{display:block;font-family:var(--body);font-weight:600;font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.02em;color:var(--gold);font-variant-numeric:tabular-nums lining-nums}
.offer b small{font-size:.44em;font-weight:600;letter-spacing:.02em;color:var(--gold-soft);vertical-align:.42em;margin-right:.04em}
.offer .lab{display:block;margin-top:16px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand);font-weight:600}
.offer p{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--sand);opacity:.82}
@media (max-width:820px){.offer{grid-template-columns:1fr}}

/* ---------- press / in the media ---------- */
.press{list-style:none;margin:0;padding:0;border-top:1px solid var(--dune)}
.press-row{display:grid;grid-template-columns:clamp(170px,18vw,260px) minmax(0,1fr);gap:clamp(20px,3vw,48px);padding:clamp(24px,2.6vw,34px) 0;border-bottom:1px solid var(--dune)}
.press-out{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);font-weight:600;padding-top:6px}
.press-row h3{font-size:clamp(24px,2.1vw,32px);line-height:1.1}
.press-row p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--slate);max-width:64ch}
.press-row .link{margin-top:18px;font-size:11px}
@media (max-width:820px){.press-row{grid-template-columns:1fr;gap:10px}}

/* ---------- press logo band ---------- */
/* seven items: four on top, three CENTERED below. A 24-column grid lets row two
   sit off-centre-free by offsetting the fifth item; no empty cell is ever drawn. */
.press-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(24,1fr);gap:12px}
.press-logos li{grid-column:span 6;background:var(--linen);border:1px solid var(--dune);padding:26px 18px;display:grid;place-items:center;text-align:center;font-family:var(--display);font-size:clamp(15px,1.2vw,19px);line-height:1.25;color:var(--ink);min-height:92px;transition:border-color .3s,color .3s}
.press-logos li:nth-child(5){grid-column:4 / span 6}
.press-logos li:hover{border-color:var(--gold-deep)}
@media (max-width:900px){
  .press-logos li{grid-column:span 12}
  .press-logos li:nth-child(5){grid-column:span 12}
  .press-logos li:last-child{grid-column:7 / span 12}
}
@media (max-width:560px){
  .press-logos li,.press-logos li:nth-child(5),.press-logos li:last-child{grid-column:span 24}
}

/* ---------- agent profile: credentials + contact ---------- */
.creds{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;border-top:1px solid var(--dune);padding-top:22px}
.creds li{position:relative;padding-left:26px;font-size:14.5px;color:var(--slate)}
.creds li:before{content:"";position:absolute;left:0;top:10px;width:14px;height:1px;background:var(--bronze)}
.aka{margin-top:14px;font-size:14.5px;color:var(--mist);font-style:italic}
.agent-form{margin-top:44px;padding-top:34px;border-top:1px solid var(--dune)}

/* ---------- agent direct line ---------- */
.direct{display:grid;grid-template-columns:repeat(2,auto);gap:10px 44px;justify-content:start;margin-top:28px;padding-top:22px;border-top:1px solid var(--dune)}
.direct b{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);font-weight:600;margin-bottom:6px}
.direct a{font-size:17px}
.direct a:hover{color:var(--bronze)}
.bio p{margin-bottom:16px}.bio p:last-child{margin-bottom:0}
.agent .tel{font-size:12px;color:var(--slate);margin-top:4px;letter-spacing:.02em}
.side .agent-row .agent-tel{display:block;margin-top:6px;font-size:14px;letter-spacing:.02em}
.side .agent-row .agent-tel:hover{color:var(--bronze)}
@media (max-width:560px){.direct{grid-template-columns:1fr;gap:14px}}

/* ---------- sold / leased ---------- */
.chip.sold{background:var(--onyx);color:var(--ivory)}
.card .closed{margin-top:10px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--bronze)}
.card .price small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);font-weight:600;margin-left:6px}

/* ---------- boxed contact form ---------- */
#contact.sec{padding-top:clamp(40px,4.5vw,64px)}
.form-boxed{background:var(--linen);border:1px solid var(--dune);padding:clamp(26px,2.8vw,40px);box-shadow:0 24px 48px rgba(28,21,18,.06)}
.form-boxed .form-grid{gap:20px 24px}
.form-boxed .field input,.form-boxed .field select,.form-boxed .field textarea{border-bottom-color:#cdbfa8}
.form-boxed .field input:focus,.form-boxed .field select:focus,.form-boxed .field textarea:focus{border-bottom-color:var(--gold-deep)}
.form-boxed .form-done{border-color:var(--gold-deep)}
[data-tone="dark"] .form-boxed,[data-tone="espresso"] .form-boxed{background:rgba(245,239,230,.04);border-color:rgba(212,170,123,.3);box-shadow:none}
@media (max-width:640px){.form-boxed{padding:22px 18px}}

/* ---------- "these are pickers" hint ---------- */
.form-hint{margin-top:18px;font-size:13.5px;color:var(--slate);display:flex;align-items:center;gap:6px}
.form-hint .caret{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--gold-deep);color:var(--bronze);font-size:10px;line-height:1}
[data-tone="dark"] .form-hint,[data-tone="espresso"] .form-hint{color:var(--sand)}
[data-tone="dark"] .form-hint .caret,[data-tone="espresso"] .form-hint .caret{border-color:rgba(212,170,123,.5);color:var(--gold)}

/* ---------- dropdown affordance (declared last: .form-grid .field select outranks .field select) ---------- */
.field select,.form-grid .field select,.search-band .field select,.filters .field select{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  padding:14px 42px 12px 12px;
  background-color:rgba(212,170,123,.13);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%237A5626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  border-bottom-color:var(--gold-deep);transition:background-color .25s}
.field select:hover,.form-grid .field select:hover{background-color:rgba(212,170,123,.22)}
.field select:focus,.form-grid .field select:focus{background-color:rgba(212,170,123,.24);border-bottom-color:var(--bronze)}
.field:has(select) > label::after{content:"\2009\25BE";color:var(--bronze);font-size:11px}
[data-tone="dark"] .form-grid .field select,[data-tone="espresso"] .form-grid .field select,[data-tone="dark"] .field select{
  background-color:rgba(212,170,123,.18);border-bottom-color:rgba(212,170,123,.55);color:var(--ivory);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%23E7CFA6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-tone="dark"] .form-grid .field select:hover,[data-tone="espresso"] .form-grid .field select:hover{background-color:rgba(212,170,123,.28)}
[data-tone="dark"] .field:has(select) > label::after,[data-tone="espresso"] .field:has(select) > label::after{color:var(--gold)}
.field select option{background:var(--linen);color:var(--ink)}
.search-band .field select,.filters .field select{padding:14px 34px 12px 10px;background-position:right 10px center}

/* ---------- page-hero copy has to win against a bright photograph ---------- */
.page-hero .bg:after{background:
  linear-gradient(90deg,rgba(15,12,10,.66) 0%,rgba(15,12,10,.34) 38%,rgba(15,12,10,0) 68%),
  linear-gradient(180deg,rgba(15,12,10,.46) 0%,rgba(15,12,10,.1) 34%,rgba(15,12,10,.52) 72%,rgba(15,12,10,.94) 100%)}
.page-hero h1{text-shadow:0 2px 22px rgba(15,12,10,.62),0 1px 3px rgba(15,12,10,.5)}
.page-hero .lede{color:var(--ivory);text-shadow:0 1px 16px rgba(15,12,10,.75),0 1px 2px rgba(15,12,10,.55)}
.page-hero .eyebrow{color:var(--gold-soft);font-weight:600;text-shadow:0 1px 2px rgba(15,12,10,.9),0 1px 14px rgba(15,12,10,.8)}