/* ==========================================================================
   Basha Wealth Management — design system
   Rebuilt Aug 2026 as a standalone static site.

   Palette direction (client-directed): uplifting light blue + white.
   White surfaces, light-blue washes, brighter blues; deep navy for text
   depth and the footer band; gold as a restrained accent; Basha red only
   as a small accent (footer rule, errors). No beige/ivory backgrounds.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --bw-navy:        #122C45;
  --bw-navy-deep:   #0B1F33;
  --bw-navy-soft:   #1C3D5C;
  --bw-blue:        #2E6DA4;
  --bw-blue-dark:   #1F4E79;
  --bw-blue-bright: #3E8BC9;
  --bw-sky:         #C4DCEC;
  --bw-sky-deep:    #8FBAD6;
  /* Decorative gold — rules, borders, icon fills, button backgrounds.
     Never used for small text: at 11px it only reaches ~3.1:1 on white. */
  --bw-gold:        #B08D4A;
  --bw-gold-soft:   #C6A96B;
  --bw-gold-bright: #DECA96;
  /* Text gold — WCAG AA at any size on white, wash, and soft backgrounds
     (5.25 / 5.05 / 4.82). Use this for every gold *word* on a light surface. */
  --bw-gold-text:   #84682C;
  --bw-red:         #BE3030;

  /* Surfaces */
  --bw-bg:        #FFFFFF;
  --bw-bg-soft:   #EFF6FC;
  --bw-bg-wash:   #F7FBFE;
  --bw-surface:   #FFFFFF;
  --bw-rule:      #DCE8F1;
  --bw-rule-soft: #EAF2F8;

  /* Ink */
  --bw-ink:       #2B3D4F;
  --bw-ink-soft:  #55677A;
  /* Muted ink darkened from #8896A4 (3.02:1 — failed AA) to reach 4.92 / 4.72
     / 4.51 on white, wash, and soft backgrounds. */
  --bw-ink-muted: #657280;

  /* Type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.14vw, 1.06rem);
  --step-1:  clamp(1.13rem, 1.07rem + 0.28vw, 1.28rem);
  --step-2:  clamp(1.33rem, 1.22rem + 0.52vw, 1.62rem);
  --step-3:  clamp(1.60rem, 1.38rem + 0.98vw, 2.15rem);
  --step-4:  clamp(1.95rem, 1.57rem + 1.72vw, 2.90rem);
  --step-5:  clamp(2.35rem, 1.72rem + 2.80vw, 3.90rem);

  /* Elevation — layered, blue-tinted so shadows sit in the palette */
  --shadow-xs: 0 1px 2px rgb(11 31 51 / 0.05);
  --shadow-sm: 0 1px 2px rgb(11 31 51 / 0.05), 0 8px 20px -14px rgb(11 31 51 / 0.30);
  --shadow-md: 0 1px 3px rgb(11 31 51 / 0.06), 0 16px 36px -20px rgb(11 31 51 / 0.32);
  --shadow-lg: 0 2px 6px rgb(11 31 51 / 0.06), 0 30px 60px -30px rgb(11 31 51 / 0.34);
  --shadow-gold: 0 12px 30px -12px rgb(176 141 74 / 0.55);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1140px;
  --wrap-narrow: 760px;
  --wrap-mid: 920px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--bw-bg);
  color: var(--bw-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
img { height: auto; }
svg { display: inline-block; vertical-align: middle; max-width: 100%; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--bw-gold-bright); color: var(--bw-navy-deep); }

:focus-visible {
  outline: 2px solid var(--bw-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -80px;
  z-index: 100;
  background: var(--bw-navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  transition: top 200ms var(--ease);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap--mid { max-width: var(--wrap-mid); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(64px, 3.6rem + 5.5vw, 118px); }
.section--tight { padding-block: clamp(48px, 2.6rem + 3.6vw, 80px); }
.section--soft { background: var(--bw-bg-soft); border-block: 1px solid var(--bw-rule); }
.section--wash { background: var(--bw-bg-wash); border-block: 1px solid var(--bw-rule); }

.grid { display: grid; gap: 22px; }
.grid > *, .split > * { min-width: 0; }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.split {
  display: grid;
  gap: clamp(36px, 2rem + 4vw, 64px);
  align-items: center;
}
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } }

.stack > * + * { margin-top: 20px; }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-tight { max-width: 48ch; }
.center .measure, .center .measure-tight { margin-inline: auto; }
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 28px; }
.mt-l { margin-top: 44px; }
.mt-xl { margin-top: 60px; }

