@charset "utf-8";
/* ============================================================================
   B&S LUXURY — MIAMI — design system
   Built to the brand standards, Volume I · MMXXVI.

   Three values only: Onyx anchors, Sand softens, Paper rests. The kit is
   explicit that "saturation is never permitted", so every tone below is a
   mix of those three — there is no fourth hue anywhere in the system, and
   the accent is ink. Two typefaces only: Cormorant Garamond carries the
   brand voice, Inter carries the running body. Hierarchy comes from type,
   tracking and space.
   ========================================================================= */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* ink & ground — Onyx #0E0D0B · Sand #E8DFCE · Paper #FAF6EF */
  --ink:        #0E0D0B;
  --ink-80:     #0E0D0Bcc;
  --ink-60:     #0E0D0B99;
  --paper:      #FAF6EF;
  --paper-2:    #F4EFE4;
  --paper-3:    #E8DFCE;
  --rule:       #D9CFBA;
  --rule-soft:  #ECE5D8;
  --muted:      #6F6961;
  --deep:       #0E0D0B;   /* inverse sections — the kit's "use sparingly" */
  --deep-2:     #17150F;
  --on-deep:    #FAF6EF;
  --on-deep-mut:#A79F92;
  --accent:     #0E0D0B;   /* focus rings and active marks — ink, never colour */
  --warn:       #8A3B28;   /* form errors only; never decorative */

  /* type — the kit permits nothing else */
  --serif: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;

  /* fluid scale
     Deliberately restrained. Restraint is what reads as luxury here — the
     earlier scale ran a display headline to 88px and a section head to 63px,
     which shouts rather than speaks. Every display step is pulled back by
     roughly a quarter, and the body text with it, so the page holds more
     content in the same frame and the type carries authority through its
     cut rather than its size. */
  --t-hero:  clamp(2.5rem, 1rem + 5.4vw, 5.6rem);
  --t-h1:    clamp(2rem, 1rem + 3.3vw, 3.6rem);
  --t-h2:    clamp(1.6rem, 1rem + 2.1vw, 2.6rem);
  --t-h3:    clamp(1.18rem, 0.95rem + 0.95vw, 1.62rem);
  --t-h4:    clamp(1rem,  0.94rem + 0.34vw, 1.16rem);
  --t-lede:  clamp(0.98rem, 0.92rem + 0.36vw, 1.16rem);
  --t-body:  clamp(0.89rem, 0.87rem + 0.14vw, 0.95rem);
  --t-small: 0.79rem;
  --t-micro: 0.66rem;

  /* rhythm
     The vertical steps come down with the type. The earlier --sec put 168px of
     air above and below every band, which on a text page read as emptiness
     rather than composure. */
  --gut:     clamp(1.1rem, 0.6rem + 2vw, 2.6rem);
  --sec:     clamp(3.2rem, 1.8rem + 4.6vw, 6.2rem);
  --sec-sm:  clamp(2.4rem, 1.5rem + 3vw, 4.2rem);
  --maxw:    1440px;
  --readw:   70ch;

  /* motion */
  --ease:    cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --dur:     .6s;

  --nav-h:   clamp(64px, 5.2vw, 84px);
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

/* ── type primitives ────────────────────────────────────────────────────── */
/* Cormorant Garamond carries only a weight axis — no optical-size axis to
   drive — so the display sizes are differentiated by tracking instead. The
   face tightens naturally as it grows, so the large steps take a little air
   out and the small ones put a little back. */
.display, h1, h2, h3 {
  font-family: var(--serif); font-weight: 400;
  letter-spacing: -.006em; line-height: 1.1;
}
h1 { font-size: var(--t-h1); letter-spacing: -.014em; line-height: 1.05; }
h2 { font-size: var(--t-h2); letter-spacing: -.010em; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.002em; }
h4 { font-size: var(--t-h4); font-family: var(--sans); font-weight: 400; line-height: 1.3; letter-spacing: 0; }
em, .it { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}
.eyebrow--rule { display: flex; align-items: center; gap: 1rem; }
.eyebrow--rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.lede { font-size: var(--t-lede); line-height: 1.55; font-weight: 300; color: var(--ink-80); max-width: 46ch; }
.body-copy { max-width: var(--readw); }
.body-copy p + p { margin-top: 1.1em; }
.muted { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }

.rule { height: 1px; background: var(--rule); border: 0; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 980px; }
.wrap--read   { max-width: 760px; }
.section { padding-block: var(--sec); }
.section--sm { padding-block: var(--sec-sm); }
.section--flush-top { padding-top: 0; }
.section--dark { background: var(--deep); color: var(--on-deep); }
.section--dark .eyebrow, .section--dark .muted { color: var(--on-deep-mut); }
.section--dark .lede { color: var(--on-deep); opacity: .86; }
.section--dark .rule, .section--dark .eyebrow--rule::after { background: #ffffff22; }
.section--alt { background: var(--paper-2); }

.sec-head { display: grid; gap: clamp(1rem, 2vw, 1.75rem); margin-bottom: clamp(2.5rem, 4vw, 4.5rem); }
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: minmax(0,1.05fr) minmax(0,.85fr); align-items: end; column-gap: var(--gut); }
  .sec-head--split .sec-head__aside { padding-bottom: .35rem; }
}
.sec-head h2 { max-width: 20ch; }

/* ── images ─────────────────────────────────────────────────────────────── */
.ph { background-size: cover; background-position: center; width: 100%; height: auto; }
.media { position: relative; overflow: hidden; background: var(--paper-3); }
.media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 1.1s var(--ease); }
.media--fill { height: 100%; }
.zoom:hover .media > img, .zoom:focus-visible .media > img { transform: scale(1.045); }
.ratio-3-4  { aspect-ratio: 3/4; }
.ratio-4-5  { aspect-ratio: 4/5; }
.ratio-1-1  { aspect-ratio: 1/1; }
.ratio-4-3  { aspect-ratio: 4/3; }
.ratio-3-2  { aspect-ratio: 3/2; }
.ratio-16-9 { aspect-ratio: 16/9; }
.ratio-21-9 { aspect-ratio: 21/9; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  --btn-fg: var(--ink); --btn-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 1.05em 2.1em; min-height: 44px;
  color: var(--btn-fg); border: 1px solid var(--btn-bd);
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
  text-align: center;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bd); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn:hover, .btn:focus-visible { color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid::before { background: var(--paper); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--ink); }
.btn--light { --btn-fg: var(--on-deep); --btn-bd: #ffffff59; }
.btn--light::before { background: var(--on-deep); }
.btn--light:hover, .btn--light:focus-visible { color: var(--ink); border-color: var(--on-deep); }
.btn--full { width: 100%; }
.btn--sm { padding: .8em 1.5em; font-size: var(--t-micro); }

/* text link with a drawn underline */
.tlink {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--t-small); letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: .35em; position: relative; min-height: 34px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; opacity: .35; transform-origin: right; transition: transform .5s var(--ease), opacity .3s;
}
.tlink:hover::after, .tlink:focus-visible::after { opacity: 1; transform: scaleX(1); }
.tlink .arw { transition: transform .45s var(--ease); }
.tlink:hover .arw { transform: translateX(.32em); }

/* ── header / nav ───────────────────────────────────────────────────────── */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--paper); padding: 1rem 1.5rem; }
.skip:focus { left: 0; }

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
  color: var(--ink);
}
.hdr__in { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.75rem); }
.hdr--over { color: var(--on-deep); }
.hdr--pinned { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--rule-soft); }
.hdr--hidden { transform: translateY(-100%); }
.hdr { transition: transform .5s var(--ease), background .5s var(--ease), color .4s var(--ease), box-shadow .5s var(--ease); }

.brand { display: flex; align-items: center; flex: 0 0 auto; }

