/* =========================================================================
   AssetPeak Capital — public stylesheet

   Built on the legacy design language rather than replacing it: hairline rules,
   bento grids, mono uppercase eyebrows with a leading rule, near-square 2px
   radii, and gold reserved for numbers, accents and calls to action only.

   Motion rules observed throughout:
     · animate transform and opacity only — never width/height/top/left
     · no layout reads inside a scroll handler
     · every effect degrades to instant under prefers-reduced-motion
   ========================================================================= */

:root {
  /* Surfaces */
  --obsidian:   #0A0A0A;
  --obsidian-2: #111110;
  --obsidian-3: #161614;
  --midnight:   #0E0E0D;

  /* Foreground */
  --ivory:    #F9FAFB;
  --ivory-80: rgba(249, 250, 251, 0.78);
  --ivory-60: rgba(249, 250, 251, 0.58);
  /* WCAG AA, Phase 8. Ivory at .45 measured 4.35:1 on obsidian — under the
     4.5:1 floor for normal text, and this step is used almost entirely at
     9–12px. Raised to .47 (4.65:1), the smallest change that clears AA on all
     three obsidian surfaces with enough headroom that a future background
     tweak does not silently drop it back under. Visually all but identical. */
  --ivory-45: rgba(249, 250, 251, 0.47);
  --ivory-20: rgba(249, 250, 251, 0.20);
  --ivory-10: rgba(249, 250, 251, 0.10);

  /* Hairlines */
  --line:        rgba(249, 250, 251, 0.08);
  --line-strong: rgba(249, 250, 251, 0.18);

  /* Gold — used sparingly */
  --gold:       #D4AF37;
  --gold-soft:  #B59226;
  --gold-light: #E5C568;
  --gold-10:    rgba(212, 175, 55, 0.12);
  --gold-20:    rgba(212, 175, 55, 0.22);

  /* Type */
  --f-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --f-body: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Geometry */
  --gutter: clamp(24px, 5vw, 64px);
  --max: 1440px;
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The fixed header would otherwise cover anchored sections. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--ivory);
  font-family: var(--f-body);
  font-feature-settings: "ss01", "ss02", "cv01";
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--gold); color: var(--obsidian); }

/* Focus is never removed, only restyled. The old site suppressed outlines in
   places; every interactive element here has a visible focus state. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  background: var(--gold);
  color: var(--obsidian);
  padding: 12px 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* Present to assistive technology, absent from the page. Used where the visual
   design carries a structure that the markup would otherwise lose — a grid of
   cards that reads as a section but has no visible heading of its own. Not a
   place to hide text nobody should read: anything here is announced aloud. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Typography
   ========================================================================= */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0;
}
.display-xl { font-size: clamp(46px, 8.6vw, 140px); }
.display-l  { font-size: clamp(38px, 5.8vw, 92px); }
.display-m  { font-size: clamp(30px, 4.2vw, 60px); }
.display-s  { font-size: clamp(24px, 2.6vw, 40px); }

/* The editorial emphasis clause. Italic and softened, or gold where the
   surrounding context is already quiet. */
.em, .italic-soft { font-style: italic; color: var(--ivory-60); }
.gold { color: var(--gold); }
.muted { color: var(--ivory-60); }

.mono {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lead {
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.6;
  color: var(--ivory-80);
  max-width: 62ch;
  margin: 0;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold);
  flex: none;
}

/* =========================================================================
   Layout
   ========================================================================= */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.section { padding: clamp(72px, 9vw, 136px) 0; }
.section--tight { padding: clamp(48px, 6vw, 88px) 0; }
.section--flush { padding-bottom: 0; }

.section__head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  margin-bottom: clamp(40px, 5vw, 72px);
  align-items: end;
}
@media (max-width: 860px) {
  .section__head { grid-template-columns: 1fr; gap: 22px; }
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 19px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ivory);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.btn:hover { border-color: var(--gold); color: var(--gold); }

.btn--gold {
  background: var(--gold);
  color: var(--obsidian);
  border-color: var(--gold);
  font-weight: 600;
}
.btn--gold:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--obsidian);
}
.btn--ghost { border-color: transparent; padding-inline: 0; }
.btn--ghost:hover { border-color: transparent; color: var(--gold); }

.btn .arrow {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: transform 0.3s var(--ease);
  flex: none;
}
.btn .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arrow { transform: translateX(4px); }

/* =========================================================================
   Nav
   ========================================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
/* Solid once scrolled, so the hairline does not float over the hero image. */
.nav.is-scrolled {
  background: rgba(10, 10, 10, 0.92);
  border-bottom-color: var(--line);
}
/* Slides away on downward scroll, returns immediately on upward — the content
   gets the full viewport without the nav becoming hard to reach. */
.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* WCAG 2.2 SC 2.5.8 wants 24×24 of target; a 12px mono line gave 18. The
     text does not grow — the hit area does, which is the whole point. */
  min-height: 44px;
}
.brand .mark {
  width: 14px;
  height: 14px;
  background: var(--gold);
  transform: rotate(45deg);
  position: relative;
  flex: none;
  transition: transform 0.5s var(--ease);
}
.brand .mark::after { content: ""; position: absolute; inset: 3px; background: var(--obsidian); }
.brand:hover .mark { transform: rotate(135deg); }

.nav__links { display: flex; gap: 26px; justify-content: center; }
.nav__link {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-60);
  position: relative;
  padding: 6px 0;
  transition: color 0.25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover { color: var(--ivory); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--ivory); }

.nav__right { display: flex; align-items: center; gap: 14px; }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  background: transparent;
  position: relative;
  flex: none;
}
.nav__toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--ivory);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 21.5px; }
.nav__toggle span:nth-child(3) { top: 27px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { top: 21.5px; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__inner { grid-template-columns: 1fr auto; gap: 12px; }
  .nav__links { display: none; }
  .nav__right .btn { display: none; }
  .nav__toggle { display: block; }
}

.nav__drawer {
  position: fixed;
  inset: 0;
  background: var(--obsidian);
  z-index: 59;
  padding: 96px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease), transform 0.35s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav__drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color 0.25s var(--ease);
}
.drawer__link:hover, .drawer__link.is-active { color: var(--gold); }
.drawer__link .idx {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ivory-45);
}
.drawer__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
.drawer__note {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-45);
  text-align: center;
  padding-top: 8px;
}

/* =========================================================================
   Loader curtain
   ========================================================================= */
.curtain {
  position: fixed;
  inset: 0;
  background: var(--obsidian);
  z-index: 100;
  display: grid;
  place-items: center;
  transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
}
.curtain.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.curtain__bar {
  width: min(340px, 62vw);
  height: 1px;
  background: var(--ivory-10);
  position: relative;
  overflow: hidden;
}
.curtain__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-100%);
  animation: curtain-bar 1s var(--ease) forwards;
}
@keyframes curtain-bar { to { transform: translateX(0); } }
.curtain__label {
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivory-45);
}

/* =========================================================================
   Media placeholder — shown when a block has no image selected yet
   ========================================================================= */
