/* ============================================================
   KEY STRATEGIES ADVISORY GROUP — Big 4 aesthetic
   Palette calibrated to match portal.key-strategies.com
   ============================================================ */

:root {
  /* Palette — portal-aligned */
  --ink: #0A2540;           /* deep navy — headings, nav */
  --ink-2: #1B3758;         /* slightly lighter ink */
  --ink-3: #5B6B80;         /* secondary text */
  --muted: #8A97A8;         /* tertiary */
  --line: #E5EAF0;          /* hairline dividers */
  --line-2: #EEF2F6;        /* subtle fills */
  --bg: #FFFFFF;
  --bg-alt: #F7F9FC;        /* portal-style off-white */
  --bg-tint: #F2F6FC;       /* faint blue tint */
  --blue: #1F6FEB;          /* portal primary blue */
  --blue-600: #175CD3;
  --blue-50: #EAF2FE;
  --accent: #C8A24B;        /* subtle gold accent (Big 4 cue) */

  /* Type */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --serif: "Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", serif;

  /* Spacing */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);

  /* Radii & shadows */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(10,37,64,.06), 0 1px 1px rgba(10,37,64,.04);
  --shadow: 0 8px 30px rgba(10,37,64,.08), 0 2px 6px rgba(10,37,64,.04);
  --shadow-lg: 0 24px 60px rgba(10,37,64,.12), 0 4px 12px rgba(10,37,64,.06);
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Top bar ---- */
.topbar {
  background: var(--ink);
  color: #BFD0E4;
  font-size: 13px;
  letter-spacing: .01em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 38px;
}
.topbar a {
  color: #fff;
  font-weight: 500;
  transition: opacity .2s;
}
.topbar a:hover { opacity: .8; }
.topbar__divider { opacity: .5; }
@media (max-width: 640px) {
  .topbar__inner span:first-child, .topbar__divider { display: none; }
}

/* ---- Header ---- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.header--scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(10,37,64,.02);
}
.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.brand__logo {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}
.brand__mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: var(--ink);
}
.brand--light,
.brand--light .brand__mark { color: #fff; }
/* Portal-matched wordmark: system font stack, bold + regular inline */
.brand__wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
}
.brand__wordmark strong {
  font-weight: 700;
}
.brand__wordmark span {
  font-weight: 400;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .brand__wordmark { font-size: 15px; gap: 0.3em; }
  .brand__wordmark span { display: none; }
}
.nav {
  display: flex;
  justify-content: center;
  gap: 34px;
  font-size: 14.5px;
  font-weight: 500;
}
.nav a {
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
  transition: color .2s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

.header__cta { display: flex; gap: 10px; }
.menu-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  position: relative;
}
.menu-toggle__lines span {
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: var(--ink);
  transform-origin: center;
  transition: transform .28s ease, opacity .25s ease, top .28s ease;
}
.menu-toggle__lines span:nth-child(1) { top: 14px; }
.menu-toggle__lines span:nth-child(2) { top: 19px; }
.menu-toggle__lines span:nth-child(3) { top: 24px; }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px var(--gutter) 20px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.mobile-nav a:not(.btn) {
  padding: 12px 4px;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.mobile-nav .btn { margin-top: 10px; justify-content: center; }

/* Header: collapse nav + CTAs into mobile menu at tablet-landscape-and-below.
   Raised from 960px → 1040px so the full nav + two CTA pills don't overflow
   at 1024px iPad landscape, matching Apple.com's responsive header behavior. */
@media (max-width: 1040px) {
  .nav, .header__cta { display: none; }
  .menu-toggle { display: block; }
  .header__inner { grid-template-columns: 1fr auto; }
  .header__inner > .nav { display: none; }
  .menu-toggle { justify-self: end; margin-left: auto; }
  .mobile-nav[data-open="true"] { display: flex; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .005em;
  transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 8px 20px rgba(31,111,235,.28);
}
.btn--primary:hover { background: var(--blue-600); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-light {
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn--text {
  padding: 11px 4px;
  color: var(--blue);
  font-weight: 600;
}
.btn--text:hover { color: var(--blue-600); }
.btn--lg { padding: 15px 24px; font-size: 15px; }
.btn--light { box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* ---- Eyebrow / Titles ---- */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
}
.eyebrow--light { color: #8FB8F7; }

.section__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
}
.section__title--light { color: #fff; }
.section__title em { font-style: italic; color: var(--blue); font-weight: 400; }

.section__lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 62ch;
  margin: 0;
}
.section__lede--light { color: #BFD0E4; }

/* ---- Section layout ---- */
.section {
  padding: clamp(48px, 6.5vw, 88px) 0;
}
.section--alt { background: var(--bg-alt); }
.section--dark {
  background: var(--ink);
  color: #fff;
}
.section__head { max-width: 760px; margin-bottom: 56px; }
.section__head--center { margin: 0 auto 56px; text-align: center; }
.section__head--center .section__lede { margin-left: auto; margin-right: auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(56px, 9vw, 120px) 0 clamp(56px, 8vw, 100px);
  overflow: hidden;
  background:
    radial-gradient(1000px 600px at 85% -10%, rgba(31,111,235,.08), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(31,111,235,.06), transparent 60%),
    #fff;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
/* Disable the hooked fi/fl ligatures in Fraunces italic that create the curly 'f' */
.hero__title em,
.section__title em,
.hero__title {
  font-feature-settings: "liga" 0, "dlig" 0, "clig" 0, "calt" 0;
  font-variant-ligatures: none;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 24px;
}
.hero__title em {
  font-style: italic;
  color: var(--blue);
  font-weight: 400;
}
.hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 54ch;
  margin: 0 0 32px;
}
.hero__ctas {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 14px;
}
.hero__proof strong { color: var(--ink); font-weight: 600; }

/* Hero visual — layered cards */
.hero__visual {
  position: relative;
  min-height: 520px;
}
.hero__card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}
.hero__card--primary {
  top: 70px;
  right: 0;
  width: min(380px, 86%);
  z-index: 2;
}
.hero__card--secondary {
  bottom: 0;
  left: 0;
  width: min(290px, 78%);
  z-index: 3;
  padding: 20px 22px;
}
.hero__card--tertiary {
  top: 0;
  left: 10px;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
}
.hero__card-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.hero__card-value {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 14px;
}
.hero__chart {
  margin: 0 -6px 14px;
  height: 96px;
}
.hero__chart svg { width: 100%; height: 100%; }
.hero__card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.hero__card-row span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 4px;
}
.hero__card-row strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.hero__card-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-600);
  margin-bottom: 10px;
}
.hero__card-meta {
  font-size: 13px;
  color: var(--ink-3);
}
.hero__badge {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}
.hero__card--tertiary .hero__card-label {
  margin-bottom: 0;
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { min-height: 360px; margin-top: 20px; }
  .hero__card--primary { position: relative; top: 0; width: 100%; }
  .hero__card--secondary, .hero__card--tertiary { display: none; }
}

/* ============================================================
   STRIP
   ============================================================ */
.strip {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}
.strip__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 40px;
}
.strip__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.strip__items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
}
@media (max-width: 720px) {
  .strip__inner { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Feature card disabled — uniform 3×2 grid across all six cards */


.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.service-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.service-card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--blue-50);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.service-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 18px;
}
/* Blue square bullets on every service card — matching the featured card */
.service-card ul {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.service-card ul li {
  position: relative;
  padding-left: 18px;
  line-height: 1.5;
}
.service-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--blue);
}
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   APPROACH — sticky scroll storytelling
   ============================================================ */
.approach {
  padding: 0 !important; /* track provides height; override section padding */
  position: relative;
}
.approach__track {
  position: relative;
  min-height: 220vh; /* 4 sticky steps; ~270px per card so each one reads, pin scrolls out cleanly into Briefing */
}
.approach__pin {
  position: sticky;
  top: 0;
  height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(16px, 2vh, 32px) 0 clamp(16px, 2vh, 32px);
  box-sizing: border-box;
}
.approach__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ---- Chronograph tick ring around step cards
   60 thin radial ticks encircling the stacked step cards. Each tick is a hairline
   blue line pointing inward. As user scrolls 01→04, ticks illuminate clockwise
   from 12 o'clock (12→3, 3→6, 6→9, 9→12) building toward a complete dial. ---- */
.approach__stage {
  position: relative;
  min-height: 340px;
}
.approach__ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.approach__pin[data-approach-progress] .approach__ticks {
  opacity: 1;
}
.approach__tick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 10px;
  background: #CFDDF0;
  /* Place each tick on an ellipse hugging the card:
     tx = rx * cos(angle-90deg), ty = ry * sin(angle-90deg), then rotate so
     the tick itself points radially inward. angle=0 -> 12 o'clock (up). */
  transform:
    translate(-50%, -50%)
    translate(
      calc(var(--rx, 300px) * cos(var(--angle, 0deg) - 90deg)),
      calc(var(--ry, 200px) * sin(var(--angle, 0deg) - 90deg))
    )
    rotate(var(--angle, 0deg));
  opacity: 0.35;
  transition: background-color .35s ease, box-shadow .35s ease, opacity .35s ease, height .35s ease;
}
.approach__tick[data-lit="true"] {
  background: var(--blue);
  opacity: 1;
  height: 12px;
  box-shadow: 0 0 6px rgba(11, 92, 247, 0.55), 0 0 12px rgba(11, 92, 247, 0.25);
}
/* Major ticks at 12, 3, 6, 9 — slightly longer, more prominent */
.approach__tick[data-major="true"] {
  height: 14px;
  width: 1.5px;
  opacity: 0.55;
}
.approach__tick[data-major="true"][data-lit="true"] {
  height: 18px;
  box-shadow: 0 0 8px rgba(11, 92, 247, 0.65), 0 0 16px rgba(11, 92, 247, 0.3);
}
/* Respect reduced motion — show completed ring statically */
@media (prefers-reduced-motion: reduce) {
  .approach__tick {
    transition: none !important;
  }
}
/* Hide tick ring on mobile (no sticky scroll) */
@media (max-width: 900px) {
  .approach__ticks { display: none; }
  .approach__stage { min-height: 0; }
}

/* Intro column with progress indicator */
.approach__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.approach__progress {
  position: relative;
  margin: 8px 0 4px;
  padding-left: 24px;
}
.approach__progress-track {
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}
.approach__progress-fill {
  position: absolute;
  left: 5px;
  top: 6px;
  width: 2px;
  height: calc(var(--progress, 0) * (100% - 12px));
  background: linear-gradient(to bottom, var(--blue), var(--gold));
  border-radius: 2px;
  transition: height .4s cubic-bezier(.65, 0, .35, 1);
}
.approach__dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.approach__dots li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-4, #8a93a0);
  transition: color .4s ease;
}
.approach__dots li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  transition: border-color .4s ease, background .4s ease, transform .4s ease;
}
.approach__dots li span {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: inherit;
}
.approach__dots li em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
}
.approach__dots li[data-active="true"] {
  color: var(--ink);
}
.approach__dots li[data-active="true"]::before {
  background: var(--blue);
  border-color: var(--blue);
  transform: scale(1.2);
}
.approach__cta {
  align-self: flex-start;
  margin-top: 8px;
}

