/* ==========================================================
   Crown Fortune Properties, Inc. shared stylesheet
   ========================================================== */

/* Logo typeface: Kunstler Script, matching the original engraved wordmark */
@font-face{
  font-family:"Kunstler Script";
  src:url("fonts/KunstlerScript.woff2") format("woff2"),
      url("fonts/KunstlerScript.woff")  format("woff"),
      url("fonts/KunstlerScript.ttf")   format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --cream:#faf7f0;
  --cream-2:#f3eee3;
  --ink:#20241f;
  --green:#1f3b2c;
  --green-dk:#16291f;
  --brass:#a67c2e;
  --brass-lt:#c9a55e;
  --rule:#ddd4c2;
  --muted:#6a6a62;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --script:"Kunstler Script","Apple Chancery","Lucida Calligraphy",cursive;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* Anchor links must clear the fixed header. site.js sets --stick to the
   COMPACT header height, since the header is always compact by the time a
   scroll finishes. The fallbacks assume the header never compacts, which is
   the no-JS case, so they reserve the full height plus the top bar. */
[id]{scroll-margin-top:var(--stick,250px)}
@media (max-width:900px){ [id]{scroll-margin-top:var(--stick,205px)} }

/* Body copy sits at weight 400 rather than 300. At 17px on a cream ground,
   Inter Light reads washed out and loses definition on lower-resolution
   screens and in print; 400 holds its colour without looking heavy. */
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-kerning:normal;font-variant-ligatures:common-ligatures contextual;
  text-rendering:optimizeLegibility;
}
html{-webkit-text-size-adjust:100%}

/* Headings break on meaning rather than leaving a single word stranded on
   the last line; paragraphs avoid short widows. Ignored where unsupported. */
