/* ==========================================================================
   SANDEEP SOUZA — AMFI Registered Mutual Fund Distributor
   Stylesheet  ·  Part 1 of 3: tokens, base, layout, header, hero
   --------------------------------------------------------------------------
   Palette:  white canvas · navy structure · gold accent (used sparingly)
   Type:     Fraunces (display serif) + Manrope (UI sans)
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
  /* Navy */
  --navy-950:#03101F;
  --navy-900:#061B33;
  --navy-800:#0A2540;
  --navy-700:#123A63;
  --navy-600:#1B4E85;
  --navy-500:#2A6AAF;

  /* Gold — accent only. Never a large fill. */
  --gold-700:#8C6F13;
  --gold-600:#A8871B;
  --gold-500:#C9A227;
  --gold-400:#DCBB55;
  --gold-300:#E8CE7E;
  --gold-200:#F0DFA6;
  --gold-50:#FBF6E7;

  /* Neutrals */
  --white:#FFFFFF;
  --paper:#F6F8FB;
  --paper-2:#EEF2F7;
  --line:#E4EAF1;
  --line-strong:#D2DBE6;
  --ink:#0B1B2B;
  --muted:#5B6B7C;
  --muted-2:#7C8B9B;

  /* Support */
  --green:#1FA855;
  --wa:#25D366;
  --amber:#B7791F;
  --amber-bg:#FEF6E7;

  /* Type */
  --f-display:"Fraunces","Georgia","Times New Roman",serif;
  --f-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Space + shape */
  --wrap:1180px;
  --wrap-narrow:860px;
  --gutter:clamp(1.15rem, 4vw, 2.5rem);
  --sec-y:clamp(4rem, 9vw, 7.5rem);
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;

  /* Elevation — soft, navy-tinted, never grey */
  --sh-xs:0 1px 2px rgba(10,37,64,.06);
  --sh-sm:0 2px 8px rgba(10,37,64,.06), 0 1px 2px rgba(10,37,64,.04);
  --sh:0 8px 28px rgba(10,37,64,.08), 0 2px 6px rgba(10,37,64,.04);
  --sh-lg:0 20px 55px rgba(10,37,64,.13), 0 4px 12px rgba(10,37,64,.06);
  --sh-xl:0 34px 80px rgba(6,27,51,.20);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t:.32s var(--ease);

  --header-h:74px;
}

/* --- 2. Reset + base ----------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }

html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 18px);
}

body {
  font-family:var(--f-sans);
  font-size:clamp(1rem,.97rem + .16vw,1.0625rem);
  line-height:1.68;
  font-weight:450;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.is-locked { overflow:hidden; }

img,svg,video { display:block; max-width:100%; }
img { height:auto; }
/* An author img{display:block} rule beats the UA [hidden] rule, which would
   leave the not-yet-supplied portrait showing its alt text. */
[hidden] { display:none !important; }
button,input,textarea,select { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; padding:0; }
strong,b { font-weight:700; }
/* No scroll-margin-top here on purpose. html already sets scroll-padding-top,
   and the two offsets ADD UP — together they dropped every anchor about
   186px down the page, leaving a dead gap under the sticky header.
   One offset, defined once, in scroll-padding-top above. */

/* Focus — visible, on-brand, never removed */
:focus-visible {
  outline:2.5px solid var(--gold-500);
  outline-offset:3px;
  border-radius:3px;
}

::selection { background:var(--gold-200); color:var(--navy-900); }

/* --- 3. Typography ------------------------------------------------------- */
h1,h2,h3,h4 {
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 0,"WONK" 0;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.018em;
  color:var(--navy-900);
  text-wrap:balance;
}
h1 { font-size:clamp(2.35rem,1.55rem + 3.55vw,4.15rem); letter-spacing:-.028em; }
h2 { font-size:clamp(1.95rem,1.42rem + 2.3vw,3rem); letter-spacing:-.024em; }
h3 { font-size:clamp(1.16rem,1.08rem + .35vw,1.35rem); line-height:1.3; letter-spacing:-.012em; }
h4 { font-size:1.02rem; line-height:1.35; }
p { text-wrap:pretty; }

.lead {
  font-size:clamp(1.06rem,1.01rem + .28vw,1.22rem);
  line-height:1.66;
  color:var(--muted);
  font-weight:450;
}

/* Eyebrow — small gold label above section titles */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:800;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold-600);
  margin-bottom:1.05rem;
}
.eyebrow::before {
  content:""; width:26px; height:1.5px; flex:none;
  background:linear-gradient(90deg,var(--gold-500),rgba(201,162,39,.15));
}
.eyebrow--center::after {
  content:""; width:26px; height:1.5px; flex:none;
  background:linear-gradient(270deg,var(--gold-500),rgba(201,162,39,.15));
}

/* --- 4. Layout ----------------------------------------------------------- */
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow { max-width:var(--wrap-narrow); }
.section { padding-block:var(--sec-y); position:relative; }
.section--paper { background:var(--paper); }
.section--tint {
  background:linear-gradient(180deg,var(--white) 0%,var(--paper) 45%,var(--paper) 100%);
}
.section--navy { background:var(--navy-900); color:rgba(255,255,255,.82); }
.section--navy h2,.section--navy h3 { color:var(--white); }

.section__head { max-width:660px; margin-bottom:clamp(2.4rem,4vw,3.6rem); }
.section__head--center { margin-inline:auto; text-align:center; }
.section__head p { margin-top:1.05rem; }

.hairline { height:1px; background:var(--line); border:0; }

/* --- 5. Buttons ---------------------------------------------------------- */
.btn {
  --btn-bg:var(--navy-800);
  --btn-fg:var(--white);
  --btn-bd:var(--navy-800);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.6rem;
  font-size:.925rem; font-weight:700; letter-spacing:.005em;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1.5px solid var(--btn-bd);
  border-radius:var(--r-sm);
  cursor:pointer;
  white-space:nowrap;
  transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
  will-change:transform;
}
.btn svg { width:18px; height:18px; flex:none; }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(10,37,64,.20); }
.btn:active { transform:translateY(0); }

.btn--primary { box-shadow:0 3px 12px rgba(10,37,64,.16); }
.btn--primary:hover { --btn-bg:var(--navy-700); --btn-bd:var(--navy-700); }

.btn--gold {
  --btn-bg:var(--gold-500); --btn-fg:var(--navy-900); --btn-bd:var(--gold-500);
  box-shadow:0 3px 12px rgba(201,162,39,.28);
}
.btn--gold:hover { --btn-bg:var(--gold-400); --btn-bd:var(--gold-400); box-shadow:0 10px 24px rgba(201,162,39,.34); }

.btn--ghost { --btn-bg:transparent; --btn-fg:var(--navy-800); --btn-bd:var(--line-strong); }
.btn--ghost:hover { --btn-bd:var(--navy-800); --btn-bg:var(--white); }

/* WhatsApp: keeps the palette clean, green reserved for the glyph */
.btn--wa { --btn-bg:var(--white); --btn-fg:var(--navy-800); --btn-bd:var(--line-strong); }
.btn--wa:hover { --btn-bd:var(--wa); --btn-fg:var(--navy-900); box-shadow:0 10px 24px rgba(37,211,102,.20); }
.btn--wa svg { color:var(--wa); }

.btn--onnavy { --btn-bg:transparent; --btn-fg:var(--white); --btn-bd:rgba(255,255,255,.32); }
.btn--onnavy:hover { --btn-bd:var(--gold-500); --btn-bg:rgba(201,162,39,.12); }

.btn--sm { padding:.68rem 1.15rem; font-size:.85rem; }
.btn--block { width:100%; }

/* Quiet text link with animated arrow */
.tlink {
  display:inline-flex; align-items:center; gap:.42rem;
  font-size:.875rem; font-weight:700; color:var(--navy-700);
  transition:color var(--t), gap var(--t);
}
.tlink svg { width:15px; height:15px; transition:transform var(--t); }
.tlink:hover { color:var(--gold-600); gap:.62rem; }
.tlink:hover svg { transform:translateX(2px); }

/* --- 6. Badges ----------------------------------------------------------- */
.badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .82rem;
  font-size:.755rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase;
  border-radius:100px;
  background:var(--gold-50);
  color:var(--gold-700);
  border:1px solid rgba(201,162,39,.28);
}
.badge svg { width:14px; height:14px; }
.badge--navy { background:rgba(255,255,255,.07); color:var(--gold-200); border-color:rgba(201,162,39,.3); }
.badge--warn { background:var(--amber-bg); color:var(--amber); border-color:rgba(183,121,31,.28); }

/* --- 7. Top bar ---------------------------------------------------------- */
.topbar {
  background:var(--navy-900);
  color:rgba(255,255,255,.72);
  font-size:.795rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar__in {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:40px; padding-block:.35rem;
}
.topbar__l,.topbar__r { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.topbar a { display:inline-flex; align-items:center; gap:.44rem; transition:color var(--t); }
.topbar a:hover { color:var(--gold-400); }
.topbar svg { width:14px; height:14px; color:var(--gold-500); flex:none; }
.topbar__arn { color:var(--gold-200); font-weight:700; letter-spacing:.04em; }
@media (max-width:860px) { .topbar { display:none; } }

/* --- 8. Header ----------------------------------------------------------- */
.header {
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--t), border-color var(--t), background var(--t);
}
.header.is-stuck {
  background:rgba(255,255,255,.96);
  border-bottom-color:var(--line);
  box-shadow:0 4px 22px rgba(10,37,64,.07);
}
.header__in {
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  min-height:var(--header-h);
}

/* Brand */
.brand { display:flex; align-items:center; gap:.72rem; flex:none; }
.brand__mark {
  position:relative;
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  border-radius:10px;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
  color:var(--gold-400);
  font-family:var(--f-display);
  font-size:1.06rem; font-weight:600; letter-spacing:.01em;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.34), var(--sh-sm);
}
.brand__mark::after {
  content:""; position:absolute; inset:4px;
  border:1px solid rgba(201,162,39,.2); border-radius:6px; pointer-events:none;
}
.brand__name {
  font-family:var(--f-display); font-size:1.09rem; font-weight:600;
  letter-spacing:-.015em; color:var(--navy-900); line-height:1.15;
  display:block;
}
.brand__role {
  display:block; font-size:.665rem; font-weight:700;
  letter-spacing:.115em; text-transform:uppercase; color:var(--muted-2);
  margin-top:.16rem;
}
@media (max-width:420px){ .brand__role { display:none; } }

