/* ==========================================================================
   Catalyst Finedge — design system
   Hand-written, no framework, no build step. Read top to bottom.

   Palette is taken from the logo: vermilion red #D81A21, orange #EE7A1E and
   the amber #F8C838 of the FinEdge banner. Neutrals are warm-biased to sit
   with them — a cool grey next to this red looks like an accident.

   ONE RULE MATTERS MOST HERE. The brand colour is red, and in finance red
   already means loss, and in every interface red already means error. Three
   meanings on one hue is how a user reads "your investment fell" off a
   button. So:

     --accent   brand red. Buttons, links, the logo. Identity ONLY.
     --bad      a deep maroon, clearly darker and less saturated. Errors only,
                and never colour alone — always an icon or the word "Error".
     --ok       green. Confirmations.
     --warn     the brand orange family.

   Performance figures are not displayed anywhere on this site (an ARN holder
   may not publish scheme performance commentary), so no red-for-loss case
   arises today. If that ever changes, do not reuse --accent for it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Every colour is declared here in the bare :root first, then redefined for
   dark. Never style a component with a raw hex — always a token — or the
   two themes drift apart.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Surfaces — warm, to sit with the logo's red and amber. */
  --paper:        #FDFAF6;
  --surface:      #FFFFFF;
  --surface-2:    #F8F1E8;
  --surface-sunk: #F3EADE;

  /* Ink — warm near-black, not a cool grey ramp. */
  --ink:    #1F1614;
  --ink-2:  #5E504A;
  --ink-3:  #8C7C74;

  /* Lines */
  --line:   #EADFD2;
  --line-2: #D8C9B9;

  /* Brand — sampled from the logo. Identity only. */
  --accent:       #D81A21;
  --accent-hover: #B2141A;
  --accent-soft:  #FCE9E7;
  --on-accent:    #FFFFFF;

  /* The logo's orange and amber. Emphasis and the FinEdge banner motif.
     Never a second call-to-action colour. */
  --orange:      #EE7A1E;
  --orange-soft: #FDEEDD;
  --amber:       #F8C838;

  /* Semantic — deliberately NOT the brand red. See the note above. */
  --ok:        #2E7D32;
  --ok-soft:   #E6F2E7;
  --warn:      #B4690E;
  --warn-soft: #FCF0DE;
  --bad:       #8E1518;
  --bad-soft:  #F9E7E6;

  --focus: #D81A21;

  /* Type */
  --font-display: Archivo, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui:      Archivo, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Scale — 1.25 major third, rounded to whole pixels */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 17px;
  --t-md:   19px;
  --t-lg:   24px;
  --t-xl:   30px;
  --t-2xl:  38px;
  --t-3xl:  48px;

  /* Spacing — 4px base */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;

  --radius:    3px;
  --radius-lg: 6px;

  --shadow:    0 1px 2px rgba(60, 34, 26, .06), 0 8px 24px -14px rgba(60, 34, 26, .18);
  --shadow-lg: 0 2px 4px rgba(60, 34, 26, .07), 0 16px 40px -20px rgba(60, 34, 26, .26);

  --measure: 66ch;
  --page-max: 1120px;
}

/* Dark. Guarded so an explicit light choice still wins over a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #17110F;
    --surface:      #201815;
    --surface-2:    #2A201B;
    --surface-sunk: #120D0C;

    --ink:   #F6EEE8;
    --ink-2: #B7A79D;
    --ink-3: #8B7A71;

    --line:   #352A24;
    --line-2: #48392F;

    /* The logo red is too dark to read on this ground — lifted, not inverted,
       so it still reads as the same brand colour. */
    --accent:       #FF5A50;
    --accent-hover: #FF7A72;
    --accent-soft:  #3A1512;
    --on-accent:    #17110F;

    --orange:      #F79A3E;
    --orange-soft: #34220F;
    --amber:       #F8C838;

    --ok:        #5BC264;
    --ok-soft:   #142515;
    --warn:      #E0A73E;
    --warn-soft: #2E2411;
    --bad:       #FF9A90;
    --bad-soft:  #331512;

    --focus: #FF5A50;

    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -14px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 40px -20px rgba(0, 0, 0, .7);
  }
}

/* The toggle, so it also wins in the other direction. */
:root[data-theme="dark"] {
  --paper:        #17110F;
  --surface:      #201815;
  --surface-2:    #2A201B;
  --surface-sunk: #120D0C;

  --ink:   #F6EEE8;
  --ink-2: #B7A79D;
  --ink-3: #8B7A71;

  --line:   #352A24;
  --line-2: #48392F;

  --accent:       #FF5A50;
  --accent-hover: #FF7A72;
  --accent-soft:  #3A1512;
  --on-accent:    #17110F;

  --orange:      #F79A3E;
  --orange-soft: #34220F;
  --amber:       #F8C838;

  --ok:        #5BC264;
  --ok-soft:   #142515;
  --warn:      #E0A73E;
  --warn-soft: #2E2411;
  --bad:       #FF9A90;
  --bad-soft:  #331512;

  --focus: #FF5A50;

  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -14px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 40px -20px rgba(0, 0, 0, .7);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a):focus-visible,