.media-slot {
  position: relative;
  display: grid;
  place-content: center;
  gap: 8px;
  width: 100%;
  aspect-ratio: var(--slot-ratio, 4/5);
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg,
      rgba(249, 250, 251, 0.035) 0 12px,
      rgba(249, 250, 251, 0.015) 12px 24px),
    var(--obsidian-2);
  text-align: center;
  padding: 20px;
}
.media-slot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gold);
  opacity: 0.6;
}
.media-slot__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-45);
}
.media-slot__hint {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Public-facing when a media slot is empty — text, so it meets AA. */
  color: var(--ivory-45);
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: 92px;
  overflow: clip;
  isolation: isolate;
  display: flex;
}
.hero__media {
  position: absolute;
  inset: -8% 0;
  z-index: -2;
  /* The parallax translate is written to this variable by JS on rAF, so the
     scroll handler never touches layout. */
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.06);
  will-change: transform;
}
.hero__media picture, .hero__media img, .hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media img, .hero__media video {
  filter: brightness(0.52) saturate(0.85) contrast(1.06);
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.18) 32%, rgba(10,10,10,0.92) 100%),
    linear-gradient(96deg, rgba(10,10,10,0.68) 0%, rgba(10,10,10,0) 62%);
}
/* A faint gold horizon line just above the fold — one small piece of craft. */
.hero__horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, var(--gold-20) 30%, var(--gold-20) 70%, transparent);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  flex: 1;
  padding-block: clamp(56px, 8vh, 96px) clamp(40px, 6vh, 56px);
}
.hero__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
}
.hero__meta { display: grid; gap: 13px; color: var(--ivory-60); }
.hero__meta .row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero__meta .bar { width: 26px; height: 1px; background: var(--gold); flex: none; transform: translateY(-4px); }
.hero__meta b { color: var(--ivory); font-weight: 500; }

.hero__index {
  text-align: right;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-60);
  line-height: 2;
}
.hero__index .h { color: var(--ivory); display: block; margin-bottom: 4px; }

.hero__title {
  margin-top: clamp(32px, 5vh, 56px);
  max-width: 15ch;
}

.hero__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.hero__scroll { display: grid; gap: 12px; justify-items: start; }
.hero__scroll .rule {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll .rule::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 18px;
  background: var(--gold);
  animation: scroll-hint 2.4s var(--ease) infinite;
}
@keyframes scroll-hint {
  0%   { transform: translateY(-100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(340%); opacity: 0; }
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .hero__top { grid-template-columns: 1fr; }
  .hero__index { text-align: left; }
  .hero__title { max-width: 100%; }
  .hero__bottom { grid-template-columns: 1fr; gap: 28px; }
  .hero__scroll { display: none; }
}

/* Landscape phones: 100svh plus the full hero content stacks to well over two
   screens, so the visitor scrolls a long way before reaching anything else.
   Here the hero gives up its minimum height and tightens, and the secondary
   credential lines step aside — the headline and the buttons are what matter. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; padding-top: 76px; }
  .hero__inner { padding-block: 28px 28px; gap: 24px; }
  .hero__title { margin-top: 18px; font-size: clamp(30px, 6.4vw, 52px); }
  .hero__meta .row:not(:first-child) { display: none; }
  .hero__index { display: none; }
  .hero__bottom { padding-top: 22px; gap: 16px; }
  .hero__bottom .lead { font-size: 14px; }
}

/* =========================================================================
   Ticker
   ========================================================================= */
.ticker {
  border-block: 1px solid var(--line);
  overflow: hidden;
  background: var(--obsidian);
  position: relative;
}
/* Fades the band into the page edges instead of cutting items off abruptly. */
.ticker::before, .ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--obsidian), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--obsidian), transparent); }

.ticker__track {
  display: flex;
  width: max-content;
  gap: 56px;
  padding: 15px 0;
  animation: ticker var(--ticker-speed, 60s) linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-60);
  display: inline-flex;
  align-items: center;
  gap: 13px;
  white-space: nowrap;
}
.ticker__item .dot { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; flex: none; }
.ticker__item b { color: var(--ivory); font-weight: 500; letter-spacing: 0.1em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* =========================================================================
   Pillars
   ========================================================================= */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}
.pillar {
  padding: clamp(36px, 4vw, 68px) clamp(24px, 2.6vw, 44px);
  border-right: 1px solid var(--line);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pillar:last-child { border-right: none; }
/* The image sits behind the card and surfaces on hover — the copy stays the
   primary content, the photograph rewards attention. */
.pillar__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.7s var(--ease), transform 1.2s var(--ease);
}
.pillar__bg picture, .pillar__bg img { width: 100%; height: 100%; object-fit: cover; }
.pillar__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.86), rgba(10,10,10,0.94));
}
.pillar:hover .pillar__bg, .pillar:focus-within .pillar__bg { opacity: 1; transform: scale(1); }

.pillar__num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.pillar__title {
  font-family: var(--f-display);
  font-size: clamp(27px, 2.9vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  font-weight: 400;
}
.pillar__where {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-60);
  margin-bottom: 22px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.pillar__where .dot { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; flex: none; }
.pillar__copy { color: var(--ivory-60); font-size: 14px; line-height: 1.68; margin: 0 0 28px; flex: 1; }
.pillar__yield {
  display: flex;
  gap: clamp(20px, 3vw, 34px);
  align-items: baseline;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.pillar__yield .big {
  font-family: var(--f-display);
  font-size: clamp(28px, 2.4vw, 37px);
  line-height: 1;
  color: var(--gold);
}
.pillar__yield .lbl {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-60);
  margin-top: 7px;
}

@media (max-width: 940px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid var(--line); }
  .pillar:last-child { border-bottom: none; }
  .pillar__bg { opacity: 0.34; transform: none; }
}

/* =========================================================================
   Two ways in
   ========================================================================= */
.ways { display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid var(--line); }
.way {
  padding: clamp(36px, 4vw, 64px) clamp(24px, 2.6vw, 44px);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.way:last-child { border-right: none; }
.way--accent { background: var(--obsidian-2); }
.way__tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
}
.way__t {
  font-family: var(--f-display);
  font-size: clamp(27px, 3.2vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  max-width: 18ch;
  font-weight: 400;
}
.way__copy { color: var(--ivory-60); font-size: 15px; line-height: 1.66; margin: 0 0 24px; }
.way__list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; flex: 1; }
.way__list li {
  padding-left: 24px;
  position: relative;
  font-size: 14px;
  line-height: 1.58;
  color: var(--ivory-80);
}
.way__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 1px;
  background: var(--gold);
}
.way__list li .em { color: var(--gold); font-style: normal; font-weight: 500; }
.way__foot {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-45);
  margin: 0 0 24px;
}
.way .btn { align-self: flex-start; }

@media (max-width: 940px) {
  .ways { grid-template-columns: 1fr; }
  .way { border-right: none; border-bottom: 1px solid var(--line); }
  .way:last-child { border-bottom: none; }
}

/* =========================================================================
   Manifesto
   ========================================================================= */
.manifesto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 92px);
  align-items: center;
}
.manifesto__copy { max-width: 50ch; }
.manifesto__copy p { font-size: 16px; line-height: 1.72; color: var(--ivory-80); margin: 0 0 18px; }
/* The drop cap is the one flourish this section gets. */
.manifesto__copy > p:first-child::first-letter {
  font-family: var(--f-display);
  font-size: 4.2em;
  float: left;
  line-height: 0.82;
  padding: 8px 14px 0 0;
  color: var(--gold);
}
.manifesto__sig {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 28px;
}
.manifesto__media { position: relative; overflow: hidden; }
.manifesto__media picture, .manifesto__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1000px) { .manifesto { grid-template-columns: 1fr; } }

/* =========================================================================
   Visits
   ========================================================================= */
.visit-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.visit { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.visit:last-child { border-right: none; }
.visit__media { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.visit__media picture, .visit__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.visit:hover .visit__media img { transform: scale(1.05); }
.visit__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(8px);
  padding: 6px 10px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}
.visit__body { padding: clamp(22px, 2.4vw, 32px); }
.visit__t { font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.1; margin: 0 0 10px; font-weight: 400; }
.visit__d { color: var(--ivory-60); font-size: 14px; line-height: 1.66; margin: 0; }

.visit-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); margin-top: clamp(36px, 5vw, 56px); }
.vrule { padding: 26px 0 0; border-top: 1px solid var(--gold); }
.vrule__lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.vrule__d { font-size: 14px; line-height: 1.62; color: var(--ivory-80); }

