/* Christina Kang | Century 21 Judge Fite | STAGING
   Photography-first luxury-editorial idiom. Original design.
   Palette per Century 21 digital brand guidelines. */

:root{
  /* Century 21 digital brand */
  --ink:#121212;        /* Digital Black  - body text */
  --grey:#252526;       /* Obsessed Grey  - dark sections, footer */
  --cream:#F8F7F2;      /* Cream tint     - soft background */
  --gold:#BEAF87;       /* Relentless Gold- accents + gold text ON DARK */
  --gold-dk:#746649;    /* Digital Dark Gold - gold text ON LIGHT (AA safe) */

  --muted:#6B6962;
  --line:rgba(18,18,18,.14);
  --line-dk:rgba(248,247,242,.18);

  --maxw:1320px;
  --measure:670px;      /* reading column: 70ch at the 16.5px body size */
  --gut:clamp(20px,5vw,72px);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.68;font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:860px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;letter-spacing:.01em;margin:0}
h1{font-size:clamp(2.5rem,6.4vw,5rem);line-height:1.05}
h2{font-size:clamp(1.85rem,3.4vw,2.9rem);line-height:1.14}
h3{font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.3}
p{margin:0 0 1.15em;max-width:66ch}
.lede{font-size:clamp(1.06rem,1.35vw,1.22rem);color:#3A3833}
.eyebrow{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-dk);font-weight:500;margin:0 0 18px;
}
.on-dark .eyebrow,.band .eyebrow,.site-foot .eyebrow{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- placeholder imagery ----------
   Drop a real photo at the path in --img and it replaces the gradient. */
.ph{
  position:relative;overflow:hidden;background-color:#E4DFD6;
  background-image:var(--img),linear-gradient(135deg,#DED8CD 0%,#C7BEAE 48%,#A89C88 100%);
  background-size:cover;background-position:center;
}
/* Placeholder files carry their own baked-in caption, so the CSS caption
   stays off. It returns automatically for any slot with no image file. */
.ph[data-label]::after{content:none}

/* ---------- staging banner ---------- */
.staging{
  background:var(--grey);color:var(--gold);text-align:center;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  padding:8px 16px;position:relative;z-index:60;
}

/* ---------- header ----------
   Two states. The default solid bar is what every inner page uses.
   .over-hero floats it on the home page; site.js adds .is-solid once
   you scroll past the hero and it drops back down as the solid bar. */
/* One treatment everywhere: white nav on a bar in the same charcoal as the
   logo's letterforms, gold CTA, large brand square. The home page's
   .over-hero only drops the bar to transparent so the identical header
   floats on the photography. */
.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--grey);        /* #252526, sampled from the logo artwork */
  border-bottom:1px solid var(--line-dk);color:#fff;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  /* Full bleed, and the nav pinned to the top with the brand square hanging
     below it. Every page shares this geometry, so the logo lands on the
     same pixel whichever page you are on. */
  padding-inline:var(--gut);
}

/* Square brand block. The gold matches the logo file. */
.brandmark{
  flex:none;display:block;background:var(--gold);
  width:clamp(100px,10.5vw,156px);height:clamp(100px,10.5vw,156px);
  transition:width .4s cubic-bezier(.76,0,.24,1),height .4s cubic-bezier(.76,0,.24,1);
}
.brandmark img{width:100%;height:100%;object-fit:cover}

/* text lockup, still used in the footer */
.brand{font-family:var(--serif);font-size:1.28rem;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;line-height:1.1}
.brand small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.3em;color:var(--muted);margin-top:4px;text-transform:uppercase}