:where(button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 var(--s-4);
  color: var(--ink);
}

h1 { font-size: clamp(var(--t-2xl), 5.5vw, var(--t-3xl)); }
h2 { font-size: clamp(var(--t-xl), 4vw, var(--t-2xl)); }
h3 { font-size: var(--t-lg); letter-spacing: -.012em; }
h4 { font-size: var(--t-md); letter-spacing: -.008em; font-weight: 600; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

strong { font-weight: 600; color: var(--ink); }

.lede {
  font-size: var(--t-md);
  color: var(--ink-2);
  max-width: 58ch;
}

/* Small uppercase label. Used for section eyebrows. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}

/* Every figure, NAV, rupee amount and percentage on this site uses this, so
   digits line up in columns and don't jitter as values change. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.muted { color: var(--ink-2); }
.small { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   4. Layout
   Side gutter is set once, here. Vertical padding uses padding-block so it
   can never zero out the sides.
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (max-width: 600px) { .wrap { padding-inline: var(--s-4); } }

.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-7); }
.section--sunk { background: var(--surface-2); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

.section-head { margin-bottom: var(--s-6); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 68px;
}

.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }

/* The logo is a fixed-ratio lockup (4.12:1). Height is the control; width
   follows. Do not set both, and do not squash it to fit. */
.brand__logo { height: 42px; width: auto; }
@media (max-width: 600px) { .brand__logo { height: 34px; } }

/* The logo is full-colour artwork on a light ground. On the dark theme the
   red mark still reads, but the near-black wordmark does not — so the whole
   lockup sits on its own light plate rather than being recoloured, which
   would misrepresent the brand. */
:root[data-theme="dark"] .brand__logo,
:root[data-theme="dark"] .footer-logo {
  background: #FFFFFF;
  padding: 5px 9px;
  border-radius: var(--radius);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo,
  :root:not([data-theme="light"]) .footer-logo {
    background: #FFFFFF;
    padding: 5px 9px;
    border-radius: var(--radius);
  }
}

.footer-logo { height: 54px; width: auto; margin-bottom: var(--s-4); }

/* The amber-to-orange banner under "FinEdge" in the logo. Reused sparingly
   as a section motif so the identity carries through the page rather than
   sitting only in the header. */
.banner-rule {
  height: 5px;
  width: 72px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--amber) 0%, var(--orange) 100%);
  margin-bottom: var(--s-4);
}

/* The Sanskrit line from the logo lockup, above the headline. */
.tagline-sa {
  font-size: var(--t-md);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.7;
  margin: 0 0 var(--s-3);
}

/* The tagline as the headline. The two nouns that name the departments are
   marked, so the sentence doubles as the page's structure rather than being
   decoration above it. */
.hero__tagline { max-width: 16ch; }

.hl {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}

/* Underline drawn as a background so it sits behind the descenders rather
   than cutting through them. */
.hl--wealth {
  color: var(--accent);
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) bottom / 100% .22em no-repeat;
}
.hl--business {
  color: var(--orange);
  background: linear-gradient(var(--orange-soft), var(--orange-soft)) bottom / 100% .22em no-repeat;
}

/* --------------------------------------------------------------------------
   5b. Departments
   Two businesses under one name, which is a compliance problem as much as a
   design one: a visitor must never be unsure which regulator covers which.
   So each carries its own registration line, and the two are visibly separate
   objects rather than columns of one list.
   -------------------------------------------------------------------------- */
.depts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 820px) { .depts { grid-template-columns: minmax(0, 1fr); } }

.dept {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-2);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.dept--wealth   { border-top-color: var(--accent); }
.dept--business { border-top-color: var(--orange); }

.dept__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
}
.dept--wealth   .dept__label { color: var(--accent); }
.dept--business .dept__label { color: var(--orange); }

.dept h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.dept .muted { font-size: var(--t-sm); }

.dept__list {
  list-style: none;
  margin: var(--s-5) 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.dept__list li {
  font-size: var(--t-sm);
  color: var(--ink-2);
  padding-left: var(--s-5);
  position: relative;
}
.dept__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 2px;
  border-radius: 1px;
}
.dept--wealth   .dept__list li::before,
.svc__item--wealth   .dept__list li::before { background: var(--accent); }
.dept--business .dept__list li::before,
.svc__item--business .dept__list li::before { background: var(--orange); }

/* The registration line for each department. Required on the mutual fund
   side; on the CFO side it states what the engagement actually is, so nobody
   reads the ARN as covering it. */
.dept__reg {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink);
}
.dept__note {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: var(--s-2) 0 var(--s-5);
}

/* --------------------------------------------------------------------------
   5a. Navigation
   Restored and rebuilt. The mobile menu matters more than the desktop one —
   most people reading a distributor's site are on a phone.
   -------------------------------------------------------------------------- */
