:root{
  /* ------------------------------------------------------------------
     Coastal Luxury. Warm white ground, charcoal type, muted sage blue as
     the brand colour, champagne used sparingly.

     Two of the specified values do not clear WCAG AA where small text is
     involved: white on #5B7F95 measures 4.27:1 and #5B7F95 as link text on
     #FAFAF9 measures 4.09:1, against the 4.5:1 body-text threshold. The
     brand colour is kept exactly as given for fills, rules, icons, borders
     and decoration; a one-step-deeper tone of the same hue carries the
     small text, which is the same "slightly deeper coastal blue" the brief
     already calls for on hover.
     ------------------------------------------------------------------ */
  --sage:#5B7F95;          /* brand: fills, rules, icons, borders */
  --sage-ink:#4E7086;      /* same hue, deeper: small text and button fills */
  --sage-dk:#456577;       /* hover */
  --champagne:#D8C3A1;     /* luxury accent, decorative and secondary CTAs */
  --champagne-dk:#C3AC88;

  --crim:var(--sage);      /* the accent hook the stylesheet already uses */
  --crim-dk:var(--sage-dk);
  --acc-rgb:91,127,149;
  --fg:#fff;               /* primary text on a photographic ground */
  --on-acc:#FFFFFF;        /* text on the accent */
  --band:#FFFFFF;
  --on-band:#2C2C2C;

  --plate-1:#FFFFFF; --plate-2:#FCFCFB; --plate-3:#F5F6F6;
  --black:#2C2C2C;         /* the ground under photography, and the footer */
  --near:#F4F5F5;
  --panel:#FFFFFF;
  --line:rgba(255,255,255,.18);
  --line-2:rgba(255,255,255,.10);
  --paper:#FAFAF9;         /* the page */
  --paper-2:#FFFFFF;       /* cards and sections needing separation */
  --ink:#2C2C2C;
  --ink-2:#4A4A4A;
  --ink-3:#5E6265;
  --w-1:rgba(255,255,255,.94);
  --w-2:rgba(255,255,255,.76);
  --w-3:rgba(255,255,255,.58);
  --cond:"Barlow Condensed",Oswald,"Arial Narrow",sans-serif;
  --sans:"Jost",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --rail:66px;
  --gut:clamp(20px,4.6vw,70px);
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--w-1);
  font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.85;
  letter-spacing:.015em;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1340px;margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:900px}
.center{text-align:center}
.muted{color:var(--w-3)}
.small{font-size:.86rem}
::selection{background:var(--crim);color:var(--on-acc)}
:focus-visible{outline:2px solid var(--crim);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--crim);color:var(--on-acc);
  padding:12px 18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}

/* ---------- display lockup: light word, heavy word ---------- */
.disp{font-family:var(--cond);text-transform:uppercase;letter-spacing:.01em;
  line-height:.9;margin:0;display:flex;flex-wrap:wrap;gap:0 .3em;align-items:baseline}
.disp .thin{font-weight:200;color:var(--fg)}
.disp .bold{font-weight:600;color:var(--fg)}
.disp.crim .thin{color:var(--crim)}
.disp.crim .bold{color:var(--crim)}
.disp.ink .thin,.disp.ink .bold{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.02em;
  line-height:.94;margin:0 0 .5em;font-weight:600;color:var(--fg)}
h1{font-size:clamp(2.6rem,6.4vw,5.4rem);font-weight:500}
h2{font-size:clamp(2rem,4.4vw,3.6rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:.07em;font-weight:500}
h4{font-size:.76rem;letter-spacing:.26em;font-weight:600}
p{margin:0 0 1.1em}
.lede{font-size:1.1rem;line-height:1.85;color:var(--w-2);font-weight:300}

/* ---------- eyebrow with its crimson rule ---------- */
.eyebrow{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:var(--w-2);margin:0 0 18px;
  display:flex;align-items:center;gap:16px;
}
.eyebrow::after{content:"";flex:0 0 84px;height:2px;background:var(--crim)}
.eyebrow.solo::after{display:none}

/* The hero now opens with a full sentence rather than a two-word label, so it
   needs normal casing and normal tracking. The eyebrow's 10px uppercase
   treatment at .32em is built for "LISTINGS", not for a line of prose. */
.eyebrow.lead-in{
  font-family:var(--sans);font-size:clamp(1rem,1.35vw,1.18rem);font-weight:300;
  letter-spacing:.005em;text-transform:none;color:var(--w-1);
  display:block;max-width:30ch;margin:0 0 16px;line-height:1.5;
  text-shadow:0 1px 16px rgba(0,0,0,.75)}
.eyebrow.lead-in::after{display:none}

/* ---------- header ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:70;
  background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,0));
  transition:background .35s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.site-head.solid{background:rgba(0,0,0,.96);border-bottom:1px solid var(--line-2)}
.site-head.hide{transform:translateY(-100%)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:22px;
  height:92px;max-width:1500px;margin-inline:auto;padding-inline:var(--gut)}
/* The brokerage lockup sits behind a hairline rule rather than floating loose
   under the name, which is what made it read as an afterthought. */
.logo{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.logo-mark{width:42px;height:42px;flex:0 0 auto}
.logo-txt{font-family:var(--cond);text-transform:uppercase;line-height:1}
.logo-txt b{display:block;font-weight:600;font-size:25px;letter-spacing:.17em;color:#fff;
  white-space:nowrap;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.logo-txt > span{display:block;font-family:var(--sans);font-size:10.5px;font-weight:400;
  letter-spacing:.17em;color:var(--w-2);margin-top:7px;white-space:nowrap;
  padding-top:7px;border-top:1px solid rgba(255,255,255,.22)}
.logo-txt .lg-broker,.logo-txt .lg-lic{display:inline;border:0;margin:0;padding:0}
/* "Optimum First Inc" is the brokerage and carries the weight; the licence
   number beside it is reference, so it stays quieter. */
.logo-txt .lg-broker{color:#fff;font-weight:600;letter-spacing:.14em}
.mainnav{display:flex;align-items:center;gap:clamp(12px,1.9vw,30px)}
.mainnav a{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--w-1);position:relative;padding:6px 0;white-space:nowrap}
.mainnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--crim);transition:right .32s cubic-bezier(.22,.61,.36,1)}
.mainnav a:hover::after,.mainnav a[aria-current]::after{right:0}
.head-call{display:inline-flex;align-items:center;gap:12px;font-family:var(--cond);
  font-size:30px;font-weight:600;letter-spacing:.05em;color:#fff;white-space:nowrap;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
.head-call svg{width:25px;height:25px;stroke-width:2.1;color:var(--crim)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:1.5px;background:#fff;margin:5px 0;
  transition:transform .3s,opacity .3s}
.burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- left social rail ---------- */
.rail{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:60;
  width:var(--rail);display:flex;flex-direction:column;align-items:center;gap:20px}
.rail a{color:var(--w-3);transition:color .2s,transform .2s}
.rail a:hover{color:var(--crim);transform:translateY(-2px)}
.rail svg{width:15px;height:15px;display:block}

/* ---------- full-bleed hero slideshow ---------- */
.phero{position:relative;height:min(100svh,940px);min-height:560px;overflow:hidden;
  background:var(--black);display:flex;align-items:flex-end}
.heroslides{position:absolute;inset:0;z-index:0}
.heroslide{position:absolute;inset:0;opacity:0;transition:opacity 2s ease-in-out}
.heroslide.is-on{opacity:1}
.heroslide img{width:100%;height:100%;object-fit:cover}
.motion .heroslide.is-on img{animation:kb 16s ease-out forwards}
@keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.1)}}
.phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 32%,
             rgba(0,0,0,.42) 68%,rgba(0,0,0,.88) 100%)}
.phero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(60px,9vw,120px)}
.hero-copy{max-width:640px}
.hero-copy h1{max-width:12ch}
.hero-copy .eyebrow{max-width:none;white-space:nowrap}
.phero h1{color:#fff;font-weight:500;letter-spacing:.005em;
  text-shadow:0 2px 30px rgba(0,0,0,.6)}