.nav { display: none; margin-left: auto; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
@media (min-width: 1080px) { .nav { display: flex; } }
.nav a, .nav button {
  font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; font-weight: 400;
  position: relative; padding: .55rem 0; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: .1rem; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current] { opacity: 1; }

.nav__cta {
  border: 1px solid currentColor; padding: .78em 1.5em !important;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.nav__cta:hover { background: currentColor; }
.nav__cta:hover span { color: var(--paper); }
.hdr--over .nav__cta:hover span { color: var(--ink); }

/* language switcher */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: .45em; font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; padding: .55rem .2rem; }
.lang__list {
  position: absolute; top: calc(100% + .55rem); right: 0; min-width: 9.5rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
  padding: .4rem; display: grid; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  box-shadow: 0 18px 40px -24px #14120f4d;
}
.lang[data-open="true"] .lang__list { opacity: 1; visibility: visible; transform: none; }
.lang__list a { font-size: var(--t-micro); letter-spacing: .16em; padding: .62rem .8rem; text-transform: uppercase; }
.lang__list a::after { display: none; }
.lang__list a:hover, .lang__list a[aria-current] { background: var(--paper-2); }

/* burger */
.burger { margin-left: auto; display: grid; gap: 5px; padding: .8rem .2rem; }
@media (min-width: 1080px) { .burger { display: none; } }
.burger i { display: block; width: 26px; height: 1px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }
body.menu-open .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger i:nth-child(2) { opacity: 0; }
body.menu-open .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 89; background: var(--paper);
  padding: calc(var(--nav-h) + 2rem) var(--gut) 2rem;
  display: grid; align-content: start; gap: 0;
  clip-path: inset(0 0 100% 0); transition: clip-path .75s var(--ease);
  overflow-y: auto;
}
body.menu-open .drawer { clip-path: inset(0 0 0 0); }
.drawer a { display: block; }
.drawer__nav { display: grid; }
.drawer__nav a {
  font-family: var(--serif); font-size: clamp(2rem, 9vw, 3.1rem); line-height: 1.05;
  padding: .42em 0; border-bottom: 1px solid var(--rule-soft);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
body.menu-open .drawer__nav a { opacity: 1; transform: none; }
body.menu-open .drawer__nav a:nth-child(1) { transition-delay: .16s; }
body.menu-open .drawer__nav a:nth-child(2) { transition-delay: .22s; }
body.menu-open .drawer__nav a:nth-child(3) { transition-delay: .28s; }
body.menu-open .drawer__nav a:nth-child(4) { transition-delay: .34s; }
body.menu-open .drawer__nav a:nth-child(5) { transition-delay: .40s; }
body.menu-open .drawer__nav a:nth-child(6) { transition-delay: .46s; }
.drawer__foot { margin-top: 2.25rem; display: grid; gap: 1.5rem; opacity: 0; transition: opacity .5s .5s; }
body.menu-open .drawer__foot { opacity: 1; }
.drawer__langs { display: flex; gap: .4rem; flex-wrap: wrap; }
.drawer__langs a { border: 1px solid var(--rule); padding: .6em 1.1em; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; }
.drawer__langs a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* page hero (interior pages) */
.phero { position: relative; background: var(--deep); color: var(--on-deep); overflow: hidden; }
.phero__bg { position: absolute; inset: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; }
.phero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #0b0a08e0, #0b0a0866 55%, #0b0a0844); }
.phero__in { position: relative; z-index: 2; padding-top: calc(var(--nav-h) + clamp(4rem, 12vh, 9rem)); padding-bottom: clamp(2.75rem, 7vh, 5.5rem); }
.phero h1 { max-width: 18ch; }
.phero .lede { color: #ffffffd1; max-width: 54ch; margin-top: 1.35rem; }
.phero--short .phero__in { padding-top: calc(var(--nav-h) + clamp(3rem, 8vh, 6rem)); }
.phero--plain { background: var(--paper-2); color: var(--ink); }
.phero--plain .lede { color: var(--ink-80); }

.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin-bottom: 1.5rem; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: .3em; }
.crumbs span[aria-hidden] { opacity: .5; }

/* ── development / area cards ───────────────────────────────────────────── */
.grid { display: grid; gap: clamp(1.75rem, 3.2vw, 3.25rem) clamp(1.1rem, 2vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

.card { display: block; position: relative; }
.card__media { position: relative; overflow: hidden; background: var(--paper-3); aspect-ratio: 4/5; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.15s var(--ease); }
.card:hover .card__media img, .card:focus-visible .card__media img { transform: scale(1.05); }
.card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, #0b0a08cc 0%, #0b0a0833 42%, #0b0a0800 68%);
  opacity: .92;
}
.card__logo {
  position: absolute; top: clamp(.9rem,2vw,1.35rem); left: clamp(.9rem,2vw,1.35rem); right: clamp(.9rem,2vw,1.35rem);
  height: clamp(26px, 3.4vw, 38px);
}
.card__logo img { height: 100%; width: auto; max-width: 62%; object-fit: contain; object-position: left top;
  filter: brightness(0) invert(1); opacity: .93; }
/* The badges sit at the foot of the picture, above the name. Held at the top
   right they collided with the building's own logo, which is set across the
   head of the frame and can run wide. */
.card__badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.badge {
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  padding: .42em .8em; border: 1px solid #ffffff59; color: #fff; backdrop-filter: blur(6px);
  background: #14120f2e; white-space: nowrap;
}
.card__foot { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1rem,2.2vw,1.6rem); color: #fff; }
.card__name { font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.12; }
.card__meta { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: #ffffffc4; }
.card__reveal {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .6s var(--ease), opacity .45s var(--ease), margin-top .6s var(--ease);
}
.card:hover .card__reveal, .card:focus-within .card__reveal { max-height: 8rem; opacity: 1; margin-top: .8rem; }
.card__reveal p { font-size: var(--t-small); line-height: 1.5; color: #ffffffcf; max-width: 40ch; }
@media (hover: none) { .card__reveal { display: none; } }

.card--light .card__media { aspect-ratio: 3/4; }
.card--light .card__body { padding-top: 1.15rem; }
.card--light .card__name { font-size: var(--t-h3); color: var(--ink); }
.card--light .card__meta { color: var(--muted); }

/* area card */
.acard { position: relative; display: block; }
.acard__media { position: relative; overflow: hidden; aspect-ratio: 5/6; background: var(--paper-3); }
.acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.acard:hover .acard__media img { transform: scale(1.055); }
.acard__veil { position: absolute; inset: 0; background: linear-gradient(to top, #0b0a08d9, #0b0a0840 45%, #0b0a081a); }
.acard__body { position: absolute; inset: auto 0 0 0; padding: clamp(1.1rem,2.4vw,1.75rem); color: #fff; }
.acard__name { font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.05; }
.acard__tag { margin-top: .45rem; font-size: var(--t-small); color: #ffffffc4; max-width: 30ch; line-height: 1.45; }
.acard__count { margin-top: .8rem; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: #ffffff9e; }

/* cartographic card — areas with no photography of their own */
.acard--carto .acard__media { background: var(--paper-2); display: grid; place-items: center; }
.acard--carto .acard__veil { background: linear-gradient(to top, #14120fd9, #14120f6b 48%, #14120f2e); }
.carto { position: absolute; inset: 0; }
.carto svg { width: 100%; height: 100%; }
.carto__land { fill: var(--paper-3); }
.carto__water { fill: #dfe4e3; }
.carto__pin { fill: var(--ink); }

/* ── key facts ──────────────────────────────────────────────────────────── */
.facts { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: minmax(9rem, 34%) 1fr; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.facts dt { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-family: var(--serif); font-size: var(--t-h4); }
.section--dark .facts { border-color: #ffffff2e; }
.section--dark .facts div { border-color: #ffffff1a; }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.stat__n { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; }
.stat__l { margin-top: .6rem; font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); max-width: 16ch; }
.section--dark .stat__l { color: var(--on-deep-mut); }

/* ── editorial blocks ───────────────────────────────────────────────────── */
.split { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split--wide-l { grid-template-columns: 1.25fr .9fr; }
  .split--wide-r { grid-template-columns: .9fr 1.25fr; }
  .split--offset > *:last-child { padding-top: clamp(2rem, 6vw, 6rem); }
  .split--rev > *:first-child { order: 2; }
}
.prose { max-width: var(--readw); }
.prose h3 { margin-top: 2.4em; margin-bottom: .7em; }
.prose h3:first-child { margin-top: 0; }
.prose p + p { margin-top: 1.15em; }
.prose ul { margin: 1.2em 0; display: grid; gap: .7em; }
.prose li { padding-left: 1.4em; position: relative; }
.prose li::before { content: ""; position: absolute; left: 0; top: .72em; width: .55em; height: 1px; background: var(--rule); }
.prose blockquote {
  margin: 2.2em 0; padding-left: clamp(1.1rem, 3vw, 2rem); border-left: 1px solid var(--rule);
  font-family: var(--serif); font-size: var(--t-h3); line-height: 1.28; font-style: italic;
}
.prose a:not(.btn):not(.tlink) { border-bottom: 1px solid var(--rule); }
.prose a:not(.btn):not(.tlink):hover { border-color: currentColor; }

.pull { font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 2.7rem); line-height: 1.18; letter-spacing: -.015em; max-width: 22ch; }

/* feature list with hairline rules */
.flist { display: grid; }
.flist > div { padding: clamp(1.5rem, 3vw, 2.4rem) 0; border-top: 1px solid var(--rule); display: grid; gap: .7rem; }
@media (min-width: 820px) {
  .flist > div { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1rem,3vw,3rem); align-items: start; }
  /* two-child rows (no index) must not drop the heading into the 3.5rem rail */
  .flist > div:not(:has(.flist__n)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}
.flist h3 { min-width: 0; overflow-wrap: break-word; }
.flist p { min-width: 0; }
.flist__n { font-size: var(--t-micro); letter-spacing: .2em; color: var(--muted); padding-top: .45em; }
.section--dark .flist > div { border-color: #ffffff26; }

/* ── map ────────────────────────────────────────────────────────────────── */
.mapx { display: grid; gap: 0; border: 1px solid var(--rule); background: var(--paper); }
@media (min-width: 1000px) { .mapx { grid-template-columns: 1.15fr .85fr; } }
.mapx__stage { position: relative; background: linear-gradient(170deg, #eef1f0, #e3e8e7); min-height: clamp(360px, 58vh, 660px); }
.mapx__svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; }
/* superseded by the chart treatment in components.css */
.mapx__water { fill: #dde5e6; }
.mapx__road { stroke: #e2dbcd; stroke-width: .5; fill: none; }
.map-pin { cursor: pointer; }
.map-pin__dot { fill: var(--ink); transition: r .3s var(--ease), fill .3s; }
.map-pin__ring { fill: none; stroke: var(--ink); stroke-width: .7; opacity: 0; transition: opacity .3s, r .4s var(--ease); }
.map-pin__hit { fill: transparent; }
.map-pin__label {
  font-family: var(--sans); font-size: 3.1px; letter-spacing: .34px; text-transform: uppercase;
  fill: var(--ink); opacity: .74; transition: opacity .3s, font-weight .2s; paint-order: stroke;
  stroke: #f4f1eacc; stroke-width: .85px; stroke-linejoin: round;
}
.map-pin:hover .map-pin__dot, .map-pin[aria-pressed="true"] .map-pin__dot { r: 1.9; }
.map-pin:hover .map-pin__ring, .map-pin[aria-pressed="true"] .map-pin__ring { opacity: .5; }
.map-pin:hover .map-pin__label, .map-pin[aria-pressed="true"] .map-pin__label { opacity: 1; font-weight: 500; }
/* superseded by the chart treatment in components.css */

.mapx__regions { position: absolute; top: 1rem; left: 1rem; display: flex; gap: .3rem; flex-wrap: wrap; z-index: 3; }
.mapx__regions button {
  font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
  padding: .55em 1em; border: 1px solid var(--rule); background: #fbf9f5d9; backdrop-filter: blur(4px);
  transition: background .3s, color .3s, border-color .3s;
}
.mapx__regions button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mapx__hint { position: absolute; left: 1rem; bottom: 1rem; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); z-index: 3; }

.mapx__panel { padding: clamp(1.25rem, 2.5vw, 2.25rem); display: grid; align-content: start; gap: 1.25rem; border-top: 1px solid var(--rule); max-height: clamp(360px, 58vh, 660px); overflow-y: auto; }
@media (min-width: 1000px) { .mapx__panel { border-top: 0; border-left: 1px solid var(--rule); } }
.mapx__panel h3 { font-size: var(--t-h3); }
.mapx__list { display: grid; gap: .2rem; }
.mapx__item { display: grid; grid-template-columns: 4.6rem 1fr; gap: .9rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--rule-soft); }
.mapx__item img { width: 4.6rem; height: 3.4rem; object-fit: cover; background: var(--paper-3); }
.mapx__item b { font-family: var(--serif); font-weight: 400; font-size: 1.02rem; line-height: 1.15; display: block; }
.mapx__item span { font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mapx__empty { color: var(--muted); font-size: var(--t-small); }

/* ── filters ────────────────────────────────────────────────────────────── */
.filters { position: relative; z-index: 20; background: var(--paper); border-block: 1px solid var(--rule); }
.filters__in { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding-block: 1rem; }

/* On a phone the row used to wrap into a 285px-tall block that buried the
   grid. One scrollable line instead. */
@media (max-width: 860px) {
  .filters { border-top: 0; }
  .filters__in {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-block: .85rem; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
    scroll-padding-inline: var(--gut);
  }
  .filters__in::-webkit-scrollbar { display: none; }
  .filters__in > * { flex: 0 0 auto; }
  .fcount { margin-left: .5rem; order: 99; }
  .fviews { order: 98; }
}
.fsel { position: relative; }
.fsel select {
  appearance: none; border: 1px solid var(--rule); background: transparent;
  padding: .68em 2.4em .68em 1em; font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  min-height: 40px; cursor: pointer; transition: border-color .3s;
}
.fsel select:hover { border-color: var(--ink); }
.fsel::after { content: ""; position: absolute; right: 1em; top: 50%; width: 6px; height: 6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.fsel--on select { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.fsel--on::after { border-color: var(--paper); }
.ftoggle {
  border: 1px solid var(--rule); padding: .68em 1.1em; min-height: 40px;
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; transition: all .3s;
}
.ftoggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fcount { margin-left: auto; font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.fviews { display: inline-flex; border: 1px solid var(--rule); }
.fviews button { padding: .68em 1.1em; font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; min-height: 40px; }
.fviews button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.fclear { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: .68em .4em; }
.fclear:hover { color: var(--ink); }

.is-hidden { display: none !important; }

/* ── gallery ────────────────────────────────────────────────────────────── */
.gal { display: grid; gap: clamp(.4rem, 1vw, .9rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gal { grid-template-columns: repeat(6, 1fr); } }
.gal figure { position: relative; overflow: hidden; margin: 0; background: var(--paper-3); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gal button:hover img { transform: scale(1.04); }
.gal button { display: block; width: 100%; height: 100%; }
.gal figcaption {
  position: absolute; left: 0; bottom: 0; padding: .7rem .9rem; color: #fff;
  font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
  text-shadow: 0 1px 12px #0b0a08b3; opacity: 0; transition: opacity .4s var(--ease);
}
.gal figure:hover figcaption { opacity: 1; }
@media (min-width: 760px) {
  .gal .g-w2 { grid-column: span 2; }
  .gal .g-w3 { grid-column: span 3; }
  .gal .g-w4 { grid-column: span 4; }
  .gal .g-w6 { grid-column: span 6; }
  .gal .g-t2 { grid-row: span 2; }
}
.gal--locked { position: relative; }
.gal__lock {
  position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top, var(--paper) 34%, #fbf9f500);
  display: grid; place-items: end center; padding-bottom: 1.5rem; text-align: center;
}
.gal__lock > div { display: grid; gap: 1rem; justify-items: center; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 120; background: #0b0a08f2; display: none; place-items: center; }
.lb[data-open="true"] { display: grid; }
.lb img { max-width: 94vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.lb__x, .lb__p, .lb__n {
  position: absolute; color: #fff; padding: 1rem; min-width: 44px; min-height: 44px;
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1; opacity: .75; transition: opacity .3s;
}
.lb__x:hover, .lb__p:hover, .lb__n:hover { opacity: 1; }
.lb__x { top: .6rem; right: .6rem; }
.lb__p { left: .3rem; top: 50%; transform: translateY(-50%); }
.lb__n { right: .3rem; top: 50%; transform: translateY(-50%); }
.lb__cap { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: #ffffffa6; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; }

/* ── forms ──────────────────────────────────────────────────────────────── */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field > span { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  padding: .78em 0; font-size: 1rem; min-height: 46px; transition: border-color .3s;
  border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field input::placeholder { color: #b7b0a4; }
.field.err input, .field.err select { border-color: var(--warn); }
.field .msg { font-size: var(--t-micro); color: var(--warn); letter-spacing: .1em; text-transform: uppercase; display: none; }
.field.err .msg { display: block; }
.section--dark .field > span { color: var(--on-deep-mut); }
.section--dark .field input, .section--dark .field select { border-color: #ffffff3d; color: var(--on-deep); }
.section--dark .field input:focus { border-color: var(--on-deep); }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px;
  border: 1px solid var(--rule); padding: .55em 1.05em; cursor: pointer;
  font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
}
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.section--dark .chip span { border-color: #ffffff3d; }
.section--dark .chip input:checked + span { background: var(--on-deep); color: var(--ink); border-color: var(--on-deep); }
.chips.invalid .chip span { border-color: var(--warn); }

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-small); line-height: 1.45; color: var(--muted); }
.consent input { margin-top: .3em; width: 16px; height: 16px; accent-color: var(--ink); flex: 0 0 auto; }
.section--dark .consent { color: var(--on-deep-mut); }

.form__ok { display: none; }
.form__ok.show { display: grid; gap: .8rem; }
.form__ok h3 { font-size: var(--t-h3); }

/* ── modal ──────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 130; display: none; }
.modal[data-open="true"] { display: block; }
.modal__veil { position: absolute; inset: 0; background: #0b0a08bf; opacity: 0; transition: opacity .45s var(--ease); }
.modal[data-open="true"] .modal__veil { opacity: 1; }
.modal__box {
  position: absolute; inset: auto 0 0 0; max-height: 92svh; overflow-y: auto;
  background: var(--paper); padding: clamp(1.5rem, 4vw, 3rem);
  transform: translateY(100%); transition: transform .55s var(--ease);
}
.modal[data-open="true"] .modal__box { transform: none; }
@media (min-width: 720px) {
  .modal__box { inset: 50% auto auto 50%; width: min(560px, 92vw); transform: translate(-50%, -46%) scale(.98); opacity: 0; transition: transform .5s var(--ease), opacity .4s; }
  .modal[data-open="true"] .modal__box { transform: translate(-50%,-50%); opacity: 1; }
}
.modal__x { position: absolute; top: .75rem; right: .75rem; padding: .8rem; min-width: 44px; min-height: 44px; font-size: 1.1rem; line-height: 1; }
.modal__head { margin-bottom: 1.25rem; display: grid; gap: .5rem; }
.modal__head h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); }
.modal__head p { font-size: var(--t-small); color: var(--muted); max-width: 42ch; line-height: 1.5; }

/* ── sticky action bar ──────────────────────────────────────────────────── */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--ink); color: var(--paper);
  transform: translateY(102%); transition: transform .55s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky[data-show="true"] { transform: none; }
.sticky__in { display: flex; align-items: stretch; max-width: var(--maxw); margin-inline: auto; }
.sticky__msg { display: none; flex: 1; align-items: center; padding: 0 var(--gut); font-size: var(--t-small); color: #ffffffb8; }
@media (min-width: 860px) { .sticky__msg { display: flex; } }
.sticky__msg b { color: var(--paper); font-weight: 400; }
.sticky a, .sticky button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5em;
  padding: 1.15em .8em; min-height: 54px; font-size: var(--t-micro);
  letter-spacing: .18em; text-transform: uppercase; text-align: center;
  border-left: 1px solid #ffffff1f; transition: background .35s var(--ease);
}
@media (min-width: 860px) { .sticky a, .sticky button { flex: 0 0 auto; min-width: 190px; } }
.sticky a:hover, .sticky button:hover { background: #ffffff17; }
.sticky .is-primary { background: var(--paper); color: var(--ink); }
.sticky .is-primary:hover { background: #fff; }

/* ── whatsapp / contact fab ─────────────────────────────────────────────── */
.fab {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); z-index: 85;
  bottom: calc(clamp(1rem, 2.5vw, 2rem) + env(safe-area-inset-bottom));
  display: grid; gap: .6rem; justify-items: end;
  transition: transform .5s var(--ease);
  /* the container spans the closed panel too, so it must not take the taps */
  pointer-events: none;
}
.fab > *, .fab__btn, .fab__card { pointer-events: auto; }
.fab__card { pointer-events: none; }
.fab[data-open="true"] .fab__card { pointer-events: auto; }
body.sticky-on .fab { transform: translateY(-58px); }
.fab__btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  box-shadow: 0 12px 34px -12px #14120f80;
  transition: transform .4s var(--ease), background .4s;
}
.fab__btn:hover { transform: translateY(-2px); }
.fab__btn svg { width: 22px; height: 22px; fill: currentColor; }
.fab__card {
  width: min(310px, calc(100vw - 2rem)); background: var(--paper); border: 1px solid var(--rule);
  padding: 1.25rem; display: grid; gap: .75rem;
  box-shadow: 0 24px 60px -30px #14120f66;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  transform-origin: bottom right;
}
.fab[data-open="true"] .fab__card { opacity: 1; visibility: visible; transform: none; }
.fab__card h4 { font-family: var(--serif); font-size: 1.15rem; }
.fab__card p { font-size: var(--t-small); color: var(--muted); line-height: 1.45; }
.fab__chips { display: grid; gap: .4rem; }
.fab__chips button, .fab__chips a {
  text-align: left; border: 1px solid var(--rule); padding: .7em .9em; font-size: var(--t-small);
  transition: background .3s, border-color .3s; min-height: 42px; display: flex; align-items: center;
}
.fab__chips button:hover, .fab__chips a:hover { background: var(--paper-2); border-color: var(--ink); }

/* ── contextual nudge ───────────────────────────────────────────────────── */
.nudge {
  position: fixed; left: clamp(1rem, 2.5vw, 2rem); z-index: 84;
  bottom: calc(clamp(1rem, 2.5vw, 2rem) + env(safe-area-inset-bottom));
  width: min(360px, calc(100vw - 2rem));
  background: var(--paper); border: 1px solid var(--rule); padding: 1.4rem;
  box-shadow: 0 26px 70px -34px #14120f73;
  display: grid; gap: .85rem;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.nudge[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
body.sticky-on .nudge { transform: translateY(-58px); }
body.sticky-on .nudge[data-show="true"] { transform: translateY(-58px); }
.nudge__x { position: absolute; top: .35rem; right: .35rem; padding: .7rem; min-width: 40px; min-height: 40px; color: var(--muted); font-size: 1rem; line-height: 1; }
.nudge__x:hover { color: var(--ink); }
.nudge h4 { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; padding-right: 1.5rem; }
.nudge p { font-size: var(--t-small); color: var(--muted); line-height: 1.45; }
@media (max-width: 600px) { .nudge { display: none; } }

/* ── private list popup ─────────────────────────────────────────────────── */
.plist { position: fixed; inset: 0; z-index: 125; display: none; }
.plist[data-open="true"] { display: block; }
.plist__veil { position: absolute; inset: 0; background: #0b0a08b8; opacity: 0; transition: opacity .5s var(--ease); }
.plist[data-open="true"] .plist__veil { opacity: 1; }
.plist__box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-46%);
  width: min(820px, 94vw); max-height: 92svh; overflow: hidden;
  background: var(--paper); display: grid; opacity: 0;
  transition: transform .6s var(--ease), opacity .45s;
  box-shadow: 0 40px 90px -40px #14120f8c;
}
.plist[data-open="true"] .plist__box { transform: translate(-50%,-50%); opacity: 1; }
@media (min-width: 800px) { .plist__box { grid-template-columns: 300px 1fr; } }
/* On a phone the portrait sits above the letter as a shallow band, so it never
   pushes the email field below the fold; from 800px it becomes the left panel. */
.plist__img { position: relative; background: var(--paper-3); aspect-ratio: 5/3; }
@media (min-width: 800px) { .plist__img { display: block; aspect-ratio: auto; } }
.plist__img img { width: 100%; height: 100%; object-fit: cover; }
/* the studio portrait is shot on white, so a hairline keeps it from bleeding
   into the paper of the panel beside it */
.plist__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 800px) { .plist__img::after { border-bottom: 0; border-right: 1px solid var(--rule); } }
.plist__body { padding: clamp(1.5rem, 4vw, 2.75rem); display: grid; align-content: center; gap: 1rem; }
.plist__body h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); max-width: 16ch; }
.plist__body p { font-size: var(--t-small); color: var(--muted); line-height: 1.5; max-width: 40ch; }
.plist__x { position: absolute; top: .6rem; right: .6rem; padding: .8rem; min-width: 44px; min-height: 44px; z-index: 2; font-size: 1.1rem; line-height: 1; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.ftr { background: var(--deep); color: var(--on-deep); padding-block: clamp(3.5rem, 7vw, 7rem) 2rem; }
.ftr__top { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .ftr__top { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; } }
.ftr__brand svg, .ftr__brand img { height: 58px; width: auto; }
.ftr__brand p { margin-top: 1.35rem; font-size: var(--t-small); color: var(--on-deep-mut); max-width: 32ch; line-height: 1.55; }
.ftr h4 { font-size: var(--t-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--on-deep-mut); margin-bottom: 1.15rem; }
.ftr__list { display: grid; gap: .55rem; }
.ftr__list a { font-size: var(--t-small); opacity: .88; transition: opacity .3s; }
.ftr__list a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .35em; }
.ftr__contact { display: grid; gap: .7rem; font-size: var(--t-small); }
.ftr__contact a { border-bottom: 1px solid #ffffff2e; padding-bottom: .1em; }
.ftr__contact a:hover { border-color: currentColor; }
.ftr__bottom { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid #ffffff1f; display: grid; gap: 1.25rem; }
.ftr__legal { font-size: .68rem; line-height: 1.65; color: #8b8377; max-width: 100%; }
.ftr__meta { display: flex; flex-wrap: wrap; gap: .8rem 1.75rem; align-items: center; font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--on-deep-mut); }
.ftr__meta a:hover { color: var(--on-deep); }
.eho { width: 13px; height: 13px; fill: currentColor; flex: 0 0 auto; }

/* ── reveal ─────────────────────────────────────────────────────────────── */
/* Hidden only once the script has armed the reveal — see site.js. */
.reveal-armed .rv { opacity: 0; transform: translateY(22px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
.reveal-armed .rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .09s } .rv-d2 { transition-delay: .18s }
.rv-d3 { transition-delay: .27s } .rv-d4 { transition-delay: .36s }
/* Hidden only once the script has armed the reveal — see site.js. */
.reveal-armed .rv-mask { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease); }
.reveal-armed .rv-mask.in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-mask { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .media > img, .card__media img, .acard__media img, .gal img { transition: none !important; }
  .hero__scroll::after { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ── utilities ──────────────────────────────────────────────────────────── */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.stack--c { justify-items: center; text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.mt-1 { margin-top: .8rem } .mt-2 { margin-top: 1.6rem } .mt-3 { margin-top: 2.6rem } .mt-4 { margin-top: 4rem }
.tc { text-align: center; }
.nowrap { white-space: nowrap; }

/* ── the wordmark ───────────────────────────────────────────────────────── */
/* Brand standards Vol. I §01 and §08. The mark is TYPE, not a placed asset:
   Cormorant Garamond 400, all caps, 0.42em uniform tracking, MIAMI beneath in
   Inter at 22% of the wordmark height, bracketed by em dashes, optically
   centred one cap-height below. §01 rule: the two are inseparable — the
   wordmark is never shown alone — so the tagline is part of the component,
   not an option on it.

   Built as live text rather than an image so it stays razor-sharp at any size,
   inherits the header's colour as it crosses the hero (no two-file cross-fade
   to keep in register), and is readable to search engines and screen readers.
   §08 also forbids bolding, re-tracking, ornament and colour — hence the
   locked weight and the inherited currentColor. */
.wordmark {
  display: block;
  font-family: var(--serif);
  font-weight: 400;                 /* §08 · do not weight up */
  font-style: normal;
  line-height: 1;
  color: currentColor;
  text-align: center;
  white-space: nowrap;
  --wm: clamp(19px, 1.95vw, 30px);  /* the wordmark's own type size */
  --wm-floor: 8.5px;                /* smallest the tagline may be set */
  --wm-tagtrack: .95em;             /* kit tracking; tightened at small cuts */
}
.wordmark__word {
  display: block;
  font-size: var(--wm);
  letter-spacing: .42em;            /* §01 · do not alter the tracking */
  text-indent: .42em;               /* re-centres against the trailing track */
  text-transform: uppercase;
}
/* §01 puts the tagline at 22% of the wordmark height. Held to exactly that
   ratio, a 30px masthead gives a 6.6px tagline and a 19px one gives 4.2px —
   sizes at which type stops being type. The ratio is therefore respected
   down to a floor of 8.5px, below which the mark would be reproducing a
   proportion at the cost of the word it exists to say. At the kit's larger
   approved scales the ratio governs on its own and the floor never applies. */
.wordmark__tag {
  display: block;
  font-family: var(--sans);
  font-size: max(calc(var(--wm) * .22), var(--wm-floor));
  font-weight: 400;
  letter-spacing: var(--wm-tagtrack);
  text-indent: var(--wm-tagtrack);
  text-transform: uppercase;
  margin-top: calc(var(--wm) * .40); /* §01 · one cap-height beneath */
  color: inherit;
  opacity: .82;
}
/* The em dashes are decoration around the tagline, not content — a screen
   reader should hear "B&S Luxury, Miami", not a run of punctuation. */
.wordmark__tag::before { content: "— "; }
.wordmark__tag::after  { content: " —"; }

/* Larger cuts. The kit's approved scale runs hero / primary / secondary /
   minimum; these are the same steps. */
.wordmark--hero    { --wm: clamp(30px, 3.6vw, 48px); }
.wordmark--primary { --wm: clamp(22px, 2.2vw, 32px); }
.wordmark--minimum { --wm: 13px; }

/* Below the breakpoint where the header still has room for both lines, the
   tagline would collide with the burger. It is never dropped — §01 — so the
   whole mark steps down instead. */
@media (max-width: 420px) { .wordmark { --wm: 17px; } }

/* ── map refinements ────────────────────────────────────────────────────── */
.mapx__stage { background: #dbe3e5; }
.mapx__water { fill: #d7e0e2; }
/* superseded by the chart treatment in components.css */
/* superseded by the chart treatment in components.css */

/* Labels are quiet until the pin matters, which keeps a dense coast legible. */
.map-pin__label { opacity: 0; transition: opacity .28s var(--ease); }
.map-pin--has .map-pin__label { opacity: .72; }
.map-pin:hover .map-pin__label,
.map-pin:focus-visible .map-pin__label,
.map-pin[aria-pressed="true"] .map-pin__label { opacity: 1; font-weight: 500; }
/* superseded by the chart treatment in components.css */
/* superseded by the chart treatment in components.css */
/* The browser's own focus ring is drawn round the whole group — pin, leader
   and label together — which lands as a heavy black slab across the middle of
   the map. The pin draws its own ring instead. */
.map-pin:focus, .map-pin:focus-visible, .map-pin:active { outline: none; }
.map-pin:focus-visible .map-pin__ring { opacity: .9; }
.map-pin--link { cursor: pointer; }

.mapx__item:hover b { text-decoration: underline; text-underline-offset: .25em; }
.mapx__panel::-webkit-scrollbar { width: 4px; }
.mapx__panel::-webkit-scrollbar-thumb { background: var(--rule); }

/* card reveal must never leak before hover */
.card__reveal { max-height: 0; }
.map-pin__leader { stroke: var(--ink); stroke-width: .28; fill: none; opacity: 0; transition: opacity .28s var(--ease); }
.map-pin--has .map-pin__leader { opacity: .3; }
.map-pin:hover .map-pin__leader, .map-pin[aria-pressed="true"] .map-pin__leader { opacity: .75; }

/* ── tap targets ────────────────────────────────────────────────────────────
   Anything genuinely interactive clears 44px of hit area, without the layout
   inheriting the padding: the extra area is claimed with a pseudo-element so
   type rhythm in prose and footers stays intact. */
.tlink { min-height: 44px; align-items: center; }
.burger { padding: .8rem .55rem; }
.brand { min-height: 44px; align-items: center; }

/* Horizontal rows can safely claim a taller invisible band: neighbours sit
   side by side, so the bands never overlap each other. */
.crumbs a, .ftr__meta a { position: relative; display: inline-block; }
.crumbs a::before, .ftr__meta a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
.crumbs { gap: .55rem .9rem; }
.ftr__meta { gap: 1.1rem 1.75rem; }

/* Stacked lists get real padding instead — an invisible band would overlap the
   link above and steal its taps. */
.ftr__list { gap: 0; }
.ftr__list a { padding-block: .62rem; display: block; }
.ftr__contact { gap: .35rem; }
.ftr__contact a { padding-block: .58rem; display: inline-block; }
.lang__list a, .drawer__langs a { display: block; }

.fclear { min-height: 44px; display: inline-flex; align-items: center; }
.mapx__regions button, .fviews button, .ftoggle, .fsel select { min-height: 44px; }
.gal button { min-height: 44px; }
.lb__cap { pointer-events: none; }

@media (max-width: 600px) {
  /* the sticky bar owns the bottom of the viewport — keep the page clear of it */
  body.sticky-on { padding-bottom: 54px; }
  .sticky a, .sticky button { padding: 1.05em .5em; font-size: .64rem; letter-spacing: .12em; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .gal figure { grid-column: span 1 !important; grid-row: span 1 !important; }
  .facts div { grid-template-columns: 1fr; gap: .3rem; }
  .facts dd { font-size: 1.05rem; }
  .mapx__stage { min-height: 62vh; }
  .mapx__panel { max-height: none; }
  .map-pin__label { font-size: 3.6px; }
  .map-pin__hit { r: 6; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO HERO
   An eight-second aerial of South Pointe, looping without a seam. The poster
   paints first and stays underneath; the film fades in on top once it can
   actually play, so there is never a flash of empty black between the two.
   Concatenated after site.css into the single hashed stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */

.vhero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--deep);
  color: var(--on-deep);
  isolation: isolate;
}

/* ── the film ─────────────────────────────────────────────────────────────── */
.vhero__stage { position: absolute; inset: 0; z-index: 0; }

.vhero__poster,
.vhero__poster img,
.vhero__film {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.vhero__poster { display: block; }

/* The film sits over the poster and fades in only once it is genuinely
   playing. Until then the poster is what the visitor sees — which is also
   what a reduced-motion visitor, a failed autoplay and a data-saver visitor
   all see, with no separate code path. */
.vhero__film {
  opacity: 0;
  transition: opacity .9s var(--ease);
  z-index: 1;
}
.vhero.is-playing .vhero__film[data-active] { opacity: 1; }

/* Orientation switch. Only one film is ever in the layout, so only one is
   ever decoded — the other is display:none and costs nothing. */
.vhero__film[data-film="tall"] { display: none; }
@media (max-aspect-ratio: 3/4) {
  .vhero__film[data-film="wide"] { display: none; }
  .vhero__film[data-film="tall"] { display: block; }
}

/* ── the ground under the type ────────────────────────────────────────────── */
/* Two gradients, not one. The vertical wash alone was not enough: the copy
   block sits over the beach and the water, which are the brightest part of
   the frame, and Paper-coloured type on bright sand is not readable at any
   opacity. So a second horizontal wash darkens the column the copy actually
   occupies, and the right-hand side of the picture stays open.

   Onyx at opacity throughout — no second hue enters the system. */
.vhero__veil {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to right,
      rgba(14,13,11,.78) 0%,
      rgba(14,13,11,.62) 32%,
      rgba(14,13,11,.24) 62%,
      rgba(14,13,11,.06) 100%),
    linear-gradient(to top,
      rgba(14,13,11,.72) 0%,
      rgba(14,13,11,.46) 26%,
      rgba(14,13,11,.20) 55%,
      rgba(14,13,11,.10) 75%,
      rgba(14,13,11,.34) 100%);
}
/* On a phone the copy runs the full width, so the horizontal wash has nothing
   to protect and would only flatten the picture — but the copy also covers far
   more of the frame, so the vertical wash has to carry the whole job. */
@media (max-width: 700px) {
  .vhero__veil {
    background: linear-gradient(to top,
      rgba(14,13,11,.88) 0%,
      rgba(14,13,11,.74) 32%,
      rgba(14,13,11,.56) 58%,
      rgba(14,13,11,.40) 78%,
      rgba(14,13,11,.52) 100%);
  }
}

/* ── buttons over the film ────────────────────────────────────────────────── */
/* The base .btn is ink-on-paper and is unreadable over a photograph. These are
   its three over-image cuts, and they are a real hierarchy: one filled, one
   outlined, one bare. Three identical buttons would be three non-decisions. */
.vhero .btn { --btn-fg: var(--on-deep); --btn-bd: rgba(250,246,239,.45); }

/* Primary — solid Paper, Onyx type. The only filled control in the hero. */
.btn--solid-l {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--solid-l::before { background: var(--ink); }
.btn--solid-l:hover, .btn--solid-l:focus-visible { color: var(--paper); border-color: var(--paper); }

/* Secondary — outlined, with just enough ground behind it to hold the letters
   over sand. backdrop-filter is a bonus where supported and absent elsewhere;
   the translucent fill alone already carries the contrast. */
.btn--ghost {
  color: var(--on-deep);
  border-color: rgba(250,246,239,.62);
  background: rgba(14,13,11,.30);
  backdrop-filter: blur(2px);
}
.btn--ghost::before { background: var(--paper); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); border-color: var(--paper); }

/* Tertiary — no box at all. A rule under the label carries it. */
.btn--quiet {
  color: var(--on-deep);
  border-color: transparent;
  padding-inline: .4em;
}
.btn--quiet::before { display: none; }
.btn--quiet span {
  border-bottom: 1px solid rgba(250,246,239,.42);
  padding-bottom: .3em;
  transition: border-color .35s var(--ease);
}
.btn--quiet:hover span, .btn--quiet:focus-visible span { border-bottom-color: var(--paper); }

/* ── copy ─────────────────────────────────────────────────────────────────── */
.vhero__in {
  position: relative; z-index: 3;
  padding-bottom: clamp(5.5rem, 11vh, 9.5rem);
  padding-top: calc(var(--nav-h) + 3rem);
}
/* The copy takes the full column at every width. Capping it at 24ch on a
   phone parked the whole hero in the left two-thirds of the screen and left a
   dead strip down the right. */
.vhero__copy { max-width: none; }

.vhero__eyebrow {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--on-deep);
  opacity: .72;
  margin-bottom: clamp(1.1rem, 2.4vh, 1.9rem);
}

.vhero__title {
  font-size: var(--t-hero);
  line-height: .98;
  letter-spacing: -.018em;
  max-width: 15ch;
  text-wrap: balance;
}
/* Below the desktop breakpoint the measure comes off entirely — the viewport
   is already the measure. */
@media (max-width: 700px) {
  .vhero__title { max-width: none; }
  .vhero__sub { max-width: none; }
}
.vhero__line { display: block; }
/* §08 forbids introducing colour, so the second line is stressed in italic —
   which in a Garamond reads as emphasis without a second value entering. */
.vhero__title em { font-style: italic; letter-spacing: -.008em; }

.vhero__sub {
  margin-top: clamp(1.2rem, 3vh, 2.1rem);
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.5;
  max-width: 44ch;
  color: var(--on-deep);
  opacity: .88;
}

.vhero__ctas {
  display: flex; flex-wrap: wrap;
  gap: .75rem clamp(.75rem, 1.6vw, 1.1rem);
  margin-top: clamp(1.9rem, 4.5vh, 3rem);
  align-items: center;
}
/* On a phone the three routes stay a wrapping row of buttons sized to their
   own labels. Stretched to the full width they read as a stack of banners
   rather than as a choice, and the screen edge became the button edge. */
@media (max-width: 560px) {
  .vhero__ctas { gap: .5rem; }
  .vhero__ctas .btn {
    width: auto;
    flex: 0 1 auto;
    padding: .85em 1.15em;
    min-height: 40px;
    font-size: 0.6rem;
    letter-spacing: .1em;
  }
}

/* ── entrance ─────────────────────────────────────────────────────────────── */
/* CSS-driven, so the hero animates in whether or not the script ever runs. */
@media (prefers-reduced-motion: no-preference) {
  .vhero__eyebrow, .vhero__line, .vhero__sub, .vhero__ctas {
    animation: vhero-rise .95s var(--ease) both;
  }
  .vhero__line:nth-child(1) { animation-delay: .10s; }
  .vhero__line:nth-child(2) { animation-delay: .20s; }
  .vhero__sub               { animation-delay: .32s; }
  .vhero__ctas              { animation-delay: .44s; }
}
@keyframes vhero-rise {
  from { opacity: 0; transform: translate3d(0, 1.1rem, 0); }
  to   { opacity: 1; transform: none; }
}

/* ── controls ─────────────────────────────────────────────────────────────── */
.vhero__pause {
  position: absolute; z-index: 4;
  right: var(--gut); bottom: clamp(1.25rem, 3vh, 2.25rem);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(250,246,239,.34);
  border-radius: 50%;
  color: var(--on-deep);
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.vhero__pause:hover { border-color: rgba(250,246,239,.72); background: rgba(250,246,239,.10); }

/* Two bars when playing, one triangle when paused — drawn, so there is no
   icon file and no swap to keep in sync. */
.vhero__pause-ico { width: 10px; height: 11px; position: relative; display: block; }
.vhero__pause-ico::before, .vhero__pause-ico::after {
  content: ""; position: absolute; top: 0; width: 3px; height: 11px; background: currentColor;
  transition: all .3s var(--ease);
}
.vhero__pause-ico::before { left: 0; }
.vhero__pause-ico::after  { right: 0; }
.vhero__pause[aria-pressed="true"] .vhero__pause-ico::before {
  left: 1px; width: 0; height: 0; background: none;
  border-left: 9px solid currentColor;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
}
.vhero__pause[aria-pressed="true"] .vhero__pause-ico::after { opacity: 0; }

.vhero__scroll {
  position: absolute; z-index: 4;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(1.25rem, 3vh, 2.25rem);
  display: inline-flex; flex-direction: column; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: var(--t-micro);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--on-deep); opacity: .62;
  min-height: 44px; justify-content: center;
  transition: opacity .35s var(--ease);
}
.vhero__scroll:hover { opacity: 1; }
.vhero__scroll i { display: block; width: 1px; height: 26px; background: currentColor; opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .vhero__scroll i { animation: vhero-tick 2.4s var(--ease-io) infinite; transform-origin: top; }
}
@keyframes vhero-tick {
  0%, 100% { transform: scaleY(.35); opacity: .35; }
  50%      { transform: scaleY(1);   opacity: .75; }
}
/* The scroll cue and the pause button would collide on a narrow phone. */
@media (max-width: 520px) { .vhero__scroll { display: none; } }

/* ── reduced motion ───────────────────────────────────────────────────────── */
/* The film is never attached, so this is belt and braces for a preference that
   changes after load: freeze whatever is on screen and hide the control. */
@media (prefers-reduced-motion: reduce) {
  .vhero__film { display: none !important; }
  .vhero__pause { display: none; }
  .vhero__scroll i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADDED COMPONENTS
   Residence listing cards, the redesigned action rail, the contact rail,
   the compact criteria finder and its live preview.
   Concatenated after site.css and hero.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── residence cards ───────────────────────────────────────────────────────
   Built from each development's own published price list. Deliberately small:
   these are a summary of what is released, not an MLS grid. */
.units { display: grid; gap: clamp(.75rem, 1.4vw, 1.1rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); }

.unit {
  position: relative; display: grid; grid-template-rows: auto 1fr;
  background: var(--paper); border: 1px solid var(--rule-soft);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.unit:hover { border-color: var(--rule); transform: translateY(-2px); box-shadow: 0 18px 40px -30px rgba(20,18,15,.5); }

.unit__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--paper-3); }
.unit__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.unit:hover .unit__media img { transform: scale(1.04); }
.unit__tag {
  position: absolute; top: .55rem; left: .55rem;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .38em .7em; background: rgba(20,18,15,.82); color: var(--paper);
  backdrop-filter: blur(4px);
}

.unit__body { padding: .95rem 1rem 1.05rem; display: grid; align-content: start; gap: .5rem; }
.unit__price { font-family: var(--serif); font-size: 1.22rem; line-height: 1; letter-spacing: -.01em; }
.unit__price small { font-family: var(--sans); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .3rem; }
.unit__spec { display: flex; flex-wrap: wrap; gap: .3rem .55rem; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.unit__spec b { font-weight: 500; color: var(--ink); }
.unit__spec span { white-space: nowrap; }
.unit__foot { margin-top: .35rem; padding-top: .7rem; border-top: 1px solid var(--rule-soft); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.unit__cta {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  min-height: 34px; display: inline-flex; align-items: center; gap: .4em;
  border-bottom: 1px solid var(--rule); padding-bottom: .1em; transition: border-color .3s;
}
.unit__cta:hover { border-color: var(--ink); }
.unit__cta .arw { transition: transform .35s var(--ease); }
.unit__cta:hover .arw { transform: translateX(.3em); }
.unit__from { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.section--dark .unit { background: #ffffff08; border-color: #ffffff1f; }
.section--dark .unit:hover { border-color: #ffffff38; }
.section--dark .unit__spec b { color: var(--on-deep); }
.section--dark .unit__foot { border-color: #ffffff1a; }
.section--dark .unit__cta { border-color: #ffffff33; }
.section--dark .unit__cta:hover { border-color: var(--on-deep); }

/* ── the action rail (replaces the old sticky bar) ─────────────────────────
   A thin private-client rail rather than a cookie banner: hairline top rule,
   the context on the left, two actions on the right. */
.rail {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(14,12,10,.92);
  backdrop-filter: blur(14px) saturate(1.1);
  border-top: 1px solid #ffffff1f;
  color: var(--on-deep);
  transform: translateY(102%);
  transition: transform .6s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.rail[data-show="true"] { transform: none; }
.rail__in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; gap: 1.25rem; min-height: 60px;
}
.rail__ctx { display: none; flex: 1; min-width: 0; align-items: baseline; gap: .85rem; }
@media (min-width: 780px) { .rail__ctx { display: flex; } }
.rail__label { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: #ffffff70; flex: 0 0 auto; }
.rail__name {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail__meta { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #ffffff8c; flex: 0 0 auto; }

.rail__acts { display: flex; align-items: stretch; gap: .5rem; flex: 1; justify-content: flex-end; padding-block: .6rem; }
@media (max-width: 779px) { .rail__acts { flex: 1; } }
.rail__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .8em 1.35em; min-height: 42px; flex: 1;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid #ffffff2e; color: var(--on-deep);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  text-align: center;
}
@media (min-width: 780px) { .rail__btn { flex: 0 0 auto; min-width: 180px; } }
.rail__btn:hover { background: #ffffff14; border-color: #ffffff5c; }
.rail__btn--go { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.rail__btn--go:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ── floating contact buttons ──────────────────────────────────────────────
   Call, WhatsApp, message. On every page, bottom-right, above the rail. */
.contact-rail {
  position: fixed; z-index: 86;
  right: clamp(.85rem, 2.2vw, 1.6rem);
  bottom: calc(clamp(.85rem, 2.2vw, 1.6rem) + env(safe-area-inset-bottom));
  display: grid; gap: .6rem; justify-items: center;
  pointer-events: none;
  transition: transform .55s var(--ease);
}
body.rail-on .contact-rail { transform: translateY(-64px); }
.contact-rail > * { pointer-events: auto; }

.crb {
  width: clamp(46px, 5.2vw, 54px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  color: #fff; box-shadow: 0 10px 26px -10px rgba(0,0,0,.55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.crb svg { width: 45%; height: 45%; fill: currentColor; }
.crb:hover, .crb:focus-visible { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 32px -12px rgba(0,0,0,.6); }

.crb--call { background: #93826C; }        /* warm stone, not a metallic */
.crb--call:hover { background: #7F6F5B; }
.crb--wa { background: #25D366; }
.crb--wa:hover { background: #1FB855; }
.crb--msg { background: var(--ink); }
.crb--msg:hover { background: #2A2621; }

/* The WhatsApp button used to pulse alone. All three do now — see the
   floating contact trio further down, where they share one staggered flash. */

.crb__tip {
  position: absolute; right: calc(100% + .6rem); top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: .5em .8em;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
@media (hover: hover) {
  .crb:hover .crb__tip { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@media (max-width: 600px) { .crb__tip { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .crb::after { animation: none; }
  .crb:hover { transform: none; }
}

/* ── lead capture: the invitation ──────────────────────────────────────────
   A paper card lifted off a dark ground, with the ask stated plainly. */
.invite { position: relative; }
.invite__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 960px) { .invite__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); } }

.invite__card {
  background: var(--paper); color: var(--ink);
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9);
  position: relative;
}
.invite__card::before {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--rule); pointer-events: none;
  transform: translate(10px, 10px); z-index: -1;
}
.invite__card h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .5rem; }
.invite__card > p { font-size: var(--t-small); color: var(--muted); line-height: 1.55; margin-bottom: 1.5rem; max-width: 44ch; }
.invite__card .field > span { color: var(--muted); }

.invite__points { display: grid; gap: .85rem; margin-top: 1.75rem; }
.invite__point { display: grid; grid-template-columns: 1.6rem 1fr; gap: .85rem; align-items: start; font-size: var(--t-small); }
.invite__point i {
  font-style: normal; font-size: .58rem; letter-spacing: .1em; color: var(--on-deep-mut);
  padding-top: .35em; font-variant-numeric: tabular-nums;
}
.invite__point b { font-weight: 400; display: block; }
.invite__point span { color: var(--on-deep-mut); }

/* focus underline that draws in */
.field { position: relative; }
.field input, .field select { position: relative; z-index: 1; }
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.field:focus-within::after { transform: scaleX(1); }
.section--dark .field::after, .invite .field::after { background: currentColor; }

/* ── the criteria finder ───────────────────────────────────────────────────
   Written as one object rather than a run of loose rows: a bordered panel on
   paper, the criteria on the left, the running count and the button held on
   the right behind a dividing rule. Reading it should feel like filling in a
   short form, not like scanning a page. */
.finder {
  display: grid; border: 1px solid var(--rule); background: var(--paper);
  box-shadow: 0 24px 60px -46px rgba(20, 18, 15, .5);
}
@media (min-width: 900px) {
  .finder { grid-template-columns: minmax(0, 1fr) minmax(300px, 366px); }
}

.finder__rows { display: grid; padding: clamp(.4rem, 1.4vw, 1rem) clamp(1.1rem, 2.4vw, 1.9rem); }
.finder__row {
  display: grid; gap: .55rem .9rem; padding: .95rem 0;
  border-bottom: 1px solid var(--rule-soft); align-items: center;
}
/* the label column is fixed so every set of chips starts on the same line */
@media (min-width: 620px) { .finder__row { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .55rem 1.1rem; } }
.finder__row:last-child { border-bottom: 0; }
.finder__label {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  line-height: 1.3;
}
.finder__row .chips { gap: .3rem; flex-wrap: wrap; }
.finder__row .chip span {
  min-height: 36px; display: inline-flex; align-items: center;
  padding: .42em .85em; font-size: .64rem; letter-spacing: .1em;
  border: 1px solid var(--rule-soft); background: var(--paper-2);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.finder__row .chip:hover span { border-color: var(--ink); }
.finder__row .chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.finder__row .chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the right-hand panel: what you have chosen so far, and the way out */
.finder__side {
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  display: grid; gap: .95rem; align-content: start;
  background: var(--paper-2); border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .finder__side { border-top: 0; border-left: 1px solid var(--rule); position: sticky; top: calc(var(--nav-h) + 1rem); }
}
.finder__count {
  font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1;
  padding-bottom: .85rem; border-bottom: 1px solid var(--rule-soft);
}
.finder__count small {
  display: block; font-family: var(--sans); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-top: .55rem;
}
.finder__preview { display: grid; max-height: 246px; overflow-y: auto; }
.finder__hit {
  display: grid; grid-template-columns: 3.6rem 1fr; gap: .75rem; align-items: center;
  padding: .55rem 0; border-bottom: 1px solid var(--rule-soft);
}
.finder__hit:last-child { border-bottom: 0; }
.finder__hit img { width: 3.6rem; height: 2.6rem; object-fit: cover; background: var(--paper-3); }
.finder__hit b { display: block; font-family: var(--serif); font-weight: 400; font-size: .92rem; line-height: 1.15; }
.finder__hit span { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.finder__none { font-size: var(--t-small); color: var(--muted); }
.finder__side .muted { font-size: var(--t-micro); line-height: 1.55; }

.section--alt .finder__side { background: var(--paper-2); }


/* ═══════════════════════════════════════════════════════════════════════════
   AREAS — split screen
   The map is the larger half and holds still; the areas are a compact index of
   places running down the left. A block is a name over a photograph, nothing
   more — hovering it lights the map, and the map is where the detail lives.
   ═══════════════════════════════════════════════════════════════════════════ */
.ax { display: grid; align-items: start; }
@media (min-width: 1000px) {
  .ax { grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
}
@media (min-width: 1500px) {
  .ax { grid-template-columns: minmax(0, 44%) minmax(0, 56%); }
}

.ax__list { padding: clamp(2rem, 4vw, 3rem) var(--gut) clamp(3rem, 6vw, 5rem); min-width: 0; }
@media (min-width: 1000px) { .ax__list { padding-right: clamp(1.25rem, 2.5vw, 2.25rem); } }

.ax__group + .ax__group { margin-top: clamp(2rem, 4vw, 3rem); }
.ax__region {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
  padding-bottom: .8rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule);
}
.ax__grid { display: grid; gap: clamp(.5rem, 1vw, .75rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Below this the two columns squeeze the name against the frame; one wide
   plate per row reads better and gives the photograph somewhere to go. */
@media (min-width: 1000px) and (max-width: 1459px) {
  .ax__grid { grid-template-columns: minmax(0, 1fr); }
}

/* half the height it used to be: the photograph and the name, and that is all */
.ax__area {
  position: relative; display: block; aspect-ratio: 16/6; overflow: hidden;
  background: var(--paper-3); min-width: 0;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ax__area img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.ax__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, #0a0907cc, #0a09073d 58%, #0a090714);
  transition: background .45s var(--ease);
}
.ax__name {
  position: absolute; inset: auto 0 0 0; padding: .85rem 1rem;
  font-family: var(--serif); font-size: clamp(1.02rem, 1.5vw, 1.34rem); line-height: 1.12;
  color: #fff;
}
.ax__area:hover, .ax__area:focus-visible, .ax__area[data-hot] { transform: translateY(-2px); box-shadow: 0 16px 34px -22px rgba(20,18,15,.6); }
.ax__area:hover img, .ax__area:focus-visible img, .ax__area[data-hot] img { transform: scale(1.06); }
.ax__area:hover .ax__veil, .ax__area[data-hot] .ax__veil { background: linear-gradient(to top, #0a0907d9, #0a090752 58%, #0a09071f); }

/* the map column */
.ax__map { display: none; }
@media (min-width: 1000px) {
  .ax__map { display: block; position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); }
  .ax__mapinner { position: relative; height: 100%; display: grid; }
}
.mapx--bare { border: 0; border-left: 1px solid var(--rule); height: 100%; }
.mapx--bare .mapx__stage { min-height: 0; height: 100%; }
/* no side panel here, so the stage gets the whole pane rather than the first
   track of the two-column grid the panelled map uses */
.mapx--bare { grid-template-columns: minmax(0, 1fr) !important; }
.ax__hint {
  position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 3;
  font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  background: #fbf9f5d9; padding: .55em .9em; backdrop-filter: blur(4px);
}

/* ── the map ────────────────────────────────────────────────────────────────
   Drawn, not tiled. Every dimension is in the frame's own user units — the
   same units the build uses to measure the labels and size the frame around
   them — so the marks and the lettering stay in proportion to the coastline
   however wide the pane turns out to be.

   The register is a printed chart rather than a screen map: bone paper, a bay
   held back to the palest wash, a hairline for the shore, and a mark small
   enough to read as a pin on a plate. */
.mapx .mapx__stage {
  background: radial-gradient(120% 80% at 50% 0%, #fbf9f4 0%, #f4f1e9 55%, #efebe1 100%);
}
.mapx .mapx__water { fill: #e6edef; }

/* the shallows: the same shore under a wide, faint stroke, laid first, the way
   an engraved chart doubles its coastline */
.mapx .mapx__shallow {
  fill: none; stroke: #cfdcdf; stroke-width: 2.4; opacity: .85;
  stroke-linejoin: round; stroke-linecap: round;
}
.mapx .mapx__land {
  fill: #faf7f0; stroke: #a89a80; stroke-width: .16; stroke-linejoin: round;
}
.mapx .mapx__road { stroke: #c2d0d3; stroke-width: .2; }

/* the plate rule, inset from the frame */
.mapx .mapx__plate {
  fill: none; stroke: #b6a992; stroke-width: .16; opacity: .5;
}

/* the compass */
.mapx .mapx__compass-ring { fill: none; stroke: #a89a80; stroke-width: .16; opacity: .65; }
.mapx .mapx__compass-needle { fill: none; stroke: #a89a80; stroke-width: .16; opacity: .75; }
.mapx .mapx__compass-north { fill: #6f6553; opacity: .8; }
.mapx .mapx__compass-n {
  font-family: var(--serif); font-size: 2.6px; fill: #6f6553; opacity: .75;
  letter-spacing: .1px;
}

/* Labels in the display face rather than a UI sans: on a drawn chart the
   lettering is part of the drawing. Small caps, lightly tracked, with a paper
   halo so a name crossing the shore stays legible. */
.mapx .map-pin__label {
  font-family: var(--serif); font-weight: 400;
  font-size: 3.15px; letter-spacing: .16px;
  font-variant-caps: all-small-caps; text-transform: none;
  fill: #6b6255; opacity: .82;
  paint-order: stroke; stroke: #faf7f0; stroke-width: .62px;
  transition: fill .3s var(--ease), opacity .3s var(--ease);
}
.mapx .map-pin--has .map-pin__label { fill: #3f382e; opacity: 1; }

/* the mark: small, and hollow where nothing is selling */
.mapx .map-pin__dot { r: .5px; fill: #574e42; }
.mapx .map-pin--has .map-pin__dot { r: .7px; fill: #2a251d; }
.mapx .map-pin--empty .map-pin__dot { fill: #faf8f2; stroke: #8c8172; stroke-width: .22px; }
.mapx .map-pin__leader { stroke: #b6a992; stroke-width: .12px; opacity: .75; }

/* the highlight: a ring around the mark and a breath of ground beneath it */
.mapx .map-pin__ring {
  r: 1.1px; fill: none; stroke: #2a251d; stroke-width: .18px;
  opacity: 0; transition: opacity .35s var(--ease), r .45s var(--ease);
}
.mapx .map-pin__halo {
  r: 2.4px; fill: #2a251d; opacity: 0;
  transition: opacity .35s var(--ease), r .45s var(--ease);
}
.mapx .map-pin:hover .map-pin__dot,
.mapx .map-pin:focus-visible .map-pin__dot,
.mapx .map-pin[aria-pressed="true"] .map-pin__dot { r: .9px; fill: #171309; }
.mapx .map-pin:hover .map-pin__ring,
.mapx .map-pin:focus-visible .map-pin__ring,
.mapx .map-pin[aria-pressed="true"] .map-pin__ring { opacity: .9; r: 1.9px; }
.mapx .map-pin:hover .map-pin__halo,
.mapx .map-pin:focus-visible .map-pin__halo,
.mapx .map-pin[aria-pressed="true"] .map-pin__halo { opacity: .07; r: 3.6px; }
.mapx .map-pin[aria-pressed="true"] .map-pin__label,
.mapx .map-pin:hover .map-pin__label,
.mapx .map-pin:focus-visible .map-pin__label { fill: #171309; opacity: 1; }

.mapx .mapx__svg { width: 100%; height: 100%; display: block; }

.mapx--large .mapx__regions { top: 1.5rem; left: 1.5rem; }
.mapx__regions button {
  padding: .7em 1.2em; background: #fbf9f5e6; color: var(--ink); border-color: #cabfa9;
}
/* the pressed state must be restated: the rule above would otherwise leave the
   button with paper-coloured text on a paper-coloured ground */
.mapx__regions button[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .ax__area, .ax__area img { transition: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONE-CLICK SEARCHES
   Eight briefs, each with the count of developments that actually match.
   The number is the hook: it proves there is something behind the click.
   ═══════════════════════════════════════════════════════════════════════════ */
.tiles {
  display: grid; gap: clamp(.6rem, 1.1vw, .9rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.tile {
  position: relative; display: grid; align-content: end; text-align: left;
  min-height: clamp(200px, 20vw, 250px); overflow: hidden; isolation: isolate;
  border: 1px solid #ffffff1a; color: var(--on-deep);
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.tile:hover, .tile:focus-visible { border-color: #ffffff59; transform: translateY(-3px); }

.tile__media { position: absolute; inset: 0; z-index: -1; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.07); }
.tile__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, #0a0907f5 0%, #0a0907d1 44%, #0a09076e 74%, #0a09073d 100%);
  transition: background .45s var(--ease);
}
.tile:hover .tile__veil { background: linear-gradient(to top, #0a0907f7 0%, #0a0907de 48%, #0a090778 78%, #0a090742 100%); }

.tile__body { padding: clamp(1rem, 1.8vw, 1.35rem); display: grid; gap: .28rem; }

/* the count is the loudest thing on the tile */
.tile__count {
  font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1;
  display: flex; align-items: baseline; gap: .45rem; margin-bottom: .35rem;
}
.tile__count em {
  font-family: var(--sans); font-style: normal; font-size: var(--t-micro);
  letter-spacing: .2em; text-transform: uppercase; color: #ffffff8c;
}
.tile__line1 { font-family: var(--serif); font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.18; }
.tile__line2 { font-size: var(--t-small); color: #ffffffd1; }
.tile__note { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: #ffffff7a; margin-top: .2rem; }
.tile__cta {
  margin-top: .7rem; font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .5em; min-height: 32px;
}
.tile__cta .arw { transition: transform .4s var(--ease); }
.tile:hover .tile__cta .arw { transform: translateX(.35em); }

@media (prefers-reduced-motion: reduce) {
  .tile:hover, .tile__media img { transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE POLISH
   Everything below came out of auditing the live DOM at 375px: real tap-target
   geometry, the smallest legible label size, and overlays that were still
   hit-testable while closed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The closed drawer covered the whole viewport. clip-path happens to clip hit
   testing, but relying on that is fragile — take it out of the layer properly. */
.drawer { visibility: hidden; pointer-events: none; transition: clip-path .75s var(--ease), visibility 0s linear .75s; }
body.menu-open .drawer { visibility: visible; pointer-events: auto; transition: clip-path .75s var(--ease), visibility 0s; }

@media (max-width: 900px) {
  /* hero indicators: 20x34 was too small to hit with a thumb */
  .chero__dots { gap: .2rem; }
  .chero__dot { width: 38px; height: 44px; }
  .chero__dot::before { height: 2px; }
  .chero__dot i { height: 2px; }

  /* language chips in the drawer */
  .drawer__langs a { min-height: 44px; display: inline-flex; align-items: center; padding: .8em 1.2em; }

  /* nothing interactive or informational below ~10.5px on a phone */
  .chero__eyebrow { font-size: .68rem; letter-spacing: .18em; }
  .finder__label { font-size: .68rem; }
  .finder__row .chip span { font-size: .68rem; min-height: 40px; }
  /* inline links inside the key-facts list need a real target too */
  .facts dd a { min-height: 40px; display: inline-flex; align-items: center; }
  .finder__hit span { font-size: .66rem; }
  .rail__label { font-size: .64rem; }
  .tile__note, .tile__cta { font-size: .66rem; }
  .ax__name { font-size: 1rem; }
  .unit__spec { font-size: .72rem; }
  .unit__price small, .unit__from { font-size: .66rem; }
  .unit__tag { font-size: .66rem; }
  .unit__cta { font-size: .68rem; min-height: 42px; }
  .rail__btn { font-size: .66rem; letter-spacing: .1em; }
  /* the phone number on the contact page is a link, so give it a real target */
  .field a, a.display { min-height: 44px; display: inline-flex; align-items: center; }
  .badge, .card__meta, .acard__count { font-size: .66rem; }
  .eyebrow { font-size: .68rem; }

  /* the areas index: two across is right, but give the name room */
  .ax__grid { gap: .5rem; }
  .ax__area { aspect-ratio: 16/8; }

  /* one-click searches read better full width than squeezed two-up */
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 180px; }
  .tile__count { font-size: 2rem; }
}

@media (max-width: 420px) {
  .ax__grid { grid-template-columns: 1fr; }
  .ax__area { aspect-ratio: 16/6.5; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE LEAD BUTTONS ANNOUNCE THEMSELVES
   Every control that opens a conversation carries the same signal: a light
   sweeps across it, and the frame breathes once behind it. It runs on a long
   cycle — roughly every seven seconds — so it reads as an invitation rather
   than an alarm, and it stops the moment the pointer arrives, because by then
   it has done its job.

   The floating contact rail is excluded: its buttons hang their labels outside
   themselves, and the clipping this needs would cut those labels off.
   ═══════════════════════════════════════════════════════════════════════════ */
:where(.btn--solid, .unit__cta, .rail__btn--go, .tile, [data-finder-submit],
       [data-gate]:not(.crb), [data-inquire]:not(.crb)) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

:where(.btn--solid, .unit__cta, .rail__btn--go, .tile, [data-finder-submit],
       [data-gate]:not(.crb), [data-inquire]:not(.crb))::after {
  content: "";
  position: absolute; top: -60%; bottom: -60%; left: -70%; width: 42%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .10) 38%,
    rgba(255, 255, 255, .46) 50%,
    rgba(255, 255, 255, .10) 62%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 2;
  animation: ctaSheen 7s cubic-bezier(.33, 0, .2, 1) 2.2s infinite;
}

/* The frame breathes with the sweep. The hero's three buttons are excluded:
   they carry their own entrance animation, and an element has only one
   animation-name to give. The sweep alone carries them, and it lives on the
   pseudo-element, so the two never collide. */
:where(.btn--solid, .unit__cta, .rail__btn--go, [data-finder-submit],
       [data-gate]:not(.crb), [data-inquire]:not(.crb)):not(.chero__ctas > *) {
  animation: ctaBreath 7s cubic-bezier(.33, 0, .2, 1) 2.2s infinite;
}

/* Stagger the sweep so a row of buttons ripples rather than firing in unison.
   Only the sheen is staggered here: the elements themselves may already own an
   entrance animation, and touching animation-delay on them would retime it. */
:where(.chero__ctas, .rail__acts, .tiles, .briefs) > *:nth-child(2n)::after { animation-delay: 2.9s; }
:where(.chero__ctas, .rail__acts, .tiles, .briefs) > *:nth-child(3n)::after { animation-delay: 3.6s; }

/* once the pointer is on it, the invitation has been accepted */
:where(.btn--solid, .unit__cta, .rail__btn--go, .tile, [data-finder-submit],
       [data-gate], [data-inquire]):hover::after,
:where(.btn--solid, .unit__cta, .rail__btn--go, .tile, [data-finder-submit],
       [data-gate], [data-inquire]):focus-visible::after { animation-play-state: paused; opacity: 0; }
:where(.btn--solid, .unit__cta, .rail__btn--go, [data-finder-submit],
       [data-gate], [data-inquire]):hover,
:where(.btn--solid, .unit__cta, .rail__btn--go, [data-finder-submit],
       [data-gate], [data-inquire]):focus-visible { animation-play-state: paused; }

@keyframes ctaSheen {
  0%   { left: -70%; opacity: 0; }
  4%   { opacity: 1; }
  17%  { left: 130%; opacity: 1; }
  18%  { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}
@keyframes ctaBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 18, 15, 0); }
  6%       { box-shadow: 0 0 0 0 rgba(20, 18, 15, .22); }
  16%      { box-shadow: 0 0 0 9px rgba(20, 18, 15, 0); }
  22%      { box-shadow: 0 0 0 0 rgba(20, 18, 15, 0); }
}

/* On a dark ground the ring has to be light to be seen at all. Applied only
   where nothing else owns the element's animation. */
.section--dark :where(.btn--solid, [data-finder-submit], [data-gate]:not(.crb), [data-inquire]:not(.crb)):not(.chero__ctas > *) {
  animation-name: ctaBreathLight;
}
@keyframes ctaBreathLight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  6%       { box-shadow: 0 0 0 0 rgba(255, 255, 255, .34); }
  16%      { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  22%      { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* The hero's buttons take the sweep too — it rides on ::after, which nothing
   else is using there, so cheroUp keeps the element to itself. */
.chero__ctas > * { position: relative; overflow: hidden; isolation: isolate; }
.chero__ctas > *::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: -70%; width: 42%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,.5) 50%,
    rgba(255,255,255,.12) 62%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg); pointer-events: none; z-index: 2;
  animation: ctaSheen 7s cubic-bezier(.33, 0, .2, 1) 2.4s infinite;
}
.chero__ctas > *:nth-child(2)::after { animation-delay: 3.0s; }
.chero__ctas > *:nth-child(3)::after { animation-delay: 3.6s; }

/* ── the floating contact trio ─────────────────────────────────────────────
   These are circles that hang their labels outside themselves, so they cannot
   be clipped for a sweep. They pulse instead: a ring in each button's own
   colour, the three of them staggered so the group reads as a sequence. */
.crb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none;
  animation: crbFlash 6s cubic-bezier(.4, 0, .3, 1) 3s infinite;
}
.crb--call::after { --crb-ring: 168, 152, 130; }
.crb--wa::after  { --crb-ring: 37, 211, 102; animation-delay: 3.5s; }
.crb--msg::after { --crb-ring: 20, 18, 15; animation-delay: 4s; }
@keyframes crbFlash {
  0%, 70%  { box-shadow: 0 0 0 0 rgba(var(--crb-ring, 20, 18, 15), .55); }
  84%      { box-shadow: 0 0 0 13px rgba(var(--crb-ring, 20, 18, 15), 0); }
  100%     { box-shadow: 0 0 0 0 rgba(var(--crb-ring, 20, 18, 15), 0); }
}
.crb:hover::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .chero__ctas > *::after, .crb::after { animation: none; opacity: 0; }
  :where(.btn--solid, .unit__cta, .rail__btn--go, .tile, [data-finder-submit],
         [data-gate], [data-inquire])::after { animation: none; opacity: 0; }
  :where(.btn--solid, .unit__cta, .rail__btn--go, [data-finder-submit],
         [data-gate], [data-inquire]) { animation: none; }
}

/* ── every form is signed ──────────────────────────────────────────────────
   The mark sits above the first field, small, with a hairline under it: the
   form reads as correspondence with a named person rather than a data grab. */
.form__mark {
  display: flex; justify-content: flex-end; align-items: flex-start;
  margin: 0 0 1.5rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule-soft); line-height: 0;
}
.form__mark img { height: 52px; width: auto; opacity: .95; display: block; }
.section--dark .form__mark, .invite .form__mark, .modal__box .form__mark { border-bottom-color: #ffffff2b; }
.modal__box .form__mark, .plist__body .form__mark { margin-bottom: 1.2rem; padding-bottom: 1rem; }
@media (max-width: 600px) { .form__mark img { height: 42px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   THE AREA BRIEFS
   A bedroom count, a budget, and how many of the buildings standing here
   actually answer to it. Set as a plate of cards rather than a form: choosing
   one is a single click, and the count is the reason to make it.
   ═══════════════════════════════════════════════════════════════════════════ */
.briefs {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.brief {
  position: relative; background: var(--paper);
  display: grid; align-content: start; gap: .5rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  text-align: left; min-height: 148px;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.brief__beds {
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); transition: color .35s var(--ease);
}
.brief__beds b { font-size: 1.05rem; letter-spacing: 0; color: var(--ink); font-weight: 500; transition: color .35s var(--ease); }
.brief--char .brief__beds { font-size: .68rem; letter-spacing: .16em; color: var(--ink); }
.brief__price {
  font-family: var(--serif); font-weight: 400; line-height: 1.1;
  font-size: clamp(1.25rem, 1.9vw, 1.62rem);
}
.brief--char .brief__price { font-size: clamp(.92rem, 1.2vw, 1.02rem); font-family: var(--sans); color: var(--muted); }
.brief__foot {
  margin-top: auto; padding-top: .9rem; align-self: end;
  display: flex; align-items: baseline; gap: .45em; flex-wrap: wrap;
  font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); transition: color .35s var(--ease);
}
.brief__count { font-style: normal; font-weight: 600; color: var(--ink); font-size: .8rem; transition: color .35s var(--ease); }
.brief__foot .arw { margin-left: auto; transition: transform .4s var(--ease); }

.brief:hover, .brief:focus-visible { background: var(--ink); color: var(--paper); }
.brief:hover .brief__beds, .brief:focus-visible .brief__beds,
.brief:hover .brief__beds b, .brief:focus-visible .brief__beds b,
.brief:hover .brief__foot, .brief:focus-visible .brief__foot,
.brief:hover .brief__count, .brief:focus-visible .brief__count { color: var(--paper); }
.brief:hover .brief__foot .arw, .brief:focus-visible .brief__foot .arw { transform: translateX(.35em); }
.brief:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

@media (max-width: 600px) {
  .briefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief { min-height: 124px; padding: .95rem .85rem; gap: .35rem; }
  .brief__price { font-size: 1.08rem; }
  .brief__foot { padding-top: .65rem; font-size: .69rem; letter-spacing: .08em; }
  .brief__beds { font-size: .69rem; letter-spacing: .12em; }
  .brief--char .brief__beds { font-size: .7rem; }
  .brief--char .brief__price { font-size: .82rem; }
}

/* ── the language control in the bar ───────────────────────────────────────
   On a phone the navigation is behind the burger, and a visitor who reads
   Portuguese should not have to open a menu to discover the site speaks it.
   The switcher therefore appears twice — inside the desktop nav, and here in
   the bar itself — with only one shown at any width. */
.lang--bar { display: none; margin-left: auto; }
@media (max-width: 980px) {
  .lang--bar { display: block; }
  .lang--bar .lang__btn {
    min-height: 44px; padding: .5rem .6rem; gap: .35em;
    font-size: .7rem; letter-spacing: .16em;
  }
  .lang--bar .lang__list { right: 0; left: auto; min-width: 8.5rem; }
  .lang--bar .lang__list a { min-height: 44px; display: flex; align-items: center; font-size: .7rem; }
  /* the burger keeps its own spacing beside it */
  .hdr__in .burger { margin-left: .1rem; }
}
/* on a photographic header the control has to read light like the rest of it */
.hdr--over .lang--bar .lang__btn { color: #fff; }

/* the brief tile that has nothing to count asks instead */
.tile__count--ask { display: block; }
.tile__count--ask em {
  font-family: var(--sans); font-style: normal;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: #ffffffd4; display: inline-block; margin: 0;
}

/* ── the advisor's credentials ─────────────────────────────────────────────
   Four plain facts under the introduction. Numerals in the display face, the
   label beneath in small caps: the same rhythm the market snapshot uses, so
   the page reads as one document. */
.creds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 45%), 1fr));
  gap: 1.1rem 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.creds div { display: grid; gap: .3rem; align-content: start; }
.creds b {
  font-family: var(--serif); font-weight: 400; line-height: 1;
  font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink);
}
/* the brokerage is a name, not a number, so it is set at reading size */
.creds div:last-child b { font-size: clamp(.95rem, 1.3vw, 1.08rem); line-height: 1.2; align-self: end; }
.creds span {
  font-size: var(--t-micro); letter-spacing: .17em; text-transform: uppercase;
  color: var(--muted); line-height: 1.4;
}
@media (max-width: 600px) {
  .creds { gap: .95rem 1rem; }
  .creds span { font-size: .68rem; letter-spacing: .12em; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE FORM, TIGHTENED
   Three lanes and out: the two names on one line, email and telephone on the
   next, the five interests on the third as small chips. Everything below is a
   reduction of the standing form rules, not a second set — the field, the chip
   and the consent row all keep their own behaviour and only lose height.
   ═══════════════════════════════════════════════════════════════════════════ */
.form--tight { gap: .75rem; }
.form--tight .form__row { gap: .75rem 1.1rem; }
.form--tight .field { gap: .2rem; }
.form--tight .field > span { font-size: .62rem; letter-spacing: .17em; }
.form--tight .field input,
.form--tight .field select {
  padding: .5em 0; min-height: 40px; font-size: .95rem;
}

/* the third lane: a label and five chips, kept on as few lines as possible */
.form--tight .form__interest {
  display: grid; gap: .45rem;
  padding-top: .35rem;
}
.form__interest-label {
  font-size: .62rem; letter-spacing: .17em; text-transform: uppercase; color: var(--muted);
}
.section--dark .form__interest-label, .invite .form__interest-label { color: var(--on-deep-mut); }
.chips--mini { gap: .3rem; }
.chips--mini .chip span {
  min-height: 32px; padding: .38em .7em;
  font-size: .62rem; letter-spacing: .1em;
}

/* the consent line is fine print, so it is set as fine print */
.form--tight .consent { font-size: .72rem; line-height: 1.4; gap: .55rem; }
.form--tight .consent input { width: 15px; height: 15px; margin-top: .2em; }
.form--tight .btn { margin-top: .15rem; }

/* ── the mark sits level with the heading ──────────────────────────────────
   Above the fields it read as a header band of its own. Beside the title it
   reads as a signature on the request. */
.modal__headline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
}
.modal__headline h2 { margin: 0; }
.modal__mark { line-height: 0; flex: 0 0 auto; }
.modal__mark img { height: 46px; width: auto; opacity: .95; display: block; }
@media (max-width: 600px) { .modal__mark img { height: 36px; } }

/* inline forms keep their own mark, top right, level with the first label */
.form--tight .form__mark { margin: 0 0 .9rem; padding-bottom: .8rem; }
.form--tight .form__mark img { height: 44px; }
@media (max-width: 600px) { .form--tight .form__mark img { height: 36px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PORTRAIT
   One frame for the same face, on the home page and on About.

   The frame is 5:7 because the photograph is 5:7. Set any wider and object-fit
   takes its crop out of the top and bottom of her head, which is exactly what
   was happening on About at 4:5.
   ═══════════════════════════════════════════════════════════════════════════ */
.portrait {
  margin: 0; display: grid; gap: .9rem; align-content: start;
  /* Sized against the column it sits in rather than filling it: at full column
     width the headshot competed with the prose beside it. */
  max-width: 360px;
}
.portrait__frame {
  display: block; position: relative; overflow: hidden;
  /* An explicit width is required. Left to shrink-to-fit, this box sizes itself
     from an <img> that is itself width:100% of the box — a circular reference
     that resolves to zero, and the portrait disappears. */
  width: 100%;
  aspect-ratio: 5 / 7; background: var(--paper-3);
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the caption: her name, and what she does, above the frame */
.portrait__cap { display: grid; gap: .3rem; }
.portrait__name {
  font-family: var(--serif); font-weight: 400; line-height: 1.15;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink);
}
.portrait__role {
  font-size: var(--t-micro); letter-spacing: .19em; text-transform: uppercase;
  color: var(--muted);
}
.section--dark .portrait__name { color: var(--on-deep); }
.section--dark .portrait__role { color: var(--on-deep-mut); }

/* On a wide screen the surrounding prose already names her, so the caption
   steps back to a rule beneath the frame rather than a title above it. */
@media (min-width: 900px) {
  .portrait { gap: 0; }
  .portrait__cap {
    order: 2; padding-top: .9rem; margin-top: 1rem;
    border-top: 1px solid var(--rule);
  }
  .portrait__frame { order: 1; }
}

/* On a phone it is held to a narrower measure and centred: a headshot run to
   the full width of a telephone reads as a profile page, not a portrait. */
@media (max-width: 899px) {
  /* an explicit width, not a cap: the two pages give the figure different room,
     and the same face should be the same size on both */
  .portrait { text-align: center; width: min(230px, 62vw); max-width: none; margin-inline: auto; gap: .7rem; }
  .portrait__name { font-size: 1.05rem; }
  .portrait__role { font-size: .62rem; letter-spacing: .15em; }
}

/* ── the reveal ────────────────────────────────────────────────────────────
   The frame wipes up while the picture settles back from a slight push-in,
   and the caption follows a beat later. Held behind .reveal-armed so that if
   the observer never fires the portrait is simply there. */
.reveal-armed .portrait__frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s cubic-bezier(.19, 1, .22, 1);
  animation: revealSafety .01s linear 4s forwards;
}
.reveal-armed .portrait__frame img {
  transform: scale(1.08);
  transition: transform 1.5s cubic-bezier(.19, 1, .22, 1);
}
.reveal-armed .portrait__cap {
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s var(--ease) .28s, transform .8s var(--ease) .28s;
  animation: revealSafetyFade .01s linear 4s forwards;
}
.reveal-armed .portrait.in .portrait__frame { clip-path: inset(0 0 0 0); }
.reveal-armed .portrait.in .portrait__frame img { transform: none; }
.reveal-armed .portrait.in .portrait__cap { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-armed .portrait__frame,
  .reveal-armed .portrait__frame img,
  .reveal-armed .portrait__cap {
    clip-path: none !important; transform: none !important;
    opacity: 1 !important; transition: none !important;
  }
}


/* ── the reveal safety net ─────────────────────────────────────────────────
   Everything the script hides is put back by CSS after four seconds, whether
   or not the script ever gets round to it. A decorative reveal that fails
   should cost an animation, never the content. */
@keyframes revealSafety { to { clip-path: inset(0 0 0 0); } }
@keyframes revealSafetyFade { to { opacity: 1; transform: none; } }
.reveal-armed .rv { animation: revealSafetyFade .01s linear 4s forwards; }
.reveal-armed .rv-mask { animation: revealSafety .01s linear 4s forwards; }
@media (prefers-reduced-motion: reduce) {
  .reveal-armed .rv, .reveal-armed .rv-mask,
  .reveal-armed .portrait__frame, .reveal-armed .portrait__cap { animation: none; }
}


/* ── the advisor block ─────────────────────────────────────────────────────
   The portrait no longer fills its half of the page, so a plain half-and-half
   split would leave a broad empty band beside it. The columns are sized to
   what each actually holds: the frame's own width for the picture, and
   everything else for the prose.
   ═══════════════════════════════════════════════════════════════════════════ */
.advisor { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .advisor { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}
@media (min-width: 1400px) {
  .advisor { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(3rem, 5vw, 5rem); }
  .advisor .portrait { max-width: 400px; }
}
/* On About the prose leads and the portrait follows it. */
.advisor--right .portrait { order: 2; }
@media (min-width: 900px) {
  .advisor--right { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
}
@media (min-width: 1400px) {
  .advisor--right { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
}
@media (max-width: 899px) {
  /* the picture introduces her, then the words */
  .advisor--right .portrait { order: 0; }
}

/* The compact form is set small by design, but on a phone .62rem falls under
   10px — small enough to force a pinch-zoom. It stays compact and becomes
   readable. */
@media (max-width: 900px) {
  .form--tight .field > span,
  .form__interest-label { font-size: .69rem; letter-spacing: .14em; }
  .chips--mini .chip span { font-size: .69rem; letter-spacing: .08em; min-height: 36px; padding: .42em .8em; }
  .portrait__role { font-size: .69rem; letter-spacing: .13em; }
  .form--tight .consent { font-size: .76rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   B&S LUXURY — the components this brand adds
   Team, the Investor Journey™ rail, the partner category grid, the event
   strip, the footer additions, and the editorial primitives the new pages
   need. Concatenated last into the single hashed stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── section heading inside a reading column ─────────────────────────────── */
.h-sec {
  font-size: var(--t-h3);
  margin-bottom: .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
}

/* Disclaimers are set quietly but never hidden: smaller, on Sand, at a measure
   that stays readable, and never below 0.82rem. A disclosure nobody can read
   is not a disclosure. */
.disclaim {
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--muted);
  background: var(--paper-3);
  border-left: 2px solid var(--ink);
  padding: 1.35rem 1.5rem;
}
.section--dark .disclaim {
  background: rgba(255, 255, 255, .05);
  border-left-color: var(--on-deep);
  color: var(--on-deep-mut);
}

/* ── the team ─────────────────────────────────────────────────────────────── */
.team {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem) var(--gut);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .team { grid-template-columns: repeat(3, 1fr); } }

.team__frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  margin-bottom: 1.4rem;
}
.team__frame img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.team__m:hover .team__frame img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .team__m:hover .team__frame img { transform: none; }
}

.team__name { font-size: var(--t-h3); line-height: 1.15; }
.team__role {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .55rem;
}
.team__bio {
  margin-top: 1rem;
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-80);
  max-width: 42ch;
}
.team__focus {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.1rem;
  padding: 0;
  list-style: none;
}
.team__focus li {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: .38rem .7rem;
}
.section--alt .team__frame { background: var(--paper); }

/* ── the Investor Journey™ rail ───────────────────────────────────────────── */
/* Four stages. A rail on a wide screen, a spine on a phone. The connecting
   line is a border rather than an SVG, so it reflows at any width and holds
   when a translated label runs to three lines. */
.jrail {
  display: grid;
  gap: clamp(2rem, 4vw, 2.75rem) var(--gut);
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 860px) { .jrail { grid-template-columns: repeat(4, 1fr); } }

.jrail__s {
  position: relative;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.section--dark .jrail__s { border-top-color: rgba(255, 255, 255, .18); }

/* The rail's own tick: a short heavier segment where each stage begins. */
.jrail__s::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2rem;
  height: 1px;
  background: currentColor;
}

.jrail__n {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: .24em;
  opacity: .55;
  margin-bottom: .8rem;
}
.jrail__name { font-size: var(--t-h3); line-height: 1.15; }
.jrail__body {
  margin-top: .9rem;
  font-size: var(--t-small);
  line-height: 1.7;
  opacity: .82;
  max-width: 34ch;
}
.jrail--compact .jrail__name { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); }

/* ── partner categories ───────────────────────────────────────────────────── */
/* A quiet grid of disciplines. Deliberately not a logo wall: these are
   categories of expertise, and nothing here names a firm. */
.catgrid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--rule);
  border: 1px solid var(--rule);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 620px) { .catgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .catgrid { grid-template-columns: repeat(3, 1fr); } }
.catgrid__i {
  background: var(--paper);
  padding: 1.35rem 1.5rem;
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: .04em;
  color: var(--ink-80);
  display: flex;
  align-items: center;
  min-height: 68px;
}
.section--alt .catgrid__i { background: var(--paper-2); }

/* ── BIZ & STYLE divisions ────────────────────────────────────────────────── */
.divlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .55rem;
}
.divlist li {
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

/* ── contact information list ─────────────────────────────────────────────── */
.cinfo { display: grid; gap: 0; margin: 0; }
.cinfo__row {
  display: grid;
  gap: .35rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 520px) {
  .cinfo__row { grid-template-columns: 10rem 1fr; gap: 1rem; align-items: start; }
}
.cinfo dt {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .2em;
}
.cinfo dd { margin: 0; font-size: var(--t-lede); line-height: 1.5; }
.cinfo dd address { font-size: var(--t-body); }
.cinfo dd a { border-bottom: 1px solid var(--rule); transition: border-color .3s var(--ease); }
.cinfo dd a:hover { border-bottom-color: var(--ink); }

.formwrap { background: var(--paper-2); padding: clamp(1.5rem, 3vw, 2.5rem); }

/* ── conditional form fields ──────────────────────────────────────────────── */
/* Hidden blocks are also inert and their fields disabled, so nothing that does
   not apply is tabbed into, announced, or submitted. */
.form__cond[hidden] { display: none; }

/* ── article byline ───────────────────────────────────────────────────────── */
/* The base site put a face here because the writing had one author. This one
   is published by a house, so the byline is a line of type. */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.byline__by { font-family: var(--serif); font-size: 1.15rem; }
.byline__meta {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── the event strip ──────────────────────────────────────────────────────── */
/* Sits above the footer. No flashing and no repeating motion — it fades in
   once and then holds. Dismissible, and the dismissal is remembered. */
.evt { background: var(--deep); color: var(--on-deep); }
.evt[hidden] { display: none; }
.evt__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  position: relative;
}
.evt__badge {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: .24em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .25);
  padding: .35rem .7rem;
  flex: 0 0 auto;
}
.evt__body { flex: 1 1 22ch; font-size: var(--t-small); line-height: 1.6; }
.evt__note { opacity: .68; }
.evt__x {
  position: absolute;
  top: .5rem;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--on-deep);
  opacity: .55;
  font-size: .85rem;
  transition: opacity .3s var(--ease);
}
.evt__x:hover { opacity: 1; }
@media (min-width: 760px) {
  .evt__x { position: static; width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
  .evt { animation: evt-in .7s var(--ease) both; }
}
@keyframes evt-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── footer additions ─────────────────────────────────────────────────────── */
.ftr__brand .wordmark { text-align: center; margin-bottom: 1.1rem; display: inline-block; }
.ftr__pos {
  font-size: var(--t-small);
  line-height: 1.65;
  max-width: 34ch;
  color: var(--on-deep-mut);
}
.ftr__house { font-size: var(--t-small); margin-top: .9rem; color: var(--on-deep-mut); }
.ftr__house a { border-bottom: 1px solid rgba(255, 255, 255, .24); }
.ftr__house a:hover { border-bottom-color: var(--on-deep); }
.ftr__social { display: flex; gap: .5rem; margin-top: 1.2rem; }
.ftr__social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.ftr__social a:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); }
.ftr__social svg { width: 17px; height: 17px; fill: currentColor; }

/* ── the wordmark in the header ───────────────────────────────────────────── */
/* The tagline is never dropped (kit §01), so on a narrow screen the whole
   mark steps down instead, and the header keeps the height to hold two lines
   without the burger ever reaching it. */
/* Kit §01: the tagline is optically centred beneath the wordmark. There is
   no flush-left cut of the mark — not in the header, not in the footer. */
.hdr .wordmark { text-align: center; }
.brand { min-height: 44px; }
@media (max-width: 400px) { .hdr .wordmark { --wm: 11px; } }

/* ── header balance ───────────────────────────────────────────────────────── */
/* The wordmark is type, not a 58px image, so it occupies real width — and the
   navigation carries six sections plus a language switcher plus the primary
   call to action. At the base breakpoint that row overflowed the viewport by
   about 48px and clipped "Let's Connect" off the right edge.
   Three changes hold it, in order of how much they cost the design:
     1. the desktop navigation appears later, at 1180px rather than 1080px,
        so below that the drawer carries it and nothing is cramped;
     2. the header cut of the wordmark is smaller than the footer cut;
     3. the gaps tighten between 1180 and 1400, where the row is tightest.
   Nothing wraps, nothing overlaps, and no label is truncated. */
.nav { display: none; }
@media (min-width: 1180px) { .nav { display: flex; } }
@media (min-width: 1180px) { .burger { display: none; } }
/* grid, not inline-flex — the three bars are a stack. inline-flex laid them
   out in a row and the control read as three dashes. */
@media (max-width: 1179.98px) { .burger { display: grid; } .lang--bar { display: flex; } }
@media (min-width: 1180px) { .lang--bar { display: none; } }

.hdr__in { gap: 1rem; flex-wrap: nowrap; }
/* Reduced by about 37% from the first cut, which sat too heavy against the
   navigation. The tagline floor comes down with it so the two stay in
   proportion — MIAMI at 8.5px beside a 13px wordmark reads as a second line
   of equal weight, which is not what the kit draws. */
.hdr .wordmark { --wm: clamp(10.5px, 0.92vw, 16px); --wm-floor: 5.9px; --wm-tagtrack: .44em; }

@media (min-width: 1180px) {
  .nav { gap: clamp(.7rem, 1.45vw, 2.1rem); min-width: 0; }
  .nav a { white-space: nowrap; }
  .nav__cta { white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   B&S LUXURY — the flywheel, the schemes, the ecosystem and the event
   Everything the second pass added. Concatenated last.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── team, resized ────────────────────────────────────────────────────────
   Portraits come down about a quarter from the first cut. Three heads at
   nearly a third of the viewport each read as a staff directory; at this size
   they read as a masthead. */
.team { gap: clamp(1.6rem, 3vw, 2.6rem) var(--gut); }
.team__frame { margin-bottom: 1rem; }
.team__name { font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.45rem); }
.team__role { font-size: 0.62rem; letter-spacing: .18em; margin-top: .4rem; }
.team__bio { margin-top: .8rem; font-size: 0.8rem; line-height: 1.68; max-width: 40ch; }
.team__focus { margin-top: .9rem; gap: .32rem; }
.team__focus li { font-size: 0.6rem; padding: .3rem .55rem; letter-spacing: .1em; }

/* The About cut sits three across on a wide screen but never lets a portrait
   grow past a comfortable reading column beside its own text. */
@media (min-width: 720px) {
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.team__frame img { aspect-ratio: 4/5; }
/* A quarter down from the first cut. Three portraits at 480px each filled the
   band and read as a staff directory; held to 300 they read as a masthead. */
.team__frame { max-width: 300px; }

/* The homepage cut is smaller again — two principals, side by side. */
/* The homepage cut sits under a centred introduction, so it is centred with
   it. Held at 720px and left in the flow it hugged the left edge and left a
   third of the band empty — the two principals read as stranded rather than
   as a pair. Wider, larger, and centred: the block now sits on the same axis
   as the statement above it, and the text fills the column instead of running
   out halfway. */
.team--compact {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
  margin-top: clamp(2.4rem, 4vw, 3.6rem);
  column-gap: clamp(2rem, 4vw, 3.4rem);
}
@media (min-width: 620px) { .team--compact { grid-template-columns: repeat(2, 1fr); } }
.team--compact .team__frame { max-width: 300px; }
.team--compact .team__name { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }
.team--compact .team__bio { font-size: 0.82rem; line-height: 1.72; max-width: 40ch; }

/* the expandable remainder of a biography */
.team__more { margin-top: .7rem; }
.team__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .3em;
  min-height: 34px;
}
.team__more > summary::-webkit-details-marker { display: none; }
.team__more > summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.team__more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.team__more[open] .team__more-open,
.team__more:not([open]) .team__more-close { display: none; }
.team__rest { margin-top: .9rem; }
.team__rest p { font-size: 0.8rem; line-height: 1.72; color: var(--ink-80); max-width: 44ch; }
.team__rest p + p { margin-top: .8em; }

/* ── the flywheel ─────────────────────────────────────────────────────────
   The Investor Journey as a cycle. The ring turns, the three stage dots pulse
   in sequence, and the whole thing stops under prefers-reduced-motion — where
   it still reads perfectly, because the arrows carry the direction on their
   own. */
.fly { margin: 0; width: 100%; }
.fly svg { width: 100%; height: auto; display: block; overflow: visible; }

.fly__ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: .16; }
.fly__arc { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .5; }
.fly__arrow { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }

/* the turning dash — the flywheel itself */
.fly__spin {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 54 776;
  opacity: .95;
  transform-origin: 300px 300px;
}
@media (prefers-reduced-motion: no-preference) {
  .fly__spin { animation: fly-spin 9s linear infinite; }
}
@keyframes fly-spin { to { transform: rotate(360deg); } }

.fly__dot { fill: currentColor; }
.fly__halo { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .fly__node .fly__halo { animation: fly-pulse 3.3s var(--ease-io) infinite; animation-delay: var(--d, 0s); }
}
@keyframes fly-pulse {
  0%   { opacity: .55; transform: scale(1); }
  60%  { opacity: 0;   transform: scale(2.6); }
  100% { opacity: 0;   transform: scale(2.6); }
}

.fly__label {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .22em;
  fill: currentColor;
}
.fly__hub { fill: none; stroke: currentColor; stroke-width: 1; opacity: .3; }
.fly__hubtext {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: .04em;
  fill: currentColor;
}
.fly__hubtm { font-family: var(--sans); font-size: 9px; fill: currentColor; opacity: .65; }

.fly__orbit text {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .16em;
  fill: currentColor;
  opacity: .62;
}
.fly__orbit circle { fill: currentColor; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .fly__v { animation: fly-fade 5s var(--ease-io) infinite; animation-delay: var(--d, 0s); }
}
@keyframes fly-fade { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.fly--compact .fly__label { font-size: 17px; }
.fly--compact .fly__hubtext { font-size: 23px; }

/* ── the journey page hero ────────────────────────────────────────────────── */
.jhero { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .jhero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.jhero__wheel { max-width: 480px; margin-inline: auto; width: 100%; }

.jstages { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.3rem; }
.jstage { display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem 0; align-items: baseline; }
.jstage__n {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: .2em; opacity: .5;
  grid-row: 1 / span 2;
}
.jstage__name { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); }
.jstage__body { grid-column: 2; font-size: 0.82rem; line-height: 1.7; opacity: .82; max-width: 46ch; margin-top: .35rem; }

.jhero__entry {
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: .2em; text-transform: uppercase; opacity: .72;
  display: flex; align-items: center; gap: .6em;
}
.jhero__entry span { font-size: 1.2rem; opacity: .8; }

/* ── the luxury verticals ─────────────────────────────────────────────────── */
.verts { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: 1fr; }
@media (min-width: 560px) { .verts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .verts { grid-template-columns: repeat(4, 1fr); } }
.vert {
  background: var(--paper-2); padding: clamp(1.2rem, 2vw, 1.8rem);
  display: grid; gap: .6rem; align-content: start; min-height: 118px;
}
.vert__n { font-family: var(--sans); font-size: 0.6rem; letter-spacing: .2em; color: var(--muted); }
.vert h3 { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); line-height: 1.2; }

/* ── the three pillars ────────────────────────────────────────────────────── */
.triad { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: 1fr; }
@media (min-width: 820px) { .triad { grid-template-columns: repeat(3, 1fr); } }
.triad__i { background: var(--paper); padding: clamp(1.4rem, 2.4vw, 2.2rem); display: grid; gap: .55rem; align-content: start; }
.section--alt .triad__i { background: var(--paper-2); }
.triad__n { font-family: var(--sans); font-size: 0.6rem; letter-spacing: .2em; color: var(--muted); }
.triad__name { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); }
.triad__body { font-size: 0.82rem; line-height: 1.7; color: var(--ink-80); }

/* ── BIZ & STYLE ──────────────────────────────────────────────────────────── */
.bs { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); align-items: start; }
@media (min-width: 900px) { .bs { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.bs__logo { display: block; max-width: 230px; }
.bs__logo img { width: 100%; height: auto; }
.bs__lede { gap: 1.1rem; }

.bs__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14); }
@media (min-width: 560px) { .bs__facts { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .bs__facts { grid-template-columns: repeat(2, 1fr); } }
.bs__fact { background: var(--deep); padding: 1.1rem 1.2rem; display: grid; gap: .3rem; }
.bs__fact b { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.9rem); font-weight: 400; line-height: 1; }
.bs__fact span { font-family: var(--sans); font-size: 0.6rem; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }

.divcards { display: grid; gap: 1px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14); margin-top: clamp(1.8rem, 3vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 780px) { .divcards { grid-template-columns: repeat(3, 1fr); } }
.divcard { background: var(--deep); padding: clamp(1.2rem, 2vw, 1.7rem); display: grid; gap: .6rem; align-content: start; }
.divcard h3 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: .2em; text-transform: uppercase; }
.divcard p { font-size: 0.8rem; line-height: 1.7; opacity: .78; }

/* ── the B&S way ──────────────────────────────────────────────────────────── */
.bsway { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); align-items: center; }
@media (min-width: 900px) { .bsway { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.bsway__wheel { max-width: 380px; margin-inline: auto; width: 100%; }
.bsway__copy p { font-size: 0.87rem; line-height: 1.75; }

.waycards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: clamp(1.8rem, 3vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 780px) { .waycards { grid-template-columns: repeat(3, 1fr); } }
.waycard { background: var(--paper); padding: clamp(1.2rem, 2vw, 1.7rem); display: grid; gap: .5rem; align-content: start; }
.waycard h3 { font-size: clamp(1.02rem, 0.94rem + 0.4vw, 1.24rem); }
.waycard p { font-size: 0.8rem; line-height: 1.7; color: var(--ink-80); }

/* ── the partner ecosystem ────────────────────────────────────────────────── */
.pgrid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }
.pgrid__i {
  background: var(--paper); padding: clamp(1.3rem, 2.2vw, 1.9rem);
  display: grid; gap: .7rem; align-content: start;
  transition: background .4s var(--ease);
}
.section--alt .pgrid__i { background: var(--paper-2); }
.pgrid__i:hover { background: var(--paper-3); }
.pgrid__ico { width: 26px; height: 26px; color: var(--ink); display: block; }
.pgrid__ico svg { width: 100%; height: 100%; display: block; }
.pgrid__name { font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem); line-height: 1.25; }
.pgrid__body { font-size: 0.78rem; line-height: 1.68; color: var(--muted); }
.pgrid__list { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .3rem; }
.pgrid__list li {
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: .04em;
  color: var(--ink-80); padding-left: .9em; position: relative;
}
.pgrid__list li::before { content: "—"; position: absolute; left: 0; opacity: .45; }

/* ── the event bar ────────────────────────────────────────────────────────
   Fixed to the foot of the window, above the floating widgets. It appears
   once the visitor has moved past the hero, never animates on a loop, and is
   dismissible for the session. */
.ebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--deep); color: var(--on-deep);
  border-top: 1px solid rgba(255, 255, 255, .14);
  transform: translateY(100%);
  transition: transform .6s var(--ease);
}
.ebar[hidden] { display: none; }
.ebar.is-in { transform: none; }
.ebar__in {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem clamp(.9rem, 2vw, 1.8rem);
  padding-block: .7rem;
  padding-right: 3rem;
}
.ebar__mark { flex: 0 0 auto; display: flex; align-items: center; }
.ebar__logo { display: block; height: 24px; width: auto; }
/* Until the event's own mark is supplied, the name is set as type — accurate,
   and it asserts nothing about permission to reproduce a logo. */
.ebar__logo--type {
  font-family: var(--serif); font-size: 0.95rem; letter-spacing: .04em;
  white-space: nowrap; padding-right: clamp(.6rem, 1.5vw, 1.2rem);
  border-right: 1px solid rgba(255, 255, 255, .2);
}
.ebar__txt { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; flex: 1 1 16ch; }
.ebar__txt strong { font-size: 0.8rem; font-weight: 500; }
.ebar__txt span { font-size: 0.74rem; opacity: .62; }
.ebar__cta { flex: 0 0 auto; }
.ebar__x {
  position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--on-deep); opacity: .5; font-size: .8rem;
  transition: opacity .3s var(--ease);
}
.ebar__x:hover { opacity: 1; }
@media (max-width: 700px) {
  .ebar__in { padding-right: 2.4rem; }
  .ebar__logo--type { border-right: 0; font-size: .85rem; }
  .ebar__txt { flex-basis: 100%; }
}

/* The floating widgets and the sticky rail have to clear the bar. */
body.has-ebar .contact-rail { bottom: calc(var(--ebar-h, 58px) + 1rem); }
body.has-ebar .rail { bottom: var(--ebar-h, 58px); }

/* ── the event invitation ─────────────────────────────────────────────────── */
.einv {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: var(--gut);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.einv[hidden] { display: none; }
.einv.is-open { opacity: 1; pointer-events: auto; }
.einv__veil { position: absolute; inset: 0; background: rgba(14, 13, 11, .72); backdrop-filter: blur(3px); }
.einv__box {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--paper);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  transform: translateY(14px);
  transition: transform .5s var(--ease);
}
.einv.is-open .einv__box { transform: none; }
.einv__x {
  position: absolute; top: .5rem; right: .5rem;
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--ink); opacity: .5;
}
.einv__x:hover { opacity: 1; }
.einv__mark { display: block; margin-bottom: 1.1rem; }
.einv__mark img { height: 30px; width: auto; }
.einv__logo--type { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .03em; }
.einv__head h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); margin-top: .5rem; max-width: 18ch; }
.einv__meta { font-family: var(--sans); font-size: 0.76rem; margin-top: .7rem; color: var(--ink-80); }
.einv__body { font-size: 0.84rem; line-height: 1.7; color: var(--muted); margin-top: .7rem; max-width: 46ch; }
.einv__form { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }

/* ── the intent chips ─────────────────────────────────────────────────────── */
.form__intent { border: 0; padding: 0; margin: 0; }
.form__intent-label {
  font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: .55rem;
}
.form__intent .chips { gap: .35rem; }
.form__intent .chip span {
  font-size: 0.66rem; letter-spacing: .09em; padding: .5em .85em;
  min-height: 38px; display: inline-flex; align-items: center;
}

/* ── tighter inner pages ──────────────────────────────────────────────────
   The page heroes were carrying a full --sec above and below a single line of
   type. They keep their presence and lose the emptiness. */
.phero--short { min-height: 0; padding-block: clamp(3.4rem, 7vw, 6rem); }
.phero--short .phero__in { padding-block: 0; }
.phero--short h1 { max-width: 20ch; }
.phero--short .lede { margin-top: 1rem; max-width: 62ch; }

.sec-head { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.h-sec { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); margin-bottom: .7rem; padding-bottom: .7rem; }
.body-copy p { font-size: 0.87rem; line-height: 1.78; }
.body-copy p + p { margin-top: 1em; }
.disclaim { font-size: 0.76rem; padding: 1.1rem 1.25rem; line-height: 1.72; }
.prose p { font-size: 0.88rem; line-height: 1.8; }
.flist { gap: clamp(1.4rem, 2.6vw, 2.4rem); }

/* ── the mark inside forms and modals ─────────────────────────────────────
   Top-right of the enquiry panel. It is the B&S wordmark with the MIAMI
   tagline optically centred beneath it — kit §01 — set at the kit's minimum
   scale so it signs the panel without competing with the heading it sits
   beside. text-align stays centre here; only the header cut is flush left. */
.form__mark,
.modal__mark {
  display: block;
  color: var(--ink);
}
.form__mark .wordmark,
.modal__mark .wordmark {
  --wm: 10px;
  --wm-floor: 5.4px;
  --wm-tagtrack: .40em;
  text-align: center;
}
.section--dark .form__mark,
.form--on-dark .form__mark { color: var(--on-deep); }

/* The modal head lays the title and the mark on one row; the mark takes the
   right edge and never wraps under the heading. */
.modal__headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
}
.modal__headline h2 { max-width: 16ch; }
.modal__mark { flex: 0 0 auto; padding-top: .25rem; }

/* In an inline form the mark sits top-right of the block. */
.form { position: relative; }
.form > .form__mark {
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 520px) {
  .form > .form__mark { position: static; margin-bottom: 1rem; }
}

/* ── the hero's three calls to action ─────────────────────────────────────
   All three identical, as asked, and all three catching the light. The sheen
   is a single soft highlight travelling across the face on a long cycle —
   staggered so they do not flash in unison, slow enough to read as a sheen on
   a good surface rather than a banner ad, and gone entirely for anyone who
   has asked for less motion. */
.btn--shine {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--shine::before { display: none; }          /* the base wipe would fight the sheen */

.btn--shine::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -40%;
  width: 48%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg) translateX(-220%);
  pointer-events: none;
  z-index: 1;
}
.btn--shine > span { position: relative; z-index: 2; }

/* A halo that breathes with the sheen. Paper on Onyx, so it lifts the button
   off the film without introducing a colour §08 does not allow. */
@media (prefers-reduced-motion: no-preference) {
  .btn--shine::after { animation: btn-sheen 3.6s var(--ease-io) infinite; }
  .btn--shine { animation: btn-glow 3.6s var(--ease-io) infinite; }
  .vhero__ctas .btn--shine:nth-child(2)::after,
  .vhero__ctas .btn--shine:nth-child(2) { animation-delay: 1.2s; }
  .vhero__ctas .btn--shine:nth-child(3)::after,
  .vhero__ctas .btn--shine:nth-child(3) { animation-delay: 2.4s; }
}
@keyframes btn-sheen {
  0%,  52% { transform: skewX(-18deg) translateX(-220%); }
  80%, 100% { transform: skewX(-18deg) translateX(560%); }
}
@keyframes btn-glow {
  0%, 46%, 100% { box-shadow: 0 0 0 0 rgba(250, 246, 239, 0); }
  66%           { box-shadow: 0 0 22px 3px rgba(250, 246, 239, .42); }
}
/* Hovering takes over from the loop so the press never fights the animation. */
.btn--shine:hover, .btn--shine:focus-visible { animation-play-state: paused; box-shadow: none; }

/* Hover lifts it to Onyx, so the sheen reads as a surface and the press reads
   as a state change rather than more of the same. */
.btn--shine:hover, .btn--shine:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ── the homepage journey block ───────────────────────────────────────────
   The wheel is the Investor Journey page's centrepiece; on the homepage it is
   a preview, so it is held to a fraction of the width and set beside the copy
   rather than under it. */
.jpreview { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; }
@media (min-width: 800px) { .jpreview { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); } }
.jpreview__wheel { max-width: 240px; width: 100%; margin-inline: auto; }
.jpreview__stages { display: grid; gap: .9rem; }
@media (min-width: 600px) { .jpreview__stages { grid-template-columns: repeat(3, 1fr); } }
.jpreview__s { display: grid; gap: .3rem; align-content: start; }
.jpreview__s h3 { font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem); }
.jpreview__s p { font-size: 0.76rem; line-height: 1.65; opacity: .78; }
.jpreview__s span {
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: .2em; opacity: .5;
}

/* ── the homepage introduction ────────────────────────────────────────────
   Who we are and what we do, beside the two principals. */
.whowe { display: grid; gap: clamp(1.6rem, 3.5vw, 3rem); align-items: center; }
@media (min-width: 860px) { .whowe { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); } }
.whowe__copy p { font-size: 0.88rem; line-height: 1.78; }
.whowe__copy p + p { margin-top: .9em; }

/* ── the parent mark in the footer ────────────────────────────────────────
   Deliberately small. It is an attribution, not a second brand: the B&S
   Luxury wordmark sits above it and must stay the larger of the two. */
.ftr__house {
  font-size: 0.7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-deep-mut);
  margin-top: 1.1rem;
  margin-bottom: .55rem;
}
.ftr__parent {
  display: block;
  width: 150px;
  max-width: 60%;
  opacity: .75;
  transition: opacity .35s var(--ease);
}
.ftr__parent:hover { opacity: 1; }
.ftr__parent img { width: 100%; height: auto; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE PASS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── page titles were sliding under the fixed header ──────────────────────
   The earlier .phero--short rule zeroed .phero__in's padding, and that padding
   was the only thing holding the h1 clear of the header. The clearance is
   restored and the section's own padding does the rest. */
.phero--short { min-height: 0; padding-block: 0; }
.phero--short .phero__in {
  padding-top: calc(var(--nav-h) + clamp(1.6rem, 5vh, 3.4rem));
  padding-bottom: clamp(1.8rem, 5vh, 3.4rem);
}

/* ── the development cover logo, 25% larger ──────────────────────────────── */
/* Up 40% from 30px. Several of these marks are lockups rather than wordmarks
   — 619 Residences carries "Foster + Partners · Nobu Hospitality" as a second
   line — and below this size that line stops being type and becomes texture.
   The width cap goes up with it, or a wide lockup is held back by its width
   before it ever reaches the height. */
.card__logo { height: 42px; }
.card__logo img { max-width: 88%; }
@media (max-width: 700px) {
  .card__logo { height: 34px; }
  .card__logo img { max-width: 82%; }
}

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* The mark reads small on a phone; up 30%, tagline floor with it. */
  .hdr .wordmark { --wm: 15px; --wm-floor: 7.2px; }

  /* Hero copy takes the whole column. The measures that were here parked the
     title and the line under it in the left two-thirds of the screen. */
  .vhero__title { font-size: clamp(2.6rem, 12.5vw, 3.6rem); line-height: .96; max-width: none; }
  .vhero__sub { font-size: 1rem; line-height: 1.5; max-width: none; }
  .vhero__eyebrow { font-size: 0.62rem; letter-spacing: .26em; }

  /* The three routes as a wrapping row of buttons sized to their own labels.
     Stretched edge to edge they read as three banners rather than a choice. */
  .vhero__ctas { gap: .45rem; margin-top: 1.5rem; }
  .vhero__ctas .btn {
    width: auto;
    flex: 0 1 auto;
    padding: .8em 1rem;
    min-height: 40px;
    font-size: 0.6rem;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  /* On a phone the homepage pair is centred on the same axis as the statement
     above it — photograph, name and summary all on the centre line. Left-
     aligned under a centred introduction they read as two loose columns. */
  .team--compact { max-width: none; margin-top: 2rem; }
  .team--compact .team__m { display: grid; justify-items: center; text-align: center; }
  .team--compact .team__frame { max-width: 300px; margin-inline: auto; }
  .team--compact .team__bio { margin-inline: auto; }
  .team .team__frame { max-width: none; }
  .team__frame img { aspect-ratio: 3/4; }
  .team__name { font-size: 1.3rem; }
  .team__bio, .team--compact .team__bio { font-size: 0.86rem; max-width: none; }

  /* The whowe block stacks; the portraits lead. */
  .whowe { gap: 1.6rem; }
}

/* On a small phone two portraits side by side are each too narrow to read a
   face in, so they stack. */
@media (max-width: 520px) {
  .team--compact { grid-template-columns: 1fr; }
  .team--compact .team__frame { max-width: 320px; margin-inline: auto; }
}

/* ── the promise ──────────────────────────────────────────────────────────
   "Built from experience. Not theory." Centred, on the inverse ground, with
   the six statements on a divided rail. It is the one place the site raises
   its voice, so it gets the largest display step and the most air. */
.promise__head { text-align: center; max-width: 62ch; margin-inline: auto; }
.eyebrow--dash { display: inline-flex; align-items: center; gap: .8em; }
.eyebrow--dash::before,
.eyebrow--dash::after { content: ""; width: 1.6em; height: 1px; background: currentColor; opacity: .5; }

.promise__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.1rem + 4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.014em;
  margin-top: 1rem;
}
.promise__title em { font-style: italic; }
.promise__sub {
  margin-top: 1.1rem;
  font-size: var(--t-lede);
  opacity: .74;
  max-width: 44ch;
  margin-inline: auto;
}

.promise__list {
  list-style: none;
  margin: clamp(2.2rem, 5vw, 3.6rem) auto 0;
  padding: 0;
  max-width: 760px;
  display: grid;
}
.promise__i {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  gap: .9rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.promise__i:first-child { border-top: 1px solid rgba(255, 255, 255, .13); }
.promise__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.8rem;
  opacity: .45;
  text-align: right;
}
.promise__t {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.42rem);
  line-height: 1.35;
}

.promise__foot { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
.promise__closing {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.98rem, 0.9rem + 0.5vw, 1.2rem);
  opacity: .78;
}
.promise__rule {
  display: block;
  width: 56px;
  height: 1px;
  background: currentColor;
  opacity: .4;
  margin: clamp(1.4rem, 3vw, 2.2rem) auto;
}
.promise__stamp {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.2rem);
  line-height: 1.2;
}

@media (max-width: 560px) {
  .promise__i { grid-template-columns: 2rem 1fr; gap: .7rem; padding: .85rem 0; }
}

/* ── the two arguments on Partners ────────────────────────────────────────
   Set as statements rather than as a pair of column headings: this is the
   part of the page that has to land. */
.argue { display: grid; gap: clamp(2rem, 4vw, 3.4rem); }
@media (min-width: 900px) { .argue { grid-template-columns: repeat(2, 1fr); } }
.argue__t {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem);
  line-height: 1.12;
  margin-bottom: 1rem;
  max-width: 15ch;
}
.argue__i .body-copy p { font-size: 0.87rem; line-height: 1.78; }

/* ── the parent note ──────────────────────────────────────────────────────
   States the relationship before describing it, so nobody has to infer that
   B&S Luxury is a division rather than a separate agency. */
.bs__note {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--on-deep);
  opacity: .62;
  border-left: 1px solid rgba(255, 255, 255, .24);
  padding-left: 1rem;
  max-width: 46ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE ENQUIRY FORM, TIGHTENED
   Third pass. The modal was tall enough to scroll on a phone before the
   visitor had typed anything, and the close control sat on top of the mark.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The head reads as a letterhead: mark, then the request. Laid out as a row
   with the mark to the right it shared a corner with the close button, and at
   small sizes the two overlapped outright. The right inset keeps the heading
   out from under the control whatever the translation does to its length. */
.modal__headline {
  display: grid;
  justify-items: start;
  gap: .5rem;
  padding-right: 3.4rem;
}
.modal__headline h2 { max-width: 22ch; }
.modal__mark { padding-top: 0; }

.modal__box { padding: clamp(1.25rem, 3.2vw, 2.25rem); }
.modal__head { margin-bottom: .9rem; gap: .4rem; }
.modal__head h2 { font-size: clamp(1.3rem, 2.4vw, 1.62rem); line-height: 1.16; }
.modal__head p { font-size: .78rem; line-height: 1.5; max-width: 46ch; }

/* Fewer, shorter lanes. Every value here is a reduction on the base form. */
.modal__box .form--tight { gap: .58rem; }
.modal__box .form--tight .form__row { gap: .58rem 1rem; }
.modal__box .form--tight .field input,
.modal__box .form--tight .field select { padding: .38em 0; min-height: 36px; font-size: .92rem; }
.modal__box .form--tight .field > span { font-size: .58rem; letter-spacing: .16em; }
.modal__box .form__intent { padding-top: .1rem; }
.modal__box .consent { font-size: .68rem; line-height: 1.38; }
.modal__box .btn { padding: .85em 1.6em; min-height: 42px; }

/* Three chips instead of seven, so each can carry a little more weight. */
.form__intent .chip span { font-size: .68rem; padding: .58em 1em; min-height: 40px; }
.chip[hidden] { display: none; }

/* The note field asks for one line and makes room the moment it is used.
   Three rows of empty box read as an assignment; two rows read as an
   invitation, and the field opens up as soon as anyone accepts it. */
.field--note textarea {
  min-height: 46px;
  resize: vertical;
  line-height: 1.5;
  transition: min-height .4s var(--ease), border-color .3s;
}
.field--note:focus-within textarea { min-height: 92px; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PARENT COMPANY, ON ABOUT
   The one-pager's own structure carried onto the page: the line it leads
   with, and the two engines it says the platform runs on.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Set directly under the mark, in the serif, at display weight — this is the
   parent's sentence about itself, not a caption on its logo. */
.bs__tagline {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
  line-height: 1.25;
  max-width: 24ch;
  margin-top: .2rem;
}

.engines {
  margin-top: clamp(2.6rem, 5vw, 4.2rem);
  padding-top: clamp(2.2rem, 4vw, 3.4rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: grid;
  gap: clamp(1.8rem, 3.5vw, 3rem);
}
@media (min-width: 900px) {
  .engines { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: start; }
}
.engines__head { gap: .85rem; }
.engines__title { font-size: var(--t-h3); line-height: 1.14; }
.engines__body { font-size: var(--t-small); line-height: 1.7; opacity: .8; max-width: 40ch; }

.engines__pair { display: grid; gap: 1px; background: rgba(255, 255, 255, .16); }
@media (min-width: 620px) { .engines__pair { grid-template-columns: repeat(2, 1fr); } }
.engine {
  background: var(--deep);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  display: grid;
  gap: .6rem;
  align-content: start;
}
.engine__n {
  font-family: var(--serif); font-style: italic;
  font-size: .82rem; opacity: .45;
}
.engine__t { font-size: clamp(1.02rem, 0.92rem + 0.5vw, 1.28rem); line-height: 1.2; }
.engine__b { font-size: var(--t-small); line-height: 1.68; opacity: .82; }

/* The booth number carries the same weight as the dates: it is the one detail
   a visitor standing on the floor actually needs. */
.evt__booth { font-weight: 400; color: var(--on-deep); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE SHOWCASE
   Every row of cards on the homepage. Two layouts over one set of markup.

   Desktop is a GRID of six with pagination: six buildings can be compared at
   a glance, which is what the page is for. A phone gets a centred carousel
   through the whole set, because six cards stacked on a 390px screen is six
   full-width photographs and a very long scroll.

   Before the script runs the set is a plain grid of everything — no page is
   hidden that JavaScript is not there to bring back.
   ═══════════════════════════════════════════════════════════════════════════ */

.shw{
  --gap: clamp(1.1rem, 2vw, 2rem);
  --lux: cubic-bezier(.22,.61,.36,1);
}

/* ── desktop: the grid ──────────────────────────────────────────────────── */
.shw__view{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.shw__track{
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
@media (min-width: 900px) {
  .shw__track{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.shw__item{ min-width: 0; position: relative; }
.shw__item[hidden]{ display: none; }

/* The "View →" line belongs to the phone carousel, where only the centred
   card carries it. In the grid every card is equal and it would be noise. */
.shw__view-cta{ display: none; }

/* ── the pagination ─────────────────────────────────────────────────────── */
.shw__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
}
.shw__nav[hidden]{ display: none; }
.shw__pages{ display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.shw__btn, .shw__page{
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: .06em;
  transition: background .3s var(--lux), color .3s var(--lux),
              border-color .3s var(--lux), opacity .3s var(--lux);
}
.shw__btn{ border-color: var(--rule); }
.shw__page:hover:not([aria-current]){ background: var(--paper-3); }
.shw__btn:hover:not(:disabled){ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shw__btn:disabled{ opacity: .28; cursor: default; }
.shw__page[aria-current]{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shw__ico{ width: 14px; height: 14px; }

.section--dark .shw__btn{ border-color: rgba(255, 255, 255, .28); color: var(--on-deep); }
.section--dark .shw__page{ color: var(--on-deep); }
.section--dark .shw__page:hover:not([aria-current]){ background: rgba(255, 255, 255, .1); }
.section--dark .shw__btn:hover:not(:disabled),
.section--dark .shw__page[aria-current]{ background: var(--on-deep); color: var(--ink); border-color: var(--on-deep); }

/* ── phone: the centred carousel ────────────────────────────────────────
   One card holds the middle and carries the whole record; its neighbours sit
   either side, smaller and quieter. The movement is `overflow-x: auto` with
   `scroll-snap-align: center` — the swipe, the momentum and the snap are the
   browser's own. */
@media (max-width: 899px) {
  .shw{
    --card: 68vw;
    --side-scale: .93;
    --side-opacity: .55;
  }
  .shw--tight{ --card: 64vw; }

  .shw__view{
    max-width: none;
    padding-inline: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: clamp(8px, 1.4vw, 16px);
  }
  .shw__view::-webkit-scrollbar{ display: none; }
  .shw__view:focus-visible{ outline: 2px solid var(--ink); outline-offset: -2px; }
  .section--dark .shw__view:focus-visible{ outline-color: var(--on-deep); }

  .shw__track{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--card);
    gap: clamp(.7rem, 2.4vw, 1.1rem);
    /* half the viewport minus half a card: the first and last cards can reach
       the centre like any other */
    padding-inline: calc(50% - var(--card) / 2);
  }

  /* Every card is in the row — pagination is a desktop idea. */
  .shw__item[hidden]{ display: block; }

  .shw__item{
    scroll-snap-align: center;
    transform: scale(var(--side-scale));
    opacity: var(--side-opacity);
    filter: saturate(.72) brightness(.82);
    transition: transform .55s var(--lux), opacity .55s var(--lux), filter .55s var(--lux);
  }
  .shw__item.is-active{
    transform: scale(1);
    opacity: 1;
    filter: none;
    z-index: 3;
  }
  .shw__view:not([data-shw-ready]) .shw__item{
    transform: none; opacity: 1; filter: none;
  }

  .shw__item.is-active .card__media,
  .shw__item.is-active .acard__media,
  .shw__item.is-active .tile{
    box-shadow: 0 34px 70px -44px rgba(14, 13, 11, .7);
  }

  /* Only the centred card carries the full record. */
  .shw__item .card__badges,
  .shw__item .card__meta,
  .shw__item .acard__tag,
  .shw__item .acard__count,
  .shw__item .tile__note,
  .shw__item .tile__cta{ transition: opacity .45s var(--lux); }
  .shw__item:not(.is-active) .card__badges,
  .shw__item:not(.is-active) .card__meta,
  .shw__item:not(.is-active) .acard__tag,
  .shw__item:not(.is-active) .acard__count,
  .shw__item:not(.is-active) .tile__note,
  .shw__item:not(.is-active) .tile__cta{ opacity: 0; }

  .shw__item.is-active .card__reveal{ max-height: 8rem; opacity: 1; margin-top: .8rem; }

  .shw__view-cta{
    display: block;
    position: absolute;
    left: 0; right: 0;
    bottom: clamp(12px, 2vw, 20px);
    text-align: center;
    pointer-events: none;
    z-index: 4;
    font-family: var(--sans);
    font-size: var(--t-micro);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--on-deep);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s var(--lux), transform .45s var(--lux);
    text-shadow: 0 1px 12px rgba(10, 9, 7, .6);
  }
  .shw__item.is-active .shw__view-cta{ opacity: .92; transform: none; }

  .shw__item:not(.is-active){ cursor: pointer; }

  /* Pagination has no meaning when the whole set is one swipeable row. */
  .shw__nav{ display: none !important; }
}

/* Taking the carousel states for the FIRST time must not animate: the row
   would load at full strength and visibly fade down, which reads as a fault.
   Removed on the next frame, so every later change is animated. */
.shw--settling .shw__item,
.shw--settling .shw__item *{ transition: none !important; }

/* A card inside a horizontal row starts off screen, where the reveal observer
   cannot see it. The block reveals as a whole and the cards are present. */
.reveal-armed .shw__track .rv{ opacity: 1; transform: none; }

/* ── dragging, on a mouse ───────────────────────────────────────────────── */
.shw__view.is-dragging{ scroll-snap-type: none; cursor: grabbing; }
.shw__view.is-dragging a, .shw__view.is-dragging button{ pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .shw__view{ scroll-behavior: auto; }
  .shw__item{ transition: none; transform: none; }
  .shw__item.is-active{ transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE HOUSE MARK ON A CARD
   Top right of the searches and the Insights cards. Live type, so it takes
   its colour from whatever it sits on and never goes soft. The tagline comes
   with it — §01 does not allow the wordmark to appear on its own.
   ═══════════════════════════════════════════════════════════════════════════ */
.card__mark {
  position: absolute;
  top: clamp(.8rem, 1.5vw, 1.15rem);
  right: clamp(.8rem, 1.5vw, 1.15rem);
  z-index: 3;
  pointer-events: none;
  text-align: center;
  color: var(--on-deep);
  /* On a photograph the mark needs its own separation, and the kit allows no
     panel behind it — so the lift is a shadow on the type itself. */
  text-shadow: 0 1px 10px rgba(10, 9, 7, .55);
}
/* The floor is higher here than on a form. §04's ratio would put the tagline
   at about 2px, and the 5.4px the forms use is readable on Paper but not over
   a photograph. 7px is where MIAMI stays a word on an image. */
.card__mark .wordmark {
  --wm: 10px;
  --wm-floor: 7px;
  --wm-tagtrack: .34em;
  text-align: center;
}
@media (min-width: 900px) { .card__mark .wordmark { --wm: 11px; } }

/* The Insights card is Paper below the fold of its image, but the mark sits
   ON the photograph, so it stays in the light colourway. */
.card--light .card__mark { color: var(--on-deep); }

/* The one-click searches are wide, short tiles rather than tall cards, so on
   a phone they take a slightly narrower card than the rest. On a desktop they
   sit in the same grid of six as everything else. */
.shw--tight .tile { min-height: clamp(210px, 21vw, 260px); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE HOMEPAGE INTRO, THE INVITATION, AND A PERSON'S DETAILS
   ═══════════════════════════════════════════════════════════════════════════ */

/* The About block opens the page's argument, so it is set centred and to a
   reading measure rather than split across two columns. */
.intro { text-align: center; display: grid; justify-items: center; gap: 1.1rem; }
.intro__title {
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem);
  line-height: 1.1;
  max-width: 22ch;
}
.intro__copy { max-width: 82ch; display: grid; gap: 1em; }
.intro__copy p { font-size: var(--t-body); line-height: 1.75; color: var(--ink-80); }
.intro .btn { margin-top: .6rem; }
.intro__rule {
  display: block; width: min(320px, 60%); height: 1px;
  background: var(--rule); margin-top: clamp(1.6rem, 3vw, 2.6rem);
}

/* ── the line that replaced the map ───────────────────────────────────────
   The map panel is a tool; this section is an invitation to browse. One line,
   set large, does the job the map was being asked to do here. */
.pullquote {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 0.95rem + 1.7vw, 2.2rem);
  line-height: 1.25;
  max-width: 30ch;
  margin: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(2rem, 3.5vw, 3rem);
  text-wrap: balance;
}

/* three short notes rather than three columns of prose */
.flist--tight { gap: clamp(1.4rem, 2.6vw, 2.4rem) var(--gut); }
.flist--tight h3 { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); }
.flist--tight p { font-size: var(--t-small); line-height: 1.7; max-width: 40ch; }
.flist--tight .flist__n { margin-bottom: .5rem; }

/* ── the invitation ─────────────────────────────────────────────────────── */
.join { display: grid; gap: clamp(1.6rem, 3vw, 2.8rem); }
@media (min-width: 900px) { .join { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: start; } }
.join__title { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem); line-height: 1.12; max-width: 16ch; }
.join__body p { font-size: var(--t-small); line-height: 1.78; opacity: .86; max-width: 62ch; }
.join__body p + p { margin-top: .9em; }
.join__close { font-family: var(--serif); font-style: italic; font-size: var(--t-lede); opacity: 1 !important; }

/* ── a person's contact details ───────────────────────────────────────────
   A short definition list under the biography. Set quietly: this is reference
   information, wanted only once someone has decided who to call. */
.tdl { margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule); display: grid; gap: 0; }
.tdl__label {
  font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .7rem;
}
.tdl__row { display: grid; gap: .1rem .9rem; padding: .38rem 0; }
@media (min-width: 420px) { .tdl__row { grid-template-columns: 5.6rem 1fr; align-items: baseline; } }
.tdl dt {
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.tdl dd { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--ink-80); }
.tdl dd a { border-bottom: 1px solid var(--rule); transition: border-color .3s var(--ease); }
.tdl dd a:hover { border-bottom-color: var(--ink); }
.section--alt .tdl { border-top-color: var(--rule); }


/* ═══════════════════════════════════════════════════════════════════════════
   THE TEAM, ALIGNED ACROSS COLUMNS
   Three biographies are never the same length, so the tag list and the contact
   details below them landed at three different heights. Each member becomes a
   SUBGRID of the row it sits in: portrait, name, role, biography, read-more,
   tags and details each get a row whose height is the tallest of the three, so
   every band lines up across the columns.

   The alternative — a fixed height per band — would have to be re-tuned for
   English, Spanish, Portuguese and Italian separately, and would clip the
   moment a biography grew by a line.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 720px) {
  .team:not(.team--compact){
    row-gap: 0;
    column-gap: var(--gut);
    grid-template-rows: repeat(7, auto);
  }
  .team:not(.team--compact) .team__m{
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  /* the wrapper steps out of the way so its children join the member's grid */
  .team:not(.team--compact) .team__body{ display: contents; }

  /* The details block sits at the bottom of its own row, so the rule above it
     is level across all three even when one member has a licence row and
     another does not. */
  .team:not(.team--compact) .tdl{ align-self: start; }
  .team__slot{ display: block; }
}

/* Without subgrid the member is a plain block again — the bands no longer
   align, which is exactly how it looked before, and nothing is broken. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 720px) {
    .team:not(.team--compact){ row-gap: clamp(1.6rem, 3vw, 2.6rem); grid-template-rows: none; }
    .team:not(.team--compact) .team__m{ display: block; grid-row: auto; }
    .team:not(.team--compact) .team__body{ display: block; }
  }
}

/* the + that opens the rest of the pages */
.shw__page[hidden]{ display: none; }
.shw__more{ font-size: 1rem; line-height: 1; letter-spacing: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   THE AREA CARD, SET LIKE AN ARTICLE
   Photograph on top, then the name and its line on Paper. Printed over the
   picture the type had to fight the image for contrast and every guide read as
   a poster; set light, the row of guides matches the row of Insights.
   ═══════════════════════════════════════════════════════════════════════════ */
.acard--light{ background: transparent; }
.acard--light .acard__media{
  aspect-ratio: 3/2;
  margin-bottom: 1.15rem;
}
.acard--light .acard__veil{ display: none; }
.acard--light .acard__body{
  position: static;
  padding: 0;
  color: var(--ink);
}
.acard--light .acard__region{
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .7rem;
}
.acard--light .acard__name{
  font-size: var(--t-h3);
  line-height: 1.14;
  color: var(--ink);
}
.acard--light .acard__tag{
  margin-top: .7rem;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--muted);
  max-width: 42ch;
}
.acard--light .acard__count{
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.acard--light:hover .acard__name{ opacity: .68; }
/* the cartographic fallback needs its own ground now the veil is gone */
.acard--light .acard--carto{ background: var(--paper-2); }
.acard--light .acard--carto .acard__veil{ display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE ONE-CLICK SEARCHES, AT LISTING PROPORTIONS
   They sit in the same grid as the developments, so they take the same shape:
   a tall frame with the photograph behind and the brief across the foot. Held
   at a short min-height they read as banners in a row of buildings.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .tile{ min-height: 0; aspect-ratio: 4/5; }
  .shw--tight .tile{ min-height: 0; }
  .tile__body{ padding: clamp(1.2rem, 2vw, 1.7rem); }
  .tile__count{ font-size: clamp(2.2rem, 3.4vw, 3rem); }
  .tile__line1{ font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE EVENT INVITATION — BOTH MARKS
   ═══════════════════════════════════════════════════════════════════════════ */
.einv__marks{
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2.4vw, 1.4rem);
  margin-bottom: 1.1rem;
}
.einv__marks .einv__mark{ margin-bottom: 0; }
.einv__rule{
  width: 1px;
  align-self: stretch;
  min-height: 26px;
  background: var(--rule);
  flex: 0 0 auto;
}
.einv__bs{ display: block; flex: 0 0 auto; }
.einv__bs img{ height: 22px; width: auto; display: block; }
@media (min-width: 600px) { .einv__bs img{ height: 26px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PHONE FIELD, WITH ITS COUNTRY CODE
   The code sits in front of the number as one field, on one baseline, under
   one label — so it reads as a phone number rather than as two questions.

   The select is laid OVER the visible code and made transparent: a native
   <select> is what gives a phone the operating system's own picker, which on
   iOS and Android is a wheel rather than a dropdown and is far better than
   anything rebuilt. But a select wide enough to show "United States +1" would
   dominate the row, so the real control stays full-size for the pointer and
   the eye is given the dial code alone.
   ═══════════════════════════════════════════════════════════════════════════ */
.tel{
  --tel-cc: 3.7rem;          /* fits +598, the longest code in the list */
  display: grid;
  /* A fixed first column rather than auto: the select is what would otherwise
     size it, and a select wide enough to hold "United States +1" would take a
     third of the row for a two-character code. */
  grid-template-columns: var(--tel-cc) 1fr;
  align-items: center;
  gap: .55rem;
  position: relative;
}
.tel__dial{
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: .95rem;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  padding-right: .9em;
}
/* the chevron, so it reads as a control rather than a label */
.tel__dial::after{
  content: "";
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  opacity: .55;
}
/* components.css sets `.field select { position: relative }`, which outranks a
   bare .tel__cc — so the class is qualified to win. Left in flow the select
   sizes the column and the layout works only by accident. */
.field--tel .tel__cc{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--tel-cc);
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  min-height: 0;
  cursor: pointer;
  z-index: 2;
}
.tel__cc:focus-visible + .tel__dial{ outline: 2px solid var(--ink); outline-offset: 3px; }
.tel__num{ grid-column: 2; }

/* the rule under the field belongs to the whole row, not to each half */
.field--tel .tel__num{ border-bottom: 0 !important; }
.field--tel .tel{
  border-bottom: 1px solid var(--rule);
  transition: border-color .3s;
}
.field--tel:focus-within .tel{ border-color: var(--ink); }
.section--dark .field--tel .tel,
.invite .field--tel .tel{ border-color: #ffffff3d; }
.section--dark .field--tel:focus-within .tel,
.invite .field--tel:focus-within .tel{ border-color: var(--on-deep); }
.section--dark .tel__dial, .invite .tel__dial{ color: var(--on-deep); }
/* the options themselves are drawn by the operating system, so they need a
   ground that is not the dark section they were opened from */
.tel__cc option{ color: var(--ink); background: var(--paper); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE IDX WIDGET
   Third-party markup we do not control, given a container that keeps it inside
   the page's measure and stops it forcing a horizontal scrollbar. Its own
   styles are left alone: restyling a widget the vendor updates is a fight that
   has to be re-fought every release.
   ═══════════════════════════════════════════════════════════════════════════ */
.idxw{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.idxw img{ max-width: 100%; height: auto; }
/* the widget ships its own type; only the colour is brought into line */
.idxw{ color: var(--ink); }



/* ═══════════════════════════════════════════════════════════════════════════
   THE NEIGHBOURHOOD GUIDE
   Stacked, not split. Two columns emptied on the right while the essay was
   still running on the left, and every paragraph added made the imbalance
   worse — the opposite of what a guide should do as it grows.
   ═══════════════════════════════════════════════════════════════════════════ */
.guide{ display: grid; gap: clamp(2.2rem, 4vw, 3.4rem); }

/* A reading measure, not the full band: prose set across 1400px is unreadable
   however good it is. */
.guide__essay{ max-width: 74ch; }
.guide__essay p{ font-size: var(--t-body); line-height: 1.8; color: var(--ink-80); }
.guide__essay p + p{ margin-top: 1.1em; }

/* what it is known for, and how life runs — side by side across the width */
.guide__facets{
  display: grid;
  gap: clamp(1.8rem, 3.5vw, 3rem);
  padding-top: clamp(1.8rem, 3vw, 2.6rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px){ .guide__facets{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.guide__facet .eyebrow{ margin-bottom: 1.1rem; }
.guide__facet .prose{ font-size: var(--t-small); line-height: 1.7; }
.guide__facet .prose li + li{ margin-top: .5em; }

/* B&S's own read. Body size, not display size: it is a paragraph of judgement,
   and set at 2.7rem in a narrow column it became a ribbon four words wide. */
.areanote{
  border-left: 2px solid var(--ink);
  padding: .1rem 0 .1rem clamp(1.2rem, 2.4vw, 1.9rem);
  max-width: 72ch;
}
.areanote .eyebrow{ margin-bottom: .8rem; }
.areanote p:not(.eyebrow){
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink);
}