.site-nav { margin-left: auto; }

.site-nav ul {
  list-style: none;          /* without this you get browser bullets */
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;     /* without this every link is underlined */
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .12s ease, background-color .12s ease;
}
.site-nav a:hover { color: var(--ink); background: var(--surface-2); }

/* Current page: a red underline rather than a filled block, so the header
   stays quiet and the marker still reads at a glance. */
.site-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 10px var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;          /* comfortable thumb target */
}
.nav-toggle:hover { border-color: var(--ink-3); }
.nav-toggle::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.nav-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}

@media (max-width: 940px) {
  .site-header__inner { gap: var(--s-3); }
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: var(--s-3) var(--s-5) var(--s-5);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .site-nav[data-open="true"] { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: var(--page-max);
    margin-inline: auto;
  }

  /* Full-width rows with real separators — a phone menu should read as a
     list of destinations, not a wrapped row of small links. */
  .site-nav li + li { border-top: 1px solid var(--line); }

  .site-nav a {
    font-size: var(--t-md);
    padding: 15px var(--s-2);
    border-radius: 0;
    color: var(--ink);
  }
  .site-nav a:hover { background: transparent; color: var(--accent); }

  .site-nav a[aria-current="page"] {
    box-shadow: none;
    color: var(--accent);
  }
  /* A dot marks the current page, since the underline is lost in a list. */
  .site-nav a[aria-current="page"]::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: var(--s-3);
    vertical-align: 2px;
  }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  padding: 13px var(--s-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink-3); color: var(--ink); }

.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   7. Hero
   Sized to its content, not the viewport — a 100vh opener would push the
   page itself out of the first frame.
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--s-9) var(--s-8); }
.hero h1 { max-width: 18ch; }
.hero .lede { margin-top: var(--s-5); }
.hero .btn-row { margin-top: var(--s-6); }

.hero__note {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   8. Cards and panels
   Not everything is a card. Border/fill/radius each say "separate object" —
   spend them by role rather than stamping every block.
   -------------------------------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
}

.panel--raised { box-shadow: var(--shadow); }

/* A numbered step. The numbering is real here — the process IS a sequence. */
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.step__n {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;
  flex: none;
}
.step h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.step p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }

.field label {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.field .hint { font-size: var(--t-xs); color: var(--ink-3); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 96px; resize: vertical; }

.field--error input, .field--error select, .field--error textarea { border-color: var(--bad); }
.field .error { font-size: var(--t-xs); color: var(--bad); }

/* --------------------------------------------------------------------------
   10. NAV / data display
   -------------------------------------------------------------------------- */
.nav-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.02em;
}

/* Provenance sits with every NAV. AMFI is the source and must be named. */
.nav-source {
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-family: var(--font-ui);
}

/* Shown when the nightly sync has not run. Cloudflare's scheduler does not
   report failures, so the site says so itself rather than passing off an
   old NAV as today's. */
.stale-banner {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink);
  margin-bottom: var(--s-5);
}

/* Wide tables scroll in their own container. The page body never does. */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
th, td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
th {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
td.numeric, th.numeric {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11. Compliance furniture
   -------------------------------------------------------------------------- */
.disclaimer-strip {
  background: var(--surface-sunk);
  border-top: 1px solid var(--line);
  padding-block: var(--s-4);
  font-size: var(--t-xs);
  color: var(--ink-2);
  text-align: center;
}

.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding-block: var(--s-7) var(--s-5);
  font-size: var(--t-sm);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer h4 {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

/* The registration line. Required on every page — never hide, shrink below
   12px, or drop it from a layout. */
.registration-line {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-2);
}

.risk-disclaimer {
  font-size: var(--t-xs);
  color: var(--ink-2);
  margin-top: var(--s-2);
  max-width: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--s-3) var(--s-4);
  z-index: 100;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* --------------------------------------------------------------------------
   12. Calculators
   -------------------------------------------------------------------------- */
.calc-tabs {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
  -webkit-overflow-scrolling: touch;
}
.calc-tabs button {
  flex: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}
.calc-tabs button:hover { color: var(--ink); }
.calc-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

.calc-grid { display: grid; grid-template-columns: 360px 1fr; gap: var(--s-7); align-items: start; }
@media (max-width: 840px) { .calc-grid { grid-template-columns: 1fr; gap: var(--s-5); } }

.calc-inputs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5); }

.calc-result {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow);
}
.calc-result--empty { box-shadow: none; background: var(--surface-2); }

.calc-result__label {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
}
.calc-result__figure {
  font-size: clamp(var(--t-2xl), 6vw, var(--t-3xl));
  font-weight: 500;
  line-height: 1.05;
  color: var(--accent);
  margin: 0 0 var(--s-5);
  letter-spacing: -.03em;
}

.calc-chart { width: 100%; height: auto; display: block; margin-bottom: var(--s-2); }

