/* ============================================================
   aniketbhardwaj-site — shared stylesheet
   1. Tokens
   2. Base
   3. Header + navigation  (matches the live 4ab.in header exactly:
      brand Poppins 23px #1B2A5E/#C9A84C, menu Roboto 16px/600 #7A7A7A,
      hover/active #61CE70, dropdown links Roboto 13px/500 #33373D)
   4. Footer
   5. "AB Editorial" premium component library (ab-*) shared by
      every redesigned page so the whole site reads as one system.
   ============================================================ */

/* ---------- 1. Tokens ----------
   Light is the default. Dark arrives two ways so both the OS setting and the
   on-page toggle work: the media query covers "system", and an explicit
   [data-theme] attribute wins over it in either direction.
   Brand constants (gold, green, the dark-panel navy) never change; only
   surface/ink tokens are themed. --navy IS themed, because page CSS uses it as
   a text colour — permanently dark panels use --panel-1/--panel-2 instead. */
:root {
  /* brand constants */
  --gold: #C9A84C;
  --gold-soft: #E8D9AE;
  --gold-ring: #D4A84B;
  --green: #61CE70;
  --panel-1: #1B2A5E;
  --panel-2: #131E45;
  --navy-deep: #131E45;

  /* themed surfaces + ink */
  --page-bg: #FFFFFF;
  --card: #FFFFFF;
  --card-2: #FFFFFF;
  --paper: #FAF9F6;
  --line: #E7E2D6;
  --line-soft: #F0EDE4;
  --ink: #1C2130;
  --body-c: #3A4152;
  --muted: #6B7280;
  --navy: #1B2A5E;            /* heading / link ink */
  --nav-c: #7A7A7A;
  --tint: rgba(201, 168, 76, .14);
  --sheen: rgba(201, 168, 76, .05);

  --font-brand: 'Poppins', sans-serif;
  --font-nav: 'Roboto', sans-serif;
  --font-display: Georgia, 'Times New Roman', Times, serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --wrap: 1360px;
  --shadow-soft: 0 10px 30px rgba(27, 42, 94, .10);
  --shadow-lift: 0 18px 45px rgba(27, 42, 94, .16);
  --radius: 18px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #0C1220;
    --card: #141C30;
    --card-2: #18213A;
    --paper: #101829;
    --line: #27324D;
    --line-soft: #1E2740;
    --ink: #EEF2F8;
    --body-c: #C2CDE1;
    --muted: #8D99AF;
    --navy: #DCE6F7;
    --nav-c: #A8B3C6;
    --tint: rgba(201, 168, 76, .20);
    --sheen: rgba(201, 168, 76, .07);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, .45);
    --shadow-lift: 0 18px 45px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --page-bg: #0C1220;
  --card: #141C30;
  --card-2: #18213A;
  --paper: #101829;
  --line: #27324D;
  --line-soft: #1E2740;
  --ink: #EEF2F8;
  --body-c: #C2CDE1;
  --muted: #8D99AF;
  --navy: #DCE6F7;
  --nav-c: #A8B3C6;
  --tint: rgba(201, 168, 76, .20);
  --sheen: rgba(201, 168, 76, .07);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lift: 0 18px 45px rgba(0, 0, 0, .55);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* the theme cross-fade is decoration; do not animate it for these users */
  body { transition: none; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-c);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}

img { max-width: 100%; height: auto; }

a { color: var(--navy); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--panel-1);
  color: #fff;
  padding: 10px 18px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Available to screen readers and search engines, invisible on screen.
   Used where the source design has no visible page heading. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Header + navigation ---------- */
.site-header {
  background: var(--page-bg);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  z-index: 50;
}

.site-header__inner {
  /* wide enough that the full-size icon bar + theme toggle fit on one row */
  max-width: 1560px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 112px;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-brand__mark {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2.5px solid var(--gold-ring);
}

.site-brand__text { display: flex; flex-direction: column; }

.site-brand__name {
  font-family: var(--font-brand);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--navy);
}
.site-brand__name b { font-weight: 700; color: var(--gold); }

