/* ==========================================================================
   richdemoors.com  ·  design system
   Navy #0D1B2A · Gold #D4A017
   ========================================================================== */

:root{
  --navy:      #0D1B2A;
  --navy-1:    #102337;
  --navy-2:    #16304a;
  --navy-3:    #1e405f;
  --navy-line: rgba(212,160,23,.22);

  --gold:      #D4A017;
  --gold-lift: #E9BE4F;
  --gold-deep: #A87C0C;

  --paper:     #F6F2EA;
  --paper-2:   #ECE5D8;
  --paper-3:   #DED4C2;

  --ink:       #101C27;
  --ink-2:     #3C4B58;
  --ink-3:     #6B7A87;

  --on-navy:   #F2EFE9;
  --on-navy-2: #AEBECC;
  --on-navy-3: #7C8FA1;

  --shadow-sm: 0 1px 2px rgba(6,14,22,.18), 0 4px 12px rgba(6,14,22,.10);
  --shadow-md: 0 2px 6px rgba(6,14,22,.20), 0 18px 44px rgba(6,14,22,.20);
  --shadow-lg: 0 4px 10px rgba(6,14,22,.24), 0 40px 90px rgba(6,14,22,.32);

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1240px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 3px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  margin:0;
  background:var(--navy);
  color:var(--on-navy);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.7;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
picture{ display:contents; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--gold); color:var(--navy); }

:focus-visible{
  outline:2px solid var(--gold-lift);
  outline-offset:3px;
  border-radius:2px;
}

/* --------------------------------------------------------------- type ---- */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40;
  line-height:1.06;
  letter-spacing:-.018em;
  margin:0 0 .5em;
  text-wrap:balance;
}

.display{
  font-size:clamp(2.6rem, 1.2rem + 6.1vw, 5.75rem);
  line-height:.98;
  letter-spacing:-.03em;
}
.h1{ font-size:clamp(2.15rem, 1.25rem + 3.7vw, 4rem); }
.h2{ font-size:clamp(1.75rem, 1.15rem + 2.5vw, 2.95rem); }
.h3{ font-size:clamp(1.3rem, 1.05rem + 1.05vw, 1.8rem); letter-spacing:-.012em; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.08rem, 1rem + .55vw, 1.375rem);
  line-height:1.6;
  color:var(--on-navy-2);
  max-width:62ch;
}
.on-paper .lede{ color:var(--ink-2); }

.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.15rem;
  display:flex;
  align-items:center;
  gap:.85rem;
}
.eyebrow::after{
  content:"";
  flex:0 0 auto;
  width:clamp(28px,5vw,64px);
  height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{
  content:"";
  width:clamp(28px,5vw,64px);
  height:1px;
  background:linear-gradient(270deg,var(--gold),transparent);
}

.measure{ max-width:66ch; }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }
.center .eyebrow{ justify-content:center; }

/* ------------------------------------------------------------- layout ---- */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap-wide{ max-width:1560px; }
.wrap-narrow{ max-width:760px; }

section{ position:relative; }

.band{ padding-block:clamp(4.5rem, 3rem + 7vw, 9rem); }
.band-tight{ padding-block:clamp(3rem, 2rem + 4.5vw, 5.5rem); }

.on-paper{
  background:var(--paper);
  color:var(--ink);
}
.on-paper h1,.on-paper h2,.on-paper h3,.on-paper h4{ color:var(--ink); }
.on-paper .eyebrow{ color:var(--gold-deep); }
.on-paper .eyebrow::after{ background:linear-gradient(90deg,var(--gold-deep),transparent); }
.on-paper .eyebrow.center::before{ background:linear-gradient(270deg,var(--gold-deep),transparent); }

.on-deep{ background:var(--navy-1); }

/* hairline rule shared by several bands */
.rule{
  height:1px;
  border:0;
  margin:0;
  background:linear-gradient(90deg,transparent,var(--navy-line) 18%,var(--navy-line) 82%,transparent);
}
.on-paper .rule{
  background:linear-gradient(90deg,transparent,rgba(16,28,39,.16) 18%,rgba(16,28,39,.16) 82%,transparent);
}

.grid{ display:grid; gap:clamp(1.5rem,3vw,2.75rem); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width:900px){
  .g-3,.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .g-2,.g-3,.g-4{ grid-template-columns:minmax(0,1fr); }
}

.stack-lg{ display:grid; gap:clamp(2rem,4vw,3.25rem); }

/* ------------------------------------------------------------ buttons ---- */

.btn{
  --btn-bg:var(--gold);
  --btn-fg:var(--navy);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.95rem 1.6rem;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:.8125rem;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--btn-bg);
  border-radius:var(--radius);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:var(--gold-lift);
  transform:translateY(101%);
  transition:transform .4s var(--ease);
  z-index:-1;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(212,160,23,.28); }
.btn:hover::after{ transform:translateY(0); }
.btn:active{ transform:translateY(0); }

.btn-ghost{
  --btn-bg:transparent;
  --btn-fg:var(--on-navy);
  border-color:rgba(242,239,233,.34);
}
.btn-ghost::after{ background:var(--on-navy); }
.btn-ghost:hover{ color:var(--navy); border-color:var(--on-navy); box-shadow:none; }