.calc-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  font-size: var(--t-xs); color: var(--ink-2);
  font-family: var(--font-ui);
  margin: 0 0 var(--s-5);
}
.calc-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.calc-legend i { width: 10px; height: 3px; border-radius: 1px; display: inline-block; }

.calc-rows { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.calc-rows > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.calc-rows dt { font-family: var(--font-ui); font-size: var(--t-sm); color: var(--ink-2); }
.calc-rows dd { margin: 0; font-size: var(--t-md); font-weight: 500; color: var(--ink); }
.calc-rows dd.pos { color: var(--ok); }
.calc-rows dd.neg { color: var(--bad); }

.calc-note {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: var(--s-4) 0 0;
  max-width: none;
}

.xirr-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-3); align-items: end; }
.xirr-row .field { margin-bottom: var(--s-3); }
.xirr-remove {
  background: none; border: 1px solid var(--line-2); border-radius: var(--radius);
  width: 38px; height: 40px; font-size: 20px; line-height: 1; color: var(--ink-3);
  cursor: pointer; margin-bottom: var(--s-3);
}
.xirr-remove:hover { border-color: var(--bad); color: var(--bad); }

/* --------------------------------------------------------------------------
   13. Funds
   -------------------------------------------------------------------------- */
.fund-search { display: grid; grid-template-columns: 1fr 220px; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (max-width: 680px) { .fund-search { grid-template-columns: 1fr; } }
.fund-search .field { margin-bottom: 0; }

.fund-empty {
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   14. Investor safety
   -------------------------------------------------------------------------- */
.safety-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.safety-list li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--t-base);
  color: var(--ink-2);
  max-width: none;
}
.safety-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--orange);
}

/* --------------------------------------------------------------------------
   15. Admin
   -------------------------------------------------------------------------- */
.admin-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-5); flex-wrap:wrap; }

.admin-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--s-3); margin-bottom:var(--s-5); }
.stat-tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s-3) var(--s-4); }
.stat-tile .k { display:block; font-family:var(--font-ui); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s-1); }
.stat-tile .v { display:block; font-size:var(--t-xl); font-weight:600; font-family:var(--font-display); letter-spacing:-.02em; line-height:1.1; }
.stat-tile--new .v { color:var(--accent); }
.stat-tile--converted .v { color:var(--ok); }
.stat-tile--dropped .v { color:var(--ink-3); }
.stat-tile--warn { border-color:var(--warn); background:var(--warn-soft); }
.stat-tile--bad { border-color:var(--bad); background:var(--bad-soft); }

.admin-controls { display:grid; grid-template-columns:1fr 200px; gap:var(--s-3); margin-bottom:var(--s-5); }
@media (max-width:600px){ .admin-controls{ grid-template-columns:1fr; } }

.lead { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s-5); margin-bottom:var(--s-4); box-shadow:var(--shadow); }
.lead__top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-4); margin-bottom:var(--s-4); }
.lead h3 { font-size:var(--t-md); margin:0 0 var(--s-1); }
.lead__meta { font-size:var(--t-sm); color:var(--ink-2); margin:0; }
.lead__meta a { text-decoration:none; }

.pill { flex:none; font-family:var(--font-ui); font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:3px 10px; border-radius:99px; border:1px solid; }
.pill--new { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.pill--contacted { color:var(--warn); border-color:var(--warn); background:var(--warn-soft); }
.pill--converted { color:var(--ok); border-color:var(--ok); background:var(--ok-soft); }
.pill--dropped { color:var(--ink-3); border-color:var(--line-2); background:var(--surface-2); }

.lead__facts { display:flex; flex-wrap:wrap; gap:var(--s-5); margin:0 0 var(--s-4); padding:var(--s-3) 0; border-block:1px solid var(--line); }
.lead__facts dt { font-family:var(--font-ui); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.lead__facts dd { margin:2px 0 0; font-size:var(--t-sm); color:var(--ink); }

.lead__message { font-size:var(--t-sm); color:var(--ink-2); background:var(--surface-2); border-left:3px solid var(--orange); padding:var(--s-3) var(--s-4); border-radius:0 var(--radius) var(--radius) 0; margin-bottom:var(--s-4); max-width:none; }

.lead__actions { display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--s-4); }
.lead__actions .btn { padding:9px var(--s-4); }
.lead__status { padding:9px var(--s-3); border:1px solid var(--line-2); border-radius:var(--radius); background:var(--surface); font-family:var(--font-ui); font-size:var(--t-sm); margin-left:auto; }

.lead__notes { margin-bottom:0; position:relative; }
.lead__saved { position:absolute; right:0; top:0; font-size:var(--t-xs); color:var(--ok); font-family:var(--font-ui); }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a screen reader is told to ignore it via aria-hidden. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Plain link list, used on the 404 page. */
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer-list a { font-size: var(--t-sm); text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. Home page — hero panel, credentials strip, process rail

   Added 13 Sep 2026. The home page read as correct but unconsidered: five
   stacked text blocks in near-identical bands, nothing for the eye to land on,
   and the hero's right half empty at desktop width. These three components fix
   that without importing the conventions of the category — no stock family
   photograph, no rising-arrow graphic (which is arguably a performance claim),
   no invented statistics.
   -------------------------------------------------------------------------- */

/* --- Split hero ---------------------------------------------------------- */

.hero--split { padding-block: var(--s-6) var(--s-5); }

.hero__grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 940px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
    gap: var(--s-6);
  }
}

