/* ABOUT US PAGE */
.about-section {
  background: #0a1e38;
  padding: 200px 4rem 6rem;
}
.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4.5rem;
  max-width: 1170px;
  margin: 0 auto;
  align-items: start;
}
.about-title {
  font-family: 'Playfair Display', serif;
  font-variant: small-caps;
  font-weight: 500;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  line-height: 1.25;
  color: var(--text-light);
  margin: 0.6rem 0 1.75rem;
  letter-spacing: 0.01em;
}
.about-text p {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(245,245,240,0.62);
  margin: 0 0 1.4rem;
  max-width: 600px;
}
.about-card {
  background: #1c2733;
  padding: 2.5rem 2.5rem 2.75rem;
}
.about-card h4 {
  font-family: 'Playfair Display', serif;
  font-variant: small-caps;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--text-light);
  margin: 0 0 1.1rem;
  letter-spacing: 0.01em;
}
.about-card p {
  font-family: 'Jost', sans-serif;
  font-size: 0.92rem;
  line-height: 1.8;
  color: #a9b4c0;
  margin: 0;
}
@media (max-width: 900px) {
  .about-section { padding: 160px 1.5rem 4rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* HERO SECTION */
.hero {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.80) 0%, rgba(10,10,10,0.48) 38%, rgba(10,10,10,0.08) 68%, rgba(10,10,10,0) 100%),
    url('../images/heronewimage.jpg') center center / cover no-repeat;
  display: flex;
  align-items: center;
  padding: 7rem 4rem 4rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#hero-canvas {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12,12,12,0.75) 0%, rgba(12,12,12,0.35) 45%, rgba(12,12,12,0) 75%);
  z-index: 0;
  pointer-events: none;
}