.on-paper .btn-ghost{ --btn-fg:var(--ink); border-color:rgba(16,28,39,.28); }
.on-paper .btn-ghost::after{ background:var(--navy); }
.on-paper .btn-ghost:hover{ color:var(--paper); border-color:var(--navy); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }
.center .btn-row{ justify-content:center; }

/* text link with gold underline sweep */
.link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.8125rem;
  font-weight:650;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold);
  padding-bottom:.3rem;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
  transition:background-size .4s var(--ease), color .25s, gap .3s var(--ease);
}
.link:hover{ gap:.85rem; }
.link .arw{ transition:transform .35s var(--ease); }
.link:hover .arw{ transform:translateX(3px); }
.on-paper .link{
  color:var(--gold-deep);
  background-image:linear-gradient(var(--gold-deep),var(--gold-deep));
}

/* ---------------------------------------------------------------- nav ---- */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(13,27,42,.86);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:rgba(212,160,23,.18);
  box-shadow:0 12px 34px rgba(6,14,22,.32);
}
.nav-in{
  display:flex;
  align-items:center;
  gap:1.5rem;
  min-height:76px;
  padding-block:.75rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  text-decoration:none;
  margin-right:auto;
  flex-shrink:0;
}
.brand-mark{
  width:42px; height:42px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(212,160,23,.55);
  flex:0 0 auto;
}
.brand-text{ display:grid; line-height:1.15; }
.brand-name{
  font-family:var(--serif);
  font-size:1.0625rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--on-navy);
}
.brand-sub{
  font-size:.5625rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(.6rem,1.6vw,1.6rem);
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  position:relative;
  text-decoration:none;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--on-navy-2);
  padding:.5rem 0;
  transition:color .3s;
  white-space:nowrap;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--on-navy); }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{
  transform:scaleX(1);
  transform-origin:left;
}
.nav-links a[aria-current="page"]{ color:var(--gold); }

.nav-cta{ flex-shrink:0; padding:.7rem 1.15rem; font-size:.75rem; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  background:none;
  border:1px solid rgba(242,239,233,.24);
  border-radius:var(--radius);
  cursor:pointer;
  padding:0;
  place-items:center;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  width:19px; height:1.5px;
  background:var(--on-navy);
  position:relative;
  transition:background-color .2s;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";
  position:absolute;
  left:0;
  width:19px; height:1.5px;
  background:var(--on-navy);
  transition:transform .35s var(--ease);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1080px){
  .nav-toggle{ display:grid; }
  .nav-cta{ display:none; }
  .nav-links{
    position:fixed;
    inset:76px 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#0B1725;
    box-shadow:0 24px 48px rgba(6,14,22,.5);
    border-block:1px solid rgba(212,160,23,.2);
    padding:.5rem var(--gut) 1.75rem;
    max-height:calc(100dvh - 76px);
    overflow-y:auto;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .45s var(--ease);
  }
  .nav-links.open{ clip-path:inset(0 0 0 0); }
  .nav-links li:not(.m-cta) a{
    display:block;
    padding:1.05rem 0;
    font-size:.875rem;
    border-bottom:1px solid rgba(242,239,233,.10);
  }
  .nav-links li:not(.m-cta) a::after{ display:none; }
  .nav-links .m-cta{ margin-top:1.25rem; border:0; }
  .nav-links .m-cta .btn{ width:100%; padding:1.05rem 1.6rem; }
}
@media (min-width:1081px){
  .nav-links .m-cta{ display:none; }
}

/* --------------------------------------------------------------- hero ---- */

.hero{
  position:relative;
  min-height:min(100svh,900px);
  display:grid;
  align-items:end;
  padding-top:132px;
  padding-bottom:clamp(3rem,7vw,6rem);
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute;
  inset:-8% 0 0 0;
  z-index:-2;
  will-change:transform;
}
.hero-bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 58%;
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(13,27,42,.90) 0%, rgba(13,27,42,.52) 34%, rgba(13,27,42,.78) 72%, var(--navy) 100%),
    linear-gradient(96deg, rgba(13,27,42,.86) 0%, rgba(13,27,42,.30) 62%, rgba(13,27,42,.10) 100%);
}
.hero-in{ position:relative; max-width:960px; }
.hero .display{ margin-bottom:1.5rem; }
.hero .display em{
  font-style:normal;
  color:var(--gold);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 90;
}
.hero .lede{ max-width:56ch; color:#D6DEE6; }
.hero .btn-row{ margin-top:2.25rem; }

.hero-meta{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.7rem 1.5rem;
  font-size:.6875rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--on-navy-3);
  font-weight:600;
}
.hero-meta .dot{ color:var(--gold); }

.scroll-cue{
  position:absolute;
  left:50%; bottom:1.75rem;
  transform:translateX(-50%);
  width:1px; height:52px;
  background:linear-gradient(180deg,transparent,var(--gold));
  overflow:hidden;
}
.scroll-cue::after{
  content:"";
  position:absolute; inset:0;
  background:var(--gold);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}
@media (max-width:820px){ .scroll-cue{ display:none; } }

/* -------------------------------------------------------------- stats ---- */