.hero--split .hero__tagline { max-width: 14ch; }
.hero--split .lede { max-width: 46ch; }

/* --- Credentials strip ---------------------------------------------------- */

.creds {
  background: var(--surface-2);
  border-block: 1px solid var(--line);
  padding-block: var(--s-5);
}

.creds__row {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 720px) {
  .creds__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .creds__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Hairlines between, not around — four boxes would read as four cards. */
  .cred + .cred {
    padding-left: var(--s-5);
    border-left: 1px solid var(--line-2);
  }
}

.cred__k {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cred__v {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

/* --- Process rail --------------------------------------------------------- */

.rail {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 860px) {
  .rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-5);
  }
}

.rail__item {
  position: relative;
  padding-top: var(--s-6);
}

/* The connecting line. Decorative, so it is drawn rather than marked up, and
   it stops at the last item instead of running off into nothing. */
.rail__item::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-2);
}

@media (max-width: 859px) {
  .rail__item::before { display: none; }
  .rail__item { padding-top: 0; padding-left: 46px; }
}

.rail__n {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1;
}

/* The first step is where the visitor actually starts, so it is the one that
   carries brand colour. Using it on all four would make the accent meaningless. */
.rail__item:first-child .rail__n {
  border-color: var(--accent);
  color: var(--accent);
}

.rail__item h3 {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--t-md);
}

@media (max-width: 859px) {
  .rail__item h3 { margin-top: 0; }
}

.rail__item p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* The line joins the steps; after the last numeral there is nothing to join,
   so it stops rather than trailing off toward the margin. */
.rail__item:last-child::before { display: none; }

/* --------------------------------------------------------------------------
   15. The tagline as navigation

   "wealth" and "business" name the two halves of the business, so they are the
   two things a visitor most wants to get to. Making them anchors turns the
   headline into the shortest route into the page — but a link inside a 56px
   headline must not look like body-copy link, so the affordance is built from
   the existing highlight rather than an underline stuck on top of it.
   -------------------------------------------------------------------------- */

a.hl {
  text-decoration: none;
  cursor: pointer;
  /* The highlight already sits behind the descenders as a background; animate
     its height so the word fills with colour on hover instead of gaining a
     second line under it. */
  background-size: 100% .22em;
  transition: background-size 180ms ease, color 180ms ease;
  padding-inline: .04em;
  border-radius: 2px;
}

a.hl:hover,
a.hl:focus-visible {
  background-size: 100% 100%;
}

.hl--wealth:hover, .hl--wealth:focus-visible { color: var(--accent-hover); }
.hl--business:hover, .hl--business:focus-visible { color: var(--orange); }

a.hl:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* A caret that appears on hover, so the word reads as "goes somewhere" rather
   than as decoration. Hidden from assistive tech and from touch, where hover
   does not exist and the hint line below does the same job. */
@media (hover: hover) {
  a.hl { position: relative; }

  /* Absolutely positioned, so a caret that is invisible at rest also takes no
     space at rest. An inline ::after at opacity 0 still occupies its advance
     width, which pushed a visible gap between "business" and the full stop. */
  a.hl::after {
    content: "\2193";
    position: absolute;
    left: 100%;
    top: .18em;
    font-size: .42em;
    margin-left: .06em;
    opacity: 0;
    transition: opacity 180ms ease;
  }
  a.hl:hover::after,
  a.hl:focus-visible::after { opacity: .55; }
}

