/* =========================================================
   MGNI, Editorial Authority
   Design system: warm off-white + deep navy + warm brass
   Brand standards V1 (Liaison brief 2026-06-02): 3 colors strict.
   Type: Fraunces (display serif) + Hanken Grotesk (neutral sans).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..500&family=Hanken+Grotesk:wght@300..700&display=swap');

:root {
  /* --- 3-color system (brief hex) --- */
  --navy-deep: #16203a;          /* deepest navy for dark sections */
  --navy: #1f2a44;               /* primary deep navy (brief) */
  --navy-soft: #2a3656;
  --cream: #f5f1e8;              /* warm off-white base (brief), never pure white */
  --cream-alt: #ece5d6;          /* slightly deeper warm */
  --cream-bright: #faf7f0;
  --gold: #8b6b3d;               /* warm brass accent (brief), sparing use only */
  --gold-light: #a98a57;
  --gold-soft: rgba(139, 107, 61, 0.4);
  --text-on-navy: #f5f1e8;
  --text-on-cream: #1f2a44;
  --muted-on-navy: #9aa6ba;
  --muted-on-cream: #55617a;
  --rule-on-navy: rgba(245, 241, 232, 0.15);
  --rule-on-cream: rgba(31, 42, 68, 0.15);
  --photo-overlay: rgba(31, 42, 68, 0.30); /* navy 30%, text-on-image only */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-on-cream);
  background: var(--cream);
  font-weight: 400;
  font-feature-settings: "ss01", "kern";
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ===== Typography ===== */
h1, h2, h3, h4, h5, .serif {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 480;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: inherit;
}

.display-xl { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 500; }
.display-l  { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 500; }
.display-m  { font-size: clamp(2rem, 3.8vw, 3.25rem); font-weight: 500; }
.display-s  { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 500; }

.eyebrow {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.lede {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  font-weight: 400;
  color: inherit;
}

.italic { font-style: italic; }
.serif-italic { font-family: 'Fraunces', serif; font-style: italic; }

/* ===== Layout ===== */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }

section { padding: clamp(60px, 9vw, 120px) 0; position: relative; }

.section-navy { background: var(--navy); color: var(--text-on-navy); }
.section-navy-deep { background: var(--navy-deep); color: var(--text-on-navy); }
.section-cream { background: var(--cream); color: var(--text-on-cream); }
.section-cream-alt { background: var(--cream-alt); color: var(--text-on-cream); }

/* ===== Gold rule (signature element) ===== */
.gold-rule {
  width: 56px; height: 1px; background: var(--gold);
  display: inline-block; vertical-align: middle;
}
.gold-rule-tall { width: 1px; height: 56px; background: var(--gold); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px; font-size: 0.88rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.25s ease; text-decoration: none;
}
.btn-primary { background: var(--gold); color: var(--navy-deep); }
.btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-outline { background: transparent; border-color: var(--gold); color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--navy-deep); }
.btn-outline-light { background: transparent; border-color: var(--text-on-cream); color: var(--text-on-cream); }
.btn-outline-light:hover { background: var(--text-on-cream); color: var(--cream); }
.btn-text {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid var(--gold-soft); padding-bottom: 4px;
  transition: border-color 0.25s;
}
.btn-text:hover { border-color: var(--gold); }

/* ===== Header / Nav ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-deep); color: var(--text-on-navy);
  border-bottom: 1px solid var(--rule-on-navy);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px; max-width: 1280px; margin: 0 auto;
  min-height: 88px; flex-wrap: nowrap;
}
.logo {
  font-family: 'Fraunces', serif; font-size: 1.8rem;
  font-weight: 600; letter-spacing: 0.08em; color: var(--cream);
  display: inline-flex; align-items: center;
  flex-shrink: 0;                /* never let the logo compress */
}
.logo img { height: 44px; width: auto; display: block; flex-shrink: 0; }
.site-footer .logo img { height: 56px; }
.logo small {
  display: block; font-family: 'Hanken Grotesk', sans-serif; font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  font-weight: 500; margin-top: 2px;
}
.nav-main { display: flex; gap: 16px; align-items: center; flex-wrap: nowrap; margin-left: 32px; }
.nav-main a {
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cream); transition: color 0.2s;
  position: relative; padding: 4px 0; white-space: nowrap;
}
.nav-main a:hover, .nav-main a.active { color: var(--gold); }
.nav-main a.active::after {
  content: ""; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--gold);
}
.nav-cta {
  font-size: 0.78rem; padding: 10px 20px; border: 1px solid var(--gold);
  color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase;
  transition: all 0.2s; white-space: nowrap; flex-shrink: 0; margin-left: 12px;
}
.nav-cta:hover { background: var(--gold); color: var(--navy-deep); }

.contact-strip {
  background: var(--navy-deep); border-bottom: 1px solid var(--rule-on-navy);
  font-size: 0.86rem; color: var(--muted-on-navy);
}
.contact-strip-inner {
  max-width: 1280px; margin: 0 auto; padding: 8px 32px;
  display: flex; justify-content: flex-end; gap: 24px; align-items: center;
}
.contact-strip a { color: var(--cream); transition: color 0.2s; }
.contact-strip a:hover { color: var(--gold); }

/* ===== Hero ===== */
.hero {
  background: var(--navy-deep); color: var(--text-on-navy);
  padding: clamp(28px, 3.2vw, 48px) 0 clamp(40px, 5vw, 64px);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  background: radial-gradient(circle at top right, var(--navy-soft), transparent 70%);
  opacity: 0.5; pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px;
  align-items: center; position: relative; z-index: 1;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
.hero h1 { font-size: clamp(2.8rem, 5.8vw, 5.2rem); line-height: 1; margin-bottom: 28px; }
.hero h1 .gold-word { color: var(--gold); font-style: italic; }
.hero-lede {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.6;
  color: var(--muted-on-navy); max-width: 540px; margin-bottom: 40px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }
.hero-portrait {
  position: relative; aspect-ratio: 4/5; background: var(--navy);
  border: 1px solid var(--rule-on-navy); overflow: hidden;
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.05); }
.hero-portrait-caption {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1.05rem; color: var(--cream); line-height: 1.3;
}
.hero-portrait-caption small {
  display: block; font-family: 'Hanken Grotesk', sans-serif; font-style: normal;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-top: 8px;
}

/* Featured-in strip */
.featured-in {
  border-top: 1px solid var(--rule-on-navy);
  padding: 32px 0 0; margin-top: 40px;
}
.featured-in-label {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 24px; display: flex; align-items: center; gap: 14px;
}
.featured-logos {
  display: flex; flex-wrap: wrap; gap: 48px; align-items: center;
  font-family: 'Fraunces', serif; font-weight: 500;
  color: var(--cream); opacity: 0.85;
}
.featured-logos span {
  font-size: 1.05rem; letter-spacing: 0.04em;
}
.featured-logos span + span::before {
  content: "·"; margin-right: 48px; margin-left: -24px; color: var(--gold); opacity: 0.6;
}

/* ===== Three Fears section ===== */
.fears-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
  margin-top: 64px;
}
.fear-card {
  border-top: 1px solid var(--gold); padding-top: 32px;
}
.fear-q {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(1.4rem, 1.8vw, 1.65rem); line-height: 1.25;
  margin-bottom: 24px; color: var(--text-on-cream);
}
.fear-a {
  font-size: 0.98rem; line-height: 1.7; color: var(--muted-on-cream);
  margin-bottom: 24px;
}
.fear-a strong { color: var(--text-on-cream); font-weight: 600; }

/* ===== Stats / proof ===== */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 56px; border-left: 1px solid var(--rule-on-cream);
}
.stat {
  padding: 0 32px; border-right: 1px solid var(--rule-on-cream);
}
.stat-num {
  font-family: 'Fraunces', serif; font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1; color: var(--gold); margin-bottom: 12px; font-weight: 500;
}
.stat-label {
  font-size: 0.95rem; line-height: 1.45; color: var(--text-on-cream);
}

/* ===== Hero top zone (editorial column) ===== */
.hero-top {
  position: relative; z-index: 1;
  margin: 0 0 clamp(56px, 7vw, 88px);
}
.hero .hero-top h1 {
  font-size: clamp(1.9rem, 3.1vw, 3rem);
  line-height: 1.08; margin-bottom: 18px;
  max-width: 26ch; letter-spacing: -0.005em;
}
.hero .hero-top h1 .gold-word {
  color: var(--gold); font-style: italic;
  display: block; margin-top: 0.04em;
}
.hero-top .hero-lede {
  max-width: 580px; margin-bottom: 28px;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.55;
}
.hero-top .hero-ctas { margin-bottom: 0; }

/* ===== Hero team band ===== */
.hero-band-wrap {
  position: relative; z-index: 1;
  border-top: 1px solid var(--rule-on-navy);
  padding-top: clamp(40px, 5vw, 60px);
}
.hero-band {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.hero-band-tile {
  aspect-ratio: 4 / 5;
  background: var(--navy);
  border: 1px solid var(--rule-on-navy);
  overflow: hidden; position: relative;
  display: block; text-decoration: none;
}
.hero-band-tile img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  filter: grayscale(100%) contrast(1.06) brightness(0.94);
  transition: filter 0.45s ease, transform 0.5s ease;
}
.hero-band-tile:hover img {
  filter: grayscale(0%) contrast(1.02) brightness(1);
  transform: scale(1.04);
}
.hero-band-tile.zoom-tight img {
  transform: scale(2.2);
  transform-origin: 50% 22%;
}
.hero-band-tile.zoom-tight:hover img {
  transform: scale(2.28);
  transform-origin: 50% 22%;
}
.team-photo.zoom-tight img {
  transform: scale(2.2);
  transform-origin: 50% 22%;
}
.team-card:hover .team-photo.zoom-tight img {
  transform: scale(2.28);
  transform-origin: 50% 22%;
}
/* Per-person zoom overrides */
.zoom-alejandro img {
  transform: scale(3.8);
  transform-origin: 64% 37%;
}
.zoom-alejandro:hover img,
.team-card:hover .zoom-alejandro img {
  transform: scale(3.8);
  transform-origin: 64% 37%;
}
.zoom-guille img {
  transform: scale(3.2);
  transform-origin: 50% 30%;
}
.zoom-guille:hover img,
.team-card:hover .zoom-guille img {
  transform: scale(3.2);
  transform-origin: 50% 30%;
}
.hero-band-tile-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 18px 14px 14px;
  background: linear-gradient(to top, rgba(11,18,32,0.95) 0%, rgba(11,18,32,0.75) 55%, transparent 100%);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500;
  color: var(--cream); line-height: 1.3;
}
.hero-band-tile-name small {
  display: block; font-size: 0.62rem;
  letter-spacing: 0.22em; color: var(--gold);
  font-weight: 400; margin-top: 5px; text-transform: uppercase;
}

.hero-band-caption {
  margin-top: clamp(32px, 3.5vw, 44px);
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  color: var(--cream); text-align: center;
  line-height: 1.4; letter-spacing: 0.01em;
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.hero-band-caption small {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif; font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-navy); margin-top: 12px;
}

/* featured-in within new hero band wrap */
.hero-band-wrap .featured-in {
  margin-top: clamp(48px, 5.5vw, 72px);
  padding-top: 32px;
}

@media (max-width: 1100px) {
  .hero-band { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .hero-band { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hero-band-tile-name { font-size: 0.66rem; padding: 14px 10px 10px; }
  .hero-band-tile-name small { font-size: 0.58rem; }
}

/* ===== Discipline grid (Under one roof) ===== */
.discipline-grid {
  display: grid; gap: 24px; margin-top: 56px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.discipline-card {
  background: var(--cream); padding: 36px 28px 32px;
  border-top: 2px solid var(--gold);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.discipline-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(15, 27, 45, 0.08);
}
.discipline-num {
  font-family: 'Fraunces', serif; font-size: 2rem;
  color: var(--gold); font-weight: 500;
  letter-spacing: 0.08em; margin-bottom: 16px; line-height: 1;
}
.discipline-title {
  font-family: 'Fraunces', serif; font-size: 1.5rem;
  margin-bottom: 14px; color: var(--text-on-cream);
  font-weight: 600; line-height: 1.2;
}
.discipline-desc {
  font-size: 0.95rem; line-height: 1.65; color: var(--muted-on-cream);
}

/* ===== Institutional memory (Since 2004) ===== */
.memory-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start;
}
.memory-content h2 {
  font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1.05;
}
.memory-timeline {
  border-left: 1px solid var(--rule-on-navy);
  padding-left: 32px;
}
.memory-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 28px;
  padding: 18px 0; border-bottom: 1px solid var(--rule-on-navy);
  align-items: baseline;
}
.memory-row:last-child { border-bottom: none; }
.memory-year {
  font-family: 'Fraunces', serif; font-size: 1.4rem;
  color: var(--gold); font-weight: 500; letter-spacing: 0.04em;
}
.memory-event {
  font-size: 0.95rem; color: var(--muted-on-navy); line-height: 1.55;
}
.memory-row-now .memory-year { color: var(--cream); font-style: italic; }
.memory-row-now .memory-event { color: var(--cream); font-weight: 500; }

/* ===== Friction grid (What this means) ===== */
.friction-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin-top: 56px;
}
.friction-card {
  background: var(--cream-alt); padding: 40px 36px;
  border-left: 3px solid var(--gold);
}
.friction-num {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 0.72rem;
  color: var(--gold); letter-spacing: 0.24em; font-weight: 600;
  margin-bottom: 18px; text-transform: uppercase;
}
.friction-title {
  font-family: 'Fraunces', serif; font-size: 1.6rem;
  margin-bottom: 16px; color: var(--text-on-cream);
  font-weight: 600; line-height: 1.2;
}
.friction-desc {
  font-size: 1rem; line-height: 1.65; color: var(--muted-on-cream);
}

@media (max-width: 900px) {
  .memory-grid, .friction-grid, .team-mosaic-grid { grid-template-columns: 1fr; }
  .team-mosaic-grid { grid-template-columns: 1fr 1fr 1fr; }
  .memory-timeline { padding-left: 24px; }
  .memory-row { grid-template-columns: 56px 1fr; gap: 20px; }
}

/* ===== Process steps ===== */
.process-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  margin-top: 72px; position: relative;
}
.process-grid::before {
  content: ""; position: absolute; top: 28px; left: 10%; right: 10%;
  height: 1px; background: var(--gold-soft); z-index: 0;
}
.process-step {
  text-align: center; padding: 0 16px; position: relative; z-index: 1;
}
.process-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy-deep); border: 1px solid var(--gold);
  color: var(--gold); display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-size: 1.5rem; margin-bottom: 24px;
}
.process-title {
  font-family: 'Fraunces', serif; font-size: 1.5rem;
  font-style: italic; margin-bottom: 12px; color: var(--cream);
}
.process-desc {
  font-size: 0.9rem; line-height: 1.55; color: var(--muted-on-navy);
}

/* ===== Property cards ===== */
.listings-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 56px;
}
.listing-card {
  background: var(--cream-bright); transition: transform 0.3s, box-shadow 0.3s;
  display: block; text-decoration: none; color: inherit;
}
.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(15, 27, 45, 0.10);
}
.listing-card * { text-decoration: none; }
.listing-img {
  aspect-ratio: 4/3; background: var(--navy-soft); overflow: hidden;
}
.listing-img img { width: 100%; height: 100%; object-fit: cover; }
.listing-body { padding: 24px 28px 32px; }
.listing-tag {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.listing-title {
  font-family: 'Fraunces', serif; font-size: 1.4rem;
  line-height: 1.2; margin-bottom: 8px; color: var(--text-on-cream);
}
.listing-loc {
  font-size: 0.88rem; color: var(--muted-on-cream); margin-bottom: 16px;
}
.listing-meta {
  display: flex; gap: 16px; font-size: 0.82rem; color: var(--muted-on-cream);
  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule-on-cream);
}
.listing-price {
  font-family: 'Fraunces', serif; font-size: 1.5rem;
  color: var(--text-on-cream); font-weight: 500;
}

/* ===== Testimonials ===== */
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
  margin-top: 64px;
}
.testimonial {
  position: relative; padding-top: 48px;
}
.testimonial::before {
  content: "\201C"; position: absolute; top: -8px; left: -8px;
  font-family: 'Fraunces', serif; font-size: 5rem;
  color: var(--gold); line-height: 1; font-weight: 500;
}
.testimonial-text {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(1.15rem, 1.4vw, 1.35rem); line-height: 1.5;
  color: var(--cream); margin-bottom: 24px;
}
.testimonial-author {
  font-size: 0.85rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold);
}
.testimonial-author small {
  display: block; text-transform: none; letter-spacing: 0;
  color: var(--muted-on-navy); margin-top: 4px; font-size: 0.8rem;
}

/* ===== Field Notes + Library two-col ===== */
.split-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px;
  margin-top: 64px;
}
.notes-list { display: flex; flex-direction: column; gap: 36px; }
.note-card {
  display: grid; grid-template-columns: 200px 1fr; gap: 32px;
  padding-bottom: 36px; border-bottom: 1px solid var(--rule-on-cream);
}
.note-card:last-child { border-bottom: none; }
.note-img {
  aspect-ratio: 4/3; background: var(--navy-soft); overflow: hidden;
}
.note-img img { width: 100%; height: 100%; object-fit: cover; }
.note-date {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.note-title {
  font-family: 'Fraunces', serif; font-size: clamp(1.3rem, 1.6vw, 1.55rem);
  line-height: 1.25; margin-bottom: 10px; color: var(--text-on-cream);
}
.note-excerpt {
  font-size: 0.92rem; line-height: 1.6; color: var(--muted-on-cream);
  margin-bottom: 12px;
}

.library {
  background: var(--cream-alt); padding: 48px; border-left: 1px solid var(--gold-soft);
}
.library-eyebrow {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.library-title {
  font-family: 'Fraunces', serif; font-size: 2rem;
  margin-bottom: 32px; color: var(--text-on-cream);
}
.book-stack { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }
.book {
  display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: center;
}
/* Same real-book treatment as the Library, scaled for the home thumbnails */
.book-cover {
  position: relative; aspect-ratio: 2/3; overflow: visible;
  filter: drop-shadow(0 8px 12px rgba(13, 28, 52, 0.32));
  transition: transform 0.4s cubic-bezier(.2,.85,.25,1), filter 0.4s ease;
}
.book-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  position: relative; z-index: 2; border-radius: 1px 3px 3px 1px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.book-cover::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 11%; z-index: 3;
  pointer-events: none; border-radius: 1px 0 0 1px;
  background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.08) 34%,
    rgba(255,255,255,.16) 54%, rgba(255,255,255,0) 72%);
}
.book-cover::after {
  content: ""; position: absolute; top: 2%; bottom: 2%; right: -4px; width: 5px; z-index: 1;
  border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(90deg, #f0ead9 0 0.8px, #cdc4ae 0.8px 1.9px);
  box-shadow: 1px 0 2px rgba(13,28,52,.25);
}
.book:hover .book-cover { transform: translateY(-3px); filter: drop-shadow(0 12px 16px rgba(13,28,52,.44)); }
.book-stack .book:nth-of-type(3) .book-cover img { object-position: center top; }
.book-title {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1.15rem; color: var(--text-on-cream); line-height: 1.25;
  margin-bottom: 4px;
}
.book-meta { font-size: 0.78rem; color: var(--muted-on-cream); }

/* ===== Final CTA ===== */
.final-cta {
  background: var(--navy-deep); color: var(--text-on-navy);
  text-align: center; padding: clamp(80px, 10vw, 130px) 0;
  position: relative;
}
.final-cta::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 56px; height: 1px; background: var(--gold);
}
.signature {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 2.5rem; color: var(--gold); margin-bottom: 8px;
}
.final-cta h2 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem); margin-bottom: 32px;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--navy-deep); color: var(--muted-on-navy);
  padding: 80px 0 32px; border-top: 1px solid var(--rule-on-navy);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 56px;
  margin-bottom: 64px;
}
.footer-brand .logo { font-size: 2rem; }
.footer-brand p {
  font-size: 0.92rem; line-height: 1.65; margin-top: 20px; max-width: 320px;
}
.footer-col h4 {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; font-size: 0.92rem; }
.footer-col a { color: var(--cream); transition: color 0.2s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid var(--rule-on-navy); padding-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; flex-wrap: wrap; gap: 16px;
}
.credentials { display: flex; gap: 20px; color: var(--gold); letter-spacing: 0.1em; font-size: 0.78rem; }

