/* ============================================================
   SVN | Hanna Solutions Commercial Real Estate
   DESIGN SYSTEM — 02 · COMPONENTS
   Every page is assembled from the classes in this file.
   Nothing here is page-specific. Add a component, not a one-off.
   ============================================================ */

/* ══════════ BASE ══════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--orange);
  color:#fff;padding:14px 22px;font-size:var(--fs-label);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);text-transform:uppercase}
.skip-link:focus{left:0}

/* ══════════ LAYOUT ══════════ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
@media(min-width:1600px){
  .wrap{max-width:1440px}
  .pad{padding:110px 0}          /* less air once the content is wider */
}
.wrap--narrow{max-width:var(--wrap-narrow)}
section{position:relative}
.pad{padding:var(--pad-section) 0}
.pad-t{padding-top:var(--pad-section)}
.pad-b{padding-bottom:var(--pad-section)}
.center{text-align:center}
.stack-center{margin-top:var(--s-7);text-align:center}

/* Surfaces — the four backgrounds the whole site is built on.
   Default to paper/mist. Ink is for rhythm, not for the majority. */
.surface-paper{background:var(--paper);color:var(--ink)}
.surface-mist {background:var(--mist);color:var(--ink)}
.surface-ink  {background:var(--ink);color:#fff}
.surface-deep {background:var(--ink-deep);color:#fff}
.surface-ink .lead,.surface-deep .lead{color:var(--on-dark-2)}

/* Two-column split — the layout used by About, Market, and Contact.
   Never inline a grid: inline styles cannot be overridden by media queries. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:78px;align-items:center}
.split--gap-lg{gap:84px}
.split--media{grid-template-columns:1.05fr .95fr}
.split--top{align-items:start}

/* White panel on a mist section (map box, quote box). */
.panel{background:#fff;padding:34px;border:1px solid var(--line)}
.panel--form{background:var(--mist);border:0;padding:40px 36px}

/* ══════════ TYPE ══════════ */
.eyebrow{
  font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
  color:var(--orange-text);text-transform:lowercase;display:block;
}
.eyebrow--caps{
  font-family:var(--font-body);font-style:normal;text-transform:uppercase;
  font-weight:var(--fw-bold);font-size:var(--fs-label);letter-spacing:var(--ls-label);
}
.h-display{font-size:var(--fs-display);font-weight:var(--fw-light);
  line-height:var(--lh-display);text-transform:uppercase}
.h-display b{font-weight:var(--fw-black)}
.h-page{font-size:var(--fs-h1);font-weight:var(--fw-light);
  line-height:var(--lh-heading);text-transform:uppercase}
.h-page b{font-weight:var(--fw-black)}
.h-section{font-size:var(--fs-h2);font-weight:var(--fw-light);letter-spacing:.02em;
  text-transform:uppercase;line-height:var(--lh-heading)}
.h-section b{font-weight:var(--fw-black)}
.h-sub{font-family:var(--font-display);font-style:italic;font-size:1.5rem;line-height:1.35}
.lead{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--grey-soft)}
.lead + .lead{margin-top:var(--s-4)}
.kicker{font-size:1.18rem;font-weight:var(--fw-semi);line-height:1.55;margin:var(--s-5) 0 var(--s-4)}

/* Section rule — short bar with a detached orange tick. */
.rule{width:76px;height:3px;background:var(--ink);margin-top:18px;position:relative;
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--e) .2s}
.rule.is-in{transform:scaleX(1)}
.rule::after{content:"";position:absolute;left:84px;top:0;width:16px;height:3px;background:var(--orange)}
.rule--light{background:#fff}
.rule--center{margin-left:auto;margin-right:auto;transform-origin:center}

/* Orange chevron bullets — the brand's list marker. */
.list-chevron{list-style:none}
.list-chevron li{position:relative;padding-left:26px;margin-bottom:var(--s-3);line-height:1.7}
.list-chevron li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;
  border-top:2px solid var(--orange);border-right:2px solid var(--orange);transform:rotate(45deg)}

/* Section header row: title left, action right. */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  margin-bottom:var(--s-9);flex-wrap:wrap}
.sec-head--center{flex-direction:column;align-items:center;text-align:center}

/* ══════════ BUTTONS ══════════ */
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:18px 34px;
  font-size:.74rem;font-weight:var(--fw-bold);letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--ink);color:var(--ink);position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--e),border-color .45s var(--e),transform .4s var(--e);
}
.btn::before{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(0);
  transform-origin:left;transition:transform var(--t-base) var(--e);z-index:-1}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:#fff;border-color:var(--orange)}
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
/* A plain .btn is ink-on-ink: dark border, dark text. On a dark surface that is
   invisible until hover sweeps the orange fill in - which is exactly how the
   "Browse every property" button vanished on the homepage. Recolour any
   unvariant .btn on dark surfaces so this cannot recur; btn--fill keeps its
   own colours. */
.surface-ink .btn:not(.btn--fill),
.hero-page .btn:not(.btn--fill){border-color:rgba(255,255,255,.55);color:#fff}
.btn--fill{background:var(--orange);border-color:var(--orange);color:#fff}
.btn--fill::before{background:#fff}
.btn--fill:hover{color:var(--ink);border-color:#fff}
.btn--navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--navy::before{background:var(--orange)}
.btn--navy:hover{border-color:var(--orange)}
.btn--sm{padding:13px 24px;font-size:.68rem}
.btn--block{display:flex;width:100%;justify-content:center}
.arrow{width:18px;height:1px;background:currentColor;position:relative;transition:width .4s var(--e)}
.arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .arrow{width:32px}
.link-go{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange-text);font-weight:var(--fw-bold)}
.link-go .arrow{width:14px}
.link-go:hover .arrow{width:26px}

/* ══════════ TAGS + PILLS ══════════ */
.tag{display:inline-block;padding:8px 16px;font-size:.59rem;font-weight:var(--fw-black);
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--ink)}
.tag--sale,.tag--lease{background:var(--orange)}
.tag--closed{background:var(--status-closed)}
.tag--pre{background:var(--navy)}
.tag--kind{background:var(--ink)}
.pill{display:flex;align-items:center;gap:12px;background:var(--mist);border:1px solid var(--line);
  padding:13px 15px;font-size:.72rem;font-weight:var(--fw-semi);transition:var(--t-base) var(--e)}
.pill:hover{border-color:var(--orange);transform:translateX(5px);background:#fff}
.pill .fig{font-size:1.12rem;font-weight:var(--fw-black);color:var(--orange-text);min-width:34px}
.pill-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--s-5)}

/* ══════════ STAT TREATMENT ══════════ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:var(--s-7) 0 var(--s-6)}
.stat{border-top:2px solid var(--line);padding-top:var(--s-4)}
.surface-ink .stat,.surface-deep .stat{border-top-color:rgba(255,255,255,.16)}
.stat .fig{font-family:var(--font-display);font-size:2.6rem;font-weight:var(--fw-regular);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .fig .unit{font-family:var(--font-body);font-size:.9rem;font-weight:var(--fw-bold);
  color:var(--orange-text);margin-left:4px;letter-spacing:.04em}
.stat .lbl{font-size:.59rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-top:var(--s-2);line-height:1.5}
.surface-ink .stat .lbl,.surface-deep .stat .lbl{color:var(--on-dark-3)}

/* ══════════ CARD — BASE ══════════ */
.card{background:#fff;position:relative;overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  transition:transform .65s var(--e),box-shadow .65s var(--e)}
.card:hover{transform:translateY(-12px);box-shadow:var(--shadow-card)}
.card .shot{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--mist);flex:none}
.card .shot img,.card .shot .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--e),filter .8s ease;filter:saturate(.9)}
.card:hover .shot img,.card:hover .shot .ph{transform:scale(1.07);filter:saturate(1.05)}
.card .shot .tag{position:absolute;z-index:3;right:0;top:18px}
.card .shot .tag--kind{top:52px}
.card .body{padding:22px 22px 24px;border-top:3px solid transparent;
  transition:border-color var(--t-base) var(--e);
  display:flex;flex-direction:column;flex:1}
.card:hover .body{border-color:var(--orange)}
.card h3{font-size:.94rem;font-weight:var(--fw-bold);line-height:1.4;text-transform:uppercase;
  /* clamp to two lines so a long Buildout title cannot make one card taller
     than its neighbours and break the grid rhythm */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.8em}
.card .loc{font-size:var(--fs-small);color:var(--grey);margin-top:var(--s-2)}
.card .meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:.78rem;line-height:1.85}
.card .meta b{font-weight:var(--fw-bold)}
.card .meta .val{color:var(--orange-text);font-weight:var(--fw-bold)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr);gap:20px}
/* a real step between 4-up and 2-up, so wide laptops are not stuck with
   very wide cards or a cramped four across */
@media(max-width:1500px){.cards--4{grid-template-columns:repeat(3,1fr)}}

/* ══════════ CARD — TEAM ══════════ */
.card-team{background:#fff;position:relative;overflow:hidden;display:block;
  transition:transform .65s var(--e),box-shadow .65s var(--e)}
.card-team:hover{transform:translateY(-10px);box-shadow:var(--shadow-card)}
.card-team .portrait{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--mist)}
.card-team .portrait img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:grayscale(1) contrast(1.03);transition:filter .7s var(--e),transform 1.2s var(--e)}
.card-team:hover .portrait img{filter:grayscale(0);transform:scale(1.05)}
.card-team .portrait::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--e)}
.card-team:hover .portrait::after{transform:scaleX(1)}
.card-team{display:flex;flex-direction:column;height:100%}
.card-team .body{padding:20px 4px 0;display:flex;flex-direction:column;flex:1}
.card-team h3{min-height:2.6em}
.card-team h3{font-size:1.05rem;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.02em}
.card-team .role{font-family:var(--font-display);font-style:italic;font-size:.9rem;
  color:var(--orange-text);margin-top:6px}
.card-team .tel{display:inline-block;margin-top:10px;font-size:var(--fs-small);color:var(--grey);
  letter-spacing:.04em}
.card-team .tel:hover{color:var(--orange-text)}