.site-brand__tagline {
  font-family: var(--font-brand);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--muted);
  margin-top: 2px;
}

/* -- primary nav (desktop) -- */
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 13px;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--nav-c);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .18s ease;
  white-space: nowrap;
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__item:hover > .nav__link,
.nav__link[aria-current="page"] { color: var(--green); }

.nav__item--contact > .nav__link { color: var(--green); }

/* top-level menu icons */
.nav__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
  transition: opacity .18s ease, transform .18s ease;
}
.nav__link:hover .nav__icon,
.nav__item:hover > .nav__link .nav__icon,
.nav__link[aria-current="page"] .nav__icon {
  opacity: 1;
  transform: translateY(-1px);
}

.nav__caret {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  fill: currentColor;
  transition: transform .18s ease;
}

/* -- mega menu panels (desktop: hover / focus-within) -- */
.nav__mega {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card);
  border-radius: 0 0 16px 16px;
  box-shadow: var(--shadow-lift);
  padding: 18px 20px 20px;
  min-width: 265px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.nav__mega::before {                /* fine gold top hairline */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.nav__mega--right { left: auto; right: 0; }
.nav__mega--right::before { background: linear-gradient(90deg, transparent, var(--gold)); }

.nav__item--has-sub:hover > .nav__mega,
.nav__item--has-sub:focus-within > .nav__mega,
.nav__item--has-sub.is-open > .nav__mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__item--has-sub:hover > .nav__link .nav__caret { transform: rotate(180deg); }

.nav__mega-title {
  margin: 0 0 10px;
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav__mega-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(225px, 1fr);
  gap: 2px 10px;
}
.nav__mega--2 .nav__mega-grid { grid-template-columns: repeat(2, minmax(225px, 1fr)); }

.nav__sublink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 11px;
  font-family: var(--font-nav);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.nav__sublink:hover,
.nav__sublink:focus-visible,
.nav__sublink[aria-current="page"] {
  color: var(--navy);
  background: var(--paper);
}

.nav__mega-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(201, 168, 76, .16), rgba(27, 42, 94, .07));
  color: var(--navy);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav__mega-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav__mega-icon svg .i-fill { fill: currentColor; stroke: none; }

.nav__sublink:hover .nav__mega-icon,
.nav__sublink:focus-visible .nav__mega-icon,
.nav__sublink[aria-current="page"] .nav__mega-icon {
  background: linear-gradient(135deg, var(--gold), #B08F35);
  color: #fff;
  transform: scale(1.06);
}

/* theme toggle + hamburger sit together on the right */
.site-header__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  order: 3;
}

/* -- theme toggle --
   One button cycling light -> dark -> system. The icons are stacked and
   swapped by CSS so no JavaScript is needed to keep them in sync. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--navy);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.theme-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* show exactly one icon for the active mode */
.theme-toggle .ti-dark,
.theme-toggle .ti-system { display: none; }
:root[data-theme="dark"] .theme-toggle .ti-light { display: none; }
:root[data-theme="dark"] .theme-toggle .ti-dark { display: block; }
:root[data-theme="system"] .theme-toggle .ti-light,
:root[data-theme="system"] .theme-toggle .ti-dark { display: none; }
:root[data-theme="system"] .theme-toggle .ti-system { display: block; }

/* -- hamburger (hidden on desktop) -- */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 14px;
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* -- compact desktop tier --
   With an icon on every top-level item AND the theme toggle, the full-size
   bar needs ~1620px of viewport. Between 1240px and 1619px everything tightens
   just enough to stay on one row; below 1240px the hamburger takes over. */
@media (min-width: 1240px) and (max-width: 1619px) {
  .site-header__inner { gap: 16px; padding-inline: 18px; }
  .site-brand { gap: 11px; }
  .site-brand__mark { width: 54px; height: 54px; }
  .site-brand__name { font-size: 20px; }
  .site-brand__tagline { font-size: 11.5px; }

  .nav__link { padding: 13px 8px; font-size: 14.5px; gap: 5px; }
  .nav__icon { width: 15px; height: 15px; }
  .nav__caret { width: 9px; height: 9px; }
}