.footer-legal {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--rule-on-navy);
  max-width: 1100px;
}
.footer-legal p {
  font-size: 0.66rem; line-height: 1.6;
  color: var(--muted-on-navy); opacity: 0.62;
  margin: 0 0 10px;
}
.footer-legal p:last-child { margin-bottom: 0; }

.footer-socials {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 28px 0; margin-top: 8px;
  border-top: 1px solid var(--rule-on-navy);
  border-bottom: 1px solid var(--rule-on-navy);
  margin-bottom: 32px;
}
.footer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--rule-on-navy); color: var(--muted-on-navy);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer-socials a:hover { color: var(--navy-deep); background: var(--gold); border-color: var(--gold); }
.footer-socials svg { width: 16px; height: 16px; fill: currentColor; }

/* ===== Content page typography ===== */
.page-hero {
  background: var(--navy-deep); color: var(--text-on-navy);
  padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 7vw, 100px);
  border-bottom: 1px solid var(--rule-on-navy);
}
.page-hero .eyebrow { margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.page-hero h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); margin-bottom: 24px; }
.page-hero .lede { color: var(--muted-on-navy); max-width: 680px; }

.prose {
  max-width: 720px; margin: 0 auto;
}
.prose h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem); margin: 64px 0 24px; color: var(--text-on-cream);
}
.prose h3 {
  font-size: 1.4rem; margin: 40px 0 16px; color: var(--text-on-cream);
}
.prose p {
  font-size: 1.05rem; line-height: 1.75; margin-bottom: 20px; color: var(--text-on-cream);
}
.prose p:first-of-type::first-letter {
  font-family: 'Fraunces', serif; font-size: 4.5rem;
  float: left; line-height: 0.85; margin: 4px 12px 0 -2px; color: var(--gold);
  font-weight: 500;
}
.prose strong { color: var(--text-on-cream); font-weight: 600; }
.prose blockquote {
  border-left: 2px solid var(--gold); padding: 0 0 0 28px;
  margin: 40px 0; font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1.45rem; line-height: 1.45; color: var(--text-on-cream);
}
.prose ul { padding-left: 24px; margin-bottom: 20px; }
.prose li { font-size: 1.05rem; line-height: 1.75; margin-bottom: 10px; }

/* ===== Team grid ===== */
.team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-top: 64px;
}
.team-card { }
.team-photo {
  aspect-ratio: 3/4; background: var(--navy-soft); overflow: hidden;
  margin-bottom: 20px;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.4s; }
.team-card:hover .team-photo img { filter: grayscale(0%); }
.team-name {
  font-family: 'Fraunces', serif; font-size: 1.4rem;
  margin-bottom: 4px; color: var(--text-on-cream);
}
.team-role {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.team-bio {
  font-size: 0.92rem; line-height: 1.6; color: var(--muted-on-cream);
}

/* ===== Press archive ===== */
.press-list { margin-top: 56px; }
.press-item {
  display: grid; grid-template-columns: 140px 1fr auto; gap: 40px;
  padding: 32px 0; border-bottom: 1px solid var(--rule-on-cream);
  align-items: center;
}
.press-date {
  font-family: 'Fraunces', serif; font-size: 1.5rem;
  color: var(--gold); font-style: italic;
}
.press-outlet {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted-on-cream); margin-bottom: 6px;
}
.press-title {
  font-family: 'Fraunces', serif; font-size: 1.3rem;
  line-height: 1.3; color: var(--text-on-cream);
}

/* ===== Library page ===== */
.shelf {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  margin-top: 72px;
}
.shelf-book {
  text-align: center;
}
/* Real-book treatment: uniform cover face + bound spine + page fore-edge +
   grounded shadow, so each title reads as a physical book, not a framed image. */
.shelf-cover {
  position: relative; aspect-ratio: 2/3; width: 82%; margin: 0 auto 38px;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 22px 24px rgba(13, 28, 52, 0.34));
  transition: transform 0.5s cubic-bezier(.2,.85,.25,1), filter 0.5s ease;
}
.shelf-cover img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  position: relative; z-index: 2; border-radius: 2px 4px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
/* spine binding: shadow at the bound edge + a thin highlight where it lifts */
.shelf-cover::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 9%; z-index: 3;
  pointer-events: none; border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg,
    rgba(0,0,0,.32) 0%, rgba(0,0,0,.10) 32%, rgba(255,255,255,.18) 52%,
    rgba(255,255,255,.05) 64%, rgba(255,255,255,0) 100%);
}
/* fore-edge: stacked page laminations peeking behind the right edge */
.shelf-cover::after {
  content: ""; position: absolute; top: 1.5%; bottom: 1.5%; right: -7px; width: 9px; z-index: 1;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(90deg, #f0ead9 0 1px, #cdc4ae 1px 2.4px);
  box-shadow: 2px 0 3px rgba(13,28,52,.22);
}
.shelf-book:hover .shelf-cover {
  transform: translateY(-10px) rotate(-0.5deg);
  filter: drop-shadow(0 30px 32px rgba(13, 28, 52, 0.5));
}
.shelf-title {
  font-family: 'Fraunces', serif; font-size: 1.6rem;
  line-height: 1.2; margin-bottom: 8px; color: var(--text-on-cream);
}
.shelf-subtitle {
  font-style: italic; font-size: 0.95rem; color: var(--muted-on-cream);
  margin-bottom: 16px;
}
.shelf-meta {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
}

/* ===== Video grid ===== */
.video-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 56px;
}
.video-card {
  position: relative; cursor: pointer; transition: transform 0.3s;
}
.video-card:hover { transform: translateY(-4px); }
.video-thumb {
  aspect-ratio: 16/9; background: var(--navy); position: relative; overflow: hidden;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb::after {
  content: "\25B6"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 64px; height: 64px;
  border-radius: 50%; background: rgba(13, 28, 52, 0.85);
  color: var(--gold); display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; border: 1px solid var(--gold);
  padding-left: 4px;
}
.video-meta {
  padding: 20px 0 0;
}
.video-title {
  font-family: 'Fraunces', serif; font-size: 1.2rem;
  line-height: 1.3; margin-bottom: 6px; color: var(--text-on-cream);
}

/* ===== Single post ===== */
.post-hero {
  background: var(--navy-deep); color: var(--text-on-navy);
  padding: clamp(80px, 10vw, 120px) 0 clamp(40px, 6vw, 80px);
  text-align: center; border-bottom: 1px solid var(--rule-on-navy);
}
.post-hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem); max-width: 880px;
  margin: 24px auto; line-height: 1.1;
}
.post-meta {
  display: flex; gap: 24px; justify-content: center; align-items: center;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
}
.post-img-hero {
  aspect-ratio: 21/9; background: var(--navy); overflow: hidden;
}
.post-img-hero img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Inline contact form ===== */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; margin-top: 56px;
}
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block; font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.form-field input, .form-field textarea {
  width: 100%; padding: 14px 16px; background: var(--cream-bright);
  border: 1px solid var(--rule-on-cream); font-family: inherit; font-size: 1rem;
  color: var(--text-on-cream); transition: border-color 0.2s;
}
.form-field input:focus, .form-field textarea:focus {
  outline: none; border-color: var(--gold);
}

/* ===== Utility ===== */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mt-l { margin-top: 56px; }
.flex-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ===== Section header pattern ===== */
.section-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 0; gap: 40px; flex-wrap: wrap;
}
.section-header-text { max-width: 640px; }
.section-header .eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.section-header h2 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 16px; }
.section-header .lede { color: inherit; opacity: 0.85; }

/* ===== Floating contact ===== */
.float-whatsapp {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: white; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.float-whatsapp:hover { transform: scale(1.08); }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-portrait { max-width: 480px; margin: 0 auto; }
  .fears-grid { grid-template-columns: 1fr; gap: 40px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 24px; border-bottom: 1px solid var(--rule-on-cream); }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .process-grid::before { display: none; }
  .listings-grid, .testimonials-grid, .team-grid, .shelf, .video-grid { grid-template-columns: 1fr 1fr; }
  .split-grid { grid-template-columns: 1fr; gap: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container, .container-narrow { padding: 0 20px; }
  .header-inner { padding: 16px 20px; flex-wrap: wrap; gap: 12px; }
  .nav-main { display: none; }
  .contact-strip { display: none; }
  .hero { padding: 60px 0 40px; }
  .listings-grid, .testimonials-grid, .team-grid, .shelf, .video-grid, .process-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-right: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .note-card { grid-template-columns: 1fr; }
  .press-item { grid-template-columns: 1fr; gap: 8px; }
  .featured-logos { gap: 24px; }
  .featured-logos span + span::before { display: none; }
}

/* ===== Listing detail page ===== */
.listing-breadcrumb {
  background: var(--navy-deep); color: var(--muted-on-navy);
  padding: 20px 0; font-size: 0.78rem; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--rule-on-navy);
}
.listing-breadcrumb a { color: var(--muted-on-navy); transition: color 0.2s; }
.listing-breadcrumb a:hover { color: var(--gold); }
.listing-breadcrumb .sep { margin: 0 12px; color: var(--gold); opacity: 0.6; }

.listing-page-hero {
  position: relative; height: clamp(420px, 60vh, 640px);
  background: var(--navy); overflow: hidden;
}
.listing-page-hero img {
  width: 100%; height: 100%; object-fit: cover;
}
.listing-page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(11, 18, 32, 0.78) 100%);
  pointer-events: none;
}
.listing-page-hero-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 56px 0 48px; color: var(--cream);
  z-index: 1;
}
.listing-page-hero-overlay .container { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.listing-page-hero-tag {
  font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.listing-page-hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: 1.05;
  color: var(--cream); margin-bottom: 14px; max-width: 720px;
}
.listing-page-hero-addr {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1.15rem; color: var(--muted-on-navy);
}
.listing-page-hero-price {
  font-family: 'Fraunces', serif; font-size: clamp(2rem, 3vw, 2.8rem);
  color: var(--gold); font-weight: 500; white-space: nowrap;
}
.listing-page-hero-price small {
  display: block; font-family: 'Hanken Grotesk', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-on-navy);
  margin-top: 6px; font-weight: 400;
}

.listing-spec-bar {
  background: var(--cream-bright); border-bottom: 1px solid var(--rule-on-cream);
  padding: 28px 0;
}
.listing-spec-bar .container {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px;
}
.listing-spec {
  border-left: 1px solid var(--rule-on-cream); padding-left: 20px;
}
.listing-spec:first-child { border-left: none; padding-left: 0; }
.listing-spec-label {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px; font-weight: 500;
}
.listing-spec-val {
  font-family: 'Fraunces', serif; font-size: 1.5rem;
  color: var(--text-on-cream); font-weight: 500; line-height: 1.1;
}

.listing-body-section {
  background: var(--cream); padding: clamp(64px, 7vw, 96px) 0;
}
.listing-body-grid {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px;
  align-items: start;
}
.listing-prose h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin-bottom: 24px;
  color: var(--text-on-cream); font-weight: 600;
}
.listing-prose p {
  font-size: 1.05rem; line-height: 1.75;
  color: var(--text-on-cream); margin-bottom: 20px;
}
.listing-prose p:last-child { margin-bottom: 0; }

.listing-sidebar {
  position: sticky; top: 100px;
  background: var(--navy-deep); color: var(--cream);
  padding: 36px 32px;
}
.listing-sidebar h3 {
  font-family: 'Fraunces', serif; font-size: 1.5rem;
  color: var(--cream); margin-bottom: 14px;
}
.listing-sidebar p {
  font-size: 0.95rem; color: var(--muted-on-navy); line-height: 1.6;
  margin-bottom: 24px;
}
.listing-sidebar .btn { width: 100%; justify-content: center; margin-bottom: 12px; }
.listing-sidebar-meta {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule-on-navy);
  font-size: 0.82rem; color: var(--muted-on-navy); line-height: 1.7;
}
.listing-sidebar-meta strong { color: var(--cream); font-weight: 500; }

.listing-gallery-section {
  background: var(--cream-alt); padding: clamp(56px, 6vw, 80px) 0;
}
.listing-gallery {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px;
  grid-auto-rows: 220px;
}
.listing-gallery > *:first-child { grid-row: span 2; }
.listing-gallery img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.listing-neighborhood {
  background: var(--navy); color: var(--cream);
  padding: clamp(64px, 7vw, 96px) 0;
}
.listing-neighborhood h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 3vw, 2.8rem); margin-bottom: 24px;
  color: var(--cream); max-width: 720px;
}
.listing-neighborhood .lede {
  color: var(--muted-on-navy); max-width: 720px;
}
.listing-neighborhood-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 56px;
}
.listing-neighborhood-stat {
  border-top: 1px solid var(--rule-on-navy); padding-top: 20px;
}
.listing-neighborhood-stat-label {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.listing-neighborhood-stat-val {
  font-family: 'Fraunces', serif; font-size: 1.3rem;
  color: var(--cream); line-height: 1.3;
}

@media (max-width: 900px) {
  .listing-body-grid { grid-template-columns: 1fr; gap: 48px; }
  .listing-sidebar { position: static; }
  .listing-spec-bar .container { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .listing-spec { border-left: none; padding-left: 0; }
  .listing-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .listing-gallery > *:first-child { grid-row: span 1; grid-column: span 2; }
  .listing-neighborhood-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* =========================================================
   VIDEO SECTION
   ========================================================= */

.video-featured {
  cursor: pointer;
  margin: 48px 0 32px;
  border-radius: var(--radius);
  overflow: hidden;
}
.video-featured-inner {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--navy-deep);
}
.video-featured-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.video-featured:hover .video-featured-inner img {
  transform: scale(1.02);
}
.video-featured-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 48px 36px;
  background: linear-gradient(transparent, rgba(10, 20, 38, 0.85));
  pointer-events: none;
}
.video-feat-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.video-feat-title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--cream);
  line-height: 1.25;
}
.video-feat-title em {
  font-style: italic;
  color: var(--muted-on-navy);
}
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: rgba(246, 239, 225, 0.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  pointer-events: none;
}
.video-featured:hover .video-play-btn,
.video-row-card:hover .video-play-btn {
  background: var(--gold);
  transform: translate(-50%, -50%) scale(1.1);
}
.video-play-btn svg {
  width: 28px;
  height: 28px;
  fill: var(--navy);
  margin-left: 5px;
}
.video-play-sm {
  width: 48px;
  height: 48px;
}
.video-play-sm svg {
  width: 20px;
  height: 20px;
  margin-left: 3px;
}

.video-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.video-row-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.video-row-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.video-row-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--navy-deep);
}
.video-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.video-row-card:hover .video-row-thumb img {
  transform: scale(1.03);
}
.video-row-meta {
  padding: 20px 24px 24px;
  flex: 1;
}
.video-row-label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.video-row-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--cream);
  line-height: 1.4;
}

.video-channel-cta {
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.25);
  cursor: default;
}
.video-channel-inner {
  padding: 40px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.video-channel-icon {
  width: 52px;
  height: 52px;
  background: rgba(201, 168, 76, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.video-channel-icon svg {
  width: 26px;
  height: 26px;
  fill: var(--gold);
}
.video-channel-link {
  margin-top: 20px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 768px) {
  .video-row-grid { grid-template-columns: 1fr; }
  .video-featured-caption { padding: 24px 24px 20px; }
  .video-channel-inner { padding: 32px 24px; }
}

/* =========================================================
   HERO V2, Map-room background, kinetic typography, tooltip team
   ========================================================= */

.hero-v2 {
  position: relative;
  background: #07101f;
  isolation: isolate;
}
.hero-v2::before { display: none; } /* disable old radial */

.hero-map {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
  opacity: 0.55;
}
.hero-map-svg {
  width: 130%; height: 130%;
  position: absolute; top: -15%; left: -15%;
  display: block;
}
.hero-map-static-group path {
  fill: none;
  stroke: rgba(201, 168, 76, 0.10);
  stroke-width: 0.55;
}
.hero-map-pulse {
  fill: none;
  stroke: url(#beamGoldGradient);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-dasharray: 60 1800;
  animation: beam-drift var(--dur, 32s) linear var(--delay, 0s) infinite;
  filter: drop-shadow(0 0 4px rgba(230, 204, 122, 0.25));
  opacity: 0.5;
}
@keyframes beam-drift {
  0%   { stroke-dashoffset: 1500; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { stroke-dashoffset: -200; opacity: 0; }
}
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 28% 38%, rgba(22, 41, 74, 0.30), transparent 70%),
    radial-gradient(ellipse at center, transparent 55%, rgba(7, 16, 31, 0.85) 95%);
}
.hero-v2 .container { position: relative; z-index: 2; }

/* === Shimmer chip === */
.hero-chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 20px 9px 16px;
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(201, 168, 76, 0.10), rgba(201, 168, 76, 0.02) 50%, rgba(201, 168, 76, 0.10));
  background-size: 200% 100%;
  animation: chip-bg-shimmer 6s ease-in-out infinite;
  margin-bottom: 36px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-6px);
  animation: chip-bg-shimmer 6s ease-in-out infinite, chip-enter 0.8s cubic-bezier(.16,1,.3,1) 0.05s forwards;
}
.hero-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(230, 204, 122, 0.8), 0 0 0 0 rgba(201, 168, 76, 0.5);
  animation: chip-dot-pulse 2.4s ease-in-out infinite;
}
.hero-chip-text {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  background: linear-gradient(110deg, var(--cream) 35%, #fff8dc 45%, #fffceb 50%, #fff8dc 55%, var(--cream) 65%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: chip-text-shine 4.5s linear infinite;
}
@keyframes chip-bg-shimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes chip-dot-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(230, 204, 122, 0.8), 0 0 0 0 rgba(201, 168, 76, 0.5); }
  50%      { box-shadow: 0 0 18px rgba(230, 204, 122, 1),   0 0 0 8px rgba(201, 168, 76, 0); }
}
@keyframes chip-text-shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes chip-enter { to { opacity: 1; transform: translateY(0); } }

/* === Word-by-word reveal H1 === */
.hero-h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.8rem, 6.4vw, 5.6rem);
  line-height: 1.02;
  margin-bottom: 36px;
  max-width: 19ch;
  letter-spacing: -0.005em;
  color: var(--cream);
  font-weight: 500;
}
.hero-h1 .word,
.hero-h1 .gold-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(10px);
  animation: word-reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  margin-right: 0.18em;
}
.hero-h1 .gold-word {
  color: var(--gold);
  font-style: italic;
  display: block;
  margin-top: 0.05em;
  margin-right: 0;
}
.hero-h1 .word:nth-child(1) { animation-delay: 0.20s; }
.hero-h1 .word:nth-child(2) { animation-delay: 0.30s; }
.hero-h1 .word:nth-child(3) { animation-delay: 0.40s; }
.hero-h1 .word:nth-child(4) { animation-delay: 0.50s; }
.hero-h1 .gold-word        { animation-delay: 0.78s; animation-duration: 1.2s; }
@keyframes word-reveal {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* === Coordinates strip === */
.hero-coords {
  margin-top: 28px;
  display: inline-flex; align-items: center; gap: 18px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-navy);
}
.hero-coords .gold-rule { width: 28px; }

/* === Shimmer button === */
.btn-shimmer { position: relative; overflow: hidden; isolation: isolate; }
.btn-shimmer::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.55) 45%, transparent 65%);
  transform: translateX(-110%);
  transition: none;
  pointer-events: none;
  z-index: 1;
}
.btn-shimmer:hover::before { animation: btn-shine 1s ease-out; }
.btn-shimmer > span { position: relative; z-index: 2; }
@keyframes btn-shine { to { transform: translateX(110%); } }