/* ══════════ REGIONAL MAP ══════════ */
.region-map{width:100%;background:var(--mist);border:1px solid var(--line)}
.map-legend{margin-top:10px;font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey)}
.surface-ink .map-legend,.surface-deep .map-legend{color:var(--on-dark-label)}
@media(max-width:820px){.region-map{height:320px!important}}

/* ══════════ GRID / MAP TOGGLE ══════════ */
.view-toggle{display:flex;align-items:center;gap:2px;margin-bottom:var(--s-5)}
.view-toggle button{padding:11px 22px;font-size:.7rem;font-weight:var(--fw-bold);
  letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);
  background:#fff;color:var(--grey);min-height:44px;transition:var(--t-fast) var(--e)}
.view-toggle button + button{border-left:0}
.view-toggle button[aria-current="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.view-toggle button:hover:not([aria-current="true"]){border-color:var(--orange);color:var(--ink)}
.view-note{margin-left:auto;font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey)}
.map-view{height:620px;background:var(--mist);border:1px solid var(--line)}
.map-view[hidden]{display:none}
/* Info bubble contents, styled to match the cards rather than Google's default */
.gm-style .map-pin-card{font-family:var(--font-body);max-width:230px}
.gm-style .map-pin-card b{display:block;font-size:.86rem;line-height:1.35;
  text-transform:uppercase;margin-bottom:4px}
.gm-style .map-pin-card span{display:block;font-size:.78rem;color:var(--grey)}
.gm-style .map-pin-card .val{color:var(--orange-text);font-weight:var(--fw-bold);margin-top:4px}
.gm-style .map-pin-card a{display:inline-block;margin-top:8px;font-size:.68rem;
  font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text)}
@media(max-width:820px){
  .map-view{height:440px}
  .view-note{display:none}
}

/* ══════════ LISTING FILTERS ══════════ */
.filters{background:#fff;border:1px solid var(--line);padding:20px 22px;margin-bottom:var(--s-6)}
.surface-paper .filters{background:var(--mist)}
.filter-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:16px;align-items:end}
.filter-row + .filter-row{margin-top:16px}
.filter-row--tight{grid-template-columns:1fr 1fr 1.2fr}
.filters .field span:first-child{font-size:var(--fs-label);font-weight:var(--fw-bold);
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.filters .input,.filters .select{padding:11px 12px;font-size:.86rem}
.range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.filter-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.filter-count{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);white-space:nowrap}
.card[hidden]{display:none}

@media(max-width:1080px){
  .filter-row{grid-template-columns:1fr 1fr}
  .filter-row--tight{grid-template-columns:1fr 1fr}
  .filter-actions{grid-column:1/-1;justify-content:space-between}
}
@media(max-width:640px){
  .filter-row,.filter-row--tight{grid-template-columns:1fr}
}

/* ══════════ LISTING DETAIL ══════════ */
/* Modelled on the compact layout of the previous site: photo, specs, advisor
   and enquiry all reachable without scrolling. The earlier version stacked a
   58vh hero, then a spec column, then a full-width gallery, which meant three
   screens of scrolling before a visitor saw the enquiry form. */

/* Compact header band rather than a full-height hero. */
.listing-top{position:relative;background:var(--ink-deep);color:#fff;overflow:hidden;
  padding:calc(var(--nav-h-solid) + 34px) 0 30px}
.listing-top .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.listing-top .veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,14,13,.94),rgba(14,14,13,.55))}
.listing-top .wrap{position:relative;z-index:2}
.listing-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;flex-wrap:wrap;margin-top:14px}
.listing-head h1{font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:var(--fw-light);
  line-height:1.18;text-transform:none;max-width:22ch}
.listing-head h1 b{font-weight:var(--fw-bold)}
.listing-loc{margin-top:8px;font-size:.92rem;color:var(--on-dark-2)}
.listing-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.price-block{text-align:right;flex:none}
.price-block .lbl{display:block;font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-3)}
.price-block .fig{display:block;font-family:var(--font-display);
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.1;margin-top:6px}

/* Two columns so the sidebar shares vertical space with the copy. */
.pad--tight{padding:var(--s-7) 0 var(--s-9)}
.listing-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start}

/* Photo viewer with a thumbnail strip, instead of a long stacked gallery. */
.viewer{margin:0;background:var(--mist);position:relative;aspect-ratio:16/10;overflow:hidden}
.viewer img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.thumbs button,.thumbs a{padding:0;border:0;background:var(--mist);aspect-ratio:4/3;
  overflow:hidden;cursor:pointer;position:relative;display:block}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity var(--t-fast) var(--e)}
.thumbs button::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 0 var(--orange);transition:box-shadow var(--t-fast) var(--e)}
.thumbs button[aria-current="true"]::after{box-shadow:inset 0 0 0 3px var(--orange)}
.thumbs button:hover img{opacity:.8}

/* Tight spec table. */
.spec-panel{background:var(--mist);padding:24px 22px}
.spec-panel .f-title{margin-bottom:4px;color:var(--ink)}
.spec{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--line)}
.spec:last-child{border-bottom:0}
.spec .lbl{font-size:.62rem;font-weight:var(--fw-bold);letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);flex:none}
.spec .val{font-family:var(--font-display);font-size:.98rem;text-align:right;
  color:var(--ink);font-variant-numeric:tabular-nums}

/* Highlights and description side by side on wide screens. */
.listing-body{margin-top:var(--s-7)}
.listing-body .prose h2:first-child{margin-top:0}
.listing-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

@media(max-width:1080px){
  .listing-grid,.listing-cols{grid-template-columns:1fr;gap:32px}
  .thumbs{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:820px){
  .listing-head{flex-direction:column;align-items:flex-start;gap:16px}
  .price-block{text-align:left}
  .thumbs{grid-template-columns:repeat(3,1fr)}
  .pad--tight{padding:var(--s-6) 0 var(--s-7)}
}

/* ══════════ LONG-FORM PROSE (advisor bios, service copy) ══════════ */
.prose h2,.bio h2.bio-h{font-family:var(--font-display);font-size:1.35rem;font-weight:var(--fw-medium);
  line-height:1.3;margin:var(--s-7) 0 var(--s-4);position:relative;padding-top:var(--s-4);
  text-transform:none;letter-spacing:0}
.prose h2::before,.bio h2.bio-h::before{content:"";position:absolute;left:0;top:0;width:44px;height:2px;background:var(--orange)}
.prose h2:first-child,.bio h2.bio-h:first-child{margin-top:0}
.prose p,.bio p{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--grey-soft);margin-bottom:var(--s-4)}
.prose p:last-child,.bio p:last-child{margin-bottom:0}

.prose > p:first-child{font-size:1.18rem;font-weight:var(--fw-semi);line-height:1.55;color:var(--ink)}
.prose strong{font-weight:var(--fw-bold);color:var(--ink)}
.prose a{color:var(--orange-text);font-weight:var(--fw-semi)}
.prose a:hover{text-decoration:underline}

/* Sidebar list of the other service lines. */
.aside-nav{background:var(--mist);padding:28px 26px}
.aside-nav .f-title{color:var(--ink);font-size:.7rem;margin-bottom:18px}
.aside-nav ul{list-style:none}
.aside-nav li + li{margin-top:2px}
.aside-nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;background:#fff;border:1px solid var(--line);font-size:.8rem;
  font-weight:var(--fw-semi);transition:var(--t-fast) var(--e)}
.aside-nav a:hover{border-color:var(--orange);transform:translateX(4px)}
.aside-nav a[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.aside-nav a[aria-current="page"] .n{color:var(--orange)}
.aside-nav .n{font-size:.62rem;font-weight:var(--fw-bold);letter-spacing:.14em;color:var(--dim)}
.aside-sticky{position:sticky;top:calc(var(--nav-h-solid) + 24px);display:grid;gap:18px}

/* Empty state for a related-listings grid with nothing to show. */
.empty-note{border:1px dashed var(--line-brand);padding:44px 28px;text-align:center;
  color:var(--grey);font-size:var(--fs-small);line-height:1.7}
.empty-note b{display:block;font-size:1rem;color:var(--ink);margin-bottom:8px}

.advisor-aside{position:sticky;top:calc(var(--nav-h-solid) + 24px)}
.advisor-aside .portrait{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--mist)}
.advisor-aside .portrait img{width:100%;height:100%;object-fit:cover;object-position:top center}
.advisor-aside .portrait::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;
  background:var(--orange)}
.advisor-meta{background:var(--mist);padding:30px 28px}
.advisor-meta .advisor-name{font-size:1.25rem;font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:.02em;line-height:1.3}
.advisor-meta .role{font-family:var(--font-display);font-style:italic;font-size:.98rem;
  color:var(--orange-text);margin-top:6px}
.advisor-meta .list-chevron{margin-top:var(--s-5);font-size:var(--fs-small);line-height:1.6}
.advisor-meta .list-chevron a:hover{color:var(--orange-text)}
.advisor-meta .socials a{border-color:var(--line-brand)}
.advisor-meta .socials svg{fill:var(--ink)}
.advisor-meta .socials a:hover svg{fill:#fff}

/* ══════════ CARD — MARKET ══════════ */
.card-market{position:relative;display:flex;flex-direction:column;overflow:hidden;
  min-height:240px;height:100%;background:var(--ink)}
.card-market img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;
  transition:opacity .7s var(--e),transform 1.3s var(--e)}
.card-market:hover img{opacity:.72;transform:scale(1.07)}
.card-market .body{position:relative;z-index:2;padding:28px 24px;display:flex;
  flex-direction:column;justify-content:flex-end;min-height:220px;flex:1;width:100%;
  color:#fff;
  background:linear-gradient(to top,rgba(14,14,13,.88),rgba(14,14,13,.15))}
.card-market h3{font-size:1rem;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.06em}
.card-market p{font-size:var(--fs-small);color:var(--on-dark-3);margin-top:8px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-market::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;
  background:var(--orange);z-index:3;transition:height .6s var(--e)}
.card-market:hover::before{height:100%}
/* The whole card is the click target for the city's listings, but the market
   overview link has to stay separately clickable - hence a stretched anchor
   rather than wrapping the card in one <a>, which cannot legally nest. */