/* A single word carries a much larger size than the old two-word lockup did. */
.phero h1.disp{font-size:clamp(3.4rem,9.2vw,7.6rem);letter-spacing:.012em}
.phero .lede{color:var(--w-1);max-width:46ch;margin-top:1em;
  text-shadow:0 1px 16px rgba(0,0,0,.7)}
.scrollcue{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--w-3)}
.scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(
  180deg,rgba(255,255,255,.5),rgba(255,255,255,0))}
.motion .scrollcue i{animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---------- sections ---------- */
section,.sec{padding-block:clamp(66px,8vw,124px);background:var(--black)}
.sec-alt{background:var(--near)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
  margin-bottom:clamp(30px,4vw,54px);flex-wrap:wrap}
.sec-head .disp{font-size:clamp(2.2rem,5.4vw,4.6rem)}
.sec-head p{max-width:62ch;color:var(--w-2);margin:16px 0 0}

/* ---------- crimson pill button ---------- */
.pill{display:inline-flex;align-items:center;gap:14px;background:var(--crim);color:var(--on-acc);
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  padding:16px 26px;border:0;cursor:pointer;
  transition:background .28s ease,gap .28s ease}
.pill:hover{background:#fff;color:var(--black);gap:20px}
.pill .plus{position:relative;width:12px;height:12px;flex:0 0 auto}
.pill .plus::before,.pill .plus::after{content:"";position:absolute;background:currentColor}
.pill .plus::before{left:0;right:0;top:5.5px;height:1.5px}
.pill .plus::after{top:0;bottom:0;left:5.5px;width:1.5px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;padding:17px 32px;border:1px solid var(--line);
  color:var(--fg);background:none;cursor:pointer;position:relative;overflow:hidden;
  transition:color .3s ease,border-color .3s ease}
.btn::before{content:"";position:absolute;inset:0;background:var(--crim);z-index:-1;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.btn>*{position:relative;z-index:1}
.btn:hover{border-color:var(--crim)}
.btn:hover::before{transform:scaleX(1)}
.btn-primary,.btn-brass,.btn-gold,.btn-on-dark{background:var(--crim);border-color:var(--crim)}
.btn-primary::before,.btn-brass::before,.btn-gold::before,.btn-on-dark::before{background:#fff}
.btn-primary:hover,.btn-brass:hover,.btn-gold:hover,.btn-on-dark:hover{color:var(--black);border-color:#fff}
.btn-ghost,.btn-outline-light{border-color:var(--line);color:var(--fg)}
.btn-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}

/* ---------- property / closing cards ---------- */
.tx-grid,.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.tx-grid.feature{grid-template-columns:repeat(2,1fr)}
.tx-card{position:relative;display:block;border-radius:var(--r);overflow:hidden;
  aspect-ratio:10/7;background:var(--panel);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s}
.tx-card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.tx-media{position:absolute;inset:0}
.tx-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.tx-card:hover .tx-media img{transform:scale(1.07)}
.tx-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 30%,
             rgba(0,0,0,.42) 58%,rgba(0,0,0,.94) 100%)}
.tx-chip{position:absolute;left:0;top:clamp(14px,1.8vw,20px);z-index:3;
  background:var(--crim);color:var(--on-acc);font-size:8.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;padding:6px 12px 6px 14px}
.tx-body{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,2.2vw,28px);display:flex;flex-direction:column}
.tx-flag{display:none}
.tx-flag:empty{display:none}
.tx-price{font-family:var(--cond);font-weight:500;font-size:clamp(1.5rem,2.5vw,2.1rem);
  line-height:1;letter-spacing:.03em;color:var(--fg);margin:0}
.tx-rule,.card-rule{display:block;width:44px;height:3px;background:var(--crim);margin:9px 0 11px}
.tx-body h3,.tx-addr,.card-addr{font-family:var(--cond);font-weight:300;
  font-size:clamp(.95rem,1.4vw,1.2rem);letter-spacing:.16em;text-transform:uppercase;
  color:var(--w-1);margin:0}
.tx-sub,.card-meta{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--w-2);margin:8px 0 0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tx-side{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--crim);margin:0 0 8px}
.tx-meta{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:2px 10px;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--w-3)}
.tx-meta li{display:inline-flex;align-items:center;white-space:nowrap}
.tx-meta li:not(:last-child)::after{content:"\00B7";margin-left:10px;color:var(--crim)}
.tx-foot{margin-top:0;padding:0;border:0;display:block}
.tx-go{display:none}
.tx-plate{background:var(--panel)}
.tx-media.tx-plate{position:absolute;inset:0;display:grid;place-items:start center;
  padding-top:clamp(26px,4vw,48px);
  background:linear-gradient(160deg,var(--plate-1) 0%,var(--plate-2) 52%,var(--plate-3) 100%)}
.tx-media.tx-plate::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 92% 4%,rgba(var(--acc-rgb),.16),transparent 58%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 9px)}
.tx-plate .pl-city{position:relative;font-family:var(--cond);text-transform:uppercase;
  color:var(--w-2);font-size:1.25rem;letter-spacing:.2em;text-align:center}
.tx-plate .pl-rule{position:relative;display:block;width:30px;height:2px;
  background:var(--crim);margin:10px auto 0}
.tx-plate .pl-year{position:relative;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--w-3);margin-top:9px;text-align:center}
.tx-ask{background:var(--panel);display:flex;align-items:flex-end;
  padding:clamp(20px,2.4vw,30px)}
.tx-ask::after{display:none}
.tx-ask-eyebrow{font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--crim);display:block;margin-bottom:10px}
.tx-ask strong{font-family:var(--cond);font-size:1.4rem;font-weight:400;letter-spacing:.04em;
  text-transform:uppercase;display:block;margin-bottom:10px;color:var(--fg)}
.tx-ask-body{color:var(--w-3);font-size:.86rem;display:block}
.tx-ask-go{display:inline-block;margin-top:14px;font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--crim)}
.tx-more{margin-top:34px}
.tx-note,.tx-note-inline{font-size:.82rem;color:var(--w-3)}
.tx-price-na{font-family:var(--cond);font-size:1.2rem;letter-spacing:.06em;color:var(--w-3)}

/* ---------- stats over a photograph ---------- */
.statband{position:relative;overflow:hidden;padding-block:clamp(70px,9vw,130px)}
.statband > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.statband::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.8))}
.statband > img{filter:grayscale(.35) contrast(1.05)}
.statband .wrap{position:relative;z-index:2;display:grid;
  grid-template-columns:1fr auto;gap:clamp(26px,4vw,60px);align-items:center}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.6vw,52px)}
.stat b{display:block;font-family:var(--cond);font-weight:300;
  font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:1;letter-spacing:.01em;color:var(--fg)}
.stat b em{font-style:normal;color:var(--crim)}
.stat i{display:block;height:1px;background:var(--line);margin:14px 0 12px}
.stat > span{display:block;font-size:9.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--w-3)}
/* .stat span outranks .count on specificity, which shrank the figures to
   label size and broke "$23M+" across three lines. Match it with .stat b .count. */
.stat b .count{font:inherit;letter-spacing:inherit;color:inherit;text-transform:none;
  display:inline}
/* the rotated heading on the right edge */
.vhead{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--cond);
  text-transform:uppercase;line-height:.88;letter-spacing:.02em;
  font-size:clamp(2.2rem,4vw,3.6rem);color:var(--fg);display:flex;gap:.08em;align-items:flex-start}
.vhead .thin{font-weight:200}
.vhead .bold{font-weight:600}
.vlabel{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--w-3);
  display:flex;align-items:center;gap:14px}
.vlabel::after{content:"";width:2px;height:54px;background:var(--crim)}
.vstack{display:flex;gap:16px;align-items:flex-start}