/* Desktop nav */
.nav { display:flex; align-items:center; gap:.15rem; }
.nav a {
  position:relative;
  white-space:nowrap;
  padding:.55rem .74rem;
  font-size:.885rem; font-weight:600; color:var(--navy-800);
  border-radius:6px;
  transition:color var(--t), background var(--t);
}
.nav a::after {
  content:""; position:absolute; left:.74rem; right:.74rem; bottom:.28rem;
  height:1.5px; background:var(--gold-500);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t);
}
.nav a:hover { color:var(--navy-900); }
.nav a:hover::after,
.nav a.is-active::after { transform:scaleX(1); }
.nav a.is-active { color:var(--navy-900); }

.header__cta { display:flex; align-items:center; gap:.6rem; flex:none; }

@media (max-width:1240px) { .header__cta .btn--ghost { display:none; } }
/* Below this the header CTA competes with the brand for width; the drawer,
   the hero buttons and the floating actions all still offer the same call. */
@media (max-width:760px)  { .header__cta .btn--primary { display:none; } }
@media (max-width:1050px) { .nav { display:none; } }

/* Burger */
.burger {
  display:none;
  width:44px; height:44px; flex:none;
  border:1.5px solid var(--line-strong); border-radius:var(--r-sm);
  place-items:center;
  transition:border-color var(--t), background var(--t);
}
.burger:hover { border-color:var(--navy-800); }
.burger span {
  display:block; width:19px; height:1.8px; background:var(--navy-800);
  border-radius:2px; transition:transform .34s var(--ease), opacity .2s;
}
.burger span + span { margin-top:4.5px; }
.burger.is-open span:nth-child(1) { transform:translateY(6.3px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity:0; }
.burger.is-open span:nth-child(3) { transform:translateY(-6.3px) rotate(-45deg); }
@media (max-width:1050px) { .burger { display:grid; } }

/* Mobile drawer */
.drawer {
  position:fixed; inset:0; z-index:950;
  visibility:hidden; pointer-events:none;
  overflow:hidden; /* the off-canvas panel sits outside the viewport until opened */
}
.drawer.is-open { visibility:visible; pointer-events:auto; }
.drawer__scrim {
  position:absolute; inset:0;
  background:rgba(6,27,51,.5);
  opacity:0; transition:opacity .34s var(--ease);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.drawer.is-open .drawer__scrim { opacity:1; }
.drawer__panel {
  position:absolute; top:0; right:0; bottom:0;
  width:min(360px,88vw);
  background:var(--white);
  box-shadow:var(--sh-xl);
  transform:translateX(100%);
  transition:transform .38s var(--ease-out);
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
}
.drawer.is-open .drawer__panel { transform:translateX(0); }
.drawer__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--gutter); border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--white); z-index:2;
}
.drawer__close {
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:var(--r-sm); border:1.5px solid var(--line-strong);
  color:var(--navy-800); transition:border-color var(--t);
}
.drawer__close:hover { border-color:var(--navy-800); }
.drawer__close svg { width:18px; height:18px; }
.drawer__nav { padding:.6rem var(--gutter) 1rem; }
.drawer__nav a {
  display:flex; align-items:center; justify-content:space-between;
  padding:.92rem 0; font-size:1.02rem; font-weight:600; color:var(--navy-900);
  border-bottom:1px solid var(--line);
  transition:color var(--t), padding-left var(--t);
}
.drawer__nav a svg { width:15px; height:15px; color:var(--gold-500); opacity:0; transition:opacity var(--t), transform var(--t); transform:translateX(-4px); }
.drawer__nav a:hover { color:var(--gold-700); padding-left:.3rem; }
.drawer__nav a:hover svg { opacity:1; transform:translateX(0); }
.drawer__foot { margin-top:auto; padding:1.25rem var(--gutter) 1.6rem; display:grid; gap:.6rem; background:var(--paper); border-top:1px solid var(--line); }
.drawer__contact { font-size:.85rem; color:var(--muted); display:grid; gap:.4rem; margin-bottom:.4rem; }
.drawer__contact a { display:flex; align-items:center; gap:.5rem; color:var(--navy-800); font-weight:600; }
.drawer__contact svg { width:15px; height:15px; color:var(--gold-500); }

/* --- 9. Hero ------------------------------------------------------------- */
.hero {
  position:relative;
  padding-block:clamp(3rem,6vw,5.5rem) clamp(3.5rem,7vw,6.5rem);
  overflow:hidden;
  background:var(--white);
  isolation:isolate;
}
/* Soft navy bloom, top-right */
.hero::before {
  content:""; position:absolute; z-index:-2;
  top:-32%; right:-14%; width:min(920px,88vw); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(26,78,133,.13),rgba(26,78,133,.045) 42%,transparent 68%);
  pointer-events:none;
}
/* Fine ledger grid */
.hero::after {
  content:""; position:absolute; z-index:-2; inset:0;
  background-image:
    linear-gradient(rgba(10,37,64,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,37,64,.038) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 82% 62% at 62% 32%,#000 12%,transparent 76%);
  mask-image:radial-gradient(ellipse 82% 62% at 62% 32%,#000 12%,transparent 76%);
  pointer-events:none;
}

.hero__grid {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
@media (max-width:960px) {
  .hero__grid { grid-template-columns:1fr; gap:3rem; }
  /* width:100% is load-bearing. In grid, an auto inline margin absorbs the
     free space and overrides justify-self:stretch, so the item falls back to
     its intrinsic width. Every child of the card is absolutely positioned,
     so that intrinsic width is zero and the card collapses. An explicit
     width gives the auto margins something to centre. */
  .hero__media { order:-1; width:100%; max-width:440px; margin-inline:auto; }
}

.hero__badges { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.5rem; }

.hero h1 { margin-bottom:1.3rem; }
/* Gold highlight behind the key phrase.
   Painted as a background rather than an absolutely-positioned ::after so it
   redraws correctly on EVERY line when the phrase wraps on narrow screens —
   an ::after would stretch one bar across both lines and clip the text. */
.hero h1 em {
  font-style:normal;
  color:var(--navy-700);
  background-image:linear-gradient(90deg,rgba(201,162,39,.42),rgba(201,162,39,.20));
  background-repeat:no-repeat;
  background-size:100% .26em;
  background-position:0 86%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hero__sub { max-width:37em; margin-bottom:2rem; }

/* AMFI credential bar — a navy stamp between the intro copy and the CTAs.
   Deliberately darker than the pale badges above it: this is the regulated
   credential, not a decorative tag, and the contrast makes it read that way. */
.hero__arn {
  display:inline-flex; align-items:center; gap:.72rem;
  max-width:100%;
  margin-bottom:1.9rem;
  padding:.6rem 1.1rem .6rem .68rem;
  background:linear-gradient(150deg,var(--navy-800),var(--navy-900));
  border:1px solid rgba(201,162,39,.34);
  border-radius:100px;
  box-shadow:0 10px 26px rgba(6,27,51,.20), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero__arn-ico {
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(201,162,39,.16);
  border:1px solid rgba(201,162,39,.36);
  color:var(--gold-400);
}
.hero__arn-ico svg { width:16px; height:16px; }
.hero__arn-txt {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .62rem;
  min-width:0;
}
.hero__arn-txt strong {
  font-size:.755rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.93); line-height:1.4;
}
.hero__arn-num {
  font-size:.82rem; font-weight:800; letter-spacing:.055em;
  color:var(--gold-300); line-height:1.4;
  font-variant-numeric:tabular-nums;
  padding-left:.62rem;
  border-left:1px solid rgba(201,162,39,.34);
}

/* On a phone the two lines stack, so the pill becomes a rounded plate and the
   divider rule would sit in the wrong place. */
@media (max-width:560px) {
  .hero__arn {
    border-radius:14px;
    align-items:flex-start;
    padding:.7rem .9rem .7rem .7rem;
    margin-bottom:1.6rem;
  }
  .hero__arn-txt { flex-direction:column; gap:.18rem; }
  .hero__arn-num { padding-left:0; border-left:0; }
}

.hero__actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:2.4rem; }

/* Franklin quote */
.quote {
  position:relative;
  padding:1.15rem 0 1.15rem 1.5rem;
  border-left:2.5px solid var(--gold-500);
  max-width:34em;
}
.quote p {
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 20,"WONK" 0;
  font-style:italic;
  font-size:clamp(1.05rem,1rem + .32vw,1.24rem);
  line-height:1.5;
  color:var(--navy-800);
  letter-spacing:-.01em;
}
.quote cite {
  display:block; margin-top:.6rem;
  font-family:var(--f-sans); font-style:normal;
  font-size:.79rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted-2);
}

/* --- 10. Advisor portrait card -------------------------------------------
   A layered composition rather than a flat image box:
     glow  ->  rotating gold ring  ->  card  ->  sheen  ->  spotlight
     ->  name plate  ->  verification seal  ->  trust chip
   Everything is CSS and inline SVG. No images, no libraries.
   All motion is neutralised by the global prefers-reduced-motion block.
   -------------------------------------------------------------------------- */
.hero__media { position:relative; }

.advisor {
  position:relative;
  animation:advisorFloat 7.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes advisorFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-10px); }
}

