/* Section styles. One block per data-section. Tokens only for colour. */

/* ───────────── nav · after pacaso.com: Menu on the left, the lockup centred, the action on the right; the Osmo stacked
   drawer opens from the left ───────────── */
.nav { --drawer-width: 30em; --drawer-edge: 3.5em; position: relative; z-index: var(--z-overlay); }
@media (max-width: 767px) { .nav { --drawer-width: 100%; --drawer-edge: 2.75em; } }
.nav__bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 102;
  height: var(--nav-h); padding: 0 var(--margin);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  color: var(--text-1);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
/* no fade behind the bar over the hero (Josh, 2026-10-09); from #about it turns solid in the crest navy */
.nav__bar.is-solid { background-color: rgb(16 44 76 / 0.96); /* near opaque: over the white pages a thinner navy turned slate (2026-10-13) */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Menu / Close (Osmo): two hairlines that cross, then the tracked label, which rolls to Close */
.nav__toggle { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; min-width: 44px; padding: 0; color: inherit; font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; transition: transform var(--dur-1) var(--ease-out); }
.nav__toggle:active { transform: scale(0.97); }
.nav__toggle-text { display: flex; flex-direction: column; height: 1.2em; overflow: hidden; line-height: 1.2; }
.nav__toggle-label { display: block; line-height: 1.2; transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1); }
.nav__toggle-icon { display: flex; flex-direction: column; gap: 6px; width: 22px; }
.nav__toggle-bar { display: block; width: 100%; height: 1px; background: currentColor; transform-origin: left center; transition: transform 0.35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { [data-drawer-nav-open="false"] .nav__toggle:hover .nav__toggle-bar:last-child { transform: scaleX(0.6); } }
[data-drawer-nav-open="true"] .nav__toggle-label { transform: translateY(-100%); }
[data-drawer-nav-open="true"] .nav__toggle-bar { transform-origin: center; }
[data-drawer-nav-open="true"] .nav__toggle-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
[data-drawer-nav-open="true"] .nav__toggle-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* the lockup, centred: crest 1092x1210, wordmark 2866x498 placed 156 units right of the crest */
.nav__brand { --brand-h: 30px; grid-column: 2; justify-self: center; display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) { .nav__brand { --brand-h: 36px; } }
.nav__crest { flex: none; height: var(--brand-h); width: calc(var(--brand-h) * 1092 / 1210); color: var(--gold); }
.nav__wordmark { flex: none; height: calc(var(--brand-h) * 498 / 1210); width: calc(var(--brand-h) * 2866 / 1210); margin-left: calc(var(--brand-h) * 156 / 1210); color: var(--text-1); }

.nav__end { grid-column: 3; justify-self: end; display: flex; align-items: center; }
/* the nav action is the page's button a size down (Josh): a gold hairline at rest, the gold rises on hover */
.nav__cta { display: none; min-height: 44px; padding: 0 calc(24px - 0.2em) 0 24px; transition: opacity var(--dur-3) var(--ease-out), color var(--dur-lux) var(--ease-lux), border-color var(--dur-lux) var(--ease-lux); }
@media (min-width: 900px) { .nav__cta { display: inline-flex; } }

/* drawer open: the bar steps back to the brand and Close */
[data-drawer-nav-open="true"] .nav__bar { background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-drawer-nav-open="true"] .nav__cta { opacity: 0; pointer-events: none; }
/* the bar's lockup disappears while the menu is open (the menu carries its own) */
.nav__brand { transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3); }
[data-drawer-nav-open="true"] .nav__brand { opacity: 0; visibility: hidden; }

.drawer__backdrop { position: fixed; inset: 0; z-index: 100; opacity: 0; visibility: hidden; background: rgb(var(--veil) / 0.7); cursor: pointer; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 101; width: var(--drawer-width); visibility: hidden; overflow: hidden; background: var(--brand); color: var(--text-1); border-right: 1px solid var(--line); }
.drawer__sheet { position: absolute; top: 0; bottom: 0; right: 0; left: var(--drawer-edge); z-index: 2; visibility: hidden; background: var(--brand-2); border-left: 1px solid var(--line); }
.drawer__edge { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: var(--drawer-edge); visibility: hidden; opacity: 0; display: flex; flex-direction: column; align-items: center; padding: 6em 0 2em; background: var(--ground); color: var(--text-2); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.drawer__edge-icon { width: 1.25em; flex: none; }
@media (hover: hover) and (pointer: fine) { .drawer__edge:hover { background: var(--brand-2); color: var(--text-1); } }
.drawer__content { height: 100%; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2rem; padding: 6rem 2rem 2rem; }
@media (max-width: 767px) { .drawer__edge { padding-top: 5.5em; } .drawer__content { padding: 5.5rem var(--margin) var(--margin); } }
/* the white Confidante lockup heads the side panel, the links a step below it (Josh, 2026-10-09). Phones open the
   drawer full width under the bar, whose own lockup is already there, so it shows from 768px */
/* on the bar's line, level with Close, at the drawer's far side; the bar's own lockup steps aside while the menu is open
   (Josh, 2026-10-09) */
.drawer__brand { position: absolute; z-index: 1; top: 0; right: var(--margin); height: var(--nav-h); display: flex; align-items: center; pointer-events: none; }
/* twelve destinations since the multi-page build (2026-10-12): the list starts just under the bar's line and keeps 44px
   rows, so the Investor Centre card stays on screen at 900px; shorter desktop windows take a smaller face and tighter rows */
.drawer__content--main { gap: 1.5rem; }
@media (min-width: 768px) {
  .drawer__brand { right: 2rem; }
  .drawer__content--main { padding-top: 7rem; }
}
@media (min-width: 768px) and (max-height: 880px) and (pointer: fine) {
  .drawer__content--main { padding-top: 6rem; gap: 1.25rem; }
  .drawer__content--main > .drawer__list > .drawer__item > .drawer__link { min-height: 38px; font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; }
  .drawer__content--main .drawer__promo-visual { width: 5.5em; }
}
.drawer__logo { display: block; height: 2.25rem; width: calc(2.25rem * 4114 / 1210); color: var(--text-1); }
.drawer__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.drawer__back { display: flex; align-items: center; gap: 0.25rem; margin-left: -0.25rem; min-height: 44px; color: var(--text-3); font-family: var(--font-text); font-size: var(--fs-small); transition: color var(--dur-2) var(--ease-out); }
.drawer__back-icon { width: 1.25em; }
@media (hover: hover) and (pointer: fine) { .drawer__back:hover { color: var(--text-1); } }
.drawer__title { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.drawer__list { display: flex; flex-direction: column; }
.drawer__link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0; color: var(--text-1); text-align: left; font-family: var(--font-display); font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-2) var(--ease-out); }
@media (min-width: 992px) { .drawer__link { font-weight: 300; } }
.drawer__list--small .drawer__link { min-height: 44px; font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.drawer__link-icon { width: 0.7em; flex: none; }
@media (hover: hover) and (pointer: fine) { .drawer__link:hover { text-decoration-color: rgb(244 239 230 / 0.5); } }
.drawer__more { align-self: flex-start; }
/* the current page (scripts/partials.mjs marks it): its link keeps a faint underline; the sheet that holds it shows a small
   gold diamond beside its chevron */
.drawer__link[aria-current="page"] { text-decoration-color: rgb(244 239 230 / 0.5); }
.drawer__link[data-current] > span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 0.75rem; vertical-align: 0.3em; background-color: var(--accent); transform: rotate(45deg); }
/* the Investor Centre plate sits down by the footer's rule (Josh, 2026-10-09) */
.drawer__promo { margin-top: auto; display: flex; gap: 1rem; align-items: stretch; padding: 0.5rem; background: var(--deep); color: inherit; }
.drawer__promo-visual { flex: none; width: 6.5em; aspect-ratio: 1; overflow: hidden; }
@media (max-width: 767px) { .drawer__promo-visual { width: 5.5rem; } }
.drawer__promo-img { width: 100%; height: 100%; object-fit: cover; }
.drawer__promo-text { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding-right: 0.5rem; }
.drawer__promo-title { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.3; color: var(--text-1); }
.drawer__promo-desc { font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); }
/* the promo's action wears .action; the whole plate is the link, so the hairline answers to the plate */
.drawer__promo-cta { align-self: flex-start; min-height: 0; margin-top: 0.5rem; }
@media (hover: hover) and (pointer: fine) { .drawer__promo:hover .drawer__promo-cta::after { transform: scaleX(1); } }
.drawer__footer { margin-top: -0.75rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.drawer__footer-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); color: var(--text-3); transition: color var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .drawer__footer-link:hover { color: var(--text-1); } }