/* -- mobile nav -- */
@media (max-width: 1239px) {
  .site-header__inner { min-height: 0; padding: 14px 18px; flex-wrap: wrap; }
  .site-brand__mark { width: 52px; height: 52px; }
  .site-brand__name { font-size: 19px; }
  .site-brand__tagline { font-size: 11px; }

  .nav-toggle { display: inline-flex; }

  /* the drawer opens BELOW the theme/hamburger row, not between them */
  .site-header__controls { order: 2; }
  .nav { order: 4; }
  .site-brand { flex: 1 1 auto; min-width: 0; }

  .nav {
    display: none;
    width: 100%;
    padding: 6px 0 14px;
  }
  .nav.is-open { display: block; }

  .nav__list { display: block; }
  .nav__item { position: static; }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 13px 6px;
    font-size: 16px;
    border-bottom: 1px solid var(--line-soft);
  }

  .nav__mega {
    position: static;
    min-width: 0;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    visibility: hidden;
    transform: none;
    display: none;
    padding: 4px 0 8px 6px;
  }
  .nav__mega::before { display: none; }
  .nav__mega-title { display: none; }
  .nav__mega--2 .nav__mega-grid { grid-template-columns: 1fr; }
  .nav__item--has-sub.is-open > .nav__mega { display: block; visibility: visible; }
  .nav__item--has-sub.is-open > .nav__link .nav__caret { transform: rotate(180deg); }

  .nav__sublink { font-size: 14px; padding: 10px 8px; }
}

/* ---------- 4. Footer ---------- */
.site-footer {
  margin-top: 90px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  text-align: center;
  padding: 34px 20px 38px;
}
.site-footer p {
  margin: 4px 0;
  font-family: var(--font-nav);
  font-size: 14px;
  color: var(--muted);
}
.site-footer p:first-child {
  color: var(--navy);
  font-weight: 500;
}
.site-footer::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: var(--gold);
  margin: 0 auto 18px;
}

/* ============================================================
   5. "AB Editorial" component library  (ab-*)
   Shared vocabulary for every redesigned page.
   ============================================================ */

.ab-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.ab-page { background: var(--page-bg); }

/* -- hero panel: the identical premium opening of every page -- */
.ab-hero {
  max-width: var(--wrap);
  margin: 6px auto 0;
  padding: 0 24px;
}
.ab-hero__panel {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(201, 168, 76, .28), transparent 60%),
    radial-gradient(700px 380px at -10% 110%, rgba(97, 206, 112, .12), transparent 55%),
    linear-gradient(135deg, var(--panel-1) 0%, var(--panel-2) 100%);
  color: #fff;
  padding: clamp(48px, 7vw, 92px) clamp(26px, 6vw, 84px);
}
.ab-hero__panel::after {           /* fine gold top hairline */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .9;
}

.ab-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 22px;
}
.ab-kicker::before {
  content: "";
  width: 34px;
  height: 1.5px;
  background: var(--gold);
}

.ab-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.ab-hero__title em { font-style: italic; color: var(--gold-soft); }

.ab-hero__lede {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
  max-width: 88ch;
  margin: 0;
}

.ab-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}
.ab-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .04);
}
.ab-chip b { color: var(--gold-soft); font-weight: 600; }

/* -- section scaffolding -- */
.ab-s { margin-top: clamp(64px, 9vw, 110px); }

.ab-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ab-eyebrow i {
  font-style: normal;
  color: var(--gold);
  font-weight: 600;
}
.ab-eyebrow s {
  flex: 0 0 44px;
  height: 1.5px;
  background: var(--gold);
  text-decoration: none;
}
.ab-eyebrow b { font-weight: 600; color: var(--ink); }

.ab-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 18px;
}
.ab-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 12px;
}

.ab-ruled { position: relative; padding-bottom: 16px; }
.ab-ruled::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: var(--gold);
}

.ab-lede {
  font-size: 18px;
  line-height: 1.8;
  color: var(--body-c);
}

/* -- prose: fills its card; two columns once there is room, so long passages
      never run as one very wide line -- */