/* Ambient light pooled behind the card — navy body, warm gold top-right */
.advisor__glow {
  position:absolute; z-index:0;
  inset:-13% -10% -17%;
  background:
    radial-gradient(58% 52% at 50% 56%, rgba(20,62,110,.42), transparent 72%),
    radial-gradient(42% 38% at 76% 12%, rgba(201,162,39,.34), transparent 68%);
  filter:blur(34px);
  opacity:.9;
  transition:opacity .55s var(--ease);
  pointer-events:none;
}
.advisor:hover .advisor__glow { opacity:1; }

/* The frame is a 1.6px border that the gold sweep shines through. The static
   gradient underneath keeps a complete gold edge when motion is switched off. */
.advisor__frame {
  position:relative; z-index:1;
  padding:1.6px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(150deg,
      rgba(201,162,39,.62), rgba(201,162,39,.16) 36%,
      rgba(201,162,39,.08) 60%, rgba(201,162,39,.48));
  box-shadow:0 34px 78px rgba(6,27,51,.30), 0 8px 22px rgba(6,27,51,.15);
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .55s var(--ease-out), box-shadow .5s var(--ease);
}
.advisor.is-tilting .advisor__frame { transition:transform .1s linear, box-shadow .5s var(--ease); }
.advisor:hover .advisor__frame { box-shadow:0 44px 96px rgba(6,27,51,.38), 0 10px 28px rgba(6,27,51,.20); }

/* Oversized square so the conic gradient reaches every corner. Uses the
   independent `rotate` property, which leaves `translate` centring intact. */
.advisor__ring {
  position:absolute; top:50%; left:50%;
  width:190%; aspect-ratio:1;
  translate:-50% -50%;
  background:conic-gradient(from 0deg,
      transparent 0deg, transparent 58deg,
      rgba(220,187,85,.75) 84deg,
      rgba(255,246,219,.98) 102deg,
      rgba(201,162,39,.80) 122deg,
      transparent 168deg, transparent 360deg);
  animation:advisorRing 9s linear infinite;
  pointer-events:none;
}
@keyframes advisorRing { to { rotate:360deg; } }

.advisor__inner {
  position:relative; z-index:1;
  aspect-ratio:4/5;
  border-radius:22.4px;
  overflow:hidden;
  background:linear-gradient(158deg,#0F3157 0%,var(--navy-900) 54%,var(--navy-950) 100%);
  display:grid; place-items:center;
  isolation:isolate;
}
/* Fixed studio light, sitting beneath the moving layers */
.advisor__inner::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(122deg, rgba(255,255,255,.10), transparent 44%),
    radial-gradient(circle at 76% 10%, rgba(201,162,39,.20), transparent 56%);
}
.advisor__img {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
}

/* Slow diagonal glint across the glass */
.advisor__sheen {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(112deg,
      transparent 38%, rgba(255,255,255,.15) 47%,
      rgba(255,255,255,.04) 53%, transparent 61%);
  translate:-125% 0;
  animation:advisorSheen 8s var(--ease) 2s infinite;
}
@keyframes advisorSheen { 0% { translate:-125% 0; } 26%,100% { translate:125% 0; } }

/* Spotlight that tracks the pointer (enabled by main.js on fine pointers) */
.advisor__spot {
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,32%),
      rgba(255,255,255,.14), transparent 62%);
  opacity:0; transition:opacity .45s var(--ease);
}
.advisor.is-tilting .advisor__spot { opacity:1; }

/* Gallery name plate */
.advisor__plate {
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding:2.5rem 1.3rem 1.2rem;
  background:linear-gradient(to top,
      rgba(3,16,31,.95) 14%, rgba(3,16,31,.74) 44%, transparent 100%);
  text-align:left;
}
.advisor__plate::before {
  content:""; display:block;
  width:26px; height:2px; border-radius:2px; margin-bottom:.62rem;
  background:linear-gradient(90deg,var(--gold-400),rgba(201,162,39,.35));
}
.advisor__name {
  display:block;
  font-family:var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(1.1rem,1rem + .48vw,1.32rem); font-weight:600;
  line-height:1.2; letter-spacing:-.015em; color:#fff;
}
.advisor__role {
  display:block; margin-top:.34rem;
  font-size:.645rem; font-weight:800; letter-spacing:.135em; text-transform:uppercase;
  line-height:1.45; color:var(--gold-300);
}
/* Second credential line: present but subordinate to the NJ Wealth Partner line */
.advisor__role--sub {
  margin-top:.16rem;
  font-size:.605rem; font-weight:700; letter-spacing:.115em;
  color:rgba(240,223,166,.68);
}
/* The photograph sits behind the studio-light gradient and the plate scrim */
.advisor__inner:has(.advisor__img) { background:var(--navy-950); }

/* Placeholder state — has to look deliberate, not unfinished */
.advisor__ph {
  position:relative; z-index:2;
  display:grid; place-items:center; gap:.85rem;
  text-align:center;
  /* Reserve room for the plate AND the trust chip that floats above it, so
     the placeholder caption is never sat on at narrower card widths. */
  padding:2rem 1.6rem calc(var(--plate-h, 8.75rem) + 1.6rem);
  color:rgba(255,255,255,.58);
}
.advisor__phring {
  width:clamp(90px,25%,122px); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%;
  border:1.5px dashed rgba(201,162,39,.42);
  background:radial-gradient(circle,rgba(201,162,39,.12),transparent 68%);
}
.advisor__phring svg { width:54%; height:54%; color:rgba(240,223,166,.72); }
.advisor__ph strong {
  display:block; font-size:.78rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-200);
}
.advisor__ph > span:last-child {
  display:block; font-size:.79rem; line-height:1.55; max-width:22em;
  color:rgba(255,255,255,.48);
}

/* Verification seal — lettering rotates slowly around a fixed mark */
.advisor__seal {
  position:absolute; z-index:6;
  top:-20px; right:-20px;
  width:clamp(72px,21%,94px); aspect-ratio:1;
  display:block;
  filter:drop-shadow(0 10px 22px rgba(6,27,51,.38));
}
.advisor__seal svg { width:100%; height:100%; display:block; }
.seal-bg   { fill:var(--navy-900); }
.seal-edge { fill:none; stroke:rgba(201,162,39,.85); stroke-width:1.2; }
.seal-hair { fill:none; stroke:rgba(201,162,39,.22); stroke-width:.6; }
/* Engine-turned ring — the only moving part, so the wordmark stays readable */
.seal-guilloche {
  fill:none; stroke:rgba(220,187,85,.55);
  stroke-width:1.6; stroke-dasharray:1 4.6; stroke-linecap:round;
  transform-box:view-box; transform-origin:50px 50px;
  animation:sealSpin 30s linear infinite;
}
@keyframes sealSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.seal-mark {
  fill:none; stroke:var(--gold-400);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.seal-word {
  font-family:var(--f-sans); font-size:15px; font-weight:800;
  letter-spacing:.04em; fill:var(--gold-300); text-anchor:middle;
}
.seal-sub {
  font-family:var(--f-sans); font-size:6.4px; font-weight:700;
  letter-spacing:.19em; fill:rgba(240,223,166,.72); text-anchor:middle;
}

/* Trust chip, hanging off the lower-left corner. It lives inside .advisor so
   it floats with the card instead of drifting against it. */
/* Hangs off the left edge, parked directly above the name plate. The offset
   is driven by --plate-h, which main.js measures from the plate itself — the
   plate grows when the designation wraps to two lines, so a fixed percentage
   collides at some widths. The fallback keeps it clear if JS never runs. */
.credential {
  position:absolute; z-index:7;
  left:clamp(-2rem,-1.6vw,-1.1rem);
  bottom:calc(var(--plate-h, 8.75rem) + .85rem);
  display:flex; align-items:center; gap:.78rem;
  padding:.72rem .95rem;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r);
  box-shadow:0 20px 46px rgba(6,27,51,.20), 0 2px 6px rgba(6,27,51,.07),
             inset 0 1px 0 rgba(255,255,255,.95);
  max-width:min(238px,76%);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.advisor:hover .credential {
  transform:translateY(-3px);
  box-shadow:0 26px 58px rgba(6,27,51,.26), 0 3px 8px rgba(6,27,51,.09),
             inset 0 1px 0 rgba(255,255,255,.95);
}
.credential__ico {
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:9px;
  background:linear-gradient(150deg,var(--gold-50),rgba(240,223,166,.5));
  color:var(--gold-600);
  border:1px solid rgba(201,162,39,.3);
}
.credential__ico svg { width:19px; height:19px; }
.credential div strong { display:block; font-size:.845rem; color:var(--navy-900); line-height:1.25; }
.credential div span { display:block; font-size:.735rem; color:var(--muted); line-height:1.4; margin-top:.14rem; }

/* Below 960px the hero stacks and the card is capped at 440px wide — not
   enough room to float a chip over it without covering the face. The seal and
   the name plate carry the trust signal at that size, and the AMFI badges sit
   directly beneath the card anyway. */
@media (max-width:960px) {
  .credential { display:none; }
}

/* Desktop only: reserve the extra room the floating chip occupies. */
@media (min-width:961px) {
  .advisor__ph { padding-bottom:calc(var(--plate-h, 8.75rem) + 5rem); }
}

/* On phones the card should introduce Sandeep, not consume the screen before
   the headline appears. */
@media (max-width:560px) {
  .hero { padding-top:2rem; }
  .hero__media { max-width:272px; }
  .advisor__seal { top:-14px; right:-14px; }
  .advisor__plate { padding:2.1rem 1.05rem 1rem; }
}

/* --- 11. Trust strip ----------------------------------------------------- */
.trust {
  border-block:1px solid var(--line);
  background:var(--paper);
}
.trust__grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:clamp(1.9rem,3.4vw,2.7rem);
}
.trust__item { text-align:center; padding-inline:1rem; position:relative; }
.trust__item + .trust__item::before {
  content:""; position:absolute; left:0; top:8%; bottom:8%; width:1px; background:var(--line-strong);
}
.trust__num {
  font-family:var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(1.75rem,1.3rem + 1.9vw,2.6rem); font-weight:600;
  color:var(--navy-800); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.trust__num i { font-style:normal; color:var(--gold-500); }
.trust__lbl {
  display:block; margin-top:.55rem;
  font-size:.755rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); line-height:1.4;
}
@media (max-width:760px) {
  .trust__grid { grid-template-columns:repeat(2,1fr); gap:1.9rem 0; }
  .trust__item:nth-child(odd)::before { display:none; }
  .trust__item:nth-child(3)::before,
  .trust__item:nth-child(4)::before { top:-.95rem; }
}

