/* =============================================================
   EQUISHATRA — PRIVATE WEALTH ADVISORY
   Trust-engineered design system
   Palette inspired by Goldman Sachs · JP Morgan PB · Vanguard
   ============================================================= */

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

:root {
  /* Trust-grade colour system (researched) */
  --navy:        #0a1f44;     /* JP Morgan / Goldman authority */
  --navy-deep:   #061229;     /* Heavier presence */
  --navy-soft:   #1a325c;
  --gold:        #c9a961;     /* Private-bank champagne */
  --gold-deep:   #a08740;
  --ivory:       #faf8f3;     /* Warm, premium neutral */
  --ivory-2:     #f4f0e6;
  --bone:        #e8e3d3;     /* Subtle warm border */
  --charcoal:    #1a1a1a;
  --slate:       #4a5568;
  --muted:       #6b7280;
  --hairline:    #e5e1d4;
  --white:       #ffffff;
  --success:     #0f4c3a;     /* Vanguard green */
  --brand-green: #1a4d2e;     /* EQUISHASTRA wordmark colour */

  /* Typography */
  --serif:       'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --sans:        'Inter', -apple-system, sans-serif;

  /* Tokens */
  --radius:      4px;          /* Tight corners — premium feel */
  --radius-lg:   8px;
  --shadow-sm:   0 1px 3px rgba(10,31,68,.06);
  --shadow:      0 8px 32px rgba(10,31,68,.08);
  --shadow-lg:   0 24px 60px rgba(10,31,68,.12);
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.65;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.75rem; }
.section { padding: 6rem 0; }
.bg-ivory { background: var(--ivory); }
.bg-navy { background: var(--navy); color: rgba(255,255,255,.85); }

/* ============================================================
   TYPOGRAPHY SYSTEM
============================================================ */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.015em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

em { font-style: italic; color: var(--gold-deep); }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.eyebrow.gold { color: var(--gold); }

.lede, .lede-center {
  font-size: 1.05rem;
  color: var(--slate);
  line-height: 1.7;
  max-width: 560px;
}
.lede-center { margin: 0 auto; text-align: center; }
.lede-center.light { color: rgba(255,255,255,.7); }

.section-intro {
  text-align: center;
  margin: 0 auto 3.5rem;
  max-width: 680px;
}
.section-intro h2 { margin-bottom: 1rem; }
.section-intro.light h2 { color: white; }

.gold-text { color: var(--gold-deep); }

/* ============================================================
   BUTTONS
============================================================ */
.btn-primary, .btn-secondary, .btn-gold, .btn-nav {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .9rem 1.6rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
}
.btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(10,31,68,.18);
}
.btn-primary:hover {
  background: var(--navy-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(10,31,68,.25);
}
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-secondary:hover {
  background: var(--navy);
  color: var(--white);
}
.btn-gold {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(201,169,97,.3);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  transform: translateY(-1px);
}
.btn-nav {
  background: var(--navy);
  color: white;
  font-size: .82rem;
  padding: .65rem 1.3rem;
}
.btn-nav:hover { background: var(--gold); color: var(--navy); }

/* ============================================================
   TOPBAR
============================================================ */
.topbar {
  background: var(--navy-deep);
  color: rgba(255,255,255,.78);
  font-size: .75rem;
  letter-spacing: .02em;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(201,169,97,.12);
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.tb-left { display: inline-flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.85); }
.tb-pulse {
  width: 6px; height: 6px; background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(201,169,97,.25);
}
.tb-right { display: inline-flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.tb-right a { color: rgba(255,255,255,.78); transition: color .2s; }
.tb-right a:hover { color: var(--gold); }
.tb-sep { color: rgba(255,255,255,.25); }

/* ============================================================
   NAVBAR
============================================================ */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow .25s;
}
.navbar.scrolled { box-shadow: 0 2px 14px rgba(10,31,68,.06); }
.nav-container {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: var(--brand-green);
  flex-shrink: 0;
  text-decoration: none;
}
.logo-mark { color: var(--brand-green); display: inline-flex; }

/* Brand mark image (the tree/book/chart illustration) */
.brand-mark {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  /* Crisp downscaling for retina + higher-quality image rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);  /* GPU-rasterise for sharper edges */
}
.brand-mark-footer { width: 44px; height: 44px; }
.logo-words { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name {
  font-family: var(--sans);
  font-weight: 400;        /* SHASTRA — regular weight */
  font-size: 1.5rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--brand-green);
}
.logo-name strong {        /* EQUI — bold */
  font-weight: 800;
  letter-spacing: .01em;
}
.logo-sub {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-top: 4px;
}
.nav-links {
  display: flex;
  gap: 2rem;
  margin: 0 auto;
}
.nav-links a {
  font-size: .85rem;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: .01em;
  position: relative;
  padding: .25rem 0;
  transition: color .2s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .25s;
  transform-origin: center;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after { transform: scaleX(1); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
  margin-left: auto;
}
.hamburger span {
  width: 22px; height: 2px;
  background: var(--navy);
  display: block;
}

/* ============================================================
   HERO
============================================================ */
.hero {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--white) 90%);
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 50%; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,97,.08), transparent 60%);
  transform: translateY(-50%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
}
.hero-content h1 {
  margin-bottom: 1.5rem;
}
.hero-content h1 em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 600;
}
.hero-cta-group {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.hero-trust-line {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .8rem;
  font-weight: 500;
  color: var(--slate);
}
.hero-trust-line .dot { color: var(--bone); }
.hero-trust-line span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.trust-ico {
  width: 16px; height: 16px;
  color: var(--gold-deep);
  flex-shrink: 0;
}

/* Pin icon inline with reco label */
.lbl-ico {
  width: 14px; height: 14px;
  color: var(--gold-deep);
  display: inline-block;
  vertical-align: -2px;
  margin-right: 2px;
}

/* Hero card */
.hero-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 2.75rem;
  position: relative;
  box-shadow: var(--shadow);
}
.hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
}
.hc-quotemark {
  font-family: var(--serif);
  font-size: 5rem;
  color: var(--gold);
  line-height: 0.6;
  margin-bottom: 1rem;
  font-style: italic;
}
.hc-quote {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  font-style: italic;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 2rem;
}
.hc-attrib {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.5rem;
}
.hc-portrait {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.hc-attrib strong {
  display: block;
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--navy);
}
.hc-attrib small { color: var(--muted); font-size: .76rem; line-height: 1.5; }
.hc-credentials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.hc-cred {
  text-align: center;
  padding: 0 .25rem;
}
.hc-cred strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.hc-cred span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: .35rem;
}

/* ============================================================
   TRUST STRIP
============================================================ */
.trust-strip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 1.75rem 0;
  background: var(--white);
}
.ts-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.ts-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-deep);
  flex-shrink: 0;
  border-right: 1px solid var(--hairline);
  padding-right: 2.5rem;
}
.ts-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: .01em;
}
.ts-logos span {
  position: relative;
}

/* ============================================================
   APPROACH
============================================================ */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.approach-card {
  padding: 3rem 2.25rem;
  border-right: 1px solid var(--hairline);
  position: relative;
  transition: background .25s;
}
.approach-card:last-child { border-right: none; }
.approach-card:hover { background: var(--ivory); }
.ac-num {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 1.25rem;
  font-style: italic;
}
.approach-card h3 { margin-bottom: .75rem; }
.approach-card p { color: var(--slate); font-size: .95rem; line-height: 1.7; }

