@charset "utf-8";
/* RG Properties -- rgproperties.com
   One stylesheet, no framework. Replaces publicstyle.css, mbcsmbmcp.css,
   layerslider.css, Window.Metro.css, Tabstrip.CustomTab.css, overlay-minimal.css,
   videolightbox.css, addtohomescreen.css and four Telerik WebResource sheets. */

/* ---------------------------------------------------------------- fonts --- */
/* Jost is a geometric sans in the same family as the Century Gothic the CMS
   asked for and shipped as a 137 KB TTF. Google serves it as ONE variable
   woff2 covering every weight, 26 KB, self-hosted here so the site makes no
   third-party request at all. */
@font-face {
  font-family: "Jost";
  src: url("fonts/jost-var-latin.woff2") format("woff2-variations"),
       url("fonts/jost-var-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Brand, sampled from graphics/logo.png: black, one gold, white. */
  --black:      #000000;
  --ink:        #16150f;
  --ink-2:      #4a4638;
  --ink-3:      #6d6858;
  --gold:       #b7932f;   /* the brand gold; 7.2:1 on black, background use   */
  --gold-deep:  #816a21;   /* gold as TEXT on white: 5.3:1                     */
  --gold-lift:  #d9b451;   /* gold as TEXT on black: 10.5:1                    */
  --on-gold:    #1c1607;   /* text on a gold field: 6.2:1                      */
  --paper:      #ffffff;
  --paper-2:    #f6f4ef;
  --paper-3:    #ebe7dd;
  --line:       #d9d4c6;
  --line-dark:  #2a2a24;

  --shell: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 4px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.22);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.08), 0 16px 40px -16px rgba(0,0,0,.3);

  --sans: "Jost", "Century Gothic", "Futura", "Avenir Next", "Trebuchet MS",
          system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Kept current by rg.js; the masthead is not a fixed height once the
     contact row wraps, so nothing may hard-code this. */
  --head: 84px;
}

/* ----------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, .96rem + .18vw, 1.0625rem)/1.65 var(--sans);
  overflow-wrap: break-word;
}
/* An author `display` beats the UA's [hidden]{display:none}, so any element
   this stylesheet gives a display to ignores the hidden attribute -- the map
   fallback (display:grid) stayed on screen under the loaded map. */
[hidden] { display: none !important; }
img, svg, iframe, video { max-width: 100%; }
img { height: auto; border: 0; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.9rem); }
h2 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.7rem); }
h3 { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); }
p, ul, ol, table { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.35em; }
li { margin: .3em 0; }
li > ul { margin: .35em 0 .1em; }
a { color: var(--gold-deep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px;
}
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--on-gold);
  padding: .7rem 1.1rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------- masthead -- */
/* The masthead is position:sticky and carries a z-index, which makes it a
   stacking context -- so the drawer inside it can never out-paint a sibling.
   The masthead itself has to sit above the backdrop, not the drawer. */
.masthead {
  position: sticky; top: 0; z-index: 70;
  background: var(--black); color: var(--paper);
  border-bottom: 3px solid var(--gold);
}
.masthead__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 78px; padding-block: .55rem;
}
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; width: 164px; height: auto; }
.masthead__spacer { flex: 1 1 auto; }

.masthead__tools { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.callbar {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--gold-lift); font-weight: 500; text-decoration: none;
  white-space: nowrap; font-size: .95rem;
}
.callbar:hover { color: var(--paper); }
.callbar svg { width: 1em; height: 1em; flex: none; }

/* The masthead needs 164 (logo) + 757 (nav) + 118 (phone) + 32 (gaps) = 1071px
   of content box, and the shell gives 1100 at 1180px wide. Measured, not
   guessed: below 1280 the phone number goes (it is still in the drawer and in
   the footer), and below 1180 the whole bar becomes the drawer. */
@media (max-width: 1279px) { .callbar { display: none; } }