/* --------------------------------------------------------------------------
   4. Typography components
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bw-gold-text);
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bw-gold-soft), var(--bw-gold));
  flex: none;
}
.center .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(270deg, var(--bw-gold-soft), var(--bw-gold));
  flex: none;
}

.headline {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--bw-navy);
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
}
.h1 { font-size: var(--step-5); }
.h2 { font-size: var(--step-4); }
.h3 { font-size: var(--step-3); }
.h4 { font-size: var(--step-2); }
.h5 { font-size: var(--step-1); line-height: 1.3; }

.gold { color: var(--bw-gold-text); }
.lead {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--bw-ink-soft);
  text-wrap: pretty;
}
.body { font-size: var(--step-0); line-height: 1.75; color: var(--bw-ink); }
.body-soft { color: var(--bw-ink-soft); }
.small { font-size: var(--step--1); line-height: 1.65; color: var(--bw-ink-soft); }
.fine { font-size: 12.5px; line-height: 1.6; color: var(--bw-ink-muted); }

.prose > * + * { margin-top: 22px; }
.prose p { font-size: var(--step-0); line-height: 1.8; color: var(--bw-ink-soft); }

.link-inline {
  font-weight: 600;
  color: var(--bw-blue-dark);
  text-decoration: underline;
  text-decoration-color: var(--bw-gold);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: color 180ms ease;
}
.link-inline:hover { color: var(--bw-navy-deep); }

.pullquote {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  color: var(--bw-navy);
  letter-spacing: -0.01em;
  line-height: 1.32;
  font-size: var(--step-3);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms ease,
              background 200ms ease, border-color 200ms ease, color 200ms ease, filter 200ms ease;
}
.btn svg { flex: none; }

.btn--primary {
  background: linear-gradient(140deg, var(--bw-navy) 0%, var(--bw-navy-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgb(11 31 51 / 0.6);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgb(11 31 51 / 0.7); }

.btn--gold {
  background: linear-gradient(135deg, var(--bw-gold-soft) 0%, var(--bw-gold) 100%);
  color: var(--bw-navy-deep);
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 34px -12px rgb(176 141 74 / 0.68); }

.btn--ghost {
  background: transparent;
  color: var(--bw-navy);
  border: 1px solid var(--bw-sky-deep);
}
.btn--ghost:hover { border-color: var(--bw-gold); background: var(--bw-bg-wash); color: var(--bw-navy-deep); }

.btn--ghost-light {
  background: rgb(255 255 255 / 0.06);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.42);
  backdrop-filter: blur(4px);
}
.btn--ghost-light:hover { border-color: var(--bw-gold-bright); background: rgb(255 255 255 / 0.14); }

.btn--sm { padding: 11px 20px; font-size: 11px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* Hero "start here" CTA — deliberately the loudest element on the page */
.btn-cta {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 17px 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bw-gold-soft) 0%, var(--bw-gold) 100%);
  color: var(--bw-navy-deep);
  overflow: hidden;
  cursor: pointer;
  animation: cta-pulse 2.8s ease-in-out infinite;
  transition: transform 200ms var(--ease), filter 200ms ease;
}
.btn-cta:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.06); animation-play-state: paused; }
.btn-cta__label {
  display: block; text-align: center;
  font-size: 14.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.btn-cta__label svg { margin-left: 8px; }
.btn-cta__sub { font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; opacity: 0.86; }
.btn-cta::after {
  content: "";
  position: absolute; inset-block: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.55), transparent);
  transform: skewX(-20deg);
  animation: cta-shimmer 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 14px 34px -10px rgb(176 141 74 / 0.55), 0 0 0 0 rgb(198 169 107 / 0.45); }
  50%      { box-shadow: 0 18px 42px -10px rgb(176 141 74 / 0.72), 0 0 0 12px rgb(198 169 107 / 0); }
}
@keyframes cta-shimmer {
  0%, 55%   { left: -60%; }
  85%, 100% { left: 130%; }
}

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--bw-surface);
  border: 1px solid var(--bw-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 30px;
  transition: transform 320ms var(--ease), box-shadow 320ms ease, border-color 320ms ease;
}
.card--hover:hover,
button.card:hover {
  transform: translateY(-4px);
  border-color: var(--bw-gold-soft);
  box-shadow: var(--shadow-md);
}
.card--flush { padding: 0; overflow: hidden; }
button.card { display: block; width: 100%; text-align: left; font: inherit; color: inherit; }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--bw-bg-wash), var(--bw-bg-soft));
  border: 1px solid var(--bw-rule);
  color: var(--bw-gold);
  margin-bottom: 20px;
}
.card__title { margin-bottom: 10px; }
.card__text { font-size: 15px; line-height: 1.7; color: var(--bw-ink-soft); }

.card__step {
  position: absolute;
  top: 14px; right: 22px;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  color: var(--bw-navy);
  opacity: 0.08;
  line-height: 1;
  pointer-events: none;
}

.card--accent {
  background: var(--bw-bg-wash);
  border-left: 3px solid var(--bw-gold);
}
.card--topline { border-top: 3px solid var(--bw-navy); background: var(--bw-bg-wash); }

.card__cue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bw-gold-text);
}
button.card:hover .card__cue,
a.card:hover .card__cue { color: var(--bw-navy); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: box-shadow 260ms ease, border-color 260ms ease, background 260ms ease;
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--bw-rule);
  box-shadow: 0 10px 30px -24px rgb(11 31 51 / 0.5);
}
.site-header .btn { white-space: nowrap; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
  transition: padding 260ms ease;
}
.site-header[data-scrolled="true"] .site-header__inner { padding-block: 9px; }

/* A fixed brand height keeps the header stable whether the logo file or the
   typeset fallback renders — without it, the swap produced a layout shift. */
.brand { display: inline-flex; align-items: center; min-height: 50px; transition: min-height 260ms ease; }
.site-header[data-scrolled="true"] .brand { min-height: 42px; }
.brand__img { height: 50px; width: auto; transition: height 260ms ease; }
.site-header[data-scrolled="true"] .brand__img { height: 42px; }
.site-footer .brand { min-height: 0; }
.site-footer .brand__img { height: 62px; }
/* The typeset wordmark stands in only when the logo file is absent. */
.brand__img[data-failed] { display: none; }
.brand__mark { display: none; flex-direction: column; line-height: 1; }
.brand__img[data-failed] + .brand__mark { display: flex; }
.brand__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--bw-navy);
}
.brand__sub {
  margin-top: 5px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bw-blue);
}
.brand--light .brand__name { color: #fff; }
.brand--light .brand__sub { color: var(--bw-sky); }

.nav { display: none; align-items: center; gap: 22px; }
@media (min-width: 1080px) { .nav { display: flex; } }
@media (min-width: 1240px) { .nav { gap: 30px; } }
.nav__link {
  position: relative;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bw-ink-soft);
  padding-block: 4px;
  transition: color 200ms ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bw-gold-soft), var(--bw-gold));
  transition: width 260ms var(--ease);
}
.nav__link:hover { color: var(--bw-blue); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--bw-blue-dark); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--bw-rule);
  color: var(--bw-navy);
}
@media (min-width: 1080px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--bw-rule);
  background: #fff;
  padding: 20px 24px 26px;
}
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 1080px) { .mobile-nav[data-open="true"] { display: none; } }
.mobile-nav__link {
  display: block;
  padding-block: 11px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bw-ink-soft);
  border-bottom: 1px solid var(--bw-rule-soft);
}
.mobile-nav__link[aria-current="page"] { color: var(--bw-blue-dark); }
.mobile-nav .btn { margin-top: 20px; width: 100%; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bw-navy-deep);
  isolation: isolate;
}
.hero__stage { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1800ms ease-out;
}
.hero__slide[data-active="true"] { opacity: 1; }
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
/* Until the real photographs are in assets/img/, each slide still reads as a
   deliberate brand surface rather than an empty box. */