.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--navy-line);
  border-bottom:1px solid var(--navy-line);
}
.stat{
  padding:clamp(1.75rem,3.5vw,2.75rem) clamp(1rem,2.5vw,2rem);
  border-right:1px solid var(--navy-line);
  display:grid;
  align-content:start;
  gap:.4rem;
}
.stat:last-child{ border-right:0; }
.stat-n{
  font-family:var(--serif);
  font-size:clamp(2.1rem,1.2rem + 3vw, 3.35rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;
}
.stat-l{
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--on-navy-3);
  font-weight:600;
  line-height:1.5;
}
.on-paper .stat-n{ color:var(--navy); }
.on-paper .stat-l{ color:var(--ink-3); }
.on-paper .stat{ border-color:rgba(16,28,39,.14); }
.on-paper .stats{ border-color:rgba(16,28,39,.14); }

@media (max-width:860px){
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--navy-line); }
  .on-paper .stat:nth-child(-n+2){ border-bottom-color:rgba(16,28,39,.14); }
}
@media (max-width:420px){
  .stats{ grid-template-columns:minmax(0,1fr); }
  .stat{ border-right:0; border-bottom:1px solid var(--navy-line); }
  .stat:last-child{ border-bottom:0; }
}

.stats-note{
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-navy-3);
  padding-top:1.4rem;
  font-weight:600;
}
.on-paper .stats-note{ color:var(--ink-3); }

/* ------------------------------------------------------------- pillar ---- */

.pillar{
  display:grid;
  gap:1rem;
  padding:clamp(1.75rem,3vw,2.25rem) 0 0;
  border-top:2px solid var(--gold);
  position:relative;
}
.pillar-n{
  font-family:var(--serif);
  font-size:.8125rem;
  letter-spacing:.16em;
  color:var(--gold);
  font-weight:600;
}
.on-paper .pillar-n{ color:var(--gold-deep); }
.pillar p{ color:var(--on-navy-2); }
.on-paper .pillar p{ color:var(--ink-2); }
.pillar ul{
  margin:.35rem 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.55rem;
  font-size:.9375rem;
}
.pillar li{
  padding-left:1.35rem;
  position:relative;
  color:var(--on-navy-2);
}
.on-paper .pillar li{ color:var(--ink-2); }
.pillar li::before{
  content:"";
  position:absolute;
  left:0; top:.65em;
  width:7px; height:1px;
  background:var(--gold);
}

/* ----------------------------------------------------------- listings ---- */

.card{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr;
  background:var(--navy-1);
  border:1px solid rgba(242,239,233,.09);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(212,160,23,.42);
  box-shadow:var(--shadow-md);
}
.on-paper .card{
  background:#fff;
  border-color:rgba(16,28,39,.10);
}
.on-paper .card:hover{ border-color:rgba(168,124,12,.42); }

.card-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--navy-2);
}
.card-media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease);
}
.card:hover .card-media img{ transform:scale(1.055); }

.card-body{
  padding:clamp(1.25rem,2.4vw,1.75rem);
  display:grid;
  align-content:start;
  gap:.6rem;
}
.card-price{
  font-family:var(--serif);
  font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--gold);
  line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
}
.on-paper .card-price{ color:var(--navy); }
.card-addr{
  font-family:var(--serif);
  font-size:1.0625rem;
  font-weight:600;
  line-height:1.3;
  margin:0;
  letter-spacing:-.008em;
}
.card-city{
  font-size:.6875rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--on-navy-3);
  font-weight:600;
}
.on-paper .card-city{ color:var(--ink-3); }
.card-specs{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .95rem;
  font-size:.8125rem;
  color:var(--on-navy-2);
  padding-top:.3rem;
  border-top:1px solid rgba(242,239,233,.09);
  margin-top:.35rem;
}
.on-paper .card-specs{ color:var(--ink-2); border-top-color:rgba(16,28,39,.10); }
.card-specs span{ white-space:nowrap; }
.card-note{
  font-size:.9375rem;
  color:var(--on-navy-2);
  line-height:1.62;
}
.on-paper .card-note{ color:var(--ink-2); }

.tag{
  position:absolute;
  top:.9rem; left:.9rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.4rem .75rem;
  background:rgba(13,27,42,.90);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid rgba(212,160,23,.5);
  border-radius:2px;
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
.tag.sold{ color:var(--on-navy); border-color:rgba(242,239,233,.4); }
.tag.pending{ color:#F0C24A; }
.tag::before{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background:currentColor;
}
.tag.live::before{ animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(212,160,23,.55); }
  50%{ opacity:.7; box-shadow:0 0 0 5px rgba(212,160,23,0); }
}

.side{
  position:absolute;
  top:.9rem; right:.9rem;
  z-index:2;
  padding:.4rem .7rem;
  background:rgba(13,27,42,.9);
  border:1px solid rgba(242,239,233,.22);
  border-radius:2px;
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--on-navy-2);
}

/* ------------------------------------------------------------- quotes ---- */