/* Stacked step cards (absolutely positioned in same space) */
.approach__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 340px;
}
.approach__steps li {
  position: absolute;
  inset: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(16px, 2vw, 24px);
  row-gap: 6px;
  opacity: 0;
  transform: translateY(40px) scale(.98);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}
.approach__steps li[data-active="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.approach__steps li[data-leaving="true"] {
  opacity: 0;
  transform: translateY(-30px) scale(.98);
}
.approach__steps .approach__num {
  grid-row: 1 / span 2;
  grid-column: 1;
}
.approach__steps h4 {
  grid-column: 2;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.approach__steps p {
  grid-column: 2;
  min-width: 0;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.65;
}
.approach__num {
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 56px);
  font-weight: 400;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Mobile fallback: disable sticky, stack normally */
@media (max-width: 900px) {
  .approach { padding: clamp(40px, 6vw, 72px) 0 !important; }
  .approach__track { min-height: auto; }
  .approach__pin {
    position: static;
    height: auto;
    overflow: visible;
    padding: 0;
  }
  .approach__grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 40px;
  }
  .approach__steps {
    min-height: 0;
    display: grid;
    gap: 18px;
  }
  .approach__steps li {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: clamp(22px, 4vw, 28px);
    grid-template-columns: 60px minmax(0, 1fr);
  }
  .approach__steps li[data-leaving="true"] { opacity: 1; transform: none; }
  .approach__steps h4 { font-size: 22px; margin: 4px 0 6px; }
  .approach__steps p { font-size: 15px; }
  .approach__num { font-size: 34px; }
  .approach__progress { display: none; }
}
@media (max-width: 480px) {
  .approach__steps li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; }
  .approach__num { font-size: 30px !important; }
}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.industry-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  transition: background .25s, border-color .25s;
}
.industry-card:hover {
  background: var(--bg-tint);
  border-color: var(--blue-50);
}
.industry-card h4 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--ink);
}
.industry-card p {
  font-size: 14.5px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 820px) { .industries-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .industries-grid { grid-template-columns: 1fr; } }

/* ============================================================
   STATS
   ============================================================ */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 56px 0;
  background: #fff;
}
.stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: center;
}
.stats__num {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.stats__label {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
@media (max-width: 720px) {
  .stats__inner { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.about__visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 160px 160px;
  gap: 16px;
  position: relative;
}
.about__block {
  border-radius: var(--r);
}
.about__block--1 {
  background: linear-gradient(135deg, var(--blue) 0%, #4a8bf0 100%);
  grid-column: 1;
  grid-row: 1 / span 2;
  height: auto;
}
.about__block--2 {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.about__block--2 svg { width: 80px; height: 80px; }
.about__block--3 {
  background: var(--ink);
}
.about__content p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.about__values {
  margin-top: 28px;
  display: grid;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.about__values div {
  font-size: 15px;
  color: var(--ink-3);
}
.about__values strong { color: var(--ink); }
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__visual { grid-template-rows: 140px 140px; max-width: 480px; }
}

/* ============================================================
   QUOTE
   ============================================================ */
.quote {
  padding: clamp(48px, 6.5vw, 88px) 0;
  background: var(--bg-alt);
  text-align: center;
}
.quote blockquote {
  margin: 0 auto;
  max-width: 900px;
}
.quote blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 20px;
}
.quote cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

/* ============================================================
   CAREERS
   ============================================================ */
.careers {
  background: #fff;
}
.careers .section__head {
  max-width: 820px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.careers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.career-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.career-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--blue-50, #bcd3f7);
}
.career-card--feature {
  background: linear-gradient(160deg, #f8fbff 0%, #ffffff 55%);
  border-color: var(--blue-50, #bcd3f7);
}
.career-card__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(31, 111, 235, 0.08);
  border-radius: 999px;
  margin-bottom: 18px;
}
.career-card--feature .career-card__tag {
  color: #fff;
  background: var(--blue);
}
.career-card h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.career-card > p {
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.6;
  margin: 0 0 18px;
}
.career-card__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.career-card__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.career-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--blue);
  border-radius: 1px;
}
.career-card__who {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.55;
}
.career-card__who strong {
  color: var(--ink);
  font-weight: 600;
}
.careers__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: clamp(32px, 4vw, 48px);
  background: var(--bg-alt);
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.careers__cta p {
  margin: 0;
  font-size: 16px;
  color: var(--ink-2, var(--ink));
  line-height: 1.6;
  max-width: 640px;
}
.careers__email {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 111, 235, 0.3);
  transition: border-color .2s;
}
.careers__email:hover {
  border-bottom-color: var(--blue);
}
.careers__subjects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  text-align: left;
  max-width: 520px;
  width: 100%;
}
.careers__subjects li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.5;
  flex-wrap: wrap;
}
.careers__subjects li strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: -0.005em;
}
.careers__subjects li span {
  color: var(--ink-3);
}
.careers__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.careers__br { display: none; }

/* ============================================================
   CAREERS PAGE (standalone)
   ============================================================ */