.hero__hint {
  margin: var(--s-3) 0 0;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The sticky header would otherwise cover the heading of whichever card was
   jumped to. */
.dept[id] { scroll-margin-top: 96px; }
.dept[id]:focus { outline: none; }

/* Landing on a card highlights it briefly — without this, a jump between two
   near-identical cards gives no feedback about which one you arrived at. */
.dept[id]:target {
  animation: dept-arrive 1.6s ease-out 1;
}

@keyframes dept-arrive {
  0%   { box-shadow: 0 0 0 3px var(--accent-soft); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

.dept--business[id]:target {
  animation-name: dept-arrive-business;
}

@keyframes dept-arrive-business {
  0%   { box-shadow: 0 0 0 3px var(--orange-soft); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .dept[id]:target { animation: none; }
  a.hl { transition: none; }
}

/* --------------------------------------------------------------------------
   16. Hero brand mark

   The C from the logo, oversized, bleeding off the left edge and sitting behind
   the headline. Branding by presence rather than by repetition — a second copy
   of the full wordmark in the hero would read as a template placeholder, but
   the mark alone at watermark weight reads as confidence.
   -------------------------------------------------------------------------- */

.hero--split {
  position: relative;
  overflow: hidden; /* the mark bleeds; it must not create a scrollbar */
  isolation: isolate;
}

.hero__mark {
  position: absolute;
  z-index: -1;
  left: -14%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(340px, 46vw, 620px);
  height: auto;
  opacity: .038;
  pointer-events: none;
  user-select: none;
}

/* On the dark theme the red mark sits on a near-black ground, where 5% is
   invisible. Lift it, and warm it slightly so it reads as brand rather than
   as a smudge. */
:root[data-theme="dark"] .hero__mark { opacity: .12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__mark { opacity: .12; }
}

/* On a phone the headline runs the full width, so a mark behind it competes
   with the text it is meant to support. Move it out from behind the words and
   let it anchor the top-right corner instead. */
@media (max-width: 939px) {
  .hero__mark {
    left: auto;
    right: -22%;
    top: 8%;
    transform: none;
    width: clamp(220px, 56vw, 340px);
    opacity: .045;
  }
}

/* A touch more presence in the header. The lockup was sized to stay out of the
   way; at 42px it read as a favicon next to the navigation. */
.brand__logo { height: 58px; }
@media (max-width: 600px) { .brand__logo { height: 42px; } }
.site-header__inner { min-height: 82px; }

/* --------------------------------------------------------------------------
   17. The tagline illustration

   Two rising groups and a catalyst that never changes size. The colour ramps
   within each group are the logo's own run, so the picture and the wordmark
   agree without the picture repeating the wordmark.
   -------------------------------------------------------------------------- */

.tag-art {
  margin: 0;
  display: grid;
  gap: var(--s-3);
  justify-items: center;
}

.tag-art svg {
  width: 100%;
  max-width: 580px;
  height: auto;
}

.tag-art__track { stroke: var(--line-2); }
.tag-art__mark { stroke: var(--accent); }
.tag-art__base { stroke: var(--line-2); stroke-width: 2; }

.tag-art__bars--w rect { fill: var(--accent); }
.tag-art__bars--b rect { fill: var(--orange); }

/* Earlier stages held back, so each group reads as one thing getting stronger
   rather than three unrelated blocks. */
.tag-art__bars rect:nth-child(1) { opacity: .34; }
.tag-art__bars rect:nth-child(2) { opacity: .62; }

.tag-art__label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-anchor: middle;
  fill: var(--ink-2);
}

/* Naming the small one "us" is what turns the picture from decoration into an
   argument: the thing that does not grow is the firm. */
.tag-art__tag {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--ink-3);
}

.tag-art__cap {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
  max-width: 40ch;
}

@media (max-width: 939px) {
  .tag-art { margin-top: var(--s-6); }
  .tag-art svg { max-width: 420px; }
}

/* --------------------------------------------------------------------------
   18. People

   Built to work with or without photographs. The initials plate is not a
   placeholder waiting to be replaced — it is a finished state, so the page
   never looks half-built while the photographs are being taken.
   -------------------------------------------------------------------------- */

.people {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-7);
}

@media (min-width: 860px) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
}

.person {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

@media (max-width: 520px) {
  .person { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4); }
}

.person__photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  overflow: hidden;
}

@media (max-width: 520px) {
  .person__photo { width: 64px; height: 64px; }
}

.person__photo img { width: 100%; height: 100%; object-fit: cover; }

.person__initials {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-3);
}

.person h3 { margin: 0; font-size: var(--t-lg); }

.person__role {
  margin: var(--s-1, 4px) 0 var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.person__facts {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   19. Vision and mission
   -------------------------------------------------------------------------- */

.vm {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-7);
}

@media (min-width: 860px) {
  .vm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
}

.vm__item {
  border-top: 3px solid var(--accent);
  padding-top: var(--s-5);
}

.vm__item:last-child { border-top-color: var(--orange); }

.vm__k {
  margin: 0 0 var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The statement is the sentence someone might quote back. It gets display
   weight; the paragraph under it does the explaining. */
.vm__statement {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   20. The About opening, and the pull quote
   -------------------------------------------------------------------------- */

.hero--tight { padding-block: var(--s-6) var(--s-5); }

/* The question is the whole page in one line, so it is set as one: the
   statement in ink, the question in brand red beneath it. */
.about__ask {
  max-width: 20ch;
  line-height: 1.08;
}

.about__ask-em { color: var(--accent); }

.pull {
  margin: 0;
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--s-5);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--line-2);
}

.pull__q {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

.pull__a {
  margin: var(--s-4) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-wrap: balance;
}

/* The About hero runs two columns so the question and the statement share the
   width, rather than the question sitting alone against half a screen of
   nothing. */
@media (min-width: 940px) {
  .hero__grid--about {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    align-items: center;
  }
}

.hero__grid--about .pull {
  margin-inline: 0;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgba(31, 22, 20, .4);
}

/* In the narrower hero column the shared clamp overshoots — seven lines of
   display type reads as shouting rather than as emphasis. */
.hero__grid--about .pull__q { font-size: clamp(19px, 2.1vw, 24px); }
.hero__grid--about .pull__a { max-width: 40ch; }

/* --------------------------------------------------------------------------
   21. The two service areas
   -------------------------------------------------------------------------- */

.svc {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-7);
}

@media (min-width: 900px) {
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}

.svc__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}