/* --- 12. Scroll reveal --------------------------------------------------- */
[data-reveal] {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-visible { opacity:1; transform:none; }

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

/* ==========================================================================
   Part 2 of 3: cards, services, why-choose, process, calculators, FAQ
   ========================================================================== */

/* --- 13. Generic card ---------------------------------------------------- */
.card {
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.5rem,2.4vw,1.95rem);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
  overflow:hidden;
  height:100%;
  display:flex; flex-direction:column;
}
/* gold hairline that draws in on hover */
.card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-200));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--line-strong); }
.card:hover::before { transform:scaleX(1); }
.card:focus-within { border-color:var(--line-strong); box-shadow:var(--sh); }

.card__ico {
  width:50px; height:50px; flex:none;
  display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(150deg,rgba(26,78,133,.09),rgba(10,37,64,.05));
  border:1px solid rgba(10,37,64,.09);
  color:var(--navy-700);
  margin-bottom:1.15rem;
  transition:background var(--t), color var(--t), border-color var(--t);
}
.card__ico svg { width:24px; height:24px; }
.card:hover .card__ico {
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
  border-color:var(--navy-800);
  color:var(--gold-400);
}
.card h3 { margin-bottom:.55rem; }
.card p { font-size:.925rem; color:var(--muted); line-height:1.62; }
.card .tlink { margin-top:auto; padding-top:1.15rem; align-self:flex-start; }

/* --- 14. Services -------------------------------------------------------- */
.grid-3 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:clamp(1rem,1.8vw,1.4rem);
}
@media (max-width:680px) { .grid-3 { grid-template-columns:1fr; } }

.services__foot {
  margin-top:clamp(2rem,3.5vw,2.9rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 1.4rem; text-align:center;
}
.services__foot p { font-size:.925rem; color:var(--muted); }

/* Service detail dialog */
.modal {
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  padding:var(--gutter);
  visibility:hidden; pointer-events:none;
}
.modal.is-open { visibility:visible; pointer-events:auto; }
.modal__scrim {
  position:absolute; inset:0; background:rgba(6,27,51,.55);
  opacity:0; transition:opacity .3s var(--ease);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.modal.is-open .modal__scrim { opacity:1; }
.modal__box {
  position:relative;
  width:min(620px,100%); max-height:min(86vh,760px);
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-xl);
  overflow:hidden auto;
  overscroll-behavior:contain;
  transform:translateY(16px) scale(.985); opacity:0;
  transition:transform .36s var(--ease-out), opacity .28s var(--ease);
}
.modal.is-open .modal__box { transform:none; opacity:1; }
.modal__top {
  position:sticky; top:0; z-index:2;
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.5rem clamp(1.4rem,3vw,2rem) 1.15rem;
  background:linear-gradient(160deg,var(--navy-800),var(--navy-900));
  color:var(--white);
}
.modal__top .card__ico {
  margin:0; background:rgba(201,162,39,.15); border-color:rgba(201,162,39,.32); color:var(--gold-400);
}
.modal__top h3 { color:var(--white); margin:0; }
.modal__top p { font-size:.815rem; color:rgba(255,255,255,.62); margin-top:.22rem; }
.modal__close {
  margin-left:auto; width:36px; height:36px; flex:none;
  display:grid; place-items:center; border-radius:8px;
  color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.2);
  transition:background var(--t), color var(--t), border-color var(--t);
}
.modal__close:hover { background:rgba(255,255,255,.12); color:var(--white); border-color:rgba(255,255,255,.4); }
.modal__close svg { width:17px; height:17px; }
.modal__body { padding:clamp(1.4rem,3vw,2rem); }
.modal__body p { color:var(--muted); margin-bottom:1rem; font-size:.945rem; }
.modal__body h4 { color:var(--navy-900); margin:1.5rem 0 .7rem; font-family:var(--f-sans); font-size:.76rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.modal__body ul { display:grid; gap:.6rem; }
.modal__body li {
  position:relative; padding-left:1.6rem; font-size:.925rem; color:var(--muted); line-height:1.6;
}
.modal__body li::before {
  content:""; position:absolute; left:.28rem; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--gold-500);
}
.modal__foot {
  display:flex; flex-wrap:wrap; gap:.7rem;
  padding:1.25rem clamp(1.4rem,3vw,2rem) 1.6rem;
  border-top:1px solid var(--line); background:var(--paper);
}
.modal__note {
  font-size:.775rem; color:var(--muted-2); line-height:1.55;
  padding:.9rem 1rem; margin-top:1.3rem;
  background:var(--paper); border-left:2px solid var(--gold-500); border-radius:0 6px 6px 0;
}

/* --- 15. Why choose ------------------------------------------------------ */
.why { display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:clamp(1.6rem,3vw,2.6rem); }
.why__item { display:flex; gap:1.05rem; align-items:flex-start; }
.why__ico {
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border-radius:11px;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--sh-xs);
  color:var(--gold-600);
  transition:transform var(--t), box-shadow var(--t);
}
.why__ico svg { width:22px; height:22px; }
.why__item:hover .why__ico { transform:translateY(-3px) rotate(-3deg); box-shadow:var(--sh); }
.why__item h3 { font-size:1.05rem; margin-bottom:.35rem; }
.why__item p { font-size:.9rem; color:var(--muted); line-height:1.6; }

/* --- 16. Process timeline ------------------------------------------------ */
.process { position:relative; max-width:820px; margin-inline:auto; }
.process__rail {
  position:absolute; left:26px; top:14px; bottom:14px; width:2px;
  background:var(--line-strong); border-radius:2px; overflow:hidden;
}
.process__rail i {
  position:absolute; inset:0 0 auto 0; height:0;
  background:linear-gradient(180deg,var(--gold-500),var(--gold-400));
  transition:height .18s linear;
}
.step { position:relative; display:grid; grid-template-columns:54px 1fr; gap:1.5rem; padding-bottom:2.5rem; }
.step:last-child { padding-bottom:0; }
.step__num {
  position:relative; z-index:2;
  width:54px; height:54px; display:grid; place-items:center;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--line-strong);
  font-family:var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:1.12rem; font-weight:600; color:var(--muted-2);
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.step.is-lit .step__num {
  border-color:var(--gold-500); color:var(--navy-900); background:var(--gold-50);
  box-shadow:0 0 0 6px rgba(201,162,39,.11);
}
.step__body { padding-top:.55rem; }
.step__body h3 { margin-bottom:.4rem; }
.step__body p { font-size:.93rem; color:var(--muted); line-height:1.62; max-width:52ch; }
.step__tag {
  display:inline-block; margin-bottom:.5rem;
  font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-600);
}
@media (max-width:560px) {
  .process__rail { left:20px; }
  .step { grid-template-columns:42px 1fr; gap:1.1rem; padding-bottom:2.1rem; }
  .step__num { width:42px; height:42px; font-size:.98rem; }
  .step__body { padding-top:.25rem; }
}