/* === Hero band rewrite === */
.hero-v2 .hero-band-wrap {
  border-top: 1px solid var(--rule-on-navy);
  padding-top: clamp(40px, 4vw, 56px);
  margin-top: clamp(48px, 5vw, 72px);
}
.hero-band-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 36px;
  justify-content: center;
}
.hero-band-eyebrow .gold-rule { width: 36px; }

.hero-tooltip-row {
  display: flex; justify-content: center; align-items: center;
  padding: 36px 0 20px;
  position: relative;
}
.tt-portrait {
  position: relative;
  width: 100px; height: 100px;
  border-radius: 50%;
  overflow: visible;
  margin-left: -14px;
  cursor: pointer;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s linear 0.4s;
  display: block;
}
.tt-portrait:first-child { margin-left: 0; }
.tt-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #07101f;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  filter: grayscale(80%) brightness(0.92);
  transition: filter 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease;
  display: block;
}
.tt-portrait:hover {
  z-index: 20;
  transition-delay: 0s;
}
.tt-portrait:hover img {
  filter: grayscale(0) brightness(1.05) contrast(1.02);
  transform: translateY(-10px) scale(1.18);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(201, 168, 76, 0.5);
}
.tt-zoom-alejandro img { object-position: 64% 37%; transform: scale(1.6); }
.tt-zoom-alejandro:hover img { transform: translateY(-10px) scale(1.85); }
.tt-zoom-guille img { object-position: 50% 30%; transform: scale(1.2); }
.tt-zoom-guille:hover img { transform: translateY(-10px) scale(1.4); }

/* Tooltip card */
.tt-portrait::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 22px); left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.9);
  opacity: 0; visibility: hidden;
  white-space: nowrap;
  padding: 10px 18px 11px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-alt) 100%);
  color: var(--navy-deep);
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s;
  pointer-events: none;
  z-index: 30;
}
.tt-portrait::before {
  content: attr(data-role);
  position: absolute;
  bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0; visibility: hidden;
  white-space: nowrap;
  padding: 4px 12px;
  background: var(--navy-deep);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: var(--gold);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: opacity 0.3s ease 0.05s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, visibility 0s linear 0.35s;
  pointer-events: none;
  z-index: 31;
}
.tt-portrait:hover::after,
.tt-portrait:hover::before {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 0s;
}

.hero-v2 .hero-band-caption {
  margin-top: clamp(28px, 3vw, 36px);
  text-align: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  color: var(--cream);
  line-height: 1.4;
  letter-spacing: 0.01em;
  max-width: 760px;
  margin-left: auto; margin-right: auto;
}
.hero-v2 .hero-band-caption small {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif; font-style: normal;
  font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-navy); margin-top: 12px;
}

/* === Credentials marquee === */
.credentials-marquee {
  margin-top: clamp(48px, 5.5vw, 72px);
  padding: 24px 0;
  border-top: 1px solid var(--rule-on-navy);
  border-bottom: 1px solid var(--rule-on-navy);
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.credentials-track {
  display: flex; gap: 56px;
  align-items: center;
  width: max-content;
  animation: cred-scroll 50s linear infinite;
}
.credentials-track > span:not(.cred-sep) {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  color: var(--cream);
  opacity: 0.82;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-weight: 500;
}
.cred-sep {
  width: 1px; height: 20px;
  background: var(--gold);
  opacity: 0.5;
  display: block;
  flex-shrink: 0;
}
@keyframes cred-scroll { to { transform: translateX(-50%); } }

@media (max-width: 760px) {
  .hero-tooltip-row { flex-wrap: wrap; gap: 4px 0; justify-content: center; }
  .tt-portrait { width: 76px; height: 76px; margin-left: -10px; }
  .credentials-track { gap: 32px; }
  .credentials-track > span:not(.cred-sep) { font-size: 0.96rem; }
}

/* =========================================================
   ONE FIRM V2, Bento + Banco Piano animated beam
   ========================================================= */

.one-firm-v2 { position: relative; overflow: hidden; }
.dot-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(13, 28, 52, 0.10) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 35%, #000 0%, transparent 75%);
}
.one-firm-v2 .container { position: relative; z-index: 1; }

.firm-bento {
  display: grid;
  gap: 18px;
  margin-top: 64px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(220px, auto);
}
.bento-tile {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0d1c34 0%, #112441 100%);
  color: var(--cream);
  padding: 32px 28px;
  border: 1px solid rgba(201, 168, 76, 0.18);
  transition: border-color 0.4s ease, transform 0.3s ease;
  isolation: isolate;
}
.bento-tile::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), rgba(230, 204, 122, 0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
.bento-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 65%, rgba(201, 168, 76, 0.04) 100%);
  pointer-events: none;
  z-index: 0;
}
.bento-tile:hover {
  border-color: rgba(201, 168, 76, 0.55);
  transform: translateY(-2px);
}
.bento-tile:hover::before { opacity: 1; }
.bento-tile > * { position: relative; z-index: 2; }

.bento-num {
  font-family: 'Fraunces', serif;
  font-size: 2.1rem;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  line-height: 1;
}
.bento-title {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  color: var(--cream);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 14px;
}
.bento-desc {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--muted-on-navy);
}
.bento-corner {
  position: absolute; top: 16px; right: 16px;
  width: 14px; height: 14px;
  border-top: 1px solid rgba(201, 168, 76, 0.5);
  border-right: 1px solid rgba(201, 168, 76, 0.5);
  z-index: 2;
}
.bento-corner-gold {
  border-color: var(--gold);
  width: 22px; height: 22px;
  top: 20px; right: 20px;
}

/* Banco Piano flagship tile = 2 cols × 2 rows */
.bento-banking {
  grid-column: span 2;
  grid-row: span 2;
  padding: 44px 44px 40px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 168, 76, 0.12), transparent 55%),
    linear-gradient(180deg, #0a1628 0%, #112441 100%);
  border-color: rgba(201, 168, 76, 0.35);
}
.bento-banking-grid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  height: 100%;
  min-height: 420px;
}
.bento-banking-text { display: flex; flex-direction: column; }

.bento-eyebrow {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 14px;
  text-shadow: 0 0 12px rgba(230, 204, 122, 0.25);
}
.bento-num-inline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  text-transform: none;
  color: #fff8dc;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(230, 204, 122, 0.85);
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
  background: rgba(201, 168, 76, 0.08);
  box-shadow: inset 0 0 12px rgba(230, 204, 122, 0.15);
}
.bento-title-l {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  line-height: 1.12;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 18px;
  letter-spacing: -0.005em;
}
.bento-title-l em {
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
}
.bento-desc-l {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-on-navy);
  max-width: 540px;
  margin-bottom: 26px;
}
.bento-desc-l strong { color: var(--cream); font-weight: 600; }

.bento-stats {
  display: flex; gap: 36px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.bento-stat { display: flex; flex-direction: column; gap: 4px; }
.bento-stat-num {
  font-family: 'Fraunces', serif;
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
}
.bento-stat-lab {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-on-navy);
  font-weight: 500;
}

/* === Animated beam diagram === */
.beam-diagram {
  margin-top: auto;
  padding: 24px 0 4px;
  border-top: 1px solid var(--rule-on-navy);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 18px;
}
.beam-node {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  text-align: center;
}
.beam-node-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0d1c34 0%, #16294a 100%);
  border: 1px solid rgba(201, 168, 76, 0.45);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow:
    0 0 0 0 rgba(201, 168, 76, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: beam-node-pulse 3.2s ease-in-out infinite;
}
.beam-node-icon::before {
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%;
  background: url(#bancoNodeGlow);
  background: radial-gradient(circle, rgba(230, 204, 122, 0.25) 0%, transparent 70%);
  z-index: -1;
}
.beam-node-icon svg {
  width: 22px; height: 22px;
  fill: var(--gold);
}
.beam-node-bank { border-color: rgba(230, 204, 122, 0.7); }
.beam-node-bank svg { width: 24px; height: 24px; fill: var(--gold-light); }
.beam-node-label {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 500;
  line-height: 1.3;
}
.beam-node-label small {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--muted-on-navy);
  font-weight: 400;
  margin-top: 5px;
}
@keyframes beam-node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  50%      { box-shadow: 0 0 0 10px rgba(201, 168, 76, 0),   inset 0 1px 0 rgba(255, 255, 255, 0.06); }
}

.beam-channel {
  position: relative;
  width: 100%; height: 80px;
}
.beam-channel svg {
  width: 100%; height: 100%;
  overflow: visible;
}
.beam-line-base {
  fill: none;
  stroke: rgba(201, 168, 76, 0.22);
  stroke-width: 1.2;
  stroke-dasharray: 3 6;
}
.beam-line-anim {
  fill: none;
  stroke: url(#bancoBeamGradient);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 70 320;
  animation: beam-flow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  filter: drop-shadow(0 0 5px rgba(230, 204, 122, 0.5));
}
@keyframes beam-flow {
  0%   { stroke-dashoffset: 390; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { stroke-dashoffset: -70; opacity: 0; }
}
.beam-particle {
  fill: var(--gold-light);
  filter: drop-shadow(0 0 6px var(--gold));
}
.beam-stat {
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--gold-light);
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Bento responsive */
@media (max-width: 1000px) {
  .firm-bento { grid-template-columns: repeat(2, 1fr); }
  .bento-banking { grid-column: span 2; grid-row: auto; min-height: auto; }
  .bento-banking-grid { min-height: auto; }
}
@media (max-width: 620px) {
  .firm-bento { grid-template-columns: 1fr; }
  .bento-banking { grid-column: span 1; padding: 32px 24px; }
  .bento-stats { gap: 20px; }
  .bento-stat-num { font-size: 1.6rem; }
  .beam-diagram {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
    justify-items: center;
  }
  .beam-channel {
    width: 4px; height: 60px;
    background:
      repeating-linear-gradient(180deg, rgba(201, 168, 76, 0.22) 0 4px, transparent 4px 10px);
    border-radius: 2px;
  }
  .beam-channel svg { display: none; }
  .beam-channel::after {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 6px; height: 24px; transform: translateX(-50%);
    background: linear-gradient(180deg, var(--gold-light), transparent);
    animation: beam-flow-vertical 2.4s linear infinite;
    border-radius: 3px;
  }
  .beam-stat { position: static; transform: none; margin-top: 6px; }
}
@keyframes beam-flow-vertical {
  0%   { top: -24px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* =========================================================
   Universal entry reveal (CSS-only, runs once on page load)
   ========================================================= */
.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  animation: fade-in-up 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--fade-delay, 0s) forwards;
  will-change: opacity, transform, filter;
}
@keyframes fade-in-up {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* =========================================================
   HERO V4, Two-column split with archival photograph
   ========================================================= */

.hero-top-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 4.5vw, 64px);
  align-items: center;
}
.hero-text-col { min-width: 0; }
.hero-photo-col {
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* Photograph, vintage archival frame, slideshow */
.hero-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 0 0 auto;
  background: #0a1322;
  border: 1px solid rgba(201, 168, 76, 0.28);
  overflow: hidden;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 8px 24px -12px rgba(0, 0, 0, 0.5);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  /* Size to viewport so photo always lives above the fold */
  height: clamp(360px, 60vh, 560px);
  width: auto;
  max-width: 100%;
}
.hero-photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.03) brightness(0.92);
  opacity: 0;
  transition: opacity 1.4s ease;
  z-index: 1;
}
.hero-photo-img.is-active { opacity: 1; }
.hero-photo:hover { transform: translateY(-3px); }
.hero-photo:hover .hero-photo-img.is-active {
  filter: grayscale(100%) contrast(1.08) brightness(1);
}

/* Inner secondary frame (gold rule) */
.hero-photo::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(201, 168, 76, 0.18);
  z-index: 3;
  pointer-events: none;
}
/* Top-down subtle vignette + bottom darker grade for caption depth */
.hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 16, 31, 0.20) 0%, transparent 18%, transparent 70%, rgba(7, 16, 31, 0.45) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Corner ticks (vintage darkroom marker feel) */
.hero-photo-corner {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 4;
  pointer-events: none;
}
.hero-photo-corner::before,
.hero-photo-corner::after {
  content: ""; position: absolute;
  background: var(--gold);
  opacity: 0.85;
}
.hero-photo-corner::before { width: 22px; height: 1px; top: 0; left: 0; }
.hero-photo-corner::after  { width: 1px; height: 22px; top: 0; left: 0; }
.hero-photo-corner-tl { top: 18px; left: 18px; }
.hero-photo-corner-tr { top: 18px; right: 18px; transform: scaleX(-1); }
.hero-photo-corner-bl { bottom: 18px; left: 18px; transform: scaleY(-1); }
.hero-photo-corner-br { bottom: 18px; right: 18px; transform: scale(-1, -1); }

/* Small credit mark, lower frame */
.hero-photo-mark {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  z-index: 6;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--cream);
  opacity: 0.78;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

/* Caption, editorial */
.hero-photo-caption {
  margin: 20px 0 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-on-navy);
}
.hero-photo-credit {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.hero-photo-place {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--cream);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.hero-photo-sub {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-navy);
  font-weight: 500;
}
.hero-photo-archive {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0;
}
.hero-photo-archive-num {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.hero-photo-archive-lab {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-navy);
  font-weight: 500;
}

/* Light-shaft beams catching the photograph, CSS-only, always visible */
.hero-photo-beam {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
  will-change: transform;
}
.hero-photo-beam-1 {
  background: linear-gradient(112deg,
    transparent 36%,
    rgba(230, 204, 122, 0) 41%,
    rgba(230, 204, 122, 0.45) 47%,
    rgba(255, 248, 220, 0.85) 50%,
    rgba(230, 204, 122, 0.45) 53%,
    rgba(230, 204, 122, 0) 59%,
    transparent 64%);
  opacity: 0.7;
  animation: photo-beam-drift-1 22s ease-in-out infinite;
}
.hero-photo-beam-2 {
  background: linear-gradient(96deg,
    transparent 40%,
    rgba(230, 204, 122, 0) 44%,
    rgba(230, 204, 122, 0.3) 49%,
    rgba(246, 239, 225, 0.55) 50%,
    rgba(230, 204, 122, 0.3) 51%,
    rgba(230, 204, 122, 0) 56%,
    transparent 60%);
  opacity: 0.55;
  animation: photo-beam-drift-2 34s ease-in-out infinite;
  animation-delay: -11s;
}
@keyframes photo-beam-drift-1 {
  0%, 100% { transform: translate(-18%, -12%); }
  50%      { transform: translate(12%, 12%); }
}
@keyframes photo-beam-drift-2 {
  0%, 100% { transform: translate(12%, -8%); }
  50%      { transform: translate(-12%, 8%); }
}

/* Responsive */
@media (max-width: 980px) {
  .hero-top-split { grid-template-columns: 1fr; gap: 56px; }
  .hero-photo-col { max-width: 460px; }
  .hero-photo { aspect-ratio: 5 / 6; }
}
@media (max-width: 600px) {
  .hero-photo-col { max-width: 100%; }
  .hero-fg-beams { display: none; }
  .hero-photo-corner { width: 16px; height: 16px; top: 12px; left: 12px; }
  .hero-photo-corner::before { width: 16px; }
  .hero-photo-corner::after { height: 16px; }
  .hero-photo-corner-tl { top: 12px; left: 12px; }
  .hero-photo-corner-tr { top: 12px; right: 12px; }
  .hero-photo-corner-bl { bottom: 12px; left: 12px; }
  .hero-photo-corner-br { bottom: 12px; right: 12px; }
  .hero-photo-caption { flex-direction: column; gap: 10px; }
  .hero-photo-archive { align-items: flex-start; }
}

/* =========================================================
   HERO V3, Institutional editorial (overrides V2 chip/word-reveal)
   ========================================================= */

.hero-eyebrow-line {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.hero-eyebrow-line .gold-rule { width: 40px; opacity: 0.7; }

/* H1, calm single fade (overrides word-reveal) */
.hero-h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.9rem, 3.1vw, 3rem);
  line-height: 1.08;
  margin-bottom: 18px;
  max-width: 26ch;
  letter-spacing: -0.005em;
  color: var(--cream);
  font-weight: 500;
}
.hero-h1 .gold-word {
  color: var(--gold);
  font-style: italic;
  display: block;
  margin-top: 0.04em;
}
/* Kill the word-reveal stagger entirely */
.hero-h1 .word { display: inline; opacity: 1; transform: none; filter: none; animation: none; }
.hero-h1 .gold-word { opacity: 1; transform: none; filter: none; animation: none; }

/* Hero meta, compact inline (single row) */
.hero-meta-inline {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-on-navy);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted-on-navy);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  line-height: 1.4;
}
.hero-meta-inline strong {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
  font-weight: 500;
  margin-right: 4px;
  letter-spacing: -0.005em;
}
.hero-meta-inline .meta-dot {
  color: var(--gold);
  opacity: 0.4;
}

/* Legacy hero-meta (unused but kept) */
.hero-meta {
  margin-top: 32px;
  display: flex; align-items: stretch; gap: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--rule-on-navy);
  max-width: 720px;
}
.hero-meta-item {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  padding-right: 32px;
}
.hero-meta-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1; color: var(--gold);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.hero-meta-lab {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted-on-navy);
  font-weight: 500;
}
.hero-meta-rule {
  width: 1px; background: var(--rule-on-navy);
  margin: 4px 32px 4px 0;
}

@media (max-width: 720px) {
  .hero-meta { flex-direction: column; gap: 18px; padding-top: 20px; }
  .hero-meta-item { padding-right: 0; }
  .hero-meta-rule { display: none; }
}

/* Team band, editorial uniform (overrides circular tooltip aesthetic) */
.hero-band-editorial {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.hero-band-editorial .hero-band-tile {
  aspect-ratio: 4 / 5;
  background: #0a1322;
  border: 1px solid rgba(201, 168, 76, 0.12);
  overflow: hidden; position: relative;
  display: block; text-decoration: none;
}
.hero-band-editorial .hero-band-tile img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  filter: grayscale(100%) contrast(1.05) brightness(0.92);
  transition: filter 0.6s ease, transform 0.7s ease;
}
.hero-band-editorial .hero-band-tile:hover img {
  filter: grayscale(0%) contrast(1.02) brightness(1);
  transform: scale(1.025);
}
.hero-band-editorial .hero-band-tile::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.45s ease;
  pointer-events: none;
}
.hero-band-editorial .hero-band-tile:hover::after {
  border-color: rgba(201, 168, 76, 0.45);
}
.hero-band-editorial .hero-band-tile-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 22px 16px 16px;
  background: linear-gradient(to top, rgba(7, 16, 31, 0.96) 0%, rgba(7, 16, 31, 0.78) 55%, transparent 100%);
  font-family: 'Fraunces', serif;
  font-size: 0.95rem; letter-spacing: 0.01em;
  font-style: italic; font-weight: 500;
  color: var(--cream); line-height: 1.25;
}
.hero-band-editorial .hero-band-tile-name small {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif; font-style: normal;
  font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
  font-weight: 500; margin-top: 6px;
}