/* ============================================================
   SERVICES
============================================================ */
.svc-tabs {
  display: flex;
  gap: 0;
  justify-content: center;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.svc-tab {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 1rem 1.75rem;
  cursor: pointer;
  position: relative;
  transition: color .2s;
}
.svc-tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .25s;
}
.svc-tab:hover { color: var(--navy); }
.svc-tab.active { color: var(--navy); }
.svc-tab.active::after { transform: scaleX(1); }

.svc-panel { display: none; }
.svc-panel.active { display: block; animation: fadeUp .4s ease; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.svc-card {
  padding: 2.25rem;
  background: var(--white);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transition: background .2s, transform .2s;
  position: relative;
  display: block;
}
.svc-card::after {
  content: '→';
  position: absolute;
  top: 2.25rem; right: 2.25rem;
  color: var(--gold);
  opacity: 0;
  transition: opacity .25s, transform .25s;
}
.svc-card:hover {
  background: var(--ivory);
}
.svc-card:hover::after { opacity: 1; transform: translateX(4px); }
.svc-card h4 {
  margin-bottom: .65rem;
  color: var(--navy);
}
.svc-card p {
  color: var(--slate);
  font-size: .9rem;
  line-height: 1.65;
  max-width: 90%;
}

/* ============================================================
   PROMISE / FOUNDER
============================================================ */
.promise {
  background: var(--ivory);
  position: relative;
  overflow: hidden;
}
.promise::before {
  content: '';
  position: absolute;
  top: -150px; right: -150px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(201,169,97,.1), transparent 65%);
  pointer-events: none;
}
.promise-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
  position: relative;
}
.pp-frame {
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--gold);
  outline: 12px solid var(--ivory);
  outline-offset: -1px;
}
.pp-img {
  font-family: var(--serif);
  font-size: 6rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: -.02em;
}
.pp-caption {
  margin-top: 1.5rem;
  text-align: center;
}
.pp-caption strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--navy);
}
.pp-caption small {
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .04em;
}

.promise-content h2 em {
  font-style: italic;
  color: var(--gold-deep);
}
.promise-quote {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.55;
  border-left: 3px solid var(--gold);
  padding: .25rem 0 .25rem 1.5rem;
  margin: 1.75rem 0;
}
.promise-quote strong {
  font-style: normal;
  color: var(--navy);
  font-weight: 700;
}
.promise-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 2rem;
}
.promise-list li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  font-size: .95rem;
  color: var(--slate);
  line-height: 1.6;
}
.pl-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-deep);
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.promise-list li strong { color: var(--navy); }

/* ============================================================
   RESULTS
============================================================ */
.bg-navy { background: var(--navy); position: relative; }
.bg-navy::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(201,169,97,.06), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(201,169,97,.04), transparent 50%);
  pointer-events: none;
}
.bg-navy .container { position: relative; }

.results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(201,169,97,.2);
  border-left: 1px solid rgba(201,169,97,.2);
}
.result-card {
  padding: 2.5rem 2rem;
  border-right: 1px solid rgba(201,169,97,.2);
  border-bottom: 1px solid rgba(201,169,97,.2);
  background: rgba(255,255,255,.02);
  transition: background .25s;
}
.result-card:hover { background: rgba(201,169,97,.05); }
.result-card.highlight { background: rgba(201,169,97,.07); }

.rc-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.rc-figure {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 700;
  color: white;
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -.01em;
}
.result-card p {
  color: rgba(255,255,255,.7);
  font-size: .88rem;
  line-height: 1.6;
}

/* ============================================================
   GOAL-BASED CALCULATOR
============================================================ */
.goal-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  padding: 3rem;
  position: relative;
}
.goal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}

/* Goal selector chips */
.goal-selector {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .65rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--hairline);
}
.goal-chip {
  background: var(--white);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1rem .5rem;
  cursor: pointer;
  text-align: center;
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  transition: all .2s;
  position: relative;
}
.goal-chip:hover {
  border-color: var(--gold);
  background: var(--ivory);
}
.goal-chip.active {
  background: var(--navy);
  border-color: var(--navy);
}
.goal-chip.active .gc-label { color: white; }
.goal-chip.active::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--navy);
}
.gc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  color: var(--gold-deep);
  transition: color .2s;
}
.gc-icon svg { width: 28px; height: 28px; }
.goal-chip:hover .gc-icon { color: var(--gold); }
.goal-chip.active .gc-icon { color: var(--gold); }
.gc-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .02em;
  line-height: 1.25;
}

/* Goal title row */
.goal-title-row {
  text-align: center;
  margin-bottom: 2.5rem;
}
.goal-title-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .35rem;
}
.goal-title-row h3 {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--navy);
}

/* Inputs + results */
.goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  margin-bottom: 2.5rem;
}
.gi-row { margin-bottom: 1.6rem; }
.gir-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .65rem;
}
.gir-label label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .02em;
}
.gir-val {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gold-deep);
}
.gir-hint {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  color: var(--muted);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  margin-left: .35rem;
}

/* Editable amount field */
.gir-val-editable {
  display: inline-flex;
  align-items: baseline;
  gap: .1rem;
  padding: .25rem .55rem;
  border: 1px solid transparent;
  border-bottom: 1.5px dashed var(--gold);
  border-radius: var(--radius);
  background: rgba(201,169,97,.05);
  transition: all .2s;
  cursor: text;
}
.gir-val-editable:hover {
  background: rgba(201,169,97,.1);
  border-bottom-style: solid;
}
.gir-val-editable:focus-within {
  background: var(--white);
  border-color: var(--gold);
  border-bottom-style: solid;
  box-shadow: 0 0 0 3px rgba(201,169,97,.18);
}
.gir-prefix {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gold-deep);
  line-height: 1;
}
.gir-input {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gold-deep);
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 9ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.gir-input::-webkit-outer-spin-button,
.gir-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gir-input::placeholder { color: rgba(160,135,64,.4); }

/* Results panel */
.goal-results {
  background: var(--ivory);
  padding: 2.25rem;
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
}
.gr-headline {
  text-align: center;
  padding-bottom: 1.75rem;
}
.grh-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .65rem;
}
.grh-amount {
  display: block;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.grh-sub {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
}

.gr-divider {
  text-align: center;
  margin: 1.25rem 0;
  position: relative;
}
.gr-divider span {
  background: var(--ivory);
  padding: 0 1rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--gold-deep);
  position: relative;
  z-index: 1;
}
.gr-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--hairline);
}

.gr-option {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: .75rem;
  position: relative;
}
.gr-option.recommended {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--white), rgba(201,169,97,.04));
  box-shadow: 0 4px 18px rgba(201,169,97,.1);
}
.gro-tag {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--gold-deep);
  margin-bottom: .65rem;
}
.gro-amount {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.01em;
  margin-bottom: .35rem;
}
.gro-sub {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: .85rem;
}
.gro-detail {
  font-size: .8rem;
  color: var(--slate);
  line-height: 1.55;
  padding-top: .85rem;
  border-top: 1px dashed var(--hairline);
  text-align: left;
}

.gr-or {
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
  margin: .5rem 0;
  font-style: italic;
}

.gr-cta {
  margin-top: 1.5rem;
  width: 100%;
  justify-content: center;
}

/* WhatsApp share-report button — secondary CTA below primary */
.btn-whatsapp-report {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  margin-top: .65rem;
  padding: .85rem 1.5rem;
  background: #25d366;
  color: white;
  border: none;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .015em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37,211,102,.28);
  transition: all .25s ease;
}
.btn-whatsapp-report:hover {
  background: #1eaa54;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(37,211,102,.38);
}
.btn-whatsapp-report:active { transform: translateY(0); }
.btn-whatsapp-report svg { flex-shrink: 0; }