/* ---------- full-bleed link band ---------- */
.linkband{position:relative;overflow:hidden;padding-block:clamp(70px,9vw,120px)}
.linkband > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.linkband::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.66)}
.linkband .wrap{position:relative;z-index:2}
.linkrow{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.linkrow a{display:block;padding:8px clamp(14px,2vw,30px);border-left:1px solid var(--line);
  font-family:var(--cond);text-transform:uppercase;font-weight:300;
  font-size:clamp(1.3rem,2.3vw,2rem);line-height:1.02;letter-spacing:.04em;color:var(--w-1);
  transition:color .25s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.linkrow a:last-child{border-right:1px solid var(--line)}
.linkrow a b{display:block;font-weight:600;color:var(--fg)}
.linkrow a:hover{color:var(--crim);transform:translateY(-3px)}
.linkrow a:hover b{color:var(--crim)}

/* ---------- about band ---------- */
.aboutband{position:relative;background:var(--near);overflow:hidden;
  padding-block:clamp(66px,8vw,120px)}
/* The portrait was running nearly half the band's width. It is now a fixed
   circle sized to the type beside it, with the backdrop removed and an offset
   clay ring picking up the accent rules used elsewhere. */
.about-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(34px,5vw,78px);
  align-items:center;position:relative;z-index:2}
.portrait{position:relative;flex:0 0 auto;
  width:clamp(220px,23vw,330px);height:clamp(220px,23vw,330px)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  border-radius:50%;background:rgba(255,255,255,.05);position:relative;z-index:2}
.portrait::after{content:"";position:absolute;inset:-15px -15px 15px 15px;
  border:2px solid var(--crim);border-radius:50%;z-index:1}
.name-lock{font-size:clamp(2.6rem,6vw,5rem);margin-bottom:.1em}
.name-lock .thin{color:var(--crim);font-weight:200}
.name-lock .bold{color:var(--fg);font-weight:600}
.role{font-family:var(--sans);font-size:1rem;font-weight:300;color:var(--w-2);
  margin:6px 0 0;letter-spacing:.06em;text-transform:uppercase}
.bio{margin-top:26px;max-width:62ch}
.bio p{color:var(--w-2);margin:0 0 20px;line-height:1.9}
.cinfo{display:flex;flex-wrap:wrap;gap:20px 46px;margin-top:26px}
.cinfo dl{margin:0}
.cinfo dt{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--w-3);
  font-weight:500;margin-bottom:6px}
.cinfo dd{margin:0;font-family:var(--cond);font-size:1.35rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.cinfo dd a:hover{color:var(--crim)}

/* ---------- proof strip ---------- */
.proof{background:var(--black);border-block:1px solid var(--line-2);
  padding-block:clamp(34px,4vw,58px)}
.proof-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:26px 44px}
.proof-item{display:flex;align-items:center;gap:14px}
.proof-item .stars{color:var(--crim);font-size:17px;letter-spacing:3px;line-height:1}
.proof-item b{font-family:var(--cond);font-size:1.9rem;font-weight:500;letter-spacing:.04em;
  color:var(--fg);line-height:1}
.proof-item span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--w-3);max-width:24ch}

/* ---------- interior page hero ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--black);
  padding-block:clamp(120px,13vw,190px) clamp(46px,6vw,84px);
  border-bottom:1px solid var(--line-2)}
.page-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.34}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.9))}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{max-width:17ch}
.page-hero h1.disp{font-size:clamp(2.6rem,6.2vw,5.2rem)}
.page-hero .lede{max-width:62ch;margin-top:1em}
.page-hero-tight{padding-block:clamp(110px,11vw,150px) clamp(32px,4vw,52px)}
.crumb{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--w-3);
  margin:0 0 18px}
.crumb a{color:var(--w-3)}
.crumb a:hover{color:var(--crim)}

/* ---------- generic content ---------- */
main a:not(.btn):not(.pill):not(.tx-card):not(.logo):not(.card-link):not(.linkrow a){
  color:var(--fg);background-image:linear-gradient(var(--crim),var(--crim));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .28s cubic-bezier(.22,.61,.36,1)}
main a:not(.btn):not(.pill):not(.tx-card):not(.logo):hover{background-size:100% 1px}
.grid{display:grid;gap:clamp(14px,1.8vw,24px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,70px);align-items:start}
.split.narrow-left{grid-template-columns:.82fr 1.18fr}
.card{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(22px,2.8vw,32px);
  transition:border-color .28s ease,transform .32s cubic-bezier(.22,.61,.36,1)}
.card h3{color:var(--fg)}
.card p{color:var(--w-2);font-size:.94rem}
.card-link:hover{border-color:var(--crim);transform:translateY(-4px)}
.card-more{margin-top:auto;padding-top:14px;font-size:9.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--crim)}
.panel{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(24px,3.2vw,42px)}
.panel-dark{background:var(--black)}
.sec-tint{background:var(--near)}
.tight{padding-block:clamp(48px,6vw,84px)}
.rule,hr.rule{border:0;border-top:1px solid var(--line-2);margin:0}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0}
.chips a{display:inline-block;padding:11px 20px;border:1px solid var(--line);
  font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--w-2);transition:border-color .2s,color .2s,transform .2s}
.chips a:hover{border-color:var(--crim);color:#fff;transform:translateY(-2px)}
.area-note{margin-top:20px;color:var(--w-3);font-size:.86rem}
.steps{list-style:none;counter-reset:s;margin:0;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 28px 70px;
  border-left:1px solid var(--line-2);margin-left:21px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:-21px;top:-4px;
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--black);border:1px solid var(--crim);color:var(--crim);
  font-family:var(--cond);font-size:1rem;font-weight:500}
.steps p{color:var(--w-2);margin:0}
.numcard .num{font-family:var(--cond);font-size:2.5rem;font-weight:200;color:var(--crim);
  line-height:1;display:block;margin-bottom:10px}
.ticks{list-style:none;margin:24px 0 0;padding:0}
.ticks li{position:relative;padding-left:28px;margin-bottom:12px;color:var(--w-2);font-size:14px}
.ticks li::before{content:"";position:absolute;left:0;top:11px;width:15px;height:1px;
  background:var(--crim)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--cond);font-size:clamp(1rem,1.6vw,1.3rem);font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;
  border-right:1.5px solid var(--crim);border-bottom:1.5px solid var(--crim);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--crim)}
.faq .a{padding:0 0 22px;max-width:74ch}
.faq .a p{color:var(--w-2);margin:0}

/* ---------- tables ---------- */
.tablewrap,.table-scroll{width:100%;overflow-x:auto;min-width:0;max-width:100%}
table.data{border-collapse:collapse;width:100%;font-size:.9rem;min-width:520px}
table.data th{text-align:left;font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--w-3);padding:13px 18px 13px 0;
  border-bottom:1px solid var(--line)}
table.data td{padding:15px 18px 15px 0;border-bottom:1px solid var(--line-2);
  color:var(--w-2);vertical-align:top}

/* ---------- forms ---------- */
.form-card{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(24px,3.2vw,40px)}
.field{margin-bottom:20px}
.field label,.wiz label{display:block;font-size:9.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--w-3);margin-bottom:8px}
.field input,.field select,.field textarea,input[type=text],input[type=email],
input[type=tel],select,textarea{
  width:100%;font-family:var(--sans);font-size:15px;font-weight:300;color:var(--fg);
  background:rgba(255,255,255,.04);border:0;border-bottom:1px solid var(--line);
  padding:12px 10px;border-radius:0;transition:border-color .3s,background .3s}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--crim);
  background:rgba(255,255,255,.07)}