.hero__slide[data-tone="mountains"] { background: linear-gradient(160deg, #1F4E79 0%, #122C45 55%, #0B1F33 100%); }
.hero__slide[data-tone="coast"]     { background: linear-gradient(160deg, #2E6DA4 0%, #1F4E79 55%, #0B1F33 100%); }
.hero__slide[data-tone="travel"]    { background: linear-gradient(160deg, #3E8BC9 0%, #2E6DA4 50%, #122C45 100%); }
.hero__slide[data-tone="family"]    { background: linear-gradient(160deg, #1C3D5C 0%, #122C45 55%, #0B1F33 100%); }
.hero__slide[data-active="true"] img { animation: kenburns 14s ease-out forwards; }
/* A deferred slide has no source yet; its data-tone gradient stands in. */
.hero__slide img:not([src]) { visibility: hidden; }
@keyframes kenburns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.14); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgb(11 31 51 / 0.80) 0%, rgb(11 31 51 / 0.48) 48%, rgb(11 31 51 / 0.14) 100%),
    linear-gradient(0deg, rgb(11 31 51 / 0.58) 0%, transparent 34%);
}
.hero__inner {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: center;
  padding-block: clamp(88px, 6rem + 6vw, 150px);
}
.hero__copy { max-width: 660px; color: #fff; }
.hero__copy .eyebrow { color: var(--bw-gold-bright); }
.hero__copy .eyebrow::before { background: linear-gradient(90deg, var(--bw-gold), var(--bw-gold-bright)); }
.hero__title {
  color: #fff;
  font-size: var(--step-5);
  margin-top: 22px;
  text-shadow: 0 2px 34px rgb(11 31 51 / 0.5);
}
.hero__title em { font-style: normal; color: var(--bw-gold-bright); }
.hero__text {
  margin-top: 22px;
  font-size: var(--step-1);
  line-height: 1.65;
  color: rgb(255 255 255 / 0.92);
  max-width: 56ch;
}
.hero__motto {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  font-weight: 600;
  color: var(--bw-gold-bright);
}
.hero__cta-label {
  margin-top: 34px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bw-gold-bright);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero__assurances {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 28px;
  font-size: 13px; font-weight: 500;
  color: rgb(255 255 255 / 0.82);
}
.hero__assurances span { display: inline-flex; align-items: center; gap: 8px; }
.hero__assurances svg { color: var(--bw-gold-soft); }

.hero__dots {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  z-index: 2;
}
/* The visible dot is 10px, but the button itself is 26px so it satisfies
   WCAG 2.2 target size and is comfortable on a touchscreen. */
.hero__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  background: none;
}
.hero__dot::before {
  content: "";
  display: block;
  width: 10px; height: 10px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.36);
  transition: width 300ms var(--ease), background 300ms ease;
}
.hero__dot:hover::before { background: rgb(255 255 255 / 0.66); }
.hero__dot[data-active="true"] { width: 40px; }
.hero__dot[data-active="true"]::before { width: 30px; background: var(--bw-gold-soft); }

/* Interior page hero */
.page-hero {
  background:
    radial-gradient(90% 70% at 82% 0%, rgb(46 109 164 / 0.13), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgb(18 44 69 / 0.06), transparent 56%),
    linear-gradient(180deg, var(--bw-bg-soft) 0%, #FFFFFF 82%);
  border-bottom: 1px solid var(--bw-rule);
  padding-block: clamp(56px, 3rem + 5vw, 104px);
}

/* --------------------------------------------------------------------------
   9. Bands, portraits, media
   -------------------------------------------------------------------------- */
.band {
  background:
    radial-gradient(80% 120% at 12% 0%, rgb(46 109 164 / 0.30), transparent 60%),
    linear-gradient(135deg, var(--bw-navy-deep) 0%, var(--bw-navy) 58%, var(--bw-navy-soft) 100%);
  color: #fff;
}
.band .headline { color: #fff; }
.band .lead, .band p { color: rgb(255 255 255 / 0.82); }

.portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--bw-rule);
  box-shadow: 0 0 0 1px rgb(176 141 74 / 0.2), var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(176 141 74 / 0.28), transparent 56%),
    linear-gradient(160deg, var(--bw-navy-deep) 0%, var(--bw-navy) 60%, var(--bw-navy-soft) 100%);
}
.portrait picture { display: block; width: 100%; height: 100%; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait img[data-failed] { display: none; }

/* Any image that fails to load reveals its container's gradient instead */
img[data-failed] { display: none; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.stat__big { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--bw-gold-text); line-height: 1; }
.stat__small { font-size: 13px; line-height: 1.4; color: var(--bw-ink-soft); margin-top: 8px; }

.credibility {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 42px;
  padding-block: 22px;
}
@media (min-width: 940px) { .credibility { justify-content: space-between; } }
.credibility span { display: inline-flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600; color: var(--bw-ink); }
.credibility svg { color: var(--bw-gold); flex: none; }

/* Video cards */
.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(70% 90% at 50% 100%, rgb(46 109 164 / 0.42), transparent 62%),
    linear-gradient(135deg, var(--bw-navy-deep) 0%, var(--bw-navy) 55%, var(--bw-blue-dark) 100%);
}
.video-thumb__play {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--bw-gold-soft);
  background: rgb(176 141 74 / 0.2);
  color: var(--bw-gold-bright);
  backdrop-filter: blur(2px);
  transition: transform 300ms var(--ease), background 300ms ease, border-color 300ms ease;
}
button.video-thumb__play { cursor: pointer; }
.card:hover .video-thumb__play,
button.video-thumb__play:hover,
button.video-thumb__play:focus-visible {
  transform: scale(1.09);
  background: rgb(176 141 74 / 0.34);
  border-color: var(--bw-gold-bright);
}

/* The YouTube player replaces the facade inside the same 16:9 box, so
   swapping one for the other causes no layout shift. */
/* Optional self-hosted poster frame. Sits behind the play button; if the
   file is absent the brand gradient shows through unchanged. */
.video-thumb__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-thumb__poster[data-failed] { display: none; }
.video-thumb:has(.video-thumb__poster:not([data-failed]))::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(11 31 51 / 0.45) 0%, rgb(11 31 51 / 0.15) 45%, rgb(11 31 51 / 0.60) 100%);
  pointer-events: none;
}
.video-thumb__meta,
.video-thumb__state,
.video-thumb__play { position: relative; z-index: 1; }

/* Shown instead of the player when the page has no origin YouTube can check
   (a file:// page, or the bundled review preview). */
.video-thumb__notice {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 26px;
  background: linear-gradient(150deg, var(--bw-navy-deep) 0%, var(--bw-navy) 60%, var(--bw-blue-dark) 100%);
  color: rgb(255 255 255 / 0.86);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: left;
}
.video-thumb__notice strong { color: #fff; }
.video-thumb__notice a {
  color: var(--bw-gold-bright);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
}

.video-thumb__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bw-navy-deep);
}