.careers-hero {
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(32px, 4vw, 56px);
  background:
    radial-gradient(800px 400px at 50% -10%, rgba(31,111,235,.08), transparent 60%),
    #fff;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color .2s;
}
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb [aria-current="page"] { color: var(--ink); }
.section__head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 820px;
}
.section--tight {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
/* Active nav state when on the careers page */
.nav a.is-current,
.mobile-nav a.is-current {
  color: var(--ink);
  font-weight: 600;
}
.nav a.is-current::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--blue);
  margin-top: 2px;
  border-radius: 2px;
}
/* Light variants of the subjects & buttons blocks for dark CTA section on careers page */
.careers__subjects--light {
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(24px, 3vw, 36px);
}
.careers__subjects--light li {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}
.careers__subjects--light li strong {
  color: #fff;
}
.careers__subjects--light li span {
  color: rgba(255,255,255,.65);
}
.careers__buttons--light {
  justify-content: center;
  margin-top: clamp(28px, 3vw, 40px);
}
.link--light {
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.35);
  text-decoration: none;
  transition: border-color .2s;
}
.link--light:hover { border-bottom-color: #fff; }

@media (max-width: 900px) {
  .careers-hero { padding-top: 40px; }
  .careers__buttons--light { flex-direction: column; width: 100%; }
  .careers__buttons--light .btn { width: 100%; justify-content: center; }
}

@media (max-width: 900px) {
  .careers-grid { grid-template-columns: 1fr; gap: 16px; }
  .careers__buttons { width: 100%; flex-direction: column; }
  .careers__buttons .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   CTA / CONTACT
   ============================================================ */
.section--dark {
  background:
    radial-gradient(700px 400px at 10% 0%, rgba(31,111,235,.28), transparent 60%),
    radial-gradient(600px 400px at 100% 100%, rgba(31,111,235,.18), transparent 60%),
    var(--ink);
}
.cta__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.cta__actions .btn { width: 100%; justify-content: center; max-width: 360px; }
.cta__fine {
  font-size: 13px;
  color: #8FA7C4;
  margin: 8px 0 0;
  max-width: 360px;
  line-height: 1.5;
}
@media (max-width: 820px) {
  .cta__grid { grid-template-columns: 1fr; }
  .cta__actions .btn { max-width: 100%; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #0A1C31;
  color: #BFD0E4;
  padding: 72px 0 32px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__brand .brand { color: #fff; margin-bottom: 18px; }
.footer__brand .brand__wordmark { color: #fff; }
.footer__brand .brand__wordmark strong { color: #fff; }
.footer__brand .brand__wordmark span { color: rgba(255,255,255,0.72); }
.footer__brand .brand__wordmark span { display: inline !important; }
.footer__brand .brand__name { color: #fff; }
/* legacy suffix kept for safety */
.footer__brand p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #8FA7C4;
  max-width: 42ch;
  margin: 0;
}
.footer__col h5 {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
  font-weight: 600;
}
.footer__col a {
  display: block;
  padding: 6px 0;
  color: #BFD0E4;
  font-size: 14.5px;
  transition: color .2s;
}
.footer__col a:hover { color: #fff; }
.footer__base {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #6B82A0;
}
.footer__fine { max-width: 58ch; text-align: right; }

.footer__legal {
  margin-top: 24px;
  padding: 22px 0 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: grid;
  gap: 10px;
}
.footer__legal-line {
  margin: 0;
  color: #8FA4BD;
  font-size: 11.5px;
  line-height: 1.65;
  letter-spacing: 0.01em;
}
.footer__legal-line strong {
  color: #C9D7E8;
  font-weight: 600;
}
@media (max-width: 820px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (max-width: 520px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; }
  .footer__fine { text-align: left; }
}

/* ============================================================
   FOOTER ATTRIBUTION LINE + DISCLOSURES TRIGGER
   ============================================================ */
.footer__attribution {
  max-width: 68ch;
  line-height: 1.6;
  color: #8FA4BD;
  font-size: clamp(11.5px, 0.78vw, 12.5px);
  letter-spacing: 0.01em;
}
.footer__disclosures-trigger {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #C9D7E8;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color .2s ease;
}
.footer__disclosures-trigger:hover,
.footer__disclosures-trigger:focus-visible {
  color: #fff;
  outline: none;
}
.footer__disclosures-trigger:focus-visible {
  text-decoration-thickness: 2px;
}

/* ============================================================
   DISCLOSURES MODAL (native <dialog>)
   ============================================================ */
.disclosures-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  color: var(--ink);
  overflow: hidden;
}
.disclosures-modal::backdrop {
  background: rgba(10, 18, 30, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.disclosures-modal[open] {
  display: grid;
  place-items: center;
  animation: disclosuresFade .25s ease-out;
}
@keyframes disclosuresFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.disclosures-modal__card {
  width: min(92vw, 640px);
  max-height: min(86vh, 720px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(10, 20, 40, 0.25), 0 4px 16px rgba(10, 20, 40, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(8px);
  animation: disclosuresRise .35s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes disclosuresRise {
  to { transform: translateY(0); }
}
.disclosures-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 24px) clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.disclosures-modal__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.disclosures-modal__close {
  appearance: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-2, #4a5563);
  transition: background .15s ease, color .15s ease;
  flex-shrink: 0;
}
.disclosures-modal__close:hover,
.disclosures-modal__close:focus-visible {
  background: rgba(10, 18, 30, 0.06);
  color: var(--ink);
  outline: none;
}
.disclosures-modal__body {
  padding: clamp(18px, 2.4vw, 28px) clamp(20px, 3vw, 32px) clamp(22px, 3vw, 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--sans);
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.65;
  color: var(--ink-2, #3a424d);
}
.disclosures-modal__body h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, #6a7380);
  margin: 0 0 8px;
}
.disclosures-modal__body h3:not(:first-child) {
  margin-top: 22px;
}
.disclosures-modal__body p {
  margin: 0;
}
.disclosures-modal__body p + p {
  margin-top: 12px;
}
.disclosures-modal__body strong {
  color: var(--ink);
  font-weight: 600;
}
/* Mobile — give modal a little more room, slimmer padding */
@media (max-width: 560px) {
  .disclosures-modal__card {
    width: 100%;
    max-height: 100dvh;
    border-radius: 14px 14px 0 0;
    align-self: end;
  }
  .disclosures-modal[open] {
    place-items: end center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .disclosures-modal[open],
  .disclosures-modal__card {
    animation: none;
    transform: none;
  }
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Hero: sequenced entrance (Apple-style) ---- */
.hero-in {
  opacity: 0;
  transform: translateY(14px);
  animation: heroIn .9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}
.hero__card.hero-in {
  transform: translateY(24px) scale(.98);
}
@keyframes heroCardIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero__card.hero-in {
  animation-name: heroCardIn;
}

/* ---- Four Disciplines: mobile fallback entrance ---- */
@media (max-width: 900px) {
  .approach__steps li.approach-step {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--step-delay, 0ms);
  }
  .approach__steps li.approach-step.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   SCROLL PROGRESS INDICATOR (right edge)
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.scroll-progress.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.scroll-progress__line {
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: rgba(10,37,64,.1);
  border-radius: 2px;
}
.scroll-progress__fill {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 0;
  background: var(--blue);
  border-radius: 2px;
  transition: height .15s linear;
}
.scroll-progress__list {
  display: grid;
  gap: 24px;
  padding: 8px 0;
}
.scroll-progress__list a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 22px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .25s;
  position: relative;
}
.scroll-progress__list a::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) scale(.6);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(10,37,64,.2);
  transition: transform .25s, border-color .25s, background .25s;
}
.scroll-progress__list a:hover { color: var(--ink-2); }
.scroll-progress__list a.is-active {
  color: var(--ink);
}
.scroll-progress__list a.is-active::before {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-50%) scale(1);
  box-shadow: 0 0 0 3px rgba(31,111,235,.15);
}
.scroll-progress__num {
  opacity: .5;
}
.scroll-progress__list a.is-active .scroll-progress__num { opacity: 1; }
.scroll-progress__label {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s, transform .25s;
}
.scroll-progress__list a.is-active .scroll-progress__label,
.scroll-progress__list a:hover .scroll-progress__label {
  opacity: 1;
  transform: translateX(0);
}
/* Right-anchored layout: label hangs to the LEFT of the dot so it never clips off-screen */
.scroll-progress__list a {
  flex-direction: row-reverse;
  justify-content: flex-end;
  padding-left: 0;
  padding-right: 22px;
}
.scroll-progress__list a::before {
  left: auto;
  right: 10px;
}
.scroll-progress__line {
  left: auto;
  right: 14px;
}
.scroll-progress__label {
  transform: translateX(6px);
}
.scroll-progress__list a.is-active .scroll-progress__label,
.scroll-progress__list a:hover .scroll-progress__label {
  transform: translateX(0);
}
/* Dark-section variant: invert colors so labels remain readable over navy backgrounds */
.scroll-progress.is-on-dark .scroll-progress__list a {
  color: rgba(255,255,255,.55);
}
.scroll-progress.is-on-dark .scroll-progress__list a:hover,
.scroll-progress.is-on-dark .scroll-progress__list a.is-active {
  color: #fff;
}
.scroll-progress.is-on-dark .scroll-progress__line {
  background: rgba(255,255,255,.2);
}
.scroll-progress.is-on-dark .scroll-progress__list a::before {
  background: transparent;
  border-color: rgba(255,255,255,.35);
}
.scroll-progress.is-on-dark .scroll-progress__list a.is-active::before {
  background: var(--gold, #C8A24B);
  border-color: var(--gold, #C8A24B);
  box-shadow: 0 0 0 3px rgba(200,162,75,.25);
}
.scroll-progress.is-on-dark .scroll-progress__fill {
  background: var(--gold, #C8A24B);
}
@media (max-width: 1100px) {
  .scroll-progress { display: none !important; }
}
/* Hide on any touch/coarse-pointer device regardless of viewport width.
   iOS Safari's tab-switcher thumbnails render at desktop width and can
   briefly expose the progress nav; this keeps it hidden on all phones
   and tablets. */
@media (hover: none) and (pointer: coarse) {
  .scroll-progress { display: none !important; }
}

/* ============================================================
   PORTAL MODAL
   ============================================================ */
.portal-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}
.portal-modal[hidden] { display: none !important; }
.portal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 28, 49, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background .3s ease, backdrop-filter .3s ease;
}
.portal-modal.is-open .portal-modal__backdrop {
  background: rgba(10, 28, 49, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.portal-modal__panel {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  max-width: 460px;
  width: 100%;
  padding: 40px 36px 32px;
  box-shadow: 0 30px 80px rgba(10,37,64,.3);
  text-align: center;
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: opacity .32s cubic-bezier(.16,1,.3,1), transform .32s cubic-bezier(.16,1,.3,1);
}
.portal-modal.is-open .portal-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.portal-modal__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue);
  display: grid;
  place-items: center;
}
.portal-modal__icon svg { width: 32px; height: 32px; }
.portal-modal__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.portal-modal__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 28px;
}
.portal-modal__body strong { color: var(--ink); font-weight: 600; }
.portal-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.portal-modal__actions .btn { justify-content: center; }
.portal-modal__fine {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 520px) {
  .portal-modal__panel { padding: 32px 24px 24px; }
  .portal-modal__actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-in, .approach-step { opacity: 1; transform: none; animation: none; }
  .approach__steps::before { transform: scaleY(1); transition: none; }
  .portal-modal__panel { transition: none; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   BRIEFING DESK — KS-authored posts (left) + live wire (right)
   Two-column merged section. Left column: featured KS post + recent
   list + archive link. Right column: sticky live RSS wire from the
   Cloudflare Worker. Stacks at 720px. Sources: Sonar Pro post
   generation hits /posts; live RSS hits /wire.
   ===================================================================== */
.briefing { position: relative; padding-top: clamp(24px, 3.5vw, 48px); padding-bottom: clamp(48px, 6.5vw, 88px); }
.briefing .section__head { max-width: 760px; }

.briefing-desk {
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

/* ---------- Left column: KS-authored posts ---------- */
.briefing-desk__main {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  min-width: 0;
}

.briefing-desk__featured {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 8px 28px -20px rgba(10, 37, 64, 0.18);
}

.briefing-desk__featured::before {
  /* hairline left accent — same cue as old Briefing Room */
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--blue), transparent);
  opacity: 0.55;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

.briefing-desk__featured-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.briefing-desk__tag {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  background: var(--blue-50);
  color: var(--blue-600);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.briefing-desk__byline {
  color: var(--ink-3);
  font-weight: 500;
}

.briefing-desk__featured-title {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.7rem;
}

.briefing-desk__featured-dek {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 1.1rem;
}

.briefing-desk__featured-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-2);
  padding-top: 0.95rem;
}

.briefing-desk__read {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.briefing-desk__read:hover { color: var(--blue-600); border-bottom-color: var(--blue-600); }
.briefing-desk__read span { display: inline-block; margin-left: 2px; transition: transform 0.2s ease; }
.briefing-desk__read:hover span { transform: translateX(3px); }

.briefing-desk__meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- Recent (left rail, beneath featured) ---------- */
.briefing-desk__recent {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.25rem, 2.2vw, 1.6rem);
}

.briefing-desk__subhead {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.85rem;
}

.briefing-desk__recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.briefing-desk__recent-list li {
  border-top: 1px solid var(--line-2);
  padding: 0.85rem 0;
}
.briefing-desk__recent-list li:first-child { border-top: 0; padding-top: 0.25rem; }
.briefing-desk__recent-list li:last-child { padding-bottom: 0.25rem; }

.briefing-desk__recent-list a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.briefing-desk__recent-title {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.25rem;
  transition: color 0.2s ease;
}
.briefing-desk__recent-list a:hover .briefing-desk__recent-title { color: var(--blue); }

.briefing-desk__recent-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.briefing-desk__recent-empty {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  color: var(--ink-3);
  font-style: italic;
  padding: 0.5rem 0 0.25rem !important;
  border-top: 0 !important;
}

.briefing-desk__archive {
  display: inline-block;
  margin-top: 0.95rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.briefing-desk__archive:hover { color: var(--blue-600); border-bottom-color: var(--blue-600); }
.briefing-desk__archive span { display: inline-block; margin-left: 2px; transition: transform 0.2s ease; }
.briefing-desk__archive:hover span { transform: translateX(3px); }

/* ---------- Right column: live wire ---------- */
.briefing-desk__wire {
  position: sticky;
  top: 88px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.25rem, 2.2vw, 1.6rem);
  min-width: 0;
}

.briefing-desk__wire-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.briefing-desk__wire-head .briefing-desk__subhead { margin: 0; }

.briefing-desk__pulse-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #16a34a;
}

.briefing-desk__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  animation: briefingDeskPulse 2.4s ease-in-out infinite;
}
@keyframes briefingDeskPulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.briefing-desk[data-state="error"] .briefing-desk__pulse {
  background: #d97706;
  box-shadow: none;
  animation: none;
}
.briefing-desk[data-state="error"] .briefing-desk__pulse-row { color: #d97706; }

.briefing-desk__wire-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-height: 560px;
  overflow-y: auto;
  /* hairline scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.briefing-desk__wire-list::-webkit-scrollbar { width: 6px; }
.briefing-desk__wire-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.briefing-desk__wire-list li {
  border-top: 1px solid var(--line-2);
  padding: 0.7rem 0;
}
.briefing-desk__wire-list li:first-child { border-top: 0; padding-top: 0.25rem; }

.briefing-desk__wire-list a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.briefing-desk__wire-source {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.2rem;
}

.briefing-desk__wire-headline {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 0.15rem;
  transition: color 0.2s ease;
}
.briefing-desk__wire-list a:hover .briefing-desk__wire-headline { color: var(--blue); }

.briefing-desk__wire-time {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.briefing-desk__wire-loading {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  color: var(--ink-3);
  font-style: italic;
  padding: 0.5rem 0 0.25rem !important;
  border-top: 0 !important;
}

.briefing-desk__wire-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-2);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.briefing-desk__sources {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Tablet: relax sticky, narrower wire ---------- */
@media (max-width: 1024px) {
  .briefing-desk { grid-template-columns: 1.4fr 1fr; }
  .briefing-desk__wire { position: static; }
}

/* ---------- Mobile: stack ---------- */
@media (max-width: 720px) {
  .briefing-desk {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .briefing-desk__featured-title { font-size: 1.5rem; }
  .briefing-desk__wire-list { max-height: 420px; }
  .briefing-desk__featured-head { font-size: 0.68rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .briefing-desk__pulse { animation: none; }
}


/* ============================================================
   REDESIGN v2 — A+B+C: imagery, motion, compression
   Appended May 2026
   ============================================================ */

/* ---- Top-of-page vertical wire ticker (B) ---- */
.wire-ticker {
  background: var(--ink);
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  height: 38px;
  overflow: hidden;
  position: relative;
}
.wire-ticker__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
}
.wire-ticker__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}
.wire-ticker__label::before {
  content: "";
  width: 7px; height: 7px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse-red 1.6s ease-in-out infinite;
}
@keyframes pulse-red {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  50% { opacity: .6; box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.wire-ticker__items {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
}
.wire-ticker__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .5s ease, transform .5s ease;
}
.wire-ticker__item.is-active {
  opacity: 1;
  transform: translateY(0);
}
.wire-ticker__item.is-leaving {
  opacity: 0;
  transform: translateY(-100%);
}
.wire-ticker__src {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}
.wire-ticker__txt {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .wire-ticker { font-size: 12px; height: 34px; }
  .wire-ticker__src { display: none; }
}

/* ---- Hero v2: full-bleed image background ---- */
.hero--v2 {
  position: relative;
  min-height: clamp(560px, 72vh, 720px);
  background-color: var(--ink);
  background-image: url('img/hero-bg.jpg?v=148f53f150');
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
  padding: clamp(56px, 8vh, 88px) 0 clamp(36px, 4.5vh, 56px);
  display: flex;
  align-items: center;
}
.hero--v2::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,37,64,.4) 0%, rgba(10,37,64,.2) 30%, rgba(10,37,64,.78) 100%),
    linear-gradient(90deg, rgba(10,37,64,.78) 0%, rgba(10,37,64,.35) 55%, rgba(10,37,64,.15) 100%);
  pointer-events: none;
}
.hero--v2 .container {
  position: relative;
  z-index: 1;
}
.hero--v2 .hero__content {
  max-width: 720px;
}
.hero--v2 .eyebrow {
  color: var(--accent);
  letter-spacing: .14em;
}
.hero--v2 .hero__title {
  color: #fff;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: .35em 0 .55em;
}
.hero--v2 .hero__title em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
}
.hero--v2 .hero__lede {
  color: rgba(255,255,255,.82);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  max-width: 600px;
  line-height: 1.65;
}
.hero--v2 .hero__ctas { margin-top: 28px; gap: 16px; flex-wrap: wrap; }
.hero--v2 .btn--primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  font-weight: 600;
}
.hero--v2 .btn--primary:hover {
  background: #d6b057;
  border-color: #d6b057;
  color: var(--ink);
}
.hero--v2 .btn--text {
  color: rgba(255,255,255,.92);
}
.hero--v2 .btn--text:hover { color: var(--accent); }

/* "Today on the desk" strap (C) */
.hero__strap {
  margin-top: 32px;
  padding: 14px 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(200,162,75,.35);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 640px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  transition: background .25s, border-color .25s, transform .25s;
}
.hero__strap:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.hero__strap-tag {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
.hero__strap-tag::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
  animation: pulse-gold 2s ease-in-out infinite;
}
@keyframes pulse-gold {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.hero__strap-title {
  flex: 1;
  color: rgba(255,255,255,.95);
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hero__strap-arrow {
  color: var(--accent);
  font-size: 18px;
  flex-shrink: 0;
}

/* In-hero stats strip (C: pulled up from footer) */
.hero__stats {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.15);
  max-width: 760px;
}
.hero__stat-num {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.01em;
}
.hero__stat-label {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

/* ---- Practice section (Services+Approach merged, C) ---- */
.practice {
  background: var(--bg-alt);
  padding: clamp(80px, 10vh, 130px) 0;
}
.practice__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-top: 48px;
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.practice__tabs::-webkit-scrollbar { display: none; }
.practice__tab {
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color .25s;
  background: none;
  border: 0;
  font-family: inherit;
}
.practice__tab::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.practice__tab:hover { color: var(--ink); }
.practice__tab.is-active {
  color: var(--ink);
}
.practice__tab.is-active::after { transform: scaleX(1); }
.practice__panels {
  position: relative;
  margin-top: 40px;
}
.practice__panel {
  display: none;
  animation: fadeUp .4s ease;
}
.practice__panel.is-active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.practice__panel-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: start;
}
.practice__panel-copy h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -.01em;
}
.practice__panel-copy p {
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 18px;
}
.practice__panel-copy ul {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}
.practice__panel-copy ul li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-2);
  font-size: 0.97rem;
}
.practice__panel-copy ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: 10px; height: 1.5px;
  background: var(--accent);
}
.practice__steps {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
}
.practice__steps-eyebrow {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
}
.practice__steps-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0 0 22px;
  font-weight: 500;
}
.practice__steps ol {
  display: grid;
  gap: 18px;
}
.practice__steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.practice__steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.practice__steps li span {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--accent);
  line-height: 1;
}
.practice__steps li h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.practice__steps li p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-3);
  line-height: 1.5;
}
@media (max-width: 880px) {
  .practice__panel-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---- Industries v2: image cards (A) ---- */
.industries-grid--v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.industry-card--v2 {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: default;
  background: var(--ink);
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  /* Reset old text-card padding/border so v2 photo cards display cleanly */
  padding: 0;
  border: none;
}
.industry-card--v2:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.industry-card--v2 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  z-index: 0;
}
.industry-card--v2:hover img { transform: scale(1.06); }
.industry-card--v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,37,64,0) 30%, rgba(10,37,64,.55) 65%, rgba(10,37,64,.92) 100%);
  z-index: 1;
}
.industry-card--v2 .industry-card__body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  color: #fff;
}
.industry-card--v2 .industry-card__body h4 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 8px;
  letter-spacing: -.005em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.industry-card--v2 .industry-card__body p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height .4s ease, opacity .35s ease, transform .4s ease, margin-top .4s ease;
}
.industry-card--v2:hover .industry-card__body p,
.industry-card--v2:focus-within .industry-card__body p {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 8px;
}
.industry-card--v2 .industry-card__tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
@media (max-width: 880px) {
  .industries-grid--v2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .industries-grid--v2 { grid-template-columns: 1fr; }
  .industry-card--v2 { aspect-ratio: 16 / 10; }
  .industry-card--v2 .industry-card__body p {
    max-height: 200px; opacity: 1; transform: none; margin-top: 8px;
  }
}