select option{background:var(--panel);color:var(--fg)}
::placeholder{color:var(--w-3)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.form-note,.consent{font-size:11px;line-height:1.7;color:var(--w-3);margin-top:14px}
.hint{font-size:12px;color:var(--w-3);margin-top:12px}
.hp{position:absolute;left:-9999px}
.sub{color:var(--w-2);max-width:60ch}

/* ---------- search band in the hero ---------- */
.hero-search{max-width:940px;margin-top:clamp(26px,3.4vw,40px)}
.seg{display:inline-flex;background:rgba(255,255,255,.1);border:1px solid var(--line);
  margin-bottom:12px}
.seg button{background:none;border:0;color:var(--w-2);cursor:pointer;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;padding:13px 22px;transition:background .25s,color .25s}
.seg button[aria-selected=true]{background:var(--crim);color:var(--on-acc)}
.searchpanel,.addrbar{background:rgba(10,10,12,.82);border:1px solid var(--line);
  padding:clamp(14px,1.8vw,20px);backdrop-filter:blur(8px)}
.sp-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.sp-field{flex:1 1 0;min-width:120px}
.sp-grow{flex:2 1 220px}
/* The contact row is folded away until the visitor presses the button once.
   It is display:none rather than height:0 so its required fields do not block
   submission while hidden, and the class is added by script, so a browser with
   no JavaScript simply sees the whole form at once. */
.sp-prompt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(.92rem,1.15vw,1.05rem);font-weight:600;color:#fff;
  margin:0 0 12px;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.sp-contact{margin-top:12px}
.sp-contact.is-folded{display:none}
.sp-contact .sp-field{flex:1 1 150px}

/* shown on /contact/ when the handler bounced a submission */
.formerror{margin-bottom:26px;padding:16px 20px;border-radius:var(--r);
  background:rgba(176,58,46,.08);border:1px solid rgba(176,58,46,.34);color:#7E2B22}
.formerror strong{color:#7E2B22}
.formerror a{color:#7E2B22;text-decoration:underline}
.sp-go{flex:0 0 auto}

/* ---------- financing band ---------- */
.finband,.mortband{background:var(--near);border-block:1px solid var(--line-2);
  padding-block:clamp(44px,5.4vw,76px)}
.finband .wrap{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.finband h3{color:var(--fg)}
.finband p{color:var(--w-2);max-width:66ch;margin:0}

/* ---------- cta band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--band);
  padding-block:clamp(58px,7vw,100px);text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.88);max-width:58ch;margin-inline:auto}
.cta-band .btn{border-color:rgba(255,255,255,.5)}
.cta-band .btn::before{background:#fff}
.cta-band .btn:hover{color:var(--crim);border-color:#fff}
.cta-band .btn-on-dark{background:var(--crim);border-color:var(--crim);color:var(--on-acc)}
.cta-band .btn-on-dark::before{background:var(--black)}
.cta-band .btn-on-dark:hover{color:#fff}
.cta-band .btn-row{justify-content:center}

/* ---------- footer ---------- */
.site-foot{background:var(--black);border-top:1px solid var(--line-2);
  color:var(--w-3);padding-block:clamp(50px,6vw,84px);font-size:13px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}
.foot-grid h4{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:#fff;
  margin:0 0 15px;font-weight:600}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:9px}
.foot-grid a:hover{color:var(--crim)}
.of-full{width:200px;height:auto;display:block;margin-bottom:18px}
.legal{border-top:1px solid var(--line-2);margin-top:42px;padding-top:26px;
  font-size:11px;line-height:1.8;color:var(--w-3)}
.legal strong{color:var(--w-2)}
.eho{color:var(--crim);vertical-align:middle;margin-right:11px}

/* ---------- sticky mobile call bar ---------- */
.callbar{display:none}

/* ---------- reveals ---------- */
.rv,.reveal{opacity:0;transform:translate3d(0,26px,0)}
.motion .rv,.motion .reveal{transition:opacity .85s cubic-bezier(.22,.61,.36,1),
  transform .85s cubic-bezier(.22,.61,.36,1)}
.motion .rv.in,.motion .reveal.in{opacity:1;transform:none}
.motion .rv-d1{transition-delay:.09s}
.motion .rv-d2{transition-delay:.18s}
.motion .rv-d3{transition-delay:.27s}
.motion .disp .thin,.motion .disp .bold{display:inline-block}
.motion .sec-head .disp .thin,.motion .sec-head .disp .bold,
.motion .page-hero h1 .thin,.motion .page-hero h1 .bold,
.motion .name-lock .thin,.motion .name-lock .bold{
  opacity:0;letter-spacing:.24em;transform:translate3d(0,10px,0);
  animation:dispIn 1.15s cubic-bezier(.19,1,.22,1) forwards}
.motion .sec-head .disp .bold,.motion .page-hero h1 .bold,.motion .name-lock .bold{
  animation-delay:.14s}
@keyframes dispIn{to{opacity:1;letter-spacing:.01em;transform:none}}
.count{font-variant-numeric:tabular-nums}

.contact-lines p{margin:0 0 12px}
.big-link{font-size:1.16rem;font-weight:600;color:var(--sage-ink);
  text-decoration:underline;text-underline-offset:4px}
.idx-note,.num,.numcard{color:var(--w-2)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  :root{--rail:0px}
  .rail{display:none}
  .mainnav{position:fixed;inset:92px 0 auto 0;background:rgba(0,0,0,.98);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 24px;
    border-bottom:1px solid var(--line-2);transform:translateY(-12px);opacity:0;
    pointer-events:none;transition:opacity .28s,transform .28s}
  .mainnav.open{opacity:1;transform:none;pointer-events:auto}
  .mainnav a{padding:16px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
  .mainnav a::after{display:none}
  .burger{display:block}
}
@media (max-width:1024px){
  .tx-grid,.cards,.g3,.g4{grid-template-columns:repeat(2,1fr)}
  .stat-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .statband .wrap{grid-template-columns:1fr}
  .vstack{display:none}
  .linkrow{grid-template-columns:repeat(2,1fr);gap:1px 0}
  .linkrow a{border-top:1px solid var(--line);padding-block:18px}
  .about-grid,.split,.split.narrow-left,.finband .wrap{grid-template-columns:1fr}
  .portrait{width:min(70vw,300px);height:min(70vw,300px)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{padding-bottom:62px}
  .tx-grid,.tx-grid.feature,.cards,.g2,.g3,.g4{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .field-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .head-call span{display:none}
  .head-call svg{width:27px;height:27px}
  .logo-mark{width:34px;height:34px}
  .logo-txt b{font-size:18px;letter-spacing:.1em}
  /* Both licence numbers on one line are wider than a phone, and nowrap was
     shoving the phone icon and the burger off the right edge. Let the line
     wrap instead, and let the logo block shrink so it cannot push them out.
     The header height stays 92px, which the mobile nav panel is pinned to. */
  /* .logo is flex:0 0 auto in the base rule, so min-width alone changed
     nothing: it was never allowed to shrink in the first place. */
  .logo{flex:0 1 auto;min-width:0}
  .logo-txt{min-width:0}
  .logo-txt span{font-size:8.5px;letter-spacing:.08em;margin-top:5px;padding-top:5px;
    white-space:normal;line-height:1.5}
  .logo-txt .lg-broker{white-space:nowrap}
  .eyebrow::after{flex-basis:44px}
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;
    z-index:80;padding-bottom:env(safe-area-inset-bottom,0px)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:17px 10px;
    font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff}
  .callbar .c1{background:var(--crim)}
  .callbar .c2{background:var(--panel)}
  .callbar svg{width:14px;height:14px}
}
@media (max-width:380px){
  /* Below about 380px the two licence numbers need a third line and the logo
     block starts overlapping the hero. They stay on every page in the footer,
     which is where that disclosure belongs anyway, so the header keeps the
     brokerage name alone at this size. */
  .logo-txt .lg-lic{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv,.reveal{opacity:1!important;transform:none!important}
  .motion .disp .thin,.motion .disp .bold{opacity:1!important;letter-spacing:.01em!important;
    transform:none!important}
}
@media print{.site-head,.rail,.callbar,.cta-band{display:none!important}}

/* ---------- section head: stacked by default, split only when it carries
     a second element such as the View all pill ---------- */
.sec-head{flex-direction:column;align-items:flex-start;justify-content:flex-start}
.sec-head.row{flex-direction:row;align-items:flex-end;justify-content:space-between}
.sec-head h2{margin:0}
.sec-head.row > div{flex:1 1 420px}

/* ---------- the mortgage band ---------- */
.mb-grid{display:grid;grid-template-columns:1.35fr .65fr;
  gap:clamp(28px,4vw,64px);align-items:start}
.mb-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.mb-points li{position:relative;padding-left:26px}
.mb-points li::before{content:"";position:absolute;left:0;top:10px;width:14px;height:1px;
  background:var(--crim)}
.mb-points strong{display:block;font-family:var(--cond);font-size:1.05rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg);margin-bottom:4px}
.mb-points span{display:block;color:var(--w-2);font-size:.92rem;line-height:1.7}
.mb-side{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(22px,2.8vw,32px)}
.mb-side-lede{color:var(--w-2);font-size:.9rem}
.mb-ids{margin:20px 0 0;display:grid;gap:14px}
.mb-ids > div{display:block}
.mb-ids dt{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--w-3);
  margin:0 0 5px}
.mb-ids dd{margin:0;font-family:var(--cond);font-size:1.05rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg)}
.mb-choice{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2);
  font-size:.86rem;color:var(--w-3)}
.mb-choice strong{color:var(--fg)}
.mb-legal{margin-top:34px;font-size:11px;line-height:1.75;color:var(--w-3);max-width:96ch}
.mb-note{font-size:11px;color:var(--w-3);margin-top:12px}

/* ---------- the Optimum First lockup, reversed for the dark ground ---------- */
.of-lockup{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.of-mark{flex:0 0 auto;width:42px;height:42px;display:block}
.of-words{display:flex;flex-direction:column;line-height:1}
.of-eyebrow{font-size:8px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--gold);margin-bottom:5px}
.of-name{font-family:var(--sans);font-size:1.05rem;font-weight:600;letter-spacing:-.01em;
  color:var(--fg);white-space:nowrap}
.of-name b{font-weight:600;color:var(--gold)}

/* ---------- the Zillow badge ---------- */
.zbadge{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--line);
  padding:13px 20px;margin:22px 0 0;transition:border-color .25s}
.zbadge:hover{border-color:var(--crim)}
.zb-stars{color:var(--crim);font-size:15px;letter-spacing:2px;line-height:1}
.zb-text{font-size:11px;letter-spacing:.06em;color:var(--w-2)}
.zb-text strong{color:var(--fg);font-family:var(--cond);font-size:1.2rem;letter-spacing:.04em}

/* ---------- photo band on the interior pages ---------- */
.photoband{position:relative;overflow:hidden;padding-block:clamp(60px,7.5vw,104px)}
.photoband > img,.photoband picture img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;filter:grayscale(.3)}
.photoband::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.84),rgba(0,0,0,.76))}
.photoband .wrap{position:relative;z-index:2}
.photoband h2,.photoband h3{color:#fff}
.photoband p{color:var(--w-2)}

/* ---------- criteria wizard ---------- */
.wiz{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(22px,3vw,38px)}
.wiz-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  margin-bottom:20px}
.wiz-progress{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--w-3)}
.wiz-q{font-family:var(--cond);font-size:1.4rem;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--fg);margin:0 0 18px}
.wiz-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:22px}
.wiz-back{background:none;border:0;color:var(--w-3);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;cursor:pointer}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.opt{border:1px solid var(--line);padding:15px 16px;cursor:pointer;color:var(--w-1);
  font-size:13px;background:none;text-align:left;transition:border-color .2s,background .2s}