/* the hamburger; hidden until the nav no longer fits */
.burger {
  display: none;
  width: 46px; height: 42px; padding: 0;
  background: transparent; border: 1px solid #4a4a42; border-radius: var(--radius);
  color: var(--paper); cursor: pointer;
}
.burger:hover { border-color: var(--gold); color: var(--gold-lift); }
.burger span, .burger span::before, .burger span::after {
  display: block; width: 20px; height: 2px; background: currentColor;
  margin-inline: auto; transition: transform .22s ease, opacity .18s ease;
}
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
[aria-expanded="true"] > span { background: transparent; }
[aria-expanded="true"] > span::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] > span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------ nav --- */
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; align-items: center; gap: .15rem; }
.nav > ul > li { position: relative; }
.nav a, .nav .navtop {
  display: block; padding: .6rem .58rem; border-radius: var(--radius);
  color: var(--paper); font: 500 .8125rem/1.1 var(--sans);
  letter-spacing: .028em; text-transform: uppercase; text-decoration: none;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  font-family: inherit;
}
.nav .navtop { display: inline-flex; align-items: center; gap: .35rem; width: 100%; }
.nav .navtop::after {
  content: ""; width: .38em; height: .38em; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg); transition: transform .18s ease;
}
.nav a:hover, .nav .navtop:hover, .nav li:hover > a, .nav li:hover > .navtop { color: var(--gold-lift); }
/* The active marker is a straight rule with square ends. An inset box-shadow
   (or a border-bottom) follows the item's 4px border-radius and curves up at
   both ends; a positioned bar does not. ::before, because ::after is already
   the dropdown chevron. */
.nav [aria-current="page"] { color: var(--gold-lift); }
.nav > ul > li > [aria-current] { position: relative; }
.nav > ul > li > [aria-current]::before {
  content: ""; position: absolute; left: .58rem; right: .58rem; bottom: 2px;
  height: 2px; background: var(--gold); border-radius: 0;
}

