/* ==========================================================================
   Advaya Wealth — stylesheet
   Design language: a private-office ledger. Hairline rules instead of boxes,
   Roman numerals as the structural device, gold used as an accent rather
   than a fill. Edit this one file to restyle every page.

   Breakpoints: 1120 (container) · 1024 (tablet landscape) · 900 (nav collapse)
                760 (tablet portrait / large phone) · 480 (phone)
   ========================================================================== */

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

:root {
  --navy:        #1C2B5E;
  --navy-deep:   #0F1633;
  --navy-mid:    #243770;
  --gold:        #C9A84C;
  --gold-light:  #E2C579;
  --gold-pale:   #F7F0DC;
  --paper:       #FCFBF8;   /* warm off-white, softer than pure white */
  --paper-deep:  #F4F2EC;
  --ink:         #16182C;
  --ink-soft:    #55596B;
  --hair:        #E2DFD5;   /* hairline rule on light backgrounds */
  --hair-dark:   rgba(201,168,76,0.22);

  --nav-h: 76px;
  --wrap: 1120px;
  --pad: 6vw;


  /* ── TYPE SCALE (1.25 ratio). Use these, never ad-hoc px values. ──
     Mirrored in document-theme.css for proposals and fund comparisons. */
  --t-display: clamp(2.6rem, 5.2vw, 4.4rem);   /* hero h1 */
  --t-h1:      clamp(2.1rem, 4vw, 3.1rem);     /* page h1 */
  --t-h2:      clamp(1.75rem, 3vw, 2.5rem);    /* section title */
  --t-h3:      1.45rem;                        /* card / item title */
  --t-h4:      1.15rem;                        /* sub-heading */
  --t-lead:    1.09rem;                        /* section lede */
  --t-body:    1rem;                           /* body copy */
  --t-small:   0.925rem;                       /* secondary copy */
  --t-micro:   0.78rem;                        /* captions, legal */
  --t-label:   0.66rem;                        /* letterspaced eyebrows */

  /* ── WEIGHTS ── */
  --w-light: 300; --w-book: 350; --w-regular: 400; --w-medium: 500; --w-semi: 600;

  /* ── SPACING SCALE (8px base) ── */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem; --s6: 4rem; --s7: 5.5rem; --s8: 7rem;

  /* ── ICONS ── */
  --ic-sm: 18px; --ic-md: 26px; --ic-lg: 34px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  font-size: 16.5px;
  font-weight: 350;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--gold-pale); color: var(--navy-deep); }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; width: 100%; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--gold); color: var(--navy-deep); padding: 10px 18px; font-size: 14px; }
.skip:focus { left: 12px; top: 12px; }

/* Micro-label used above every section heading. Letterspaced, hairline-led. */
.eyebrow {
  font-size: var(--t-label); letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); font-weight: var(--w-semi); margin-bottom: var(--s3);
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--gold); flex: none; opacity: .8; }
.eyebrow.centered { justify-content: center; }

/* ── NAV ─────────────────────────────────────────────────────────────── */
nav.site {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(15,22,51,.96);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hair-dark);
  padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--nav-h);
}
.nav-brand { text-decoration: none; display: block; padding: 12px 0; }
.nav-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 25px; font-weight: 500; color: #fff;
  letter-spacing: .05em; line-height: 1.05;
}
.nav-logo span { color: var(--gold); }
/* AMFI-mandated tagline. Must stay legible — do not shrink below 12px. */
/* AMFI requires this tagline beside or below the business name at a minimum
   of 12px in every form of communication. It must stay. Kept deliberately
   quiet so the wordmark reads as the logo. */
.nav-tag { font-size: 12px; line-height: 1.3; color: rgba(255,255,255,.38); letter-spacing: .05em;
           margin-top: 4px; font-weight: 300; }
.nav-brand:hover .nav-tag { color: rgba(255,255,255,.55); }

.nav-links { display: flex; gap: 30px; list-style: none; align-items: center; }
/* All top-level links share the same display type so they sit on one line.
   (A previous version set the dropdown link to flex and the rest to inline,
   which pushed "Services" out of alignment with its siblings.) */
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,.72); text-decoration: none; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap; padding: 4px 0; position: relative;
  transition: color .25s var(--ease);
}
.nav-links > li > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links > li > a:hover { color: var(--gold); }
.nav-links > li > a:hover::after,
.nav-links > li > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links > li > a[aria-current="page"] { color: var(--gold); }
.nav-caret { font-size: 9px; opacity: .7; transition: transform .25s var(--ease); }
.nav-dropdown:hover .nav-caret { transform: translateY(2px); }