.opt:hover,.opt.on{border-color:var(--crim);background:rgba(var(--acc-rgb),.12)}

/* ---------- gallery pages ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gal-item{border-radius:var(--r);overflow:hidden;background:var(--panel)}
.gal-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.gal-head{margin-bottom:26px}
.gal-lead{border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.propfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;
  margin:26px 0;padding:22px 0;border-block:1px solid var(--line-2)}
.pf dt{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--w-3);
  margin-bottom:6px}
.pf dd{margin:0;font-family:var(--cond);font-size:1.3rem;letter-spacing:.05em;color:var(--fg)}
@media (max-width:980px){.mb-grid{grid-template-columns:1fr}}
@media (max-width:820px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gal-grid{grid-template-columns:1fr}}

/* The grid-child min-width:auto trap again: the logo lockup will not wrap, so
   it held the mortgage aside open past a phone screen, and the 520px table
   did the same on the About page. */
.grid>*,.split>*,.wrap>*,.foot-grid>*,.about-grid>*,.mb-grid>*,.sec-head>*,
.statband .wrap>*,.proof-in>*,.linkrow>*{min-width:0}
.of-lockup{flex-wrap:wrap}
.of-name{white-space:normal}
@media (max-width:430px){
  .of-mark{width:34px;height:34px}
  .of-name{font-size:.95rem}
}

/* The eyebrow is a flex row holding text plus its rule. Nowrap kept the rule
   on the same line but ran the service-area line off the side of a phone. */
.eyebrow{flex-wrap:wrap;row-gap:10px}
.hero-copy .eyebrow{white-space:normal}
.eyebrow::after{flex:0 0 84px}
@media (max-width:820px){
  /* The :not() keeps the 9px label treatment away from the hero's opening
     sentence, which is prose and has its own size. */
  .hero-copy .eyebrow:not(.lead-in){font-size:9px;letter-spacing:.24em}
  .hero-copy .eyebrow::after{flex-basis:40px}
  .hero-copy .eyebrow.lead-in{font-size:1.02rem;max-width:26ch;margin-bottom:12px}
}

/* Interior openers were flat black where ogroup keeps photography under
   everything. One shared image, heavily darkened, so the type still leads. */
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("/assets/img/hero-2.jpg") center/cover no-repeat;
  opacity:.3;filter:grayscale(.4);
}
.page-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.66),rgba(0,0,0,.92))}

/* Counts above the closed-transaction grid. */
.txstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px;background:var(--line-2);border:1px solid var(--line-2);
  border-radius:var(--r);overflow:hidden;margin:0 0 clamp(36px,4.6vw,64px)}
.txstats > div{background:var(--panel);padding:26px 20px;text-align:center}
.txstats strong{display:block;font-family:var(--cond);font-weight:500;
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;letter-spacing:.03em;color:var(--fg)}
.txstats span{display:block;margin-top:11px;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--w-3);line-height:1.6}
@media (max-width:640px){.txstats{grid-template-columns:repeat(2,1fr)}}

/* Full-bleed background images inside photo sections. */
.phero img.bg,.photoband img.bg,.page-hero img.bg,section img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tx-media.has-photo{background:var(--panel)}
.tx-count{position:absolute;right:14px;bottom:14px;z-index:3;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--w-2);
  background:rgba(0,0,0,.55);border:1px solid var(--line);border-radius:100px;
  padding:5px 11px;backdrop-filter:blur(4px)}

/* Listing gallery pages. */
.gal-head{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(24px,3.4vw,44px);
  align-items:start}
@media (max-width:900px){.gal-head{grid-template-columns:1fr;gap:24px}}
.gal-h{font-family:var(--cond);font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;font-size:1.35rem;color:var(--fg);margin:38px 0 18px}
.gal-side .lede{font-size:1rem;margin:0}
.gal-side .propfacts{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-bottom:18px}
.gal-cta{margin-top:22px;padding:24px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel)}
.gal-cta p{margin:0 0 10px;color:var(--w-2)}
.gal-cta .btn{margin-top:8px}

/* Rate-path radio options on the financing pages. */
.rateopt{border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r);padding:18px 20px;margin-bottom:12px}
.rateopt:hover{border-color:rgba(var(--acc-rgb),.5)}
.rateopt label{display:flex;gap:13px;align-items:flex-start;cursor:pointer;margin:0}
.rateopt input{flex:0 0 auto;width:20px;height:20px;margin-top:2px;
  accent-color:var(--crim);cursor:pointer}
.rateopt .r-t{display:block;margin-bottom:5px;font-family:var(--cond);font-weight:400;
  font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.rateopt .r-d{display:block;font-size:.9rem;color:var(--w-2);line-height:1.65}
.rateopt .r-legal{margin:12px 0 0;font-size:.78rem;color:var(--w-3);line-height:1.6}

/* Step wizard: only the active step is visible. */
.wiz-body{padding:0 clamp(20px,3vw,34px)}
.wiz-step{display:none}
.wiz-step.on{display:block}

/* Misc leftovers. */
.opt-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:620px){.opt-grid.three{grid-template-columns:repeat(2,1fr)}}
.mb-main .lede{max-width:56ch}
.ph-icon{flex:0 0 auto}
.site-foot ul.socials{list-style:none;margin:0;padding:0}
.site-foot ul.socials li{margin-bottom:.62em}

/* The breadcrumb sits above <main>, so at its natural position the fixed
   header painted straight over it. Lift it into the top of the hero instead. */
.crumb-bar{position:absolute;top:0;left:0;right:0;z-index:6;pointer-events:none;
  padding-top:clamp(92px,9.4vw,116px)}