/* ───────────── hero (MotionSites "Horizon" brief): loop at rest, arrival film scrubbed by scroll ───────────── */
/* runway: the film plays over the first two viewports under a title card that stays put. Then the slider's track
   (margin-top: -100dvh, 160dvh tall) holds the picture on screen for 0.6 of a viewport while, locked to the scroll and
   quickly, the title card fades and the slider's text and frame rise into their places (Josh, 2026-10-09) */
/* the film is held for the slider's whole hold too (360 = 300 + the track's 60): the film and the slider let go of the screen at
   the same scroll, so a fast flick that paints before the hand-over script shows the film's own last frame held in place,
   never the page under it (Josh, 2026-10-13: "you can see the white at the bottom ... it should be seamless") */
.hero { position: relative; height: 360dvh; background: var(--deep); }
.hero__stage { position: sticky; top: 0; width: 100%; height: 100dvh; overflow: hidden; }
/* the title card rides its own sticky layer above the slider: it holds still through the film, then fades out over the
   held picture as the hand-over begins (initHero scrubs it) */
.hero__card-track { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; }
.hero__card { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.hero__card a, .hero__card button { pointer-events: auto; }
.hero__poster, .hero__poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster img { object-fit: cover; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a touch brighter and crisper (Josh, 2026-10-09). The group slider's first photograph is the film's last frame, so it takes
   the same lift and the hand-over still cannot be seen */
.hero__poster img, .hero__video, .eco__bg-item:first-child .eco__bg-img { filter: brightness(1.07) contrast(1.06) saturate(1.04); }
/* the loop fades in on its first frame (poster until then) and out once the arrival film has a decoded frame */
.hero__video--loop { opacity: 0; transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1); }
.hero.is-playing .hero__video--loop { opacity: 1; }
.hero.is-scrolled .hero__video--loop { opacity: 0; pointer-events: none; }
/* the arrival film stays invisible until a decoded frame is on screen: never a black or stale frame */
.hero__video--arrival { opacity: 0; transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1); }
.hero.is-ready .hero__video--arrival { opacity: 1; }
.hero__shade, .eco__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(var(--veil) / 0.88) 0%, rgb(var(--veil) / 0.74) 22%, rgb(var(--veil) / 0.5) 40%, rgb(var(--veil) / 0) 62%); }
@media (max-width: 767px) { .hero__shade, .eco__shade { background: linear-gradient(to top, rgb(var(--veil) / 0.9) 0%, rgb(var(--veil) / 0.78) 30%, rgb(var(--veil) / 0.5) 48%, rgb(var(--veil) / 0) 68%); } }
/* the clear bar's words over the film (2026-10-15, the homepage's contrast P0): the film's two top corners darken, a soft
   vignette behind Menu and the action, so the 12px labels hold 4.5:1 over a bright sky or a lit window. The bar stays clear,
   the lockup and the middle of the sky stay as they were. The slider's copy of the shade carries the same corners, so the
   hand-over still cannot be seen (the slider's own veil has its top band) */
.hero__shade::before, .eco__shade::before { --cw: 30rem; --ch: 9.5rem; --cv: 0.74; content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(var(--cw) var(--ch) at 0 0, rgb(var(--veil) / var(--cv)) 0%, rgb(var(--veil) / calc(var(--cv) - 0.04)) 55%, rgb(var(--veil) / calc(var(--cv) * 0.4)) 80%, rgb(var(--veil) / 0) 100%),
    radial-gradient(var(--cw) var(--ch) at 100% 0, rgb(var(--veil) / var(--cv)) 0%, rgb(var(--veil) / calc(var(--cv) - 0.04)) 55%, rgb(var(--veil) / calc(var(--cv) * 0.4)) 80%, rgb(var(--veil) / 0) 100%); }
@media (max-width: 767px) { .hero__shade::before, .eco__shade::before { --cw: 15rem; --ch: 7.5rem; --cv: 0.7; } }

.hero__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 25vh; }
@media (min-width: 640px) { .hero__center { padding-bottom: 30vh; } }
.hero__mark { opacity: 0; transform: scale(0.9); transition: opacity 1000ms cubic-bezier(0, 0, 0.2, 1), transform 1000ms cubic-bezier(0, 0, 0.2, 1); transition-delay: 350ms; }
/* the crest alone, no rings (Josh, 2026-10-09): drawn at the lockup's own proportions (1092 x 1210) */
.hero__mark { display: block; }
.hero__mark svg { height: clamp(7rem, 4.6rem + 10vw, 14rem); width: auto; aspect-ratio: 1092 / 1210; color: var(--text-1); }
.hero.is-visible .hero__mark { opacity: 1; transform: scale(1); }