.nav-dropdown { position: relative; }
/* Invisible bridge across the gap between the link and the menu. Without it
   the cursor leaves :hover on the way down and the menu snaps shut. */
.nav-dropdown::after {
  content: ''; position: absolute; top: 100%; left: -14px; right: -14px; height: 22px;
}
.dropdown-menu {
  display: none; position: absolute; top: calc(100% + 18px); left: -20px;
  background: rgba(15,22,51,.99); border: 1px solid var(--hair-dark);
  list-style: none; padding: 10px 0; min-width: 268px;
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.6);
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block; padding: 11px 24px; font-size: 13.5px; text-transform: none;
  letter-spacing: .01em; color: rgba(255,255,255,.68); text-decoration: none;
  border-left: 1px solid transparent; transition: all .22s var(--ease);
}
.dropdown-menu a:hover { color: var(--gold); border-left-color: var(--gold); background: rgba(201,168,76,.06); }

.nav-actions { display: flex; gap: 12px; align-items: center; }
/* Buttons exist twice: header bar (desktop) and inside the menu (mobile).
   Only one set is ever visible. */
.nav-links .nav-actions { display: none; }
.btn-nav, .btn-nav-outline {
  padding: 10px 20px; font-size: 11px; font-weight: 500; text-decoration: none;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  border: 1px solid transparent; font-family: inherit; white-space: nowrap;
  transition: all .25s var(--ease);
}
.btn-nav { background: var(--gold); color: var(--navy-deep); }
.btn-nav:hover { background: var(--gold-light); }
.btn-nav-outline { border-color: rgba(201,168,76,.45); color: var(--gold); background: transparent; }
.btn-nav-outline:hover { background: rgba(201,168,76,.1); border-color: var(--gold); }

.hamburger { display: none; background: none; border: none; cursor: pointer; width: 42px; height: 42px; padding: 9px; }
.hamburger span { display: block; height: 1.5px; background: var(--gold); margin: 6px 0; transition: .28s var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn-primary, .btn-ghost {
  display: inline-block; padding: 17px 38px; font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; border: 1px solid transparent; font-family: inherit;
  transition: all .3s var(--ease);
}
.btn-primary { background: var(--gold); color: var(--navy-deep); }
.btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-ghost { border-color: rgba(255,255,255,.28); color: #fff; background: transparent; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-ghost.on-light { border-color: rgba(22,24,44,.25); color: var(--ink); }
.btn-ghost.on-light:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ── SECTIONS ────────────────────────────────────────────────────────── */
section { padding: 112px var(--pad); }
.bg-paper { background: var(--paper-deep); }
.bg-navy { background: var(--navy-deep); color: rgba(255,255,255,.82); }
.bg-navy p { color: rgba(255,255,255,.68); }

h2.section-title { font-size: var(--t-h2); margin-bottom: var(--s3); }
h2.section-title em { font-style: italic; color: var(--gold); }
.bg-navy h2.section-title { color: #fff; }
.section-lede { color: var(--ink-soft); max-width: 62ch; font-size: var(--t-lead); margin-bottom: 0; font-weight: var(--w-book); }
.bg-navy .section-lede { color: rgba(255,255,255,.66); }
.section-head { margin-bottom: 64px; }
.centered { text-align: center; }
.centered .section-lede { margin-inline: auto; }

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero {
  background: var(--navy-deep); color: #fff;
  padding: calc(var(--nav-h) + 104px) var(--pad) 104px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -30%; right: -14%; width: 68vw; height: 140%;
  background: radial-gradient(ellipse at center, rgba(201,168,76,.09) 0%, transparent 68%);
  pointer-events: none;
}
/* Faint vertical hairline echoing the ledger rules further down the page */
.hero::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--pad) - 1px);
  width: 1px; background: linear-gradient(180deg, transparent, rgba(201,168,76,.18) 30%, transparent);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: var(--t-display); color: #fff; line-height: 1.05; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero p.hero-lede {
  font-size: var(--t-lead); color: rgba(255,255,255,.7);
  max-width: 640px; margin: 30px 0 44px; font-weight: 300; line-height: 1.72;
}
/* No button row beneath it? Then it needs no trailing margin. */
.hero p.hero-lede:last-child { margin-bottom: 0; }
/* And the hero itself can close up. */
.hero:has(p.hero-lede:last-child) { padding-bottom: 44px; }
@supports not (selector(:has(*))) { .hero p.hero-lede:last-child { margin-bottom: 0; } }

