@charset "UTF-8";
/* ============================================================================
   MGR WEALTHPRO — PRIVATE WEALTH ARCHITECTURE
   Design system: "The Dossier" — quiet luxury, institutional, zero-lag.

   PERFORMANCE CONTRACT (do not violate):
   1. Only `transform` and `opacity` are ever animated on a loop or on scroll.
   2. `backdrop-filter` is banned. `filter` is banned outside of one-off hovers.
   3. `box-shadow`, `width`, `height`, `top/left` are NEVER transitioned.
   4. `will-change` is applied transiently by JS only, never parked in CSS.
   5. Every long section is isolated with `content-visibility` + `contain`.
   ========================================================================= */

/* ---------------------------------------------------------------- 01 TOKENS */
:root {
  /* Surface — warm-black, not blue-black. Depth via value, not blur. */
  --ink:          #08090b;
  --surface:      #0d0f13;
  --surface-2:    #14171c;
  --surface-3:    #1b1f25;

  /* Hairlines carry all structure. No shadows, no glass. */
  --line:         rgba(237, 234, 228, .10);
  --line-2:       rgba(237, 234, 228, .18);
  --line-3:       rgba(237, 234, 228, .30);

  /* Aged brass. Used as punctuation, never as glow. */
  --brass:        #c2a264;
  --brass-lift:   #d4b87f;
  --brass-wash:   rgba(194, 162, 100, .10);
  --brass-line:   rgba(194, 162, 100, .38);

  /* Warm off-white reads as paper; pure white reads as software. */
  --text:         #edeae4;
  --text-2:       #9ea1a7;
  --text-3:       #6a6e75;

  --font-display: "Cormorant Garamond", "Hoefler Text", "Times New Roman", serif;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Optical rhythm */
  --gutter:       clamp(20px, 5vw, 72px);
  --measure:      1340px;
  --bay:          clamp(72px, 9vw, 150px);   /* vertical section rhythm */

  --ease:         cubic-bezier(.22, .61, .36, 1);
  --swift:        170ms var(--ease);

  --header-h:     72px;
}

/* ------------------------------------------------------------ 02 FOUNDATION */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
/* Anchor jumps only. Never a JS smooth-scroll library — the compositor
   already drives native scroll off the main thread. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}
p  { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input { font: inherit; color: inherit; }

::selection { background: var(--brass); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 3px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------------- 03 PRIMITIVES */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.bay { padding-block: var(--bay); }

/* Off-screen sections are skipped entirely by layout + paint. This is the
   single largest win on low-end GPUs for a long document. `auto` keeps the
   last-measured size so the scrollbar never jumps. */
.defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}

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

/* Mono kicker — the "dossier" voice. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}
.eyebrow--mute { color: var(--text-3); }

.lede {
  color: var(--text-2);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.75;
  font-weight: 300;
  max-width: 62ch;
}

.figure {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Section masthead: numeral · rule · title · lede */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding-bottom: clamp(38px, 4vw, 62px);
}
.masthead__index {
  display: flex;
  align-items: center;
  gap: 18px;
}
.masthead__index::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.masthead__title {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
}
.masthead__title em {
  font-style: italic;
  color: var(--brass);
  font-weight: 300;
}
@media (min-width: 900px) {
  .masthead--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: end;
    column-gap: clamp(40px, 6vw, 110px);
  }
  .masthead--split .masthead__index { grid-column: 1 / -1; }
}
/* Bottom alignment strands a two-line title beside four paragraphs of body
   copy. Sections with long ledes opt into top alignment instead. */
@media (min-width: 900px) {
  .masthead--top { align-items: start; }
}

/* ---------------------------------------------------------------- 04 HEADER */
/* Solid, never blurred. A sticky element with backdrop-filter forces the
   compositor to re-sample and re-blur the page behind it on EVERY frame. */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color var(--swift), background-color var(--swift);
}
.header.is-stuck {
  background: rgba(8, 9, 11, .96);
  border-bottom-color: var(--line);
}
.header__bar {
  height: var(--header-h);
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.header__mark img {
  height: 30px;
  width: auto;
  opacity: .95;
  transition: opacity var(--swift);
}
.header__mark:hover img { opacity: 1; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 38px); }
.nav a {
  position: relative;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-block: 6px;
  transition: color var(--swift);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.burger {
  display: none;
  width: 40px; height: 40px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 9px; right: 9px;
  height: 1px;
  background: var(--text);
  transition: transform 280ms var(--ease), opacity 140ms linear;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 24px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 26px;
    /* Transform + opacity only — the drawer never triggers layout. */
    transform: translate3d(0, -12px, 0);
    opacity: 0;
    visibility: hidden;
    transition: transform 260ms var(--ease), opacity 200ms linear, visibility 0s linear 260ms;
  }
  .nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav a {
    padding-block: 17px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
  }
  .nav a::after { display: none; }
}

