/* ==========================================================================
   Shared stylesheet for every page. After handoff edit this file directly.
   Built by _build/build.ps1 from _build/css/*.css (in file-name order).
   Pages load it as css/styles.css?v=...; if you edit it by hand, change that ?v= value
   in every page as well, or returning visitors may keep the old copy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   00-tokens.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   00-tokens — design tokens and font fallbacks. Every other part reads these.
   ========================================================================== */

/* Size-adjusted local fallbacks. While Source Serif 4 / Archivo download, text
   is set in Georgia / Arial scaled to the same width and vertical metrics, so
   the swap barely moves anything (reduces layout shift). Values measured in
   Chromium against the Google Fonts files (Source Serif 4 display sizes at
   weight 500; Archivo 400/600). Regular and bold are separate faces because
   Georgia/Arial Bold are much wider than their regular cuts. */
@font-face{
  font-family:'Source Serif Fallback';
  src:local('Georgia');
  font-style:normal;font-weight:100 549;
  size-adjust:93%;ascent-override:111.4%;descent-override:36%;line-gap-override:0%;
}
@font-face{
  font-family:'Source Serif Fallback';
  src:local('Georgia Bold'),local('Georgia-Bold');
  font-style:normal;font-weight:550 900;
  size-adjust:87%;ascent-override:119.1%;descent-override:38.5%;line-gap-override:0%;
}
@font-face{
  font-family:'Source Serif Fallback';
  src:local('Georgia Italic'),local('Georgia-Italic');
  font-style:italic;font-weight:100 900;
  size-adjust:93%;ascent-override:111.4%;descent-override:36%;line-gap-override:0%;
}
@font-face{
  font-family:'Archivo Fallback';
  src:local('Arial'),local('ArialMT'),local('Liberation Sans');
  font-style:normal;font-weight:100 549;
  size-adjust:98.7%;ascent-override:89%;descent-override:21.3%;line-gap-override:0%;
}
@font-face{
  font-family:'Archivo Fallback';
  src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold');
  font-style:normal;font-weight:550 900;
  size-adjust:95.8%;ascent-override:91.6%;descent-override:21.9%;line-gap-override:0%;
}

:root{
  color-scheme:light;

  /* ---- Palette (fixed values) ---- */
  --paper:#FBFBF8;
  --ink:#13293A;
  --ink-deep:#0D1F2C;
  --ink-2:#1A3448;        /* raised surface on ink (cards on dark bands) */
  --slate:#42606F;
  --brass:#9A6B25;        /* button fill: 4.6:1 with white text (WCAG AA) */
  --brass-dark:#8A5F20;   /* brass text on light backgrounds */
  --brass-light:#D0A25C;  /* brass text / rules on dark backgrounds */
  --band:#EEF2F1;
  --line:#D8DEDD;
  --line-strong:#B7C3C2;
  --field-line:#7A8F99;   /* form field borders: 3.4:1 against white */
  --white:#FFFFFF;
  --on-dark:#C9D4DA;      /* body copy on ink */
  --on-dark-muted:#AEBEC7;
  --tbd-bg:#FFF1CC;
  --tbd-fg:#5C430F;
  --ok-bg:#E7F1EA;  --ok-fg:#1E5A34;  --ok-line:#B7D6C1;
  --err-bg:#F8EAEA; --err-fg:#8A2323; --err-line:#E3BFBF;

  /* ---- Context values (light default). .on-dark switches them; .on-light
          and the white cards (.listing-card, .form-card, .aside-card)
          switch them back. Components read these, never raw colours. ---- */
  --fg:var(--ink);                 /* headings, strong text, link text */
  --text:var(--ink);               /* running text */
  --muted:var(--slate);            /* secondary text */
  --rule:var(--line);              /* hairlines and card borders */
  --rule-strong:var(--line-strong);
  --focus:var(--brass-dark);       /* focus ring */
  --link-hover:var(--brass-dark);
  --accent:var(--brass);           /* 2px rules, ticks, underlines */
  --eyebrow:var(--brass-dark);     /* eyebrow / small-caps labels */
  --surface:var(--white);          /* card fill */

  /* ---- Type ---- */
  --serif:'Source Serif 4','Source Serif Fallback',Georgia,'Times New Roman',serif;
  --sans:'Archivo','Archivo Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fs-display:clamp(2.75rem, 1.6rem + 4.2vw, 4.75rem);   /* home h1 */
  --fs-h1:clamp(2.25rem, 1.4rem + 3vw, 3.5rem);           /* interior h1 */
  --fs-h2:clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --fs-h3:clamp(1.25rem, 1.15rem + .35vw, 1.375rem);
  --fs-h4:1.0625rem;
  --fs-lead:clamp(1.125rem, 1rem + .4vw, 1.3125rem);
  --fs-big:clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem);        /* big serif numerals */
  --fs-small:.875rem;
  --fs-xs:.8125rem;
  --fs-label:.75rem;

  /* ---- Space (4px base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --section-y:clamp(72px, 9vw, 128px);

  /* ---- Layout ---- */
  --wrap:1240px;          /* content width of .wrap (gutters are added outside) */
  --wrap-text:760px;      /* article column */
  --gutter:24px;          /* 20px at <=480px */
  --pad-l:max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r:max(var(--gutter), env(safe-area-inset-right, 0px));
  --grid-gap:16px;        /* 20px >=768, 24px >=1024 */
  --header-h:64px;        /* sticky main bar height; 80px >=1024 (chrome may override) */
  --radius:2px;

  /* ---- Motion ---- */
  --t-fast:120ms;
  --t-med:200ms;
  --t-slow:400ms;
  --t-reveal:560ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ---- Elevation: overlays only (sticky header, menus). Cards never rest on shadows. ---- */
  --shadow-overlay:0 12px 32px -16px rgba(13,31,44,.38);
}

@media (max-width:480px){ :root{ --gutter:20px; } }
@media (min-width:768px){ :root{ --grid-gap:20px; } }
@media (min-width:700px){ :root{ --header-h:80px; } }   /* the tab bar shows from 700px (20-chrome) */
@media (min-width:1024px){ :root{ --grid-gap:24px; } }

/* Dark context: ink bands, hero, footer, drawer. */
.on-dark{
  --fg:var(--white);
  --text:var(--on-dark);
  --muted:var(--on-dark-muted);
  --rule:rgba(255,255,255,.16);
  --rule-strong:rgba(255,255,255,.34);
  --focus:var(--brass-light);
  --link-hover:var(--brass-light);
  --accent:var(--brass-light);
  --eyebrow:var(--brass-light);
  --surface:var(--ink-2);
}

/* Light context restored inside a dark region (white cards, forms). */
.on-light,
.listing-card,
.form-card,
.aside-card{
  --fg:var(--ink);
  --text:var(--ink);
  --muted:var(--slate);
  --rule:var(--line);
  --rule-strong:var(--line-strong);
  --focus:var(--brass-dark);
  --link-hover:var(--brass-dark);
  --accent:var(--brass);
  --eyebrow:var(--brass-dark);
  --surface:var(--white);
}

/* --------------------------------------------------------------------------
   05-base.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   05-base — reset, document defaults, type scale, layout primitives, utilities
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:var(--paper);
  /* Anchors and focused elements land below the sticky header. */
  scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top, 0px) + 16px);
}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
/* Without JS (or when js/10-nav.js failed: html.nav-failed) the header is not
   sticky under 1024px (see 20-chrome), so no offset. */
@media (max-width:699.98px){ html.no-js,html.nav-failed{scroll-padding-top:16px} }

body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;            /* rem, so the visitor's browser font size is respected */
  line-height:1.65;
  font-optical-sizing:auto;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@media (min-width:1024px){ body{font-size:1.0625rem} }

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  color:var(--fg);
  text-wrap:balance;
}
p{margin:0 0 1em}
p:where(:last-child){margin-bottom:0}
p,li,dd,figcaption{text-wrap:pretty}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:where(:not([class])):hover{color:var(--link-hover)}
img,picture,video,canvas,svg{display:block;max-width:100%}
img,video{height:auto}
figure,blockquote{margin:0}
address{font-style:normal}
strong,b{font-weight:600}
small{font-size:var(--fs-xs)}
hr{height:0;margin:var(--s7) 0;border:0;border-top:1px solid var(--rule)}
table{border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--brass-light);color:var(--ink)}

/* Focus: always visible for keyboard users. */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---------- Type scale ---------- */
h1,.h1{
  font-family:var(--serif);
  font-size:var(--fs-h1);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.018em;
}
/* Display: larger and tighter than the token default (V3 "sleeker" pass). */
.display{
  font-family:var(--serif);
  font-size:clamp(2.5rem, 1.5rem + 4.4vw, 5rem);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.025em;
  color:var(--fg);
  text-wrap:balance;
}
h2,.h2{
  font-family:var(--serif);
  font-size:var(--fs-h2);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
}
h3,.h3{
  font-family:var(--serif);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.005em;
}
h4,.h4{
  font-family:var(--serif);
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:1.3;
}
h5,h6{font-family:var(--sans);font-size:var(--fs-small);line-height:1.4}
.h1,.h2,.h3,.h4{color:var(--fg);text-wrap:balance}

.lead{
  max-width:60ch;
  font-size:var(--fs-lead);
  line-height:1.55;
  color:var(--text);
}

/* Data: labels, values, numerals */
.num{font-variant-numeric:tabular-nums lining-nums}
.data-label{
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  font-stretch:87.5%;
  line-height:1.3;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.data-value{
  font-weight:600;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--fg);
}
.big-num{
  margin:0 0 10px;
  font-family:var(--serif);
  font-size:var(--fs-big);
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--fg);
}
.muted{color:var(--muted)}
.small{font-size:var(--fs-small)}

/* ---------- Layout ---------- */
/* .wrap: 1240px of content plus safe-area-aware gutters. Never put the
   `padding` shorthand on an element that also has .wrap; use padding-block. */
.wrap{
  width:100%;
  max-width:calc(var(--wrap) + var(--pad-l) + var(--pad-r));
  margin-inline:auto;
  padding-inline:var(--pad-l) var(--pad-r);
}
.wrap-text{
  width:100%;
  max-width:calc(var(--wrap-text) + var(--pad-l) + var(--pad-r));
  margin-inline:auto;
  padding-inline:var(--pad-l) var(--pad-r);
}

.section{padding-block:var(--section-y)}
.section-tight{padding-block:clamp(48px, 6vw, 80px)}
.section-flush-top{padding-top:0}
.section-alt{background:var(--band)}
.section-rule{border-top:1px solid var(--line)}

/* Dark regions: add .on-dark (tokens switch in 00-tokens). Override the
   background where a region needs ink-deep (footer, drawer). */
.on-dark{background-color:var(--ink);color:var(--text)}
.on-light{color:var(--text)}

/* 12-column grid. Children span all 12 by default; add span/start classes.
   md = >=768px, lg = >=1024px.
   The start line is always auto (or a start class) and the span always sits
   on grid-column-END, so "lg-span-5 lg-start-8" composes to columns 8-12 and
   "lg-span-6" alone auto-places at columns 1-6. Two things break this, so do
   not reintroduce them: the shorthand `grid-column:span N` resets the start
   to auto and a later start class then leaves a one-column item; and a span
   on the START line (e.g. a default of `grid-column:span 12`) makes CSS drop
   any span given on the end line, so the span classes stop working at all.
   Items auto-place in document order (sparse), so put the auto-placed item
   before the one with a start class inside the same row. */
.grid-12{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:var(--grid-gap);
  row-gap:var(--s6);
}
.grid-12 > *{grid-column-start:auto;grid-column-end:span 12}
@media (min-width:768px){
  .md-span-3{grid-column-end:span 3}
  .md-span-4{grid-column-end:span 4}
  .md-span-5{grid-column-end:span 5}
  .md-span-6{grid-column-end:span 6}
  .md-span-7{grid-column-end:span 7}
  .md-span-8{grid-column-end:span 8}
  .md-span-12{grid-column-end:span 12}
  .md-start-5{grid-column-start:5}
  .md-start-7{grid-column-start:7}
}
@media (min-width:1024px){
  .lg-span-3{grid-column-end:span 3}
  .lg-span-4{grid-column-end:span 4}
  .lg-span-5{grid-column-end:span 5}
  .lg-span-6{grid-column-end:span 6}
  .lg-span-7{grid-column-end:span 7}
  .lg-span-8{grid-column-end:span 8}
  .lg-span-9{grid-column-end:span 9}
  .lg-span-12{grid-column-end:span 12}
  .lg-start-1{grid-column-start:1}
  .lg-start-5{grid-column-start:5}
  .lg-start-6{grid-column-start:6}
  .lg-start-7{grid-column-start:7}
  .lg-start-8{grid-column-start:8}
  .lg-start-9{grid-column-start:9}
}

/* Split: two flexible columns that stack when narrow. */
.split{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s7)}
.split > *{flex:1 1 380px;min-width:0}
.split-top{align-items:flex-start}

/* ---------- Accessibility utilities ---------- */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within){
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}
.skip-link{
  position:absolute;
  top:0;
  left:max(16px, env(safe-area-inset-left, 0px));
  z-index:1000;
  padding:12px 18px;
  border-radius:var(--radius);
  background:var(--ink);
  color:var(--white);
  font-weight:600;
  text-decoration:none;
  transform:translateY(-120%);
}
.skip-link:focus{transform:translateY(calc(12px + env(safe-area-inset-top, 0px)))}
/* The skip link's target takes programmatic focus (tabindex="-1" on <main>);
   no ring around the whole page for that. */
#main:focus{outline:none}

/* Progressive enhancement helpers (html gets .js from the inline head script;
   main.js's onerror handler reverts it to .no-js if the script fails). */
.no-js .js-only{display:none!important}
.js .no-js-only{display:none!important}

/* --------------------------------------------------------------------------
   10-components.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   10-components — shared components. Class names here are a contract used by
   the header/footer (20-chrome), the homepage (40-home) and interior pages.
   ========================================================================== */

/* ---------- Buttons ----------
   <a class="btn btn-primary" href="…">Label <span class="arr" aria-hidden="true">→</span></a>
   Variants: .btn-primary (brass) .btn-dark (ink) .btn-ghost (on dark) .btn-outline
   Sizes: .btn-sm .btn-lg   Width: .btn-block
   Busy state: aria-disabled="true" (never `disabled` on a focused button). */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--fg);
  --btn-bd:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:12px 24px;
  border:1px solid var(--btn-bd);
  border-radius:var(--radius);
  background-color:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--sans);
  font-size:.8125rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-med) var(--ease);
}
.btn:hover{color:var(--btn-fg);transform:translateY(-2px)}
.btn:active{transform:none}
.btn svg{flex:none}
.btn .arr{display:inline-block;transition:transform var(--t-med) var(--ease)}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(3px)}

.btn-primary{--btn-bg:var(--brass);--btn-fg:var(--white)}
.btn-primary:hover{--btn-bg:var(--brass-dark)}

.btn-dark{--btn-bg:var(--ink);--btn-fg:var(--white)}
.btn-dark:hover{--btn-bg:var(--brass-dark)}
.on-dark .btn-dark{--btn-bg:var(--white);--btn-fg:var(--ink)}
.on-dark .btn-dark:hover{--btn-bg:var(--brass-light)}

.btn-ghost{--btn-fg:var(--white);--btn-bd:rgba(255,255,255,.5)}
.btn-ghost:hover{--btn-bg:rgba(255,255,255,.08);--btn-bd:var(--white)}

.btn-outline{--btn-fg:var(--fg);--btn-bd:var(--fg)}
.btn-outline:hover{--btn-bg:var(--ink);--btn-fg:var(--white);--btn-bd:var(--ink)}
.on-dark .btn-outline:hover{--btn-bg:var(--white);--btn-fg:var(--ink);--btn-bd:var(--white)}

.btn-sm{min-height:40px;padding:8px 16px;gap:8px;font-size:.75rem;letter-spacing:.08em}
.btn-lg{min-height:56px;padding:16px 32px;font-size:.8125rem}
.btn-block{display:flex;width:100%}
/* Busy (aria-disabled) keeps full contrast; the label changes to "Sending…". */
.btn[aria-disabled="true"]{cursor:progress}
.btn:disabled{cursor:not-allowed;opacity:.6}

/* Button row. Buttons go full width on small phones, with a slightly smaller
   tracked label so a ~30-character label stays on one line at 375px. */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media (max-width:480px){
  .actions > .btn{flex:1 1 100%}
  .btn,.btn-lg{padding-inline:16px;font-size:.75rem;letter-spacing:.06em}
}

/* ---------- Links ---------- */
/* Inline text link with a brass underline. */
.text-link{
  color:var(--fg);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:.28em;
  transition:color var(--t-fast) var(--ease);
}
.text-link:hover{color:var(--link-hover);text-decoration-thickness:2px}

/* Stand-alone "View all properties →" link. Wrap the arrow in
   <span class="arr" aria-hidden="true">→</span> so it can move on hover, and
   precede it with &nbsp; so a wrapped label keeps the arrow on its last word
   (inline-block, not flex: a flex label that wraps strands the arrow at the
   right edge of the first line). */
.link-arrow{
  display:inline-block;
  padding-bottom:3px;
  color:var(--fg);
  font-size:.8125rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size var(--t-med) var(--ease),color var(--t-fast) var(--ease);
}
.link-arrow:hover{color:var(--link-hover);background-size:100% 1px}
.link-arrow .arr{display:inline-block;margin-left:.2em;transition:transform var(--t-med) var(--ease)}
.link-arrow:hover .arr,.link-arrow:focus-visible .arr{transform:translateX(3px)}

/* ---------- Eyebrow, section head, intro ---------- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 20px;
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--eyebrow);
}
.eyebrow::before{content:"";flex:none;width:20px;height:1px;background:currentColor}
.eyebrow.is-center{justify-content:center}
/* Catalogue numbering: <p class="eyebrow eyebrow-num"><span class="sec-num" aria-hidden="true">01</span>Land</p>
   renders "01 — Land" with the number in muted tabular figures; the brass
   hairline is dropped so the number leads. */
.eyebrow-num{gap:0}
.eyebrow-num::before{display:none}
.sec-num{color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.sec-num::after{content:"\2009\2014\2009";color:var(--muted)}

/* <div class="section-head">
     <p class="eyebrow">…</p> <h2>…</h2> <p class="section-intro">…</p>
     <a class="link-arrow section-head-link" href="…">View all <span class="arr" aria-hidden="true">→</span></a>
   </div>
   (The text may also be wrapped in one <div>.) The link sits right, level
   with the bottom of the h2, from 768px up. */
.section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(40px, 5.5vw, 72px);
}
.section-head > *{grid-column:1}
.section-head h2{max-width:22ch}
.section-head .section-intro{margin-top:var(--s5)}
.section-head-link{justify-self:start;margin-top:var(--s5)}
@media (min-width:768px){
  .section-head{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s7)}
  .section-head > .section-head-link{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0 0 .5em}
}
.section-intro{
  max-width:60ch;
  margin:0;
  font-size:clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  line-height:1.6;
  color:var(--muted);
}

/* ---------- Image placeholder ----------
   <div class="ph ph-wide" data-label="Freestanding retail"><img src="…" alt="" width="1600" height="1000" loading="lazy"></div>
   The label shows only when the photo is missing (.is-empty is added by main.js
   when the image fails; boxes without an <img> count as empty). The label is
   generated content with empty alt text, so screen readers never hear it. */