h1,h2,h3,.pagetitle{text-wrap:balance}
p,li,.lede{text-wrap:pretty}
img{display:block;max-width:100%}
a{color:var(--green);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);margin:0 0 14px;
}
h2{
  font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,42px);
  line-height:1.15;margin:0 0 18px;color:var(--green);letter-spacing:.01em;
}
h3{font-family:var(--serif);font-weight:600;font-size:22px;margin:0 0 8px;color:var(--green)}
p{margin:0 0 18px;color:#3d403a}
.lede{font-size:19px;color:#4a4d46}
section{padding:92px 0}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.narrow{max-width:44em}

/* ---------- Top bar ---------- */
/* z-index below the header so the header slides cleanly over it as the
   two move together during the condense animation. */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:59;
  background:var(--green-dk);color:#e8e3d6;font-size:12.5px;letter-spacing:.06em;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
/* slides away as the header condenses */
body.head-compact .topbar{transform:translateY(-100%)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:40px;flex-wrap:wrap}
.topbar a{color:#e8e3d6}
.topbar a:hover{color:var(--brass-lt)}
.topbar span+span{margin-left:18px}

/* ---------- Header / logo ---------- */
/* Fixed rather than sticky, so changing its height never reflows the page
   below it. .headspacer (inserted by site.js) reserves the room instead and
   keeps a constant height, which is what allows the condense animation to
   run smoothly. See the long note in site.js. */
header.site{
  position:fixed;top:var(--tb,40px);left:0;right:0;z-index:60;
  background:rgba(250,247,240,.96);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--rule);
  transition:top .28s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease;
}
.headspacer{height:var(--headspace,246px)}
@media (max-width:900px){ .headspacer{height:var(--headspace,205px)} }

/* Used only while site.js reads the two header heights */
header.site.measuring,
header.site.measuring *{transition:none !important}
.brandrow{display:flex;flex-direction:column;align-items:center;padding:22px 0 14px}
.logo{display:block;text-align:center;line-height:1}
/* Kunstler Script has a very small x-height for its point size, so it is set
   much larger than a normal face. At 88px the wordmark measures 790px wide,
   matching the proportions of the original engraved logo. */
.logo .script{
  font-family:var(--script);font-size:clamp(34px,9.8vw,92px);color:var(--green);
  letter-spacing:0;display:block;padding:0 6px;line-height:.9;white-space:nowrap;
}
/* display:block is required — these are spans, and inline elements ignore
   height and width, so the rule would not render at all. */
.logo .bar{
  display:block;height:1.5px;background:var(--green);margin:-1px auto 7px;
  max-width:790px;width:86%;
}
.logo .tag{
  display:block;font-family:var(--sans);font-size:clamp(8.5px,1.1vw,11.5px);font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:#3a4a40;
  max-height:2.4em;overflow:hidden;
}
nav.main{border-top:1px solid var(--rule)}
nav.main ul{display:flex;justify-content:center;flex-wrap:wrap;list-style:none;margin:0;padding:0}
nav.main a{
  display:block;padding:15px 20px;font-family:var(--serif);font-size:17px;
  letter-spacing:.04em;color:var(--green);position:relative;
}
nav.main a::after{
  content:"";position:absolute;left:20px;right:20px;bottom:10px;height:1px;
  background:var(--brass);transform:scaleX(0);transition:transform .25s ease;
}
nav.main a:hover::after{transform:scaleX(1)}
/* Brass in the nav means one thing only: where you currently are. That is
   aria-current="page" for a whole page, or "location" for a section of the
   home page that site.js has detected you have scrolled into. */
nav.main a[aria-current]{color:var(--brass)}
nav.main a[aria-current]::after{transform:scaleX(1)}

/* ---------- Condensed header ----------
   At full height the header eats ~205px, pushing the tab bar off screen as
   soon as you scroll. Compacting shrinks the logo and folds the tagline away
   so the tabs stay reachable. site.js toggles .compact.

   These properties do force a reflow, but because the header is fixed the
   reflow is contained inside it and cannot move the page or disturb the
   scroll position, so they are safe to animate. One shared easing and
   duration keeps the pieces moving together. */
.brandrow{transition:padding .28s cubic-bezier(.22,.61,.36,1)}
.logo .script{transition:font-size .28s cubic-bezier(.22,.61,.36,1)}
.logo .bar{transition:max-width .28s cubic-bezier(.22,.61,.36,1),margin .28s cubic-bezier(.22,.61,.36,1)}
.logo .tag{transition:opacity .2s ease,max-height .28s cubic-bezier(.22,.61,.36,1)}
nav.main a{transition:padding .28s cubic-bezier(.22,.61,.36,1),color .2s ease}

header.site.compact{top:0;box-shadow:0 2px 16px rgba(32,36,31,.10)}
header.site.compact .brandrow{padding:9px 0 5px}
header.site.compact .logo .script{font-size:clamp(26px,4.6vw,44px)}
header.site.compact .logo .bar{max-width:380px;margin:-1px auto 4px}
header.site.compact .logo .tag{opacity:0;max-height:0}
header.site.compact nav.main a{padding:11px 20px}

/* ---------- Buttons ---------- */
.btnrow{display:flex;flex-wrap:wrap;gap:14px}
.btn{
  display:inline-block;padding:14px 28px;font-family:var(--sans);font-size:12.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--brass);color:#fdfbf6;background:transparent;
  transition:background .2s ease,color .2s ease;cursor:pointer;
}
.btn:hover{background:var(--brass);color:#12180f}
.btn.solid{background:var(--brass);color:#12180f;border-color:var(--brass)}
.btn.solid:hover{background:var(--brass-lt);border-color:var(--brass-lt)}
.btn.dark{border-color:var(--green);color:var(--green)}
.btn.dark:hover{background:var(--green);color:var(--cream)}

/* ---------- Home hero ----------
   Photo and text share one grid cell instead of the text being absolutely
   positioned over the photo. Stacking them this way means the band is as
   tall as whichever is larger, so a long statement on a narrow screen makes
   the hero grow rather than spilling out the bottom of the image. */
.hero{position:relative;background:var(--green-dk);overflow:hidden;display:grid}
/* The text block alone decides how tall the hero is: its min-height sets the
   floor, and long copy on a narrow screen pushes past it. The photo is taken
   out of the sizing flow entirely and stretched to fill, so it can never
   force the band to its own 3:2 aspect height. */
.hero>.overlay{
  grid-area:1/1;position:relative;z-index:1;
  min-height:clamp(340px,52vh,600px);
  display:flex;align-items:center;padding:38px 0;
  background:linear-gradient(90deg,rgba(15,26,20,.86) 0%,rgba(15,26,20,.55) 48%,rgba(15,26,20,.18) 100%);
}
.hero>img{
  grid-area:1/1;position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.92);
}
.hero .overlay .wrap{width:100%}
/* Headline and supporting statement are both in the display serif, which at
   these sizes carries the same engraved character as the script wordmark. The
   size gap between them does the work of separating the two, so neither needs
   a different typeface. */
.hero h1{
  font-family:var(--serif);font-weight:500;color:#fdfbf6;letter-spacing:.005em;
  font-size:clamp(29px,3.7vw,47px);line-height:1.13;margin:0 0 20px;max-width:19em;
}
.hero .heroline{
  font-family:var(--serif);font-weight:400;letter-spacing:.004em;
  font-size:clamp(18px,1.95vw,25px);line-height:1.5;
  color:#e8e3d6;max-width:34em;margin:0 0 32px;
}
/* The founding year picks up weight. 600 rather than 700: Cormorant's bold is
   heavy enough here to look like a different face, where semibold just sets
   the date apart. */
.hero .heroline strong{font-weight:600;color:#fdfbf6}
.hero .eyebrow{color:var(--brass-lt)}

/* ---------- Subpage banner ---------- */
/* Plain photographic band with no overlaid copy. The page title sits below it,
   set in the same type as the rest of the page. */
.pagehead{background:var(--cream-2);overflow:hidden;border-bottom:1px solid var(--rule)}
.pagehead img{width:100%;height:clamp(190px,28vh,300px);object-fit:cover}
.pagetitle{
  font-family:var(--serif);font-weight:500;color:var(--green);
  font-size:clamp(30px,4.4vw,48px);line-height:1.12;letter-spacing:.01em;
  margin:0 0 24px;
}
.crumb{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a9a49a;
  padding:14px 0;border-bottom:1px solid var(--rule);
}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--brass)}

/* ---------- Pillars ---------- */
.pillars{background:var(--cream-2)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr)}
.pillar{padding:34px 28px;border-left:1px solid var(--rule)}
.pillar:first-child{border-left:0;padding-left:0}
.pillar:last-child{padding-right:0}
.pillar .num{font-family:var(--serif);font-size:13px;color:var(--brass);letter-spacing:.2em;display:block;margin-bottom:10px}
.pillar p{font-size:15.5px;margin:0;color:#4c4f49}

/* ---------- Carousel ---------- */
/* overflow:hidden is load-bearing: the track is wider than the frame
   (one panel per slide, plus two clones for the infinite loop) and would
   otherwise spill sideways and scroll the page. */
.car{position:relative;margin-top:34px;background:#e9e3d6;overflow:hidden}
.car .track{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform}
.car .slide{min-width:100%;position:relative}
.car .slide img{width:100%;height:clamp(300px,56vh,600px);object-fit:cover}
.car .cap{
  position:absolute;left:0;bottom:0;right:0;padding:56px 28px 22px;
  background:linear-gradient(180deg,rgba(15,26,20,0) 0%,rgba(15,26,20,.82) 70%);color:#fdfbf6;
}
.car .cap .pname{font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);display:block;line-height:1.2}
.car .cap .pmeta{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lt);margin-top:6px;display:block}
.car button.nav{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border:1px solid rgba(253,251,246,.7);background:rgba(15,26,20,.42);color:#fdfbf6;
  font-size:20px;line-height:1;cursor:pointer;transition:background .2s ease;
}
.car button.nav:hover{background:var(--brass);border-color:var(--brass);color:#12180f}
.car .prev{left:18px}
.car .next{right:18px}
.dots{display:flex;justify-content:center;gap:10px;margin-top:20px}
.dots button{
  width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--green);
  background:transparent;cursor:pointer;transition:background .2s ease;
}
.dots button[aria-current="true"]{background:var(--green)}