/* Download-PDF report button */
.btn-download-report {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  margin-top: .55rem;
  padding: .85rem 1.5rem;
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .015em;
  cursor: pointer;
  transition: all .25s ease;
}
.btn-download-report:hover {
  background: var(--navy);
  color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(10,31,68,.18);
}
.btn-download-report:active { transform: translateY(0); }
.btn-download-report svg { flex-shrink: 0; }

/* ============================================================
   PDF GENERATION LOADER
============================================================ */
.pdf-loader {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 68, 0.78);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.pdf-loader.active { display: flex; animation: pdfLoaderFade .25s ease; }
@keyframes pdfLoaderFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pdf-loader-card {
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 2.25rem 2.5rem;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(10,31,68,.4);
}
.pdf-spinner {
  width: 44px; height: 44px;
  border: 3px solid var(--bone);
  border-top-color: var(--gold);
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  animation: pdfSpin 0.85s linear infinite;
}
@keyframes pdfSpin { to { transform: rotate(360deg); } }
.pdf-loader-card h4 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .4rem;
}
.pdf-loader-card p {
  font-size: .88rem;
  color: var(--slate);
  line-height: 1.55;
}

/* PDF report container styling — used during PDF capture (offscreen) */
.pdf-report-container {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 11pt;
  color: #1a1a1a;
  line-height: 1.55;
  background: white;
  padding: 28pt 32pt;
  width: 794px;
}
.pdf-report-container * { box-sizing: border-box; }
.pdf-report-container .pdf-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2.5pt solid #1a4d2e;
  padding-bottom: 12pt;
  margin-bottom: 18pt;
}
.pdf-report-container .pdf-brand {
  font-family: -apple-system, sans-serif;
  font-size: 22pt;
  font-weight: 800;
  color: #1a4d2e;
  letter-spacing: .015em;
  line-height: 1;
  text-transform: uppercase;
}
.pdf-report-container .pdf-brand .light { font-weight: 400; }
.pdf-report-container .pdf-tagline {
  font-family: -apple-system, sans-serif;
  font-size: 8pt;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #a08740;
  font-weight: 500;
  margin-top: 4pt;
}
.pdf-report-container .pdf-meta {
  text-align: right;
  font-size: 9pt;
  color: #6b7280;
}
.pdf-report-container .pdf-meta strong {
  display: block;
  color: #0a1f44;
  font-size: 11pt;
  font-weight: 700;
  margin-top: 2pt;
}
.pdf-report-container h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22pt;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #0a1f44;
  margin: 14pt 0 6pt;
  line-height: 1.15;
}
.pdf-report-container h1 em {
  font-style: italic;
  color: #a08740;
}
.pdf-report-container .pdf-plan-meta {
  font-size: 11pt;
  color: #4a5568;
  margin-bottom: 12pt;
}
.pdf-report-container .pdf-plan-meta strong {
  color: #0a1f44;
  font-weight: 700;
}
.pdf-report-container .pdf-profile {
  background: #faf8f3;
  border: 1px solid #e5e1d4;
  border-left: 3pt solid #c9a961;
  padding: 10pt 14pt;
  margin-bottom: 16pt;
  display: flex;
  gap: 24pt;
}
.pdf-report-container .pdf-profile div {
  font-size: 10pt;
  color: #6b7280;
}
.pdf-report-container .pdf-profile strong {
  display: block;
  color: #0a1f44;
  font-size: 14pt;
  font-weight: 700;
  font-family: 'Playfair Display', Georgia, serif;
  margin-top: 2pt;
}
.pdf-report-container h2 {
  font-family: -apple-system, sans-serif;
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #a08740;
  margin: 16pt 0 6pt;
  page-break-after: avoid;
}
.pdf-report-container .pdf-section {
  margin-bottom: 12pt;
  page-break-inside: avoid;
}
.pdf-report-container .pdf-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16pt;
  padding: 6pt 0;
  border-bottom: 1px dotted #d4d0c4;
  font-size: 11pt;
}
.pdf-report-container .pdf-row:last-child { border-bottom: none; }
.pdf-report-container .pdf-row .label { color: #4a5568; }
.pdf-report-container .pdf-row .value {
  font-weight: 700;
  color: #0a1f44;
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -.005em;
  text-align: right;
}
.pdf-report-container .pdf-section-highlight .pdf-row {
  background: #faf8f3;
  padding: 8pt 12pt;
  margin-bottom: 1pt;
}
.pdf-report-container .pdf-section-highlight .pdf-row .value {
  color: #1a4d2e;
  font-size: 12pt;
}
.pdf-report-container .pdf-chart-wrap {
  margin: 14pt 0 16pt;
  page-break-inside: avoid;
}
.pdf-report-container .pdf-chart-wrap h2 { margin-bottom: 6pt; }
.pdf-report-container .pdf-chart-legend {
  display: flex;
  gap: 14pt;
  font-size: 8.5pt;
  color: #6b7280;
  margin-bottom: 8pt;
}
.pdf-report-container .pdf-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4pt;
}
.pdf-report-container .pdf-chart-legend i {
  display: inline-block;
  width: 8pt;
  height: 8pt;
  border-radius: 1pt;
}
.pdf-report-container .pdf-chart-host {
  height: 160px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  border-bottom: 1px solid #d4d0c4;
  padding-bottom: 4px;
  position: relative;
}
.pdf-report-container .pdf-chart-host .gch-tooltip { display: none; }
.pdf-report-container .pdf-disclaimer {
  background: #fafaf2;
  border-left: 2.5pt solid #c9a961;
  padding: 11pt 14pt;
  margin: 18pt 0 14pt;
  font-size: 9.5pt;
  color: #555;
  font-style: italic;
  line-height: 1.55;
  page-break-inside: avoid;
}
.pdf-report-container .pdf-disclaimer strong {
  color: #0a1f44;
  font-style: normal;
  font-weight: 700;
}
.pdf-report-container .pdf-footer {
  margin-top: 24pt;
  padding-top: 16pt;
  border-top: 2pt solid #0a1f44;
  page-break-inside: avoid;
}
.pdf-report-container .pdf-footer-brand {
  text-align: center;
  margin-bottom: 14pt;
}
.pdf-report-container .pdf-footer-brand .pdf-brand { font-size: 16pt; }
.pdf-report-container .pdf-footer-grid {
  display: flex;
  gap: 18pt;
}
.pdf-report-container .pdf-footer-col {
  flex: 1;
}
.pdf-report-container .pdf-footer-col h3 {
  font-family: -apple-system, sans-serif;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #a08740;
  margin-bottom: 6pt;
}
.pdf-report-container .pdf-footer-col p {
  font-size: 10pt;
  color: #4a5568;
  line-height: 1.45;
  margin: 1pt 0;
}
.pdf-report-container .pdf-footer-col p strong {
  color: #0a1f44;
  font-weight: 700;
  font-family: 'Playfair Display', Georgia, serif;
}
.pdf-report-container .pdf-footer-bottom {
  margin-top: 14pt;
  padding-top: 10pt;
  border-top: 1px solid #e5e1d4;
  font-size: 8.5pt;
  color: #6b7280;
  text-align: center;
  letter-spacing: .02em;
}