.ph{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  aspect-ratio:16/10;
  border-radius:var(--radius);
  background-color:var(--ink-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke-width='1'%3E%3Cpath stroke='%23304F64' d='M-10 80H155M40 -10V181M80 -10V173M120 -10V166M240 -10V143M-10 255H310M60 197V310M130 184V310M200 171V310M270 157V310'/%3E%3Cpath stroke='%23466A7F' d='M-10 190L310 130M-10 210L310 150M150 -10L160 158M172 -10L182 154'/%3E%3Cpath stroke='%23466A7F' stroke-dasharray='5 5' d='M-10 200L310 140'/%3E%3Cpath stroke='%23304F64' stroke-dasharray='2 4' d='M190 310C215 282 255 292 310 248'/%3E%3C/g%3E%3C/svg%3E");
  background-position:center;
  background-size:cover;
  color:var(--on-dark);
}
.ph-wide{aspect-ratio:16/10}
.ph-portrait{aspect-ratio:4/5}
.ph-square{aspect-ratio:1/1}
.ph-light{
  background-color:var(--band);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke-width='1'%3E%3Cpath stroke='%23D0D9DA' d='M-10 80H155M40 -10V181M80 -10V173M120 -10V166M240 -10V143M-10 255H310M60 197V310M130 184V310M200 171V310M270 157V310'/%3E%3Cpath stroke='%23B5C2C5' d='M-10 190L310 130M-10 210L310 150M150 -10L160 158M172 -10L182 154'/%3E%3Cpath stroke='%23B5C2C5' stroke-dasharray='5 5' d='M-10 200L310 140'/%3E%3Cpath stroke='%23D0D9DA' stroke-dasharray='2 4' d='M190 310C215 282 255 292 310 248'/%3E%3C/g%3E%3C/svg%3E");
  color:var(--slate);
}
.ph img{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  color:transparent;   /* hides alt text inside a broken image */
}
.ph::before{
  content:attr(data-label);
  content:attr(data-label) / "";
  position:absolute;
  top:50%;
  left:16px;
  right:16px;
  z-index:0;
  width:-moz-fit-content;
  width:fit-content;
  margin-inline:auto;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:var(--radius);
  background:rgba(13,31,44,.74);
  color:var(--on-dark);
  font:600 .6875rem/1.35 var(--sans);
  letter-spacing:.14em;
  text-align:center;
  text-transform:uppercase;
  transform:translateY(-50%);
  visibility:hidden;
}
.ph-light::before{border-color:var(--line);background:rgba(251,251,248,.92);color:var(--slate)}
.ph.is-empty::before,
.no-js .ph:not(.ph-icon)::before{visibility:visible}
/* Without JS a loaded photo simply covers the label (img is z-index 1, the label 0), so
   no double label. The one exception is the transparent Equal Housing PNG in a .ph-icon
   box, where the label would show through the mark; its words are printed beside it. */
.ph.is-empty img{visibility:hidden}
.ph:not([data-label])::before,
.ph[data-label=""]::before{display:none}
.ph:not(:has(img))::before{visibility:visible}
/* Tiny boxes (e.g. the Equal Housing mark): the label fills the box. */
.ph-icon{aspect-ratio:1/1;background-image:none;background-color:transparent;border:1px solid var(--rule-strong)}
.ph-icon::before{
  inset:0;top:0;left:0;right:0;
  width:auto;margin:0;padding:2px;
  display:grid;place-items:center;
  border:0;background:none;color:var(--muted);
  font-size:.625rem;line-height:1.1;letter-spacing:.04em;white-space:normal;
  transform:none;
}

/* ---------- Card grids (1-up, 2-up >=640, 3-up >=1024) ---------- */
.card-grid,
.listing-grid,
.tombstone-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--grid-gap);
}
@media (min-width:640px){
  .card-grid,.listing-grid,.tombstone-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (min-width:1024px){
  .card-grid,.listing-grid,.tombstone-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
  .card-grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
  .card-grid.cols-4{grid-template-columns:repeat(4, minmax(0,1fr))}
}

/* ---------- Generic card ----------
   .card = bordered panel on --surface (white on light, ink-2 on dark).
   .card-link = the whole card is clickable via ONE stretched link. Preferred:
   a plain <h3> and the visible CTA as the link, so what you see is what voice
   control can say:
     <h3>Retail &amp; net lease</h3> … <a class="card-go stretched" href="…">Explore<span class="visually-hidden">: Retail &amp; net lease</span> <span class="arr" aria-hidden="true">→</span></a>
   A heading link (h3 > a) also stretches, for cards without a CTA line.
   Brass top rule draws in on hover/focus. */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(24px, 2.4vw, 32px);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text);
}
.card h3{margin:0 0 10px;transition:color var(--t-fast) var(--ease)}
.card-go{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:20px;
  color:var(--fg);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.card-link{transition:border-color var(--t-fast) var(--ease),transform var(--t-med) var(--ease)}
.card-link:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.card-link::before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;right:-1px;
  z-index:2;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-med) var(--ease);
  pointer-events:none;
}
.card-link:hover::before,
.card-link:focus-within::before{transform:scaleX(1)}
.card-link h2 a,.card-link h3 a,.card-link h4 a,.card-link .stretched{color:var(--fg);text-decoration:none}
.card-link h2 a::after,.card-link h3 a::after,.card-link h4 a::after,.card-link .stretched::after{
  content:"";position:absolute;inset:0;z-index:1;
}
.card-link:hover h2,.card-link:hover h3,.card-link:hover h4,
.card-link:hover h2 a,.card-link:hover h3 a,.card-link:hover h4 a,.card-link:hover .stretched,
.card-link:hover .card-go{color:var(--link-hover)}
.card-link .arr{display:inline-block;transition:transform var(--t-med) var(--ease)}
.card-link:hover .arr,.card-link:focus-within .arr{transform:translateX(3px)}

/* ---------- Listing card ----------
   <article class="listing-card">
     <div class="ph ph-wide" data-label="Freestanding retail"><img …></div>
     <span class="status status-sale">For sale</span>
     <div class="listing-body">
       <p class="type">Freestanding retail</p>
       <h3>118 Fairview Ave</h3>
       <p class="city">Daytona Beach</p>
       <ul class="facts-row"><li>±12,289 SF</li><li>Former dealership</li><li>Call for pricing</li></ul>
       <a class="go stretched" href="…">View property<span class="visually-hidden">: 118 Fairview Ave</span> <span class="arr" aria-hidden="true">→</span></a>
     </div>
   </article>
   The visible CTA is the whole-card link (its hidden suffix names the
   property). A heading link (h3 > a) with <p class="go"> also works. */
.listing-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  color:var(--text);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-med) var(--ease);
}
.listing-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.listing-card .ph{flex:none;border-radius:0}
.listing-card .ph img{transition:transform var(--t-slow) var(--ease)}
.listing-card:hover .ph img{transform:scale(1.03)}
.listing-card > .status,
.listing-card .ph .status{position:absolute;top:16px;left:16px;z-index:2;pointer-events:none}
.listing-body{display:flex;flex:1;flex-direction:column;padding:24px 24px 22px}
.listing-card .type{
  margin:0 0 10px;
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--eyebrow);
}
.listing-card h3{margin:0;font-size:1.375rem;font-weight:600;line-height:1.2;transition:color var(--t-fast) var(--ease)}
.listing-card h3 a{color:var(--fg);text-decoration:none;transition:color var(--t-fast) var(--ease)}
.listing-card h3 a::after,
.listing-card .stretched::after{content:"";position:absolute;inset:0;z-index:1}
.listing-card:hover h3,
.listing-card:hover h3 a{color:var(--link-hover)}
.listing-card .city{margin:4px 0 0;font-size:.9375rem;color:var(--muted)}
.listing-card .go{
  display:flex;
  align-items:center;
  gap:8px;
  margin:auto 0 0;
  padding-top:20px;
  color:var(--fg);
  font-size:var(--fs-small);
  font-weight:600;
  text-decoration:none;
}
.listing-card .go .arr{display:inline-block;transition:transform var(--t-med) var(--ease)}
.listing-card:hover .go{color:var(--link-hover)}
.listing-card:hover .go .arr{transform:translateX(3px)}

/* Whole-card focus ring for stretched-link cards. */
.listing-card:has(a:focus-visible),
.card-link:has(a:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
@supports selector(:has(*)){
  .listing-card h3 a:focus-visible,.listing-card .stretched:focus-visible,
  .card-link h2 a:focus-visible,.card-link h3 a:focus-visible,.card-link h4 a:focus-visible,
  .card-link .stretched:focus-visible{outline:none}
}

/* Key facts separated by thin vertical rules (rules at line starts are clipped). */
.facts-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px 25px;
  margin:16px 0 0;
  padding:14px 0 0;
  overflow:hidden;
  border-top:1px solid var(--rule);
  list-style:none;
  color:var(--fg);
  font-size:var(--fs-small);
  font-weight:600;
  line-height:1.4;
  font-variant-numeric:tabular-nums lining-nums;
}
.facts-row > li{position:relative;margin:0}
.facts-row > li::before{
  content:"";
  position:absolute;
  top:.2em;bottom:.2em;left:-13px;
  border-left:1px solid var(--rule-strong);
}

/* ---------- Status pills ---------- */
.status{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.status-sale{background:var(--ink);color:var(--white);border-color:rgba(255,255,255,.24)}
.status-contract{background:var(--brass-light);color:var(--ink)}
.status-closed{background:var(--band);color:var(--slate)}

/* ---------- Tombstone (selected transaction) ----------
   <article class="tombstone">
     <p class="t-type">Finished lots</p>
     <h3 class="t-title">Tattersall at Tymber Creek</h3>
     <p class="t-place">Ormond Beach</p>
     <p class="t-figures">26 homesites · $5.1M+</p>
     <p class="t-year">2026</p>
     <p class="t-role">Phase 1 of a 62-lot program for K. Hovnanian Homes</p>
   </article>
   White on light sections; ink-2 automatically inside .on-dark. */
.tombstone{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:28px 28px 26px;
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);   /* brass as a hairline accent only */
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text);
}
.tombstone > *{margin:0}
.tombstone .t-type{
  padding-right:4.5em;
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--eyebrow);
}
.tombstone .t-year{
  position:absolute;
  top:28px;
  right:28px;
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--muted);
}
.tombstone .t-title{
  margin-top:18px;
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--fg);
}
.tombstone .t-place{margin-top:6px;margin-bottom:32px;font-size:.9375rem;color:var(--muted)}
.tombstone .t-figures{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-family:var(--serif);
  font-size:clamp(1.375rem, 1.2rem + .5vw, 1.625rem);
  font-weight:400;
  line-height:1.2;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--fg);
}
.tombstone .t-role{margin-top:10px;font-size:var(--fs-small);line-height:1.5;color:var(--muted)}

/* ---------- Survey line (process steps, 1031 timeline) ----------
   <ol class="survey">
     <li><span class="survey-mark">01</span><span class="survey-label">Valuation &amp; market study</span></li>
     …
   </ol>
   Optional <span class="survey-note"> under a label. Vertical under 768px,
   horizontal dashed line with a brass tick per stop from 768px.
   .survey-sm = compact, always horizontal (mega-menu card). */
.survey{
  --survey-line:var(--rule-strong);
  position:relative;
  display:grid;
  gap:28px;
  margin:0;
  padding:0;
  list-style:none;
}
.survey > li{position:relative;margin:0;padding-left:40px}
.survey::before{
  content:"";
  position:absolute;
  top:6px;bottom:6px;left:7px;
  width:1px;
  background-image:linear-gradient(to bottom, var(--survey-line) 0 6px, transparent 6px 10px);
  background-size:1px 10px;
}
.survey::after{
  content:"";
  position:absolute;
  bottom:6px;left:3px;
  width:9px;height:1px;
  background:var(--survey-line);
}
.survey > li::before{
  content:"";
  position:absolute;
  top:.7em;left:0;
  width:15px;height:2px;
  background:var(--accent);
}
.survey-mark{
  display:block;
  font-family:var(--serif);
  font-size:1.375rem;
  font-weight:400;
  line-height:1.1;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--fg);
}
.survey-label{display:block;margin-top:6px;font-size:.9375rem;line-height:1.45;color:var(--text)}
.survey-note{display:block;margin-top:4px;font-size:var(--fs-xs);line-height:1.45;color:var(--muted)}

@media (min-width:768px){
  .survey{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:24px}
  .survey > li{padding:40px 0 0}
  .survey::before{
    top:11px;bottom:auto;left:0;right:0;
    width:auto;height:1px;
    background-image:linear-gradient(to right, var(--survey-line) 0 6px, transparent 6px 10px);
    background-size:10px 1px;
  }
  .survey::after{top:7px;bottom:auto;left:auto;right:0;width:1px;height:9px}
  .survey > li::before{top:4px;left:0;width:2px;height:15px}
}

.survey-sm{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:12px}
.survey-sm > li{padding:26px 0 0}
.survey-sm::before{
  top:8px;bottom:auto;left:0;right:0;
  width:auto;height:1px;
  background-image:linear-gradient(to right, var(--survey-line) 0 6px, transparent 6px 10px);
  background-size:10px 1px;
}
.survey-sm::after{top:4px;bottom:auto;left:auto;right:0;width:1px;height:9px}
.survey-sm > li::before{top:2px;left:0;width:2px;height:13px}
.survey-sm .survey-mark{font-size:1rem}
.survey-sm .survey-label{margin-top:2px;font-size:var(--fs-label);line-height:1.35}

/* ---------- Chips & credentials ---------- */
.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:4px 12px;
  border:1px solid var(--rule-strong);
  border-radius:var(--radius);
  background:transparent;
  color:var(--fg);
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:1.3;
  text-decoration:none;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
a.chip:hover,button.chip:hover{border-color:var(--fg)}
.chip[aria-pressed="true"],.chip[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.on-dark .chip[aria-pressed="true"],.on-dark .chip[aria-current]{background:var(--white);border-color:var(--white);color:var(--ink)}

/* Credential: <a class="cred" href="…"><b>CCIM</b><span>Certified Commercial Investment Member, CCIM Institute</span></a> */
.cred{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  max-width:100%;
  padding:9px 14px;
  border:1px solid var(--rule);
  border-left:1px solid var(--accent);
  border-radius:var(--radius);
  color:var(--text);
  font-size:var(--fs-xs);
  line-height:1.4;
  text-decoration:none;
  transition:border-color var(--t-fast) var(--ease);
}
.cred b,.cred strong,.cred abbr{
  flex:none;
  color:var(--fg);
  font-weight:700;
  letter-spacing:.08em;
  text-decoration:none;
}
.cred span{min-width:0;color:var(--muted)}
a.cred:hover{border-color:var(--rule-strong);border-left-color:var(--accent)}
a.cred:hover b,a.cred:hover strong{color:var(--link-hover)}

/* ---------- Forms ----------
   <form class="form" action="https://formspree.io/f/…" method="POST" data-formspree>
     <p class="form-note full">Fields marked <span class="req" aria-hidden="true">*</span><span class="visually-hidden">with an asterisk</span> are required.</p>
     <div class="field"><label for="f-name">Name <span class="req" aria-hidden="true">*</span></label><input id="f-name" name="name" required autocomplete="name"></div>
     … <div class="field full">…</div>
     <input type="hidden" name="_subject" value="…">
     <div class="hp" aria-hidden="true"><label for="f-gotcha">Leave this field empty</label><input id="f-gotcha" name="_gotcha" type="text" tabindex="-1" autocomplete="off"></div>
     <p class="form-status" role="status" tabindex="-1"></p>
     <p class="form-note full">…</p>
     <div class="full"><button class="btn btn-primary" type="submit">Send inquiry</button></div>
   </form>
   The honeypot (.hp) MUST carry aria-hidden="true" AND tabindex="-1" on its
   input: off-screen alone still exposes it to screen readers, and a filled
   _gotcha makes Formspree drop the message while reporting success. */
.form{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}
@media (min-width:560px){ .form{grid-template-columns:repeat(2, minmax(0,1fr))} }
.form .full,.form > .form-note,.form > .form-status{grid-column:1 / -1}
.form.form-1col,.aside-card .form{grid-template-columns:minmax(0,1fr)}
.field{display:flex;flex-direction:column;min-width:0}
.field fieldset{min-width:0;margin:0;padding:0;border:0}
.field label,.field legend{
  display:block;
  margin:0 0 8px;
  padding:0;
  color:var(--fg);
  font-size:var(--fs-small);
  font-weight:600;
  line-height:1.35;
}
.req{color:var(--eyebrow)}
/* :where() keeps this at (0,1,0) so hover/focus/invalid states below win. */
.field :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  width:100%;
  min-height:48px;
  margin:0;
  padding:11px 14px;
  border:1px solid var(--field-line);
  border-radius:var(--radius);
  background-color:var(--white);
  color:var(--ink);
  font:inherit;
  font-size:1rem;
  line-height:1.4;
  box-shadow:none;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="date"]):not([type="range"]):not([type="color"]),
.field textarea{-webkit-appearance:none;appearance:none}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--slate)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--ink);
  outline:2px solid var(--focus);
  outline-offset:1px;
}
.field ::placeholder{color:#5B7280;opacity:1}
.field textarea{min-height:148px;resize:vertical}
.field select{
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313293A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-position:right 16px center;
  background-repeat:no-repeat;
  background-size:12px 8px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.field input[readonly]{background-color:var(--band);color:var(--slate)}
.field [aria-invalid="true"]{border-color:var(--err-fg);box-shadow:inset 0 0 0 1px var(--err-fg)}
.field .hint{margin:6px 0 0;color:var(--muted);font-size:var(--fs-xs);line-height:1.45}
.field-error{margin:6px 0 0;color:var(--err-fg);font-size:var(--fs-xs);font-weight:600}
.on-dark .field-error{color:#F4C7C7}
.choices{display:flex;flex-wrap:wrap;gap:8px 20px}
.choices label{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:.9375rem;font-weight:400}
.choices input,.field input[type="checkbox"],.field input[type="radio"]{flex:none;width:18px;height:18px;min-height:0;margin:0;accent-color:var(--ink)}
.on-dark .choices input,.on-dark .field input[type="checkbox"],.on-dark .field input[type="radio"]{accent-color:var(--brass-light)}
.form-note{margin:0;color:var(--muted);font-size:var(--fs-xs);line-height:1.5}

/* Status/live region. Never display:none (it must stay in the accessibility
   tree); while empty it is visually hidden and takes no grid row. */
.form-status{
  margin:0;
  padding:14px 16px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-size:.9375rem;
  font-weight:600;
  line-height:1.5;
}
.form-status:empty{
  position:absolute;
  width:1px;height:1px;
  padding:0;
  overflow:hidden;
  border-width:0;
  clip-path:inset(50%);
  white-space:nowrap;
}
.form-status.is-success{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-fg)}
.form-status.is-error{background:var(--err-bg);border-color:var(--err-line);color:var(--err-fg)}
.form-status.is-pending{border-color:var(--rule);color:var(--muted);font-weight:500}
.form-status ul{margin:6px 0 0;padding-left:1.2em;font-weight:500}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-card{
  padding:clamp(24px, 4vw, 40px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  color:var(--text);
}

/* ---------- Notices, placeholders, contact blocks ---------- */
/* Disclaimer / fine print. */
.notice{
  max-width:80ch;
  margin:var(--s6) 0 0;
  padding:2px 0 2px 16px;
  border-left:2px solid var(--rule-strong);
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.6;
}
.notice p{margin:0 0 .5em}
.notice p:last-child{margin-bottom:0}
.notice strong,.notice b{color:var(--fg)}
/* Unconfirmed content that must be replaced before launch. */
.tbd{
  padding:1px 6px;
  border:1px dashed #C9A54E;
  border-radius:var(--radius);
  background:var(--tbd-bg);
  color:var(--tbd-fg);
  font-size:.88em;
  font-weight:600;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
/* Brokerage line, required next to every phone/email/address block. */
.brokerage-line{margin:0;color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
.brokerage-line strong,.brokerage-line b{color:var(--fg);font-weight:600}

.contact-list{margin:0;padding:0;list-style:none}
.contact-list > li{padding:16px 0;border-top:1px solid var(--rule)}
.contact-list small,.contact-list .label{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:1.4;
}
.contact-list a,.contact-list .val{
  color:var(--fg);
  font-family:var(--serif);
  font-size:1.125rem;
  font-variant-numeric:lining-nums tabular-nums;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.contact-list a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:.2em}

/* ---------- Plat-map motif (partials/plat.html) ----------
   Colours default to a dark ground; .plat-light (or a light parent) switches.
   Lines draw in once on load; off under reduced motion. Text hidden < 768px. */
.plat{
  --plat-lot:#2D4B60;
  --plat-major:#46697E;
  --plat-label:#7A98A9;
  --plat-accent:var(--brass-light);
  --plat-fill:rgba(208,162,92,.07);
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  user-select:none;
}
.plat-light,.on-light .plat,.map-ph .plat,.section-alt .plat{
  --plat-lot:#D3DBDC;
  --plat-major:#B5C3C6;
  --plat-label:#7A8F99;
  --plat-accent:var(--brass);
  --plat-fill:rgba(154,107,37,.06);
}
.plat .p-lot{stroke:var(--plat-lot)}
.plat .p-major,.plat .p-dash{stroke:var(--plat-major)}
.plat .p-tract{stroke:var(--plat-accent);fill:var(--plat-fill)}
.plat .p-orn{stroke:var(--plat-major)}
.plat .p-orn-fill{fill:var(--plat-major)}
.plat text{
  fill:var(--plat-label);
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
}
.plat .p-tract-label{fill:var(--plat-accent);font-size:15px;font-weight:600;letter-spacing:.24em}
@media (max-width:767.98px){ .plat text{display:none} }
/* One-time draw-in (~1.4s). Each line is its own <path pathLength="1">, so
   every line draws over the same duration regardless of length. */
@media (prefers-reduced-motion:no-preference){
  .plat .p-draw > path{
    stroke-dasharray:1 2;
    stroke-dashoffset:1;
    animation:plat-draw 1.1s var(--ease) forwards;
  }
  .plat .p-lot > path{animation-duration:1.2s;animation-delay:.15s}
  .plat .p-draw > .p-tract{animation:plat-draw .9s var(--ease) .5s forwards,plat-fill .5s ease 1.1s both}
  .plat .p-fade{animation:plat-fade .6s var(--ease) .8s both}
}
@keyframes plat-draw{to{stroke-dashoffset:0}}
@keyframes plat-fade{from{opacity:0}}
@keyframes plat-fill{from{fill-opacity:0}}

/* ---------- Interior page hero + breadcrumbs ----------
   <section class="page-hero on-dark">{{> plat}}
     <div class="wrap page-hero-inner">
       <nav class="breadcrumb" aria-label="Breadcrumb"><ol><li><a href="…">Home</a></li><li aria-current="page">…</li></ol></nav>
       <h1>…</h1><p class="lead">…</p><div class="actions">…</div>
     </div>
   </section> */
.page-hero{position:relative;overflow:hidden;background-color:var(--ink)}
.page-hero .plat{opacity:.75}
.page-hero-inner{position:relative;padding-block:clamp(56px, 8vw, 104px) clamp(48px, 6vw, 80px)}
.page-hero h1{max-width:22ch}
.page-hero .lead{margin:var(--s5) 0 0}
.page-hero .actions{margin-top:var(--s6)}
.breadcrumb{margin:0 0 var(--s5);color:var(--muted);font-size:var(--fs-xs);line-height:1.4}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none}
.breadcrumb li{display:inline-flex;align-items:center;gap:8px}
.breadcrumb li + li::before{content:"/";content:"/" / "";opacity:.6}
.breadcrumb a{color:var(--text);text-decoration:none}
.breadcrumb a:hover{color:var(--link-hover);text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--fg)}

/* CTA band at the end of interior pages. */
.cta-band{position:relative;overflow:hidden}
.cta-band-inner{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:32px 56px;
  padding-block:clamp(56px, 8vw, 96px);
}
.cta-band-inner > :first-child{flex:1 1 440px}
.cta-band p{max-width:52ch;margin:14px 0 0}

/* ---------- Article + sidebar (service, property, contact pages) ---------- */
.layout-aside{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);align-items:start}
@media (min-width:1024px){
  .layout-aside{grid-template-columns:minmax(0,1fr) 360px;gap:var(--s8)}
}
.aside-card{
  padding:clamp(24px, 3vw, 32px);
  border:1px solid var(--line);
  border-top:1px solid var(--brass);
  border-radius:var(--radius);
  background:var(--white);
  color:var(--text);
}
/* Sticky only when the viewport is tall enough to show the whole card. */
@media (min-width:1024px) and (min-height:900px){
  .layout-aside .aside-card{position:sticky;top:calc(var(--header-h) + 24px)}
}
.aside-card h2{max-width:none;margin-bottom:10px;font-size:1.375rem;font-weight:600;line-height:1.2}
.aside-card p{color:var(--muted);font-size:.9375rem}
.aside-card .contact-list a{font-size:1.0625rem}
.aside-card .btn{margin-top:18px}
.aside-links{margin-top:var(--s5)}
.aside-links h3{
  margin-bottom:10px;
  color:var(--muted);
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.aside-links ul{margin:0;padding:0;list-style:none}
.aside-links li{border-top:1px solid var(--rule)}
.aside-links a{display:block;padding:10px 0;font-weight:500;text-decoration:none}
.aside-links a:hover{color:var(--link-hover)}
.aside-links a[aria-current="page"]{color:var(--fg);font-weight:600;box-shadow:inset 2px 0 0 var(--accent);padding-left:12px}

/* ---------- Long-form copy ---------- */
.prose{max-width:68ch;font-size:1.0625rem;line-height:1.7}
.prose p,.prose li{color:var(--text)}
.prose .lead{margin-bottom:1.2em;color:var(--fg)}
.prose h2{max-width:none;margin:1.8em 0 .6em;font-size:clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);line-height:1.15}
.prose h3{margin:1.6em 0 .5em;font-size:1.25rem}
.prose > :first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.25em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--eyebrow)}
.prose a:not([class]){color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.2em}
.prose a:not([class]):hover{color:var(--link-hover);text-decoration-thickness:2px}
.prose blockquote{
  margin:1.6em 0;
  padding-left:20px;
  border-left:1px solid var(--accent);
  color:var(--fg);
  font-family:var(--serif);
  font-size:1.25rem;
  line-height:1.45;
}
.prose .notice{margin:1.6em 0}
/* Numbered steps with serif numerals over a brass rule. */
.steps{margin:0 0 1.4em;padding:0!important;list-style:none;counter-reset:step}
.steps li{position:relative;margin-bottom:20px;padding-left:56px;counter-increment:step}
.steps li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute;
  top:2px;left:0;
  width:38px;
  padding-top:4px;
  border-top:1px solid var(--accent);
  color:var(--eyebrow);
  font-family:var(--serif);
  font-size:1rem;
  font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}