@media (max-width: 940px) {
  .visit-grid { grid-template-columns: 1fr; }
  .visit { border-right: none; border-bottom: 1px solid var(--line); }
  .visit:last-child { border-bottom: none; }
  .visit-rules { grid-template-columns: 1fr; gap: 0; }
  .vrule + .vrule { border-top-color: var(--line); margin-top: 24px; }
}

/* =========================================================================
   Numbers
   ========================================================================= */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.num {
  padding: clamp(36px, 4vw, 54px) clamp(20px, 2.2vw, 32px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.num:last-child { border-right: none; }
.num__lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-60);
  margin-bottom: 16px;
}
.num__val {
  font-family: var(--f-display);
  font-size: clamp(38px, 4.2vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  /* Tabular figures stop the number jittering while it counts up. */
  font-variant-numeric: tabular-nums;
}
.num__sub { margin-top: 12px; font-size: 13px; color: var(--ivory-60); line-height: 1.55; }

@media (max-width: 940px) {
  .numbers { grid-template-columns: 1fr 1fr; }
  .num:nth-child(2n) { border-right: none; }
}
@media (max-width: 560px) {
  .numbers { grid-template-columns: 1fr; }
  .num { border-right: none; }
}

/* =========================================================================
   Portfolio rail
   ========================================================================= */
.rail-outer { position: relative; }
.rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 6px var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--ivory-20) transparent;
  cursor: grab;
  /* Prevents the browser hijacking the horizontal drag as a page-back gesture. */
  overscroll-behavior-x: contain;
}
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-thumb { background: var(--ivory-20); }
.rail:focus-visible { outline-offset: -2px; }

.prop { flex: 0 0 clamp(260px, 30vw, 400px); scroll-snap-align: start; }
.prop__media { position: relative; overflow: hidden; aspect-ratio: 4/5; margin-bottom: 16px; }
.prop__media picture, .prop__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.prop:hover .prop__media img { transform: scale(1.05); }
.prop__tag {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 2;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(8px);
  padding: 6px 10px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}
.prop__name { font-family: var(--f-display); font-size: 21px; line-height: 1.12; margin: 0 0 6px; font-weight: 400; }
.prop__loc {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-60);
  margin-bottom: 14px;
}
.prop__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ivory-80);
}
.prop__meta span:last-child { color: var(--gold); text-align: right; }

.rail-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.rail-hint {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-45);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rail-hint__track { width: 60px; height: 1px; background: var(--line-strong); position: relative; }
.rail-hint__thumb {
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px;
  width: var(--rail-progress-w, 20%);
  background: var(--gold);
  transform: translateX(var(--rail-progress-x, 0));
  transition: transform 0.1s linear;
}

/* =========================================================================
   Process
   ========================================================================= */
.process { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.step { padding: clamp(32px, 3.4vw, 48px) clamp(20px, 2vw, 28px); border-right: 1px solid var(--line); }
.step:last-child { border-right: none; }
.step__num { font-family: var(--f-display); font-size: clamp(38px, 3.6vw, 54px); line-height: 1; color: var(--gold); margin-bottom: 24px; }
.step__t { font-family: var(--f-display); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.15; margin: 0 0 10px; font-weight: 400; }
.step__d { font-size: 13px; color: var(--ivory-60); line-height: 1.62; margin: 0; }

@media (max-width: 940px) {
  .process { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2n) { border-right: none; }
  .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .process { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: none; }
}

/* =========================================================================
   Compare
   ========================================================================= */
.compare-pre { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 32px); margin-bottom: clamp(36px, 5vw, 56px); }
.compare-pre__col { padding: clamp(24px, 2.6vw, 32px); border: 1px solid var(--line); }
.compare-pre__col .tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid var(--line);
  color: var(--ivory-60);
}
.compare-pre__col h3 { font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 28px); margin: 0 0 12px; line-height: 1.12; font-weight: 400; }
.compare-pre__col p { font-size: 14px; line-height: 1.66; color: var(--ivory-60); margin: 0; }
.compare-pre__col--accent { background: var(--obsidian-2); border-color: var(--gold); }
.compare-pre__col--accent .tag { color: var(--gold); border-color: var(--gold); }

.compare { border: 1px solid var(--line); background: var(--obsidian); }
.compare__row { display: grid; grid-template-columns: 1.5fr repeat(var(--cols, 3), 1fr); border-bottom: 1px solid var(--line); }
.compare__row:last-child { border-bottom: none; }
.compare__row > * {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  font-size: 13px;
  color: var(--ivory-80);
  display: flex;
  align-items: center;
}
.compare__row > *:last-child { border-right: none; }
.compare__row .lbl {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
  font-weight: 500;
}
.compare__row .col {
  justify-content: center;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ivory-60);
}
.compare__row .col--accent { color: var(--gold); background: rgba(212, 175, 55, 0.05); font-weight: 500; }
.compare__row--head > * { background: var(--obsidian-2); }
.compare__row--head .col { font-family: var(--f-display); font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.01em; color: var(--ivory); text-transform: none; line-height: 1; }
.compare__row--head .col--accent { color: var(--gold); }
.compare__row--head .lbl { color: var(--ivory-45); }

@media (max-width: 940px) {
  .compare-pre { grid-template-columns: 1fr; }
  .compare__row { grid-template-columns: 1fr; }
  .compare__row > * { border-right: none; border-bottom: 1px solid var(--line); padding: 13px 16px; justify-content: flex-start; }
  .compare__row > *:last-child { border-bottom: none; }
  .compare__row--head { display: none; }
  .compare__row .col { text-align: left; }
  /* On a phone the header row is gone, so each cell states its own column. */
  .compare__row .col::before {
    content: attr(data-col) " — ";
    color: var(--ivory-45);
    margin-right: 8px;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
}

.closing-quote {
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--gold);
  background: rgba(212, 175, 55, 0.04);
  text-align: center;
  max-width: 760px;
}
.closing-quote p {
  font-family: var(--f-display);
  font-size: clamp(21px, 2.5vw, 31px);
  line-height: 1.32;
  margin: 0;
  color: var(--ivory);
}
.closing-quote .em { color: var(--gold); }

/* =========================================================================
   Closing CTA
   ========================================================================= */
.cta { position: relative; padding: clamp(72px, 11vw, 150px) 0; overflow: clip; isolation: isolate; }
.cta__bg { position: absolute; inset: 0; z-index: -2; }
.cta__bg picture, .cta__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.32) saturate(0.8); }
.cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.8));
}
.cta__inner { text-align: center; max-width: 780px; margin: 0 auto; }
.cta__inner .lead { margin: 22px auto 0; }
.cta__actions { display: inline-flex; gap: 13px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-60);
}
.tag .dot { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; flex: none; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 80px) 0 32px; background: var(--obsidian); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--line);
}
.footer__blurb { font-size: 13px; line-height: 1.66; color: var(--ivory-60); max-width: 38ch; margin: 18px 0 0; }
.footer__col h2 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
  font-weight: 400;
}
.footer__col a, .footer__col span {
  display: block;
  font-size: 14px;
  color: var(--ivory-60);
  padding: 4px 0;
  transition: color 0.25s var(--ease);
}
.footer__col a:hover { color: var(--ivory); }
.footer__base {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-45);
}

@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* On touch screens the footer links are the smallest tap targets on the page.
   Padding lifts them to a comfortable 44px without changing the desktop rhythm. */
@media (hover: none) and (pointer: coarse) {
  .footer__col a { padding-block: 12px; }
  .nav__link { padding-block: 12px; }
}