/* ---- About v2: editorial photo (A) ---- */
.about__visual--v2 {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink);
}
.about__visual--v2 .about__photo {
  position: absolute;
  inset: 0;
}
.about__visual--v2 .about__photo img,
.about__visual--v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about__visual--v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10,37,64,0) 60%, rgba(10,37,64,.35) 100%);
  pointer-events: none;
}
.about__kmark {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: var(--shadow);
}
.about__kmark svg { width: 28px; height: 28px; }

/* ---- Section divider strips (A) ---- */
.section-divider {
  height: 6px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,162,75,.0) 8%,
    rgba(200,162,75,.45) 30%,
    var(--accent) 50%,
    rgba(200,162,75,.45) 70%,
    rgba(200,162,75,0) 92%,
    transparent 100%);
}

/* ---- Briefing Desk: enhancements (B) ---- */
.briefing-desk__countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
}
.briefing-desk__countdown::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse-gold 2s ease-in-out infinite;
}
.briefing-desk__countdown strong {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
}

/* Wire item entry animation + NEW badge */
@keyframes wire-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.briefing-desk__wire-item {
  position: relative;
}
.briefing-desk__wire-item.is-fresh {
  animation: wire-slide-in .45s ease;
}
.briefing-desk__new-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: #ef4444;
  color: #fff;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: 1px;
  animation: pulse-red 1.6s ease-in-out infinite;
}

/* ---- Reduced motion respect ---- */
@media (prefers-reduced-motion: reduce) {
  .wire-ticker__item,
  .industry-card--v2,
  .industry-card--v2 img,
  .practice__panel,
  .briefing-desk__wire-item {
    animation: none !important;
    transition: none !important;
  }
}


/* =====================================================================
   PRACTICE RAIL — per-tab "Deliverables" sidebar (replaces the old
   .practice__steps block that duplicated 4 D's across every tab).
   Each tab has its own list of deliverables. The actual 4-step
   methodology lives in its own #approach band above the practice
   section, with the original sticky-scroll storytelling rotation.
   ===================================================================== */
.practice__rail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  position: relative;
}
.practice__rail::before {
  content: "";
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 40%, transparent 100%);
}
.practice__rail-eyebrow {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}
.practice__rail-title {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 22px;
  font-weight: 500;
  letter-spacing: -.005em;
}
.practice__rail-list {
  display: grid;
  gap: 16px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.practice__rail-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.practice__rail-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.practice__rail-marker {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: .02em;
}
.practice__rail-list h4 {
  margin: 0 0 4px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
}
.practice__rail-list p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-3);
  line-height: 1.55;
}
.practice__rail-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}
.practice__rail-foot-label {
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-3);
  font-weight: 600;
}
.practice__rail-foot-value {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

/* Sticky behavior on desktop so the rail stays in view as user reads the panel copy */
@media (min-width: 980px) {
  .practice__panel-grid .practice__rail {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/* =====================================================================
   APPROACH — sticky scroll storytelling (original rotation, restored)
   60 ticks light up clockwise around the step cards as user scrolls
   01 → 04. Cards stack and animate in/out. The dot column on the left
   fills with a navy → gold gradient.
   ===================================================================== */
.approach {
  padding: 0 !important; /* track provides height; override section padding */
  position: relative;
}
.approach__track {
  position: relative;
  min-height: 420vh; /* 4 steps × ~105vh each */
}
.approach__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(40px, 8vh, 80px) 0;
  box-sizing: border-box;
}
.approach__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ---- Chronograph tick ring around step cards ---- */
.approach__stage {
  position: relative;
  min-height: 340px;
}
.approach__ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.approach__pin[data-approach-progress] .approach__ticks {
  opacity: 1;
}
.approach__tick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 10px;
  background: #CFDDF0;
  transform:
    translate(-50%, -50%)
    translate(
      calc(var(--rx, 300px) * cos(var(--angle, 0deg) - 90deg)),
      calc(var(--ry, 200px) * sin(var(--angle, 0deg) - 90deg))
    )
    rotate(var(--angle, 0deg));
  opacity: 0.35;
  transition: background-color .35s ease, box-shadow .35s ease, opacity .35s ease, height .35s ease;
}
.approach__tick[data-lit="true"] {
  background: var(--ink);
  opacity: 1;
  height: 12px;
  box-shadow: 0 0 6px rgba(10, 37, 64, 0.35), 0 0 12px rgba(10, 37, 64, 0.18);
}
/* Major ticks at 12, 3, 6, 9 — gold accent + slightly longer */
.approach__tick[data-major="true"] {
  height: 14px;
  width: 1.5px;
  opacity: 0.55;
}
.approach__tick[data-major="true"][data-lit="true"] {
  background: var(--accent);
  height: 18px;
  box-shadow: 0 0 8px rgba(200, 162, 75, 0.55), 0 0 16px rgba(200, 162, 75, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .approach__tick { transition: none !important; }
}
@media (max-width: 900px) {
  .approach__ticks { display: none; }
  .approach__stage { min-height: 0; }
}

/* Intro column with progress indicator */
.approach__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.approach__progress {
  position: relative;
  margin: 8px 0 4px;
  padding-left: 24px;
}
.approach__progress-track {
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}
.approach__progress-fill {
  position: absolute;
  left: 5px;
  top: 6px;
  width: 2px;
  height: calc(var(--progress, 0) * (100% - 12px));
  background: linear-gradient(to bottom, var(--ink), var(--accent));
  border-radius: 2px;
  transition: height .4s cubic-bezier(.65, 0, .35, 1);
}
.approach__dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.approach__dots li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-3);
  transition: color .4s ease;
}
.approach__dots li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  transition: border-color .4s ease, background .4s ease, transform .4s ease;
}
.approach__dots li span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.approach__dots li em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}
.approach__dots li[data-active="true"] {
  color: var(--ink);
}
.approach__dots li[data-active="true"]::before {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.2);
}
.approach__cta {
  align-self: flex-start;
  margin-top: 8px;
}