/* trust strip — hairline separated, not boxed */
.trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--navy-deep); border-top: 1px solid var(--hair-dark);
  padding: 0 var(--pad);
}
.trust-item { padding: 40px 34px 40px 0; border-right: 1px solid var(--hair-dark); }
.trust-item:last-child { border-right: none; }
.trust-item:not(:first-child) { padding-left: 34px; }
.trust-item strong {
  display: block; color: var(--gold); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 12px; font-weight: 600;
}
.trust-item span { font-size: 14.5px; color: rgba(255,255,255,.62); line-height: 1.65; }

/* ── LEDGER (replaces the boxed card grid) ───────────────────────────── */
.ledger { border-top: 1px solid var(--hair); }
.bg-navy .ledger, .ledger.on-navy { border-top-color: var(--hair-dark); }
.ledger-item {
  display: grid; grid-template-columns: 72px minmax(200px, 1fr) 1.5fr;
  gap: 34px; padding: 38px 0; border-bottom: 1px solid var(--hair);
  align-items: start; transition: background .3s var(--ease);
}
.bg-navy .ledger-item, .ledger.on-navy .ledger-item { border-bottom-color: var(--hair-dark); }
.ledger-item:hover { background: rgba(201,168,76,.035); }
.ledger-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px; color: var(--gold); line-height: 1; padding-top: 4px;
}
.ledger-item h3 { font-size: var(--t-h3); line-height: 1.25; }
.ledger-item h3 a { text-decoration: none; transition: color .25s var(--ease); }
.ledger-item h3 a:hover { color: var(--gold); }
.ledger-item p { color: var(--ink-soft); font-size: 15.5px; }
.bg-navy .ledger-item p { color: rgba(255,255,255,.62); }
.bg-navy .ledger-item h3 { color: #fff; }

/* ── HAIRLINE LIST (replaces checkmark circles) ──────────────────────── */
.rule-list { list-style: none; display: grid; }
.rule-list li { padding: 22px 0; border-bottom: 1px solid var(--hair); }
.rule-list li:first-child { border-top: 1px solid var(--hair); }
.bg-navy .rule-list li { border-color: var(--hair-dark); }
.rule-list strong {
  display: block; font-weight: 500; font-size: 16px; margin-bottom: 5px;
  position: relative; padding-left: 26px; letter-spacing: -0.005em;
}
/* A short gold rule in place of a tick — quieter, and reads as a ledger entry */
.rule-list strong::before {
  content: ''; position: absolute; left: 0; top: .72em; width: 14px; height: 1px; background: var(--gold);
}
.rule-list span { display: block; color: var(--ink-soft); font-size: 15px; padding-left: 26px; }
.bg-navy .rule-list strong { color: #fff; }
.bg-navy .rule-list span { color: rgba(255,255,255,.62); }

/* ── SPLIT ───────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 88px; align-items: start; }
.split.narrow { grid-template-columns: 1fr 1fr; gap: 72px; }

/* ── PROCESS STEPS ───────────────────────────────────────────────────── */
.steps { border-top: 1px solid var(--hair); }
.step { display: grid; grid-template-columns: 96px 1fr; gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--hair); }
.step-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 40px; color: var(--gold); line-height: .9; }
.step h3 { font-size: var(--t-h3); margin-bottom: var(--s1); }
.step p { color: var(--ink-soft); font-size: 15.5px; }

/* aside panel used on the process page */
.panel { background: var(--navy-deep); color: rgba(255,255,255,.75); padding: 40px 36px; }
.panel .panel-label {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; display: block; margin-bottom: 8px;
}
.panel .rule-list li { border-color: rgba(255,255,255,.1); padding: 16px 0; }
.panel .rule-list li:first-child { border-top-color: rgba(255,255,255,.1); }
.panel .rule-list strong { color: rgba(255,255,255,.88); font-size: 15px; font-weight: 400; }