/* =========================================================================
   Reveal motion
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal--slow.is-in { transition-duration: 1.3s; }

.stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-in > *:nth-child(2) { transition-delay: 70ms; }
.stagger.is-in > *:nth-child(3) { transition-delay: 140ms; }
.stagger.is-in > *:nth-child(4) { transition-delay: 210ms; }
.stagger.is-in > *:nth-child(5) { transition-delay: 280ms; }
.stagger.is-in > *:nth-child(6) { transition-delay: 350ms; }
.stagger.is-in > *:nth-child(7) { transition-delay: 420ms; }

/* The signature moment: the hero headline rises line by line from behind a mask.
   Each line is wrapped by JS; without JS the text simply shows. */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out);
}
.is-lines-in .line-mask > span { transform: none; }
.is-lines-in .line-mask:nth-child(1) > span { transition-delay: 0.05s; }
.is-lines-in .line-mask:nth-child(2) > span { transition-delay: 0.16s; }
.is-lines-in .line-mask:nth-child(3) > span { transition-delay: 0.27s; }
.is-lines-in .line-mask:nth-child(4) > span { transition-delay: 0.38s; }

/* =========================================================================
   Reduced motion — everything becomes instant, nothing becomes broken
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal, .stagger > * { opacity: 1; transform: none; }
  .line-mask > span { transform: none; }
  .hero__media { transform: none; }
  .ticker__track { animation: none; transform: none; }
  .hero__scroll .rule::after { display: none; }
}

/* Anything relying on JS shows immediately when JS is unavailable. */
.no-js .reveal, .no-js .stagger > * { opacity: 1; transform: none; }
.no-js .line-mask > span { transform: none; }
.no-js .curtain { display: none; }

@media print {
  .nav, .curtain, .ticker, .nav__drawer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =========================================================================
   Inner page header
   ========================================================================= */
.pagehead { padding: clamp(128px, 16vh, 190px) 0 clamp(44px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.pagehead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; }
.pagehead h1 { margin: 22px 0 0; max-width: 15ch; }
@media (max-width: 900px) { .pagehead__grid { grid-template-columns: 1fr; gap: 26px; } }

/* =========================================================================
   Portfolio filter bar
   Each pillar is a real URL, so a filtered view can be linked and crawled.
   ========================================================================= */
.filterbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.filterbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 0; }
.filter-list { display: flex; gap: 4px; flex-wrap: wrap; }
.filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid transparent;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ivory-60);
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.filter:hover { color: var(--ivory); border-color: var(--line-strong); }
.filter.is-on { color: var(--obsidian); background: var(--gold); border-color: var(--gold); }
.filter .cnt { color: var(--ivory-45); }
.filter.is-on .cnt { color: var(--obsidian); opacity: .62; }

/* On a phone the pills wrap onto three rows, and because the bar is sticky that
   cost is paid for the whole scroll. One scrollable row instead. */
@media (max-width: 720px) {
  .filter-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
  }
  .filter-list::-webkit-scrollbar { display: none; }
  .filter { flex: none; scroll-snap-align: start; }
  .filterbar__inner { padding: 8px 0; }
}

/* =========================================================================
   Holdings grid
   ========================================================================= */
.holdings { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 34px); }
@media (max-width: 1000px) { .holdings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .holdings { grid-template-columns: 1fr; } }

.h-card__link { display: block; }
.h-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4/5; margin-bottom: 18px; }
.h-card__media picture, .h-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.h-card:hover .h-card__media img { transform: scale(1.045); }
.h-card__tag, .h-card__status {
  position: absolute; z-index: 2;
  padding: 6px 10px; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .2em; text-transform: uppercase;
  background: rgba(10,10,10,.72); backdrop-filter: blur(8px); border: 1px solid var(--line);
}
.h-card__tag { top: 13px; left: 13px; color: var(--ivory); }
.h-card__status { bottom: 13px; right: 13px; color: var(--gold); border-color: var(--gold-20); }
.h-card__name { font-family: var(--f-display); font-size: clamp(20px, 1.9vw, 25px); line-height: 1.12; margin: 0 0 6px; font-weight: 400; }
.h-card__loc { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-60); margin-bottom: 16px; }
.h-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.h-card__meta .cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.h-card__meta .lbl { font-family: var(--f-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-45); }
.h-card__meta .val { font-family: var(--f-mono); font-size: 12.5px; color: var(--ivory); }
.h-card__meta .val.is-accent { color: var(--gold); }

.empty-state { padding: clamp(48px, 8vw, 96px) 0; text-align: center; display: grid; gap: 24px; justify-items: center; }

/* =========================================================================
   Regions band
   ========================================================================= */
.regions { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); background: var(--obsidian-2); }
.regions__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.regions__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.region { padding: 18px 0; border-top: 1px solid var(--line); }
.region h3 { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 7px; font-weight: 400; }
.region p { font-size: 13px; color: var(--ivory-60); margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .regions__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .regions__list { grid-template-columns: 1fr; } }

/* =========================================================================
   Listing detail
   ========================================================================= */
.listing__head { padding: clamp(120px, 15vh, 172px) 0 clamp(28px, 4vw, 44px); }
.listing__back {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 30px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ivory-60);
  transition: color .25s var(--ease);
}
.listing__back:hover { color: var(--gold); }
.arrow--back { transform: rotate(180deg); }
.listing__head-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.listing__head-grid h1 { margin: 20px 0 0; }
.listing__loc { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-60); margin-top: 18px; }
.listing__aside { display: grid; gap: 18px; justify-items: start; }
.listing__price { font-family: var(--f-display); font-size: clamp(26px, 3vw, 38px); color: var(--gold); line-height: 1; }
.listing__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .listing__head-grid { grid-template-columns: 1fr; } }

.listing__hero { margin: 0 0 clamp(40px, 6vw, 72px); aspect-ratio: 16/9; overflow: hidden; }
.listing__hero picture, .listing__hero img { width: 100%; height: 100%; object-fit: cover; }

.listing__body { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .listing__body { grid-template-columns: 1fr; } }

.listing__h {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font-weight: 400;
}
.listing__h::before { content: ""; width: 24px; height: 1px; background: var(--gold); flex: none; }

.prose { font-size: 16px; line-height: 1.72; color: var(--ivory-80); max-width: 62ch; }
.prose p { margin: 0 0 18px; }
.prose h2, .prose h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.15; margin: 32px 0 14px; color: var(--ivory); }
.prose h2 { font-size: clamp(24px, 2.6vw, 34px); }
.prose h3 { font-size: clamp(19px, 2vw, 25px); }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 18px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-left: 1px solid var(--gold); margin: 24px 0; padding-left: 22px; color: var(--ivory); font-style: italic; }

.factlist { margin: 0; border-top: 1px solid var(--line); }
.factlist__row { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.factlist dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-60); }
.factlist dd { margin: 0; font-family: var(--f-mono); font-size: 13px; color: var(--ivory); text-align: right; }
.factlist dd.is-accent { color: var(--gold); }
.listing__disclaimer { margin-top: 22px; font-size: 12px; line-height: 1.6; color: var(--ivory-45); }

.listing__gallery, .listing__related { padding: clamp(48px, 7vw, 88px) 0 0; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }
.gallery__item { margin: 0; }
.gallery__item picture, .gallery__item img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.gallery__item figcaption { margin-top: 10px; font-size: 12px; color: var(--ivory-45); }
.listing__related { padding-bottom: clamp(48px, 7vw, 88px); }

/* =========================================================================
   Authentication screens
   Split layout: brand panel and form. Carried over from the original login
   page, which was the one part of the old site that already felt like a
   product rather than a brochure.
   ========================================================================= */
.auth-body { margin: 0; }
.auth { min-height: 100svh; display: grid; grid-template-columns: 1.05fr 1fr; }