.hero__copy { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 var(--margin) clamp(2.5rem, 6vh, 4rem); text-align: center; }
.hero__title { font-family: var(--font-display); font-weight: 400; color: var(--text-1); font-size: var(--fs-hero); line-height: 1.25; letter-spacing: 0.05em; text-transform: uppercase; text-wrap: balance; opacity: 0; transform: translateY(32px); transition: opacity 1000ms cubic-bezier(0, 0, 0.2, 1) 600ms, transform 1000ms cubic-bezier(0, 0, 0.2, 1) 600ms; }
/* phones keep one line of Kelly's pair (two rows); the full inscription from 768px */
@media (max-width: 767px) { .hero__l2 { display: none; } }
.hero__lede { margin: 20px auto 0; max-width: 42ch; color: var(--text-2); font-family: var(--font-text); font-weight: 400; font-size: var(--fs-body); line-height: 1.65; opacity: 0; transform: translateY(24px); transition: opacity 1000ms cubic-bezier(0, 0, 0.2, 1) 850ms, transform 1000ms cubic-bezier(0, 0, 0.2, 1) 850ms; }
/* the hero's action is the gold-outlined button (.btn), centred under the lede; the hero adds its entrance and keeps the
   button's colour change in the transition list */
.hero__action { margin-top: 22px; opacity: 0; transform: translateY(16px); transition: opacity 1000ms cubic-bezier(0, 0, 0.2, 1) 1050ms, transform 1000ms cubic-bezier(0, 0, 0.2, 1) 1050ms, color var(--dur-lux) var(--ease-lux), border-color var(--dur-lux) var(--ease-lux); }
.hero.is-visible .hero__title, .hero.is-visible .hero__lede, .hero.is-visible .hero__action { opacity: 1; transform: translateY(0); }

/* ───────────── the group · Osmo "Layered Image Slider", slides up over the hero ───────────── */
/* no ground of its own: it rises transparent and empty; once it is held on screen its first photograph (the film's last
   frame) and a copy of the hero's shade take over the picture exactly, and the shade gives way to its veil
   (initHero sets data-arrival) */
/* the veil the slider draws over every photograph: a top band for the label and counter, a centre pool for the name
   and line, a bottom band for the controls */
:root { --slider-veil:
  linear-gradient(to bottom, rgb(var(--veil) / 0.62) 0%, rgb(var(--veil) / 0) 28%),
  linear-gradient(to bottom, rgb(var(--veil) / 0) 78%, rgb(var(--veil) / 0.6) 100%),
  radial-gradient(60% 34% at 50% 48%, rgb(var(--veil) / 0.5), rgb(var(--veil) / 0) 100%),
  rgb(var(--veil) / 0.44); }
.eco-track { position: relative; z-index: 2; margin-top: -160dvh; height: 160dvh; } /* starts where it did (200dvh in) and ends with the hero */
.eco { position: sticky; top: 0; z-index: 2; color: var(--text-1); background: transparent; -webkit-user-select: none; user-select: none; }
.eco__container { position: relative; width: 100%; height: 100dvh; min-height: 640px; overflow-x: clip; overflow-y: visible; }
.eco__bg-collection { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.eco__bg-item { position: absolute; inset: 0; }
.eco__bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* veil: a top band for the label and counter, a centre pool for the name and line, a bottom band for the controls */
.eco__bg-dark { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--slider-veil); }
.eco__text-collection { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding-bottom: 6vh; }
.eco__text-list { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
/* the neighbouring names fade into the edges instead of being cut by them */
@media (min-width: 768px) { .eco__text-list { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); } }
.eco__text-item { position: absolute; max-width: 80%; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.eco__title-btn { display: block; color: inherit; text-align: center; padding: 6px 4px; font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); line-height: 1; }
@media (max-width: 767px) { .eco__title-btn { font-weight: 400; } }
.eco__title { display: block; font: inherit; letter-spacing: -0.02em; white-space: nowrap; }
.eco__line { display: block; margin-top: 16px; font-family: var(--font-text); font-size: var(--fs-body); font-weight: 400; line-height: 1.5; letter-spacing: 0.01em; color: var(--text-1); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), visibility 500ms; white-space: nowrap; }
.eco__text-item[data-active] .eco__line { opacity: 1; visibility: visible; transform: none; transition-delay: 250ms; }
.eco__mask { position: absolute; z-index: 3; left: 50%; bottom: 0; width: 11rem; aspect-ratio: 4 / 5; overflow: hidden; transform: translate(-50%, calc(30% + var(--eco-mask-y, 0px))); }
@media (min-width: 768px) { .eco__mask { width: 18rem; } }
.eco__mask-item { position: absolute; inset: 0; overflow: hidden; }
.eco__mask-img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.eco__overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; padding: calc(var(--nav-h) + 16px) var(--margin) 24px; }
@media (min-width: 768px) { .eco__overlay { padding: calc(var(--nav-h) + 24px) var(--edge) 40px; } }
.eco__top { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.eco__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-1); }
.eco__count { display: flex; align-items: center; gap: 12px; font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--text-1); }
.eco__progress { width: 4.5rem; height: 1px; background: rgb(244 239 230 / 0.24); overflow: hidden; }
.eco__progress-fill { display: block; width: 100%; height: 100%; background: var(--text-1); transform: scaleX(0); transform-origin: left center; }
.eco__bottom { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.eco__nav { pointer-events: auto; display: flex; gap: 8px; }
/* slider and cascade controls: a long hairline arrow, no box; it leans 4px the way it points on hover */
.eco__btn, .cascade__btn { display: flex; align-items: center; justify-content: center; width: 64px; height: 48px; padding: 0; color: var(--text-1); }
.eco__btn svg, .cascade__btn svg { width: 40px; height: 12px; overflow: visible; transition: translate var(--dur-lux) var(--ease-lux); }
@media (hover: hover) and (pointer: fine) {
  .eco__btn--prev:hover svg, .cascade__btn--prev:hover svg { translate: -4px 0; }
  .eco__btn--next:hover svg, .cascade__btn--next:hover svg { translate: 4px 0; }
}
/* Explore is a secondary action (.action), not a button: the gold rectangle stays the one action */
.eco__explore { pointer-events: auto; }
.eco__more { display: none; }
@media (max-width: 767px) {
  .eco__line { white-space: normal; max-width: 20rem; }
  .eco__explore { display: none; }
  .eco__more { display: inline-flex; margin-top: 8px; opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease-out), visibility 400ms; }
  .eco__text-item[data-active] .eco__more { opacity: 1; visibility: visible; transition-delay: 300ms; }
  .eco__nav { width: 100%; justify-content: space-between; }
}
/* before it is held it shows nothing and lets clicks through to the hero's action */
.eco[data-arrival="before"] .eco__bg-collection, .eco[data-arrival="before"] .eco__bg-dark, .eco[data-arrival="before"] .eco__shade { visibility: hidden; }
.eco[data-arrival="before"] { pointer-events: none; }
.eco__shade { z-index: 2; opacity: 0; }
/* no fade at the slider's foot (Josh, 2026-10-13): the photograph keeps a clean edge and about scrolls up under it */
/* portrait phones: the first photograph is the film's last frame; match the portrait film's crop so the hand-over is seamless */
@media (max-width: 767px) and (orientation: portrait) { .eco__bg-item:first-child .eco__bg-img { object-position: 57% 50%; } }

/* ───────────── about · after the About section of Josh's template: the intro and its actions (the divider and the story
   were removed, Josh 2026-10-13); the core offerings follow on the same white, so their padding is the gap ───────────── */