/* Stacked step cards (absolutely positioned in same space) */
.approach__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 340px;
}
.approach__steps li {
  position: absolute;
  inset: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(16px, 2vw, 24px);
  row-gap: 6px;
  opacity: 0;
  transform: translateY(40px) scale(.98);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(10,37,64,.04), 0 8px 24px rgba(10,37,64,.06);
}
.approach__steps li[data-active="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.approach__steps li[data-leaving="true"] {
  opacity: 0;
  transform: translateY(-30px) scale(.98);
}
.approach__steps .approach__num {
  grid-row: 1 / span 2;
  grid-column: 1;
}
.approach__steps h4 {
  grid-column: 2;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.approach__steps p {
  grid-column: 2;
  min-width: 0;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.65;
}
.approach__num {
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 56px);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Mobile fallback: disable sticky, stack normally */
@media (max-width: 900px) {
  .approach { padding: clamp(60px, 8vw, 100px) 0 !important; }
  .approach__track { min-height: auto; }
  .approach__pin {
    position: static;
    height: auto;
    overflow: visible;
    padding: 0;
  }
  .approach__grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 40px;
  }
  .approach__steps {
    min-height: 0;
    display: grid;
    gap: 18px;
  }
  .approach__steps li {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: clamp(22px, 4vw, 28px);
    grid-template-columns: 60px minmax(0, 1fr);
  }
  .approach__steps li[data-leaving="true"] { opacity: 1; transform: none; }
  .approach__steps h4 { font-size: 22px; margin: 4px 0 6px; }
  .approach__steps p { font-size: 15px; }
  .approach__num { font-size: 34px; }
  .approach__progress { display: none; }
}
@media (max-width: 480px) {
  .approach__steps li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; }
  .approach__num { font-size: 30px !important; }
}

/* ---- Practice tabs: mobile scroll affordance ---- */
.practice__tabs-wrap {
  position: relative;
  margin-top: 48px;
}
.practice__tabs-wrap .practice__tabs { margin-top: 0; }

/* Right-edge fade — visible only when there's overflow to the right */
.practice__tabs-fade {
  position: absolute;
  top: 0; right: 0; bottom: 1px;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(247,249,252,0) 0%, var(--bg-alt) 85%);
  opacity: 0;
  transition: opacity .25s ease;
}
.practice__tabs-wrap[data-can-scroll-right="true"] .practice__tabs-fade { opacity: 1; }

/* Animated "Swipe ›" pill — shown on small screens until user scrolls the rail */
.practice__tabs-hint {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-60%);
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(10,37,64,.15);
  animation: practiceTabsHintNudge 1.6s ease-in-out infinite;
  z-index: 2;
}
.practice__tabs-hint-arrow {
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
}
@keyframes practiceTabsHintNudge {
  0%, 100% { transform: translateY(-60%) translateX(0); }
  50%      { transform: translateY(-60%) translateX(4px); }
}
@media (max-width: 768px) {
  .practice__tabs-wrap[data-can-scroll-right="true"]:not([data-user-scrolled="true"]) .practice__tabs-hint {
    display: inline-flex;
  }
  .practice__tabs-fade { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .practice__tabs-hint { animation: none; }
}

/* =============================================================
   HERO V2 — credential cards harmonized with the gold/navy globe.
   ----------------------------------------------------------------
   Cards live in the right-side gutter beside the headline copy, in
   the same staggered layout as the original (PTIN pill top-left,
   Q1 chart mid-right, Tax Strategy bottom-left). They use a dark
   navy glass + gold accents instead of bright white so they sit
   inside the same visual world as the globe. Original entrance
   stagger and scroll parallax (in main.js) drive the motion; an
   additional gentle float-loop keeps them alive when the page is
   idle. The PTIN pill is positioned ABOVE the Q1 card with no
   overlap, and the whole stack is shifted off the globe's continent
   so NEW YORK / MEXICO CITY labels stay visible.
   ============================================================= */
.hero--v2 .container { position: relative; }

.hero--v2 .hero__visual {
  position: absolute;
  top: 50%;
  right: clamp(8px, 2vw, 40px);
  width: clamp(320px, 32vw, 380px);
  height: 540px;
  min-height: 0;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}
.hero--v2 .hero__visual .hero__card { pointer-events: auto; }

/* Dark navy glass with gold edge — matches the globe's palette */
.hero--v2 .hero__card {
  background: linear-gradient(160deg, rgba(14, 32, 54, 0.82) 0%, rgba(10, 24, 42, 0.78) 100%);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  border: 1px solid rgba(200, 162, 75, 0.32);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 235, 180, 0.06);
  color: #F2F4F8;
}

/* PTIN pill — floats top-left of the cluster, well above Q1 */
.hero--v2 .hero__card--tertiary {
  top: 0;
  left: -18px;
  right: auto;
  bottom: auto;
  width: auto;
  z-index: 5;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero--v2 .hero__card--tertiary .hero__badge {
  background: var(--accent);
  color: var(--ink);
  width: 28px; height: 28px; flex: 0 0 28px;
  font-size: 10px;
}
.hero--v2 .hero__card--tertiary .hero__card-label {
  color: rgba(255, 235, 180, 0.92);
  margin-bottom: 0;
  font-size: 11px;
}

/* Q1 Quarterly Review — main card, mid-right, well below the PTIN pill */
.hero--v2 .hero__card--primary {
  top: 78px;           /* clearly below the PTIN pill (no overlap) */
  right: 0;
  left: auto;
  bottom: auto;
  transform: none;
  width: clamp(250px, 26vw, 300px);
  padding: 18px 20px;
  border-radius: 18px;
}
.hero--v2 .hero__card--primary .hero__card-label {
  color: rgba(200, 162, 75, 0.85);
  letter-spacing: .16em;
}
.hero--v2 .hero__card--primary .hero__card-value {
  color: #FBF6E8;
  font-size: 26px;
  margin-bottom: 12px;
}
.hero--v2 .hero__card--primary .hero__chart { height: 86px; }
.hero--v2 .hero__card--primary .hero__card-row {
  border-top: 1px solid rgba(200, 162, 75, 0.18);
  padding-top: 12px;
}
.hero--v2 .hero__card--primary .hero__card-row span {
  color: rgba(255, 235, 180, 0.6);
}
.hero--v2 .hero__card--primary .hero__card-row strong {
  color: #FBF6E8;
}

/* Re-tint the chart line/fill so it pulls from the gold palette, not blue */
.hero--v2 .hero__card--primary .hero__chart svg [data-hero-line],
.hero--v2 .hero__card--primary .hero__chart svg path:not([fill^="url"]) {
  stroke: var(--accent) !important;
}
.hero--v2 .hero__card--primary .hero__chart svg #gradFill stop:first-child {
  stop-color: var(--accent);
}
.hero--v2 .hero__card--primary .hero__chart svg #gradFill stop:last-child {
  stop-color: var(--accent);
}

/* Tax Strategy — bottom-left, far enough out of Q1's column to clear it */
.hero--v2 .hero__card--secondary {
  top: auto;
  bottom: 0;
  left: -56px;
  right: auto;
  width: clamp(220px, 24vw, 260px);
  z-index: 4;
  padding: 14px 18px;
  border-radius: 16px;
}
.hero--v2 .hero__card--secondary .hero__card-label {
  color: rgba(200, 162, 75, 0.85);
}
.hero--v2 .hero__card--secondary .hero__card-pill {
  background: rgba(200, 162, 75, 0.16);
  color: #FBF6E8;
  border: 1px solid rgba(200, 162, 75, 0.35);
}
.hero--v2 .hero__card--secondary .hero__card-meta {
  color: rgba(242, 244, 248, 0.72);
}

/* Idle float-loop — each card breathes on its own offset so the cluster
   never feels frozen, even when the user isn't scrolling. Combines with
   the scroll parallax in main.js (which sets transform on scroll).
   Bumped amplitude so the motion is actually visible at a glance. */
@keyframes heroCardFloat1 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}
@keyframes heroCardFloat2 {
  0%, 100% { translate: 0 0; }
  33%      { translate: 0 9px; }
  66%      { translate: -3px 4px; }
}
@keyframes heroCardFloat3 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
/* Chain the entrance + idle float-loop using long-hand properties so we
   keep the per-card --delay variable that main.js sets inline (which the
   global .hero-in rule reads as animation-delay). Order: entrance first,
   then float. */
/* Per-card entrance: each flies in from its own corner so the cluster
   feels like it assembles from the edges, like the original backup.
   Uses CSS `translate:` + `scale:` (not `transform:`) so main.js parallax
   (which sets `transform: translate3d(...)`) can run alongside without
   the entrance's animation-fill-mode:forwards locking it out. */