.auth__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(32px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  border-right: 1px solid var(--line);
}
.auth__panel-bg { position: absolute; inset: 0; z-index: -2; }
.auth__panel-bg picture, .auth__panel-bg img { width: 100%; height: 100%; object-fit: cover; }
.auth__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(160deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.93) 100%);
}
.auth__brand { color: var(--ivory); }
.auth__panel-body { max-width: 30ch; }
.auth__panel-h { margin: 20px 0 18px; }
.auth__points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.auth__points li {
  display: flex; align-items: baseline; gap: 11px;
  font-size: 13.5px; color: var(--ivory-80); line-height: 1.5;
}
.auth__points .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; }
.auth__back {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ivory-60);
  transition: color .25s var(--ease);
}
.auth__back:hover { color: var(--gold); }

.auth__form-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 64px);
  background: var(--obsidian);
}
.auth__form { width: 100%; max-width: 430px; }
.auth__h { margin: 18px 0 12px; }
.auth__lead { color: var(--ivory-60); font-size: 14.5px; line-height: 1.65; margin: 0 0 30px; }
.auth__email {
  font-family: var(--f-mono); font-size: 13px; color: var(--gold);
  padding: 12px 14px; border: 1px solid var(--gold-20); background: var(--gold-10);
  margin: 0 0 22px; word-break: break-all;
}
.auth__alt {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
  text-align: center; font-size: 13px; color: var(--ivory-60);
}
.auth__alt a { color: var(--gold); }
.auth__alt a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Shared form controls for the auth screens */
.auth .field { margin-bottom: 20px; }
.auth .field label {
  display: block; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-45); margin-bottom: 8px;
}
.auth .field input {
  width: 100%; background: var(--obsidian-2); border: 1px solid var(--line-strong);
  padding: 12px 14px; color: var(--ivory); font-family: var(--f-body); font-size: 15px;
  transition: border-color .2s var(--ease);
}
.auth .field input:focus { outline: none; border-color: var(--gold); }
.auth .field .hint { font-size: 12px; color: var(--ivory-45); margin-top: 7px; line-height: 1.5; }
.auth .field .err { font-size: 12px; color: var(--fail, #F87171); margin-top: 7px; }
.auth .field.has-error input { border-color: rgba(248,113,113,.5); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.input-code {
  font-family: var(--f-mono) !important;
  font-size: 26px !important;
  letter-spacing: .5em;
  text-align: center;
}

.field-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 26px;
}
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--ivory-80); }
.check--start { align-items: flex-start; line-height: 1.55; }
.check input { width: 17px; height: 17px; accent-color: var(--gold); flex: none; margin-top: 1px; }

.link-quiet {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ivory-60); background: none; border: none; padding: 0;
  transition: color .2s var(--ease);
}
.link-quiet:hover { color: var(--gold); }
.link-button { cursor: pointer; }

.notice {
  padding: 13px 16px; border: 1px solid var(--line-strong);
  margin-bottom: 20px; font-size: 13.5px; line-height: 1.6;
}
.notice--success { border-color: rgba(74,222,128,.34); background: rgba(74,222,128,.05); color: #4ADE80; }
.notice--error   { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.05); color: #F87171; }
.notice--warning { border-color: rgba(212,175,55,.4); background: rgba(212,175,55,.05); color: var(--gold); }

.btn--block { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  /* The panel becomes a compact header rather than half the screen — on a
     phone the form is what the visitor came for. */
  .auth__panel { min-height: auto; padding: 24px; gap: 20px; border-right: none; border-bottom: 1px solid var(--line); }
  .auth__panel-body { max-width: none; }
  .auth__panel-h { font-size: clamp(28px, 8vw, 40px); margin: 14px 0 10px; }
  .auth__points, .auth__back { display: none; }
  .auth__form-wrap { padding: 32px 24px 48px; }
}
@media (max-width: 560px) {
  .field-pair { grid-template-columns: 1fr; }
}

/* =========================================================================
   Inner pages — Phase 7
   ========================================================================= */

.wrap--narrow { max-width: 760px; }

/* Page header. Same rhythm as the homepage hero, a third of the height —
   these are pages you read, not pages that announce themselves. */
.phead {
  padding: clamp(90px, 14vw, 160px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.phead__h {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(38px, 7vw, 76px); line-height: 1.02; letter-spacing: -.02em;
  color: var(--ivory); margin: 18px 0 0; max-width: 20ch;
}
.phead__h .em { font-style: italic; color: var(--gold); }
.phead__lead {
  margin: 26px 0 0; max-width: 56ch;
  font-size: clamp(15px, 1.6vw, 18px); line-height: 1.75; color: var(--ivory-60);
}

/* Editorial sections */
.prose { padding: clamp(56px, 8vw, 104px) 0; }
.prose__s { max-width: 68ch; }
.prose__s + .prose__s { margin-top: clamp(48px, 7vw, 88px); }
.prose__h {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.015em;
  color: var(--ivory); margin: 14px 0 20px;
}
.prose__body { color: var(--ivory-60); line-height: 1.85; font-size: 16px; }
.prose__body p { margin: 0 0 18px; }
.prose__body p:last-child { margin-bottom: 0; }
.prose__body strong { color: var(--ivory); font-weight: 500; }
.prose__s--lead .prose__body { font-size: 18px; color: var(--ivory-80); }
.prose__s--quiet .prose__body { font-size: 14.5px; color: var(--ivory-45); }

.sect__h {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.1; letter-spacing: -.018em;
  color: var(--ivory); margin: 14px 0 0;
}
.sect__h .em { font-style: italic; color: var(--gold); }
.sect__lead {
  margin: 18px 0 0; max-width: 54ch; color: var(--ivory-60);
  line-height: 1.75; font-size: 15.5px;
}

/* Milestones. The year is the spine; on a phone it sits above rather than
   beside, because a 4-character column beside 60 characters of text is a
   column of wasted width. */
.tline { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }
.tline__list { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; }
.tline__i {
  display: grid; gap: 6px 30px; padding: 24px 0;
  border-top: 1px solid var(--line);
}
.tline__i:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .tline__i { grid-template-columns: 110px 1fr; gap: 0 40px; } }
.tline__y {
  font-size: 12px; letter-spacing: .18em; color: var(--gold); padding-top: 3px;
}
.tline__t { font-size: 17px; font-weight: 400; color: var(--ivory); margin: 0 0 8px; }
.tline__b { margin: 0; color: var(--ivory-60); line-height: 1.7; font-size: 14.5px; max-width: 62ch; }

/* Principles grid */
.prin { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }
.prin__grid { display: grid; gap: 1px; margin-top: clamp(36px, 5vw, 56px); background: var(--line); }
@media (min-width: 640px)  { .prin__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .prin__grid { grid-template-columns: repeat(3, 1fr); } }
.prin__i { background: var(--obsidian); padding: 30px 28px; }
.prin__t { font-size: 16px; font-weight: 400; color: var(--ivory); margin: 0 0 12px; }
.prin__b { margin: 0; color: var(--ivory-60); line-height: 1.75; font-size: 14px; }

/* Legal documents. Narrow measure, generous leading — these get read start to
   finish by the few people who read them, and skimmed by everyone else. */
.legal { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 9vw, 120px); }
.legal__date {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ivory-45); margin: 0 0 32px;
}
.legal__intro {
  color: var(--ivory-80); line-height: 1.8; font-size: 16px;
  padding-bottom: 32px; border-bottom: 1px solid var(--line);
}
.legal__intro p { margin: 0 0 16px; }
.legal__intro p:last-child { margin-bottom: 0; }
.legal__s { padding-top: 40px; }
.legal__h {
  font-family: var(--f-display); font-weight: 400; font-size: 24px;
  color: var(--ivory); margin: 0 0 6px;
}
.legal__sub { margin: 0 0 16px; color: var(--gold); font-size: 14px; }
.legal__body { color: var(--ivory-60); line-height: 1.85; font-size: 15px; }
.legal__body p { margin: 0 0 16px; }
.legal__body p:last-child { margin-bottom: 0; }
.legal__body a { color: var(--gold); }
.legal__body em { color: var(--ivory-45); font-style: italic; }