.about { position: relative; background-color: var(--page); color: var(--text-2); padding: calc(var(--section) + 4.5rem) 0 0; }
@media (min-width: 768px) { .about { padding-top: calc(var(--section) + 7rem); } }
.about__top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-action); }
.about__intro { max-width: 36ch; margin-inline: auto; font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.5; color: var(--text-2); }
.about__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; }
/* a hairline across the column between about and the core offerings, as between pacaso.com's sections, the crest at either
   end (Josh, 2026-10-13); the same air above and below it */
.about__rule { margin-top: var(--space-open); }
.about + .core { padding-top: var(--space-open); }

/* ───────────── our core offerings · after pacaso.com's homepage "How it works" (Josh, 2026-10-13): centred words with room
   around them, four photograph cards (the service pillars), one action under them ───────────── */
.core { position: relative; background-color: var(--page); color: var(--text-1); padding: var(--section) 0; }
.core__head { display: grid; justify-items: center; gap: var(--space-head); max-width: 44rem; margin: 0 auto var(--space-open); text-align: center; }
.core__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.core__title { font-size: var(--fs-display); font-weight: 300; line-height: 1.05; letter-spacing: -0.015em; }
.core__lede { max-width: 38ch; font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.5; color: var(--text-2); }
.core__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.75rem); }
/* each pillar a white card with a hairline edge: the photograph, then its number, name, Kelly's line and an Explore row
   along a hairline at the foot; the edge firms and the photograph eases in on hover (Josh, 2026-10-13: "style the cards") */
.core__link { display: flex; flex-direction: column; height: 100%; background-color: var(--card); border: 1px solid var(--line); color: inherit; transition: border-color var(--dur-3) var(--ease-out); }
.core__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--raised); }
.core__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86); transition: transform var(--dur-lux) var(--ease-lux); }
.core__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(1.25rem, 1.6vw, 1.75rem); }
.core__num { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; color: var(--accent); }
.core__name { font-size: var(--fs-subtitle); font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); }
.core__line { max-width: 36ch; font-size: var(--fs-small); line-height: 1.6; color: var(--text-3); } /* smaller under the name (Josh, 2026-10-13) */
.core__more { align-self: stretch; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.core__foot { display: flex; justify-content: center; margin-top: var(--space-open); }
@media (hover: hover) and (pointer: fine) { .core__link:hover { border-color: var(--line-2); } .core__link:hover .core__media img { transform: scale(1.04); } .core__link:hover .core__more::after { transform: scaleX(1); } }
.core__link:focus-visible { outline-offset: 6px; }
/* touch screens have no hover (the mobile pass, 2026-10-15): the card crossing the middle of the screen, wholly in view across,
   takes the hover state (initTouchCards sets .is-near; in the swiped row it is the card brought into view). The doors and the
   secondary actions standing on their own answer the same way */
@media (hover: none), (pointer: coarse) {
  .core__link.is-near { border-color: var(--line-2); }
  .core__link.is-near .core__media img, .door__link.is-near .door__img { transform: scale(1.04); }
  .core__link.is-near .core__more::after, .action.is-near::after { transform: scaleX(1); }
}
.js .core__step[data-reveal]:nth-child(2) { transition-delay: 80ms; }
.js .core__step[data-reveal]:nth-child(3) { transition-delay: 160ms; }
.js .core__step[data-reveal]:nth-child(4) { transition-delay: 240ms; }
@media (max-width: 991px) { .core__name { font-weight: 400; } }
/* tablets two by two; phones a row of cards to swipe, each 78% of the screen so the next one shows */
@media (max-width: 991px) and (min-width: 640px) { .core__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-open); } }
@media (max-width: 639px) {
  .core__steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); scrollbar-width: none; }
  .core__steps::-webkit-scrollbar { display: none; }
  .core__step { scroll-snap-align: start; }
}

/* reveal (quiet system motion, half the sections only) */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .about__actions[data-reveal] { transition-delay: 120ms; }

/* ───────────── the Confidante difference · Osmo "Image to Background (Zoom)", rebuilt on a sticky stage ───────────── */
/* the browser holds the stage on screen while the frame opens from a small 3:2 window to the full screen (a clip, scrubbed
   by initBgZoom) and the statements scroll over the photograph; nothing is moved against the scroll (Josh, 2026-10-09) */
.zoom { --zw: 20em; --zh: calc(var(--zw) * 2 / 3); position: relative; padding-top: var(--section); background-color: var(--page); color: var(--text-1); overflow: clip; }
@media (max-width: 767px) { .zoom { --zw: 14em; } }
.zoom__title { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 var(--margin); text-align: center; }
/* the crest above a section's line (Josh, 2026-10-13: the difference, the core offerings), in the brand gold as on the client's logo file */
.mark-crest { --cw: clamp(2.5rem, 2rem + 1.2vw, 3.25rem); width: var(--cw); height: calc(var(--cw) * 1210 / 1092); margin-bottom: var(--space-head); color: var(--gold); }
.zoom__h { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.02em; }
.zoom__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: var(--space-action); }
/* the stage starts so that the small window sits 3rem under the actions, as the Osmo original does */
.zoom__track { position: relative; margin-top: calc(var(--zh) / 2 + 3rem - 50dvh); }
.zoom__stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.zoom__frame { --zp: 0; position: absolute; inset: 0; overflow: hidden; background: var(--deep);
  clip-path: inset(calc((100% - var(--zh)) / 2 * (1 - var(--zp))) calc((100% - var(--zw)) / 2 * (1 - var(--zp)))); }
.zoom__media { position: absolute; inset: 0; will-change: transform; }
.zoom__img, .zoom__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the clip shows only once a frame is decoded; until then (and on phones) the still from its first frame */
.zoom__film { opacity: 0; transition: opacity 600ms var(--ease-out); }
.zoom__film.is-ready { opacity: 1; }
.zoom__dark { position: absolute; inset: 0; background: var(--deep); opacity: 0; }
/* the statements begin once the frame is open (initBgZoom opens it between the track's top at 20% and at -70%) */
.zoom__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-top: -100dvh; padding: 190dvh var(--margin) 45dvh; } /* the first statement rises once the window is fully open */
/* one centred column with one left edge: two hooks at statement size, the long sentence at lede size */
.zoom__statement { width: min(32rem, 100%); max-width: none; text-align: left; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-statement); line-height: 1.25; letter-spacing: -0.01em; color: var(--text-1); text-wrap: balance; }
.zoom__statement.is--gap { margin-top: 38dvh; }
/* a crest beside each statement (Josh, 2026-10-13), hung in the margin left of the column on desktops, above it on phones.
   initBgZoom ties each to the scroll: full gold as its statement crosses the middle of the screen, dim either side */