@keyframes heroCardInTertiary {
  from { opacity: 0; translate: -40px -28px; scale: .94; }
  to   { opacity: 1; translate: 0 0;        scale: 1; }
}
@keyframes heroCardInPrimary {
  from { opacity: 0; translate: 56px 14px;  scale: .94; }
  to   { opacity: 1; translate: 0 0;        scale: 1; }
}
@keyframes heroCardInSecondary {
  from { opacity: 0; translate: -48px 32px; scale: .94; }
  to   { opacity: 1; translate: 0 0;        scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero--v2 .hero__card.hero-in {
    animation-name: heroCardIn, heroCardFloatBase;
    animation-duration: 1.1s, 6s;
    animation-timing-function: cubic-bezier(.16,1,.3,1), ease-in-out;
    animation-delay: var(--delay, 0ms), calc(var(--delay, 0ms) + 1300ms);
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
  }
  .hero--v2 .hero__card--tertiary.hero-in {
    animation-name: heroCardInTertiary, heroCardFloat1;
    animation-duration: 1.1s, 5.4s;
  }
  .hero--v2 .hero__card--primary.hero-in {
    animation-name: heroCardInPrimary, heroCardFloat2;
    animation-duration: 1.1s, 6.8s;
  }
  .hero--v2 .hero__card--secondary.hero-in {
    animation-name: heroCardInSecondary, heroCardFloat3;
    animation-duration: 1.1s, 4.8s;
  }
}
/* Fallback float keyframe in case a per-card override doesn't match */
@keyframes heroCardFloatBase {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .hero--v2 .hero__visual { display: none; }
}

/* =============================================================
   MOBILE — Hero credential cards become a swipeable carousel
   below the CTA, sized to feel like a native iOS card stack.
   Uses scroll-snap so each card locks into place on swipe.
   ============================================================= */
@media (max-width: 900px) {
  /* The PTIN "Engagement Secured" badge sits BEFORE the carousel
     as a static trust strip rather than as a swipe slide — too sparse to
     deserve its own card-slot. We use display:contents so .hero__visual
     can still be a flex container for the remaining two cards. */
  .hero--v2 .hero__visual {
    /* Switch from absolute desktop layout to a flow-layout horizontal
       scroll container that lives below the CTA cluster. */
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    transform: none;
    margin: 24px -20px 8px;       /* bleed to viewport edges */
    padding: 6px 28px 24px;
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 28px;
    scroll-padding-right: 28px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: auto;
    pointer-events: auto;
    /* Hint to browsers this is a swipe surface */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    /* The PTIN card visually sits above the scroller — we lift it out
       of the flex flow with absolute positioning so the carousel only
       contains Q1 and Tax Strategy. */
    align-items: stretch;
  }
  .hero--v2 .hero__visual::-webkit-scrollbar { display: none; }
  .hero--v2 .hero__visual .hero__card,
  .hero--v2 .hero__visual .hero__card--primary,
  .hero--v2 .hero__visual .hero__card--secondary,
  .hero--v2 .hero__visual .hero__card--tertiary {
    /* Reset desktop absolute positioning + override the legacy
       `display: none` on .hero__card--secondary/--tertiary from the
       older max-width:900px block earlier in the stylesheet. */
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    translate: 0 0 !important;
    /* One full card per slide, equal-width — each card snaps cleanly
       and the dot indicator below tells the user there are 3 panels. */
    flex: 0 0 calc(100vw - 56px) !important;
    max-width: calc(100vw - 56px) !important;
    width: calc(100vw - 56px) !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* Disable desktop entrance/float animations on mobile */
    animation: none !important;
    opacity: 1 !important;
  }
  /* Tertiary (PTIN) is hidden inside the carousel and re-rendered
     above as a static badge — see hoist rule below. */
  .hero--v2 .hero__visual .hero__card--tertiary {
    display: none !important;
  }
  /* Hoist the PTIN badge to a static position above the scroll-snap
     row by giving it `order: -1` and pulling it out of the flex flow
     with absolute positioning. We use a different approach: render a
     separate clone via JS placed BEFORE the carousel, OR keep tertiary
     inside but pinned. Simpler: use `order: -1` + `position: sticky`
     on the left so it sits as the first item but never scrolls. The
     cleanest pure-CSS path is to leave it hidden and add a visible
     trust pill via the JS module instead. */
  .hero--v2 .hero__visual .hero__card--primary {
    padding: 22px 22px !important;
  }
  .hero--v2 .hero__visual .hero__card--secondary {
    padding: 20px 22px !important;
  }
  /* On mobile the cards sit on the same navy hero background as desktop,
     so bump opacity a touch so they read as distinct cards. */
  .hero--v2 .hero__visual .hero__card--primary,
  .hero--v2 .hero__visual .hero__card--secondary {
    background-image: linear-gradient(160deg, rgba(20, 42, 70, 0.96) 0%, rgba(10, 28, 50, 0.96) 100%) !important;
    border-color: rgba(200, 162, 75, 0.45) !important;
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.45),
      0 1px 0 rgba(255, 235, 180, 0.08) inset !important;
  }
  .hero--v2 .hero__visual .hero__card--tertiary {
    background-image: linear-gradient(160deg, rgba(20, 42, 70, 0.96) 0%, rgba(10, 28, 50, 0.96) 100%) !important;
    border-color: rgba(200, 162, 75, 0.5) !important;
  }
  /* Carousel order: PTIN (badge) → Q1 (main) → Tax Strategy */
  .hero--v2 .hero__card--tertiary  { order: 1; }
  .hero--v2 .hero__card--primary   { order: 2; }
  .hero--v2 .hero__card--secondary { order: 3; }
  /* Subtle dot indicators below the carousel */
  .hero--v2 .hero__visual::after {
    content: '';
    /* Reserve room — actual dots are rendered as their own element from JS */
  }
}

/* PTIN trust strip (mobile only) — a static credential bar that sits
   above the swipeable card carousel. Hidden on desktop, where the
   tertiary card itself remains in the floating layout. */
.hero__trust-strip {
  display: none;
}
@media (max-width: 900px) {
  .hero__trust-strip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 7px 16px 7px 7px;
    border: 1px solid rgba(200, 162, 75, 0.45);
    background: linear-gradient(160deg, rgba(20, 42, 70, 0.96) 0%, rgba(10, 28, 50, 0.96) 100%);
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    letter-spacing: .04em;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    max-width: 100%;
    align-self: flex-start;
  }
  .hero__trust-strip__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
  }
  .hero__trust-strip__label {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .1em;
  }
  .hero__trust-strip__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
  }
  .hero__trust-strip__sub {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
    text-transform: none;
    letter-spacing: .02em;
  }
}

/* =============================================================
   MOBILE — Approach "Four Disciplines" tappable accordion
   On phones we collapse the four steps so users see all titles at
   a glance and tap to expand the body. The first step is open by
   default for affordance. Multi-open is allowed (no auto-collapse).
   ============================================================= */
@media (max-width: 900px) {
  .approach__steps li {
    /* Visual hint that the row is tappable */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    /* Smooth height transition when expanding */
    transition: padding .25s ease;
    position: relative;
  }
  /* Hide the body paragraph by default; expanded state reveals it */
  .approach__steps li > p {
    max-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0;
    overflow: hidden;
    transition: max-height .32s ease, opacity .25s ease, margin-top .25s ease;
    /* Reserve space for the chevron so text doesn't wrap under it */
    padding-right: 28px;
  }
  .approach__steps li[data-open="true"] > p {
    max-height: 320px; /* generous cap for ~5 lines of body copy */
    opacity: 1;
    margin-top: 8px !important;
  }
  /* Chevron indicator on the right */
  .approach__steps li::after {
    content: '';
    position: absolute;
    top: 22px;
    right: 18px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--accent, #C8A24B);
    border-bottom: 2px solid var(--accent, #C8A24B);
    transform: rotate(45deg);
    transition: transform .3s ease;
    opacity: .9;
  }
  .approach__steps li[data-open="true"]::after {
    transform: rotate(-135deg);
    top: 26px;
  }
  /* Reset any desktop-only `data-active` opacity treatments so collapsed cards
     remain fully readable. */
  .approach__steps li,
  .approach__steps li[data-active="true"],
  .approach__steps li[data-leaving="true"] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Carousel dot indicators (mobile only) */
.hero__carousel-dots {
  display: none;
}
@media (max-width: 900px) {
  .hero__carousel-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 14px;
    padding: 0;
  }
  .hero__carousel-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(200, 162, 75, 0.25);
    transition: background .25s ease, transform .25s ease;
  }
  .hero__carousel-dots span[data-active="true"] {
    background: var(--accent);
    transform: scale(1.3);
  }
}

/* =============================================================
   HERO GLOBE — static white wireframe with twinkling city stars
   Sits behind the hero copy + cards on the right, no overlap.
   Cities pulse on staggered delays so the world feels alive.
   ============================================================= */
.hero { position: relative; }
.hero__globe {
  position: absolute;
  top: 50%;
  /* Anchor BEYOND the right edge so the globe's visible portion sits in
     the open band BETWEEN the headline (left) and the credential cards
     (right). The cards then rest over open space — not directly over the
     visitor's "You" marker. Sized off both vw and vh so it scales
     consistently when the user zooms the browser. */
  right: clamp(-460px, -22vw, -200px);
  width: clamp(560px, min(56vw, 96vh), 1000px);
  height: clamp(560px, min(56vw, 96vh), 1000px);
  transform: translateY(-50%);
  z-index: 1;             /* behind hero text + cards */
  pointer-events: none;
  opacity: 0;
  animation: heroGlobeIn 1.6s cubic-bezier(.16,1,.3,1) .4s forwards;
}
@keyframes heroGlobeIn { to { opacity: .9; } }

.hero__globe-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 60px rgba(200,162,75,.18));
  /* Truly static — no rotation. Cities twinkle in place. */
}

/* Real continent outlines glow gold */
.hero__globe-land path {
  filter: drop-shadow(0 0 1.2px rgba(255,210,120,.7))
          drop-shadow(0 0 2.5px rgba(200,162,75,.45));
  animation: landBreathe 7s ease-in-out infinite;
}
@keyframes landBreathe {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

/* Connection arcs between cities — dashes drift along the path */
.hero__globe-arcs path {
  stroke-dashoffset: 0;
  animation: arcDrift 6s linear infinite;
  filter: drop-shadow(0 0 1px rgba(200,162,75,.5));
}
@keyframes arcDrift {
  to { stroke-dashoffset: -30; }
}

.hero__city-glow {
  transform-origin: center;
  transform-box: fill-box;
  animation: cityTwinkle 2.4s ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}
.hero__city-core {
  transform-origin: center;
  transform-box: fill-box;
  animation: cityCore 2.4s ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}
@keyframes cityTwinkle {
  0%, 100% { opacity: .15; transform: scale(0.5); }
  45%      { opacity: 1;   transform: scale(2.2); }
  55%      { opacity: 1;   transform: scale(2.2); }
}
@keyframes cityCore {
  0%, 100% { opacity: .5; transform: scale(0.85); }
  50%      { opacity: 1;  transform: scale(1.4); }
}
.hero__city-label {
  font-family: var(--sans, -apple-system, system-ui, sans-serif);
  font-size: 3.6px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: rgba(255,235,180,0.92);
  paint-order: stroke fill;
  stroke: rgba(10,37,64,0.85);
  stroke-width: 0.5px;
}

/* "You are here" marker — visitor's approximate IP location */
.hero__city--you .hero__city-glow {
  animation: cityTwinkle 1.6s ease-in-out infinite;
}
.hero__city-you-ring {
  transform-origin: center;
  transform-box: fill-box;
  animation: youPulse 2s ease-out infinite;
}
@keyframes youPulse {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(3.5); opacity: 0; }
}
.hero__city-label--you {
  fill: #FFE9B0;
  font-size: 4.2px;
  font-weight: 800;
}