.video-thumb__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-body { padding: 28px; }
.video-body__alt { margin-top: 16px; }
.video-body__alt a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bw-blue-dark);
  text-decoration: underline;
  text-decoration-color: var(--bw-gold);
  text-underline-offset: 4px;
  transition: color 180ms ease;
}
.video-body__alt a:hover { color: var(--bw-navy-deep); }
.video-thumb__meta {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.88);
  background: rgb(255 255 255 / 0.12);
  backdrop-filter: blur(4px);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
}
.video-thumb__state {
  position: absolute; bottom: 16px; left: 20px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */
.field { display: block; }
.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bw-ink-soft);
}
.field__label .opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--bw-ink-muted); }
.input {
  width: 100%;
  padding: 13px 16px;
  background: var(--bw-surface);
  border: 1px solid var(--bw-rule);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--bw-ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.input::placeholder { color: var(--bw-ink-muted); }
.input:focus {
  outline: none;
  border-color: var(--bw-gold);
  box-shadow: 0 0 0 3px rgb(176 141 74 / 0.18);
}
textarea.input { min-height: 132px; resize: vertical; }
.form-grid { display: grid; gap: 20px; }
@media (min-width: 560px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-error { font-size: 14px; font-weight: 600; color: var(--bw-red); }
.form-note { font-size: 12px; text-align: center; color: var(--bw-ink-muted); }

.contact-line { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.contact-line > span { min-width: 0; }
.contact-line svg { color: var(--bw-blue); flex: none; margin-top: 3px; }
.contact-line__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bw-ink-muted); }
.contact-line__value {
  display: inline-block;
  margin-top: 5px;
  font-weight: 600;
  color: var(--bw-navy);
  overflow-wrap: anywhere;
  transition: color 180ms ease;
}
a.contact-line:hover .contact-line__value { color: var(--bw-blue); }

.socials { display: flex; align-items: center; gap: 12px; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--bw-rule);
  color: var(--bw-blue);
  transition: color 260ms ease, border-color 260ms ease, transform 260ms var(--ease);
}
.socials a:hover { color: var(--bw-gold); border-color: var(--bw-gold); transform: translateY(-2px); }
.socials--dark a { border-color: rgb(255 255 255 / 0.24); color: rgb(255 255 255 / 0.78); }
.socials--dark a:hover { color: var(--bw-gold-bright); border-color: var(--bw-gold); }

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.faq { border: 1px solid var(--bw-rule); border-radius: var(--radius); background: var(--bw-surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq + .faq { margin-top: 14px; }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--bw-navy);
  transition: background 200ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--bw-bg-wash); }
.faq__chev { flex: none; margin-top: 5px; color: var(--bw-gold); transition: transform 300ms var(--ease); }
.faq[open] .faq__chev { transform: rotate(180deg); }
.faq__answer { padding: 0 26px 24px; font-size: 15px; line-height: 1.75; color: var(--bw-ink-soft); }

/* --------------------------------------------------------------------------
   12. Clarity Check
   -------------------------------------------------------------------------- */
.clarity { position: relative; border-radius: var(--radius-lg); overflow: hidden; scroll-margin-top: 96px; }
.clarity__backdrop {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 700ms ease;
}
.clarity__backdrop[data-on="true"] { opacity: 1; }
.clarity__shell {
  position: relative;
  background: var(--bw-surface);
  border: 1px solid var(--bw-rule);
  border-top: 3px solid var(--bw-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(26px, 1.6rem + 2.4vw, 52px);
}

.stage[hidden] { display: none; }
.stage { animation: stage-in 450ms var(--ease) both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.vision-grid { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 620px) { .vision-grid { grid-template-columns: 1fr 1fr; } }
.vision-card {
  display: block; width: 100%; text-align: left;
  background: var(--bw-surface);
  border: 1px solid var(--bw-rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 260ms var(--ease), box-shadow 260ms ease, border-color 260ms ease;
}
.vision-card:hover { transform: translateY(-3px); border-color: var(--bw-gold-soft); box-shadow: var(--shadow-md); }
.vision-card[data-selected="true"] { border-color: var(--bw-gold); box-shadow: 0 0 0 1px var(--bw-gold), var(--shadow-md); }
.vision-card__media {
  /* This is a <span>. Without display:block the height below is ignored —
     height does not apply to a non-replaced inline box — so each card's media
     was silently sized by its own image instead. Four 16:9 scenes happened to
     match, which hid the bug until a portrait image was added and one card
     grew to twice the height of its neighbours (and the grid stretched its
     row-mate to match).

     A fixed aspect-ratio keeps every card identical regardless of the source
     image's shape, and scales with the card instead of pinning one pixel
     height across breakpoints. 4:3 is tall enough that the portrait family
     card keeps all four faces while the landscape scenes still read wide. */
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(150deg, var(--bw-navy) 0%, var(--bw-blue-dark) 60%, var(--bw-blue) 100%);
}
.vision-card__media img { display: block; }
.vision-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.vision-card:hover .vision-card__media img { transform: scale(1.06); }
.vision-card__check {
  position: absolute; top: 12px; right: 12px;
  display: none;
  background: #fff; border-radius: var(--radius-pill);
  color: var(--bw-gold);
  padding: 2px;
}
.vision-card[data-selected="true"] .vision-card__check { display: block; }
.vision-card__body {
  /* Also a <span>, and also missing display:block — so this padding was being
     ignored the same way the media box's height was. Its children are block
     level, so they broke out of the inline box and rendered flush against the
     card border, leaving the title and description touching the edges. */
  display: block;
  padding: 20px;
}
.vision-card__body .headline { display: block; }
.vision-card__body p { font-size: 14px; line-height: 1.6; color: var(--bw-ink-soft); margin-top: 7px; }

.assurances { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 26px; font-size: 14px; color: var(--bw-ink-soft); }
.assurances span { display: inline-flex; align-items: center; gap: 9px; }
.assurances svg { color: var(--bw-gold); }

.progress { display: flex; align-items: center; gap: 18px; }
.progress__label { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bw-ink-soft); font-variant-numeric: tabular-nums; }
.progress__track { flex: 1; display: flex; gap: 6px; }
.progress__seg { flex: 1; height: 3px; border-radius: var(--radius-pill); background: var(--bw-rule); transition: background 500ms ease; }
.progress__seg[data-active="true"] { background: linear-gradient(90deg, var(--bw-gold-soft), var(--bw-gold)); }
.milestone { margin-top: 12px; font-size: 13px; font-style: italic; color: var(--bw-gold-text); }

.vision-chip {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 6px 16px 6px 6px;
  background: var(--bw-bg-wash);
  border: 1px solid var(--bw-rule);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--bw-ink-soft);
}
.vision-chip img { width: 32px; height: 32px; border-radius: var(--radius-pill); object-fit: cover; background: var(--bw-navy); }
.vision-chip strong { color: var(--bw-navy); }
.vision-chip button { text-decoration: underline; text-underline-offset: 2px; transition: color 180ms ease; }
.vision-chip button:hover { color: var(--bw-navy); }

.answers { display: grid; gap: 13px; margin-top: 30px; }
.answer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left;
  padding: 17px 22px;
  background: var(--bw-surface);
  border: 1px solid var(--bw-rule);
  border-radius: 12px;
  color: var(--bw-ink);
  font-size: 15.5px;
  line-height: 1.5;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--ease), background 220ms ease;
}
.answer:hover { border-color: var(--bw-gold); background: var(--bw-bg-wash); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.answer[data-selected="true"] { border-color: var(--bw-gold); background: var(--bw-bg-soft); box-shadow: 0 0 0 1px var(--bw-gold), var(--shadow-sm); }
.answer__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.answer__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-pill);
  color: var(--bw-gold);
  background: var(--bw-bg-wash);
  border: 1px solid var(--bw-rule);
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease;
}
.answer[data-selected="true"] .answer__icon { color: var(--bw-navy-deep); background: var(--bw-gold-soft); border-color: var(--bw-gold); }
.answer__dot {
  flex: none;
  width: 20px; height: 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--bw-sky-deep);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 220ms ease;
}
.answer[data-selected="true"] .answer__dot { border-color: var(--bw-gold); }
.answer__dot i { display: none; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--bw-gold); }
.answer[data-selected="true"] .answer__dot i { display: block; }

