@charset "utf-8";
/* ============================================================================
   LUIZA C BLACKMON — design system
   Didone display (matching the monogram) + geometric sans. Warm paper ground,
   near-black ink, no metallics. Hierarchy comes from type and space.
   ========================================================================= */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* ink & ground */
  --ink:        #14120F;
  --ink-80:     #14120Fcc;
  --ink-60:     #14120F99;
  --paper:      #FBF9F5;
  --paper-2:    #F3EEE6;
  --paper-3:    #EAE3D8;
  --rule:       #DED5C8;
  --rule-soft:  #E8E1D6;
  --muted:      #7E776B;
  --deep:       #14120F;   /* dark sections */
  --deep-2:     #1D1A16;
  --on-deep:    #F1ECE4;
  --on-deep-mut:#A79E90;
  --accent:     #14120F;   /* focus rings and active marks — ink, never metallic */
  --warn:       #A4462F;

  /* type */
  --serif: "Newsreader", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;

  /* fluid scale */
  --t-hero:  clamp(2.75rem, 1.1rem + 7.1vw, 8rem);
  --t-h1:    clamp(2.25rem, 1.1rem + 4.6vw, 5rem);
  --t-h2:    clamp(1.85rem, 1.1rem + 3.0vw, 3.6rem);
  --t-h3:    clamp(1.35rem, 1.0rem + 1.4vw, 2.05rem);
  --t-h4:    clamp(1.1rem,  0.98rem + 0.5vw, 1.35rem);
  --t-lede:  clamp(1.08rem, 0.98rem + 0.55vw, 1.42rem);
  --t-body:  clamp(0.95rem, 0.92rem + 0.18vw, 1.02rem);
  --t-small: 0.82rem;
  --t-micro: 0.70rem;

  /* rhythm */
  --gut:     clamp(1.15rem, 0.6rem + 2.4vw, 3.25rem);
  --sec:     clamp(4.5rem, 2.4rem + 8vw, 10.5rem);
  --sec-sm:  clamp(3rem, 1.8rem + 5vw, 6.5rem);
  --maxw:    1560px;
  --readw:   68ch;

  /* 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; }

/* STANDING LOCK — FUB Call/text CTA kill. Keep until the Follow Up Boss
   account CTA is actually off. Do not delete on a false “CTA is off” pass.
   Widget Tracker WT-VOXRDHMJ stays in <head> for pageviews. The agent then
   injects iframe[name=widgetCta] and widgetbe.com/widget restyles it to a
   fixed bottom-right “Call or text” card (850-786-4469 / “luizac”).
   Split rules: the `i` flag must not sit in the same list as the baseline
   selectors — one unsupported selector drops the whole rule.
   Never hide .contact-rail / .crb. */
iframe[name="widgetCta"],
iframe[name="widgetcta"],
iframe[id*="widgetCta"],
iframe[id*="widgetcta"],
iframe[id*="widget-cta"],
iframe[class*="widgetCta"],
iframe[class*="widgetcta"],
iframe[class*="widget-cta"],
iframe[src*="widgetbe.com"],
iframe[src*="followupboss.com"],
iframe[src*="widgetbe.com"][name],
iframe[sandbox][name="widgetCta"],
iframe[sandbox][name="widgetcta"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  bottom: auto !important;
  right: auto !important;
  z-index: -1 !important;
}
iframe[name="widgetCta" i],
iframe[name="widgetcta" i],
iframe[name*="widgetCta" i],
iframe[name*="widgetcta" i],
iframe[id*="widgetCta" i],
iframe[id*="widgetcta" i],
iframe[id*="widget-cta" i],
iframe[class*="widgetCta" i],
iframe[class*="widgetcta" i],
iframe[class*="widget-cta" i],
iframe[src*="widgetbe.com" i],
iframe[src*="followupboss.com" i] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  bottom: auto !important;
  right: auto !important;
  z-index: -1 !important;
}
/* Host wrappers widgetbe sometimes parks around the CTA iframe. */
[id*="widgetCta"],
[id*="widgetcta"],
[class*="widgetCta"],
[class*="widgetcta"],
[id*="ctaDesktopContainer"],
[id*="ctaMobileContainer"],
div[id*="widgetbe"],
div[class*="widgetbe"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* ── type primitives ────────────────────────────────────────────────────── */
.display, h1, h2, h3 {
  font-family: var(--serif); font-weight: 400;
  letter-spacing: -.008em; line-height: 1.08;
  font-variation-settings: "opsz" 48;
}
h1 { font-variation-settings: "opsz" 72; }
h3 { font-variation-settings: "opsz" 32; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; }
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; }
.brand svg, .brand img { height: clamp(30px, 2.6vw, 42px); width: auto; }
.brand__mark { fill: currentColor; }