/* ------------------------------------------------------------------ 05 HERO */
.hero {
  position: relative;
  padding-block: clamp(74px, 13vh, 150px) clamp(56px, 8vh, 96px);
}
/* Static column rules — drafting paper under the masthead. Painted once and
   never again. Deliberately whisper-faint so they read as structure behind
   the display type rather than lines through it. No gradient wash: an 8-bit
   gradient over near-black bands visibly on cheap panels. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(237, 234, 228, .045) 1px, transparent 1px);
  background-size: 25% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 76%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 76%, transparent);
}
.hero__inner { position: relative; }

.hero__title {
  font-size: clamp(3.1rem, 12.5vw, 10.5rem);
  line-height: .92;
  letter-spacing: -.035em;
  margin-block: 26px 0;
}
.hero__title em {
  display: block;
  font-style: italic;
  color: var(--brass);
}
.hero__sub {
  margin-top: 30px;
  max-width: 46ch;
  color: var(--text-2);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 300;
  line-height: 1.7;
}
.hero__meta {
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  align-items: baseline;
}

/* Load-time entrance. CSS only — no observer, no library, runs once. */
.rise { animation: rise 900ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- 06 HAIRLINE GRID */
/* Structure from 1px gaps over a line-coloured bed — zero extra DOM,
   zero borders to double up, perfectly crisp. */
.grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.grid > * {
  background: var(--surface);
  contain: content;
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* The universal content cell. Hover = background + one brass rule sliding in.
   Both are contained repaints of a single cell; neither touches layout. */
.cell {
  position: relative;
  padding: clamp(28px, 3vw, 46px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background-color 220ms var(--ease);
}
.cell::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--ease);
}
.cell:hover { background-color: var(--surface-2); }
.cell:hover::after { transform: scaleX(1); }

.cell__title {
  font-size: clamp(1.32rem, 1.9vw, 1.72rem);
  color: var(--text);
}
.cell__body { color: var(--text-2); font-size: 14.5px; line-height: 1.72; font-weight: 300; }

/* Bullet list inside a cell */
.spec { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 20px; }
.spec li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
  font-weight: 300;
}
.spec li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 6px; height: 1px;
  background: var(--brass);
}

/* --------------------------------------------------------------- 07 RIBBON */
.ribbon { border-block: 1px solid var(--line); }
.ribbon__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ribbon__item {
  padding: clamp(30px, 3.6vw, 52px) clamp(16px, 2.4vw, 40px);
  border-left: 1px solid var(--line);
}
.ribbon__item:first-child { border-left: 0; padding-left: 0; }
.ribbon__item:last-child  { padding-right: 0; }
.ribbon__key {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  color: var(--text);
  margin-bottom: 8px;
}
.ribbon__val {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
@media (max-width: 720px) {
  .ribbon__grid { grid-template-columns: minmax(0, 1fr); }
  .ribbon__item {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-inline: 0;
    padding-block: 26px;
  }
  .ribbon__item:first-child { border-top: 0; }
}

/* --------------------------------------------------------------- 08 PEOPLE */
.people { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 900px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.person {
  background: var(--surface);
  padding: clamp(30px, 3.4vw, 52px);
  display: grid;
  gap: clamp(24px, 2.6vw, 38px);
  contain: content;
  transition: background-color 220ms var(--ease);
}
.person:hover { background-color: var(--surface-2); }
@media (min-width: 560px) {
  .person { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); align-items: start; }
}
.person__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.person__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.person__name {
  font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  margin-bottom: 8px;
}
.person__role { margin-bottom: 20px; }
.person__bio { color: var(--text-2); font-size: 14.5px; line-height: 1.78; font-weight: 300; }
.person__bio p + p { margin-top: 14px; }

/* --------------------------------------------------------------- 09 MOSAIC */
.mosaic {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(140px, 17vw, 210px);
}
.plate {
  position: relative;
  overflow: hidden;
  background: var(--surface-3);
  contain: paint;
}
.plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Scale on hover is a compositor transform on an already-rasterised layer. */
  transform: scale(1.001);
  transition: transform 900ms var(--ease), filter 480ms var(--ease);
  filter: grayscale(.55) brightness(.82);
}
.plate:hover img { transform: scale(1.05); filter: grayscale(0) brightness(.94); }
.plate figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(8,9,11,.9), transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
}
.plate--lead { grid-column: span 3; grid-row: span 2; }
.plate--tall { grid-column: span 3; grid-row: span 1; }
/* span 3, not 2 — at span 2 the pair left a third of the final row empty. */
.plate--wide { grid-column: span 3; grid-row: span 1; }
@media (max-width: 860px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 33vw; }
  .plate--lead { grid-column: span 2; grid-row: span 2; }
  .plate--tall, .plate--wide { grid-column: span 1; grid-row: span 1; }
}