@media (max-width: 1100px) {
  .hero-band-editorial { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .hero-band-editorial { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* =========================================================
   ONE FIRM V3, uniform editorial discipline row
   ========================================================= */

.one-firm-v3 {
  position: relative;
  padding-bottom: clamp(80px, 9vw, 130px) !important;
}
.one-firm-v3 .section-header {
  border-bottom: 1px solid var(--rule-on-cream);
  padding-bottom: 32px; margin-bottom: 56px;
}
.discipline-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-on-cream);
}
.disc-card {
  position: relative;
  padding: 44px 36px 40px;
  border-right: 1px solid var(--rule-on-cream);
  background: transparent;
  transition: background 0.3s ease;
}
.disc-card:last-child { border-right: none; }
.disc-card:hover { background: rgba(13, 28, 52, 0.025); }
.disc-rule {
  position: absolute; top: -1px; left: 0;
  height: 2px; width: 56px;
  background: var(--gold);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.disc-card:hover .disc-rule { width: 100%; }
.disc-num {
  font-family: 'Fraunces', serif;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.18em;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 500;
}
.disc-title {
  font-family: 'Fraunces', serif;
  font-size: 1.55rem;
  color: var(--text-on-cream);
  font-weight: 600;
  line-height: 1.18;
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.disc-desc {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--muted-on-cream);
}

@media (max-width: 980px) {
  .discipline-row { grid-template-columns: repeat(2, 1fr); }
  .disc-card { border-bottom: 1px solid var(--rule-on-cream); }
  .disc-card:nth-child(2) { border-right: none; }
  .disc-card:nth-child(3), .disc-card:nth-child(4) { border-bottom: none; }
}
@media (max-width: 580px) {
  .discipline-row { grid-template-columns: 1fr; }
  .disc-card { border-right: none; border-bottom: 1px solid var(--rule-on-cream); padding: 36px 4px 32px; }
  .disc-card:last-child { border-bottom: none; }
}

/* =========================================================
   BANCO PIANO, editorial feature spread
   ========================================================= */

.banco-feature {
  background:
    radial-gradient(ellipse 50% 60% at 85% 20%, rgba(201, 168, 76, 0.06), transparent 60%),
    #0a1422;
  position: relative;
  overflow: hidden;
}
.banco-feature::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(7, 16, 31, 0.4) 100%);
  pointer-events: none;
}
.banco-feature .container { position: relative; z-index: 1; }

.banco-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 88px;
  align-items: start;
}

.banco-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
}
.banco-eyebrow .gold-rule { width: 40px; }

.banco-h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.05;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 28px;
  letter-spacing: -0.008em;
}
.banco-h2-italic {
  display: block;
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
  margin-top: 0.05em;
}

.banco-lede {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  line-height: 1.55;
  color: var(--cream);
  margin-bottom: 24px;
  max-width: 560px;
}
.banco-lede strong { font-style: normal; color: var(--gold-light); font-weight: 600; letter-spacing: 0.01em; }

.banco-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted-on-navy);
  margin-bottom: 40px;
  max-width: 560px;
}
.banco-body strong { color: var(--cream); font-weight: 600; }

.banco-facts {
  display: flex; gap: 0;
  margin-bottom: 36px;
  border-top: 1px solid var(--rule-on-navy);
  border-bottom: 1px solid var(--rule-on-navy);
  padding: 24px 0;
}
.banco-fact {
  flex: 1; padding-right: 32px;
  display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--rule-on-navy);
}
.banco-fact:last-child { border-right: none; padding-right: 0; padding-left: 32px; }
.banco-fact:first-child { padding-left: 0; }
.banco-fact-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  line-height: 1; color: var(--gold);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.banco-fact-num small {
  font-size: 0.5em; font-weight: 500; color: var(--gold);
  margin-left: 2px; letter-spacing: 0;
}
.banco-fact-lab {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-on-navy);
  font-weight: 500; line-height: 1.4;
}

.banco-feature .btn-text { color: var(--gold); border-color: var(--gold-soft); }
.banco-feature .btn-text:hover { border-color: var(--gold); }

/* Right column, engraved seal + ledger meta */
.banco-visual { position: sticky; top: 100px; }
.banco-card {
  background:
    linear-gradient(180deg, rgba(246, 239, 225, 0.04) 0%, rgba(246, 239, 225, 0.01) 100%);
  border: 1px solid rgba(201, 168, 76, 0.25);
  padding: 56px 48px 48px;
  position: relative;
}
.banco-card::before {
  content: ""; position: absolute; top: 14px; left: 14px; right: 14px; bottom: 14px;
  border: 1px solid rgba(201, 168, 76, 0.12);
  pointer-events: none;
}

.banco-card-stamp {
  width: 220px; height: 220px;
  margin: 0 auto 40px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.banco-stamp-ring {
  position: relative;
  width: 200px; height: 200px;
  border: 2px solid rgba(201, 168, 76, 0.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle, rgba(201, 168, 76, 0.05) 0%, transparent 70%);
  animation: stamp-rotate 80s linear infinite;
}
.banco-stamp-ring::before {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 50%;
}
.banco-stamp-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  /* Counter-rotate so inner monogram stays upright */
  animation: stamp-rotate-rev 80s linear infinite;
  width: 110px; height: 110px; margin: auto;
  inset: 0;
}
.banco-stamp-monogram {
  font-family: 'Fraunces', serif;
  font-size: 1.65rem;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--cream);
  font-weight: 500;
  line-height: 1;
}
.banco-stamp-cross {
  display: flex; align-items: center; justify-content: center;
}
.banco-stamp-cross .gold-rule {
  width: 28px; height: 1px; background: var(--gold); opacity: 0.85;
}
.banco-stamp-est {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  color: var(--gold-light);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.banco-stamp-est span { letter-spacing: 0.16em; }
.banco-stamp-circle-text {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.banco-stamp-ring > .banco-stamp-inner { z-index: 2; }
@keyframes stamp-rotate { to { transform: rotate(360deg); } }
@keyframes stamp-rotate-rev { to { transform: rotate(-360deg); } }

/* Ledger meta block (right column secondary) */
.banco-card-meta {
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  padding-top: 24px;
}
.banco-card-meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(201, 168, 76, 0.10);
}
.banco-card-meta-row-last { border-bottom: none; }
.banco-card-meta-k {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted-on-navy);
  font-weight: 500; flex-shrink: 0;
}
.banco-card-meta-v {
  font-family: 'Fraunces', serif;
  font-size: 0.98rem; color: var(--cream);
  font-style: italic; font-weight: 500;
  text-align: right;
}

@media (max-width: 980px) {
  .banco-grid { grid-template-columns: 1fr; gap: 56px; }
  .banco-visual { position: static; }
  .banco-card { padding: 40px 28px; }
  .banco-card-stamp { width: 180px; height: 180px; }
  .banco-stamp-ring { width: 170px; height: 170px; }
}
@media (max-width: 540px) {
  .banco-facts { flex-direction: column; gap: 18px; padding: 20px 0; }
  .banco-fact { padding: 0 !important; border-right: none; border-bottom: 1px solid var(--rule-on-navy); padding-bottom: 16px !important; }
  .banco-fact:last-child { border-bottom: none; padding-bottom: 0 !important; }
  .banco-card-meta-row { flex-direction: column; gap: 4px; align-items: flex-start; }
  .banco-card-meta-v { text-align: left; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-map-pulse,
  .hero-photo-beam,
  .credentials-track,
  .banco-stamp-ring,
  .banco-stamp-inner,
  .fade-in-up,
  .hero-photo,
  .hero-photo img {
    animation: none !important;
    transition: none !important;
  }
  .hero-h1 .word, .hero-h1 .gold-word { opacity: 1; transform: none; filter: none; }
  .fade-in-up { opacity: 1; transform: none; filter: none; }
}

/* (Old full-bleed .hero-film V1 removed, class repurposed for the film-strip
   hero defined further down. No HTML uses the old structure.) */

/* Google Reviews inline badge (trust signal, brief #5) */
.greviews { display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 0.85rem; letter-spacing: .01em; }
.greviews .gr-stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; }
.greviews .gr-g { font-weight: 700; }
.greviews small { color: var(--muted-on-cream); }
.greviews.on-navy small { color: var(--muted-on-navy); }
.greviews.on-navy { color: var(--cream); }

/* In the Media, slow continuous marquee on deep navy (rAF-driven) */
.media-strip { background: var(--navy-deep); color: var(--cream);
  border-top: 1px solid var(--rule-on-navy); border-bottom: 1px solid var(--rule-on-navy);
  padding: clamp(34px, 4vw, 52px) 0; overflow: hidden; }
.media-strip-label { text-align: center; font-family: 'Hanken Grotesk', sans-serif; font-size: .72rem;
  font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
  margin-bottom: clamp(20px, 2.6vw, 32px); }
.media-marquee { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.media-track { display: flex; align-items: center; gap: 48px; width: max-content;
  will-change: transform; }
.media-track .media-item { display: inline-block; grid-template-columns: none; gap: 0;
  padding: 0; border-top: none; align-items: center;
  font-family: 'Fraunces', serif; font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  color: var(--cream); opacity: .84; letter-spacing: .02em; white-space: nowrap; text-decoration: none; }
.media-track a.media-item:hover { opacity: 1; color: var(--gold-light); }
.media-sep { flex: 0 0 auto; width: 1px; height: 22px; background: var(--gold); opacity: .45; }

/* Declaration-style FAQ list (no-escrow expansion, brief #16) */
.decl-list { display: grid; gap: 0; margin-top: 44px; max-width: 980px; }
.decl-item { padding: 26px 0; border-top: 1px solid var(--rule-on-navy); display: grid;
  grid-template-columns: minmax(0,1fr); gap: 8px; }
.decl-item:last-child { border-bottom: 1px solid var(--rule-on-navy); }
.decl-head { font-family: 'Fraunces', serif; font-size: clamp(1.15rem,1.8vw,1.5rem);
  color: var(--cream); line-height: 1.2; }
.decl-body { color: var(--muted-on-navy); font-size: 1rem; line-height: 1.6; max-width: 70ch; }
.decl-body strong { color: var(--text-on-navy); font-weight: 600; }

/* Newsletter editorial invite (brief #3) */
.news-invite { background: var(--cream-alt); }
.news-invite .container { padding-top: 72px; padding-bottom: 72px; max-width: 760px; text-align: center; }
.news-invite .eyebrow { justify-content: center; display: inline-flex; gap: 10px; align-items: center; }
.news-invite h2 { margin: 14px 0 12px; }
.news-invite p { color: var(--muted-on-cream); margin-bottom: 28px; }
.news-form { display: flex; gap: 12px; max-width: 480px; margin: 0 auto; }
.news-form input { flex: 1; padding: 14px 18px; border: 1px solid var(--rule-on-cream);
  background: var(--cream-bright); font-family: 'Hanken Grotesk', sans-serif; font-size: .95rem;
  color: var(--text-on-cream); border-radius: 0; }
.news-form input:focus { outline: none; border-color: var(--gold); }
@media (max-width: 540px){ .news-form { flex-direction: column; } .news-form .btn { width: 100%; justify-content: center; } }

/* Language toggle (EN/ES) in contact strip (brief #1) */
.lang-toggle { display: inline-flex; gap: 2px; align-items: center; font-weight: 600; }
.lang-toggle a { padding: 0 4px; opacity: .55; letter-spacing: .04em; }
.lang-toggle a.active { opacity: 1; color: var(--gold); }
.lang-toggle .lang-sep { opacity: .4; }

/* Light outline button (for use on dark photo/navy) */
.btn-outline-light { background: transparent; border: 1px solid rgba(245,241,232,0.55); color: var(--cream); }
.btn-outline-light:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }

/* Header logo size-up (brief #6) */
.site-header .logo img { height: 57px; }

/* I/II/III/IV uniform block height (brief #14) */
.disc-card .disc-desc { min-height: 5.6em; }
@media (max-width: 860px){ .disc-card .disc-desc { min-height: 0; } }
/* Forthcoming book teaser (brief #19) */
.book-forthcoming { font-family: 'Fraunces', serif; font-style: italic; color: var(--gold);
  font-size: 1.02rem; margin: 18px 0 22px; text-align: center; }

/* About, office showcase ("The Desk" moved from home, brief #11/#20) */
.office-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 1fr; gap: 16px; margin-top: 44px; }
.office-shot { overflow: hidden; background: var(--cream-alt); }
.office-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.office-shot:hover img { transform: scale(1.03); }
.office-shot-wide { grid-row: span 2; }
@media (max-width: 760px){ .office-gallery { grid-template-columns: 1fr; } .office-shot-wide { grid-row: auto; } .office-shot img { aspect-ratio: 3/2; } }

/* About, uniform team bio height (brief #9/#21) */
.team-card .team-bio { min-height: 6.6em; }
@media (max-width: 860px){ .team-card .team-bio { min-height: 0; } }

/* =========================================================
   BOOK READER, homemade in-site reading platform (brief #18)
   ========================================================= */
/* Reading room: dark, focused. Book sits on the page like an object on a desk. */
.reader-shell { position: fixed; inset: 0; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 12%, #20304f 0%, var(--navy-deep) 46%, #0c1322 100%);
  color: var(--cream); overflow: hidden; }

/* Top bar */
.reader-bar { flex: 0 0 auto; z-index: 30; display: flex; align-items: center; gap: 18px;
  padding: 12px 22px; background: linear-gradient(180deg, rgba(8,13,24,.55), rgba(8,13,24,0));
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.reader-back { color: var(--cream); font-family: 'Hanken Grotesk', sans-serif; font-size: .84rem;
  letter-spacing: .03em; display: inline-flex; gap: 8px; align-items: center; opacity: .8;
  transition: opacity .15s, color .15s; }
.reader-back:hover { opacity: 1; color: var(--gold-light); }
.reader-bar-titles { line-height: 1.18; min-width: 0; }
.reader-title { font-family: 'Fraunces', serif; font-size: 1.08rem; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-sub { font-family: 'Hanken Grotesk', sans-serif; color: var(--muted-on-navy); font-size: .74rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-textlink { margin-left: auto; font-family: 'Hanken Grotesk', sans-serif; font-size: .76rem;
  letter-spacing: .04em; color: var(--cream); opacity: .8; border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 1px; transition: opacity .15s, color .15s; white-space: nowrap; }
.reader-textlink:hover { opacity: 1; color: var(--gold-light); }
.reader-progress { margin-left: 20px; font-family: 'Hanken Grotesk', sans-serif; font-size: .82rem;
  color: var(--muted-on-navy); letter-spacing: .04em; white-space: nowrap; }
.reader-progress strong { color: var(--cream); font-weight: 600; }

/* Stage: where the book lives, fills space between bars. Scrolls only when zoomed. */
.reader-stage { flex: 1 1 auto; position: relative; display: flex; align-items: center;
  justify-content: center; overflow: hidden; padding: 22px; min-height: 0; }
.reader-stage.is-zoomed { overflow: auto; cursor: grab; align-items: flex-start; justify-content: flex-start; }
.reader-stage.is-zoomed.is-panning { cursor: grabbing; }

.reader-zoom { position: relative; z-index: 1; transform: scale(var(--z, 1)); transform-origin: center center;
  transition: transform .28s cubic-bezier(.19,1,.22,1); margin: auto; }
.reader-stage.is-zoomed .reader-zoom { transform-origin: center top; }

/* Ambient light: a soft warm pool behind the book so it reads as a lit object. */
.reader-stage::before { content: ""; position: absolute; left: 50%; top: 50%;
  width: 92%; height: 86%; transform: translate(-50%, -52%); z-index: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 46%, rgba(214,182,120,.16), rgba(214,182,120,.05) 46%, rgba(0,0,0,0) 72%); }
.reader-stage.is-zoomed::before { opacity: 0; }

/* The book itself. Desk shadow under it; soft warm rim. */
.flipbook { position: relative; }
.flipbook::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 40px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.45), rgba(0,0,0,0) 72%);
  filter: blur(3px); z-index: -1; pointer-events: none; }

/* Each leaf: warm paper, fine grain. StPageFlip adds .stf__item (position:absolute) to these.
   isolation:isolate confines the grain's multiply blend to the page itself, so the leaf never
   blends with the dark room behind it while it is mid-turn (no see-through paper). */
.page { position: relative; background: #fbf7ee; box-shadow: 0 1px 2px rgba(0,0,0,.18);
  overflow: hidden; isolation: isolate; }
.page img { width: 100%; height: 100%; display: block; object-fit: fill; -webkit-user-drag: none; user-select: none; }

/* Selectable + crawlable text layer over each page. The container is
   pointer-transparent; only the word boxes catch the pointer, so dragging the
   gaps/corners still turns the page. Words are invisible but real DOM text. */
.page-text { position: absolute; inset: 0; z-index: 5; pointer-events: none; line-height: 1; }
.page-text span { position: absolute; white-space: pre; color: transparent; cursor: text;
  pointer-events: auto; user-select: text; -webkit-user-select: text; transform-origin: 0 0; }
.page-text span::selection { background: rgba(139,107,61,.34); }
.page-text span::-moz-selection { background: rgba(139,107,61,.34); }
.txtdbg .page-text span { color: rgba(220,40,40,.9); background: rgba(220,40,40,.12); }
.page::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: .05; }
/* Hard covers read slightly richer. */
.page--cover { background: #f4ecdb; }

/* Fore-edge: the stacked page block on each side of the open spread. Width is set
   by JS to reflect reading progress. Fine laminations + a rounded outer edge read
   as the thickness of real paper under the page you are reading. */
.book-edge { position: absolute; top: 1.6%; bottom: 1.6%; z-index: 0; width: 8px;
  pointer-events: none; opacity: 0; transition: opacity .35s ease, width .45s cubic-bezier(.19,1,.22,1);
  box-shadow: 0 14px 28px rgba(0,0,0,.34); }
.book-edge::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(60,44,20,.22), rgba(60,44,20,0) 12%,
    rgba(60,44,20,0) 88%, rgba(60,44,20,.22)); }