.insight {
  background: var(--bw-bg-wash);
  border: 1px solid var(--bw-rule);
  border-left: 3px solid var(--bw-gold);
  border-radius: 12px;
  padding: 22px 24px;
  animation: stage-in 450ms var(--ease) both;
}
.insight__label { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bw-gold-text); }
.insight__why { font-size: 15px; line-height: 1.7; color: var(--bw-ink); margin-top: 9px; }
.insight__norm { font-size: 14px; line-height: 1.7; color: var(--bw-ink-soft); font-style: italic; margin-top: 12px; }

.journey-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bw-ink-muted);
  transition: color 180ms ease;
}
.back-link:hover { color: var(--bw-navy); }

.spectrum { margin-top: 26px; }
.spectrum__track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--bw-rule) 0%, var(--bw-gold-soft) 56%, var(--bw-gold) 100%);
}
.spectrum__marker {
  position: absolute;
  top: 50%; left: 4%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--bw-navy);
  border: 3px solid var(--bw-gold-bright);
  box-shadow: 0 4px 14px rgb(11 31 51 / 0.35);
  transition: left 1400ms var(--ease);
}
.spectrum__ends { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--bw-ink-soft); }

.dim-track { height: 8px; border-radius: var(--radius-pill); background: var(--bw-rule); overflow: hidden; margin-top: 16px; }
.dim-fill { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--bw-gold-soft), var(--bw-gold)); transition: width 1100ms var(--ease); }
.dim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.dim-label { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bw-ink-muted); }
.dim-label[data-strong="true"] { color: var(--bw-gold-text); }

.snapshot-rule { display: block; width: 220px; margin: 14px auto 0; }
.snapshot-rule path { stroke: var(--bw-gold); stroke-width: 3; stroke-linecap: round; fill: none; stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 1300ms 350ms ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.disclaimer { background: var(--bw-bg-wash); border: 1px solid var(--bw-rule); border-radius: 10px; padding: 18px 20px; }
.disclaimer p { font-size: 12px; line-height: 1.7; color: var(--bw-ink-muted); }

.sent-state { text-align: center; padding-block: 40px; }
.sent-state svg { margin-inline: auto; color: var(--bw-gold); }

/* --------------------------------------------------------------------------
   12b. Editorial accountability (author + last reviewed)
   -------------------------------------------------------------------------- */
.reviewed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 26px;
  padding: 20px 24px;
  background: var(--bw-bg-wash);
  border: 1px solid var(--bw-rule);
  border-left: 3px solid var(--bw-gold);
  border-radius: 12px;
}
.reviewed__who { display: flex; align-items: center; gap: 14px; }
.reviewed__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(150deg, var(--bw-navy) 0%, var(--bw-navy-deep) 100%);
  color: var(--bw-gold-bright);
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; letter-spacing: 0.06em;
  overflow: hidden;
}

/* Genti's headshot fills the byline avatar. If it fails to load the navy
   gradient above remains, so the circle never collapses to a blank gap. */
.reviewed__avatar picture { display: contents; }
.reviewed__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Not `inherit` — <picture> sits between this img and the circle, so
     inherit would resolve against <picture> (0) rather than the avatar. */
  border-radius: var(--radius-pill);
}
.reviewed__name { font-size: 14.5px; font-weight: 700; color: var(--bw-navy); }
.reviewed__role { font-size: 13px; color: var(--bw-ink-soft); margin-top: 3px; }
.reviewed__date { font-size: 12.5px; font-weight: 600; color: var(--bw-ink-muted); }

/* Question / risk / decision lists on the audience pages */
.qlist { display: grid; gap: 12px; }
.qlist li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 22px;
  background: var(--bw-surface);
  border: 1px solid var(--bw-rule);
  border-radius: 12px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--bw-ink);
  box-shadow: var(--shadow-xs);
}
.qlist li::before {
  content: "";
  width: 9px; height: 9px;
  margin-top: 9px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--bw-gold-soft), var(--bw-gold));
}

.notice {
  background: var(--bw-bg-wash);
  border: 1px solid var(--bw-rule);
  border-left: 3px solid var(--bw-navy);
  border-radius: 12px;
  padding: 22px 24px;
}
.notice p { font-size: 14px; line-height: 1.7; color: var(--bw-ink-soft); }
.notice p + p { margin-top: 12px; }

/* Breadcrumbs — inline links given a comfortable touch height */
nav[aria-label="Breadcrumb"] a { display: inline-block; padding-block: 5px; min-height: 24px; }

