/* Cindy Diaz-Rodriguez — the "dossier" system.

   Her own marketing is navy and gold, so the page is built on that rather than
   on a stock palette: deep navy bands carry the moments that need weight (the
   hero, the path, the closing wall) and warm paper carries everything a person
   actually has to read. One gold, used for rules, numerals and a single fill.

   The two reference sites in this family use a 4px radius on white with a sky
   blue, and 0 radius on off-white with a cadmium red. This one is 12px on warm
   paper, so nothing here reads as a reskin of either. */

:root {
  /* dark ground */
  --ink:      #0C1B2A;
  --ink-2:    #13293C;
  --ink-3:    #1C374E;
  --on-ink:   #F4F1EA;
  --on-ink-m: #A7B6C4;   /* 7.3:1 on --ink */

  /* paper ground */
  --paper:    #F4F1EA;
  --paper-2:  #EBE6DB;
  --paper-3:  #E1DACC;
  --line:     #D6CEBE;
  --line-2:   #BFB4A0;
  --body-ink: #14202B;   /* 14.9:1 on --paper */
  --muted:    #576470;   /* 5.6:1 on --paper */

  /* the one accent, from her own cards */
  --gold:      #B0832F;  /* fills, rules, numerals */
  --gold-text: #7E5C1D;  /* 5.4:1 on --paper, for small gold text */
  --gold-lift: #D8A94A;  /* 8.0:1 on --ink, for gold on navy */
  --on-gold:   #16120A;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body:    "Karla", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --wrap: 78rem;
  --hdr-h: 72px;
  --r: 12px;
  --r-sm: 8px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body-ink);
  font: 400 clamp(1rem, .95rem + .22vw, 1.0938rem)/1.66 var(--body);
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

::selection { background: var(--gold); color: var(--on-gold); }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; border-radius: 3px; }
.dark :focus-visible { outline-color: var(--gold-lift); }

.vh {
  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; left: var(--gutter); top: -100px; z-index: 90;
  background: var(--gold); color: var(--on-gold);
  padding: .7rem 1.1rem; border-radius: var(--r-sm); font-weight: 600;
}
.skip:focus { top: .75rem; }

/* ── type ───────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

.d1 { font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.35rem); letter-spacing: -.018em; }
.d2 { font-size: clamp(1.95rem, 1.35rem + 2.5vw, 3.15rem); }
.d3 { font-size: clamp(1.3rem, 1.1rem + .85vw, 1.7rem); line-height: 1.18; }

.lede {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
  margin: 1.1rem 0 0;
  text-wrap: pretty;
}
.dark .lede { color: var(--on-ink-m); }

.eyebrow {
  font-family: var(--body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--gold-text);
  margin: 0 0 .85rem;
  display: flex; align-items: center; gap: .6rem;
}
.dark .eyebrow { color: var(--gold-lift); }
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: currentColor; flex: none; border-radius: 2px;
}

.num {
  font-family: var(--display);
  font-weight: 300;
  font-size: 2.45rem;
  line-height: 1;
  color: var(--gold-text);
  font-variant-numeric: lining-nums tabular-nums;
}
.dark .num { color: var(--gold-lift); }

/* ── layout shells ──────────────────────────────────────────────────────── */

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }

.sec { padding: clamp(4.5rem, 3rem + 7vw, 8.5rem) 0; position: relative; }
.sec--tight { padding-block: clamp(3.25rem, 2.5rem + 4vw, 5.5rem); }

.paper-2 { background: var(--paper-2); }
.dark { background: var(--ink); color: var(--on-ink); }
.dark h1, .dark h2, .dark h3 { color: var(--on-ink); }

.head { max-width: 52rem; margin-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); }
.head--split {
  max-width: none; display: grid; gap: 1.25rem 3rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end;
}
.head--split .lede { margin-top: 0; max-width: 42ch; }
@media (max-width: 62rem) { .head--split { grid-template-columns: 1fr; } }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.dark .rule { background: rgba(244, 241, 234, .16); }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700; font-size: .9688rem; letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: .55rem 1.05rem; font-size: .875rem; }