.book-edge--left { left: 0; transform: translateX(calc(-100% + 1px));
  border-radius: 2px 0 0 2px;
  background: repeating-linear-gradient(90deg, #f0e8d4 0, #f0e8d4 1.5px, #cabd9c 1.5px, #cabd9c 2.6px); }
.book-edge--right { right: 0; transform: translateX(calc(100% - 1px));
  border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(270deg, #f0e8d4 0, #f0e8d4 1.5px, #cabd9c 1.5px, #cabd9c 2.6px); }

/* Spine: a soft valley of shadow where two open pages meet. Toggled by JS. */
.flip-spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 9%; transform: translateX(-50%);
  pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(90deg,
    rgba(40,28,12,0) 0%, rgba(40,28,12,.10) 42%, rgba(40,28,12,.20) 50%,
    rgba(40,28,12,.10) 58%, rgba(40,28,12,0) 100%); }

/* Side nav arrows */
.reader-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 25; width: 52px; height: 52px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(12,19,34,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--cream);
  font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, opacity .2s; }
.reader-nav-btn:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.reader-nav-btn:disabled { opacity: 0; pointer-events: none; }
.reader-prev { left: 22px; } .reader-next { right: 22px; }

/* Bottom control bar */
.reader-foot { flex: 0 0 auto; z-index: 25; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 18px; background: linear-gradient(0deg, rgba(8,13,24,.55), rgba(8,13,24,0)); }
.reader-ctl { display: inline-flex; align-items: center; gap: 4px; background: rgba(12,19,34,.5);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 5px; }
.reader-ctl button { width: 34px; height: 34px; border: none; background: transparent; color: var(--cream);
  font-family: 'Hanken Grotesk', sans-serif; font-size: 1rem; cursor: pointer; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.reader-ctl button:hover { background: var(--gold); color: var(--navy-deep); }
.reader-ctl .reader-zlabel { min-width: 42px; text-align: center; font-size: .78rem; color: var(--muted-on-navy);
  font-family: 'Hanken Grotesk', sans-serif; letter-spacing: .02em; }
.reader-ctl .reader-div { width: 1px; height: 20px; background: rgba(255,255,255,.14); margin: 0 3px; }
.reader-ctl-text { font-size: .78rem; letter-spacing: .04em; padding: 0 12px; }

/* Pages overlay (jump grid), hidden by default */
.reader-pages { position: fixed; inset: 0; z-index: 40; display: none; background: rgba(7,11,20,.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.reader-pages.is-open { display: block; }
.reader-pages-inner { max-width: 1100px; margin: 0 auto; height: 100%; overflow-y: auto;
  padding: 76px 28px 40px; }
.reader-pages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 16px; }
.reader-pthumb { cursor: pointer; border: 2px solid transparent; background: #fbf7ee; line-height: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.4); transition: border-color .15s, transform .15s; position: relative; }
.reader-pthumb img { width: 100%; display: block; }
.reader-pthumb:hover { transform: translateY(-3px); }
.reader-pthumb.active { border-color: var(--gold); }
.reader-pthumb span { position: absolute; bottom: 0; left: 0; right: 0; font-family: 'Hanken Grotesk', sans-serif;
  font-size: .68rem; text-align: center; color: var(--cream); background: rgba(8,13,24,.7); padding: 2px; }
.reader-pages-close { position: fixed; top: 18px; right: 22px; z-index: 41; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(12,19,34,.6); color: var(--cream);
  font-size: 1.2rem; cursor: pointer; }
.reader-pages-close:hover { background: var(--gold); color: var(--navy-deep); }

.reader-loading { color: var(--muted-on-navy); font-family: 'Hanken Grotesk', sans-serif; font-size: .9rem; }

/* Library reader cards */
.lib-read-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.lib-read-card { display: flex; flex-direction: column; }
.lib-read-cover { aspect-ratio: 2/3; overflow: hidden; background: var(--cream-alt); box-shadow: 0 14px 40px rgba(22,32,58,.16); }
.lib-read-cover img { width: 100%; height: 100%; object-fit: cover; }
.lib-read-card h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; margin: 20px 0 4px; }
.lib-read-card .lib-read-sub { font-family: 'Hanken Grotesk', sans-serif; font-size: .82rem;
  color: var(--muted-on-cream); margin-bottom: 16px; }
.lib-read-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; }
.lib-forthcoming { grid-column: 1 / -1; text-align: center; font-family: 'Fraunces', serif; font-style: italic;
  color: var(--gold); margin-top: 36px; font-size: 1.05rem; }

@media (max-width: 760px){
  .reader-nav-btn { width: 40px; height: 40px; font-size: 1.1rem; } .reader-prev { left: 8px; } .reader-next { right: 8px; }
  .reader-stage { padding: 12px; touch-action: pan-y; }
  .reader-foot { gap: 6px; padding: 10px 10px; }
  .lib-read-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .reader-bar { gap: 12px; padding: 11px 16px; }
  .reader-sub { display: none; }
}
@media (max-width: 540px){
  /* phones: keep the bar to back-arrow + title + progress; hide the
     text-version link (still reachable from the Library) so nothing crams */
  .reader-bar { gap: 10px; padding: 10px 14px; }
  .reader-textlink { display: none; }
  .reader-title { font-size: .98rem; }
  .reader-progress { margin-left: auto; font-size: .76rem; }
  /* keep the floating arrows but tuck them tight to the edges and soften
     them so they never fight the page; swipe + pinch still drive reading */
  .reader-nav-btn { width: 36px; height: 36px; font-size: 1rem; background: rgba(12,19,34,.42); }
  .reader-prev { left: 4px; } .reader-next { right: 4px; }
  .reader-ctl-text { padding: 0 9px; }
  .reader-ctl button { width: 38px; height: 38px; }
}

/* =========================================================
   HERO v2, editorial cover (Sotheby's x Monocle register)
   Commanding type on warm canvas + contained duotone plate.
   Crafted motion: clip reveals, staggered line rise, hairline
   draw, slow ken-burns, scroll parallax. Reduced-motion safe.
   ========================================================= */
.hero-ed {
  position: relative; background: var(--cream);
  display: grid; grid-template-columns: 1.08fr 0.92fr;
  min-height: min(94vh, 940px); overflow: hidden;
}
.hero-ed-inner {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 7vw, 112px); padding-right: clamp(32px, 5vw, 76px);
  position: relative; z-index: 2;
}
.hero-ed-eyebrow {
  display: flex; align-items: center; gap: 16px; margin-bottom: 30px;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
}
.hero-ed-eyebrow .hairline { display: block; height: 1px; width: 0; background: var(--gold);
  transition: width 1s cubic-bezier(.19,1,.22,1) .15s; }
.hero-ed.is-in .hero-ed-eyebrow .hairline { width: 56px; }

.hero-ed h1 {
  color: var(--navy); margin: 0;
  font-size: clamp(2.7rem, 5.1vw, 5.1rem); line-height: 1.0; letter-spacing: -0.022em;
}
.hero-ed h1 .accent { font-style: italic; font-weight: 420; color: var(--navy); }
.reveal { display: block; overflow: hidden; padding-bottom: 0.06em; }
.reveal > span { display: block; transform: translateY(118%);
  transition: transform .95s cubic-bezier(.19,1,.22,1); transition-delay: var(--d, 0s); will-change: transform; }
.hero-ed.is-in .reveal > span { transform: translateY(0); }

.hero-ed-sub {
  color: var(--muted-on-cream); font-size: clamp(1.05rem, 1.4vw, 1.28rem); line-height: 1.55;
  max-width: 44ch; margin-top: 28px;
}
.hero-ed-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.hero-ed-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--rule-on-cream);
  font-family: 'Hanken Grotesk', sans-serif; font-size: 0.95rem; color: var(--muted-on-cream);
}
.hero-ed-meta strong { color: var(--navy); font-weight: 600; }
.hero-ed-meta .meta-dot { color: var(--gold); }
.hero-ed-meta .gr-stars { color: var(--gold); letter-spacing: 1px; }

.fadeup { opacity: 0; transform: translateY(20px);
  transition: opacity .9s ease var(--d,0s), transform .9s cubic-bezier(.19,1,.22,1) var(--d,0s); }
.hero-ed.is-in .fadeup { opacity: 1; transform: none; }

/* Plate */
.hero-ed-plate { position: relative; overflow: hidden; border-left: 1px solid var(--gold-soft);
  clip-path: inset(0 0 100% 0); transition: clip-path 1.25s cubic-bezier(.19,1,.22,1) .1s; }
.hero-ed.is-in .hero-ed-plate { clip-path: inset(0 0 0 0); }
.hero-ed-plate-fig { position: absolute; inset: 0; }
.hero-ed-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
  transform: scale(1.14); transition: transform 7s cubic-bezier(.16,.8,.2,1); will-change: transform; }
.hero-ed.is-in .hero-ed-plate img { transform: scale(1.0); }
.hero-ed-plate::after { content: ""; position: absolute; inset: 22px; pointer-events: none;
  border: 1px solid rgba(245,241,232,0.32); }
.hero-ed-plate-cap { position: absolute; left: 34px; bottom: 30px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(245,241,232,0.92); text-shadow: 0 1px 12px rgba(20,28,46,.5); }
.hero-ed-plate-cap .tick { width: 18px; height: 1px; background: var(--gold-light); display: inline-block; }

@media (max-width: 860px) {
  .hero-ed { grid-template-columns: 1fr; min-height: 0; }
  .hero-ed-inner { padding: clamp(40px,9vw,72px) 28px 32px; }
  .hero-ed h1 { font-size: clamp(2.5rem, 9vw, 3.6rem); }
  .hero-ed-sub { max-width: none; }
  .hero-ed-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .hero-ed-plate { border-left: 0; aspect-ratio: 4/5; clip-path: inset(0 0 100% 0); }
  .hero-ed-plate::after { inset: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal > span, .fadeup, .hero-ed-plate, .hero-ed-plate img, .hero-ed-eyebrow .hairline {
    transition: none !important; transform: none !important; opacity: 1 !important;
    clip-path: none !important; }
  /* hairline reveals to its final width only (width:56px must NOT leak to .fadeup et al.) */
  .hero-ed-eyebrow .hairline { width: 56px; }
}

/* =========================================================
   Motion language extended to inner pages (consistency w/ hero v2)
   ========================================================= */
/* generic reveal/fadeup (any container with .is-in) */
.is-in .reveal > span { transform: translateY(0); }
.is-in .fadeup { opacity: 1; transform: none; }

/* page-hero entrance (eyebrow hairline draw + headline + lede rise) */
.page-hero .eyebrow,
.page-hero h1,
.page-hero .lede { opacity: 0; transform: translateY(24px);
  transition: opacity .9s ease, transform .95s cubic-bezier(.19,1,.22,1); }
.page-hero h1 { transition-delay: .12s; }
.page-hero .lede { transition-delay: .24s; }
.page-hero .eyebrow .gold-rule { width: 0; transition: width 1s cubic-bezier(.19,1,.22,1) .1s; }
.page-hero.is-in .eyebrow,
.page-hero.is-in h1,
.page-hero.is-in .lede { opacity: 1; transform: none; }
.page-hero.is-in .eyebrow .gold-rule { width: 56px; }

/* full-bleed listing detail hero: slow ken-burns + caption rise */
@keyframes mgniKenburns { from { transform: scale(1.09); } to { transform: scale(1); } }
.listing-page-hero img { animation: mgniKenburns 16s cubic-bezier(.16,.8,.2,1) forwards; }
.listing-page-hero-overlay > .container > * { opacity: 0; transform: translateY(20px);
  animation: mgniRise .9s cubic-bezier(.19,1,.22,1) .25s forwards; }
@keyframes mgniRise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .page-hero .eyebrow, .page-hero h1, .page-hero .lede { opacity: 1 !important; transform: none !important; }
  .page-hero .eyebrow .gold-rule { width: 56px !important; }
  .listing-page-hero img { animation: none !important; }
  .listing-page-hero-overlay > .container > * { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Blog post prose extras (tables, TL;DR callout, FAQ rhythm) */
.prose table { width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 0.96rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule-on-cream); vertical-align: top; }
.prose th { font-family: 'Hanken Grotesk', sans-serif; font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold-soft); }
.prose .post-tldr { background: var(--cream-alt); border-left: 3px solid var(--gold);
  padding: 18px 22px; margin: 0 0 30px; font-size: 1.06rem; line-height: 1.6; }
.prose h2 { margin-top: 44px; } .prose h3 { margin-top: 30px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }

/* =========================================================
   SITE SEARCH, header trigger + command-palette overlay
   ========================================================= */
/* Header trigger: a quiet pill that sits beside the nav. */
.search-trigger {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: transparent; color: var(--cream);
  border: 1px solid var(--rule-on-navy); border-radius: 999px;
  padding: 8px 12px 8px 13px; margin-left: 12px;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: border-color .2s, color .2s, background .2s;
}
.search-trigger:hover { border-color: var(--gold); color: var(--gold); }
.search-trigger svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; }
.search-trigger-kbd {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 0.7rem; line-height: 1;
  border: 1px solid var(--rule-on-navy); border-radius: 5px; padding: 3px 6px;
  color: var(--muted-on-navy); margin-left: 2px;
}
.search-trigger:hover .search-trigger-kbd { border-color: var(--gold-soft); }

/* Overlay */
.search-overlay { position: fixed; inset: 0; z-index: 200; display: none; }
.search-overlay.is-open { display: block; }
.search-backdrop { position: absolute; inset: 0; background: rgba(11,16,28,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: srFade .22s ease; }
@keyframes srFade { from { opacity: 0; } to { opacity: 1; } }

.search-modal {
  position: relative; z-index: 1; width: min(680px, calc(100vw - 36px));
  margin: 11vh auto 0; background: var(--cream-bright);
  border: 1px solid var(--rule-on-cream);
  box-shadow: 0 36px 100px rgba(11,16,28,.46), 0 4px 14px rgba(11,16,28,.18);
  display: flex; flex-direction: column; max-height: 74vh; overflow: hidden;
  animation: srRise .26s cubic-bezier(.19,1,.22,1);
}
@keyframes srRise { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

.search-field { display: flex; align-items: center; gap: 14px; padding: 20px 22px;
  border-bottom: 1px solid var(--rule-on-cream); flex: 0 0 auto; }
.search-field-icon { width: 20px; height: 20px; fill: none; stroke: var(--gold);
  stroke-width: 2; stroke-linecap: round; flex: 0 0 auto; }
.search-input { flex: 1 1 auto; border: none; background: transparent; outline: none;
  font-family: 'Fraunces', serif; font-size: 1.32rem; color: var(--text-on-cream); }
.search-input::placeholder { color: var(--muted-on-cream); opacity: .7; font-style: italic; }
.search-clear { border: none; background: transparent; color: var(--muted-on-cream);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; transition: color .15s; }
.search-clear:hover { color: var(--gold); }

.search-results { overflow-y: auto; flex: 1 1 auto; padding: 8px 0 10px; scrollbar-width: thin; }

.sr-hint-line { font-family: 'Hanken Grotesk', sans-serif; font-size: .82rem;
  color: var(--muted-on-cream); padding: 12px 24px 4px; }
.sr-group { display: flex; align-items: baseline; justify-content: space-between;
  font-family: 'Hanken Grotesk', sans-serif; font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  padding: 16px 24px 8px; }
.sr-group-all { font-size: .66rem; letter-spacing: .12em; color: var(--muted-on-cream);
  border-bottom: 1px solid var(--gold-soft); padding-bottom: 1px; }
.sr-group-all:hover { color: var(--gold); }

.sr-row { display: flex; align-items: center; gap: 15px; padding: 11px 24px;
  border-left: 2px solid transparent; text-decoration: none; }
.sr-row.is-sel { background: rgba(139,107,61,.09); border-left-color: var(--gold); }
.sr-thumb { flex: 0 0 auto; width: 46px; height: 46px; overflow: hidden; background: var(--cream-alt);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-on-cream); }
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr-thumb--none { font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--gold); background: var(--navy-deep); }
.sr-body { flex: 1 1 auto; min-width: 0; }
.sr-title { display: block; font-family: 'Fraunces', serif; font-size: 1.02rem;
  color: var(--text-on-cream); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-desc { display: block; font-family: 'Hanken Grotesk', sans-serif; font-size: .8rem;
  color: var(--muted-on-cream); line-height: 1.4; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-row mark { background: rgba(139,107,61,.20); color: inherit; padding: 0 1px; border-radius: 2px; }
.sr-type { flex: 0 0 auto; font-family: 'Hanken Grotesk', sans-serif; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-on-cream);
  border: 1px solid var(--rule-on-cream); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.sr-row.is-sel .sr-type { border-color: var(--gold-soft); color: var(--gold); }
.sr-more { font-family: 'Hanken Grotesk', sans-serif; font-size: .76rem; color: var(--muted-on-cream);
  padding: 6px 24px 4px; font-style: italic; }
.sr-empty { padding: 40px 24px; text-align: center; font-family: 'Fraunces', serif;
  font-size: 1.1rem; color: var(--text-on-cream); }
.sr-empty span { display: block; margin-top: 8px; font-family: 'Hanken Grotesk', sans-serif;
  font-size: .84rem; font-style: normal; color: var(--muted-on-cream); }

.search-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 22px; border-top: 1px solid var(--rule-on-cream); flex: 0 0 auto;
  font-family: 'Hanken Grotesk', sans-serif; font-size: .72rem; color: var(--muted-on-cream); }
.search-hints kbd { font-family: 'Hanken Grotesk', sans-serif; font-size: .68rem;
  border: 1px solid var(--rule-on-cream); border-radius: 5px; padding: 2px 6px; margin: 0 1px;
  background: var(--cream); color: var(--muted-on-cream); }

@media (max-width: 760px) {
  .search-trigger-label { display: none; }
  .search-trigger-kbd { display: none; }
  .search-trigger { padding: 9px; }
  .search-modal { margin-top: 7vh; max-height: 82vh; }
  .search-input { font-size: 1.12rem; }
  .search-hints { display: none; }
  .sr-desc { display: none; }
}

/* =========================================================
   HERO, deep navy + a continuous Buenos Aires film strip
   Cinematic backdrop of neighbourhood frames scrolling right
   to left, with a left navy scrim so the headline stays calm
   and legible. Copy unchanged from the editorial hero.
   ========================================================= */
.hero-film {
  position: relative; background: var(--navy-deep); color: var(--cream);
  min-height: min(66vh, 680px); overflow: hidden; isolation: isolate;
  padding: 0;   /* cancel the global section padding (was adding ~120px top+bottom) */
  display: flex; align-items: flex-start;  /* content anchored to the top, under the menu */
}

/* --- the film backdrop --- */
.hero-film-strip { position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; }
.hero-film-band { position: relative; width: 100%; padding: 10px 0; }
/* sprocket rows, top and bottom, faint */
.hero-film-band::before, .hero-film-band::after { content: ""; position: absolute;
  left: 0; right: 0; height: 7px; z-index: 2; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg,
    rgba(245,241,232,0) 0 13px, rgba(245,241,232,.18) 13px 25px); }
.hero-film-band::before { top: 3px; } .hero-film-band::after { bottom: 3px; }

/* Scroll is driven by requestAnimationFrame in the inline hero script (more
   reliable than a CSS marquee, and it always moves regardless of OS motion
   settings). No CSS animation here, or it would override the JS transform. */
.hero-film-track { display: flex; gap: clamp(14px, 1.5vw, 24px); padding: 0 12px;
  height: min(58vh, 600px); width: max-content; will-change: transform; }

.hero-frame { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 4 / 5;
  margin: 0; background: #0e1626; overflow: hidden;
  border: 1px solid rgba(245,241,232,.12); box-shadow: 0 26px 64px rgba(0,0,0,.5); }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.93) contrast(1.05); -webkit-user-drag: none; }
.hero-frame-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 16px 15px;
  background: linear-gradient(0deg, rgba(8,13,24,.93) 0%, rgba(8,13,24,.62) 48%, rgba(8,13,24,0) 100%); }
.hero-frame-name { display: block; font-family: 'Fraunces', serif; font-size: 1.06rem;
  color: var(--cream); letter-spacing: .01em; }
.hero-frame-desc { display: block; font-family: 'Hanken Grotesk', sans-serif; font-size: .73rem;
  line-height: 1.35; color: var(--muted-on-navy); margin-top: 3px; }
.hero-frame-price { display: inline-block; margin-top: 8px; font-family: 'Hanken Grotesk', sans-serif;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-light);
  border-top: 1px solid var(--gold-soft); padding-top: 6px; }

/* --- legibility scrim over the film ---
   Left: deep navy under the headline, fading to clear photos mid-right.
   Right: a soft navy edge so frames fade IN as they scroll on, and OUT as
   they slide left, a continuous film exposure. */
.hero-film-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--navy-deep) 0%, rgba(11,16,28,.92) 22%, rgba(11,16,28,.5) 42%,
      rgba(11,16,28,.14) 60%, rgba(11,16,28,0) 78%),
    linear-gradient(270deg, var(--navy-deep) 0%, rgba(11,16,28,.55) 6%, rgba(11,16,28,0) 16%),
    linear-gradient(0deg, rgba(11,16,28,.5), rgba(11,16,28,0) 22%),
    linear-gradient(180deg, rgba(11,16,28,.45), rgba(11,16,28,0) 16%); }

/* --- content column --- */
.hero-film-content { position: relative; z-index: 2; width: 100%;
  max-width: 1440px; margin: 0 auto;
  padding: clamp(20px, 3vh, 40px) clamp(40px, 6vw, 104px) clamp(32px, 5vh, 60px); }
/* film-exposure plate: solid navy under the text column, fading to clear photos
   on the right, so copy stays readable whatever frame drifts behind it. */
.hero-film-content::before { content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--navy-deep) 0%, rgba(11,16,28,.96) 30%, rgba(11,16,28,.80) 50%,
    rgba(11,16,28,.34) 64%, rgba(11,16,28,0) 78%); }
.hero-film-content > * { max-width: 600px; position: relative; z-index: 1; }

.hero-film h1 { color: var(--cream); margin: 0;
  font-size: clamp(2.6rem, 4.6vw, 4.6rem); line-height: 1.0; letter-spacing: -0.022em; }
.hero-film h1 .accent { font-style: italic; font-weight: 420; color: var(--gold-light); }
.hero-film .hero-ed-eyebrow { color: var(--gold); }
.hero-film .hero-ed-eyebrow .hairline { background: var(--gold); }
/* long sub copy: lift off muted-gray to near-cream, then widen + shrink a touch so
   the full paragraph wraps in ~4 lines and both CTAs always clear the fold. */
.hero-film .hero-ed-sub { color: rgba(238,234,224,.92); margin-top: 16px; max-width: 800px;
  font-size: clamp(1rem, 1.05vw, 1.14rem); line-height: 1.5; }
.hero-film .hero-ed-ctas { margin-top: 22px; }
.hero-film .hero-ed-meta { color: var(--muted-on-navy); border-top-color: var(--rule-on-navy);
  margin-top: 24px; padding-top: 18px; }