.nav{display:flex;gap:clamp(12px,1.8vw,28px);align-items:center;min-height:84px}
.nav a{font-size:13px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;padding-bottom:3px;border-bottom:1px solid transparent;white-space:nowrap}
.nav .btn{font-size:12px;font-weight:600;letter-spacing:.15em;text-indent:.15em;padding:17px 28px 16px}
.nav a:hover,.nav a[aria-current=page]{color:var(--gold);border-bottom-color:var(--gold)}
.nav .btn-gold{border-bottom:0;background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* the aria-current rule above outranks .nav .btn-gold on specificity, which
   would paint the CTA's label gold on gold; keep it ink on its own page */
.nav .btn-gold[aria-current=page]{color:var(--ink)}
.nav .btn-gold:hover{background:#fff;border-color:#fff;color:var(--ink)}
.nav-tel{color:rgba(255,255,255,.76);font-variant-numeric:tabular-nums}
/* one-tap call button: hidden on desktop, where the number shows in the nav */
.head-call{display:none}
.nav-toggle{display:none;background:none;border:0;color:inherit;font:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:8px 0;align-self:center}

/* floating over the hero (home page): the same bar, lifted out of flow so
   the brand square hangs over the photograph instead of over a filled bar */
.site-head.over-hero{
  position:absolute;top:0;left:0;right:0;
  background:transparent;border-bottom-color:transparent;
}
/* the nav sits straight on the photography, so it carries its own scrim */
.site-head.over-hero .nav a{text-shadow:0 1px 12px rgba(0,0,0,.7)}
.site-head.over-hero .nav .btn{text-shadow:none}
.site-head.over-hero .nav-tel{color:#fff}

/* past the hero: the same bar again, now opaque and pinned */
.site-head.over-hero.is-solid{
  position:fixed;
  background:var(--grey);border-bottom-color:var(--line-dk);
  animation:dropin .35s cubic-bezier(.76,0,.24,1);
}
.site-head.over-hero.is-solid .nav a{text-shadow:none}
@keyframes dropin{from{transform:translateY(-100%)}to{transform:translateY(0)}}

@media (max-width:1180px){.nav-tel{display:none}}

@media (max-width:1040px){
  .nav-toggle{display:block}
  /* phones: the number lives inside the drawer, so give it its own one-tap button in the bar */
  .head-call{
    display:inline-flex;align-items:center;gap:8px;margin-left:auto;
    min-height:44px;padding:0 4px;color:var(--gold);
    font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  }
  .head-call svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
  .site-head.over-hero .head-call{text-shadow:0 1px 12px rgba(0,0,0,.7)}
  body.nav-open .head-call{visibility:hidden}
  /* keep the bar compact on phones; nothing hangs, so centre the row */
  .brandmark{width:84px;height:84px}
  .site-head{align-items:center}
  /* the drawer is a light panel, so its contents flip back to dark ink */
  .nav{
    position:fixed;inset:0;background:var(--cream);color:var(--ink);
    flex-direction:column;justify-content:center;gap:26px;
    transform:translateY(-100%);transition:transform .4s cubic-bezier(.76,0,.24,1);
  }
  .nav a{font-size:14px;text-shadow:none}
  .nav a:hover,.nav a[aria-current=page]{color:var(--gold-dk);border-bottom-color:var(--gold-dk)}
  .nav .btn-gold{background:var(--gold-dk);border-color:var(--gold-dk);color:#fff}
  .nav .btn-gold:hover{background:var(--ink);border-color:var(--ink);color:#fff}
  /* the over-hero rules are three classes deep, so these have to match that
     weight or the home page's white text and scrim leak into the drawer */
  .nav-tel,
  .site-head.over-hero .nav-tel{display:block;color:var(--gold-dk)}
  .site-head.over-hero .nav a{text-shadow:none}
  body.nav-open{overflow:hidden}
  body.nav-open .nav{transform:translateY(0)}
}

/* ---------- buttons ---------- */
/* Flex centring with line-height:1 so the label centres on the box rather
   than on a line box carrying descender space it never uses. The extra
   pixel of top padding and the text-indent pay back what caps-only,
   letter-spaced text leaves empty below and to the right. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  /* weight matters here: without it the label inherits the body's 300,
     which at this size and tracking is what made it hard to read */
  font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1;
  letter-spacing:.13em;text-indent:.13em;
  text-transform:uppercase;padding:18px 34px 17px;
  border:1px solid var(--ink);
  transition:background .25s,color .25s,border-color .25s;cursor:pointer;
}
.btn:hover{background:var(--ink);color:#fff}
.btn-gold{background:var(--gold-dk);border-color:var(--gold-dk);color:#fff}
.btn-gold:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-light{border-color:#fff;color:#fff}
.btn-light:hover{background:#fff;color:var(--ink)}

/* ---------- hero ----------
   Full-viewport frame: headline floating in the open space, search
   block resting on the lower edge. Drop a photo at --img and it
   covers the fallback gradient. */
/* padding:0 overrides the global section padding so 100vh really is the fold */
.hero{position:relative;min-height:100vh;display:grid;padding:0;color:#fff}
/* Background slideshow.
   Every slide covers the full width of the frame, so the photo always
   bleeds edge to edge and is cropped rather than letterboxed.
   Crossfade model: the first slide is the opaque base and never animates.
   Each later slide sits above the previous one and fades IN over it, so
   nothing ever dips to the bare background mid-transition. The last slide
   then fades back OUT to reveal the base and the cycle repeats.
   24s cycle, three slides: 6.5s hold, 1.5s dissolve. */
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden;background:#1b1b19}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center 45%;background-repeat:no-repeat;
}
.hero-slide:nth-child(1){z-index:1;opacity:1}
.hero-slide:nth-child(2){z-index:2;opacity:0;animation:heroSlide2 24s infinite}
.hero-slide:nth-child(3){z-index:3;opacity:0;animation:heroSlide3 24s infinite}

@keyframes heroSlide2{
  0%,33.3%{opacity:0}
  39.6%,72.9%{opacity:1}
  73%,100%{opacity:0}
}
@keyframes heroSlide3{
  0%{opacity:1}
  6.25%,66.6%{opacity:0}
  72.9%,100%{opacity:1}
}

.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    /* the left-to-right sweep does the work: dark behind the headline, then
       fading clear so the house and its lit windows show. The top and bottom
       get only a light touch, for the menu and the search line. */
    linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.14) 12%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 62%,rgba(0,0,0,.50) 100%),
    linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.50) 22%,rgba(0,0,0,.18) 48%,rgba(0,0,0,0) 70%);
}
.hero-inner{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-rows:1fr auto;
  padding:clamp(212px,31vh,322px) var(--gut) clamp(26px,4.6vh,56px);
}
.hero-copy{align-self:start}
/* white here, not gold: the home hero only. The interior heroes keep gold. */
.hero .eyebrow{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6);max-width:none}
.hero h1{
  font-size:clamp(2.5rem,4.6vw,4.4rem);line-height:1.12;max-width:25ch;
  text-shadow:0 2px 26px rgba(0,0,0,.45);
}
.hero h1 em,.page-hero h1 em,.prose h2 em{font-style:italic;font-weight:400}

/* search block on the lower edge */
/* Narrower than the headline column and centred on the page rather than
   hung off the left gutter. Explicit width plus justify-self, not auto
   margins: auto margins on a grid item drop it to its content width. */
.hero-search{width:min(864px,92%);justify-self:center;margin-top:clamp(38px,7vh,88px)}
/* label over the search field, flush with its left edge */
.search-label{
  margin:0 0 14px;max-width:none;color:#fff;
  font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}

.searchbar{display:flex;align-items:stretch;background:#fff;box-shadow:0 20px 54px rgba(0,0,0,.3)}
.searchbar input{
  flex:1;min-width:0;height:clamp(56px,5.4vh,70px);border:0;background:transparent;
  font:inherit;font-size:15px;color:var(--ink);border-radius:0;
  padding:0 10px 0 clamp(16px,1.6vw,26px);
}
.searchbar input::placeholder{color:#8B8880}
.searchbar input:focus{outline:0}
.searchbar button{
  flex:none;width:clamp(56px,5vw,74px);border:0;background:transparent;cursor:pointer;
  color:var(--gold-dk);display:grid;place-items:center;transition:background .22s,color .22s;
}
.searchbar button:hover{background:var(--gold-dk);color:#fff}
.searchbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}

.hero-foot{display:flex;align-items:baseline;justify-content:space-between;gap:14px 36px;flex-wrap:wrap;margin-top:24px}
.hero-link{margin:0;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.hero-link a{
  display:inline-flex;align-items:center;gap:14px;padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.45);transition:color .22s,border-color .22s;
}
.hero-link a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.hero-note{margin:0;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.58)}

@media (max-width:1040px){
  .hero-inner{padding-top:clamp(120px,16vh,170px)}
  .hero-search{max-width:100%}
}
@media (max-width:560px){
  .hero-foot{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---------- interior page hero ----------
   Same photographic idiom as the home fold, at about half the height
   and sitting under the solid header rather than behind a floating one. */
.page-hero{
  position:relative;display:grid;align-items:end;padding:0;color:#fff;
  min-height:clamp(320px,44vh,470px);
}
.page-hero .ph{
  position:absolute;inset:0;z-index:0;background-color:#1b1b19;
  background-image:var(--img),linear-gradient(158deg,#4A463E 0%,#2E2C28 46%,#141310 100%);
  background-position:center 45%;
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    /* the left-to-right sweep carries most of the weight: dark behind the
       title, clear by three quarters across so the photograph opens up */
    linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.30) 100%),
    linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.60) 18%,rgba(0,0,0,.28) 46%,rgba(0,0,0,.06) 66%,rgba(0,0,0,0) 78%);
}
/* width:100% matters: .wrap carries margin:0 auto, and auto margins on a
   grid item override stretch and shrink it to its content width. */
.page-hero .wrap{position:relative;z-index:2;width:100%;padding-block:clamp(40px,6.5vh,72px)}
.page-hero .eyebrow{color:var(--gold);max-width:none;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.page-hero h1{
  font-size:clamp(1.9rem,3.4vw,3.3rem);line-height:1.18;max-width:30ch;
  text-shadow:0 2px 26px rgba(0,0,0,.45);
}

/* ---------- long-form body copy ----------
   The column is centred on the page and the page title lines up with it,
   both off --measure. That figure is the old 70ch at 16.5px, so the line
   length and therefore the wrapping are unchanged. */
.prose,.page-hero .wrap > *{max-width:var(--measure);margin-inline:auto}
/* One setting for every paragraph, at what used to be the opening
   paragraph's size. max-width:none so they fill --measure; the global
   p rule caps them at 66ch, which would otherwise narrow the column. */
.prose p{
  font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.62;color:#3A3833;
  margin-bottom:1.35em;max-width:none;
}
.prose p:last-child{margin-bottom:0}
/* opening headline, then subsection headings down the column */
/* text-wrap:balance evens the lines when a headline does wrap, instead of
   leaving a single word stranded on the last one */
.prose h2{
  font-size:clamp(1.6rem,2.5vw,2.3rem);line-height:1.2;margin:0 0 .55em;
  max-width:30ch;text-wrap:balance;
}
.prose h3{
  font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.3;
  margin:1.75em 0 .35em;color:var(--ink);
}
.prose h3 + p{margin-top:0}
/* italic serif sign-off closing a column, echoing the home page headline */
.prose .closing{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.5;
  color:var(--ink);margin-top:1.7em;
}
.prose .portrait{float:right;width:300px;height:auto;margin:6px 0 26px 38px}
/* below this the column itself is near the float's width, so wrapping text
   beside it would leave only a few words a line */
@media (max-width:700px){
  .prose .portrait{float:none;width:230px;margin:0 0 26px}
}

/* ---------- feature cards ----------
   Named apart from the older .card listing tiles. Sits outside .prose so
   it can run wider than the reading column, but still narrower than the
   full wrap so it stays related to the copy above it. */
.feature-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,28px);
  max-width:min(980px,100%);margin:clamp(40px,5vw,64px) auto;
}
.feature{
  background:var(--cream);padding:clamp(24px,2.8vw,40px);
  border:1px solid rgba(18,18,18,.2);   /* darker than --line, to read on cream */
  border-radius:8px;
}
.feature h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.3;margin:0 0 .55em;
}
/* 16.5px, not the column's 20.8px: a ~460px card at that size would run
   to about 26 characters a line */
