/* ==========================================================================
   BrainBridge Strategic Advisors — Site Stylesheet
   Locked build. Do not redesign.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --navy:            #0B2341;
  --navy-hover:      #081A32;
  --navy-70:         rgba(11, 35, 65, 0.70);
  --charcoal:        #2A2E33;
  --slate:           #6E747C;
  --slate-2:         #8A8F97;
  --brass:           #B08A4B;
  --brass-light:     #C9A16A;
  --brass-soft:      #D9BC8A;
  --warm-white:      #FFFFFF;
  --cream:           #F2F2F2;
  --hairline:        #E6E6E6;
  --hairline-dark:   rgba(255,255,255,0.12);
  --white:           #FFFFFF;

  --serif: 'Playfair Display', 'Iowan Old Style', 'Georgia', 'Times New Roman', serif;
  --sans:  'Montserrat', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --max: 1360px;
  --gutter: clamp(20px, 4vw, 64px);

  --tt: 0.16em; /* wide tracking for caps */
  --tt-tight: 0.08em;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--warm-white);
  color: var(--charcoal);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); font-weight: 500; line-height: 1.15; letter-spacing: -0.005em; margin: 0; }
p { margin: 0 0 1em; }

.display-xl { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: clamp(38px, 5vw, 68px); line-height: 1.08; letter-spacing: -0.01em; }
.display-l  { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: clamp(30px, 4vw, 52px); line-height: 1.1;  letter-spacing: -0.005em; }
.display-m  { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: clamp(26px, 3vw, 40px); line-height: 1.18; }

.caps { font-family: var(--sans); text-transform: uppercase; letter-spacing: var(--tt); font-weight: 500; }
.caps-title { font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--navy); }
.eyebrow {
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: 0.28em; font-size: 12px; font-weight: 500;
  color: var(--brass);
}
.eyebrow::before, .eyebrow::after {
  content: '—'; margin: 0 .7em; color: var(--brass); font-weight: 400; letter-spacing: 0;
}
.eyebrow--plain::before, .eyebrow--plain::after { content: none; }

.lede { font-size: 16px; line-height: 1.75; color: var(--charcoal); max-width: 60ch; }
.subtle { color: var(--slate); }

.tm { font-size: 0.5em; vertical-align: super; letter-spacing: 0; margin-left: 1px; font-weight: 400; }

/* ---------- Layout ---------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section--tight { padding: clamp(40px, 5vw, 72px) 0; }
.grid { display: grid; gap: 40px; }
.hairline { border: 0; height: 1px; background: var(--hairline); margin: 0; }
.rule-brass { display: inline-block; width: 56px; height: 1.5px; background: var(--brass); margin: 18px 0 0; }
.rule-brass--center { margin-left: auto; margin-right: auto; display: block; }

/* ---------- Logo images (from approved brand identity board) ---------- */
.site-header__logo-img {
  display: block;
  height: 52px;
  width: auto;
  max-width: none;   /* override the global img { max-width: 100% } that was squishing it */
  flex-shrink: 0;
  user-select: none;
}
.site-header__logo { flex-shrink: 0; }
.site-footer__logo-img {
  display: block;
  height: 110px;
  width: auto;
  user-select: none;
}
@media (max-width: 700px) {
  .site-header__logo-img { height: 44px; }
  .site-footer__logo-img { height: 96px; }
}