.hero-film .hero-ed-meta strong { color: var(--cream); }

/* reveal / fade triggers (motion script adds .is-in to #hero) */
.hero-film.is-in .reveal > span { transform: translateY(0); }
.hero-film.is-in .fadeup { opacity: 1; transform: none; }
.hero-film.is-in .hero-ed-eyebrow .hairline { width: 56px; }

/* The drifting film is the hero's purpose, so keep it moving even when reduced
   motion is requested, just far slower and gentler. */
@media (prefers-reduced-motion: reduce) {
  .hero-film-track { animation-duration: 110s; }
}

@media (max-width: 860px) {
  .hero-film { min-height: auto; flex-direction: column; align-items: stretch; }
  .hero-film-content { order: 1; padding: 60px 24px 30px; }
  .hero-film-content > * { max-width: none; }
  .hero-film-strip { position: relative; order: 2; inset: auto; height: auto; }
  .hero-film-track { height: 40vh; animation-duration: 60s; }
  /* on mobile the film is a band under the text, so soften the side scrim */
  .hero-film-scrim { background:
    linear-gradient(0deg, rgba(11,16,28,.4), rgba(11,16,28,0) 30%),
    linear-gradient(180deg, var(--navy-deep), rgba(11,16,28,0) 14%);
    top: auto; bottom: 0; height: 42vh; }
}

/* =========================================================
   NEIGHBOURHOODS EXPLORER, editorial map of Buenos Aires
   ========================================================= */
.bo-hero { background: var(--navy-deep); color: var(--cream); padding: clamp(48px,7vw,96px) 0 clamp(32px,4vw,56px); }
.bo-hero h1 { color: var(--cream); font-size: clamp(2.4rem,4.6vw,4rem); line-height: 1.02; letter-spacing: -.02em; margin: 6px 0 0; }
.bo-hero-sub { color: var(--muted-on-navy); max-width: 56ch; margin-top: 20px; font-size: clamp(1rem,1.25vw,1.18rem); line-height: 1.6; }
.bo-hero .eyebrow { color: var(--gold); }

.bo-explorer { background: var(--navy-deep); padding: 0 0 clamp(40px,6vw,80px); }
.bo-explorer-grid { max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(24px,3vw,56px); align-items: start; }

/* map */
.bo-map-wrap { position: relative; }
.bo-map { width: 100%; height: auto; display: block; overflow: visible; }
.bo-area { transition: fill .25s ease, stroke .25s ease, filter .25s ease; }
.bo-ctx .is-ctx { fill: rgba(245,241,232,.05); stroke: rgba(245,241,232,.12); stroke-width: 1; }
.bo-feats .is-feat { fill: rgba(245,241,232,.16); stroke: var(--gold); stroke-width: 1.4;
  cursor: pointer; outline: none; }
.bo-feats .is-feat:hover, .bo-feats .is-feat:focus-visible, .bo-feats .is-feat.is-active {
  fill: rgba(201,168,76,.42); stroke: var(--gold-light); stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(201,168,76,.5)); }
.bo-river { position: absolute; right: 4%; top: 30%; transform: rotate(-32deg);
  font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(.8rem,1.1vw,1.05rem);
  color: rgba(245,241,232,.32); letter-spacing: .04em; pointer-events: none; }

/* side panel */
.bo-panel { position: sticky; top: 90px; background: var(--cream-bright); border: 1px solid var(--rule-on-cream);
  box-shadow: 0 24px 60px rgba(11,16,28,.4); min-height: 320px; }
.bo-panel-empty { padding: 40px 28px; }
.bo-panel-hint { font-family: 'Hanken Grotesk', sans-serif; font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.bo-panel-empty p { margin-top: 14px; color: var(--muted-on-cream); font-size: .95rem; line-height: 1.6; }
.bo-panel-img { aspect-ratio: 16/10; overflow: hidden; background: var(--cream-alt); }
.bo-panel-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05); }
.bo-panel-name { font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--text-on-cream); padding: 22px 28px 0; }
.bo-panel-price { font-family: 'Hanken Grotesk', sans-serif; font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold); padding: 6px 28px 0; }
.bo-panel-blurb { padding: 14px 28px 0; color: var(--muted-on-cream); line-height: 1.6; font-size: .98rem; }
.bo-panel-buyers { padding: 14px 28px 0; font-family: 'Hanken Grotesk', sans-serif; font-size: .82rem;
  color: var(--text-on-cream); }
.bo-panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 28px 28px; }
.bo-panel-actions .btn { padding: 13px 22px; font-size: .78rem; }
.bo-panel-actions .bo-panel-sv[hidden] { display: none; }

/* Street View modal (keyless svembed iframe; paints reliably unlike a cold tab) */
.bo-sv-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.bo-sv-modal[hidden] { display: none; }
.bo-sv-backdrop { position: absolute; inset: 0; background: rgba(15,18,26,.84); backdrop-filter: blur(3px); }
.bo-sv-frame { position: relative; width: min(1120px, 94vw); height: min(700px, 86vh);
  background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.55); overflow: hidden; }
.bo-sv-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.bo-sv-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 42px; height: 42px;
  border: 0; border-radius: 50%; background: rgba(15,18,26,.72); color: #fff; font-size: 1.6rem;
  line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.bo-sv-close:hover { background: var(--gold); color: var(--navy-deep); }
.bo-sv-cap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 22px 18px 12px;
  background: linear-gradient(transparent, rgba(15,18,26,.72)); color: #fff; pointer-events: none;
  font-family: 'Hanken Grotesk', sans-serif; font-size: .8rem; letter-spacing: .05em; }

/* beyond cards */
.bo-beyond { padding: clamp(48px,6vw,88px) 0; }
.bo-beyond .eyebrow { color: var(--gold); }
.bo-beyond h2 { font-size: clamp(1.8rem,3vw,2.6rem); margin: 6px 0 0; }
.bo-beyond-sub { max-width: 56ch; color: var(--muted-on-cream); margin-top: 14px; line-height: 1.6; }
.bo-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 36px; }
.bo-card { display: flex; flex-direction: column; background: var(--cream-bright);
  border: 1px solid var(--rule-on-cream); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.bo-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(11,16,28,.18); }
.bo-card-img { aspect-ratio: 16/9; overflow: hidden; background: var(--cream-alt); }
.bo-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); display: block; }
.bo-card-body { padding: 20px 22px 24px; }
.bo-card-name { display: block; font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--text-on-cream); }
.bo-card-blurb { display: block; color: var(--muted-on-cream); line-height: 1.55; margin-top: 8px; font-size: .92rem; }
.bo-card-price { display: inline-block; margin-top: 14px; font-family: 'Hanken Grotesk', sans-serif;
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
  border-top: 1px solid var(--gold-soft); padding-top: 8px; }

@media (max-width: 900px) {
  .bo-explorer-grid { grid-template-columns: 1fr; }
  .bo-panel { position: relative; top: 0; }
  .bo-cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* =========================================================
   NEWSLETTER, "Keys to Argentine Real Estate"
   Footer subscribe band + once-only invitation popup
   ========================================================= */
.nl-eyebrow { font-family: 'Hanken Grotesk', sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }

/* shared form */
.nl-form { display: flex; gap: 10px; margin-top: 18px; }
.nl-input { flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 16px; background: var(--cream-bright);
  border: 1px solid var(--rule-on-cream); color: var(--text-on-cream);
  font-family: 'Hanken Grotesk', sans-serif; font-size: .95rem; }
.nl-input::placeholder { color: var(--muted-on-cream); }
.nl-input:focus { outline: none; border-color: var(--gold); }
.nl-input.nl-err { border-color: #b4543d; background: #fbeee9; }
.nl-btn { flex: 0 0 auto; height: 50px; padding: 0 22px; border: none; cursor: pointer;
  background: var(--gold); color: var(--navy-deep); font-family: 'Hanken Grotesk', sans-serif;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; transition: background .15s, transform .15s; }
.nl-btn:hover { background: var(--gold-light); transform: translateY(-1px); }
.nl-note { margin-top: 12px; font-family: 'Hanken Grotesk', sans-serif; font-size: .76rem;
  color: var(--muted-on-cream); }
.nl-done { margin-top: 16px; font-family: 'Fraunces', serif; font-style: italic; color: var(--gold); font-size: 1.05rem; }

/* footer band (sits above the dark footer) */
.nl-band { background: var(--navy-deep); border-top: 1px solid var(--rule-on-navy); color: var(--cream);
  padding: clamp(48px, 6vw, 84px) 0; }
.nl-band-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 72px);
  align-items: center; }
.nl-band .nl-title { font-family: 'Fraunces', serif; color: var(--cream);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.08; margin: 8px 0 0; letter-spacing: -.01em; }
.nl-band .nl-blurb { color: var(--muted-on-navy); margin-top: 14px; line-height: 1.6; max-width: 46ch; }
.nl-band .nl-note { color: var(--muted-on-navy); }

/* invitation popup */
.nl-overlay { position: fixed; inset: 0; z-index: 220; display: none; }
.nl-overlay.is-open { display: block; }
.nl-backdrop { position: absolute; inset: 0; background: rgba(11,16,28,.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: nlFade .3s ease; }
@keyframes nlFade { from { opacity: 0; } to { opacity: 1; } }
.nl-modal { position: relative; z-index: 1; width: min(500px, calc(100vw - 36px));
  margin: 12vh auto 0; background: var(--cream-bright); border: 1px solid var(--rule-on-cream);
  box-shadow: 0 40px 110px rgba(11,16,28,.5); padding: clamp(32px, 4vw, 48px);
  animation: nlRise .42s cubic-bezier(.19,1,.22,1); }
@keyframes nlRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.nl-modal::before { content: ""; position: absolute; top: 0; left: clamp(32px,4vw,48px); width: 44px; height: 2px;
  background: var(--gold); }
.nl-modal-title { font-family: 'Fraunces', serif; color: var(--text-on-cream);
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.06; margin: 16px 0 0; letter-spacing: -.01em; }
.nl-modal-sub { color: var(--muted-on-cream); line-height: 1.62; margin-top: 16px; font-size: 1rem; }
.nl-close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: none;
  background: transparent; color: var(--muted-on-cream); font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: color .15s; }
.nl-close:hover { color: var(--gold); }

@media (max-width: 760px) {
  .nl-band-inner { grid-template-columns: 1fr; }
  .nl-form { flex-direction: column; }
  .nl-btn { height: 48px; }
  .nl-modal { margin-top: 8vh; }
}

/* Footer signature, built by Liaison Marketing */
.footer-bottom { flex-wrap: wrap; }
.footer-credit { flex-basis: 100%; text-align: center; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--rule-on-navy); font-family: 'Hanken Grotesk', sans-serif;
  font-size: .74rem; letter-spacing: .04em; color: var(--muted-on-navy); }
.footer-credit a { color: var(--cream); border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 1px; transition: color .15s; }
.footer-credit a:hover { color: var(--gold-light); }

/* Neighborhood photo credit */
.post-figure-cred { font-family: 'Hanken Grotesk', sans-serif; font-size: .72rem;
  color: var(--muted-on-cream); margin-top: 8px; text-align: right; opacity: .85; }

/* Fix: outline-light buttons are cream-on-cream (invisible) inside cream
   sections (e.g. Library "Download PDF"/"Download all"). Make them navy here. */
.section-cream .btn-outline-light, .section-cream-alt .btn-outline-light,
.lib-wing-books .btn-outline-light {
  border-color: var(--navy); color: var(--navy); }
.section-cream .btn-outline-light:hover, .section-cream-alt .btn-outline-light:hover,
.lib-wing-books .btn-outline-light:hover {
  background: var(--navy); color: var(--cream); border-color: var(--navy); }

/* Banking worked-example callout (For Foreigners) */
.example-card { background: var(--cream-bright); border: 1px solid var(--rule-on-cream);
  border-left: 3px solid var(--gold); padding: 24px 28px; margin: 30px 0; }
.example-label { font-family: 'Hanken Grotesk', sans-serif; font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.example-card p { margin-bottom: 12px; }
.example-note { font-size: .85rem; color: var(--muted-on-cream); font-style: italic; margin-bottom: 0; }

/* =========================================================
   P0 HARMONY LAYER  (Liaison, 2026-06-04)
   One inner-page design language, benchmarked to the home hero.
   Goal: every template shares the same DNA, light, motion and
   graphic vocabulary. Appended last so it wins the cascade;
   remove this whole block to revert P0.
   ========================================================= */

/* ---- 1. Unified inner-page hero (page / post / bo share one skin) ---- */
.page-hero, .post-hero, .bo-hero { position: relative; overflow: hidden; isolation: isolate; }
.page-hero > *, .post-hero > *, .bo-hero > * { position: relative; z-index: 1; }

/* Soft brass light raking in from the top, the same gesture as the home hero */
.page-hero::before, .post-hero::before, .bo-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% -20%, rgba(201,168,76,.12), transparent 55%),
    radial-gradient(80% 60% at 100% 0%, rgba(42,54,86,.45), transparent 60%);
}
/* article hero is centred, so light reads better from top-centre */
.post-hero::before {
  background:
    radial-gradient(110% 80% at 50% -25%, rgba(201,168,76,.12), transparent 55%),
    radial-gradient(90% 60% at 50% 0%, rgba(42,54,86,.40), transparent 65%);
}
/* signature: a hairline of brass light along the hero's lower edge */
.page-hero, .bo-hero { border-bottom: none; }
.page-hero::after, .bo-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 18%, var(--gold-soft) 82%, transparent);
}

/* ---- 2. Universal hero entrance (pure CSS, runs on load, no JS needed) ---- */
@keyframes mgniHeroRise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.post-hero > .container-narrow > *,
.post-hero > .container > *,
.bo-hero > .container > * {
  opacity: 0; animation: mgniHeroRise .9s cubic-bezier(.19,1,.22,1) forwards;
}
.post-hero > .container-narrow > *:nth-child(1),
.post-hero > .container > *:nth-child(1),
.bo-hero > .container > *:nth-child(1) { animation-delay: .05s; }
.post-hero > .container-narrow > *:nth-child(2),
.post-hero > .container > *:nth-child(2),
.bo-hero > .container > *:nth-child(2) { animation-delay: .16s; }
.post-hero > .container-narrow > *:nth-child(3),
.post-hero > .container > *:nth-child(3),
.bo-hero > .container > *:nth-child(3) { animation-delay: .27s; }
.post-hero > .container-narrow > *:nth-child(4),
.post-hero > .container > *:nth-child(4),
.bo-hero > .container > *:nth-child(4) { animation-delay: .36s; }

/* ---- 3. Editorial figure framing (article + neighbourhood images) ---- */
/* the big landscape image under an article hero */
.post-img-hero { position: relative; }
.post-img-hero::after {
  content: ""; position: absolute; inset: 14px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(201,168,76,.30);
}
.post-img-hero img { transition: transform 1.6s cubic-bezier(.16,.8,.2,1); }
.post-img-hero:hover img { transform: scale(1.025); }

/* neighbourhood / inline article figure
   Source photos are mixed aspect (some tall portrait). Crop to a calm
   landscape band so every barrio page reads the same, framed + grounded. */
.post-figure { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 0; }
.post-figure > .container-narrow { position: relative; }
.post-figure figure, .post-figure picture { margin: 0; }
.post-figure img {
  width: 100% !important;
  height: clamp(300px, 44vw, 500px) !important;
  object-fit: cover !important; object-position: center;
  display: block;
  border: 1px solid var(--rule-on-cream);
  box-shadow: 0 26px 60px -28px rgba(13, 28, 52, .55);
}
/* floating brass inner frame, the same darkroom gesture as the article hero */
.post-figure > .container-narrow::after {
  content: ""; position: absolute; left: 14px; right: 14px; top: 14px;
  height: calc(clamp(300px, 44vw, 500px) - 28px);
  pointer-events: none; border: 1px solid rgba(201, 168, 76, .32); z-index: 2;
}

/* ---- P2: neighbourhood hero sub + "at a glance" meta line ---- */
.post-hero-sub {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.4;
  color: var(--cream); max-width: 40ch; margin-top: 18px;
}
.post-hero-meta {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--rule-on-navy);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--muted-on-navy); line-height: 1.6; max-width: 52ch;
}
.post-hero-meta strong { color: var(--gold); font-weight: 600; }
.post-hero-meta em {
  font-family: 'Fraunces', serif; font-style: italic;
  color: var(--muted-on-navy); font-size: .9em;
}

/* ---- 4. Article graphic vocabulary (used by P1) ---- */
/* gold section divider (replaces the plain <hr> in prose) */
.prose hr {
  border: none; height: 1px; margin: 48px auto; width: 64%;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  position: relative; overflow: visible;
}
.prose hr::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  transform: translate(-50%, -50%) rotate(45deg); background: var(--gold);
}
/* editorial pull-quote, big Fraunces, brass flanks */
.prose .pullquote {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.3;
  color: var(--text-on-cream); text-align: center;
  margin: 52px auto; max-width: 28ch; position: relative; padding: 28px 0;
}
.prose .pullquote::before, .prose .pullquote::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 48px; height: 1px; background: var(--gold);
}
.prose .pullquote::before { top: 0; } .prose .pullquote::after { bottom: 0; }
.prose .pullquote cite {
  display: block; margin-top: 16px; font-style: normal;
  font-family: 'Hanken Grotesk', sans-serif; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
/* end-mark to close an article body */
.prose .endmark { display: block; width: 9px; height: 9px; margin: 40px auto 0;
  background: var(--gold); transform: rotate(45deg); }

/* ---- Mid-funnel BOOK SHOWCASE (home, after the fears) ---- */
.bookshow { position: relative; overflow: hidden; }
.bookshow-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 46% at 50% -4%, rgba(201,168,76,.16), transparent 62%),
    radial-gradient(40% 50% at 50% 120%, rgba(201,168,76,.06), transparent 70%);
}
.bookshow .container { position: relative; z-index: 1; }
.bookshow-head { max-width: 900px; margin: 0 auto; text-align: center; }
.bookshow-eyebrow { justify-content: center; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.bookshow-h2 {
  font-family: 'Fraunces', serif; color: var(--cream); font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.12; letter-spacing: -.01em;
}
.bookshow-h2 em { color: var(--gold); font-style: italic; }
.bookshow-lede {
  color: var(--muted-on-navy); font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.7; margin: 22px auto 0; max-width: 700px;
}
.bookshow-lede em { color: var(--cream); font-style: italic; }

.bookshow-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2vw, 34px); margin-top: clamp(48px, 6vw, 76px);
  align-items: start;
}
.bookshow-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; transition: transform .4s cubic-bezier(.19,1,.22,1);
}
.bookshow-card:hover { transform: translateY(-6px); }