.svc__item--business { border-top-color: var(--orange); }

.svc__art { width: 84px; margin-bottom: var(--s-5); }
.svc__art svg { width: 100%; height: auto; display: block; }

/* Coins for the wealth side, premises for the business side. Both are plainly
   about money and business, which is the point — abstraction was making the
   cards read as a template. Nothing here depicts a return: coins counted in
   stacks and a building with windows say "money" and "a company", not "this is
   what you will earn". */
.svc__coins ellipse { fill: var(--accent); }
.svc__coins g:nth-child(1) ellipse { opacity: .38; }
.svc__coins g:nth-child(2) ellipse { opacity: .66; }

.svc__rupee {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--accent);
}

.svc__bldg rect { fill: var(--orange); }
.svc__bldg rect:nth-child(1) { opacity: .42; }
.svc__bldg rect:nth-child(3) { opacity: .68; }
.svc__windows rect { fill: var(--surface); opacity: .85; }

.svc__k {
  margin: 0 0 var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.svc__item h3 { margin: 0; font-size: var(--t-lg); }

/* The hook is the line that has to land. It gets display weight; the
   paragraphs under it do the explaining. */
.svc__hook {
  margin: var(--s-3) 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}

.svc__item--wealth .svc__hook { color: var(--accent); }
.svc__item--business .svc__hook { color: #9A4E07; }

.svc__line {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.svc__note {
  margin: var(--s-4) 0 var(--s-5);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--ink-3);
}

/* The arrow is lifted straight from the wordmark, so it takes the brand red
   rather than a tint of it. It is drawn over the bars, which means it needs a
   sliver of the page colour behind it to stay legible where it crosses the red
   group — the logo solves this by sitting on white; we cannot. */
.tag-art__arrow-body {
  stroke: var(--accent);
  paint-order: stroke;
}
.tag-art__arrow-head { fill: var(--accent); }

/* --------------------------------------------------------------------------
   22. Founders

   A sidebar carrying the identity and the verifiable facts, and a body carrying
   the story. The facts sit beside the narrative rather than under it, so a
   reader deciding whether to trust someone can check the credentials without
   first reading five paragraphs.
   -------------------------------------------------------------------------- */

.founder {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line-2);
}

.founder:first-of-type { border-top: 0; padding-top: 0; }

@media (min-width: 900px) {
  .founder {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
  /* The identity block stays in view while the story scrolls past it. */
  .founder__id { position: sticky; top: 104px; }
}

.founder__id h3 {
  margin: var(--s-4) 0 0;
  font-size: var(--t-lg);
}

.founder__disc {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-2);
}

.founder__body > p { max-width: 66ch; }
.founder__body > p + p { margin-top: var(--s-4); }

/* The quote is the sentence that carries the person. It gets display weight and
   a brand rule, and it opens the block rather than closing it. */
.founder__quote {
  margin: 0 0 var(--s-5);
  padding-left: var(--s-5);
  border-left: 3px solid var(--accent);
  max-width: 46ch;
}

.founder--business .founder__quote { border-left-color: var(--orange); }

.founder__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
}

.founder__creed {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  max-width: 52ch;
}

/* Home-page founder pair: the same shape as the About cards, deliberately
   capped at a paragraph each. */
.leads-pair {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-6);
}

@media (min-width: 860px) {
  .leads-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
}