.crumb-bar .crumb{pointer-events:auto;margin:0}
.crumb span{margin-inline:6px;opacity:.5}
/* "Optimum First Inc ·" is a span inside .logo-txt span, which had set it to
   block and stranded the separator at the end of its own line. */
.logo-txt .lg-broker{display:inline}

/* Credit for photographs that came off the MLS. Sits above the card's
   bottom gradient so the attribution stays readable. */
.tx-credit{position:absolute;right:12px;bottom:10px;z-index:4;
  font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);background:rgba(0,0,0,.5);
  border-radius:100px;padding:3px 8px;line-height:1;pointer-events:none}
.tx-count + .tx-credit{bottom:42px}

/* ---- photographic sections: a neutral charcoal veil, so the colour in the
   photograph stays the colour you see rather than being tinted by the brand */
.phero::after{background:linear-gradient(180deg,rgba(30,32,34,.58) 0%,rgba(30,32,34,.10) 32%,
  rgba(30,32,34,.32) 68%,rgba(30,32,34,.86) 100%)}
.page-hero::after{background:linear-gradient(180deg,rgba(30,32,34,.54),rgba(30,32,34,.84))}
.tx-card::after{background:linear-gradient(180deg,rgba(28,30,32,0) 32%,rgba(28,30,32,.84) 100%)}

/* ---- the header stays clean and light: a hairline over the photograph,
   solid warm white once you scroll past it. No block of brand colour. ---- */
.site-head{background:linear-gradient(180deg,rgba(28,30,32,.62),rgba(28,30,32,0))}
.site-head.solid{background:rgba(250,250,249,.96);
  border-bottom:1px solid rgba(44,44,44,.12);backdrop-filter:blur(8px)}
.site-head.solid .mainnav a,.site-head.solid .head-call,
.site-head.solid .logo-txt b{color:var(--ink)}
.site-head.solid .logo-txt span{color:var(--ink-3)}
/* The scrolled header is near-white, so the hairline over the brokerage line
   and the brokerage name itself both have to flip. Note the specificity: the
   rule above targets `span` and would otherwise win over .logo-txt .lg-broker
   and flatten the hierarchy. */
.site-head.solid .logo-txt .lg-broker{color:var(--ink);font-weight:600}
.site-head.solid .logo-txt span{border-top-color:rgba(44,44,44,.20)}
.site-head.solid .logo-txt b{text-shadow:none}
.site-head.solid .head-call{text-shadow:none}
.site-head.solid .burger span{background:var(--ink)}
.site-head.solid .head-call svg{color:var(--sage)}
.mainnav a::after{background:var(--sage)}
.site-head.solid .mainnav a:hover,
.site-head.solid .mainnav a[aria-current]{color:var(--sage-ink)}

/* ---- warm white reading sections ---- */
body{background:var(--paper)}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband),.sec:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband){
  background:var(--paper);
  --fg:var(--ink); --w-1:var(--ink); --w-2:var(--ink-2); --w-3:var(--ink-3);
  --line:rgba(44,44,44,.13); --line-2:rgba(44,44,44,.08);
  --panel:var(--paper-2);
  --crim:var(--sage-ink);   /* small text needs the deeper tone */
  color:var(--ink-2);
}
section.sec-tint:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband),section.aboutband:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband){
  background:var(--paper-2);--panel:var(--paper)}
.finband,.mortband,.proof{
  background:var(--paper-2);
  --fg:var(--ink); --w-1:var(--ink); --w-2:var(--ink-2); --w-3:var(--ink-3);
  --line:rgba(44,44,44,.13); --line-2:rgba(44,44,44,.08);
  --panel:var(--paper);
  --crim:var(--sage-ink);
  color:var(--ink-2);
}

/* rules, eyebrow marks and dividers carry the brand colour at full strength;
   they are decoration, not text, so the lighter sage is correct here */
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .eyebrow::after,.finband .eyebrow::after,.mortband .eyebrow::after{
  background:var(--sage)}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .tx-rule,section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .card-rule{background:var(--sage)}