/* ----------------------------------------------------------------- 10 TABS */
.tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  padding: 16px clamp(18px, 2.6vw, 34px);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--swift), background-color var(--swift);
  -webkit-tap-highlight-color: transparent;
}
.tab:first-child { border-left: 0; }
.tab:hover { color: var(--text-2); background-color: var(--surface); }
.tab[aria-selected="true"] {
  color: var(--brass);
  background-color: var(--brass-wash);
  box-shadow: inset 0 -1px 0 var(--brass);
}
.tab__n {
  margin-left: 8px;
  color: var(--text-3);
  font-size: 9px;
}
.tab[aria-selected="true"] .tab__n { color: var(--brass-line); }

/* Filtered cells: `display:none` removes them from layout entirely so the
   grid never carries hidden work. Entry fade is transform/opacity only.
   The swap animation is applied by JS on tab change ONLY — left on the base
   class it would fill-forward to opacity:1 at load and silently defeat the
   scroll reveal for every card on the page. */
.filterable[hidden] { display: none; }
.filterable.is-swap { animation: swap 380ms var(--ease) both; }
@keyframes swap {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- 11 MARQUEE */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  /* Duplicated set + -50% translate = a genuinely seamless loop.
     The original translated -50% over a SINGLE set, so it visibly gapped. */
  animation: slide var(--dur, 46s) linear infinite;
  animation-play-state: paused;      /* JS resumes only while on-screen */
  will-change: transform;
}
.marquee.is-live .marquee__track { animation-play-state: running; }
.marquee--rtl .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee__set { display: flex; align-items: center; }
.marquee__set li { padding-inline: clamp(22px, 3vw, 48px); }
.marquee__set img {
  height: 34px;
  width: auto;
  opacity: 1;
  transition: opacity var(--swift);
}
.marquee__set img:hover { opacity: 1; }

/* --------------------------------------------------------------- 12 CONTACT */
.contact { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); } }
.contact__pane { background: var(--surface); padding: clamp(30px, 3.6vw, 58px); }

.hubs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 32px; }
@media (min-width: 560px) { .hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub {
  background: var(--surface);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color var(--swift);
}
.hub:hover { background: var(--surface-2); }
.hub__addr { font-size: 13.5px; color: var(--text-2); font-weight: 300; line-height: 1.65; flex: 1; }
.hub__go { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }

.dial { margin-top: 34px; display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.dial__row {
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 17px;
}
.dial__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.dial__value { font-size: 15px; color: var(--text); transition: color var(--swift); }
a.dial__value:hover { color: var(--brass); }

.social { display: flex; flex-direction: column; }
.social a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color var(--swift);
}
.social a span { transition: transform 300ms var(--ease); color: var(--brass); }
.social a:hover { color: var(--text); }
.social a:hover span { transform: translateX(6px); }

/* ------------------------------------------------------------ 13 NEXT PHASE */
/* Replaces the old infinitely-pulsing box-shadow card, which forced a full
   repaint every frame of every page, forever, even when scrolled away. */
.next {
  display: block;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(34px, 4.4vw, 66px);
  transition: background-color 260ms var(--ease), border-color 260ms var(--ease);
}
.next:hover { background-color: var(--surface-2); border-color: var(--brass-line); }
.next__title {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  margin-block: 20px 14px;
}
.next__go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}
.next__go span { transition: transform 320ms var(--ease); }
.next:hover .next__go span { transform: translateX(8px); }

/* ---------------------------------------------------------------- 14 FOOTER */
.footer { border-top: 1px solid var(--line); padding-block: clamp(42px, 5vw, 68px); }
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 42px;
  align-items: center;
  justify-content: space-between;
}
.footer__note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.footer__note a { transition: color var(--swift); }
.footer__note a:hover { color: var(--brass); }

/* ----------------------------------------------------- 15 FLOATING ACTIONS */
.wa {
  position: fixed;
  right: clamp(16px, 2.4vw, 34px);
  bottom: clamp(16px, 2.4vw, 34px);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: border-color var(--swift), background-color var(--swift), transform 260ms var(--ease);
}
.wa:hover { border-color: var(--brass); background: var(--surface-3); transform: translateY(-2px); }
.wa svg { width: 15px; height: 15px; fill: var(--brass); flex: none; }
body:has(.consent.is-open) .wa { transform: translateY(-72px); }
@media (max-width: 560px) {
  .wa__text { display: none; }
  .wa { padding: 15px; }
  .wa svg { width: 20px; height: 20px; }
}

/* --------------------------------------------------------------- 16 CONSENT */
/* Hidden by default; JS only *opens* it. The original rendered it visible and
   hid it after paint, so returning visitors saw a flash on every page load. */