.card-market h3 a{color:inherit;text-decoration:none}
.card-market .stretch::after{content:"";position:absolute;inset:0;z-index:4}
.card-market .mkt-count{font-size:var(--fs-small);color:var(--on-dark-3);margin-top:6px}
.card-market .mkt-count--none{color:var(--on-dark-label)}
.card-market .mkt-alt{position:relative;z-index:5;align-self:flex-start;margin-top:12px;
  font-size:.72rem;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.14em;
  color:#fff;border-bottom:1px solid var(--orange);padding-bottom:3px;text-decoration:none}
.card-market .mkt-alt:hover{color:var(--orange)}
.card-market h3 a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

/* ══════════ ALSO SERVING — the markets without a card ══════════ */
.also-serving{margin-top:40px;border-top:1px solid var(--line);padding-top:28px}
.also-serving h3{font-size:.74rem;font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:.2em;color:var(--dim);display:flex;align-items:center;gap:10px}
.also-serving h3 .c{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;background:var(--orange);color:#fff;
  font-size:.7rem;letter-spacing:0}
.town-list{list-style:none;margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 10px}
.town-list li{display:flex}
.town-list a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  background:#fff;border:1px solid var(--line);font-size:var(--fs-small);
  color:var(--ink);text-decoration:none;transition:border-color .3s var(--e),color .3s var(--e)}
.town-list a:hover{border-color:var(--orange);color:var(--orange-text)}
.town-list .n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;
  height:18px;margin-left:-4px;background:var(--orange);color:#fff;font-size:.66rem;
  font-weight:var(--fw-bold)}
.lede-sm{max-width:58ch;color:var(--muted);font-size:var(--fs-small);margin:-6px 0 26px}

/* Info window on the regional map. */
.map-pin-card{font-family:var(--sans);padding:2px 4px 4px;max-width:230px}
.map-pin-card b{display:block;font-size:.84rem;color:var(--ink);line-height:1.35}
.map-pin-card span{display:block;margin-top:4px;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--orange-text);font-weight:var(--fw-bold)}

/* ══════════ CARD — POST ══════════ */
.card-post{background:#fff;display:block;transition:transform .65s var(--e),box-shadow .65s var(--e)}
.card-post:hover{transform:translateY(-10px);box-shadow:var(--shadow-card)}
.card-post .shot{height:210px;position:relative;overflow:hidden;background:var(--mist)}
.card-post .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.card-post:hover .shot img{transform:scale(1.06)}
.card-post{display:flex;flex-direction:column;height:100%}
.card-post .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card-post h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;min-height:3.9em}
.card-post .byline{margin-top:auto;padding-top:14px}
.card-post .cat{font-size:.58rem;font-weight:var(--fw-bold);letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange-text)}
.card-post h3{font-family:var(--font-display);font-size:1.15rem;font-weight:var(--fw-regular);
  line-height:1.35;margin-top:10px;text-transform:none}
.card-post .byline{border-top:1px solid var(--line);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}

/* ══════════ SERVICE TILE ══════════ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hair-dark);position:relative;z-index:2}
.svc{position:relative;padding:66px 40px;border-right:1px solid var(--hair-dark);
  border-bottom:1px solid var(--hair-dark);overflow:hidden;display:block}
.svc:nth-child(3n){border-right:0}
/* Category imagery sits behind every tile at low opacity so the grid reads as
   six real asset classes rather than six blocks of text. Hover lifts it.
   Previously opacity:0 until hover, which left the whole section flat. */
.svc .bgimg{position:absolute;inset:0;background:#000 center/cover;opacity:.16;
  transform:scale(1.06);transition:opacity .75s var(--e),transform 1.2s var(--e)}
.svc:hover .bgimg,.svc:focus-visible .bgimg{opacity:.38;transform:scale(1)}
/* keep type legible over the photo */
.svc .bgimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(24,24,22,.82),rgba(24,24,22,.45))}
.svc .inner{position:relative;z-index:2}
.svc .num{font-size:.58rem;letter-spacing:var(--ls-label);color:var(--on-dark-label);font-weight:var(--fw-bold)}
.svc .ic{width:46px;height:46px;stroke:#fff;stroke-width:1.3;fill:none;margin-top:22px;
  transition:stroke .4s,transform var(--t-base) var(--e)}
.svc:hover .ic{stroke:var(--orange);transform:translateY(-5px)}
.svc h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);letter-spacing:.13em;
  text-transform:uppercase;margin:24px 0 12px}
.svc p{font-size:.85rem;line-height:1.65;color:var(--on-dark-3)}
.svc .go{margin-top:22px;display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);opacity:0;
  transform:translateX(-8px);transition:var(--t-base) var(--e)}
.svc:hover .go,.svc:focus-visible .go{opacity:1;transform:none}
.svc::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--orange);
  transition:height .6s var(--e)}
.svc:hover::before{height:100%}
/* cursor spotlight wash over the grid */
.spot{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(244,124,0,.13),transparent 65%)}
.has-spot:hover .spot{opacity:1}

/* ══════════ 404 ══════════ */
.nf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
  margin-top:40px;max-width:780px}
.nf-link{display:flex;align-items:center;gap:12px;padding:15px 18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;
  font-size:.78rem;font-weight:var(--fw-semi);letter-spacing:.06em;
  transition:var(--t-fast) var(--e)}
.nf-link:hover{background:rgba(244,124,0,.16);border-color:var(--orange);transform:translateX(5px)}
.nf-link .chev{color:var(--orange);font-size:1.1rem;font-weight:var(--fw-black)}

/* ══════════ ARTICLE ══════════ */
.article-byline{margin-top:22px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-3)}
.article-byline .sep{color:var(--orange);margin:0 10px}
.prose.article h2{font-size:1.5rem}
.prose.article figure{margin:var(--s-7) 0}
.prose.article figure img{width:100%;height:auto}
.prose.article .list-chevron{margin:var(--s-4) 0 var(--s-5)}
.prose.article .list-chevron li{font-size:var(--fs-lead);color:var(--grey-soft)}
.article-foot{margin-top:var(--s-9);padding-top:var(--s-6);border-top:3px solid var(--ink);position:relative}
.article-foot::after{content:"";position:absolute;left:0;top:-3px;width:76px;height:3px;background:var(--orange)}

/* ══════════ CONTACT ══════════ */
.contact-panel{background:var(--mist);padding:44px 40px}
.contact-facts{display:grid;gap:var(--s-5);margin-top:var(--s-6)}
.contact-fact{border-top:2px solid var(--line);padding-top:var(--s-3)}
.contact-fact .lbl{font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey)}
.contact-fact .val{display:block;margin-top:8px;font-size:1.05rem;line-height:1.6}
.contact-fact a:hover{color:var(--orange-text)}
.map-frame{position:relative;aspect-ratio:16/10;background:var(--mist);overflow:hidden}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ══════════ FILTER BAR (Buildout wrapper) ══════════ */
.embed-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:20px 24px;background:var(--ink);color:#fff;font-size:var(--fs-label);
  letter-spacing:.16em;text-transform:uppercase;font-weight:var(--fw-bold)}
.embed-head .count{color:var(--orange)}
.embed-body{border:1px solid var(--line);border-top:0;padding:8px}
#buildout{min-height:520px}

/* ══════════ FORMS ══════════ */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--s-4)}
.field label,.fieldset-legend{font-size:var(--fs-label);font-weight:var(--fw-bold);
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.surface-ink .field label,.surface-deep .field label,
.surface-ink .fieldset-legend,.surface-deep .fieldset-legend{color:var(--on-dark-3)}
.field .req{color:var(--orange-text)}
.input,.textarea,.select{
  width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:15px 16px;font-family:inherit;font-size:.9rem;transition:border-color var(--t-fast) var(--e);
}
.input:hover,.textarea:hover{border-color:var(--line-brand)}
.input:focus,.textarea:focus,.select:focus{outline:2px solid var(--orange);outline-offset:-2px;border-color:var(--orange)}
.textarea{resize:vertical;min-height:130px}
.field-hint{font-size:.72rem;color:var(--grey);line-height:1.5}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
fieldset{border:0;margin-bottom:var(--s-5)}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:var(--s-3)}
.check{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;
  padding:12px 14px;font-size:.8rem;cursor:pointer;transition:var(--t-fast) var(--e)}