.steps strong{display:block;color:var(--fg);font-weight:600}

/* ---------- Property detail ---------- */
.property-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.quick-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
  color:var(--text);
  font-size:.9375rem;
}
.quick-facts b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums lining-nums}

/* Key facts table: data labels left, values right. */
.facts{width:100%;margin:0;border-collapse:collapse;font-size:.9375rem;font-variant-numeric:tabular-nums lining-nums}
.facts caption{
  margin-bottom:12px;
  color:var(--fg);
  font-family:var(--serif);
  font-size:1.375rem;
  font-weight:600;
  text-align:left;
}
.facts th,.facts td{padding:12px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.facts tr:first-child > th,.facts tr:first-child > td{border-top:1px solid var(--rule)}
.facts th{
  width:42%;
  padding-top:14px;
  padding-right:16px;
  color:var(--muted);
  font-size:var(--fs-label);
  font-weight:600;
  font-stretch:87.5%;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.facts td{color:var(--fg);font-weight:600}

/* Photo gallery: <div class="gallery" data-gallery> .gallery-main.ph + .gallery-thumbs links
   (<a href="large.jpg">: a plain link to the photo without JavaScript; js/main.js swaps the
   main image instead). Thumb <img data-full="large.jpg"> optional; <button> thumbs from
   older markup get the same styling. Ten or more thumbs wrap into further rows of five. */
.gallery{display:grid;gap:10px;margin-bottom:var(--s7)}
.gallery-main{aspect-ratio:16/10}
.gallery-thumbs{display:grid;grid-template-columns:repeat(5, minmax(0,1fr));gap:10px}
.gallery-thumbs a,.gallery-thumbs button{display:block;width:100%;padding:0;border:0;border-radius:var(--radius);background:none;cursor:pointer;text-decoration:none}
/* display:block — the .ph is a <span> inside the link; inline spans have no box for aspect-ratio. */
.gallery-thumbs .ph{display:block;aspect-ratio:4/3;opacity:.75;transition:opacity var(--t-fast) var(--ease)}
.gallery-thumbs .ph::before{padding:4px 6px;font-size:.625rem;letter-spacing:.08em}
.gallery-thumbs a:hover .ph,.gallery-thumbs button:hover .ph,.gallery-thumbs [aria-current="true"] .ph{opacity:1}
.gallery-thumbs [aria-current="true"] .ph{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--accent)}
@media (max-width:480px){
  .gallery-thumbs{gap:6px}
  .gallery-thumbs .ph::before{display:none}
}

/* Click-to-load map. Google Maps sets cookies, so nothing loads until the
   visitor asks. Box needs data-map-src and data-map-title; button [data-map-load hidden]. */
.map-ph{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  aspect-ratio:16/9;
  padding:24px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--band);
  color:var(--ink);
  text-align:center;
}
.map-ph > :not(.plat):not(iframe){position:relative}
.map-ph p{max-width:44ch;margin:0;color:var(--slate);font-size:.9375rem}
.map-ph iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-ph.is-loaded > :not(iframe){visibility:hidden}
@media (max-width:480px){ .map-ph{aspect-ratio:4/3} }

.mobile-om{display:none}
@media (max-width:1023.98px){ .mobile-om{display:inline-flex} }

/* Team bios (team page). */
.bio{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  align-items:start;
  padding-block:56px;
  border-top:1px solid var(--rule);
}
.bio:first-child{padding-top:0;border-top:0}
@media (min-width:768px){ .bio{grid-template-columns:280px minmax(0,1fr);gap:48px} }
.bio .ph-portrait{max-width:280px}
.bio .role{margin:6px 0 20px;color:var(--eyebrow);font-weight:600}

/* 404 page: ruled list of main sections. */
.notfound-links{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  column-gap:var(--s7);
  margin:0;
  padding:0;
  list-style:none;
}
@media (min-width:768px){ .notfound-links{grid-template-columns:repeat(2, minmax(0,1fr))} }
.notfound-links > li{padding:20px 0 22px;border-top:1px solid var(--rule)}
.notfound-links .link-arrow{font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:-.005em;text-transform:none}
.notfound-links p{margin:6px 0 0;color:var(--muted);font-size:.9375rem}
.notfound-home{margin:var(--s7) 0 0}

/* ---------- Scroll reveal ----------
   Add .reveal to section heads or card-grid wrappers (not to elements that
   have their own transitions, and not above the fold). Content renders fully
   without JS; the hidden start state exists only under .js with motion allowed.
   If main.js never initialises, a failsafe shows everything after 3s. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
  .js .reveal:not(.is-in){opacity:0;transform:translate3d(0,12px,0)}
  .js:not(.reveal-ready) .reveal:not(.is-in){animation:reveal-failsafe 1ms linear 3s forwards}
}
@keyframes reveal-failsafe{to{opacity:1;transform:none}}

/* ---------- Higher contrast preference ---------- */
@media (prefers-contrast:more){
  :root,.on-light,.listing-card,.form-card,.aside-card{--muted:var(--ink);--rule:#9AAAB0;--rule-strong:#6F8691}
  .on-dark{--muted:var(--white);--text:var(--white);--rule:rgba(255,255,255,.4);--rule-strong:rgba(255,255,255,.6)}
}

/* ---------- Windows High Contrast / forced colours ---------- */
@media (forced-colors:active){
  .plat{display:none}
  .ph,.ph-light{background-image:none}
  .ph::before{display:none}
  .nav-toggle-bars span{forced-color-adjust:none;background:CanvasText}
  img[src*="logo"],img[src*="equal-housing"],.brand img,.footer-logo,.logo-invert{
    forced-color-adjust:none;
    filter:none!important;
    background:#fff;
    padding:4px;
  }
  .eyebrow::before,.survey > li::before,.facts-row > li::before{forced-color-adjust:none;background:CanvasText;border-color:CanvasText}
  .survey::before{background:none;border-left:1px dashed CanvasText}
  .survey::after{forced-color-adjust:none;background:CanvasText}
  .status,.tbd,.chip,.cred,.form-status:not(:empty){border:1px solid CanvasText}
  .link-arrow{background:none;text-decoration:underline}
  .card-link::before{forced-color-adjust:none;background:Highlight}
  /* Filled buttons lose their fill in forced colours; give every button a
     visible edge so primary/dark still read as controls (ButtonBorder where
     supported, CanvasText otherwise). */
  .btn{forced-color-adjust:auto;border-color:CanvasText;border-color:ButtonBorder}
  .btn[aria-disabled="true"]{border-color:GrayText;color:GrayText}
  .field select{background-image:none;-webkit-appearance:auto;appearance:auto;padding-right:14px}
  .listing-card:has(a:focus-visible),.card-link:has(a:focus-visible){outline-color:Highlight}
}
@media (forced-colors:active) and (min-width:768px){
  .survey::before{border-left:0;border-top:1px dashed CanvasText}
}
@media (forced-colors:active){
  .survey-sm::before{border-left:0;border-top:1px dashed CanvasText}
}

/* ---------- Reduced motion (global) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  /* Hover lifts and arrow nudges become colour-only changes. */
  .btn:hover,.card-link:hover,.listing-card:hover,
  .btn:hover .arr,.btn:focus-visible .arr,.link-arrow:hover .arr,.link-arrow:focus-visible .arr,
  .card-link:hover .arr,.card-link:focus-within .arr,.listing-card:hover .go .arr{transform:none!important}
  .listing-card:hover .ph img{transform:none!important}
}

/* --------------------------------------------------------------------------
   20-chrome.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   20-chrome — global chrome: the header (utility bar, main bar, mega menus,
   mobile drawer), the footer, and the contact / brokerage blocks.
   Extends 10-components; it never redefines a component there.
   ========================================================================== */

/* ==========================================================================
   HEADER SHELL
   The header reserves a constant height, so the compact scrolled state never
   shifts the page. The utility bar scrolls out of view on its own (negative
   sticky offset) and the main bar pins to the top. The few pixels of slack
   under the compact bar are made click-through with pointer-events.
   ========================================================================== */
.site-header{
  --util-h:0px;
  --bar-h:64px;
  position:sticky;
  top:calc(-1 * var(--util-h));
  z-index:100;
  pointer-events:none;
}
.site-header > *{pointer-events:auto}

@media (min-width:700px){
  .site-header{--util-h:36px;--bar-h:80px;height:calc(var(--util-h) + 80px)}
  .site-header.is-scrolled{--bar-h:64px}
}
/* Without JavaScript the nav wraps under 1024px, so the header must not stick
   (it would cover the content it pushed down). 05-base drops scroll-padding
   to match. The same layout is used when js/10-nav.js fails to initialise
   (it adds html.nav-failed), so there is never a "Menu" button that does
   nothing. */
@media (max-width:699.98px){
  .no-js .site-header,.nav-failed .site-header{position:relative;height:auto}
}

/* ---------- Utility bar (>=1024px only) ----------
   min-height rather than height, so browser text-only zoom can grow the bar
   instead of clipping it. */
.utility-bar{display:none}
@media (min-width:700px){
  .utility-bar{
    display:block;
    min-height:var(--util-h);
    background:var(--ink-deep);
    color:var(--on-dark-muted);
    font-family:var(--sans);
    font-size:.8125rem;
    line-height:1.3;
  }
  .utility-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:36px}
  .utility-tag{margin:0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .utility-links{display:flex;align-items:center;gap:22px;margin:0;padding:0;list-style:none}
  .utility-links a{
    display:inline-flex;
    align-items:center;
    gap:3px;
    min-height:36px;
    color:var(--on-dark-muted);
    font-weight:500;
    text-decoration:none;
    transition:color var(--t-fast) var(--ease);
  }
  .utility-links a:hover{color:var(--white);text-decoration:underline;text-underline-offset:.25em}
  .utility-links a:focus-visible{outline:2px solid var(--brass-light);outline-offset:-3px}
}

/* ---------- Main bar ---------- */
.main-bar{
  position:relative;
  height:var(--bar-h);
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:height var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
.site-header.is-scrolled .main-bar{box-shadow:var(--shadow-overlay)}
.main-bar-inner{display:flex;align-items:center;gap:var(--s4);height:100%}

@media (max-width:699.98px){
  .no-js .main-bar,.nav-failed .main-bar{height:auto}
  .no-js .main-bar-inner,.nav-failed .main-bar-inner{flex-wrap:wrap;height:auto;min-height:64px;padding-block:10px 12px}
}

/* ---------- Brand ---------- */
.brand{display:inline-flex;align-items:center;flex:none;margin-right:auto;border-radius:var(--radius)}
.brand img{width:auto;height:44px}
@media (min-width:700px){
  .brand img{height:56px;transition:height var(--t-med) var(--ease)}
  .site-header.is-scrolled .brand img{height:44px}
}

/* ---------- Primary nav (desktop) ---------- */
/* The nav (and each item) fills the bar's height, so moving the pointer from a
   nav item down into its panel never crosses a gap that would close it. */
.primary-nav{min-width:0;align-self:stretch}
@media (max-width:699.98px){
  .js:not(.nav-failed) .primary-nav{display:none}
  .no-js .primary-nav,.nav-failed .primary-nav{flex:1 0 100%;order:3}
}
.nav-list{display:flex;flex-wrap:wrap;align-items:stretch;gap:0 2px;height:100%;margin:0;padding:0;list-style:none}
.nav-item{position:static;display:flex;align-items:center}

.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:44px;
  padding:0 10px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:.9375rem;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--t-fast) var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:10px;right:10px;bottom:8px;
  height:2px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-med) var(--ease);
}
.nav-link:hover{color:var(--brass-dark)}
.nav-link:hover::after,
.nav-item.is-open .nav-link::after,
.nav-link[aria-current="page"]::after{transform:scaleX(1)}
/* Non-colour cue for the current section. */
.nav-link[aria-current="page"]{font-weight:700}

.mm-toggle{display:none}
@media (min-width:700px){
  .js:not(.nav-failed) .mm-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:44px;
    margin-left:-8px;
    padding:0;
    border:0;
    border-radius:var(--radius);
    background:none;
    color:var(--slate);
    transition:color var(--t-fast) var(--ease);
  }
  .js .mm-toggle:hover{color:var(--ink)}
  .js .mm-toggle .chev{transition:transform var(--t-med) var(--ease)}
  .js .mm-toggle[aria-expanded="true"]{color:var(--brass-dark)}
  .js .mm-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
}

.nav-cta{flex:none;margin-left:var(--s2)}
@media (max-width:699.98px){
  .js:not(.nav-failed) .nav-cta{display:none}
  .no-js .nav-cta,.nav-failed .nav-cta{order:2}
}

/* Narrow desktops: the seven items plus the logo and the button do not fit at
   full size between 1024 and 1279, and a wrapped nav would overflow the bar.
   Everything tightens by a few pixels instead. The chevron button keeps a
   24px width and no negative margin, so it never overlaps its link
   (WCAG 2.5.8 target size); the space comes out of the link padding. */
@media (min-width:700px) and (max-width:1279.98px){
  .main-bar-inner{gap:10px}
  .brand img{height:48px}
  .site-header.is-scrolled .brand img{height:40px}
  .nav-link{padding:0 6px;font-size:.875rem;letter-spacing:0}
  .nav-link::after{left:6px;right:6px}
  .js:not(.nav-failed) .mm-toggle{width:24px;margin-left:0}
  .nav-cta{margin-left:2px;padding-inline:12px}
}

/* Tablets and narrow windows (700–1023px): the tabs stay visible instead of
   folding into the Menu button. Labels shorten ("Land", "1031", "Contact")
   and everything tightens once more; chevron targets stay 24px wide. */
@media (min-width:700px) and (max-width:1023.98px){
  .main-bar-inner{gap:6px}
  .brand img{height:40px}
  .site-header.is-scrolled .brand img{height:36px}
  .nav-link{padding:0 4px;font-size:.8125rem}
  .nav-link::after{left:4px;right:4px}
  .nav-long{display:none}
  .nav-cta{margin-left:0;padding-inline:10px}
  .utility-tag{font-size:.75rem}
  .utility-links{gap:16px;flex:none}
  .utility-links a{white-space:nowrap}
}

