/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP 5 OVERRIDES — reset conflicts with Attia brand system
   Must appear before all brand rules so specificity stays clean.
   ═══════════════════════════════════════════════════════════════ *//* Container: brand-specific width — supersedes Bootstrap responsive max-widths */.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* Navbar: brand nav — reset Bootstrap's padding + flex defaults */.navbar {
  padding: 0;
  flex-wrap: nowrap;
}
/* Buttons: brand buttons extend .btn but override Bootstrap colours/radius */.btn {
  border-radius: var(--radius);
}
/* Links: brand resets Bootstrap's coloured link styles */a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: inherit;
}
/* Headings: brand uses Literata serif — override Bootstrap sans-serif stack */h1, h2, h3, h4, h5, h6 {
  font-family: "Literata", Georgia, serif;
}
/* ═══════════════════════════════════════════════════════════════
   ATTIA CAPITAL — Brand Design System
   ═══════════════════════════════════════════════════════════════ */:root {
  color-scheme: light;
  --navy: #0f1821;
  --navy-soft: #172433;
  --neutral: #e4e1db;
  --white: #ffffff;
  --light-gray: #f5f5f5;
  --ink: #17202a;
  --muted: #68727e;
  --line: rgba(15, 24, 33, 0.12);
  --surface: rgba(255, 255, 255, 0.9);
  --gold: #bcb39f;
  --gold-rgb: 188, 179, 159;
  --sage: #87947d;
  --shadow: 0 24px 70px rgba(15, 24, 33, 0.14);
  --radius: 8px;
  --header-height: 72px;
}
body.dark {
  color-scheme: dark;
  --neutral: #1d2834;
  --white: #0f1821;
  --light-gray: #151f2a;
  --ink: #f5f5f5;
  --muted: #b6c0ca;
  --line: rgba(255, 255, 255, 0.14);
  --surface: rgba(15, 24, 33, 0.92);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  line-height: 1.65;
  transition: background 260ms ease, color 260ms ease;
}
body.menu-open {
  overflow: hidden;
}
img,
svg {
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Must out-rank .nav-overlay (z-index below): .nav-shell (the mobile
     drawer) lives *inside* this header in the DOM (it's also the desktop
     flex-centered nav), so its own z-index is only compared within this
     stacking context — if the header itself ranked below the overlay,
     the overlay would visually cover the drawer and swallow every click
     inside it even though .nav-shell's local z-index is higher. */
  z-index: 200;
  height: var(--header-height);
  width: 100%;
  margin: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Header stays fixed and visible at all times — no hide-on-scroll.
     Only its surface (background/blur/shadow) transitions on scroll. */
  transition:
    background 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    backdrop-filter 260ms ease;
}
/* ── Scrolled: light mode — solid surface, no hide/reveal ── */.site-header.scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(15, 24, 33, 0.09);
  box-shadow: 0 8px 30px rgba(15, 24, 33, 0.18);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* ── Scrolled: dark mode ── */body.dark .site-header.scrolled {
  background: rgba(15, 24, 33, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 30px rgba(15, 24, 33, 0.18);
}
.navbar {
  min-height: var(--header-height);
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 150px;
  height: 36px;
  flex: 0 0 auto;
}
.brand-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity 220ms ease, transform 220ms ease;
}
.brand-logo-negative {
  opacity: 0;
}
/* Transparent header: always white logo (over dark hero) */.site-header:not(.scrolled) .brand-logo-positive {
  opacity: 0;
}
.site-header:not(.scrolled) .brand-logo-negative {
  opacity: 1;
}
/* Scrolled dark mode: white logo */body.dark .site-header.scrolled .brand-logo-positive {
  opacity: 0;
}
body.dark .site-header.scrolled .brand-logo-negative {
  opacity: 1;
}
/* Mobile menu open: respect dark mode */body.dark.menu-open .site-header .brand-logo-positive {
  opacity: 0;
}
body.dark.menu-open .site-header .brand-logo-negative {
  opacity: 1;
}
.brand:hover .brand-logo,
.brand:focus-visible .brand-logo {
  transform: translateY(-1px);
}
.nav-shell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex: 1;
  min-width: 0; /* allow flex children to shrink */
}
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-link {
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active {
  background: color-mix(in srgb, var(--neutral) 55%, transparent);
}

.nav-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* ── Transparent header: white nav text ── */.site-header:not(.scrolled) .nav-link {
  color: rgba(255, 255, 255, 0.82);
}
.site-header:not(.scrolled) .nav-link:hover,
.site-header:not(.scrolled) .nav-link:focus-visible,
.site-header:not(.scrolled) .nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}
/* ── INVESTOR LOGIN button ── */.login-btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(188, 179, 159, 0.18);
  color: #bcb39f;
  border: 1.5px solid rgba(188, 179, 159, 0.55);
  white-space: nowrap;
  cursor: pointer;
  margin-left: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.login-btn:hover {
  background: rgba(188, 179, 159, 0.30);
  border-color: rgba(188, 179, 159, 0.85);
  color: #bcb39f;
  box-shadow: 0 0 18px rgba(188, 179, 159, 0.22);
}
/* Scrolled dark mode */body.dark .site-header.scrolled .login-btn {
  background: rgba(188, 179, 159, 0.15);
  border-color: rgba(188, 179, 159, 0.50);
  color: #bcb39f;
}
body.dark .site-header.scrolled .login-btn:hover {
  background: rgba(188, 179, 159, 0.28);
  border-color: rgba(188, 179, 159, 0.80);
  color: #bcb39f;
  box-shadow: 0 0 18px rgba(188, 179, 159, 0.25);
}
/* On transparent header (over hero image) */.site-header:not(.scrolled) .login-btn {
  background: rgba(188, 179, 159, 0.20);
  border-color: rgba(188, 179, 159, 0.65);
  color: #bcb39f;
}
.site-header:not(.scrolled) .login-btn:hover {
  background: rgba(188, 179, 159, 0.35);
  border-color: rgba(188, 179, 159, 0.90);
  color: #bcb39f;
  box-shadow: 0 0 20px rgba(188, 179, 159, 0.30);
}
/* ── Section eyebrow (small ochre label above headings) ── */.eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* ── Simple dropdown (replaces the old mega menu) ──────────────────────
   No editorial intro panel, no multi-column grid, no large floating
   surface — just a compact list under the trigger. Hover-bridge keeps
   the small gap between trigger and panel hoverable on desktop. ── */.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: 14px;
  z-index: 98;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 230px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 99;
}
.nav-dropdown--narrow {
  min-width: 260px;
}
/* Dropdown only controlled by JS .open class — no CSS :hover conflict */.has-dropdown.open .nav-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: transparent;
  transition: background 160ms ease, color 160ms ease;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: color-mix(in srgb, var(--neutral) 55%, transparent);
  color: var(--navy);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
body.dark .nav-dropdown a:hover,
body.dark .nav-dropdown a:focus-visible {
  color: #ffffff;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-button,
.lang-toggle,
.nav-toggle {
  border: 1px solid rgba(15, 24, 33, 0.18);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 180ms ease, box-shadow 180ms ease;
}
body.dark .icon-button,
body.dark .lang-toggle,
body.dark .nav-toggle {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(15, 24, 33, 0.85);
  color: rgba(255, 255, 255, 0.9);
}
/* Transparent header: ghost buttons */.site-header:not(.scrolled) .icon-button,
.site-header:not(.scrolled) .lang-toggle,
.site-header:not(.scrolled) .nav-toggle {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.site-header:not(.scrolled) .icon-button:hover,
.site-header:not(.scrolled) .lang-toggle:hover,
.site-header:not(.scrolled) .nav-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.65);
}
.icon-button,
.lang-toggle {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
}
.icon-button {
  grid-template-columns: 1fr;
  overflow: hidden;
}
.icon-button span {
  grid-row: 1;
  grid-column: 1;
  transition: transform 220ms ease, opacity 220ms ease;
}
body.dark .sun {
  opacity: 0;
  transform: translateY(-16px);
}
body:not(.dark) .moon {
  opacity: 0;
  transform: translateY(16px);
}
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #ffffff;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 14px;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 24, 33, 0.2);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.button-ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  backdrop-filter: blur(10px);
}
.hero-primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--navy);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}
.hero-primary::after {
  content: "→";
  font-size: 20px;
  line-height: 1;
}
.hero-primary:hover,
.hero-primary:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #0f1821;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36);
}
/* Hamburger — plain/borderless like the reference, no hover lift or ring;
   only a subtle opacity change on hover/focus. Exact geometry (26px box,
   5px line gap) is set in the responsive block where it becomes visible. */.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 26px;
  padding: 4px;
  position: relative;
  overflow: hidden;
  transition: opacity 180ms ease;
}
.nav-toggle span {
  width: 100%;
  height: 2px;
  background: currentColor;
  display: block;
  flex-shrink: 0;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, width 260ms ease;
}
.nav-toggle::before {
  display: none; /* remove gold ring */
}
.nav-toggle:hover {
  opacity: 0.7;
}