.check:hover{border-color:var(--orange)}
.check input{appearance:none;width:16px;height:16px;flex:none;border:1px solid var(--line-brand);
  background:#fff;position:relative;cursor:pointer;transition:var(--t-fast) var(--e)}
.check input:checked{background:var(--orange);border-color:var(--orange)}
.check input:checked::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
.check:has(input:checked){border-color:var(--orange);background:#fff}
.form-note{font-size:.72rem;color:var(--grey);line-height:1.6;margin-top:var(--s-3)}
.hp-field{position:absolute;left:-9999px}   /* honeypot */
/* inline signup bar */
.signup{display:flex;max-width:560px;margin:var(--s-7) auto 0;box-shadow:var(--shadow-float)}
.signup input{flex:1;border:0;padding:22px 24px;font-family:inherit;font-size:.9rem;background:var(--mist)}
.signup input:focus{outline:2px solid var(--orange);outline-offset:-2px}
.signup button{background:var(--ink);color:#fff;padding:0 34px;font-size:.72rem;
  font-weight:var(--fw-bold);letter-spacing:.15em;text-transform:uppercase;
  transition:background .45s var(--e)}
.signup button:hover{background:var(--orange)}

/* ══════════ QUOTE / REVIEW ══════════ */
.stars{display:flex;gap:4px}
.stars i{width:16px;height:16px;background:var(--orange);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.quote{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  padding:34px 30px;transition:var(--t-base) var(--e)}
.quote:hover{background:rgba(255,255,255,.08);border-color:rgba(244,124,0,.4)}
.quote .stars{margin-bottom:18px}
.quote p{font-family:var(--font-display);font-size:.98rem;line-height:1.8;color:rgba(255,255,255,.85)}
.quote .who{margin-top:22px;font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:var(--fw-bold)}
.quote .who .src{display:block;color:var(--on-dark-label);font-weight:var(--fw-regular);
  margin-top:5px;letter-spacing:.08em}
.rev-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:var(--s-7)}
.rev-score{font-size:3.5rem;font-weight:var(--fw-black);line-height:1;color:var(--orange);
  font-variant-numeric:tabular-nums}
.carousel{position:relative}
.carousel-viewport{overflow:hidden}
.rev-track{display:flex;gap:24px;transition:transform .85s var(--e)}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:var(--s-6)}
.carousel-arrow{width:44px;height:44px;border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;transition:var(--t-fast) var(--e)}
.carousel-arrow span{width:9px;height:9px;border-top:2px solid currentColor;
  border-left:2px solid currentColor;transform:rotate(-45deg);margin-left:-2px;color:#fff}
.carousel-arrow.next span{transform:rotate(135deg);margin-left:0;margin-right:-2px}
.carousel-arrow:hover:not(:disabled){background:var(--orange);border-color:var(--orange)}
.carousel-arrow:disabled{opacity:.3;cursor:default}
.surface-paper .carousel-arrow,.surface-mist .carousel-arrow{border-color:var(--line)}
.surface-paper .carousel-arrow span,.surface-mist .carousel-arrow span{color:var(--ink)}
.dots{margin-top:0}
.rev-track .quote{flex:0 0 calc(33.333% - 16px)}
.dots{display:flex;gap:8px;justify-content:center;margin-top:var(--s-7)}
.dots button{width:28px;height:3px;background:rgba(255,255,255,.24);transition:.45s var(--e)}
.dots button.is-on{background:var(--orange);width:50px}

/* ══════════ MARQUEE ══════════ */
.marq{background:var(--orange);color:#fff;padding:24px 0;overflow:hidden;white-space:nowrap}
.marq .run{display:flex;width:max-content;will-change:transform}
/* Each cloned set must not shrink or wrap, or the seam drifts and the ribbon
   stops being continuous. */
.marq .set{display:flex;flex:0 0 auto;white-space:nowrap}
.marq span{font-size:1.15rem;font-weight:var(--fw-black);letter-spacing:.22em;
  text-transform:uppercase;padding:0 26px}
.marq span::after{content:"\25C6";font-size:.52rem;vertical-align:middle;margin-left:26px;opacity:.6}

/* ══════════ NAV ══════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);height:var(--nav-h);display:flex;
  align-items:center;justify-content:space-between;padding:0 var(--gutter);
  transition:background var(--t-base) var(--e),height var(--t-base) var(--e),box-shadow var(--t-base) var(--e)}
.nav.is-solid{background:rgba(14,14,13,.96);height:var(--nav-h-solid);
  box-shadow:0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand img{height:52px;width:auto}
.brand-txt{line-height:1.05}
.brand-txt strong{display:block;font-size:1.5rem;font-weight:var(--fw-black);letter-spacing:.02em}
.brand-txt small{display:block;font-size:.5rem;letter-spacing:.11em;font-weight:var(--fw-medium);opacity:.9}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{font-size:.71rem;font-weight:var(--fw-semi);letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark-2);position:relative;padding:6px 0}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--orange);transition:width .45s var(--e)}
.navlinks a:hover{color:#fff}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{width:100%}
.navlinks a[aria-current="page"]{color:#fff}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-tel{font-size:.71rem;font-weight:var(--fw-bold);letter-spacing:.1em;color:#fff}
.nav-tel:hover{color:var(--orange)}
.btn-contact{border:1px solid rgba(255,255,255,.5);color:#fff;padding:13px 26px;font-size:.71rem;
  font-weight:var(--fw-semi);letter-spacing:.13em;text-transform:uppercase;transition:.45s var(--e)}
.btn-contact:hover{background:var(--orange);border-color:var(--orange)}
.lang{display:flex;border:1px solid rgba(255,255,255,.28);overflow:hidden;font-size:.65rem;
  font-weight:var(--fw-bold);letter-spacing:.1em}
.lang button{padding:8px 12px;color:var(--on-dark-3);transition:var(--t-fast) var(--e)}
.lang button.is-on{background:var(--orange);color:#fff}
.burger{display:none;width:30px;height:20px;position:relative}
.burger b{position:absolute;left:0;width:100%;height:2px;background:#fff;transition:var(--t-fast) var(--e)}
.burger b:nth-child(1){top:0}.burger b:nth-child(2){top:9px}.burger b:nth-child(3){top:18px}
.burger.is-x b:nth-child(1){top:9px;transform:rotate(45deg)}
.burger.is-x b:nth-child(2){opacity:0}
.burger.is-x b:nth-child(3){top:9px;transform:rotate(-45deg)}

/* Scroll rail (homepage only) */
.rail{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:var(--z-rail);
  display:flex;flex-direction:column}
.rail-track{position:absolute;top:6px;bottom:6px;width:1px;background:rgba(128,128,128,.3)}
.rail-fill{position:absolute;top:6px;width:1px;background:var(--orange);height:0}
.rail a{position:relative;width:26px;height:34px;display:flex;align-items:center;justify-content:center}
.rail i{width:7px;height:7px;border-radius:50%;background:#8f8f8a;transition:.45s var(--e)}
.rail a.is-on i{background:var(--orange);transform:scale(1.75);box-shadow:0 0 0 4px rgba(244,124,0,.18)}
.rail span{position:absolute;left:30px;white-space:nowrap;font-size:.58rem;font-weight:var(--fw-bold);
  letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateX(-6px);
  transition:.4s var(--e);pointer-events:none}
.rail a:hover span,.rail a.is-on span{opacity:1;transform:none}
.rail.on-dark span{color:#fff}
.rail.on-dark i{background:var(--on-dark-4)}
.rail.on-dark a.is-on i{background:var(--orange)}

/* ══════════ HERO ══════════ */
.hero{height:100vh;min-height:680px;overflow:hidden;display:flex;align-items:center;
  background:var(--ink-deep)}
.hero .bg{position:absolute;inset:-3%;background-size:cover;background-position:center;opacity:.3;
  animation:drift 30s ease-in-out infinite alternate}
.hero video.bg{width:106%;height:106%;object-fit:cover}
@keyframes drift{from{transform:scale(1.05)}to{transform:scale(1.16) translate(-1.5%,-1.5%)}}
.hero .veil{position:absolute;inset:0;
  background:radial-gradient(ellipse at 68% 50%,rgba(14,14,13,.2),rgba(14,14,13,.94) 72%),
             linear-gradient(100deg,rgba(14,14,13,.96) 0%,rgba(14,14,13,.6) 46%,rgba(14,14,13,.35) 100%)}
#globe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.hero .wrap{position:relative;z-index:3;color:#fff}
.hero-tag{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-label);letter-spacing:.24em;
  text-transform:uppercase;color:var(--on-dark-3);border:1px solid rgba(255,255,255,.2);
  padding:9px 16px;margin-bottom:30px}
.hero-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(244,124,0,.6)}50%{box-shadow:0 0 0 7px rgba(244,124,0,0)}}
.hero .sub{margin-top:26px;font-size:clamp(.78rem,1.5vw,1rem);letter-spacing:.34em;
  text-transform:uppercase;color:rgba(255,255,255,.88);max-width:34ch}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:46px}
.hero-legend{position:absolute;right:38px;bottom:38px;z-index:3;text-align:right;
  font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-label);line-height:2.2}
.hero-legend b{color:var(--orange);font-weight:var(--fw-bold)}
.scrollcue{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.56rem;
  letter-spacing:.24em;color:rgba(255,255,255,.55);text-transform:uppercase}
.scrollcue span{width:1px;height:54px;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.scrollcue span::after{content:"";position:absolute;top:-54px;left:0;width:1px;height:54px;
  background:var(--orange);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{top:-54px}62%,100%{top:54px}}
.fade-up{opacity:0;animation:fadeUp .9s var(--e) forwards}

/* ── Hero entrance ───────────────────────────────────────────────────
   Driven by body.is-ready, which JS sets at the exact moment the door
   preloader hands over — or immediately when there is no loader.

   This replaced hard-coded animation-delays of 1.9s/2.15s/2.35s that were
   timed to the loader's duration. Two ways that broke: the loader's progress
   is randomised so the timings drifted out of step with it, and on a repeat
   visit the loader is skipped entirely, so the headline animated instantly
   while the tagline and buttons stayed invisible for another two seconds.
   That is the overlap.

   Hidden only under .js, so content is never stuck invisible if JS fails. */
.js .hero .stagger{opacity:0;transform:translateY(26px)}
body.is-ready .hero .stagger{animation:fadeUp .85s var(--e) forwards}
body.is-ready .hero .stagger[data-s="1"]{animation-delay:.08s}
body.is-ready .hero .stagger[data-s="2"]{animation-delay:.20s}
body.is-ready .hero .stagger[data-s="3"]{animation-delay:.32s}
body.is-ready .hero .stagger[data-s="4"]{animation-delay:.44s}

/* The headline word-mask waits for the same signal rather than for the
   scroll observer, which fired immediately and got ahead of everything else. */
.js .hero .msk i{transform:translateY(115%)}
body.is-ready .hero .msk i{transform:none}

.js .hero .scrollcue,.js .hero .hero-legend{opacity:0}
body.is-ready .hero .scrollcue,body.is-ready .hero .hero-legend{
  animation:fadeIn .9s ease .7s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}

/* Interior page hero — shorter, same language. */
.hero-page{position:relative;min-height:52vh;display:flex;align-items:flex-end;
  background:var(--ink-deep);padding:calc(var(--nav-h) + 60px) 0 60px;overflow:hidden}
/* 34% was tuned when these slots held grey placeholder blocks. With real
   photography it left the image at roughly 17% visible at the top and 2% at the
   bottom - present but unreadable. 55% lets the picture carry the header. */
.hero-page .bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.55}
/* The veil is now bottom-weighted rather than a flat wash. Type sits at the
   bottom of the header (align-items:flex-end), so that is the only place that
   needs to be dark. The top two thirds stay light and the photograph reads. */
.hero-page .veil{position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(14,14,13,.92) 0%,
    rgba(14,14,13,.78) 26%,
    rgba(14,14,13,.42) 58%,
    rgba(14,14,13,.16) 100%)}
.hero-page .wrap{position:relative;z-index:2;color:#fff}
.crumbs{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-label);
  margin-bottom:var(--s-4)}
.crumbs a:hover{color:var(--orange)}
.crumbs .sep{margin:0 8px;color:var(--orange)}