:root {
  --gold: #B8953F;
  --gold-dark: #8B6914;
  --gold-light: #D4AF6A;
  --gold-pale: #F5EDD8;
  --dark: #0C0C0C;
  --dark-2: #141414;
  --mid: #2A2A2A;
  --white: #FAFAF7;
  --white-2: #F2F0EA;
  --white-3: #E8E4D9;
  --text-dark: #1A1A1A;
  --text-mid: #555550;
  --text-light: #F5F5F0;
  --text-muted-light: #888880;
  --green: #2D7A4F;
  --green-light: #E8F4ED;
  --red: #C0392B;
  --border-dark: rgba(184,149,63,0.2);
  --border-light: rgba(26,26,26,0.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { overscroll-behavior-y: none; }
body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: clip;
  overscroll-behavior-y: none;
  background: var(--dark);
  color: var(--text-light);
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 4rem;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(12,68,124,0.12);
  transition: all 0.4s ease;
}
nav.scrolled { padding: 1rem 4rem; }
.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: #0C447C;
  text-decoration: none;
  letter-spacing: 0.06em;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.logo-mark { height: 88px; width: auto; display: block; margin-right: -26px; }
.logo span { color: #1a2733; font-weight: 300; font-size: 1.2rem; }
.logo::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1.5px;
  background: transparent;
  transform: scaleX(0);
  transform-origin: center center;
  animation: logoUnderline 1s ease-out 0.35s forwards;
}
@keyframes logoUnderline {
  to { transform: scaleX(1); }
}
.nav-links { display: flex; gap: 2.5rem; list-style: none; margin-left: auto; margin-right: 2.5rem; }
.nav-links a {
  color: #1c2733;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.3s;
  position: relative;
  padding-bottom: 5px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: #0C447C;
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover { color: #0C447C; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  background: #0C447C;
  color: #ffffff;
  border: 1px solid #0C447C;
  padding: 0.55rem 1.55rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.nav-cta:hover { background: #0a3862; color: #ffffff; }
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer;
  padding: 5px; z-index: 200;
}
.nav-burger span {
  display: block; width: 22px; height: 2px;
  background: #0C447C; border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
nav.mobile-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.mobile-open .nav-burger span:nth-child(2) { opacity: 0; }
nav.mobile-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── LANGUAGE SWITCHER ── */
.lang-switcher { position: relative; margin-left: 1.5rem; margin-right: 1.5rem; }
.lang-toggle {
  background: none; border: 1px solid rgba(12,68,124,0.35); color: #0C447C;
  font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.4rem 0.7rem; cursor: pointer; border-radius: 3px;
  display: flex; align-items: center; gap: 0.35rem;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.lang-toggle:hover { border-color: #0C447C; background: rgba(12,68,124,0.08); color: #0C447C; }
.lang-toggle::after { content: '▾'; font-size: 0.6rem; }
.lang-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #ffffff; border: 1px solid rgba(12,68,124,0.18);
  border-radius: 4px; min-width: 150px; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(12,68,124,0.12);
}
.lang-switcher.open .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-option {
  display: block; padding: 0.55rem 0.75rem; font-family: 'Jost', sans-serif;
  font-size: 0.82rem; color: #1a2733; text-decoration: none;
  border-radius: 3px; transition: background 0.2s, color 0.2s;
}
.lang-option:hover { background: rgba(12,68,124,0.08); color: #0C447C; }
.lang-option.active { color: #0C447C; font-weight: 500; }
@media (max-width: 900px) {
  .lang-switcher { margin-right: 0.75rem; }
}

/* ── HERO (DARK) ── */


.hero-bg {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.15);
  z-index: 0;
  pointer-events: none;
}


.hero-grid {
  position: absolute; inset: 0; opacity: 0.03;
  background-image:
    linear-gradient(rgba(184,149,63,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,149,63,1) 1px, transparent 1px);
  background-size: 80px 80px;
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 700px;
  width: 100%;
}
.hero-tag {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-family: 'Jost', sans-serif;
  font-size: clamp(3rem, 5vw, 4.6rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: var(--text-light);
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: normal;
  color: var(--text-light);
  font-weight: 700;
}
.hero-sub {
  color: rgba(245,245,240,0.95);
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 460px;
}
.hero-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.btn-gold {
  background: #0C447C;
  color: #ffffff;
  padding: 0.85rem 2rem;
  border-radius: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  display: inline-block;
}
.btn-gold:hover { background: #0a3862; color: #ffffff; }
.btn-ghost {
  color: rgba(245,245,240,0.9);
  border: 1px solid rgba(245,245,240,0.4);
  padding: 0.85rem 2rem;
  border-radius: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s, background 0.3s, border-color 0.3s;
  display: inline-flex; align-items: center;
}
.btn-ghost:hover { color: #1a1a1a; background: rgba(245,245,240,0.9); border-color: rgba(245,245,240,0.9); }
.btn-ghost::after { content: none; }



/* ── OUR PERFORMANCE (WHITE, SPLIT) ── */
.perf-strip { background: var(--white); padding: 4rem; }
.perf-new-wrap {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #E6E3DA;
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.05);
  padding: 3rem;
}
.perf-new-badge {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0C447C;
  margin-bottom: 0.75rem;
}
.perf-new-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  line-height: 1.25;
  color: #0a1e38;
  margin: 0 0 0.9rem;
}
.perf-new-title em { font-style: normal; color: #0C447C; }
.perf-new-body {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.7;
  color: #5a6270;
  max-width: 460px;
  margin: 0 0 1.5rem;
}
.perf-new-btn {
  background: #0C447C;
  color: #ffffff;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  padding: 0.9rem 1.75rem;
  border-radius: 6px;
  transition: background 0.25s;
}
.perf-new-btn:hover { background: #0a3862; }
.perf-new-visual {
  background: #0a1e38;
  border-radius: 12px;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.perf-new-visual.reveal-right.visible {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.perf-new-visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.28);
}
.perf-new-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.perf-new-visual:hover img { transform: scale(1.04); }
.perf-new-formholder {
  grid-column: 1 / -1;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 900px) {
  .perf-new-wrap { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .perf-new-body { margin-left: auto; margin-right: auto; }
  .perf-new-visual { min-height: 220px; }
}

/* ── METRICS STRIP (WHITE) — retired, kept only so any stray cached
   markup on an unrefreshed page doesn't render unstyled. ── */
.metrics-wrap { position: relative; }
.perf-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  background: #0C447C;
  color: #ffffff;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(12,68,124,0.22);
  white-space: nowrap;
}
.metrics-strip {
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  border: none;
  position: relative;
  z-index: 5;
  padding: 3rem 2rem 0;
  transition: opacity 0.5s ease;
}
.metric-item {
  padding: 1.75rem 1.25rem 2rem;
  border: 1px solid #E4E1D8;
  border-radius: 8px;
  background: transparent;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  transition: background 0.6s ease, border-color 0.6s ease;
}
.metric-item:last-child { border: 1px solid #E4E1D8; }
.metric-item:hover { background: transparent; }
.metric-label {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a6270;
  margin: 0.9rem 0 0;
  transition: color 0.6s ease;
}
.metric-value {
  font-family: 'Jost', sans-serif;
  font-size: 3rem;
  font-weight: 300;
  color: #0C447C;
  line-height: 1;
  margin: 0;
  transition: color 0.6s ease;
}
.metric-value.neutral { color: #1a2733; }
.metric-sub { font-size: 0.7rem; color: #555550; }

/* Homepage performance teaser — after the count-up animation finishes,
   the 4-card grid fades out entirely (no real figures ever remain on
   screen) and a single dark-blue panel fades in with the acknowledgment
   gate, replacing the grid rather than tinting the individual cards. */
#perfMetricsStrip.perf-fading { opacity: 0; }
.perf-strip-note:has(+ .perf-gate) { padding-bottom: 0; }
.perf-gate {
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  background: #0a1e38;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.perf-gate-disclaimer {
  font-size: 0.85rem;
  color: rgba(245,245,240,0.8);
  line-height: 1.6;
  max-width: 460px;
  text-align: left;
}
.perf-gate-btn {
  background: #ffffff;
  color: #0a1e38;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  padding: 0.85rem 1.75rem;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.25s;
}
.perf-gate-btn:hover { background: #e7e4dc; }
@media (max-width: 640px) {
  .perf-gate { flex-direction: column; text-align: center; padding: 1.75rem; }
  .perf-gate-disclaimer { text-align: center; max-width: none; }
}
.perf-strip-note {
  text-align: center;
  font-size: 1rem;
  color: #5a6270;
  background: var(--white);
  max-width: none;
  margin: 0;
  padding: 2rem 2rem 2.6rem;
  line-height: 1.7;
  border: none;
}
#who-we-are { padding-top: 3rem; }
/* Whole section as one card — matches the "How It Works" treatment.
   The section itself stays full-bleed (its background must reach the
   section's own edges, otherwise the dark body background shows through
   as a black band); the card border/shadow goes on the inner grid. */
.who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #E6E3DA;
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.05);
  padding: 3rem;
}
.who-text {
  align-self: start;
}
#who-we-are .section-tag-light { color: #0C447C !important; }
#who-we-are .section-title-light { color: #1a2733 !important; }
#who-we-are .section-title-light em { color: #0C447C !important; }
#who-we-are .section-body-light { color: #4a5568 !important; }
#services .section-title-light em { color: var(--text-dark); }
.who-image {
  border-radius: 8px;
  overflow: hidden;
  min-height: 400px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* A page-level rule sets .reveal { transition: none !important } so GSAP
   doesn't fight CSS transitions during the scroll-in fade; restore a
   snappy hover transition (also !important, to win against that rule)
   once the scroll-in fade has finished. */
.who-image.reveal.visible {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.who-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.18);
}
.who-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.who-image:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
  .who-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .who-image { min-height: 300px; }
}
/* WHAT WE DO — service cards */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  max-width: 1170px;
  margin: 0 auto;
}
.service-card {
  flex: 0 1 360px;
  max-width: 360px;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 2.4rem 2rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.09);
  border-color: rgba(184,149,63,0.35);
}
.service-card.service-image {
  padding: 0;
  overflow: hidden;
  display: flex;
  background: #0a0a0a;
  border-color: rgba(184,149,63,0.25);
  min-height: 240px;
}
.service-card.service-image img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.service-icon { color: var(--gold); margin-bottom: 1.3rem; }
.service-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.service-card p {
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 700px) {
  .service-card { flex: 1 1 100%; max-width: 100%; }
}
/* beat .section-light-2 div/p color rules */
#services .service-icon, #services .service-icon svg { color: var(--gold); stroke: var(--gold); }
#services .service-card p { color: var(--text-mid); }

/* Whole-section card, matching How It Works / Who We Are / Why Trust Us.
   The section itself stays full-bleed; the card border/shadow goes on
   the inner wrapper. */
.services-wrap {
  background: #ffffff;
  border: 1px solid #E6E3DA;
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.05);
  padding: 3rem;
}
@media (max-width: 900px) {
  .services-wrap { padding: 2rem 1.5rem; }
}
/* WHAT WE DO — editorial 2x2 cards */
.services-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  max-width: 1170px;
  margin: 0 auto;
}
.service-card-v2 {
  background: #1c2733;
  border: 1px solid #1c2733;
  padding: 2.5rem 2.5rem 2.75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.22);
}
.service-card-v2 h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--text-light);
  margin: 0 0 1rem;
}
.service-card-v2 p {
  font-size: 0.95rem;
  color: #a9b4c0;
  line-height: 1.7;
  margin: 0;
}
.sc-divider {
  height: 1px;
  background: rgba(245,245,240,0.14);
  margin: 1.5rem 0 1.25rem;
}
.sc-list { list-style: none; margin: 0; padding: 0; }
.sc-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.88rem;
  color: #c7ced6;
  line-height: 1.9;
}
.sc-list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: #4a9fe8;
}
@media (max-width: 800px) {
  .services-grid-v2 { grid-template-columns: 1fr; }
}
#services .service-card-v2 p { color: #a9b4c0 !important; }
.sc-bestfor {
  font-size: 0.82rem;
  color: #7a8ca0 !important;
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(245,245,240,0.1);
}
.sc-bestfor strong { color: #4a9fe8; font-weight: 500; }
#services .service-card-v2 .sc-list li { color: #c7ced6 !important; }

/* ── PROBLEM (DARK) ── */
.section-dark {
  background: var(--dark-2);
  padding: 4rem 4rem;
}
.section-dark#problem {
  background: var(--white);
}
#problem .section-tag-dark { color: #0C447C; }
#problem .section-title-dark { color: #1a2733; }
#problem .whyinvest-sub { color: #5a6270; }
.section-light {
  background: var(--white);
  padding: 4rem 4rem;
  color: var(--text-dark);
}
.section-light-2 {
  background: var(--white-2);
  padding: 4rem 4rem;
  color: var(--text-dark);
}
.section-tag-dark {
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4a9fe8;
  margin-bottom: 1rem;
  font-weight: 600;
}
.section-tag-light {
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0C447C;
  margin-bottom: 1rem;
  font-weight: 600;
}
.section-title-dark {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-light);
  margin-bottom: 1rem;
}
.section-title-dark em { font-style: normal; color: var(--gold); }
.section-title-light {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.2;
  color: #0C0C0C;
  margin-bottom: 1rem;
}
.section-title-light em { font-style: normal; color: #0C447C; }
.section-body-dark { color: rgba(245,245,240,0.55); max-width: 540px; line-height: 1.9; font-size: 0.95rem; font-weight: 400; }
.section-body-light { color: #1A1A1A; max-width: 540px; line-height: 1.9; font-size: 0.95rem; font-weight: 400; }

/* PROBLEM GRID */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
  align-items: start;
}
.problem-list { list-style: none; }
.problem-list li {
  padding: 1.1rem 0;
  border-bottom: 0.5px solid rgba(184,149,63,0.1);
  display: flex; gap: 1rem;
  color: rgba(245,245,240,0.55);
  font-size: 0.9rem;
  line-height: 1.7;
}
.problem-list li::before { content: '·'; color: var(--gold); flex-shrink: 0; }
.problem-callout {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid var(--border-dark);
  border-left: 3px solid var(--gold);
  padding: 2.5rem;
}
.problem-callout blockquote {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-style: normal;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 2rem;
}
.callout-stats { display: flex; gap: 2rem; flex-wrap: wrap; }
.callout-stat { }
.callout-stat .num {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: var(--red);
  line-height: 1;
}
.callout-stat .lbl { font-size: 0.7rem; color: rgba(245,245,240,0.4); margin-top: 0.2rem; }

/* ── WHY ETFs (WHITE) ── */
.etf-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.etf-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--gold);
  padding: 2rem;
  transition: box-shadow 0.3s, transform 0.3s;
}
.etf-card:hover { box-shadow: 0 8px 32px rgba(184,149,63,0.1); transform: translateY(-2px); }
.etf-card-label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.75rem;
}
.etf-card-text { font-size: 0.88rem; color: #1A1A1A; line-height: 1.8; }

/* COMPARE TABLE */
.compare-wrap { overflow-x: auto; margin-top: 2rem; }
.compare-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-light); }
.compare-table th {
  padding: 1rem 1.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 0.5px solid var(--border-dark);
  text-align: center;
}
.compare-table th:first-child { text-align: left; color: rgba(245,245,240,0.4); background: rgba(255,255,255,0.02); }
.compare-table th.highlight { color: var(--gold); background: rgba(184,149,63,0.08); }
.compare-table th.normal { color: rgba(245,245,240,0.4); background: rgba(255,255,255,0.02); }
.compare-table td {
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  border-bottom: 0.5px solid rgba(184,149,63,0.06);
  text-align: center;
  vertical-align: middle;
}
.compare-table td:first-child { text-align: left; color: var(--text-light); font-weight: 400; }
.compare-table td.highlight-cell { background: rgba(184,149,63,0.04); }
.check { color: #6FCF97; font-size: 1rem; }
.cross { color: var(--red); font-size: 1rem; }
.neutral-icon { color: rgba(245,245,240,0.35); font-size: 1rem; }
.sub-note { font-size: 0.68rem; color: #666660; display: block; margin-top: 0.2rem; }
.compare-source { font-size: 0.68rem; color: var(--text-muted-light); margin-top: 1rem; line-height: 1.6; }

/* ── HOW IT WORKS (DARK) ── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 3rem;
}
.step {
  padding: 2rem;
  border-right: 1px solid var(--border-light);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  background: var(--white);
}
.step:first-child { border-left: 1px solid var(--border-light); }
.step-num {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: rgba(184,149,63,0.25);
  line-height: 1;
  margin-bottom: 1rem;
}
.step-icon {
  width: 2rem; height: 2rem;
  border: 0.5px solid var(--gold);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}
.step-title { font-size: 0.85rem; font-weight: 600; color: #0C0C0C; margin-bottom: 0.7rem; letter-spacing: 0.03em; }
.step-body { font-size: 0.83rem; color: #1A1A1A; line-height: 1.7; }

/* ── PERFORMANCE (WHITE) ── */
.perf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
  align-items: start;
}
.perf-table { width: 100%; border-collapse: collapse; }
.perf-table th {
  font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: #555550; padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light);
  text-align: left; font-weight: 500;
}
.perf-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(26,26,26,0.06);
  font-size: 0.88rem;
  color: #1A1A1A;
}
.perf-table td:first-child { color: #0C0C0C; font-size: 0.82rem; font-weight: 500; }
.perf-table td.pos { color: var(--green); font-family: 'Playfair Display', serif; font-size: 1.05rem; }
.monthly-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.month-cell {
  background: var(--white-2);
  border: 1px solid var(--border-light);
  padding: 0.75rem 0.5rem;
  text-align: center;
}
.month-cell .m { font-size: 0.6rem; color: #555550; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; }
.month-cell .v { font-family: 'Playfair Display', serif; font-size: 0.95rem; }
.month-cell .v.pos { color: var(--green); }
.month-cell .v.neg { color: var(--red); }
.month-cell .v.live { color: var(--gold); }
.hypo-box {
  background: var(--white-2);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--gold);
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.hypo-label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: #555550; margin-bottom: 1rem; }
.hypo-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--border-light); }
.hypo-row:last-child { border-bottom: none; }
.hypo-invested { font-size: 0.82rem; color: #1A1A1A; }
.hypo-val { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--green); }
.hypo-gain { font-size: 0.72rem; color: #555550; }
.perf-disclaimer { font-size: 0.68rem; color: #666660; margin-top: 1rem; line-height: 1.6; }

/* ── TRUST (DARK) ── */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
  background: transparent;
  border: none;
}
.trust-card {
  background: #1c2733;
  border: 1px solid #1c2733;
  border-radius: 6px;
  padding: 2rem;
  transition: background 0.3s, border-color 0.3s;
}
.trust-card:hover { background: #1c2733; border-color: #1c2733; }
.trust-icon { display: none; }
.trust-title { font-size: 1.1rem; font-weight: 500; color: #ffffff; margin-bottom: 0.7rem; }
.trust-body { font-size: 0.95rem; color: rgba(245,245,240,0.8); line-height: 1.75; }
.section-dark#trust {
  background: var(--white);
}
#trust .section-tag-dark { color: #0C447C; }
#trust .section-title-dark { color: #1a2733; }
#trust .section-title-dark em { color: #0C447C !important; }
/* Whole-section card, matching How It Works / Who We Are. The section
   itself stays full-bleed white; the card border/shadow goes on the
   inner wrapper. */
.trust-wrap {
  background: #ffffff;
  border: 1px solid #E6E3DA;
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.05);
  padding: 3rem;
}
@media (max-width: 900px) {
  .trust-wrap { padding: 2rem 1.5rem; }
}

/* ── PHILOSOPHY (WHITE) ── */
.phil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  margin-top: 3rem;
  align-items: start;
}
.phil-points { list-style: none; }
.phil-point {
  display: flex; gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border-light);
}
.phil-point:first-child { border-top: 1px solid var(--border-light); }
.phil-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: #0C447C;
  min-width: 2rem;
  line-height: 1;
}
.phil-text h4 { font-size: 0.88rem; font-weight: 600; color: #0C0C0C; margin-bottom: 0.4rem; }
.phil-text p { font-size: 0.82rem; color: #1A1A1A; line-height: 1.7; }
.condition-block { margin-bottom: 1.5rem; }
.condition-label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: #0C447C; margin-bottom: 0.5rem; }
.condition-bar-wrap { background: var(--white-3); height: 3px; width: 100%; margin-bottom: 0.4rem; }
.condition-bar { height: 3px; background: #0C447C; width: 0%; transition: width 1.2s cubic-bezier(0.22,1,0.36,1); }
.condition-bar.animated { width: var(--w); }
.condition-desc { font-size: 0.78rem; color: #1A1A1A; }
.phil-visual {
  background: var(--white-2);
  border: 1px solid var(--border-light);
  border-top: 3px solid #0C447C;
  padding: 2rem;
}

/* ── GET STARTED (WHITE) ── */
.get-started-wrap {
  background: var(--white);
  padding: 4rem 4rem;
}
.get-started-wrap .section-tag-dark { color: #0C447C; }
.get-started-wrap .section-title-dark { color: #1A1A1A; }
#get-started .section-title-dark em { color: #0C447C !important; }
.get-started-wrap .whatsapp-link { color: #0C447C; }
.get-started-wrap .whatsapp-dot { background: #0C447C; }
.get-started-wrap .form-group label { color: #333330; }
.get-started-wrap .form-note { color: #555550; }
.get-started-wrap .form-submit { background: #0C447C; }
.get-started-wrap .form-submit:hover { background: #0a3862; }
/* Same form, same "on white background" styling, when it's moved into the
   Performance section instead of sitting inside .get-started-wrap. */
.perf-new-formholder .form-group label { color: #333330; }
.perf-new-formholder .form-note { color: #555550; }
.perf-new-formholder .form-submit { background: #0C447C; }
.perf-new-formholder .form-submit:hover { background: #0a3862; }

/* Centered, single-column layout — heading, subtitle, a single email
   field + CTA up front; the full form only appears once the visitor
   commits by submitting that first field. */
.gs-centered {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.gs-centered .section-title-dark { margin-bottom: 1rem; }
.gs-sub {
  color: #4a5568;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto 2rem;
}
.gs-quick-form {
  display: flex;
  gap: 0.75rem;
  max-width: 480px;
  margin: 0 auto;
}
.gs-quick-form input {
  flex: 1;
  background: #ffffff;
  border: 0.5px solid rgba(12,68,124,0.3);
  color: #1A1A1A;
  padding: 0.85rem 1.1rem;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 300;
  font-family: 'Jost', sans-serif;
  outline: none;
  transition: border-color 0.3s;
}
.gs-quick-form input:focus { border-color: #0C447C; }
.gs-quick-btn {
  background: #0C447C;
  color: #ffffff;
  border: none;
  padding: 0.85rem 1.75rem;
  border-radius: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s;
}
.gs-quick-btn:hover { background: #0a3862; }
.gs-quick-note {
  font-size: 0.85rem;
  color: #7a8290;
  margin: 0.9rem 0 0;
}
.get-started-wrap .whatsapp-link { justify-content: center; margin: 1.5rem 0 0; }
.gs-full-form {
  max-width: 480px;
  margin: 2.5rem auto 0;
  text-align: left;
}
@media (max-width: 560px) {
  .gs-quick-form { flex-direction: column; }
}
.whatsapp-link {
  display: flex; align-items: center; gap: 0.75rem;
  color: #6FCF97; text-decoration: none; font-size: 0.82rem;
  margin-top: 1.25rem; transition: opacity 0.3s;
}
.whatsapp-link:hover { opacity: 0.7; }
.whatsapp-dot { width: 6px; height: 6px; background: #6FCF97; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* FORM */
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,245,240,0.75); font-weight: 500; margin-bottom: 0.4rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--white);
  border: 0.5px solid rgba(12,68,124,0.3);
  color: #1A1A1A;
  padding: 0.8rem 1rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s;
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: #0C447C; }
.form-group select option { background: var(--white); color: #1A1A1A; }
.form-group textarea { height: 90px; resize: vertical; }
.form-submit {
  background: var(--gold);
  color: #ffffff;
  border: none;
  padding: 1rem 2rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s;
}
.form-submit:hover { background: var(--gold-light); color: #ffffff; }
.form-note { font-size: 0.85rem; color: rgba(245,245,240,0.65); margin-top: 0.75rem; line-height: 1.7; }

/* ── FOOTER (SLATE NAVY) ── */
footer {
  background: #1a2332;
  padding: 3.5rem 4rem 0;
  color: rgba(245,245,240,0.85);
  position: relative;
  z-index: 20;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.footer-logo-card { display: block; margin-bottom: 0.9rem; }
.footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: #4a9fe8 !important;
  letter-spacing: 0.04em;
}
.footer-logo span { color: var(--text-light) !important; font-weight: 400; }
.footer-tagline { font-size: 0.92rem; color: #8a94a3; line-height: 1.7; max-width: 270px; margin: 0 0 1.2rem; }
.footer-col-label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light); font-weight: 500; margin-bottom: 1.1rem; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a { font-size: 0.95rem; color: #8a94a3; text-decoration: none; transition: color 0.25s; }
.footer-links a:hover { color: var(--text-light); }
.footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(245,245,240,0.12);
  font-size: 0.88rem;
  color: #8a94a3;
}
.footer-copyright a { color: #8a94a3; text-decoration: none; transition: color 0.25s; font-weight: 400; }
.footer-copyright a:hover { color: #4a9fe8; }
.footer-bottom {
  border-top: 1px solid rgba(245,245,240,0.08);
  padding: 1rem 0 1.5rem;
  font-size: 0.78rem;
  color: rgba(245,245,240,0.85);
  line-height: 1.75;
}
.footer-bottom strong { color: var(--text-light); }

/* ── ANIMATIONS ──
   Scoped under html.js-anim, which JS only adds once GSAP + ScrollTrigger
   have actually loaded and are ready to animate. Without this scoping,
   these elements sit at opacity:0 (an instant, JS-independent CSS rule)
   from the moment the stylesheet loads, but only become visible once the
   CDN-hosted animation scripts finish downloading near the bottom of the
   page — on a slow connection that's a real multi-second blank section,
   not a decorative delay. Content is visible by default until JS opts in. */
html.js-anim .reveal { opacity: 0; transform: translateY(64px); transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity: 1; transform: none; }
html.js-anim .reveal-left { opacity: 0; transform: translateX(-44px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal-left.visible { opacity: 1; transform: none; }
html.js-anim .reveal-right { opacity: 0; transform: translateX(44px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal-right.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }

/* Sections scroll normally (stacking/pin effect removed for consistency across
   the whole page). Hero keeps a full-screen min-height; content sections are
   overridden to natural height below. */
.hero,
.perf-strip,
#who-we-are,
#problem,
#services,
#how-it-works,
#performance,
#trust,
#philosophy,
#faq,
#get-started {
  position: relative !important;
  min-height: 100vh;
}
/* performance strip is short — keep natural height so there's no huge blank space */
.perf-strip { min-height: auto !important; }
/* Every content section is taller than one screen, so pinning them (sticky) clips
   their bottoms behind the next section. Let all tall sections scroll naturally so
   they are fully visible. (Only the hero + short perf-strip remain in the stack.) */
#who-we-are,
#problem,
#services,
#how-it-works,
#trust,
#philosophy,
#faq,
#get-started {
  position: relative !important;
  min-height: auto !important;
  z-index: 15;
}
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }

.step { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.step.visible { opacity: 1; transform: none; }
html.js-anim .trust-card { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s; }
.trust-card.visible { opacity: 1; transform: none; }
.etf-card { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s, transform 0.3s; }
.etf-card.visible { opacity: 1; transform: none; }
.etf-card:hover { transform: translateY(-2px) !important; }
.phil-point { opacity: 0; transform: translateX(-16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.phil-point.visible { opacity: 1; transform: none; }
.perf-table tbody tr { opacity: 0; transform: translateX(-12px); transition: opacity 0.4s ease, transform 0.4s ease; }
.perf-table tbody tr.visible { opacity: 1; transform: none; }
.problem-list li { opacity: 0; transform: translateX(-12px); transition: opacity 0.4s ease, transform 0.4s ease; }
.problem-list li.visible { opacity: 1; transform: none; }
.month-cell { opacity: 0; transform: scale(0.88); transition: opacity 0.35s ease, transform 0.35s ease; }
.month-cell.visible { opacity: 1; transform: scale(1); }
.compare-row { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; }
.compare-row.visible { opacity: 1; transform: none; }
.metric-item { transition: background 0.4s; }
.callout-stat .num { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.callout-stat.visible .num { opacity: 1; transform: none; }


/* COMPOUNDING */
.compound-wrap {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid var(--border-dark);
  padding: 2.5rem;
  margin-bottom: 3rem;
}
.compound-controls {
  display: flex;
  gap: 3rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.compound-control-group { flex: 1; min-width: 200px; }
.compound-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4a9fe8;
  display: block;
  margin-bottom: 0.75rem;
}
.compound-input-wrap { display: flex; align-items: center; gap: 1rem; }
input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  height: 2px;
  background: rgba(12,68,124,0.3);
  outline: none;
  border-radius: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #4a9fe8;
  cursor: pointer;
  border-radius: 50%;
}
.compound-val {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: #4a9fe8;
  min-width: 80px;
  text-align: right;
}
.compound-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2rem;
}
.compound-chart-wrap {
  background: rgba(255,255,255,0.02);
  border: 0.5px solid rgba(184,149,63,0.1);
  padding: 1.5rem;
}
.compound-results { display: flex; flex-direction: column; gap: 0.75rem; }
.compound-result-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245,245,240,0.4);
  margin-bottom: 0.25rem;
}
.compound-disclaimer-top {
  font-size: 0.65rem;
  color: rgba(245,245,240,0.25);
  margin-bottom: 0.75rem;
  font-style: normal;
}
.compound-result-card {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(184,149,63,0.1);
  border-left: 2px solid rgba(184,149,63,0.2);
  padding: 1rem 1.25rem;
}
.compound-result-card.highlight-card {
  border-left: 2px solid var(--gold);
  background: rgba(184,149,63,0.05);
}
.compound-result-card.red-card {
  border-left: 2px solid rgba(192,57,43,0.4);
}
.result-name { font-size: 0.82rem; font-weight: 500; color: var(--text-light); margin-bottom: 0.15rem; }
.result-cagr { font-size: 0.68rem; color: rgba(245,245,240,0.35); margin-bottom: 0.5rem; }
.result-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 0.2rem;
}
.result-value.pos { color: #6FCF97; }
.result-value.neg { color: var(--red); }
.result-value.muted { color: rgba(245,245,240,0.5); }
.result-gain { font-size: 0.72rem; color: rgba(245,245,240,0.35); }

/* ALPHA BOX */
.compound-alpha-box {
  background: rgba(184,149,63,0.04);
  border: 0.5px solid rgba(184,149,63,0.2);
  border-left: 2px solid var(--gold);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.alpha-box-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.alpha-stats {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.alpha-stat { text-align: center; }
.alpha-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: #6FCF97;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.alpha-num.muted { color: rgba(245,245,240,0.4); }
.alpha-num.gold { color: var(--gold); }
.alpha-lbl { font-size: 0.68rem; color: rgba(245,245,240,0.35); }
.alpha-divider { width: 0.5px; height: 3rem; background: rgba(184,149,63,0.2); }
.alpha-statement { font-size: 0.82rem; color: rgba(245,245,240,0.5); line-height: 1.8; }

.compound-message {
  padding: 1rem 1.5rem;
  border-left: 2px solid var(--gold);
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-size: 1rem;
  color: rgba(245,245,240,0.7);
  line-height: 1.6;
  min-height: 2rem;
  margin-bottom: 1rem;
}
.compound-disclaimer {
  font-size: 0.65rem;
  color: rgba(245,245,240,0.25);
  line-height: 1.7;
}
.compound-principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 0.5px solid var(--border-dark);
  margin-top: 0;
}
.compound-principle {
  padding: 2rem;
  border-right: 0.5px solid var(--border-dark);
}
.compound-principle:last-child { border-right: none; }
.cp-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: rgba(184,149,63,0.2);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.cp-title { font-size: 0.85rem; font-weight: 500; color: var(--gold); margin-bottom: 0.6rem; }
.cp-body { font-size: 0.82rem; color: rgba(245,245,240,0.5); line-height: 1.7; }

@media (max-width: 768px) {
  .compound-grid { grid-template-columns: 1fr; }
  .compound-principles { grid-template-columns: 1fr 1fr; }
  .compound-principle:nth-child(2) { border-right: none; }
  .compound-principle:nth-child(3) { border-top: 0.5px solid var(--border-dark); }
  .compound-principle:nth-child(4) { border-top: 0.5px solid var(--border-dark); border-right: none; }
  .alpha-stats { gap: 1rem; }
  .alpha-divider { display: none; }
}

/* MOBILE */
@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }
  .nav-burger { display: flex; }
  .nav-cta { display: none; }
  .nav-links {
    display: flex;
    position: fixed; top: 0; right: 0;
    width: 78%; max-width: 320px; height: 100vh;
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 2rem; padding: 2rem 2.5rem;
    background: rgba(10,10,10,0.98); backdrop-filter: blur(20px);
    border-left: 0.5px solid var(--border-dark);
    transform: translateX(105%);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    z-index: 150;
  }
  nav.mobile-open .nav-links { transform: translateX(0); }
  .nav-links a { font-size: 1rem; }
  .hero h1 { font-size: 2.6rem; }
  .hero-ls-anim { white-space: normal; }


  .metrics-strip { grid-template-columns: 1fr 1fr; }
  .metric-item:nth-child(2) { border-right: none; }
  .section-dark, .section-light, .section-light-2, .get-started-wrap, .perf-strip, footer { padding: 4rem 1.5rem; }
  .perf-new-wrap, .hiw-split, .who-grid, .trust-wrap, .wi-wrap, .services-wrap, .faq-split { padding: 1.75rem 1.5rem !important; }
  .problem-grid, .perf-grid, .phil-grid, .get-started { grid-template-columns: 1fr; gap: 2rem; }
  .steps { grid-template-columns: 1fr; }
  .step { border-left: 0.5px solid var(--border-dark); }
  .trust-grid { grid-template-columns: 1fr; }
  .etf-cards { grid-template-columns: 1fr; }
  .monthly-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ── STRONG LIGHT SECTION OVERRIDES ── */
.section-light, .section-light-2 {
  color: #0C0C0C;
}
.section-light p, .section-light-2 p,
.section-light span, .section-light-2 span,
.section-light td, .section-light-2 td,
.section-light th, .section-light-2 th,
.section-light li, .section-light-2 li,
.section-light div, .section-light-2 div {
  color: inherit;
}

/* Performance table on light bg */
.section-light-2 .perf-table th {
  color: #111111 !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #CCCCCC !important;
}
.section-light-2 .perf-table td {
  color: #111111 !important;
  border-bottom: 1px solid #CCCCCC !important;
}
.section-light-2 .perf-table td:first-child {
  color: #000000 !important;
  font-weight: 600 !important;
}
.section-light-2 .perf-table {
  border: 1px solid #CCCCCC !important;
}

/* Monthly cells */
.section-light-2 .month-cell {
  background: #FFFFFF !important;
  border: 1px solid #BBBBBB !important;
}
.section-light-2 .month-cell .m {
  color: #333333 !important;
  font-weight: 500 !important;
}

/* Hypo box */
.section-light-2 .hypo-box {
  background: #FFFFFF !important;
  border: 1px solid #BBBBBB !important;
  border-left: 3px solid var(--gold) !important;
}
.section-light-2 .hypo-invested {
  color: #111111 !important;
  font-weight: 500 !important;
}
.section-light-2 .hypo-gain {
  color: #333333 !important;
  font-weight: 500 !important;
}
.section-light-2 .hypo-label {
  color: #333333 !important;
  font-weight: 600 !important;
}
.section-light-2 .hypo-row {
  border-bottom: 1px solid #CCCCCC !important;
}
.section-light-2 .perf-disclaimer {
  color: #555555 !important;
}

/* Performance section body text */
.section-light-2 .section-body-light {
  color: #111111 !important;
  font-weight: 400 !important;
}
.section-light-2 .section-tag-light {
  color: #0C447C !important;
  font-weight: 600 !important;
}
.section-light-2 .section-title-light {
  color: #000000 !important;
  font-weight: 600 !important;
}

/* Why ETFs on white */
.section-light .etf-card {
  border: 1px solid #AAAAAA !important;
  border-top: 3px solid var(--gold) !important;
}
.section-light .etf-card-text {
  color: #111111 !important;
}
.section-light .etf-card-label {
  color: #8B6914 !important;
  font-weight: 600 !important;
}

/* Compare table */
.section-light .compare-table {
  border: 1px solid #AAAAAA !important;
}
.section-light .compare-table th {
  border-bottom: 2px solid #AAAAAA !important;
}
.section-light .compare-table td {
  border-bottom: 1px solid #CCCCCC !important;
  color: #111111 !important;
}
.section-light .compare-table td:first-child {
  color: #000000 !important;
  font-weight: 600 !important;
}
.section-light .compare-table th.normal {
  color: #333333 !important;
  background: #EEEEEA !important;
}
.section-light .compare-table th:first-child {
  color: #333333 !important;
  background: #EEEEEA !important;
}
.section-light .sub-note {
  color: #444444 !important;
}
.section-light .compare-source {
  color: #555555 !important;
}
.section-light .section-body-light {
  color: #111111 !important;
}
.section-light .section-tag-light {
  color: #0C447C !important;
  font-weight: 600 !important;
}
.section-light .section-title-light {
  color: #000000 !important;
  font-weight: 600 !important;
}

/* Philosophy on white */
.section-light .phil-text h4 {
  color: #000000 !important;
  font-weight: 700 !important;
}
.section-light .phil-text p {
  color: #111111 !important;
}
.section-light .phil-point {
  border-bottom: 1px solid #CCCCCC !important;
}
.section-light .phil-point:first-child {
  border-top: 1px solid #CCCCCC !important;
}
.section-light .phil-visual {
  border: 1px solid #AAAAAA !important;
  border-top: 3px solid #0C447C !important;
}
.section-light .condition-desc {
  color: #111111 !important;
}
.section-light .condition-label {
  color: #0C447C !important;
  font-weight: 600 !important;
}
.section-light .condition-bar-wrap {
  background: #CCCCCC !important;
}

/* Steps on light-2 */
.section-light-2 .step {
  border: 1px solid #888888 !important;
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
.section-light-2 .step-title {
  color: #000000 !important;
  font-weight: 700 !important;
}
.section-light-2 .step-body {
  color: #111111 !important;
}
.section-light-2 .step-num {
  color: rgba(184,149,63,0.35) !important;
}
.section-light-2 .section-tag-light {
  color: #0C447C !important;
  font-weight: 600 !important;
}
.section-light-2 .section-title-light {
  color: #000000 !important;
  font-weight: 600 !important;
}

/* Metrics strip */
.metrics-strip .metric-label {
  color: #5a6270 !important;
  font-weight: 400 !important;
}



/* ── PHIL VISUAL STRONG OVERRIDE ── */
.phil-visual {
  background: #F5F2EB !important;
  border: 1px solid #AAAAAA !important;
  border-top: 3px solid #0C447C !important;
}
.phil-visual > div:first-child {
  color: #222222 !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
}
.condition-label {
  color: #0C447C !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.15em !important;
}
.condition-bar-wrap {
  background: #CCCCCC !important;
  height: 4px !important;
}
.condition-desc {
  color: #111111 !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}


/* ── COMPOUND PRINCIPLES NUMBER FIX ── */
.cp-num {
  color: rgba(184,149,63,0.5) !important;
}
.cp-body {
  color: rgba(245,245,240,0.75) !important;
}


/* ── COMPOUND SECTION VISIBILITY FIX ── */
.alpha-lbl {
  color: rgba(245,245,240,0.75) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
}
.alpha-statement {
  color: rgba(245,245,240,0.85) !important;
  font-size: 0.88rem !important;
  line-height: 1.9 !important;
}
.compound-disclaimer {
  color: rgba(245,245,240,0.6) !important;
  font-size: 0.72rem !important;
  line-height: 1.8 !important;
}
.compound-message {
  color: rgba(245,245,240,0.9) !important;
  font-size: 1rem !important;
}


/* ── PERFORMANCE SECTION VISIBILITY FIX ── */
.section-light-2 .compound-result-label,
.section-light-2 [style*="MONTHLY RETURNS"],
.section-light-2 .monthly-grid + div,
.section-light-2 .hypo-label,
.section-light-2 > * [style*="letter-spacing"] {
  color: #111111 !important;
  font-weight: 700 !important;
}

/* Monthly returns label */
.section-light-2 div[style*="MONTHLY"] {
  color: #111111 !important;
  font-weight: 700 !important;
}

/* Fix the inline style monthly returns label specifically */
.perf-grid > div > div:first-child {
  color: #111111 !important;
  font-weight: 700 !important;
}

/* Perf disclaimer at bottom of table */
.perf-disclaimer {
  color: #333333 !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  background: #EEEAE0 !important;
  padding: 1rem !important;
  border: 1px solid #BBBBBB !important;
}


/* ── STEP NUMBERS VISIBILITY FIX ── */
.section-light-2 .step-num {
  color: var(--gold) !important;
  opacity: 0.6 !important;
  font-weight: 400 !important;
}




.hero-grid { display: none !important; }







/* PROBLEM SECTION BACKGROUND */
.section-dark#problem, .problem {
  background: var(--white);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.section-dark#problem::before, .problem::before {
  content: none;
}
.section-dark#problem > *, .problem > * {
  position: relative;
  z-index: 1;
}
.section-dark#problem {
  overflow: hidden;
  padding-top: 3rem;
}
.section-dark#problem::after {
  content: none;
}
/* Edge frame removed on #problem section — no separator lines */
.section-dark#problem > .edge-line {
  display: none;
}
.section-dark#problem > .edge-top { top: 0; }
.section-dark#problem > .edge-bottom { bottom: 0; }
.section-dark#problem.edge-lit > .edge-line {
  animation: edgeDraw 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes edgeDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* WHY INVEST TODAY — compact split redesign */
/* Why Invest Today — editorial numbered cards */
.whyinvest-sub {
  color: rgba(245,245,240,0.55);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.7;
  margin: 0 0 3rem;
  max-width: 480px;
}
/* Whole-section card, matching How It Works / Who We Are / Why Trust Us.
   The section itself stays full-bleed; the card border/shadow goes on
   the inner wrapper. */
.wi-wrap {
  background: #ffffff;
  border: 1px solid #E6E3DA;
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.05);
  padding: 3rem;
}
.wi-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .wi-wrap { padding: 2rem 1.5rem; }
}
.wi-card {
  background: #141821;
  padding: 2.4rem 1.6rem 2.6rem;
  min-height: 300px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.wi-card:hover {
  transform: translateY(-3px);
  background: #191e29;
}
.wi-num {
  font-family: 'Jost', sans-serif;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-light);
  margin: 0 0 2.25rem;
}
#problem .section-title-dark em { color: #0C447C; }
.wi-card h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--text-light);
  margin: 0 0 0.7rem;
}
.wi-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(245,245,240,0.6);
  margin: 0;
}
@media (max-width: 900px) {
  .wi-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wi-cards { grid-template-columns: 1fr; }
}

/* HOW IT WORKS — full-width row of 4 white numbered cards, header on top.
   White throughout, deliberately not dark/blue — the site already uses
   dark/blue accent cards for What We Do and Why Trust Us, so this section
   stays white for visual variety across the page. */
.hiw-wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.hiw-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}
.hiw-header .section-body-light {
  margin: 0 auto;
  max-width: 540px;
}
.hiw-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.hiw-card {
  background: #FFFFFF;
  border: 1px solid #E6E3DA;
  border-radius: 12px;
  padding: 2rem 1.75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hiw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.08);
}
#how-it-works .hiw-num {
  font-family: 'Jost', sans-serif;
  font-size: 1.65rem;
  font-weight: 500;
  color: #0C447C;
  line-height: 1;
  margin-bottom: 0.75rem;
  display: block;
}
.hiw-card h4 {
  font-family: 'Jost', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 0.6rem;
}
.hiw-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #55554F;
  margin: 0;
}
@media (max-width: 900px) {
  .hiw-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hiw-row { grid-template-columns: 1fr; }
}

/* FAQ "view all" button */
.faq-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 34px;
  border: 1px solid #0C447C;
  border-radius: 6px;
  background: #0C447C;
  color: #ffffff;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.faq-viewall:hover { background: transparent; color: #0C447C; }


/* WHY ETFs SECTION BACKGROUND */
.section-light#why-etfs, section#why-etfs {
  background: #0A0A0A !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
}
.section-light#why-etfs::before, section#why-etfs::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.88) !important;
  z-index: 0;
}
.section-light#why-etfs > *, section#why-etfs > * {
  position: relative;
  z-index: 1;
}
.section-light#why-etfs {
  overflow: hidden;
  color: var(--text-light) !important;
}
.section-light#why-etfs::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: rgba(10,10,10,0.98);
  z-index: 2;
}
/* Fix text colors on dark background for ETF section */
#why-etfs .section-tag-light,
#why-etfs .section-tag-dark {
  color: var(--gold) !important;
}
#why-etfs .section-title-light,
#why-etfs .section-title-dark {
  color: var(--text-light) !important;
}
#why-etfs .section-body-light,
#why-etfs .section-body-dark {
  color: rgba(245,245,240,0.7) !important;
}
#why-etfs .etf-card {
  background: rgba(255,255,255,0.05) !important;
  border: 0.5px solid rgba(184,149,63,0.25) !important;
  border-top: 2px solid var(--gold) !important;
}
#why-etfs .etf-card-label {
  color: var(--gold) !important;
}
#why-etfs .etf-card-text {
  color: rgba(245,245,240,0.75) !important;
}
#why-etfs .compare-table {
  border: 0.5px solid rgba(184,149,63,0.2) !important;
}
#why-etfs .compare-table th {
  border-bottom: 0.5px solid rgba(184,149,63,0.2) !important;
}
#why-etfs .compare-table th:first-child,
#why-etfs .compare-table th.normal {
  color: rgba(245,245,240,0.5) !important;
  background: rgba(255,255,255,0.03) !important;
}
#why-etfs .compare-table th.highlight {
  color: var(--gold) !important;
  background: rgba(184,149,63,0.1) !important;
}
#why-etfs .compare-table td {
  border-bottom: 0.5px solid rgba(184,149,63,0.08) !important;
  color: rgba(245,245,240,0.7) !important;
}
#why-etfs .compare-table td:first-child {
  color: var(--text-light) !important;
  font-weight: 500 !important;
}
#why-etfs .compare-table td.highlight-cell {
  background: rgba(184,149,63,0.06) !important;
}
#why-etfs .sub-note {
  color: rgba(245,245,240,0.4) !important;
}
#why-etfs .compare-source {
  color: rgba(245,245,240,0.35) !important;
}
#why-etfs .check { color: #6FCF97 !important; }
#why-etfs .cross { color: var(--red) !important; }
#why-etfs .neutral-icon { color: rgba(245,245,240,0.4) !important; }