/* Mobile: hide the globe — the hero stack is already busy on small screens. */
@media (max-width: 900px) {
  .hero__globe { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__city-glow,
  .hero__city-core,
  .hero__globe { animation: none !important; }
  .hero__globe { opacity: .9; }
  .hero__city-glow { opacity: .7; }
}

/* =============================================================
   ABOUT BARS — three-block entrance, gold center grows around the K-mark
   ============================================================= */
.about__visual {
  perspective: 800px;
}
.about__visual .about__block {
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
  transform-origin: center center;
  will-change: transform, opacity;
}
.about__visual .about__block--1 { transition-delay: .05s; }
.about__visual .about__block--3 { transition-delay: .25s; }

/* The gold center block "grows" around the K-mark */
.about__visual .about__block--2 {
  transform: scale(.55);
  transition: transform .9s cubic-bezier(.16,1,.3,1) .35s,
              opacity   .6s ease .35s,
              box-shadow .6s ease .9s;
  position: relative;
  overflow: hidden;
}
.about__visual .about__block--2 svg {
  transform: scale(.75);
  opacity: 0;
  transition: transform 1.0s cubic-bezier(.16,1,.3,1) .55s,
              opacity   .6s ease .55s;
}
/* Soft glowing aura behind the K-mark that bursts on reveal */
.about__visual .about__block--2::before {
  content: "";
  position: absolute;
  inset: 50% 50% 50% 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,162,75,.35) 0%, rgba(200,162,75,0) 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: inset .9s cubic-bezier(.16,1,.3,1) .45s,
              width .9s cubic-bezier(.16,1,.3,1) .45s,
              height .9s cubic-bezier(.16,1,.3,1) .45s,
              opacity .6s ease 1.2s;
  opacity: 0;
}

/* Reveal state */
.about__visual.is-visible .about__block,
.about__visual.is-visible .about__block--2 {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.about__visual.is-visible .about__block--2 svg {
  transform: scale(1);
  opacity: 1;
}
.about__visual.is-visible .about__block--2::before {
  inset: -25%;
  width: 150%;
  height: 150%;
  opacity: 1;
}
/* Subtle continuous breathing on the gold block once settled */
.about__visual.is-visible .about__block--2 {
  animation: aboutGoldBreathe 6s ease-in-out 1.4s infinite;
}
@keyframes aboutGoldBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,162,75,0); transform: scale(1); }
  50%      { box-shadow: 0 0 28px 0 rgba(200,162,75,.18); transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .about__visual .about__block,
  .about__visual .about__block--2,
  .about__visual .about__block--2 svg,
  .about__visual .about__block--2::before {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
    inset: auto;
    width: auto;
    height: auto;
  }
}

/* =====================================================================
   MOBILE APP-SHELL — Robinhood-style bottom tab bar (mobile only)
   Hidden on desktop. Activates at <=768px.
   ===================================================================== */

/* Hide tab bar on desktop entirely — desktop UX unchanged */
.tabbar { display: none; }

@media (max-width: 768px) {
  /* Native polish: kill webkit tap highlight + smooth momentum scroll */
  html { -webkit-tap-highlight-color: transparent; }
  body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
    /* Reserve space for fixed bottom tab bar so content isn't hidden */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

  /* Bottom tab bar — fixed, frosted blur, navy w/ gold accent */
  .tabbar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    z-index: 1000;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) 4px;
    background: rgba(10, 37, 64, 0.78);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -1px 0 rgba(0,0,0,0.25), 0 -8px 24px -12px rgba(0,0,0,0.4);
  }

  .tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px 6px;
    min-height: 56px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 140ms ease, transform 140ms ease;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }

  .tabbar__item:active {
    transform: scale(0.94);
    color: #C8A24B;
  }

  .tabbar__item.is-active {
    color: #C8A24B;
  }

  .tabbar__item.is-active .tabbar__icon::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .tabbar__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
  }

  .tabbar__icon svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  /* Tiny gold dot under active tab (Robinhood-style) */
  .tabbar__icon::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #C8A24B;
    transform: translateX(-50%) scaleX(0);
    opacity: 0;
    transition: opacity 160ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .tabbar__label {
    line-height: 1;
    margin-top: 1px;
  }

  /* Hide top header CTA chunk on mobile — tab bar replaces it */
  .header__cta { display: none; }
}

/* =====================================================================
   MOBILE — Menu toggle IS the K logo. Tap = spin + grow + go gold.
   On mobile, hide the K from the brand (left) — the right toggle owns it.
   ===================================================================== */

.menu-toggle__k {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 6px;
  color: var(--ink);
  transform: scale(0.85) rotate(0deg);
  transition: color 240ms ease,
              transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 240ms ease;
  pointer-events: none;
  filter: drop-shadow(0 0 0 rgba(200, 162, 75, 0));
}

/* Hover/active feedback (desktop) */
.menu-toggle:hover .menu-toggle__k {
  color: var(--accent);
  transform: scale(0.92) rotate(-12deg);
}

/* Open state: K spins 360°, grows, glows gold */
.menu-toggle[aria-expanded="true"] .menu-toggle__k {
  color: var(--accent);
  transform: scale(1.08) rotate(360deg);
  filter: drop-shadow(0 0 12px rgba(200, 162, 75, 0.45));
}

@media (max-width: 1040px) {
  /* On mobile, hide the K mark from the brand — the right-side toggle owns it */
  .brand__logo { display: none; }

  /* Make the menu toggle bigger, perfectly round, with subtle gold ring */
  .menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    transition: background 240ms ease, box-shadow 240ms ease;
  }
  .menu-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(200, 162, 75, 0.18);
    transition: border-color 240ms ease, transform 280ms ease;
    pointer-events: none;
  }
  .menu-toggle:active::before {
    transform: scale(0.92);
    border-color: rgba(200, 162, 75, 0.55);
  }
  .menu-toggle[aria-expanded="true"] {
    background: rgba(200, 162, 75, 0.08);
  }
  .menu-toggle[aria-expanded="true"]::before {
    border-color: rgba(200, 162, 75, 0.55);
  }

  /* Default mobile K: subtle gold-tinted */
  .menu-toggle__k {
    color: rgba(200, 162, 75, 0.85);
    padding: 8px;
  }

  /* Tap idle pulse — subtle hint that it's interactive */
  @keyframes kIdlePulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(200, 162, 75, 0)); }
    50%      { filter: drop-shadow(0 0 6px rgba(200, 162, 75, 0.25)); }
  }
  .menu-toggle:not([aria-expanded="true"]) .menu-toggle__k {
    animation: kIdlePulse 3.6s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle__k { animation: none !important; transition: color 200ms ease; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__k { transform: scale(1) rotate(0deg); }
}

/* =====================================================================
   MOBILE STAT STRIP — Robinhood-style ticker block (mobile only)
   ===================================================================== */

.stat-strip { display: none; }

@media (max-width: 768px) {
  .stat-strip {
    display: block;
    margin: 0;
    padding: 16px var(--gutter, 18px) 18px;
    background: #0A2540;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
  }

  .stat-strip__row {
    display: grid;
    grid-template-columns: 1fr 110px;
    align-items: center;
    gap: 14px;
  }

  .stat-strip__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .stat-strip__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }

  .stat-strip__value {
    font-family: "SF Mono", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  .stat-strip__delta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: #C8A24B;
    letter-spacing: 0.01em;
    margin-top: 2px;
  }
  .stat-strip__delta svg {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
  }

  .stat-strip__cell--chart {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2px;
  }

  .stat-strip__spark {
    width: 100%;
    height: 36px;
    overflow: visible;
  }

  .stat-strip__spark-line {
    filter: drop-shadow(0 1px 6px rgba(200, 162, 75, 0.45));
  }

  .stat-strip__spark-dot {
    filter: drop-shadow(0 0 6px rgba(200, 162, 75, 0.8));
    animation: sparkPulse 2.4s ease-in-out infinite;
  }
  @keyframes sparkPulse {
    0%, 100% { r: 2.6; opacity: 1; }
    50%      { r: 3.4; opacity: 0.75; }
  }

  /* Quick-action buttons — Robinhood-style stacked CTAs */
  .stat-strip__quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }

  .stat-strip__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    border-radius: 12px;
    background: #C8A24B;
    color: #0A2540;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 140ms ease, background 200ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .stat-strip__cta:active {
    transform: scale(0.97);
    background: #b89039;
  }
  .stat-strip__cta svg {
    width: 14px;
    height: 14px;
  }

  .stat-strip__cta--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
  }
  .stat-strip__cta--ghost:active {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(200, 162, 75, 0.5);
  }

  /* Hide the desktop hero CTAs on mobile — stat strip CTAs replace them.
     Hero text (eyebrow + headline + paragraph) stays for editorial hook. */
  .hero--v2 .hero__cta,
  .hero--v2 .btn--primary,
  .hero--v2 .btn--text { display: none; }

  /* Tighten CTA text — prevent wrap on "Request engagement" */
  .stat-strip__cta {
    font-size: 13px;
    padding: 0 10px;
    white-space: nowrap;
  }
  .stat-strip__cta span { line-height: 1; }
}

/* =====================================================================
   MOBILE — Hero compaction. Stat strip sits above; hero shouldn't
   reserve a full viewport of dead space anymore.
   ===================================================================== */