/* Contact */
.contact { padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 120px); }
.contact__grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: start; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

.cform { margin-top: clamp(28px, 4vw, 44px); max-width: 560px; }

/* The honeypot. Off-screen rather than display:none — some bots skip anything
   explicitly hidden, and this one is meant to look fillable. */
.cform__trap {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.cform__note {
  margin: 22px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ivory-45); max-width: 52ch;
}
.cform__note a { color: var(--gold); }

.contact__oh {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ivory-45); font-weight: 400; margin: 0 0 26px;
}
.office { border-top: 1px solid var(--line); padding: 24px 0; }
.office:last-child { border-bottom: 1px solid var(--line); }
.office__c { font-family: var(--f-display); font-size: 22px; font-weight: 400; color: var(--ivory); margin: 0; }
.office__r {
  display: block; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 8px 0 14px;
}
.office__a { margin: 0 0 10px; color: var(--ivory-60); font-size: 14px; line-height: 1.7; }
.office__p { margin: 0 0 6px; font-size: 13px; }
.office__p a { color: var(--ivory-80); text-decoration: none; }
.office__p a:hover { color: var(--gold); }
.office__t { margin: 0; font-size: 12.5px; color: var(--ivory-45); }

/* -------------------------------------------------------------------------
   Form fields on the public site
   -------------------------------------------------------------------------
   These classes existed only in dashboard.css, so the contact form rendered
   with browser defaults — 21px-tall inputs on a phone, which is both ugly and
   below the tap-target size anyone can reliably hit.

   16px is the font size deliberately: iOS zooms the whole page when a focused
   input is smaller, which on a form is disorienting.
   ------------------------------------------------------------------------- */
.field { margin-bottom: 22px; }
.field__label {
  display: block; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-45);
  margin-bottom: 9px;
}
.field__input {
  width: 100%; min-height: 48px; padding: 13px 15px;
  background: var(--obsidian-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius, 2px);
  color: var(--ivory); font-family: var(--f-body); font-size: 16px; line-height: 1.5;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  -webkit-appearance: none; appearance: none;
}
select.field__input {
  /* The arrow has to be drawn back on once appearance is stripped. */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(249,250,251,.45) 50%),
    linear-gradient(135deg, rgba(249,250,251,.45) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
textarea.field__input { min-height: 140px; resize: vertical; line-height: 1.7; }
/* Placeholder text is text: WCAG AA applies. Still clearly dimmer than an
   entered value, and every field has a real <label> above it. */
.field__input::placeholder { color: var(--ivory-45); }
.field__input:hover { border-color: rgba(249,250,251,.28); }
.field__input:focus {
  outline: none; border-color: var(--gold); background: var(--obsidian-3);
  box-shadow: 0 0 0 1px rgba(212,175,55,.18);
}
.field__input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.field__error { color: var(--fail, #F87171); font-size: 12.5px; margin: 8px 0 0; }
.field__help  { color: var(--ivory-45); font-size: 12.5px; line-height: 1.65; margin: 8px 0 0; }

/* =========================================================================
   Cookie notice
   Off by default (Settings → Legal). Fixed over the page rather than in flow,
   so it cannot displace content — it appears after first paint, and a banner
   that pushes the layout down at that moment is a layout shift.
   ========================================================================= */
.cookiebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  padding: 18px var(--gutter);
  background: var(--obsidian-2);
  border-top: 1px solid var(--line-strong);
}
.cookiebar[hidden] { display: none; }

.cookiebar__body {
  flex: 1 1 30ch;
  color: var(--ivory-60);
  font-size: 13px;
  line-height: 1.65;
  max-width: 78ch;
}
.cookiebar__body p { margin: 0 0 8px; }
.cookiebar__body p:last-child { margin-bottom: 0; }

.cookiebar__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-left: auto;
}

.cookiebar__more {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-60);
  text-decoration: underline;
  text-underline-offset: 4px;
  /* 44px of target on a phone without 44px of visible chrome. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cookiebar__more:hover { color: var(--gold); }

.cookiebar__ok {
  min-height: 44px;
  padding: 12px 20px;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--obsidian);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.cookiebar__ok:hover { background: var(--gold-light); }

@media (max-width: 640px) {
  .cookiebar { flex-direction: column; }
  .cookiebar__actions { margin-left: 0; width: 100%; }
  .cookiebar__ok { flex: 1; justify-content: center; }
}

/* Price on a portfolio card. A grid of assets for sale that does not say what
   anything costs makes the visitor open every page to find out. */
.h-card__price {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--gold); margin: -8px 0 16px;
}

/* Address block on a listing. Locked to registered investors — see the view. */
.listing__address { margin-top: 28px; }
.listing__address-line { font-size: 14px; line-height: 1.7; color: var(--ivory-80); margin: 0; }
.listing__address-line.is-locked { color: var(--ivory-60); }
.listing__address-line a { color: var(--gold); }

/* The Turnstile widget. Given room of its own so it never collides with the
   button beneath it, and left-aligned with the fields above it. */
.turnstile { margin: 4px 0 20px; min-height: 65px; }
.turnstile:empty { display: none; margin: 0; }

/* You already own this title. Shown instead of an invitation to enquire about
   your own property — the account and the public site are one product. */
.listing__owned {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid var(--gold-20); background: var(--gold-10);
}
.tag--ok { color: var(--gold); border-color: var(--gold-20); }

/* A title the person looking already owns.
   Gold rather than the neutral status chip it replaces: on a grid of things for
   sale, the one you already hold is the exception, and the eye should find it
   without reading. It takes the status badge's place instead of sitting beside
   it — "Available · In your portfolio" is a contradiction. */
.h-card__owned,
.prop__owned {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--gold); color: var(--obsidian);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600;
  padding: 5px 9px;
}
.h-card.is-owned .h-card__media { outline: 1px solid var(--gold-20); outline-offset: -1px; }

/* --- Searchable select ------------------------------------------------------
   The native <select> stays as the value holder and is hidden once enhanced,
   so the form submits identically with or without JavaScript. */
.combo { position: relative; }
.combo select.is-enhanced { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.combo__button {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.combo__button::after {
  content: ""; flex: none; width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .6;
}
.combo__button.is-placeholder { color: var(--ivory-45); }

.combo__panel {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--obsidian-2); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; max-height: 320px;
}
.combo__panel[hidden] { display: none; }

.combo__search {
  flex: none; width: 100%; padding: 12px 14px;
  background: var(--obsidian); border: 0; border-bottom: 1px solid var(--line);
  color: var(--ivory); font-family: var(--f-body); font-size: 15px;
}
.combo__search::placeholder { color: var(--ivory-45); }
.combo__search:focus { outline: none; border-bottom-color: var(--gold); }

.combo__list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; }
.combo__list.is-empty::after {
  content: "No country matches that.";
  display: block; padding: 14px; color: var(--ivory-45); font-size: 14px;
}

.combo__opt {
  padding: 10px 14px; cursor: pointer; font-size: 14.5px; color: var(--ivory-80);
  min-height: 40px; display: flex; align-items: center;
}
.combo__opt[hidden] { display: none; }
.combo__opt:hover, .combo__opt.is-active { background: rgba(249, 250, 251, .05); color: var(--ivory); }
.combo__opt[aria-selected="true"] { color: var(--gold); }