.feature p{margin:0;max-width:none;font-size:16.5px;line-height:1.72;color:#24231F;font-weight:400}
@media (max-width:760px){
  .feature-grid{grid-template-columns:1fr}
}

/* buttons sitting side by side at the end of a page */
.cta-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:34px}
.cta-row:first-child{margin-top:0}   /* no heading above it to clear */
/* closing the reading column, so it wants more air above it than a heading does */
.prose .cta-row{margin-top:clamp(38px,5vw,58px)}

/* ---------- IDX search ---------- */
.idx{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.idx-inner{padding-block:26px}
.idx form{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:14px;align-items:end}
.idx label{display:block}
.idx label span{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:7px;font-weight:500}
.idx input,.idx select{
  width:100%;padding:12px 0;border:0;border-bottom:1px solid rgba(18,18,18,.3);
  background:transparent;font:inherit;color:var(--ink);border-radius:0;
}
.idx input:focus,.idx select:focus{outline:0;border-bottom-color:var(--gold-dk)}
.idx .note{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px}
@media (max-width:900px){.idx form{grid-template-columns:1fr 1fr}.idx .btn{grid-column:1/-1}}
@media (max-width:520px){.idx form{grid-template-columns:1fr}}

/* ---------- sections ---------- */
section{padding:clamp(60px,9vw,130px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(30px,4.5vw,58px)}
hr.rule{height:1px;background:var(--line);border:0;margin:0}

.grid{display:grid;gap:clamp(20px,2.5vw,36px)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* listing cards */
.card .ph{aspect-ratio:4/3;transition:filter .4s}
.card:hover .ph{filter:brightness(1.06)}
.card h3{margin:18px 0 5px}
.card .meta{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.card .price{font-family:var(--serif);font-size:1.32rem;margin-top:9px;color:var(--gold-dk)}
.card .status{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:8px;display:block}

/* numbered copy blocks (Buy / Sell) */
.steps{counter-reset:s;display:grid;gap:clamp(34px,4.5vw,58px)}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,46px);align-items:start}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--gold-dk);line-height:1;
}
.step h3{margin-bottom:10px}
.step p{margin-bottom:0}
@media (max-width:620px){.step{grid-template-columns:1fr;gap:10px}}