/* Year-by-year chart */
.goal-chart {
  border-top: 1px solid var(--hairline);
  padding-top: 2.5rem;
  margin-top: 1.5rem;
}
.gch-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.gch-header h4 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
}
.gch-legend {
  display: flex;
  gap: 1.5rem;
  font-size: .78rem;
  color: var(--slate);
  font-weight: 500;
}
.gch-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend-dot {
  width: 10px; height: 10px;
  display: inline-block;
}
.legend-invested { background: var(--bone); }
.legend-corpus { background: var(--navy); }
.legend-target { background: var(--gold); }

.gch-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 220px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
  position: relative;
}
.gch-bar-wrap {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}
.gch-bar {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  margin-top: auto;
}
.gch-segment {
  width: 100%;
  transition: height .4s ease;
}
.gch-seg-invested { background: var(--bone); }
.gch-seg-returns { background: var(--navy); }
.gch-bar:hover .gch-tooltip { opacity: 1; transform: translate(-50%, -8px); }
.gch-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--navy-deep);
  color: white;
  padding: .5rem .75rem;
  font-size: .72rem;
  white-space: nowrap;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: all .2s;
  z-index: 5;
  font-weight: 500;
}
.gch-tooltip strong { color: var(--gold); display: block; font-family: var(--serif); font-size: .85rem; }
.gch-year-label {
  position: absolute;
  bottom: -22px;
  font-size: .65rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.gch-target-line {
  position: absolute;
  left: 0; right: 0;
  border-top: 1.5px dashed var(--gold);
  z-index: 3;
}
.gch-target-label {
  position: absolute;
  right: 4px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--gold-deep);
  background: var(--white);
  padding: 1px 6px;
  letter-spacing: .04em;
}

/* legacy calc card kept for compat */
.calc-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  background: var(--white);
  padding: 3.5rem;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  position: relative;
}
.calc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
}
.calc-row { margin-bottom: 2.25rem; }
.cr-label-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .8rem;
}
.cr-label-line label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .02em;
}
.cr-val {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold-deep);
}
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: var(--bone);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 0 6px rgba(201,169,97,.15);
}
.cr-bounds {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: var(--muted);
  margin-top: .5rem;
  letter-spacing: .04em;
}

.calc-summary {
  background: var(--ivory);
  padding: 2.25rem;
  border: 1px solid var(--hairline);
}
.calc-summary h3 { margin-bottom: 1.5rem; }
.cs-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .85rem 0;
  font-size: .9rem;
  color: var(--slate);
}
.cs-row strong {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
}
.calc-summary hr {
  border: none;
  height: 1px;
  background: var(--hairline);
  margin: .5rem 0;
}
.cs-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .8rem;
}
.cs-total strong {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: none;
  letter-spacing: -.01em;
}
.cs-note {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.55;
  font-style: italic;
  margin: 1rem 0 1.5rem;
}