/* physical-book cover: bound spine + page fore-edge + grounded shadow */
.bookshow-cover {
  position: relative; aspect-ratio: 2/3; width: 62%; margin: 0 auto 30px;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.5));
  transition: transform .5s cubic-bezier(.2,.85,.25,1), filter .5s ease;
}
.bookshow-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 2;
  border-radius: 2px 5px 5px 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.bookshow-cover::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 9%; z-index: 3;
  border-radius: 2px 0 0 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,.12) 32%, rgba(255,255,255,.18) 52%, rgba(255,255,255,0) 72%);
}
.bookshow-cover::after {
  content: ""; position: absolute; top: 1.5%; bottom: 1.5%; right: -6px; width: 7px; z-index: 1;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(90deg, #f0ead9 0 1px, #cdc4ae 1px 2.4px);
  box-shadow: 2px 0 3px rgba(0,0,0,.3);
}
.bookshow-card:hover .bookshow-cover {
  transform: translateY(-12px) rotate(-1deg);
  filter: drop-shadow(0 36px 42px rgba(0,0,0,.62));
}
.bookshow-card-kicker {
  font-family: 'Hanken Grotesk', sans-serif; font-size: .66rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 10px;
}
.bookshow-card-title {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(1.3rem, 1.7vw, 1.6rem); color: var(--cream); margin-bottom: 12px;
}
.bookshow-card-desc {
  font-size: .92rem; line-height: 1.6; color: var(--muted-on-navy);
  max-width: 32ch; margin: 0 auto 16px;
}
.bookshow-card-link {
  font-family: 'Hanken Grotesk', sans-serif; font-size: .74rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid var(--gold-soft); padding-bottom: 3px; transition: border-color .2s;
}
.bookshow-card:hover .bookshow-card-link { border-color: var(--gold); }
.bookshow-foot {
  margin-top: clamp(44px, 5vw, 64px); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.bookshow-foot-note {
  font-family: 'Hanken Grotesk', sans-serif; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-on-navy);
}
@media (max-width: 1024px) {
  .bookshow-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bookshow-row { grid-template-columns: 1fr; gap: 52px; max-width: 340px; margin-left: auto; margin-right: auto; }
}

/* ---- Home Field Notes, three-across defined cards (library removed) ---- */
.notes-grid .notes-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.notes-grid .note-card {
  grid-template-columns: 1fr; gap: 0; overflow: hidden;
  background: var(--cream-bright);
  border: 1px solid var(--rule-on-cream);
  border-top: 3px solid var(--gold);
  padding: 0 0 28px;
  box-shadow: 0 10px 30px rgba(15, 27, 45, .08);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.notes-grid .note-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(15, 27, 45, .15);
}
.notes-grid .note-img { aspect-ratio: 16/10; margin-bottom: 22px; }
.notes-grid .note-card > div:last-child { padding: 0 26px; }
.notes-grid .note-date { margin-bottom: 10px; }
.notes-grid .note-title { font-size: clamp(1.15rem, 1.45vw, 1.4rem); margin-bottom: 10px; color: var(--text-on-cream); }
.notes-grid .note-excerpt { margin-bottom: 16px; }
@media (max-width: 900px) { .notes-grid .notes-list { grid-template-columns: 1fr; max-width: 460px; margin: 56px auto 0; } }

/* ---- P5: Mobile menu (hamburger + drawer), built by site.js ---- */
.nav-toggle { display: none; }
.site-header { z-index: 160; }                 /* sit above the drawer */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 150;
  background: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
  padding: 96px 24px 24px;
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: opacity .4s ease, transform .45s cubic-bezier(.19,1,.22,1), visibility 0s linear .45s;
}
.mobile-drawer::before {                         /* faint brass light, matches heroes */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, rgba(201,168,76,.10), transparent 60%);
}
.mobile-drawer.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-nav { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mobile-nav a {
  font-family: 'Fraunces', serif; font-size: clamp(1.6rem, 7vw, 2.1rem);
  color: var(--cream); padding: 10px 16px; line-height: 1.2;
  opacity: 0; transform: translateY(14px);
  transition: color .2s ease;
}
.mobile-drawer.is-open .mobile-nav a {
  animation: mgniHeroRise .6s cubic-bezier(.19,1,.22,1) forwards;
}
.mobile-nav a:nth-child(1){animation-delay:.06s}.mobile-nav a:nth-child(2){animation-delay:.11s}
.mobile-nav a:nth-child(3){animation-delay:.16s}.mobile-nav a:nth-child(4){animation-delay:.21s}
.mobile-nav a:nth-child(5){animation-delay:.26s}.mobile-nav a:nth-child(6){animation-delay:.31s}
.mobile-nav a:nth-child(7){animation-delay:.36s}.mobile-nav a:nth-child(8){animation-delay:.41s}
.mobile-nav a.active, .mobile-nav a:hover { color: var(--gold); }
.mobile-nav .mobile-cta {
  margin-top: 22px; font-family: 'Hanken Grotesk', sans-serif;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy-deep); background: var(--gold); padding: 15px 32px;
}
.mobile-nav .mobile-cta:hover { color: var(--navy-deep); background: var(--gold-light); }

/* mid-width: relieve crowding so the full nav stays on one clean line */
@media (max-width: 1200px) {
  .search-trigger { display: none !important; }
  .nav-main { gap: 18px; }
  .nav-main a { font-size: 0.74rem; letter-spacing: 0.08em; }
}
@media (max-width: 1024px) {
  .nav-main, .header-inner > .nav-cta { display: none !important; }
  .search-trigger { display: none !important; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 9px; margin-left: auto;
    background: none; border: none; cursor: pointer; position: relative; z-index: 170;
  }
  .nav-toggle span {
    display: block; width: 26px; height: 2px; background: var(--cream);
    transition: transform .35s cubic-bezier(.19,1,.22,1), opacity .25s ease;
  }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 1024px) {
  /* Keep the sticky header (and its hamburger) painted during momentum scroll.
     Mobile WebKit/Blink occasionally drop a sticky element from its layer as
     the URL bar collapses, making the menu flicker out. Forcing it onto its
     own GPU layer keeps it composited and visible the whole scroll. */
  .site-header {
    position: sticky; top: 0;
    -webkit-transform: translateZ(0); transform: translateZ(0);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    will-change: transform;
  }
}

/* ---- P4: Credentials & recognition block (About) ---- */
.creds-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px);
}
.creds-col-label {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--rule-on-navy);
}
.creds-col-label .gold-rule { width: 24px; flex-shrink: 0; }
.creds-list { list-style: none; padding: 0; margin: 0; }
.creds-list li {
  position: relative; padding: 0 0 18px 22px; margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-on-navy);
  font-family: 'Fraunces', serif; font-size: 1.08rem; line-height: 1.35;
  color: var(--cream);
}
.creds-list li:last-child { border-bottom: none; margin-bottom: 0; }
.creds-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--gold);
}
.creds-list li span {
  display: block; margin-top: 8px;
  font-family: 'Hanken Grotesk', sans-serif; font-style: normal;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-on-navy);
}
@media (max-width: 860px) { .creds-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---- P3: listing detail polish (gallery + spec bar) ---- */
.listing-gallery img {
  transition: filter .45s ease, box-shadow .45s ease;
  cursor: zoom-in;
}
.listing-gallery img:hover {
  filter: brightness(1.05) contrast(1.02);
  box-shadow: inset 0 0 0 2px rgba(201, 168, 76, .65);
}
.listing-spec-bar .listing-spec-val { transition: color .3s ease; }
.listing-spec-bar:hover .listing-spec-val { color: var(--gold); }

/* ---- 5. Section-level scroll reveal (progressive enhancement) ----
   Content is VISIBLE by default. site.js adds .js-hidden only once it is
   confirmed running, then reveals via .is-in (with a failsafe timer).
   If JS fails to load or run, nothing is ever hidden. */
[data-reveal] {
  transition: opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1), filter .9s ease;
}
[data-reveal].js-hidden { opacity: 0; transform: translateY(28px); filter: blur(6px); }
[data-reveal].is-in { opacity: 1 !important; transform: none !important; filter: blur(0) !important; }

@media (prefers-reduced-motion: reduce) {
  .post-hero > .container-narrow > *, .post-hero > .container > *,
  .bo-hero > .container > * { opacity: 1 !important; animation: none !important; }
  .post-img-hero:hover img { transform: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ============================================================
   TOKKO PROPERTY COMPONENTS v2 — image-forward cards, filter bar,
   property map, neighborhood block, related, gallery lightbox.
   ============================================================ */

/* ---- image-forward card (overrides base .listing-card) ---- */
.listings-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
.listing-card{
  display:flex; flex-direction:column; background:var(--cream-bright);
  border:1px solid var(--line,#e7e0d2); border-radius:4px; overflow:hidden;
  box-shadow:0 1px 2px rgba(31,42,68,.04); transition:transform .35s cubic-bezier(.16,.8,.2,1), box-shadow .35s;
}
.listing-card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px -18px rgba(31,42,68,.34); }
.listing-card .listing-img{
  position:relative; aspect-ratio:4/3; height:auto; overflow:hidden; background:var(--navy);
}
.listing-card .listing-img img{
  width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,.8,.2,1);
}
.listing-card:hover .listing-img img{ transform:scale(1.06); }
.listing-card .listing-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(15,21,38,.72) 0%, rgba(15,21,38,.12) 38%, rgba(15,21,38,0) 60%);
}
.listing-chip{
  position:absolute; z-index:2; font-family:'Inter',sans-serif; font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:6px 11px; border-radius:2px;
}
.listing-chip-op{ top:14px; left:14px; background:var(--gold); color:var(--cream); }
.listing-chip-count{ top:14px; right:14px; background:rgba(15,21,38,.6); color:#fff; backdrop-filter:blur(3px); letter-spacing:.06em; }
.listing-img-price{
  position:absolute; z-index:2; left:16px; bottom:14px; color:#fff;
  font-family:'Cormorant Garamond',serif; font-size:1.55rem; font-weight:600; letter-spacing:.01em;
  text-shadow:0 1px 14px rgba(0,0,0,.4);
}
.listing-card .listing-body{ padding:20px 22px 26px; display:flex; flex-direction:column; gap:8px; }
.listing-card .listing-tag{
  font-family:'Inter',sans-serif; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin:0;
}
.listing-card .listing-title{
  font-family:'Cormorant Garamond',serif; font-size:1.32rem; line-height:1.22; color:var(--navy);
  margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.listing-card .listing-meta{
  display:flex; gap:16px; margin-top:4px; font-family:'Inter',sans-serif; font-size:.84rem; color:var(--muted-on-cream);
}
.listing-card .listing-meta span{ position:relative; }
.listing-card .listing-meta span + span::before{
  content:""; position:absolute; left:-9px; top:50%; width:3px; height:3px; border-radius:50%;
  background:var(--gold-soft); transform:translateY(-50%);
}

/* ---- homepage featured: "curator's edit" editorial showcase ---- */
.featured-showcase{
  display:grid; grid-template-columns:1.55fr 1fr; gap:22px; align-items:stretch;
}
.featured-stack{ display:grid; grid-template-rows:1fr 1fr; gap:22px; min-height:0; }
.fcard{
  position:relative; display:block; overflow:hidden; border-radius:4px; isolation:isolate;
  background:var(--navy); text-decoration:none; color:#fff;
  transition:transform .5s cubic-bezier(.16,.8,.2,1), box-shadow .5s;
}
.fcard-hero{ min-height:580px; }
.fcard-sm{ min-height:0; }
.fcard:hover{ transform:translateY(-4px); box-shadow:0 26px 56px -24px rgba(15,21,38,.5); }
.fcard-media{ position:absolute; inset:0; z-index:0; }
.fcard-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s cubic-bezier(.16,.8,.2,1);
}
.fcard:hover .fcard-media img{ transform:scale(1.06); }
.fcard::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(15,21,38,.86) 0%, rgba(15,21,38,.5) 32%, rgba(15,21,38,.08) 60%, rgba(15,21,38,0) 80%);
}
/* brass hairline frame, reveals + insets on hover */
.fcard::before{
  content:""; position:absolute; inset:14px; z-index:3; pointer-events:none;
  border:1px solid rgba(201,168,76,0); border-radius:2px;
  transition:border-color .55s ease, inset .55s cubic-bezier(.16,.8,.2,1);
}
.fcard:hover::before{ border-color:rgba(201,168,76,.6); inset:20px; }
.fcard-index{
  position:absolute; top:16px; right:20px; z-index:4;
  font-family:'Cormorant Garamond',serif; font-size:1.15rem; letter-spacing:.1em;
  color:var(--gold-light); opacity:.9;
}
.fcard .listing-chip-op{ position:absolute; top:16px; left:18px; z-index:4; }
.fcard-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; flex-direction:column; gap:9px; padding:30px 32px;
}
.fcard-tag{
  font-family:'Inter',sans-serif; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light); font-weight:600;
}
.fcard-title{
  font-family:'Cormorant Garamond',serif; line-height:1.16; color:#fff; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-shadow:0 1px 18px rgba(0,0,0,.35);
}
.fcard-hero .fcard-title{ font-size:clamp(1.85rem, 2.7vw, 2.5rem); }
.fcard-sm .fcard-title{ font-size:clamp(1.18rem, 1.7vw, 1.46rem); }
.fcard-foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:2px;
}
.fcard-price{
  font-family:'Cormorant Garamond',serif; font-weight:600; color:#fff; letter-spacing:.01em;
  text-shadow:0 1px 14px rgba(0,0,0,.4);
}
.fcard-hero .fcard-price{ font-size:clamp(1.9rem, 2.3vw, 2.25rem); }
.fcard-sm .fcard-price{ font-size:1.45rem; }
.fcard-meta{
  display:flex; gap:15px; font-family:'Inter',sans-serif; font-size:.82rem; color:rgba(255,255,255,.82);
}
.fcard-meta span{ position:relative; }
.fcard-meta span + span::before{
  content:""; position:absolute; left:-8px; top:50%; width:3px; height:3px; border-radius:50%;
  background:var(--gold-light); transform:translateY(-50%);
}
.fcard-cta{
  font-family:'Inter',sans-serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--gold-light);
  max-height:0; opacity:0; transform:translateY(8px); overflow:hidden;
  transition:max-height .45s ease, opacity .45s ease, transform .45s ease;
}
.fcard:hover .fcard-cta, .fcard:focus-visible .fcard-cta{ max-height:2em; opacity:1; transform:none; margin-top:4px; }

@media (max-width:900px){
  .featured-showcase{ grid-template-columns:1fr; gap:18px; }
  .fcard-hero{ min-height:440px; }
  .featured-stack{ grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:18px; }
  .fcard-sm{ min-height:300px; }
  /* touch: no hover, keep CTA visible */
  .fcard-cta{ max-height:2em; opacity:1; transform:none; margin-top:4px; }
}
@media (max-width:560px){
  .featured-stack{ grid-template-columns:1fr; }
  .fcard-hero{ min-height:380px; }
  .fcard-sm{ min-height:280px; }
  .fcard-overlay{ padding:24px 22px; }
}