/* testimonials */
.quote{border-left:2px solid var(--gold-dk);padding-left:clamp(20px,3vw,38px)}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.3rem,2.3vw,1.95rem);line-height:1.38;font-weight:300}
.quote cite{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.band .quote{border-left-color:var(--gold)}
.band .quote cite{color:var(--gold)}

/* dark band */
.band{background:var(--grey);color:var(--cream)}
.band p{color:rgba(248,247,242,.8)}
.band h2,.band h3{color:var(--cream)}

.cream{background:var(--cream)}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,76px);align-items:center}
.split .ph{aspect-ratio:3/4}
@media (max-width:860px){.split{grid-template-columns:1fr}.split .ph{aspect-ratio:4/3}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stats .n{font-family:var(--serif);font-size:clamp(2.1rem,3.8vw,3.2rem);line-height:1;color:var(--gold-dk)}
.band .stats .n{color:var(--gold)}
.stats .l{font-size:10px;letter-spacing:.23em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.band .stats .l{color:rgba(248,247,242,.7)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr);gap:38px 24px}}

/* forms */
.field{display:block;margin-bottom:24px}
.field span{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:8px;font-weight:500}
.field input,.field textarea,.field select{
  width:100%;padding:13px 0;border:0;border-bottom:1px solid rgba(18,18,18,.3);
  background:transparent;font:inherit;color:inherit;border-radius:0;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--gold-dk)}