/* ---------- Hamburger ---------- */
.nav-toggle{display:none}
@media (max-width:699.98px){
  .js:not(.nav-failed) .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex:none;
    min-height:44px;
    margin-right:-10px;
    padding:8px 10px;
    border:0;
    border-radius:var(--radius);
    background:none;
    color:var(--ink);
    font-family:var(--sans);
    font-size:.8125rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
}
.nav-toggle-bars{position:relative;display:block;flex:none;width:22px;height:14px}
.nav-toggle-bars span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:currentColor;
  transition:transform var(--t-med) var(--ease),opacity var(--t-fast) var(--ease);
}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){top:6px}
.nav-toggle-bars span:nth-child(3){top:12px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   MEGA PANELS
   A closed panel keeps the `hidden` attribute, so it is out of the tab order
   and out of the accessibility tree; 10-nav.js removes the attribute only
   while the panel is open. Without JavaScript no panel ever opens, and CSS
   hides the buttons, so there is never a control that does nothing.
   ========================================================================== */
.mega{position:absolute;top:100%;left:0;right:0}
.mega:not(.is-open){display:none}
/* No fill mode: if the animation never runs (throttled tab, older engine) the
   panel still rests at its normal, fully visible state. */
.mega.is-open{display:block;animation:mega-in 180ms var(--ease)}
@keyframes mega-in{from{opacity:0;transform:translateY(-6px)}}
.mega-sheet{
  background:var(--paper);
  border-bottom:1px solid var(--line-strong);
  box-shadow:var(--shadow-overlay);
}
/* The panel scrolls inside itself on short screens; it never runs past the
   bottom of the window. Scroll chaining stays on, so a wheel over the panel
   still scrolls the page. */
.mega-inner{
  padding-block:var(--s6) var(--s7);
  max-height:calc(100vh - var(--util-h) - var(--bar-h));
  max-height:calc(100dvh - var(--util-h) - var(--bar-h));
  overflow-y:auto;
}
.mega-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s7)}
.mega-main{min-width:0}
.mega-top{
  margin:0 0 var(--s5);
  padding-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.mega-top .link-arrow{font-family:var(--serif);font-size:1.125rem;letter-spacing:-.005em;text-transform:none}
.mega-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s7)}
.mega-group{min-width:0}
.mega-eyebrow{
  margin:0 0 12px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass-dark);
}
.mega-links{margin:0;padding:0;list-style:none}
.mega-links > li + li{margin-top:2px}
.mega-links a{
  display:block;
  margin-left:-12px;
  padding:8px 8px 8px 12px;
  border-left:2px solid transparent;
  border-radius:var(--radius);
  text-decoration:none;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.mega-links a:hover{border-left-color:var(--brass);background-color:rgba(154,107,37,.06)}
.mm-name{
  display:block;
  font-family:var(--serif);
  font-size:1.0625rem;
  font-weight:600;
  line-height:1.25;
  color:var(--ink);
  transition:color var(--t-fast) var(--ease);
}
.mega-links a:hover .mm-name{color:var(--brass-dark)}
.mm-desc{display:block;margin-top:2px;font-size:var(--fs-small);line-height:1.4;color:var(--slate)}

/* Featured card, columns 9-12. */
.mega-feature{min-width:0}
.mega-card{width:100%}
.mega-card.card{padding:var(--s5)}
.mega-card .listing-body{padding:18px 20px 20px}
.mm-card-title{
  margin:0;
  font-family:var(--serif);
  font-size:1.1875rem;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.005em;
  color:var(--fg);
}
.mm-card-title a{color:var(--fg);text-decoration:none;transition:color var(--t-fast) var(--ease)}
.listing-card.mega-card .mm-card-title a::after{content:"";position:absolute;inset:0;z-index:1}
.listing-card.mega-card:hover .mm-card-title a{color:var(--link-hover)}
.card-link.mega-card:hover .mm-card-title a{color:var(--link-hover)}
.mm-card-note{margin:10px 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.mega-card-static .survey{--survey-line:var(--line-strong);margin-bottom:var(--s4)}
.mega-card .facts-row{gap:6px 20px}
.mega-card .facts-row > li::before{left:-10px}

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
/* Closed = the `hidden` attribute (never in the tab order); 10-nav.js removes
   it only while the drawer is open. */
.drawer{
  position:fixed;
  inset:0;
  z-index:120;
  flex-direction:column;
  max-height:100vh;
  max-height:100dvh;
  background-color:var(--ink-deep);
}
.drawer:not(.is-open){display:none}
.drawer.is-open{display:flex;animation:drawer-in var(--t-med) var(--ease)}
@keyframes drawer-in{from{opacity:0}}
@media (min-width:700px){ .drawer{display:none!important} }

.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  flex:none;
  min-height:64px;
  padding-inline:var(--pad-l) var(--pad-r);
  padding-top:env(safe-area-inset-top, 0px);
  border-bottom:1px solid var(--rule);
}
.drawer-brand{display:inline-flex;align-items:center;border-radius:var(--radius)}
.drawer-brand img{width:auto;height:40px}
.logo-invert{filter:invert(1)}
.drawer-close{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  margin-right:-10px;
  padding:8px 10px;
  border:0;
  border-radius:var(--radius);
  background:none;
  color:var(--white);
  font-family:var(--sans);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.drawer-x{position:relative;display:block;flex:none;width:18px;height:18px}
.drawer-x span{position:absolute;top:8px;left:0;width:100%;height:2px;background:currentColor}
.drawer-x span:nth-child(1){transform:rotate(45deg)}
.drawer-x span:nth-child(2){transform:rotate(-45deg)}

.drawer-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-inline:var(--pad-l) var(--pad-r);
  padding-block:var(--s2) calc(var(--s7) + env(safe-area-inset-bottom, 0px));
}

.drawer-list{margin:0;padding:0;list-style:none}
.drawer-list > li{border-bottom:1px solid var(--rule)}
.drawer-row{display:flex;align-items:stretch;gap:var(--s2)}
.drawer-link{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  min-height:56px;
  padding:10px 2px;
  color:var(--white);
  font-family:var(--serif);
  font-size:1.1875rem;
  font-weight:600;
  line-height:1.25;
  text-decoration:none;
}
.drawer-link:hover{color:var(--brass-light)}
.drawer-link[aria-current="page"]{padding-left:14px;box-shadow:inset 3px 0 0 var(--brass-light)}
.dr-toggle{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:52px;
  min-height:56px;
  margin-right:-8px;
  padding:0;
  border:0;
  border-radius:var(--radius);
  background:none;
  color:var(--on-dark-muted);
}
.dr-toggle:hover{color:var(--white)}
.dr-toggle .chev{transition:transform var(--t-med) var(--ease)}
.dr-toggle[aria-expanded="true"]{color:var(--brass-light)}
.dr-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}

.drawer-sub{margin:0 0 12px;padding:0 0 0 2px;list-style:none}
.drawer-sub a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 2px;
  color:var(--on-dark);
  font-size:.9375rem;
  line-height:1.4;
  text-decoration:none;
}
.drawer-sub a:hover{color:var(--white)}
.drawer-sub a[aria-current="page"]{padding-left:12px;box-shadow:inset 2px 0 0 var(--brass-light);color:var(--white);font-weight:600}

.drawer-cta{margin-top:var(--s5)}
.drawer-contact{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule)}
.drawer-eyebrow{
  margin:0 0 var(--s2);
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass-light);
}

/* Body scroll lock while the drawer is open (10-nav sets --sb-w). */
html.is-nav-open,
html.is-nav-open body{overflow:hidden}
html.is-nav-open body{padding-right:var(--sb-w, 0px)}

/* ==========================================================================
   CONTACT BLOCKS — extensions to .contact-list / .brokerage-line
   ========================================================================== */
.contact-list.is-stacked > li > a,
.contact-list.is-stacked > li > .val{display:block}
.contact-list.is-stacked > li > a + a,
.contact-list.is-stacked > li > .val + a{margin-top:6px}
.contact-list.is-stacked > li > .val{line-height:1.4}
.contact-block > .brokerage-line{margin-top:var(--s4)}
.contact-block > .contact-serving{margin-top:2px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background-color:var(--ink-deep)}
.footer-inner{padding-block:clamp(56px, 7vw, 88px) clamp(32px, 4vw, 44px)}

.footer-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7)}
@media (min-width:1024px){
  .footer-top{grid-template-columns:minmax(220px,1fr) minmax(0,3.1fr);gap:56px}
}

.footer-brand{min-width:0}
.footer-logo{width:auto;height:56px}
.footer-blurb{max-width:34ch;margin:var(--s5) 0 0;font-size:.9375rem;line-height:1.55;color:var(--text)}
.footer-office{
  margin:var(--s5) 0 0;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--text);
  font-variant-numeric:lining-nums tabular-nums;
}
.footer-office-name{display:block;color:var(--fg);font-weight:600}
/* The phone link gets a ~32px tap target without changing the line rhythm. */
.footer-office a{display:inline-block;padding-block:4px;margin-block:-4px;color:var(--text);text-decoration:none}
.footer-office a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:.2em}
.footer-serving{margin:6px 0 0;font-size:var(--fs-xs);line-height:1.5;color:var(--muted)}

.footer-nav{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6) var(--s5)}
@media (min-width:520px){ .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:768px){ .footer-nav{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){ .footer-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s6) var(--s5)} }
.footer-col{min-width:0}
.footer-col-title{
  margin:0 0 12px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  font-stretch:87.5%;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brass-light);
}
.footer-col ul{margin:0;padding:0;list-style:none}
.footer-col a{
  display:block;
  padding:7px 0;
  color:var(--text);
  font-size:var(--fs-small);
  line-height:1.4;
  text-decoration:none;
  transition:color var(--t-fast) var(--ease);
}
.footer-col a:hover{color:var(--white);text-decoration:underline;text-underline-offset:.2em}

.footer-contacts{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--rule)}
.footer-contacts .footer-col-title{margin-bottom:var(--s5)}
.footer-people{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5) var(--s7)}
@media (min-width:600px){ .footer-people{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .footer-people{grid-template-columns:repeat(2,minmax(0,360px));gap:var(--s8)} }
.footer-person{min-width:0}
.footer-person-name{margin:0 0 6px;color:var(--fg);font-size:var(--fs-small);font-weight:600;line-height:1.4}
.footer-person-lines{margin:0 0 10px}
.footer-person-lines a{
  display:block;
  padding:3px 0;
  color:var(--fg);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.4;
  font-variant-numeric:lining-nums tabular-nums;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.footer-person-lines a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:.2em}

.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s5) var(--s7);
  margin-top:var(--s7);
  padding-top:var(--s5);
  border-top:1px solid var(--rule);
}
.footer-legal-text{flex:1 1 460px;max-width:78ch;margin:0;font-size:var(--fs-xs);line-height:1.6;color:var(--muted)}
.footer-legal-side{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5)}
.footer-eho{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--fs-xs);line-height:1.35;color:var(--muted)}
.eho-mark{flex:none;width:40px}
.eho-mark img{filter:invert(1)}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:4px var(--s5);margin:0;padding:0;list-style:none}
.footer-legal-links a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  color:var(--text);
  font-size:var(--fs-xs);
  text-decoration:none;
}
.footer-legal-links a:hover{color:var(--white);text-decoration:underline;text-underline-offset:.2em}

/* ==========================================================================
   FORCED COLOURS / PRINT
   ========================================================================== */
@media (forced-colors:active){
  .main-bar,.mega-sheet,.drawer{border:1px solid CanvasText}
  .mega-sheet,.drawer{background:Canvas}
  .nav-link::after{forced-color-adjust:none;background:CanvasText}
  .drawer-x span{forced-color-adjust:none;background:CanvasText}
  .drawer-link[aria-current="page"],
  .drawer-sub a[aria-current="page"],
  .aside-links a[aria-current="page"]{box-shadow:none;outline:1px solid CanvasText;outline-offset:2px}
  .mega-links a:hover{background:Highlight;color:HighlightText}
  .mega-links a:hover .mm-name,
  .mega-links a:hover .mm-desc{color:HighlightText}
  .logo-invert,.eho-mark img{forced-color-adjust:none;filter:none!important;background:#fff;padding:4px}
}

@media print{
  .utility-bar,.drawer{display:none!important}
  .site-header{height:auto!important;pointer-events:auto!important}
  .main-bar{height:auto!important}
  .footer-inner{padding-block:12pt 0!important}
  .footer-contacts,.footer-legal{margin-top:10pt!important;padding-top:8pt!important;border-top:1px solid #999!important}
  .footer-person-lines a{color:#000!important}
}

/* --------------------------------------------------------------------------
   40-home.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   40-home — the homepage only (pages/index.html). Everything here is scoped
   to a class that exists nowhere else, so interior pages are unaffected.
   Shared components (.btn, .card, .listing-card, .tombstone, .survey, .form)
   come from 10-components; this file only arranges them.
   ========================================================================== */

/* (The asymmetric sections — land, 1031, markets, contact — are placed with
   the design system's .lg-span-N + .lg-start-N classes in the markup; those
   compose since 05-base writes grid-column-end / grid-column-start.) */

/* --------------------------------------------------------------------------
   1. Hero — full-bleed ink, plat linework behind, copy in columns 1–7,
      proof strip on a hairline at the bottom. The gradient keeps the
      headline on a clean field however the plat art crops.
   -------------------------------------------------------------------------- */
.hero{
  --rule:rgba(255,255,255,.22);   /* thinner-reading hairlines on the ink field */
  position:relative;
  overflow:hidden;
  background-color:var(--ink);
}
.hero .plat{opacity:.9;transform-origin:50% 50%}
/* Slow, barely-there drift of the plat art (6s, alternating). The scale never
   drops below 1.02, so the slice-fitted artwork never shows an edge. Off under
   reduced motion (and the global rule collapses it to a static frame anyway). */
@media (prefers-reduced-motion:no-preference){
  .hero .plat{animation:plat-drift 6s ease-in-out infinite alternate;will-change:transform}
}
@keyframes plat-drift{
  from{transform:translate3d(0,0,0) scale(1.02)}
  to{transform:translate3d(-10px,-8px,0) scale(1.045)}
}
/* Taller, calmer hero from 1024px: the copy centres in the free space and
   the proof strip stays pinned to the bottom hairline. */
@media (min-width:1024px){
  .hero{display:flex;flex-direction:column;min-height:82vh}
  .hero-inner{flex:1 1 auto;display:flex;align-items:center}
  .hero-inner > .grid-12{width:100%}
}
.hero-copy .display{max-width:22ch}
/* Brand lockup: team name over brokerage name, identical size (FREC 61J2-10.026),
   separated by a short brass hairline. */
.hero-brand{max-width:none}
.hero-brand > span:not(.visually-hidden){display:block}
.hero-brand > span + span:not(.visually-hidden){
  position:relative;
  margin-top:.16em;
  padding-top:.2em;
}
.hero-brand > span + span:not(.visually-hidden)::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:72px;height:1px;
  background:var(--brass-light);
}
.hero-affil{
  margin:clamp(16px, 2vw, 22px) 0 0;
  color:var(--muted);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hero-affil a{
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px solid var(--brass-light);
  padding-bottom:2px;
}
.hero-affil a:hover{color:var(--brass-light)}

/* Luxury residential band: heading left, short copy and one button right. */
.luxury-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px, 4vw, 64px);align-items:center}
@media (min-width:900px){
  .luxury-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.luxury-inner h2{max-width:18ch;margin:0}
.luxury-copy p{max-width:52ch;margin:0;color:var(--text)}
.luxury-copy .actions{margin-top:clamp(20px, 2.4vw, 28px)}
/* The three-part hero eyebrow fits one line on a 375px phone with slightly
   less tracking. */
@media (max-width:480px){ .hero .eyebrow{letter-spacing:.13em} }
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  /* Two scrims over the plat art: one from the left so the headline always
     sits on a clean ink field, one along the bottom so survey notation can
     never read through the proof figures. */
  background:
    linear-gradient(to top,
      rgba(13,31,44,.95) 0,
      rgba(13,31,44,.88) 170px,
      rgba(19,41,58,0) 330px),
    linear-gradient(104deg,
      var(--ink) 0%,
      rgba(19,41,58,.94) 32%,
      rgba(19,41,58,.62) 56%,
      rgba(19,41,58,0) 84%);
  pointer-events:none;
}
.hero-inner,
.hero-proof{position:relative;z-index:1}
.hero-inner{padding-block:clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px)}
.hero .display{margin:0}
.hero .lead{max-width:56ch;margin:clamp(24px, 2.6vw, 32px) 0 0;color:var(--text)}
.hero-actions{margin-top:clamp(28px, 3.5vw, 44px)}

/* Proof strip: four cells, serif figures, hairline rules. 2×2 on phones. */
.proof{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px 28px;
  margin:0;
  padding:22px 0 0;
  border-top:1px solid var(--rule);
  list-style:none;
}
.hero-proof{padding-bottom:clamp(40px, 5vw, 64px)}
.proof-fig{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.375rem, .95rem + 1.35vw, 2.125rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--fg);
}
/* Deliberate break points: "CCIM · [ALC · MSRE]", "2026 [President-Elect]". */
.proof-fig .nw{white-space:nowrap}
.proof-note{
  display:block;
  margin-top:8px;
  font-size:var(--fs-xs);
  line-height:1.45;
  color:var(--muted);
}
@media (min-width:900px){
  .proof{grid-template-columns:repeat(4, minmax(0,1fr));gap:0}
  /* Two lines' worth of figure in every cell, so the notes share a baseline
     however the longer credential lines wrap. */
  .proof-fig{min-height:2.2em}
  .proof > li{padding-inline:28px}
  .proof > li:first-child{padding-left:0}
  .proof > li:last-child{padding-right:0}
  .proof > li + li{border-left:1px solid var(--rule)}
}
@media (min-width:1024px){
  .hero-proof{padding-bottom:clamp(76px, 7vw, 104px)}   /* room for the router overlap */
}
/* The plat's survey notation must never run into the headline. */
@media (max-width:1023.98px){
  .hero .plat text{display:none}
}

/* --------------------------------------------------------------------------
   2. Intent router — four white tiles. From 1024px they form one panel that
      sits 48px over the hero's bottom edge.
   -------------------------------------------------------------------------- */
.router{
  position:relative;
  z-index:2;
  padding-top:clamp(32px, 4vw, 48px);
}
.intent-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--grid-gap);
}
@media (min-width:560px){
  .intent-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (min-width:1024px){
  .router{margin-top:-48px;padding-top:0}
  .intent-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:0;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--white);
  }
}
.intent-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:clamp(20px, 2.2vw, 28px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  color:var(--ink);
  text-decoration:none;
  transition:border-color var(--t-fast) var(--ease);
}
.intent-tile:hover{border-color:var(--line-strong)}
.intent-tile::before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;right:-1px;
  height:1px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-med) var(--ease);
}
.intent-tile:hover::before,
.intent-tile:focus-visible::before{transform:scaleX(1)}
@media (min-width:1024px){
  .intent-tile{border:0;border-left:1px solid var(--line);border-radius:0}
  .intent-tile:first-child{border-left:0}
  .intent-tile::before{top:0;left:0;right:0}
  .intent-tile:hover{background:#FDFDFB}
}
.intent-name{
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--ink);
}
.intent-line{
  margin-top:8px;
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--slate);
}
.intent-go{
  display:block;
  margin-top:auto;
  padding-top:22px;
  color:var(--brass-dark);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.intent-go .arr{display:inline-block;transition:transform var(--t-med) var(--ease)}
.intent-tile:hover .intent-go .arr,
.intent-tile:focus-visible .intent-go .arr{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   4. Selected transactions (ink band)
   -------------------------------------------------------------------------- */
.tx-note{
  max-width:78ch;
  margin:var(--s7) 0 0;
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.6;
}

/* --------------------------------------------------------------------------
   5. Land & new development — signature split + survey-line process
   -------------------------------------------------------------------------- */
.land-grid{align-items:start;row-gap:clamp(40px, 5vw, 56px)}
.land-body{max-width:56ch;margin:var(--s5) 0 0;font-size:var(--fs-lead);line-height:1.6}
.land-proof{
  margin:clamp(28px, 3.5vw, 40px) 0 0;
  padding:18px 0 4px 20px;
  border-left:1px solid var(--accent);
}
.land-proof .data-label{margin:0 0 10px}
.land-proof blockquote p{
  max-width:46ch;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight:400;
  line-height:1.4;
  color:var(--fg);
}

/* Ruled list of links: serif name, one line of description, arrow right. */
.link-rows{margin:clamp(32px, 4vw, 44px) 0 0;padding:0;list-style:none}
.link-rows > li{margin:0;border-top:1px solid var(--rule)}
.link-rows > li:last-child{border-bottom:1px solid var(--rule)}
.link-rows a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:4px 20px;
  padding:18px 0;
  color:var(--text);
  text-decoration:none;
}
.link-rows b{
  grid-column:1;
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.3;
  color:var(--fg);
  transition:color var(--t-fast) var(--ease);
}
.link-rows .d{grid-column:1;font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.link-rows .arr{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  color:var(--accent);
  transition:transform var(--t-med) var(--ease);
}
.link-rows a:hover b{color:var(--link-hover)}
.link-rows a:hover .arr{transform:translateX(3px)}

.land-figure{margin:0}
.land-figure figcaption{
  margin-top:14px;
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.5;
}
@media (min-width:1024px){
  .land-figure{padding-top:6px}
}

.land-process{
  margin-top:clamp(48px, 6vw, 76px);
  padding-top:clamp(32px, 4vw, 48px);
  border-top:1px solid var(--rule);
}
.process-title{
  margin:0 0 clamp(28px, 3vw, 36px);
  font-size:1.375rem;
  font-weight:600;
}

/* --------------------------------------------------------------------------
   5b. Statement band — full-bleed ink-deep, one large serif line, a brass
       hairline above it. No heading; the section carries an aria-label.
   -------------------------------------------------------------------------- */
.statement{
  padding-block:clamp(80px, 11vw, 152px);
  background-color:var(--ink-deep);
}
.statement-line{
  max-width:40ch;
  margin:0 auto;
  font-family:var(--serif);
  font-size:clamp(1.625rem, 1rem + 2.4vw, 3rem);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.018em;
  text-align:center;
  text-wrap:balance;
  color:var(--fg);
}
.statement-line::before{
  content:"";
  display:block;
  width:32px;
  height:1px;
  margin:0 auto clamp(24px, 3vw, 36px);
  background:var(--brass-light);
}

/* Borderless tile grids: hairline dividers instead of card borders. The grid
   carries the top/left rule and every tile the right/bottom rule, so the
   lattice closes at any column count (1-up, 2-up, 3-up). */
.type-grid,
.insight-grid{
  gap:0;
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.type-grid > .card,
.insight-grid > .card{
  border:0;
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  border-radius:0;
  background:transparent;
  padding:clamp(26px, 2.6vw, 36px) clamp(24px, 2.4vw, 32px);
}
.type-grid > .card-link:hover,
.insight-grid > .card-link:hover{transform:none;background:rgba(255,255,255,.65)}
.type-grid > .card-link::before,
.insight-grid > .card-link::before{top:-1px;left:-1px;right:0}

/* --------------------------------------------------------------------------
   6. Commercial property types — tiles with line-drawn site-plan glyphs
   -------------------------------------------------------------------------- */
.type-tile .type-glyph{
  width:48px;
  height:48px;
  margin-bottom:22px;
  color:var(--brass-dark);
  stroke-linecap:square;
}
.type-tile h3{margin-bottom:8px;font-size:1.25rem}
.type-tile p{max-width:36ch;color:var(--muted);font-size:var(--fs-small);line-height:1.55}

.services-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px 40px;
  margin:clamp(32px, 4vw, 48px) 0 0;
  padding-top:24px;
  border-top:1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   7. 1031 & investors (ink band) + deadline calculator
   -------------------------------------------------------------------------- */
.invest-grid{align-items:start;row-gap:clamp(40px, 5vw, 56px)}
.invest-body{max-width:58ch;margin:var(--s5) 0 0;line-height:1.7}
.invest-timeline{margin-top:clamp(36px, 4vw, 48px)}
.invest-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px 32px;
  margin:clamp(32px, 4vw, 44px) 0 0;
}
.invest-notice{margin-top:clamp(40px, 5vw, 56px)}

.calc{
  padding:clamp(22px, 2.6vw, 30px);
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--ink-2);
}
.calc-title{
  margin:0 0 20px;
  font-size:1.25rem;
  font-weight:600;
}
.calc .field input{max-width:280px}
.calc-out{margin-top:26px}
.calc-row{
  margin:0;
  padding:16px 0;
  border-top:1px solid var(--rule);
}
.calc-label{
  display:block;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  font-stretch:87.5%;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.calc-value{
  display:inline-block;
  margin-top:8px;
  font-family:var(--serif);
  font-size:clamp(1.1875rem, 1.05rem + .5vw, 1.5rem);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.005em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--fg);
}
.calc-value.is-placeholder{
  font-family:var(--sans);
  font-size:.9375rem;
  color:var(--muted);
}
.calc-star{color:var(--muted)}
.calc-error{
  margin:14px 0 0;
  color:#F4C7C7;
  font-size:var(--fs-xs);
  font-weight:600;
}
.calc-static{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--text)}
.calc-note{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid var(--rule);
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.55;
}
.no-js .calc-note{border-top:0;padding-top:12px}