/* Footer brandmark: brass compass mark + dark logo lockup */
.brandmark {
  display: flex; align-items: center; gap: 24px;
}
.brandmark__mark {
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid var(--brass);
  display: grid; place-items: center;
  flex: 0 0 72px;
}
.brandmark__mark svg { width: 40px; height: 40px; display: block; }
@media (max-width: 700px) {
  .brandmark__mark { width: 60px; height: 60px; flex-basis: 60px; }
  .brandmark__mark svg { width: 32px; height: 32px; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.1) blur(6px);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 88px;
  max-width: var(--max); margin: 0 auto;
  /* Left padding pulled in so the logo sits further left; right padding kept
     at the standard gutter. gap ensures nav never crowds the logo. */
  padding: 0 var(--gutter) 0 clamp(12px, 2vw, 24px);
  gap: clamp(24px, 4vw, 56px);
}
.site-header__logo { display: inline-flex; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px); }
.site-nav a {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy);
  padding: 8px 2px; position: relative; transition: color .18s; white-space: nowrap;
}
.site-nav a:hover { color: var(--brass); }
.site-nav a[aria-current="page"] { color: var(--navy); }
.site-nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--brass);
}
.site-nav .nav-connect a {
  background: var(--navy); color: var(--white);
  border: 1px solid var(--navy); padding: 10px 18px;
  transition: background .18s, color .18s, border-color .18s;
}
.site-nav .nav-connect a:hover { background: #0a1c33; border-color: #0a1c33; color: var(--white); }
.site-nav .nav-connect a[aria-current="page"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.site-nav .nav-connect a[aria-current="page"]::after { content: none; }

/* Mobile nav toggle */
.nav-toggle { display: none; background: transparent; border: 0; width: 42px; height: 42px; padding: 0; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--navy); margin: 5px auto; transition: transform .2s, opacity .2s; }

@media (max-width: 1180px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  body.nav-open .site-nav {
    display: block; position: fixed; inset: 88px 0 0 0;
    background: var(--warm-white); padding: 32px var(--gutter); overflow-y: auto;
  }
  body.nav-open .site-nav ul { flex-direction: column; align-items: flex-start; gap: 24px; }
  body.nav-open .site-nav a { font-size: 14px; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em;
  text-transform: uppercase; padding: 18px 30px;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  cursor: pointer; border: 1px solid transparent;
}
.btn--primary   { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-hover); }
.btn--ghost     { background: transparent; color: var(--brass); border-color: var(--brass); }
.btn--ghost:hover { background: var(--brass); color: var(--white); }
.btn--link {
  padding: 0; background: transparent; color: var(--brass);
  border: 0; letter-spacing: 0.22em; font-size: 11px;
}
.btn--link .arrow { transition: transform .25s; }
.btn--link:hover .arrow { transform: translateX(6px); }

.arrow { display: inline-block; width: 22px; height: 1px; background: currentColor; position: relative; margin-left: 6px; }
.arrow::after {
  content: ''; position: absolute; right: 0; top: -3.5px;
  width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- Footer ----------
   Base (mobile-first) uses editorial spacing; the compressed 140px
   desktop footer is applied via a min-width: 901px override below so
   mobile can still stack the columns comfortably. */
.site-footer {
  background: var(--navy); color: var(--white);
  padding: 72px 0 34px;
}
.site-footer .container { max-width: var(--max); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px; align-items: start;
}
.site-footer h4 {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.28em;
  color: var(--brass-soft); text-transform: uppercase; font-weight: 500;
  margin: 6px 0 18px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer a {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.22em;
  color: var(--white); text-transform: uppercase; opacity: 0.85; transition: opacity .18s, color .18s;
}
.site-footer a:hover { opacity: 1; color: var(--brass-soft); }
.site-footer__tagline p {
  font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.4;
  color: var(--white); margin: 0;
}
.site-footer__tagline .rule-brass { background: var(--brass); margin-top: 22px; }
.site-footer__socials { display: flex; gap: 14px; margin-top: 22px; }
.site-footer__socials a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--brass);
  display: grid; place-items: center;
  padding: 0; opacity: 1;
}
.site-footer__socials a:hover { background: var(--brass); }
.site-footer__socials svg { width: 15px; height: 15px; fill: var(--brass-soft); }
.site-footer__socials a:hover svg { fill: var(--navy); }
.site-footer__bottom {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--hairline-dark);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.site-footer__bottom .legal { display: flex; gap: 24px; }
.site-footer__bottom .legal a { opacity: 0.7; }
.site-footer__bottom .legal a:hover { opacity: 1; color: var(--brass-soft); }

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__tagline { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 540px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Desktop compressed footer (140px, shared across every page) ---------- */
@media (min-width: 901px) {
  .site-footer {
    height: 140px;
    padding: 12px 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .site-footer > .container {
    width: 100%;
  }
  .site-footer__grid {
    gap: clamp(16px, 2vw, 32px);
    align-items: stretch;
  }
  /* Vertically center every column within the footer row */
  .site-footer__grid > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .site-footer__logo-img { height: 52px; }
  .brandmark { gap: 14px; }
  /* Landscape brass frame for the bridge silhouette. Border removed —
     silhouette shows on its own. */
  .brandmark__mark {
    width: 104px;
    height: 48px;
    flex-basis: 104px;
    border: 0;
    border-radius: 0;
    padding: 6px 10px;
  }
  .brandmark__mark--bridge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* recolor the navy silhouette to brass so it reads on the navy footer */
    filter: brightness(0) saturate(100%) invert(66%) sepia(25%) saturate(680%) hue-rotate(2deg) brightness(88%) contrast(87%);
  }
  .site-footer h4 {
    margin: 0 0 6px;
    font-size: 10px;
  }
  .site-footer ul { gap: 0; }
  .site-footer a {
    font-size: 10.5px;
    line-height: 1.25;
  }
  .site-footer__tagline p {
    font-size: 13px;
    line-height: 1.15;
    margin: 0;
  }
  /* Indent the second line of the tagline ("Sustained deliberately.") */
  .site-footer__tagline .sustained {
    display: inline-block;
    padding-left: 3.2em;
  }
  .site-footer__tagline .rule-brass {
    display: block;
    margin-top: 4px;
  }
  .site-footer__socials {
    margin-top: 8px; gap: 8px;
  }
  .site-footer__socials a {
    width: 28px; height: 28px;
  }
  .site-footer__socials svg {
    width: 12px; height: 12px;
  }
  .site-footer__bottom {
    margin-top: 10px;
    padding-top: 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
}

/* ==========================================================================
   HOME
   ========================================================================== */
/* Full-bleed hero: image is a background sized cover with a white-fade gradient
   layered on top. Text + CTAs sit in the container over the white side. */
.hero-home {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 62vh, 720px);
  overflow: hidden;
  background-color: var(--white);
  background-image:
    linear-gradient(
      to right,
      var(--white) 0%,
      rgba(255, 255, 255, 0.98) 18%,
      rgba(255, 255, 255, 0.80) 32%,
      rgba(255, 255, 255, 0.40) 48%,
      rgba(255, 255, 255, 0.10) 68%,
      rgba(255, 255, 255, 0) 85%
    ),
    url('../img/bridge_clean_v2.png');
  background-size: 100% 100%, cover;
  background-position: center, center right;
  background-repeat: no-repeat, no-repeat;
}
.hero-home__inner {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-top: clamp(32px, 6vh, 112px);
  padding-bottom: clamp(32px, 6vh, 112px);
}
.hero-home__text {
  max-width: 560px;
}
.hero-home__title {
  font-family: var(--serif); color: var(--navy); font-weight: 500;
  font-size: clamp(38px, 5vw, 66px); line-height: 1.08; letter-spacing: -0.005em;
  margin: 0;
}
.hero-home__title .tm { font-size: 0.4em; vertical-align: super; letter-spacing: 0; }
.hero-home__sub {
  max-width: 44ch; color: var(--charcoal);
  margin: clamp(16px, 2.5vh, 26px) 0 clamp(20px, 3.5vh, 40px);
  font-size: 16.5px; line-height: 1.65;
}
.hero-home__cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* Mobile: stronger white veil to preserve legibility */
@media (max-width: 720px) {
  .hero-home {
    min-height: 560px;
    background-image:
      linear-gradient(
        to right,
        var(--white) 0%,
        rgba(255,255,255,0.92) 45%,
        rgba(255,255,255,0.55) 75%,
        rgba(255,255,255,0.25) 100%
      ),
      url('../img/bridge_clean_v2.png');
    background-position: center, 65% center;
  }
  .hero-home__inner { padding-top: 48px; padding-bottom: 48px; }
}

.home-bridge-band {
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: clamp(20px, 3.5vh, 64px) 0;
}
.home-bridge-band__grid {
  display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center;
}
.home-bridge-band__title { font-family: var(--serif); color: var(--navy); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; margin: 12px 0 0; }
.home-bridge-band__viz {
  display: grid; place-items: center;
}
.home-bridge-band__viz svg { width: 100%; max-width: 340px; height: auto; }
.home-bridge-band__viz-img { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.home-bridge-band__copy p { color: var(--charcoal); font-size: 14.5px; line-height: 1.75; margin-bottom: 18px; }
@media (max-width: 900px) {
  .home-bridge-band__grid { grid-template-columns: 1fr; text-align: center; }
  .home-bridge-band__viz { order: 2; }
}

.home-previews {
  padding-top: clamp(28px, 5vh, 96px); padding-bottom: clamp(28px, 5vh, 96px);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(28px, 3vw, 56px);
}
.preview-card { display: grid; grid-template-columns: 165px 1fr; gap: 28px; align-items: start; }
.preview-card__img { aspect-ratio: 165/175; overflow: hidden; background: var(--cream); }
.preview-card__img img { width: 100%; height: 100%; object-fit: cover; }
.preview-card__eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brass); margin: 4px 0 12px; }
.preview-card h3 { font-family: var(--serif); color: var(--navy); font-size: 22px; line-height: 1.25; margin: 0 0 14px; }
.preview-card__rule { width: 40px; height: 1.5px; background: var(--brass); margin: 0 0 16px; }
.preview-card p { color: var(--charcoal); font-size: 14.5px; line-height: 1.7; margin: 0 0 20px; }
@media (max-width: 1100px) { .home-previews { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px)  { .preview-card { grid-template-columns: 1fr; } .preview-card__img { max-width: 100%; aspect-ratio: 3/2; } }

/* ==========================================================================
   BRIDGE — displays Bridge Version F asset directly, unaltered
   ========================================================================== */
.bridge-asset {
  padding: clamp(12px, 2vh, 72px) var(--gutter) clamp(8px, 1.4vh, 40px);
  background: var(--warm-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bridge-asset__fig {
  max-width: 1200px; margin: 0 auto; padding: 0;
  /* Cap the artwork height so it flexes with viewport instead of always
     rendering at its natural 1024x683 aspect ratio. Keeps Bridge Version F
     visible in full on shorter windows without forcing scroll. */
  height: clamp(360px, 58vh, 800px);
  display: flex; align-items: center; justify-content: center;
}
.bridge-asset__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.bridge-cta {
  background: var(--cream);
  padding: clamp(40px, 5vw, 72px) 0;
}
.bridge-cta__inner {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.bridge-cta__lede {
  font-family: var(--serif); color: var(--navy);
  font-size: clamp(19px, 2vw, 26px); line-height: 1.35;
  max-width: 46ch; margin: 12px 0 0;
}
@media (max-width: 720px) {
  .bridge-cta__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* --- Bridge CTA: navy-bar layout (echoes the hidden bar's rhythm) ---
   Left: compass mark + "THE BRIDGE™ / It is not a place. It is a path."
   Center: brass eyebrow + three inline numbered questions (row, not stack)
   Right: brass "DIRECTION DETERMINES DESTINATION." + italic serif payoff + CTA button */
.bridge-cta--navybar .bridge-cta__inner {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.bridge-cta--navybar .bridge-cta__col { display: flex; }

.bridge-cta__col--left {
  align-items: center;
  gap: 16px;
  border-right: 1px solid rgba(11,35,65,0.15);
  padding-right: clamp(20px, 3vw, 40px);
}
.bridge-cta__mark {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bridge-cta__mark img { width: 100%; height: auto; display: block; }
.bridge-cta__left-text { display: flex; flex-direction: column; }
.bridge-cta__mark-title {
  font-family: var(--sans); color: var(--navy);
  font-size: clamp(20px, 2vw, 26px); line-height: 1.05;
  letter-spacing: 0.14em; font-weight: 500; text-transform: uppercase;
}
.bridge-cta__mark-sub {
  font-family: var(--serif); color: var(--slate);
  font-size: clamp(12px, 1vw, 13.5px); line-height: 1.3;
  margin-top: 6px;
}

.bridge-cta__col--center {
  flex-direction: column;
  align-items: flex-start;
  border-right: 1px solid rgba(11,35,65,0.15);
  padding-right: clamp(20px, 3vw, 40px);
}
.bridge-cta__brass-title--center { text-align: left; margin-bottom: 14px; }
.bridge-cta__questions {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: row; gap: clamp(20px, 2.5vw, 36px);
  width: 100%;
}
.bridge-cta__questions li {
  font-family: var(--serif); color: var(--charcoal);
  font-size: clamp(12.5px, 1vw, 14.5px); line-height: 1.35;
  font-style: italic;
  display: flex; align-items: flex-start; gap: 10px;
  flex: 1;
}
.bridge-cta__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--brass);
  color: var(--brass);
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  font-style: normal;
  flex-shrink: 0;
}

.bridge-cta__col--right {
  flex-direction: column;
  align-items: flex-start;
  max-width: 340px;
}
.bridge-cta__brass-title {
  font-family: var(--sans); color: var(--brass);
  font-size: clamp(12px, 0.95vw, 13.5px); line-height: 1.25;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  margin: 0 0 6px;
}
.bridge-cta__brass-sub {
  font-family: var(--serif); color: var(--charcoal);
  font-size: clamp(13px, 1.05vw, 15px); line-height: 1.35;
  font-style: italic;
  margin: 0 0 14px;
}
.bridge-cta__btn { display: inline-flex; }

@media (max-width: 960px) {
  .bridge-cta--navybar .bridge-cta__inner {
    grid-template-columns: 1fr; gap: 24px;
  }
  .bridge-cta__col--left,
  .bridge-cta__col--center {
    border-right: 0; padding-right: 0;
    border-bottom: 1px solid rgba(11,35,65,0.15);
    padding-bottom: 20px;
  }
  .bridge-cta__questions { flex-direction: column; gap: 8px; }
  .bridge-cta__col--right { max-width: none; align-items: center; text-align: center; }
}

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.founder-page { padding-top: clamp(24px, 5vh, 96px); padding-bottom: clamp(20px, 4vh, 96px); }

/* Editorial header: each cell aligns to its matching letter column below.
   Columns are 1fr / 1fr with the same gap the .founder-body__letter uses. */
.founder-header {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px); align-items: center;
  margin: 0 auto clamp(20px, 4vh, 64px);
  max-width: 1080px;
  text-align: center;
}
.founder-header__text { display: flex; flex-direction: column; align-items: center; order: 2; }
.founder-header h1 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: clamp(30px, 4vw, 54px); letter-spacing: 0.05em; line-height: 1.05; margin: 12px 0 20px; }
.founder-header__text > p { font-family: var(--serif); color: var(--navy); font-size: clamp(17px, 1.8vw, 21px); line-height: 1.4; margin: 0; }
.founder-header .rule-brass { margin: 20px auto 0; }
.founder-header__portrait { background: var(--cream); overflow: hidden; width: 70%; margin: 0 auto 0 0; order: 1; }
.founder-header__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Two-column editorial letter body */
.founder-body { max-width: 1080px; margin: 0 auto; }
.founder-body__letter {
  column-count: 2;
  column-gap: clamp(32px, 4vw, 56px);
  column-rule: 1px solid var(--hairline);
}
.founder-body__letter > * { break-inside: avoid; }
.founder-body__letter p { color: var(--charcoal); font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }

/* Inline pull-quote inside the letter — sits at body-copy scale; brass rules + brass italic carry the emphasis */
.founder-pullquote { margin: 18px 0; padding: 2px 0; text-align: center; }
.founder-pullquote .rule-brass { display: block; margin: 0 auto; }
.founder-pullquote p { font-family: var(--serif); color: var(--navy); font-size: 15.5px; font-weight: 500; line-height: 1.5; margin: 10px 0; font-style: italic; }
.founder-pullquote em { color: var(--brass); font-style: italic; display: block; margin-top: 2px; }
.founder-pullquote cite { display: block; font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--slate); margin: -4px 0 10px; }
/* Opener paragraph — set as a small elevated serif lead, no drop-cap */
.founder-body__letter p.founder-body__opener {
  font-family: var(--serif); color: var(--navy); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.4; font-weight: 500; margin-bottom: 18px;
}
.founder-body__sig { margin-top: 22px; break-inside: avoid; }
.founder-body__sig .signature { font-family: 'Homemade Apple', 'Playfair Display', cursive; font-weight: 400; font-style: normal; font-size: 32px; line-height: 1.4; letter-spacing: -0.01em; color: var(--navy); border-bottom: 1px solid var(--brass); display: inline-block; padding: 4px 8px 10px 4px; }
.founder-body__sig p { margin: 12px 0 2px; font-size: 15px; color: var(--charcoal); }
.founder-body__sig .role { color: var(--brass); font-style: italic; font-size: 14.5px; }

/* Founder closing band — matches the shared editorial closing-band pattern
   used across manifesto/way/philosophy/principles. Identical padding, type,
   viz size, and CTA so every page's pre-footer band has the same rhythm. */
.founder-close {
  background: var(--cream);
  padding: clamp(40px, 5vw, 72px) 0;
}
.founder-close__grid {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(24px, 3vw, 48px);
}
.founder-close__eyebrow { letter-spacing: .28em; color: var(--brass); margin: 0; }
.founder-close__block h3 {
  font-family: var(--serif); color: var(--navy);
  font-size: clamp(20px, 2vw, 24px); font-weight: 500;
  line-height: 1.2; margin: 8px 0 8px;
}
.founder-close__block > p { color: var(--slate); font-size: 13.5px; margin-top: 8px; }
.founder-close__viz { text-align: center; }
.founder-close__viz-eyebrow { letter-spacing: .28em; color: var(--brass); margin: 0 0 10px; }
.founder-close__viz-img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.founder-close__cta { text-align: right; }

@media (max-width: 900px) {
  .founder-header { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .founder-header__text { max-width: 100%; margin: 0 auto; }
  .founder-header .rule-brass { margin-left: auto; margin-right: auto; }
  .founder-header__portrait { max-width: 320px; margin: 0 auto; order: -1; }
  .founder-body__letter { column-count: 1; column-rule: 0; }
  .founder-close__grid { grid-template-columns: 1fr; text-align: center; }
  .founder-close__cta { text-align: center; }
}

/* ==========================================================================
   PHILOSOPHY
   ========================================================================== */
/* Our Philosophy full-bleed hero — mirrors .hero-home treatment,
   using the same clean bridge image from Home so no duplicates and no drift. */
.hero-philosophy {
  position: relative;
  width: 100%;
  min-height: clamp(240px, 38vh, 660px);
  overflow: hidden;
  background-color: var(--white);
  background-image:
    linear-gradient(
      to right,
      var(--white) 0%,
      rgba(255, 255, 255, 0.98) 18%,
      rgba(255, 255, 255, 0.80) 32%,
      rgba(255, 255, 255, 0.40) 48%,
      rgba(255, 255, 255, 0.10) 68%,
      rgba(255, 255, 255, 0) 85%
    ),
    url('../img/philosophy_hero.png');
  background-size: 100% 100%, cover;
  background-position: center, center right;
  background-repeat: no-repeat, no-repeat;
}
.hero-philosophy__inner {
  position: relative; z-index: 2; min-height: inherit;
  display: flex; align-items: center;
  padding-top: clamp(14px, 2.8vh, 112px);
  padding-bottom: clamp(14px, 2.8vh, 112px);
}
.hero-philosophy__text { max-width: 560px; }
.hero-philosophy__title {
  font-family: var(--serif); color: var(--navy); font-weight: 500;
  font-size: clamp(28px, 4vw, 58px); line-height: 1.1; letter-spacing: -0.005em;
  margin: clamp(6px, 1.2vh, 14px) 0 0;
}
.hero-philosophy__subtitle {
  font-family: var(--serif); font-style: italic; color: var(--navy);
  font-size: clamp(15px, 1.9vw, 26px); line-height: 1.3;
  margin: clamp(8px, 1.6vh, 18px) 0 0; max-width: 42ch;
}
.hero-philosophy__lede {
  max-width: 46ch; color: var(--charcoal);
  margin: clamp(12px, 2.2vh, 26px) 0 0;
  font-size: clamp(13px, 1.6vh, 16px); line-height: 1.6;
}
@media (max-width: 720px) {
  .hero-philosophy {
    min-height: 520px;
    background-image:
      linear-gradient(
        to right,
        var(--white) 0%,
        rgba(255,255,255,0.92) 45%,
        rgba(255,255,255,0.55) 75%,
        rgba(255,255,255,0.25) 100%
      ),
      url('../img/philosophy_hero.png');
    background-position: center, 65% center;
  }
  .hero-philosophy__inner { padding-top: 48px; padding-bottom: 48px; }
}

.philosophy-hero {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(32px, 5vw, 56px);
}
.philosophy-hero__title { font-family: var(--serif); color: var(--navy); font-weight: 500; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.15; margin-top: 22px; }
.philosophy-hero__title .accent { color: var(--brass); }
.philosophy-hero__lede { max-width: 52ch; color: var(--charcoal); font-size: 15.5px; line-height: 1.75; margin-top: 26px; }
.philosophy-hero__image { aspect-ratio: 16/9; overflow: hidden; }
.philosophy-hero__image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .philosophy-hero { grid-template-columns: 1fr; } .philosophy-hero__image { order: -1; aspect-ratio: 4/3; } }

.pillars {
  padding-top: clamp(8px, 1.8vh, 72px); padding-bottom: clamp(8px, 1.8vh, 72px);
  border-top: 1px solid var(--hairline);
}
.pillars__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.pillar { padding: clamp(6px, 1.2vh, 12px) 22px; text-align: center; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1vh, 12px); }
.pillar:last-child { border-right: 0; }
.pillar__icon { width: 54px; height: 54px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; margin-bottom: 4px; }
.pillar__icon svg { width: 26px; height: 26px; stroke: var(--white); fill: none; stroke-width: 1.4; }
.pillar__name { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.22em; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.pillar__desc { font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--charcoal); max-width: 26ch; margin: 0; }
@media (max-width: 900px) { .pillars__grid { grid-template-columns: repeat(2, 1fr); } .pillar { border-bottom: 1px solid var(--hairline); padding-bottom: 32px; padding-top: 24px; } .pillar:nth-child(2n) { border-right: 0; } }
@media (max-width: 500px) { .pillars__grid { grid-template-columns: 1fr; } .pillar { border-right: 0; } }

.philosophy-close {
  background: var(--cream);
  padding: clamp(40px, 5vw, 72px) 0;
}
.philosophy-close__grid { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 3vw, 56px); align-items: center; }
.philosophy-close__mark { font-family: var(--serif); color: var(--brass); font-size: 60px; line-height: 1; margin-top: -12px; }
.philosophy-close__text p { font-family: var(--serif); color: var(--navy); font-size: clamp(16px, 1.8vw, 20px); line-height: 1.55; margin: 0 0 4px; }
.philosophy-close__text .brass { color: var(--brass); font-style: italic; }
@media (max-width: 900px) { .philosophy-close__grid { grid-template-columns: 1fr; text-align: center; } }

/* ==========================================================================
   WAY
   ========================================================================== */
.way-hero { text-align: center; padding-top: clamp(16px, 3.5vh, 96px); padding-bottom: clamp(8px, 1.8vh, 32px); }
.way-hero h1 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: clamp(28px, 4vw, 62px); letter-spacing: 0.05em; line-height: 1.1; }
.way-hero .sub { font-family: var(--serif); font-style: italic; color: var(--brass); font-size: clamp(15px, 1.8vw, 26px); margin-top: clamp(6px, 1.2vh, 14px); }
.way-hero .rule-brass { margin: clamp(10px, 1.8vh, 22px) auto 0; }

.way-body {
  display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(32px, 4vw, 72px);
  padding-top: clamp(12px, 2.2vh, 72px); padding-bottom: clamp(12px, 2.2vh, 72px);
  position: relative;
}
.way-body::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0;
  width: 32%; background-image: url('../img/principles_bridge.png');
  background-size: cover; background-position: left center;
  opacity: 0.22;
  mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 20%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 20%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.way-steps, .way-quote { position: relative; z-index: 1; }
.way-steps { display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--hairline); padding-right: clamp(20px, 3vw, 40px); }
.way-step { display: grid; grid-template-columns: 60px 1fr; gap: 20px; align-items: start; padding: clamp(4px, 1vh, 20px) 0; }
.way-step__num {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--brass); color: var(--brass);
  display: grid; place-items: center; font-family: var(--sans); font-size: 13px;
}
.way-step h3 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: clamp(18px, 2vw, 24px); line-height: 1.25; margin: 4px 0 8px; }
.way-step p { color: var(--charcoal); font-size: 14.5px; margin: 0; }