/* --- 17. Calculators ----------------------------------------------------- */
.calc {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
  /* `clip` rather than `hidden`: both round off the corners, but `hidden` makes
     this a scroll container, which pins the mobile live-total bar to a box that
     never scrolls instead of to the viewport. `hidden` first as a fallback. */
  overflow:hidden;
  overflow:clip;
}
.calc__tabs {
  display:flex; gap:.35rem;
  padding:.5rem .5rem 0;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.calc__tab {
  flex:1 1 0;
  padding:.95rem 1rem;
  font-size:.895rem; font-weight:700; color:var(--muted);
  border-radius:10px 10px 0 0;
  border:1px solid transparent; border-bottom:0;
  position:relative; top:1px;
  transition:color var(--t), background var(--t), border-color var(--t);
}
.calc__tab:hover { color:var(--navy-800); }
.calc__tab.is-active {
  color:var(--navy-900); background:var(--white);
  border-color:var(--line);
}
.calc__tab.is-active::after {
  content:""; position:absolute; left:1rem; right:1rem; top:0; height:2.5px;
  background:var(--gold-500); border-radius:0 0 3px 3px;
}

.calc__panel {
  display:none;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(1.6rem,3.5vw,3rem);
  padding:clamp(1.5rem,3.2vw,2.5rem);
}
.calc__panel.is-active { display:grid; }
@media (max-width:840px) { .calc__panel.is-active { grid-template-columns:1fr; } }

.calc__controls { display:grid; gap:clamp(1.35rem,2.4vw,1.8rem); align-content:start; }

.field { display:grid; gap:.62rem; }
.field__top { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.field label { font-size:.875rem; font-weight:700; color:var(--navy-800); }
.field__box {
  display:inline-flex; align-items:center; gap:.28rem;
  padding:.42rem .7rem;
  background:var(--gold-50);
  border:1px solid rgba(201,162,39,.3);
  border-radius:8px;
  transition:border-color var(--t), box-shadow var(--t);
}
.field__box:focus-within { border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.15); }
.field__unit { font-size:.85rem; font-weight:700; color:var(--gold-700); }
.field__box input {
  width:6.6ch; border:0; background:transparent; padding:0;
  font-size:.98rem; font-weight:800; color:var(--navy-900);
  font-variant-numeric:tabular-nums; text-align:right;
  -moz-appearance:textfield;
}
.field__box input::-webkit-outer-spin-button,
.field__box input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.field__box input:focus { outline:none; }
.field__scale { display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted-2); font-variant-numeric:tabular-nums; }

/* Range slider — gold fill driven by --fill (set in main.js) */
.slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:22px; background:transparent; cursor:pointer; margin:0;
}
.slider::-webkit-slider-runnable-track {
  height:6px; border-radius:100px;
  background:linear-gradient(90deg,var(--gold-500) 0 var(--fill,0%),var(--line-strong) var(--fill,0%) 100%);
}
.slider::-moz-range-track { height:6px; border-radius:100px; background:var(--line-strong); }
.slider::-moz-range-progress { height:6px; border-radius:100px; background:var(--gold-500); }
.slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-7px;
  border-radius:50%; background:var(--white);
  border:2px solid var(--gold-500);
  box-shadow:0 2px 7px rgba(10,37,64,.22);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.slider::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%;
  background:var(--white); border:2px solid var(--gold-500);
  box-shadow:0 2px 7px rgba(10,37,64,.22);
}
.slider:hover::-webkit-slider-thumb { transform:scale(1.12); }
.slider:active::-webkit-slider-thumb { transform:scale(1.02); box-shadow:0 0 0 7px rgba(201,162,39,.16); }
.slider:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 7px rgba(201,162,39,.22); }

/* Output side */
.calc__output {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.25rem,2.4vw,1.7rem);
  display:flex; flex-direction:column; gap:1.1rem;
}
.calc__chart { min-height:150px; }
/* max-height letterboxes via preserveAspectRatio — the donut stays round. */
.calc__chart svg { width:100%; height:auto; display:block; max-height:270px; }

.calc__stats { display:grid; gap:.1rem; }
.calc__stats li {
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid var(--line);
}
.calc__stats li:last-child { border-bottom:0; }
.calc__key { display:inline-flex; align-items:center; gap:.55rem; font-size:.865rem; color:var(--muted); }
.calc__stats strong { font-size:1.02rem; font-weight:800; color:var(--navy-900); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.calc__stats .is-total { margin-top:.35rem; padding-top:.85rem; border-top:1.5px solid var(--line-strong); }
.calc__stats .is-total .calc__key { color:var(--navy-800); font-weight:700; }
.calc__stats .is-total strong {
  font-family:var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(1.32rem,1.1rem + .8vw,1.7rem); font-weight:600; letter-spacing:-.025em;
}
.dot { width:9px; height:9px; border-radius:3px; flex:none; display:inline-block; }
.dot--invested { background:var(--navy-800); }
.dot--returns { background:var(--gold-500); }

.calc__caption { font-size:.8rem; color:var(--muted); line-height:1.55; }
.calc__caption strong { color:var(--navy-900); font-variant-numeric:tabular-nums; }
.calc__disclaim { display:block; margin-top:.4rem; font-size:.745rem; color:var(--muted-2); font-style:italic; }
.calc__cta { margin-top:auto; }

.calc__legalese {
  margin-top:1.4rem; text-align:center;
  font-size:.79rem; color:var(--muted-2); line-height:1.6;
  max-width:70ch; margin-inline:auto;
}

/* --- 18. FAQ ------------------------------------------------------------- */
.faq { max-width:840px; margin-inline:auto; border-top:1px solid var(--line); }
.faq__item { border-bottom:1px solid var(--line); }
.faq__q {
  width:100%; display:flex; align-items:flex-start; gap:1.1rem;
  padding:1.35rem .25rem; text-align:left;
  font-family:var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(1.02rem,.98rem + .25vw,1.16rem); font-weight:600;
  color:var(--navy-900); letter-spacing:-.012em; line-height:1.4;
  transition:color var(--t);
}
.faq__q:hover { color:var(--gold-700); }
.faq__sign {
  margin-left:auto; flex:none;
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:50%; border:1.5px solid var(--line-strong);
  color:var(--navy-700);
  transition:background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.faq__sign svg { width:14px; height:14px; transition:transform .34s var(--ease); }
.faq__item.is-open .faq__sign { background:var(--navy-800); border-color:var(--navy-800); color:var(--gold-400); }
.faq__item.is-open .faq__sign svg { transform:rotate(135deg); }
.faq__a {
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .38s var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows:1fr; }
.faq__a > div { overflow:hidden; }
.faq__a p {
  font-size:.945rem; color:var(--muted); line-height:1.7;
  padding:0 3rem 1.5rem .25rem; max-width:66ch;
}
.faq__a p + p { padding-top:.9rem; }
.faq__a strong { color:var(--navy-800); }

/* ==========================================================================
   Part 3 of 3: testimonials, blog, newsletter, contact, footer, widgets
   ========================================================================== */

/* --- 19. Testimonials ---------------------------------------------------- */
.tcard {
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.6rem,2.6vw,2rem);
  display:flex; flex-direction:column; gap:1.15rem;
  height:100%;
  transition:transform var(--t), box-shadow var(--t);
}
.tcard:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
.tcard__mark {
  font-family:var(--f-display); font-size:3.2rem; line-height:.6;
  color:var(--gold-200); user-select:none;
}
.tcard blockquote {
  font-family:var(--f-display);
  font-variation-settings:"SOFT" 24,"WONK" 0;
  font-style:italic; font-size:1.03rem; line-height:1.6;
  color:var(--navy-800); letter-spacing:-.008em;
  flex:1;
}
.tcard__stars { display:flex; gap:.18rem; color:var(--gold-500); }
.tcard__stars svg { width:15px; height:15px; }
.tcard__who { display:flex; align-items:center; gap:.85rem; padding-top:1.15rem; border-top:1px solid var(--line); }
.tcard__av {
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
  color:var(--gold-300);
  font-family:var(--f-display); font-size:.98rem; font-weight:600; letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.3);
}
/* Scoped to the inner <div>: the avatar beside it is also a <span> and an
   unscoped .tcard__who span would override its grid centring and colour. */
.tcard__who div strong { display:block; font-size:.92rem; color:var(--navy-900); line-height:1.3; }
.tcard__who div span { display:block; font-size:.78rem; color:var(--muted); margin-top:.1rem; }
/* Honest marker so sample copy is never mistaken for a real review */
.tcard__sample {
  position:absolute; top:1rem; right:1rem;
  font-size:.63rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted-2);
  padding:.22rem .5rem; border:1px dashed var(--line-strong); border-radius:100px;
  background:var(--paper);
}
.tnote {
  margin-top:1.9rem; text-align:center;
  font-size:.83rem; color:var(--muted-2); line-height:1.6;
}

/* --- 20. Blog ------------------------------------------------------------ */
.post {
  display:flex; flex-direction:column; height:100%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.post:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--line-strong); }
.post__img { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); }
.post__img img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.post:hover .post__img img { transform:scale(1.045); }
.post__cat {
  position:absolute; left:.85rem; bottom:.85rem;
  font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy-900); background:rgba(255,255,255,.94);
  padding:.34rem .62rem; border-radius:100px;
  box-shadow:var(--sh-sm);
}
.post__body { padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; gap:.55rem; }
.post__meta { font-size:.745rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); }
.post h3 { font-size:1.12rem; line-height:1.32; }
.post p { font-size:.9rem; color:var(--muted); line-height:1.6; }
.post .tlink { margin-top:auto; padding-top:1rem; }
.post__soon {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:700; color:var(--muted-2);
  margin-top:auto; padding-top:1rem;
}
.post__soon i { width:6px; height:6px; border-radius:50%; background:var(--gold-500); display:inline-block; }

/* --- 21. Newsletter ------------------------------------------------------ */
.news {
  position:relative; overflow:hidden;
  background:linear-gradient(140deg,var(--navy-800) 0%,var(--navy-900) 55%,var(--navy-950) 100%);
  border-radius:var(--r-lg);
  padding:clamp(2rem,4.2vw,3.4rem);
  color:rgba(255,255,255,.8);
  box-shadow:var(--sh-lg);
}
.news::before {
  content:""; position:absolute; top:-45%; right:-8%;
  width:min(520px,64%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.20),transparent 62%);
  pointer-events:none;
}
.news__grid {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(1.6rem,3.5vw,3rem); align-items:center;
}
@media (max-width:820px) { .news__grid { grid-template-columns:1fr; } }
/* Pure white at 700 so the heading reads cleanly against the navy panel —
   it previously inherited the default navy heading colour. */