/* ---------- Dark section ---------- */
.avail{background:var(--green);color:#e9e4d7}
.avail h2,.avail h3{color:#fdfbf6}
.avail p{color:#d6d1c3}
.avail .eyebrow{color:var(--brass-lt)}
.avail .checks li{color:#d6d1c3}
.availbox{border:1px solid rgba(201,165,94,.45);padding:44px 40px;margin-top:12px;background:rgba(255,255,255,.03)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* ---------- Listing catalogue (/apartments) ----------
   Photo panel beside the details on wide screens, stacked on narrow. */
.units{display:grid;gap:34px;margin-top:38px}
.unit{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  border:1px solid var(--rule);background:#fff;overflow:hidden;
}
/* object-fit:contain rather than cover. Phone photos of interiors arrive both
   portrait and landscape, and cropping a 3:4 shot to fill a wide frame would
   cut roughly half its height, losing the ceiling or floor that gives a room
   its sense of size. Contain shows every photo whole.

   Deliberately NO aspect-ratio here. As a grid item this panel stretches to
   the row height by default, and aspect-ratio would then derive the WIDTH
   from that stretched height, making the gallery wider than its own column
   and spilling over the details beside it. Letting it stretch and setting a
   floor with min-height keeps it inside the cell. */
.unit-gallery{
  position:relative;background:var(--cream-2);overflow:hidden;
  min-height:380px;
}
/* Every photo is stacked in the same place and faded in turn. They must not
   take pointer events: the last one in source order sits on top regardless of
   opacity, so it would otherwise swallow every click meant for the photo on
   view. Clicks fall through to the gallery itself, which opens the viewer. */
.unit-gallery img{
  width:100%;height:100%;position:absolute;inset:0;object-fit:contain;
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.unit-gallery img.on{opacity:1}
.unit-gallery button.gnav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border:1px solid rgba(253,251,246,.75);
  background:rgba(15,26,20,.45);color:#fdfbf6;font-size:18px;line-height:1;
  cursor:pointer;transition:background .2s ease;
}
.unit-gallery button.gnav:hover{background:var(--brass);border-color:var(--brass);color:#12180f}
.unit-gallery .gprev{left:14px}
.unit-gallery .gnext{right:14px}
.unit-gallery .gcount{
  position:absolute;bottom:14px;right:16px;z-index:2;
  background:rgba(15,26,20,.6);color:#fdfbf6;
  font-size:11px;letter-spacing:.14em;padding:6px 10px;
}
/* shown when a unit has no photos yet */
.unit-nophoto{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;
  border-right:1px solid var(--rule);
}
.unit-nophoto span{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.unit-nophoto a{font-family:var(--serif);font-size:19px;color:var(--green);border-bottom:1px solid var(--brass)}

/* the panel itself is the click target, so the cursor hint lives here */
.unit-gallery{cursor:zoom-in}
.unit-gallery button.gnav{cursor:pointer}
.unit-gallery .gexpand{
  position:absolute;bottom:14px;left:16px;z-index:2;pointer-events:none;
  background:rgba(15,26,20,.6);color:#fdfbf6;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;
}

/* ---------- Full-screen photo viewer ----------
   One viewer is built once and reused by every gallery on the page. */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(10,16,12,.95);
  display:none;align-items:center;justify-content:center;
}
.lightbox.open{display:flex}
body.lb-open{overflow:hidden}          /* stop the page scrolling behind it */
.lightbox img{
  max-width:92vw;max-height:84vh;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox button{
  position:absolute;border:1px solid rgba(253,251,246,.6);
  background:rgba(15,26,20,.5);color:#fdfbf6;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.lightbox button:hover{background:var(--brass);border-color:var(--brass);color:#12180f}
.lightbox button:focus-visible{outline:2px solid var(--brass-lt);outline-offset:3px}
.lb-close{top:20px;right:22px;width:46px;height:46px;font-size:22px;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:24px;line-height:1}
.lb-prev{left:22px}
.lb-next{right:22px}
.lb-count{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  color:#e8e3d6;font-size:12px;letter-spacing:.18em;
}
.lb-cap{
  position:absolute;bottom:52px;left:50%;transform:translateX(-50%);
  color:#bdb8aa;font-size:14px;max-width:80vw;text-align:center;
}
@media (max-width:640px){
  .lb-prev,.lb-next{width:44px;height:44px}
  .lb-prev{left:10px}
  .lb-next{right:10px}
  .lightbox img{max-width:96vw;max-height:76vh}
}

.unit-body{padding:38px 40px}
.unit-status{
  display:inline-block;margin:0 0 16px;padding:5px 12px;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#12180f;background:var(--brass-lt);
}
.unit-body h2{font-size:clamp(23px,2.5vw,31px);margin:0 0 6px}
.unit-meta{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin:0 0 20px;
}
.unit-rent{
  font-family:var(--serif);font-weight:500;color:var(--green);
  font-size:clamp(28px,3vw,36px);line-height:1;margin:0 0 6px;
}
.unit-rent span{
  display:inline-block;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-left:8px;
}
.unit-specs{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:#4c4f49;margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid var(--rule);
}
.unit-body .checks{margin-bottom:20px}
.unit-body .btnrow{margin-top:28px}

/* ---------- Inquiry form ---------- */
.inquiry{margin-top:6px}
.inquiry label{
  display:block;font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-lt);margin:18px 0 7px;
}
.inquiry label span{color:#8f8b80;letter-spacing:.1em}
.inquiry input,.inquiry textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:#fdfbf6;
  background:rgba(255,255,255,.06);border:1px solid rgba(201,165,94,.4);
  padding:12px 14px;border-radius:0;
}
.inquiry input:focus,.inquiry textarea:focus{
  outline:none;border-color:var(--brass-lt);background:rgba(255,255,255,.1);
}
.inquiry textarea{resize:vertical;line-height:1.6}
.inquiry button{margin-top:26px;font-family:var(--sans)}
/* the honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sent-banner{
  margin-top:26px;padding:18px 22px;
  border:1px solid var(--brass);background:rgba(166,124,46,.10);
  font-size:16px;
}
.sent-banner a{border-bottom:1px solid var(--brass)}

/* Shown when every unit is leased. An empty page reads as broken, so the
   page says plainly that nothing is open and offers a way to ask anyway. */
.unit-none{
  border:1px solid var(--rule);background:#fff;
  padding:52px 44px;margin-top:38px;max-width:760px;
}
.unit-none h2{font-size:clamp(25px,2.8vw,34px);margin:0 0 14px}
.unit-none .btnrow{margin-top:28px}

/* ---------- draft preview ----------
   Only ever visible to somebody signed in to the listings manager. The
   striped bar and the dashed outline exist so that nobody mistakes a
   preview for the live page and assumes a draft has gone out. */
.previewbar{
  background:repeating-linear-gradient(135deg,#3a2d10,#3a2d10 12px,#463617 12px,#463617 24px);
  color:#f4ead2;font-size:14px;padding:12px 0;
}
.previewbar strong{color:#fff;letter-spacing:.04em}
.previewbar a{color:#e6c98a;border-bottom:1px solid rgba(230,201,138,.6);margin-left:10px}
.unit.isdraft{border-style:dashed;border-color:var(--brass);background:#fffdf7}
.unit-status.draftflag{
  color:#8a6a1e;background:rgba(166,124,46,.12);
  display:inline-block;padding:5px 10px;margin-bottom:12px;
}

@media (max-width:860px){
  .unit{grid-template-columns:1fr}
  .unit-gallery{min-height:240px}
  .unit-nophoto{border-right:0;border-bottom:1px solid var(--rule)}
  .unit-body{padding:28px 24px}
  .unit-none{padding:34px 24px}
}

/* ---------- Rental listings ----------
   Sit inside the dark Apartments For Rent section, so the panels are a
   lighter wash of the same green rather than white cards. */
.listings-head{
  color:#fdfbf6;font-size:13px;font-family:var(--sans);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  margin:66px 0 0;padding-bottom:14px;border-bottom:1px solid rgba(201,165,94,.4);
}
.listings{display:grid;gap:20px;margin-top:20px}
.listing{
  border:1px solid rgba(201,165,94,.4);background:rgba(255,255,255,.035);
  padding:30px 34px;
}
.listing-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:28px;flex-wrap:wrap;
}
.listing h4{
  font-family:var(--serif);font-weight:500;color:#fdfbf6;
  font-size:clamp(21px,2.2vw,27px);line-height:1.2;margin:0;letter-spacing:.01em;
}
.listing-meta{
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass-lt);margin:9px 0 0;
}
.listing-rent{
  font-family:var(--serif);font-weight:500;color:#fdfbf6;
  font-size:clamp(28px,3vw,36px);line-height:1;margin:0;white-space:nowrap;
}
.listing-rent span{
  display:block;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:#a9a49a;margin-top:8px;
}
/* two columns of amenities on wide screens, one on narrow */
.listing-facts{
  list-style:none;margin:24px 0 0;padding:0;
  columns:2;column-gap:38px;
}
.listing-facts li{
  position:relative;padding-left:22px;margin-bottom:9px;
  font-size:15.5px;color:#d6d1c3;break-inside:avoid;
}
.listing-facts li::before{
  content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;
  border:1px solid var(--brass);transform:rotate(45deg);
}
.listing .note{color:#a9a49a;margin:20px 0 0}
.listing .btnrow{margin-top:26px}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--rule);padding:32px 28px}
.card p{font-size:15.5px;margin:0;color:#4c4f49}
.card .mark{font-family:var(--serif);font-size:12px;letter-spacing:.2em;color:var(--brass);text-transform:uppercase;display:block;margin-bottom:14px}

/* ---------- Portal panel ---------- */
.portal{display:grid;grid-template-columns:1.15fr .85fr;margin-top:36px;border:1px solid var(--rule);background:#fff}
.portal .left{padding:44px 42px}
.portal .right{background:var(--green-dk);color:#e9e4d7;padding:44px 42px;display:flex;flex-direction:column;justify-content:center}
.portal .right h3{color:#fdfbf6}
.portal .right p{color:#cfcabd;font-size:15.5px}

/* ---------- Lists ---------- */
.checks{list-style:none;margin:0 0 26px;padding:0}
.checks li{position:relative;padding-left:26px;margin-bottom:12px;font-size:16px;color:#43463f}
.checks li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:11px;
  border:1px solid var(--brass);transform:rotate(45deg);
}
.note{font-size:13.5px;color:var(--muted);margin:16px 0 0}

/* ---------- Steps ---------- */
.steps{counter-reset:s;list-style:none;margin:34px 0 0;padding:0;display:grid;gap:0}
.steps li{
  counter-increment:s;position:relative;padding:26px 0 26px 78px;border-top:1px solid var(--rule);
}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps li::before{
  content:counter(s,upper-roman);position:absolute;left:0;top:26px;
  font-family:var(--serif);font-size:20px;color:var(--brass);letter-spacing:.1em;
}
.steps h3{margin-bottom:4px}
.steps p{margin:0;font-size:15.5px}

/* ---------- FAQ ---------- */
details{border-top:1px solid var(--rule);padding:18px 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
details summary{
  cursor:pointer;font-family:var(--serif);font-size:20px;color:var(--green);list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--brass);font-size:22px;line-height:1}
details[open] summary::after{content:"\2212"} /* true minus sign, pairs with the + */
details p{margin:12px 0 0;font-size:16px}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:8px}
.stat{padding:26px 24px;border-left:1px solid var(--rule)}
.stat:first-child{border-left:0;padding-left:0}
.stat .big{font-family:var(--serif);font-size:38px;line-height:1;color:var(--green);display:block}
.stat .lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-top:10px;display:block}

/* ---------- Contact ---------- */
.dl{margin:0}

/* Contact details laid across one row. With the right-hand column gone, a
   two-column split would leave half the section empty, so the three items
   share the full width as equal columns divided by hairlines. */
.dl.contactrow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:14px;border-top:1px solid var(--rule);
}
.dl.contactrow>div{
  display:block;padding:28px 30px;border-bottom:0;border-left:1px solid var(--rule);
}
.dl.contactrow>div:first-child{border-left:0;padding-left:0}
.dl.contactrow>div:last-child{padding-right:0}
.dl.contactrow dt{flex:none;padding-top:0;margin-bottom:10px}
.dl.contactrow dd{font-size:20px;line-height:1.45;overflow-wrap:anywhere}
.dl div{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--rule)}
.dl dt{
  flex:0 0 118px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);padding-top:5px;
}
.dl dd{margin:0;font-family:var(--serif);font-size:19px;color:var(--green)}
.dl dd a:hover{color:var(--brass)}

/* ---------- Footer ---------- */
footer.site{background:var(--green-dk);color:#cfcabd;padding:56px 0 34px;text-align:center}
footer.site .logo .script{color:#fdfbf6;font-size:clamp(32px,7.4vw,70px)}
footer.site .logo .bar{background:rgba(253,251,246,.6);max-width:600px}
footer.site .logo .tag{color:#bdb8aa}
footer.site .fnav{margin:30px 0 26px;font-size:14px}
footer.site .fnav a{color:#cfcabd;margin:0 13px;font-family:var(--serif);font-size:16px}
footer.site .fnav a:hover{color:var(--brass-lt)}
footer.site .fine{font-size:12.5px;letter-spacing:.05em;color:#8f8b80;line-height:2}
footer.site .fine a{color:#8f8b80;text-decoration:underline}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  section{padding:64px 0}
  .grid4{grid-template-columns:1fr 1fr}
  .pillar{border-left:0;border-top:1px solid var(--rule);padding:26px 0}
  .pillar:first-child{border-top:0}
  .cards,.cards.two{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:34px}
  /* rent wraps below the address, amenities collapse to one column */
  .listing{padding:24px 22px}
  .listing-facts{columns:1}
  .listings-head{margin-top:46px}
  /* stack the contact details and swap the dividers to horizontal rules */
  .dl.contactrow{grid-template-columns:1fr}
  .dl.contactrow>div{border-left:0;border-bottom:1px solid var(--rule);padding:20px 0}
  .dl.contactrow>div:last-child{border-bottom:0}
  .portal{grid-template-columns:1fr}
  .portal .left,.portal .right{padding:34px 26px}
  .availbox{padding:32px 24px}
  .stats{grid-template-columns:1fr 1fr}
  .stat{border-left:0;border-top:1px solid var(--rule);padding:22px 0}
  .stat:first-child{border-top:0}
  nav.main a{padding:12px 13px;font-size:15.5px}
  .car button.nav{width:42px;height:42px}
  .car .prev{left:10px}
  .car .next{right:10px}
  .topbar .wrap{justify-content:center;text-align:center}
  .steps li{padding-left:0}
  .steps li::before{position:static;display:block;margin-bottom:6px}
}
@media (max-width:520px){
  .wrap{padding:0 20px}
  .dl div{flex-direction:column;gap:2px}
  .dl dt{padding-top:0}
  nav.main a{padding:11px 10px;font-size:14.5px}
}

/* Seven tabs wrap onto two or three ragged rows on a phone. Below 640px they
   become one swipeable row instead, which is far easier to hit accurately. */
@media (max-width:640px){
  nav.main ul{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  nav.main ul::-webkit-scrollbar{display:none}
  nav.main li{flex:0 0 auto}
  nav.main a{white-space:nowrap;padding:12px 14px}
  nav.main a::after{left:14px;right:14px}
  /* fade hint that there is more to scroll */
  nav.main{position:relative}
  nav.main::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;
    background:linear-gradient(90deg,rgba(250,247,240,0),rgba(250,247,240,.96));
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .car .track{transition:none}
}

/* ---------- Print (sized for 11 x 17 tabloid) ----------
   On paper there is no scrolling, so the fixed header has to return to the
   flow or it would overlap the first section. The carousel also has to give
   up its single-frame behaviour and print every property instead. */
@media print{
  @page{size:11in 17in;margin:0.5in}

  body{background:#fff;font-size:11.5pt}

  /* header back into the flow, spacer no longer needed */
  .topbar,header.site{position:static;transform:none;box-shadow:none;backdrop-filter:none}
  header.site{background:#fff}
  .headspacer{display:none}

  /* print all four properties rather than one frame of the carousel */
  .car{overflow:visible;background:none;margin-top:20px}
  .car .track{display:block;transform:none !important;transition:none}
  .car .slide{min-width:0;margin-bottom:14px;break-inside:avoid}
  .car .slide[data-clone]{display:none}
  .car .slide img{height:auto;max-height:4.2in}
  .car button.nav,.dots{display:none}

  /* keep blocks whole across sheet breaks */
  section{padding:26px 0;break-inside:avoid}
  .card,.availbox,.portal,.steps li,.pillar,.stat,.dl div{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  /* The hero overlays white text on a darkened photo. On paper the overlay
     drops below the image, so the dark backdrop has to go with it or the
     text would be ink on dark green and vanish. */
  .hero,.pagehead{break-inside:avoid}
  /* undo the grid stack so the photo and text sit one above the other */
  .hero{background:#fff;display:block}
  .hero>img,.hero>.overlay{grid-area:auto}
  .hero>img{position:static;height:auto;max-height:5in;opacity:1;filter:none}
  .hero>.overlay{min-height:0}
  .pagehead{background:#fff}
  .pagehead img{height:auto;max-height:3.2in}
  .hero .overlay{position:static;background:none;padding-top:22px}
  .hero h1,.hero p{color:var(--ink)}
  .hero .eyebrow{color:var(--brass)}

  /* Buttons get a solid light fill rather than inheriting their on-screen
     colours, so they stay legible both on cream and inside the dark panels. */
  .btn{background:#fff !important;color:var(--ink) !important;border-color:#8d8d86 !important}
  nav.main a::after{display:none}
}