.zoom__statement--mark { position: relative; }
.zoom__mark { --cw: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); position: absolute; top: 0.2em; right: calc(100% + clamp(1rem, 2vw, 1.75rem)); width: var(--cw); height: calc(var(--cw) * 1210 / 1092); color: var(--gold); transform-origin: 50% 50%; }
.zoom__statement.is--long .zoom__mark { top: 0.35em; }
@media (max-width: 767px) { .zoom__mark { position: static; display: block; margin-bottom: 0.9rem; transform-origin: 0 50%; } }
.zoom__statement.is--long { font-size: var(--fs-lede); line-height: 1.5; letter-spacing: 0; text-wrap: pretty; }

/* ───────────── destinations · line-art map, then Osmo "Horizontal Scrolling Sections" on a sticky track; on the crest navy
   with a clean edge above and below, the white page either side (Josh, 2026-10-13: "a clear divide", no fade) ───────────── */
.hscroll { position: relative; background-color: var(--page); color: var(--text-1); height: calc(100svh + var(--run, 0px)); }
.hscroll__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hscroll__row { display: flex; height: 100%; will-change: transform; }
.hscroll__panel { flex: none; width: 62vw; height: 100%; padding: calc(var(--nav-h) + 2rem) 12px 2.5rem; }
.hscroll__panel--intro { width: 46vw; padding-left: var(--edge); padding-right: 3rem; display: flex; align-items: center; }
.hscroll__intro { display: grid; }
.hscroll__title { font-size: var(--fs-title); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; max-width: 20ch; }
.hscroll__lede { margin-top: var(--space-head); font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.5; color: var(--text-2); max-width: 34ch; }
.hscroll__hint { display: flex; align-items: center; gap: 12px; margin-top: var(--space-open); font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.hscroll__hint-line { width: 40px; height: 1px; background: currentColor; }
/* matted photographs with the place name underneath: no type on the photo */
.hscroll__card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; }
.hscroll__img { position: relative; flex: 1; min-height: 0; width: 100%; height: auto; object-fit: cover; filter: saturate(0.86); }
.hscroll__name { padding-top: 14px; font-family: var(--font-display); font-size: var(--fs-subtitle); font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); }
@media (max-width: 991px) { .hscroll__name { font-weight: 400; } }
@media (min-width: 768px) {
  .hscroll__panel--intro { width: 100vw; display: grid; grid-template-columns: minmax(18rem, 4fr) 7fr; gap: 3vw; align-items: center; padding-right: 4vw; }
}
/* phones keep the sideways travel (Josh, 2026-10-15: "should still have the scroll to the right with the cards as you
   scroll"): the intro takes the screen, then each card is 84vw so the next one waits at the edge; the photograph 4:5 */
@media (max-width: 767px) {
  .hscroll__panel { display: flex; align-items: center; width: 84vw; padding: calc(var(--nav-h) + 1.25rem) 6px 1.5rem; }
  .hscroll__panel--intro { flex-direction: column; justify-content: center; align-items: stretch; width: 100vw; padding: calc(var(--nav-h) + 1.25rem) var(--margin) 1.5rem; }
  .hscroll__panel--intro + .hscroll__panel { width: calc(84vw + var(--margin) - 6px); padding-left: var(--margin); }
  .hscroll__panel:last-child { width: calc(84vw + var(--margin) - 6px); padding-right: var(--margin); }
  .hscroll__panel--intro .map { margin-top: var(--space-open); }
  .hscroll__card { height: auto; }
  .hscroll__img { flex: none; height: auto; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--nav-h) - 7rem); }
  .hscroll__name { padding-top: 12px; }
  .hscroll__hint { margin-top: var(--space-head); }
}

/* map: quiet line art; gold only for the arcs, the market dots and their rings */
.map { position: relative; width: 100%; margin: 0; }
.map svg { display: block; width: 100%; height: auto; overflow: visible; }
.map__land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map__arc { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out); }
.map.is-drawn .map__arc { stroke-dashoffset: 0; }
.map.is-drawn .map__arc:nth-of-type(2) { transition-delay: 0.1s; } .map.is-drawn .map__arc:nth-of-type(3) { transition-delay: 0.2s; }
.map.is-drawn .map__arc:nth-of-type(4) { transition-delay: 0.3s; } .map.is-drawn .map__arc:nth-of-type(5) { transition-delay: 0.4s; }
.map.is-drawn .map__arc:nth-of-type(6) { transition-delay: 0.5s; }
.map__dot { fill: var(--accent); }
.map__pulse { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.map.is-live .map__pulse { animation: map-pulse 2.8s var(--ease-out) infinite; }
.map.is-live .map__pin:nth-of-type(2n) .map__pulse { animation-delay: 0.9s; }
.map.is-live .map__pin:nth-of-type(3n) .map__pulse { animation-delay: 1.7s; }
@keyframes map-pulse { 0% { opacity: 0.45; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.4); } }
.map__labels { position: absolute; inset: 0; pointer-events: none; }
.map__label { position: absolute; font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; transform: translate(14px, -50%); }
.map__label--l { transform: translate(calc(-100% - 14px), -50%); }
.map__label--rb { transform: translate(12px, 20%); }
/* market label positions (percent of the map box, from the projection) */
.map__label--canada { left: 33.17%; top: 23.29%; }
.map__label--usa { left: 23.99%; top: 35.12%; }
.map__label--mexico { left: 21.91%; top: 45.4%; }
.map__label--panama { left: 28.96%; top: 55.68%; }
.map__label--colombia { left: 31.03%; top: 59.93%; }
.map__label--spain { left: 59.72%; top: 26.03%; }
.map__label--me { left: 82.45%; top: 39.87%; }
/* phones: the map rides the sideways track (2026-10-15), so it keeps its labels as on desktops, at the label token. On the
   homepage's screen-wide map two turn to stay inside the screen: the United States to the right of its pin, the Middle East
   under its pin, ending at it (About's map runs wider than the screen and keeps its own sides) */
@media (max-width: 767px) {
  .map { margin: 2.5rem -0.5rem 0; }
  .hscroll[data-section="destinations"] .map__label--usa { transform: translate(14px, -50%); }
  .hscroll[data-section="destinations"] .map__label--me { transform: translate(calc(-100% + 6px), 8px); }
}
/* under 360px Mexico and Panama meet: the smallest phones keep the map without labels (the cards that follow name every market) */
@media (max-width: 359px) { .map__labels { display: none; } }
@media (prefers-reduced-motion: reduce) { .map__arc { stroke-dashoffset: 0; transition: none; } .map.is-live .map__pulse { animation: none; } }

/* ───────────── development · a row of cards to scroll sideways, after the reference's "notable transactions" row (Josh,
   2026-10-13: "the scrolling thing should be development"): Kelly's seven development steps; the title on the left, the
   link and the arrows on the right ───────────── */