.way-quote { padding-left: clamp(20px, 3vw, 40px); }
.way-quote__mark { font-family: var(--serif); color: var(--brass); font-size: 60px; line-height: 1; }
.way-quote .rule-brass { margin: 20px 0; }
.way-quote h2 { font-family: var(--serif); color: var(--navy); font-weight: 500; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.15; margin: 0 0 24px; }
.way-quote p { color: var(--charcoal); font-size: 15.5px; }
.way-quote__cta { margin-top: 28px; text-align: center; }
.way-quote__cta .btn { padding-top: 12px; padding-bottom: 12px; }

@media (max-width: 900px) {
  .way-body { grid-template-columns: 1fr; }
  .way-steps { border-right: 0; padding-right: 0; }
  .way-body::after { opacity: 0.08; width: 100%; }
}

.way-close {
  background: var(--cream);
  padding: clamp(40px, 5vw, 72px) 0;
}
.way-close__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: clamp(24px, 3vw, 48px); }
.way-close__block h3 { font-family: var(--serif); color: var(--navy); font-size: clamp(20px, 2vw, 24px); font-weight: 500; margin-top: 0; }
.way-close__block p { color: var(--slate); font-size: 13.5px; margin-top: 8px; }
.way-close__viz { text-align: center; }
.way-close__viz-eyebrow { letter-spacing: .28em; color: var(--brass); margin: 0 0 12px; }
.way-close__viz svg { width: 160px; height: auto; }
.way-close__viz-img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.way-close__qs { display: flex; gap: clamp(16px, 2vw, 32px); }
.way-close__q { display: flex; gap: 12px; align-items: start; max-width: 130px; }
.way-close__q .num { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--brass); color: var(--brass); display: grid; place-items: center; font-size: 11px; flex: 0 0 26px; }
.way-close__q p { font-size: 12.5px; margin: 0; color: var(--charcoal); line-height: 1.4; }
.way-close__payoff { text-align: right; }
.way-close__payoff p { font-family: var(--serif); color: var(--navy); font-size: clamp(20px, 2vw, 24px); font-weight: 500; line-height: 1.35; margin: 0; text-align: left; display: inline-block; }
.way-close__payoff-em { color: var(--brass); font-style: italic; font-size: 1.15em; letter-spacing: 0.01em; }
.way-close__payoff-indent { display: inline-block; padding-left: 1.4em; }
.way-close__payoff-indent--deeper { padding-left: 2.8em; }
@media (max-width: 1100px) { .way-close__grid { grid-template-columns: 1fr; text-align: center; } .way-close__qs { justify-content: center; flex-wrap: wrap; } .way-close__q { text-align: left; } .way-close__payoff { text-align: center; } }