.consent {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: var(--surface);
  border-top: 1px solid var(--brass-line);
  padding: 15px var(--gutter);
}
.consent.is-open { display: block; animation: rise 420ms var(--ease) both; }
.consent__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
}
.consent p { font-size: 12px; color: var(--text-2); font-weight: 300; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--brass-line);
  color: var(--brass);
  padding: 9px 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--swift), border-color var(--swift), color var(--swift);
}
.btn-ghost:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }

/* ----------------------------------------------------------------- 17 VIDEO */
/* Facade pattern: 11.3 MB of MP4 is never fetched until the viewer asks. */
.reels { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 860px) { .reels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reel { background: var(--surface); padding: clamp(16px, 1.6vw, 22px); contain: content; }
.reel__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line);
  cursor: pointer;
}
.reel__stage img, .reel__stage video { width: 100%; height: 100%; }
/* Source reels are 16:9 and 4:3 — `contain` letterboxes rather than crops. */
.reel__stage video { object-fit: contain; background: #000; }
.reel__stage img { object-fit: cover; filter: grayscale(.3) brightness(.78); transition: filter 420ms var(--ease); }
.reel__stage:hover img { filter: grayscale(0) brightness(.9); }
.reel__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}
.reel__play i {
  width: 68px; height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brass);
  background: rgba(8, 9, 11, .72);
  transition: background-color var(--swift), border-color var(--swift), transform 300ms var(--ease);
}
.reel__play:hover i { background: var(--brass); border-color: var(--brass); transform: scale(1.06); }
.reel__play svg { width: 14px; height: 16px; fill: var(--brass); transition: fill var(--swift); }
.reel__play:hover svg { fill: var(--ink); }
.reel__caption { padding: 20px 6px 6px; border-top: 1px solid var(--line); margin-top: 18px; }
.reel__name { font-size: 1.42rem; color: var(--text); margin-bottom: 7px; }