.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); }

/* ═══════════════════════════════════════════════════════════════════════════
   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); }
.field--tel.err .tel{ border-color: var(--warn); }
.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 .field--tel.err .tel,
.invite .field--tel.err .tel{ border-color: var(--warn); }
.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); }

.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; }

/* ── brand mark swap (dark/light depending on header state) ─────────────── */
/* Two files, one slot: the light mark sits exactly on top of the dark one and
   they cross-fade as the header moves off the hero. Both must be in the same
   stacking position or the header shows the logo twice. */
.brand__swap { position: relative; display: block; height: clamp(30px, 2.6vw, 42px); }
.brand__swap img {
  height: 100%; width: auto; display: block;
  transition: opacity .45s var(--ease);
}
.brand__swap .brand__light { position: absolute; inset: 0; opacity: 0; }
.hdr--over .brand__swap .brand__dark { opacity: 0; }
.hdr--over .brand__swap .brand__light { opacity: 1; }

/* ── 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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CINEMATIC HERO
   Seven frames, each with its own slow camera move, crossfading into one
   another. The copy sits still while the film runs behind it.
   Concatenated after site.css into the single hashed stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --chero-dur: 5500ms;  /* how long each frame holds */
  --chero-fade: 1500ms;
  --chero-move: 7200ms; /* the camera runs on through the fade-out */
}

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

/* ── the film ─────────────────────────────────────────────────────────────── */
.chero__stage { position: absolute; inset: 0; z-index: 0; }
.chero__frame {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--chero-fade) cubic-bezier(.4,0,.3,1);
  background-image: var(--lqip);
  background-size: cover;
  background-position: var(--focus-wide, 50% 50%);
  will-change: opacity;
}
.chero__frame.is-on { opacity: 1; }
.chero__frame picture { display: block; width: 100%; height: 100%; }
.chero__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus-wide, 50% 50%);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}

/* Camera moves. The bare rule is the opening pose, .is-on the closing pose —
   the transition between the two is the shot. */
.chero__frame.is-on img { transition: transform var(--chero-move) linear; }
.chero__frame.no-anim img { transition: none; }

.chero__frame[data-move="pan-left"] img { transform: translate3d(3%, 0, 0) scale(1.09); }
.chero__frame[data-move="pan-left"].is-on img { transform: translate3d(-3%, 0, 0) scale(1.09); }

.chero__frame[data-move="pan-right"] img { transform: translate3d(-3%, 0, 0) scale(1.09); }
.chero__frame[data-move="pan-right"].is-on img { transform: translate3d(3%, 0, 0) scale(1.09); }

.chero__frame[data-move="zoom-in"] img { transform: scale(1.005); }
.chero__frame[data-move="zoom-in"].is-on img { transform: scale(1.075); }

.chero__frame[data-move="zoom-out"] img { transform: scale(1.08); }
.chero__frame[data-move="zoom-out"].is-on img { transform: scale(1.005); }

.chero__frame[data-move="zoom-up"] img { transform: translate3d(0, 2.2%, 0) scale(1.02); }
.chero__frame[data-move="zoom-up"].is-on img { transform: translate3d(0, -1.6%, 0) scale(1.085); }

.chero__frame[data-move="rise"] img { transform: translate3d(0, 3%, 0) scale(1.05); }
.chero__frame[data-move="rise"].is-on img { transform: translate3d(0, -2.4%, 0) scale(1.07); }