.quote{
  display:flex;
  flex-direction:column;
  margin:0;                 /* blockquote carries a 40px UA side margin */
  gap:1.15rem;
  padding:clamp(1.6rem,3vw,2.25rem);
  background:var(--navy-1);
  border:1px solid rgba(242,239,233,.09);
  border-radius:var(--radius);
  border-left:2px solid var(--gold);
  height:100%;
  align-content:start;
  transition:transform .45s var(--ease), border-color .35s;
}
.quote:hover{ transform:translateY(-3px); }
.on-paper .quote{ background:#fff; border-color:rgba(16,28,39,.10); border-left-color:var(--gold); }
.quote p{
  font-family:var(--serif);
  font-size:clamp(.9375rem,.9rem + .3vw,1.0625rem);
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.005em;
  margin:0;
}
.quote-by{
  display:grid;
  gap:.2rem;
  padding-top:.3rem;
  margin-top:auto;
}
.quote-name{
  font-size:.8125rem;
  font-weight:650;
  letter-spacing:.06em;
  color:var(--gold);
}
.on-paper .quote-name{ color:var(--gold-deep); }
.quote-ctx{
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--on-navy-3);
  font-weight:600;
}
.on-paper .quote-ctx{ color:var(--ink-3); }
.stars{ color:var(--gold); font-size:.8125rem; letter-spacing:.16em; }

.masonry{ columns:3; column-gap:clamp(1.25rem,2.4vw,1.75rem); }
.masonry > *{ break-inside:avoid; margin-bottom:clamp(1.25rem,2.4vw,1.75rem); }
@media (max-width:1000px){ .masonry{ columns:2; } }
@media (max-width:640px){ .masonry{ columns:1; } }

/* ---------------------------------------------------------- split/img ---- */

.split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.split.narrow-img{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); }
@media (max-width:900px){
  .split,.split.narrow-img{ grid-template-columns:minmax(0,1fr); }
}

.framed{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
}
.framed::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(212,160,23,.3);
  border-radius:var(--radius);
  pointer-events:none;
}
.framed.offset{ box-shadow:clamp(.85rem,2vw,1.6rem) clamp(.85rem,2vw,1.6rem) 0 0 var(--gold); }

/* --------------------------------------------------------------- blog ---- */

.post-hero{
  position:relative;
  padding-top:clamp(9rem,14vw,13rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.post-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .9rem;
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-navy-3);
  font-weight:600;
  margin-bottom:1.35rem;
}
.post-meta .cat{ color:var(--gold); }

.prose{
  max-width:70ch;
  font-size:clamp(1.0625rem,1rem + .28vw,1.1875rem);
  line-height:1.78;
  color:var(--ink-2);
}
.prose > * + *{ margin-top:1.3em; }
.prose h2{
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);
  color:var(--ink);
  margin-top:2.4em;
  padding-top:1.4rem;
  border-top:1px solid rgba(16,28,39,.14);
}
.prose h3{
  font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);
  color:var(--ink);
  margin-top:1.9em;
}
.prose h4{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-top:1.7em;
  margin-bottom:-.4em;
}
.prose a{
  color:var(--navy);
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  transition:color .25s;
}
.prose a:hover{ color:var(--gold-deep); }
.prose ul{ padding-left:0; list-style:none; display:grid; gap:.7em; }
.prose ul li{ padding-left:1.5rem; position:relative; }
.prose ul li::before{
  content:"";
  position:absolute; left:0; top:.72em;
  width:8px; height:1px;
  background:var(--gold);
}
.prose strong{ color:var(--ink); font-weight:650; }
.prose img{ border-radius:var(--radius); margin-block:2em; }
.prose blockquote{
  margin:2em 0;
  padding:1.25rem 0 1.25rem 1.6rem;
  border-left:2px solid var(--gold);
  font-family:var(--serif);
  font-size:1.2em;
  line-height:1.5;
  color:var(--ink);
}
.prose blockquote p{ margin:0; }

.callout{
  margin-block:2.5em;
  padding:clamp(1.4rem,3vw,2rem);
  background:var(--paper-2);
  border-left:2px solid var(--gold);
  border-radius:var(--radius);
  font-size:.9375rem;
  line-height:1.7;
}
.callout p{ margin:0; }
.callout p + p{ margin-top:.8em; }

/* post cards */
.post-card{
  display:grid;
  grid-template-rows:auto 1fr;
  background:#fff;
  border:1px solid rgba(16,28,39,.10);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  height:100%;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.post-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:rgba(168,124,12,.4);
}
.post-card .card-media{ aspect-ratio:16/10; background:var(--paper-2); }
.post-card-body{
  padding:clamp(1.25rem,2.4vw,1.65rem);
  display:grid;
  gap:.7rem;
  align-content:start;
}
.post-card h3{
  font-size:clamp(1.125rem,1.02rem + .5vw,1.3125rem);
  margin:0;
  line-height:1.25;
}
.post-card p{
  font-size:.9375rem;
  color:var(--ink-2);
  line-height:1.6;
  margin:0;
}
.post-card .date{
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:600;
}