/* ------------------------------------------------------------ 18 CALCULATOR */
.calc { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 940px) { .calc { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.calc__pane {
  background: var(--surface);
  padding: clamp(28px, 3.2vw, 50px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.calc__pane--out { align-items: center; }

.field { padding-block: 20px; border-top: 1px solid var(--line); }
.field:first-of-type { border-top: 0; padding-top: 8px; }
.field__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.field__label { font-size: 13px; color: var(--text-2); font-weight: 300; }
.field__num {
  width: 132px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--swift);
  -moz-appearance: textfield;
  appearance: textfield;
}
.field__num::-webkit-outer-spin-button,
.field__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field__num:focus { border-color: var(--brass); outline: none; }
.field__words {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .09em;
  color: var(--brass);
  margin-top: 11px;
  min-height: 1.1em;
  opacity: .82;
}

/* Range: transform-free, paint-light, no shadows. */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  display: block;
}
.range::-webkit-slider-runnable-track { height: 1px; background: var(--line-2); }
.range::-moz-range-track            { height: 1px; background: var(--line-2); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  margin-top: -6px;
  background: var(--brass);
  border: 0;
  border-radius: 50%;
  transition: transform 140ms var(--ease);
}
.range::-moz-range-thumb {
  width: 13px; height: 13px;
  background: var(--brass);
  border: 0;
  border-radius: 50%;
}
.range:active::-webkit-slider-thumb { transform: scale(1.35); }

/* Inline SVG donut — replaces a 200 KB Chart.js dependency and four
   canvas re-renders per pointermove. `pathLength=100` makes the dash
   arithmetic pure percentages. */
.donut { width: clamp(170px, 20vw, 208px); height: auto; }
.donut circle { fill: none; stroke-width: 8; }
.donut__bed { stroke: var(--surface-3); }
.donut__arc {
  stroke: var(--brass);
  stroke-linecap: butt;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray 420ms var(--ease);
}
.donut__pct {
  fill: var(--text);
  font-family: var(--font-display);
  font-size: 21px;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.donut__cap {
  fill: var(--text-3);
  font-family: var(--font-mono);
  font-size: 6.4px;
  letter-spacing: .18em;
  text-anchor: middle;
  text-transform: uppercase;
}
.calc__headline {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  color: var(--text);
  margin-top: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.calc__caption { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.calc__split { width: 100%; margin-top: 30px; border-top: 1px solid var(--line); }
.calc__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.calc__line dt { color: var(--text-2); font-weight: 300; }
.calc__line dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.calc__line dd.is-gain { color: var(--brass); }

/* ----------------------------------------------------------------- 19 PROSE */
.prose { max-width: 74ch; color: var(--text-2); font-size: 15.5px; font-weight: 300; line-height: 1.82; }
.prose h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  color: var(--text);
  margin-top: 52px;
  margin-bottom: 16px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.prose > :first-child { margin-top: 0; }
.prose p { margin-bottom: 18px; }
.prose ul { margin-bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.prose li { position: relative; padding-left: 20px; }
.prose li::before { content: ""; position: absolute; left: 0; top: .82em; width: 8px; height: 1px; background: var(--brass); }
.prose strong { color: var(--text); font-weight: 500; }
.prose .callout {
  border-left: 1px solid var(--brass);
  padding: 4px 0 4px 22px;
  color: var(--text);
  font-weight: 400;
}

/* ------------------------------------------------------------------ 20 ERROR */
.void {
  min-height: 82vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 20px;
  padding: var(--gutter);
}
.void__code {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 20vw, 13rem);
  line-height: .85;
  color: var(--surface-3);
  letter-spacing: -.04em;
}
.btn {
  display: inline-block;
  margin-top: 14px;
  padding: 14px 34px;
  border: 1px solid var(--brass-line);
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background-color var(--swift), color var(--swift), border-color var(--swift);
}
.btn:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }

/* ----------------------------------------------------------------- 21 MOTION */
/* Scroll reveals. IntersectionObserver adds `.in`; the element is then
   unobserved forever. Only opacity + transform — both compositor-only. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 720ms var(--ease) var(--d, 0ms),
              transform 720ms var(--ease) var(--d, 0ms);
}
/* Never let a reveal hide content if JS fails to load. */
.no-js .reveal { opacity: 1; transform: none; }

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

/* ------------------------------------------------------------------ 22 PRINT */
@media print {
  .header, .wa, .consent, .marquee, .next { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================================
   PART II — CONVERSION, PROOF & TRUST COMPONENTS
   Same contract as above: transform/opacity only, no backdrop-filter, no
   transitioned box-shadow, hairlines carry all structure.
   ========================================================================= */

/* ------------------------------------------------------- 23 TESTIMONIAL RAIL */
/* Rewritten. The previous `.tc-glass` transitioned an inset box-shadow and
   declared `.tc-wrap` twice with conflicting display modes. Structure now
   comes from the same hairline bed every other grid on the site uses. */
.tc-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-top: clamp(30px, 4vw, 48px);
}
.tc-track {
  display: flex;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  overscroll-behavior-x: contain;
}
.tc-track::-webkit-scrollbar { display: none; }

.tc-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--surface);
  padding: clamp(28px, 3.4vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  contain: content;
  transition: background-color 220ms var(--ease);
}
.tc-card:hover { background-color: var(--surface-2); }
@media (min-width: 768px)  { .tc-card { flex-basis: 50%; } }
@media (min-width: 1120px) { .tc-card { flex-basis: 33.3333%; } }

.tc-quote {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.6vw, 1.3rem);
  line-height: 1.58;
  font-style: italic;
  color: var(--text);
  font-weight: 300;
}
/* Hanging brass quote mark — painted once, never animated. */
.tc-quote::before {
  content: "\201C";
  display: block;
  font-style: normal;
  font-size: 2.6em;
  line-height: 1;
  height: .62em;
  margin-bottom: .1em;
  color: var(--brass);
  opacity: .45;
}
.tc-foot { border-top: 1px solid var(--line); padding-top: 20px; }
.tc-author { font-family: var(--font-ui); font-weight: 500; color: var(--text); font-size: 14.5px; }
.tc-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 7px;
}
.tc-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.tc-stars svg { width: 12px; height: 12px; fill: var(--brass); }

.tc-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color var(--swift), border-color var(--swift), color var(--swift);
}
.tc-arrow:hover { background: var(--surface-3); border-color: var(--brass); color: var(--brass); }
.tc-arrow svg { width: 18px; height: 18px; }
.tc-prev { left: -22px; }
.tc-next { right: -22px; }
@media (max-width: 900px) {
  .tc-prev, .tc-next { display: none; }
}

/* ---------------------------------------------------------- 24 TRUST STRIP */
/* Sits immediately under the hero. Regulatory identity is the first thing a
   serious prospect looks for on a financial site. */
.trust {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.trust__grid {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 22px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(24px, 4vw, 56px);
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-2);
}
.trust__item svg { width: 13px; height: 13px; fill: none; stroke: var(--brass); stroke-width: 1.6; flex: none; }

/* ------------------------------------------------------------ 25 STAT BAND */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat {
  background: var(--surface);
  padding: clamp(26px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
  contain: content;
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.stat__suffix { font-size: .52em; letter-spacing: 0; }
.stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------- 26 PROCESS RAIL */
.steps {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: step;
}
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .steps { grid-template-columns: minmax(0, 1fr); } }
.step {
  position: relative;
  background: var(--surface);
  padding: clamp(28px, 3vw, 44px);
  /* `contain: content` would be the usual choice here, but it implies style
     containment, which scopes CSS counters to each element — every step then
     renders "01". Layout + paint gives the same isolation without that. */
  contain: layout paint;
  transition: background-color 220ms var(--ease);
}
.step:hover { background-color: var(--surface-2); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--brass);
  margin-bottom: 26px;
}
/* Connector tick — a static 1px mark, not a drawn line animation. */
.step::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 1px;
  background: var(--brass);
}
.step__title { font-size: clamp(1.24rem, 1.8vw, 1.5rem); color: var(--text); margin-bottom: 12px; }
.step__body { color: var(--text-2); font-size: 14px; line-height: 1.72; font-weight: 300; }