/* ── FLOW ────────────────────────────────────────────────────────────── */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair-dark); }
.flow-node { padding: 34px 28px 34px 0; border-right: 1px solid var(--hair-dark); }
.flow-node:last-child { border-right: none; }
.flow-node:not(:first-child) { padding-left: 28px; }
.flow-node b {
  display: block; color: var(--gold); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 10px; font-weight: 600;
}
.flow-node .flow-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: #fff; display: block; margin-bottom: 8px; }
.flow-node .flow-desc { font-size: 14px; color: rgba(255,255,255,.58); display: block; }

/* ── CTA BAND ────────────────────────────────────────────────────────── */
.cta-band { background: var(--navy-deep); color: #fff; text-align: center; padding: 116px var(--pad); position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(201,168,76,.1), transparent 60%);
}
.cta-band .wrap { position: relative; }
.cta-band h2 { font-size: var(--t-h2); color: #fff; margin-bottom: var(--s3); }
.cta-band h2 em { font-style: italic; color: var(--gold); }
.cta-band p { color: rgba(255,255,255,.66); max-width: 540px; margin: 0 auto 40px; font-size: 17px; }
.cta-band .btn-row { justify-content: center; }

/* ── PROSE / LEGAL ───────────────────────────────────────────────────── */
.prose { max-width: 760px; }
.prose h2 { font-size: var(--t-h3); margin: 52px 0 14px; }
.prose h2:first-of-type { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); font-size: 16px; margin-bottom: 14px; }
.prose ul { padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose .updated {
  font-size: 10.5px; color: var(--ink-soft); letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: 30px; border-bottom: 1px solid var(--hair); margin-bottom: 46px;
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer; list-style: none; padding: 26px 44px 26px 0; position: relative;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--t-h3); line-height: 1.3;
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 24px;
  font-family: 'Inter', sans-serif; font-size: 22px; color: var(--gold);
  font-weight: 300; transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--gold); }
.faq .faq-body { padding: 0 60px 28px 0; color: var(--ink-soft); font-size: 15.5px; }
.bg-navy .faq, .bg-navy .faq details { border-color: var(--hair-dark); }
.bg-navy .faq summary { color: #fff; }
.bg-navy .faq .faq-body { color: rgba(255,255,255,.64); }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
footer.site { background: var(--navy-deep); color: rgba(255,255,255,.6); padding: 88px var(--pad) 38px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 52px; }
.footer-brand .nav-logo { font-size: 29px; }
.footer-brand .nav-tag { margin-bottom: 24px; }
.footer-contact { font-size: 14.5px; line-height: 2.1; }
.footer-contact a { color: rgba(255,255,255,.66); text-decoration: none; transition: color .25s var(--ease); }
.footer-contact a:hover { color: var(--gold); }
.footer-col h4 {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 20px; font-family: 'Inter', sans-serif; font-weight: 600;
}
.footer-col ul { list-style: none; display: grid; gap: 12px; }
.footer-col a { font-size: 14.5px; color: rgba(255,255,255,.6); text-decoration: none; transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--gold); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 64px; padding-top: 32px; }
.footer-legal p { font-size: 12.5px; line-height: 1.8; color: rgba(255,255,255,.42); margin-bottom: 12px; max-width: 980px; }
.footer-legal strong { color: rgba(255,255,255,.66); font-weight: 500; }
.footer-legal a { color: rgba(255,255,255,.55); }