.feature-post{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  background:#fff;
  border:1px solid rgba(16,28,39,.10);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.feature-post:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.feature-post .card-media{ aspect-ratio:auto; min-height:340px; }
.feature-post-body{
  padding:clamp(1.75rem,4vw,3.25rem);
  display:grid;
  gap:1rem;
  align-content:center;
}
@media (max-width:860px){
  .feature-post{ grid-template-columns:minmax(0,1fr); }
  .feature-post .card-media{ min-height:0; aspect-ratio:16/9; }
}

/* ------------------------------------------------------------ podcast ---- */

.ep{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.25rem);
  align-items:center;
  padding:clamp(1.4rem,3vw,2.1rem) 0;
  border-bottom:1px solid var(--navy-line);
}
.ep:first-of-type{ border-top:1px solid var(--navy-line); }
.ep-n{
  font-family:var(--serif);
  font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);
  font-weight:600;
  color:var(--gold);
  line-height:1;
  letter-spacing:-.03em;
  min-width:2.4ch;
  font-variant-numeric:lining-nums tabular-nums;
}
.ep-body{ display:grid; gap:.5rem; }
.ep-body h3{ margin:0; font-size:clamp(1.15rem,1.02rem + .65vw,1.5rem); }
.ep-guest{
  font-size:.75rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--on-navy-3);
  font-weight:600;
}
.ep-guest b{ color:var(--on-navy-2); font-weight:600; }
.ep-status{
  font-size:.625rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-navy-3);
  border:1px solid rgba(242,239,233,.2);
  padding:.4rem .7rem;
  border-radius:2px;
  white-space:nowrap;
}
@media (max-width:720px){
  .ep{ grid-template-columns:auto minmax(0,1fr); }
  .ep-status{ grid-column:2; justify-self:start; }
}

.segment{
  display:grid;
  gap:.6rem;
  padding:1.5rem 0 0;
  border-top:1px solid var(--navy-line);
}
.segment h4{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
}
.segment p{ font-size:.9375rem; color:var(--on-navy-2); margin:0; line-height:1.65; }

/* ---------------------------------------------------------- galleries ---- */

.mosaic{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,1.2vw,.9rem);
}
.mosaic figure{ margin:0; position:relative; overflow:hidden; border-radius:var(--radius); background:var(--navy-2); }
.mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.mosaic figure:hover img{ transform:scale(1.06); }
.mosaic .tall{ grid-row:span 2; }
.mosaic .wide{ grid-column:span 2; }
.mosaic figure{ aspect-ratio:4/3; }
.mosaic .tall{ aspect-ratio:2/3; }
.mosaic .wide{ aspect-ratio:8/3; }
.mosaic figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:2.5rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(13,27,42,.92));
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--on-navy);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.mosaic figure:hover figcaption,.mosaic figure:focus-within figcaption{ opacity:1; transform:none; }
@media (max-width:900px){ .mosaic{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){
  .mosaic{ grid-template-columns:minmax(0,1fr); }
  .mosaic .wide,.mosaic .tall{ grid-column:auto; grid-row:auto; aspect-ratio:4/3; }
  .mosaic figcaption{ opacity:1; transform:none; }
}

/* social embeds */
.embeds{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(1rem,2vw,1.6rem);
  align-items:start;
}
.embeds blockquote.instagram-media{
  margin:0 !important;
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  border-radius:var(--radius) !important;
}
@media (max-width:400px){
  .embeds{ grid-template-columns:minmax(0,1fr); }
}

.social-links{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.7rem 1.15rem;
  border:1px solid rgba(242,239,233,.2);
  border-radius:100px;
  text-decoration:none;
  font-size:.75rem;
  font-weight:650;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-navy-2);
  transition:border-color .3s, color .3s, transform .35s var(--ease), background-color .3s;
}
.chip:hover{
  color:var(--navy);
  background:var(--gold);
  border-color:var(--gold);
  transform:translateY(-2px);
}
.on-paper .chip{ border-color:rgba(16,28,39,.2); color:var(--ink-2); }

/* --------------------------------------------------------------- form ---- */

.form{ display:grid; gap:1.15rem; }
.field{ display:grid; gap:.5rem; }
.field label{
  font-size:.6875rem;
  font-weight:650;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--on-navy-2);
}
.on-paper .field label{ color:var(--ink-2); }
.field input,.field select,.field textarea{
  font:inherit;
  font-size:.9375rem;
  color:var(--on-navy);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(242,239,233,.18);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  width:100%;
  transition:border-color .3s, background-color .3s, box-shadow .3s;
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.6; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(212,160,23,.14);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--on-navy-3); }
.field select option{ background:var(--navy-1); color:var(--on-navy); }
.form-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem; }
@media (max-width:620px){ .form-row{ grid-template-columns:minmax(0,1fr); } }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fine{
  font-size:.75rem;
  line-height:1.6;
  color:var(--on-navy-3);
}
.on-paper .fine{ color:var(--ink-3); }

.contact-line{
  display:grid;
  gap:.3rem;
  padding:1.25rem 0;
  border-bottom:1px solid var(--navy-line);
}
.contact-line:first-of-type{ border-top:1px solid var(--navy-line); }
.contact-line dt{
  font-size:.6875rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--on-navy-3);
  font-weight:600;
}
.contact-line dd{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.1rem,1rem + .5vw,1.375rem);
  font-weight:600;
  letter-spacing:-.01em;
}
.contact-line dd a{ text-decoration:none; transition:color .25s; }
.contact-line dd a:hover{ color:var(--gold); }