.ab-flow { max-width: none; }
@media (min-width: 1100px) {
  .ab-flow--wide {
    columns: 2;
    column-gap: 56px;
  }
  .ab-flow--wide > * { break-inside: avoid; }
}
.ab-flow p { margin: 0 0 1.15em; }
.ab-flow > * + h2, .ab-flow > * + h3 { margin-top: 1.6em; }
.ab-flow ul, .ab-flow ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.ab-flow li { margin: .35em 0; }
.ab-flow strong { color: var(--ink); }

/* -- cards + grids -- */
.ab-grid {
  display: grid;
  gap: 22px;
  margin-top: 34px;
}
.ab-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ab-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .ab-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ab-grid--2, .ab-grid--3 { grid-template-columns: 1fr; }
}

.ab-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: 0 2px 10px rgba(27, 42, 94, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ab-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold-soft);
}
.ab-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(201,168,76,.16), rgba(27,42,94,.08));
  color: var(--navy);
  font-size: 21px;
  margin-bottom: 16px;
}
.ab-card h3, .ab-card .ab-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 10px;
}
.ab-card p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--body-c); }

/* tinted variant */
.ab-card--paper { background: var(--paper); }

/* -- vertical timeline -- */
.ab-timeline {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  position: relative;
}
.ab-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--gold), var(--line));
}
.ab-timeline > li {
  position: relative;
  padding: 0 0 34px 44px;
}
.ab-timeline > li:last-child { padding-bottom: 0; }
.ab-timeline > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .15);
}
.ab-timeline h3 { margin: 0 0 8px; }
.ab-timeline p { margin: 0 0 .6em; }

/* -- ab-timeline--steps: the same list rendered as numbered STEP cards on a
      connecting rail, in the spirit of the projects page roadmap. Use for any
      sequence the reader is meant to follow in order. -- */
.ab-timeline--steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 26px;
  margin-top: 52px;
  padding: 0;
}
.ab-timeline--steps::before {          /* horizontal rail behind the nodes */
  content: "";
  position: absolute;
  top: -18px;
  left: 6%;
  right: 6%;
  bottom: auto;
  width: auto;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--green));
}
.ab-timeline--steps > li {
  position: relative;
  padding: 34px 28px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(27, 42, 94, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ab-timeline--steps > li:last-child { padding-bottom: 28px; }
.ab-timeline--steps > li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold-soft);
}
.ab-timeline--steps > li::before {     /* node sitting on the rail */
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 4px var(--tint);
}

/* the STEP n badge each card carries */
.ab-step__no {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), #B08F35);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .ab-timeline--steps { gap: 34px; margin-top: 34px; }
  .ab-timeline--steps::before { display: none; }
  .ab-timeline--steps > li::before { display: none; }
}

/* -- ab-panel: the card every section's content sits inside, so nothing on the
      site is loose text on the page background. -- */
.ab-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(26px, 3.4vw, 46px);
  box-shadow: 0 2px 12px rgba(27, 42, 94, .05);
  background-image: linear-gradient(180deg, var(--sheen) 0%, transparent 46%);
  position: relative;
  overflow: hidden;
}
.ab-panel::before {                    /* gold hairline along the top edge */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .55), transparent);
}
.ab-panel > :first-child { margin-top: 0; }
.ab-panel > :last-child { margin-bottom: 0; }
/* a section head sitting above its own panel */
.ab-panel + .ab-panel { margin-top: 26px; }

/* -- pull quote -- */
.ab-quote {
  margin: 40px 0 0;
  padding: 30px 34px;
  background: var(--paper);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ab-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.ab-quote footer {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* -- stats -- */
.ab-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
  margin-top: 34px;
  padding: 0;
  list-style: none;
}
.ab-stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  text-align: left;
}
.ab-stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  color: var(--navy);
}
.ab-stat span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted);
}