/* =========================================================================
   Handbook
   The long-form document: save bar, contents, benefit grid, the dashboard
   walkthrough and the questions.

   The walkthrough draws the dashboard out of divs rather than showing a
   screenshot of it. That is a translation decision before it is a design one:
   GTranslate rewrites text nodes and cannot touch a PNG, so an image of the
   interface would stay in English for every reader who is not reading in
   English — precisely the reader this section exists for.
   ========================================================================= */

/* ---- Save / print bar -------------------------------------------------- */
.dlbar {
  position: sticky; top: 0; z-index: 45;
  background: rgba(10, 10, 10, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.dlbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px 0; flex-wrap: wrap;
}
.dlbar__meta {
  margin: 0; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-60);
}
.dlbar__meta strong { color: var(--ivory); font-weight: 400; }
.dlbar__dot { margin: 0 8px; color: var(--ivory-45); }
.dlbar__act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dlbar__lang {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ivory-60);
}
.dlbar__lang b { color: var(--gold); font-weight: 400; }
.dlbar__lang .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  display: inline-block; flex: none;
}
@media (max-width: 640px) {
  .dlbar__in { justify-content: center; text-align: center; }
  .dlbar__lang { display: none; }
}

/* ---- Contents ---------------------------------------------------------- */
.toc { padding: clamp(48px, 7vw, 88px) 0; border-bottom: 1px solid var(--line); }
.toc__h {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.toc__h::before { content: ""; width: 24px; height: 1px; background: var(--gold); flex: none; }
.toc__lead { color: var(--ivory-60); font-size: 15px; line-height: 1.7; max-width: 60ch; margin: 0 0 32px; }

.toc__list {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: clamp(28px, 5vw, 72px);
}
@media (max-width: 780px) { .toc__list { columns: 1; } }

.toc__item { break-inside: avoid; margin-bottom: 4px; }
.toc__link {
  display: flex; gap: 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  color: var(--ivory-80); text-decoration: none; min-height: 24px;
  transition: color .25s var(--ease);
}
.toc__link:hover { color: var(--gold); }
.toc__n { font-size: 10px; letter-spacing: .16em; color: var(--ivory-45); flex: none; }
.toc__t { font-size: 15px; line-height: 1.45; }

.toc__sub { list-style: none; margin: 6px 0 14px; padding: 0 0 0 30px; display: flex; flex-wrap: wrap; gap: 6px; }
.toc__slink {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; min-height: 30px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ivory-60); text-decoration: none;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.toc__slink:hover { border-color: var(--gold-20); color: var(--gold); }
.toc__ico { width: 13px; height: 13px; flex: none; }
.toc__ico svg { width: 100%; height: 100%; display: block; }

/* ---- What you get ------------------------------------------------------ */
.bene { padding: clamp(64px, 9vw, 128px) 0; border-bottom: 1px solid var(--line); }
.bene__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: clamp(32px, 4vw, 56px);
}
@media (max-width: 980px) { .bene__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .bene__grid { grid-template-columns: minmax(0, 1fr); } }

.bene__c { background: var(--obsidian); padding: clamp(24px, 3vw, 36px); }
.bene__ico { display: block; width: 22px; height: 22px; color: var(--gold); margin-bottom: 18px; }
.bene__ico svg { width: 100%; height: 100%; display: block; }
.bene__t {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(19px, 2vw, 23px); line-height: 1.25; letter-spacing: -.01em;
  margin: 0 0 12px; color: var(--ivory);
}
.bene__b { color: var(--ivory-80); font-size: 14.5px; line-height: 1.72; }
.bene__b p { margin: 0 0 10px; }
.bene__b p:last-child { margin-bottom: 0; }
.bene__f {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ivory-45); line-height: 1.8;
}
.bene__close {
  margin: clamp(28px, 4vw, 44px) 0 0; max-width: 68ch;
  color: var(--ivory-60); font-size: 14px; line-height: 1.75;
}

/* ---- The walkthrough --------------------------------------------------- */
.guide { padding: clamp(64px, 9vw, 128px) 0; border-bottom: 1px solid var(--line); }
.guide__lead { max-width: 68ch; margin-top: 20px; }
.guide__lead p { color: var(--ivory-80); font-size: 16px; line-height: 1.78; margin: 0 0 14px; }
.guide__lead p:last-child { margin-bottom: 0; }