/* ============================================================
   TESTIMONIALS
============================================================ */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.testi {
  padding: 2.5rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--white);
  transition: background .2s;
  display: flex;
  flex-direction: column;
}
.testi:hover { background: var(--ivory-2); }
.testi-stars {
  color: var(--gold);
  font-size: .9rem;
  letter-spacing: 3px;
  margin-bottom: 1.25rem;
}
.testi blockquote {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.6;
  margin-bottom: 2rem;
  flex: 1;
}
.testi blockquote em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 600;
}
.testi figcaption {
  display: flex;
  gap: .9rem;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.testi-av {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: .85rem;
  color: var(--gold);
  background: var(--navy);
  flex-shrink: 0;
  letter-spacing: .02em;
}
.av-1 { background: linear-gradient(135deg, var(--navy), #1e3a8a); }
.av-2 { background: linear-gradient(135deg, var(--success), #065f46); }
.av-3 { background: linear-gradient(135deg, #4c1d2c, #7c2d3f); }
.av-4 { background: linear-gradient(135deg, var(--navy-deep), var(--navy)); }
.av-5 { background: linear-gradient(135deg, #5b3920, var(--gold-deep)); color: white; }
.av-6 { background: linear-gradient(135deg, #1e293b, #334155); }
.testi figcaption strong {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .92rem;
  color: var(--navy);
}
.testi figcaption small {
  font-size: .78rem;
  color: var(--muted);
}

/* ============================================================
   FAQ
============================================================ */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
}
.faq-side h2 { margin-bottom: 1.25rem; }
.faq-side p { color: var(--slate); font-size: .95rem; }
.faq-list {
  border-top: 1px solid var(--hairline);
}
.faq-item {
  border-bottom: 1px solid var(--hairline);
  padding: 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem .25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-deep); }
.faq-plus {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--gold);
  transition: transform .25s;
  flex-shrink: 0;
}
.faq-item[open] .faq-plus {
  transform: rotate(45deg);
}
.faq-body {
  padding: 0 .25rem 1.5rem;
  color: var(--slate);
  font-size: .95rem;
  line-height: 1.75;
}

/* ============================================================
   CONSULT BANNER
============================================================ */
.consult-banner {
  background: var(--navy);
  padding: 4.5rem 0;
  position: relative;
  overflow: hidden;
}
.consult-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 50%, rgba(201,169,97,.1), transparent 60%);
}
.cb-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
}
.cb-inner h2 { color: white; margin-bottom: 1rem; }
.cb-inner h2 br { display: block; }
.cb-inner p { color: rgba(255,255,255,.75); font-size: 1rem; max-width: 560px; }
.cb-inner .btn-gold { justify-self: end; padding: 1.1rem 2rem; font-size: .95rem; }

/* ============================================================
   CONTACT
============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}
.contact-info h2 { margin-bottom: 1.25rem; }
.contact-lede {
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 2.5rem;
  max-width: 440px;
}
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.contact-list li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hairline);
}
.cl-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-top: .15rem;
}
.contact-list strong {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--navy);
  font-size: .95rem;
}
.contact-list a:hover { color: var(--gold-deep); }
.contact-badges {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.contact-badges span {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding: .4rem .85rem;
  border: 1px solid var(--gold);
  border-radius: 100px;
}

.contact-form {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 2.75rem;
  box-shadow: var(--shadow);
  position: relative;
}
.contact-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}
.contact-form h3 { margin-bottom: .35rem; }
.form-sub {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
}
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.cf-field { margin-bottom: 1.1rem; }
.cf-field label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
}
.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--hairline);
  background: var(--white);
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--navy);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  border-radius: var(--radius);
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,169,97,.15);
}
.cf-submit {
  width: 100%;
  margin-top: .75rem;
  padding: 1rem;
  justify-content: center;
}
.form-disclaimer {
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
  margin-top: .85rem;
  font-style: italic;
}
.form-success {
  background: var(--ivory);
  border: 1px solid var(--gold);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--navy);
  font-style: italic;
  text-align: center;
}

/* ============================================================
   FOOTER
============================================================ */
.footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,.6);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 4rem;
  padding: 5rem 1.75rem 3rem;
}
/* Footer logo — keep green wordmark on dark background, lighten slightly for legibility */
.footer-brand .logo { color: #4a8f5e; }
.footer-brand .logo .logo-name { color: #4a8f5e; }
.footer-brand .logo .logo-name strong { color: #5fb877; }
.footer-brand .logo .logo-sub { color: var(--gold); }
.footer-brand p {
  margin-top: 1.25rem;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(255,255,255,.55);
  max-width: 360px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer-col h5 {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer-col ul li, .footer-col ul a {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  transition: color .2s;
}
.footer-col ul a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 1.75rem 0;
}
.fb-inner p {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  margin-bottom: .25rem;
}
.fb-inner .legal {
  font-size: .72rem;
  color: rgba(255,255,255,.3);
  line-height: 1.6;
  max-width: 900px;
  font-style: italic;
}

/* ============================================================
   WHATSAPP FLOAT
============================================================ */
.wa-float {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 52px; height: 52px;
  background: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(15,76,58,.4);
  z-index: 99;
  transition: all .3s;
}
.wa-float:hover { transform: scale(1.08); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .hero-card { max-width: 480px; }
  .promise-grid { grid-template-columns: 1fr; gap: 3rem; }
  .pp-frame { max-width: 280px; margin: 0 auto; }
  .pp-caption { max-width: 280px; margin-left: auto; margin-right: auto; }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .calc-card { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem; }
  .goal-selector { grid-template-columns: repeat(4, 1fr); }
  .goal-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 900px) {
  .approach-grid { grid-template-columns: 1fr; }
  .approach-card { border-right: none; border-bottom: 1px solid var(--hairline); }
  .approach-card:last-child { border-bottom: none; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .faq-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cb-inner { grid-template-columns: 1fr; gap: 2rem; }
  .cb-inner .btn-gold { justify-self: start; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links, .btn-nav { display: none; }
  .hamburger { display: flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: white;
    padding: 1.5rem;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 8px 28px rgba(10,31,68,.08);
    z-index: 99;
    gap: 1.25rem;
  }
  .topbar-inner { justify-content: center; font-size: .7rem; }
  .tb-right > *:nth-child(n+3) { display: none; }
  .results-grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .ts-label { border-right: none; padding-right: 0; }
  .section { padding: 4rem 0; }
  .hero { padding: 3.5rem 0 4rem; }
  .hero-card { padding: 2rem; }
  .hc-quote { font-size: 1.15rem; }
  .promise-quote { font-size: 1.05rem; padding-left: 1rem; }
  .calc-card { padding: 1.75rem; }
  .footer-cols { grid-template-columns: 1fr; }
  .contact-list li { grid-template-columns: 1fr; gap: .25rem; }
  .cf-row { grid-template-columns: 1fr; }
  .goal-card { padding: 1.75rem; }
  .goal-selector { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .gc-icon { font-size: 1.4rem; }
  .gc-label { font-size: .7rem; }
  .grh-amount { font-size: 2rem; }
  .gro-amount { font-size: 1.6rem; }
  .gch-bars { height: 160px; }
  .gch-year-label { font-size: .55rem; }
}

/* ============================================================
   CALCULATOR MODE TABS — SIP vs SWP
============================================================ */
.calc-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.calc-mode-tabs.three-tabs {
  grid-template-columns: 1fr 1fr 1fr;
}
.calc-mode-tabs.four-tabs {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Step-up bonus tag */
.su-bonus-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  padding: .25rem .75rem;
  border-radius: 100px;
  margin-top: .85rem;
}
.cmt-tab {
  background: var(--white);
  border: 1.5px solid var(--hairline);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: all .25s;
  position: relative;
}
.cmt-tab::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s;
}
.cmt-tab:hover {
  border-color: var(--gold);
  background: rgba(201,169,97,.04);
}
.cmt-tab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
  box-shadow: 0 8px 24px rgba(10,31,68,.18);
}
.cmt-tab.active::before { transform: scaleY(1); background: var(--gold); }
.cmt-icon {
  width: 44px; height: 44px;
  background: var(--ivory);
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold-deep);
  transition: all .2s;
}
.cmt-icon svg { width: 22px; height: 22px; }
.cmt-tab.active .cmt-icon {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.cmt-content { display: flex; flex-direction: column; gap: .15rem; }
.cmt-content strong {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.cmt-tab.active .cmt-content strong { color: white; }
.cmt-content small {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5;
}
.cmt-tab.active .cmt-content small { color: rgba(255,255,255,.65); }

.calc-mode-panel { display: none; }
.calc-mode-panel.active {
  display: block;
  animation: panelFade .35s ease;
}
@keyframes panelFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   WEALTH BUILDER SUB-TOGGLE — Step-Up SIP vs Lumpsum
============================================================ */
.wb-subtoggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
}
.wb-subtoggle {
  display: inline-flex;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  padding: 4px;
  gap: 2px;
}
.wb-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  padding: .65rem 1.4rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all .25s;
  letter-spacing: .01em;
}
.wb-tab small {
  font-size: .68rem;
  font-weight: 500;
  color: inherit;
  opacity: .65;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wb-tab:hover { color: var(--navy); }
.wb-tab.active {
  background: var(--navy);
  color: var(--gold);
  box-shadow: 0 4px 14px rgba(10,31,68,.18);
}
.wb-tab.active small { color: var(--gold); opacity: .8; }
.wb-tab svg { flex-shrink: 0; }

.wb-panel { display: none; }
.wb-panel.active {
  display: block;
  animation: panelFade .3s ease;
}

@media (max-width: 600px) {
  .wb-subtoggle { flex-direction: column; padding: 6px; gap: 4px; }
  .wb-tab { justify-content: center; padding: .65rem 1.2rem; }
}

@media (max-width: 1100px) {
  .calc-mode-tabs.three-tabs { grid-template-columns: 1fr; }
  .calc-mode-tabs.four-tabs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .calc-mode-tabs.four-tabs { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .calc-mode-tabs { grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT YOU — Age-based Life Stage Advisor
============================================================ */
.about-you {
  background: linear-gradient(160deg, var(--ivory) 0%, rgba(201,169,97,.04) 100%);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  padding: 2.25rem 2.5rem;
  margin-bottom: 2.5rem;
  position: relative;
}
.ay-header {
  margin-bottom: 1.75rem;
}
.ay-header h3 {
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  margin-top: .35rem;
}

.ay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Persona card */
.ay-persona {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 1.75rem;
  position: relative;
  transition: border-color .35s, box-shadow .35s;
}
.ay-persona:hover {
  border-color: rgba(201,169,97,.4);
  box-shadow: 0 12px 32px rgba(10,31,68,.08);
}

.ap-avatar-wrap {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
}
.ap-ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  animation: ringPulse 4s ease-in-out infinite;
}
@keyframes ringPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,97,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(201,169,97,0); }
}
.ap-avatar {
  position: absolute;
  inset: 6px;
  background: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  user-select: none;
}
.ap-avatar svg { width: 30px; height: 30px; }
.ay-persona.changing .ap-avatar {
  transform: scale(.85) rotate(-6deg);
}

.ap-content { flex: 1; min-width: 0; }
.ap-stage-label {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .25rem;
}
.ap-stage {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.005em;
  margin-bottom: .5rem;
  transition: opacity .25s;
}
.ap-content p {
  font-size: .92rem;
  color: var(--slate);
  line-height: 1.65;
  margin-bottom: 1rem;
  transition: opacity .25s;
}
.ay-persona.changing .ap-stage,
.ay-persona.changing .ap-content p {
  opacity: 0.4;
}
.ap-meta {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding-top: .85rem;
  border-top: 1px dashed var(--hairline);
}
.ap-meta-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .8rem;
}
.apm-label {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .02em;
}
.ap-meta-item strong {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--navy);
  text-align: right;
  font-size: .82rem;
  transition: opacity .25s;
}
.ay-persona.changing .ap-meta-item strong {
  opacity: .4;
}

/* Age slider + recommendations */
.ay-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ay-slider-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ay-slider-row label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .02em;
}
.ay-display {
  font-size: .9rem;
  color: var(--slate);
}
.ay-display strong {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  margin: 0 .15rem;
}

.ay-slider-wrap {
  position: relative;
  padding-bottom: 1.4rem;  /* room for the absolute-positioned tick labels */
}
.ay-slider-wrap input[type="range"] {
  margin-bottom: .35rem;
}
/* Tick labels are absolutely positioned at their TRUE % along the slider so
   the value under the thumb matches the label visually (no more "28 looks like 30"). */
.ay-bounds {
  position: relative;
  height: 1rem;
}
.ay-bounds span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: .68rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ay-bounds span:first-child  { transform: translateX(0); }
.ay-bounds span:last-child   { transform: translateX(-100%); }

/* Editable age input — looks identical to the gold serif display */
.ay-age-edit {
  display: inline-flex;
  align-items: baseline;
  border-bottom: 1.5px dashed var(--gold);
  padding: 0 .25rem;
  margin: 0 .15rem;
  background: rgba(201,169,97,.06);
  border-radius: 4px;
  transition: all .2s;
}
.ay-age-edit:hover {
  background: rgba(201,169,97,.12);
  border-bottom-style: solid;
}
.ay-age-edit:focus-within {
  background: var(--white);
  border-bottom: 1.5px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(201,169,97,.15);
}
#ayValue {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  border: none;
  outline: none;
  background: transparent;
  width: 2.4ch;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 1;
  -moz-appearance: textfield;
}
#ayValue::-webkit-outer-spin-button,
#ayValue::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ay-recos {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  margin-top: .75rem;
}
.ay-reco-label {
  display: block;
  font-size: .8rem;
  color: var(--slate);
  margin-bottom: .85rem;
  font-style: italic;
  line-height: 1.5;
}
.ay-reco-chips {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.ay-reco-chip {
  background: var(--white);
  border: 1px solid var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  padding: .5rem .9rem;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: all .2s;
  white-space: nowrap;
}
.ay-reco-chip:hover {
  background: var(--navy);
  color: var(--gold);
  border-color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10,31,68,.18);
}
.ay-reco-chip.using {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.ayrc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
  transition: color .2s;
}
.ayrc-icon svg { width: 16px; height: 16px; }
.ay-reco-chip:hover .ayrc-icon { color: var(--gold); }
.ay-reco-chip.using .ayrc-icon { color: var(--navy); }

/* OR divider */
.ay-divider {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: -.5rem;
  position: relative;
}
.ay-divider::before, .ay-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.ay-divider span {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--muted);
  padding: 0 1.25rem;
}

/* Goal title sub */
.goal-title-sub {
  font-size: .85rem;
  color: var(--muted);
  margin-top: .5rem;
  font-style: italic;
}

@media (max-width: 1100px) {
  .ay-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
  .about-you { padding: 1.75rem; }
  .ay-persona { flex-direction: column; gap: 1rem; }
  .ap-avatar-wrap { width: 56px; height: 56px; }
  .ap-avatar { font-size: 1.4rem; }
  .ap-stage { font-size: 1.2rem; }
  .ay-display strong { font-size: 1.4rem; }
}

/* ============================================================
   GOAL CALCULATOR — INTERACTIVE ENHANCEMENTS
============================================================ */

/* Risk profile chips */
.risk-chips {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}
.risk-chip {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: .55rem .75rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  color: var(--slate);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  transition: all .2s;
  position: relative;
}
.risk-chip:hover {
  border-color: var(--gold);
  background: rgba(201,169,97,.05);
  color: var(--navy);
}
.risk-chip.active {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
  box-shadow: 0 4px 14px rgba(10,31,68,.18);
}
.risk-chip small {
  display: block;
  font-family: var(--serif);
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold-deep);
  font-style: italic;
}
.risk-chip.active small { color: var(--gold); }
.rc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-bottom: .15rem;
}
.rc-conservative { background: linear-gradient(135deg, #5b8def, #1e3a8a); }
.rc-balanced     { background: linear-gradient(135deg, #c9a961, #a08740); }
.rc-aggressive   { background: linear-gradient(135deg, #f87171, #b91c1c); }

/* Inflation impact bar inside results headline */
.grh-inflation {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--hairline);
}
.grh-infl-bar {
  display: block;
  height: 4px;
  background: var(--bone);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: .5rem;
}
.grh-infl-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  border-radius: 100px;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.grh-inflation small {
  display: block;
  font-size: .76rem;
  color: var(--muted);
  font-style: italic;
}
.grh-inflation strong {
  font-style: normal;
  color: var(--gold-deep);
  font-weight: 700;
  font-family: var(--sans);
}

/* COST OF DELAY */
.cost-of-delay {
  border-top: 1px solid var(--hairline);
  padding-top: 2.5rem;
  margin-top: 2.5rem;
}
.cod-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.5rem;
}
.cod-header h4 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: .35rem;
  letter-spacing: -.01em;
}
.cod-explainer {
  color: var(--slate);
  font-size: .92rem;
  line-height: 1.65;
  font-style: italic;
}
.cod-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.cod-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cod-card.cod-now {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--white), rgba(201,169,97,.04));
}
.cod-card.cod-warning::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), #b91c1c);
}
.cod-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--gold-deep);
  margin-bottom: .65rem;
}
.cod-card.cod-warning .cod-tag { color: #b91c1c; }
.cod-amount {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.01em;
  display: block;
  font-variant-numeric: tabular-nums;
}
.cod-card small {
  font-size: .82rem;
  color: var(--muted);
  margin: .35rem 0 1rem;
  display: block;
}
.cod-extra {
  display: inline-block;
  background: rgba(201,169,97,.15);
  color: var(--gold-deep);
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 100px;
  margin-left: .25rem;
  font-style: normal;
}
.cod-card.cod-warning .cod-extra {
  background: rgba(185,28,28,.1);
  color: #b91c1c;
}
.cod-meter {
  height: 4px;
  background: var(--bone);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.cod-meter-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 100px;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.cod-now .cod-meter-fill { background: var(--gold); }
.cod-warning .cod-meter-fill { background: linear-gradient(90deg, var(--gold-deep), #b91c1c); }
.cod-card p {
  font-size: .82rem;
  color: var(--slate);
  line-height: 1.55;
  margin-top: auto;
}

/* Chart hint + interactive bars */
.gch-hint {
  display: block;
  font-size: .72rem;
  color: var(--muted);
  font-style: italic;
  margin-top: .25rem;
  letter-spacing: .02em;
}
.gch-bar-wrap {
  cursor: pointer;
}
.gch-bar-wrap.year-active .gch-seg-returns {
  background: var(--gold);
}
.gch-bar-wrap.year-active .gch-seg-invested {
  background: var(--gold-deep);
  opacity: .35;
}

/* Year detail panel */
.year-detail {
  margin-top: 2.25rem;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  padding: 1.5rem 1.75rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.year-detail.shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.yd-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  align-items: center;
}
.yd-cell {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.yd-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.yd-value {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .risk-chips { flex-wrap: wrap; }
  .cod-header { grid-template-columns: 1fr; gap: 1rem; }
  .cod-cards { grid-template-columns: 1fr; }
  .yd-row { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .yd-value { font-size: 1.1rem; }
}

/* ============================================================
   LIFETIME BRIDGE — Step-Up SIP → SWP Retirement Income
============================================================ */
.lifetime-bridge {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 2px dashed var(--gold);
  position: relative;
}

/* "Phase 2" divider header */
.lb-divider {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}
.lb-arrow-circle {
  width: 56px; height: 56px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 8px 22px rgba(201,169,97,.35);
  animation: arrowBounce 2s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.lb-divider-text h4 {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--navy);
  margin: .25rem 0 .5rem;
  letter-spacing: -.01em;
}
.lb-divider-text p {
  color: var(--slate);
  font-size: .98rem;
  line-height: 1.6;
  max-width: 620px;
}

/* Summary cards: Phase 1 → Phase 2 */
.lb-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 2.5rem;
}
.lb-sum-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 1.5rem 1.75rem;
  text-align: left;
  position: relative;
}
.lb-sum-card-gold {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-color: var(--gold);
  box-shadow: 0 12px 32px rgba(10,31,68,.25);
}
.lb-sum-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--gold-deep);
  display: block;
  margin-bottom: .65rem;
}
.lb-sum-card-gold .lb-sum-label { color: var(--gold); }
.lb-sum-amt {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.02em;
  display: block;
  margin-bottom: .35rem;
}
.lb-sum-card-gold .lb-sum-amt { color: white; }
.lb-sum-card small {
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
}
.lb-sum-card-gold small { color: rgba(255,255,255,.7); }
.lb-sum-card small strong {
  color: var(--navy);
  font-style: normal;
  font-weight: 700;
}
.lb-sum-card-gold small strong { color: var(--gold); }

.lb-arrow {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold);
  font-weight: 700;
}

/* Three withdrawal scenarios */
.lb-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}
.lb-scenario {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 1.5rem 1.5rem 1.4rem;
  position: relative;
  transition: all .25s;
}
.lb-scenario:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(10,31,68,.06);
}
.lb-scenario.lb-recommended {
  background: linear-gradient(180deg, var(--white), rgba(201,169,97,.05));
  border-color: var(--gold);
  box-shadow: 0 8px 22px rgba(201,169,97,.12);
}
.lb-scenario.lb-forever-card {
  background: linear-gradient(160deg, var(--ivory), rgba(201,169,97,.08));
  border-color: var(--gold-deep);
}
.lb-tag {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--gold-deep);
  margin-bottom: .65rem;
}
.lb-amount {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.01em;
  margin-bottom: .35rem;
}
.lb-amount small {
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  font-family: var(--sans);
}
.lb-detail {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1rem;
  font-style: italic;
}
.lb-meter {
  height: 4px;
  background: var(--bone);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: .85rem;
}
.lb-meter-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 100px;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.lb-recommended .lb-meter-fill { background: var(--gold); }
.lb-result {
  font-size: .85rem;
  color: var(--slate);
}
.lb-result strong {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
}