/* ── grading ──────────────────────────────────────────────────────────────── */
.chero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, #0a0907d9 0%, #0a09078f 34%, #0a090726 62%, #0a090700 84%),
    linear-gradient(to top, #0a0907e0 0%, #0a09075c 26%, #0a090700 56%),
    linear-gradient(to bottom, #0a0907a6 0%, #0a09071f 18%, #0a090700 34%);
}

/* a whisper of light across the cut, not a lens-flare graphic */
.chero__flare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 80% at 22% 42%, #fff6e2 0%, #fff6e200 55%);
  mix-blend-mode: screen;
}
.chero__flare.is-lit { animation: cheroFlare 1500ms cubic-bezier(.4,0,.3,1); }
@keyframes cheroFlare { 0%, 100% { opacity: 0; } 42% { opacity: .11; } }

/* ── copy ─────────────────────────────────────────────────────────────────── */
.chero__in { position: relative; z-index: 3; width: 100%; padding-block: calc(var(--nav-h) + 3rem) 9rem; }
.chero__copy { max-width: 850px; color: #fff; }

.chero__eyebrow {
  display: flex; align-items: center; gap: .85em; flex-wrap: wrap;
  font-size: var(--t-micro); letter-spacing: .34em; text-transform: uppercase;
  color: #ffffffc2; margin-bottom: clamp(1.25rem, 3vh, 2rem);
}
.chero__eyebrow em { font-style: normal; opacity: .5; }

.chero__title {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  /* held back from the full width of the frame: at display sizes the restraint
     is what reads as expensive, not the scale */
  font-size: clamp(2.4rem, 1rem + 4.05vw, 4.75rem);
  line-height: 1.05;
}
.chero__line { display: block; overflow: hidden; padding-bottom: .06em; }
.chero__line > span { display: block; }

/* The second line is set in italic rather than a colour. In a serif this
   reads as emphasis without introducing a metallic. */
.chero__accent { font-style: italic; letter-spacing: -.012em; }

.chero__sub {
  margin-top: clamp(1.1rem, 2.6vh, 1.6rem);
  max-width: 54ch;
  font-size: clamp(.95rem, .88rem + .3vw, 1.08rem); font-weight: 300; line-height: 1.6;
  color: #ffffffd6;
}
/* who is behind the offer, in one quiet line */
.chero__cred {
  margin-top: clamp(.9rem, 2vh, 1.3rem); padding-top: .95rem;
  border-top: 1px solid #ffffff2e; max-width: 54ch;
  font-family: var(--sans); font-size: .64rem; font-weight: 400;
  letter-spacing: .17em; text-transform: uppercase; line-height: 1.7;
  color: #ffffffab;
}

.chero__ctas { margin-top: clamp(1.9rem, 4vh, 2.75rem); display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── three equal-weight hero CTAs (B&S btn--shine trio, Luiza paper/ink) ── */
.btn--shine {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 38px -20px rgba(0, 0, 0, .8);
  transition: color .45s var(--ease), background .45s var(--ease),
              border-color .45s var(--ease), transform .45s var(--ease),
              box-shadow .45s var(--ease);
}
.btn--shine::before { display: none; }
.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; }

@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; }
  .chero__ctas .btn--shine:nth-child(2)::after,
  .chero__ctas .btn--shine:nth-child(2) { animation-delay: 1.2s; }
  .chero__ctas .btn--shine:nth-child(3)::after,
  .chero__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(251, 249, 245, 0); }
  66%           { box-shadow: 0 0 22px 3px rgba(251, 249, 245, .42); }
}
.btn--shine:hover, .btn--shine:focus-visible {
  animation-play-state: paused;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn--shine:hover::after, .btn--shine:focus-visible::after { animation-play-state: paused; }

/* kept for any leftover solid/ghost/quiet hero buttons */
.btn--solid-l, .btn--ghost, .btn--quiet {
  transition: color .45s var(--ease), background .45s var(--ease),
              border-color .45s var(--ease), transform .45s var(--ease),
              box-shadow .45s var(--ease);
}
.btn--solid-l {
  border: 1px solid #fff; background: #fff; color: var(--ink);
  box-shadow: 0 12px 38px -20px rgba(0, 0, 0, .8);
}
.btn--solid-l::before { display: none; }
.btn--solid-l:hover, .btn--solid-l:focus-visible {
  background: transparent; color: #fff; transform: translateY(-2px);
}
.btn--ghost { color: #fff; border-color: #ffffff66; }
.btn--ghost::before { background: #fff; }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); border-color: #fff; transform: translateY(-2px); }
.btn--quiet {
  color: #ffffffcc; border-color: #ffffff2e;
  background: rgba(10, 9, 7, .3); backdrop-filter: blur(8px);
}
.btn--quiet::before { background: #fff; }
.btn--quiet:hover, .btn--quiet:focus-visible {
  color: var(--ink); border-color: #fff; transform: translateY(-2px);
}

/* ── controls ─────────────────────────────────────────────────────────────── */
.chero__controls {
  position: absolute; z-index: 4;
  right: var(--gut); bottom: clamp(1.75rem, 4.5vh, 3rem);
  display: flex; align-items: center; gap: 1rem;
}
.chero__arrow {
  display: none; width: 44px; height: 44px; place-items: center;
  color: #ffffff8f; transition: color .35s var(--ease), transform .35s var(--ease);
}
@media (min-width: 900px) { .chero__arrow { display: grid; } }
.chero__arrow svg { width: 24px; height: 12px; }
.chero__arrow:hover { color: #fff; }
.chero__arrow--prev:hover { transform: translateX(-3px); }
.chero__arrow--next:hover { transform: translateX(3px); }

.chero__dots { display: flex; align-items: center; gap: .45rem; }
.chero__dot { position: relative; width: clamp(20px, 3.4vw, 40px); height: 34px; display: grid; align-items: center; }
.chero__dot::before {
  content: ""; display: block; height: 1px; width: 100%;
  background: #ffffff45; transition: background .35s var(--ease);
}
.chero__dot i {
  position: absolute; left: 0; top: 50%; height: 1px; width: 0;
  background: #fff; transform: translateY(-50%);
}
.chero__dot.is-on i { animation: cheroFill var(--chero-dur) linear forwards; }
.chero__dot:hover::before { background: #ffffff8c; }
@keyframes cheroFill { from { width: 0; } to { width: 100%; } }
.chero[data-paused="true"] .chero__dot.is-on i { animation-play-state: paused; }

/* ── scroll cue ───────────────────────────────────────────────────────────── */
.chero__scroll {
  position: absolute; z-index: 4;
  left: var(--gut); bottom: clamp(1.75rem, 4.5vh, 3rem);
  display: none; align-items: center; gap: .9rem;
  font-size: var(--t-micro); letter-spacing: .3em; text-transform: uppercase;
  color: #ffffff8f; transition: color .35s var(--ease);
}
@media (min-width: 760px) { .chero__scroll { display: flex; } }
.chero__scroll:hover { color: #fff; }
.chero__scroll i { display: block; width: 1px; height: 44px; background: #ffffff40; position: relative; overflow: hidden; }
.chero__scroll i::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  transform: translateY(-100%); animation: cheroTrickle 2.8s cubic-bezier(.5,0,.4,1) infinite;
}
@keyframes cheroTrickle {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ── entrance ─────────────────────────────────────────────────────────────
   Pure CSS animations, deliberately: the headline must never depend on a
   script having run. If JavaScript fails or is switched off, the copy still
   arrives — and the first frame, which ships with its source in the markup,
   still plays its camera move. Animations run once on load and are untouched
   by frame changes. */
@keyframes cheroUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cheroLine { from { transform: translateY(105%); }            to { transform: none; } }
@keyframes cheroIn   { from { opacity: 0; }                             to { opacity: 1; } }

.chero__eyebrow { opacity: 0; animation: cheroUp .8s var(--ease) .1s both; }
.chero__line > span { animation: cheroLine 1.05s cubic-bezier(.19, 1, .22, 1) both; }
.chero__line:nth-child(1) > span { animation-delay: .28s; }
.chero__line:nth-child(2) > span { animation-delay: .42s; }
.chero__sub { opacity: 0; animation: cheroUp .9s var(--ease) .72s both; }
.chero__cred { opacity: 0; animation: cheroUp .9s var(--ease) .84s both; }
.chero__ctas > * { opacity: 0; animation: cheroUp .7s var(--ease) both; }
.chero__ctas > *:nth-child(1) { animation-delay: .94s; }
.chero__ctas > *:nth-child(2) { animation-delay: 1.04s; }
.chero__ctas > *:nth-child(3) { animation-delay: 1.14s; }

.chero__controls { opacity: 0; animation: cheroIn .9s var(--ease) 1.35s both; }
@media (min-width: 760px) { .chero__scroll { opacity: 0; animation: cheroIn .9s var(--ease) 1.35s both; } }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .chero__frame { background-position: var(--focus-narrow, 50% 50%); }
  .chero__frame img { object-position: var(--focus-narrow, 50% 50%); }

  /* shallower moves cost less on a phone GPU and read better on a tight crop */
  .chero__frame[data-move="pan-left"] img { transform: translate3d(1.6%, 0, 0) scale(1.06); }
  .chero__frame[data-move="pan-left"].is-on img { transform: translate3d(-1.6%, 0, 0) scale(1.06); }
  .chero__frame[data-move="pan-right"] img { transform: translate3d(-1.6%, 0, 0) scale(1.06); }
  .chero__frame[data-move="pan-right"].is-on img { transform: translate3d(1.6%, 0, 0) scale(1.06); }
  .chero__frame[data-move="zoom-in"] img { transform: scale(1.005); }
  .chero__frame[data-move="zoom-in"].is-on img { transform: scale(1.05); }
  .chero__frame[data-move="zoom-out"] img { transform: scale(1.055); }
  .chero__frame[data-move="zoom-out"].is-on img { transform: scale(1.005); }
  .chero__frame[data-move="zoom-up"] img { transform: translate3d(0, 1.4%, 0) scale(1.02); }
  .chero__frame[data-move="zoom-up"].is-on img { transform: translate3d(0, -1%, 0) scale(1.06); }
  .chero__frame[data-move="rise"] img { transform: translate3d(0, 1.8%, 0) scale(1.04); }
  .chero__frame[data-move="rise"].is-on img { transform: translate3d(0, -1.4%, 0) scale(1.055); }

  .chero__veil {
    background:
      linear-gradient(to top, #0a0907e8 0%, #0a090780 30%, #0a090714 62%),
      linear-gradient(to bottom, #0a0907b3 0%, #0a09070d 26%);
  }
  .chero__in { align-self: end; padding-block: calc(var(--nav-h) + 2rem) 7.5rem; }
  .chero__copy { max-width: 100%; }
  .chero__title { font-size: clamp(2.2rem, 1rem + 6.6vw, 3rem); }
  .chero__sub { font-size: .95rem; max-width: 42ch; }
  .chero__cred { font-size: .69rem; letter-spacing: .13em; max-width: 42ch; }
  .chero__controls { left: var(--gut); right: var(--gut); justify-content: center; bottom: 1.15rem; }
}

@media (max-width: 560px) {
  .chero__ctas { flex-direction: column; align-items: stretch; gap: .6rem; }
  /* tighter tracking keeps the longest label on one line, so the three
     buttons stay the same height as each other */
  .chero__ctas .btn {
    width: 100%; font-size: .72rem; letter-spacing: .11em; padding: 1.15em 1.1em;
  }
  .chero__eyebrow { letter-spacing: .22em; font-size: .62rem; }
}

/* ── reduced motion: a still frame, no camera, no sweep ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .chero__frame, .chero__frame.is-on { transition: opacity .01ms; }
  .chero__frame img, .chero__frame.is-on img { transition: none !important; transform: none !important; }
  .chero__flare, .chero__scroll i::after { animation: none !important; opacity: 0; }
  .chero__dot.is-on i { animation: none; width: 100%; }
  .chero__eyebrow, .chero__sub, .chero__cred, .chero__ctas > *, .chero__controls, .chero__scroll,
  .chero__line > span { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   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.
   This cream/stone trio is the site contact rail — never treat it as the
   Follow Up Boss blue Call/Text bubble (that iframe stays hidden). */
.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); }

/* ── page-hero brand mark ──────────────────────────────────────────────── */
.brand__swap img { image-rendering: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   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);
}

/* ── IDX neighborhood showcase ────────────────────────────────────────────
   The widget is third-party markup. A self-scrolling box keeps a wide grid
   from pushing the page sideways. */
.idxw {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  color: var(--ink);
}
.idxw img { max-width: 100%; height: auto; }
.idx-wrapper #idxStart { min-height: 40vh; }

/* ── neighbourhood guide ──────────────────────────────────────────────────
   Stacked, not split. Essay at a reading measure; known-for and lifestyle
   as a full-width band; buying note as a ruled paragraph. */
.guide { display: grid; gap: clamp(1.8rem, 3.2vw, 2.8rem); }
.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; }
.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; }
.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);
}

/* ── 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; }
}

/* ── page-hero brand mark ──────────────────────────────────────────────── */
.brand__swap img { image-rendering: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   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]:not(.crb), [data-inquire]:not(.crb)):hover::after,
:where(.btn--solid, .unit__cta, .rail__btn--go, .tile, [data-finder-submit],
       [data-gate]:not(.crb), [data-inquire]:not(.crb)):focus-visible::after { animation-play-state: paused; opacity: 0; }
:where(.btn--solid, .unit__cta, .rail__btn--go, [data-finder-submit],
       [data-gate]:not(.crb), [data-inquire]:not(.crb)):hover,
:where(.btn--solid, .unit__cta, .rail__btn--go, [data-finder-submit],
       [data-gate]:not(.crb), [data-inquire]:not(.crb)):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; }
}