.news h2 {
  font-size:clamp(1.6rem,1.3rem + 1.4vw,2.15rem);
  margin-bottom:.7rem;
  color:#FFFFFF;
  font-weight:700;
}
.news p { font-size:.945rem; line-height:1.62; color:rgba(255,255,255,.66); max-width:44ch; }
.news__form { display:flex; gap:.6rem; flex-wrap:wrap; }
.news__form input {
  flex:1 1 220px; min-width:0;
  padding:.92rem 1.05rem;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:var(--r-sm);
  color:var(--white); font-size:.925rem;
  transition:border-color var(--t), background var(--t);
}
.news__form input::placeholder { color:rgba(255,255,255,.45); }
.news__form input:focus { outline:none; border-color:var(--gold-500); background:rgba(255,255,255,.12); }
.news__fine { margin-top:.85rem; font-size:.775rem; color:rgba(255,255,255,.45); }

/* --- 22. Contact --------------------------------------------------------- */
.contact__grid {
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.6rem,3.4vw,2.8rem); align-items:start;
}
@media (max-width:900px) { .contact__grid { grid-template-columns:1fr; } }

.formcard {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
  padding:clamp(1.5rem,3vw,2.2rem);
}
.form { display:grid; gap:1.05rem; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
@media (max-width:560px) { .form__row { grid-template-columns:1fr; } }
.form__field { display:grid; gap:.42rem; }
.form__field label { font-size:.815rem; font-weight:700; color:var(--navy-800); }
.form__field label i { color:var(--gold-600); font-style:normal; }
.form__field input,
.form__field select,
.form__field textarea {
  width:100%;
  padding:.82rem .95rem;
  background:var(--white);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);
  font-size:.925rem; color:var(--ink);
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
.form__field textarea { resize:vertical; min-height:104px; line-height:1.6; }
.form__field select { cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:15px;
  padding-right:2.4rem;
}
.form__field input::placeholder,
.form__field textarea::placeholder { color:var(--muted-2); }
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3.5px rgba(201,162,39,.14);
}
.form__field.has-error input,
.form__field.has-error select,
.form__field.has-error textarea { border-color:#D2453C; box-shadow:0 0 0 3.5px rgba(210,69,60,.1); }
.form__err { font-size:.755rem; color:#C13B32; font-weight:600; min-height:0; }
.form__consent { display:flex; gap:.65rem; align-items:flex-start; font-size:.79rem; color:var(--muted); line-height:1.55; }
.form__consent input { width:17px; height:17px; margin-top:.16rem; flex:none; accent-color:var(--gold-600); cursor:pointer; }
.form__status { font-size:.865rem; font-weight:600; line-height:1.55; display:none; padding:.85rem 1rem; border-radius:var(--r-sm); }
.form__status.is-ok { display:block; background:#EAF7EF; color:#14713C; border:1px solid #BFE5CE; }
.form__status.is-err { display:block; background:#FDEDEC; color:#A6322A; border:1px solid #F5C9C5; }
.form__status a { text-decoration:underline; font-weight:700; }

/* Contact info column */
.infocard {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:1.35rem 1.45rem;
  display:flex; align-items:flex-start; gap:.95rem;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
.infocard + .infocard { margin-top:.85rem; }
a.infocard:hover { border-color:var(--line-strong); box-shadow:var(--sh); transform:translateY(-2px); }
.infocard__ico {
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:10px; background:var(--gold-50); border:1px solid rgba(201,162,39,.24);
  color:var(--gold-600);
}
.infocard__ico svg { width:20px; height:20px; }
.infocard__lbl { font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }
.infocard > span strong { display:block; font-size:1rem; color:var(--navy-900); margin-top:.2rem; letter-spacing:-.005em; }
.infocard span.sub { display:block; font-size:.79rem; color:var(--muted); margin-top:.16rem; line-height:1.5; }
.hours { display:grid; gap:.5rem; margin-top:.85rem; }
.hours li { display:flex; justify-content:space-between; gap:1rem; font-size:.845rem; color:var(--muted); }
.hours li strong { font-weight:700; color:var(--navy-800); font-size:.845rem; }

/* Map */
.map {
  margin-top:clamp(1.6rem,3vw,2.4rem);
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-sm);
  background:var(--paper-2);
}
.map iframe { display:block; width:100%; height:clamp(280px,38vw,400px); border:0; }
.map__ph {
  position:relative;
  height:clamp(230px,30vw,320px);
  display:grid; place-items:center; text-align:center; padding:2rem;
  background:
    linear-gradient(rgba(10,37,64,.05) 1px,transparent 1px) 0 0/38px 38px,
    linear-gradient(90deg,rgba(10,37,64,.05) 1px,transparent 1px) 0 0/38px 38px,
    linear-gradient(150deg,var(--paper),var(--paper-2));
}
.map__ph::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(10,37,64,.05));
  pointer-events:none;
}
.map__pin {
  width:52px; height:52px; display:grid; place-items:center; margin:0 auto .9rem;
  border-radius:50%; background:var(--white); box-shadow:var(--sh);
  border:1px solid var(--line); color:var(--gold-600);
}
.map__pin svg { width:24px; height:24px; }
.map__ph strong { display:block; font-size:1rem; color:var(--navy-900); }
.map__ph span { display:block; font-size:.855rem; color:var(--muted); margin-top:.35rem; max-width:34em; line-height:1.55; }

/* --- 23. Footer ---------------------------------------------------------- */
.footer {
  background:var(--navy-950);
  color:rgba(255,255,255,.62);
  font-size:.895rem;
  position:relative;
}
.footer::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--navy-700),var(--gold-500) 42%,var(--gold-500) 58%,var(--navy-700));
  opacity:.75;
}
.footer__main {
  display:grid; grid-template-columns:1.55fr 1fr 1fr 1.25fr;
  gap:clamp(1.8rem,3.5vw,3rem);
  padding-block:clamp(3rem,5.5vw,4.5rem) clamp(2rem,3.5vw,2.8rem);
}
@media (max-width:980px) { .footer__main { grid-template-columns:1fr 1fr; gap:2.4rem; } }
@media (max-width:560px) { .footer__main { grid-template-columns:1fr; gap:2rem; } }

.footer h4 {
  font-family:var(--f-sans); font-size:.735rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gold-400);
  margin-bottom:1.15rem;
}
.footer__links { display:grid; gap:.68rem; }
.footer__links a {
  display:inline-flex; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.62); font-size:.885rem;
  transition:color var(--t), gap var(--t);
}
.footer__links a::before {
  content:""; width:0; height:1px; background:var(--gold-500); transition:width var(--t);
}
.footer__links a:hover { color:var(--white); }
.footer__links a:hover::before { width:10px; }

.footer__brand { display:flex; align-items:center; gap:.8rem; margin-bottom:1.15rem; }
.footer__brand .brand__mark { box-shadow:inset 0 0 0 1px rgba(201,162,39,.4); }
.footer__brand .brand__name { color:var(--white); }
.footer__brand .brand__role { color:var(--gold-400); }
.footer__about { line-height:1.68; margin-bottom:1.3rem; max-width:38ch; color:rgba(255,255,255,.58); }
.footer__arn {
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.79rem; font-weight:700; letter-spacing:.05em;
  color:var(--gold-200);
  padding:.5rem .85rem; border-radius:8px;
  background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.24);
}
.footer__arn svg { width:15px; height:15px; }
.footer__arn.is-missing { color:#F3C77B; background:rgba(183,121,31,.16); border-color:rgba(240,199,123,.3); }

.footer__contact { display:grid; gap:.9rem; }
.footer__contact a,.footer__contact div { display:flex; align-items:flex-start; gap:.7rem; color:rgba(255,255,255,.68); line-height:1.5; }
.footer__contact a:hover { color:var(--white); }
.footer__contact svg { width:16px; height:16px; flex:none; margin-top:.18rem; color:var(--gold-500); }

.social { display:flex; gap:.55rem; margin-top:1.3rem; flex-wrap:wrap; }
.social a {
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.62);
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.social a:hover { background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900); transform:translateY(-2px); }
.social a svg { width:17px; height:17px; }
.social__soon { font-size:.755rem; color:rgba(255,255,255,.34); margin-top:.7rem; }

/* Disclaimer block */
.disclaimer {
  border-top:1px solid rgba(255,255,255,.09);
  padding-block:1.6rem;
  font-size:.775rem; line-height:1.72; color:rgba(255,255,255,.45);
}
.disclaimer p + p { margin-top:.7rem; }
.disclaimer strong { color:rgba(255,255,255,.72); font-weight:700; }

.footer__bar {
  border-top:1px solid rgba(255,255,255,.09);
  padding-block:1.25rem;
  display:flex; flex-wrap:wrap; gap:.7rem 1.5rem;
  align-items:center; justify-content:space-between;
  font-size:.79rem; color:rgba(255,255,255,.42);
}
.footer__bar nav { display:flex; flex-wrap:wrap; gap:1.25rem; }
.footer__bar a:hover { color:var(--white); }