.showcase { background-color: var(--page); color: var(--text-2); padding: var(--section) 0; }
.showcase__intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: var(--space-open); }
.showcase__head { display: grid; gap: var(--space-head); }
.showcase__title { font-size: var(--fs-title); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; max-width: 20ch; color: var(--text-1); }
.showcase__tools { display: flex; align-items: center; gap: 1.5rem 2rem; }
.rail__nav { display: flex; gap: 4px; }
.rail__nav .cascade__btn[aria-disabled="true"] { opacity: 0.32; cursor: default; }
/* three and a bit cards in view, so the next one shows; snapping a card at a time */
.rail { --rail-gap: clamp(1rem, 1.6vw, 1.75rem); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--rail-gap)) / 3.35); gap: var(--rail-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: 6px; }
.rail__card { display: grid; align-content: start; gap: 10px; scroll-snap-align: start; }
.rail__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--raised); }
.rail__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86); }
.rail__step { margin-top: 8px; font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; color: var(--accent); }
.rail__name { font-size: var(--fs-subtitle); font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); }
.rail__line { max-width: 32ch; color: var(--text-3); line-height: 1.65; }
@media (max-width: 991px) { .rail { grid-auto-columns: calc((100% - var(--rail-gap)) / 2.3); } .rail__name { font-weight: 400; } }
@media (max-width: 639px) { .rail { grid-auto-columns: 78%; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); scroll-padding-inline: var(--margin); } .rail__nav { display: none; } }
/* ───────────── leadership · Osmo "Cascading Slider", on the crest navy with a clean edge above and below, the cards a lighter
   navy (Josh, 2026-10-13: white and navy sections in turn); the cascade rules below ───────────── */
.team { background-color: var(--page); color: var(--text-2); padding: clamp(3rem, 2rem + 3vw, 5rem) 0; } /* tighter on the navy (Josh, 2026-10-13) */
.team .cascade__list { height: clamp(24rem, 50vh, 30rem); } /* the card hugs the portrait, name and title */
.team .cascade__nav { margin-top: 1.75rem; }
.team__intro { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.team__title { font-size: var(--fs-title); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; max-width: 20ch; }
.team__lede { margin-top: var(--space-head); font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.5; color: var(--text-2); max-width: 34ch; }
.cascade { position: relative; width: min(100% - 2 * var(--margin), var(--frame)); margin-inline: auto; }
.cascade__list { --gap: 0.5em; position: relative; width: 100%; height: clamp(30rem, 62vh, 38rem); overflow: hidden; }
.cascade__item { --clip: 0; --radius: 0px; position: absolute; top: 0; left: 0; height: 100%; cursor: pointer; clip-path: inset(0px calc(var(--clip) * 1px) round var(--radius)); will-change: transform, clip-path; -webkit-user-select: none; user-select: none; }
.cascade__item[data-status="active"] { cursor: default; }
.cascade__inner { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; background: var(--navy); color: var(--text-1); }
.cascade__portrait { width: min(17rem, 60%); aspect-ratio: 1; height: auto; object-fit: contain; transition: opacity 0.4s var(--ease-out); }
/* phones: the narrow neighbours show the navy edge only, never half a face */
@media (max-width: 767px) { .cascade__item[data-status="inactive"] .cascade__portrait { opacity: 0; } }
.cascade__meta { text-align: center; padding: 0 2rem; opacity: 0; visibility: hidden; transform: translateY(0.4em); transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition-delay: 0ms; }
[data-cascading-slide][data-status="active"] .cascade__meta { opacity: 1; visibility: visible; transform: none; transition-delay: 400ms; }
.cascade__name { font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); }
@media (min-width: 992px) { .cascade__name { font-weight: 300; } }
.cascade__role { margin: 0.5rem auto 0; max-width: 30ch; font-size: var(--fs-small); line-height: 1.55; letter-spacing: 0.01em; color: var(--text-3); }
.cascade__nav { display: flex; justify-content: center; gap: 12px; margin-top: 2.5rem; }
/* ───────────── three doors · after the reference's three call-to-action tiles (Josh, 2026-10-13): Hospitality Collection, Global
   Events and Affiliate Partnerships, each a photograph over a crest-navy panel with its label, Kelly's headline and an action ───────────── */
.doors { background-color: var(--page); padding: var(--section) 0 0; } /* the Investor Centre follows on the same white; its padding is the gap */
.doors__head { margin-bottom: var(--space-open); }
.doors__title { font-size: var(--fs-title); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; max-width: 20ch; color: var(--text-1); }
.doors__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.75rem); }
.door { color: var(--text-1); } /* the dark palette is scoped here; the item takes its limestone too */
.door__link { display: grid; grid-template-rows: auto 1fr; height: 100%; background-color: var(--page); color: var(--text-1); }
.door__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--raised); }
.door__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86); transition: transform var(--dur-lux) var(--ease-lux); }
.door__body { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 2.4vw, 2.25rem); }
.door__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.door__title { margin-top: 0.75rem; max-width: 18ch; font-size: var(--fs-subtitle); font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); }
.door__more { margin-top: auto; padding-top: 1.5rem; }
@media (hover: hover) and (pointer: fine) { .door__link:hover .door__img { transform: scale(1.04); } }
.door__link:focus-visible { outline-offset: 6px; }
@media (max-width: 991px) { .door__title { font-weight: 400; } }
@media (max-width: 767px) { .doors__list { grid-template-columns: minmax(0, 1fr); } }