/* Legal / policy pages */
.legal-doc h2 { margin-top: 44px; }
.legal-doc h3 { margin-top: 28px; }
.legal-doc p, .legal-doc li { font-size: 15.5px; line-height: 1.8; color: var(--bw-ink-soft); }
.legal-doc p + p { margin-top: 16px; }
.legal-doc ul { margin-top: 14px; display: grid; gap: 10px; }
.legal-doc ul li { position: relative; padding-left: 22px; }
.legal-doc ul li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--bw-gold);
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer { background:
    radial-gradient(80% 120% at 12% 0%, rgb(46 109 164 / 0.26), transparent 60%),
    linear-gradient(135deg, var(--bw-navy-deep) 0%, var(--bw-navy) 58%, var(--bw-navy-soft) 100%);
  color: #fff;
}
.site-footer__rule { height: 3px; background: var(--bw-red); }
.site-footer__grid { display: grid; gap: 40px; padding-block: 60px; }
@media (min-width: 620px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.site-footer__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bw-sky);
  margin-bottom: 18px;
}
.site-footer li + li { margin-top: 4px; }
/* WCAG 2.2 AA "Target Size (Minimum)": list links need a >=24px hit area.
   They measured 19px tall before this rule. */
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-block: 3px;
}
.site-footer a { color: rgb(255 255 255 / 0.85); transition: color 180ms ease; }
.site-footer a:hover { color: #fff; }
.site-footer__blurb { margin-top: 20px; font-size: 14px; line-height: 1.7; color: rgb(255 255 255 / 0.74); max-width: 34ch; }
.site-footer__legal { padding-bottom: 52px; }
.site-footer__legal-inner { padding-top: 32px; border-top: 1px solid rgb(255 255 255 / 0.14); }
.disclosure { font-size: 12px; line-height: 1.8; color: rgb(255 255 255 / 0.56); max-width: 96ch; }
.copyright { margin-top: 20px; font-size: 12px; color: rgb(255 255 255 / 0.6); }

/* --------------------------------------------------------------------------
   14. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal][data-shown="true"] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   15. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .btn-cta::after { display: none; }
  .hero__slide[data-active="true"] img { animation: none; }
}

/* ---------------------------------------------------------------------------
   Google review CTA
   Outbound link to Google's own review form. Understated on purpose: it must
   not compete with "Schedule a Consultation", which remains the primary
   conversion path. The compact variant is the footer treatment.
   --------------------------------------------------------------------------- */
.review-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600;
  color: var(--bw-gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgb(222 202 150 / 0.34);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.review-cta:hover,
.review-cta:focus-visible {
  color: #fff;
  border-bottom-color: rgb(255 255 255 / 0.75);
}
.review-cta__ext { font-size: 12px; line-height: 1; }
.review-cta--compact { margin-top: 14px; font-size: 13.5px; }

/* ===========================================================================
   Retirement growth illustration ("What Could Your Future Look Like?")

   Deliberately NOT colour-coded. The goal readout uses the same gold as the
   rest of the page in every state: no green for "good", no red for "bad", no
   checkmarks, no warning icons. Characterising the visitor's result is a
   compliance problem, not a design opportunity. See tools/verify.py.
   =========================================================================== */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ---- input panel ---- */
.calc__inputs {
  background: var(--bw-bg-wash);
  border: 1px solid var(--bw-rule);
  border-radius: var(--radius-lg);
  padding: 30px 28px 26px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) { .calc__inputs { padding: 22px 18px 20px; } }

.calc__panel-label {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bw-gold-text);
  margin-bottom: 22px;
}

.calc-field { margin-bottom: 26px; }
.calc-field:last-of-type { margin-bottom: 18px; }
.calc-field__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.calc-field__label {
  font-size: 14.5px; font-weight: 600; color: var(--bw-navy);
  line-height: 1.35;
}
.calc-field__optional {
  font-size: 11.5px; font-weight: 600; color: var(--bw-ink-muted);
  letter-spacing: 0.06em; text-transform: uppercase; margin-left: 6px;
}
.calc-field__entry {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--bw-surface);
  border: 1px solid var(--bw-rule);
  border-radius: var(--radius-sm, 8px);
  padding: 7px 11px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.calc-field__entry:focus-within {
  border-color: var(--bw-gold);
  box-shadow: 0 0 0 3px rgb(176 141 74 / 0.16);
}
.calc-field__prefix, .calc-field__suffix {
  font-size: 14px; font-weight: 600; color: var(--bw-ink-muted); flex: none;
}
.calc-field__num {
  font-family: var(--font-body);
  font-size: 15.5px; font-weight: 700; color: var(--bw-navy);
  border: 0; outline: 0; background: transparent;
  width: 8.5ch; padding: 0; text-align: right;
}
#goal-num { width: 9.5ch; }
.calc-field__hint {
  font-size: 12.5px; color: var(--bw-ink-muted); margin-top: 9px; line-height: 1.5;
}

/* ---- slider ---- */
.calc-field__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer;
  display: block; margin: 0;
}
.calc-field__range::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--bw-gold-soft), var(--bw-sky-deep));
}
.calc-field__range::-moz-range-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--bw-gold-soft), var(--bw-sky-deep));
}
.calc-field__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8.5px;
  border-radius: 50%;
  background: var(--bw-navy);
  border: 3px solid #fff;
  box-shadow: 0 2px 7px rgb(11 31 51 / 0.35);
  transition: transform .14s ease;
}
.calc-field__range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bw-navy); border: 3px solid #fff;
  box-shadow: 0 2px 7px rgb(11 31 51 / 0.35);
}
.calc-field__range:hover::-webkit-slider-thumb { transform: scale(1.09); }
.calc-field__range:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--bw-gold); outline-offset: 3px;
}
.calc-field__range:focus-visible::-moz-range-thumb {
  outline: 3px solid var(--bw-gold); outline-offset: 3px;
}

.calc__reset {
  background: transparent; border: 0; padding: 4px 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--bw-ink-soft);
  border-bottom: 1px solid var(--bw-rule);
  transition: color .16s ease, border-color .16s ease;
}
.calc__reset:hover { color: var(--bw-navy); border-bottom-color: var(--bw-gold); }

/* ---- results panel ---- */
.calc__results {
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(176 141 74 / 0.20), transparent 58%),
    linear-gradient(158deg, var(--bw-navy-deep) 0%, var(--bw-navy) 62%, var(--bw-navy-soft) 100%);
  border-radius: var(--radius-lg);
  padding: 34px 30px 30px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: sticky; top: 96px;
}
@media (max-width: 900px) { .calc__results { position: static; } }
@media (max-width: 560px) { .calc__results { padding: 26px 20px 24px; } }

.calc__result-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bw-gold-bright);
}
.calc__headline-figure {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.5rem);
  font-weight: 700; line-height: 1.02; color: #fff;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.calc__result-sub {
  font-size: 13px; color: rgb(255 255 255 / 0.72); margin-top: 9px;
}

.calc__split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.16);
}
@media (max-width: 400px) { .calc__split { grid-template-columns: 1fr; gap: 18px; } }
.calc__stat-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgb(255 255 255 / 0.62);
  line-height: 1.4;
}
.calc__stat-figure {
  font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 700; color: var(--bw-gold-bright); margin-top: 7px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

/* proportional contributed-vs-growth bar */
.calc__bar {
  display: flex; height: 9px; border-radius: 999px; overflow: hidden;
  margin-top: 24px; background: rgb(255 255 255 / 0.12);
}
.calc__bar-seg { height: 100%; transition: width .35s cubic-bezier(.22,.61,.36,1); }
.calc__bar-seg--contributed { background: var(--bw-sky-deep); }
.calc__bar-seg--growth { background: var(--bw-gold); }
.calc__bar-key {
  display: flex; gap: 18px; margin-top: 11px;
  font-size: 12px; color: rgb(255 255 255 / 0.72);
}
.calc__key { display: inline-flex; align-items: center; gap: 7px; }
.calc__key::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
}
.calc__key--contributed::before { background: var(--bw-sky-deep); }
.calc__key--growth::before { background: var(--bw-gold); }