/* ------------------------------------------------------------- footer ---- */

.foot{
  background:#081320;
  border-top:1px solid var(--navy-line);
  padding-block:clamp(3.5rem,6vw,5.5rem) 2rem;
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem);
}
@media (max-width:960px){ .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:minmax(0,1fr); } }

.foot h4{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.25rem;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.foot a{
  text-decoration:none;
  color:var(--on-navy-2);
  font-size:.9375rem;
  transition:color .25s;
}
.foot a:hover{ color:var(--gold); }
.foot address{ font-style:normal; color:var(--on-navy-2); font-size:.9375rem; line-height:1.8; }
.sign{
  font-family:var(--serif);
  font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  font-weight:600;
  color:var(--on-navy);
  letter-spacing:-.015em;
  margin:0 0 .85rem;
}
.foot-base{
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.75rem;
  border-top:1px solid rgba(242,239,233,.09);
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1.5rem;
  align-items:center;
  font-size:.75rem;
  color:var(--on-navy-3);
}
.foot-base a{ font-size:.75rem; color:var(--on-navy-3); }
.foot-base .eho{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-left:auto;
}
@media (max-width:760px){ .foot-base .eho{ margin-left:0; } }

/* --------------------------------------------------------- animations ---- */

.js .rv{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}
.js .rv.in{ opacity:1; transform:none; }

.js .rv-img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease);
  transition-delay:var(--d,0ms);
}
.js .rv-img.in{ clip-path:inset(0 0 0 0); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv,.rv-img,.js .rv,.js .rv-img{ opacity:1; transform:none; clip-path:none; }
  .hero-bg{ transform:none !important; }
}

/* ---------------------------------------------------------- utilities ---- */

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip{
  position:absolute;
  top:-100px; left:1rem;
  z-index:200;
  background:var(--gold);
  color:var(--navy);
  padding:.75rem 1.25rem;
  border-radius:var(--radius);
  font-size:.8125rem;
  font-weight:650;
  text-decoration:none;
  transition:top .3s var(--ease);
}
.skip:focus{ top:1rem; }

.gold{ color:var(--gold); }
.on-paper .gold{ color:var(--gold-deep); }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }

/* ----------------------------------------------------------- lightbox ---- */

.lb{
  position:fixed;
  inset:0;
  z-index:200;
  margin:0;
  display:grid;
  place-items:center;
  gap:1rem;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(8,19,32,.94);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  animation:lbIn .3s var(--ease);
}
@keyframes lbIn{ from{ opacity:0 } to{ opacity:1 } }
.lb img{
  max-width:min(1400px,100%);
  max-height:82vh;
  width:auto;
  object-fit:contain;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.lb figcaption{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-navy-2);
  font-weight:600;
  text-align:center;
  max-width:60ch;
}
.lb [data-lb-close]{
  position:absolute;
  top:clamp(.75rem,2vw,1.5rem);
  right:clamp(.75rem,2vw,1.5rem);
  width:48px; height:48px;
  font-size:1.75rem;
  line-height:1;
  background:transparent;
  color:var(--on-navy);
  border:1px solid rgba(242,239,233,.28);
  border-radius:var(--radius);
  cursor:pointer;
  transition:background-color .25s, color .25s, border-color .25s;
}
.lb [data-lb-close]:hover{ background:var(--gold); color:var(--navy); border-color:var(--gold); }

.mosaic img[data-lb-src]{ cursor:zoom-in; }

/* filter buttons ---------------------------------------------------------- */

[data-filters] button[aria-pressed="true"]{
  background:var(--gold);
  color:var(--navy);
  border-color:var(--gold);
}
[data-filters] button[aria-pressed="true"]::after{ display:none; }

/* instagram embed placeholder --------------------------------------------- */

.embeds > div{ min-height:120px; }
.ig-fallback{
  display:grid;
  gap:.75rem;
  padding:clamp(1.25rem,3vw,1.75rem);
  border:1px solid rgba(16,28,39,.14);
  border-radius:var(--radius);
  background:#fff;
  font-size:.875rem;
  color:var(--ink-2);
}

/* --------------------------------------------------------------- print ---- */