/* -- figure -- */
.ab-figure { margin: 38px 0 0; }
.ab-figure img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: block;
}
.ab-figure figcaption {
  margin-top: 12px;
  font-family: var(--font-nav);
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ab-figure figcaption::before {
  content: "";
  flex: 0 0 22px;
  height: 1.5px;
  background: var(--gold);
  transform: translateY(-3px);
}

/* -- callout -- */
.ab-callout {
  margin-top: 38px;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, #FFFDF6, #FBF7EC);
  border-radius: var(--radius);
  padding: 26px 30px;
}
.ab-callout h3 { margin-top: 0; }
.ab-callout p:last-child { margin-bottom: 0; }

/* -- embed panel (live tools inside a framed card) -- */
.ab-embed {
  margin-top: 38px;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--card);
}
.ab-embed__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--muted);
}
.ab-embed__bar::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 16px 0 0 var(--gold), 32px 0 0 var(--line);
  margin-right: 26px;
}
.ab-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}
.ab-embed__note {
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}
.ab-embed__note a { color: var(--navy); font-weight: 600; }

/* -- buttons + closing CTA panel -- */
.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ab-btn:hover { transform: translateY(-2px); }
.ab-btn--gold {
  background: linear-gradient(135deg, #D9B75C, var(--gold));
  color: #23294a;
  box-shadow: 0 8px 22px rgba(201, 168, 76, .35);
}
.ab-btn--ghost {
  border: 1.5px solid rgba(255, 255, 255, .35);
  color: #fff;
}
.ab-btn--ghost:hover { border-color: var(--gold-soft); color: var(--gold-soft); }

.ab-cta {
  max-width: var(--wrap);
  margin: clamp(70px, 10vw, 120px) auto 0;
  padding: 0 24px;
}
.ab-cta__panel {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  text-align: center;
  color: #fff;
  padding: clamp(46px, 6vw, 78px) 28px;
  background:
    radial-gradient(700px 320px at 50% -20%, rgba(201, 168, 76, .30), transparent 60%),
    linear-gradient(135deg, var(--panel-1) 0%, var(--panel-2) 100%);
}
.ab-cta__panel h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px);
  margin: 0 0 12px;
}
.ab-cta__panel p {
  color: rgba(255, 255, 255, .8);
  max-width: 56ch;
  margin: 0 auto 28px;
}
.ab-cta__row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* -- scroll reveal --
   Content is visible by DEFAULT. The hiding rule only applies once site.js has
   successfully armed the observer (html.rv-armed), and site.js drops that class
   again if anything goes wrong. A reveal animation must never be able to leave
   the page blank. */
html.rv-armed .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
html.rv-armed .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.rv-armed .rv { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Phone header — brand, theme toggle and menu button must all sit
   on ONE row. At 375px the full-size brand (272px) plus the labelled
   hamburger (144px) needed 440px against 339px of space, so the row
   wrapped. Below 760px the hamburger loses its label and the brand
   type steps down until the whole header fits on a single line.
   ============================================================ */
@media (max-width: 760px) {
  /* wrap stays ON so the open drawer can take its own line below;
     brand + controls now fit together, so they no longer wrap apart */
  .site-header__inner { padding: 12px 14px; gap: 10px; }
  .site-header__controls { gap: 8px; flex-shrink: 0; }

  .site-brand { gap: 9px; }
  .site-brand__mark { width: 42px; height: 42px; border-width: 2px; }
  .site-brand__name { font-size: 16px; }
  .site-brand__tagline { font-size: 9.5px; letter-spacing: 0; }

  /* icon-only, square */
  .theme-toggle { width: 36px; height: 36px; }
  .theme-toggle svg { width: 17px; height: 17px; }

  .nav-toggle {
    width: 38px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }
  .nav-toggle > span:last-child {   /* the word "Menu" */
    display: none;
  }

  /* the drawer still needs the full width, so it alone may wrap */
  .nav { flex: 1 0 100%; }
}

/* very narrow phones (320–400px) need one more step down */
@media (max-width: 400px) {
  .site-header__inner { padding: 10px 12px; gap: 8px; }
  .site-brand__mark { width: 38px; height: 38px; }
  .site-brand__name { font-size: 15px; }
  .site-brand__tagline { font-size: 8.5px; }
  .theme-toggle, .nav-toggle { width: 34px; height: 34px; }
}