.nav-toggle:focus-visible {
  opacity: 0.7;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* ─── HERO ─── */.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 150px 0 84px;
  color: #ffffff;
}
.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
}
.hero-media {
  background: var(--navy);
  overflow: hidden;
}
.hero-bg-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 30%;
  /* Ken Burns: subtle infinite drift-and-zoom, transform-only for performance.
     `alternate` reverses each cycle so the loop never jumps. */
  animation: heroKenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroKenBurns {
  from {
    transform: scale(1.02) translate(0, 0);
  }
  to {
    transform: scale(1.07) translate(-1.2%, -0.8%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-img {
    animation: none;
    transform: scale(1.02);
  }
}
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(10, 16, 24, 0.88), rgba(10, 16, 24, 0.55), rgba(10, 16, 24, 0.18)),
    linear-gradient(0deg, rgba(10, 16, 24, 0.65), transparent 55%),
    linear-gradient(180deg, rgba(10, 16, 24, 0.35), transparent 30%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 840px;
  margin-left: max(20px, calc((100vw - 1180px) / 2));
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 24, 33, 0.38);
  color: #bcb39f;
  backdrop-filter: blur(12px);
}
h1,
h2,
h3,
h4 {
  font-family: "Literata", Georgia, serif;
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  letter-spacing: 0;
}
h1 {
  font-size: clamp(54px, 7.6vw, 104px);
  max-width: 980px;
  margin-top: 18px;
}
h2 {
  font-size: clamp(36px, 5vw, 68px);
}
h3 {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.15;
}
h4 {
  font-size: 18px;
  margin-top: 26px;
}
p {
  margin: 0;
}
.hero p:not(.eyebrow) {
  max-width: 660px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(17px, 2vw, 22px);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
/* ─── TRUST BAND ─── */.trust-band {
  background: var(--navy);
  color: #ffffff;
  padding: clamp(44px, 5.5vw, 72px) 0;
}
.trust-statement {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
.trust-statement strong {
  color: var(--gold);
  font-weight: 400;
  font-style: normal;
}
@media (max-width: 860px) {
  .trust-statement {
    white-space: normal;
  }
}
/* ─── SECTIONS ─── */.content-section,
.contact-section {
  padding: clamp(80px, 10vw, 150px) 0;
}
/* ─── WHO WE ARE ─── */.who-we-are-section {
  background: var(--light-gray);
  color: var(--ink);
  overflow: hidden;
  transition: background 260ms ease, color 260ms ease;
}
body.dark .who-we-are-section {
  background: var(--navy-soft);
  color: #ffffff;
}
/* 2-column layout: text left, image right (no .container wrapper) */.wwa-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(500px, 60vw, 780px);
}
/* Text column — internal padding mirrors the container */.wwa-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: clamp(60px, 8vw, 120px) clamp(32px, 5vw, 80px) clamp(60px, 8vw, 120px) max(20px, calc((100vw - 1180px) / 2 + 20px));
}
.wwa-text .eyebrow {
  margin-bottom: 16px;
}
.who-we-are-section h2 {
  color: var(--ink);
  margin: 0 0 20px;
  transition: color 260ms ease;
}
body.dark .who-we-are-section h2 {
  color: #ffffff;
}
.who-we-are-lead {
  color: var(--muted);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
  margin: 0 0 36px;
  transition: color 260ms ease;
}
body.dark .who-we-are-lead {
  color: rgba(255, 255, 255, 0.58);
}
.wwa-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap 200ms ease;
}
.wwa-cta:hover {
  gap: 12px;
}
/* Image column */.wwa-image {
  position: relative;
  overflow: hidden;
}
.wwa-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 600ms ease;
}
.wwa-image:hover img {
  transform: scale(1.02);
}
/* ── Floating project card on wwa-image ── */.wwa-project-card {
  position: absolute;
  bottom: clamp(24px, 4vw, 40px);
  left: clamp(20px, 4vw, 40px);
  z-index: 2;
  background: rgba(15, 24, 33, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(188, 179, 159, 0.32);
  border-radius: 10px;
  padding: 18px 22px 20px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 210px;
  transition:
    background 280ms ease,
    border-color 300ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 320ms ease;
}
.wwa-project-card:hover {
  background: rgba(15, 24, 33, 0.84);
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 24, 33, 0.45);
}
/* Pulsing gold indicator dot */.wwa-project-card::before {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 11px;
  height: 11px;
  background: var(--gold);
  border-radius: 50%;
  border: 2px solid rgba(15, 24, 33, 0.7);
  animation: wwa-pulse 2.8s ease-in-out infinite;
}
@keyframes wwa-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.35); opacity: 0.65; }
}
.wwa-pc-eyebrow {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: "Plus Jakarta Sans", sans-serif;
  margin-bottom: 7px;
}
.wwa-pc-title {
  display: block;
  font-family: "Literata", Georgia, serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.wwa-pc-location {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.50);
  font-family: "Plus Jakarta Sans", sans-serif;
  margin-bottom: 14px;
}
.wwa-pc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  font-family: "Plus Jakarta Sans", sans-serif;
  transition: color 220ms ease, gap 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wwa-project-card:hover .wwa-pc-cta {
  color: var(--gold);
  gap: 13px;
}
.wwa-pc-cta svg {
  flex-shrink: 0;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wwa-project-card:hover .wwa-pc-cta svg {
  transform: translateX(3px);
}
/* Responsive */@media (max-width: 860px) {
  .wwa-layout {
    grid-template-columns: 1fr;
  }

  .wwa-text {
    padding: clamp(48px, 8vw, 80px) 20px;
  }

  .wwa-image {
    min-height: 380px;
    position: relative;
  }

  .wwa-image img {
    position: absolute;
  }

  .wwa-project-card {
    bottom: 20px;
    left: 20px;
    max-width: 190px;
    padding: 14px 18px 16px;
  }

  .wwa-project-card:hover {
    transform: none;
  }
}
/* Legacy pillar-link used on other sections */.pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: auto;
  transition: gap 200ms ease, opacity 200ms ease;
  opacity: 0.8;
}
.pillar-link:hover {
  gap: 12px;
  opacity: 1;
}
/* ─── LEADERSHIP (Blackstone-style) ─── */.leadership-section {
  background: var(--white);
  color: var(--ink);
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: clamp(60px, 8vw, 100px);
  border-top: 1px solid var(--line);
  transition: background 260ms ease, color 260ms ease, border-color 260ms ease;
}
body.dark .leadership-section {
  background: var(--navy);
  color: #ffffff;
  border-top-color: rgba(255, 255, 255, 0.08);
}
/* ─── INVESTMENT STRATEGIES (home section) ─── */.is-section {
  background: #0E141B;
  color: #ffffff;
  padding: clamp(80px, 10vw, 130px) 0;
  transition: background 260ms ease;
}
.is-header {
  margin-bottom: clamp(48px, 6vw, 72px);
}
.is-header .eyebrow {
  color: var(--gold);
  margin-bottom: 16px;
}
.is-header h2 {
  color: #ffffff;
  max-width: none;
  white-space: nowrap;
  margin: 0;
  font-size: clamp(28px, 3.8vw, 56px);
}
/* 2-column grid */.is-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
/* Card */.is-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 320ms ease, box-shadow 320ms ease;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}
/* Hover: background stays fixed — only a subtle gold border glow */.is-card:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent),
              0 14px 38px rgba(0, 0, 0, 0.35);
}
/* Image panel */.is-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.is-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.82) brightness(0.88);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 400ms ease;
}
.is-card:hover .is-card-image img {
  transform: scale(1.05);
  filter: saturate(0.9) brightness(0.94);
}
/* Gradient overlay at image bottom */.is-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    transparent 40%,
    rgba(15, 24, 33, 0.55) 100%);
  pointer-events: none;
}
/* Card body — all text content */.is-card-body {
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Card top: icon + title block */.is-card-top {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.is-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: rgba(188, 179, 159, 0.07);
  border: 1px solid rgba(188, 179, 159, 0.22);
  border-radius: var(--radius);
  margin-top: 2px;
}
.is-card-title-block h3 {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  color: #ffffff;
  margin: 0 0 10px;
  line-height: 1.25;
}
.is-card-title-block p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
  margin: 0;
}
/* Attribute rows *//* CTA link */.is-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  overflow: hidden;
  transition: opacity 220ms ease;
}
.is-link:hover {
  opacity: 0.82;
}
.is-arrow {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  transform: translateX(0);
  transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
.is-link:hover .is-arrow {
  transform: translateX(7px);
}
@media (max-width: 768px) {
  .is-grid {
    grid-template-columns: 1fr;
  }

  .is-card {
    border-color: rgba(255, 255, 255, 0.08);
  }

  .is-card:last-child {
    border-bottom: none;
  }

  
}
/* ── Carousel ── */.lc-carousel {
  width: min(1180px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  aspect-ratio: 16 / 8.5;
  position: relative;
  background: #0d1118;
  margin-bottom: clamp(40px, 5vw, 60px);
  border-radius: 4px;
}
.lc-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lc-slide {
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.lc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
/* Miami slide — pan down to reveal water + bridge */.lc-slide-miami {
  position: relative;
}
.lc-slide-miami img {
  object-position: center 62%;
}
/* Medellín office slide */.lc-slide-medellin {
  position: relative;
}
.lc-slide-medellin img {
  object-position: center 100%;
}
/* Location tag — lower-right overlay */.lc-location-tag {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  background: rgba(8, 13, 22, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.88);
  text-transform: uppercase;
  pointer-events: none;
}
.lc-location-tag em {
  font-style: normal;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.52);
  letter-spacing: 0.04em;
  text-transform: none;
}
.lc-location-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(188, 179, 159, 0.6);
}
/* ── Section eyebrow ── *//* ── Header row: eyebrow + nav controls ── */.lc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.lc-eyebrow {
  margin-bottom: 0;
}
/* ── 50/50 text row ── */.lc-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.lc-heading h2 {
  font-family: "Literata", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: clamp(28px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  transition: color 260ms ease;
}
body.dark .lc-heading h2 {
  color: #ffffff;
}
.lc-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 6px;
}
.lc-body p {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.72;
  color: var(--muted);
  margin: 0;
}
.lc-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap 220ms ease;
}
.lc-profile-link:hover {
  gap: 12px;
}
/* ── Controls ── */.lc-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
  outline: none;
}
body.dark .lc-arrow {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
}
.lc-arrow:hover:not(:disabled) {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}
body.dark .lc-arrow:hover:not(:disabled) {
  background: var(--gold);
  border-color: var(--gold);
  color: #ffffff;
}
.lc-arrow:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb, 188, 179, 159), 0.4);
  border-color: var(--gold);
}
.lc-arrow:active:not(:disabled) {
  transform: scale(0.93);
}
.lc-arrow:disabled,
.lc-arrow[aria-disabled="true"] {
  opacity: 0.22;
  cursor: not-allowed;
  pointer-events: none;
}
.lc-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease, width 220ms ease;
  position: relative;
}
.lc-dot::before {
  content: "";
  position: absolute;
  inset: -6px;
}
body.dark .lc-dot {
  background: rgba(255, 255, 255, 0.25);
}
.lc-dot.active {
  background: var(--gold);
  transform: scale(1.45);
}
.lc-dot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
@media (max-width: 768px) {
  .lc-carousel {
    aspect-ratio: 4 / 3;
  }

  .lc-header {
    flex-wrap: wrap;
    gap: 16px;
  }

  .lc-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .lc-arrow {
    width: 40px;
    height: 40px;
  }
}
.muted {
  background: var(--light-gray);
}
.split-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
}
.section-heading {
  position: sticky;
  top: 120px;
}
.section-heading .eyebrow,
.section-heading h2 {
  margin-bottom: 18px;
}
.section-heading.narrow {
  position: static;
  max-width: 850px;
  margin-bottom: 48px;
}
.stack {
  display: grid;
  gap: 34px;
}
.text-block {
  padding-top: 6px;
}
.text-block h3 {
  margin-bottom: 18px;
}
.text-block p + p {
  margin-top: 18px;
}
/* ─── THESIS CITY IMAGE ─── */.thesis-city-image {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(10, 18, 30, 0.10);
}
.thesis-city-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 60%;
}
/* ─── FIRM OVERVIEW BLOCKS ─── */.firm-blocks {
  display: grid;
  gap: 0;
}
.firm-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.firm-block:last-child {
  border-bottom: 1px solid var(--line);
}
.firm-block-num {
  display: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-family: "Plus Jakarta Sans", sans-serif;
  padding-top: 7px;
  line-height: 1;
}
.firm-block-body h3 {
  font-size: clamp(18px, 1.8vw, 22px);
  font-family: "Literata", Georgia, serif;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.3;
}
.firm-block-body p {
  color: var(--muted);
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}
.firm-block-body p + p {
  margin-top: 14px;
}
.text-block p,
.leader-card p,
.location-panel p,
.contact-copy p {
  color: var(--muted);
}
.card-grid,
.leader-grid,
.process-grid {
  display: grid;
  gap: 22px;
}
.card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.leader-card,
.location-panel,
.portfolio-assets {
  border-top: 1px solid var(--line);
}
/* ─── LEADER CARDS ─── */.leader-grid {
  grid-template-columns: 1fr;
}
.leader-card {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  padding: 40px 0;
  align-items: stretch;
}
.leader-photo {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Stretches with the grid row so the photo ends where the text ends */
  height: 100%;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  border-radius: 6px;
  box-shadow: 0 22px 52px rgba(15, 24, 33, 0.12);
  filter: grayscale(1) contrast(0.98) brightness(0.94);
  isolation: isolate;
}
.leader-photo::before,
.leader-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.leader-photo::before {
  z-index: 1;
}
.leader-photo::after {
  z-index: 2;
}
body.dark .leader-photo {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 -54px 82px rgba(15, 24, 33, 0.34),
    0 18px 46px rgba(0, 0, 0, 0.26);
}
.photo-one {
  background-image:
    linear-gradient(90deg, rgba(15, 24, 33, 0.1), transparent 18%, transparent 82%, rgba(15, 24, 33, 0.1)),
    url("../images/jonatan-lustgarten.jpg");
  background-image:
    linear-gradient(90deg, rgba(15, 24, 33, 0.1), transparent 18%, transparent 82%, rgba(15, 24, 33, 0.1)),
    -webkit-image-set(url("../images/jonatan-lustgarten.avif") type("image/avif") 1x, url("../images/jonatan-lustgarten.webp") type("image/webp") 1x, url("../images/jonatan-lustgarten.jpg") type("image/jpeg") 1x);
  background-image:
    linear-gradient(90deg, rgba(15, 24, 33, 0.1), transparent 18%, transparent 82%, rgba(15, 24, 33, 0.1)),
    image-set(url("../images/jonatan-lustgarten.avif") type("image/avif") 1x, url("../images/jonatan-lustgarten.webp") type("image/webp") 1x, url("../images/jonatan-lustgarten.jpg") type("image/jpeg") 1x);
  background-position: center 30%;
}
.photo-two {
  background-image:
    linear-gradient(90deg, rgba(15, 24, 33, 0.1), transparent 18%, transparent 82%, rgba(15, 24, 33, 0.1)),
    url("../images/bernardo-asuaje.jpg");
  background-image:
    linear-gradient(90deg, rgba(15, 24, 33, 0.1), transparent 18%, transparent 82%, rgba(15, 24, 33, 0.1)),
    -webkit-image-set(url("../images/bernardo-asuaje.avif") type("image/avif") 1x, url("../images/bernardo-asuaje.webp") type("image/webp") 1x, url("../images/bernardo-asuaje.jpg") type("image/jpeg") 1x);
  background-image:
    linear-gradient(90deg, rgba(15, 24, 33, 0.1), transparent 18%, transparent 82%, rgba(15, 24, 33, 0.1)),
    image-set(url("../images/bernardo-asuaje.avif") type("image/avif") 1x, url("../images/bernardo-asuaje.webp") type("image/webp") 1x, url("../images/bernardo-asuaje.jpg") type("image/jpeg") 1x);
  background-position: center 40%;
}
.role {
  color: var(--gold);
  font-weight: 800;
  margin: 8px 0 18px;
}
/* ── Managing Partners — redesigned card interior ── */.leader-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.leader-header {
  margin-bottom: 18px;
}
.leader-header h3 {
  margin: 0 0 8px;
}
.leader-role {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 100px;
  padding: 4px 12px;
}
.leader-bio {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 22px;
  max-width: 640px;
}
/* Highlight bullets *//* Credentials block */.leader-credentials {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.leader-cred-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.leader-cred-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leader-cred-list li {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
}
.leader-cred-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: color-mix(in srgb, var(--gold) 60%, transparent);
  font-size: 11px;
  top: 2px;
}
/* ─── NAVY BAND ─── */.navy-band {
  background: var(--navy);
  color: #ffffff;
}
.navy-band .section-heading h2,
.navy-band .process-step h3 {
  color: #ffffff;
}
.navy-band .process-step p {
  color: rgba(255, 255, 255, 0.72);
}
/* Navy band overrides for process steps (white borders on dark background) */.navy-band .process-step {
  border-top-color: rgba(255, 255, 255, 0.22);
}
.navy-band .process-step:hover {
  border-top-color: rgba(255, 255, 255, 0.55);
}
.process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.process-step {
  padding: 28px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.process-step span {
  display: inline-flex;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 22px;
}
/* ─── LOCATION ─── */.location-panel {
  position: relative;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--white) 86%, transparent), color-mix(in srgb, var(--light-gray) 92%, transparent));
  box-shadow: 0 22px 58px rgba(15, 24, 33, 0.08);
  overflow: hidden;
}
body.dark .location-panel {
  background:
    radial-gradient(circle at top right, rgba(188, 179, 159, 0.14), transparent 38%),
    color-mix(in srgb, var(--light-gray) 76%, var(--navy));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
}
.location-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%);
  opacity: 0.5;
}
.location-panel > p {
  position: relative;
  z-index: 1;
}
.location-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 32px;
  position: relative;
  z-index: 1;
}
.location-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 104px;
  padding: 20px 22px;
  position: relative;
}
.location-flag {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.location-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.2)),
    color-mix(in srgb, var(--white) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 14px 30px rgba(15, 24, 33, 0.05);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
body.dark .location-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 34px rgba(0, 0, 0, 0.2);
}
.location-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--gold) 62%, var(--line));
  box-shadow: 0 22px 46px rgba(15, 24, 33, 0.14);
}
.location-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-grid;
  place-items: center;
  background: var(--navy);
  color: #ffffff;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, transparent);
  box-shadow: 0 14px 30px rgba(15, 24, 33, 0.16);
}
.location-icon svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}
.location-card h3 {
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 4px;
  line-height: 1;
  overflow-wrap: anywhere;
}
.location-card p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* ─── PORTFOLIO ─── */dl {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
}
dt {
  color: var(--ink);
  font-weight: 800;
  margin-top: 12px;
}
dd {
  margin: 0;
  color: var(--muted);
}
.portfolio-assets {
  padding-top: 28px;
}
.portfolio-assets h3 {
  margin-bottom: 28px;
}
/* ─── EXIT FEATURE — Premium case study block ─── */.exit-feature {
  margin-top: clamp(64px, 7vw, 96px);
  padding-top: clamp(52px, 5.5vw, 76px);
  border-top: 1px solid var(--line);
}
/* Label row: eyebrow + intro sentence */.exit-feature-label {
  display: flex;
  align-items: baseline;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.exit-feature-label .eyebrow {
  white-space: nowrap;
}
.exit-feature-intro {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
  max-width: 440px;
}
/* Two-column layout: image | content */.exit-feature-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5.5vw, 80px);
  align-items: start;
}
/* Image panel */.exit-feature-image {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.exit-feature-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  filter: saturate(0.88) contrast(0.97);
  transition: transform 560ms ease;
}
.exit-feature-image:hover img {
  transform: scale(1.04);
}
/* Content panel */.exit-feature-content {
  display: flex;
  flex-direction: column;
}
/* Meta: badge + location */.exit-feature-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.exit-badge {
  display: inline-block;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 100px;
  font-family: "Plus Jakarta Sans", sans-serif;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}