/* page header */
.page-head{padding:clamp(60px,9vw,120px) 0 clamp(30px,4vw,54px)}
.page-head h1{max-width:18ch}
.page-head .lede{margin-top:20px}

/* area cards */
.area .ph{aspect-ratio:16/10}
.area h3{margin:18px 0 6px}

/* footer */
.site-foot{background:var(--grey);color:rgba(248,247,242,.74);padding:clamp(54px,7vw,92px) 0 32px;font-size:13.5px}
.site-foot .brand{color:var(--cream)}
.site-foot .brand small{color:rgba(248,247,242,.62)}
.site-foot h4{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;font-weight:500}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-foot a{border-bottom:1px solid transparent}
.site-foot a:hover{color:var(--cream);border-bottom-color:var(--gold)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.foot-grid{grid-template-columns:1fr}}
.c21-logo{
  display:inline-block;border:1px solid var(--line-dk);padding:12px 16px;margin-bottom:18px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);line-height:1.7;
}
.c21-logo strong{display:block;font-size:13px;letter-spacing:.14em;color:var(--gold);font-weight:500}

.foot-grid.three{grid-template-columns:1.6fr 1fr 1.2fr}
@media (max-width:900px){.foot-grid.three{grid-template-columns:1fr 1fr}.foot-grid.three > :first-child{grid-column:1/-1}}
@media (max-width:540px){.foot-grid.three{grid-template-columns:1fr}}
/* TREC: brokerage name at least half the size of the agent's name (the
   1.28rem lockup above, about 20px), so this must stay 11px or larger */