/* ───────────── investor centre · Osmo "Scaling Element on Scroll (Flip)", the action under the frame ───────────── */
.invest { position: relative; background-color: var(--page); color: var(--text-1); overflow: hidden; }
.invest__head { display: flex; flex-direction: column; align-items: center; min-height: 100svh; padding: var(--section) var(--edge) 14vh; text-align: center; }
.invest__title { font-size: var(--fs-display); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; max-width: 16ch; }
/* cover chapters (hero, investors) carry a Geist caption under the cover line; chapter openings carry a Zodiak lede */
.invest__lede { margin-top: var(--space-head); font-family: var(--font-text); font-size: var(--fs-body); font-weight: 400; line-height: 1.65; color: var(--text-2); max-width: 46ch; }
.invest__small { position: relative; width: 18em; margin-top: 3rem; }
@media (max-width: 767px) { .invest__small { width: 15em; } }
.invest__ratio { padding-top: 56.25%; }
.invest__wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.invest__target { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; isolation: isolate; will-change: transform; transform: translateX(0) rotate(0.001deg); background: var(--raised); }
.invest__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.invest__stage { position: relative; padding: 0 var(--edge) 20vh; }
.invest__big { position: relative; width: 100%; }
/* the Flip end box is the frame alone, so the photograph never grows over the action below it */
.invest__big > .invest__wrapper { height: auto; aspect-ratio: 16 / 9; }
.invest__cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; margin-top: 2rem; opacity: 0; visibility: hidden; translate: 0 16px; pointer-events: none; transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out), visibility 500ms; }
.invest__cta.is-in { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; }
.invest__cta-line { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 400; line-height: 1.5; color: var(--text-1); max-width: 34ch; }
.invest__cta .btn { justify-self: end; }
@media (max-width: 767px) {
  .invest__big .invest__ratio { padding-top: 125%; }
  .invest__big > .invest__wrapper { aspect-ratio: 4 / 5; }
  .invest__cta { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
  .invest__cta .btn { justify-self: start; }
  .invest__stage { padding: 0 var(--margin) 12vh; }
}

/* ───────────── CTA band · after pacaso.com's closing band (Josh, 2026-10-13): a crest navy band above the footer, the
   photograph inset on the left, the closing line, lede and action on the right; stacked below 992px. The homepage closes
   with it too (Josh, 2026-10-13), in place of the villa film and form; the form lives on connect.html ───────────── */
.cta-band { position: relative; display: grid; grid-template-columns: var(--margin) minmax(0, 1fr) var(--margin); row-gap: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6.5rem); background-color: var(--page); color: var(--text-2); text-align: left; }
.cta-band__media { position: relative; grid-column: 2; aspect-ratio: 3 / 2; overflow: hidden; background-color: var(--card); }
.cta-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform: scale(1.06); transition: transform 2400ms var(--ease-out); }
.cta-band.is-in .cta-band__img { transform: none; }
@media (max-width: 767px) { .cta-band__img { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
.cta-band .cta-band__veil { display: none; } /* the words sit on the navy beside the photograph, not on it */
.cta-band__inner { grid-column: 2; width: auto; margin-inline: 0; display: grid; justify-items: start; align-content: center; gap: var(--space-head); }
@media (min-width: 992px) {
  .cta-band { grid-template-columns: var(--edge) minmax(0, 5fr) minmax(0, 6fr) var(--edge); align-items: center; }
  .cta-band__media { grid-row: 1; aspect-ratio: 4 / 3; }
  .cta-band__inner { grid-column: 3; grid-row: 1; padding-left: clamp(3rem, 1rem + 5vw, 8rem); }
}
.cta-band__title { max-width: 15ch; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; color: var(--text-1); }
@media (max-width: 767px) { .cta-band__title { font-weight: 400; } }
.cta-band__lede { max-width: 44ch; margin-inline: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.cta-band .btn { justify-self: start; margin-top: calc(var(--space-action) - var(--space-head)); }

.form { position: relative; display: grid; gap: var(--space-head); align-content: start; }
.form__row { display: grid; gap: var(--space-head); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
/* fields in a row stay level: a hint under one no longer pushes its neighbour's input down */
.form__row .field { align-content: start; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: var(--fs-small); line-height: 1.4; color: var(--text-3); }
.field__opt { color: var(--text-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 0.85em 1em; font-size: max(16px, var(--fs-body)); line-height: 1.4; color: var(--text-1); background-color: var(--field-bg); border: 1px solid var(--field-line); border-radius: 0; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.field textarea { resize: none; min-height: 140px; }
.field select { appearance: none; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 0.9em center; background-size: 18px; padding-right: 2.75em; }
.field select:invalid { color: var(--text-3); }
/* an optional select still on its empty "Choose one" reads as a prompt too (:invalid only covers required ones) */
.field select:has(> option[value=""]:checked) { color: var(--text-3); }
.field option { background-color: var(--field-bg); color: var(--text-1); }
@media (hover: hover) and (pointer: fine) { .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--field-line-hover); } }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.field input:-webkit-autofill:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 0 100px var(--field-bg); }
.field [aria-invalid="true"], .field [aria-invalid="true"]:focus-visible { border-color: var(--danger); }
.field [aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--danger); }
.form__error { color: var(--danger); font-size: var(--fs-small); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-head); margin-top: 0.5rem; }
.form__privacy { font-size: var(--fs-small); color: var(--text-3); }
/* Webflow's form block: .w-form wraps the form, its thank-you (.w-form-done) and its failure line (.w-form-fail). Both
   wait hidden; on success the form hides and the thank-you shows (webflow.js on the site, initForm in the prototype,
   each by an inline display). The wrap keeps the form's height (initForm), so the thank-you covers the same plate. */
.form-wrap { position: relative; }
.w-form-done, .w-form-fail { display: none; }
.form__done { position: absolute; inset: 0; z-index: 1; background: var(--card); }
.form__done-in { display: grid; height: 100%; place-content: center; justify-items: center; gap: 0.75rem; text-align: center; }
/* on a plate taller than the screen the centred thank-you could sit above the screen; initForm sets it at the foot,
   where the button that sent the form was */
.form__done--end .form__done-in { align-content: end; padding-bottom: clamp(2rem, 6vw, 4rem); }
.form__fail { margin-top: var(--space-head); }
.form__done-crest { width: 3.5rem; height: 3.5rem; color: var(--gold); }
.form__done-title { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; color: var(--text-1); }
.form__done p:not(.form__done-title) { color: var(--text-3); }

/* ───────────── footer · after pacaso.com's footer (Josh, 2026-10-13): light and simple, the lockup and the social links on
   the left, four short columns of rolling links (ohc:footer-section) on the right, a rule, one line of small print ───────────── */
.footer { position: relative; background-color: var(--raised); color: var(--text-2); overflow: hidden; border-top: 1px solid var(--line); }
/* revealed from under the page on desktops tall enough to show it whole: the page above is opaque and sits over it.
   initFooter adds is-held only where the footer fits the screen under the bar with 40px of air. Elsewhere, and without
   script, it simply follows the page. */
@media (min-width: 768px) and (min-height: 760px) {
  main { position: relative; z-index: 1; background: var(--page); }
  .footer.is-held { position: sticky; bottom: 0; z-index: 0; }
  /* held under the page it is out of sight, so it stays hidden until the page starts to lift off it (initFooter) */
  .js .footer.is-held:not(.is-revealed) { visibility: hidden; }
}
/* the slim photograph across the top (Josh, 2026-10-15): full bleed, a clean edge to the columns under it */
.footer__band { position: relative; height: clamp(5.5rem, 2.5rem + 6vw, 9.5rem); overflow: hidden; background-color: var(--deep); }
.footer__band picture { display: block; height: 100%; }
.footer__band-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.footer__block { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: none; }
.footer__logo { display: inline-flex; align-items: center; min-height: 48px; color: var(--text-1); }
.footer__logo svg { display: block; height: 2.75rem; width: calc(2.75rem * 4114 / 1210); }
.footer__social { display: flex; gap: 4px; margin-left: -11px; }
.footer__social-link { display: grid; place-items: center; width: 44px; height: 44px; color: var(--text-2); transition: color var(--dur-2) var(--ease-out); }
.footer__social-link svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .footer__social-link:hover { color: var(--text-1); } }
.footer__cols { display: grid; grid-template-columns: repeat(4, auto); align-items: start; gap: 32px clamp(32px, 4.5vw, 88px); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.footer__h { margin-bottom: 0.6rem; font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-1); }
.footer__col ul { display: grid; }
/* the rolling link (OHC): the label slides up and its copy rises from below; the copy is generated text with an empty
   alternative, so assistive tech reads the label once */