/* Lifetime chart with phase boundary marker */
.lifetime-chart { position: relative; }
.lc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.lc-header h4 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
}

/* Floating snapshot area — sits above bars, snapshot card follows the scrubber */
.ls-floating-area {
  position: relative;
  height: 96px;
  margin-bottom: .5rem;
}
.ls-snapshot {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  background: var(--navy);
  color: white;
  padding: .85rem 1.4rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--gold);
  box-shadow: 0 12px 28px rgba(10,31,68,.22);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  transition: left .12s ease-out;
  min-width: 180px;
}
.ls-snapshot::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--navy);
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.ls-age-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--gold);
  margin-bottom: .35rem;
  text-transform: uppercase;
}
.ls-corpus {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: white;
  line-height: 1;
  letter-spacing: -.01em;
}
.ls-phase {
  font-size: .72rem;
  color: rgba(255,255,255,.72);
  margin-top: .35rem;
  font-style: italic;
}

/* Chart bars wrapper with vertical marker line */
.lc-bars-wrap { position: relative; }
.ls-marker-line {
  position: absolute;
  top: -8px;
  bottom: 22px;  /* sits above the year labels */
  width: 2px;
  background: var(--gold);
  pointer-events: none;
  z-index: 4;
  transform: translateX(-1px);
  transition: left .12s ease-out;
  box-shadow: 0 0 8px rgba(201,169,97,.5);
}
.ls-marker-line::before, .ls-marker-line::after {
  content: '';
  position: absolute;
  left: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.ls-marker-line::before { top: -4px; }
.ls-marker-line::after  { bottom: -4px; }

/* Scrubber slider */
.ls-scrubber {
  margin-top: 1.25rem;
  padding: 0 .5rem;
}
.ls-scrubber input[type="range"] {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 50%, var(--bone) 50%, var(--bone) 100%);
  /* Default to 50% gold by default — JS updates via CSS var */
}
.ls-scrubber input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 0 0 4px rgba(201,169,97,.18), 0 4px 12px rgba(10,31,68,.18);
  transition: transform .15s, box-shadow .15s;
}
.ls-scrubber input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(201,169,97,.25), 0 6px 16px rgba(10,31,68,.22);
}