/* PHILOSOPHY SECTION BACKGROUND */
/* PHILOSOPHY — LIGHT (converted 2026-07-21) */
.section-light#philosophy, section#philosophy {
  background: var(--white) !important;
  position: relative !important;
  overflow: hidden;
}
.section-light#philosophy::before,
.section-light#philosophy::after,
section#philosophy::before { content: none !important; }
/* Lifted light panel (Option B in light tones) */
.section-light#philosophy .phil-visual {
  background: #FFFFFF !important;
  border: 1px solid #E2DCCE !important;
  border-top: 3px solid #0C447C !important;
  border-radius: 8px !important;
}
.section-light#philosophy .phil-visual > div:first-child {
  color: #6A6A66 !important;
  font-weight: 500 !important;
}
.section-light#philosophy .phil-num {
  color: #0C447C !important;
}


/* HOW IT WORKS SECTION — the outer section stays full-bleed white/light
   (must reach the section's own edges, otherwise the dark body
   background behind it shows through as a black band). The card itself
   (the inner content block) is navy blue, matching the site's other dark
   sections/headers. Numbered cards stay white for contrast against navy. */
.section-light-2#how-it-works {
  background: #0a1e38;
}
#how-it-works .section-tag-light { color: #4a9fe8 !important; }
#how-it-works .section-title-light { color: var(--text-light) !important; }
#how-it-works .section-title-light em { color: var(--text-light) !important; }
#how-it-works .section-body-light { color: rgba(245,245,240,0.75) !important; }


    /* ── SLIDE IN FROM SIDES ANIMATION ── */
    
    
    
    }
    
    }

  
    
    }

  
    /* ── HERO ANIMATIONS ── */
    .anim-left {
      display: inline-block;
      opacity: 0;
      transform: translateX(-60px);
      animation: fromLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    }
    .anim-fade {
      display: inline-block;
      opacity: 0;
      animation: fadeIn 0.6s ease 0.9s forwards;
    }
    .anim-right {
      display: inline-block;
      opacity: 0;
      transform: translateX(60px);
      animation: fromRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
    }
    @keyframes fromLeft {
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes fromRight {
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeIn {
      to { opacity: 1; }
    }
    .hero-ls-anim {
      opacity: 0;
      white-space: nowrap;
      animation: heroLetterSpace 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
    }
    @keyframes heroLetterSpace {
      from { opacity: 0; letter-spacing: 0.16em; }
      to   { opacity: 1; letter-spacing: -0.005em; }
    }


/* Formerly a gap between two dark sections (How It Works + Trust); both
   are white now, so their own section padding is enough spacing. */
.section-white-gap {
  height: 0;
}

/* FAQ — two-column split with photo */
/* Whole-section card, matching How It Works / Who We Are / Why Trust Us /
   Why Invest Today / What We Do. */
.faq-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #E6E3DA;
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.05);
  padding: 3rem;
}
.faq-col-image {
  border-radius: 8px;
  overflow: hidden;
  min-height: 420px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.faq-col-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.18);
}
.faq-col-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.faq-col-image:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
  .faq-split { grid-template-columns: 1fr; }
  .faq-col-image { min-height: 280px; order: -1; }
}