/* ══════════ MEDIA HELPERS ══════════ */
.ph{background:var(--mist);position:relative;overflow:hidden}
.ph[data-label]::after{content:attr(data-label);position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:16px;font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:var(--fw-semi);
  border:1px dashed var(--line-brand)}
.surface-ink .ph,.surface-deep .ph{background:#232320;
  outline:1px dashed rgba(255,255,255,.22);outline-offset:-1px}
.surface-ink .ph[data-label]::after,.surface-deep .ph[data-label]::after{
  color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.22)}
.px{will-change:transform}
.media-pair{position:relative;height:580px}
.media-pair .frame{position:absolute;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.media-pair .frame img{width:100%;height:100%;object-fit:cover}
.media-pair .m1{top:0;right:0;width:78%;height:60%}
.media-pair .m2{bottom:0;left:0;width:62%;height:52%;box-shadow:var(--shadow-deep)}
.media-badge{position:absolute;bottom:13%;right:1%;background:var(--orange);color:#fff;
  padding:20px 26px;z-index:3;max-width:212px}
.media-badge strong{display:block;font-size:1.55rem;font-weight:var(--fw-black);line-height:1}
.media-badge span{display:block;font-size:.57rem;letter-spacing:.15em;text-transform:uppercase;margin-top:6px}

/* Third-party embed frame (Buildout listings, Google Reviews, chat). */
.embed{position:relative;min-height:420px;background:var(--paper)}
.embed--mist{background:var(--mist)}
.embed-fallback{padding:60px 24px;text-align:center;color:var(--grey);font-size:var(--fs-small);
  border:1px dashed var(--line-brand);line-height:1.7}
/* On a dark section the fallback must not be a white slab. */
.surface-ink .embed,.surface-deep .embed{background:transparent}
.surface-ink .embed-fallback,.surface-deep .embed-fallback{
  color:var(--on-dark-2);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.surface-ink .embed-fallback code,.surface-deep .embed-fallback code{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}

/* ══════════ REVEALS ══════════ */
.rv{opacity:0;transform:translateY(36px);
  transition:opacity var(--t-reveal) var(--e),transform var(--t-reveal) var(--e)}
.rv.is-in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}.rv[data-d="2"]{transition-delay:.2s}
.rv[data-d="3"]{transition-delay:.3s}.rv[data-d="4"]{transition-delay:.4s}
.rv[data-d="5"]{transition-delay:.5s}
.msk{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.msk i{display:inline-block;font-style:inherit;font-weight:inherit;transform:translateY(115%);
  transition:transform var(--t-slow) var(--e)}
.is-in .msk i,.msk.is-in i{transform:none}
.wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--e)}
.wipe.is-in{clip-path:inset(0 0 0 0)}

/* ══════════ CHROME: loader · cursor · grain ══════════ */
#loader{position:fixed;inset:0;z-index:var(--z-loader);pointer-events:none}
.door{position:absolute;top:0;bottom:0;width:50.2%;background:var(--ink-deep);display:flex;
  align-items:center;justify-content:center;overflow:hidden;transition:transform 1.5s var(--e2)}
.door.l{left:0;border-right:1px solid rgba(244,124,0,.35)}
.door.r{right:0}
#loader.is-open .door.l{transform:translateX(-101%)}
#loader.is-open .door.r{transform:translateX(101%)}
/* Storefront-door handles. Kept at 74% height, NOT 50%: at centre they sat
   directly on top of the logo, the wordmark and the progress bar, which read as
   the whole preloader overlapping itself. Also hidden on short viewports where
   even 74% would collide. */
.door::after{content:"";position:absolute;top:74%;width:6px;height:96px;
  background:linear-gradient(#8a8a86,#3d3d3a);border-radius:3px;
  transform:translateY(-50%);opacity:.45;z-index:1}
.door.l::after{right:18px}.door.r::after{left:18px}
@media(max-height:620px){.door::after{display:none}}
.door .sheen{position:absolute;top:-60%;left:-40%;width:45%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  transform:rotate(14deg);animation:sheen 2.6s var(--e) infinite}
@keyframes sheen{0%{left:-50%}70%,100%{left:130%}}
.load-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:5;text-align:center;transition:opacity .5s ease,transform var(--t-slow) var(--e);
  padding:30px 40px;background:var(--ink-deep)}
#loader.is-open .load-core{opacity:0;transform:translate(-50%,-50%) scale(1.35)}

/* The logo reveals behind a mask that wipes upward, then settles. A PNG cannot
   be stroke-drawn like the old hand-built SVG, so the motion comes from the
   mask, a slight scale, and a highlight sweeping across the mark. */
.load-logo{position:relative;width:min(300px,62vw);margin:0 auto;overflow:hidden}
.load-logo img{width:100%;height:auto;display:block;
  clip-path:inset(0 0 100% 0);transform:scale(1.06);
  animation:logoReveal 1.05s var(--e) forwards}
@keyframes logoReveal{
  0%{clip-path:inset(0 0 100% 0);transform:scale(1.06);opacity:0}
  30%{opacity:1}
  100%{clip-path:inset(0 0 0 0);transform:scale(1);opacity:1}
}
/* highlight passing over the mark once it is revealed */
.load-sweep{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transform:translateX(-120%);animation:logoSweep 1.1s var(--e) .85s forwards}
@keyframes logoSweep{to{transform:translateX(120%)}}

/* orange rule grows out from the centre under the mark */
.load-rule{width:min(300px,62vw);height:2px;margin:22px auto 0;
  background:rgba(255,255,255,.14);overflow:hidden}
.load-rule b{display:block;height:100%;width:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:center;
  animation:ruleGrow .8s var(--e) .55s forwards}
@keyframes ruleGrow{to{transform:scaleX(1)}}

.load-bar{width:min(300px,62vw);height:1px;background:rgba(255,255,255,.16);
  margin:16px auto 0;position:relative}
.load-bar b{position:absolute;left:0;top:0;height:100%;width:0;background:var(--orange);
  transition:width .18s linear}
.load-pct{margin-top:12px;font-size:.62rem;letter-spacing:.2em;color:var(--on-dark-label);
  font-variant-numeric:tabular-nums;opacity:0;animation:fadeIn .5s ease .7s forwards}

#cur{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--orange);
  border-radius:50%;pointer-events:none;z-index:var(--z-cursor);mix-blend-mode:difference;
  transform:translate(-50%,-50%);opacity:0;
  transition:width .35s var(--e),height .35s var(--e),background .35s,opacity .3s}
#cur.is-big{width:76px;height:76px;background:rgba(244,124,0,.16)}
#dot{position:fixed;top:0;left:0;width:5px;height:5px;border-radius:50%;background:var(--orange);
  pointer-events:none;z-index:calc(var(--z-cursor) + 1);transform:translate(-50%,-50%);opacity:0}
@media(hover:none){#cur,#dot{display:none}}
#grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ══════════ FOOTER ══════════ */
.site-footer{position:relative;color:#fff;padding:118px 0 0;overflow:hidden;background:var(--ink-deep)}
.site-footer .bg{position:absolute;inset:-6%;background-size:cover;background-position:center;opacity:.2}
.site-footer .wrap{position:relative;z-index:2}
.f-grid{display:grid;grid-template-columns:1.1fr .8fr 1.1fr;gap:60px}
.f-brand .brand{margin-bottom:28px}
.f-brand p{font-size:.9rem;line-height:1.9;color:var(--on-dark-2)}
.f-brand a:hover{color:var(--orange)}
.f-title{font-size:.74rem;font-weight:var(--fw-black);letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:24px}
.f-nav{display:flex;flex-direction:column;gap:13px}
.f-nav a{font-size:.79rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);
  width:fit-content;position:relative;transition:.3s}
.f-nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;
  background:var(--orange);transition:width .45s var(--e)}
.f-nav a:hover{color:#fff}.f-nav a:hover::after{width:100%}
.f-form{display:flex;flex-direction:column;gap:10px}
.f-form .input,.f-form .textarea{border:0;padding:14px 16px}
.f-form .textarea{min-height:110px}
.f-form button{background:var(--orange);color:#fff;padding:16px;font-size:.72rem;
  font-weight:var(--fw-bold);letter-spacing:.15em;text-transform:uppercase;transition:.45s var(--e)}
.f-form button:hover{background:#fff;color:var(--ink)}
.socials{display:flex;gap:10px;margin-top:26px}
.socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.28);display:flex;
  align-items:center;justify-content:center;transition:.45s var(--e)}