/* The drawn sidebar. Real text, so it translates with the rest of the page. */
.menumap { margin: clamp(36px, 5vw, 64px) 0 0; }
.menumap__cap {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ivory-45); margin-bottom: 14px;
}
.menumap__frame {
  border: 1px solid var(--line-strong); background: var(--obsidian-2);
  padding: 10px; max-width: 320px; border-radius: var(--radius);
}
.menumap__list { list-style: none; margin: 0; padding: 0; }
.menumap__link {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 12px; min-height: 42px;
  color: var(--ivory-80); text-decoration: none; font-size: 14px;
  border-left: 2px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.menumap__link:hover { background: var(--ivory-10); color: var(--ivory); border-left-color: var(--gold); }
.menumap__ico { width: 17px; height: 17px; flex: none; color: var(--gold); }
.menumap__ico svg { width: 100%; height: 100%; display: block; }
.menumap__note {
  margin: 14px 0 0; max-width: 52ch;
  color: var(--ivory-60); font-size: 13.5px; line-height: 1.7;
}
@media (min-width: 900px) {
  .menumap { display: grid; grid-template-columns: 320px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
  .menumap__cap { grid-column: 1 / -1; }
  .menumap__note { margin-top: 0; }
}

.guide__chapters { margin-top: clamp(44px, 6vw, 80px); }

.chap { padding: clamp(32px, 4vw, 52px) 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.chap:first-child { border-top: 0; padding-top: 0; }
.chap__head { display: flex; gap: 16px; align-items: flex-start; }
.chap__ico {
  width: 34px; height: 34px; flex: none; padding: 8px;
  border: 1px solid var(--gold-20); color: var(--gold); border-radius: var(--radius);
}
.chap__ico svg { width: 100%; height: 100%; display: block; }
.chap__title { min-width: 0; }
.chap__where {
  display: block; font-size: 9.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.chap__h {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(23px, 3vw, 31px); line-height: 1.15; letter-spacing: -.015em;
  margin: 0; color: var(--ivory);
}
.chap__intro { margin: 18px 0 0; max-width: 66ch; }
.chap__intro p { color: var(--ivory-80); font-size: 15.5px; line-height: 1.75; margin: 0 0 12px; }
.chap__intro p:last-child { margin-bottom: 0; }

.steps { list-style: none; margin: 26px 0 0; padding: 0; max-width: 68ch; counter-reset: step; }
.steps__i { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.steps__i:first-child { border-top: 0; padding-top: 0; }
.steps__n {
  flex: none; width: 26px; height: 26px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-size: 10.5px; letter-spacing: 0; color: var(--gold);
}
.steps__b { min-width: 0; }
.steps__b p { color: var(--ivory-80); font-size: 15px; line-height: 1.72; margin: 0 0 10px; }
.steps__b p:last-child { margin-bottom: 0; }
.steps__b strong { color: var(--ivory); font-weight: 500; }
.steps__chipline { margin: 10px 0 0 !important; }

/* Looks like the control it names, and is text — so the reader sees the same
   word here and on screen, in whichever language they are reading. */
.chip {
  display: inline-flex; align-items: center; min-height: 28px;
  padding: 5px 12px;
  border: 1px solid var(--gold-20); background: var(--gold-10);
  border-radius: var(--radius);
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-light);
}

.chap__tip {
  margin: 22px 0 0; padding: 16px 18px; max-width: 66ch;
  border-left: 2px solid var(--gold-20); background: var(--obsidian-2);
}
.chap__tip p { margin: 0; color: var(--ivory-80); font-size: 14px; line-height: 1.72; }
.chap__tip p + p { margin-top: 8px; }

/* ---- Questions --------------------------------------------------------- */
.faq { padding: clamp(64px, 9vw, 128px) 0; border-bottom: 1px solid var(--line); }
.faq__g { margin-top: clamp(32px, 4vw, 52px); max-width: 74ch; }
.faq__gh {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 6px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-strong);
}
.faq__q { border-bottom: 1px solid var(--line); }
.faq__s {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0; min-height: 44px; cursor: pointer;
  color: var(--ivory); font-size: 15.5px; line-height: 1.5;
  list-style: none;
}
.faq__s::-webkit-details-marker { display: none; }
.faq__s:hover { color: var(--gold); }
.faq__qt { min-width: 0; }
.faq__mark {
  flex: none; position: relative; width: 12px; height: 12px;
  transition: transform .3s var(--ease);
}
.faq__mark::before, .faq__mark::after {
  content: ""; position: absolute; background: var(--gold);
}
.faq__mark::before { inset: 5px 0 auto; height: 1px; }
.faq__mark::after  { inset: 0 5px auto; width: 1px; height: 12px; transition: opacity .3s var(--ease); }
.faq__q[open] .faq__mark::after { opacity: 0; }
.faq__a { padding: 0 0 20px; max-width: 66ch; }
.faq__a p { color: var(--ivory-80); font-size: 15px; line-height: 1.75; margin: 0 0 10px; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__more { margin: clamp(28px, 4vw, 44px) 0 0; }
.faq__more a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 24px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .faq__mark, .faq__mark::after { transition: none; }
}

/* ---- On paper ----------------------------------------------------------
   The save button is the browser's own print, so this is the PDF. Every
   answer opens, the chrome goes, and the type turns black on white.
   ------------------------------------------------------------------------ */
@media print {
  .dlbar, .toc__sub { display: none !important; }

  .bene, .guide, .faq, .toc { border-bottom: 1px solid #ddd; padding: 18pt 0; }
  .bene__grid { display: block; border: 0; background: none; }
  .bene__c { padding: 0 0 14pt; border-bottom: 1px solid #eee; background: none; }
  .bene__ico, .chap__ico, .menumap { display: none; }

  .toc__list { columns: 2; }
  .toc__link { border-bottom: 1px solid #eee; }

  .chap { page-break-inside: avoid; break-inside: avoid; border-top: 1px solid #ddd; }
  .steps__i { page-break-inside: avoid; break-inside: avoid; }
  .chip { border-color: #999; background: none; color: #000; }
  .chap__tip { background: none; border-left: 2px solid #999; }

  /* A closed question would print as a heading with no answer.
     Three levers because the browsers do not agree on one: older engines
     honour `display` on the child, Chrome 131+ hides the content through the
     ::details-content pseudo-element instead, and site.js opens them outright
     on beforeprint for everything else. */
  .faq__q > .faq__a { display: block !important; }
  .faq__q::details-content { content-visibility: visible !important; block-size: auto !important; }
  .faq__mark { display: none; }

  .bene__t, .chap__h, .faq__s, .steps__b strong { color: #000; }
  .bene__b, .chap__intro p, .steps__b p, .faq__a p, .toc__lead, .bene__close { color: #222; }
  .bene__f, .chap__where, .faq__gh, .toc__h { color: #555; }
}

/* =========================================================================
   Language switcher (GTranslate)

   The widget positions itself `position:fixed; top:0; right:8%` with an inline
   style, which drops it straight onto the header on every surface, and styles
   itself in `Arial` at `10pt`. Both are overridden here.

   Two constraints shape the placement:

     1. It goes top-right, and the list opens downward. Anchored at the bottom
        it crowded the investor dashboard's mobile tab bar, which is a row of
        primary navigation and has to be left alone.

     2. Where the top-right actually is differs by surface, because the chrome
        differs. The dashboard and the admin panel both have a free right-hand
        end to their header bar (measured, at 375px and 1280px), so it sits
        inside that band and reads as part of the chrome. The public nav's right
        end is taken — the account button on a desktop, the menu toggle on a
        phone — so there it sits just below the bar instead. Each sheet sets
        `--gt-top` for its own surface.

   Selectors deliberately avoid the widget's own `.gt_container--xxxxx` class:
   that suffix is generated and changes when the widget updates. `!important`
   is needed because the widget injects its stylesheet at run time, after ours,
   and writes position inline.
   ========================================================================= */

/* Below the nav: its right-hand end already holds the account button on a
   desktop and the menu toggle on a phone. */
:root {
  --gt-top: 92px;
}

/* Sign-in and registration share this sheet but render no nav, so there is no
   bar to sit under — the switcher moves up to where a header would have been. */
.auth-body {
  --gt-top: 24px;
}
.gt_switcher_wrapper {
  position: fixed !important;
  inset: var(--gt-top) clamp(16px, 3vw, 28px) auto auto !important;
  z-index: 120 !important;
}

/* The brand's own type, not the widget's Arial. */
.gt_switcher_wrapper .gt_switcher,
.gt_switcher_wrapper .gt_switcher a {
  font-family: var(--f-mono, ui-monospace, monospace) !important;
  font-size: 11px !important;
  letter-spacing: .04em;
}

.gt_switcher_wrapper .gt_switcher {
  overflow: visible !important;         /* or the upward list is clipped */
  border-radius: var(--radius, 2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.gt_switcher_wrapper .gt_switcher .gt_selected a {
  min-height: 34px;                     /* WCAG 2.2 SC 2.5.8 */
  display: flex !important;
  align-items: center;
  gap: 8px;
}

/* Opens upward, because it is anchored to the bottom of the viewport. */
.gt_switcher_wrapper .gt_switcher .gt_option {
  position: absolute !important;
  inset: 100% 0 auto 0 !important;
  max-height: min(60vh, 320px) !important;
  border-radius: var(--radius, 2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}

.gt_switcher_wrapper .gt_switcher .gt_option a {
  min-height: 30px;
  display: flex !important;
  align-items: center;
  gap: 8px;
}

/* Google wraps translated runs in <font>; it must inherit, not reset the type. */
font { font: inherit !important; color: inherit !important; }

/* Google's own top banner, and the hidden element that drives the engine. */
.skiptranslate,
#google_translate_element2 { display: none !important; }
body { top: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .gt_switcher_wrapper .gt_switcher .gt_option { transition: none !important; }
}

/* On a phone the full 163px chip is wider than the space a floating control
   should take, and it sat over page content. Collapsed to the flag and the
   chevron; the label is still in the accessibility tree, and the list still
   carries every name in full. */
@media (max-width: 640px) {
  .gt_switcher_wrapper .gt_switcher { width: auto !important; }

  .gt_switcher_wrapper .gt_switcher .gt_selected a {
    width: auto !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0 26px 0 10px !important;
    font-size: 0 !important;          /* hides the label, keeps the flag */
    justify-content: center;
  }

  /* The list stays readable at full width, anchored to the button's right edge. */
  .gt_switcher_wrapper .gt_switcher .gt_option {
    inset: 100% 0 auto auto !important;
    width: 184px !important;
  }
  .gt_switcher_wrapper .gt_switcher .gt_option a { font-size: 12px !important; }
}

/* The "back to English" control, attached inside the switcher by translate.js. */
.gt_switcher_wrapper .gt_reset {
  position: absolute;
  right: calc(100% + 8px);
  bottom: 0;
  min-width: 34px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line-strong, rgba(249, 250, 251, .18));
  background: var(--obsidian-2, #111110);
  color: var(--gold, #D4AF37);
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .14em;
  cursor: pointer;
  border-radius: var(--radius, 2px);
}
.gt_switcher_wrapper .gt_reset[hidden] { display: none; }
.gt_switcher_wrapper .gt_reset:hover { border-color: var(--gold, #D4AF37); }

@media print {
  .gt_switcher_wrapper { display: none !important; }
}