/* ----------------------------------------------------------------- 27 FAQ */
/* Native <details>. No JS, no ARIA to get wrong, keyboard-accessible free,
   and the answer text is in the DOM at load — which is what both Google and
   every LLM crawler actually reads. */
.faq {
  border-top: 1px solid var(--line);
  max-width: 92ch;
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-block: clamp(20px, 2.2vw, 28px);
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.8vw, 1.42rem);
  font-weight: 300;
  line-height: 1.32;
  color: var(--text);
  transition: color var(--swift);
  -webkit-tap-highlight-color: transparent;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brass); }
.faq__q::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  margin-top: .45em;
  border-right: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  transform: rotate(45deg);
  transition: transform 260ms var(--ease);
}
.faq__item[open] .faq__q { color: var(--brass); }
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a {
  padding-bottom: clamp(22px, 2.4vw, 30px);
  max-width: 74ch;
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.8;
}
.faq__a p + p { margin-top: 14px; }
.faq__a a { color: var(--brass); border-bottom: 1px solid var(--brass-line); }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__a { animation: rise 320ms var(--ease) both; }
}

/* ---------------------------------------------------------------- 28 FORM */
.enquiry {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 980px) { .enquiry { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.enquiry__aside,
.enquiry__body { background: var(--surface); padding: clamp(30px, 3.4vw, 54px); }
.enquiry__aside { display: flex; flex-direction: column; gap: 20px; }
.enquiry__pitch { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 300; line-height: 1.15; }
.enquiry__pitch em { font-style: italic; color: var(--brass); }
.enquiry__points { display: flex; flex-direction: column; gap: 11px; padding-top: 4px; }
.enquiry__points li {
  position: relative;
  padding-left: 19px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
  font-weight: 300;
}
.enquiry__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 7px; height: 1px;
  background: var(--brass);
}

.form { display: grid; gap: 20px; }
.form__row { display: grid; gap: 20px; }
@media (min-width: 560px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form__field { display: flex; flex-direction: column; gap: 9px; }
.form__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.form__label span { color: var(--brass); }
.form__input,
.form__select,
.form__area {
  width: 100%;
  padding: 13px 15px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 300;
  transition: border-color var(--swift), background-color var(--swift);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.form__area { resize: vertical; min-height: 108px; line-height: 1.6; }
.form__select {
  cursor: pointer;
  /* Inline chevron — a data URI, so no extra request and no icon font. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c2a264' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 11px;
  padding-right: 46px;
}
.form__select option { background: var(--surface-2); color: var(--text); }
.form__input::placeholder,
.form__area::placeholder { color: var(--text-3); }
.form__input:focus,
.form__select:focus,
.form__area:focus { border-color: var(--brass); background: var(--surface-3); outline: none; }
.form__input:user-invalid,
.form__area:user-invalid { border-color: #8c4a4a; }

.form__submit {
  justify-self: start;
  margin-top: 6px;
  padding: 15px 40px;
  background: var(--brass);
  border: 1px solid var(--brass);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--swift), color var(--swift);
}
.form__submit:hover { background: var(--brass-lift); border-color: var(--brass-lift); }
.form__submit[disabled] { opacity: .55; cursor: progress; }
.form__fine { font-size: 11.5px; color: var(--text-3); font-weight: 300; line-height: 1.6; }
.form__note {
  display: none;
  padding: 14px 18px;
  border: 1px solid var(--brass-line);
  background: var(--brass-wash);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 300;
}
.form__note.is-shown { display: block; animation: rise 380ms var(--ease) both; }
.form__note.is-error { border-color: #8c4a4a; background: rgba(140, 74, 74, .12); }
/* Honeypot — off-screen, never focusable, invisible to real users. */
.form__trap { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------- 29 BREADCRUMBS */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: clamp(22px, 3vw, 34px);
}
.crumbs a { transition: color var(--swift); }
.crumbs a:hover { color: var(--brass); }
.crumbs li { display: flex; align-items: center; gap: 9px; }
.crumbs li + li::before { content: "/"; color: var(--line-3); }
.crumbs [aria-current] { color: var(--text-2); }

/* ------------------------------------------------------------ 30 CTA BAND */
.band {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(36px, 4.6vw, 72px);
  display: grid;
  gap: 26px;
  align-items: center;
}
@media (min-width: 900px) { .band { grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; } }
.band__title { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
.band__title em { font-style: italic; color: var(--brass); }
/* `.btn` carries margin-top:14px for use on its own. Inside an action row that
   margin applied to the outlined button but not the solid one, so the pair sat
   14px out of alignment and flex-stretch left them different heights. */
.band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}
.band__actions .btn,
.band .btn { margin-top: 0; }

/* Flat #c2a264 across a button-sized area reads as khaki, not brass — which is
   why the solid CTA looked heavier and cheaper than everything around it. A
   shallow top-lit gradient makes the same token read as a metal surface. It is
   a static background, painted once and never animated, so the performance
   contract at the top of this file still holds. */
.btn--solid {
  background: linear-gradient(180deg, var(--brass-lift) 0%, var(--brass) 68%);
  border-color: var(--brass-lift);
  color: var(--ink);
  font-weight: 500;
  margin-top: 0;
}
.btn--solid:hover {
  background: linear-gradient(180deg, #e3cb98 0%, var(--brass-lift) 68%);
  border-color: #e3cb98;
  color: var(--ink);
}

/* --------------------------------------------------------- 31 LINK COLUMNS */
/* A real footer sitemap. Internal linking is the cheapest ranking signal
   there is, and it gives a first-time visitor a map of the firm. */
.footer__cols {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  padding-bottom: clamp(38px, 4.4vw, 60px);
  margin-bottom: clamp(30px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.footer__col h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 11px; }
.footer__col a {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text-2);
  transition: color var(--swift);
}
.footer__col a:hover { color: var(--text); }
.footer__blurb { font-size: 13px; font-weight: 300; line-height: 1.72; color: var(--text-2); max-width: 34ch; }
.footer__mark { margin-bottom: 18px; }
.footer__mark img { height: 28px; width: auto; opacity: .9; }

/* ------------------------------------------------------------ 32 DISCLOSURE */
/* AMFI / IRDAI disclosure. Legally expected of an Indian distributor and a
   strong trust signal in its own right. Deliberately quiet, never hidden. */
.disclosure {
  border-top: 1px solid var(--line);
  padding-block: clamp(28px, 3.2vw, 42px);
}
.disclosure__body {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  font-size: 11.5px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--text-3);
  max-width: min(var(--measure), 100%);
}
.disclosure__body p + p { margin-top: 10px; }
.disclosure__body strong { color: var(--text-2); font-weight: 500; }

/* -------------------------------------------------------------- 33 INSIGHTS */
.posts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 800px)  { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post {
  background: var(--surface);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  contain: content;
  transition: background-color 220ms var(--ease);
}
.post:hover { background-color: var(--surface-2); }
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-3);
}
.post__meta .is-topic { color: var(--brass); }
.post__title { font-size: clamp(1.3rem, 1.9vw, 1.6rem); color: var(--text); }
.post__dek { color: var(--text-2); font-size: 14px; line-height: 1.72; font-weight: 300; flex: 1; }
.post__go {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 8px;
}
.post__go span { display: inline-block; transition: transform 300ms var(--ease); }
.post:hover .post__go span { transform: translateX(6px); }

/* --------------------------------------------------------- 34 FEATURE PAIRS */
/* Two-column "definition" rows. Written as <dl> so the Q→A relationship is
   machine-readable, which is exactly what answer engines extract. */
.defs { border-top: 1px solid var(--line); }
.defs__row {
  display: grid;
  gap: 10px clamp(30px, 5vw, 80px);
  padding-block: clamp(24px, 2.8vw, 36px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) { .defs__row { grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); } }
.defs__term { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 300; color: var(--text); }
.defs__desc { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.78; font-weight: 300; }
.defs__desc strong { color: var(--text); font-weight: 500; }

/* ---------------------------------------------------------- 35 QUIET UTILS */
.stack-sm > * + * { margin-top: 16px; }
.center { text-align: center; }
.mt-band { margin-top: clamp(40px, 5vw, 74px); }
.pad-0 { padding-top: 0; }

/* ============================================================================
   PART III — SMALL SCREENS
   Most of this practice's traffic arrives on a phone, and a good share of its
   clients are planning retirement rather than their first SIP. The desktop
   type scale is an editorial choice that assumes arm's-length viewing and
   good near vision; neither holds here. Everything below is about legibility,
   thumbs and the two actions a local financial practice is actually contacted
   through.
   ========================================================================= */

/* -------------------------------------------------------- 36 TOUCH TYPOGRAPHY */
@media (max-width: 760px) {
  /* The 10px mono system steps up one notch. Letter-spacing eases at the same
     time so the extra size costs no extra lines. */
  .eyebrow { font-size: 11px; letter-spacing: .17em; }
  .trust__item, .stat__label, .tc-meta, .post__meta, .post__go, .next__go,
  .footer__note, .footer__col h3, .crumbs, .dial__label, .hub__go, .tab,
  .calc__caption, .field__words, .form__label, .ribbon__val, .social a,
  .plate figcaption, .reel__caption .eyebrow, .btn, .btn-ghost, .form__submit {
    font-size: 11px;
    letter-spacing: .15em;
  }

  /* Body copy up to 15px. Below that, long-form reading on a phone is work. */
  .cell__body, .step__body, .person__bio, .post__dek, .hub__addr,
  .faq__a, .spec li, .enquiry__points li, .defs__desc { font-size: 15px; }
  .lede, .prose { font-size: 15.5px; }
  .footer__col a, .footer__blurb { font-size: 14.5px; }
}

/* ---------------------------------------------------- 37 iOS INPUT ZOOM FIX */
/* Safari on iOS zooms the whole page when a focused field is under 16px. The
   form fields were 14.5px and the calculator inputs 14px, so every tap on a
   field yanked the layout sideways. 16px is the threshold, not a preference. */
@media (max-width: 860px) {
  .form__input,
  .form__select,
  .form__area,
  .field__num { font-size: 16px; }
  .field__num { width: 122px; padding-inline: 10px; }
}

/* --------------------------------------------------------- 38 TAP TARGETS */
@media (max-width: 760px) {
  /* Calling is the dominant conversion path on a phone. A 19px tap target for
     the office number is the wrong place to be economical. */
  .dial__row { padding-block: 15px; }
  .dial__value { font-size: 17px; display: inline-block; padding-block: 5px; }

  .social a { padding-block: 21px; }
  .footer__col ul { gap: 0; }
  .footer__col a { display: block; padding-block: 10px; }

  .btn, .btn-ghost, .form__submit { padding-block: 16px; }

  /* Stacked, full-width CTAs. Side by side at this width they wrapped into a
     ragged two-line arrangement of unequal buttons. */
  .band__actions { flex-direction: column; align-items: stretch; }
  .band__actions .btn { display: block; text-align: center; margin-top: 0; }
  .form__submit { width: 100%; }

  /* A 13px slider thumb is a fingernail target. */
  .range { height: 34px; }
  .range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -9.5px; }
  .range::-moz-range-thumb { width: 20px; height: 20px; }

  /* A full-bleed 4:5 portrait pushed the founders' actual bios a screen down. */
  .person__portrait { max-width: 190px; }

  .faq__q { padding-block: 20px; }
}

/* ------------------------------------------------------ 39 MOBILE ACTION BAR */
/* Call and WhatsApp, permanently in reach of a thumb. This replaces the
   floating bubble on phones rather than sitting alongside it — two competing
   floating actions is one too many, and the bubble only offered one of them. */
.callbar { display: none; }

@media (max-width: 760px) {
  .callbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 85;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface);
    border-top: 1px solid var(--line-2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .callbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 16px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  .callbar a + a { border-left: 1px solid var(--line); }
  .callbar svg { width: 15px; height: 15px; flex: none; }
  .callbar__call { color: var(--ink); background: var(--brass); }
  .callbar__call svg { fill: var(--ink); }
  .callbar__wa { color: var(--text); }
  .callbar__wa svg { fill: var(--brass); }

  .wa { display: none; }
  /* Clear the bar so it never covers the last line of the page. */
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
  .consent { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------ 40 MOBILE HERO SCALE */
/* The desktop clamp bottoms out at 3.1rem, which on a phone leaves the
   masthead floating in the middle of the screen with no presence. Phones get
   their own curve so the wordmark actually fills the width it has. */
@media (max-width: 760px) {
  .hero__title {
    font-size: clamp(3.4rem, 17vw, 5.2rem);
    letter-spacing: -.03em;
  }
  .hero { padding-block: clamp(48px, 9vh, 90px) clamp(40px, 6vh, 64px); }
  .hero__sub { margin-top: 26px; }

  /* A 30px anchor around the logo is under the comfortable tap floor. */
  .header__mark { display: flex; padding-block: 7px; }
}

/* --------------------------------------------------- 41 MOBILE CALCULATOR */
/* At 390px the fixed 132px number field left the label ~156px, which is a few
   pixels short of "Monthly Investment (₹)" — so every label wrapped. Trimming
   the field and the pane padding buys the line back. */
@media (max-width: 560px) {
  .calc__pane { padding-inline: 22px; }
  .field__num { width: 106px; }
  .field__row { gap: 12px; }
  .calc__headline { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
}

/* ------------------------------------------------- 42 REMAINING TAP TARGETS */
@media (max-width: 760px) {
  /* The office phone and email are the highest-intent links on the site. */
  .dial__value { padding-block: 10px; }

  /* The calculator hero's 01–04 links are navigation, not decoration. */
  .hero__meta a.eyebrow { padding-block: 12px; }

  /* 9px inside the filter tabs is below the readable floor on a phone. */
  .tab__n { font-size: 10px; }

  .range { height: 40px; }
  .range::-webkit-slider-thumb { margin-top: -9.5px; }
}