@media print{
  .js .rv,.js .rv-img,.rv,.rv-img{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .nav,.scroll-cue,.lb,[data-filters]{ display:none !important; }
  body{ background:#fff; color:#000; }
  .on-paper,.on-deep,section{ background:#fff !important; color:#000 !important; }
  h1,h2,h3,h4,.stat-n,.card-price{ color:#000 !important; }
  a{ text-decoration:underline; }
  .band,.band-tight{ padding-block:1.5rem; }
}

/* -------------------------------------------------------- listing specs ---- */

.spec-list{
  margin:1.75rem 0 0;
  display:grid;
  border-top:1px solid rgba(16,28,39,.16);
}
.spec-list > div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.25rem;
  padding:.7rem 0;
  border-bottom:1px solid rgba(16,28,39,.10);
  font-size:.875rem;
}
.spec-list dt{
  color:var(--ink-3);
  font-weight:600;
  letter-spacing:.05em;
  white-space:nowrap;
}
.spec-list dd{
  margin:0;
  color:var(--ink);
  text-align:right;
}

/* ---------------------------------------------------------- quote grid ---- */
/* Six tracks so eight cards fill every row: six cards span two, the final
   two span three. No ragged bottom edge, unlike CSS columns. */

.quote-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.4vw,1.75rem);
  align-items:stretch;
}

@media (max-width:1040px){
  .quote-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quote-grid > *{ grid-column:auto; }
}
@media (max-width:640px){
  .quote-grid{ grid-template-columns:minmax(0,1fr); }
}

/* keep the subject when a wide photo is cover-cropped into a 4:3 tile */
.mosaic figure.crop-left img{ object-position:left center; }
.mosaic figure.crop-right img{ object-position:right center; }

/* ------------------------------------------------- live NWMLS additions ---- */

[data-new-listings] .wrap > *{ max-width:none; }

.new-listing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(1.5rem,3vw,2.25rem);
}
.new-listing{
  display:grid;
  align-content:start;
  gap:.45rem;
  padding:clamp(1.25rem,2.5vw,1.75rem);
  background:#fff;
  border:1px solid rgba(16,28,39,.10);
  border-left:2px solid var(--gold);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--ink);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.new-listing:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.new-listing-tag{
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.new-listing-price{
  font-family:var(--serif);
  font-size:clamp(1.35rem,1.15rem + .8vw,1.7rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--navy);
}
.new-listing-addr{
  font-family:var(--serif);
  font-size:1.0625rem;
  font-weight:600;
  line-height:1.3;
}
.new-listing-spec{
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--ink-3);
}

/* ================================================ search, buy and sell ===
   Components introduced with search.html, buy.html and sell.html. Everything
   here leans on the tokens and the .card system already defined above.      */

.sec-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem 2rem;
  margin-bottom:clamp(1.75rem,3vw,2.75rem);
}
.sec-head .h2{ margin:0; }
.sec-note{
  margin:0;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--on-navy-3);
}
.on-paper .sec-note{ color:var(--ink-3); }

.lnk{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:600;
  font-size:.9375rem;
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s, gap .3s var(--ease);
}
.lnk:hover{ border-bottom-color:currentColor; gap:.7rem; }
.on-paper .lnk{ color:var(--gold-deep); }

/* ------------------------------------------------------- listing filter */
.lfilter{
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
  padding:clamp(1rem,2vw,1.35rem);
  background:var(--navy-1);
  border:1px solid rgba(242,239,233,.09);
  border-radius:var(--radius);
}
.lfilter-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:.85rem;
}
.lf-field{ display:grid; gap:.35rem; min-width:7.5rem; }
.lf-grow{ flex:1 1 14rem; }
.lf-field > span{
  font-size:.625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--on-navy-3);
}
.lf-field input,.lf-field select{
  width:100%;
  padding:.6rem .75rem;
  font:inherit;
  font-size:.9375rem;
  color:var(--on-navy);
  background:var(--navy-2);
  border:1px solid rgba(242,239,233,.14);
  border-radius:10px;
  transition:border-color .25s, box-shadow .25s;
}
.lf-field input::placeholder{ color:var(--on-navy-3); }
.lf-field input:focus-visible,.lf-field select:focus-visible{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,160,23,.22);
}
.lf-reset{
  padding:.6rem 1rem;
  font:inherit;
  font-size:.8125rem;
  font-weight:600;
  color:var(--on-navy-2);
  background:transparent;
  border:1px solid rgba(242,239,233,.18);
  border-radius:10px;
  cursor:pointer;
  transition:color .25s, border-color .25s;
}
.lf-reset:hover{ color:var(--gold); border-color:rgba(212,160,23,.5); }
.lfilter-count{
  margin:.85rem 0 0;
  font-size:.8125rem;
  color:var(--on-navy-3);
}
.lgrid-empty{
  margin:clamp(1.5rem,3vw,2.5rem) 0 0;
  padding:clamp(1.5rem,3vw,2.25rem);
  text-align:center;
  color:var(--on-navy-2);
  background:var(--navy-1);
  border:1px dashed rgba(242,239,233,.16);
  border-radius:var(--radius);
}

/* --------------------------------------------------------- the IDX frame */
/* The office search carries its own site header. Cropping it keeps the
   visitor inside richdemoors.com instead of handing them a second nav bar.
   Worst case if that header ever changes height is a visible sliver.       */
.idx-frame{
  --idx-crop:60px;
  position:relative;
  overflow:hidden;
  height:min(80vh,860px);
  min-height:560px;
  border:1px solid rgba(16,28,39,.14);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  background:#fff;
}
.idx-frame iframe{
  position:absolute;
  top:calc(var(--idx-crop) * -1);
  left:0;
  width:100%;
  height:calc(100% + var(--idx-crop));
  border:0;
}
.idx-note{
  margin:1rem 0 0;
  font-size:.8125rem;
  line-height:1.65;
  color:var(--ink-3);
}
.idx-note a{ color:var(--gold-deep); }
@media (max-width:900px){
  .idx-frame{ --idx-crop:0px; height:78vh; }
}

