/* ============================================================
   Crestmark Realty - Elite Experience
   Shared stylesheet for all pages.
   Brand: navy #101c36 / lime #86b60a
   ============================================================ */

:root{
  --bg:#0a1424; --bg2:#101c36;
  --panel:#16243f; --panel2:#1c2d4d;
  --txt:#eaf1f4; --mute:#9fb3bf;
  --line:rgba(255,255,255,.10);
  --accent:#86b60a; --accent-br:#9fd117;
  --sea:#9CC3B8; --sea2:#6FA293; --sand:#E8DAC2;
  --shadow:0 40px 90px -40px rgba(0,0,0,.7);
  --hdr-h:170px;
}
body.light{
  --bg:#F5F1E9; --bg2:#fffdf8;
  --panel:#ffffff; --panel2:#f3ede1;
  --txt:#101c36; --mute:#5d6b75;
  --line:rgba(16,28,54,.12);
  /* Lime on cream fails AA for small text, so darken in light mode. */
  --accent:#5f8007; --accent-br:#86b60a;
  --shadow:0 40px 90px -42px rgba(16,28,54,.4);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Jost",sans-serif;background:var(--bg);color:var(--txt);
  font-size:1.23rem;line-height:1.68;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;transition:background .6s,color .6s}
h1,h2,h3,.disp{font-family:"Italiana",serif;font-weight:400;line-height:1.05;
  letter-spacing:.01em}
.scr{font-family:"Cormorant Garamond",serif;font-style:italic}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:.81rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--accent-br);font-weight:500}
body.light .eyebrow{color:var(--accent)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-size:.87rem;
  letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  padding:1.05rem 2rem;border-radius:2px;cursor:pointer;
  border:1px solid transparent;
  transition:.45s cubic-bezier(.2,.7,.3,1)}