/* the columns' links in the Confidante navy, like their headings (Josh, 2026-10-13); the roll is the hover cue */
.footer__link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: var(--fs-small); line-height: 1.4; color: var(--text-1); text-align: left; }
.footer__roll { display: block; height: 1.4em; overflow-x: visible; overflow-y: clip; }
.footer__roll-in { position: relative; display: block; white-space: nowrap; }
@supports (content: "a" / "") {
  .footer__roll-in { transition: translate 350ms var(--ease-out); }
  .footer__roll-in::after { content: attr(data-label) / ""; position: absolute; left: 0; top: 100%; color: var(--text-1); }
  @media (hover: hover) and (pointer: fine) { .footer__link:hover .footer__roll-in { translate: 0 -100%; } }
}
@media (hover: hover) and (pointer: fine) { .footer__link:hover { color: var(--text-1); } }
.footer__link[aria-current="page"] { color: var(--text-1); }
/* the separators across the site: a hairline with the crest, small, at each end (Josh, 2026-10-13: "the logos to the sides of all lines") */
.crest-rule { display: flex; align-items: center; gap: 16px; }
.crest-rule__line { flex: 1; height: 1px; background-color: var(--line-2); }
.crest-rule__crest { --cw: 1.375rem; flex: none; width: var(--cw); height: calc(var(--cw) * 1210 / 1092); color: var(--gold); }
/* event signup under the socials (Josh, 2026-10-13): the label, one line, the email field and the action side by side */
.footer__signup { display: grid; gap: 10px; width: min(23rem, 100%); }
.footer__signup .footer__h { margin-bottom: 0; }
.footer__signup-line { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.footer__signup-row { display: flex; gap: 8px; margin-top: 4px; }
.footer__signup-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; font-size: max(16px, var(--fs-small)); color: var(--text-1); background-color: var(--field-bg); border: 1px solid var(--field-line); border-radius: 0; transition: border-color var(--dur-2) var(--ease-out); }
.footer__signup-input::placeholder { color: var(--text-3); }
.footer__signup-input:hover { border-color: var(--field-line-hover); }
.footer__signup-input[aria-invalid="true"] { border-color: var(--danger); }
.footer__signup-btn { flex: none; }
.footer__signup-done { font-size: var(--fs-small); line-height: 1.5; color: var(--text-1); }
.footer__signup-fail { margin-top: 0.5rem; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem var(--col-gap); padding: 1.5rem 0 1.75rem; font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); }
.footer__bottom p { max-width: none; text-wrap: balance; }
@media (max-width: 1199px) {
  .footer__top { flex-direction: column; gap: 40px; }
  .footer__block { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; row-gap: 28px; }
  .footer__signup { width: min(30rem, 100%); }
  .footer__cols { width: 100%; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; }
}
@media (max-width: 767px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; column-gap: 24px; }
  .footer__col:first-child { grid-column: 1 / -1; }
}
/* touch screens have no hover, so the roll never runs there: long labels may wrap instead of running past the column */
@media (hover: none) { .footer__roll { height: auto; overflow: visible; } .footer__roll-in { white-space: normal; } .footer__roll-in::after { content: none; } }

/* ───────────── company dialogs ───────────── */
.co { margin: auto; padding: 0; border: 0; background: transparent; color: var(--text-1); width: min(64rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: visible; }
.co::backdrop { background: rgb(var(--veil) / 0.78); }
.co[open] { animation: co-in 420ms var(--ease-out); }
@keyframes co-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.co__panel { position: relative; display: grid; background: var(--card); border: 1px solid var(--line); max-height: calc(100dvh - 2rem); overflow: auto; }
@media (min-width: 768px) { .co__panel { grid-template-columns: 5fr 6fr; } }
@media (max-width: 767px) { .co__panel { grid-auto-rows: max-content; align-content: start; } }
.co__media { position: relative; min-height: 14rem; background: var(--overlay); }
.co__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#co-living .co__media img { object-position: 100% 50%; }
@media (max-width: 767px) { .co__media { aspect-ratio: 16 / 10; min-height: 0; } }
.co__body { display: grid; align-content: center; padding: clamp(1.5rem, 4vw, 3.5rem); }
.co__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.co__living-logo { width: 13rem; height: calc(13rem * 414 / 1434); color: var(--text-1); }
.co__title { margin-top: 0.75rem; font-size: var(--fs-subtitle); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); }
@media (min-width: 992px) { .co__title { font-weight: 300; } }
.co__body p:not(.co__label) { margin-top: 1em; color: var(--text-3); }
.co__body .co__title + p { margin-top: var(--space-head); }
.co__cta { justify-self: start; margin-top: var(--space-action); }
.co__close { position: absolute; top: 0.75rem; right: 0.75rem; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 12px; background: var(--card); border: 1px solid var(--line-2); color: var(--text-1); transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.co__close svg { width: 100%; height: 100%; }
.co__close:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .co__close:hover { background: var(--raised); } }

/* reduced motion: static compositions keep the depth without scrubbing */
.zoom.is-static { padding-bottom: var(--section); }
.zoom.is-static .zoom__track { margin-top: 3rem; padding: 0 var(--margin); }
.zoom.is-static .zoom__stage { position: relative; width: min(100%, 72rem); height: auto; aspect-ratio: 16 / 9; margin-inline: auto; }
.zoom.is-static .zoom__frame { clip-path: none; }
.zoom.is-static .zoom__text { margin-top: 0; padding: var(--section) var(--margin) 0; }
.zoom.is-static .zoom__statement.is--gap { margin-top: 3rem; }
.hscroll.is-static { height: auto; }
.hscroll.is-static .hscroll__sticky { position: relative; height: auto; overflow: visible; }
.hscroll.is-static .hscroll__row { flex-direction: column; height: auto; transform: none !important; }
.hscroll.is-static .hscroll__panel { width: 100%; height: auto; padding: 0 var(--edge) var(--space-open); }
.hscroll.is-static .hscroll__panel--intro { padding: var(--section) var(--edge) var(--space-open); }
.hscroll.is-static .hscroll__card { height: auto; }
.hscroll.is-static .hscroll__img { flex: none; height: auto; aspect-ratio: 16 / 9; }
.hscroll.is-static .hscroll__hint { display: none; }
.hscroll.is-static .hscroll__panel:last-child { padding-bottom: var(--section); }
@media (max-width: 767px) { .hscroll.is-static .hscroll__panel { padding: 0 var(--margin) var(--space-head); } .hscroll.is-static .hscroll__panel--intro { padding: var(--section) var(--margin) var(--space-open); } .hscroll.is-static .hscroll__img { aspect-ratio: 4 / 5; } }

/* masked word reveal on a few headings (Epique-style) */
.sw-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

@media (prefers-reduced-motion: reduce) {
  .cta-band__img { transform: none; transition: none; }
  .hero { height: 200dvh; }
  .eco-track { margin-top: -100dvh; height: auto; }
  .eco { position: relative; }
  .hero__video { display: none; }
}