/* FAQ — compact bordered rows (clean white cards) */
#faq .section-tag-light, #perf-faq .section-tag-light { color: #0C447C; }
#services .section-tag-light { color: #0C447C !important; }
.faq-item {
  border: 1px solid #E4E1D8 !important;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 0 24px !important;
  margin-bottom: 10px;
}
.faq-item .faq-question {
  padding: 18px 0 !important;
}
.faq-item .faq-question h3 {
  font-family: 'Jost', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #1A1A1A !important;
  margin: 0 !important;
}
.faq-item .faq-icon {
  color: #0C447C !important;
  font-size: 1.3rem !important;
}
.faq-item .faq-answer {
  padding: 0 0 18px !important;
}
.faq-item .faq-answer p {
  font-family: 'Jost', sans-serif;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  color: #444440 !important;
  line-height: 1.8 !important;
  max-width: none !important;
}

/* LEGAL PAGES (Privacy / Terms) */
.legal-content {
  background: var(--white);
  padding: 70px 40px 90px;
}
.legal-wrap {
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Jost', sans-serif;
}
.legal-wrap > p {
  font-size: 0.95rem;
  line-height: 1.85;
  color: #333330;
  margin: 0 0 1.5rem;
}
.legal-wrap h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: #1A1A1A;
  margin: 2.5rem 0 1rem;
}
.legal-wrap ul {
  margin: 0 0 1.5rem;
  padding-left: 1.3rem;
}
.legal-wrap ul li {
  font-size: 0.95rem;
  line-height: 1.85;
  color: #333330;
  margin-bottom: 0.4rem;
}
.legal-notice {
  margin-top: 3rem;
  padding: 1.5rem 1.75rem;
  background: #F2F0EA;
  border-left: 2px solid var(--gold);
  font-size: 0.82rem;
  line-height: 1.7;
  color: #555550;
  font-style: italic;
}
/* ────────────────────────────────────────────────────────────────────────────
   MOBILE FIXES — appended deliberately at the END of the file.

   An earlier mobile fix for the hero headline already existed at line ~1518
   (.hero-ls-anim { white-space: normal }) but was defeated by the letter-spacing
   animation rule further down the file, which re-applies white-space: nowrap at
   equal specificity. Later source order wins, so the mobile fix never applied.
   Putting these last is what makes them take effect.

   Symptom this fixes: on a 375px screen the hero headline rendered as one
   unbreakable line ~518px wide. Because .hero sets overflow:hidden, the tail was
   CLIPPED rather than scrollable — a visitor saw a chopped-off word with nothing
   to indicate more existed, and the page reported no horizontal overflow.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-ls-anim,
  .hero-headline { white-space: normal; }

  /* 64px of side padding on a 375px screen left only 247px for a 41.6px headline. */
  .hero { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero-headline { font-size: clamp(2rem, 11vw, 2.6rem); line-height: 1.1; }

  /* The language switcher sat 10px past the right edge. */
  .lang-switcher { margin-left: 0.5rem; margin-right: 0; }
  .lang-dropdown { right: 0; left: auto; }

  /* The logo was 281px wide on a 375px screen. With the switcher and the burger
     beside it, the nav row overflowed and pushed the burger 26px off-screen --
     leaving only 6px of the menu button tappable, so the mobile menu was
     effectively unreachable. Shrinking the mark brings the whole row back. */
  #nav { padding-left: 1rem; padding-right: 1rem; }
  #nav .logo { font-size: 0.85rem; letter-spacing: 0.08em; }
  #nav .logo-mark { height: 44px; margin-right: -12px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE MENU — compact panel, replacing the off-screen drawer.

   ROOT CAUSE of the horizontal scroll on iOS: the old menu was a full-height
   drawer, position:FIXED, parked off-screen with transform: translateX(100%).
   A fixed element is positioned against the viewport, so body's overflow-x:clip
   could not contain it — desktop browsers reported no overflow while iOS Safari
   happily let the page scroll sideways to reach it. That was the black band on
   the right of the phone screenshot.

   This replaces it with a panel positioned ABSOLUTE inside the fixed nav, so
   left:0/right:0 resolve to the nav's own width. It cannot exceed the viewport
   by construction, rather than being clipped after the fact. It also reads as a
   refined dropdown rather than a full-screen takeover.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #nav { position: fixed; }

  #nav .nav-links {
    position: absolute;
    top: 100%;                 /* directly beneath the bar, at any nav height */
    left: 0; right: 0;
    width: auto; max-width: none; height: auto;
    margin: 0; padding: 0.25rem 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    background: rgba(12, 14, 18, 0.97);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid rgba(184, 149, 63, 0.28);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s;
  }

  #nav.mobile-open .nav-links {
    transform: translateY(0);
    opacity: 1; visibility: visible; pointer-events: auto;
  }

  #nav .nav-links li { width: 100%; margin: 0; }

  #nav .nav-links a {
    display: block;
    padding: 0.9rem 1.5rem;
    color: rgba(245, 245, 240, 0.82);
    font-family: 'Jost', sans-serif;
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    transition: background 0.2s ease, color 0.2s ease;
  }

  #nav .nav-links li:last-child a { border-bottom: none; }

  #nav .nav-links a:hover,
  #nav .nav-links a:active { background: rgba(184, 149, 63, 0.10); color: #fff; }
}

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE REFINEMENTS — brand presence and hero framing. Mobile only; the
   desktop layout is deliberately untouched by everything in this block.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* iOS reports 100vh as the height INCLUDING the browser toolbars, so a 100vh
     hero is taller than the visible area and its lower band — part of the photo
     — sits permanently behind the chrome. svh is the *visible* height, so the
     image ends where the screen ends. vh first as a fallback for older iOS. */
  .hero { min-height: 100vh !important; }
  .hero { min-height: 100svh !important; }

  /* The photo is landscape (1672x941) inside a portrait viewport, so background
     cover scales it to fill the height and crops most of the width away.
     Shifting the focal point right keeps the family in frame rather than
     centring on empty savannah. Two values: the gradient layer, then the image. */
  .hero { background-position: center center, 64% center; }

  /* The logo was cut to 44px to stop the nav row overflowing. That fixed the
     overflow and lost the brand: at 375px it read as an afterthought beside the
     language button. This restores presence while still fitting the row —
     measured against the burger, which must stay fully on screen. */
  #nav .logo { font-size: 1.02rem; letter-spacing: 0.05em; }
  #nav .logo-mark { height: 62px; margin-right: -14px; }

  /* Slimmer language control so the larger logo still fits at 375px. */
  .lang-toggle { padding: 0.32rem 0.5rem; font-size: 0.68rem; gap: 0.25rem; }
  .lang-switcher { margin-left: 0.4rem; }
}