.ls-bounds-row {
  display: flex;
  justify-content: space-between;
  margin-top: .65rem;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .04em;
}
.ls-bounds-row strong {
  font-family: var(--serif);
  font-weight: 700;
  font-size: .85rem;
  color: var(--navy);
}
.ls-bound-mid {
  color: var(--gold-deep);
  font-weight: 700;
}
.ls-bound-mid strong { color: var(--gold-deep); }

@media (max-width: 700px) {
  .ls-snapshot { min-width: 140px; padding: .7rem 1rem .85rem; }
  .ls-corpus { font-size: 1.3rem; }
  .ls-bounds-row { font-size: .65rem; }
}

@media (max-width: 900px) {
  .lb-summary { grid-template-columns: 1fr; gap: 1rem; }
  .lb-arrow { transform: rotate(90deg); justify-self: center; }
  .lb-scenarios { grid-template-columns: 1fr; }
  .lb-divider { flex-direction: column; gap: 1rem; }
  .lb-divider-text h4 { font-size: 1.5rem; }
}

/* ============================================================
   READING PROGRESS BAR
============================================================ */
.read-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 50%, var(--gold-deep));
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(201,169,97,.45);
  /* GPU-accelerated transform — no layout reflow, perfectly smooth */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.16,.84,.32,1);
  will-change: transform;
}

/* ============================================================
   PRESS / FEATURED IN
============================================================ */
.press-section {
  padding: 3.5rem 0;
  background: var(--white);
  text-align: center;
  border-bottom: 1px solid var(--hairline);
}
.press-eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.75rem;
}
.press-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 3rem;
  align-items: center;
}
.press-logo {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .01em;
  opacity: .55;
  transition: opacity .25s, color .25s;
  cursor: default;
  white-space: nowrap;
  position: relative;
}
.press-logo:hover { opacity: 1; color: var(--gold-deep); }
.press-1 { font-family: 'Playfair Display'; font-style: italic; }
.press-2 { font-family: 'Playfair Display'; font-weight: 800; letter-spacing: -.02em; }
.press-3 { font-variant: small-caps; letter-spacing: .08em; }
.press-4 { font-style: italic; }
.press-5 { font-weight: 800; }
.press-6 { font-family: 'Cormorant Garamond'; font-weight: 700; }