.exit-location {
  font-size: 13px;
  color: var(--muted);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
}
/* Project title */.exit-feature-title {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.2;
}
/* Description */.exit-feature-desc {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.74;
  margin: 0 0 24px;
}
/* Metrics table */.exit-metrics {
  border-top: 1px solid var(--line);
  margin-bottom: 24px;
}
.exit-metric {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.exit-metric-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: "Plus Jakarta Sans", sans-serif;
  flex-shrink: 0;
  line-height: 1.5;
}
.exit-metric-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.5;
}
.exit-metric-text {
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
}
.exit-metric-highlight {
  color: var(--gold);
  font-weight: 700;
}
/* Closing note — left-border quote style */.exit-feature-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
  margin: 0;
  font-style: italic;
  padding-left: 16px;
  border-left: 2px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
/* ── Exit feature responsive ── */@media (max-width: 860px) {
  .exit-feature-body {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .exit-feature-label {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
}
@media (max-width: 560px) {
  .exit-feature {
    margin-top: 48px;
    padding-top: 40px;
  }

  .exit-metric {
    grid-template-columns: 90px 1fr;
    gap: 14px;
  }
}
/* ── Featured asset — flagship card above the grid ── */.featured-asset {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-top: 18px;
  margin-bottom: 22px;
  transition: box-shadow 240ms ease, border-color 240ms ease;
}
.featured-asset:hover {
  box-shadow: 0 16px 44px rgba(15, 24, 33, 0.1);
  border-color: color-mix(in srgb, var(--gold) 62%, var(--line));
}
.featured-asset-media {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  align-self: stretch;
}
.featured-asset-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  display: block;
  filter: saturate(0.95) contrast(0.99);
  transition: transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.featured-asset:hover .featured-asset-media img {
  transform: scale(1.04);
}
.featured-asset-body {
  padding: clamp(28px, 3.2vw, 48px) clamp(28px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.featured-asset-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--navy);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.featured-asset-body h4 {
  font-size: clamp(26px, 2.6vw, 36px);
  margin-bottom: 8px;
}
.featured-asset-desc {
  font-size: clamp(14px, 1.3vw, 15.5px);
  line-height: 1.8;
  color: var(--muted);
  margin-top: 18px;
}
.featured-asset-meta {
  width: 100%;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.btn-website {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid rgba(15, 24, 33, 0.22);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-website:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
body.dark .btn-website {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.75);
}
body.dark .btn-website:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
body.dark .featured-asset {
  background: var(--navy-soft);
}
@media (max-width: 820px) {
  .featured-asset {
    grid-template-columns: 1fr;
  }

  .featured-asset-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}
.asset-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.asset-card {
  min-height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.asset-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--gold) 62%, var(--line));
}
.asset-visual {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
  filter: saturate(0.92) contrast(0.98);
}
.asset-visual-one {
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), url("../images/portfolio/the-grand.jpg");
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), -webkit-image-set(url("../images/portfolio/the-grand.webp") type("image/webp") 1x, url("../images/portfolio/the-grand.jpg") type("image/jpeg") 1x);
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), image-set(url("../images/portfolio/the-grand.webp") type("image/webp") 1x, url("../images/portfolio/the-grand.jpg") type("image/jpeg") 1x);
  background-position: center 50%;
}
.asset-visual-two {
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), url("../images/villa-medeci.jpg");
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), -webkit-image-set(url("../images/villa-medeci.webp") type("image/webp") 1x, url("../images/villa-medeci.jpg") type("image/jpeg") 1x);
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), image-set(url("../images/villa-medeci.webp") type("image/webp") 1x, url("../images/villa-medeci.jpg") type("image/jpeg") 1x);
  background-position: center 50%;
}
.asset-visual-three {
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), url("../images/portfolio/crawford.jpg");
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), -webkit-image-set(url("../images/portfolio/crawford.webp") type("image/webp") 1x, url("../images/portfolio/crawford.jpg") type("image/jpeg") 1x);
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), image-set(url("../images/portfolio/crawford.webp") type("image/webp") 1x, url("../images/portfolio/crawford.jpg") type("image/jpeg") 1x);
  background-position: center 48%;
}
.asset-visual-four {
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), url("../images/portfolio/oaklawn.jpg");
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), -webkit-image-set(url("../images/portfolio/oaklawn.webp") type("image/webp") 1x, url("../images/portfolio/oaklawn.jpg") type("image/jpeg") 1x);
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), image-set(url("../images/portfolio/oaklawn.webp") type("image/webp") 1x, url("../images/portfolio/oaklawn.jpg") type("image/jpeg") 1x);
  background-position: center 50%;
}
.asset-visual-five {
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), url("../images/portfolio/canopy.jpg");
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), -webkit-image-set(url("../images/portfolio/canopy.webp") type("image/webp") 1x, url("../images/portfolio/canopy.jpg") type("image/jpeg") 1x);
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), image-set(url("../images/portfolio/canopy.webp") type("image/webp") 1x, url("../images/portfolio/canopy.jpg") type("image/jpeg") 1x);
  background-position: center 45%;
}
.asset-visual-six {
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), url("../images/portfolio/riverbend.jpg");
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), -webkit-image-set(url("../images/portfolio/riverbend.webp") type("image/webp") 1x, url("../images/portfolio/riverbend.jpg") type("image/jpeg") 1x);
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), image-set(url("../images/portfolio/riverbend.webp") type("image/webp") 1x, url("../images/portfolio/riverbend.jpg") type("image/jpeg") 1x);
  background-position: center 48%;
}
.asset-visual-seven {
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), url("../images/casa-hills.jpg");
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), -webkit-image-set(url("../images/casa-hills.webp") type("image/webp") 1x, url("../images/casa-hills.jpg") type("image/jpeg") 1x);
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), image-set(url("../images/casa-hills.webp") type("image/webp") 1x, url("../images/casa-hills.jpg") type("image/jpeg") 1x);
  background-position: center 50%;
}
.asset-visual-eight {
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), url("../images/pershing.jpg");
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), -webkit-image-set(url("../images/pershing.webp") type("image/webp") 1x, url("../images/pershing.jpg") type("image/jpeg") 1x);
  background-image: linear-gradient(rgba(15, 24, 33, 0.08), rgba(15, 24, 33, 0.08)), image-set(url("../images/pershing.webp") type("image/webp") 1x, url("../images/pershing.jpg") type("image/jpeg") 1x);
  background-position: center 50%;
}
.asset-content {
  padding: 24px;
}
.asset-content h4 {
  font-size: clamp(21px, 2vw, 27px);
  margin-bottom: 8px;
}
.asset-location {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.asset-location::before {
  content: "◎";
  margin-right: 6px;
  color: var(--gold);
}
.asset-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.asset-meta span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.asset-meta em {
  flex-shrink: 0;
  padding: 7px 10px;
  background: var(--light-gray);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
/* ─── CONTACT ─── */.contact-section {
  background: var(--navy);
  color: #ffffff;
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 7vw, 90px);
  align-items: start;
}
.contact-copy h2 {
  margin: 18px 0 20px;
}
.contact-copy p,
.contact-copy .contact-details span {
  color: rgba(255, 255, 255, 0.74);
}
.contact-details {
  margin-top: 42px;
  display: grid;
  gap: 12px;
}
.contact-details h3 {
  font-size: 22px;
  margin-top: 18px;
}
.contact-details a {
  color: #ffffff;
  font-weight: 800;
}
.contact-form {
  display: grid;
  gap: 18px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
}
.contact-form label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-radius: var(--radius);
  padding: 14px 15px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.form-status {
  min-height: 24px;
  color: #ffffff;
  font-weight: 800;
}
/* ─── FOOTER ─── *//* ═══════════════════════════════════════════════════════════════
   PREMIUM FOOTER
   ═══════════════════════════════════════════════════════════════ */.site-footer {
  background: #0c151d;
  color: rgba(255, 255, 255, 0.60);
  padding-top: clamp(3.5rem, 7vw, 5rem);
  border-top: none;
}
/* ── Main 3-col grid (brand | nav | contact) ── */.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 3rem;
  align-items: start;
}
/* ── Brand block ── */.footer-logo {
  display: block;
  width: auto;
  height: 28px;
  margin-bottom: 1.5rem;
}
.footer-logo img {
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.footer-tagline {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.30);
  max-width: 38ch;
  margin: 0 0 1.75rem;
  font-weight: 400;
}
/* ── Column label ── */.footer-col-label {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  margin: 0 0 1.35rem;
}
/* ── Nav links ── */.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-nav a {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.58);
  display: inline-block;
  position: relative;
  transition: color 200ms ease;
}
.footer-nav a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #bcb39f;
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-nav a:hover {
  color: rgba(255, 255, 255, 0.92);
}
.footer-nav a:hover::after {
  width: 100%;
}
/* ── Contact/address ── */.footer-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-address a {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.58);
  transition: color 200ms ease;
}
.footer-address a:hover {
  color: #bcb39f;
}
.footer-address span,
.footer-address p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.30);
  line-height: 1.6;
  margin: 0;
}
/* ── Contact rows with icons ── */.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  transition: color 200ms ease;
}
a.footer-contact-row:hover {
  color: rgba(255, 255, 255, 0.92);
}
a.footer-contact-row:hover .footer-contact-icon {
  color: #bcb39f;
}
.footer-contact-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #bcb39f;
}
/* ── Social icons ── */.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social-link {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.45);
  transition: border-color 240ms ease, color 240ms ease,
              background 240ms ease, transform 200ms ease;
}
.footer-social-link:hover {
  border-color: rgba(188, 179, 159, 0.50);
  color: #bcb39f;
  background: rgba(188, 179, 159, 0.07);
  transform: translateY(-2px);
}
.footer-social-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* ── Divider ── */.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
/* ── Legal bar ── */.footer-legal {
  padding: 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-copyright {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.28);
  margin: 0;
  letter-spacing: 0.02em;
}
.footer-disclaimer {
  font-size: 11px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.16);
  margin: 0;
  max-width: 90ch;
}
/* ─── INVESTMENT TEAM ─── */#investment-team .section-heading h2 {
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.team-intro {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
  color: var(--muted);
  margin-top: 16px;
  max-width: 680px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 64px);
}
.team-card {
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
  border-top: 2px solid var(--line);
  border-left: 1px solid var(--line);
  position: relative;
  transition: background 200ms ease;
}
.team-card:first-child {
  border-left: none;
}
.team-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
.team-card:hover::before {
  width: 100%;
}
.team-card:hover {
  background: color-mix(in srgb, var(--white) 60%, var(--light-gray));
}
body.dark .team-card {
  background: transparent;
  border-top-color: rgba(255, 255, 255, 0.1);
  border-left-color: rgba(255, 255, 255, 0.08);
}
body.dark .team-card:hover {
  background: rgba(255, 255, 255, 0.03);
}
.team-card-name {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.team-card-role {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 16px;
  line-height: 1.4;
}
.team-card-email {
  font-size: 12.5px;
  color: var(--muted);
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
  word-break: break-all;
  line-height: 1.5;
}
.team-card-email:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}
body.dark .team-card-name {
  color: rgba(255, 255, 255, 0.92);
}
body.dark .team-card-email:hover {
  color: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
@media (max-width: 960px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-card:nth-child(odd) {
    border-left: none;
  }

  .team-card:nth-child(3),
  .team-card:nth-child(4) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 560px) {
  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-card {
    border-left: none;
    border-top: 1px solid var(--line);
  }
}
/* ─── REVEAL ANIMATION ─── */.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Once revealed, strategy cards animate border/shadow on hover
   (the .reveal transition would otherwise override it) */.is-card.reveal.visible {
  transition: border-color 320ms ease, box-shadow 320ms ease;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}
/* ─── PAGE HERO (subpages) ─── */.page-hero {
  position: relative;
  padding: calc(var(--header-height) + 80px) 0 80px;
  background: var(--navy);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.page-hero-content {
  /* No max-width — inherits full container width (1180px) so the
     title's left edge aligns exactly with the content sections below */
}
.page-hero h1 {
  color: #ffffff;
  margin-top: 18px;
  font-size: clamp(48px, 6vw, 86px);
}
/* ── Cinematic full-screen hero variant (strategy subpages) ── */.page-hero--cinematic {
  min-height: calc(100vh - 180px);
  padding: var(--header-height) 0 110px;
  background-color: var(--navy);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.page-hero--cinematic {
  border-bottom: none;
}
.page-hero--cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 18, 28, 0.30) 0%,
    rgba(10, 18, 28, 0.50) 50%,
    rgba(10, 18, 28, 0.82) 88%,
    rgba(10, 18, 28, 1.00) 100%
  );
  z-index: 0;
}
.page-hero--cinematic .page-hero-content {
  position: relative;
  z-index: 1;
}
.page-hero--cinematic h1 {
  font-size: clamp(48px, 6vw, 86px);
  max-width: 760px;
  line-height: 1.05;
  margin-top: 16px;
}
.page-hero--cinematic .breadcrumb {
  color: rgba(255, 255, 255, 0.60);
}
.page-hero--cinematic .breadcrumb a {
  color: rgba(255, 255, 255, 0.60);
}
.page-hero--cinematic .breadcrumb a:hover {
  color: var(--gold);
}
.page-hero--cinematic .breadcrumb-sep {
  color: rgba(255, 255, 255, 0.25);
}
.page-hero--cinematic .eyebrow {
  color: var(--gold);
}
/* ─── GATEWAY CARDS (home page) ─── *//* ─── INSTITUTIONAL BACKING (home page) ─── */.backing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.backing-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: box-shadow 220ms ease, border-color 220ms ease;
}
.backing-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  border-color: color-mix(in srgb, var(--gold) 50%, var(--line));
}
.backing-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.backing-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  flex: 1;
  margin: 0 0 24px;
}
.backing-rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0 0 24px;
}
.backing-logo {
  width: auto;
  height: 68px;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
/* ════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE / TABLET NAV + LAYOUT
   ════════════════════════════════════════════════════════ *//* ── Desktop baseline: hide mobile-only elements ── */.nav-toggle    { display: none; }
.nav-shell-cta { display: none; }
.nav-overlay   { display: none; }
.drawer-close  { display: none; }
/* ── Hamburger icon: 3 lines → X animation ──
   Box/line geometry (26px box, 5px gap, 2px lines) is set on .nav-toggle
   and .nav-toggle span above, matching the reference project's .hamburger
   exactly. The morph-to-X on open is Attia Capital's own addition — the
   reference hamburger never changes shape, it just opens a drawer with
   its own close button, so there is nothing to "replicate" there.

   Closed state: natural stacked position (flex column + gap on
   .nav-toggle handles the 3-line spacing — no offset needed here). *//* Open state → X. The three lines sit 7px apart from the stack's own
   center (2px-tall lines + 5px gaps), so each outer line travels ±7px
   to converge on the middle line's position before rotating. */body.menu-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.menu-open .nav-toggle span:nth-child(2) {
  opacity: 0;
  width: 0;
}
body.menu-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* ────────────────────────────────────────────────────────
   BREAKPOINT ≤ 1280px  (tablet + mobile) — matches the
   reference project's own nav breakpoint exactly.
   ──────────────────────────────────────────────────────── */@media (max-width: 1280px) {

  /* ── Header bar ── */
  .site-header { top: 0; width: 100%; }

  .navbar {
    width: 100%;
    padding: 0 20px;
    padding-top: 8px;
  }

  /* Logo: clean proportions on tablet/mobile */
  .brand {
    width: 130px;
    height: 30px;
    margin-left: 0;
    flex-shrink: 0;
  }

  /* nav-actions: always visible in header bar (right side) */
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Investor Login: hidden from header bar — lives in the drawer footer */
  .nav-actions .login-btn { display: none; }

  /* Show hamburger — borderless icon only, 26px box / 4px padding,
     matching the reference project's .hamburger exactly */
  .nav-toggle {
    display: flex;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Hamburger line color by scroll context (closed state) */
  .site-header:not(.scrolled) .nav-toggle { color: rgba(255, 255, 255, 0.92); }
  .site-header.scrolled .nav-toggle       { color: var(--ink); }
  body.dark .site-header.scrolled .nav-toggle { color: rgba(255, 255, 255, 0.9); }

  /* Hover bridge: not needed on touch */
  .has-dropdown::after { display: none; }

  /* ─────────────────────────────────────────────────────────
     RIGHT-SIDE DRAWER — slides in from the right edge, with a
     separate dim overlay behind it. Mirrors the reference
     project's .mobile-drawer / .mobile-drawer-overlay pair:
     same direction, same fixed positioning, same translateX
     slide, same dark backdrop instead of a top dropdown panel.
     ───────────────────────────────────────────────────────── */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 24, 33, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms ease, visibility 0ms 260ms;
    z-index: 90;                                    /* above page content, below .site-header (200) */
  }

  body.menu-open .nav-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms ease;
  }

  .nav-shell {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    height: 100%;
    z-index: 5;    /* only needs to out-rank its static siblings (.brand, .nav-actions) inside .site-header's own stacking context */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Must override the desktop .nav-shell's `justify-content: flex-end` —
       otherwise content anchors to the bottom of the drawer and overflows
       upward past the top edge instead of flowing down from it, and that
       upward overflow isn't reachable by scrolling on shorter screens. */
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    /* Premium dark backdrop — always dark regardless of light/dark theme,
       matching the reference drawer's fixed navy surface. */
    background: rgba(4, 10, 18, 0.98);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);

    /* Closed state: off-screen to the right */
    transform: translateX(100%);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.menu-open .nav-shell {
    transform: translateX(0);
  }

  /* .nav-shell lives *inside* .site-header and relies on `position: fixed`
     resolving against the viewport. `.site-header.scrolled` sets a
     `backdrop-filter` (line ~131) — per spec that makes .site-header a
     containing block for fixed descendants, same as `transform`/`filter`
     would. Once scrolled, .nav-shell's top/right/bottom silently start
     resolving against the header's own (header-height-tall) box instead of
     the viewport, collapsing the open drawer into a thin strip. Suspend the
     header's backdrop-filter only while the drawer is open so .nav-shell
     keeps resolving against the real viewport no matter the scroll position.
     `transition: none` is required here too: a *mid-transition* blur value
     still counts as non-none and still hijacks the containing block, so
     animating this drop over the header's normal 260ms would fight the
     drawer's own 320ms slide-in every frame. Dropping it in one frame instead
     keeps the slide animation smooth. */
  body.menu-open .site-header {
    transition: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Close button — the drawer covers the header's own hamburger once
     open (same as the reference project), so it needs its own close
     control, positioned top-right inside the drawer. */
  .drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 18px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: none;
    transition: color 200ms ease, opacity 200ms ease;
  }

  .drawer-close:hover {
    color: #ffffff;
  }

  .drawer-close:focus-visible {
    color: #ffffff;
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* ── Nav list ── */
  .nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;                          /* reset desktop row center-alignment */
    padding: 88px 28px 16px;
    gap: 0;
    flex: none;                                    /* natural height — let nav-shell scroll */
  }

  /* Stagger: items start hidden, animate in when menu opens */
  .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity   300ms ease,
      transform 300ms ease;
  }

  .nav-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  body.menu-open .nav-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay:  80ms; }
  body.menu-open .nav-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 130ms; }
  body.menu-open .nav-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
  body.menu-open .nav-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 230ms; }
  body.menu-open .nav-item:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 280ms; }

  /* Nav link: uppercase text with accordion icon on grouped items */
  .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    border: none;
    border-radius: 0;
    min-height: auto;
    cursor: pointer;
    transition: color 200ms ease;
  }

  /* Accordion icon: + / – on has-dropdown items */
  .has-dropdown > .nav-link::after {
    content: "+";
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    opacity: 0.45;
    flex-shrink: 0;
    transition: opacity 200ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .has-dropdown.open > .nav-link::after {
    content: "−";
    opacity: 0.75;
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    color: #ffffff;
    background: transparent;
  }

  .nav-link:hover::after,
  .nav-link:focus-visible::after { opacity: 0.8; }

  /* ── Simple dropdown becomes an inline accordion in the drawer ── */
  .nav-dropdown {
    position: static;
    width: 100%;
    min-width: 0;
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    padding: 0;
    /* Collapsed by default */
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 380ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .has-dropdown.open .nav-dropdown { max-height: 400px; }

  .nav-dropdown a {
    padding: 11px 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-dropdown a:last-child { border-bottom: none; }

  .nav-dropdown a:hover,
  .nav-dropdown a:focus-visible {
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    transform: translateX(6px);
  }

  /* ── Drawer footer CTA — single Investor Login button, matching the
     reference drawer-footer's single CTA ── */
  .nav-shell-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 28px 44px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: auto;
    /* Stagger in with the menu */
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity   300ms ease,
      transform 300ms ease;
    transition-delay: 280ms;
  }

  body.menu-open .nav-shell-cta {
    opacity: 1;
    transform: translateY(0);
  }

  /* INVESTOR LOGIN — gold accent button */
  .nav-shell-cta .login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: rgba(188, 179, 159, 0.10);
    border: 1px solid rgba(188, 179, 159, 0.55);
    border-radius: 100px;
    color: #bcb39f;
    margin-left: 0;
    transition:
      background-color 200ms ease,
      border-color     200ms ease,
      color            200ms ease;
  }

  .nav-shell-cta .login-btn:hover,
  .nav-shell-cta .login-btn:focus-visible {
    background: rgba(188, 179, 159, 0.22);
    border-color: rgba(188, 179, 159, 0.8);
    color: #bcb39f;
  }

  /* ── Layout grids: 2-column on tablet ── */
  .card-grid.four,
  .process-grid,
  .asset-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ────────────────────────────────────────────────────────
   BREAKPOINT ≤ 860px  (small tablet / large phone)
   ──────────────────────────────────────────────────────── */@media (max-width: 860px) {
  .container { width: min(100% - 28px, 1180px); }

  .hero {
    min-height: 86vh;
    padding-bottom: 52px;
  }

  .hero-content { margin-left: auto; }

  .split-layout,
  .asset-card-grid,
  .contact-grid,
  .card-grid.three,
  .backing-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Leader card: collapse to 1-column at tablet — photo on top */
  .leader-card {
    grid-template-columns: 1fr;
  }

  .section-heading { position: static; }

  /* Firm overview blocks: collapse number + text into single column */
  .firm-block {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 32px 0;
  }

  .firm-block-num {
    padding-top: 0;
  }

  .leader-photo {
    max-width: 420px;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .location-list { grid-template-columns: 1fr; }
}
/* ────────────────────────────────────────────────────────
   BREAKPOINT ≤ 560px  (phone)
   ──────────────────────────────────────────────────────── */@media (max-width: 560px) {
  :root { --header-height: 64px; }

  .navbar {
    padding: 6px 16px 0;
    gap: 8px;
  }

  /* Logo: well-proportioned on phone */
  .brand {
    width: 112px;
    height: 26px;
    margin-left: 0;
  }

  /* Header controls: tighter gap */
  .nav-actions { gap: 6px; }

  /* Theme/lang buttons: slightly smaller */
  .icon-button,
  .lang-toggle {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  h1 { font-size: 48px; }

  .hero-actions,
  .hero-actions .button,
  .contact-form .button { width: 100%; }

  .button { padding-inline: 16px; }

  .content-section,
  .contact-section { padding: 72px 0; }

  .leader-card { gap: 22px; padding: 30px 0; }
  .leader-photo { max-width: none; height: auto; aspect-ratio: 4 / 5; }
  .asset-visual { aspect-ratio: 4 / 3; }

  /* Collapse ALL multi-column grids to single column on phone */
  .card-grid.four,
  .process-grid,
  .backing-grid,
  .split-layout,
  .leader-card,
  .asset-card-grid,
  .contact-grid,
  .card-grid.three { grid-template-columns: 1fr; }

  /* Leader card: photo stacks on top, full width */
  .leader-card {
    gap: 22px;
    padding: 30px 0;
  }
  .leader-photo {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .contact-form { padding: 22px; }

  .page-hero h1 { font-size: 42px; }
  .page-hero { padding-bottom: 60px; }
  /* Cinematic hero — phone overrides (560px and below) */
  .page-hero--cinematic {
    min-height: min(480px, calc(100svh - var(--header-height)));
    padding-top: calc(var(--header-height) + 16px);
    padding-bottom: 56px;
    background-position: center 38%;
  }
  .page-hero--cinematic h1 {
    font-size: clamp(28px, 8.5vw, 40px);
    max-width: 100%;
    line-height: 1.1;
  }
  .page-hero--cinematic .breadcrumb { font-size: 11px; gap: 6px; }

  /* Investment strategies home: fix nowrap title overflow */
  .is-header h2 {
    white-space: normal;
    font-size: clamp(28px, 8vw, 44px);
  }

  /* Strategy card: tighten spacing since .is-attrs are removed */
  .is-card {
    padding: clamp(24px, 6vw, 36px);
  }
  .is-card-top {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  .is-link {
    margin-top: 16px;
  }

  /* Drawer: tighter side padding on small phones (drawer itself is
     already narrower via width: min(360px, 88vw)) */
  .nav-list { padding: 88px 20px 12px; }
  .nav-shell-cta { padding: 20px 20px 36px; }
  .drawer-close { top: 14px; right: 14px; }
}
/* ═══════════════════════════════════════════════════════════════
   FOOTER RESPONSIVE
   ═══════════════════════════════════════════════════════════════ *//* Mobile: single column — brand (logo, tagline, social), nav, contact stack in source order */@media (max-width: 780px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
/* ═══════════════════════════════════════════════════════════════
   STRATEGY DETAIL PAGES  (strategies/us-multifamily.html, etc.)
   ═══════════════════════════════════════════════════════════════ *//* ── Stat bar ── */.strategy-stat-bar {
  background: var(--navy);
  padding: 56px 0;
}
.strategy-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.strategy-stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
}
.strategy-stat-item:first-child {
  padding-left: 0;
  border-left: none;
}
.strategy-stat-value {
  font-family: 'Literata', Georgia, serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
}
.strategy-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 4px;
}
.strategy-stat-accent {
  font-size: 12px;
  color: var(--gold);
  margin-top: 2px;
}
/* ── Process steps ── */.strategy-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  counter-reset: process-counter;
}
.process-step {
  padding: 32px 28px 32px 0;
  border-top: 2px solid var(--line);
  counter-increment: process-counter;
  transition: border-color 280ms ease;
}
.process-step:hover {
  border-top-color: var(--gold);
}
.process-step::before {
  display: none;
}
.process-step h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}
.process-step p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.72;
  margin: 0;
}
/* ── Breadcrumb ── */.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.breadcrumb a {
  color: var(--muted);
  transition: color 180ms ease;
}
.breadcrumb a:hover {
  color: var(--gold);
}
.breadcrumb-sep {
  color: var(--line);
  font-size: 10px;
}
/* ── Detail intro (lead paragraph) ── *//* ── Responsive ── */@media (max-width: 860px) {
  .strategy-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
  }

  .strategy-stat-item {
    padding: 0 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.10);
  }

  .strategy-stat-item:first-child,
  .strategy-stat-item:nth-child(2) {
    padding-top: 0;
  }

  .strategy-stat-item:nth-child(2) {
    border-left: 1px solid rgba(255, 255, 255, 0.10);
  }

  .strategy-stat-item:nth-child(3) {
    padding-left: 0;
    border-left: none;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

  .strategy-stat-item:nth-child(4) {
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

  

  .strategy-process {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;
  }

  

  /* Cinematic hero — tablet */
  .page-hero--cinematic {
    min-height: min(600px, calc(100svh - 60px));
    background-position: center 32%;
  }
  .page-hero--cinematic h1 {
    font-size: clamp(38px, 5.5vw, 66px);
  }

  /* Stat value — slightly tighter at tablet */
  .strategy-stat-value {
    font-size: clamp(26px, 3.6vw, 42px);
  }

  /* CTA band — reduced vertical padding at tablet */
  

  /* Strategy intro lead — tighter line-height at tablet */
  
}
/* ── Strategy pages: mid-phone (640px) ── */@media (max-width: 640px) {
  .page-hero--cinematic {
    min-height: min(520px, 80svh);
    padding-bottom: 64px;
    background-position: center 36%;
  }
  .page-hero--cinematic h1 {
    font-size: clamp(30px, 7.5vw, 46px);
    line-height: 1.08;
  }

  /* Stat bar — tighter padding at mid-phone */
  .strategy-stat-bar { padding: 44px 0; }
  .strategy-stat-value { font-size: clamp(24px, 6.5vw, 36px); }

  /* Process steps: comfortable padding at mid-phone */
  .process-step { padding: 26px 20px 26px 0; }
}
@media (max-width: 560px) {
  .strategy-stat-bar { padding: 40px 0; }

  .strategy-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .strategy-stat-item {
    padding: 0;
    border: none;
  }

  .strategy-stat-item:nth-child(3),
  .strategy-stat-item:nth-child(4) {
    padding-top: 0;
    border-top: none;
  }

  /* Stat value — smaller on small phones */
  .strategy-stat-value { font-size: clamp(22px, 7.5vw, 32px); }
  .strategy-stat-label { font-size: 9.5px; }
  .strategy-stat-accent { font-size: 11px; }

  .strategy-process {
    grid-template-columns: 1fr;
  }

  /* Process steps — tighter on small phone */
  .process-step { padding: 22px 0; }
  .process-step p { font-size: 13px; }
}
/* ═══════════════════════════════════════════════════════════════
   MARKET FOCUS  (LATAM page — redesigned cards)
   ═══════════════════════════════════════════════════════════════ *//* Header block */.mf-header {
  max-width: 600px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.mf-header h2 {
  margin-bottom: 14px;
}
.mf-sub {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.72;
  margin: 0;
}
/* Cards grid */.mf-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
/* Individual card */.mf-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px) clamp(32px, 3.5vw, 44px);
  box-shadow: 0 2px 14px rgba(15, 24, 33, 0.05);
  transition: box-shadow 300ms ease, border-top-color 300ms ease, transform 280ms ease;
  position: relative;
}
.mf-card:hover {
  box-shadow: 0 10px 40px rgba(15, 24, 33, 0.10);
  border-top-color: var(--gold);
  transform: translateY(-3px);
}
/* Card header row: number + flag */.mf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.mf-card-num {
  display: none;
}
.mf-card-flag {
  display: block;
  line-height: 0;
}
/* Country name */.mf-card-title {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 9px;
  line-height: 1.2;
}
/* Strategic sentence */.mf-card-tagline {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.65;
  font-style: italic;
}
/* Highlights list */.mf-card-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.mf-card-highlights li {
  position: relative;
  padding-left: 17px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
  line-height: 1.45;
}
.mf-card-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}
/* Responsive: stack on mobile */@media (max-width: 640px) {
  .mf-cards {
    grid-template-columns: 1fr;
  }

  .mf-card:hover {
    transform: none;
  }
}
/* ═══════════════════════════════════════════════════════════════
   619 BRICKELL — Featured Project section (US Multifamily page)
   ═══════════════════════════════════════════════════════════════ */.brickell-feature {
  padding: 0;
  overflow: hidden;
  background: var(--white);
}
/* Section eyebrow header *//* ── Hero image block ── */.bf-hero {
  position: relative;
  overflow: hidden;
}
.bf-hero-image {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
.bf-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  filter: brightness(0.88) saturate(0.95);
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bf-hero:hover .bf-hero-image img {
  transform: scale(1.02);
}
/* Gradient: strong on left, fades out right */.bf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(15, 24, 33, 0.72) 0%,
    rgba(15, 24, 33, 0.28) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}