/* ==========================================================================
   MANIFESTO
   ========================================================================== */
.manifesto-banner {
  position: relative;
  height: clamp(100px, 16vh, 440px);
  overflow: hidden;
  background: var(--navy);
}
.manifesto-banner img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Warm-white gradient veil on the left third to hold the title */
.manifesto-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(249,246,240,0.92) 0%, rgba(249,246,240,0.55) 32%, rgba(249,246,240,0) 60%);
  pointer-events: none; z-index: 1;
}
.manifesto-banner__title {
  position: absolute; left: 0; right: 0; top: clamp(28px, 4vw, 56px);
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  z-index: 2;
}
.manifesto-banner__title h1 {
  font-family: var(--serif); font-weight: 500; color: var(--navy);
  font-size: clamp(34px, 5vw, 68px); letter-spacing: 0.05em; line-height: 1;
  margin: 0; white-space: nowrap;
}
.manifesto-banner__title .rule-brass { margin-top: 16px; }

/* Balanced two-column editorial spread.
   Both columns start at the same top baseline. Consistent paragraph rhythm
   across both columns. The payoff line ("It is earned.") sits low as the
   visual anchor of the whole spread, aligned roughly with the last line of
   the left column so both columns conclude together. */
.manifesto-body {
  padding-top: clamp(12px, 2.5vh, 72px);
  padding-bottom: clamp(12px, 2.5vh, 72px);
  max-width: 1120px;  /* keep the reading measure comfortable */
}
.manifesto-body__opener {
  font-family: var(--serif);
  color: var(--navy);
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  max-width: 32ch;
  margin: 0 auto clamp(10px, 2.2vh, 88px);
  text-wrap: balance;
}
.manifesto-body__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 6vw, 104px);
  align-items: start;
}
.manifesto-body__col { display: flex; flex-direction: column; }
.manifesto-col__eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 clamp(8px, 1.5vh, 18px);
  font-weight: 500;
}
.manifesto-body__col p {
  color: var(--charcoal);
  font-size: clamp(14px, 1.8vh, 16.5px);
  line-height: 1.65;
  margin: 0 0 clamp(8px, 1.3vh, 18px);
}
/* Opening statements — same treatment in both columns to establish parity */
.manifesto-body__col .lead {
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 clamp(10px, 2vh, 20px);
}
.manifesto-body__col .lead + .lead { margin-top: 6px; }