/* ============================================================
   STORY TIMELINE
============================================================ */
.story-section { background: var(--ivory); }
.story-years {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 720px;
  margin: 0 auto 3rem;
  position: relative;
  padding: 0 1rem;
}
.story-years::before {
  content: '';
  position: absolute;
  top: 50%; left: 1rem; right: 1rem;
  height: 1px;
  background: var(--bone);
  z-index: 0;
}
.story-year {
  position: relative;
  z-index: 1;
  background: var(--ivory);
  border: 1.5px solid var(--bone);
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  padding: .75rem 1.4rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all .25s;
  letter-spacing: .02em;
}
.story-year:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}
.story-year.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold);
  padding: .85rem 1.6rem;
  font-size: 1.15rem;
  box-shadow: 0 6px 20px rgba(10,31,68,.18);
}

.story-panels { position: relative; min-height: 280px; }
.story-panel {
  display: none;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 3rem;
  position: relative;
}
.story-panel.active {
  display: grid;
  animation: storyFade .45s ease;
}
@keyframes storyFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.story-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
}
.sp-stat {
  text-align: center;
  border-right: 1px solid var(--hairline);
  padding-right: 3rem;
}
.sp-stat span {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .85rem;
}
.sp-stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.02em;
}
.sp-stat small {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-top: .65rem;
  font-style: italic;
}
.sp-content h3 {
  font-family: var(--serif);
  font-size: 1.65rem;
  margin-bottom: 1rem;
}
.sp-content p {
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.75;
}

/* ============================================================
   WEALTH MULTIPLIER
============================================================ */
.multiplier-section { background: var(--ivory); }
.mult-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.mc-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.mc-toggles {
  display: inline-flex;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  padding: 4px;
  gap: 2px;
}
.mc-toggle {
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  padding: .5rem 1rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all .2s;
}
.mc-toggle:hover { color: var(--navy); }
.mc-toggle.active {
  background: var(--navy);
  color: var(--gold);
  box-shadow: 0 2px 8px rgba(10,31,68,.15);
}

.mult-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.mult-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 2.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.mult-card.recommended {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--white), rgba(201,169,97,.04));
  box-shadow: 0 12px 36px rgba(201,169,97,.15);
  transform: translateY(-12px);
}
.mc-rank {
  position: absolute;
  top: -1px; right: 1.5rem;
  background: var(--bone);
  color: var(--navy);
  font-family: var(--serif);
  font-size: .85rem;
  font-weight: 700;
  padding: .35rem .85rem;
  letter-spacing: .04em;
}
.mc-rank.gold { background: var(--gold); color: var(--navy); }
.mult-card h4 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .25rem;
}
.mc-rate {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-style: italic;
}
.mc-fill {
  background: var(--bone);
  height: 6px;
  border-radius: 100px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.mc-fill-bar {
  height: 100%;
  background: var(--navy);
  border-radius: 100px;
  width: 0%;
  transition: width .8s cubic-bezier(.2,.8,.2,1);
}
.mult-sip .mc-fill-bar { background: var(--gold); }
.mc-amount {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.01em;
  margin-bottom: 1rem;
}
.mult-sip .mc-amount { color: var(--gold-deep); }
.mult-card p {
  font-size: .88rem;
  color: var(--slate);
  line-height: 1.6;
  flex: 1;
}
.mc-bonus {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--gold);
  text-align: center;
}
.mc-bonus span {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.mc-bonus strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin: .35rem 0;
}

/* ============================================================
   PLAYBOOK / LEAD MAGNET
============================================================ */
.playbook-section {
  background: var(--white);
}
.playbook-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: center;
}
.playbook-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}
.pb-book {
  position: relative;
  width: 280px;
  height: 380px;
  transform: rotateY(-12deg) rotateX(4deg);
  transition: transform .4s ease;
}
.pb-book:hover { transform: rotateY(-6deg) rotateX(2deg); }
.pb-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 1px solid var(--gold);
  outline: 8px solid rgba(201,169,97,.05);
  outline-offset: 0;
  padding: 2rem 1.75rem;
  color: var(--gold);
  display: flex;
  flex-direction: column;
  box-shadow: 24px 24px 60px rgba(10,31,68,.25);
}
.pb-tag {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(201,169,97,.7);
  margin-bottom: 1.5rem;
}
.pb-cover h3 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: white;
  line-height: 1.1;
  margin-bottom: 1.25rem;
  letter-spacing: -.01em;
}
.pb-line {
  width: 50px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1.25rem;
}
.pb-cover p {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
  font-style: italic;
  flex: 1;
}
.pb-author {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(201,169,97,.25);
}
.pb-author small {
  display: block;
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(201,169,97,.6);
  margin-bottom: .25rem;
}
.pb-author strong {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--gold);
  font-size: 1rem;
}
.pb-spine {
  position: absolute;
  left: -8px; top: 4px; bottom: 4px;
  width: 8px;
  background: linear-gradient(90deg, #050d1c, var(--navy));
  border-left: 1px solid rgba(201,169,97,.2);
}

.playbook-content h2 { margin-bottom: 1.25rem; }
.playbook-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin: 1.75rem 0;
}
.playbook-list li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  font-size: .95rem;
  color: var(--slate);
  line-height: 1.55;
}
.playbook-form {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.playbook-form input {
  flex: 1;
  min-width: 240px;
  padding: .9rem 1.1rem;
  border: 1px solid var(--hairline);
  background: var(--white);
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--navy);
  outline: none;
  border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.playbook-form input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,169,97,.15);
}

/* ============================================================
   BACK-TO-TOP BUTTON
============================================================ */
.back-top {
  position: fixed;
  bottom: 6rem; right: 2rem;
  width: 44px; height: 44px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(10,31,68,.12);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s, background .2s, color .2s;
}
.back-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.back-top:hover {
  background: var(--navy);
  color: var(--gold);
}

/* ============================================================
   SCROLL FADE-IN (transform/opacity only — no layout shift)
============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.fade-up.in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   SERVICE CARD GOLD CORNER ACCENT (interactive)
============================================================ */
.svc-card {
  overflow: hidden;
}
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent var(--gold) transparent transparent;
  opacity: 0;
  transition: opacity .25s, border-width .25s;
  pointer-events: none;
}
.svc-card:hover::before {
  opacity: 1;
  border-width: 0 32px 32px 0;
}

/* ============================================================
   HERO MOUSE PARALLAX
============================================================ */
.hero-card {
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}

/* ============================================================
   RESPONSIVE — new sections
============================================================ */
@media (max-width: 1100px) {
  .playbook-grid { grid-template-columns: 1fr; gap: 3rem; }
  .pb-book { transform: rotateY(-8deg); }
  .story-panel { grid-template-columns: 1fr; gap: 2rem; }
  .sp-stat { border-right: none; border-bottom: 1px solid var(--hairline); padding-right: 0; padding-bottom: 1.75rem; }
}
@media (max-width: 900px) {
  .mult-grid { grid-template-columns: 1fr; }
  .mult-card.recommended { transform: none; }
  .press-grid { gap: 1.5rem 2rem; }
  .press-logo { font-size: .92rem; }
  .story-years { flex-wrap: wrap; gap: .5rem; justify-content: center; padding: 0; }
  .story-years::before { display: none; }
  .story-year, .story-year.active { padding: .55rem 1.1rem; font-size: .95rem; }
  .sp-stat strong { font-size: 2.5rem; }
  .story-panel { padding: 2rem; }
}
@media (max-width: 768px) {
  .pb-book { width: 220px; height: 300px; transform: none; }
  .pb-cover { padding: 1.5rem 1.25rem; }
  .pb-cover h3 { font-size: 1.5rem; }
  .playbook-form { flex-direction: column; }
  .playbook-form input { min-width: 0; }
  .back-top { right: 1.25rem; bottom: 5.5rem; }
}