/* --- 24. Floating actions ------------------------------------------------ */
.fabs {
  position:fixed; right:clamp(.9rem,2.2vw,1.55rem); bottom:clamp(.9rem,2.2vw,1.55rem);
  z-index:880;
  display:flex; flex-direction:column; gap:.7rem; align-items:flex-end;
}
.fab {
  position:relative;
  width:54px; height:54px; display:grid; place-items:center;
  border-radius:50%;
  box-shadow:var(--sh-lg);
  transition:transform var(--t), box-shadow var(--t), background var(--t);
}
.fab:hover { transform:translateY(-3px) scale(1.05); }
.fab svg { width:26px; height:26px; }
.fab--wa { background:var(--wa); color:#fff; }
.fab--wa:hover { background:#1EBE5B; }
.fab--top {
  width:44px; height:44px;
  background:var(--white); color:var(--navy-800);
  border:1px solid var(--line);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity var(--t), transform var(--t), background var(--t), color var(--t);
}
.fab--top svg { width:19px; height:19px; }
.fab--top.is-on { opacity:1; pointer-events:auto; transform:none; }
.fab--top:hover { background:var(--navy-800); color:var(--gold-400); }

.assistant-fab {
  position:relative;
  width:58px; height:58px; display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
  color:var(--gold-400);
  box-shadow:0 12px 32px rgba(6,27,51,.34), inset 0 0 0 1px rgba(201,162,39,.32);
  transition:transform var(--t), box-shadow var(--t);
}
.assistant-fab:hover { transform:translateY(-3px) scale(1.05); }
.assistant-fab svg { width:26px; height:26px; }
.assistant-fab.is-pulsing { animation:fabPulse 1.7s var(--ease) 3; }
@keyframes fabPulse {
  0%,100% { box-shadow:0 12px 32px rgba(6,27,51,.34), inset 0 0 0 1px rgba(201,162,39,.32), 0 0 0 0 rgba(201,162,39,.42); }
  55%     { box-shadow:0 12px 32px rgba(6,27,51,.34), inset 0 0 0 1px rgba(201,162,39,.32), 0 0 0 14px rgba(201,162,39,0); }
}
.assistant-fab__dot {
  position:absolute; top:2px; right:2px;
  width:13px; height:13px; border-radius:50%;
  background:var(--gold-500); border:2.5px solid var(--white);
  opacity:0; transform:scale(.4); transition:opacity var(--t), transform var(--t);
}
.assistant-fab.has-unread .assistant-fab__dot { opacity:1; transform:scale(1); }

/* --- 25. Assistant widget ------------------------------------------------ */
.assistant {
  position:fixed; z-index:940;
  right:clamp(.9rem,2.2vw,1.55rem);
  bottom:calc(clamp(.9rem,2.2vw,1.55rem) + 68px);
  width:min(390px,calc(100vw - 1.8rem));
  height:min(600px,calc(100vh - 150px));
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-xl);
  overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(18px) scale(.97); transform-origin:bottom right;
  transition:opacity .3s var(--ease), transform .36s var(--ease-out), visibility .3s;
}
.assistant.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:none; }

.assistant__head {
  display:flex; align-items:center; gap:.75rem;
  padding:.95rem 1.05rem;
  background:linear-gradient(140deg,var(--navy-800),var(--navy-900));
  color:var(--white);
  flex:none;
}
.assistant__avatar {
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:50%;
  background:rgba(201,162,39,.16); border:1px solid rgba(201,162,39,.36);
  color:var(--gold-300);
  font-family:var(--f-display); font-size:.82rem; font-weight:600; letter-spacing:.04em;
}
.assistant__title { min-width:0; flex:1; }
.assistant__title strong { display:block; font-size:.93rem; line-height:1.25; letter-spacing:-.005em; }
.assistant__title span {
  display:flex; align-items:center; gap:.4rem;
  font-size:.715rem; color:rgba(255,255,255,.6); margin-top:.12rem;
}
.assistant__title span::before {
  content:""; width:6px; height:6px; border-radius:50%; background:#3DD68C; flex:none;
  box-shadow:0 0 0 2.5px rgba(61,214,140,.22);
}
.assistant__close {
  width:32px; height:32px; flex:none; display:grid; place-items:center;
  border-radius:8px; color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.16);
  transition:background var(--t), color var(--t);
}
.assistant__close:hover { background:rgba(255,255,255,.14); color:var(--white); }
.assistant__close svg { width:16px; height:16px; }

.assistant__log {
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:1.1rem 1.05rem;
  display:flex; flex-direction:column; gap:.7rem;
  background:
    radial-gradient(circle at 100% 0%,rgba(201,162,39,.05),transparent 42%),
    var(--paper);
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.assistant__log::-webkit-scrollbar { width:7px; }
.assistant__log::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:100px; }

.msg { display:flex; max-width:100%; animation:msgIn .34s var(--ease-out) both; }
@keyframes msgIn { from { opacity:0; transform:translateY(7px); } }
.msg--user { justify-content:flex-end; }
.msg__bubble {
  max-width:86%;
  padding:.72rem .95rem;
  border-radius:14px;
  font-size:.885rem; line-height:1.6;
  box-shadow:var(--sh-xs);
}
.msg--bot .msg__bubble {
  background:var(--white); color:var(--ink);
  border:1px solid var(--line);
  border-bottom-left-radius:5px;
}
.msg--user .msg__bubble {
  background:var(--navy-800); color:rgba(255,255,255,.94);
  border-bottom-right-radius:5px;
}
.msg__bubble p + p { margin-top:.62rem; }
.msg__bubble ul { display:grid; gap:.4rem; margin:.5rem 0 0; }
.msg__bubble li { position:relative; padding-left:1.05rem; }
.msg__bubble li::before {
  content:""; position:absolute; left:.15rem; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--gold-500);
}
.msg__bubble strong { color:var(--navy-900); font-weight:700; }
.msg--user .msg__bubble strong { color:var(--white); }
.msg__bubble .fine {
  display:block; margin-top:.6rem; padding-top:.55rem;
  border-top:1px solid var(--line);
  font-size:.735rem; color:var(--muted-2); line-height:1.5;
}
.msg__bubble .btn { margin-top:.75rem; width:100%; font-size:.84rem; padding:.7rem 1rem; }
.msg__bubble dl { display:grid; gap:.34rem; margin-top:.6rem; font-size:.83rem; }
.msg__bubble dl div { display:flex; gap:.6rem; }
.msg__bubble dt { color:var(--muted); min-width:6.4rem; flex:none; }
.msg__bubble dd { color:var(--navy-900); font-weight:600; margin:0; }

.msg--typing .msg__bubble { display:flex; gap:4px; padding:.85rem .95rem; }
.msg--typing span {
  width:6px; height:6px; border-radius:50%; background:var(--muted-2);
  animation:typing 1.25s var(--ease) infinite;
}
.msg--typing span:nth-child(2) { animation-delay:.16s; }
.msg--typing span:nth-child(3) { animation-delay:.32s; }
@keyframes typing { 0%,60%,100% { opacity:.28; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }

.assistant__chips {
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding:.7rem 1.05rem;
  border-top:1px solid var(--line);
  background:var(--white);
  flex:none;
  max-height:118px; overflow-y:auto;
}
.assistant__chips:empty { display:none; }
.chip {
  font-size:.79rem; font-weight:600;
  padding:.45rem .78rem;
  border-radius:100px;
  border:1px solid var(--line-strong);
  color:var(--navy-800); background:var(--white);
  transition:background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.chip:hover { background:var(--gold-50); border-color:var(--gold-500); color:var(--gold-700); transform:translateY(-1px); }

.assistant__form {
  display:flex; gap:.5rem; align-items:center;
  padding:.7rem .8rem;
  border-top:1px solid var(--line);
  background:var(--white); flex:none;
}
.assistant__form input {
  flex:1; min-width:0;
  padding:.68rem .9rem;
  border:1.5px solid var(--line-strong); border-radius:100px;
  font-size:.875rem;
  transition:border-color var(--t), box-shadow var(--t);
}
.assistant__form input:focus { outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.13); }
.assistant__send {
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--navy-800); color:var(--white);
  transition:background var(--t), transform var(--t);
}
.assistant__send:hover { background:var(--navy-700); transform:scale(1.06); }
.assistant__send svg { width:17px; height:17px; }
.assistant__note {
  padding:.5rem 1.05rem .72rem;
  font-size:.7rem; color:var(--muted-2); text-align:center;
  background:var(--white); flex:none; line-height:1.45;
}

@media (max-width:640px) {
  .assistant {
    right:0; bottom:0; top:0; left:0;
    width:100%; height:100%; max-height:none;
    border-radius:0; border:0;
    transform:translateY(100%);
  }
  .assistant.is-open { transform:none; }
  .assistant__head { padding-top:max(.95rem,env(safe-area-inset-top)); }
  .assistant__note { padding-bottom:max(.72rem,env(safe-area-inset-bottom)); }
}

/* --- 26. Utilities ------------------------------------------------------- */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip {
  position:absolute; left:.75rem; top:-100px; z-index:1200;
  padding:.75rem 1.15rem; border-radius:var(--r-sm);
  background:var(--navy-900); color:var(--white);
  font-size:.875rem; font-weight:700;
  transition:top .22s var(--ease);
}
.skip:focus { top:.75rem; }
.center { text-align:center; }
.mt-lg { margin-top:clamp(2rem,3.6vw,3rem); }