/* Bottom gradient for content readability */.bf-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(15, 24, 33, 0.45), transparent);
  pointer-events: none;
  z-index: 1;
}
/* Overlay wrapper: full-size, uses container to align card with text below */.bf-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.bf-hero-overlay .container {
  padding-bottom: clamp(32px, 5vw, 64px);
  pointer-events: none;
}
/* Card: now flows inside container, inheriting its left edge */.bf-hero-card {
  pointer-events: auto;
  max-width: 480px;
}
.bf-hero-location {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: "Plus Jakarta Sans", sans-serif;
  margin: 0 0 10px;
}
.bf-hero-title {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 400;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.bf-hero-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 26px;
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: 0.02em;
}
/* Stats row inside card */.bf-hero-stats {
  display: flex;
  gap: 36px;
  align-items: flex-start;
}
.bf-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bf-stat-val {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  color: #fff;
  line-height: 1;
}
.bf-stat-lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  font-family: "Plus Jakarta Sans", sans-serif;
}
/* ── Body: description + gallery ── */.bf-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(48px, 6vw, 88px);
  align-items: start;
  padding: clamp(48px, 6vw, 76px) 0 clamp(56px, 7vw, 88px);
}
.bf-desc {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 100px;
}
.bf-desc-text {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.78;
  margin: 0;
}
/* CTA button */.bf-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: gap 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
}
.bf-cta:hover {
  gap: 16px;
  opacity: 0.8;
}
.bf-cta svg {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.bf-cta:hover svg {
  transform: translateX(4px);
}
/* ── Photo gallery grid ── *//* ── Brickell carousel ── */.bf-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  height: 360px;
}
.bf-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.bf-carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.bf-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.88) brightness(0.96);
}
.bf-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
  transition: background 200ms, border-color 200ms;
  z-index: 2;
}
.bf-carousel-btn:hover {
  background: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.55);
}
.bf-carousel-btn--prev { left: 12px; }
.bf-carousel-btn--next { right: 12px; }
.bf-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.bf-carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 200ms;
}
.bf-carousel-dot.active {
  background: #fff;
}
body.dark .bf-carousel-btn {
  background: rgba(30, 40, 55, 0.88);
  color: var(--ink);
}
body.dark .bf-carousel-btn:hover {
  background: rgba(30, 40, 55, 1);
}
/* ── Brickell responsive ── */@media (max-width: 1024px) {
  .bf-hero-image { aspect-ratio: 16 / 8; }

  .bf-body {
    grid-template-columns: 260px 1fr;
    gap: 40px;
  }

  
}
@media (max-width: 860px) {
  .bf-hero-image { aspect-ratio: 4 / 3; }

  .bf-hero-overlay .container {
    padding-bottom: 28px;
  }

  .bf-body {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .bf-desc {
    position: static;
  }

  

  

  
}
@media (max-width: 560px) {
  .bf-hero-image { aspect-ratio: 3 / 4; }

  .bf-hero::before {
    background: linear-gradient(
      to top,
      rgba(15, 24, 33, 0.82) 0%,
      rgba(15, 24, 33, 0.35) 50%,
      transparent 80%
    );
  }

  .bf-hero-overlay .container {
    padding-bottom: 24px;
  }

  .bf-hero-card {
    max-width: 100%;
  }

  .bf-hero-title {
    font-size: clamp(36px, 9vw, 52px);
  }

  

  
}
/* ═══════════════════════════════════════════════════════════════
   FEATURED PROJECTS  (LATAM page)
   ═══════════════════════════════════════════════════════════════ */.featured-projects {
  background: var(--light-gray);
}
.featured-projects-header {
  max-width: 680px;
  margin-bottom: 36px;
}
.featured-projects-header h2 {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: clamp(28px, 3vw, 40px);
}
.featured-projects-intro {
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.8;
  color: var(--muted);
  margin-top: 20px;
  max-width: 620px;
}
/* 2×2 grid on desktop */.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.project-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
body.dark .project-card {
  background: var(--navy-soft);
}
.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 54px rgba(15, 24, 33, 0.13);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
}
.project-card-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex-shrink: 0;
}
.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 560ms ease;
}
.project-card:hover .project-card-image img {
  transform: scale(1.04);
}
.project-card-body {
  padding: 22px 20px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-card-name {
  font-family: 'Literata', Georgia, serif;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 10px;
}
.project-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.72;
  margin: 0;
  flex: 1;
}
/* ── More Information block ── *//* ── Brand statement band above the cards grid ── */.projects-statement {
  margin-bottom: 52px;
  padding: clamp(32px, 4vw, 52px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.projects-statement-text {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  font-family: "Literata", Georgia, serif;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink)!important;
}
/* Gold rule that anchors the statement */.projects-statement-accent {
  flex-shrink: 0;
  width: clamp(36px, 4vw, 64px);
  height: 2px;
  background: var(--gold);
}
body.dark .projects-statement-text {
  color: var(--white);
}
@media (max-width: 820px) {
  .projects-statement {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.projects-info-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* External institutional button */.btn-external {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid rgba(15, 24, 33, 0.30);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
              transform 180ms ease, box-shadow 180ms ease;
}
.btn-external:hover {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 24, 33, 0.18);
}
body.dark .btn-external {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.75);
}
body.dark .btn-external:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}
/* ── Featured projects responsive ── */@media (max-width: 860px) {
  .featured-projects-header { margin-bottom: 40px; }
}
@media (max-width: 640px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .project-card-image { aspect-ratio: 16 / 9; }

  .project-card-body { padding: 18px 18px 22px; }

  .projects-info-links { flex-direction: column; width: 100%; }

  .btn-external { width: 100%; justify-content: center; }
}
/* ── Strategy card "View Full Strategy" link ── *//* ════════════════════════════════════════════════════════
   CLUB CTA  — pre-footer conversion section
   ════════════════════════════════════════════════════════ */.club-cta {
  position: relative;
  background: #0b1218;
  padding: clamp(88px, 11vw, 150px) 0 clamp(80px, 10vw, 130px);
  text-align: center;
  overflow: hidden;
}
/* Subtle gold glow from top */.club-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 42% at 50% 0%,
    rgba(188, 179, 159, 0.10) 0%,
    transparent 70%);
  pointer-events: none;
}
/* ── Header block ── */.club-cta-header {
  margin-bottom: clamp(52px, 6.5vw, 80px);
}
.club-cta .eyebrow {
  color: var(--gold);
  margin-bottom: 22px;
}
.club-cta h2 {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 400;
  color: #fff;
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 auto 38px;
  max-width: 100%;
  white-space: nowrap;
}
/* Key ornament with flanking fade-lines */.club-cta-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.club-cta-ornament::before,
.club-cta-ornament::after {
  content: '';
  display: block;
  height: 1px;
  width: clamp(48px, 7vw, 90px);
}
.club-cta-ornament::before {
  background: linear-gradient(to left, rgba(188, 179, 159, 0.55), transparent);
}
.club-cta-ornament::after {
  background: linear-gradient(to right, rgba(188, 179, 159, 0.55), transparent);
}
.club-cta-key {
  width: 58px;
  height: auto;
  color: var(--gold);
  opacity: 0.62;
}
/* ── Form ── */.club-cta-form {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}
.club-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 52px;
}
.club-cta-field {
  display: flex;
  flex-direction: column;
  padding-bottom: 36px;
}
.club-cta-field span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.36);
  font-family: "Plus Jakarta Sans", sans-serif;
  margin-bottom: 9px;
}
.club-cta-field input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 15px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  padding: 6px 0 13px;
  outline: none;
  width: 100%;
  transition: border-bottom-color 220ms ease;
  -webkit-appearance: none;
  caret-color: var(--gold);
}
.club-cta-field input:focus {
  border-bottom-color: var(--gold);
}
/* Autofill override — keep dark background */.club-cta-field input:-webkit-autofill,
.club-cta-field input:-webkit-autofill:hover,
.club-cta-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0b1218 inset;
  -webkit-text-fill-color: #fff;
}
/* ── Submit area ── */.club-cta-submit {
  text-align: center;
  padding-top: 12px;
}
.club-cta-btn {
  display: inline-block;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-family: "Plus Jakarta Sans", sans-serif;
  padding: 18px 52px;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 240ms ease, color 240ms ease;
}
.club-cta-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.club-cta-status {
  margin-top: 18px;
  font-size: 13px;
  color: var(--gold);
  min-height: 20px;
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;
}
/* ── Club CTA responsive ── */@media (max-width: 860px) {
  .club-cta h2 {
    font-size: clamp(28px, 5.8vw, 48px);
    white-space: normal;
  }
}
@media (max-width: 640px) {
  .club-cta {
    padding: 72px 0 64px;
  }

  .club-cta h2 {
    font-size: clamp(32px, 8.5vw, 44px);
    letter-spacing: -0.01em;
  }

  .club-cta-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .club-cta-field {
    padding-bottom: 28px;
  }

  .club-cta-btn {
    width: 100%;
    padding: 18px 24px;
  }
}
@media (max-width: 400px) {
  .club-cta h2 {
    font-size: clamp(28px, 9vw, 36px);
  }
}
/* ═══════════════════════════════════════════════════════════════
   WHO WE SERVE — editorial profile rows
   ═══════════════════════════════════════════════════════════════ */.serve-profiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 48px);
  margin-top: clamp(48px, 6vw, 72px);
}
.serve-profile {
  display: flex;
  flex-direction: column;
}
/* Image */.serve-profile-media {
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 3;
}
.serve-profile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.serve-profile:hover .serve-profile-media img {
  transform: scale(1.04);
}
/* Text below image */.serve-profile-body {
  padding-top: clamp(20px, 2vw, 28px);
}
.serve-profile-body h3 {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.serve-profile-body p {
  font-size: clamp(14px, 1.3vw, 15.5px);
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
}
/* Dark mode */body.dark .serve-profile-body h3 {
  color: var(--white);
}
/* Responsive: 2 columns on tablet, 1 on mobile */@media (max-width: 960px) {
  .serve-profiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}
@media (max-width: 600px) {
  .serve-profiles {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .serve-profile-media {
    aspect-ratio: 16 / 9;
  }
}
/* ═══════════════════════════════════════════════════════════════
   APPROACH PARALLAX  (the-firm page — Our Approach background)
   Scoped to .navy-band to avoid collision with us-multifamily page
   which uses plain .approach-parallax with a different image.
   ═══════════════════════════════════════════════════════════════ */.navy-band.approach-parallax {
  position: relative;
  background-image: url('../images/graficos.jpg');
  background-image: -webkit-image-set(url('../images/graficos.webp') type("image/webp") 1x, url('../images/graficos.jpg') type("image/jpeg") 1x);
  background-image: image-set(url('../images/graficos.webp') type("image/webp") 1x, url('../images/graficos.jpg') type("image/jpeg") 1x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Parallax only on devices with a fine pointer (desktop) */@media (hover: hover) and (pointer: fine) {
  .navy-band.approach-parallax {
    background-attachment: fixed;
  }
}
/* Dark navy veil to keep white text fully legible */.navy-band.approach-parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 24, 33, 0.93) 0%,
    rgba(15, 24, 33, 0.8) 50%,
    rgba(15, 24, 33, 0.9) 100%
  );
  pointer-events: none;
}
.navy-band.approach-parallax > .container {
  position: relative;
  z-index: 1;
}
/* ═══════════════════════════════════════════════════════════════
   DIFFERENTIATORS TRIO  (the-firm page — three cards)
   ═══════════════════════════════════════════════════════════════ *//* Section background: blueprint image + soft parallax */.diff-parallax {
  position: relative;
  background-image: url('../images/847.jpg');
  background-image: -webkit-image-set(url('../images/847.webp') type("image/webp") 1x, url('../images/847.jpg') type("image/jpeg") 1x);
  background-image: image-set(url('../images/847.webp') type("image/webp") 1x, url('../images/847.jpg') type("image/jpeg") 1x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Parallax only on devices with a fine pointer (desktop) —
   background-attachment: fixed is unreliable on touch/iOS */@media (hover: hover) and (pointer: fine) {
  .diff-parallax {
    background-attachment: fixed;
  }
}
/* Light veil so the blueprint stays subtle and text keeps contrast */.diff-parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(247, 248, 249, 0.92) 0%,
    rgba(247, 248, 249, 0.72) 45%,
    rgba(247, 248, 249, 0.85) 100%
  );
  pointer-events: none;
}
.diff-parallax > .container {
  position: relative;
  z-index: 1;
}
body.dark .diff-parallax::before {
  background: linear-gradient(
    to bottom,
    rgba(10, 16, 24, 0.93) 0%,
    rgba(10, 16, 24, 0.82) 45%,
    rgba(10, 16, 24, 0.9) 100%
  );
}
.diff-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
}
.diff-trio-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius);
  padding: clamp(32px, 3.5vw, 48px) clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(15, 24, 33, 0.08);
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.diff-trio-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--gold), color-mix(in srgb, var(--gold) 35%, transparent));
  opacity: 0;
  transition: opacity 280ms ease;
}
.diff-trio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(15, 24, 33, 0.1);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}
.diff-trio-card:hover::before {
  opacity: 1;
}
.diff-trio-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 10%, var(--white));
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 26px;
  flex-shrink: 0;
}
.diff-trio-icon svg {
  width: 24px;
  height: 24px;
}
.diff-trio-card h3 {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 14px;
}
.diff-trio-card p {
  font-size: clamp(14px, 1.25vw, 15.5px);
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
}
body.dark .diff-trio-card {
  background: color-mix(in srgb, var(--navy-soft) 88%, transparent);
  border-color: rgba(255, 255, 255, 0.08);
}
@media (max-width: 900px) {
  .diff-trio {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
/* ═══════════════════════════════════════════════════════════════
   APPROACH DUO  (us-multifamily page — two pillar cards)
   ═══════════════════════════════════════════════════════════════ */.approach-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.5vw, 48px);
  margin-top: clamp(40px, 5vw, 64px);
}
.approach-duo-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(15, 24, 33, 0.05);
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.approach-duo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--gold), color-mix(in srgb, var(--gold) 35%, transparent));
  opacity: 0;
  transition: opacity 280ms ease;
}
.approach-duo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(15, 24, 33, 0.1);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}
.approach-duo-card:hover::before {
  opacity: 1;
}
.approach-duo-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 10%, var(--white));
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 28px;
  flex-shrink: 0;
}
.approach-duo-icon svg {
  width: 26px;
  height: 26px;
}
.approach-duo-card h3 {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
}
.approach-duo-card p {
  font-size: clamp(14.5px, 1.3vw, 16px);
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
}
body.dark .approach-duo-card {
  background: var(--navy-soft);
}
@media (max-width: 768px) {
  .approach-duo {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* ── Approach section — parallax background ── */.approach-parallax {
  position: relative;
  background-image: url("../images/fondo-edificio.jpg");
  background-image: -webkit-image-set(url("../images/fondo-edificio.webp") type("image/webp") 1x, url("../images/fondo-edificio.jpg") type("image/jpeg") 1x);
  background-image: image-set(url("../images/fondo-edificio.webp") type("image/webp") 1x, url("../images/fondo-edificio.jpg") type("image/jpeg") 1x);
  background-size: cover;
  background-position: center 50%;
  will-change: background-position;
}
/* Parallax only on devices with a fine pointer (desktop) —
   background-attachment: fixed is unreliable on touch/iOS */@media (hover: hover) and (pointer: fine) {
  .approach-parallax {
    background-attachment: fixed;
  }
}
.approach-parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(10, 18, 30, 0.72) 0%,
    rgba(10, 18, 30, 0.62) 50%,
    rgba(10, 18, 30, 0.74) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.approach-parallax .container {
  position: relative;
  z-index: 1;
}
.approach-parallax .eyebrow {
  color: var(--gold);
}
.approach-parallax .section-heading h2 {
  color: #fff;
}
.approach-parallax .approach-duo-card {
  background: rgba(255, 255, 255, 0.93);
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.dark .approach-parallax .approach-duo-card {
  background: rgba(15, 24, 40, 0.88);
}
@media (max-width: 768px) {
  .approach-parallax {
    background-attachment: scroll;
  }
}
@media (prefers-reduced-motion: reduce) {
  .approach-parallax {
    background-attachment: scroll;
  }
}
/* ═══════════════════════════════════════════════════════════════
   MULTIFAMILY MODEL EXPLAINER  (us-multifamily page)
   ═══════════════════════════════════════════════════════════════ */.mf-explainer {
  padding: 0;
  overflow: hidden;
}
/* ── Banner ── */.mf-banner {
  position: relative;
  height: clamp(380px, 55vw, 620px);
  overflow: hidden;
}
.mf-banner-image {
  position: absolute;
  inset: 0;
}
.mf-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
.mf-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 18, 28, 0.82) 0%,
    rgba(10, 18, 28, 0.55) 55%,
    rgba(10, 18, 28, 0.18) 100%
  );
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.mf-banner-card {
  max-width: 600px;
}
.mf-banner-card .eyebrow {
  color: var(--gold);
  margin-bottom: 18px;
}
.mf-banner-title {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(24px, 3.6vw, 48px);
  white-space: nowrap;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
/* ── Body: description + gallery ── */.mf-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
  padding: clamp(64px, 8vw, 100px) 0;
}
.mf-desc {
  position: static;
}
.mf-desc-text {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.85;
  color: var(--muted);
  margin: 0 0 32px;
}
.mf-portfolio-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 2px;
  transition: background 220ms ease, gap 220ms ease;
}
.mf-portfolio-btn:hover {
  background: color-mix(in srgb, var(--navy) 85%, var(--gold) 15%);
  gap: 16px;
}
.mf-portfolio-btn svg {
  flex-shrink: 0;
  transition: transform 220ms ease;
}
.mf-portfolio-btn:hover svg {
  transform: translateX(3px);
}
body.dark .mf-portfolio-btn {
  background: var(--gold);
  color: var(--navy);
}
body.dark .mf-portfolio-btn:hover {
  background: color-mix(in srgb, var(--gold) 88%, #fff 12%);
}
.mf-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mf-gallery-item {
  overflow: hidden;
  border-radius: var(--radius);
  margin: 0;
  aspect-ratio: 4 / 5;
  height: auto;
}
.mf-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.mf-gallery-item:hover img {
  transform: scale(1.04);
}
/* ── Business model steps ── */.mf-steps {
  background: var(--navy);
  padding: clamp(64px, 8vw, 96px) 0;
}
.mf-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.mf-step {
  padding: clamp(32px, 3.5vw, 52px) clamp(24px, 3vw, 44px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.mf-step:first-child {
  border-left: none;
}
.mf-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mf-step:hover::before {
  width: 100%;
}
.mf-step h3 {
  font-family: "Literata", Georgia, serif;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.mf-step p {
  font-size: clamp(13.5px, 1.2vw, 15px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.58);
  margin: 0;
}
/* Dark mode */body.dark .mf-steps {
  background: color-mix(in srgb, var(--navy) 85%, #000 15%);
}
/* ── Responsive ── */@media (max-width: 900px) {
  .mf-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mf-desc {
    position: static;
  }

  .mf-steps-grid {
    grid-template-columns: 1fr;
  }

  .mf-step {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 32px 0;
  }

  .mf-step:first-child {
    border-top: none;
    padding-top: 0;
  }
}
@media (max-width: 560px) {
  .mf-banner {
    height: 320px;
  }

  .mf-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SKIP LINK — accessibility: hidden until keyboard focus
   ═══════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 999;
  padding: 0.75rem 1.5rem;
  background: var(--navy);
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   THANKS PAGE — hero with background image + dark overlay
   ═══════════════════════════════════════════════════════════════ */
.thanks-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--navy);
  background-image: url("../images/619-brickell-exterior.jpg");
  background-image: -webkit-image-set(
    url("../images/619-brickell-exterior.avif") type("image/avif") 1x,
    url("../images/619-brickell-exterior.webp") type("image/webp") 1x,
    url("../images/619-brickell-exterior.jpg") type("image/jpeg") 1x
  );
  background-image: image-set(
    url("../images/619-brickell-exterior.avif") type("image/avif") 1x,
    url("../images/619-brickell-exterior.webp") type("image/webp") 1x,
    url("../images/619-brickell-exterior.jpg") type("image/jpeg") 1x
  );
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.thanks-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 24, 33, 0.75),
    rgba(15, 24, 33, 0.88)
  );
  z-index: 1;
}
.thanks-hero .container {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 150px 20px;
}
.thanks-hero h1 {
  color: #fff;
  margin: 0 auto 16px;
}
.thanks-hero .eyebrow {
  color: var(--gold);
  margin-bottom: 12px;
}
.thanks-hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(16px, 1.4vw, 20px);
  max-width: 560px;
  margin: 0 auto 32px;
}
.thanks-steps {
  max-width: 480px;
  margin: 0 auto 40px;
  text-align: left;
}
.thanks-steps h3 {
  color: var(--gold);
  font-size: 16px;
  margin: 0 0 12px;
  text-align: center;
}
.thanks-steps ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.thanks-steps li {
  counter-increment: step;
  padding: 10px 0 10px 36px;
  position: relative;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.thanks-steps li:last-child {
  border-bottom: none;
}
.thanks-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 10px;
  width: 24px;
  height: 24px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.thanks-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
body.dark .thanks-hero::before {
  background: linear-gradient(
    to bottom,
    rgba(15, 24, 33, 0.82),
    rgba(15, 24, 33, 0.94)
  );
}