.foot-brokerage{margin:22px 0 0;max-width:none;font-size:15px;letter-spacing:.06em;color:var(--cream)}
.foot-brokerage strong{color:var(--gold);font-weight:500;letter-spacing:.1em}
.foot-license{margin:8px 0 0;font-size:12px;letter-spacing:.08em;color:rgba(248,247,242,.6)}

/* placeholder standing in for the footer columns */
.foot-soon{
  margin:0;padding:clamp(18px,3vw,38px) 0;max-width:none;text-align:center;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(248,247,242,.55);
}

/* TREC block: required links, min 10pt, readily noticeable */
.trec{margin-top:40px;padding-top:26px;border-top:1px solid var(--line-dk)}
.trec ul{display:flex;flex-wrap:wrap;gap:10px 32px}
.trec a{
  font-size:14px;            /* >= 10pt as TREC requires */
  line-height:1.5;color:var(--gold);border-bottom:1px solid rgba(190,175,135,.5);
}
.trec a:hover{color:var(--cream);border-bottom-color:var(--cream)}
.trec .pending{color:rgba(248,247,242,.55);font-size:12px;letter-spacing:.06em;margin-top:12px}

.foot-base{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:46px;padding-top:22px;border-top:1px solid var(--line-dk);font-size:11px;letter-spacing:.1em;color:rgba(248,247,242,.6)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- market analysis ---------- */
.ma-grid{display:grid;grid-template-columns:1fr minmax(0,500px);gap:clamp(36px,6vw,96px);align-items:start}
.ma-copy .lede{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.62;max-width:none}
.ma-sub{font-size:11px;font-family:var(--sans);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dk);margin:clamp(30px,4vw,44px) 0 16px}
.ma-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:16px}
.ma-steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:14px;font-size:17px;line-height:1.6;color:#3A3833}
.ma-steps li::before{content:counter(s);font-family:var(--serif);font-size:1.7rem;line-height:1;color:var(--gold-dk)}
.ma-sig{margin:clamp(34px,4vw,48px) 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:14px;line-height:1.7;color:#3A3833}
.ma-sig-name{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--ink);margin-bottom:2px}
.ma-sig a{border-bottom:1px solid var(--gold-dk)}
.ma-card{background:#fff;border:1px solid rgba(18,18,18,.14);border-radius:8px;padding:clamp(26px,3.4vw,44px);box-shadow:0 18px 50px rgba(18,18,18,.07)}
.ma-card-title{font-size:clamp(1.5rem,2.2vw,1.9rem);margin-bottom:6px}
.ma-note{font-size:13px;color:var(--muted);margin-bottom:26px}
/* 18px, and staying at or above 16px matters: below that, iOS Safari zooms
   the page in when a field takes focus */
.ma-card .field input,.ma-card .field select{font-size:18px;color:var(--ink);padding:15px 0}
.ma-card .field span{font-size:12px;letter-spacing:.18em}
.ma-card .field input::placeholder{font-size:17px}
.ma-ethics{font-size:14px;line-height:1.6;color:#3A3833;margin:8px 0 12px;padding-top:18px;border-top:1px solid var(--line);max-width:none}
.ma-check{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.55;color:var(--ink);cursor:pointer}
.ma-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--gold-dk)}
.ma-submit{width:100%;margin-top:26px;background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ma-submit:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.ma-fine{font-size:12.5px;line-height:1.6;color:var(--muted);margin:16px 0 0;max-width:none}
.ma-fine a{color:var(--gold-dk);border-bottom:1px solid currentColor}
.ma-thanks p{font-size:17px;line-height:1.65;color:#3A3833;margin:10px 0 0}
@media (max-width:900px){.ma-grid{grid-template-columns:1fr}}

/* ---------- privacy policy: plain reading page ---------- */
.policy p,.policy li{font-size:17px;line-height:1.7}
.policy ul{margin:0 0 1.35em;padding-left:1.2em;color:#3A3833;display:grid;gap:8px}
.policy h3{margin-top:1.6em}
.policy a{color:var(--gold-dk);border-bottom:1px solid currentColor}
.policy .policy-date{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk)}

/* ---------- homepage: featured properties + seller band ---------- */
.featured h2{max-width:none;font-size:clamp(1.7rem,2.8vw,2.5rem);text-wrap:balance}
.band .narrow .eyebrow{margin-inline:auto}
.featured h2 em,.band h2 em{font-style:italic;font-weight:400}
.featured .card .ph{border-radius:4px}
.band .featured-cta{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.band .featured-cta:hover{background:#fff;border-color:#fff}
.card .ph + .status{margin-top:16px}

/* ---------- header slims down once the page scrolls (desktop) ----------
   site.js adds .is-scrolled; on the home page the bar only slims once it
   has turned solid, so the logo square stays full size over the hero. */
@media (min-width:1041px){
  .site-head .nav{transition:min-height .4s cubic-bezier(.76,0,.24,1)}
  .site-head:not(.over-hero).is-scrolled .brandmark,
  .site-head.over-hero.is-solid .brandmark{width:68px;height:68px}
  .site-head:not(.over-hero).is-scrolled .nav,
  .site-head.over-hero.is-solid .nav{min-height:68px}
}
.card-link{border-bottom:1px solid var(--gold-dk)}
.card-link:hover{color:var(--gold-dk)}
.prose a.desig{border-bottom:1px solid var(--gold-dk)}
.prose a.desig:hover{color:var(--gold-dk)}
.site-foot .brand small a.desig{border-bottom:1px solid rgba(190,175,135,.55)}
.ma-sig-desig{font-family:var(--sans);font-size:14px;letter-spacing:.08em;color:var(--gold-dk)}
.ma-sig .ma-sig-desig a{border-bottom:1px solid rgba(116,102,73,.45)}
.ma-sig .ma-sig-desig a:hover{border-bottom-color:var(--gold-dk)}
.featured-grid{max-width:none}
a.card{display:block}
a.card:hover h3{color:var(--gold-dk)}

/* ---------- Sell page: selected sales gallery (photo-led, no prices) ---------- */
.sold-head{text-align:center;margin-bottom:clamp(30px,4vw,52px)}
.sold-head em{font-style:italic;font-weight:400}
.sold{margin:0}
.sold .ph{aspect-ratio:4/3;border-radius:4px}
.sold figcaption{margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sold figcaption span{color:var(--gold-dk);font-weight:500;margin-right:6px}
.sold figcaption span::after{content:" \00B7";color:var(--muted)}
.sold-gallery .cta-row{margin-top:clamp(40px,5vw,60px)}
.home-sell{border-top:1px solid var(--line)}
.home-sell .narrow .eyebrow{margin-inline:auto}
.home-sell h2 em{font-style:italic;font-weight:400}
.home-sell p{color:#3A3833}
.home-quote{padding-top:0}
.home-quote .quote{margin:0 auto;max-width:760px}
.home-quote blockquote{font-style:italic}

/* launch: buttons in place of the hero search until IDX is connected */
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;justify-self:start;align-self:end;margin-top:clamp(38px,7vh,88px)}
.hero-cta .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.hero-cta .btn-gold:hover{background:#fff;border-color:#fff}
.home-sell h2{text-wrap:balance}
.home-sell .home-sell-lede{margin:22px auto 32px;max-width:none;text-wrap:balance}
@media (max-width:640px){.home-sell h2 br,.home-sell .home-sell-lede br{display:none}}