/* The indented five-item sequence — sits comfortably below the two leads */
.manifesto-list {
  padding-left: clamp(20px, 3vw, 40px);
  margin: clamp(6px, 1.2vh, 14px) 0 0;
  border-left: 2px solid var(--brass);
}
.manifesto-list p {
  color: var(--charcoal);
  font-size: clamp(14px, 1.8vh, 16.5px);
  line-height: 1.55;
  margin: 0 0 clamp(4px, 0.8vh, 10px);
}
.manifesto-list p:last-child { margin-bottom: 0; }
.manifesto-list strong { color: var(--navy); font-weight: 600; }

/* The payoff moment — brass, right-justified in the Practice column as the
   conclusion of that column's argument. Sized ~25% smaller than the previous
   large treatment so it sits as a payoff, not a shout. */
.manifesto-body__col .manifesto-earned {
  font-family: var(--serif);
  color: var(--brass);
  font-size: clamp(28px, 4vw, 62px);
  font-weight: 500;
  line-height: 1;
  margin: clamp(12px, 2.5vh, 28px) 0 0;
  letter-spacing: -0.005em;
  text-align: right;
}
/* Coda — centered under both columns, ties the spread back to the mission */
.manifesto-body__coda {
  font-family: var(--serif);
  color: var(--navy);
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  margin: clamp(16px, 3vh, 64px) auto 0;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .manifesto-body__columns {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .manifesto-body__col .manifesto-earned {
    font-size: clamp(36px, 9vw, 52px);
    margin: 22px 0 0;
    text-align: left;
  }
  .manifesto-body__coda {
    font-size: clamp(15px, 4vw, 19px);
    margin-top: 24px;
  }
}

.manifesto-cta { text-align: center; padding: 0 0 clamp(48px, 7vw, 88px); }

/* Manifesto closing band — mirrors the Way page's closing band pattern.
   Bridges the Manifesto's belief register into the Principles page. */
.manifesto-close {
  background: var(--cream);
  padding: clamp(40px, 5vw, 72px) 0;
}
.manifesto-close__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}
.manifesto-close__eyebrow { letter-spacing: .28em; color: var(--brass); margin: 0; }
.manifesto-close__block h3 {
  font-family: var(--serif); color: var(--navy);
  font-size: clamp(20px, 2vw, 24px); font-weight: 500;
  line-height: 1.2; margin: 8px 0 8px;
}
.manifesto-close__block > p { color: var(--slate); font-size: 13.5px; margin-top: 8px; }
.manifesto-close__viz { text-align: center; }
.manifesto-close__viz-eyebrow { letter-spacing: .28em; color: var(--brass); margin: 0 0 10px; }
.manifesto-close__viz-img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.manifesto-close__cta { text-align: right; }
@media (max-width: 1100px) {
  .manifesto-close__grid { grid-template-columns: 1fr; text-align: center; }
  .manifesto-close__cta { text-align: center; }
}