/* ── MODAL ───────────────────────────────────────────────────────────── */
.modal { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(15,22,51,.9); padding: 20px; overflow-y: auto; }
.modal.open { display: flex; align-items: center; justify-content: center; }
.modal-box { background: var(--paper); max-width: 500px; width: 100%; padding: 52px 46px; position: relative; border-top: 2px solid var(--gold); }
.modal-box h3 { font-size: var(--t-h3); margin-bottom: 8px; }
.modal-box > p { color: var(--ink-soft); font-size: 15px; margin-bottom: 30px; }
.modal-close { position: absolute; top: 16px; right: 18px; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; font-weight: 600; }
.field input, .field textarea {
  width: 100%; padding: 13px 0; border: none; border-bottom: 1px solid var(--hair);
  font-family: inherit; font-size: 16px; background: transparent; color: var(--ink);
  transition: border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field textarea { min-height: 76px; resize: vertical; }
.modal .btn-primary { width: 100%; text-align: center; margin-top: 10px; }
.modal-note { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin-top: 16px; }

/* ── SCROLL REVEAL ───────────────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ══ RESPONSIVE ═══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  :root { --pad: 5vw; }
  section { padding-block: 88px; }
  .split, .split.narrow { gap: 52px; }
  .nav-links { gap: 20px; }
  .nav-links > li > a { font-size: 11px; letter-spacing: .08em; }
  .btn-nav, .btn-nav-outline { padding: 9px 15px; font-size: 10.5px; letter-spacing: .1em; }
  .ledger-item { grid-template-columns: 56px minmax(170px, 1fr) 1.3fr; gap: 24px; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow-node:nth-child(2) { border-right: none; }
  .flow-node:nth-child(3), .flow-node:nth-child(4) { border-top: 1px solid var(--hair-dark); }
}

@media (max-width: 900px) {
  nav.site { padding: 0 26px; }
  .hamburger { display: block; order: 3; }
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: rgba(15,22,51,.99); flex-direction: column; align-items: stretch;
    gap: 0; padding: 10px 0 24px; border-bottom: 1px solid var(--hair-dark);
    max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links > li > a { padding: 15px 26px; display: flex; justify-content: space-between; font-size: 12.5px; }
  .nav-links > li > a::after { display: none; }
  .nav-dropdown::after { display: none; }
  .nav-dropdown .dropdown-menu {
    position: static; display: none; border: none; box-shadow: none;
    background: rgba(0,0,0,.24); min-width: 0; padding: 6px 0 12px;
  }
  .nav-dropdown.open .dropdown-menu,
  .nav-dropdown.open:hover .dropdown-menu { display: block; }
  .nav-dropdown:hover .dropdown-menu { display: none; }
  .dropdown-menu a { padding-left: 44px; }
  .nav-actions { margin: 18px 26px 0; }
  .nav-actions .btn-nav, .nav-actions .btn-nav-outline { flex: 1; text-align: center; padding: 13px 10px; font-size: 11px; }
  nav.site > .nav-actions { display: none; }
  .nav-links .nav-actions { display: flex; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(3), .trust-item:nth-child(4) { border-top: 1px solid var(--hair-dark); }
}

@media (max-width: 760px) {
  :root { --pad: 24px; }
  section { padding-block: 68px; }
  .section-head { margin-bottom: 42px; }
  .split, .split.narrow { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-top: calc(var(--nav-h) + 62px); padding-bottom: 62px; }
  .ledger-item { grid-template-columns: 40px 1fr; gap: 8px 18px; padding: 30px 0; }
  .ledger-item p { grid-column: 2; }
  .ledger-num { font-size: 18px; }
  .ledger-item h3 { font-size: 22px; }
  .step { grid-template-columns: 58px 1fr; gap: 16px; padding: 32px 0; }
  .step-num { font-size: 30px; }
  .flow { grid-template-columns: 1fr; }
  .flow-node { border-right: none; border-top: 1px solid var(--hair-dark); padding: 26px 0; }
  .flow-node:first-child { border-top: none; }
  .flow-node:not(:first-child) { padding-left: 0; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .faq summary { font-size: 20px; padding-right: 36px; }
  .faq .faq-body { padding-right: 20px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-item { border-right: none; border-top: 1px solid var(--hair-dark); padding: 28px 0; }
  .trust-item:first-child { border-top: none; }
  .trust-item:not(:first-child) { padding-left: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn-primary, .btn-row .btn-ghost { width: 100%; text-align: center; }
  .modal-box { padding: 40px 26px; }
  .nav-logo { font-size: 22px; }
  .panel { padding: 32px 26px; }
}

@media print {
  nav.site, .modal, .cta-band, .hero::before, .hero::after { display: none; }
  body { color: #000; background: #fff; }
  .reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ICONS & GRAPHICS
   ══════════════════════════════════════════════════════════════════════ */

.ic { width: var(--ic-md); height: var(--ic-md); flex: none; display: block; }
.ic-sm { width: var(--ic-sm); height: var(--ic-sm); }
.ic-lg { width: var(--ic-lg); height: var(--ic-lg); }

/* Icon in a hairline lozenge — the recurring graphic motif */
.ic-frame {
  width: 60px; height: 60px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--hair); color: var(--gold); position: relative;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.ic-frame::after {
  content: ''; position: absolute; inset: 5px; border: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.bg-navy .ic-frame, .ic-frame.on-navy { border-color: var(--hair-dark); }

/* ── FEATURE CARDS (icon + title + copy) ─────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
/* Safeguards for card counts that don't divide by three. With 9 cards neither
   rule fires; they exist so adding a 10th service doesn't break the layout. */
.cards > article:last-child:nth-child(3n - 1) { grid-column: 2 / 4; }
.cards > article:nth-last-child(2):nth-child(3n + 1) { grid-column: 1 / 3; }
.card {
  background: var(--paper); padding: var(--s5) var(--s4);
  transition: background .35s var(--ease); position: relative;
}
.card:hover { background: #fff; }
.card:hover .ic-frame { border-color: var(--gold); background: rgba(201,168,76,.05); }
.card:hover .ic-frame::after { border-color: rgba(201,168,76,.35); }
.card .ic-frame { margin-bottom: var(--s3); }
.card h3 { font-size: var(--t-h3); margin-bottom: var(--s1); }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--gold); }
.card p { color: var(--ink-soft); font-size: var(--t-small); }
.card .card-index {
  position: absolute; top: var(--s4); right: var(--s4);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem;
  color: var(--gold); opacity: .55; letter-spacing: .1em;
}
.bg-navy .cards { background: var(--hair-dark); border-color: var(--hair-dark); }
.bg-navy .card { background: var(--navy-deep); }
.bg-navy .card:hover { background: #141C40; }
.bg-navy .card h3 { color: #fff; }
.bg-navy .card p { color: rgba(255,255,255,.62); }

/* ── TRUST BADGES ────────────────────────────────────────────────────── */
/* Hero and badge strip are both navy, so a hairline marks the change of
   register rather than leaving a large ambiguous gap. */
.badge-band { border-top: 1px solid var(--hair-dark); }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.badge-item { display: flex; gap: var(--s2); align-items: flex-start; }
.badge-item .ic { color: var(--gold); margin-top: 2px; }
.badge-item strong { display: block; font-size: var(--t-body); font-weight: var(--w-medium); margin-bottom: 3px; }
.badge-item span { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.6; }
.bg-navy .badge-item strong { color: #fff; }
.bg-navy .badge-item span { color: rgba(255,255,255,.6); }

/* ── HERO GRAPHIC ────────────────────────────────────────────────────── */
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s6); align-items: center; }
.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; display: block; max-height: 340px; }
.hero-art .arc { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .5; }
.hero-art .bar { fill: rgba(201,168,76,.14); stroke: rgba(201,168,76,.45); stroke-width: .8; }
.hero-art .bar-hi { fill: rgba(201,168,76,.32); stroke: var(--gold); }
.hero-art .grid-line { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.hero-art .dot { fill: var(--gold); }
.hero-art .lbl { fill: rgba(255,255,255,.5); font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }

/* Subtle repeating hairline texture for paper sections */
.bg-paper {
  background-color: var(--paper-deep);
  background-image: linear-gradient(rgba(201,168,76,.045) 1px, transparent 1px);
  background-size: 100% 34px;
}

/* ── STEP ICONS ──────────────────────────────────────────────────────── */
.step-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); }
.step-head .ic { color: var(--gold); }