/* --------------------------------------------------------------------------
   8. Principals — 4:5 portrait beside the text, then the credentials row
   -------------------------------------------------------------------------- */
/* Both principals sit side by side on desktop and stack below 1024px; the
   portrait is a compact 148px so the names and credentials lead, not the photo. */
.principals-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0 clamp(32px, 4vw, 64px);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
@media (min-width:1024px){
  .principals-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
.principal{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px 28px;
  align-items:start;
  padding:clamp(28px, 3.5vw, 44px) 0;
}
.principals-grid .principal + .principal{border-top:1px solid var(--rule)}
@media (min-width:1024px){
  .principals-grid .principal + .principal{border-top:0}
}
@media (min-width:480px){
  .principal{grid-template-columns:148px minmax(0,1fr)}
}
.principal-portrait .ph{max-width:148px}
.principal-name{margin:0;font-size:clamp(1.5rem, 1.25rem + .8vw, 1.875rem);font-weight:500}
.principal-role{
  margin:8px 0 0;
  color:var(--eyebrow);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.principal-lines{
  max-width:60ch;
  margin:clamp(20px, 2.4vw, 26px) 0 0;
  padding:0;
  list-style:none;
}
.principal-lines > li{
  position:relative;
  margin:0 0 12px;
  padding-left:20px;
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--text);
}
.principal-lines > li::before{
  content:"";
  position:absolute;
  top:.65em;left:0;
  width:10px;height:1px;
  background:var(--rule-strong);
}
.principal-lines > li:last-child{margin-bottom:0}
.principal-contact{
  margin:clamp(20px, 2.4vw, 28px) 0 24px;
  padding-bottom:18px;
  border-bottom:1px solid var(--rule);
}
.principal-contact .contact-list{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0 32px;
}
@media (min-width:560px){
  .principal-contact .contact-list{grid-template-columns:auto minmax(0,1fr)}
}
/* Side-by-side cards are too narrow for phone and email in two columns. */
@media (min-width:1024px){
  .principals-grid .principal-contact .contact-list{grid-template-columns:minmax(0,1fr)}
}
.principal-contact .contact-list a{font-size:1.0625rem;overflow-wrap:anywhere}
.principal-contact .brokerage-line{margin-top:14px}

.creds{margin-top:clamp(40px, 5vw, 56px)}
.cred-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.cred-row > li{margin:0;display:flex}
.cred-row .cred{max-width:38ch}
.cred-note{margin:16px 0 0;color:var(--muted);font-size:var(--fs-xs)}

/* --------------------------------------------------------------------------
   8b. Community & industry — four compact, icon-free items on hairlines
   -------------------------------------------------------------------------- */
.civic-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
  list-style:none;
}
.civic{
  margin:0;
  padding:clamp(22px, 2.6vw, 30px) 0;
  border-bottom:1px solid var(--rule);
}
.civic h3{
  max-width:22ch;
  margin:0;
  font-size:1.1875rem;
  font-weight:500;
  line-height:1.25;
}
.civic p{margin:10px 0 0;font-size:var(--fs-small);line-height:1.55;color:var(--muted)}
.civic .civic-who{
  margin-top:16px;
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
}
@media (min-width:560px){
  .civic-grid{grid-template-columns:repeat(2, minmax(0,1fr));column-gap:var(--grid-gap)}
}
@media (min-width:1024px){
  .civic-grid{grid-template-columns:repeat(4, minmax(0,1fr));column-gap:0}
  .civic{display:flex;flex-direction:column;padding:28px 28px 34px;border-left:1px solid var(--rule)}
  .civic:first-child{padding-left:0;border-left:0}
  .civic:last-child{padding-right:0}
  .civic .civic-who{margin-top:auto;padding-top:18px}
}

/* --------------------------------------------------------------------------
   9. Insights cards
   -------------------------------------------------------------------------- */
.insight-cat{
  margin:0 0 14px;
  color:var(--eyebrow);
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.insight h3{font-size:1.375rem;font-weight:500;line-height:1.25}
.insight p{margin:12px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:1.55}

/* --------------------------------------------------------------------------
   10. Markets — county list and sourced statistics
   -------------------------------------------------------------------------- */
.markets-grid{align-items:start;row-gap:clamp(36px, 4.5vw, 48px)}
.county-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px 25px;
  margin:var(--s5) 0 clamp(28px, 3vw, 36px);
  padding:16px 0 0;
  overflow:hidden;
  border-top:1px solid var(--rule);
  list-style:none;
  color:var(--fg);
  font-size:var(--fs-small);
  font-weight:600;
}
.county-list > li{position:relative;margin:0}
.county-list > li::before{
  content:"";
  position:absolute;
  top:.2em;bottom:.2em;left:-13px;
  border-left:1px solid var(--rule-strong);
}
.stat-rows{margin:0;padding:0;list-style:none}
.stat-rows > li{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px 32px;
  margin:0;
  padding:clamp(20px, 2.4vw, 28px) 0;
  border-top:1px solid var(--rule);
}
.stat-rows > li:last-child{border-bottom:1px solid var(--rule)}
@media (min-width:560px){
  .stat-rows > li{grid-template-columns:minmax(130px, 200px) minmax(0,1fr);align-items:baseline}
}
.stat-fig{
  font-family:var(--serif);
  font-size:var(--fs-big);
  font-weight:400;
  line-height:1;
  letter-spacing:-.015em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--fg);
}
.stat-desc{font-size:.9375rem;line-height:1.5;color:var(--muted)}
.source-line{
  max-width:80ch;
  margin:20px 0 0;
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.55;
}

/* --------------------------------------------------------------------------
   11. Contact band (ink) — inline form beside the principals' details
   -------------------------------------------------------------------------- */
.contact-grid{align-items:start;row-gap:clamp(40px, 5vw, 56px)}
.contact-text{max-width:58ch;margin:var(--s5) 0 0;line-height:1.7}
.contact-form{margin-top:clamp(32px, 4vw, 44px)}
.contact-aside-title{
  margin:0 0 4px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
@media (min-width:1024px){
  .contact-aside{padding-top:6px}
}

/* --------------------------------------------------------------------------
   12. Residential cross-link — one quiet line above the footer
   -------------------------------------------------------------------------- */
.residential{
  padding-block:clamp(26px, 3vw, 38px);
  border-top:1px solid var(--line);
  background:var(--paper);
}
.residential-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 32px;
}
.residential p{margin:0;color:var(--muted);font-size:var(--fs-small)}
.residential .text-link{font-size:var(--fs-small);white-space:nowrap}

/* --------------------------------------------------------------------------
   Windows High Contrast
   -------------------------------------------------------------------------- */
@media (forced-colors:active){
  .hero::after{display:none}
  .hero .plat{animation:none}
  .statement-line::before{forced-color-adjust:none;background:CanvasText}
  .intent-tile{border:1px solid CanvasText}
  .intent-tile::before{forced-color-adjust:none;background:Highlight}
  .link-rows .arr,.calc-star{forced-color-adjust:none;color:CanvasText}
  .principal-lines > li::before,
  .county-list > li::before{forced-color-adjust:none;background:CanvasText;border-color:CanvasText}
}

/* --------------------------------------------------------------------------
   50-properties.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   50-properties — /properties/ index (filter chips + grid), the property
   detail pages built from property-template.html, and /transactions/.
   Everything here is scoped to a "p-" class that exists only on those pages.
   The components themselves (.listing-card, .status, .chip, .gallery, .facts,
   .map-ph, .layout-aside, .aside-card, .form, .tombstone, .cta-band) come
   from 10-components; this file arranges them and adds the few pieces these
   pages need: the filter bar, the price block in the hero, the ruled content
   blocks, the OM aside, the transaction groups and the closing CTA band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   /properties/ — filter bar. The chips are buttons driven by 50-properties.js;
   the whole bar carries .js-only, so without JavaScript every card shows.
   -------------------------------------------------------------------------- */
.p-filter{
  display:grid;
  gap:20px 48px;
  margin:0 0 clamp(24px, 3vw, 32px);
  padding:clamp(20px, 2.5vw, 28px) 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
@media (min-width:1024px){
  .p-filter{grid-template-columns:minmax(0,1fr) auto;align-items:start}
}
.p-filter-group{display:grid;gap:10px}
.p-filter-label{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.p-filter .chip{min-height:36px;padding:6px 14px}

/* Result count (aria-live) and the "Clear filters" button. */
.p-results{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 24px;
  margin:0 0 20px;
}
.p-count{
  margin:0;
  color:var(--fg);
  font-size:var(--fs-small);
  font-weight:600;
  font-variant-numeric:tabular-nums lining-nums;
}
.p-reset{padding:0;border:0;background:none;font-size:var(--fs-small);cursor:pointer}

/* Empty state when no card matches the chips. */
.p-empty{
  padding:clamp(32px, 4vw, 48px) clamp(20px, 3vw, 32px);
  border:1px dashed var(--rule-strong);
  border-radius:var(--radius);
  text-align:center;
}
.p-empty p{max-width:48ch;margin:0 auto;color:var(--muted)}
.p-empty .link-arrow{margin-top:16px}

/* "Don't see what you need?" tiles, and the same card used to fill the last
   slot of a listing grid on the detail pages. */
.p-kicker{
  margin:0 0 12px;
  color:var(--eyebrow);
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.p-need h3{margin-bottom:0;font-size:1.375rem;font-weight:500;line-height:1.25}
.p-need > p:not(.p-kicker){max-width:36ch;margin:10px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:1.55}
.listing-grid .p-need{justify-content:center;background:var(--band)}
.p-need-note{
  max-width:78ch;
  margin:var(--s6) 0 0;
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.6;
}

/* --------------------------------------------------------------------------
   Property detail — hero: status + type line, address, place, quick facts on
   the left; the price block on the right (full width under 768px).
   -------------------------------------------------------------------------- */
.p-hero .property-head{margin-top:var(--s2)}
.p-head-main{flex:1 1 520px;min-width:0}
.p-head-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 18px}
.p-head-type{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--eyebrow);
}
.page-hero .p-head-place{margin:14px 0 0;font-size:var(--fs-lead);line-height:1.45;color:var(--text)}
.p-hero .quick-facts{margin-top:22px}
.p-price{
  flex:0 0 auto;
  min-width:min(100%, 260px);
  padding:18px 22px 20px;
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--ink-2);
}
.p-price-label{
  display:block;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  font-stretch:87.5%;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.p-price-value{
  display:block;
  margin-top:6px;
  font-family:var(--serif);
  font-size:clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--fg);
}
.p-price-value.is-text{font-size:clamp(1.375rem, 1.2rem + .6vw, 1.75rem)}
.p-price-unit{display:block;margin-top:8px;font-size:var(--fs-xs);line-height:1.45;color:var(--muted)}
@media (max-width:767.98px){ .p-price{width:100%} }
/* "Request the OM" jump button: shown under 1024px, where the aside form sits
   below the article (the .mobile-om rule in 10-components does the toggling). */
.p-head-cta{margin-top:var(--s6)}
@media (max-width:480px){ .p-head-cta{width:100%} }

/* --------------------------------------------------------------------------
   Property detail — article column: gallery, then ruled blocks.
   -------------------------------------------------------------------------- */