/* -------------------------------------------------------------- steps */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.step{
  position:relative;
  padding-top:2.75rem;
  border-top:1px solid rgba(242,239,233,.14);
}
.on-paper .step{ border-top-color:rgba(16,28,39,.12); }
.step-n{
  position:absolute;
  top:1rem; left:0;
  font-family:var(--serif);
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--gold);
}
.step h3{
  margin:0 0 .6rem;
  font-family:var(--serif);
  font-size:1.1875rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.step p{ margin:0; color:var(--on-navy-2); font-size:.9375rem; line-height:1.7; }
.on-paper .step p{ color:var(--ink-2); }
.step a{ color:var(--gold); }
.on-paper .step a{ color:var(--gold-deep); }

/* ------------------------------------------------------- the calculator */
.calc{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,3vw,2.75rem);
  align-items:start;
}
.calc-inputs{
  display:grid;
  /* min() lets the track floor collapse instead of overflowing the column and
     sliding under the results panel beside it. */
  grid-template-columns:repeat(auto-fit,minmax(min(10rem,100%),1fr));
  gap:1rem 1.25rem;
  min-width:0;
}
.calc-field{ display:grid; gap:.4rem; }
.calc-field > span{
  font-size:.625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink-3);
}
.calc-input{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.15rem .8rem;
  background:#fff;
  border:1px solid rgba(16,28,39,.16);
  border-radius:10px;
  transition:border-color .25s, box-shadow .25s;
}
.calc-input:focus-within{
  border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(212,160,23,.20);
}
.calc-input i{
  font-style:normal;
  font-weight:600;
  color:var(--ink-3);
  font-size:.9375rem;
}
.calc-input input,.calc-input select{
  flex:1;
  min-width:0;
  padding:.6rem 0;
  font:inherit;
  font-size:1rem;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--ink);
  background:transparent;
  border:0;
}
.calc-input input:focus,.calc-input select:focus{ outline:none; }
.calc-out{
  padding:clamp(1.35rem,2.6vw,1.85rem);
  background:var(--navy);
  color:var(--on-navy);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
.calc-total{
  margin:0 0 1.15rem;
  display:flex;
  align-items:baseline;
  gap:.5rem;
  flex-wrap:wrap;
}
.calc-total span{
  font-family:var(--serif);
  font-size:clamp(2.1rem,1.5rem + 2.4vw,3rem);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;
}
.calc-total small{
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--on-navy-3);
}
.calc-break{ margin:0; padding:0; list-style:none; display:grid; gap:.55rem; }
.calc-break li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  font-size:.875rem;
  color:var(--on-navy-2);
}
.calc-break b{
  font-weight:600;
  color:var(--on-navy);
  font-variant-numeric:lining-nums tabular-nums;
}
.calc-sep{
  margin-top:.5rem;
  padding-top:.85rem;
  border-top:1px solid rgba(242,239,233,.14);
}
.calc-note{
  margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;
  max-width:70ch;
  font-size:.8125rem;
  line-height:1.7;
  color:var(--ink-3);
}
@media (max-width:820px){
  .calc{ grid-template-columns:minmax(0,1fr); }
}

/* ------------------------------------------------------------- reads row */
.read-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);
}
.read-card{
  display:grid;
  align-content:start;
  gap:.7rem;
  padding:clamp(1.35rem,2.6vw,1.85rem);
  background:var(--navy-1);
  border:1px solid rgba(242,239,233,.09);
  border-left:2px solid var(--gold);
  border-radius:var(--radius);
  text-decoration:none;
  color:inherit;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
}
.read-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(212,160,23,.4);
  border-left-color:var(--gold-lift);
}
.on-paper .read-card{
  background:#fff;
  border-color:rgba(16,28,39,.10);
  border-left-color:var(--gold);
}
.read-k{
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
.on-paper .read-k{ color:var(--gold-deep); }
.read-card h3{
  margin:0;
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.01em;
}

/* -------------------------------------------------------------- story */
.story{ max-width:62ch; }
.story .h2{ margin-bottom:1rem; }
.story .lede{ margin-bottom:1.15rem; }
.story p{ color:var(--ink-2); }

/* ------------------------------------------------------------ CTA band */
.cta-band{
  background:
    radial-gradient(1100px 420px at 15% 0%, rgba(212,160,23,.16), transparent 65%),
    var(--navy-1);
  border-top:1px solid var(--navy-line);
}
.cta-in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1.5rem,4vw,3.5rem);
}
.cta-in > div{ max-width:46ch; }
.cta-in .h2{ margin:.25rem 0 .75rem; }
.cta-in .lede{ margin:0; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.85rem; }
.btn-lg{ padding:1rem 1.7rem; font-size:.8125rem; }

/* A footnote to the closings list, not a second headline story. Sits inside
   the same grid, so it reads as part of the record rather than a pitch. */
.same-client{
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
  padding:clamp(1.35rem,2.8vw,2rem);
  max-width:64ch;
  background:var(--navy-1);
  border:1px solid rgba(242,239,233,.09);
  border-left:2px solid var(--gold);
  border-radius:var(--radius);
}
.same-client .eyebrow{ margin:0 0 .6rem; }
.same-client p{
  margin:0;
  color:var(--on-navy-2);
  font-size:.9375rem;
  line-height:1.72;
}
.same-client-foot{ margin-top:1rem !important; }