.socials a:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-3px)}
.socials svg{width:16px;height:16px;fill:#fff}
.f-base{margin-top:84px;border-top:1px solid rgba(255,255,255,.14);padding:26px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.71rem;color:var(--on-dark-3);letter-spacing:.06em}
.f-base a:hover{color:var(--orange)}

/* ══════════ RESPONSIVE ══════════ */
/* Graded rather than two jumps. A meaningful share of CRE searches happen on a
   phone in the field, so the small-screen rules are treated as first-class
   rather than as damage control. */

/* ---- Large laptop: keep four across but ease the gutters ---- */
@media(max-width:1400px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .svc{padding:52px 30px}
}

/* ---- Tablet landscape / small laptop ---- */
@media(max-width:1080px){
  .rail{display:none}
  .split,.split--media{grid-template-columns:1fr;gap:54px}
  .advisor-aside,.aside-sticky{position:static;max-width:560px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc:nth-child(3n){border-right:1px solid var(--hair-dark)}
  .svc:nth-child(2n){border-right:0}
  .cards,.cards--4{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-form{grid-column:1/-1}
  .rev-track .quote{flex:0 0 calc(50% - 12px)}
  .hero-legend{display:none}
  .media-pair{height:430px}
  .check-grid{grid-template-columns:repeat(2,1fr)}
  .listing-grid,.listing-cols{grid-template-columns:1fr;gap:32px}
  .thumbs{grid-template-columns:repeat(4,1fr)}
  .filter-row{grid-template-columns:1fr 1fr}
  .filter-row--tight{grid-template-columns:1fr 1fr}
  .filter-actions{grid-column:1/-1;justify-content:space-between}
}

/* ---- Tablet portrait ---- */
@media(max-width:900px){
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .rev-track .quote{flex:0 0 100%}
}

/* ---- Phone ---- */
@media(max-width:820px){
  /* Mobile menu. Tap targets at 48px minimum — 14px padding either side of a
     .85rem line was under 40px and awkward to hit accurately. */
  .navlinks{position:fixed;top:var(--nav-h-solid);left:0;right:0;
    background:rgba(14,14,13,.985);flex-direction:column;align-items:stretch;gap:0;
    padding:0 var(--gutter);max-height:0;overflow:hidden;
    transition:max-height .6s var(--e),padding .6s var(--e)}
  .navlinks.is-open{max-height:calc(100vh - var(--nav-h-solid));padding:16px var(--gutter) 28px;
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .navlinks a{width:100%;padding:15px 0;min-height:48px;display:flex;align-items:center;
    border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem}
  .navlinks a::after{display:none}
  .burger{display:block;width:44px;height:44px;padding:12px 7px;box-sizing:content-box;
    margin:-12px -7px}
  .btn-contact,.nav-tel{display:none}
  .nav{padding:0 var(--gutter-sm)}
  .lang button{padding:11px 13px}         /* 44px tall */

  /* Type: the display clamp bottoms out too large on a 360px screen. */
  .hero h1,.h-display{font-size:clamp(2.1rem,10vw,3rem)}
  .h-page{font-size:clamp(1.9rem,8vw,2.6rem)}
  .h-section{font-size:clamp(1.6rem,7.5vw,2.2rem)}
  .hero .sub{letter-spacing:.2em;font-size:.8rem;max-width:none}
  .lead{font-size:.96rem}

  /* 100vh includes the browser chrome on iOS, so the hero overflowed and the
     scroll cue sat off-screen. dvh where supported. */
  .hero{min-height:560px;height:88vh}
  .scrollcue{display:none}

  .cards,.cards--2,.cards--4{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .svc{border-right:0!important;padding:44px var(--gutter-sm)}
  .stats{grid-template-columns:1fr;gap:0}
  .stat{padding:14px 0}
  .pad{padding:var(--pad-section-sm) 0}
  .pad--tight{padding:var(--s-6) 0 var(--s-7)}
  .wrap{padding:0 var(--gutter-sm)}
  .f-grid{grid-template-columns:1fr;gap:40px}
  .signup{flex-direction:column}
  .signup button{padding:18px}
  .field-row,.check-grid,.pill-grid,.filter-row,.filter-row--tight{grid-template-columns:1fr}
  .media-pair{height:auto;display:grid;gap:14px}
  .media-pair .frame{position:static;width:100%;height:220px}
  .media-badge{position:static;max-width:none}
  .contact-panel{padding:26px 20px}
  .panel{padding:22px}
  .panel--form{padding:26px 20px}
  .spec-panel{padding:20px 18px}
  .listing-head{flex-direction:column;align-items:flex-start;gap:14px}
  .price-block{text-align:left}
  .thumbs{grid-template-columns:repeat(3,1fr)}
  .sec-head{gap:18px;margin-bottom:var(--s-6)}
  .marq{padding:16px 0}
  .marq span{font-size:.92rem;padding:0 18px}
  .article-byline{font-size:.64rem}
  .prose.article h2{font-size:1.25rem}
  /* every form control and button comfortably tappable */
  .input,.textarea,.select{padding:14px 14px;font-size:1rem}
  .btn{padding:16px 26px}
  .check{padding:14px 14px}
  footer .socials a{width:44px;height:44px}
}

@media(max-width:420px){
  .wrap{padding:0 16px}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  .h-section{font-size:1.5rem}
  .rev-score{font-size:2.6rem}
}

/* iOS: dvh accounts for the collapsing address bar; 100vh does not. */
@supports (height: 100dvh){
  @media(max-width:820px){ .hero{height:88dvh} }
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv,.msk i{opacity:1;transform:none}
  .wipe{clip-path:none}
  .rule{transform:scaleX(1)}
  html{scroll-behavior:auto}
}
/* ══════════ PRINT ══════════
   Brokers print listing pages to hand across a table at a site visit, so the
   listing page gets a real print design: photo, specs, highlights and the
   contact block on white, everything interactive stripped. Other pages keep the
   basic clean-up. TREC expects the licence to be identifiable on client-facing
   material, so a print-only footer carries firm, phone and licence number. */
@media print{
  /* Chrome and interactivity, gone everywhere. */
  .nav,.rail,.site-footer,#grain,#cur,#dot,#loader,.scrollcue,
  .search-dock,.lb,.marq,.btn,.btn-contact,.burger,.lang,
  form,.hp-field,.form-note,.form-alt,.thumbs,.viewer-zoom,
  video,canvas,.veil,.share-row,.act-bar{display:none !important}
  body{background:#fff !important;color:#000 !important}
  *{box-shadow:none !important;text-shadow:none !important;
    animation:none !important;transition:none !important}
  /* Reveal-on-scroll elements would print invisible at opacity 0. */
  .rv,.stagger,[data-d]{opacity:1 !important;transform:none !important}

  /* Dark sections become white paper. */
  .surface-ink,.hero-page,.listing-top{background:#fff !important;color:#000 !important}
  .surface-ink *,.hero-page *,.listing-top *{color:#000 !important}

  /* Listing page layout: single column, photo capped to keep page one useful. */
  .listing-grid{display:block !important}
  .viewer img{max-height:9cm;width:auto !important;max-width:100%;
    object-fit:contain}
  .spec-panel,.panel{border:1px solid #999 !important;page-break-inside:avoid;
    margin-top:12px}
  .gallery,.map-view,.view-toggle,.filters{display:none !important}
  /* "Similar/Other Listings" is navigation, not property information. */
  .surface-mist.pad--tight:has(.cards){display:none !important}

  /* Links: show the address for the flyer link, nothing else. */
  a{text-decoration:none;color:#000 !important}
  a[href^="tel:"]::after,a[href^="mailto:"]::after{content:""}

  /* Print-only footer with the identity TREC wants on paper. */
  main::after{
    content:"SVN | Hanna Solutions Commercial Real Estate \00b7 1001 E Jackson Ave STE A, McAllen, TX 78501 \00b7 (956) 322-4001 \00b7 svnhannasolutionscre.com \00b7 Licence #9007459";
    display:block;margin-top:14px;padding-top:8px;border-top:2px solid #000;
    font-size:9pt;letter-spacing:.04em}
  @page{margin:1.4cm}
}


/* ══════════ MONOGRAM — the stand-in for a photo we do not have yet ══════════
   Rendered at build time when the file is not on disk, so no page ever shows a
   broken-image icon and no JS is involved. Drop the file in, rebuild, and the
   <img> replaces this automatically. */
.mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--ink);overflow:hidden}
.mono::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;
  background:var(--orange)}
.mono span{font-family:var(--serif);font-size:clamp(2.2rem,6vw,3.4rem);line-height:1;
  color:#fff;letter-spacing:.04em;opacity:.9}
.mono--scene{background:var(--ink)}
.mono--scene span{font-family:var(--sans);font-size:.74rem;font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.5);
  text-align:center;padding:0 18px;opacity:1}
/* Market cards put their own copy over the top, so the label would collide. */
.card-market .mono--scene span{display:none}
.card-market .mono--scene{background:linear-gradient(160deg,#232320,#141412)}
/* No city photo yet: a quiet SVN mark instead of a bare dark block. */
.card-market .mono--scene::before{content:"";position:absolute;inset:0;
  background:url("/assets/img/SVN-HannaSolutions-icon_white.png") center 34%/96px auto no-repeat;
  opacity:.2}

/* Holding line on a profile with no bio yet. Quiet, not apologetic. */
.bio-pending{color:var(--dim);font-size:var(--fs-small);border-left:2px solid var(--orange);
  padding-left:14px;margin-top:14px}

/* ══════════ RGV GRAPHIC WITH HOVER TARGETS ══════════
   Percentage-positioned pins over the firm's own artwork. Buttons and links
   rather than an <area> map, so they are keyboard reachable and work on touch. */
.rgvmap{position:relative;margin:0;line-height:0}
.rgvmap img{width:100%;height:auto;display:block}
.rgvpin{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;
  padding:0;border:0;background:transparent;cursor:pointer;border-radius:50%;
  display:block;z-index:2}
.rgvpin::before{content:"";position:absolute;inset:5px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 2px rgba(255,255,255,.9);
  transition:transform .25s var(--e)}
.rgvpin--airport::before{background:#2E7DD1}
.rgvpin--port::before{background:var(--status-closed)}
.rgvpin--office::before{background:#fff;box-shadow:0 0 0 3px var(--orange)}
.rgvpin--city::before{inset:3px;background:transparent;border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.45)}
.rgvpin:hover::before,.rgvpin:focus-visible::before{transform:scale(1.5)}
.rgvpin:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Pulse so it is discoverable that the pins do something. */
@media (prefers-reduced-motion:no-preference){
  .rgvpin--office::after{content:"";position:absolute;inset:0;border-radius:50%;
    border:2px solid var(--orange);animation:rgvpulse 2.6s var(--e) infinite}
}
@keyframes rgvpulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.1);opacity:0}}

.rgvtip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);
  min-width:170px;max-width:280px;padding:11px 14px;background:#fff;
  border-top:3px solid var(--orange);box-shadow:0 18px 44px rgba(0,0,0,.32);
  text-align:left;line-height:1.45;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--e),visibility .22s var(--e);z-index:5}
.rgvtip b{display:block;font-family:var(--sans);font-size:.8rem;font-weight:var(--fw-bold);
  color:var(--ink)}
.rgvtip span{display:block;margin-top:5px;font-size:.72rem;color:var(--muted)}
.rgvtip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:#fff}
.rgvpin:hover .rgvtip,.rgvpin:focus-visible .rgvtip,.rgvpin.is-open .rgvtip{
  opacity:1;visibility:visible}
/* Pins near the top edge flip the tooltip below so it is never clipped. */
.rgvpin.flip .rgvtip{bottom:auto;top:calc(100% + 12px)}
.rgvpin.flip .rgvtip::after{top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:#fff}
.lede-sm--dark{color:var(--on-dark-3)}
@media (max-width:820px){
  .rgvpin{width:34px;height:34px}          /* 44px-ish tap target with the ring */
  .rgvtip{min-width:150px;font-size:.9em}
}

/* ══════════ ADVISOR ENQUIRY FORM ══════════ */
.wrap--narrow{max-width:820px}
.sec-head--stack{display:block}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:26px}
.f-row{display:flex;flex-direction:column;gap:7px}
.f-row--full{grid-column:1/-1}
.f-row label{font-size:.7rem;font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:.16em;color:var(--dim)}
.form-alt{margin-top:18px;font-size:var(--fs-small);color:var(--muted)}
.form-alt a{color:var(--orange-text);font-weight:var(--fw-bold)}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr} }




/* ══════════ ABOUT — FULL-BLEED HERO IMAGE ══════════
   The artwork IS the hero. Edge to edge, at its own 1920x900 ratio, with nothing
   over it and no black gutters. Only the navigation sits above it, because the
   nav is white type and the banner's top band is white on orange - overlapping
   the two would make both unreadable. */
.hero-shot{background:var(--ink);line-height:0;padding-top:var(--nav-h)}
/* max-width is the image's own 1920px. Beyond that the browser would upscale it,
   which on a 2560px monitor meant a 1200px-tall hero - taller than most laptops
   and softer than the source. Capped here it is at most 900px tall and never
   enlarged past its native size. On a wider monitor there is black either side,
   because the artwork simply is not wider than 1920px; a 2560-wide version of
   the same montage would fill it. */
.hero-banner{display:block;width:100%;max-width:1920px;height:auto;margin:0 auto}

/* The title, in a band only as deep as its own type. 52vh of min-height is what
   left a tall empty black area once the image moved out of the background. */
.hero-page--band{min-height:0;align-items:stretch;
  padding-top:32px;padding-bottom:38px}
.hero-page--band .veil{background:none}
@media(max-width:820px){
  .hero-page--band{padding-top:24px;padding-bottom:28px}
  /* A 1920x900 image in a phone-width column is a ~40px strip with nothing
     readable in it. Crop taller and favour the left, where the headline starts. */
  .hero-banner{height:46vw;object-fit:cover;object-position:16% 50%}
}
@media(max-width:560px){
  .hero-banner{height:64vw;object-position:22% 50%}
}

/* ══════════ CAPTION ON THE ABOUT IMAGE PAIR ══════════
   The pair used to point at stock-ish WordPress photos. It now shows the firm's
   own current listings, so a caption turns decoration into proof - and a reader
   can see these are real properties rather than library images. */
.frame{position:relative;margin:0}
.frame-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 14px;
  background:linear-gradient(to top,rgba(14,14,13,.9),rgba(14,14,13,0));
  color:#fff;text-align:left}
.frame-cap b{display:block;font-family:var(--sans);font-size:.78rem;
  font-weight:var(--fw-bold);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.frame-cap span{display:block;margin-top:3px;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-3)}
@media(max-width:820px){
  .frame-cap{padding:12px 14px 11px}
  .frame-cap b{font-size:.72rem}
}

/* A single frame should fill the column, not sit small beside empty space. */
.media-pair--solo .frame.m1{width:100%;margin:0}
.media-pair--solo .frame.m2{display:none}

/* ══════════ CREDENTIALS PANEL ══════════
   Fills the column beside the About copy when no image resolves. Deliberately
   image-free: it cannot break because a file is missing, misnamed or not
   committed, which is what left this space empty three times over.
   Colours are inherited, so it reads correctly on both the light and the dark
   section without a second variant. */
.cred-panel{border:1px solid currentColor;border-color:var(--line);
  padding:34px 32px 30px;align-self:start}
.surface-ink .cred-panel{border-color:rgba(255,255,255,.16)}
.cred-mark{font-family:var(--sans);font-size:1.6rem;font-weight:var(--fw-black);
  letter-spacing:.04em;color:var(--orange);line-height:1}
.cred-lead{margin-top:12px;font-size:var(--fs-small);line-height:1.55;
  color:var(--muted);max-width:30ch}
.surface-ink .cred-lead{color:var(--on-dark-3)}
.cred-list{list-style:none;margin:26px 0 0;border-top:1px solid var(--line)}
.surface-ink .cred-list{border-top-color:rgba(255,255,255,.16)}
.cred-list li{display:flex;align-items:baseline;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.surface-ink .cred-list li{border-bottom-color:rgba(255,255,255,.16)}
.cred-list b{font-family:var(--serif);font-size:1.45rem;font-weight:400;
  min-width:2.2ch;color:var(--ink)}
.surface-ink .cred-list b{color:#fff}
.cred-list span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim)}
.cred-lic{margin-top:22px;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
@media(max-width:820px){ .cred-panel{padding:26px 22px 22px} }


/* ══════════ LIVE INVENTORY / TRACK RECORD PANELS ══════════
   Both fill the column beside the About copy. Every figure and row is counted
   from listings.json at build time, so they refresh with the Buildout sync and
   there is no number for anyone to forget to update.

   Brand: large serif figures with a small orange unit label, per the guide. */
.live-panel,.record-panel{align-self:start;border:1px solid var(--line);
  padding:30px 28px 26px}
.surface-ink .live-panel,.surface-ink .record-panel{border-color:rgba(255,255,255,.16)}
.live-eyebrow{display:flex;align-items:center;gap:9px;font-size:.66rem;
  font-weight:var(--fw-bold);letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 4px}
/* A quiet pulse, because the point of the panel is that it is current. */
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
@media (prefers-reduced-motion:no-preference){
  .live-dot{animation:livepulse 2.4s var(--e) infinite}
}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.25}}