/* ==========================================================================
   PRINCIPLES
   ========================================================================== */
/* Principles page — vertical spacing scales with viewport HEIGHT (vh) so the
   full 7-item list fits any window without scrolling on desktop. On tall
   windows the rows breathe; on shorter windows the padding compresses
   automatically. Font sizes step down slightly on very short screens to
   keep the whole page in view. */
.principles-page {
  padding-top: clamp(16px, 3vh, 72px);
  padding-bottom: clamp(8px, 1.5vh, 28px);
  position: relative; overflow: hidden;
}
.principles-page__bg {
  position: absolute; top: 0; right: -8vw; height: 100%; width: 45%; z-index: 0;
  background-image: url('../img/principles_bridge.png');
  background-size: cover; background-position: center;
  opacity: 0.22;
  mask-image: linear-gradient(to left, black 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 30%, transparent 100%);
}
.principles-page > .container { position: relative; z-index: 1; }
.principles-page h1 { font-family: var(--serif); color: var(--navy); font-weight: 500; font-size: clamp(28px, 4.5vw, 68px); letter-spacing: 0.04em; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; line-height: 1.05; }
.principles-page .intro { font-family: var(--serif); font-style: italic; color: var(--brass); font-size: clamp(14px, 1.6vw, 22px); margin-top: clamp(6px, 1vh, 14px); }
.principles-page .rule-brass { margin-top: clamp(6px, 1vh, 14px); }