.p-layout{row-gap:clamp(40px, 5vw, 56px)}
.p-main{min-width:0}
.p-main .gallery{margin-bottom:clamp(36px, 4vw, 48px)}
.p-block{
  margin-top:clamp(32px, 4vw, 44px);
  padding-top:clamp(32px, 4vw, 44px);
  border-top:1px solid var(--rule);
}
.p-block:first-child,
.gallery + .p-block{margin-top:0;padding-top:0;border-top:0}
.p-block > h2{
  max-width:none;
  margin:0 0 20px;
  font-size:clamp(1.5rem, 1.3rem + .7vw, 1.875rem);
  font-weight:500;
  line-height:1.15;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.p-block .prose{max-width:none}

/* Investment highlights: two columns of ruled bullets from 640px. */
.p-highlights{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px 32px;
  margin:0;
  padding:0;
  list-style:none;
}
@media (min-width:640px){ .p-highlights{grid-template-columns:repeat(2, minmax(0,1fr))} }
.p-highlights > li{
  position:relative;
  margin:0;
  padding-left:20px;
  font-size:.9375rem;
  line-height:1.55;
  color:var(--text);
}
.p-highlights > li::before{
  content:"";
  position:absolute;
  top:.7em;left:0;
  width:10px;height:1px;
  background:var(--accent);
}

/* Key facts table: rows read as data label / value (component .facts). */
.p-block .facts td .tbd{font-weight:500}

/* Location: address line, the click-to-load map, then sourced context items. */
.p-address{margin:0 0 16px;font-size:.9375rem;color:var(--text)}
.p-address b{color:var(--fg);font-weight:600}
.p-context{margin:20px 0 0;padding:0;list-style:none}
.p-context > li{
  margin:0;
  padding:12px 0;
  border-top:1px solid var(--rule);
  font-size:.9375rem;
  line-height:1.55;
  color:var(--text);
}
.p-context > li:last-child{border-bottom:1px solid var(--rule)}
.p-context b{color:var(--fg);font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.p-src{display:block;margin-top:3px;font-size:var(--fs-xs);line-height:1.45;color:var(--muted)}
.p-src a{color:inherit}

/* Documents: name + note on the left, action link on the right. */
.p-docs{margin:0;padding:0;list-style:none}
.p-docs > li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 24px;
  margin:0;
  padding:14px 0;
  border-top:1px solid var(--rule);
  font-size:.9375rem;
  line-height:1.5;
}
.p-docs > li:last-child{border-bottom:1px solid var(--rule)}
.p-docs > li > span{flex:1 1 320px;min-width:0}
.p-docs b{color:var(--fg);font-weight:600}
.p-doc-meta{color:var(--muted);font-size:var(--fs-small)}

.p-disclaimer{margin-top:clamp(32px, 4vw, 44px)}

/* --------------------------------------------------------------------------
   Property detail — aside: OM request form + both principals. The card is
   taller than most viewports, so it only sticks on very tall screens
   (10-components makes .aside-card sticky from 900px; a card that is taller
   than the viewport would pin with its bottom cut off).
   -------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-height:1199.98px){
  .p-layout .aside-card{position:static}
}
.p-om > h2{margin-bottom:8px;scroll-margin-top:calc(var(--header-h) + 24px)}
.p-om > p{margin:0 0 20px}
.p-om .form{gap:16px}
.p-om .form-note{margin:0}
.p-om .btn{width:100%;margin-top:4px}
.p-om .field textarea{min-height:104px}
.p-om-contacts{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule)}
.p-om-contacts h3{
  margin:0 0 4px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.p-om-contacts .contact-list > li{padding:12px 0}
.p-om-contacts .contact-list > li:first-child{border-top:0;padding-top:6px}
.p-om-contacts .contact-list a{font-size:1.0625rem}
.p-om-contacts .brokerage-line{margin-top:8px}

/* Template page only (removed automatically once robots: noindex is deleted). */
.p-template-banner{
  padding:14px 0;
  border-bottom:1px solid #C9A54E;
  background:var(--tbd-bg);
  color:var(--tbd-fg);
  font-size:var(--fs-small);
  line-height:1.5;
}
.p-template-banner p{margin:0}
.p-template-banner b{color:inherit;font-weight:700}
.p-template-banner code{font-family:Consolas,Menlo,monospace;font-size:.9em}

/* --------------------------------------------------------------------------
   /transactions/ — jump chips, grouped tombstone grids, footnote, related row
   -------------------------------------------------------------------------- */
.p-tx-jump{margin:0 0 clamp(32px, 4vw, 48px)}
.p-tx-jump .chip-list{gap:8px}
.p-tx-group{
  margin-top:clamp(40px, 5vw, 56px);
  padding-top:clamp(32px, 4vw, 48px);
  border-top:1px solid var(--rule);
}
.p-tx-group:first-of-type{margin-top:0;padding-top:0;border-top:0}
.p-tx-group > h2{
  max-width:none;
  margin:0 0 8px;
  font-size:clamp(1.5rem, 1.3rem + .7vw, 1.875rem);
  font-weight:500;
  line-height:1.15;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.p-tx-group > p{max-width:64ch;margin:0 0 clamp(24px, 3vw, 32px);color:var(--muted);font-size:.9375rem;line-height:1.55}
.p-tx-note{
  max-width:78ch;
  margin:clamp(40px, 5vw, 56px) 0 0;
  padding-top:24px;
  border-top:1px solid var(--rule);
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.6;
}
.p-tx-note p{margin:0 0 .5em}
.p-tx-note p:last-child{margin-bottom:0}
.p-links-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px 40px;
  margin:clamp(32px, 4vw, 48px) 0 0;
  padding-top:24px;
  border-top:1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   Closing CTA band: plat linework behind a left scrim; buttons plus the
   brokerage line on the right (the phone link needs it in the same block).
   -------------------------------------------------------------------------- */
.p-cta .plat{opacity:.55}
.p-cta::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(104deg, var(--ink) 0%, rgba(19,41,58,.92) 38%, rgba(19,41,58,.45) 100%);
  pointer-events:none;
}
.p-cta .cta-band-inner{z-index:1}
.p-cta .eyebrow{margin:0 0 20px}
.p-cta h2{max-width:20ch}
.p-cta-side{flex:0 1 auto;max-width:100%}
.p-cta-side .actions{gap:12px 16px}
.p-cta-contact{
  margin:16px 0 4px!important;
  max-width:none!important;
  color:var(--muted);
  font-size:var(--fs-small);
  line-height:1.5;
}
.p-cta-contact b{color:var(--fg);font-weight:600}
.p-cta-side .brokerage-line{margin:0!important;max-width:none!important}
@media (max-width:480px){ .p-cta-side{flex:1 1 100%} }

/* --------------------------------------------------------------------------
   Windows High Contrast
   -------------------------------------------------------------------------- */
@media (forced-colors:active){
  .p-cta::after{display:none}
  .p-highlights > li::before{forced-color-adjust:none;background:CanvasText}
  .p-price,.p-empty,.p-template-banner{border-color:CanvasText}
  .p-filter .chip[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
}

/* --------------------------------------------------------------------------
   55-land.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   55-land — /land/* (hub, sell-your-land, homebuilder-land, commercial-sites)
   and /new-development/* (hub, build-to-suit). Every rule here is scoped to
   an "ld-" class that exists only on those pages. The components themselves
   (.card, .listing-card, .tombstone, .survey, .steps, .form, .form-card,
   .aside-card, .layout-aside, .aside-links, .cta-band, .notice, .prose)
   come from 10-components; this file only arranges them and adds the few
   pieces those pages need: audience tiles, the analysis grid, the sourced
   context panel, the FAQ disclosure, the pipeline list, the inline valuation
   form band and the closing CTA band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hub pages: audience tiles (3-up), the survey-line process, the analysis
   grid beside a figure, the proof line and the related-guide cards.
   -------------------------------------------------------------------------- */
.ld-tile .ld-kicker{
  margin:0 0 12px;
  color:var(--eyebrow);
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ld-tile h3{font-size:clamp(1.375rem, 1.2rem + .5vw, 1.625rem);font-weight:500;line-height:1.2}
.ld-tile > p{max-width:40ch;margin:0;color:var(--muted);font-size:var(--fs-small);line-height:1.6}

/* Process: title + survey line, ruled off from the tiles above. */
.ld-process{
  margin-top:clamp(48px, 6vw, 76px);
  padding-top:clamp(32px, 4vw, 48px);
  border-top:1px solid var(--rule);
}
.ld-process h2{max-width:24ch;margin:0 0 clamp(28px, 3vw, 40px);font-size:var(--fs-h3);font-weight:600}

/* Analysis grid: serif term over a one-line definition, ruled rows. */
.ld-split{align-items:start;row-gap:clamp(40px, 5vw, 56px)}
.ld-analyze{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0 var(--s7);
  margin:clamp(28px, 3.5vw, 40px) 0 0;
  padding:0;
  list-style:none;
}
@media (min-width:640px){ .ld-analyze{grid-template-columns:repeat(2, minmax(0,1fr))} }
.ld-analyze > li{
  margin:0;
  padding:18px 0 20px;
  border-top:1px solid var(--rule);
}
.ld-analyze b{
  display:block;
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.3;
  color:var(--fg);
}
.ld-analyze p{margin:6px 0 0;font-size:var(--fs-small);line-height:1.55;color:var(--muted)}
.ld-figure{margin:0}
.ld-figure figcaption{margin-top:14px;font-size:var(--fs-xs);line-height:1.5;color:var(--muted)}
@media (min-width:1024px){ .ld-figure{padding-top:6px} }

/* Proof line: small-caps label over a serif pull quote. */
.ld-proof{
  max-width:60ch;
  margin:clamp(32px, 4vw, 48px) 0 0;
  padding:18px 0 4px 20px;
  border-left:1px solid var(--accent);
}
.ld-proof .data-label{margin:0 0 10px}
.ld-proof blockquote p{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight:400;
  line-height:1.4;
  color:var(--fg);
}
.ld-proof .link-arrow{margin-top:16px;font-size:var(--fs-small)}

/* Related guides / related pages: category eyebrow, serif title, dek. */
.ld-guide-cat{
  margin:0 0 14px;
  color:var(--eyebrow);
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ld-guide h3{font-size:1.375rem;font-weight:500;line-height:1.25}
.ld-guide p{margin:12px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:1.55}

/* --------------------------------------------------------------------------
   Service pages: prose column beside a sticky aside.
   -------------------------------------------------------------------------- */
.ld-article .prose .lead{max-width:none}
.ld-article .prose > h2:first-of-type{margin-top:1.8em}

/* "Who we represent": two audience panels inside the prose column. */
.ld-audiences{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--grid-gap);
  margin:0 0 1.6em;
  padding:0!important;
  list-style:none;
}
@media (min-width:640px){ .ld-audiences{grid-template-columns:repeat(2, minmax(0,1fr))} }
.ld-audiences > li{
  margin:0;
  padding:22px 24px 24px;
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
}
.ld-audiences h3{margin:0 0 8px;font-size:1.125rem;line-height:1.25}
.ld-audiences p{margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--muted)}

/* Ruled bullet list (site types, what we source). */
.ld-list{margin:0 0 1.4em;padding:0!important;list-style:none}
.ld-list > li{
  position:relative;
  margin:0 0 10px;
  padding-left:20px;
  line-height:1.6;
}
.ld-list > li::before{
  content:"";
  position:absolute;
  top:.75em;left:0;
  width:10px;height:1px;
  background:var(--accent);
}
.ld-list > li:last-child{margin-bottom:0}
.ld-list strong{color:var(--fg);font-weight:600}

/* "What we analyze": two columns of ruled bullets from 640px. */
.ld-analysis{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px 32px;
  margin:0 0 1.6em;
  padding:0!important;
  list-style:none;
}
@media (min-width:640px){ .ld-analysis{grid-template-columns:repeat(2, minmax(0,1fr))} }
.ld-analysis > li{
  position:relative;
  margin:0;
  padding-left:20px;
  font-size:.9375rem;
  line-height:1.55;
}
.ld-analysis > li::before{
  content:"";
  position:absolute;
  top:.7em;left:0;
  width:10px;height:1px;
  background:var(--accent);
}

/* Sourced market-context panel. Every figure carries its source and date. */
.ld-context{
  margin:1.8em 0;
  padding:clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 26px);
  border:1px solid var(--rule);
  border-left:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
}
.ld-context h3{
  margin:0 0 6px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--eyebrow);
}
.ld-context > p{margin:0 0 16px;font-size:var(--fs-small);color:var(--muted)}
.ld-context ul{margin:0;padding:0!important;list-style:none}
.ld-context li{
  margin:0;
  padding:12px 0;
  border-top:1px solid var(--rule);
  font-size:.9375rem;
  line-height:1.55;
}
.ld-context li:last-child{padding-bottom:0}
.ld-context b{color:var(--fg);font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.ld-src{
  display:block;
  margin-top:3px;
  font-size:var(--fs-xs);
  line-height:1.45;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.ld-src a{color:inherit}
.ld-context .link-arrow{margin-top:16px;font-size:var(--fs-small)}

/* FAQ: native details/summary, ruled rows, a plus that turns into a minus.
   Markup: <div class="faq ld-faq"><details><summary>…</summary><div class="faq-body">…</div></details>…</div> */
.ld-faq{margin:0;border-top:1px solid var(--rule)}
.ld-faq details{border-bottom:1px solid var(--rule)}
.ld-faq summary{
  position:relative;
  padding:18px 44px 18px 0;
  list-style:none;
  cursor:pointer;
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.3;
  color:var(--fg);
  transition:color var(--t-fast) var(--ease);
}
.ld-faq summary::-webkit-details-marker{display:none}
.ld-faq summary::marker{content:""}
.ld-faq summary::before,
.ld-faq summary::after{
  content:"";
  position:absolute;
  top:50%;right:6px;
  width:14px;height:2px;
  background:var(--accent);
  transform:translateY(-50%);
  transition:transform var(--t-med) var(--ease);
}
.ld-faq summary::after{transform:translateY(-50%) rotate(90deg)}
.ld-faq details[open] summary::after{transform:translateY(-50%) rotate(0deg)}
.ld-faq summary:hover{color:var(--link-hover)}
.ld-faq summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ld-faq .faq-body{padding:0 0 22px;font-size:1rem;line-height:1.7;color:var(--text)}
.ld-faq .faq-body p{margin:0 0 .8em}
.ld-faq .faq-body p:last-child{margin-bottom:0}
.ld-faq .faq-body ul{margin:0 0 .8em;padding-left:1.2em}

/* Aside: contact card + section navigation. */
.ld-aside .aside-card > h2{margin-bottom:6px}
.ld-aside .aside-card > p{margin:0 0 6px}
.ld-aside .aside-card .contact-block > .brokerage-line{margin-top:var(--s4)}
.ld-aside .aside-card .btn{width:100%}
.ld-aside .aside-links{margin-top:var(--s6)}

/* --------------------------------------------------------------------------
   Inline valuation form band (sell-your-land).
   -------------------------------------------------------------------------- */
.ld-form-grid{align-items:start;row-gap:clamp(32px, 4vw, 48px)}
.ld-form-intro h2{max-width:20ch}
.ld-form-intro > p{max-width:52ch;margin:var(--s5) 0 0;line-height:1.7}
.ld-form-intro .notice{margin-top:var(--s6)}
.ld-form-card .form-status{margin-top:0}

/* --------------------------------------------------------------------------
   Related transactions / listings / development services
   -------------------------------------------------------------------------- */
/* Two tombstones side by side from 768px (not the 3-up default). */
@media (min-width:768px){ .ld-tx-2{grid-template-columns:repeat(2, minmax(0,1fr))} }
.ld-tx-note{
  max-width:78ch;
  margin:var(--s6) 0 0;
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.6;
}
/* Single tombstone beside a paragraph of context. */
.ld-tx-single{align-items:start;row-gap:clamp(28px, 3.5vw, 40px)}
.ld-tx-single .tombstone{max-width:420px}
.ld-tx-copy p{max-width:56ch;line-height:1.7}
.ld-tx-copy .ld-src{margin-top:8px}

/* Card that fills the last slot of a listing grid: "tell us what you need". */
.ld-need{justify-content:center;background:var(--band)}
.ld-need .ld-kicker{
  margin:0 0 12px;
  color:var(--eyebrow);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ld-need h3{font-size:1.375rem;font-weight:500;line-height:1.25}
.ld-need p{max-width:34ch;margin:0;color:var(--muted);font-size:var(--fs-small);line-height:1.55}

/* Development advisory: four ruled service rows (new-development hub). */
.ld-services{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0 var(--s7);
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:svc;
}
@media (min-width:768px){ .ld-services{grid-template-columns:repeat(2, minmax(0,1fr))} }
.ld-services > li{
  position:relative;
  margin:0;
  padding:24px 0 26px 56px;
  border-top:1px solid var(--rule);
  counter-increment:svc;
}
.ld-services > li::before{
  content:counter(svc, decimal-leading-zero);
  position:absolute;
  top:26px;left:0;
  width:38px;
  padding-top:4px;
  border-top:1px solid var(--accent);
  color:var(--eyebrow);
  font-family:var(--serif);
  font-size:1rem;
  font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}
.ld-services h3{margin:0 0 8px;font-size:1.25rem}
.ld-services p{margin:0;max-width:44ch;font-size:.9375rem;line-height:1.6;color:var(--muted)}

/* --------------------------------------------------------------------------
   Central Florida development pipeline (new-development hub): grouped list,
   one project per row, status line and source. Sits on the band.
   -------------------------------------------------------------------------- */
.ld-pipe-intro{max-width:60ch;margin:0 0 clamp(32px, 4vw, 44px);font-size:var(--fs-lead);line-height:1.6;color:var(--text)}
.ld-pipe-group + .ld-pipe-group{margin-top:clamp(36px, 4.5vw, 48px)}
.ld-pipe-group h3{
  margin:0 0 4px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--eyebrow);
}
.ld-pipeline{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.ld-pipeline > li{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px 32px;
  padding:16px 0 18px;
  border-bottom:1px solid var(--rule);
}
@media (min-width:768px){ .ld-pipeline > li{grid-template-columns:minmax(200px, 300px) minmax(0,1fr)} }
.ld-pipeline .ld-pipe-name{
  display:block;
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.3;
  color:var(--fg);
}
.ld-pipeline .ld-pipe-place{display:block;margin-top:3px;font-size:var(--fs-xs);line-height:1.45;color:var(--muted)}
.ld-pipeline .ld-pipe-status{margin:0;max-width:68ch;font-size:.9375rem;line-height:1.6;color:var(--text)}
.ld-pipeline .ld-pipe-status b{color:var(--fg);font-weight:600}
.ld-stamp{
  display:flex;
  flex-wrap:wrap;
  gap:6px 24px;
  max-width:80ch;
  margin:clamp(32px, 4vw, 44px) 0 0;
  padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:var(--fs-xs);
  line-height:1.55;
  color:var(--muted);
}
.ld-stamp b{color:var(--fg);font-weight:600}
.ld-pipe-more{margin:var(--s5) 0 0;font-size:var(--fs-small)}

/* --------------------------------------------------------------------------
   Closing CTA band: plat linework behind a left scrim; buttons plus the
   principal's number and the brokerage line on the right (a phone link needs
   the brokerage name in the same block).
   -------------------------------------------------------------------------- */
.ld-cta .plat{opacity:.55}
.ld-cta::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(104deg, var(--ink) 0%, rgba(19,41,58,.92) 38%, rgba(19,41,58,.45) 100%);
  pointer-events:none;
}
.ld-cta .cta-band-inner{z-index:1}
.ld-cta .eyebrow{margin:0 0 20px}
.ld-cta h2{max-width:20ch}
.ld-cta-actions{flex:0 1 auto;max-width:100%}
.ld-cta-actions .actions{gap:12px 16px}
.ld-cta .ld-cta-contact{
  max-width:none;
  margin:16px 0 0;
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.5;
}
.ld-cta .ld-cta-contact b{color:var(--fg);font-weight:600}
.ld-cta .ld-cta-actions .brokerage-line{max-width:none;margin:4px 0 0}
@media (max-width:480px){ .ld-cta-actions{flex:1 1 100%} }

/* --------------------------------------------------------------------------
   Windows High Contrast
   -------------------------------------------------------------------------- */
@media (forced-colors:active){
  .ld-cta::after{display:none}
  .ld-list > li::before,.ld-analysis > li::before{forced-color-adjust:none;background:CanvasText}
  .ld-faq summary::before,.ld-faq summary::after{forced-color-adjust:none;background:CanvasText}
  .ld-services > li::before{forced-color-adjust:none;border-top-color:CanvasText}
  .ld-audiences > li,.ld-context{border-color:CanvasText}
}

/* --------------------------------------------------------------------------
   56-commercial.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   56-commercial — /commercial/ hub, the two service pages and the six
   property-type pages (pages/commercial/*). Everything here is scoped to a
   "c-" class that exists only on those pages; the components themselves
   (.card, .listing-card, .tombstone, .survey, .steps, .form, .aside-card,
   .layout-aside, .cta-band) come from 10-components. This file only arranges
   them and adds the few pieces those pages need: the FAQ disclosure, the
   two-audience block, the sourced "Central Florida context" panel and the
   closing CTA band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hub: property-type tiles with line-drawn site-plan glyphs (same idea as the
   homepage tiles; the SVGs are inline in the page).
   -------------------------------------------------------------------------- */
.c-tile .c-glyph{
  width:48px;
  height:48px;
  margin-bottom:22px;
  color:var(--brass-dark);
  stroke-linecap:square;
}
.c-tile h3{margin-bottom:8px;font-size:1.25rem}
.c-tile p{max-width:36ch;color:var(--muted);font-size:var(--fs-small);line-height:1.55}

/* Hub: the two service cards (investment sales / buyer representation). */
.c-service{padding:clamp(28px, 3vw, 40px)}
.c-service .c-kicker{
  margin:0 0 14px;
  color:var(--eyebrow);
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.c-service h3{font-size:clamp(1.5rem, 1.3rem + .6vw, 1.875rem);font-weight:500;line-height:1.15}
.c-service > p{max-width:52ch;margin:0 0 18px;color:var(--text);line-height:1.65}

/* Hub: hairline "Also" line under the two cards (business brokerage). */
.c-svc-more{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  align-items:baseline;
  max-width:none;
  margin:clamp(20px, 2.4vw, 28px) 0 0;
  padding-top:clamp(16px, 2vw, 22px);
  border-top:1px solid var(--rule);
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--muted);
}
.c-svc-more-label{
  color:var(--eyebrow);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Ruled bullet list (used in service cards and "What we analyze"). */
.c-list{margin:0 0 20px;padding:0;list-style:none}
.c-list > li{
  position:relative;
  margin:0 0 10px;
  padding-left:20px;
  font-size:var(--fs-small);
  line-height:1.55;
  color:var(--text);
}
.c-list > li::before{
  content:"";
  position:absolute;
  top:.65em;left:0;
  width:10px;height:1px;
  background:var(--rule-strong);
}
.c-list > li:last-child{margin-bottom:0}

/* Hub: "How a sale runs" survey line under the service cards. */
.c-how{
  margin-top:clamp(40px, 5vw, 64px);
  padding-top:clamp(32px, 4vw, 48px);
  border-top:1px solid var(--rule);
}
.c-how h3{margin:0 0 clamp(28px, 3vw, 36px);font-size:1.375rem;font-weight:600}

/* --------------------------------------------------------------------------
   Service / property-type pages: article column + sticky aside.
   -------------------------------------------------------------------------- */
.c-article .prose > h2:first-of-type{margin-top:1.8em}
.c-article .prose .lead{max-width:none}

/* "Who we represent": two audience panels inside the prose column. */
.c-audiences{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--grid-gap);
  margin:0 0 1.6em;
  padding:0!important;
  list-style:none;
}
@media (min-width:640px){ .c-audiences{grid-template-columns:repeat(2, minmax(0,1fr))} }
.c-audiences > li{
  margin:0;
  padding:22px 24px 24px;
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
}
.c-audiences h3{margin:0 0 8px;font-size:1.125rem;line-height:1.25}
.c-audiences p{margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--muted)}

/* "What we analyze": two columns of ruled bullets from 640px. */
.c-analysis{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px 32px;
  margin:0 0 1.6em;
  padding:0!important;
  list-style:none;
}
@media (min-width:640px){ .c-analysis{grid-template-columns:repeat(2, minmax(0,1fr))} }
.c-analysis > li{
  position:relative;
  margin:0;
  padding-left:20px;
  font-size:.9375rem;
  line-height:1.55;
}
.c-analysis > li::before{
  content:"";
  position:absolute;
  top:.7em;left:0;
  width:10px;height:1px;
  background:var(--accent);
}

/* Sourced market context panel. Every figure carries its source. */
.c-context{
  margin:1.8em 0;
  padding:clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 26px);
  border:1px solid var(--rule);
  border-left:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
}
.c-context h3,.c-context .h3{
  margin:0 0 6px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--eyebrow);
}
.c-context > p{margin:0 0 16px;font-size:var(--fs-small);color:var(--muted)}
.c-context ul{margin:0;padding:0!important;list-style:none}
.c-context li{
  margin:0;
  padding:12px 0;
  border-top:1px solid var(--rule);
  font-size:.9375rem;
  line-height:1.55;
}
.c-context li:last-child{padding-bottom:0}
.c-context b{color:var(--fg);font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.c-context .c-src{
  display:block;
  margin-top:3px;
  font-size:var(--fs-xs);
  line-height:1.45;
  color:var(--muted);
}
.c-context .c-src a{color:inherit}

/* FAQ: details/summary. The marker is a plus that turns into a minus.
   Markup: <div class="faq c-faq"><details><summary>…</summary><div class="faq-body">…</div></details>…</div> */
.c-faq{
  margin:0;
  border-top:1px solid var(--rule);
}
.c-faq details{border-bottom:1px solid var(--rule)}
.c-faq summary{
  position:relative;
  padding:18px 44px 18px 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.3;
  color:var(--fg);
}
.c-faq summary::-webkit-details-marker{display:none}
.c-faq summary::marker{content:""}
.c-faq summary:hover{color:var(--link-hover)}
.c-faq summary::before,
.c-faq summary::after{
  content:"";
  position:absolute;
  top:50%;
  right:12px;
  width:14px;height:2px;
  margin-top:-1px;
  background:var(--accent);
  transition:transform var(--t-med) var(--ease);
}
.c-faq summary::after{transform:rotate(90deg)}
.c-faq details[open] summary::after{transform:rotate(0)}
.c-faq summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.c-faq .faq-body{padding:0 0 22px}
.c-faq .faq-body > p{margin:0 0 .8em;font-size:1rem;line-height:1.65}
.c-faq .faq-body > p:last-child{margin-bottom:0}
.c-faq .faq-body ul{margin:.4em 0 .8em}

/* Property-type pages: "What drives value" ruled list inside the prose column
   (reuses .c-list) and the single-tombstone "Related transaction" strip. */
.c-article .prose .c-list{margin:0 0 1.6em}
.c-article .prose .c-list > li{font-size:1rem;line-height:1.6}
.c-article .prose .c-list > li b{color:var(--fg);font-weight:600}
.c-tx-single .tombstone-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .c-tx-single .tombstone-grid{grid-template-columns:minmax(0,420px)} }

/* Aside: contact card + section navigation. */
.c-aside .aside-card > h2{margin-bottom:6px}
.c-aside .aside-card > p{margin:0 0 6px}
.c-aside .aside-card .contact-block > .brokerage-line{margin-top:var(--s4)}
.c-aside .aside-card .btn{width:100%}
.c-aside .aside-links{margin-top:var(--s6)}

/* --------------------------------------------------------------------------
   Inline request form band (broker opinion of value / acquisition requirement).
   -------------------------------------------------------------------------- */
.c-form-grid{align-items:start;row-gap:clamp(32px, 4vw, 48px)}
.c-form-intro p{max-width:52ch}
.c-form-intro .notice{margin-top:var(--s5)}
.c-form-card .form-status{margin-top:0}

/* --------------------------------------------------------------------------
   Related listings / transactions / guides
   -------------------------------------------------------------------------- */