.live-figs{list-style:none;margin:0}
.live-figs li{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.surface-ink .live-figs li{border-bottom-color:rgba(255,255,255,.16)}
.live-figs li:last-child{border-bottom:0}
.live-figs .fig{font-family:var(--serif);font-size:1.9rem;line-height:1;
  color:var(--ink);white-space:nowrap}
.surface-ink .live-figs .fig{color:#fff}
.live-figs .fig i{font-style:normal;font-family:var(--sans);font-size:.62rem;
  font-weight:var(--fw-bold);letter-spacing:.12em;
  /* --orange is 2.7:1 on white, below AA at this size. --orange-text is the
     readable variant; the brand orange is kept for the dark surface where it
     clears AA comfortably. */
  color:var(--orange-text);margin-left:5px;vertical-align:.55em}
.surface-ink .live-figs .fig i{color:var(--orange)}
.live-figs .lbl{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);text-align:right}
.live-types{margin-top:16px;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange-text)}
.surface-ink .live-types{color:var(--orange)}

.rc-list{list-style:none;margin:14px 0 0}
.rc-list li{border-bottom:1px solid var(--line)}
.surface-ink .rc-list li{border-bottom-color:rgba(255,255,255,.16)}
.rc-list li:last-child{border-bottom:0}
.rc-list a{display:block;padding:14px 0;text-decoration:none}
.rc-title{display:block;font-size:.86rem;font-weight:var(--fw-bold);
  line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.surface-ink .rc-title{color:#fff}
.rc-list a:hover .rc-title{color:var(--orange-text)}
.surface-ink .rc-list a:hover .rc-title{color:var(--orange)}
.rc-meta{display:block;margin-top:4px;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
@media(max-width:820px){
  .live-panel,.record-panel{padding:24px 20px 20px}
  .live-figs .fig{font-size:1.6rem}
}

/* ══════════ SITE SEARCH ══════════
   Docked under the navigation bar rather than a fullscreen modal.

   The [hidden] rule is the important line. The first version set display:flex
   on the container, which OVERRIDES the html hidden attribute - so the panel
   was visible from page load and the close button could never hide it. Any
   element that toggles hidden must keep this guard. */
.search-dock[hidden]{display:none !important}
.nav-search{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;background:transparent;border:0;color:#fff;
  cursor:pointer;opacity:.85;transition:opacity .3s var(--e),color .3s var(--e)}
.nav-search:hover{opacity:1;color:var(--orange)}
.search-dock{position:fixed;top:var(--nav-h);right:var(--gutter);
  z-index:calc(var(--z-nav) + 5);width:min(440px,calc(100vw - 2*var(--gutter)));
  background:#fff;border-top:3px solid var(--orange);
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.nav.is-solid ~ .search-dock{top:var(--nav-h-solid)}
.search-row{display:flex;align-items:center;gap:11px;padding:2px 14px;
  border-bottom:1px solid var(--line);color:var(--dim)}
.search-row input{flex:1;border:0;outline:0;padding:13px 0;font-size:.92rem;
  font-family:var(--sans);color:var(--ink);background:transparent;min-width:0}
.search-close{background:transparent;border:0;font-size:.9rem;cursor:pointer;
  color:var(--dim);padding:8px}
.search-close:hover{color:var(--ink)}
.search-results{max-height:min(56vh,430px);overflow-y:auto;overscroll-behavior:contain}
.search-results:empty{display:none}
.search-hit{display:flex;gap:12px;align-items:baseline;padding:11px 14px;
  text-decoration:none;border-bottom:1px solid #f0f0ee}
.search-hit:hover,.search-hit.is-sel{background:#FFF4E8}
.sh-kind{flex:0 0 96px;font-size:.58rem;font-weight:var(--fw-bold);
  letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.sh-listing{color:var(--orange-text)}
.sh-person{color:#2E5DD1}
.sh-body{flex:1;min-width:0}
.sh-body b{display:block;font-size:.86rem;color:var(--ink);line-height:1.35}
.sh-body i{display:block;font-style:normal;margin-top:2px;font-size:.66rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.search-none{padding:18px 14px;font-size:var(--fs-small);color:var(--muted)}
@media(max-width:560px){
  .search-dock{right:0;left:0;width:auto;top:var(--nav-h-solid)}
  .sh-kind{flex-basis:80px}
}

/* ══════════ PHOTO LIGHTBOX ══════════ */
.lb[hidden]{display:none !important}   /* [hidden] must beat display:flex */
.lb{position:fixed;inset:0;z-index:calc(var(--z-nav) + 20);
  background:rgba(10,10,9,.94);display:flex;align-items:center;justify-content:center}
.lb-img{max-width:min(94vw,1600px);max-height:88vh;object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb-x{position:absolute;top:18px;right:22px;background:transparent;border:0;
  color:#fff;font-size:1.5rem;cursor:pointer;opacity:.8;padding:10px}
.lb-x:hover{opacity:1;color:var(--orange)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);
  cursor:pointer;transition:background .3s var(--e)}
.lb-nav:hover{background:var(--orange)}
.lb-prev{left:18px}.lb-next{right:18px}
.lb-nav span{display:block;width:12px;height:12px;margin:auto;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.lb-next span{transform:rotate(-135deg)}
.lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.75);font-size:.7rem;letter-spacing:.2em}
.viewer{position:relative}
.viewer-zoom{position:absolute;right:14px;bottom:14px;width:42px;height:42px;
  background:rgba(14,14,13,.72);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-size:1.05rem;cursor:pointer;transition:background .3s var(--e)}
.viewer-zoom:hover{background:var(--orange)}
@media(max-width:560px){
  .lb-nav{width:44px;height:44px}
  .lb-prev{left:8px}.lb-next{right:8px}
}

/* ══════════ SHARE ROW — listing pages ══════════ */
.share-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.share-lbl{font-size:.68rem;font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:.16em;color:var(--dim);margin-right:2px}
.share-btn{font-size:.72rem;font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink);background:#fff;border:1px solid var(--line);
  padding:9px 13px;text-decoration:none;cursor:pointer;font-family:inherit;
  transition:border-color .25s var(--e),color .25s var(--e)}
.share-btn:hover{border-color:var(--orange);color:var(--orange-text)}
.share-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ══════════ ACTION BAR — listing pages, phones only ══════════ */
/* CRE searches here happen in the field; call/share/enquire stay under the
   thumb. Desktop and print never see it. */
.act-bar{display:none}
@media(max-width:820px){
  .act-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
    background:var(--ink);border-top:2px solid var(--orange);
    padding-bottom:env(safe-area-inset-bottom)}
  .act-bar a{flex:1;text-align:center;padding:15px 8px;color:#fff;
    font-size:.72rem;font-weight:var(--fw-bold);text-transform:uppercase;
    letter-spacing:.12em;text-decoration:none}
  .act-bar a+a{border-left:1px solid rgba(255,255,255,.14)}
  .act-bar a:active{background:rgba(255,255,255,.08)}
  main.has-actbar{padding-bottom:58px}
}

/* ══════════ AI ASSISTANT — bottom right ══════════ */
.chat{position:fixed;right:22px;bottom:22px;z-index:70}
.chat-fab{width:58px;height:58px;border:0;border-radius:50%;cursor:pointer;
  background:var(--orange);color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.28);
  transition:transform .25s var(--e),background .25s var(--e)}
.chat-fab:hover{transform:scale(1.06)}
.chat-fab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.chat-panel{position:fixed;right:22px;bottom:92px;width:min(390px,calc(100vw - 32px));
  height:min(560px,calc(100vh - 130px));display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--orange);
  box-shadow:0 12px 44px rgba(0,0,0,.26)}
.chat-panel[hidden]{display:none !important}
.chat-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;padding:16px 18px;background:var(--ink);color:#fff}
.chat-title{font-size:.8rem;font-weight:var(--fw-bold);letter-spacing:.06em}
.chat-sub{font-size:.68rem;color:var(--on-dark-3);margin-top:3px}
.chat-close{border:0;background:none;color:#fff;font-size:1.5rem;line-height:1;
  cursor:pointer;padding:0 2px}
.chat-close:hover{color:var(--orange)}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;
  gap:10px;background:var(--mist,#F5F5F2)}
.chat-msg{max-width:86%;padding:10px 13px;font-size:.82rem;line-height:1.55;
  white-space:pre-wrap;word-wrap:break-word}
.chat-msg--user{align-self:flex-end;background:var(--ink);color:#fff}
.chat-msg--bot{align-self:flex-start;background:#fff;border:1px solid var(--line);
  color:var(--ink)}
.chat-msg--bot a{color:var(--orange-text);font-weight:600;word-break:break-all}
.chat-msg--wait{align-self:flex-start;color:var(--dim);font-size:.78rem;
  padding:4px 2px}
.chat-form{display:flex;gap:0;border-top:1px solid var(--line)}
.chat-in{flex:1;border:0;padding:14px 16px;font:inherit;font-size:.84rem;
  color:var(--ink);background:#fff;min-width:0}
.chat-in:focus{outline:2px solid var(--orange);outline-offset:-2px}
.chat-send{border:0;background:var(--orange);color:#fff;width:52px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.chat-send:hover{background:var(--ink)}
.chat-note{font-size:.62rem;color:var(--dim);padding:8px 16px 10px;background:#fff;
  border-top:1px solid var(--line)}
@media(max-width:820px){
  .chat{right:14px;bottom:14px}
  /* Sit above the listing-page action bar instead of on top of it */
  main.has-actbar ~ .chat, body:has(main.has-actbar) .chat{bottom:76px}
  .chat-panel{right:14px;bottom:146px;height:min(520px,calc(100vh - 170px))}
}
@media print{.chat{display:none !important}}

/* ══════════ DEAL CALCULATOR ══════════ */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.calc-grid{grid-template-columns:1fr}}
.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:14px}
@media(max-width:480px){.calc-fields{grid-template-columns:1fr}}
.calc-fields .field{margin:0}
.calc-check{display:flex;align-items:center;gap:9px;grid-column:1/-1;
  font-size:.78rem;color:var(--ink);cursor:pointer;margin-top:2px}
.calc-check input{width:16px;height:16px;accent-color:var(--orange)}
.calc-out{list-style:none;margin-top:18px;border-top:2px solid var(--ink);padding:0}
.calc-out li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:.8rem;color:var(--dim)}
.calc-out li b{font-size:.98rem;color:var(--ink);font-weight:var(--fw-bold);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.calc-summary{margin-top:26px;padding:16px 20px;border-left:3px solid var(--orange);
  background:#fff;border-top:1px solid var(--line);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);font-size:.92rem;font-weight:600;color:var(--ink)}
.surface-mist .calc-summary{background:#fff}

/* ══════════ NEW BADGE — fresh from the Buildout sync ══════════ */
.tag--fresh{background:var(--orange);color:#fff}
.card .shot .tag--fresh{top:auto;bottom:18px;left:0;right:auto}

/* ══════════ CHAT CHIPS + IN-CHAT LEAD FORM ══════════ */
.chat-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;
  border-top:1px solid var(--line);background:#fff}
.chat-chip{border:1px solid var(--line);background:#fff;color:var(--ink);
  font:600 .68rem/1.2 inherit;font-family:inherit;padding:7px 10px;cursor:pointer;
  transition:border-color .2s var(--e),color .2s var(--e)}
.chat-chip:hover{border-color:var(--orange);color:var(--orange-text)}
.chat-chip--lead{background:var(--ink);color:#fff;border-color:var(--ink)}
.chat-chip--lead:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.chat-lead p{font-weight:600;margin-bottom:8px}
.chat-lead-in{display:block;width:100%;border:1px solid var(--line);
  padding:8px 10px;font:inherit;font-size:.8rem;margin-top:6px;min-width:0}
.chat-lead-in:focus{outline:2px solid var(--orange);outline-offset:-2px}
.chat-lead-send{margin-top:9px;border:0;background:var(--orange);color:#fff;
  font:700 .72rem/1 inherit;font-family:inherit;text-transform:uppercase;
  letter-spacing:.1em;padding:10px 16px;cursor:pointer}
.chat-lead-send:hover{background:var(--ink)}
.chat-lead-send:disabled{opacity:.6;cursor:wait}

/* ══════════ PRINT QR — listing sheets only ══════════ */
.qr-print{display:none}
@media print{
  .qr-print{display:block !important;position:absolute;top:1.2cm;right:0;
    text-align:center;width:3cm}
  .qr-print img{width:2.6cm;height:2.6cm}
  .qr-print span{display:block;font-size:7pt;color:#555;margin-top:2px}
  .listing-grid,section.surface-paper{position:relative}
}

/* ══════════ FINANCING TEASER — under a sale price ══════════ */
.price-teaser{display:block;margin-top:8px;font-size:.72rem;font-weight:600;
  color:var(--on-dark-3);text-decoration:none;border-bottom:none}
.price-teaser:hover{color:var(--orange)}

/* ══════════ MOBILE FILTER COLLAPSE ══════════ */
.filters-toggle{display:none}
@media(max-width:820px){
  .filters-toggle{display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);
    font:700 .74rem/1 inherit;font-family:inherit;text-transform:uppercase;
    letter-spacing:.14em;padding:15px 16px;cursor:pointer;margin-bottom:14px}
  .filters-toggle .n:not(:empty){background:var(--orange);color:#fff;border-radius:50%;
    min-width:20px;height:20px;display:inline-flex;align-items:center;
    justify-content:center;font-size:.68rem;padding:0 5px}
  .filters-toggle[aria-expanded="true"]{border-color:var(--orange)}
  [data-filters]{display:none}
  [data-filters].is-open{display:block}
  /* Text inputs the generic rule misses: below 16px iOS zooms on focus. */
  .chat-in,.chat-lead-in,.search-row input,.signup input{font-size:16px}
}

/* ══════════ 1031 DEADLINES — dates are long, let them wrap ══════════ */
#ex-out li{flex-direction:column;align-items:flex-start;gap:4px}
#ex-out li b{white-space:normal;font-size:.92rem}

/* ══════════ CHAT FAB LABEL ══════════ */
/* "Hanna Solutions Virtual Advisor" beside the mark. Pill instead of circle;
   collapses back to the bare icon while the panel is open (the panel header
   already says who you're talking to). */
.chat-fab{width:auto;border-radius:999px;padding:0 12px 0 20px;gap:11px;height:58px}
.chat-fab-txt{font-size:.7rem;font-weight:var(--fw-bold);letter-spacing:.1em;
  text-transform:uppercase;color:#fff;white-space:nowrap}
.chat-fab[aria-expanded="true"]{padding:0;width:58px}
.chat-fab[aria-expanded="true"] .chat-fab-txt{display:none}
@media(max-width:560px){
  .chat-fab{height:52px;padding:0 10px 0 16px}
  .chat-fab-txt{font-size:.6rem;letter-spacing:.06em}
}