.lead-person {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

@media (max-width: 520px) {
  .lead-person { grid-template-columns: 60px minmax(0, 1fr); gap: var(--s-4); }
}

.lead-person .person__photo { width: 72px; height: 72px; }
@media (max-width: 520px) {
  .lead-person .person__photo { width: 60px; height: 60px; }
}

.lead-person h3 { margin: 0; font-size: var(--t-md); }
.lead-person .person__role { margin: 4px 0 var(--s-3); }
.lead-person .muted { font-size: var(--t-sm); }

/* The home page reuses the service-card component, so the two pages cannot
   drift apart visually. Its headings are h2 rather than h3 (they are top-level
   on that page), so match the size explicitly. */
.svc__item h2 { margin: 0; font-size: var(--t-lg); }

/* The bullet list inside a service card. */
.svc__item .dept__list { margin-top: var(--s-4); }

/* Landing from the tagline links. Without this the sticky header covers the
   heading of whichever card was jumped to. */
.svc__item[id] { scroll-margin-top: 100px; }
.svc__item[id]:focus { outline: none; }

.svc__item[id]:target { animation: dept-arrive 1.6s ease-out 1; }
.svc__item--business[id]:target { animation-name: dept-arrive-business; }

@media (prefers-reduced-motion: reduce) {
  .svc__item[id]:target { animation: none; }
}

/* The two areas sit directly under the credentials strip, which already acts as
   a divider — a full section's padding on top of it left a band of nothing. */
#departments { padding-block: var(--s-7) var(--s-8); }

/* --------------------------------------------------------------------------
   23. Intro block and the two full-width areas
   -------------------------------------------------------------------------- */

.intro { max-width: 760px; }

.intro__h {
  margin: var(--s-3) 0 var(--s-4);
  line-height: 1.1;
  max-width: 18ch;
}

.intro__em { color: var(--accent); display: block; }

.intro__lede {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
  margin-bottom: var(--s-4);
}

.intro .muted { max-width: 66ch; }

/* --- The two areas -------------------------------------------------------- */

.area__head { max-width: 700px; }
.area__head h2 { margin: var(--s-2) 0 0; }

.area__hook {
  margin: var(--s-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--accent);
  text-wrap: balance;
}

.area--business .area__hook { color: #9A4E07; }

.area__body { max-width: 68ch; margin-top: var(--s-6); }
.area__body > p + p { margin-top: var(--s-4); }

.area__creed {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-2);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}

.area[id] { scroll-margin-top: 84px; }
.area[id]:focus { outline: none; }

/* --------------------------------------------------------------------------
   24. Process flow

   Income -> Plan -> Invest -> Compound -> Financial freedom -> Legacy.

   The dots grow across the row and the colour deepens with them, so the shape
   of the graphic carries the same idea as the words. Built from a real ordered
   list rather than an SVG: the steps are content, they need to be readable at
   any text size, and they have to wrap sensibly on a phone.
   -------------------------------------------------------------------------- */

.flow {
  list-style: none;
  margin: var(--s-7) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
}

.flow__step {
  position: relative;
  text-align: center;
  padding-top: var(--s-6);
}

/* The connecting line, drawn between one dot and the next. Decorative, so it is
   drawn rather than marked up, and it stops at the final step. */
.flow__step::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--line-2);
}

.flow__step:last-child::before { display: none; }

.flow__dot {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
}

.flow--business .flow__dot { background: var(--orange); }

/* The ramp: each step a little more solid than the last. */
.flow__step:nth-child(1) .flow__dot { opacity: .3; }
.flow__step:nth-child(2) .flow__dot { opacity: .44; }
.flow__step:nth-child(3) .flow__dot { opacity: .58; }
.flow__step:nth-child(4) .flow__dot { opacity: .72; }
.flow__step:nth-child(5) .flow__dot { opacity: .86; }
.flow__step:nth-child(6) .flow__dot {
  opacity: 1;
  width: 26px;
  height: 26px;
  top: 3px;
}

.flow__label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-2);
}

.flow__step:last-child .flow__label { color: var(--ink); }

/* On a phone six across is illegible. Two rows of three keeps the sequence
   readable and the line still joins within each row. */
@media (max-width: 700px) {
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--s-5);
  }
  .flow__step:nth-child(3)::before { display: none; }
  .flow__label { font-size: var(--t-xs); }
}

/* Two columns at desktop. A single 68ch measure on a full-width section left
   half the row empty, which read as an unfinished page rather than as breathing
   room. */
@media (min-width: 900px) {
  .intro {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--s-8);
    align-items: start;
    max-width: none;
  }
  .intro__rest { padding-top: var(--s-6); }

  .area__body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--s-8);
    align-items: start;
    max-width: none;
  }
  /* The closing line, the disclosure and the call to action sit together in
     their own column, so the eye finds the next step without hunting. */
  .area__close {
    border-left: 1px solid var(--line-2);
    padding-left: var(--s-6);
  }
  .area__close .area__creed {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

.area__prose > p + p { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   25. Solution and product grids

   Plain blocks separated by rules rather than cards. Sixteen bordered boxes on
   one page reads as a pricing table; these are subjects for a conversation, and
   they should look like a list of them.
   -------------------------------------------------------------------------- */

.sol {
  display: grid;
  gap: 0;
  margin-top: var(--s-6);
}

@media (min-width: 760px) {
  .sol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); }
}

@media (min-width: 1100px) {
  .sol--business { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-7); }
}

.sol__item {
  padding-block: var(--s-5);
  border-top: 1px solid var(--line-2);
}

.sol__item h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--t-md);
}

.sol__item .muted { margin: 0; font-size: var(--t-sm); }

/* --- Products ------------------------------------------------------------- */

.prod {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
}

@media (min-width: 760px) {
  .prod { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}

@media (min-width: 1100px) {
  .prod { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.prod__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
}

.prod__item h3 { margin: 0 0 var(--s-3); font-size: var(--t-md); }
.prod__item .muted { margin: 0; font-size: var(--t-sm); }

/* Which registration covers this avenue, stated on every one. A visitor is
   entitled to know what a firm is actually permitted to place, and stating it
   per product is harder to fudge than one disclaimer at the bottom. */
.prod__reg {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--ink-3);
}

.prod__reg a { color: var(--accent); }