/* ---- filter bar ---- */
.listings-filter{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 18px;
  margin:0 0 26px; padding:20px 22px; background:var(--cream-bright);
  border:1px solid var(--line,#e2dac9); border-radius:4px;
}
.listings-filter label{
  display:flex; flex-direction:column; gap:6px; font-family:'Inter',sans-serif; font-size:.66rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted-on-cream); font-weight:600;
}
.listings-filter select{
  font-family:'Inter',sans-serif; font-size:.9rem; color:var(--navy); padding:9px 30px 9px 12px; min-width:128px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b6b3d' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--line,#d9d0bd); border-radius:2px; text-transform:none; letter-spacing:0;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}
.listings-filter select:focus{ outline:none; border-color:var(--gold); }
.listings-filter [data-filter-reset]{
  font-family:'Inter',sans-serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:var(--gold); background:none; border:1px solid var(--gold-soft); padding:10px 16px; border-radius:2px; cursor:pointer; transition:.2s;
}
.listings-filter [data-filter-reset]:hover{ background:var(--gold); color:var(--cream); }
.listings-count{ margin-left:auto; font-family:'Inter',sans-serif; font-size:.85rem; color:var(--muted-on-cream); align-self:center; }
.listings-empty{ text-align:center; padding:50px 0; font-family:'Cormorant Garamond',serif; font-size:1.35rem; color:var(--muted-on-cream); }
.listings-empty a{ color:var(--gold); }

/* ---- property map (Leaflet) ---- */
.listings-map{ height:440px; margin:0 0 34px; border:1px solid var(--line,#e2dac9); border-radius:4px; overflow:hidden; z-index:0; }
.leaflet-container{ font-family:'Inter',sans-serif; background:var(--cream-alt); }
.mgni-pin span{
  display:block; width:18px; height:18px; border-radius:50% 50% 50% 0; background:var(--gold);
  transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.leaflet-popup-content-wrapper{ border-radius:4px; padding:0; overflow:hidden; }
.leaflet-popup-content{ margin:0; width:220px !important; }
.map-pop{ display:block; text-decoration:none; color:var(--navy); }
.map-pop img{ width:100%; height:120px; object-fit:cover; display:block; }
.map-pop-op{ display:inline-block; margin:10px 12px 0; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.map-pop-title{ display:block; padding:2px 12px 0; font-family:'Cormorant Garamond',serif; font-size:1.06rem; line-height:1.2; }
.map-pop-meta{ display:block; padding:4px 12px 0; font-size:.76rem; color:var(--muted-on-cream); }
.map-pop-price{ display:block; padding:6px 12px 12px; font-weight:700; color:var(--navy); }

/* ---- detail: neighborhood block (navy, photo-led) ---- */
.listing-neighborhood{ padding:84px 0; background:var(--navy); }
.nb-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:54px; align-items:center; }
.nb-grid-nomedia{ grid-template-columns:1fr; max-width:760px; }
.nb-media{ border-radius:4px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 26px 60px -26px rgba(0,0,0,.6); }
.nb-media img{ width:100%; height:100%; object-fit:cover; }
.nb-text h2{ margin:14px 0 6px; color:var(--cream); }
.nb-text > .eyebrow{ color:var(--gold); }
.nb-text p{ color:var(--muted-on-navy); }
.nb-blurb{ font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-style:italic; color:var(--gold-light) !important; margin:0 0 16px; }
.nb-stats{ display:flex; gap:38px; margin:22px 0 26px; flex-wrap:wrap; }
.nb-stat-label{ font-family:'Inter',sans-serif; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:4px; }
.nb-stat-val{ font-family:'Cormorant Garamond',serif; font-size:1.18rem; color:var(--cream); }
.nb-text .btn-text{ color:var(--gold-light); }

/* ---- detail: amenities + single map (kept) ---- */
.listing-amenities-section{ padding:70px 0; }
.listing-amenities{ list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px 26px; }
.listing-amenities li{ position:relative; padding-left:22px; font-family:'Inter',sans-serif; font-size:.95rem; color:var(--navy); }
.listing-amenities li::before{ content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; background:var(--gold); border-radius:50%; }
.listing-map-section{ padding:70px 0; }
.listing-map{ margin-top:26px; border:1px solid var(--line,#e2dac9); border-radius:4px; overflow:hidden; line-height:0; }
.listing-map iframe{ width:100%; height:420px; border:0; display:block; filter:grayscale(.25) contrast(.95); }
.listing-map-note{ margin-top:14px; font-family:'Inter',sans-serif; font-size:.85rem; color:var(--muted-on-cream); }
.listing-map-note a{ color:var(--gold); }

/* ---- detail: related ---- */
.listing-related{ padding:78px 0; }

/* ---- detail: gallery (clickable) ---- */
.listing-gallery-item{ display:block; overflow:hidden; border-radius:3px; cursor:zoom-in; line-height:0; }
.listing-gallery-item img{ transition:transform .6s cubic-bezier(.16,.8,.2,1); }
.listing-gallery-item:hover img{ transform:scale(1.05); }

/* ---- lightbox ---- */
.mgni-lightbox{ position:fixed; inset:0; z-index:1000; background:rgba(12,16,28,.93); display:flex; align-items:center; justify-content:center; }
.mgni-lightbox[hidden]{ display:none; }
.mgni-lightbox figure{ margin:0; max-width:90vw; max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:12px; }
.mgni-lightbox img{ max-width:90vw; max-height:82vh; object-fit:contain; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
.mgni-lightbox figcaption{ font-family:'Inter',sans-serif; font-size:.8rem; letter-spacing:.1em; color:rgba(255,255,255,.7); }
.mgni-lightbox button{ position:absolute; background:none; border:0; color:#fff; cursor:pointer; opacity:.8; transition:opacity .2s; }
.mgni-lightbox button:hover{ opacity:1; }
.lb-close{ top:24px; right:30px; font-size:2.4rem; line-height:1; }
.lb-prev, .lb-next{ top:50%; transform:translateY(-50%); font-size:3.4rem; line-height:1; padding:0 22px; }
.lb-prev{ left:10px; } .lb-next{ right:10px; }

/* ---- responsive ---- */
@media (max-width:980px){
  .listings-grid{ grid-template-columns:repeat(2,1fr); }
  .nb-grid{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:720px){
  .listings-grid{ grid-template-columns:1fr; }
  .listings-filter{ gap:12px 14px; padding:16px; }
  .listings-filter label{ flex:1 1 44%; }
  .listings-filter select{ min-width:0; width:100%; }
  .listings-count{ flex:1 1 100%; margin-left:0; }
  .listings-map{ height:320px; }
  .listing-map iframe{ height:300px; }
  .lb-prev, .lb-next{ font-size:2.4rem; padding:0 10px; }
}

/* =========================================================
   LIBRARY — "Two Rooms" interactive diptych (v3, 2026-06-16)
   Textured animated scenes; hover expands + defocuses the
   other room; click opens a room inline and turns the other
   into a clearly-labelled switch panel. One page, no nav.
   ========================================================= */
.lib-stage-section { padding: 0; }
.lib-stage { position: relative; display: flex; min-height: 90vh; background: var(--navy-deep);
  overflow: hidden; isolation: isolate; }
.lib-stage.is-open { min-height: 0; }

.lib-wing { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; padding: clamp(34px,5vw,96px);
  transition: flex-grow .8s cubic-bezier(.16,1,.3,1), flex-basis .8s cubic-bezier(.16,1,.3,1), filter .55s ease; }
.lib-wing:focus-visible { outline: none; }
.lib-wing-books { background: #ece2cc; color: var(--text-on-cream); }
.lib-wing-videos { background: #111a2e; color: var(--text-on-navy); }

/* animated scene / backdrop (z0), navy tint overlay (z1) */
.lib-scene { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.lib-wing-books .lib-scene { background: radial-gradient(120% 90% at 12% -10%, #f7f0e2 0%, #ece2cc 48%, #e1d3b6 100%); }
.lib-wing-books .lib-scene::before { content:"M"; position:absolute; right:-3%; bottom:-22%;
  font-family:'Fraunces',serif; font-weight:500; font-size:64vh; line-height:.78; color:rgba(31,42,68,.045); }
.lib-wing-books .lib-scene::after { content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, rgba(31,42,68,.02) 0 1px, transparent 1px 4px); }
.lib-wing-videos .lib-scene { background:#0f1727 url('Photos Buenos Aires/MGNI BA PIX (24).png') center/cover no-repeat;
  filter: grayscale(.45) brightness(.46) contrast(1.06) saturate(.7);
  transform: scale(1.14); animation: libKen 36s ease-in-out infinite alternate; }
.lib-scene-tint { position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(75% 60% at 72% 28%, rgba(139,107,61,.20), transparent 60%),
    linear-gradient(155deg, rgba(20,30,52,.66) 0%, rgba(13,20,36,.92) 72%); }
@keyframes libKen { from{ transform:scale(1.12) translate(0,0);} to{ transform:scale(1.24) translate(-2.5%,-2%);} }

.lib-wing-videos::after { content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.34)); }
.lib-wing-videos::before { content:""; position:absolute; left:0; top:0; bottom:0; width:1px; z-index:7;
  background: linear-gradient(180deg, transparent, rgba(139,107,61,.7) 20%, rgba(230,204,122,.85) 50%, rgba(139,107,61,.7) 80%, transparent);
  box-shadow: 0 0 26px 2px rgba(139,107,61,.30); }

/* idle inner */
.lib-wing-inner { position: relative; z-index: 8; max-width: 33ch; }
.lib-kicker { display:flex; align-items:center; gap:12px; font-family:'Hanken Grotesk',sans-serif;
  font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:22px; }
.lib-wing-videos .lib-kicker { color: var(--gold-light); }
.lib-count { margin-left:auto; font-variant-numeric:tabular-nums; letter-spacing:.12em;
  padding:3px 10px; border:1px solid var(--gold-soft); border-radius:999px; font-size:.64rem; }
.lib-wing-title { font-family:'Fraunces',Georgia,serif; font-weight:500; letter-spacing:-0.02em;
  font-size: clamp(2.2rem,3.6vw,3.7rem); line-height:1.02; margin-bottom:16px; }
.lib-wing-title em { font-style:italic; color:var(--gold); }
.lib-wing-videos .lib-wing-title em { color: var(--gold-light); }
.lib-wing-sub { font-size:1.04rem; line-height:1.55; color:var(--muted-on-cream); max-width:34ch; }
.lib-wing-videos .lib-wing-sub { color: var(--muted-on-navy); }
.lib-open-cue { display:inline-flex; align-items:center; gap:13px; margin-top:30px;
  font-family:'Hanken Grotesk',sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.lib-wing-videos .lib-open-cue { color: var(--gold-light); }
.lib-open-ring { width:42px; height:42px; border-radius:50%; border:1px solid currentColor; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; transition:background .4s ease, transform .4s ease; }
.lib-open-ring svg { width:15px; height:15px; fill:currentColor; transition:fill .4s ease; }

/* idle preview art */
.lib-preview { position:absolute; z-index:7; pointer-events:none;
  transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
.lib-preview-books { right:-26px; top:50%; transform:translateY(-50%); display:flex; align-items:center; }
.lib-cover { width:clamp(96px,9vw,150px); aspect-ratio:1/1.41; border-radius:3px; object-fit:cover;
  box-shadow:0 26px 50px rgba(31,42,68,.4); transform-origin:bottom center; margin-left:-46px;
  border:1px solid rgba(31,42,68,.10); transition:transform .8s cubic-bezier(.16,1,.3,1); }
.lib-cover:first-child{ margin-left:0; }
.lib-cover:nth-child(1){ transform:rotate(-13deg) translateY(10px); }
.lib-cover:nth-child(2){ transform:rotate(-4.5deg) translateY(-4px); z-index:2; }
.lib-cover:nth-child(3){ transform:rotate(4.5deg) translateY(-4px); z-index:2; }
.lib-cover:nth-child(4){ transform:rotate(13deg) translateY(10px); }
.lib-preview-videos { right:-26px; top:50%; transform:translateY(-50%) rotate(-8deg);
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px; width:min(48%,430px); }
.lib-thumb { position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.5); border:1px solid var(--rule-on-navy); }
.lib-thumb img{ width:100%; height:100%; object-fit:cover; }
.lib-thumb::after{ content:""; position:absolute; inset:0; background:rgba(15,23,39,.22); }
.lib-thumb-play{ position:absolute; inset:0; margin:auto; width:34px; height:34px; border-radius:50%;
  background:rgba(139,107,61,.9); display:flex; align-items:center; justify-content:center; z-index:2; }
.lib-thumb-play svg{ width:12px; height:12px; fill:#fff; margin-left:2px; }

/* hover: expand + defocus the other room */
@media (hover:hover) and (min-width:821px){
  .lib-stage:not(.is-open):hover .lib-wing { flex-grow:.74; }
  .lib-stage:not(.is-open):hover .lib-wing:not(:hover) { filter:brightness(.72) saturate(.82) blur(2px); }
  .lib-stage:not(.is-open) .lib-wing:hover { flex-grow:2.2; filter:none; }
  .lib-wing:hover .lib-open-cue { opacity:1; transform:translateY(0); }
  .lib-wing:hover .lib-open-ring { background:currentColor; transform:translateX(2px); }
  .lib-wing-books:hover .lib-open-ring svg { fill:#ece2cc; }
  .lib-wing-videos:hover .lib-open-ring svg { fill:#111a2e; }
  .lib-wing-books:hover .lib-preview-books { transform:translate(-34px,-50%); }
  .lib-wing-books:hover .lib-cover:nth-child(1){ transform:rotate(-21deg) translateY(-8px) translateX(-26px); }
  .lib-wing-books:hover .lib-cover:nth-child(2){ transform:rotate(-7deg) translateY(-18px) scale(1.03); }
  .lib-wing-books:hover .lib-cover:nth-child(3){ transform:rotate(7deg) translateY(-18px) scale(1.03); }
  .lib-wing-books:hover .lib-cover:nth-child(4){ transform:rotate(21deg) translateY(-8px) translateX(26px); }
  .lib-wing-videos:hover .lib-preview-videos { transform:translateY(-50%) rotate(-3deg) translateX(-28px) scale(1.05); }
}

/* OPEN state */
.lib-wing.is-open { flex:1 1 auto; cursor:default; justify-content:flex-start;
  padding:clamp(34px,4vw,72px) clamp(20px,2.6vw,52px); }
.lib-wing.is-open .lib-wing-inner, .lib-wing.is-open .lib-preview, .lib-wing.is-open .lib-switch { display:none; }
.lib-full { display:none; position:relative; z-index:8; width:100%; max-width:1220px; }
.lib-wing.is-open .lib-full { display:block; animation:libReveal .75s both; }
@keyframes libReveal { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }

/* COLLAPSED = switch panel (the other room) */
.lib-wing.is-collapsed { flex:0 0 clamp(190px,18%,300px); cursor:pointer; justify-content:flex-start;
  padding:clamp(36px,4vw,72px) clamp(22px,2.4vw,40px); }
.lib-wing.is-collapsed .lib-wing-inner, .lib-wing.is-collapsed .lib-preview, .lib-wing.is-collapsed .lib-full { display:none; }
.lib-switch { display:none; }
.lib-wing.is-collapsed .lib-switch { display:flex; flex-direction:column; position:sticky; top:104px; z-index:8; width:100%; }
.lib-switch-eyebrow { font-family:'Hanken Grotesk',sans-serif; font-size:.66rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted-on-cream); margin-bottom:12px; }
.lib-wing-videos .lib-switch-eyebrow { color:var(--muted-on-navy); }
.lib-switch-name { font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.5rem,2vw,2.05rem);
  line-height:1.06; margin-bottom:26px; }
.lib-switch-peek { display:flex; gap:10px; margin-bottom:28px; }
.lib-switch-peek img { border-radius:3px; box-shadow:0 14px 28px rgba(0,0,0,.4); object-fit:cover;
  transition:transform .4s cubic-bezier(.16,1,.3,1); }
.lib-wing-books .lib-switch-peek img { width:56px; aspect-ratio:1/1.41; }
.lib-wing-videos .lib-switch-peek img { width:92px; aspect-ratio:16/9; }
.lib-switch-go { display:inline-flex; align-items:center; gap:13px; font-family:'Hanken Grotesk',sans-serif;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.lib-wing-videos .lib-switch-go { color:var(--gold-light); }
.lib-switch-go .ring { width:42px; height:42px; border-radius:50%; border:1px solid currentColor;
  display:flex; align-items:center; justify-content:center; transition:background .35s, transform .35s; }
.lib-switch-go .ring svg { width:15px; height:15px; fill:currentColor; transition:fill .35s; }
.lib-wing.is-collapsed:hover { flex-basis: clamp(264px,30%,448px); }
.lib-wing.is-collapsed:hover .lib-switch-go .ring { background:currentColor; transform:translateX(3px); }
.lib-wing-books.is-collapsed:hover .lib-switch-go .ring svg { fill:#ece2cc; }
.lib-wing-videos.is-collapsed:hover .lib-switch-go .ring svg { fill:#111a2e; }
.lib-wing.is-collapsed:hover .lib-switch-peek img { transform:translateY(-4px); }

/* open header bar */
.lib-bar { display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  margin-bottom:clamp(28px,3vw,44px); padding-bottom:20px; border-bottom:1px solid var(--rule-on-cream); }
.lib-wing-videos .lib-bar { border-bottom-color:var(--rule-on-navy); }
.lib-bar-title { font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.7rem,2.6vw,2.6rem); line-height:1.05; }
.lib-bar-title small { display:block; font-family:'Hanken Grotesk',sans-serif; font-weight:600;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:9px; }
.lib-wing-videos .lib-bar-title small{ color:var(--gold-light); }
.lib-back { display:inline-flex; align-items:center; gap:9px; font-family:'Hanken Grotesk',sans-serif;
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  background:none; border:1px solid currentColor; color:inherit; padding:10px 16px; border-radius:999px;
  white-space:nowrap; opacity:.72; transition:opacity .25s, background .25s; }
.lib-back:hover { opacity:1; }
.lib-full .shelf { margin-top:0; }

@media (max-width:820px){
  /* Phones/tablets: the desktop "lean into a room to expand it" mechanic is
     fragile on touch (the wing clips to ~0 height and the reveal flashes then
     vanishes). Retire it here: both rooms are simply stacked, fully open and
     readable, with a plain scroll. The JS open/close is disabled to match. */
  .lib-stage, .lib-stage.is-open { flex-direction:column; min-height:0; }
  /* height:auto lets each room grow to fit its content (no text clipping);
     overflow:hidden stays so the videos room's oversized ken-burns photo
     can't spill up into the books room. */
  .lib-wing, .lib-wing.is-open, .lib-wing.is-collapsed {
    flex:0 0 auto; height:auto; overflow:hidden; cursor:default;
    justify-content:flex-start; padding:clamp(40px,7vw,64px) clamp(22px,6vw,40px); }
  .lib-wing-videos::before { left:0; right:0; top:0; bottom:auto; width:auto; height:1px; }
  .lib-preview, .lib-switch, .lib-open-cue, .lib-bar { display:none !important; }
  /* show each room's full content inline, no animation */
  .lib-wing .lib-wing-inner,
  .lib-wing.is-open .lib-wing-inner,
  .lib-wing.is-collapsed .lib-wing-inner { display:block; max-width:none; margin-bottom:30px; }
  .lib-wing .lib-full,
  .lib-wing.is-open .lib-full,
  .lib-wing.is-collapsed .lib-full { display:block !important; max-width:none; animation:none; }
  .lib-full .shelf { margin-top:8px; }
}
@media (max-width:600px){
  .lib-full .shelf { grid-template-columns:1fr; }
  .lib-read-actions { flex-wrap:wrap; gap:10px; }
  .lib-read-actions .btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .lib-wing-videos .lib-scene { animation:none; }
  .lib-wing, .lib-cover, .lib-preview { transition:none; }
}
/* ===== In the Media ===== */
.press-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px; background: var(--rule-on-cream); border: 1px solid var(--rule-on-cream); }
.press-card { background: var(--cream); padding: 34px 30px; display: flex; flex-direction: column;
  gap: 10px; transition: background .25s ease; }
.press-card:hover { background: var(--cream-bright); }
.press-kind { font-family: 'Hanken Grotesk', sans-serif; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.press-outlet { font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-weight: 500; line-height: 1.05; }
.press-desc { color: var(--muted-on-cream); font-size: 0.98rem; line-height: 1.5; }
.press-card .btn-text { margin-top: auto; padding-top: 8px; }
.press-quotes { display: grid; gap: 40px; max-width: 900px; margin: 0 auto; }
.press-quote { font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.32; color: var(--cream); }
.press-quote cite { display: block; margin-top: 14px; font-family: 'Hanken Grotesk', sans-serif;
  font-style: normal; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); }
/* ===== Library videos: subheads, shorts (portrait) grid ===== */
.video-subhead { font-family: 'Hanken Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light);
  margin: 56px 0 24px; display: flex; align-items: center; gap: 14px; }
.video-subhead::before { content: ""; width: 30px; height: 1px; background: var(--gold); display: block; }
.video-subhead:first-of-type { margin-top: 48px; }
.shorts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 20px; }
.short-card { cursor: pointer; }
.short-thumb { position: relative; aspect-ratio: 9 / 16; border-radius: 7px; overflow: hidden;
  background: var(--navy-deep); border: 1px solid var(--rule-on-navy); }
.short-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.19,1,.22,1); }
.short-card:hover .short-thumb img { transform: scale(1.045); }
.short-card:focus-visible .short-thumb { outline: 2px solid var(--gold); outline-offset: 2px; }
.short-title { margin-top: 11px; font-family: 'Hanken Grotesk', sans-serif; font-size: 0.83rem;
  line-height: 1.36; color: var(--cream); }
/* ===== Library Shorts carousel (portrait, browseable) ===== */
.shorts-carousel { position: relative; }
.shorts-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px 2px 14px; scrollbar-width: none; -ms-overflow-style: none; }
.shorts-track::-webkit-scrollbar { display: none; }
.shorts-track .short-card { flex: 0 0 clamp(166px, 19vw, 208px); scroll-snap-align: start; }
.shorts-nav { position: absolute; top: calc(50% - 14px); transform: translateY(-50%); z-index: 6;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule-on-navy);
  background: rgba(15,23,39,.86); color: var(--cream); cursor: pointer; backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Hanken Grotesk', sans-serif; font-size: 1.5rem; line-height: 1;
  transition: border-color .25s, color .25s, background .25s, opacity .25s; }
.shorts-nav:hover { border-color: var(--gold); color: var(--gold-light); }
.shorts-nav[disabled] { opacity: .25; cursor: default; pointer-events: none; }
.shorts-prev { left: -14px; } .shorts-next { right: -14px; }
@media (max-width: 820px) { .shorts-nav { display: none; } .shorts-track { scroll-snap-type: x proximity; } }
/* ===== In the Media — editorial press wall ===== */
.media-intro { max-width: 760px; margin: 0 auto clamp(40px,5vw,64px); text-align: center; }
.media-intro .eyebrow { justify-content: center; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: clamp(18px, 2.2vw, 26px); max-width: 1180px; margin: 0 auto; }
.media-card { position: relative; display: flex; flex-direction: column;
  background: var(--cream-bright); border: 1px solid var(--rule-on-cream); border-radius: 4px;
  padding: clamp(26px,2.4vw,34px) clamp(24px,2.2vw,30px) clamp(24px,2.1vw,30px);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s; }
.media-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.media-card:hover { transform: translateY(-5px); border-color: transparent;
  box-shadow: 0 22px 46px -24px rgba(22,32,58,.45); }
.media-card:hover::before { transform: scaleX(1); }
.media-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 18px;
  font-family: 'Hanken Grotesk', sans-serif; font-size: .66rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.media-kicker svg { width: 15px; height: 15px; flex: none; }
.media-kicker .media-carddate { margin-left: auto; color: var(--muted-on-cream); letter-spacing: .1em; }
.media-outlet { font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: clamp(1.46rem, 2.3vw, 1.82rem); line-height: 1.12; letter-spacing: -.01em;
  color: var(--navy); margin: 0 0 6px; transition: color .3s; }
.media-card:hover .media-outlet { color: var(--gold); }
.media-program { font-family: 'Hanken Grotesk', sans-serif; font-size: .82rem; font-weight: 500;
  color: var(--muted-on-cream); margin: 0 0 16px; }
.media-card p { font-size: .93rem; line-height: 1.6; color: var(--muted-on-cream); margin: 0 0 24px;
  display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.media-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.media-cta { display: inline-flex; align-items: center; gap: 7px; font-family: 'Hanken Grotesk', sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.media-cta .arrow { transition: transform .3s; }
.media-card:hover .media-cta-primary { color: var(--gold); }
.media-card:hover .media-cta-primary .arrow { transform: translateX(4px); }
.media-cta-primary::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.media-cta-secondary { position: relative; z-index: 2; color: var(--muted-on-cream);
  border-bottom: 1px solid var(--gold-soft); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.media-cta-secondary:hover { color: var(--gold); border-color: var(--gold); }
.media-divider { text-align: center; margin: clamp(48px,6vw,76px) auto clamp(28px,3.4vw,40px); }
@media (max-width: 560px) { .media-grid { grid-template-columns: 1fr; } }
/* ===== Field Notes archive: equal-height excerpts (3 lines) ===== */
.fn-archive .listing-body p { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: 4.9em; }

/* ============================================================
   P0 PRE-DEPLOY FIX (2026-06-19) — horizontal-overflow guard
   - Global guard: no element should ever produce a page-level
     horizontal scrollbar (also backstops the wide .hero-film track).
   - ES nav labels run ~100px wider than EN; at 1025-1378px the full
     desktop nav + CTA overran the 1280 header lock and clipped the
     "Reserva una llamada" button. Condense the ES nav in that range.
   ============================================================ */
html, body { overflow-x: hidden; }

@media (min-width: 1025px) and (max-width: 1700px) {
  html[lang="es"] .nav-main { gap: 11px; margin-left: 14px; }
  html[lang="es"] .nav-main a { font-size: 0.69rem; letter-spacing: 0.03em; }
  html[lang="es"] .nav-cta { padding-left: 13px; padding-right: 13px; }
}