/* forms */
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) input,section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) select,section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) textarea,
.mortband input,.mortband select,.mortband textarea{
  background:#fff;border-color:rgba(44,44,44,.18);color:var(--ink)}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) input:focus,section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) select:focus,section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) textarea:focus{
  border-color:var(--sage);outline:2px solid rgba(91,127,149,.25);outline-offset:1px}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) select option{background:#fff;color:var(--ink)}

/* buttons: primary is the deeper sage with white type; secondary is
   champagne with charcoal type, per the brief */
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .btn,.finband .btn,.mortband .btn,.proof .btn{
  color:var(--ink);border-color:rgba(44,44,44,.22)}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .btn:hover,.finband .btn:hover,.mortband .btn:hover{
  border-color:var(--sage)}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .btn-primary,section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .btn-on-dark,
.finband .btn-primary,.finband .btn-on-dark,
.mortband .btn-primary,.mortband .btn-on-dark{
  background:var(--sage-ink);border-color:var(--sage-ink);color:#fff}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .btn-primary:hover,section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .btn-on-dark:hover,
.finband .btn-primary:hover,.mortband .btn-primary:hover{
  background:var(--sage-dk);border-color:var(--sage-dk);color:#fff}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .btn-brass,section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .btn-gold,
.finband .btn-brass,.finband .btn-gold,
.mortband .btn-brass,.mortband .btn-gold{
  background:var(--champagne);border-color:var(--champagne);color:var(--ink)}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .btn-brass:hover,section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .btn-gold:hover{
  background:var(--champagne-dk);border-color:var(--champagne-dk);color:var(--ink)}

/* ---- anything that stays light-on-dark inside a warm white section ---- */
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel-dark{--fg:#fff;--w-1:rgba(255,255,255,.94);--w-2:rgba(255,255,255,.76);--w-3:rgba(255,255,255,.58);--line:rgba(255,255,255,.18);--line-2:rgba(255,255,255,.10);--crim:var(--sage);
  background:var(--ink);color:var(--w-2)}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .tx-card,.finband .tx-card,.mortband .tx-card{--fg:#fff;--w-1:rgba(255,255,255,.94);--w-2:rgba(255,255,255,.76);--w-3:rgba(255,255,255,.58);--line:rgba(255,255,255,.18);--line-2:rgba(255,255,255,.10);
  --crim:var(--sage);color:var(--w-1)}

.rail a{color:rgba(255,255,255,.66)}
.rail a:hover{color:#fff}
body.scrolled .rail a{color:var(--ink-3)}
body.scrolled .rail a:hover{color:var(--sage-ink)}

/* The left rail floats over the hero first and the cream sections after, so
   it follows the same scroll state as the header rather than picking one. */
.rail a{color:rgba(255,255,255,.62)}
.rail a:hover{color:var(--crim)}
body.scrolled .rail a{color:var(--ink-3)}
body.scrolled .rail a:hover{color:var(--crim)}

/* The breadcrumb now sits over the interior hero photograph rather than on a
   flat ground, so it needs more than the 46% white the muted token gives. */
.crumb,.crumb a{color:rgba(255,255,255,.72)}
.crumb span{color:rgba(255,255,255,.45)}

body{font-size:16.5px;line-height:1.8}
p{margin:0 0 1.15em}
.lede{font-size:1.14rem;line-height:1.8}
.small{font-size:.92rem}

/* labels, captions and the small print */
.eyebrow{font-size:11.5px;letter-spacing:.26em}
label,.field label,.sp-field label{font-size:12px;letter-spacing:.14em}
.consent,.mb-note,.hint,.tx-note,.tx-note-inline{font-size:12.5px;line-height:1.75}
.cinfo dt,.pf dt,.mb-ids dt,dt{font-size:10.5px;letter-spacing:.2em}
.vlabel{font-size:10.5px;letter-spacing:.26em}
.of-eyebrow{font-size:9.5px;letter-spacing:.2em}
.logo-txt span{font-size:9px;letter-spacing:.26em}

/* buttons and inline links need to be clickable-looking, not decorative */
.btn,.pill{font-size:12px;letter-spacing:.18em}
.card-more,.chips a,.tx-ask-go,a.card-link{font-size:11.5px;letter-spacing:.15em}
.mainnav a{font-size:12.5px;letter-spacing:.16em}
.crumb{font-size:10.5px;letter-spacing:.2em}

/* the transaction cards */
.tx-chip{font-size:10px;letter-spacing:.16em;padding:7px 14px 7px 16px}
.tx-sub,.card-meta{font-size:11px;letter-spacing:.14em}
.tx-meta{font-size:11px;letter-spacing:.1em}
.tx-count{font-size:10.5px;letter-spacing:.16em}
.tx-credit{font-size:9.5px;letter-spacing:.14em}
.tx-body h3,.tx-addr,.card-addr{font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:.12em}

/* stat band and proof strip read as headlines, so they can stay large */
.proof-item span{font-size:11px;letter-spacing:.16em}
.stat span{font-size:11px;letter-spacing:.16em}
.txstats span{font-size:11px;letter-spacing:.16em}
.foot-grid h4{font-size:11px;letter-spacing:.2em}
.site-foot a,.site-foot p,.site-foot li{font-size:14.5px}
.foot-legal,.foot-legal p{font-size:12.5px;line-height:1.75}

/* Lightening the ground pulled the footer's 46%-white links down to 4.15:1.
   Footer links are navigation, so they get body-text contrast, not caption. */
.site-foot{color:rgba(255,255,255,.78)}
.foot-grid a,.foot-grid li{color:rgba(255,255,255,.82)}
.foot-grid a:hover{color:var(--crim)}
.legal{color:rgba(255,255,255,.70);font-size:12.5px}
.legal strong{color:#fff}

/* Cards that open an external listing announce it, rather than leaving the
   destination only in the aria-label. */
.tx-out{position:absolute;right:12px;top:clamp(14px,1.8vw,20px);z-index:4;
  display:inline-flex;align-items:center;gap:6px;
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.88);background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:5px 10px;
  backdrop-filter:blur(4px);transition:background .25s ease,color .25s ease}
.tx-card:hover .tx-out{background:var(--crim);border-color:var(--crim);
  color:var(--on-acc)}
.tx-out svg{flex:0 0 auto;opacity:.85}
@media (max-width:560px){.tx-out{font-size:9px;padding:4px 8px}}

/* ---- listing cards ----------------------------------------------------
   A card with a photograph keeps white type over a charcoal veil, so the
   photograph leads. A card with no photograph becomes a white card with
   charcoal type, which is what the brief asks listing cards to be. */
.tx-card:has(.tx-plate){background:#fff;border:1px solid rgba(44,44,44,.10);
  box-shadow:0 1px 2px rgba(44,44,44,.04)}
.tx-card:has(.tx-plate)::after{display:none}
.tx-card:has(.tx-plate) .tx-price{color:var(--ink)}
.tx-card:has(.tx-plate) .tx-body h3,
.tx-card:has(.tx-plate) .tx-addr{color:var(--ink)}
.tx-card:has(.tx-plate) .tx-sub,
.tx-card:has(.tx-plate) .tx-meta li{color:var(--ink-3)}
.tx-card:has(.tx-plate) .pl-city{color:var(--ink-2)}
.tx-card:has(.tx-plate) .pl-year{color:var(--ink-3)}
.tx-card:has(.tx-plate) .tx-rule{background:var(--sage)}
.tx-card:has(.tx-plate) .tx-out{color:var(--ink-2);background:rgba(44,44,44,.05);
  border-color:rgba(44,44,44,.14)}
.tx-card:has(.tx-plate):hover{border-color:var(--sage);
  box-shadow:0 8px 24px rgba(44,44,44,.09)}
.tx-media.tx-plate{background:linear-gradient(165deg,#FFFFFF 0%,#FBFBFA 55%,#F4F5F6 100%)}
.tx-media.tx-plate::before{
  background:radial-gradient(90% 70% at 92% 4%,rgba(91,127,149,.10),transparent 60%),
             repeating-linear-gradient(135deg,rgba(44,44,44,.018) 0 1px,transparent 1px 9px)}
.tx-plate .pl-rule{background:var(--champagne)}

/* chips and pills carry the deeper sage so their small type reads */
.tx-chip{background:var(--sage-ink);color:#fff}
.pill{background:var(--sage-ink);color:#fff}
.pill:hover{background:var(--sage-dk);color:#fff}
.tx-card:hover .tx-out{background:var(--sage-ink);border-color:var(--sage-ink);color:#fff}

/* ---- the call-to-action band -----------------------------------------
   A full-bleed block of brand colour is exactly what the brief rules out,
   so the band is a soft sage wash on the warm white with charcoal type and
   a sage button. Separation without a slab of blue. */
.cta-band{background:linear-gradient(180deg,rgba(91,127,149,.07),rgba(91,127,149,.04));
  border-block:1px solid rgba(91,127,149,.16)}
.cta-band h2{color:var(--ink)}
.cta-band p{color:var(--ink-2)}
.cta-band .btn{color:var(--ink);border-color:rgba(44,44,44,.22)}
.cta-band .btn:hover{border-color:var(--sage);background:transparent;color:var(--sage-dk)}
.cta-band .btn-on-dark{background:var(--sage-ink);border-color:var(--sage-ink);color:#fff}
.cta-band .btn-on-dark:hover{background:var(--sage-dk);border-color:var(--sage-dk);color:#fff}

/* ---- footer: charcoal, to close the page without going stark black --- */
.site-foot{background:var(--ink);color:rgba(255,255,255,.80);
  border-top:1px solid rgba(44,44,44,.12)}
.foot-grid h4{color:#fff}
.foot-grid a,.foot-grid li{color:rgba(255,255,255,.80)}
.foot-grid a:hover{color:var(--champagne)}
.legal{color:rgba(255,255,255,.66);border-top-color:rgba(255,255,255,.14)}
.legal strong{color:#fff}
.eho{color:var(--champagne)}
.site-foot a:hover{color:var(--champagne)}

/* ---- champagne, used sparingly: hairlines, dividers, small marks ------ */
.vlabel::after{background:var(--champagne)}
.stat i,.proof-item::after{background:var(--champagne)}
hr.rule{border-color:rgba(216,195,161,.55)}
.sec-head .eyebrow::after{background:var(--sage)}
.of-eyebrow{color:var(--sage-ink)}
.of-name b{color:var(--sage-ink)}

/* ---- links ------------------------------------------------------------ */
main a:not(.btn):not(.pill):not(.tx-card):not(.logo):not(.card-link):not(.linkrow a){
  background-image:linear-gradient(var(--sage),var(--sage))}
.card-more,.chips a,.tx-ask-go,a.card-link{color:var(--sage-ink)}
.rail a:hover,.crumb a:hover{color:var(--sage)}
::selection{background:var(--sage);color:#fff}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* The charcoal veil has to do more work on a light palette than it did on a
   dark one: the price and address sit at roughly 60% of the card height, so
   the ramp starts earlier and finishes darker. */
.tx-card::after{background:linear-gradient(180deg,
  rgba(26,28,30,0) 14%,rgba(26,28,30,.34) 42%,
  rgba(26,28,30,.72) 72%,rgba(26,28,30,.92) 100%)}

/* Every card now goes to the same place, so 27 identical badges is noise.
   The badge appears on hover, and stays visible where there is no hover. */
@media (hover:hover){
  .tx-out{opacity:0;transform:translateY(-4px);
    transition:opacity .25s ease,transform .25s ease,background .25s ease}
  .tx-card:hover .tx-out,.tx-card:focus-visible .tx-out{opacity:1;transform:none}
}
@media (hover:none){
  .tx-out{right:auto;left:0;top:auto;bottom:12px;border-radius:0 100px 100px 0}
}

/* The selected hero tab sits on a photograph, so it takes the deeper tone:
   white on #5B7F95 is 4.27:1, white on #4E7086 is 5.27:1. */
.seg button[aria-selected=true]{background:var(--sage-ink);color:#fff}
.seg button{color:rgba(255,255,255,.86)}
.seg button:hover{color:#fff}
.phero .btn-primary,.phero .pill,.phero .search-go{background:var(--sage-ink);
  border-color:var(--sage-ink);color:#fff}
.phero .btn-primary:hover,.phero .search-go:hover{background:var(--sage-dk);
  border-color:var(--sage-dk)}

/* The sticky mobile bar: --panel became pure white in this palette, which
   left the second button as white type on white. */
@media (max-width:760px){
  .callbar{border-top:1px solid rgba(44,44,44,.12)}
  .callbar .c1{background:var(--sage-ink);color:#fff}
  .callbar .c2{background:#fff;color:var(--ink)}
  .callbar .c2 svg{color:var(--sage-ink)}
  .callbar a{font-weight:600}
}

:root{--charcoal:#3F4245; --charcoal-2:#474A4D;}

.site-foot{background:var(--charcoal)}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band) .panel-dark{
  background:var(--charcoal)}
.searchpanel,.addrbar{background:rgba(63,66,69,.80);
  border-color:rgba(255,255,255,.22)}
.searchpanel input,.searchpanel select,.addrbar input{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#fff}
.searchpanel input::placeholder{color:rgba(255,255,255,.62)}
.searchpanel label{color:rgba(255,255,255,.86)}

/* the veil over photography lifts with it, so the images stay open */
.phero::after{background:linear-gradient(180deg,rgba(52,55,58,.52) 0%,rgba(52,55,58,.08) 34%,
  rgba(52,55,58,.28) 68%,rgba(52,55,58,.82) 100%)}
.page-hero::after{background:linear-gradient(180deg,rgba(52,55,58,.48),rgba(52,55,58,.80))}
.tx-card::after{background:linear-gradient(180deg,
  rgba(48,51,54,0) 14%,rgba(48,51,54,.32) 42%,
  rgba(48,51,54,.70) 72%,rgba(48,51,54,.90) 100%)}
.site-head{background:linear-gradient(180deg,rgba(52,55,58,.58),rgba(52,55,58,0))}

/* the plate on a photoless card keeps its white treatment; the counters and
   rotated headings that sit on photographs stay white on the lifted veil */
.statband::after,.linkband::after{background:rgba(52,55,58,.52)}

/* the dark boxes become champagne */
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel-dark{
  background:var(--champagne);color:#2C2C2C;border:1px solid rgba(44,44,44,.14)}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel-dark h3,
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel-dark strong{
  color:#2C2C2C}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel-dark p,
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel-dark li{
  color:#3A3A3A}
.panel-dark .btn,.panel-dark .btn-on-dark{background:#2C2C2C;border-color:#2C2C2C;color:#fff}
.panel-dark .btn:hover,.panel-dark .btn-on-dark:hover{background:#000;border-color:#000;color:#fff}

/* the hero search panel */
.searchpanel,.addrbar{background:rgba(216,195,161,.95);border:1px solid rgba(44,44,44,.20)}
.searchpanel label,.addrbar label{color:#2C2C2C;font-weight:600}
.searchpanel input,.searchpanel select,.addrbar input{
  background:#fff;border:1px solid rgba(44,44,44,.26);color:#2C2C2C}
.searchpanel input::placeholder,.addrbar input::placeholder{color:#6A6A6A}
.searchpanel .btn,.searchpanel .pill,.searchpanel .search-go,
.phero .search-go{background:#2C2C2C;border-color:#2C2C2C;color:#fff}
.searchpanel .search-go:hover,.phero .search-go:hover{background:#000;border-color:#000}

/* CTA buttons */
.cta-band .btn-on-dark,.btn-brass,.btn-gold{
  background:var(--champagne);border-color:var(--champagne);color:#2C2C2C}
.cta-band .btn-on-dark:hover,.btn-brass:hover,.btn-gold:hover{
  background:var(--champagne-dk);border-color:var(--champagne-dk);color:#2C2C2C}

/* form fields across the site get the champagne frame, with a white well so
   what the visitor types stays black on white */
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel,
.mortband .panel,.finband .panel{
  background:var(--champagne);border:1px solid rgba(44,44,44,.14)}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel h3,
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel strong{
  color:#2C2C2C}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel p,
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel li,
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel label{
  color:#3A3A3A}
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel input,
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel select,
section:not(.phero):not(.page-hero):not(.statband):not(.linkband):not(.cta-band):not(.photoband) .panel textarea{
  background:#fff;border:1px solid rgba(44,44,44,.26);color:#2C2C2C}

.page-hero::before{opacity:.62;filter:none}
.page-hero::after{background:linear-gradient(180deg,
  rgba(44,47,50,.40) 0%,rgba(44,47,50,.58) 62%,rgba(44,47,50,.80) 100%)}

body.s-buy       .page-hero::before{background-image:url("/assets/img/hero.jpg")}
body.s-sell      .page-hero::before{background-image:url("/assets/img/spanish.jpg")}
body.s-listings  .page-hero::before{background-image:url("/assets/img/hero-3.jpg")}
body.s-financing .page-hero::before{background-image:url("/assets/img/hero-2.jpg")}
body.s-resources .page-hero::before{background-image:url("/assets/img/silverado.jpg")}
body.s-about     .page-hero::before{background-image:url("/assets/img/coast.jpg")}
body.s-contact   .page-hero::before{background-image:url("/assets/img/arrowhead.jpg")}

/* a thin champagne rule under each interior hero, so the section opens on a
   warm note rather than straight into cream */
.page-hero{border-bottom:3px solid var(--champagne)}

/* --------------------------------------------------------------------------
   The hero search panel: champagne, but blended.
   A solid beige slab sat on top of the photograph rather than in it. It is
   now a warm frosted panel: the photograph reads through it, the champagne
   tints it, and the fields stay white so what a visitor types is always
   black on white.
   -------------------------------------------------------------------------- */
.searchpanel,.addrbar{
  background:linear-gradient(180deg,rgba(216,195,161,.34),rgba(216,195,161,.22));
  backdrop-filter:blur(20px) saturate(118%);
  -webkit-backdrop-filter:blur(20px) saturate(118%);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 20px 54px rgba(28,31,34,.34);
}
.searchpanel label,.addrbar label{
  color:#fff;font-weight:600;text-shadow:0 1px 10px rgba(20,22,24,.55)}
.searchpanel input,.searchpanel select,.addrbar input{
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.55);
  color:#2C2C2C}
.searchpanel input::placeholder,.addrbar input::placeholder{color:#6A6A6A}
.searchpanel .search-go,.phero .search-go{
  background:var(--sage-ink);border-color:var(--sage-ink);color:#fff}
.searchpanel .search-go:hover,.phero .search-go:hover{
  background:var(--sage-dk);border-color:var(--sage-dk)}
.seg button[aria-selected=true]{background:rgba(216,195,161,.92);color:#2C2C2C}

/* Brighter photographs mean the supporting copy needs more than 76% white
   to hold its own. Shadows rather than a heavier veil, so the image stays
   open. */
.page-hero .lede{color:rgba(255,255,255,.96);
  text-shadow:0 1px 16px rgba(20,22,24,.72)}
.page-hero .eyebrow{color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(20,22,24,.70)}
.page-hero h1{text-shadow:0 2px 26px rgba(20,22,24,.62)}
.page-hero .ticks li,.page-hero li{color:rgba(255,255,255,.94);
  text-shadow:0 1px 12px rgba(20,22,24,.68)}
.crumb,.crumb a{color:rgba(255,255,255,.86);
  text-shadow:0 1px 8px rgba(20,22,24,.62)}
.phero .lede{color:rgba(255,255,255,.96)}

/* A sentence marked .keep moves to the next line whole rather than breaking
   after its first word. It is inline-block, not nowrap, so at phone widths it
   can still wrap internally instead of running off the screen. */
.keep{display:inline-block}
/* The hero lede was breaking straight after "28+". A little more measure lets
   each sentence hold its own line on a desktop. */
.phero .lede{max-width:54ch}

/* The photo band sits outside the light-section token reset, so its primary
   button kept the base fill: white on --sage measures 4.27:1, under the 4.5:1
   AA minimum for its size. Give it the champagne treatment the CTA band uses,
   which reads at 8.14:1. */
.photoband .btn-on-dark,.photoband .btn-primary{
  background:var(--champagne);border-color:var(--champagne);color:#2C2C2C}
.photoband .btn-on-dark:hover,.photoband .btn-primary:hover{
  background:var(--champagne-dk);border-color:var(--champagne-dk);color:#2C2C2C}