.principles-list { max-width: 900px; margin: clamp(8px, 1.5vh, 32px) 0; }
.principle {
  display: grid; grid-template-columns: 82px 1fr; gap: 34px; align-items: start;
  padding: clamp(4px, 0.8vh, 18px) 0; border-top: 1px solid var(--hairline);
}
.principle:last-child { border-bottom: 1px solid var(--hairline); }
.principle__num { font-family: var(--serif); color: var(--brass); font-size: clamp(24px, 2.8vw, 44px); line-height: 1; font-weight: 500; padding-top: 2px; }
.principle__num-wrap { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: start; }
.principle__num-wrap .divider { width: 1px; height: clamp(20px, 3.5vh, 60px); background: var(--brass); opacity: 0.5; }
.principle h2 { font-family: var(--serif); color: var(--navy); font-weight: 500; font-size: clamp(16px, 1.8vw, 26px); line-height: 1.2; margin: 2px 0 2px; }
.principle p { color: var(--charcoal); font-size: clamp(12px, 1.4vh, 15px); line-height: 1.45; margin: 0; }
@media (max-width: 560px) { .principle { grid-template-columns: 60px 1fr; gap: 20px; } .principle__num-wrap .divider { display: none; } }

.principles-close {
  background: var(--cream); padding: clamp(40px, 5vw, 72px) 0;
}
.principles-close__grid { display: grid; grid-template-columns: auto 1.4fr 1fr auto; align-items: center; gap: clamp(24px, 3vw, 48px); }
.principles-close__viz svg { width: 130px; height: auto; }
.principles-close__title h3 { font-family: var(--serif); color: var(--navy); font-size: clamp(20px, 2.2vw, 28px); font-weight: 500; line-height: 1.2; }
.principles-close__note p { color: var(--charcoal); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 900px) { .principles-close__grid { grid-template-columns: 1fr; text-align: center; } }

/* ==========================================================================
   CONNECT
   ========================================================================== */
.connect-page {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: calc(100vh - 88px);
}
.connect-page__left {
  padding: clamp(24px, 5vh, 88px) clamp(20px, 4vw, 64px); background: var(--warm-white);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-content: start;
}
.connect-page__left h1 { font-family: var(--serif); color: var(--navy); font-weight: 500; font-size: clamp(38px, 5vw, 72px); letter-spacing: 0.04em; grid-column: 1 / -1; }
.connect-page__left .rule-brass { margin-top: 8px; }
.connect-intro { grid-column: 1 / -1; }
.connect-intro__title { font-family: var(--serif); color: var(--navy); font-size: clamp(20px, 2.3vw, 28px); line-height: 1.35; margin: clamp(12px, 2vh, 20px) 0; font-weight: 500; }
.connect-intro p { color: var(--charcoal); font-size: 15px; line-height: 1.75; max-width: 42ch; }
.connect-quote { grid-column: 1 / 2; margin-top: 20px; padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--brass); }
.connect-quote__mark { font-family: var(--serif); color: var(--brass); font-size: 40px; line-height: 0.4; }
.connect-quote p { font-family: var(--serif); color: var(--navy); font-size: 15px; line-height: 1.55; margin: 12px 0 12px; }
.connect-quote .credit { color: var(--brass); font-style: italic; font-size: 13.5px; }
.connect-mark { grid-column: 2 / 3; align-self: end; text-align: center; }
.connect-mark svg { width: 100px; height: auto; opacity: 0.85; }

.connect-form-wrap {
  padding: clamp(24px, 5vh, 88px) clamp(20px, 4vw, 64px);
  background: var(--warm-white);
  background-image: url('../img/connect_hero.png');
  background-size: cover; background-position: center;
  position: relative;
}
.connect-form-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.5) 100%);
}
.connect-form { position: relative; z-index: 1; max-width: 460px; }
.connect-form label {
  display: block; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.24em;
  font-size: 11px; font-weight: 600; color: var(--navy); margin: clamp(12px, 2vh, 22px) 0 8px;
}
.connect-form input, .connect-form textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--hairline);
  background: var(--white); font: 400 14px/1.5 var(--sans); color: var(--charcoal);
  border-radius: 0; transition: border-color .15s;
}
.connect-form input:focus, .connect-form textarea:focus { outline: none; border-color: var(--brass); }
.connect-form input::placeholder, .connect-form textarea::placeholder { color: var(--slate-2); }
.connect-form textarea { min-height: 110px; resize: vertical; }
.connect-form__submit { margin-top: clamp(16px, 2.5vh, 32px); display: flex; gap: 16px; align-items: center; }
.connect-form__submit .arrow-out { color: var(--brass); }
.connect-form__note { color: var(--slate); font-size: 13px; line-height: 1.6; margin-top: 20px; max-width: 44ch; }

@media (max-width: 1100px) {
  .connect-page { grid-template-columns: 1fr; }
  .connect-form-wrap { background-image: none; }
  .connect-form-wrap::before { display: none; }
}

/* ==========================================================================
   Small utilities
   ========================================================================== */