/* ── peek carousel: one centred card, neighbours visible either side ───── */
.peek {
  --card: min(38vw, 420px);
  --side-scale: .92;
  --side-opacity: .55;
  --lux: var(--ease);
}
@media (max-width: 899px) {
  .peek { --card: 68vw; --side-scale: .93; }
}
.peek__view {
  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, 18px);
}
.peek__view::-webkit-scrollbar { display: none; }
.peek__view:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.peek__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card);
  gap: clamp(.7rem, 2.2vw, 1.4rem);
  padding-inline: calc(50% - var(--card) / 2);
}
.peek__item {
  min-width: 0;
  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);
}
.peek__item.is-active {
  transform: scale(1);
  opacity: 1;
  filter: none;
  z-index: 3;
}
.peek:not([data-peek-ready]) .peek__item { transform: none; opacity: 1; filter: none; }
.peek--settling .peek__item,
.peek--settling .peek__item * { transition: none !important; }
.peek__item.is-active .card__media,
.peek__item.is-active .acard__media {
  box-shadow: 0 34px 70px -44px rgba(14, 13, 11, .7);
}
.peek__item:not(.is-active) { cursor: pointer; }
.peek__nav {
  display: flex; justify-content: center; gap: .6rem;
  margin-top: clamp(1.2rem, 2vw, 2rem);
}
.peek__btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--rule); color: var(--ink); background: transparent;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.peek__btn:hover:not(:disabled), .peek__btn:focus-visible:not(:disabled) {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.peek__btn:disabled { opacity: .28; cursor: default; }
.peek__btn--prev { transform: scaleX(-1); }
.peek__ico { width: 22px; height: 11px; }
.peek__view.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.peek__view.is-dragging a, .peek__view.is-dragging button { pointer-events: none; }
.reveal-armed .peek__track .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .peek__item { transition: none; transform: none; }
  .peek__item.is-active { transform: none; }
}

/* ── about Luiza: desktop split, mobile card-scale portrait ────────────── */
.about-luiza__in {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gut);
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}
@media (min-width: 900px) {
  .about-luiza__in { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
  .about-luiza .portrait--bleed { max-width: 420px; width: 100%; }
}
@media (max-width: 899px) {
  .about-luiza__in { gap: 1.75rem; }
  .about-luiza .portrait--bleed {
    /* Same width as the peek carousel card (--card: 68vw). Keep 5:7 so the
       headshot is not cropped the way a 4:5 card crop would be. */
    width: 68vw;
    max-width: 420px;
    margin-inline: auto;
    text-align: center;
  }
}