/* goal readout — neutral in every state, by design */
.calc__goal {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 0.16);
}
.calc__goal-track {
  height: 7px; border-radius: 999px;
  background: rgb(255 255 255 / 0.14); overflow: hidden;
}
.calc__goal-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--bw-gold-soft), var(--bw-gold-bright));
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.calc__goal-text {
  font-size: 13.5px; line-height: 1.62;
  color: rgb(255 255 255 / 0.88); margin-top: 13px;
}

/* assumptions, always visible beside the result */
.calc__assumptions {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 0.16);
}
.calc__assumptions-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgb(255 255 255 / 0.62);
  margin-bottom: 12px;
}
.calc__assumptions-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.calc__assumptions-list li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; font-size: 13.5px; color: rgb(255 255 255 / 0.74);
  border-bottom: 1px dotted rgb(255 255 255 / 0.14); padding-bottom: 7px;
}
.calc__assumptions-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.calc__assumptions-list strong {
  color: #fff; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: right;
}

/* disclosure block */
.calc__disclosure {
  margin-top: 26px; padding: 20px 24px 19px;
  background: var(--bw-bg-wash);
  border: 1px solid var(--bw-rule);
  border-left: 3px solid var(--bw-gold);
  border-radius: var(--radius-sm, 8px);
}
.calc__disclosure-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bw-gold-text); margin-bottom: 7px;
}

/* The base .disclosure is white-on-navy for the footer (white @ 56%), which
   measures 1.02:1 against this light panel — effectively invisible. Restate
   the colour for this light-background use only; the footer rule is untouched.
   --bw-ink-soft on --bw-bg-wash measures 5.60:1, comfortably past the 4.5:1
   AA floor for body text at this size. */
.calc__disclosure .disclosure {
  color: var(--bw-ink-soft);
  font-size: 13px;
  line-height: 1.68;
  max-width: 88ch;
}

@media (prefers-reduced-motion: reduce) {
  .calc__bar-seg, .calc__goal-fill { transition: none; }
  .calc-field__range::-webkit-slider-thumb { transition: none; }
}

/* Calculator page rhythm. The generic .section block padding (up to 118px top
   and bottom) leaves the run from calculator -> disclosure -> CTA -> footer
   feeling disconnected. These two rules tighten only that page. */
.calc-section { padding-bottom: clamp(40px, 2rem + 2.6vw, 62px); }
.calc-cta { padding-block: clamp(44px, 2.2rem + 3.2vw, 70px); }
.calc-cta .mt-xl { margin-top: 32px; }
.calc-cta .lead { margin-top: 16px; }


}

/* ---------------------------------------------------------------------------
   Compact interactive teaser for the retirement illustration.

   Sits between the photographic hero and the plain-language section, giving a
   visitor who is not ready for the Clarity Check something to touch. One
   slider only — this must never grow into a second calculator.

   The figure is the visual anchor, but the assumptions and the illustrative
   note sit with it, always visible, never behind a toggle.
   --------------------------------------------------------------------------- */
.calc-tease {
  background: linear-gradient(180deg, var(--bw-bg-wash) 0%, var(--bw-surface) 100%);
  border-bottom: 1px solid var(--bw-rule);
  padding-block: clamp(38px, 2rem + 2.4vw, 58px);
}
.calc-tease__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 26px 40px;
  align-items: center;
  padding: 30px 34px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--bw-rule);
  background: var(--bw-surface);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 860px) {
  .calc-tease__card { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 20px; }
}

.calc-tease__lead {
  margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--bw-ink-soft);
}

/* the interactive panel */
.calc-tease__panel {
  display: grid; gap: 20px;
  grid-column: 2; grid-row: 1 / span 2;
  align-self: stretch;
  padding: 24px 26px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(176 141 74 / 0.22), transparent 58%),
    linear-gradient(158deg, var(--bw-navy-deep) 0%, var(--bw-navy) 62%, var(--bw-navy-soft) 100%);
  color: #fff;
}
@media (max-width: 860px) {
  .calc-tease__panel { grid-column: 1; grid-row: auto; padding: 20px; }
}

.calc-tease__label {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgb(255 255 255 / 0.62);
}
.calc-tease__amount {
  display: block; margin-top: 6px;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
  color: var(--bw-gold-bright); font-variant-numeric: tabular-nums;
}
.calc-tease__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; margin-top: 10px; background: transparent; cursor: pointer;
  display: block;
}
.calc-tease__range::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--bw-gold-soft), rgb(255 255 255 / 0.28));
}
.calc-tease__range::-moz-range-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--bw-gold-soft), rgb(255 255 255 / 0.28));
}
.calc-tease__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8.5px; border-radius: 50%;
  background: #fff; border: 3px solid var(--bw-gold);
  box-shadow: 0 2px 8px rgb(11 31 51 / 0.45);
  transition: transform .14s ease;
}
.calc-tease__range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--bw-gold);
  box-shadow: 0 2px 8px rgb(11 31 51 / 0.45);
}
.calc-tease__range:hover::-webkit-slider-thumb { transform: scale(1.09); }
.calc-tease__range:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--bw-gold-bright); outline-offset: 3px;
}
.calc-tease__range:focus-visible::-moz-range-thumb {
  outline: 3px solid var(--bw-gold-bright); outline-offset: 3px;
}
.calc-tease__scale {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: rgb(255 255 255 / 0.5); margin-top: -2px;
}

.calc-tease__result { border-top: 1px solid rgb(255 255 255 / 0.16); padding-top: 18px; }
.calc-tease__result-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bw-gold-bright);
}
.calc-tease__figure {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 1.4rem + 2.5vw, 2.85rem);
  font-weight: 700; line-height: 1.04; color: #fff; margin-top: 8px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.calc-tease__assumptions {
  margin-top: 10px; font-size: 12.5px; line-height: 1.6;
  color: rgb(255 255 255 / 0.72);
}

.calc-tease__foot { grid-column: 1; align-self: start; }
@media (max-width: 860px) { .calc-tease__foot { grid-column: 1; } }
.calc-tease__note {
  margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--bw-ink-muted);
  max-width: 52ch;
}

@media (prefers-reduced-motion: reduce) {
  .calc-tease__range::-webkit-slider-thumb { transition: none; }
}



/* ---------------------------------------------------------------------------
   Google presence section — two states driven by [data-state].

   compact : Google attribution + the two buttons. What renders when there is
             no published review content. It must read as a deliberate,
             finished block, never as an empty slot waiting for something.
   full    : the same section with rating, count, and review cards revealed.
             assets/js/reviews.js flips the attribute; no redesign needed.
   --------------------------------------------------------------------------- */
.reviews__body { margin-top: 30px; }

/* --- what compact hides --- */
.reviews[data-state="compact"] .reviews__summary,
.reviews[data-state="compact"] .reviews__grid,
.reviews[data-state="compact"] .reviews__disclosure { display: none; }