.btn-accent{background:linear-gradient(120deg,var(--accent),var(--accent-br));
  color:#0a1722}
.btn-accent:hover{transform:translateY(-3px);letter-spacing:.28em;
  box-shadow:0 20px 44px -18px color-mix(in srgb,var(--accent) 55%,transparent)}
.btn-line{border-color:var(--accent);color:var(--accent-br)}
.btn-line:hover{background:var(--accent);color:#0a1722;transform:translateY(-3px)}
body.light .btn-line{color:var(--accent)}
.btn-soft{border-color:var(--line);color:var(--txt)}
.btn-soft:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   HEADER - logo hard left, hamburger hard right, no pill
   ============================================================ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:95;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
  background:linear-gradient(180deg,rgba(10,20,36,.82),rgba(10,20,36,0));
  transition:background .45s,padding .45s,box-shadow .45s}
.hdr.stuck{background:rgba(10,20,36,.94);backdrop-filter:blur(18px);
  padding:8px 32px;box-shadow:0 10px 40px -20px rgba(0,0,0,.8)}
body.light .hdr{background:linear-gradient(180deg,rgba(16,28,54,.55),rgba(16,28,54,0))}
body.light .hdr.stuck{background:rgba(255,253,248,.94);
  box-shadow:0 10px 40px -22px rgba(16,28,54,.35)}

/* Logo: transparent PNG, no chip, no background. */
.hdr-logo{display:block;flex:none;position:relative}
.hdr-logo img{height:134px;width:auto;display:block;background:none}
.hdr.stuck .hdr-logo img{height:104px}

/*
 * HEADER MARK - depends on the theme AND the scroll state.
 *
 *   dark theme, any state          -> white mark
 *   light theme, over the hero     -> white mark (hero photo is dark)
 *   light theme, stuck/scrolled    -> navy mark (bar turns cream)
 *
 * The stuck bar in light mode is rgba(255,253,248,.94), so a white
 * mark there is invisible. Before scrolling the bar is transparent
 * over a dark photograph, where the navy mark would be invisible
 * instead. Hence the two-condition swap rather than a plain
 * body.light rule.
 */
.hdr-logo .logo-navy{display:none}
body.light .hdr.stuck .hdr-logo .logo-white{display:none}
body.light .hdr.stuck .hdr-logo .logo-navy{display:block}

/* Hamburger */
.burger{flex:none;width:56px;height:56px;border:1px solid var(--line);
  border-radius:2px;background:rgba(255,255,255,.04);cursor:pointer;
  display:grid;place-content:center;gap:7px;padding:0;
  transition:.35s}
.burger:hover{border-color:var(--accent);background:rgba(134,182,10,.10)}
.burger span{display:block;width:26px;height:2px;background:#fff;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),opacity .25s}
body.light .hdr:not(.stuck) .burger span{background:#fff}
body.light .hdr.stuck .burger span{background:var(--txt)}
.burger.open{background:transparent;border-color:rgba(255,255,255,.35)}
.burger.open span{background:#fff}
body.light .burger.open span{background:#fff}
.burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* Slide-in nav panel */
.navpanel{position:fixed;inset:0;z-index:89;background:rgba(10,20,36,.97);
  backdrop-filter:blur(24px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;opacity:0;visibility:hidden;
  overflow-y:auto;padding:calc(var(--hdr-h) * .72) 20px 7rem;
  transition:opacity .5s,visibility .5s}
body.light .navpanel{background:rgba(16,28,54,.97)}
.navpanel.open{opacity:1;visibility:visible}
.navpanel ul{list-style:none;text-align:center;margin:auto 0}
.navpanel li{overflow:hidden}
.navpanel a{font-family:"Italiana",serif;
  font-size:clamp(1.45rem,3.4vh,2.5rem);
  line-height:1.18;color:#fff;display:block;padding:.22rem 1rem;
  transform:translateY(110%);transition:transform .6s cubic-bezier(.2,.7,.3,1),color .3s}
.navpanel.open a{transform:none}
.navpanel a:hover{color:var(--accent-br)}
.navpanel a.current{color:var(--accent-br)}
.navpanel a.current::after{content:"";display:block;width:34px;height:1px;
  background:var(--accent-br);margin:.2rem auto 0}
.nav-meta{flex:none;margin-top:2.2rem;text-align:center;
  font-size:.83rem;letter-spacing:.18em;text-transform:uppercase;
  line-height:1.9;color:rgba(255,255,255,.55)}
.nav-meta a{color:var(--accent-br);font-family:"Jost",sans-serif;font-size:.72rem}

.toggle{width:48px;height:30px;border-radius:100px;border:1px solid var(--line);
  background:rgba(255,255,255,.08);position:relative;cursor:pointer;flex:none;
  margin-right:14px;transition:.4s}
.toggle::after{content:"";position:absolute;top:50%;left:4px;
  transform:translateY(-50%);width:22px;height:22px;border-radius:50%;
  background:var(--accent);transition:.4s}
body.light .toggle::after{left:22px}
.hdr-right{display:flex;align-items:center}

@media(max-width:760px){
  .hdr{padding:10px 18px}
  .hdr-logo img{height:92px}
  .hdr.stuck .hdr-logo img{height:74px}
  .burger{width:50px;height:50px}
  .toggle{margin-right:10px}
}
/* Very short viewports: tighten the menu rather than let it scroll. */
@media(max-height:700px){
  .navpanel a{font-size:clamp(1.2rem,3vh,1.9rem);padding:.16rem 1rem}
  .nav-meta{margin-top:1.4rem;font-size:.64rem}
}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:8rem 0;position:relative}
.shead{max-width:66ch}
.shead h2{font-size:clamp(2.4rem,5.4vw,4.4rem);margin:1rem 0 1.2rem}
.shead h2 .scr{color:var(--accent-br)}
body.light .shead h2 .scr{color:var(--accent)}
.shead p{color:var(--mute);font-size:1.35rem;font-weight:300;
  line-height:1.75;max-width:54ch}

/* Reveal: only hidden when JS is running, so a JS failure can never
   leave the page blank. */
.reveal{transition:1.05s cubic-bezier(.2,.7,.3,1)}
.js .reveal{opacity:0;transform:translateY(34px)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;
  overflow:hidden}
.hero-art{position:absolute;inset:0}
.hero-art .l1{position:absolute;inset:0;
  background:linear-gradient(165deg,#12243d,#0a1424 55%,#0e2a44)}
.hero-art .photo{position:absolute;inset:0;background-size:cover;
  background-position:center}
/* Scrim, not a filter. Heavy on the left where the headline sits and
   fading to the right, so the photograph stays a photograph. The old
   opacity:.34 + luminosity treatment existed to blend a placeholder
   into a gradient and stripped all colour from real photography. */
.hero-art .scrim{position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(10,20,36,.90) 0%,
      rgba(10,20,36,.72) 34%,
      rgba(10,20,36,.34) 62%,
      rgba(10,20,36,.20) 100%),
    linear-gradient(180deg,
      rgba(10,20,36,.55) 0%,
      rgba(10,20,36,0) 26%,
      rgba(10,20,36,0) 62%,
      var(--bg) 100%)}
@keyframes drift{
  0%,100%{transform:scale(1.04) translate3d(0,0,0)}
  50%{transform:scale(1.075) translate3d(0,-1.2%,0)}}
.hero-art .photo{animation:drift 26s ease-in-out infinite}
.hero .wrap{position:relative;z-index:3;width:100%;padding-top:var(--hdr-h)}
.hero h1{color:#fff;font-size:clamp(3rem,9vw,8rem);margin:1.4rem 0;max-width:13ch}
.hero h1 .scr{color:var(--accent-br)}
.hero p{color:rgba(255,255,255,.80);max-width:46ch;font-weight:300;
  font-size:1.37rem;line-height:1.65}
.hero .hcta{margin-top:2.4rem;display:flex;gap:1rem;flex-wrap:wrap}
.js .hero .anim{opacity:0;transform:translateY(38px);
  animation:rise 1s forwards}
.js .hero .anim:nth-child(1){animation-delay:.15s}
.js .hero .anim:nth-child(2){animation-delay:.30s}
.js .hero .anim:nth-child(3){animation-delay:.45s}
.js .hero .anim:nth-child(4){animation-delay:.60s}
@keyframes rise{to{opacity:1;transform:none}}

/* page hero (interior pages) */
.phero{position:relative;min-height:56vh;display:flex;align-items:flex-end;
  overflow:hidden;padding-bottom:4rem}
.phero .bg{position:absolute;inset:0;
  background:linear-gradient(160deg,#12243d,#0a1424)}
.phero .photo{position:absolute;inset:0;background-size:cover;
  background-position:center}
.phero .veil{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(10,20,36,.86) 0%,rgba(10,20,36,.52) 48%,
                    rgba(10,20,36,.28) 100%),
    linear-gradient(180deg,rgba(10,20,36,.50) 0%,rgba(10,20,36,0) 30%,
                    var(--bg) 100%)}
.phero .wrap{position:relative;z-index:3;padding-top:var(--hdr-h)}
.phero h1{font-size:clamp(2.6rem,7vw,5.4rem);color:#fff;margin:.8rem 0}
.phero h1 .scr{color:var(--accent-br)}
.phero p{color:rgba(255,255,255,.78);max-width:52ch;font-weight:300;
  font-size:1.29rem;line-height:1.65}

/* ---------- stat band ---------- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg2)}
.band .row{display:grid;grid-template-columns:repeat(4,1fr)}
.band .st{padding:3.2rem 2rem;text-align:center;border-right:1px solid var(--line)}
.band .st:last-child{border:0}
.band .st b{font-family:"Italiana";font-size:clamp(2.2rem,4vw,3.6rem);display:block}
.band .st span{font-size:.81rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mute)}

/* ---------- cards / grids ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:3rem;
  align-items:center}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:2.4rem;transition:.5s}
.card:hover{transform:translateY(-6px);border-color:var(--accent)}
.card h3{font-size:1.5rem;margin-bottom:.5rem}
.card p{color:var(--mute);font-weight:300;font-size:1.19rem;line-height:1.7}

/* Card numbering.
   Emoji icons were replaced with Roman numerals in Italiana - the same
   treatment the Story section already uses. Editorial and restrained
   rather than decorative. Numbers come from a CSS counter so the
   markup carries no icon at all. */
.grid3{counter-reset:card}
.grid3 .card{counter-increment:card;position:relative;padding-top:5.2rem}
.grid3 .card::before{
  content:counter(card, upper-roman);
  position:absolute;top:2.1rem;left:2.4rem;
  font-family:"Italiana",serif;font-size:1.5rem;letter-spacing:.12em;
  color:var(--accent-br);line-height:1;opacity:.9}
body.light .grid3 .card::before{color:var(--accent)}
/* Hairline that grows on hover - the only motion these cards need. */
.grid3 .card::after{
  content:"";position:absolute;top:4.15rem;left:2.4rem;
  width:26px;height:1px;background:var(--line);transition:.5s}
.grid3 .card:hover::after{width:56px;background:var(--accent)}

/* Dashboard cards reuse .card but are data, not narrative - no numeral. */
.grid3 .dcard{padding-top:2.4rem}
.grid3 .dcard::before,.grid3 .dcard::after{content:none}

.media{border-radius:8px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#13314a,#0a1424);min-height:340px}
/* No caption element at all. If an image is missing the .media
   gradient shows through, which reads as intentional. alt text stays
   on the <img> for screen readers and is never rendered visually. */
.media img{width:100%;height:100%;object-fit:cover}

.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:3rem}
.tile{aspect-ratio:16/9;border-radius:6px;overflow:hidden;position:relative;
  transition:.6s cubic-bezier(.2,.7,.3,1);
  background:linear-gradient(160deg,#1f5a55,#0a1424)}
.tile:hover{transform:translateY(-10px)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 45%,rgba(0,0,0,.78))}
.tile span{position:absolute;bottom:1.3rem;left:1.5rem;z-index:2;color:#fff;
  font-family:"Italiana";font-size:1.45rem}

/* ---------- timeline ---------- */
.tl{margin-top:3.5rem;position:relative;padding-left:2rem}
.tl::before{content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:1px;
  background:linear-gradient(var(--accent),transparent)}
.tl-item{position:relative;padding:0 0 2.6rem 2.4rem}
.tl-item::before{content:"";position:absolute;left:-5px;top:.4rem;width:11px;
  height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 5px var(--bg)}
.tl-item .h{font-family:"Italiana";font-size:1.1rem;color:var(--accent-br);
  letter-spacing:.18em}
.tl-item h3{font-size:1.6rem;margin:.3rem 0 .4rem}
.tl-item p{color:var(--mute);font-weight:300;font-size:1.21rem;
  line-height:1.7;max-width:48ch}

/* ---------- before / after ---------- */
.ba{margin-top:3.5rem;border-radius:6px;overflow:hidden;position:relative;
  aspect-ratio:16/8;user-select:none;box-shadow:var(--shadow);
  border:1px solid var(--line)}
.ba .layer{position:absolute;inset:0;display:grid;place-items:center;
  background-size:cover;background-position:center}
.ba .before{background-image:url('../img/ba-before.jpg');
  background-color:#161e24;
  /* Gradient stays as the fallback layer beneath the photo. */
  background-blend-mode:normal;z-index:1}
.ba .after{background-image:url('../img/ba-after.jpg');
  background-color:#0a1424;
  clip-path:inset(0 50% 0 0);z-index:2}
.ba .tag{position:absolute;top:18px;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;padding:.4rem .9rem;border-radius:100px;
  background:rgba(0,0,0,.5);color:#fff;z-index:4}
.ba .tag.b{left:18px}.ba .tag.a{right:18px}
.ba .cap{position:relative;z-index:2;text-align:center;color:#fff;
  padding:1.2rem 1.6rem;border-radius:6px;
  background:rgba(10,20,36,.55);backdrop-filter:blur(3px)}
.ba .cap .scr{font-size:2rem;color:var(--accent-br)}
.ba .cap small{display:block;letter-spacing:.2em;text-transform:uppercase;
  font-size:.66rem;opacity:.75;margin-top:.4rem}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:var(--accent);z-index:5;transform:translateX(-50%)}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:var(--accent);box-shadow:0 8px 24px -6px rgba(0,0,0,.5)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  cursor:ew-resize;z-index:6;margin:0}

/* ---------- dashboard ---------- */
.dcard .lbl{font-size:.81rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute)}
.dcard .num{font-family:"Italiana";font-size:3rem;margin:.4rem 0 .2rem}
.dcard .sub{font-size:.85rem;color:var(--sea2)}
.dcard .bar{height:5px;border-radius:5px;background:var(--panel2);
  margin-top:1.2rem;overflow:hidden}
.dcard .bar i{display:block;height:100%;width:0;transition:1.4s ease;
  background:linear-gradient(90deg,var(--accent),var(--accent-br))}

/* ---------- disclosures ---------- */
.sim-note{font-size:.77rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);opacity:.9;margin-top:.7rem}
.disc{font-size:.99rem;color:var(--mute);font-weight:300;line-height:1.65}
.disc a{color:var(--accent-br);text-decoration:underline}
body.light .disc a{color:var(--accent)}

/* ---------- FAQ ---------- */
.faq-list{margin-top:3rem;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq button{width:100%;text-align:left;background:none;border:0;color:var(--txt);
  font-family:"Italiana",serif;font-size:1.4rem;padding:1.8rem 0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq button .pl{color:var(--accent-br);font-size:1.6rem;transition:.4s;flex:none}
.faq.open button .pl{transform:rotate(45deg)}
.faq .ans{max-height:0;overflow:hidden;transition:.5s ease;color:var(--mute);
  font-weight:300}
.faq .ans p{padding:0 0 1.8rem;max-width:64ch}

/* ---------- lead form ---------- */
.lead-form{max-width:560px;margin:0 auto;text-align:left}
.lf-row{display:flex;gap:.8rem}
.lead-form input,.lead-form select,.lead-form textarea{
  width:100%;padding:.95rem 1.1rem;background:var(--panel);
  border:1px solid var(--line);border-radius:3px;color:var(--txt);
  font-family:inherit;font-size:1.19rem;margin-bottom:.8rem}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{
  outline:none;border-color:var(--accent)}
.lead-form .btn{width:100%;justify-content:center}
.lead-form select.is-empty{color:var(--mute)}
.lead-form select option,.lead-form select optgroup{color:var(--txt);background:var(--panel)}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px}
.lf-msg{margin-top:1rem;font-size:1.06rem;min-height:1.4rem}
.lf-msg.ok{color:var(--accent-br)}
.lf-msg.err{color:#ff8f8f}

/* ---------- finale ---------- */
.finale{text-align:center;position:relative;overflow:hidden}
.finale .glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:700px;height:700px;border-radius:50%;filter:blur(50px);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 65%)}
.finale .wrap{position:relative;z-index:2}
.finale h2{font-size:clamp(2.4rem,6vw,4.6rem);max-width:18ch;margin:1rem auto 1.4rem}
.finale p{color:var(--mute);max-width:48ch;margin:0 auto 2.4rem;font-weight:300}

/* ---------- footer ---------- */
footer{background:var(--bg2);border-top:1px solid var(--line);padding:5rem 0 2.5rem}
/* The footer spans the full viewport rather than the 1280px content
   column. On wide screens the boxed version left large empty margins
   and pushed the TREC disclosure links into a narrow strip. Padding
   scales so it still breathes on ultrawide and stays readable on
   mobile. */
footer .wrap{max-width:none;padding:0 clamp(20px,4.5vw,90px)}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;
  gap:clamp(2rem,5vw,6rem);max-width:1900px;margin:0 auto}
.fg .flogo img{height:90px;width:auto;margin-bottom:1rem}
/* Footer background follows the theme, so its mark swaps on theme
   alone - no scroll-state condition needed. */
.fg .flogo .logo-navy{display:none}
body.light .fg .flogo .logo-white{display:none}
body.light .fg .flogo .logo-navy{display:block}
footer h4{font-size:.81rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-br);margin-bottom:1.2rem}
body.light footer h4{color:var(--accent)}
footer ul{list-style:none;display:grid;gap:.7rem}
footer a{font-size:1.15rem;color:var(--mute)}
footer a:hover{color:var(--txt)}
.fb{border-top:1px solid var(--line);margin-top:3.5rem;padding-top:1.8rem;
  max-width:1900px;margin-left:auto;margin-right:auto;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size:1.0rem;color:var(--mute)}
.fb a{text-decoration:underline}
/* TREC requires these links at 10 point minimum (13.33px). 14px = 10.5pt.
   Do NOT reduce below 14px. 22 TAC 531.18 / TREC posting guidance. */
.fb .trec-link{font-size:16px;line-height:1.9}
/* 535.155: broker name at least half the size of the largest contact
   information in the advertisement. */
.fb .broker-line{font-size:17px}

.tag-badge{position:fixed;right:18px;bottom:18px;z-index:88;
  background:var(--accent);color:#0a1722;font-size:.77rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;padding:.55rem 1rem;border-radius:100px}

@media(max-width:980px){
  .band .row{grid-template-columns:1fr 1fr}
  .band .st:nth-child(2){border-right:0}
  .grid3,.grid2,.tiles{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr 1fr}
  .fg > div:first-child{grid-column:1 / -1}
}
@media(max-width:600px){
  section{padding:5rem 0}
  .wrap{padding:0 20px}
  .fg{grid-template-columns:1fr}
  .lf-row{flex-direction:column;gap:0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .hero .anim{opacity:1;transform:none}
}


/* ============================================================
   LISTINGS - search grid + detail
   ============================================================ */
.ls-bar{display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:1rem;margin-bottom:1.6rem}
.ls-count{font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute)}
#lsFilters{background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:1.6rem;margin-bottom:2.4rem}
.f-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.f-grid label{display:block;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.35rem}
/* Text and select controls only. Checkboxes are styled separately
   below - without :not() this ID rule (specificity 100) overrides the
   checkbox sizing and stretches each box across its pill. */
#lsFilters input:not([type="checkbox"]),#lsFilters select{
  width:100%;padding:.7rem .9rem;
  background:var(--bg);border:1px solid var(--line);border-radius:3px;
  color:var(--txt);font-family:inherit;font-size:1.06rem}
#lsFilters input:focus,#lsFilters select:focus{outline:none;
  border-color:var(--accent)}
.f-water{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.f-water h4{font-size:.79rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-br);margin-bottom:1rem}
body.light .f-water h4{color:var(--accent)}
/* Toggle pills rather than a checkbox row. The plain row wrapped its
   labels onto two lines and the boxes centred against the wrapped
   text, so nothing aligned. Pills size to their content, wrap
   cleanly, and read as the same chip language used on listing cards. */
.f-checks{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.f-checks label{display:inline-flex;align-items:center;gap:.55rem;
  font-size:.92rem;letter-spacing:.02em;text-transform:none;
  color:var(--mute);cursor:pointer;margin:0;white-space:nowrap;
  padding:.6rem 1.05rem;border:1px solid var(--line);border-radius:100px;
  background:var(--bg);transition:.25s;user-select:none}
.f-checks label:hover{border-color:var(--accent);color:var(--txt)}
/* Custom control - the native box cannot be styled consistently and
   was the visual culprit. */
/* Scoped under #lsFilters so specificity matches the rule above and
   these can never be overridden by a generic input rule again. */
#lsFilters .f-checks input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;min-width:16px;padding:0;margin:0;flex:none;
  border-radius:3px;border:1px solid var(--mute);background:transparent;
  cursor:pointer;transition:.2s;position:relative}
#lsFilters .f-checks input[type="checkbox"]:checked{
  background:var(--accent);border-color:var(--accent)}
#lsFilters .f-checks input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;
  border:solid #0a1722;border-width:0 2px 2px 0;transform:rotate(45deg)}
#lsFilters .f-checks input[type="checkbox"]:focus-visible{
  outline:2px solid var(--accent-br);outline-offset:2px}
/* Whole pill reflects the checked state. */
.f-checks label:has(input:checked){border-color:var(--accent);
  color:var(--txt);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.f-actions{margin-top:1.2rem;display:flex;justify-content:flex-end}
#lsReset{background:none;border:1px solid var(--line);color:var(--mute);
  padding:.6rem 1.2rem;border-radius:2px;cursor:pointer;font-family:inherit;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
#lsReset:hover{border-color:var(--accent);color:var(--accent)}

#lsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.lcard{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;display:block;transition:.4s}
.lcard:hover{transform:translateY(-6px);border-color:var(--accent)}
.lc-img{aspect-ratio:4/3;background:linear-gradient(160deg,#13314a,#0a1424);
  overflow:hidden}
.lc-img img{width:100%;height:100%;object-fit:cover}
.lc-body{padding:1.4rem}
.lc-price{font-family:"Italiana",serif;font-size:1.8rem}
.lc-addr{font-size:1.21rem;margin:.25rem 0 .45rem}
.lc-meta{font-size:1.06rem;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.chips span{font-size:.77rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:100px;border:1px solid var(--line);
  color:var(--accent-br)}
body.light .chips span{color:var(--accent)}
.fz{display:inline-block;margin-top:.7rem;font-size:.77rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.ls-empty{grid-column:1/-1;padding:4rem 2rem;text-align:center;
  color:var(--mute);font-weight:300}
.ls-empty a{color:var(--accent-br);text-decoration:underline}

#lsPager{display:flex;gap:.5rem;justify-content:center;margin-top:2.6rem}
.pg{background:none;border:1px solid var(--line);color:var(--mute);
  width:40px;height:40px;border-radius:2px;cursor:pointer;font-family:inherit}
.pg.on,.pg:hover{border-color:var(--accent);color:var(--accent)}

/* Attribution and MLS notices - required, not decorative.
   HAR 18.3.3 requires typeface not smaller than the median used for
   listing data. Do not shrink .attrib below .82rem. */
.attrib{margin-top:.9rem;font-size:.98rem;color:var(--mute)}
.attrib.idx{padding-top:.7rem;border-top:1px solid var(--line)}
.ls-disc,.mls-notice{font-size:.99rem;color:var(--mute);font-weight:300;
  line-height:1.7;margin-top:1.4rem}
.mls-notice{padding-top:1rem;border-top:1px solid var(--line)}

/* ---------- detail ---------- */
.ld-head{margin-bottom:2rem}
.ld-price{font-family:"Italiana",serif;font-size:clamp(2.2rem,5vw,3.4rem);
  color:var(--accent-br)}
body.light .ld-price{color:var(--accent)}
.ld-head h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:.3rem 0}
.ld-sub{color:var(--mute);font-weight:300}
.ld-meta{color:var(--mute);font-size:1.06rem;margin-top:.5rem}
.ld-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;
  margin-bottom:2.6rem}
.ld-photo{position:relative;aspect-ratio:4/3;border-radius:6px;
  overflow:hidden;background:linear-gradient(160deg,#13314a,#0a1424)}
.ld-photo img{width:100%;height:100%;object-fit:cover}
/* Photo disclosure overlay. MLS rules require virtual staging and
   altered imagery be disclosed on the image. Never hide this. */
.ph-disc{position:absolute;left:0;right:0;bottom:0;padding:.5rem .7rem;
  background:rgba(0,0,0,.72);color:#fff;font-size:.79rem;letter-spacing:.08em;
  text-transform:uppercase}
.ld-sec{margin-bottom:2.6rem}
.ld-sec h2{font-size:1.7rem;margin-bottom:1rem}
.ld-sec p{color:var(--mute);font-weight:300;font-size:1.21rem;line-height:1.7}
.ld-spec{width:100%;border-collapse:collapse}
.ld-spec th{text-align:left;font-weight:400;color:var(--mute);
  font-size:1.08rem;padding:.7rem 1rem .7rem 0;width:44%;
  border-bottom:1px solid var(--line);vertical-align:top}
.ld-spec td{padding:.7rem 0;font-size:1.19rem;
  border-bottom:1px solid var(--line)}
.ld-prov{font-size:.9rem;color:var(--mute);margin-top:.9rem}
.ld-prov.warn{color:var(--sand)}
.ld-disc{font-size:.9rem;color:var(--mute);font-weight:300;line-height:1.7;
  margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:4px}
.ld-cta{display:flex;gap:1rem;flex-wrap:wrap;margin:2rem 0}

@media(max-width:980px){
  .f-grid{grid-template-columns:repeat(2,1fr)}
  #lsGrid{grid-template-columns:repeat(2,1fr)}
  .ld-gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .f-grid{grid-template-columns:1fr}
  #lsGrid{grid-template-columns:1fr}
  .ld-gallery{grid-template-columns:1fr}
}


/* ============================================================
   CONCIERGE WIDGET
   ============================================================ */
.cx-fab{position:fixed;right:18px;bottom:64px;z-index:87;
  background:var(--accent);color:#0a1722;border:0;border-radius:100px;
  padding:.9rem 1.6rem;font-family:inherit;font-size:.85rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  cursor:pointer;box-shadow:0 12px 30px -12px rgba(0,0,0,.6);
  transition:.35s}
.cx-fab:hover{transform:translateY(-2px);background:var(--accent-br)}
/* 2026-10-15: display:flex below overrode the hidden attribute, so the
   assistant was always open and its close button did nothing. */
.cx-panel[hidden]{display:none !important}
.cx-panel{position:fixed;right:18px;bottom:64px;z-index:88;width:370px;
  max-width:calc(100vw - 36px);background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  max-height:min(560px,calc(100vh - 120px))}
.cx-head{display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--line);
  font-family:"Italiana",serif;font-size:1.05rem}
.cx-x{background:none;border:0;color:var(--mute);font-size:1.4rem;
  cursor:pointer;line-height:1}
.cx-x:hover{color:var(--txt)}
.cx-log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;
  flex-direction:column;gap:.8rem}
.cx-msg{font-size:1.06rem;line-height:1.6;padding:.7rem .9rem;
  border-radius:8px;max-width:88%}
.cx-msg.bot{background:var(--panel2);color:var(--txt);align-self:flex-start}
.cx-msg.you{background:var(--accent);color:#0a1722;align-self:flex-end}
.cx-msg.pending{opacity:.6;font-style:italic}
.cx-msg.handoff{background:none;border:1px solid var(--accent);
  font-size:.84rem}
.cx-msg.handoff a{color:var(--accent-br);text-decoration:underline}
.cx-in{display:flex;gap:.5rem;padding:.8rem 1.1rem;
  border-top:1px solid var(--line)}
.cx-in input{flex:1;padding:.7rem .9rem;background:var(--bg);
  border:1px solid var(--line);border-radius:4px;color:var(--txt);
  font-family:inherit;font-size:.9rem}
.cx-in input:focus{outline:none;border-color:var(--accent)}
.cx-in button{background:var(--accent);color:#0a1722;border:0;
  border-radius:4px;padding:.7rem 1.1rem;font-family:inherit;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;cursor:pointer}
/* Required disclosure. Automated answers must be identified as such.
   Do not remove or hide this line. */
.cx-foot{padding:.7rem 1.1rem;border-top:1px solid var(--line);
  font-size:.77rem;line-height:1.6;color:var(--mute)}
@media(max-width:600px){
  .cx-panel{right:10px;left:10px;width:auto;bottom:58px}
  .cx-fab{right:10px;bottom:10px}
  .tag-badge{display:none}
}


/* Approximate currency conversion. Visually subordinate to the USD
   price on purpose - USD is the price, this is a courtesy. */
.fx{font-family:"Jost",sans-serif;font-size:.62em;color:var(--mute);
  letter-spacing:.04em;margin-left:.45em;white-space:nowrap}
#fxNote{font-size:.85rem;color:var(--mute);font-weight:300;
  line-height:1.6;margin-top:.8rem}


/* Short-term rental chip. Colour-coded because the same fact is a
   selling point to one buyer and a dealbreaker to another - neither
   is "better", so neither gets the accent colour. */
.strchip{display:inline-block;margin-top:.7rem;margin-right:.5rem;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:100px;border:1px solid var(--line)}
.strchip.permitted{color:var(--sea);border-color:var(--sea2)}
.strchip.prohibited{color:var(--sand);border-color:var(--sand)}
.strchip.restricted{color:var(--mute)}


/* ============================================================
   COST CALCULATOR + ANSWERS
   ============================================================ */
.cc-form{background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:1.8rem;margin-bottom:2.4rem}
.cc-form input:not([type="checkbox"]),.cc-form select{
  width:100%;padding:.75rem .95rem;
  background:var(--bg);border:1px solid var(--line);border-radius:3px;
  color:var(--txt);font-family:inherit;font-size:1.06rem}
.cc-form input:focus,.cc-form select:focus{outline:none;
  border-color:var(--accent)}
.cc-headline{text-align:center;padding:2rem 0 1.4rem}
.cc-big{font-family:"Italiana",serif;font-size:clamp(2.6rem,7vw,4.4rem);
  color:var(--accent-br);line-height:1}
.cc-big span{font-size:.3em;color:var(--mute);margin-left:.2em}
body.light .cc-big{color:var(--accent)}
.cc-cap{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin-top:.6rem}
.cc-table{width:100%;border-collapse:collapse;margin-top:1.4rem}
.cc-table th{text-align:left;font-weight:400;color:var(--mute);
  font-size:1.06rem;padding:.75rem 1rem .75rem 0;
  border-bottom:1px solid var(--line)}
.cc-table td{padding:.75rem 0;font-size:1.12rem;
  border-bottom:1px solid var(--line);white-space:nowrap}
.cc-table .cc-note{font-size:.85rem;color:var(--mute);white-space:normal;
  padding-left:1rem}
.cc-table .cc-sum th,.cc-table .cc-sum td{color:var(--txt);
  font-size:1.2rem;border-bottom:2px solid var(--accent)}
.cc-offset{margin-top:1.6rem;padding:1.2rem;border:1px solid var(--line);
  border-radius:6px;font-size:1rem;color:var(--mute);line-height:1.7}
.cc-offset strong{color:var(--accent-br);font-size:1.2rem}
.cc-compare{margin-top:2rem}
.cc-compare h3{font-size:1.5rem;margin-bottom:.5rem}
.cc-compare p{color:var(--mute);font-size:1.06rem}
/* Sources are always visible - never behind a toggle. */
.cc-sources{margin-top:2.4rem;padding-top:1.6rem;
  border-top:1px solid var(--line)}
.cc-sources h3{font-size:1.3rem;margin-bottom:1rem}
.cc-sources ul{list-style:none;display:grid;gap:.9rem}
.cc-sources li{font-size:.95rem;color:var(--mute);line-height:1.65}
.cc-sources strong{color:var(--txt)}
.cc-unver{display:inline-block;margin-left:.5rem;font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sand);
  border:1px solid var(--sand);border-radius:100px;padding:.15rem .55rem}
.cc-gap{font-size:.88rem;opacity:.85}
.cc-nofc,.cc-disc{margin-top:1.4rem;font-size:.95rem;color:var(--mute);
  font-weight:300;line-height:1.7}
.cc-nofc{padding:1rem;border-left:2px solid var(--accent)}
.cc-quote{margin-top:2.6rem;padding:1.8rem;background:var(--panel);
  border:1px solid var(--line);border-radius:8px}
.cc-quote h3{font-size:1.5rem;margin-bottom:.5rem}
.cc-quote p{color:var(--mute);font-size:1.06rem;margin-bottom:1rem}

.ans-block{padding:2rem 0;border-bottom:1px solid var(--line)}
.ans-block h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.8rem}
.ans-block p{color:var(--mute);font-weight:300;font-size:1.15rem;
  line-height:1.75}


/* ============================================================
   PROOF CARDS - a card that demonstrates its own claim
   A card saying "editorial photography" should show the photograph.
   Each expands to a proof panel rather than asking the reader to
   take the claim on trust.
   ============================================================ */
.proof{padding-bottom:0}
.proof-toggle{width:100%;background:none;border:0;padding:0;margin:0;
  text-align:left;color:inherit;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.proof-toggle .pt-label{font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-br);
  display:flex;align-items:center;gap:.5rem;padding:1.2rem 0}
body.light .proof-toggle .pt-label{color:var(--accent)}
.proof-toggle .pt-icon{width:20px;height:20px;border:1px solid currentColor;
  border-radius:50%;display:grid;place-items:center;font-size:.85rem;
  line-height:1;transition:.35s;flex:none}
.proof.open .pt-icon{transform:rotate(45deg)}
.proof-panel{max-height:0;overflow:hidden;transition:max-height .55s
  cubic-bezier(.2,.7,.3,1)}
.proof-body{padding-bottom:1.6rem}

/* photo proof */
.pf-shot{position:relative;border-radius:6px;overflow:hidden;
  aspect-ratio:3/2;background:linear-gradient(160deg,#13314a,#0a1424)}
.pf-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pf-cap{font-size:.85rem;color:var(--mute);margin-top:.7rem;line-height:1.6}

/* mini before/after */
.pf-ba{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:3/2;
  user-select:none}
.pf-ba .pf-layer{position:absolute;inset:0;background-size:cover;
  background-position:center}
.pf-ba .pf-after{clip-path:inset(0 50% 0 0)}
.pf-ba .pf-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:var(--accent);transform:translateX(-50%);pointer-events:none}
.pf-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  cursor:ew-resize;margin:0}
.pf-tag{position:absolute;bottom:8px;left:10px;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.72);padding:.25rem .55rem;border-radius:3px}

/* spec proof */
.pf-spec{width:100%;border-collapse:collapse;font-size:.95rem}
.pf-spec th{text-align:left;font-weight:400;color:var(--mute);
  padding:.5rem .8rem .5rem 0;border-bottom:1px solid var(--line)}
.pf-spec td{padding:.5rem 0;border-bottom:1px solid var(--line);
  white-space:nowrap}
.pf-verified{display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.9rem;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sea);border:1px solid var(--sea2);
  border-radius:100px;padding:.3rem .7rem}