.btn--fill { background: var(--gold); color: var(--on-gold); }
.btn--fill:hover { background: #C4933A; }
.dark .btn--fill { background: var(--gold-lift); color: var(--on-gold); }
.dark .btn--fill:hover { background: #E4BA63; }

.btn--ghost { border-color: var(--line-2); color: var(--body-ink); background: transparent; }
.btn--ghost:hover { background: var(--paper-3); border-color: var(--body-ink); }
.dark .btn--ghost { border-color: rgba(244, 241, 234, .34); color: var(--on-ink); }
.dark .btn--ghost:hover { background: rgba(244, 241, 234, .1); border-color: var(--on-ink); }

.btn.is-busy { opacity: .6; pointer-events: none; }
.btn:disabled { opacity: .35; pointer-events: none; }

/* ── header ─────────────────────────────────────────────────────────────── */

.hdr {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--hdr-h);
  display: flex; align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.hdr__in {
  width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; gap: 1.25rem;
}

.brand { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; margin-right: auto; min-width: 0; }
.brand b {
  font-family: var(--display); font-weight: 500; font-size: 1.2rem; letter-spacing: -.015em; white-space: nowrap;
}
.brand span {
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  color: var(--gold-text); white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  text-decoration: none; padding: .5rem .72rem; border-radius: var(--r-sm);
  font-size: .9375rem; font-weight: 500; white-space: nowrap;
}
.nav a:hover { background: var(--paper-3); }

.lang { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; margin-left: .35rem; }
.lang a { padding: .34rem .68rem; font-size: .75rem; font-weight: 700; text-decoration: none; letter-spacing: .04em; }
.lang a[aria-current] { background: var(--body-ink); color: var(--paper); }

.hdr .btn { margin-left: .35rem; }

.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line-2);
  background: transparent; border-radius: var(--r-sm); cursor: pointer;
  align-items: center; justify-content: center; color: inherit;
}
.burger span { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; transition: transform .25s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Over the navy hero the header goes transparent. Every light-on-dark rule is
   scoped :not(.is-nav-open) so the phone drawer never renders paper on paper. */
.hdr--over:not(.is-nav-open) {
  background: transparent; border-bottom-color: transparent; color: var(--on-ink);
}
.hdr--over:not(.is-nav-open) .brand span { color: var(--gold-lift); }
.hdr--over:not(.is-nav-open) .nav a:hover { background: rgba(244, 241, 234, .12); }
.hdr--over:not(.is-nav-open) .lang { border-color: rgba(244, 241, 234, .38); }
.hdr--over:not(.is-nav-open) .lang a[aria-current] { background: var(--on-ink); color: var(--ink); }
.hdr--over:not(.is-nav-open) .burger { border-color: rgba(244, 241, 234, .38); }
.hdr--over:not(.is-nav-open) .btn--ghost { border-color: rgba(244, 241, 234, .38); color: var(--on-ink); }
.hdr--over:not(.is-nav-open) .btn--ghost:hover { background: rgba(244, 241, 234, .12); }

/* The Spanish nav is materially longer than the English one, so the bar has to
   give up the brand tag and tighten its spacing well before it collapses, or
   "REALTOR" ends up sitting under the first link. */
@media (max-width: 100rem) {
  .brand span { display: none; }
  .nav a { padding: .5rem .5rem; font-size: .9062rem; }
  .hdr__in { gap: .85rem; }
}

@media (max-width: 76rem) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--hdr-h) 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.4rem; transform: translateY(-8px);
    opacity: 0; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease);
    max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: .85rem .2rem; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.0625rem; }
  .nav .lang { margin: 1rem 0 0; align-self: flex-start; }
  .hdr .btn { display: none; }
  .nav .btn { display: inline-flex; margin: 1rem 0 0; align-self: flex-start; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  background: var(--ink);
  color: var(--on-ink);
  padding: calc(var(--hdr-h) + clamp(3rem, 2rem + 5vw, 6rem)) 0 0;
  position: relative; overflow: hidden;
}
/* A single soft pool of light behind her, so the cutout has somewhere to stand. */
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 62rem; height: 62rem; right: -14rem; top: -18rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 131, 47, .22), rgba(176, 131, 47, 0) 62%);
}
.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end;
}
.hero__copy { padding-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); }
.hero .d1 { max-width: 18ch; }
.hero__sub { max-width: 40ch; margin-top: 1.4rem; }
.hero__act { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.hero__fig { position: relative; align-self: end; margin-bottom: -1px; }
.hero__fig img { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45)); }