/* Card that fills the last slot of a listing grid: "tell us what you need". */
.c-need{
  justify-content:center;
  background:var(--band);
}
.c-need .c-kicker{
  margin:0 0 12px;
  color:var(--eyebrow);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.c-need h3{font-size:1.375rem;font-weight:500;line-height:1.25}
.c-need p{max-width:34ch;margin:0;color:var(--muted);font-size:var(--fs-small);line-height:1.55}

.c-tx-note{
  max-width:78ch;
  margin:var(--s6) 0 0;
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.6;
}

.c-guide-cat{
  margin:0 0 14px;
  color:var(--eyebrow);
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.c-guide h3{font-size:1.375rem;font-weight:500;line-height:1.25}
.c-guide p{margin:12px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:1.55}

/* --------------------------------------------------------------------------
   Closing CTA band: plat linework behind a left scrim; buttons plus the
   brokerage line on the right (the phone link needs it in the same block).
   -------------------------------------------------------------------------- */
.c-cta .plat{opacity:.55}
.c-cta::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(104deg, var(--ink) 0%, rgba(19,41,58,.92) 38%, rgba(19,41,58,.45) 100%);
  pointer-events:none;
}
.c-cta .cta-band-inner{z-index:1}
.c-cta .eyebrow{margin:0 0 20px}
.c-cta h2{max-width:20ch}
.c-cta-actions{flex:0 1 auto;max-width:100%}
.c-cta-actions .actions{gap:12px 16px}
.c-cta-contact{
  margin:16px 0 0!important;
  max-width:none!important;
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.5;
}
.c-cta-contact b{color:var(--fg);font-weight:600}
.c-cta-actions .brokerage-line{margin-top:4px!important}
@media (max-width:480px){ .c-cta-actions{flex:1 1 100%} }

/* --------------------------------------------------------------------------
   Windows High Contrast
   -------------------------------------------------------------------------- */
@media (forced-colors:active){
  .c-cta::after{display:none}
  .c-list > li::before,.c-analysis > li::before{forced-color-adjust:none;background:CanvasText}
  .c-faq summary::before,.c-faq summary::after{forced-color-adjust:none;background:CanvasText}
  .c-audiences > li,.c-context{border-color:CanvasText}
}

/* --------------------------------------------------------------------------
   60-investors.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   60-investors — /investors/* (hub, 1031, calculator, DSTs, cost segregation)
   and /insights/* (index + guides). Everything here is prefixed inv-, x1031-
   or gd- so it cannot collide with other page groups. Shared components
   (.page-hero, .breadcrumb, .cta-band, .card, .survey, .notice, .prose,
   .steps, .field) come from 10-components; this file only arranges them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Closing CTA band (every investors/insights page): copy left, buttons and
   the principal's number + brokerage line right. Plat linework behind.
   -------------------------------------------------------------------------- */
.inv-cta .plat{opacity:.5}
.inv-cta .cta-side{display:flex;flex-direction:column;gap:14px;max-width:100%}
.inv-cta .cta-contact{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--text)}
.inv-cta .cta-contact b{color:var(--fg);font-weight:600}
.inv-cta .brokerage-line{margin:0}
@media (min-width:1024px){
  .inv-cta .cta-side{flex:0 1 460px}
}

/* --------------------------------------------------------------------------
   Two-column section: copy (cols 1–6) beside a ruled panel (cols 8–12).
   -------------------------------------------------------------------------- */
.inv-split{align-items:start;row-gap:clamp(36px, 4.5vw, 48px)}
.inv-body{max-width:58ch;margin:var(--s5) 0 0;font-size:var(--fs-lead);line-height:1.6}
.inv-body + .inv-body{margin-top:1em;font-size:1.0625rem;line-height:1.7}
.inv-copy .link-arrow{margin-top:clamp(24px, 3vw, 32px)}

/* Ruled panel: a titled list of audiences / rules / notes. */
.inv-panel{
  padding:clamp(22px, 2.6vw, 30px);
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
}
.inv-panel-title{
  margin:0 0 8px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.inv-rows{margin:0;padding:0;list-style:none}
.inv-rows > li{margin:0;padding:16px 0;border-top:1px solid var(--rule)}
.inv-rows > li:first-child{border-top:0;padding-top:8px}
.inv-rows b{
  display:block;
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.3;
  color:var(--fg);
}
.inv-rows p{margin:4px 0 0;font-size:var(--fs-small);line-height:1.55;color:var(--muted)}
.inv-rows .link-arrow{margin-top:8px;font-size:var(--fs-xs)}

/* --------------------------------------------------------------------------
   Topic cards (hub + related links): category eyebrow, serif title, dek.
   -------------------------------------------------------------------------- */
.inv-cat{
  margin:0 0 14px;
  color:var(--eyebrow);
  font-size:var(--fs-label);
  font-weight:600;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.inv-card h3{font-size:1.375rem;font-weight:500;line-height:1.25}
.inv-card p{margin:12px 0 0;color:var(--muted);font-size:var(--fs-small);line-height:1.55}
.inv-card .inv-meta{margin-top:14px;font-size:var(--fs-xs);color:var(--muted)}

/* --------------------------------------------------------------------------
   Timeline block (hub, 1031 page): survey line + the identification rules
   as three ruled cells with big serif figures.
   -------------------------------------------------------------------------- */
.inv-timeline{margin-top:clamp(32px, 4vw, 44px)}
.inv-timeline-note{max-width:70ch;margin:clamp(24px, 3vw, 32px) 0 0;font-size:var(--fs-small);line-height:1.6;color:var(--muted)}
.inv-rules{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--grid-gap);
  margin:clamp(32px, 4vw, 44px) 0 0;
  padding:0;
  list-style:none;
}
@media (min-width:640px){ .inv-rules{grid-template-columns:repeat(3, minmax(0,1fr))} }
.inv-rules > li{
  margin:0;
  padding:22px 24px 24px;
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
}
.inv-rules .rule-fig{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--fg);
}
.inv-rules .rule-name{display:block;margin-top:10px;font-weight:600;color:var(--fg)}
.inv-rules p{margin:8px 0 0;font-size:var(--fs-small);line-height:1.55;color:var(--muted)}

/* --------------------------------------------------------------------------
   Option grid ("Is an exchange right for you?"): 2-up cards with a serif
   title and one paragraph.
   -------------------------------------------------------------------------- */
.inv-options{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--grid-gap);
  margin:clamp(28px, 3.5vw, 40px) 0 0;
  padding:0;
  list-style:none;
}
@media (min-width:768px){ .inv-options{grid-template-columns:repeat(2, minmax(0,1fr))} }
.inv-options > li{
  margin:0;
  padding:clamp(22px, 2.6vw, 30px);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--surface);
}
.inv-options h3{margin:0 0 8px;font-size:1.25rem}
.inv-options p{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--muted)}
.inv-options p + p{margin-top:.6em}

/* --------------------------------------------------------------------------
   Long-form sections on service pages: prose column with a stable width.
   -------------------------------------------------------------------------- */
.inv-prose{max-width:68ch}
.inv-prose .lead{margin-bottom:1.2em}
.inv-section-title{max-width:24ch;margin:0 0 clamp(20px, 2.4vw, 28px)}
.inv-section-title + .section-intro{margin:0 0 clamp(24px, 3vw, 32px)}

/* Definition rows: term left, definition right (what changes in a study). */
.inv-defs{margin:clamp(24px, 3vw, 32px) 0 0;border-top:1px solid var(--rule)}
.inv-defs > div{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px 32px;
  padding:16px 0;
  border-bottom:1px solid var(--rule);
}
@media (min-width:640px){ .inv-defs > div{grid-template-columns:minmax(140px, 220px) minmax(0,1fr)} }
.inv-defs dt{font-family:var(--serif);font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--fg)}
.inv-defs dd{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--text)}

/* --------------------------------------------------------------------------
   "What we can and cannot do" (DST page) — two ruled columns.
   -------------------------------------------------------------------------- */
.inv-cancan{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--grid-gap);
  margin:clamp(28px, 3.5vw, 40px) 0 0;
}
@media (min-width:768px){ .inv-cancan{grid-template-columns:repeat(2, minmax(0,1fr))} }
.inv-cancan > div{
  padding:clamp(22px, 2.6vw, 30px);
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
}
.inv-cancan > .is-not{border-top-color:var(--rule-strong)}
.inv-cancan h3{margin:0 0 14px;font-size:1.25rem}
.inv-cancan ul{margin:0;padding:0;list-style:none}
.inv-cancan li{position:relative;margin:0 0 10px;padding-left:26px;font-size:var(--fs-small);line-height:1.55;color:var(--text)}
.inv-cancan li:last-child{margin-bottom:0}
.inv-cancan li::before{
  content:"";
  position:absolute;
  top:.55em;left:0;
  width:12px;height:2px;
  background:var(--accent);
}
.inv-cancan .is-not li::before{background:var(--rule-strong);transform:rotate(-45deg)}
.inv-cancan .is-not li::after{
  content:"";
  position:absolute;
  top:.55em;left:0;
  width:12px;height:2px;
  background:var(--rule-strong);
  transform:rotate(45deg);
}

/* --------------------------------------------------------------------------
   FAQ — native details/summary, ruled rows, +/– indicator drawn in CSS.
   Markup: <div class="faq inv-faq"><details><summary>…</summary><div class="faq-body">…</div></details>…</div>
   -------------------------------------------------------------------------- */
.inv-faq{max-width:76ch;margin:clamp(24px, 3vw, 32px) 0 0;border-top:1px solid var(--rule)}
.inv-faq details{border-bottom:1px solid var(--rule)}
.inv-faq summary{
  position:relative;
  padding:18px 44px 18px 0;
  list-style:none;
  cursor:pointer;
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.3;
  color:var(--fg);
  transition:color var(--t-fast) var(--ease);
}
.inv-faq summary::-webkit-details-marker{display:none}
.inv-faq summary::marker{content:""}
.inv-faq summary::before,
.inv-faq summary::after{
  content:"";
  position:absolute;
  top:50%;right:6px;
  width:14px;height:2px;
  background:var(--accent);
  transform:translateY(-50%);
  transition:transform var(--t-med) var(--ease);
}
.inv-faq summary::after{transform:translateY(-50%) rotate(90deg)}
.inv-faq details[open] summary::after{transform:translateY(-50%) rotate(0deg)}
.inv-faq summary:hover{color:var(--link-hover)}
.inv-faq summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.inv-faq .faq-body{max-width:68ch;padding:0 0 22px;font-size:1rem;line-height:1.7;color:var(--text)}
.inv-faq .faq-body p{margin:0 0 .8em}
.inv-faq .faq-body p:last-child{margin-bottom:0}
.inv-faq .faq-body ul{margin:0 0 .8em;padding-left:1.2em}

/* --------------------------------------------------------------------------
   Full-page 1031 deadline calculator (/investors/1031-calculator.html).
   Not a <form>: nothing is submitted, and the print stylesheet drops forms.
   -------------------------------------------------------------------------- */
.x1031-grid{align-items:start;row-gap:clamp(36px, 4.5vw, 48px)}
.x1031{
  padding:clamp(24px, 3vw, 40px);
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
}
.x1031-title{margin:0 0 6px;font-size:1.5rem;font-weight:600}
.x1031-sub{max-width:56ch;margin:0 0 clamp(22px, 2.6vw, 30px);font-size:var(--fs-small);line-height:1.55;color:var(--muted)}
.x1031-controls{display:grid;gap:20px;max-width:560px}
.x1031-controls .field input[type="date"]{max-width:300px}
.x1031-controls .choices label{align-items:flex-start;line-height:1.45}
.x1031-controls .choices input{margin-top:3px}
.x1031-out{margin:clamp(24px, 3vw, 32px) 0 0;border-top:1px solid var(--rule)}
.x1031-out > div{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px 32px;
  padding:18px 0;
  border-bottom:1px solid var(--rule);
}
@media (min-width:640px){
  .x1031-out > div{grid-template-columns:minmax(150px, 220px) minmax(0,1fr);align-items:baseline}
}
.x1031-out dt{
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  font-stretch:87.5%;
  line-height:1.4;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.x1031-out dt b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.1;color:var(--fg);font-variant-numeric:lining-nums tabular-nums}
.x1031-out dd{margin:0}
.x1031-value{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.005em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--fg);
}
.x1031-value.is-placeholder{font-family:var(--sans);font-size:.9375rem;color:var(--muted)}
.x1031-rel{display:block;margin-top:4px;font-size:var(--fs-xs);line-height:1.45;color:var(--muted)}
.x1031-rel:empty{display:none}
.x1031-rel .is-weekend{color:var(--eyebrow);font-weight:600}
.x1031-error{margin:14px 0 0;color:var(--err-fg);font-size:var(--fs-xs);font-weight:600}
.x1031-earlier{margin-top:var(--s5)}
.x1031-actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin:clamp(22px, 2.6vw, 28px) 0 0}
.x1031-static{margin:0;font-size:1rem;line-height:1.65}
.x1031-note{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:var(--fs-xs);
  line-height:1.55;
  color:var(--muted);
}
.x1031-stamp{display:none}

/* Aside: how the deadlines work + contact. */
.x1031-aside .inv-panel + .inv-panel{margin-top:var(--grid-gap)}
.x1031-aside .contact-list a{font-size:1.0625rem}
.x1031-aside .brokerage-line{margin-top:14px}

@media print{
  .x1031-controls,.x1031-actions,.x1031-error{display:none!important}
  .x1031{border:1px solid #999!important;border-top:2px solid #000!important}
  .x1031-stamp{display:block;margin:12pt 0 0;font-size:9pt;color:#333}
  .x1031-aside .inv-panel{border:1px solid #999!important}
}

/* --------------------------------------------------------------------------
   Insights index — guide cards with a meta line.
   -------------------------------------------------------------------------- */
.gd-index-intro{max-width:60ch;margin:0 0 clamp(36px, 4.5vw, 48px);font-size:var(--fs-lead);line-height:1.6;color:var(--text)}
.gd-card .inv-meta{margin-top:auto;padding-top:18px}
.gd-card .card-go{margin-top:12px;padding-top:0}
.gd-more{
  max-width:70ch;
  margin:clamp(36px, 4.5vw, 48px) 0 0;
  padding-top:24px;
  border-top:1px solid var(--rule);
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--muted);
}

/* --------------------------------------------------------------------------
   Guide pages — article meta in the hero, key takeaways, sources, tables.
   -------------------------------------------------------------------------- */
.gd-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin:var(--s5) 0 0;
  padding:0;
  list-style:none;
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.5;
}
.gd-meta b{color:var(--fg);font-weight:600}
.gd-article{padding-block:clamp(48px, 6vw, 80px) var(--section-y)}
.gd-takeaways{
  margin:0 0 clamp(36px, 4.5vw, 48px);
  padding:clamp(22px, 2.6vw, 30px);
  border:1px solid var(--rule);
  border-left:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--band);
}
.gd-takeaways h2{
  margin:0 0 12px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--eyebrow);
}
.gd-takeaways ul{margin:0;padding-left:1.15em}
.gd-takeaways li{margin:0 0 8px;font-size:.9375rem;line-height:1.55;color:var(--text)}
.gd-takeaways li:last-child{margin-bottom:0}
.gd-takeaways li::marker{color:var(--eyebrow)}

/* Numbered source references inside the prose, and the source list. */
.prose .src{font-size:.78em;font-weight:600;vertical-align:super;line-height:0;text-decoration:none;color:var(--eyebrow)}
.prose .src:hover{text-decoration:underline}
/* Inside the small-type pipeline list .78em would compound below 11px. */
.gd-pipeline .src{font-size:.75rem}
.gd-sources{margin-top:clamp(36px, 4.5vw, 48px);padding-top:24px;border-top:1px solid var(--rule)}
.gd-sources h2{margin:0 0 12px;font-size:1.25rem}
.gd-sources ol{margin:0;padding-left:1.4em;font-size:var(--fs-small);line-height:1.6;color:var(--muted)}
.gd-sources li{margin:0 0 8px;overflow-wrap:anywhere}
.gd-sources a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em}
.gd-sources a:hover{color:var(--link-hover)}

/* Data table (scrolls sideways on narrow screens instead of breaking the page). */
.gd-table-scroll{margin:1.4em 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gd-table{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--fs-small);line-height:1.45}
.gd-table caption{margin-bottom:10px;text-align:left;font-family:var(--serif);font-size:1.125rem;font-weight:600;color:var(--fg)}
.gd-table th,.gd-table td{padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.gd-table thead th{
  border-bottom:1px solid var(--rule-strong);
  color:var(--muted);
  font-size:var(--fs-label);
  font-weight:600;
  font-stretch:87.5%;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.gd-table td.num,.gd-table th.num{text-align:right;padding-right:0;font-variant-numeric:tabular-nums lining-nums}
.gd-table tbody th{font-weight:600;color:var(--fg)}
.gd-table tfoot td{border-bottom:0;padding-top:8px;font-size:var(--fs-xs);color:var(--muted)}

/* Related guides / next steps under an article. */
.gd-related{margin-top:clamp(36px, 4.5vw, 48px);padding-top:24px;border-top:1px solid var(--rule)}
.gd-related h2{margin:0 0 14px;font-size:1.25rem}
.gd-related ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.gd-related li{margin:0}
.gd-related .link-arrow{font-family:var(--serif);font-size:1.0625rem;letter-spacing:-.005em;text-transform:none}

/* Related transactions inside a guide: two tombstones in the text column. */
.gd-tx{margin-top:clamp(36px, 4.5vw, 48px);padding-top:24px;border-top:1px solid var(--rule)}
.gd-tx h2{margin:0 0 18px;font-size:1.25rem}
@media (min-width:640px){ .gd-tx .tombstone-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
.gd-tx-note{margin:16px 0 0;font-size:var(--fs-xs);line-height:1.5;color:var(--muted)}

/* Pipeline guide: status list, one item per project. */
.gd-pipeline{margin:0 0 1.4em;padding:0;list-style:none;border-top:1px solid var(--rule)}
.gd-pipeline > li{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px 28px;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}
@media (min-width:640px){ .gd-pipeline > li{grid-template-columns:minmax(160px, 230px) minmax(0,1fr)} }
.gd-pipeline b{font-family:var(--serif);font-size:1.0625rem;font-weight:600;line-height:1.3;color:var(--fg)}
.gd-pipeline span{font-size:var(--fs-small);line-height:1.55;color:var(--text)}
.gd-pipeline .gd-status{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--muted)}

/* --------------------------------------------------------------------------
   Windows High Contrast
   -------------------------------------------------------------------------- */
@media (forced-colors:active){
  .inv-faq summary::before,.inv-faq summary::after,
  .inv-cancan li::before,.inv-cancan li::after{forced-color-adjust:none;background:CanvasText}
  .inv-panel,.inv-rules > li,.inv-options > li,.inv-cancan > div,.x1031,.gd-takeaways{border:1px solid CanvasText}
}

/* --------------------------------------------------------------------------
   65-people.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   65-people — /team/ (index + the two profiles), /markets/, /residential/
   and /contact/. Prefixes: pp- (people), mk- (markets), rs- (residential),
   ct- (contact), so nothing here can collide with another page group.
   Shared components (.page-hero, .breadcrumb, .cta-band, .layout-aside,
   .aside-card, .aside-links, .tombstone, .cred, .chip, .form, .map-ph,
   .contact-list, .prose) come from 10-components; this file only arranges
   them and adds the few pieces these pages need.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Closing CTA band (all five pages): copy left; buttons, the principal's
   number and the brokerage line right, in ONE block (rule 61J2-10.025).
   -------------------------------------------------------------------------- */
.pp-cta .plat{opacity:.45}
.pp-cta .eyebrow{margin:0 0 20px}
.pp-cta h2{max-width:22ch}
.pp-cta .cta-side{flex:0 1 auto;max-width:100%}
.pp-cta .cta-contact{margin:16px 0 4px;max-width:none;color:var(--muted);font-size:var(--fs-small);line-height:1.5}
.pp-cta .cta-contact b{color:var(--fg);font-weight:600}
.pp-cta .brokerage-line{margin:0;max-width:none}
@media (max-width:480px){ .pp-cta .cta-side{flex-basis:100%} }

/* --------------------------------------------------------------------------
   Profile hero: name + suffix, role line, lead; portrait beside the copy
   from 1024px (CBRE profile-header pattern).
   -------------------------------------------------------------------------- */
.pp-role{
  margin:var(--s4) 0 0;
  color:var(--eyebrow);
  font-family:var(--sans);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pp-hero-portrait{margin:clamp(28px, 4vw, 40px) 0 0}
.pp-hero-portrait .ph{width:100%;max-width:240px;border:1px solid var(--rule)}
@media (min-width:1024px){
  .pp-hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:var(--s8);align-items:end}
  .pp-hero-portrait{margin:0}
  .pp-hero-portrait .ph{max-width:320px}
}

/* --------------------------------------------------------------------------
   Team index: two large profile cards (4:5 portrait beside the text).
   -------------------------------------------------------------------------- */
.pp-card{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(24px, 3vw, 32px);
  align-items:start;
  padding:clamp(24px, 3vw, 40px);
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
}
.pp-card + .pp-card{margin-top:var(--grid-gap)}
@media (min-width:768px){
  .pp-card{grid-template-columns:minmax(220px, 340px) minmax(0,1fr);gap:clamp(32px, 4vw, 56px)}
}
.pp-card .ph{max-width:380px}
.pp-name{margin:0;font-size:clamp(1.625rem, 1.3rem + 1vw, 2.125rem);font-weight:500;line-height:1.1}
.pp-title{
  margin:8px 0 0;
  color:var(--eyebrow);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.pp-lines{max-width:62ch;margin:clamp(20px, 2.4vw, 26px) 0 0;padding:0;list-style:none}
.pp-lines > li{
  position:relative;
  margin:0 0 12px;
  padding-left:20px;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--text);
}
.pp-lines > li::before{content:"";position:absolute;top:.65em;left:0;width:10px;height:1px;background:var(--rule-strong)}
.pp-lines > li:last-child{margin-bottom:0}
.pp-contact{margin:clamp(20px, 2.4vw, 28px) 0 24px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.pp-contact .contact-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px}
@media (min-width:560px){ .pp-contact .contact-list{grid-template-columns:auto minmax(0,1fr)} }
.pp-contact .contact-list > li{padding:12px 0}
.pp-contact .contact-list a{font-size:1.0625rem}
.pp-contact .brokerage-line{margin-top:14px}
.pp-card-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0}

/* "How we work": three ruled panels. */
.pp-how{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--grid-gap);
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:pphow;
}
@media (min-width:768px){ .pp-how{grid-template-columns:repeat(3, minmax(0,1fr))} }
.pp-how > li{
  margin:0;
  padding:clamp(22px, 2.6vw, 30px);
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
  counter-increment:pphow;
}
.pp-how > li::before{
  content:counter(pphow, decimal-leading-zero);
  display:block;
  margin:0 0 14px;
  color:var(--eyebrow);
  font-family:var(--serif);
  font-size:1rem;
  font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}