/* --- 27. Print ----------------------------------------------------------- */
@media print {
  .header,.topbar,.fabs,.assistant,.assistant-fab,.drawer,.news,.calc__tabs { display:none !important; }
  body { font-size:11pt; }
  .section { padding-block:1.2rem; break-inside:avoid; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}

/* ==========================================================================
   Part 4: Office Location — map panel, address block, directions
   ========================================================================== */

/* --- 30. Provenance markers in the assistant transcript ------------------ */
/* Every answer states where it came from: a named guide and page, or a plain
   note that it is general guidance. A visitor should never have to guess. */
/* Flows as one sentence — "From <Guide>, page 14  Open guide" — rather than a
   flex row, which broke the title onto its own line and stranded the comma. */
.msg__src {
  display:block;
  margin-top:.7rem; padding-top:.6rem;
  border-top:1px solid var(--line);
  font-size:.735rem; line-height:1.6; color:var(--muted);
  text-wrap:pretty;
}
.msg__src svg {
  display:inline-block; width:13px; height:13px;
  vertical-align:-2px; margin-right:.35rem; color:var(--gold-600);
}
.msg__src strong { color:var(--navy-800); font-weight:700; }

.msg__gen {
  display:block; margin-top:.7rem; padding-top:.6rem;
  border-top:1px dashed var(--line-strong);
  font-size:.725rem; line-height:1.5; color:var(--muted-2); font-style:italic;
}


/* --- 31. Office location ------------------------------------------------- */
.loc {
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.2rem,2.4vw,1.8rem);
  align-items:stretch;
}
@media (max-width:900px) { .loc { grid-template-columns:1fr; } }

.loc__panel {
  display:flex; flex-direction:column;
  padding:clamp(1.5rem,2.8vw,2.1rem);
  background:linear-gradient(155deg,var(--navy-800),var(--navy-900) 58%,var(--navy-950));
  border:1px solid rgba(201,162,39,.22);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  color:rgba(255,255,255,.72);
  position:relative; overflow:hidden;
}
/* warm corner light, echoing the hero card */
.loc__panel::before {
  content:""; position:absolute; top:-30%; right:-18%;
  width:min(320px,70%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.20),transparent 62%);
  pointer-events:none;
}

.loc__pin {
  position:relative;
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:12px; margin-bottom:1.15rem;
  background:rgba(201,162,39,.15);
  border:1px solid rgba(201,162,39,.34);
  color:var(--gold-400);
}
.loc__pin svg { width:22px; height:22px; }

.loc__label {
  position:relative;
  display:block; font-size:.7rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:.5rem;
}
.loc__addr {
  position:relative;
  font-style:normal;
  font-family:var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); font-weight:600;
  line-height:1.4; letter-spacing:-.015em; color:#fff;
}

.loc__hours {
  position:relative;
  display:grid; gap:.5rem;
  margin-top:1.4rem; padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.loc__hours li {
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.845rem; color:rgba(255,255,255,.66);
}
.loc__hours strong { font-size:.845rem; font-weight:700; color:rgba(255,255,255,.94); }

.loc__actions {
  position:relative;
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:1.6rem;
}
.loc__actions .btn { flex:1 1 auto; }
.loc__actions .btn--primary { --btn-bg:var(--gold-500); --btn-fg:var(--navy-900); --btn-bd:var(--gold-500); }
.loc__actions .btn--primary:hover { --btn-bg:var(--gold-400); --btn-bd:var(--gold-400); }
.loc__actions .btn--ghost { --btn-fg:rgba(255,255,255,.9); --btn-bd:rgba(255,255,255,.26); }
.loc__actions .btn--ghost:hover { --btn-bd:var(--gold-500); --btn-bg:rgba(201,162,39,.14); --btn-fg:#fff; }

.loc__note {
  position:relative;
  margin-top:auto; padding-top:1.3rem;
  font-size:.78rem; line-height:1.55; color:rgba(255,255,255,.5);
}

.loc__map {
  position:relative;
  min-height:clamp(320px,44vw,470px);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--sh);
  background:var(--paper-2);
  display:grid; place-items:center;
}
.loc__map iframe {
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
  /* Google's embed is bright white; a whisper of warmth settles it into the page */
  filter:saturate(.94) contrast(1.02);
}
.loc__map .map__ph { height:100%; width:100%; }
@media (max-width:900px) { .loc__map { min-height:300px; } }

/* ==========================================================================
   Part 5: Calculator — touch ergonomics and the mobile live total
   ========================================================================== */

/* --- 32. Slider: a thumb you can actually grab with a thumb ---------------
   The visible thumb stays 20px so the design is unchanged, but the input is
   given a 44px tall hit area (Apple's and Google's minimum touch target) with
   the track centred inside it. touch-action:pan-y hands vertical scrolling to
   the page and horizontal dragging to the slider, so a drag never fights the
   page and a scroll never nudges the value.
   -------------------------------------------------------------------------- */
.slider {
  height:44px;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
}
.slider::-webkit-slider-runnable-track { height:7px; border-radius:100px; }
.slider::-moz-range-track    { height:7px; }
.slider::-moz-range-progress { height:7px; }
.slider::-webkit-slider-thumb { width:22px; height:22px; margin-top:-7.5px; }
.slider::-moz-range-thumb     { width:22px; height:22px; }

@media (hover:none) and (pointer:coarse) {
  /* Touch devices get a visibly larger grip and a wider track. */
  .slider::-webkit-slider-runnable-track { height:9px; }
  .slider::-moz-range-track    { height:9px; }
  .slider::-moz-range-progress { height:9px; }
  .slider::-webkit-slider-thumb {
    width:30px; height:30px; margin-top:-10.5px; border-width:2.5px;
    box-shadow:0 3px 10px rgba(10,37,64,.28);
  }
  .slider::-moz-range-thumb { width:30px; height:30px; border-width:2.5px; }
  .slider:active::-webkit-slider-thumb { transform:scale(1.08); }
}

/* Grouped amounts need more room than a bare number */
.field__box input { width:6.6ch; }
.field__box input[data-group] { width:9.5ch; }

/* --- 33. Live total, pinned while you drag (mobile only) -----------------
   On a phone the results sit far below the sliders, so moving one used to give
   no visible feedback at all. This bar is a direct child of the panel, which
   lets it stay pinned under the header for the whole length of the controls.
   -------------------------------------------------------------------------- */
.calc__sticky { display:none; }

@media (max-width:840px) {
  .calc__sticky {
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
    position:sticky; top:calc(var(--header-h) + 6px); z-index:6;
    margin:-.35rem -.35rem .45rem;
    padding:.7rem 1rem;
    border-radius:12px;
    background:linear-gradient(150deg,var(--navy-800),var(--navy-900));
    box-shadow:0 10px 26px rgba(6,27,51,.22);
    border:1px solid rgba(201,162,39,.28);
  }
  .calc__sticky span {
    font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
    color:rgba(255,255,255,.72);
  }
  .calc__sticky strong {
    font-family:var(--f-display); font-variation-settings:"SOFT" 0,"WONK" 0;
    font-size:clamp(1.1rem,1rem + 1.2vw,1.4rem); font-weight:600;
    letter-spacing:-.02em; color:var(--gold-300);
    font-variant-numeric:tabular-nums;
  }

  /* Tighter rhythm so the panel is not endless on a phone.
     display:flex matters as much as the padding: a sticky GRID item is confined
     to its own grid area and cannot travel, whereas a sticky FLEX item takes the
     whole flex container as its containing block — which is what lets the total
     stay pinned all the way down past the last slider. */
  .calc__panel.is-active {
    display:flex; flex-direction:column;
    padding:1.1rem 1rem 1.35rem; gap:1.35rem;
  }
  .calc__controls { gap:1.15rem; }
  .field { gap:.5rem; }
  .field__scale { font-size:.68rem; }
  .calc__output { padding:1.1rem 1rem 1.25rem; }
  .calc__tab { padding:.85rem .6rem; font-size:.84rem; }
}

@media (prefers-reduced-motion:reduce) {
  .calc__sticky { position:static; }
}

/* --- 34. Floating actions: lighter footprint on small screens ------------
   Three stacked buttons cover a meaningful slice of a 390px screen, including
   the calculator's own call to action. Smaller on phones, same affordance.
   -------------------------------------------------------------------------- */
@media (max-width:560px) {
  .fabs { gap:.55rem; right:.75rem; bottom:.75rem; }
  .fab { width:48px; height:48px; }
  .fab svg { width:23px; height:23px; }
  .fab--top { width:38px; height:38px; }
  .fab--top svg { width:17px; height:17px; }
  .assistant-fab { width:52px; height:52px; }
  .assistant-fab svg { width:23px; height:23px; }
  /* Keep the calculator CTA clear of the stack */
  .calc__cta { margin-bottom:.25rem; }
}

/* ==========================================================================
   Part 7: Interaction fixes from the click audit
   ========================================================================== */

/* --- 42. Keep the footer's legal links out from under the floating buttons -
   The chat and WhatsApp buttons are fixed to the bottom-right and were sitting
   directly on top of the "AMFI India" link once the page was scrolled to the
   end, so the link could not be clicked on tablet or phone. Reserving a strip
   on the right is enough — no vertical dead space needed.
   -------------------------------------------------------------------------- */
@media (max-width:960px) {
  .footer__bar { padding-right:5.25rem; }
}

/* --- 43. Comfortable tap targets on small text links ----------------------
   These links are 21–24px tall by design. Rather than change the spacing, an
   invisible ::after extends the hit area to roughly 33px — above the 24px
   WCAG 2.5.8 floor — without moving a single pixel on screen. The insets stay
   smaller than the gap between links so two targets never overlap.
   -------------------------------------------------------------------------- */
.footer__bar a,
.footer__contact a,
.footer__links a,
.topbar a {
  position:relative;
}
.footer__bar a::after,
.footer__contact a::after,
.footer__links a::after,
.topbar a::after {
  content:"";
  position:absolute;
  inset:-6px -4px;
  /* purely a hit area — nothing to see */
}
/* .footer__links a already uses ::before for its hover rule, so the ::after
   above is free. Keep the underline animation working. */
.footer__links a::before { z-index:1; }