.nav .submenu {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: #12120f; border: 1px solid var(--line-dark); border-top: 3px solid var(--gold);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lift);
  padding: .35rem; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.nav li:hover > .submenu,
.nav li:focus-within > .submenu,
.nav .navtop[aria-expanded="true"] + .submenu {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav .navtop[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); }
.nav .submenu a {
  text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 400;
  padding: .55rem .7rem; white-space: normal;
}
.nav .submenu a:hover { background: #23231d; color: var(--gold-lift); }

.btn-cta {
  display: inline-block; padding: .6rem 1.05rem; border-radius: var(--radius);
  background: var(--gold); color: var(--on-gold) !important;
  font: 600 .875rem/1.1 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; border: 0; white-space: nowrap;
}
.btn-cta:hover { background: var(--gold-lift); color: var(--black) !important; }

.backdrop { display: none; }

/* -------------------------------------------------- nav -> drawer, phone -- */
@media (max-width: 1179px) {
  .burger { display: block; }
  .callbar { display: none; }

  /* The drawer IS the desktop bar. Collapsing it (rather than display:none)
     keeps one menu in the markup and stops the hamburger opening nothing. */
  .nav {
    position: static; background: transparent; padding: 0; border: 0;
  }
  .nav > ul {
    position: fixed; top: var(--head); left: 0; bottom: 0; z-index: 80;
    width: min(340px, 86vw);
    display: block; overflow-y: auto; overscroll-behavior: contain;
    background: #0c0c0a; border-right: 1px solid var(--line-dark);
    padding: .75rem .75rem 2.5rem;
    transform: translateX(-102%); visibility: hidden;
    transition: transform .26s cubic-bezier(.4,0,.2,1), visibility 0s linear .26s;
  }
  .nav[data-open="true"] > ul { transform: none; visibility: visible; transition-delay: 0s; }

  .nav > ul > li { border-bottom: 1px solid #21211b; }
  .nav > ul > li:last-child { border-bottom: 0; }
  .nav a, .nav .navtop { padding: .85rem .6rem; font-size: .95rem; }
  .nav .navtop { justify-content: space-between; }
  .nav .navtop::after { margin-left: auto; }

  .nav .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; min-width: 0; padding: 0 0 .5rem .6rem;
    background: transparent; border: 0; box-shadow: none;
    transition: none;
  }
  .nav .navtop[aria-expanded="true"] + .submenu { display: block; }
  .nav .submenu a { padding: .55rem .6rem; color: #cfcabb; }
  /* the drawer's rows are full width, where an underline reads as a divider */
  .nav > ul > li > [aria-current]::before { content: none; }

  .drawer-extra { display: grid !important; gap: .6rem; padding: 1.1rem .6rem .5rem;
                  border-bottom: 0 !important; }
  .drawer-extra .btn-cta { display: block; text-align: center; }
  .drawer-extra a.plain {
    color: var(--gold-lift); text-decoration: none; font-size: .95rem;
    display: inline-flex; gap: .45rem; align-items: center;
  }

  .backdrop {
    display: block; position: fixed; inset: var(--head) 0 0 0; z-index: 65;
    background: rgba(0,0,0,.55); border: 0; padding: 0; cursor: pointer;
    opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility 0s linear .26s;
  }
  .backdrop[data-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media (min-width: 1180px) {
  .drawer-extra { display: none; }
}
/* ...and it must be display:none at BASE level too, or it leaks into the bar
   at every width the media query above does not cover. */
.drawer-extra { display: none; }

/* Scroll lock. html{overflow:hidden} would take the scroll offset away from a
   position:sticky masthead and snap it to the top of the document, so the body
   is pinned at -scrollY and the masthead switched to fixed instead. */
body.locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
body.locked .masthead { position: fixed; top: 0; left: 0; right: 0; }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: clamp(320px, 46vw, 480px);
  background: #1d222b center/cover no-repeat;
  color: var(--paper);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Solved against the BRIGHTEST pixel of the photograph under each text
     block, sampled from a render with the text hidden (harness/heroink.py).
     Wide: the copy sits in the left half, so the scrim can fade out to the
     right and leave the building visible. */
  background: linear-gradient(90deg, rgba(6,8,12,.84) 0%, rgba(6,8,12,.70) 46%,
                              rgba(6,8,12,.28) 100%);
}
@media (max-width: 759px) {
  /* Narrow: the copy spans the full width and reaches the light end of that
     gradient -- the body paragraph measured 4.23:1 there, under AA. Vertical
     instead, heaviest at the top where the gold eyebrow sits (gold needs a
     darker floor than white does: 7.3:1 at .86, 4.3:1 at .72). */
  .hero::after {
    background: linear-gradient(180deg, rgba(6,8,12,.87) 0%, rgba(6,8,12,.70) 55%,
                                rgba(6,8,12,.66) 100%);
  }
}
.hero__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero .hero__eyebrow {
  margin: 0 0 .6rem; color: var(--gold-lift);
  font: 600 .8rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.hero h1 { margin: 0 0 .7rem; max-width: 18ch; color: var(--paper); text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hero p { max-width: 46ch; margin: 0 0 1.5rem; font-size: 1.06rem; color: #ece9e1; }
.hero .btn { margin-right: .6rem; }
@media (max-width: 520px) {
  /* Two inline-block buttons wrap to two ragged widths on a phone. */
  .hero .btn { display: block; width: 100%; text-align: center; margin: 0 0 .6rem; }
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-block; padding: .8rem 1.5rem; border-radius: var(--radius);
  font: 600 .9rem/1.15 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
}
.btn--primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-lift); border-color: var(--gold-lift); color: var(--black); }
.btn--ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--paper); border-color: var(--paper); }
.btn--dark { background: var(--black); color: var(--paper); border-color: var(--black); }
.btn--dark:hover { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn--quiet {
  background: var(--paper); color: var(--ink); border-color: var(--line);
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
.btn--quiet:hover { border-color: var(--gold); color: var(--gold-deep); }

/* ----------------------------------------------------------- gold pillars -- */
.pillars { background: var(--gold); color: var(--on-gold); }
.pillars__grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  padding-block: clamp(2rem, 4vw, 3rem);
}
.pillar { text-align: center; display: grid; gap: .4rem; justify-items: center; }
/* The three icons have different aspect ratios (a portrait clipboard, a wide
   chevron, a tall cube). width:100%;height:100% stretched each to a square and
   the row read as three different weights of the same mark. Cap both axes and
   let the viewBox keep its own shape; the box still reserves one height so the
   headings line up. */
.pillar__icon { width: 100%; height: 56px; display: grid; place-items: center; }
.pillar__icon svg {
  max-width: 56px; max-height: 56px; width: auto; height: auto;
  fill: var(--on-gold);
}
.pillar h2 {
  margin: .3rem 0 .1rem; font-size: 1.06rem; letter-spacing: .1em; text-transform: uppercase;
}
.pillar p { margin: 0 0 .55rem; font-size: .96rem; color: #362c10; max-width: 34ch; }
.pillar a.more {
  color: var(--on-gold); font-weight: 600; font-size: .9rem;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid rgba(28,22,7,.35); padding-bottom: 1px;
}
.pillar a.more:hover { border-bottom-color: var(--on-gold); }
/* The whole card is the target; the link keeps the accessible name. */
.pillar { position: relative; }
.pillar a.more::before { content: ""; position: absolute; inset: 0; }

/* -------------------------------------------------------------- sections -- */
.band { padding-block: clamp(2.5rem, 5.5vw, 4.5rem); }
.band--tint { background: var(--paper-2); }
.band--dark { background: var(--black); color: var(--paper); }
.band--dark h2, .band--dark h3 { color: var(--paper); }
.band--dark a { color: var(--gold-lift); }
.section-head { max-width: 62ch; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
.section-head p { color: var(--ink-2); margin: 0; }
.band--dark .section-head p { color: #c9c5b8; }
.eyebrow {
  margin: 0 0 .5rem; color: var(--gold-deep);
  font: 600 .78rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.band--dark .eyebrow { color: var(--gold-lift); }

.cards {
  display: grid; gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.cards > * { min-width: 0; }
.msgcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.msgcard h3 {
  font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep);
}
.msgcard p { margin: 0; color: var(--ink-2); font-size: .97rem; }

/* photo strip: the CMS's marquee, as a plain responsive gallery */
/* Ten photographs. auto-fit gave six columns at desktop and left the last row
   four-of-six, which reads as unfinished on a page with only three sections.
   Both counts here divide ten exactly: 5 rows of 2, or 2 rows of 5. */
.strip {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) { .strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.strip img {
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------ page header -- */
.pagehead { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.pagehead__inner { padding-block: clamp(1.75rem, 4vw, 3rem); }
.pagehead h1 { margin: 0; max-width: 20ch; }
.pagehead p.lede {
  margin: .7rem 0 0; max-width: 62ch; color: var(--ink-2); font-size: 1.06rem;
}
.crumbs { margin: 0 0 .7rem; font-size: .85rem; color: var(--ink-3); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--line); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); text-decoration: underline; }

/* --------------------------------------------------------- article layout -- */
.layout {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(2rem, 4.5vw, 3.5rem);
}
@media (min-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .layout > aside { position: sticky; top: calc(var(--head) + 1.5rem); }
}
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 1.4em; }
.prose ul li::before {
  content: ""; position: absolute; left: .25em; top: .62em;
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
}
.prose ul ul li::before { background: transparent; border: 1.5px solid var(--gold); }
.doclink a {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.15rem; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-weight: 600; text-decoration: none; color: var(--ink);
}
.doclink a::before {
  content: ""; width: 18px; height: 22px; flex: none;
  background: var(--gold-deep);
  clip-path: polygon(0 0, 68% 0, 100% 30%, 100% 100%, 0 100%);
}
.doclink a:hover { border-color: var(--gold); color: var(--gold-deep); }
.doclink-meta { color: var(--ink-3); font-weight: 400; }

.sidecard {
  background: var(--paper-2); border: 1px solid var(--line);
  border-top: 3px solid var(--gold); border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
}
.sidecard h2 { font-size: 1.05rem; margin-bottom: .5rem; }
.sidecard p { font-size: .95rem; color: var(--ink-2); }
.sidecard address { font-style: normal; font-size: .95rem; line-height: 1.7; }
.sidecard a { font-weight: 500; }
.sidecard .btn { width: 100%; text-align: center; margin-top: .35rem; }

/* ---------------------------------------------------------- property grid -- */
.filters {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1.5rem;
}
.filters__row {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.field { display: grid; gap: .3rem; min-width: 0; }
.field > label {
  font: 600 .75rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
select, textarea {
  width: 100%; padding: .62rem .7rem;
  font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
select { appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236d6858' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: .7rem;
}
textarea { min-height: 8.5rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #b9b2a0; }

.filters__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .93rem; color: var(--ink-2);
}
.filters__foot .spacer { flex: 1 1 auto; }
#resultcount strong { color: var(--ink); }

.plist {
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.plist > li { min-width: 0; }
.pcard {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.pcard:hover { box-shadow: var(--shadow-lift); border-color: #c2b891; transform: translateY(-2px); }
.pcard__media { background: var(--paper-3); }
.pcard__media img {
  display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover;
}
.pcard__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.pcard h2, .pcard h3 { margin: 0 0 .2rem; font-size: 1.1rem; line-height: 1.25; }
.pcard h2 a, .pcard h3 a { color: var(--ink); text-decoration: none; }
.pcard h2 a::before, .pcard h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard:hover h2 a, .pcard:hover h3 a { color: var(--gold-deep); }
.pcard__addr { margin: 0 0 .8rem; font-size: .93rem; color: var(--ink-2); font-style: normal; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .4rem; }
.tag {
  display: inline-block; padding: .22rem .55rem; border-radius: 999px;
  font: 600 .72rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  background: var(--paper-3); color: var(--ink-2);
}
.tag--sale { background: #1f1c12; color: var(--gold-lift); }
.noresults {
  padding: 2.5rem 1rem; text-align: center; color: var(--ink-2);
  border: 1px dashed var(--line); border-radius: var(--radius);
}

/* ---------------------------------------------------------- property page -- */
.phead { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .phead { grid-template-columns: minmax(0,1fr) auto; align-items: end; } }
.phead .tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.pactions { display: flex; flex-wrap: wrap; gap: .55rem; }

.tabs { border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; }
.tabs ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem;
}
.tabs button {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: .8rem 1.05rem; margin-bottom: -1px;
  font: 500 .9rem/1.15 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 3px solid transparent;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.tabpanel[hidden] { display: none; }
/* Without JS every panel simply stays on the page, each under its own heading. */
.nojs-head { display: none; }
.no-js .tabs { display: none; }
.no-js .nojs-head { display: block; }
.no-js .tabpanel { display: block !important; margin-bottom: 2.5rem; }

.pgrid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
@media (min-width: 860px) {
  .pgrid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
  .pgrid--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
}
.pgrid > * { min-width: 0; }
.pphoto img {
  display: block; width: 100%; border-radius: var(--radius); border: 1px solid var(--line);
}
.facts { margin: 0 0 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem .95rem; font-size: .95rem; border-bottom: 1px solid var(--line);
}
.facts div:last-child { border-bottom: 0; }
.facts div:nth-child(odd) { background: var(--paper-2); }
.facts dt { color: var(--ink-3); font-weight: 500; margin: 0; }
.facts dd { margin: 0; font-weight: 600; text-align: right; }

.gallery {
  display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.gallery > li { min-width: 0; }
.gallery a { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.gallery img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .25s ease; }
.gallery a:hover img { transform: scale(1.04); }

.docs { width: 100%; border-collapse: collapse; font-size: .96rem; }
.docs th, .docs td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.docs thead th {
  font: 600 .75rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); background: var(--paper-2);
}
.docs tbody tr:hover { background: var(--paper-2); }
.docs td:nth-child(2), .docs td:nth-child(3) { color: var(--ink-3); white-space: nowrap; }
/* A three-column table on a phone puts the file link off the right edge. */
@media (max-width: 620px) {
  .docs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .docs, .docs tbody, .docs tr, .docs td { display: block; width: 100%; }
  .docs tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: .7rem; padding: .3rem .2rem;
  }
  .docs td { border: 0; padding: .35rem .8rem; display: flex; justify-content: space-between; gap: 1rem; }
  .docs td::before { content: attr(data-label); color: var(--ink-3); font-size: .85rem; }
  .docs td:first-child::before { content: none; }
  .docs td:first-child { font-weight: 600; padding-bottom: .1rem; }
}

.frame {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--paper-2);
}
.frame iframe { display: block; width: 100%; border: 0; }
.map-fallback {
  padding: 1.5rem; display: grid; gap: .75rem; align-content: center;
  justify-items: start; min-height: 220px;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,.02) 14px 28px),
    var(--paper-2);
}
.map-fallback .btn + .btn { margin-left: .5rem; }
.map-fallback address { font-style: normal; margin: 0; }
.planwrap iframe { height: min(80vh, 760px); }
@media (max-width: 700px) { .planwrap { display: none; } }
.plan-note { margin-top: .8rem; }

.pnav {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .95rem;
}
.pnav a { text-decoration: none; font-weight: 500; }
.pnav a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- lightbox -- */
.lightbox {
  border: 0; padding: 0; max-width: 96vw; max-height: 96vh;
  background: transparent; color: var(--paper); overflow: visible;
}
.lightbox::backdrop { background: rgba(0,0,0,.88); }
.lightbox img {
  display: block; max-width: 96vw; max-height: 82vh; width: auto; height: auto;
  margin-inline: auto; border-radius: var(--radius);
}
.lightbox__bar {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: .75rem; font-size: .9rem;
}
.lightbox button {
  appearance: none; background: rgba(255,255,255,.12); color: var(--paper);
  border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius);
  width: 2.4rem; height: 2.4rem; font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.lightbox button:hover { background: rgba(255,255,255,.24); }

/* ------------------------------------------------------------------ forms -- */
.formcard {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--gold); border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.formgrid { display: grid; gap: 1rem; }
@media (min-width: 620px) { .formgrid .half { grid-column: span 1; } .formgrid { grid-template-columns: 1fr 1fr; } .formgrid .full { grid-column: 1 / -1; } }
.formgrid .field > label .req { color: #a3300f; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.errmsg {
  display: block; margin-top: .3rem; color: #8d2b0b; font-size: .88rem; font-weight: 500;
}
.field.bad input, .field.bad select, .field.bad textarea { border-color: #a3300f; }
.notice {
  border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1.25rem;
  border: 1px solid; font-size: .97rem;
}
.notice--ok   { background: #eef6ec; border-color: #b7d4ad; color: #1f4415; }
.notice--bad  { background: #fdf0ec; border-color: #e3b6a6; color: #7d2409; }
.formnote { font-size: .88rem; color: var(--ink-3); margin: .9rem 0 0; }

/* ----------------------------------------------------------------- footer -- */
.foot { background: var(--black); color: #c9c5b8; padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.foot__grid {
  display: grid; gap: clamp(1.25rem, 2.4vw, 2rem) clamp(1.25rem, 2.4vw, 2.25rem);
  /* Five columns at 190px plus four 40px gaps is 1110px, and the shell gives
     1100 -- so the fifth column wrapped under the first and the footer read as
     two ragged rows. Measured, then set. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
}
.foot__grid > div:first-child { grid-column: span 1; min-width: 0; }
.foot__grid > * { min-width: 0; }
.foot h2 {
  font: 600 .78rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-lift); margin: 0 0 .8rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.foot li { margin: .35rem 0; }
.foot a { color: #d5d1c4; text-decoration: none; }
.foot a:hover { color: var(--gold-lift); text-decoration: underline; }
.foot address { font-style: normal; font-size: .95rem; line-height: 1.75; }
.foot img.mark { width: 58px; height: auto; margin-bottom: .9rem; }
.social { display: flex; gap: .55rem; margin-top: .9rem; }
.social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid #33332b; border-radius: var(--radius);
}
.social a:hover { border-color: var(--gold); background: #141410; }
.social img, .social svg { width: 22px; height: 22px; display: block; }
.foot__base {
  border-top: 1px solid #26261f; margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.35rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center;
  font-size: .86rem; color: #8f8b80;
}
.foot__base .spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------------ print -- */
@media print {
  .masthead, .foot, .backdrop, .pactions, .pnav, .filters, .tabs, .skip { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .tabpanel { display: block !important; page-break-inside: avoid; }
  .nojs-head { display: block !important; }
  .frame, .planwrap { display: none !important; }
  .pgrid { display: block; }
  .pagehead { background: none; border: 0; }
}