/* ── PULL QUOTE / STATEMENT BAND ─────────────────────────────────────── */
.statement { text-align: center; max-width: 62ch; margin: 0 auto; }
.statement p {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--t-h2);
  line-height: 1.28; color: var(--ink); font-style: italic;
}
.bg-navy .statement p { color: rgba(255,255,255,.9); }
.statement .attrib {
  font-family: 'Inter', sans-serif; font-style: normal; font-size: var(--t-label);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  margin-top: var(--s3); display: block;
}

/* ── COUNTRY CHIPS (NRI page) ────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s3); }
.chip {
  border: 1px solid var(--hair-dark); padding: 9px 16px; font-size: var(--t-small);
  color: rgba(255,255,255,.72); display: inline-flex; align-items: center; gap: 8px;
}
.chip.warn { border-color: rgba(201,168,76,.5); color: var(--gold); }

/* ── DEFINITION LIST (glossary) ──────────────────────────────────────── */
.glossary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.gloss-item { background: var(--paper); padding: var(--s3) var(--s4); }
.gloss-item dt { font-weight: var(--w-medium); font-size: var(--t-body); margin-bottom: 4px; }
.gloss-item dd { color: var(--ink-soft); font-size: var(--t-small); }

/* ── FOOTER MICRO NAV ────────────────────────────────────────────────── */
.footer-resources { border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--s4); padding-top: var(--s3); }
.footer-resources h4 { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-family: 'Inter',sans-serif; font-weight: var(--w-semi); margin-bottom: 12px; }
.footer-resources ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-resources a { font-size: var(--t-micro); color: rgba(255,255,255,.5); text-decoration: none; }
.footer-resources a:hover { color: var(--gold); }