/* Nav spacing on phones and tablets.
   #nav uses justify-content:space-between. Once the menu panel became
   position:absolute it left the flow, so the remaining items (logo, language,
   CTA) had the leftover space split evenly between them - a 128px hole between
   the language button and the call-to-action in landscape. Pushing the language
   control with margin-left:auto collects it and the CTA into one group on the
   right, so all the slack falls after the logo where it belongs. */
@media (max-width: 900px) {
  #nav .lang-switcher { margin-left: auto; margin-right: 0.75rem; }
  #nav .nav-cta { margin-left: 0; }
}

/* ────────────────────────────────────────────────────────────────────────────
   PORTRAIT-PHONE HERO — a purpose-made tall image.

   The desktop photo is 1672x941, roughly twice as wide as tall. A portrait
   phone is roughly twice as TALL as wide. Filling that frame with the wide
   image meant scaling it until it was 1443px wide inside a 390px screen: the
   visitor saw 26% of the photograph. That is geometry, not a CSS bug - a wide
   picture cannot fill a tall frame and still be fully visible.

   hero-mobile.jpg (887x1774, exactly 1:2) is the same scene re-composed for a
   tall frame, so ~92% of it is visible on a 390px phone instead of 26%.

   Deliberately gated on (orientation: portrait): landscape phones and every
   desktop keep the wide original, which already fits them properly.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: portrait) {
  .hero {
    background:
      /* Vertical scrim. The headline lands over the campfire - the brightest
         part of the picture - so white text needs darkening beneath it. Kept
         clear at the top so the family stays bright and untouched. */
      linear-gradient(to bottom,
        rgba(10, 10, 10, 0.28) 0%,
        rgba(10, 10, 10, 0.18) 30%,
        rgba(10, 10, 10, 0.52) 55%,
        rgba(10, 10, 10, 0.74) 80%,
        rgba(10, 10, 10, 0.82) 100%),
      url('../images/hero-mobile.jpg') center center / cover no-repeat;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE WORDMARK PRESENCE — mobile only, desktop untouched.

   The brand felt weak on phones, but weight was not the real cause: it was
   competing with a bordered EN button and a solid three-bar burger, both
   high-contrast geometric shapes. Fine serif text always loses to a box.

   Deliberately NOT bold. Playfair Display is a high-contrast serif whose
   elegance IS the hairline/stem contrast; at 700 the hairlines thicken and it
   reads as a headline rather than a wealth-management mark. 700 is also not
   among the loaded weights (only 400/500/600), so it would be faked - synthetic
   bold on a hairline serif smears rather than thickens. 600 is real and loaded.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* One genuine step firmer, using a weight that is actually loaded. */
  #nav .logo { font-weight: 600; }

  /* CAPITAL was set to 300, which is NOT loaded - it was silently rendering at
     400, so the intended light/firm pairing never happened. 400 is explicit and
     real, and keeps it lighter than NOVELTA's 600. */
  #nav .logo span { font-weight: 400; }

  /* Stop the language control out-shouting the brand: drop the boxed border for
     a quieter underline-free chip. Still an obvious tap target (unchanged size),
     just no longer the highest-contrast object in the bar. */
  .lang-toggle {
    border-color: rgba(12, 68, 124, 0.18);
    background: rgba(12, 68, 124, 0.04);
    font-weight: 400;
  }

  /* Slightly lighter burger bars for the same reason. */
  .nav-burger span { opacity: 0.75; }
}