/* Equal Housing Opportunity logo (2026-10-15): the SVG is drawn in black and
   loaded as an <img>, so it cannot inherit the text colour and vanished on
   the dark footer. Light on the dark theme, dark on the light theme. */
img[src$="eho-logo.svg"]{filter:invert(1);opacity:.85}
body.light img[src$="eho-logo.svg"]{filter:none;opacity:.8}


/* ============================================================
   LISTINGS - MLS layout (2026-10-15). Overrides the older listing
   rules above. Results read like MLS search results; the property
   page reads like an MLS listing report: gallery, price/address
   header, labeled detail sections, listing-office credit.
   ============================================================ */
/* search bar */
.mls-search{padding:1.3rem 1.4rem 1.1rem}
.ms-row{display:grid;grid-template-columns:2.2fr repeat(5,1fr);gap:.8rem;align-items:end}
.ms-row label,.ms-panel label{display:block;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.35rem}
.ms-quick{margin-top:1rem;align-items:center}
.ms-more{margin-left:auto;background:none;border:1px solid var(--accent);color:var(--accent-br);
  border-radius:100px;padding:.6rem 1.15rem;font-family:inherit;font-size:.85rem;letter-spacing:.06em;cursor:pointer}
body.light .ms-more{color:var(--accent)}
.ms-more:hover{background:var(--accent);color:#0a1722}
.ms-panel{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.ms-cur{margin-top:1.3rem}
.ls-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ls-sortlab{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
#f_sort{padding:.55rem .8rem;background:var(--panel);border:1px solid var(--line);border-radius:3px;
  color:var(--txt);font-family:inherit;font-size:.95rem}
.ls-view{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.ls-view button{background:none;border:0;color:var(--mute);padding:.55rem .9rem;font-family:inherit;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.ls-view button.on{background:var(--accent);color:#0a1722}
.ls-count{font-size:.95rem;letter-spacing:.14em}

/* result cards */
#lsGrid.ls-grid,#lsGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
#lsGrid .lcard{position:relative;display:flex;flex-direction:column;padding:0;transform:none}
#lsGrid .lcard:hover{transform:translateY(-4px)}
#lsGrid .lc-img{position:relative;display:block;aspect-ratio:3/2}
#lsGrid .lc-img img{width:100%;height:100%;object-fit:cover;display:block}
.lc-nophoto{position:absolute;inset:0;display:grid;place-items:center;color:var(--mute);
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
.lc-badge{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.32rem .65rem;border-radius:3px;background:#2e7d5b;color:#fff}
.lc-badge.pending{background:#c9822b}
.lc-img .lc-badge{position:absolute;left:12px;top:12px;z-index:2}
.lc-flag{position:absolute;left:12px;top:46px;z-index:2;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:3px;background:rgba(6,12,24,.72);color:#fff}
.lc-count{position:absolute;right:12px;bottom:12px;z-index:2;font-size:.75rem;padding:.25rem .55rem;
  border-radius:20px;background:rgba(6,12,24,.7);color:#fff}
.lc-media{position:relative}
.lc-nav{position:absolute;top:50%;margin-top:-19px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(255,255,255,.9);color:#0a1722;font-size:1.6rem;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .25s}
.lc-nav.prev{left:10px}.lc-nav.next{right:10px}
#lsGrid .lcard:hover .lc-nav,#lsGrid .lcard:focus-within .lc-nav{opacity:1}
#lsGrid .lc-body{display:block;padding:1.1rem 1.2rem 1.2rem;flex:1}
#lsGrid .lc-price{font-family:"Italiana",serif;font-size:1.75rem;line-height:1.1}
.lc-facts{display:flex;align-items:center;gap:.5rem;margin:.45rem 0 .5rem;font-size:1rem;color:var(--mute)}
.lc-facts b{color:var(--txt);font-weight:600}
.lc-facts i{width:1px;height:14px;background:var(--line)}
#lsGrid .lc-addr{font-size:1.08rem;margin:0}
.lc-city{font-size:.95rem;color:var(--mute)}
.lc-foot{margin-top:.8rem;font-size:.82rem;letter-spacing:.06em;color:var(--mute)}
#lsGrid .attrib{font-size:.88rem;margin-top:.35rem}

/* list view */
#lsGrid.ls-list{grid-template-columns:1fr}
#lsGrid.ls-list .lcard{flex-direction:row}
#lsGrid.ls-list .lc-media{width:40%;flex:none}
#lsGrid.ls-list .lc-img{height:100%;aspect-ratio:auto;min-height:220px}

/* property page */
.ld-gal{display:grid;grid-template-columns:2fr 1fr;gap:.6rem;margin-bottom:1.8rem;border-radius:10px;overflow:hidden}
.ld-gal button{position:relative;display:block;padding:0;border:0;background:#0a1424;cursor:zoom-in;overflow:hidden}
.ld-gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}
.ld-gal button:hover img{transform:scale(1.03)}
.ld-main{aspect-ratio:3/2}
.ld-thumbs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.6rem}
.ld-all{position:absolute;right:14px;bottom:14px;background:rgba(255,255,255,.92);color:#0a1722;
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.5rem .85rem;border-radius:4px}
.ld-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,12,24,.6);color:#fff;
  font-size:1.6rem;font-family:"Italiana",serif}
.ld-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2.4rem;align-items:start}
.ld-top{display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;align-items:flex-end}
.ld-top .lc-badge{margin-bottom:.6rem}
.ld-top .ld-price{line-height:1}
.ld-top h1{font-size:clamp(1.5rem,3.2vw,2.2rem);margin:.5rem 0 .2rem}
.ld-ids{font-size:.92rem;color:var(--mute);margin-top:.4rem}
.ld-facts{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ld-facts div{padding:.8rem 1.1rem;text-align:center;border-right:1px solid var(--line);min-width:84px}
.ld-facts div:last-child{border-right:0}
.ld-facts b{display:block;font-size:1.2rem;font-weight:600;white-space:nowrap}
.ld-facts span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ld-jump{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.6rem 0 1.8rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.ld-jump a{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .8rem;border:1px solid var(--line);
  border-radius:100px;color:var(--mute)}
.ld-jump a:hover{border-color:var(--accent);color:var(--txt)}
.ld-sec{margin-bottom:2.2rem;scroll-margin-top:110px}
.ld-sec h2{font-size:1.45rem;margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent)}
.ld-headline{font-size:1.25rem;color:var(--txt);margin-bottom:.8rem}
.ld-remarks p{color:var(--mute);font-weight:300;font-size:1.12rem;line-height:1.75;margin-bottom:.9rem}
.ld-feats{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.4rem;margin-top:1rem}
.ld-feats li{position:relative;padding-left:1.1rem;font-size:1rem;color:var(--txt)}
.ld-feats li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent-br)}
.ld-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
.ld-row{display:grid;grid-template-columns:minmax(0,46%) 1fr;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.ld-row dt{font-size:.95rem;color:var(--mute)}
.ld-row dd{font-size:1rem;color:var(--txt);word-break:break-word}
.ld-side{position:sticky;top:110px}
.ld-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.4rem;display:flex;flex-direction:column;gap:.8rem}
.ld-card-p{font-family:"Italiana",serif;font-size:2rem;color:var(--accent-br);line-height:1}
body.light .ld-card-p{color:var(--accent)}
.ld-card-a{color:var(--mute);font-size:.98rem}
.ld-card .btn{justify-content:center}
.ld-media{display:flex;gap:.5rem;flex-wrap:wrap}
.ld-media .btn{flex:1;padding:.7rem .8rem;font-size:.72rem}
.ld-calc{font-size:.88rem;color:var(--accent-br);text-decoration:underline}
body.light .ld-calc{color:var(--accent)}
.ld-mbar{display:none}

/* full-screen viewer */
.ld-lb{position:fixed;inset:0;z-index:200;background:rgba(4,8,16,.96);display:flex;align-items:center;justify-content:center}
.ld-lb[hidden]{display:none}
.ld-lb figure{position:relative;max-width:min(1500px,92vw);max-height:86vh;margin:0}
.ld-lb img{display:block;max-width:100%;max-height:86vh;object-fit:contain}
.ld-lb figcaption{color:#cfd8de;text-align:center;font-size:.95rem;margin-top:.6rem;min-height:1.2em}
.ld-lb .ph-disc{bottom:auto;top:0}
.ld-lb-x,.ld-lb-p,.ld-lb-n{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;border-radius:50%}
.ld-lb-x{top:16px;right:16px;width:48px;height:48px;font-size:2rem;line-height:1}
.ld-lb-p,.ld-lb-n{top:50%;margin-top:-28px;width:56px;height:56px;font-size:2.4rem;line-height:1}
.ld-lb-p{left:16px}.ld-lb-n{right:16px}
.ld-lb-x:hover,.ld-lb-p:hover,.ld-lb-n:hover{background:var(--accent);color:#0a1722}
.ld-lb-c{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#cfd8de;font-size:.9rem;letter-spacing:.12em}

@media(max-width:1100px){
  .ms-row{grid-template-columns:repeat(3,1fr)}
  .ms-q{grid-column:1/-1}
  .ld-wrap{grid-template-columns:1fr}
  .ld-side{position:static}
}
@media(max-width:980px){
  #lsGrid,#lsGrid.ls-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ld-dl{grid-template-columns:1fr}
}
@media(max-width:700px){
  .ms-row{grid-template-columns:1fr 1fr}
  .ms-more{margin-left:0}
  #lsGrid,#lsGrid.ls-grid,#lsGrid.ls-list{grid-template-columns:1fr}
  #lsGrid.ls-list .lcard{flex-direction:column}
  #lsGrid.ls-list .lc-media{width:100%}
  #lsGrid.ls-list .lc-img{aspect-ratio:3/2;min-height:0}
  .ls-view{display:none}
  .lc-nav{opacity:1}
  .ld-gal{grid-template-columns:1fr;border-radius:0;margin-left:-20px;margin-right:-20px}
  .ld-thumbs{display:none}
  .ld-facts{width:100%}
  .ld-facts div{flex:1;min-width:0;padding:.7rem .3rem}
  .ld-facts b{font-size:1rem}
  .ld-feats{grid-template-columns:1fr}
  .ld-row{grid-template-columns:minmax(0,44%) 1fr}
  .ld-lb-p,.ld-lb-n{width:44px;height:44px;font-size:2rem;margin-top:-22px}
  .ld-lb-p{left:6px}.ld-lb-n{right:6px}
  .ld-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;align-items:center;justify-content:space-between;
    gap:.8rem;padding:.7rem 16px calc(.7rem + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line)}
  .ld-mbar span{font-family:"Italiana",serif;font-size:1.4rem}
  .ld-mbar .btn{padding:.75rem 1rem;font-size:.72rem}
}

/* Footer credit (2026-10-15) */
.fb-right{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;text-align:right}
.built-by{font-size:.85rem;color:var(--mute)}
.built-by a{color:var(--accent-br);text-decoration:underline;text-underline-offset:3px}
body.light .built-by a{color:var(--accent)}
.built-by a:hover{color:var(--txt)}
@media(max-width:700px){.fb-right{align-items:flex-start;text-align:left}}
/* toggles inside "More filters" keep the pill style, not the label style */
.ms-panel .f-checks label{display:inline-flex;font-size:.92rem;letter-spacing:.02em;text-transform:none;margin:0}
/* property page: the site-wide section{padding:5rem 0} and .ld-sec p
   sizing do not apply to MLS detail sections */
#ldRoot section.ld-sec{padding:0}
#ldRoot .ld-sec p.ld-prov,#ldRoot .ld-sec p.ld-disc{font-size:.92rem;line-height:1.6}
#ldRoot .ld-sec p.ld-headline{font-size:1.2rem;color:var(--txt);font-weight:400}
/* phone: the facts box may wrap - a long lot size on one line forced the
   page wider than the screen (browser zoomed out to fit) */
@media(max-width:700px){
  .ld-facts{flex-wrap:wrap}
  .ld-facts div{flex:1 1 30%;border-bottom:1px solid var(--line)}
  .ld-facts b{white-space:normal;font-size:.98rem}
  .ld-row dd,.ld-row dt{min-width:0}
}
/* phone property page: keep the Ask button and badge above the tour bar */
@media(max-width:700px){
  body:has(.ld-mbar) .cx-fab{bottom:calc(86px + env(safe-area-inset-bottom))}
  body:has(.ld-mbar) .tag-badge{display:none}
  body:has(.ld-mbar) footer{padding-bottom:90px}
}

/* ============================================================
   Header Sign in (Client portal / Agent & Broker) - 2026-10-15
   Built by site.js. Matches the burger: square-ish, thin line,
   white over the hero, navy once the light-theme bar is stuck.
   ============================================================ */
.hdr-login{position:relative;margin-right:14px}
.login-btn{display:inline-flex;align-items:center;gap:9px;height:56px;padding:0 20px;border:1px solid var(--line);
  border-radius:2px;background:rgba(255,255,255,.04);color:#fff;cursor:pointer;
  font:500 12px/1 "Jost",sans-serif;letter-spacing:.22em;text-transform:uppercase;transition:.35s}
.login-btn svg{width:18px;height:18px}
.login-btn:hover,.hdr-login.open .login-btn{border-color:var(--accent);background:rgba(134,182,10,.12)}
body.light .hdr.stuck .login-btn{color:var(--txt)}
.login-menu{position:absolute;right:0;top:calc(100% + 12px);width:340px;z-index:95;padding:10px;
  background:rgba(10,20,36,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12);border-radius:4px;box-shadow:0 30px 70px -25px rgba(0,0,0,.7);
  animation:loginIn .28s cubic-bezier(.2,.7,.3,1)}
.login-menu[hidden]{display:none}
@keyframes loginIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.login-h{font:500 10.5px/1 "Jost",sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#9fd117;padding:10px 12px 12px}
.login-opt{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:3px;color:#eaf1f4;text-decoration:none;
  border:1px solid transparent;transition:.25s}
.login-opt + .login-opt{margin-top:4px}
.login-opt:hover,.login-opt:focus-visible{background:rgba(134,182,10,.10);border-color:rgba(134,182,10,.35);outline:none}
.login-opt svg{width:26px;height:26px;flex:none;color:#9fd117}
.login-opt span{flex:1;display:flex;flex-direction:column;gap:3px}
.login-opt b{font:400 21px/1.1 "Italiana",serif;letter-spacing:.01em}
.login-opt small{font:400 13px/1.35 "Jost",sans-serif;color:#9fb3bf}
.login-opt i{font-style:normal;color:#9fd117;transition:transform .25s}
.login-opt:hover i{transform:translateX(4px)}
@media(max-width:760px){
  .hdr-login{margin-right:8px}
  .login-btn{width:48px;height:48px;padding:0;justify-content:center}
  .login-btn span{display:none}
  .login-menu{position:fixed;left:16px;right:16px;top:calc(var(--hdr-h, 90px) - 6px);width:auto}
}

/* ---------- language switch EN | ES (2026-10-15) ---------- */
.lang-sw{display:inline-flex;align-items:center;height:56px;padding:0 6px;margin-right:12px;border:1px solid var(--line);
  border-radius:2px;background:rgba(255,255,255,.04);text-decoration:none;transition:.35s}
.lang-sw span{font:500 11.5px/1 "Jost",sans-serif;letter-spacing:.18em;color:rgba(255,255,255,.55);padding:9px 8px;border-radius:2px;transition:.25s}
.lang-sw span.on{color:#0a1424;background:#9fd117}
.lang-sw:hover{border-color:var(--accent)}
.lang-sw:hover span:not(.on){color:#fff}
body.light .hdr.stuck .lang-sw span:not(.on){color:var(--mute)}
.nav-meta .lang-cur{color:#fff;font-family:"Jost",sans-serif;font-size:.72rem}
@media(max-width:760px){
  .lang-sw{height:48px;margin-right:8px;padding:0 4px}
  .lang-sw span{padding:8px 6px;font-size:11px;letter-spacing:.12em}
}
/* calculator: coverage caps + three-policy note (2026-10-15) */
.cc-gapbox{margin:1rem 0;padding:.9rem 1.1rem;border-left:3px solid #e0a14a;background:rgba(224,161,74,.08);border-radius:2px}
.cc-gapbox .cc-gap{margin:.2rem 0;opacity:1}
.cc-stack{margin:.4rem 0 1rem}
/* menu footer links stay small and inline (the big menu-link style was
   leaking into them on short phone screens) 2026-10-15 */
.navpanel .nav-meta a{display:inline;padding:0;transform:none;font-family:"Jost",sans-serif;font-size:.72rem;line-height:1.9}
@media(max-height:700px){.navpanel .nav-meta a{font-size:.64rem}}
/* phone: the language switch shows only the other language, as a square button */
@media(max-width:760px){
  .lang-sw{width:48px;justify-content:center;padding:0}
  .lang-sw span.on{display:none}
  .lang-sw span{padding:0;color:#fff;font-size:12px;letter-spacing:.14em}
}