/* The proof strip sits on the seam between the navy and the paper. */
.proof {
  position: relative; z-index: 2;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.proof__in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line);
}
.proof__cell { background: var(--paper); padding: 1.5rem clamp(.85rem, .5rem + 1vw, 1.75rem); }
.proof__cell b {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1;
}
.proof__cell > span { display: block; margin-top: .3rem; font-size: .875rem; color: var(--muted); }
.stars { display: flex; align-items: center; gap: 2px; flex: none; }
.stars svg { width: 15px; height: 15px; flex: none; fill: var(--gold); }
.stars svg[data-off] { fill: var(--line-2); }

@media (max-width: 62rem) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__copy { padding-bottom: 0; }
  .hero__fig { max-width: 24rem; margin-inline: auto; margin-top: 2rem; }
  .proof__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .proof__in { grid-template-columns: 1fr; }
}

/* ── valuation wizard ───────────────────────────────────────────────────── */

.wizwrap { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
@media (max-width: 64rem) { .wizwrap { grid-template-columns: 1fr; } }

.wiz {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.25rem, 1rem + 1.6vw, 2.25rem);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -32px rgba(12, 27, 42, .45);
}
.wiz__bar { display: flex; gap: .4rem; margin-bottom: 1.6rem; }
.wiz__bar div {
  flex: 1; font-size: .78rem; font-weight: 700; color: var(--muted);
  padding-top: .6rem; border-top: 2px solid var(--line);
  transition: color .2s, border-color .2s;
}
.wiz__bar div[aria-current] { color: var(--gold-text); border-top-color: var(--gold); }
.wiz__act { display: flex; gap: .65rem; margin-top: 1.5rem; flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: .4rem; position: relative; }
.field + .field, .row2 + .row2, .row2 + .choice, .field + .choice { margin-top: 1rem; }
.field label, .choice p { font-size: .875rem; font-weight: 700; color: var(--body-ink); margin: 0; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--body-ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .72rem .85rem; width: 100%;
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold-text); outline-offset: 1px; border-color: transparent; }
.field input[aria-invalid="true"] { border-color: #A8331F; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 34rem) { .row2 { grid-template-columns: 1fr; } }

.err { color: #8E2A18; font-size: .8125rem; margin: 0; min-height: 1.1em; font-weight: 600; }
.done { color: var(--gold-text); font-size: .9375rem; margin: .9rem 0 0; font-weight: 600; }

.sugg {
  position: absolute; z-index: 20; top: calc(100% - 1.1rem); left: 0; right: 0;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: 0 18px 40px -20px rgba(12, 27, 42, .4); max-height: 17rem; overflow-y: auto;
}
.sugg button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: .6rem .85rem; cursor: pointer; font-size: .9375rem; border-bottom: 1px solid var(--line);
}
.sugg button:last-child { border-bottom: 0; }
.sugg button:hover, .sugg button[aria-selected="true"] { background: var(--paper-3); }
.sugg small { display: block; color: var(--muted); font-size: .78rem; }

.pinline {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  font-size: .8125rem; color: var(--muted); margin-top: .65rem;
}
.pinline a { color: var(--gold-text); font-weight: 700; }

.choice__opts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.choice__opts input { position: absolute; opacity: 0; pointer-events: none; }
.choice__opts label {
  border: 1px solid var(--line-2); border-radius: 999px; padding: .42rem .95rem;
  font-size: .875rem; font-weight: 600; cursor: pointer;
}
.choice__opts input:checked + label { background: var(--body-ink); color: var(--paper); border-color: var(--body-ink); }
.choice__opts input:focus-visible + label { outline: 2px solid var(--gold-text); outline-offset: 2px; }

/* ── the path (selling / buying switch) ─────────────────────────────────── */

.switch {
  display: inline-flex; padding: 4px; gap: 4px;
  background: rgba(244, 241, 234, .1); border: 1px solid rgba(244, 241, 234, .2);
  border-radius: 999px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}
.switch button {
  border: 0; background: transparent; color: var(--on-ink-m); cursor: pointer;
  padding: .6rem 1.35rem; border-radius: 999px; font-weight: 700; font-size: .9375rem;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.switch button[aria-selected="true"] { background: var(--on-ink); color: var(--ink); }

.path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: rgba(244, 241, 234, .18); }
.step { background: var(--ink); padding: 1.75rem clamp(.9rem, .6rem + .8vw, 1.45rem) 2rem; }
.step h3 { font-size: 1.0625rem; margin: .85rem 0 .5rem; font-family: var(--body); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.step p { margin: 0; font-size: .9375rem; color: var(--on-ink-m); line-height: 1.6; }
@media (max-width: 70rem) { .path { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .path { grid-template-columns: 1fr; } }

.path__foot { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* ── listings ───────────────────────────────────────────────────────────── */

.feat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: start; }
/* Both columns must be allowed to shrink. The thumbnail strip is a fixed-width
   flex row, and a grid item defaults to min-width:auto, so without this the
   strip sets the column width and pushes the whole page sideways on a phone. */
.feat > * { min-width: 0; }
@media (max-width: 64rem) { .feat { grid-template-columns: 1fr; } }

.stage {
  position: relative; border-radius: var(--r); overflow: hidden; background: var(--paper-3);
  border: 1px solid var(--line); aspect-ratio: 3 / 2;
}
.stage img, .stage video { width: 100%; height: 100%; object-fit: cover; }
.stage button.stage__hit { position: absolute; inset: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.stage__tag {
  position: absolute; left: .85rem; top: .85rem; z-index: 2;
  background: var(--gold); color: var(--on-gold); border-radius: 999px;
  padding: .32rem .8rem; font-size: .75rem; font-weight: 800; letter-spacing: .04em;
}
.stage__tag[data-status="sold"] { background: var(--body-ink); color: var(--paper); }
.stage__tag[data-status="pending"] { background: var(--paper); color: var(--body-ink); }

.thumbs { display: flex; gap: .5rem; max-width: 100%; margin-top: .6rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
.thumbs button {
  flex: none; width: 5.5rem; aspect-ratio: 3 / 2; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-3); cursor: pointer; padding: 0; opacity: .62;
  transition: opacity .18s, border-color .18s;
}
.thumbs button[aria-current="true"] { opacity: 1; border-color: var(--gold); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

.feat__body h3 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.15rem); }
.price {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 1.4rem + .9vw, 2.1rem); color: var(--gold-text); margin: .5rem 0 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.specs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.specs li {
  border: 1px solid var(--line); border-radius: 999px; padding: .34rem .85rem;
  font-size: .8438rem; font-weight: 600; background: var(--paper);
}
.specs b { font-weight: 800; }
.feat__body p.copy { margin: 1.15rem 0 0; color: var(--muted); }
.feat__body .btn { margin-top: 1.5rem; }

.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: clamp(1.1rem, .9rem + 1vw, 1.75rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.lcard { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
.lcard__img { aspect-ratio: 3 / 2; background: var(--paper-3); position: relative; }
.lcard__img img { width: 100%; height: 100%; object-fit: cover; }
.lcard__b { padding: 1.1rem 1.15rem 1.35rem; display: grid; gap: .3rem; }
.lcard__b h4 { font-family: var(--body); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0; }
.lcard__b .price { font-size: 1.35rem; margin: .2rem 0 0; }
.lcard__b small { color: var(--muted); font-size: .875rem; }

.empty {
  border: 1px dashed var(--line-2); border-radius: var(--r); padding: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  text-align: center; color: var(--muted);
}
.empty p { margin: 0; max-width: 42ch; margin-inline: auto; }

/* ── sold ledger ────────────────────────────────────────────────────────── */

.ledger { width: 100%; border-collapse: collapse; font-size: .9688rem; }
.ledger th {
  text-align: left; font-size: .75rem; font-weight: 800; letter-spacing: .06em;
  color: var(--muted); padding: 0 1rem .7rem 0; border-bottom: 1px solid var(--line-2);
}
.ledger td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ledger td.p { font-family: var(--display); font-size: 1.15rem; color: var(--gold-text); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ledger__th-img, .ledger__img { width: 7.5rem; }
.ledger__img img { width: 6.5rem; height: 4.35rem; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }

@media (max-width: 44rem) {
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger thead { display: none; }
  .ledger tr { border: 1px solid var(--line); border-radius: var(--r); padding: .85rem; margin-bottom: .85rem; background: var(--paper); }
  .ledger td { border: 0; padding: .2rem 0; display: flex; justify-content: space-between; gap: 1rem; }
  .ledger td::before { content: attr(data-label); font-size: .8125rem; font-weight: 700; color: var(--muted); }
  .ledger__img { width: 100%; }
  .ledger__img img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .ledger td.ledger__img::before { content: none; }
}

/* ── about ──────────────────────────────────────────────────────────────── */

.about { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
@media (max-width: 64rem) { .about { grid-template-columns: 1fr; } }
.about__fig { border-radius: var(--r); overflow: hidden; border: 1px solid rgba(244, 241, 234, .2); }
.about__fig img { width: 100%; height: auto; }
.about__body p { margin: 0 0 1.05rem; color: var(--on-ink-m); }
.about__body p:last-of-type { margin-bottom: 0; }
.about__body p.first { color: var(--on-ink); font-size: 1.15rem; line-height: 1.55; }

.facts { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1px; background: rgba(244, 241, 234, .18); border: 1px solid rgba(244, 241, 234, .18); border-radius: var(--r); overflow: hidden; }
.facts li { background: var(--ink); padding: .9rem 1.1rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; }
.facts li span:first-child { color: var(--on-ink-m); }
.facts li span:last-child { font-weight: 700; text-align: right; }
.facts a { color: var(--gold-lift); }

.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }
.strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-sm); }
@media (max-width: 48rem) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── reviews ────────────────────────────────────────────────────────────── */

.rslide__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.rslide__count { font-size: .8125rem; font-weight: 700; color: var(--muted); margin: 0; letter-spacing: .03em; }
.rslide__nav { display: flex; gap: .45rem; }
.rnav {
  width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--paper); cursor: pointer; display: grid; place-items: center; color: var(--body-ink);
}
.rnav:hover:not(:disabled) { background: var(--paper-3); }
.rnav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.rslide { min-width: 0; }
.rtrack {
  display: flex; min-width: 0;
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .5rem; scrollbar-width: none;
}
.rtrack::-webkit-scrollbar { display: none; }
.rtrack.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rev {
  flex: 0 0 auto; width: min(100%, 19rem);
  scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.35rem 1.4rem 1.25rem;
  display: grid; grid-template-rows: auto 1fr auto; gap: .85rem;
}
@media (min-width: 52rem) { .rev { width: 22rem; } }
@media (min-width: 75rem) { .rev { width: 25rem; } }

.rev__stars { display: flex; gap: 2px; }
.rev__stars svg { width: 15px; height: 15px; fill: var(--gold); }
.rev__stars svg[data-off] { fill: var(--line-2); }
.rev__text {
  margin: 0; font-size: .9688rem; line-height: 1.62; color: var(--body-ink);
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
}
.rev__by { display: flex; flex-direction: column; gap: .15rem; padding-top: .3rem; border-top: 1px solid var(--line); }
.rev__by b { font-size: .9375rem; }
.rev__by small { font-size: .78rem; color: var(--muted); letter-spacing: .02em; }

/* ── situation tiles ────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.85rem, .6rem + .9vw, 1.35rem); }
@media (max-width: 62rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .tiles { grid-template-columns: 1fr; } }

.tile {
  position: relative; display: block; text-decoration: none; border-radius: var(--r);
  overflow: hidden; min-height: 15rem; background: var(--body-ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem;
  isolation: isolate;
}
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12, 27, 42, .1) 20%, rgba(12, 27, 42, .88) 100%);
}
.tile:hover img { transform: scale(1.045); }
.tile b { font-size: 1.125rem; font-weight: 700; }
.tile span { font-size: .9062rem; color: rgba(244, 241, 234, .82); margin-top: .2rem; }

/* ── area index ─────────────────────────────────────────────────────────── */

.counties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
@media (max-width: 54rem) { .counties { grid-template-columns: 1fr; } }
.county > h3 {
  font-family: var(--body); font-weight: 800; font-size: .8125rem; letter-spacing: .06em;
  color: var(--gold-text); padding-bottom: .75rem; border-bottom: 2px solid var(--gold);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.county > h3 em { font-style: normal; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.towns { list-style: none; margin: 0; padding: 0; }
.towns li { border-bottom: 1px solid var(--line); }
.towns a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .82rem .25rem .82rem 0; text-decoration: none;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.45rem); letter-spacing: -.01em;
  transition: color .25s var(--ease);
}
.towns a > span { transition: transform .25s var(--ease); }
.towns a small {
  font-family: var(--body); font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  color: var(--muted); opacity: 0; transform: translateX(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease); white-space: nowrap;
}
.towns a:hover, .towns a:focus-visible { color: var(--gold-text); }
.towns a:hover > span, .towns a:focus-visible > span { transform: translateX(.85rem); }
.towns a:hover small, .towns a:focus-visible small { opacity: 1; transform: none; }

/* ── contact ────────────────────────────────────────────────────────────── */

.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (max-width: 64rem) { .contact { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; box-shadow: 0 18px 40px -34px rgba(12, 27, 42, .5);
}
.card__top { display: flex; gap: 1rem; align-items: center; }
.card__top img { width: 5.25rem; height: 5.25rem; border-radius: 999px; object-fit: cover; border: 2px solid var(--gold); }
.card__top b { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 500; }
.card__top span { font-size: .8125rem; font-weight: 700; letter-spacing: .05em; color: var(--gold-text); }
.card ul { list-style: none; margin: 1.35rem 0 0; padding: 0; display: grid; gap: .55rem; }
.card li { display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.card li:last-child { border-bottom: 0; padding-bottom: 0; }
.card li span:first-child { color: var(--muted); }
.card li a { font-weight: 700; text-align: right; text-decoration: none; }
.card li a:hover { color: var(--gold-text); }
.card .btn { width: 100%; margin-top: 1.35rem; }

.socials { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.socials a {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--body-ink);
}
.socials a:hover { background: var(--body-ink); color: var(--paper); border-color: var(--body-ink); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot { background: var(--ink); color: var(--on-ink-m); padding: clamp(3rem, 2.5rem + 3vw, 4.5rem) 0 7.5rem; position: relative; z-index: 1; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
@media (max-width: 62rem) { .foot__grid { grid-template-columns: 1fr; } }
.foot p { margin: 0; font-size: .8125rem; line-height: 1.6; }
.foot b.foot__name { font-family: var(--display); font-size: 1.25rem; font-weight: 500; color: var(--on-ink); }
.foot h4 { font-family: var(--body); font-size: .75rem; font-weight: 800; letter-spacing: .06em; color: var(--gold-lift); margin: 0 0 .7rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .875rem; }
.foot a { color: var(--on-ink); }
.foot__note {
  margin-top: 2.5rem; padding-top: 1.35rem; border-top: 1px solid rgba(244, 241, 234, .16);
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center; justify-content: space-between;
}
.foot__eho { display: flex; align-items: center; gap: .45rem; }

/* ── sticky call bar (phones) ───────────────────────────────────────────── */

.bar { display: none; }
@media (max-width: 48rem) {
  .bar {
    position: fixed; inset: auto 0 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr;
    background: var(--paper); border-top: 1px solid var(--line-2);
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); gap: .6rem;
  }
  .bar a {
    text-align: center; padding: .72rem; border-radius: 999px; text-decoration: none;
    font-weight: 700; font-size: .9375rem; border: 1px solid var(--line-2);
  }
  .bar a.is-primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
}

/* ── lightbox ───────────────────────────────────────────────────────────── */

.lb { position: fixed; inset: 0; z-index: 100; background: rgba(8, 16, 24, .95); display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.lb__fig { margin: 0; max-width: 100%; max-height: 100%; display: grid; place-items: center; }
.lb__fig img, .lb__fig video, .lb__fig iframe { max-width: 100%; max-height: 82vh; width: auto; border-radius: var(--r-sm); }
.lb__fig iframe { width: min(90vw, 62rem); aspect-ratio: 16 / 9; height: auto; border: 0; }
.lb__close { position: absolute; top: 1rem; right: 1rem; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb__nav--p { left: 1rem; }
.lb__nav--n { right: 1rem; }
.lb .btn { background: rgba(244, 241, 234, .14); color: var(--on-ink); border-color: rgba(244, 241, 234, .34); }
.lb .btn:hover { background: rgba(244, 241, 234, .26); }

/* ── reveal ─────────────────────────────────────────────────────────────── */

[data-rise] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-rise].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; transform: none; transition: none; }
  .tile img, .tile:hover img { transition: none; transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}