@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  /* An odd number of cards leaves one alone on the last row at two columns.
     Let it span the full width instead of sitting beside a hole. */
  .cards > article:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .badges { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .hero-art { max-width: 460px; }
}
@media (max-width: 760px) {
  .cards, .glossary { grid-template-columns: 1fr; }
  .badges { grid-template-columns: 1fr; }
  .ic-frame { width: 52px; height: 52px; }
  .statement p { font-size: var(--t-h3); }
  .hero-art { display: none; }   /* keep the phone hero tight and fast */
}

/* Active page inside the Services dropdown */
.dropdown-menu a.is-current {
  color: var(--gold); border-left-color: var(--gold); background: rgba(201,168,76,.08);
}
.nav-links > li > a.is-parent { color: var(--gold); }
.nav-links > li > a.is-parent::after { transform: scaleX(1); }
@media (max-width: 900px) { .dropdown-menu a.is-current { background: rgba(201,168,76,.12); } }

/* ── MONEY FLOW (illustrated, replaces the plain grid) ───────────────── */
.moneyflow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; gap: 0; }
.mf-node { text-align: center; padding: 0 var(--s2); }
.mf-node .ic-frame { margin: 0 auto var(--s2); border-color: var(--hair-dark); background: rgba(201,168,76,.04); }
.mf-node b {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--t-h3);
  font-weight: 400; color: #fff; margin-bottom: 6px;
}
.mf-node span { font-size: var(--t-small); color: rgba(255,255,255,.55); line-height: 1.55; display: block; }
.mf-link { display: flex; align-items: center; gap: 6px; color: var(--gold); padding-top: 28px; }
.mf-link span { width: 26px; height: 1px; background: linear-gradient(90deg, rgba(201,168,76,.15), var(--gold)); display: block; }
/* the arrow drifts forward on hover of the whole diagram */
.moneyflow:hover .mf-link .ic { transform: translateX(3px); }
.mf-link .ic { transition: transform .4s var(--ease); }
.mf-node:hover .ic-frame { border-color: var(--gold); background: rgba(201,168,76,.1); }
.mf-note {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--hair-dark);
  font-size: var(--t-small); color: rgba(255,255,255,.6); text-align: center;
}
.mf-note .ic { color: var(--gold); }

@media (max-width: 1024px) {
  .moneyflow { grid-template-columns: 1fr auto 1fr; row-gap: var(--s4); }
  .mf-link:nth-of-type(4) { display: none; }
  .mf-link { padding-top: 22px; }
}
@media (max-width: 620px) {
  .moneyflow { grid-template-columns: 1fr; }
  .mf-link { display: none; }
  .mf-node { display: flex; align-items: center; gap: var(--s2); text-align: left; padding: var(--s2) 0; border-bottom: 1px solid var(--hair-dark); }
  .mf-node .ic-frame { margin: 0; width: 48px; height: 48px; }
  .mf-node b { font-size: var(--t-h4); margin-bottom: 2px; }
}

/* Whole card clickable. The overlay covers the card; the inner span is the
   accessible link text, hidden visually but read by screen readers. */
.card-link { position: relative; }
.card-hit { position: absolute; inset: 0; z-index: 2; }
.card-hit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.card-link:hover { background: #fff; }
.card-link:hover h3 { color: var(--gold); }
.card-link:focus-within { outline: 1.5px solid var(--gold); outline-offset: -2px; }
.card-link h3 { transition: color .25s var(--ease); }
.card-link::after {
  content: ''; position: absolute; right: var(--s4); bottom: var(--s4);
  width: 18px; height: 1px; background: var(--gold); opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card-link:hover::after { opacity: 1; transform: translateX(5px); }
.bg-navy .card-link:hover { background: #141C40; }