/* Compact is a tight, centred trust block. */
.reviews[data-state="compact"] .reviews__body {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  margin-top: 26px;
}
.reviews[data-state="compact"] .reviews__attrib { margin: 0; }

.reviews__lead {
  margin-top: 14px; font-size: var(--step-0); line-height: 1.7;
  color: var(--bw-ink-soft);
}

/* --- rating summary (full only) --- */
.reviews__summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 22px; margin-bottom: 18px;
}
.reviews__score { display: inline-flex; align-items: center; gap: 12px; }
.reviews__rating {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 700;
  color: var(--bw-navy); line-height: 1; font-variant-numeric: tabular-nums;
}
.reviews__stars, .rev-card__stars { display: inline-flex; gap: 3px; }
.rev-star {
  width: 16px; height: 16px; display: inline-block; flex: none;
  background: var(--bw-rule);
  -webkit-mask: var(--star-mask) center/contain no-repeat;
  mask: var(--star-mask) center/contain no-repeat;
}
:root {
  --star-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}
.rev-star.is-full { background: var(--bw-gold); }
.rev-star.is-half { background: linear-gradient(90deg, var(--bw-gold) 50%, var(--bw-rule) 50%); }
.reviews__count { font-size: 14.5px; font-weight: 600; color: var(--bw-ink); }

/* --- Google attribution, shown in both states --- */
.reviews__attrib {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 13px; color: var(--bw-ink-soft);
  margin: 0 0 18px;
}
.reviews__g {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--bw-surface); border: 1px solid var(--bw-rule);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--bw-navy); line-height: 1;
}

/* --- review cards (full only) --- */
.reviews__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.reviews__grid:empty { display: none; }
.rev-card {
  margin: 0; padding: 24px 24px 22px;
  background: var(--bw-surface);
  border: 1px solid var(--bw-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: 13px;
}
.rev-card__head { display: flex; align-items: center; gap: 12px; }
.rev-card__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--bw-bg-soft);
}
.rev-card__author { font-size: 14.5px; font-weight: 700; color: var(--bw-navy); }
.rev-card__stars { margin-top: 4px; }
.rev-card__text {
  margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--bw-ink-soft);
  /* Reviews show in full, as written. Shorten the CARD, never the review. */
  overflow-wrap: break-word;
}
.rev-card__when { font-size: 12.5px; color: var(--bw-ink-muted); margin-top: auto; }

/* --- actions, shown in both states --- */
.reviews__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 22px;
}
.reviews[data-state="full"] .reviews__actions { margin-top: 34px; }
.reviews__actions .review-cta { color: var(--bw-gold-text); border-bottom-color: rgb(176 141 74 / 0.4); }
.reviews__actions .review-cta:hover,
.reviews__actions .review-cta:focus-visible {
  color: var(--bw-navy); border-bottom-color: var(--bw-navy);
}

.reviews__disclosure {
  margin: 34px auto 0; max-width: 90ch; text-align: center;
  font-size: 12.5px; line-height: 1.75; color: var(--bw-ink-soft);
}

/* ---------------------------------------------------------------------------
   FINRA BrokerCheck badge.

   Placed near Genti's biography rather than in the legal disclosures — someone
   checking an adviser's background should find it where they are reading about
   him. Understated: this is a credibility signal, not a promotion.
   --------------------------------------------------------------------------- */
.brokercheck {
  display: inline-flex; align-items: center; gap: 16px;
  max-width: 100%;
  padding: 15px 20px;
  border: 1px solid var(--bw-rule);
  border-left: 3px solid var(--bw-navy);
  border-radius: var(--radius-sm);
  background: var(--bw-surface);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.brokercheck:hover,
.brokercheck:focus-visible {
  border-color: var(--bw-gold);
  border-left-color: var(--bw-gold);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.brokercheck__mark {
  flex: none;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--bw-navy);
  padding: 6px 10px;
  border: 1px solid var(--bw-rule);
  border-radius: 4px;
  background: var(--bw-bg-wash);
}
.brokercheck__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brokercheck__title {
  font-size: 15px; font-weight: 700; color: var(--bw-navy); line-height: 1.2;
}
.brokercheck__sub {
  font-size: 13px; color: var(--bw-ink-soft); line-height: 1.45;
}
.brokercheck__ext {
  flex: none; margin-left: auto; padding-left: 6px;
  font-size: 13px; color: var(--bw-gold-text);
}
@media (max-width: 480px) {
  .brokercheck { gap: 12px; padding: 13px 15px; }
  .brokercheck__sub { font-size: 12.5px; }
}

/* Quieter footer variant, on the dark legal band. */
.brokercheck-link {
  color: var(--bw-gold-bright);
  text-decoration: underline; text-underline-offset: 3px;
}
.brokercheck-link:hover, .brokercheck-link:focus-visible { color: #fff; }

/* ---------------------------------------------------------------------------
   FINRA BrokerCheck links in navigation.

   Uses the existing nav link styling; the only addition is a small external
   arrow so the outbound jump is signalled before the click. The nav is now
   seven items wide, so the arrow is deliberately tiny and the gap tightened
   slightly rather than adding another full-size element.
   --------------------------------------------------------------------------- */
.nav__ext {
  font-size: 0.72em;
  margin-left: 4px;
  vertical-align: baseline;
  opacity: 0.75;
}
.nav__link--external:hover .nav__ext,
.nav__link--external:focus-visible .nav__ext { opacity: 1; }

/* Footer variant sits in the Explore list alongside internal links. */
.footer-link--external .nav__ext { opacity: 0.8; }

/* Secondary action directly beneath Genti's photograph. Centred to the
   portrait above it, and full-width on small screens so the label never
   wraps awkwardly mid-phrase. */
.under-photo {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.brokercheck-under-photo { text-align: center; }
@media (max-width: 560px) {
  .under-photo { margin-top: 14px; }
  .brokercheck-under-photo { width: 100%; }
}

/* The family card's subjects sit high in a 4:5 frame, so a centred 4:3 crop
   clips the grandparents' heads against the top edge. Nudging the focal point
   up restores headroom above them while keeping all six in frame; the extra
   loss is at the bottom, which is only laps and table. Scoped to this card so
   the three landscape scenes keep their centred crop. */
.vision-card[data-vision="family"] .vision-card__media img {
  object-position: center 22%;
}

/* The lead forms reuse [data-form-error] for a non-error notice: when no form
   endpoint is configured, submitting opens the visitor's mail client and they
   still have to press send. That message is guidance, not a failure, so it
   should not be shouted in red. */
[data-form-error][data-tone="info"] {
  color: var(--bw-ink-soft);
  border-left: 3px solid var(--bw-gold);
  padding-left: 12px;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a visually hidden one catches more of them. aria-hidden and
   tabindex="-1" keep it away from screen readers and keyboard users. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}