@media (max-width: 768px) {
  .hero--v2 {
    min-height: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 36px !important;
  }

  /* Eyebrow tighter to the top */
  .hero--v2 .hero__eyebrow,
  .hero--v2 .eyebrow {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  /* Tighten paragraph below headline */
  .hero--v2 p {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }

  /* Headline tighter */
  .hero--v2 h1,
  .hero--v2 .hero__title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* =====================================================================
   MOBILE — BRIEFING DESK CARD STACK (Robinhood feed treatment)
   Tight rows, ALL-CAPS source labels, mono timestamps, divider lines.
   Desktop editorial vertical-scan layout is untouched.
   ===================================================================== */
@media (max-width: 768px) {
  /* Section padding tighter on mobile */
  .briefing.section { padding-top: 36px !important; padding-bottom: 28px !important; }

  /* Section head: keep eyebrow + title, kill the long lede + countdown
     (countdown already lives in the stat strip up top) */
  .briefing .section__head { margin-bottom: 18px; }
  .briefing .section__head .section__lede { display: none !important; }
  .briefing .section__head .briefing-desk__countdown { display: none !important; }
  .briefing .section__title {
    font-size: 1.45rem !important;
    line-height: 1.18 !important;
    margin-top: 8px !important;
  }
  /* Keep the <br> on mobile so the headline reads as two lines */

  /* Reorder: live wire first, then today's featured, then recent archive */
  .briefing-desk {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  .briefing-desk__wire { order: 1; }
  .briefing-desk__main { order: 2; display: contents; }
  .briefing-desk__featured { order: 2; }
  .briefing-desk__recent { order: 3; }

  /* ---------- Featured (today's post) — compact card row ---------- */
  .briefing-desk__featured {
    background: #ffffff;
    border: 1px solid var(--line, rgba(10,37,64,0.10));
    border-radius: 10px;
    padding: 14px 14px 12px;
    box-shadow: 0 1px 2px rgba(10,37,64,0.04);
  }
  .briefing-desk__featured::before { display: none !important; }
  .briefing-desk__featured-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 10.5px !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .briefing-desk__tag {
    color: var(--accent, #C8A24B);
    font-weight: 700;
    background: transparent;
    padding: 0;
    border: 0;
  }
  .briefing-desk__byline {
    color: rgba(10,37,64,0.55);
    font-weight: 600;
  }
  .briefing-desk__featured-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 17px !important;
    line-height: 1.28 !important;
    margin: 0 !important;
    color: var(--ink, #0A2540);
    /* clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Kill the long body dek on mobile — desktop keeps it */
  .briefing-desk__featured-dek { display: none !important; }
  .briefing-desk__featured-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(10,37,64,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
  }
  .briefing-desk__read {
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 0;
    color: var(--blue, #1F6FEB);
    font-weight: 700;
  }
  .briefing-desk__meta {
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    font-size: 11px;
    color: rgba(10,37,64,0.55);
  }

  /* ---------- Recent archive — Robinhood row list ---------- */
  .briefing-desk__recent {
    background: #ffffff;
    border: 1px solid var(--line, rgba(10,37,64,0.08));
    border-radius: 10px;
    padding: 4px 14px;
  }
  .briefing-desk__recent .briefing-desk__subhead {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent, #C8A24B);
    font-weight: 700;
    margin: 12px 0 6px;
  }
  .briefing-desk__recent-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .briefing-desk__recent-list li {
    padding: 12px 0 !important;
    border-top: 1px solid rgba(10,37,64,0.07) !important;
    border-bottom: 0 !important;
    -webkit-tap-highlight-color: transparent;
  }
  .briefing-desk__recent-list li:first-child { border-top: 0 !important; }
  .briefing-desk__recent-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 14.5px !important;
    line-height: 1.32 !important;
    color: var(--ink, #0A2540) !important;
    margin: 0 0 4px !important;
    font-weight: 600 !important;
    /* 2-line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .briefing-desk__recent-meta {
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    font-size: 10.5px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(10,37,64,0.55) !important;
  }
  .briefing-desk__recent-empty {
    font-size: 12.5px !important;
    color: rgba(10,37,64,0.55) !important;
    padding: 14px 0 !important;
    text-align: left;
    font-style: normal;
  }

  /* ---------- Wire — tight live feed rows ---------- */
  .briefing-desk__wire {
    background: var(--ink, #0A2540);
    border-radius: 10px;
    padding: 14px 14px 10px;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(10,37,64,0.18);
  }
  .briefing-desk__wire-head {
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .briefing-desk__wire-head .briefing-desk__subhead {
    color: var(--accent, #C8A24B) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }
  .briefing-desk__pulse-row {
    color: rgba(255,255,255,0.6);
    font-size: 10px;
    letter-spacing: 0.10em;
  }
  .briefing-desk__wire-list {
    max-height: none !important;
    overflow: visible !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .briefing-desk__wire-list li {
    padding: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: 0 !important;
    -webkit-tap-highlight-color: rgba(200,162,75,0.12);
  }
  .briefing-desk__wire-list li:first-child { border-top: 0 !important; }
  .briefing-desk__wire-list li:active { background: rgba(255,255,255,0.04); }
  .briefing-desk__wire-list a {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px;
    row-gap: 4px;
    padding: 12px 0 !important;
    text-decoration: none !important;
    align-items: start;
  }
  .briefing-desk__wire-source {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    color: var(--accent, #C8A24B) !important;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .briefing-desk__wire-time {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace !important;
    font-size: 10px !important;
    color: rgba(255,255,255,0.5) !important;
    letter-spacing: 0.04em !important;
    text-align: right;
    white-space: nowrap;
  }
  .briefing-desk__wire-headline {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    font-family: var(--font-serif, Georgia, serif) !important;
    font-size: 14px !important;
    line-height: 1.32 !important;
    color: #ffffff !important;
    margin: 0 !important;
    font-weight: 500 !important;
    /* 2-line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .briefing-desk__new-badge {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: end;
    margin-right: 6px;
    background: var(--accent, #C8A24B);
    color: var(--ink, #0A2540);
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.10em;
    padding: 2px 5px;
    border-radius: 3px;
  }
  .briefing-desk__wire-loading {
    color: rgba(255,255,255,0.55) !important;
    font-size: 12.5px !important;
    padding: 14px 0 !important;
    border-top: 0 !important;
  }
  .briefing-desk__wire-foot {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
  }
  .briefing-desk__sources { color: rgba(255,255,255,0.45); }
}


/* =====================================================================
   MOBILE — SYSTEM FONT STACK + STICKY COMPACT HEADER
   System font for chrome/UI (native iOS feel); editorial serif preserved
   for hero wordmark, section titles, and Briefing Desk headlines.
   Header compacts on scroll for an app-like topbar.
   ===================================================================== */
@media (max-width: 768px) {
  /* ---------- System font for body / UI chrome ---------- */
  html, body {
    font-family:
      -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Preserve editorial serif on display type — these stay Source Serif/Georgia */
  .hero--v2 .hero__title,
  .hero--v2 h1,
  .section__title,
  .briefing-desk__featured-title,
  .briefing-desk__recent-title,
  .briefing-desk__wire-headline,
  .quote q,
  .quote blockquote,
  .briefing-desk__featured-dek {
    font-family: var(--font-serif, "Source Serif Pro", "Source Serif 4", Georgia, "Times New Roman", serif) !important;
  }

  /* Numeric / mono treatments stay mono */
  .stat-strip__value,
  .briefing-desk__countdown-time,
  .briefing-desk__wire-source,
  .briefing-desk__wire-time,
  .briefing-desk__recent-meta,
  .briefing-desk__meta,
  .briefing-desk__wire-foot,
  .briefing-desk__sources {
    font-family:
      ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas,
      "Liberation Mono", monospace !important;
  }

  /* Brand wordmark in header: keep it tight system-display */
  .brand__wordmark,
  .brand__wordmark strong,
  .brand__wordmark span {
    font-family:
      -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: -0.01em;
  }
  .brand__wordmark strong { font-weight: 700; }

  /* ---------- Sticky compact header on scroll ---------- */
  .header {
    transition:
      background 220ms ease,
      box-shadow 220ms ease,
      border-color 220ms ease;
  }
  .header__inner {
    height: 64px;
    transition: height 220ms ease;
  }

  /* When scrolled, compact down — thinner bar, smaller K, tighter brand */
  .header--scrolled .header__inner {
    height: 50px !important;
  }
  .header--scrolled .brand__wordmark strong {
    font-size: 15px !important;
    letter-spacing: -0.01em;
  }
  /* Hide the "Advisory Group, LLC" suffix when compact — cleaner topbar */
  .header--scrolled .brand__wordmark > span {
    display: none !important;
  }
  .header--scrolled .brand__logo,
  .header--scrolled .brand__mark {
    width: 22px !important;
    height: 22px !important;
  }
  .header--scrolled .menu-toggle {
    width: 34px !important;
    height: 34px !important;
  }
  .header--scrolled .menu-toggle__k {
    width: 16px !important;
    height: 16px !important;
  }
  /* Stronger background + hairline when compact (looks crisper at thinner height) */
  .header--scrolled {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
  }

  /* ---------- Native polish: kill tap highlights site-wide on mobile ---------- */
  a, button, [role="button"], .menu-toggle, .tabbar__item,
  .briefing-desk__wire-list a, .briefing-desk__recent-list a,
  .stat-strip__cta {
    -webkit-tap-highlight-color: transparent;
  }
  /* Smooth momentum scroll on overflow containers */
  body { -webkit-overflow-scrolling: touch; }
}

/* =====================================================================
   MOBILE — Hide the legacy hero card carousel.
   The stat strip up top now carries the credential / countdown payload,
   so the carousel below the hero body became redundant noise.
   Desktop keeps the absolutely-positioned hero cards over the globe.
   ===================================================================== */
@media (max-width: 768px) {
  .hero--v2 .hero__visual { display: none !important; }
  .hero__carousel-dots { display: none !important; }
}

/* =====================================================================
   MOBILE / TOUCH — NATIVE POLISH
   On touch devices: kill ":hover" rules globally so tap states feel
   right, kill tap highlights, enable momentum scroll, prevent text
   selection inside chrome/UI affordances, disable text-size adjust.
   ===================================================================== */

/* ---------- All viewports: prevent iOS auto-resize on rotate ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- Touch devices (no hover, coarse pointer): kill all hover styling ---------- */
@media (hover: none) and (pointer: coarse) {
  /* Defang every :hover declaration on touch by zeroing transitions on hover-bound rules.
     Specific hover overrides for our common patterns: */
  a:hover,
  button:hover,
  .btn:hover,
  .btn--primary:hover,
  .btn--text:hover,
  .nav a:hover,
  .footer a:hover,
  .briefing-desk__read:hover,
  .briefing-desk__archive:hover,
  .briefing-desk__recent-list a:hover .briefing-desk__recent-title,
  .briefing-desk__wire-list a:hover .briefing-desk__wire-headline {
    /* Reset transformations and color shifts that look stuck on touch */
    transform: none !important;
    color: inherit;
  }
  /* Active states should still feel responsive on tap */
  a:active,
  button:active,
  .tabbar__item:active,
  .stat-strip__cta:active,
  .briefing-desk__wire-list li:active,
  .briefing-desk__recent-list li:active {
    opacity: 0.72;
    transition: opacity 80ms ease;
  }
}

/* ---------- Mobile only: native chrome polish ---------- */
@media (max-width: 768px) {
  /* No tap highlights anywhere */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Momentum scroll on the body */
  html, body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none; /* prevent weird bounce showing white above the page */
  }

  /* Headers, tab labels, eyebrows shouldn't be selectable on tap */
  .header, .topbar, .tabbar,
  .eyebrow, .stat-strip__label, .stat-strip__cta,
  .briefing-desk__wire-source, .briefing-desk__recent-meta,
  .briefing-desk__tag, .briefing-desk__byline,
  .menu-toggle {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Safe-area: extend the navy topbar background under the notch */
  .topbar {
    padding-top: env(safe-area-inset-top);
  }

  /* The tab bar already has env(safe-area-inset-bottom) but body needs
     to reserve space below content so nothing hides under the bar. */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* Inputs/textareas: native styling, no zoom-on-focus (font-size >= 16px) */
  input, select, textarea {
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Kill any leftover scroll-snap on now-vertical card lists
     (the hero carousel had snap-x; we hid it but other places might) */
  .briefing-desk__wire-list,
  .briefing-desk__recent-list {
    scroll-snap-type: none !important;
  }

  /* Buttons / CTAs feel springier on tap */
  .btn, .btn--primary, .stat-strip__cta, .tabbar__item {
    transition: transform 120ms ease, opacity 120ms ease, background-color 180ms ease;
  }
  .btn:active, .btn--primary:active, .stat-strip__cta:active {
    transform: scale(0.97);
  }
}