.text-center { text-align: center; }
.brass { color: var(--brass); }
.navy { color: var(--navy); }
.italic { font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Print — clean fallback */
@media print {
  .site-header, .site-footer, .nav-toggle { display: none !important; }
  body { background: white; }
}


/* ==========================================================================
   NOTE: A previous "fit-to-viewport" system (100vh locks + shrunken type per
   page) was removed. Pages now scroll naturally at their intended editorial
   sizes. Header, footer, and pre-footer closing bands are identical across
   every page.
   ========================================================================== */


/* ---------- Desktop compressed closing band (shared across every page) ----------
   Each page has its own closing-band class (bridge-cta / founder-close /
   philosophy-close / way-close / manifesto-close / principles-close).
   On desktop we tighten padding and shrink internal type/imagery uniformly so
   every band feels the same height (~110-130px) and matches the compressed
   footer's rhythm. Mobile keeps the roomier base rule for legibility. */
@media (min-width: 901px) {
  /* Uniform vertical padding AND uniform height on every closing band so
     they feel identical across pages. Content differs page to page (bridge
     has questions, principles has a viz + CTA, way has a silhouette + no
     CTA, etc.) but the band chrome — height, padding, cream background —
     stays consistent so the pre-footer rhythm is the same everywhere. */
  .bridge-cta,
  .founder-close,
  .philosophy-close,
  .way-close,
  .manifesto-close,
  .principles-close {
    padding: 20px 0;
    min-height: 148px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Founder / Manifesto / Principles share the same "eyebrow + h3 + note | viz | CTA" grid */
  .founder-close__block h3,
  .manifesto-close__block h3,
  .principles-close__title h3 {
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.15;
    margin: 4px 0 2px;
  }
  .founder-close__block > p,
  .manifesto-close__block > p,
  .principles-close__note p {
    font-size: 11.5px;
    line-height: 1.4;
    margin-top: 2px;
  }
  .founder-close__eyebrow,
  .manifesto-close__eyebrow,
  .founder-close__viz-eyebrow,
  .manifesto-close__viz-eyebrow {
    font-size: 10.5px;
  }
  .founder-close__viz-img,
  .manifesto-close__viz-img {
    max-width: 110px;
  }
  .principles-close__viz svg { width: 90px; }
  .founder-close .btn,
  .manifesto-close .btn,
  .principles-close .btn {
    padding: 11px 18px;
    font-size: 10px;
  }

  /* Philosophy — mark + quote + CTA */
  .philosophy-close__mark {
    font-size: 44px;
    margin-top: -8px;
  }
  .philosophy-close__text p {
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 2px;
  }
  .philosophy-close .btn {
    padding: 12px 22px;
    font-size: 10.5px;
  }

  /* Way — 3-column block/viz/payoff (no CTA button) */
  .way-close__block h3 {
    font-size: clamp(14px, 1.5vw, 18px);
    margin-top: 4px;
  }
  .way-close__block p {
    font-size: 11.5px;
    margin-top: 4px;
  }
  .way-close__viz-img { max-width: 130px; }
  .way-close__q p { font-size: 11.5px; }

  /* Bridge CTA — navy-bar variant with 3 questions inline */
  .bridge-cta__lede {
    font-size: clamp(15px, 1.5vw, 20px);
    margin-top: 4px;
  }
  .bridge-cta--navybar .bridge-cta__inner { gap: clamp(20px, 3vw, 40px); }
  .bridge-cta--navybar .bridge-cta__mark { width: 40px; height: 40px; }
  .bridge-cta--navybar .bridge-cta__mark-title {
    font-size: clamp(16px, 1.5vw, 20px);
    letter-spacing: 0.12em;
  }
  .bridge-cta--navybar .bridge-cta__mark-sub {
    font-size: clamp(11px, 0.85vw, 12px);
    margin-top: 4px;
  }
  .bridge-cta--navybar .bridge-cta__brass-title {
    font-size: clamp(10px, 0.78vw, 11.5px);
    letter-spacing: 0.14em;
  }
  .bridge-cta--navybar .bridge-cta__brass-title--center { margin-bottom: 8px; }
  .bridge-cta--navybar .bridge-cta__questions li { font-size: clamp(11.5px, 0.9vw, 13px); }
  .bridge-cta--navybar .bridge-cta__num { width: 18px; height: 18px; font-size: 10px; }
  .bridge-cta--navybar .bridge-cta__brass-sub {
    font-size: clamp(11.5px, 0.9vw, 13px);
    margin-bottom: 0;
  }
}



/* ==========================================================================
   LEGAL PAGES (Privacy Policy, Terms of Use)
   ========================================================================== */
.legal-page { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); max-width: 760px; }
.legal-page__header { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.legal-page__header h1 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: clamp(28px, 3.5vw, 42px); letter-spacing: 0.05em; margin: 14px 0 12px; }
.legal-page__updated { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); margin: 0 0 22px; }
.legal-page__header .rule-brass { margin: 0 auto; }
.legal-page__body { color: var(--charcoal); }
.legal-page__body h2 { font-family: var(--serif); color: var(--navy); font-weight: 500; font-size: clamp(18px, 1.8vw, 22px); margin: 36px 0 14px; }
.legal-page__body p { font-size: 15.5px; line-height: 1.75; margin: 0 0 14px; }
.legal-page__body ul { padding-left: 22px; margin: 0 0 18px; }
.legal-page__body li { font-size: 15.5px; line-height: 1.75; margin-bottom: 6px; color: var(--charcoal); }
.legal-page__body a { color: var(--brass); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-page__body a:hover { color: var(--navy); }
.legal-page__body strong { color: var(--navy); font-weight: 600; }


/* Thank-you page (post-form-submit) */
.thankyou-page { padding-top: clamp(80px, 12vw, 160px); padding-bottom: clamp(80px, 12vw, 160px); text-align: center; }
.thankyou-page__inner { max-width: 560px; margin: 0 auto; }
.thankyou-page h1 { font-family: var(--serif); font-weight: 500; color: var(--navy); font-size: clamp(36px, 5vw, 60px); letter-spacing: 0.05em; margin: 12px 0 20px; }
.thankyou-page .rule-brass { margin: 0 auto 28px; }
.thankyou-page__lede { font-family: var(--serif); color: var(--navy); font-size: clamp(20px, 2.2vw, 26px); font-style: italic; margin: 0 0 14px; }
.thankyou-page__body { color: var(--charcoal); font-size: 15.5px; line-height: 1.75; margin: 0 0 32px; }