.pp-how h3{margin:0 0 10px;font-size:1.25rem}
.pp-how p{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--muted)}

/* Designations row (CCIM / ALC / MSRE / MiCP) and credential chips. */
.pp-cred-row,
.pp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.pp-cred-row > li,
.pp-chips > li{margin:0;display:flex}
.pp-cred-row .cred{max-width:min(40ch, 100%)}
.pp-chips .cred{max-width:min(46ch, 100%)}
.pp-cred-note{max-width:72ch;margin:16px 0 0;color:var(--muted);font-size:var(--fs-xs);line-height:1.5}

/* "Community & industry": four compact, icon-free items divided by hairlines
   (one column, two from 640px, four from 1024px), then the memberships line. */
.pp-community{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--rule);
}
.pp-community > li{margin:0;padding:clamp(20px, 2.4vw, 28px) 0;border-bottom:1px solid var(--rule)}
.pp-community h3{margin:0 0 8px;font-size:1.125rem;font-weight:500;line-height:1.25}
.pp-community p{max-width:52ch;margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--muted)}
@media (min-width:640px){
  .pp-community{grid-template-columns:repeat(2, minmax(0,1fr));column-gap:clamp(28px, 4vw, 48px)}
}
@media (min-width:1024px){
  .pp-community{grid-template-columns:repeat(4, minmax(0,1fr));column-gap:clamp(28px, 3vw, 40px)}
  .pp-community > li{padding-right:8px}
}
.pp-memberships{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  align-items:baseline;
  max-width:none;
  margin:clamp(20px, 2.4vw, 28px) 0 0;
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--text);
}
.pp-memberships-label{
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--eyebrow);
}

/* --------------------------------------------------------------------------
   Profile pages: bio column (prose + ruled sections) beside the contact card.
   -------------------------------------------------------------------------- */
.pp-profile{padding-block:clamp(48px, 6vw, 80px) var(--section-y)}
.pp-bio .prose > h2:first-child{margin-top:0}
.pp-section{margin-top:clamp(40px, 5vw, 56px);padding-top:clamp(28px, 3.5vw, 40px);border-top:1px solid var(--rule)}
.pp-section > h2{
  max-width:none;
  margin:0 0 clamp(18px, 2.4vw, 24px);
  font-size:clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
  line-height:1.15;
}
.pp-section > .section-intro{margin:-8px 0 clamp(18px, 2.4vw, 24px);font-size:.9375rem}
@media (min-width:1024px){ .pp-tx{grid-template-columns:repeat(2, minmax(0,1fr))} }
.pp-tx-note{max-width:78ch;margin:var(--s5) 0 0;color:var(--muted);font-size:var(--fs-xs);line-height:1.6}

/* Citation block (published research). */
.pp-cite{
  margin:0;
  padding:18px 22px;
  border:1px solid var(--rule);
  border-left:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
  font-size:.9375rem;
  line-height:1.6;
}
.pp-cite cite{font-style:italic}
.pp-cite a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em;overflow-wrap:anywhere}
.pp-cite a:hover{color:var(--link-hover)}

/* "In the press": outlet label left, note right. */
.pp-press{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.pp-press > li{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px 28px;
  margin:0;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}
@media (min-width:640px){ .pp-press > li{grid-template-columns:minmax(150px, 210px) minmax(0,1fr)} }
.pp-press-src{
  padding-top:.25em;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  font-stretch:87.5%;
  line-height:1.5;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.pp-press p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--text)}
.pp-press .pp-press-date{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-xs)}

/* Contact card in the aside. */
.pp-aside .aside-card > h2{margin-bottom:6px}
.pp-aside .aside-card > p{margin:0 0 6px}
.pp-aside .contact-list > li:first-child{padding-top:6px;border-top:0}
.pp-aside .contact-list a{font-size:1.0625rem}
.pp-aside .aside-card > .brokerage-line{margin-top:var(--s4)}
.pp-vcard{margin-top:16px;font-size:var(--fs-small)}
.pp-aside .aside-card .btn{width:100%}
.pp-aside .aside-links{margin-top:var(--s6)}

/* --------------------------------------------------------------------------
   Markets: county chips, then one ruled region block per market with the
   copy left (cols 1–5) and sourced statistics + pipeline right (cols 7–12).
   -------------------------------------------------------------------------- */
.mk-intro{max-width:64ch;margin:0 0 clamp(28px, 3.5vw, 36px);font-size:var(--fs-lead);line-height:1.6;color:var(--text)}
.mk-county-list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.mk-county-list > li{margin:0}
.mk-county-list .chip{font-size:var(--fs-small);font-weight:600}
.mk-statewide{max-width:64ch;margin:var(--s5) 0 0;color:var(--muted);font-size:.9375rem;line-height:1.6}

.mk-region{padding-block:clamp(48px, 6vw, 80px)}
.mk-region + .mk-region{border-top:1px solid var(--rule)}
.mk-grid{align-items:start;row-gap:clamp(32px, 4vw, 44px)}
.mk-copy h2{margin:0 0 14px}
.mk-copy .mk-counties{
  margin:0 0 18px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--eyebrow);
}
.mk-copy p{max-width:50ch;line-height:1.7}
.mk-copy .link-arrow{margin-top:20px}

.mk-stats{margin:0;padding:0;list-style:none}
.mk-stats > li{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px 28px;
  margin:0;
  padding:clamp(18px, 2.2vw, 24px) 0;
  border-top:1px solid var(--rule);
}
.mk-stats > li:last-child{border-bottom:1px solid var(--rule)}
@media (min-width:560px){ .mk-stats > li{grid-template-columns:minmax(120px, 180px) minmax(0,1fr);align-items:baseline} }
.mk-fig{
  font-family:var(--serif);
  font-size:clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.015em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--fg);
}
.mk-what{font-size:.9375rem;line-height:1.5;color:var(--text)}
.mk-src{display:block;margin-top:3px;font-size:var(--fs-xs);line-height:1.45;color:var(--muted)}
.mk-src a{color:inherit;text-underline-offset:.2em}
.mk-src a:hover{color:var(--link-hover)}

.mk-pipe-title{
  margin:clamp(28px, 3.5vw, 36px) 0 10px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--eyebrow);
}
.mk-pipeline{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.mk-pipeline > li{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px 28px;
  margin:0;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}
@media (min-width:640px){ .mk-pipeline > li{grid-template-columns:minmax(150px, 210px) minmax(0,1fr)} }
.mk-pipeline b{font-family:var(--serif);font-size:1.0625rem;font-weight:600;line-height:1.3;color:var(--fg)}
.mk-pipeline .mk-what{display:block}

.mk-sources h2{margin:0 0 12px;font-size:1.25rem}
.mk-sources ol{margin:0;padding-left:1.4em;font-size:var(--fs-small);line-height:1.6;color:var(--muted)}
.mk-sources li{margin:0 0 8px;overflow-wrap:anywhere}
.mk-sources a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em}
.mk-sources a:hover{color:var(--link-hover)}
.mk-note{max-width:80ch;margin:var(--s5) 0 0;color:var(--muted);font-size:var(--fs-xs);line-height:1.55}
.mk-related{display:flex;flex-wrap:wrap;gap:14px 40px;margin:clamp(28px, 3.5vw, 36px) 0 0;padding-top:24px;border-top:1px solid var(--rule)}

/* --------------------------------------------------------------------------
   Residential: link-out panel, short form, contact block, Equal Housing line.
   -------------------------------------------------------------------------- */
.rs-grid{align-items:start;row-gap:clamp(32px, 4vw, 44px)}
.rs-panel{
  padding:clamp(24px, 3vw, 40px);
  border:1px solid var(--rule);
  border-top:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--surface);
}
.rs-panel h2{max-width:none;margin:0 0 12px;font-size:clamp(1.5rem, 1.3rem + .8vw, 1.875rem);line-height:1.15}
.rs-panel > p{max-width:54ch}
.rs-panel .actions{margin-top:clamp(20px, 2.4vw, 26px)}
.rs-panel .btn .ext{display:inline-block;margin-left:2px}
.rs-form{
  padding:clamp(24px, 3vw, 40px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
}
.rs-form h2{max-width:none;margin:0 0 8px;font-size:1.5rem;line-height:1.2}
.rs-form > p{max-width:52ch;margin:0 0 clamp(20px, 2.4vw, 26px);color:var(--muted);font-size:.9375rem}
.rs-contact h2{max-width:none;margin:0 0 6px;font-size:1.375rem;font-weight:600;line-height:1.2}
.rs-contact > p{max-width:48ch;margin:0 0 8px;color:var(--muted);font-size:.9375rem}
.rs-contact .contact-list a{font-size:1.0625rem}
.rs-eho{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin:clamp(28px, 3.5vw, 40px) 0 0;
  padding-top:24px;
  border-top:1px solid var(--rule);
}
.rs-eho .ph-icon{flex:none;width:56px;height:56px;margin-top:2px}
.rs-eho p{max-width:70ch;margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--muted)}
.rs-eho b{color:var(--fg);font-weight:600}

/* --------------------------------------------------------------------------
   Contact: the full form (cols 1–7) beside the office block, hours and the
   click-to-load map (cols 9–12).
   -------------------------------------------------------------------------- */
.ct-grid{align-items:start;row-gap:clamp(40px, 5vw, 56px)}
.ct-form-card{
  padding:clamp(24px, 3vw, 40px);
  border:1px solid var(--line);
  border-top:1px solid var(--brass);
  border-radius:var(--radius);
  background:var(--white);
}
.ct-form-card h2{max-width:none;margin:0 0 8px;font-size:clamp(1.5rem, 1.3rem + .8vw, 1.875rem);line-height:1.15}
.ct-form-card > p{max-width:56ch;margin:0 0 clamp(22px, 2.6vw, 28px);color:var(--muted);font-size:.9375rem}
.ct-help{margin-top:clamp(28px, 3.5vw, 40px);padding-top:24px;border-top:1px solid var(--rule)}
.ct-help h3{
  margin:0 0 10px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--eyebrow);
}
.ct-help ul{margin:0;padding:0;list-style:none}
.ct-help li{position:relative;margin:0 0 8px;padding-left:20px;font-size:var(--fs-small);line-height:1.55;color:var(--text)}
.ct-help li::before{content:"";position:absolute;top:.65em;left:0;width:10px;height:1px;background:var(--accent)}
.ct-help li:last-child{margin-bottom:0}

.ct-office h2{max-width:none;margin:0 0 4px;font-size:1.375rem;font-weight:600;line-height:1.2}
.ct-office > p{max-width:44ch;margin:0 0 6px;color:var(--muted);font-size:.9375rem}
.ct-office .contact-list a,.ct-office .contact-list .val{font-size:1.0625rem}
.ct-hours{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rule);font-size:.9375rem;line-height:1.6}
.ct-hours b{color:var(--fg);font-weight:600}
.ct-map{margin-top:clamp(24px, 3vw, 32px)}
.ct-map .map-ph{aspect-ratio:4/3}
.ct-map .map-ph p{font-size:var(--fs-small)}
.ct-map-link{margin:0!important;font-size:var(--fs-xs)!important}
.ct-map-link a{color:var(--ink);font-weight:600}
@media (min-width:1024px){ .ct-office{padding-top:6px} }

/* --------------------------------------------------------------------------
   Windows High Contrast
   -------------------------------------------------------------------------- */
@media (forced-colors:active){
  .pp-lines > li::before,.ct-help li::before{forced-color-adjust:none;background:CanvasText}
  .pp-card,.pp-how > li,.pp-cite,.rs-panel,.rs-form,.ct-form-card{border:1px solid CanvasText}
}

/* --------------------------------------------------------------------------
   70-legal.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   70-legal — privacy-policy.html, terms.html, accessibility.html
   Long-form policy pages: page-hero + "On this page" jump list + .prose, a
   boxed contact block, the Equal Housing statement and the closing CTA band.
   Everything else comes from the design system (10-components).
   ========================================================================== */

/* Effective-date line under the hero lead. */
.legal-meta{margin:var(--s5) 0 0;color:var(--muted);font-size:var(--fs-small);line-height:1.5}
.legal-meta b{color:var(--fg);font-weight:600}

/* "On this page" jump list: ruled block above the prose, two columns >=640px. */
.legal-toc{margin:0 0 var(--s7);padding:var(--s5) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.legal-toc-title{
  margin:0 0 10px;
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.legal-toc ol{margin:0;padding:0;list-style:none;column-gap:var(--s6)}
@media (min-width:640px){ .legal-toc ol{columns:2} }
.legal-toc li{-webkit-column-break-inside:avoid;break-inside:avoid;margin:0;padding:5px 0;font-size:.9375rem;line-height:1.4}
.legal-toc a{display:inline-flex;align-items:baseline;gap:10px;color:var(--fg);font-weight:500;text-decoration:none}
.legal-toc a::before{content:"";flex:none;width:12px;height:2px;background:var(--accent);transform:translateY(-.3em)}
.legal-toc a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:.2em}

/* Prose adjustments for policy text. */
.legal-prose h2{scroll-margin-top:calc(var(--header-h) + 24px)}
.legal-prose h3{margin-top:1.4em}
.legal-prose .facts{margin:1em 0 1.6em}
.legal-prose .facts th{width:36%}
.legal-prose .facts td{font-weight:400;color:var(--text)}
.legal-prose .notice{margin:1.6em 0}
.legal-prose .prose-list-tight li{margin-bottom:.3em}

/* Contact block inside the prose: white card, brass top rule, contact-list partial. */
.legal-contact{
  margin:1.4em 0 0;
  padding:clamp(20px, 3vw, 28px);
  border:1px solid var(--line);
  border-top:1px solid var(--brass);
  border-radius:var(--radius);
  background:var(--white);
}
.legal-contact .contact-list > li:first-child{padding-top:0;border-top:0}
.legal-contact .contact-list > li:last-child{padding-bottom:0}
.legal-contact .contact-list a{font-size:1.0625rem}

/* Equal Housing Opportunity statement with the HUD mark beside it. */
.eho-statement{display:flex;align-items:flex-start;gap:18px;margin:1.2em 0 1.6em}
.eho-statement .ph-icon{flex:none;width:56px;height:56px;margin-top:4px}
.eho-statement p{margin:0}

/* Checklist-style feature list on the accessibility page: brass tick per row. */
.a11y-list{margin:0 0 1.4em;padding:0!important;list-style:none}
.a11y-list li{position:relative;margin:0 0 .55em;padding-left:28px}
.a11y-list li::before{
  content:"";
  position:absolute;
  top:.55em;left:2px;
  width:12px;height:2px;
  background:var(--accent);
}
.a11y-list b{color:var(--fg);font-weight:600}

/* Closing CTA band (shared shape from 10-components; these are the legal-page specifics). */
.legal-cta .plat{opacity:.45}
.legal-cta h2{max-width:22ch}
.legal-cta .cta-side{flex:0 1 auto;max-width:100%}
.legal-cta .cta-contact{margin:16px 0 4px;max-width:none;color:var(--muted);font-size:var(--fs-small);line-height:1.5}
.legal-cta .cta-contact b{color:var(--fg);font-weight:600}
.legal-cta .brokerage-line{margin:0;max-width:none}
@media (max-width:480px){ .legal-cta .cta-side{flex-basis:100%} }

/* --------------------------------------------------------------------------
   90-print.css
   -------------------------------------------------------------------------- */
/* ==========================================================================
   90-print — black on white. Dark bands print as plain text; navigation,
   buttons, forms, decoration and empty photo boxes are dropped. Contact
   blocks and the brokerage line always print.
   ========================================================================== */
@media print{
  @page{margin:12mm}

  :root{--header-h:0px}
  html{scroll-padding-top:0;background:#fff}
  body{background:#fff!important;color:#000;font-size:10.5pt;line-height:1.45}

  /* Every dark region becomes black text on white paper. */
  .on-dark{
    --fg:#000!important;
    --text:#000!important;
    --muted:#333!important;
    --rule:#999!important;
    --rule-strong:#666!important;
    --accent:#000!important;
    --eyebrow:#000!important;
    --focus:#000!important;
    --link-hover:#000!important;
    --surface:transparent!important;
  }
  .on-dark,.on-dark *{background-color:transparent!important;background-image:none!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}
  img{filter:none!important}   /* un-invert logos made white for dark bands */
  .section-alt,.ph,.status,.card,.tombstone,.listing-card,.form-card,.aside-card{background:transparent!important;box-shadow:none!important}

  /* Drop interactive and decorative pieces. */
  .skip-link,
  .site-header nav,
  .site-header button,
  .site-footer nav,
  .mega,.mm-toggle,.nav-toggle,.drawer,
  .btn,.actions,.link-arrow,.section-head-link,.card-go,.listing-card .go,
  form,.form,.form-card,.form-status,
  .plat,.ph.is-empty,.map-ph,.gallery-thumbs,.mobile-om,
  video,audio,iframe,.no-print{display:none!important}

  /* Keep the header logo and every contact block; nothing sticky. */
  .site-header{position:static!important;box-shadow:none!important;border-bottom:1px solid #000!important;background:#fff!important}
  .aside-card{position:static!important}
  .brokerage-line{display:block!important;color:#000!important}
  .brokerage-line strong,.brokerage-line b{color:#000!important}

  /* Layout: page margins replace the gutters; sections tighten. */
  .wrap,.wrap-text{max-width:none!important;padding-inline:0!important}
  .section,.section-tight{padding-block:12pt!important}
  .page-hero-inner,.cta-band-inner{padding-block:10pt!important}
  .reveal{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}

  /* Type */
  h1,.h1{font-size:22pt}
  .display{font-size:26pt}
  h2,.h2{font-size:16pt}
  h3,.h3{font-size:12.5pt}
  .lead,.section-intro{font-size:11.5pt}
  .big-num{font-size:22pt}
  h1,h2,h3,h4,.display{color:#000!important;break-after:avoid;page-break-after:avoid}
  p,li{orphans:3;widows:3}
  .listing-card,.tombstone,.card,.contact-list > li,.facts tr,.bio,figure,img{break-inside:avoid;page-break-inside:avoid}

  /* Cards and pills keep a visible edge without fills. */
  .listing-card,.card{border:1px solid #999!important}
  .tombstone{border:1px solid #999!important;border-top:2px solid #000!important}
  .status{border:1px solid #000!important;color:#000!important}
  .tbd{background:none!important;border:1px dashed #000!important;color:#000!important}
  .listing-card .ph img{transform:none!important}

  /* Survey line: print the dashed rule and ticks even without background graphics. */
  .survey{--survey-line:#777!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Links: black; cited sources print their address. Phone and email links
     already show the number / address as their text, so nothing is appended. */
  a{color:#000!important;text-decoration:none!important}
  .prose a[href^="http"]::after,
  .notice a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#333;overflow-wrap:anywhere}
  .prose a,.notice a{text-decoration:underline!important}
}