/* ==========================================================================
   mab Partners — site styles
   Design system lifted from the Strategy as a Service homepage mockup and
   extended for the full site.
   ========================================================================== */

:root {
  --ink: #152238;
  --ink-deep: #0d1626;
  --paper: #FFFFFF;
  --slate: #5C6472;
  --brass: #9C7A3C;
  --brass-dark: #7A5F2D;
  --brass-light: #D9C48A;
  /* Secondary accent, pulled from the blue of the mab logomark */
  --blue: #2F6FA8;
  --blue-dark: #245781;
  --line: #E3E0D8;
  --white: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(21,34,56,0.04), 0 12px 28px -18px rgba(21,34,56,0.18);
  --card-shadow-hover: 0 2px 4px rgba(21,34,56,0.06), 0 22px 44px -18px rgba(21,34,56,0.28);

  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Reserved for the big, emotional headline moments — used sparingly */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  --wrap: 1120px;
  --wrap-wide: 1280px;
  --pad: 32px;
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color .15s ease, border-color .15s ease, opacity .15s ease; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.section-line { border-top: 1px solid var(--line); }
section { padding: 76px 0; }
.narrow { max-width: 760px; }

.eyebrow {
  font-size: 14px; color: var(--brass-dark); font-weight: 500;
  margin-bottom: 14px; letter-spacing: 0.2px;
}
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: 31px; letter-spacing: -0.02em; }
.section-head p { color: var(--slate); font-size: 17px; margin-top: 16px; }

@media (max-width: 640px) {
  :root { --pad: 20px; }
  section { padding: 52px 0; }
  .section-head h2 { font-size: 26px; }
}

/* Skip link ---------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 3px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Buttons ---------------------------------------------------------------- */
.btn-primary {
  background: var(--ink); color: var(--white); padding: 14px 26px;
  border-radius: 3px; font-size: 15px; font-weight: 500; display: inline-block;
  border: 1px solid var(--ink); cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover { background: var(--ink-deep); transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(21,34,56,0.5); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-secondary {
  padding: 14px 4px; font-size: 15px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--ink); display: inline-block;
  transition: color .15s ease, border-color .15s ease, padding-right .15s ease;
}
.btn-secondary::after { content: " \2192"; opacity: 0; margin-left: 2px; transition: opacity .15s ease; }
.btn-secondary:hover { color: var(--brass-dark); border-color: var(--brass-dark); }
.btn-secondary:hover::after { opacity: 1; }
.btn-row { display: flex; gap: 20px; margin-top: 34px; flex-wrap: wrap; align-items: center; }

/* Header / nav ---------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 11px; padding-bottom: 11px; gap: 24px;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand-mark { display: block; overflow: hidden; }
.brand-mark img { height: 58px; width: auto; display: block; }
@media (max-width: 640px) { .brand-mark img { height: 46px; } }

.nav-links { display: flex; align-items: center; gap: 32px; font-size: 15px; color: var(--slate); font-weight: 500; letter-spacing: 0.1px; }
.nav-links a, .nav-dropdown-toggle { display: inline-flex; align-items: center; line-height: 1.2; }
.nav-links a:not(.nav-cta), .nav-dropdown-toggle {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta)[aria-current="page"],
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.is-current {
  color: var(--ink); border-bottom-color: var(--brass);
}
.nav-links .nav-cta {
  font-size: 14.5px; font-weight: 500; padding: 9px 18px;
  border: 1px solid var(--ink); border-radius: 3px; white-space: nowrap; color: var(--ink);
}
.nav-links .nav-cta:hover { background: var(--ink); color: var(--white); }

/* "Insights" dropdown (Book + Podcast) */
.nav-item--dropdown { position: relative; }
.nav-dropdown-toggle {
  font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit;
  background: none; border: none; cursor: pointer; color: inherit; gap: 5px;
}
.nav-dropdown-toggle::after {
  content: ''; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.nav-item--dropdown.is-open .nav-dropdown-toggle::after { transform: rotate(-135deg); margin-top: 2px; }
.nav-dropdown-menu {
  display: none; flex-direction: column;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px;
  min-width: 160px; padding: 8px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--card-shadow); z-index: 60;
}
.nav-item--dropdown.is-open .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a { padding: 9px 10px; border-radius: 4px; font-size: 14.5px; font-weight: 500; color: var(--slate); }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a[aria-current="page"] { background: #F7F5F0; color: var(--ink); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); border-radius: 3px;
  padding: 8px 12px; cursor: pointer; font-size: 14px; color: var(--ink); line-height: 1.2;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--paper);
    border-bottom: 1px solid var(--line); padding: 4px var(--pad) 20px; z-index: 40;
  }
  .site-header .wrap { position: relative; flex-wrap: wrap; }
  .site-header.nav-open .nav-links { display: flex; }
  .nav-links a:not(.nav-cta) { padding: 13px 0; border-bottom: 1px solid var(--line); width: 100%; }
  .nav-links .nav-cta { text-align: center; justify-content: center; margin-top: 14px; }
  .nav-item--dropdown { width: 100%; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav-dropdown-menu {
    position: static; transform: none; display: none; flex-direction: column;
    margin: 0; padding: 0 0 4px 14px; background: none; border: none; box-shadow: none;
  }
  .nav-item--dropdown.is-open .nav-dropdown-menu { display: flex; }
  .nav-dropdown-menu a { padding: 11px 0; border-radius: 0; border-bottom: 1px solid var(--line); }
}

/* Homepage: transparent header floating over the hero, solid once scrolled past it */
.site-header--overlay {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  transition: background-color .3s ease, border-color .3s ease;
}
.site-header--overlay:not(.is-scrolled) {
  background: transparent; border-bottom-color: transparent;
}
.site-header--overlay:not(.is-scrolled) .brand-mark {
  height: 68px; transition: height .3s ease;
}
.site-header--overlay:not(.is-scrolled) .brand-mark img {
  height: 107px; margin-top: -14.7px; transition: height .3s ease, margin-top .3s ease;
}
.site-header--overlay:not(.is-scrolled) .nav-toggle {
  border-color: rgba(251,249,244,0.4); color: #FBF9F4;
}
/* Desktop pre-scroll: just the logo and "Talk to us" — no menu trigger, nothing
   floating mid-header. The full nav appears as soon as the visitor scrolls.
   Scoped to desktop because on mobile the nav-cta lives inside the solid white panel
   that the toggle opens, where it must keep its normal dark styling. */
@media (min-width: 901px) {
  .site-header--overlay:not(.is-scrolled) .nav-links a:not(.nav-cta),
  .site-header--overlay:not(.is-scrolled) .nav-item--dropdown {
    display: none;
  }
  .site-header--overlay:not(.is-scrolled) .nav-links .nav-cta {
    border-color: rgba(251,249,244,0.55); color: #FBF9F4;
  }
  .site-header--overlay:not(.is-scrolled) .nav-links .nav-cta:hover {
    background: #FBF9F4; color: var(--ink);
  }
}
@media (max-width: 640px) {
  .site-header--overlay:not(.is-scrolled) .brand-mark { height: 52px; }
  .site-header--overlay:not(.is-scrolled) .brand-mark img { height: 82px; margin-top: -11.2px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header--overlay,
  .site-header--overlay .brand-mark,
  .site-header--overlay .brand-mark img {
    transition: none;
  }
}

/* Hero: interactive diagnostic — dark, serif, editorial ------------------
   padding-top clears the transparent floating header (see .site-header--overlay);
   the header itself reserves no layout space, so this hero owns that room instead. */
.diagnostic-hero {
  position: relative; overflow: hidden; background: var(--ink-deep);
  padding-top: 152px; padding-bottom: 64px;
}
.diagnostic-hero-bg { position: absolute; inset: 0; z-index: 0; }
.diagnostic-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; display: block; }
.diagnostic-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%, rgba(13,22,38,0.82), transparent 60%),
    radial-gradient(ellipse 90% 55% at 50% 100%, rgba(13,22,38,0.8), transparent 55%),
    linear-gradient(100deg, rgba(13,22,38,0.32) 0%, rgba(13,22,38,0.22) 50%, rgba(13,22,38,0.32) 100%),
    linear-gradient(to top, var(--ink-deep) 0%, transparent 90px);
}
.diagnostic-hero > .wrap { position: relative; z-index: 1; }

/* Cards / question steps: headline anchored near the top, tiles docked near
   the bottom as the hero's closing gateway into the rest of the page. The
   min-height stretches toward a full viewport (minus the header's reserved
   room), and space-between lets that extra height become open photograph
   between the headline and the tile row, rather than squeezing them together. */
.diag-step--cards, .diag-step--question {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 64px;
  min-height: max(580px, calc(100vh - 200px)); text-align: center;
}
.diag-hero-top { max-width: 640px; margin: 0 auto; }

.diag-hero-story {
  font-family: var(--font-body); font-size: 19px; line-height: 1.48; font-weight: 500;
  color: rgba(251,249,244,0.85); max-width: 480px; margin: 0 auto 20px; letter-spacing: 0.1px;
  text-shadow: 0 2px 16px rgba(5,10,20,0.85), 0 1px 4px rgba(5,10,20,0.9);
}
.diagnostic-hero h1 {
  font-family: var(--font-serif); font-weight: 400; font-style: normal;
  font-size: 44px; letter-spacing: -0.01em; line-height: 1.18; max-width: 620px; margin: 0 auto; color: #FBF9F4;
  text-shadow: 0 4px 24px rgba(5,10,20,0.8), 0 2px 6px rgba(5,10,20,0.9);
}
.diagnostic-hero h1 em, .diag-noscript h1 em { font-style: italic; color: var(--brass-light); }

.diag-step[hidden] { display: none; }
.diag-back {
  font: inherit; font-size: 14px; color: rgba(251,249,244,0.6); background: none; border: none;
  cursor: pointer; padding: 0; margin-bottom: 22px; display: inline-flex; align-items: center; gap: 6px;
  text-shadow: 0 2px 10px rgba(5,10,20,0.8); align-self: flex-start;
}
.diag-back:hover { color: var(--brass-light); }
.diag-back:focus-visible, .situation-tile:focus-visible, .diag-skip a:focus-visible {
  outline: 2px solid var(--brass-light); outline-offset: 3px;
}

/* Tiles: one consistent system — four (or three) equal panels, differentiated only on hover.
   Sized as substantial entry points (not small buttons) and grouped close to the headline
   above via the flex `gap` on .diag-step--cards, so headline + tiles read as one composition. */
.diag-tiles-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 262px)); gap: 20px;
  justify-content: center; width: 100%;
}
.situation-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px; text-align: left;
  font: inherit; font-weight: 400; cursor: pointer; border: none; border-radius: 0;
  background: rgba(11,17,29,0.86);
  box-shadow: inset 0 2px 0 0 rgba(217,196,138,0), 0 16px 28px -10px rgba(5,10,20,0.5);
  padding: 26px 28px 28px; min-height: 164px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.situation-tile:hover {
  background: rgba(24,33,52,0.9); transform: translateY(-4px);
  box-shadow: inset 0 2px 0 0 rgba(217,196,138,0.85), 0 22px 34px -10px rgba(5,10,20,0.56);
}

.situation-tile-label {
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(217,196,138,0.82);
}
.situation-tile-text { font-size: 22px; font-weight: 600; line-height: 1.24; color: #FBF9F4; letter-spacing: -0.012em; }

.diag-skip { margin-top: 28px; }
.diag-skip a { font-size: 13.5px; color: rgba(251,249,244,0.65); text-shadow: 0 2px 10px rgba(5,10,20,0.8); }
.diag-skip a:hover { color: var(--brass-light); }

@media (prefers-reduced-motion: reduce) {
  .situation-tile { transition: none; }
  .situation-tile:hover { transform: none; }
}

.diag-result { display: grid; grid-template-columns: 1.12fr 0.78fr; gap: 56px; align-items: center; }
.diag-result h1 { max-width: 560px; font-size: 38px; }
.diag-result-body { font-size: 18px; line-height: 1.55; color: rgba(251,249,244,0.85); max-width: 480px; margin-top: 20px; text-shadow: 0 2px 12px rgba(5,10,20,0.75); }
.diag-result .btn-row { margin-top: 30px; }
.diag-result .btn-primary { padding: 15px 28px; font-size: 15.5px; background: var(--brass-light); color: var(--ink-deep); }
.diag-result .btn-primary:hover { background: #EAD9A8; }
.diag-result .btn-primary::after { content: " \2192"; margin-left: 6px; display: inline-block; }

.diag-capture { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(251,249,244,0.14); max-width: 480px; }
.diag-capture-label { font-size: 14.5px; color: rgba(251,249,244,0.62); margin-bottom: 12px; }
.diag-capture-row { display: flex; gap: 10px; }
.diag-capture-row input[type="email"] {
  flex: 1; min-width: 0; padding: 12px 14px; border: 1.5px solid rgba(251,249,244,0.2); border-radius: 6px;
  font: inherit; font-size: 14.5px; color: #FBF9F4; background: rgba(251,249,244,0.04);
}
.diag-capture-row input[type="email"]::placeholder { color: rgba(251,249,244,0.35); }
.diag-capture-row input[type="email"]:focus { outline: none; border-color: var(--brass-light); }
.diag-capture-row .btn-secondary { white-space: nowrap; color: var(--brass-light); border-color: rgba(251,249,244,0.3); }
.diag-capture-row .btn-secondary:hover { color: #EAD9A8; border-color: var(--brass-light); }
.diag-capture-success { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(251,249,244,0.14); font-size: 15px; color: var(--brass-light); font-weight: 500; max-width: 480px; }
.bot-field-wrap { position: absolute; left: -9999px; }

.diagnostic-hero .align-box { position: relative; transform: translateY(34px); }
.diagnostic-hero .align-box::before {
  content: ''; position: absolute; inset: -14% -10%; z-index: -1;
  background: radial-gradient(ellipse 62% 62% at 46% 48%, rgba(8,14,26,0.55), transparent 72%);
}
.diagnostic-hero .align-box svg { display: block; width: 100%; height: auto; overflow: visible; }
.diagnostic-hero .align-caption { font-size: 12.5px; color: rgba(251,249,244,0.65); margin-top: 14px; max-width: 420px; text-shadow: 0 2px 10px rgba(5,10,20,0.85); }
@media (max-width: 900px) { .diagnostic-hero .align-box { max-width: 440px; transform: none; } }

.diag-noscript .kicker { font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brass-light); font-weight: 600; margin-bottom: 20px; }
.diag-noscript h1 { font-family: var(--font-serif); font-weight: 400; font-size: 48px; letter-spacing: -0.01em; line-height: 1.16; margin-bottom: 28px; color: #FBF9F4; }

@media (max-width: 900px) {
  .diagnostic-hero { padding-top: 116px; }
  .diag-result { grid-template-columns: 1fr; gap: 36px; }
  .diagnostic-hero h1 { max-width: 100%; }
  .diag-step--cards, .diag-step--question { min-height: max(640px, calc(100vh - 160px)); gap: 48px; }
  .diag-tiles-row { grid-template-columns: repeat(2, minmax(0, 260px)); gap: 18px; }
}
@media (max-width: 640px) {
  .diagnostic-hero { padding-top: 96px; }
  .diagnostic-hero h1, .diag-noscript h1 { font-size: 32px; }
  .diag-result h1 { font-size: 28px; }
  .diag-step--cards, .diag-step--question { min-height: 0; gap: 36px; }
  .diag-tiles-row { grid-template-columns: 1fr; max-width: 380px; gap: 14px; }
  .situation-tile { min-height: 0; padding: 22px 24px; }
  .diag-result-body { font-size: 16.5px; }
}
@media (max-width: 560px) {
  .diag-capture-row { flex-direction: column; align-items: stretch; }
}

/* Page hero (interior pages) ------------------------------------------------- */
.page-hero { padding-top: 72px; padding-bottom: 56px; }
.page-hero h1 { font-size: 39px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; max-width: 780px; }
.page-hero .lead { font-size: 18px; color: var(--slate); margin-top: 20px; max-width: 620px; }
@media (max-width: 640px) { .page-hero { padding-top: 44px; padding-bottom: 36px; } .page-hero h1 { font-size: 30px; } }

/* HBDI page hero — full-bleed photo, dark ink overlay ------------------------ */
.hbdi-hero {
  position: relative; overflow: hidden; background: var(--ink-deep);
  padding-top: 96px; padding-bottom: 84px; min-height: 700px;
}
.hbdi-hero-bg { position: absolute; inset: 0; z-index: 0; }
.hbdi-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
.hbdi-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(13,22,38,0.86) 0%, rgba(13,22,38,0.66) 34%, rgba(13,22,38,0.34) 62%, rgba(13,22,38,0.22) 100%),
    linear-gradient(to top, rgba(13,22,38,0.45), transparent 32%);
}
.hbdi-hero > .wrap { position: relative; z-index: 1; }
.hbdi-hero-inner { display: flex; flex-direction: column; justify-content: space-between; min-height: 520px; }
.hbdi-hero .eyebrow { color: var(--brass-light); text-shadow: 0 2px 10px rgba(5,10,20,0.85); }
.hbdi-hero h1 {
  font-size: 39px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; max-width: 620px; color: #FBF9F4;
  text-shadow: 0 4px 20px rgba(5,10,20,0.75), 0 2px 6px rgba(5,10,20,0.9);
}
.hbdi-hero .lead {
  font-size: 18px; color: rgba(251,249,244,0.85); margin-top: 0; max-width: 560px;
  text-shadow: 0 2px 14px rgba(5,10,20,0.8);
}
.hbdi-hero-bottom .btn-row { margin-top: 22px; }
@media (max-width: 900px) {
  .hbdi-hero { min-height: 620px; }
  .hbdi-hero-inner { min-height: 440px; }
}
@media (max-width: 640px) {
  .hbdi-hero { padding-top: 48px; padding-bottom: 44px; min-height: 520px; }
  .hbdi-hero-inner { min-height: 428px; }
  .hbdi-hero h1 { font-size: 30px; max-width: 100%; }
  .hbdi-hero-bg img { object-position: 62% 38%; }
}

/* Strategy as a Service page hero — full-bleed photo, dark ink overlay ------- */
.sas-hero {
  position: relative; overflow: hidden; background: var(--ink-deep);
  padding-top: 96px; padding-bottom: 84px; min-height: 700px;
}
.sas-hero-bg { position: absolute; inset: 0; z-index: 0; }
.sas-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
.sas-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(13,22,38,0.86) 0%, rgba(13,22,38,0.66) 34%, rgba(13,22,38,0.34) 62%, rgba(13,22,38,0.22) 100%),
    linear-gradient(to top, rgba(13,22,38,0.45), transparent 32%);
}
.sas-hero > .wrap { position: relative; z-index: 1; }
.sas-hero-inner { display: flex; flex-direction: column; justify-content: space-between; min-height: 520px; }
.sas-hero .eyebrow { color: var(--brass-light); text-shadow: 0 2px 10px rgba(5,10,20,0.85); }
.sas-hero h1 {
  font-size: 39px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; max-width: 620px; color: #FBF9F4;
  text-shadow: 0 4px 20px rgba(5,10,20,0.75), 0 2px 6px rgba(5,10,20,0.9);
}
.sas-hero .lead {
  font-size: 18px; color: rgba(251,249,244,0.85); margin-top: 0; max-width: 560px;
  text-shadow: 0 2px 14px rgba(5,10,20,0.8);
}
.sas-hero-bottom .btn-row { margin-top: 22px; }
.sas-hero .btn-secondary { color: var(--brass-light); border-color: rgba(251,249,244,0.4); }
.sas-hero .btn-secondary:hover { color: #EAD9A8; border-color: var(--brass-light); }
@media (max-width: 900px) {
  .sas-hero { min-height: 620px; }
  .sas-hero-inner { min-height: 440px; }
}
@media (max-width: 640px) {
  .sas-hero { padding-top: 48px; padding-bottom: 44px; min-height: 520px; }
  .sas-hero-inner { min-height: 428px; }
  .sas-hero h1 { font-size: 30px; max-width: 100%; }
  .sas-hero-bg img { object-position: 60% 42%; }
}

/* In-page jump nav (retreat hero) ------------------------------------------- */
.jump-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; max-width: 740px; }
.jump-nav a {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1;
  color: var(--ink); text-decoration: none;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.jump-nav a:hover, .jump-nav a:focus-visible {
  border-color: var(--brass); color: var(--brass-dark); background: #FAF7F0;
}
section[id] { scroll-margin-top: 28px; }
@media (max-width: 640px) { .jump-nav { gap: 8px; margin-top: 26px; } .jump-nav a { font-size: 12.5px; padding: 8px 13px; } }

/* Generic prose ---------------------------------------------------------------- */
.prose { max-width: 720px; }
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: 760px; }
.wrap.prose > .table-scroll { max-width: 100%; }
.prose h2 { font-size: 27px; margin: 44px 0 16px; letter-spacing: -0.2px; }
.prose h3 { font-size: 19px; margin: 32px 0 10px; }
.prose p { color: var(--ink); margin: 14px 0; }
.prose p.muted, .prose .muted { color: var(--slate); }
.prose ul { padding-left: 22px; margin: 14px 0; }
.prose li { margin: 8px 0; }
.prose strong { font-weight: 600; }
.prose blockquote {
  font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.5;
  margin: 28px 0; padding-left: 22px; border-left: 2px solid var(--brass); color: var(--ink);
}
.prose table { border-collapse: collapse; width: 100%; margin: 22px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--brass-dark); font-weight: 500; }
.table-scroll { overflow-x: auto; }

/* Stat row ---------------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.stat-row.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat-num { font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.stat-row.cols-4 .stat-num { font-size: 34px; }
.stat-label { font-size: 14.5px; color: var(--slate); margin-top: 8px; }
.pull-quote {
  font-family: var(--font-body); font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.5; color: var(--ink); max-width: 680px;
  margin: 48px 0 0; padding-left: 24px; border-left: 2px solid var(--brass);
}
@media (max-width: 900px) { .stat-row.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; } }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 480px) { .stat-row.cols-4 { grid-template-columns: 1fr; } }

/* Stat callout — a single figure given full graphic weight -------------------- */
.stat-callout {
  display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center;
  margin: 40px 0; padding: 32px 36px; background: var(--white);
  border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: 4px;
  box-shadow: var(--card-shadow);
}
.stat-callout .fig {
  font-family: var(--font-display); font-weight: 700; font-size: 76px; line-height: 1;
  letter-spacing: -0.03em; color: var(--ink);
}
.stat-callout .say { font-size: 19px; line-height: 1.45; color: var(--ink); max-width: 460px; }
.stat-callout .say strong { color: var(--brass-dark); font-weight: 600; }
@media (max-width: 640px) {
  .stat-callout { grid-template-columns: 1fr; gap: 12px; padding: 26px 24px; text-align: left; }
  .stat-callout .fig { font-size: 60px; }
  .stat-callout .say { font-size: 17px; }
}

/* Compare grid ---------------------------------------------------------------- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.compare-col { background: var(--paper); padding: 32px; }
.compare-old { opacity: 0.8; }
.compare-new { background: var(--white); box-shadow: inset 3px 0 0 var(--brass); }
.compare-label { font-size: 14.5px; font-weight: 600; margin-bottom: 18px; }
.compare-col ul { padding: 0; list-style: none; }
.compare-col li { font-size: 15px; color: var(--slate); padding: 10px 0 10px 22px; position: relative; border-top: 1px solid var(--line); }
.compare-col li:first-child { border-top: none; }
.compare-col li::before { content: "\2013"; position: absolute; left: 0; }
.compare-new li { color: var(--ink); }
.compare-new li::before { color: var(--brass-dark); }
@media (max-width: 760px) { .compare-grid { grid-template-columns: 1fr; } }

/* Card grids ---------------------------------------------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 48px; }
.topline-card { padding-top: 22px; border-top: 1px solid var(--line); }
.topline-card h3 { font-size: 19px; margin-bottom: 10px; }
.topline-card p { font-size: 15px; color: var(--slate); }
@media (max-width: 760px) { .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 28px; } }

/* FAQ ---------------------------------------------------------------- */
.faq-item h3 { font-size: 17px; margin-bottom: 10px; }
.faq-item p { font-size: 15px; color: var(--slate); }

/* Timeline (light-fill cards, brass rule) ----------------------------------- */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tl-item {
  position: relative; padding: 28px 26px; background: var(--white);
  border: 1px solid var(--line); border-left: 3px solid var(--brass);
  border-radius: 4px; box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tl-item:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.tl-month { font-size: 13px; color: var(--brass-dark); font-weight: 600; margin-bottom: 10px; letter-spacing: 0.2px; }
.tl-item h3 { font-size: 19px; margin-bottom: 10px; }
.tl-item p { font-size: 15px; color: var(--slate); }
.timeline.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .timeline.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .timeline { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .timeline.cols-4 { grid-template-columns: 1fr; } }

/* Results (light-fill cards, brass rule) ---------------------------------------- */
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.result-card {
  background: var(--white); padding: 30px 28px;
  border: 1px solid var(--line); border-left: 3px solid var(--brass);
  border-radius: 4px; box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.result-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.result-tag { font-size: 13px; color: var(--brass-dark); font-weight: 600; margin-bottom: 12px; letter-spacing: 0.2px; }
.result-arrow { font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: -0.01em; margin: 12px 0; color: var(--ink); }
.result-arrow span { color: var(--blue); }
.result-card p { font-size: 14.5px; color: var(--slate); }
@media (max-width: 800px) { .results-grid { grid-template-columns: 1fr; } }

/* Dark band ---------------------------------------------------------------- */
.dark-band { background: var(--ink); color: var(--white); padding: 76px 0; border-top: 3px solid var(--brass); }
.dark-band .eyebrow { color: var(--brass-light); }
.dark-band h2 { color: var(--white); font-size: 30px; max-width: 620px; }
.dark-band p { color: #BCC3D1; font-size: 16.5px; max-width: 640px; margin-top: 20px; }
.dark-band a.inline-link {
  color: var(--brass-light); border-bottom: 1px solid var(--brass-light);
  font-weight: 500; display: inline-block; margin-top: 24px;
}
.dark-band a.inline-link:hover { color: var(--white); border-color: var(--white); }

/* Dark band with a supporting image (two columns) */
.band-split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; }
.band-split .band-media { display: flex; justify-content: center; }
.band-split .band-media img {
  width: 190px; height: auto; border-radius: 0;
  box-shadow: none;
}
@media (max-width: 820px) {
  .band-split { grid-template-columns: 1fr; gap: 32px; }
  .band-split .band-media { order: -1; }
  .band-split .band-media img { width: 150px; }
}

/* Quote band (dark, single pull-quote) ------------------------------------------ */
.quote-band { background: var(--ink-deep); color: var(--white); padding: 80px 0; border-top: 3px solid var(--brass); }
.quote-band .quote-band-inner { display: grid; grid-template-columns: 120px 1fr; gap: 40px; align-items: center; max-width: 900px; }
.quote-band img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; filter: grayscale(1) contrast(1.05); }
.quote-band blockquote {
  margin: 0; font-family: var(--font-body); font-style: italic; font-weight: 400;
  font-size: 23px; line-height: 1.5; color: #F2F1EC;
}
.quote-band cite { display: block; margin-top: 18px; font-style: normal; font-size: 14px; color: var(--brass-light); font-weight: 600; letter-spacing: 0.3px; }
@media (max-width: 700px) {
  .quote-band .quote-band-inner { grid-template-columns: 1fr; gap: 24px; }
  .quote-band img { width: 84px; height: 84px; }
  .quote-band blockquote { font-size: 19px; }
}

/* Pricing ---------------------------------------------------------------- */
.price-row { display: flex; gap: 56px; flex-wrap: wrap; align-items: flex-start; }
.price-left, .price-right { flex: 1 1 320px; }
.price-num { font-family: var(--font-display); font-size: 38px; font-weight: 600; letter-spacing: -0.02em; }
.price-num span { font-size: 16px; color: var(--slate); font-family: var(--font-body); }
.price-list { list-style: none; padding: 0; margin: 20px 0 0; }
.price-list li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--slate); }
.price-list li strong { color: var(--ink); font-weight: 500; }

/* Tiers (HBDI) ---------------------------------------------------------------- */
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tier {
  border: 1px solid var(--line); background: var(--white); padding: 32px;
  border-radius: 4px; display: flex; flex-direction: column; box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.tier.featured { border-top: 3px solid var(--brass); }
.tier .tier-flag { font-size: 12px; font-weight: 600; color: var(--brass-dark); letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 10px; }
.tier h3 { font-size: 21px; }
.tier .tier-price { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 12px 0 4px; }
.tier ul { list-style: none; padding: 0; margin: 18px 0 24px; }
.tier li { font-size: 14.5px; color: var(--slate); padding: 9px 0 9px 20px; position: relative; border-top: 1px solid var(--line); }
.tier li::before { content: "\2013"; position: absolute; left: 0; color: var(--brass-dark); }
.tier .btn-primary { margin-top: auto; text-align: center; }
@media (max-width: 760px) { .tier-grid { grid-template-columns: 1fr; } }

/* Testimonials ---------------------------------------------------------------- */
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.quote-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .quote-grid.cols-3 { grid-template-columns: 1fr; } }
.quote-card { background: var(--paper); padding: 30px 28px; }
.quote-card blockquote { margin: 0; font-family: var(--font-body); font-size: 16px; font-style: italic; line-height: 1.55; color: var(--ink); }
.quote-card cite { display: block; margin-top: 16px; font-style: normal; font-size: 13.5px; color: var(--brass-dark); font-weight: 500; }
@media (max-width: 760px) { .quote-grid { grid-template-columns: 1fr; } }

/* Logo strip ---------------------------------------------------------------- */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; }
.logo-strip img { height: 30px; width: auto; opacity: 0.65; filter: grayscale(1); }
.logo-note { font-size: 12.5px; color: var(--slate); margin-top: 22px; }

/* Team ---------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.team-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; background: var(--line); filter: grayscale(1); }
.team-card h3 { font-size: 19px; margin: 18px 0 2px; }
.team-card .role { font-size: 13.5px; color: var(--brass-dark); font-weight: 500; }
.team-card p { font-size: 14.5px; color: var(--slate); margin-top: 12px; }
.team-card .contact { font-size: 13.5px; margin-top: 12px; color: var(--slate); }
.team-card .contact a { border-bottom: 1px solid var(--line); }
.team-card .contact a:hover { color: var(--ink); }
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; max-width: 420px; } }

/* Coaches (retreat) ------------------------------------------------------------ */
.coach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.coach img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; filter: grayscale(1); background: var(--line); }
.coach h3 { font-size: 19px; margin: 16px 0 4px; }
.coach p { font-size: 14.5px; color: var(--slate); margin-top: 10px; }
@media (max-width: 700px) { .coach-grid { grid-template-columns: 1fr; } }

/* Brands ---------------------------------------------------------------- */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.brand-card { border-top: 1px solid var(--line); padding-top: 22px; }
.brand-card img { height: 46px; width: auto; margin-bottom: 16px; }
.brand-card h3 { font-size: 18px; }
.brand-card .role { font-size: 13px; color: var(--brass-dark); font-weight: 500; margin: 4px 0 10px; }
.brand-card p { font-size: 14.5px; color: var(--slate); }
@media (max-width: 760px) { .brand-grid { grid-template-columns: 1fr; } }

/* Book layout ---------------------------------------------------------------- */
.book-hero { display: grid; grid-template-columns: 0.8fr 1fr; gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.book-hero img { border-radius: 0; box-shadow: none; }
@media (max-width: 820px) { .book-hero { grid-template-columns: 1fr; gap: 32px; } .book-hero .book-cover { max-width: 280px; } }

.value-list { list-style: none; padding: 0; margin: 0; }
.value-list li { padding: 18px 0; border-top: 1px solid var(--line); }
.value-list li:first-child { border-top: none; }
.value-list h3 { font-size: 17px; margin-bottom: 6px; }
.value-list p { font-size: 14.5px; color: var(--slate); }

.author-row { display: grid; grid-template-columns: 160px 1fr; gap: 32px; align-items: start; }
.author-row img { width: 160px; height: 190px; object-fit: cover; border-radius: 4px; filter: grayscale(1); }
@media (max-width: 640px) { .author-row { grid-template-columns: 1fr; } .author-row img { width: 140px; height: 168px; } }

/* Media embed ---------------------------------------------------------------- */
.embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 4px; overflow: hidden; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Fact list (retreat) -------------------------------------------------------- */
.fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fact { background: var(--paper); padding: 24px 22px; }
.fact dt { font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--brass-dark); font-weight: 600; }
.fact dd { margin: 8px 0 0; font-size: 15px; }
@media (max-width: 760px) { .fact-grid { grid-template-columns: 1fr 1fr; } }

/* CTA band ---------------------------------------------------------------- */
/* Final chapter: client proof and the closing question as ONE composition on
   the brand navy -- the question dominates, the logos sit beside it as quiet,
   monochrome evidence. The thread (same motif as the chapter breaks above)
   marks the hand-off from the people section, instead of a divider. */
.final-cta {
  position: relative; background: var(--ink); color: #FBF9F4; padding: 140px 0 128px;
}
.final-cta::before {
  content: ''; position: absolute; top: -46px; left: 50%; width: 1px; height: 92px;
  background: linear-gradient(to bottom, transparent, var(--brass-light) 45%, var(--brass-light) 55%, transparent);
  opacity: 0.55; pointer-events: none;
}
.final-cta-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); column-gap: 88px; align-items: end; }
.final-cta h2 { font-size: 54px; line-height: 1.06; letter-spacing: -0.025em; color: #FBF9F4; max-width: 700px; }
.final-cta-main > p { font-size: 18px; line-height: 1.65; color: rgba(251,249,244,0.78); margin-top: 28px; max-width: 520px; }
.final-cta .btn-row { margin-top: 40px; }
.final-cta .btn-secondary { color: rgba(251,249,244,0.82); border-bottom-color: rgba(251,249,244,0.38); }
.final-cta .btn-secondary:hover { color: var(--brass-light); border-bottom-color: var(--brass-light); }
.final-cta-proof .label {
  font-size: 12.5px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600;
  color: rgba(251,249,244,0.5); margin-bottom: 30px;
}
.final-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 34px 38px; }
/* Every mark is inverted to light and blended with "screen": dark artwork
   becomes quiet white-grey, and the opaque white grounds several of these
   files ship with turn black and disappear into the navy instead of boxing. */
.final-logos img {
  width: auto; max-width: 100%; opacity: 0.6; filter: grayscale(1) invert(1) contrast(1.15);
  mix-blend-mode: screen; transition: opacity .25s ease;
}
.final-logos img:hover { opacity: 0.95; }
.final-logos .logo--wide { height: 28px; }
.final-logos .logo--mid { height: 34px; }
.final-logos .logo--square { height: 42px; }
@media (max-width: 900px) {
  .final-cta { padding: 96px 0 88px; }
  .final-cta-grid { grid-template-columns: 1fr; row-gap: 72px; }
  .final-cta h2 { font-size: 40px; }
}
@media (max-width: 640px) {
  .final-cta { padding: 72px 0 72px; }
  .final-cta h2 { font-size: 32px; }
  .final-logos { gap: 28px 20px; }
}

.cta-band { padding: 80px 0; }
.cta-band h2 { font-size: 33px; max-width: 560px; }
.cta-band p { font-size: 17px; color: var(--slate); margin-top: 16px; max-width: 500px; }
@media (max-width: 640px) { .cta-band h2 { font-size: 26px; } }

/* Mid-page CTA (lighter, bordered) ------------------------------------------ */
.cta-mid { padding: 44px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #F6F6F4; }
.cta-mid .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.cta-mid h2 { font-size: 22px; max-width: 620px; }
.cta-mid .btn-row { margin-top: 0; }
@media (max-width: 640px) { .cta-mid h2 { font-size: 19px; } }

/* Contact form ---------------------------------------------------------------- */
.contact-form { max-width: 560px; display: grid; gap: 18px; margin-top: 28px; }
.contact-form label { font-size: 14px; font-weight: 500; display: block; margin-bottom: 6px; }
.contact-form input, .contact-form textarea {
  width: 100%; font: inherit; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 3px; background: var(--white); color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--brass); outline-offset: 0; border-color: var(--brass); }
.contact-form textarea { min-height: 130px; resize: vertical; }
.hp-field { position: absolute; left: -9999px; }

/* Footer ---------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0; font-size: 13.5px; color: var(--slate); margin-top: 0; }
.footer-brand { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.footer-brand img { height: 44px; width: auto; }
.footer-brand p { font-size: 13.5px; color: var(--slate); max-width: 340px; }
.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; align-items: flex-start; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a:hover { color: var(--ink); }
.footer-social { display: flex; gap: 16px; }

.footer-social a:hover { color: var(--blue); }

/* Secondary accent: prose links --------------------------------------------- */
.prose a:not(.btn-primary):not(.btn-secondary) {
  color: var(--blue); border-bottom: 1px solid rgba(47,111,168,0.35);
}
.prose a:not(.btn-primary):not(.btn-secondary):hover { color: var(--blue-dark); border-bottom-color: var(--blue-dark); }
.dark-band .prose a, .quote-band a { color: var(--brass-light); }

/* Card hover polish (extends the light-fill treatment site-wide) ------------- */
.compare-new { transition: transform .18s ease, box-shadow .18s ease; }
.compare-grid:hover .compare-new { box-shadow: var(--card-shadow); }
.topline-card, .faq-item, .who-card { transition: transform .18s ease; }
.grid-3:hover .topline-card:hover,
.grid-2:hover .faq-item:hover { transform: translateY(-2px); }
.quote-card { transition: background .18s ease; }
.quote-card:hover { background: var(--white); }
.team-card img, .coach img, .author-row img { transition: filter .25s ease, transform .25s ease; }
.team-card:hover img, .coach:hover img { filter: grayscale(0); }
.brand-card { transition: transform .18s ease; }
.brand-card:hover { transform: translateY(-2px); }
.brand-card img { transition: filter .25s ease, opacity .25s ease; filter: grayscale(1); opacity: 0.8; }
.brand-card:hover img { filter: grayscale(0); opacity: 1; }
.logo-strip img { transition: filter .25s ease, opacity .25s ease; }
.logo-strip:hover img { filter: grayscale(0); opacity: 0.95; }

/* Trusted-by strip on the homepage ---------------------------------------------- */
.trusted { padding: 40px 0 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trusted .label { font-size: 12.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--slate); font-weight: 600; margin-bottom: 22px; }

/* Homepage narrative sections ------------------------------------------------- */
.wide-head { max-width: 780px; }

.approach-body { max-width: 680px; }
.approach-body p { font-size: 17px; color: var(--ink); margin: 16px 0; line-height: 1.55; }
.approach-body p:first-child { margin-top: 0; }

/* Approach — the method in three steps */
.step { border-top: 2px solid var(--brass); padding-top: 14px; }
.step .n { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 1px; color: var(--brass-light); }
.step h3 { font-size: 18px; margin: 6px 0 0; color: #FBF9F4; }
.step p { font-size: 14.5px; color: rgba(251,249,244,0.65); line-height: 1.55; }

/* Callout card reused on retreat / long-form pages */
.case-hook {
  margin-top: 40px; padding: 24px 28px; background: var(--white);
  border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: 4px;
  box-shadow: var(--card-shadow);
}
.case-hook p { font-size: 16.5px; color: var(--ink); line-height: 1.5; margin: 0 0 12px; max-width: 640px; }

/* Homepage challenge sections: Organization / Team / Me ---------------------- */
.challenge-section { padding: 88px 0; }
.wrap--wide { max-width: var(--wrap-wide); }

/* Organization: a dark, high-authority chapter told in three visual moments.
   The background starts at the hero's own ink-deep tone and eases into the
   section's ink, so the hand-off from the hero reads as one continuous surface. */
.challenge-section--organization {
  position: relative;
  background: linear-gradient(to bottom, var(--ink-deep) 0%, var(--ink) 320px);
  color: #FBF9F4; padding: 112px 0 104px;
}
.challenge-section--organization::before {
  content: ''; position: absolute; top: -46px; left: 50%; width: 1px; height: 92px;
  background: linear-gradient(to bottom, transparent, var(--brass-light) 45%, var(--brass-light) 55%, transparent);
  opacity: 0.5; pointer-events: none;
}

.org-moment--challenge { max-width: 680px; }
.org-moment--challenge h2 { font-size: 34px; margin: 0 0 20px; letter-spacing: -0.02em; color: #FBF9F4; }
.org-moment--challenge p { font-size: 17px; color: rgba(251,249,244,0.78); line-height: 1.6; margin: 14px 0; max-width: 620px; }

.org-moment--model { margin-top: 88px; }
.org-model { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; }
.org-model-visual { flex: 1 1 60%; min-width: 320px; }
.org-model-visual svg { display: block; width: 100%; height: auto; }
.org-model-steps {
  position: relative; flex: 1 1 260px; min-width: 240px; align-self: stretch;
}
.org-model-steps .step { position: absolute; left: 0; right: 0; }
.org-model-steps .step--tier1 { top: 2%; }
.org-model-steps .step--tier2 { top: 27%; }
.org-model-steps .step--tier3 { top: 54%; }

.org-moment--proof { margin-top: 96px; }
/* One deliberate two-column composition: content / supporting note / CTA,
   with both columns sharing the same three rows so the CTAs sit on one line. */
.org-impact {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 72px; row-gap: 40px; align-items: start; margin-top: 24px;
}
.org-impact-figure { grid-column: 1; grid-row: 1; }
.org-impact-body { grid-column: 2; grid-row: 1; padding-top: 3px; }
.org-impact-cta { margin-top: 0; grid-row: 2; }
.org-impact-cta--strategy { grid-column: 1; }
.org-impact-cta--case { grid-column: 2; }
.org-impact-num { font-family: var(--font-display); font-weight: 700; font-size: 84px; letter-spacing: -0.03em; line-height: 1; color: #FBF9F4; white-space: nowrap; }
.org-impact-num span { color: #7FB0E0; padding: 0 6px; }
.org-impact-note { font-size: 14px; color: rgba(251,249,244,0.55); margin-top: 16px; max-width: 300px; }
.org-impact-body p { font-size: 17px; color: rgba(251,249,244,0.82); line-height: 1.6; margin: 0 0 14px; max-width: 560px; }
.org-impact-source { font-size: 14px; color: rgba(251,249,244,0.55); }

.btn-primary--on-dark { background: #FBF9F4; color: var(--ink); border-color: #FBF9F4; white-space: nowrap; }
.btn-primary--on-dark:hover { background: var(--white); box-shadow: 0 10px 22px -12px rgba(0,0,0,0.35); }

/* Team & Me/Leadership: two immersive chapters that continue straight on from
   Organization -- same wrap--wide left edge, same 92px gold connector thread
   marking the hand-off, same "photo bleeds to the outer edge, not a card"
   language. Each chapter then gets its own personality: Team stays on the
   light paper surface (collective, human); Leadership drops to a warm dark
   ground of its own (distinct from Organization's cool navy) for a more
   personal, cinematic register. */
.challenge-split { display: grid; grid-template-columns: 1fr 0.9fr; gap: 56px; align-items: stretch; }
.challenge-split-text { display: flex; flex-direction: column; justify-content: center; }
.challenge-split-text h2 { font-size: 34px; margin: 10px 0 20px; letter-spacing: -0.02em; }
.challenge-split-text p { font-size: 17px; color: var(--ink); line-height: 1.6; margin: 14px 0; max-width: 480px; }
.challenge-split-text .btn-row { margin-top: 26px; }
.challenge-split-media {
  min-height: 340px;
  margin-right: calc(-1 * (max(0px, (100vw - var(--wrap-wide)) / 2) + var(--pad)));
}
.challenge-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.challenge-split--reverse { grid-template-columns: 0.9fr 1fr; }
.challenge-split--reverse .challenge-split-media {
  margin-right: 0;
  margin-left: calc(-1 * (max(0px, (100vw - var(--wrap-wide)) / 2) + var(--pad)));
}

.challenge-secondary-link { margin-top: 18px; }
.challenge-secondary-link a { font-size: 14.5px; color: var(--slate); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.challenge-secondary-link a:hover { color: var(--brass-dark); border-color: var(--brass-dark); }

/* The connector thread, reused at the top of every immersive chapter after
   the hero (Organization already has its own copy of this rule). */
.challenge-section--team, .challenge-section--me { position: relative; }
.challenge-section--team::before, .challenge-section--me::before {
  content: ''; position: absolute; top: -46px; left: 50%; width: 1px; height: 92px;
  background: linear-gradient(to bottom, transparent, var(--brass-light) 45%, var(--brass-light) 55%, transparent);
  opacity: 0.55; pointer-events: none;
}

/* Team: collective, dynamic -- the photo takes the larger share of the row
   and bleeds on all three outer edges (right + top + bottom), so the section
   reads as built around the photograph rather than around a text block. */
.challenge-section--team { padding: 72px 0; }
.challenge-section--team .challenge-split { grid-template-columns: 1fr 1.3fr; min-height: max(600px, 78vh); }
.challenge-section--team .challenge-split-media { margin-top: -72px; margin-bottom: -72px; }
.challenge-section--team .eyebrow { font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; }
.challenge-section--team .challenge-split-text h2 { font-size: 46px; line-height: 1.08; margin: 16px 0 24px; max-width: 460px; }
.challenge-section--team .challenge-split-text p { font-size: 17.5px; line-height: 1.68; }

/* Leadership ("Me"): personal, expansive -- a warm dark ground of its own,
   the photo takes almost two-thirds of the row and bleeds vertically past
   the section's own padding for real scale, and the crop stays biased
   toward the top so the raised arm and open sky are never at risk. */
.challenge-section--me {
  background: #1B140F; color: #FBF9F4; padding: 80px 0;
}
.challenge-section--me .challenge-split { grid-template-columns: 1.5fr 1fr; min-height: max(600px, 80vh); }
.challenge-section--me .challenge-split--reverse .challenge-split-media {
  margin-top: -80px; margin-bottom: -80px;
}
.challenge-section--me .challenge-split-media img { object-position: 50% 18%; }
.challenge-section--me .eyebrow { color: var(--brass-light); font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; }
.challenge-section--me .challenge-split-text h2 { font-size: 46px; line-height: 1.08; margin: 16px 0 24px; color: #FBF9F4; max-width: 480px; }
.challenge-section--me .challenge-split-text p { font-size: 18px; line-height: 1.68; color: rgba(251,249,244,0.82); max-width: 460px; }
.challenge-section--me .challenge-secondary-link a { color: rgba(251,249,244,0.65); border-bottom-color: rgba(251,249,244,0.32); }
.challenge-section--me .challenge-secondary-link a:hover { color: var(--brass-light); border-bottom-color: var(--brass-light); }

@media (max-width: 900px) {
  .challenge-split, .challenge-split--reverse { grid-template-columns: 1fr; gap: 32px; }
  .challenge-split-media {
    order: -1; min-height: 0; aspect-ratio: 16 / 9;
    margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad));
  }
  .challenge-section--team .challenge-split,
  .challenge-section--me .challenge-split { grid-template-columns: 1fr; min-height: 0; }
  .challenge-section--team .challenge-split-media { margin-top: 0; margin-bottom: 0; }
  .challenge-section--team .challenge-split-text h2,
  .challenge-section--me .challenge-split-text h2 { font-size: 36px; }
  .challenge-section--me .challenge-split--reverse .challenge-split-media {
    margin-top: 0; margin-bottom: 0; aspect-ratio: 3 / 4;
  }
  .org-impact { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 22px; }
  .org-impact-figure, .org-impact-body, .org-impact-cta--strategy, .org-impact-cta--case { grid-column: 1; grid-row: auto; }
  .org-impact-figure { order: 1; }
  .org-impact-cta--strategy { order: 2; }
  .org-impact-body { order: 3; padding-top: 14px; }
  .org-impact-cta--case { order: 4; }
  .org-model-steps { position: static; display: flex; flex-direction: column; gap: 20px; align-self: auto; }
  .org-model-steps .step { position: static; }
}
@media (max-width: 640px) {
  .challenge-section { padding: 56px 0; }
  .challenge-section--organization { padding: 64px 0 72px; }
  .challenge-section--me { padding: 64px 0; }
  .org-moment--challenge h2, .challenge-split-text h2 { font-size: 27px; }
  .challenge-section--me .challenge-split-text h2 { font-size: 27px; }
  .org-moment--model { margin-top: 56px; }
  .org-moment--proof { margin-top: 64px; }
  .org-model { gap: 36px; }
  .org-impact-num { font-size: 52px; }
  .org-impact-note { max-width: none; }
}

/* Ways to work together */
.offer-icon { width: 42px; height: 42px; color: var(--brass-dark); margin-bottom: 14px; }
.offer-icon svg { width: 100%; height: 100%; display: block; }
.offer-feature {
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--brass);
  border-radius: 4px; box-shadow: var(--card-shadow); padding: 36px 40px 34px; margin-bottom: 24px;
}
.offer-feature .offer-icon { width: 46px; height: 46px; }
.offer-feature h3 { font-size: 24px; }
.offer-feature p { font-size: 16.5px; color: var(--slate); margin: 12px 0 22px; max-width: 640px; line-height: 1.55; }
.offer-secondary { margin-top: 4px; }
.offer-secondary .topline-card { border-top-width: 2px; border-top-color: var(--brass); }
@media (max-width: 640px) { .offer-feature { padding: 28px 24px; } }

/* Retreat imagery ------------------------------------------------------------- */
.retreat-hero-img {
  margin-top: 32px; border-radius: 6px; overflow: hidden; position: relative;
  box-shadow: var(--card-shadow);
}
.retreat-hero-img img { width: 100%; height: clamp(220px, 34vw, 380px); object-fit: cover; display: block; }
.retreat-hero-img figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px;
  background: linear-gradient(to top, rgba(13,22,38,0.72), rgba(13,22,38,0));
  color: #fff; font-size: 13px; letter-spacing: 0.3px;
}
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.photo-strip.cols-2 { grid-template-columns: 1fr 1fr; gap: 20px; }
.photo-strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; box-shadow: var(--card-shadow); }
.photo-strip.tall img { aspect-ratio: 3 / 4; }
@media (max-width: 720px) { .photo-strip { grid-template-columns: 1fr 1fr; } .photo-strip.cols-2 { grid-template-columns: 1fr; } }
@media (max-width: 440px) { .photo-strip.tall { grid-template-columns: 1fr 1fr; } }

/* Image placeholder — marks where real photography still needs to be sourced */
.img-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 16 / 9; padding: 20px;
  background: var(--paper); border: 1px dashed var(--line); border-radius: 4px;
  color: var(--slate); font-size: 13px; line-height: 1.5;
}
.img-placeholder.wide { aspect-ratio: 16 / 7; margin-top: 32px; }
.img-placeholder span { max-width: 260px; }
.img-placeholder span::before { content: "⬚"; display: block; font-size: 22px; color: var(--line); margin-bottom: 6px; }
.photo-strip .img-placeholder { aspect-ratio: 3 / 2; }

/* Retreats index — one card per retreat */
.retreat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.retreat-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  box-shadow: var(--card-shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.retreat-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.retreat-card > img,
.retreat-card > .img-placeholder { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border: 0; border-radius: 0; }
.retreat-card .rc-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.retreat-card .rc-facts { font-size: 12.5px; letter-spacing: 0.3px; color: var(--brass-dark); font-weight: 600; }
.retreat-card h3 { font-size: 20px; margin: 8px 0 10px; }
.retreat-card p { font-size: 14.5px; color: var(--slate); line-height: 1.55; }
.retreat-card .btn-row { margin-top: auto; padding-top: 18px; }
@media (max-width: 760px) { .retreat-grid { grid-template-columns: 1fr; } }

/* "working title" tag next to a heading */
.wip-badge {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--brass-dark);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
}

/* Scroll-reveal --------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Utility ---------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ==========================================================================
   Strategy as a Service — WHY → WHAT → HOW layout (v2)
   Also used by /strategy-as-a-service/how-it-works/ and /pricing/.
   ========================================================================== */

.btn-primary--brass { background: var(--brass-light); border-color: var(--brass-light); color: var(--ink-deep); font-weight: 600; }
.btn-primary--brass:hover { background: #EAD9A8; border-color: #EAD9A8; box-shadow: 0 12px 26px -12px rgba(217,196,138,0.55); }
.btn-primary--block { display: block; text-align: center; width: 100%; }

/* Hero: the WHY as the headline, the booking card visible before any scroll */
.sas-hero--v2 { min-height: 0; padding: 0; }
.sas-hero--v2 .sas-hero-bg::after {
  background:
    linear-gradient(95deg, rgba(13,22,38,0.94) 0%, rgba(13,22,38,0.8) 38%, rgba(13,22,38,0.45) 70%, rgba(13,22,38,0.35) 100%),
    linear-gradient(to top, var(--ink-deep) 0%, transparent 140px);
}
.sas-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: end;
  min-height: min(calc(100vh - 81px), 820px); padding-top: 120px; padding-bottom: 72px;
}
/* Headline set in the mab logo's typeface style: a heavy, tightly spaced
   Helvetica-style grotesque. Inter Tight 800 is the closest free web match;
   Helvetica Neue is the fallback on Macs. */
.sas-hero--v2 h1 {
  font-family: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800; font-style: normal; font-size: 60px; line-height: 1.04;
  letter-spacing: -0.022em; word-spacing: 0.04em; max-width: 720px;
  text-shadow: 0 4px 24px rgba(5,10,20,0.6);
}
.sas-hero--v2 h1 em { font-style: normal; color: var(--brass-light); }
.sas-hero--v2 .lead { margin-top: 26px; font-size: 19px; line-height: 1.55; max-width: 560px; }
.sas-hero-scroll {
  display: inline-flex; gap: 8px; margin-top: 34px; font-size: 15px; font-weight: 500;
  color: rgba(251,249,244,0.75); border-bottom: 1px solid rgba(251,249,244,0.3); padding-bottom: 3px;
}
.sas-hero-scroll:hover { color: var(--brass-light); border-color: var(--brass-light); }
.sas-hero-scroll span { transition: transform .2s ease; }
.sas-hero-scroll:hover span { transform: translateY(3px); }

.sas-book-card {
  background: rgba(11,17,29,0.7); border: 1px solid rgba(251,249,244,0.14); border-radius: 8px;
  padding: 26px 26px 22px; color: #FBF9F4;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.sas-book-person { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sas-book-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(217,196,138,0.6); }
.sas-book-kicker { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brass-light); font-weight: 600; }
.sas-book-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.sas-book-card p { font-size: 15px; line-height: 1.55; color: rgba(251,249,244,0.78); margin-bottom: 20px; }
.sas-book-link { display: block; text-align: center; margin-top: 14px; font-size: 13.5px; color: rgba(251,249,244,0.62); }
.sas-book-link:hover { color: var(--brass-light); }

/* Local nav (sticky) */
.sas-localnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line); transition: box-shadow .2s ease;
}
.sas-localnav.is-stuck { box-shadow: 0 8px 24px -18px rgba(21,34,56,0.45); }
.sas-localnav-inner { display: flex; align-items: center; gap: 28px; height: 56px; }
.sas-localnav-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); white-space: nowrap; }
.sas-localnav-links { display: flex; gap: 24px; margin-left: auto; font-size: 14px; }
.sas-localnav-links a { color: var(--slate); padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.sas-localnav-links a:hover, .sas-localnav-links a[aria-current] { color: var(--ink); border-bottom-color: var(--brass); }
.sas-localnav-cta {
  font-size: 13.5px; font-weight: 600; white-space: nowrap; padding: 8px 16px; border-radius: 999px;
  background: var(--ink); color: #FBF9F4; transition: background .15s ease, transform .15s ease;
}
.sas-localnav-cta:hover { background: var(--brass-dark); transform: translateY(-1px); }

#why, #compare, #what, #how, #results, #book { scroll-margin-top: 56px; }

/* WHY — continues the hero's dark surface */
.sas-why { background: linear-gradient(to bottom, var(--ink-deep), var(--ink) 480px); color: #FBF9F4; padding: 112px 0 104px; }
.sas-why-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.sas-why-num {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(120px, 15vw, 210px);
  line-height: 0.9; letter-spacing: -0.05em; color: var(--brass-light);
}
.sas-why-fig-label { font-size: 22px; line-height: 1.35; color: #FBF9F4; max-width: 380px; margin-top: 18px; font-weight: 500; }
.sas-why .eyebrow { color: var(--brass-light); }
.sas-why h2 { font-size: 38px; color: #FBF9F4; letter-spacing: -0.02em; max-width: 520px; }
.sas-why-body p { font-size: 17.5px; line-height: 1.65; color: rgba(251,249,244,0.78); margin-top: 18px; max-width: 540px; }

.sas-energy { margin: 96px 0 0; }
.sas-energy svg { display: block; width: 100%; height: auto; }
.sas-energy figcaption { font-size: 13px; color: rgba(251,249,244,0.5); margin-top: 10px; }
.sas-energy-new { stroke-dasharray: 1400; stroke-dashoffset: 0; }
.sas-energy.reveal .sas-energy-new { stroke-dashoffset: 1400; transition: stroke-dashoffset 1.8s cubic-bezier(.3,.6,.2,1) .3s; }
.sas-energy.reveal.is-visible .sas-energy-new { stroke-dashoffset: 0; }

/* HOW */

.sas-track { position: relative; display: grid; grid-template-columns: 1fr 4fr; gap: 4px; margin-top: 56px; padding-bottom: 30px; }
.sas-track-seg { height: 44px; display: flex; align-items: center; padding: 0 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; }
.sas-track-seg--create { background: var(--brass-light); color: var(--ink-deep); border-radius: 6px 0 0 6px; }
.sas-track-seg--deliver { background: var(--ink); color: #FBF9F4; border-radius: 0 6px 6px 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(100%/12 - 1px), rgba(251,249,244,0.12) calc(100%/12 - 1px) calc(100%/12)); }
.sas-track-ticks { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 4fr; font-size: 12.5px; color: var(--slate); }
.sas-track-ticks span:nth-child(1) { grid-column: 1; }
.sas-track-ticks span:nth-child(2) { grid-column: 2; }
.sas-track-ticks span:nth-child(3) { position: absolute; right: 0; }
.sas-track--light { margin-top: 40px; max-width: 760px; }


/* RESULTS — numbers that pop */
.sas-results { background: var(--ink-deep); color: #FBF9F4; padding: 112px 0 96px; }
.sas-results .eyebrow { color: var(--brass-light); }
.sas-results-title { font-size: 42px; color: #FBF9F4; letter-spacing: -0.025em; }
.big-results { margin-top: 48px; }
.big-result {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 56px; align-items: center;
  padding: 44px 0; border-top: 1px solid rgba(251,249,244,0.12);
}
.big-num {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 9.5vw, 136px);
  line-height: 0.95; letter-spacing: -0.045em; white-space: nowrap; display: flex; align-items: baseline; gap: 0.18em;
}
.big-num span:first-child:not(:last-child) { color: rgba(251,249,244,0.38); font-size: 0.58em; }
.big-num span:last-child { color: #FBF9F4; }
.big-num i { font-style: normal; color: var(--brass-light); font-size: 0.5em; font-weight: 400; }
.big-result p { font-size: 16.5px; line-height: 1.6; color: rgba(251,249,244,0.72); }
.big-result p strong { color: var(--brass-light); font-weight: 600; display: block; margin-bottom: 4px; }
.sas-results-note { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(251,249,244,0.12); font-size: 14.5px; color: rgba(251,249,244,0.55); max-width: 720px; }
.sas-results-note strong { color: #FBF9F4; font-weight: 600; }

/* FINAL — closing booking moment */
.sas-final { padding: 120px 0; background: #F6F4EE; }
.sas-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: end; }
.sas-final h2 { font-size: 50px; line-height: 1.06; letter-spacing: -0.03em; max-width: 720px; }
.sas-final p { font-size: 18px; color: var(--slate); margin-top: 22px; max-width: 520px; }
.sas-final-alt { display: flex; flex-direction: column; gap: 6px; font-size: 15px; border-left: 2px solid var(--brass); padding-left: 20px; }
.sas-final-alt-label { font-size: 12.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--slate); font-weight: 600; margin-bottom: 4px; }
.sas-final-alt a { color: var(--ink); }
.sas-final-alt a:hover { color: var(--brass-dark); }

/* Deep-dive page */
.dive-back { display: inline-block; font-size: 14px; color: var(--slate); margin-bottom: 26px; }
.dive-back:hover { color: var(--brass-dark); }
.dive-hero h1 { font-size: 44px; max-width: 820px; }
.dive-phase { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; }
.dive-phase-label { position: sticky; top: 24px; align-self: start; }
.dive-phase-n { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--brass-dark); }
.dive-phase-when { font-size: 14px; color: var(--slate); margin-top: 6px; }
.dive-phase .prose { max-width: 760px; }

/* Pricing & booking page */
.book-page-hero { padding-bottom: 72px; }
.book-page-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.book-page-intro h1 { font-size: 44px; }
.next-steps { list-style: none; counter-reset: step; padding: 0; margin: 36px 0 0; }
.next-steps li { counter-increment: step; position: relative; padding: 0 0 22px 52px; font-size: 15.5px; color: var(--slate); line-height: 1.55; }
.next-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: #FBF9F4; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.next-steps li strong { color: var(--ink); display: block; }
.book-page-person { display: flex; gap: 16px; align-items: center; margin-top: 14px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--slate); }
.book-page-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.book-page-person a { color: var(--blue); }
.book-embed { background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--card-shadow); overflow: hidden; }
.book-embed-fallback { font-size: 13.5px; color: var(--slate); padding: 12px 18px; border-top: 1px solid var(--line); }
.book-embed-fallback a { color: var(--blue); }
.pricing-band { background: #F6F4EE; padding: 104px 0; }
.pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; align-items: center; }
.pricing-grid h2 { font-size: 38px; letter-spacing: -0.025em; line-height: 1.1; max-width: 560px; }
.pricing-grid p { font-size: 16.5px; color: var(--slate); line-height: 1.65; margin-top: 18px; max-width: 560px; }
.price-card { background: var(--white); border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--card-shadow); padding: 34px 32px 30px; border-top: 4px solid var(--brass); }
.price-card-from { font-size: 13px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--brass-dark); font-weight: 600; }
.price-card-num { font-family: var(--font-display); font-size: 54px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; }
.price-card-num span { font-family: var(--font-body); font-size: 17px; font-weight: 400; color: var(--slate); letter-spacing: 0; margin-left: 6px; }
.price-card ul { list-style: none; padding: 0; margin: 22px 0 26px; }
.price-card li { font-size: 15px; color: var(--slate); padding: 10px 0 10px 24px; border-top: 1px solid var(--line); position: relative; }
.price-card li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 10px; height: 6px; border-left: 1.6px solid var(--brass-dark); border-bottom: 1.6px solid var(--brass-dark); transform: rotate(-45deg); }
.price-card li strong { color: var(--ink); font-weight: 600; }

/* Responsive */
@media (max-width: 1000px) {
  .sas-hero-grid { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding-top: 72px; padding-bottom: 56px; }
  .sas-book-card { max-width: 440px; }
  .sas-why-grid { grid-template-columns: 1fr; gap: 40px; }
  .big-result { grid-template-columns: 1fr; gap: 18px; padding: 36px 0; }
  .big-result p { max-width: 560px; }
  .sas-final-grid, .book-page-grid, .pricing-grid { grid-template-columns: 1fr; gap: 44px; }
  .price-card { max-width: 440px; }
}
@media (max-width: 760px) {
  .sas-localnav-title { display: none; }
  .sas-localnav-inner { gap: 16px; }
  .sas-localnav-links { margin-left: 0; overflow-x: auto; gap: 18px; scrollbar-width: none; flex: 1; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .sas-localnav-links::-webkit-scrollbar { display: none; }
  .dive-phase { grid-template-columns: 1fr; gap: 14px; }
  .dive-phase-label { position: static; }
}
@media (max-width: 640px) {
  .sas-hero--v2 h1 { font-size: 38px; }
  .sas-hero--v2 .lead { font-size: 17px; }
  .sas-hero-grid { padding-top: 48px; padding-bottom: 44px; }
  .sas-why, .sas-how2, .sas-what2, .sas-cmp, .sas-results, .sas-final, .pricing-band { padding: 72px 0; }
  .sas-why h2 { font-size: 30px; }
  .sas-why-fig-label { font-size: 19px; }
  .sas-energy { margin-top: 56px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sas-energy svg { min-width: 620px; }
  .big-num { font-size: clamp(48px, 13vw, 72px); }
  .sas-final h2 { font-size: 34px; }
  .dive-hero h1, .book-page-intro h1 { font-size: 32px; }
  .pricing-grid h2 { font-size: 30px; }
  .price-card-num { font-size: 44px; }
  .sas-track-seg { font-size: 11px; padding: 0 10px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .sas-localnav-cta { transition: none; }
}

/* ==========================================================================
   SaaS v3: HOW (phase bars) → WHAT (one mission) → COMPARE (row by row)
   ========================================================================== */

/* HOW — continues the dark WHY surface so the two read as one story */
.sas-how2 { background: var(--ink); color: #FBF9F4; padding: 24px 0 112px; }
.sas-how2 > .wrap { border-top: 1px solid rgba(251,249,244,0.1); padding-top: 72px; }
.sas-how2 .eyebrow { color: var(--brass-light); }
.sas-how2-head h2 { font-size: 46px; line-height: 1.06; letter-spacing: -0.03em; color: #FBF9F4; }
.sas-how2-head p { font-size: 19px; line-height: 1.55; color: rgba(251,249,244,0.75); margin-top: 16px; max-width: 620px; }

.phasebar { margin-top: 52px; }
.phasebar-track, .phasebar-ticks, .phasebar-summaries { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); gap: 8px; }
.phasebar-seg {
  position: relative; overflow: hidden; height: 104px; border: 0; border-radius: 12px; padding: 0 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left;
  font: inherit; cursor: pointer; background: rgba(251,249,244,0.06);
  transition: transform .2s ease, box-shadow .25s ease;
}
.phasebar-fill { position: absolute; inset: 0; transform-origin: left center; }
.phasebar-seg--create { color: var(--ink-deep); }
.phasebar-seg--create .phasebar-fill { background: linear-gradient(100deg, #C9A85E 0%, #E8D6A2 100%); }
.phasebar-seg--deliver { color: #FBF9F4; }
.phasebar-seg--deliver .phasebar-fill { background: linear-gradient(100deg, #1F4D78 0%, #2F6FA8 45%, #5D9FD9 100%); }
/* one faint tick per week across the delivery bar — "every week, to the finish" */
.phasebar-weeks {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(251,249,244,0.13) 22px 23px);
}
/* a slow highlight that sweeps the bars, so they read as alive */
.phasebar-seg::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.phasebar-label { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.phasebar-n { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; opacity: 0.72; }
.phasebar-name { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.phasebar-plus {
  position: relative; z-index: 1; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0.8; transition: transform .25s ease, background .2s ease;
}
.phasebar-plus::before, .phasebar-plus::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; background: currentColor;
}
.phasebar-plus::after { transform: rotate(90deg); }
.phasebar-seg:hover { transform: translateY(-3px); }
.phasebar-seg--create:hover, .phasebar-seg--create[aria-expanded="true"] { box-shadow: 0 18px 40px -16px rgba(217,196,138,0.55); }
.phasebar-seg--deliver:hover, .phasebar-seg--deliver[aria-expanded="true"] { box-shadow: 0 18px 40px -16px rgba(93,159,217,0.55); }
.phasebar-seg[aria-expanded="true"] .phasebar-plus { transform: rotate(45deg); }
.phasebar-seg:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 3px; }

.phasebar-ticks { margin-top: 12px; font-size: 13px; color: rgba(251,249,244,0.5); position: relative; }
.phasebar-ticks span:nth-child(2) { grid-column: 2; }
.phasebar-ticks span:nth-child(3) { position: absolute; right: 0; }
.phasebar-summaries { margin-top: 22px; }
.phasebar-summaries p { font-size: 16.5px; line-height: 1.55; color: rgba(251,249,244,0.75); max-width: 520px; padding-right: 12px; }
.phasebar-summaries strong { display: block; color: #FBF9F4; font-weight: 600; font-size: 17px; margin-bottom: 2px; }

.phasebar-panel { margin-top: 28px; }
.phasebar-panel[hidden] { display: none; }
.phasebar-panel-inner {
  border-radius: 12px; padding: 30px 34px; background: rgba(251,249,244,0.05);
  border: 1px solid rgba(251,249,244,0.12); border-left: 3px solid var(--brass-light);
  animation: phasePanelIn .35s ease both;
}
#phase-2 .phasebar-panel-inner { border-left-color: #5D9FD9; }
.phasebar-panel ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.phasebar-panel li { font-size: 15.5px; line-height: 1.55; color: rgba(251,249,244,0.75); padding-left: 18px; position: relative; }
.phasebar-panel li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--brass-light); }
#phase-2 .phasebar-panel li::before { background: #5D9FD9; }
.phasebar-panel li strong { color: #FBF9F4; font-weight: 600; }
.phasebar-outcome { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(251,249,244,0.1); font-size: 16px; color: #FBF9F4; }
.phasebar-outcome span { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brass-light); margin-right: 10px; }
@keyframes phasePanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.phasebar-hint { margin-top: 26px; font-size: 14px; color: rgba(251,249,244,0.5); }
.phasebar-hint a { color: var(--brass-light); border-bottom: 1px solid rgba(217,196,138,0.4); }
.phasebar-hint a:hover { color: #EAD9A8; border-color: #EAD9A8; }

/* Bar entrance (only when JS has armed it): Phase 1 fills, then Phase 2 runs on from it */
.phasebar.is-armed .phasebar-fill { transform: scaleX(0); }
.phasebar.is-armed .phasebar-label, .phasebar.is-armed .phasebar-plus, .phasebar.is-armed .phasebar-weeks { opacity: 0; }
.phasebar.is-in .phasebar-fill { transform: scaleX(1); transition: transform .8s cubic-bezier(.6,.05,.3,1); }
.phasebar.is-in .phasebar-seg--deliver .phasebar-fill { transition-duration: 1.5s; transition-delay: .75s; }
.phasebar.is-in .phasebar-label, .phasebar.is-in .phasebar-plus, .phasebar.is-in .phasebar-weeks { opacity: 1; transition: opacity .5s ease; }
.phasebar.is-in .phasebar-seg--create .phasebar-label, .phasebar.is-in .phasebar-seg--create .phasebar-plus { transition-delay: .55s; }
.phasebar.is-in .phasebar-seg--deliver .phasebar-label, .phasebar.is-in .phasebar-seg--deliver .phasebar-plus,
.phasebar.is-in .phasebar-weeks { transition-delay: 1.7s; }
.phasebar.is-in .phasebar-plus { opacity: 0.8; }
.phasebar.is-in .phasebar-seg::after { animation: phaseSheen 7s ease-in-out 2.6s infinite; }
.phasebar.is-in .phasebar-seg--deliver::after { animation-delay: 3s; }
@keyframes phaseSheen { 0% { left: -40%; opacity: 0; } 6% { opacity: 1; } 22% { left: 120%; opacity: 0; } 100% { left: 120%; opacity: 0; } }

/* WHAT — one message, three numbers, the rest behind "more" */
.sas-what2 { padding: 120px 0 104px; }
.sas-what2-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 88px; align-items: center; }
.sas-what2-copy h2 { font-size: 54px; line-height: 1.02; letter-spacing: -0.035em; }
.sas-what2-copy > p { font-size: 19px; line-height: 1.55; color: var(--slate); margin-top: 20px; max-width: 480px; }
.mission-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.mission-chips-label { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brass-dark); margin-bottom: 2px; }
.mission-chip { font-size: 15px; font-weight: 500; color: var(--ink); background: #F6F4EE; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; }
.sas-what2-facts { margin: 0; }
.sas-what2-facts > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: baseline; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.sas-what2-facts > div:first-child { border-top: 2px solid var(--ink); }
.sas-what2-facts dt { font-family: var(--font-display); font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; color: var(--ink); white-space: nowrap; }
.sas-what2-facts > div:first-child dt { color: var(--brass-dark); }
.sas-what2-facts dd { margin: 0; font-size: 17px; line-height: 1.45; color: var(--slate); }

.sas-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; }
.sas-more-item { border-top: 1px solid var(--line); }
.sas-more-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink);
}
.sas-more-item summary::-webkit-details-marker { display: none; }
.sas-more-item summary::after {
  content: '+'; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 18px; color: var(--slate);
  transition: transform .2s ease, border-color .2s ease;
}
.sas-more-item summary:hover { color: var(--brass-dark); }
.sas-more-item summary:hover::after { border-color: var(--brass); }
.sas-more-item[open] summary::after { transform: rotate(45deg); }
.sas-more-item[open] > :not(summary) { animation: phasePanelIn .3s ease both; }
.sas-more-item p, .sas-more-item li { font-size: 15px; line-height: 1.6; color: var(--slate); }
.sas-more-item ul { list-style: none; padding: 0 0 18px; margin: 0; }
.sas-more-item li { padding: 5px 0 5px 16px; position: relative; }
.sas-more-item li::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.sas-more-item p { padding-bottom: 18px; }

/* COMPARE — core message first, then the rows build as you scroll */
.sas-cmp { background: #F6F4EE; padding: 120px 0 112px; }
.sas-cmp-head h2 { font-size: 46px; line-height: 1.1; letter-spacing: -0.03em; color: #9AA0AA; max-width: 900px; }
.sas-cmp-head h2 span { color: var(--ink); }
.cmp-rows { margin-top: 56px; }
.cmp-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: baseline; padding: 26px 0; border-top: 1px solid #DCD8CD; }
.cmp-row--head { border-top: 0; padding: 0 0 14px; }
.cmp-row--head span { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.cmp-row--head .cmp-old { color: #9AA0AA; }
.cmp-row--head .cmp-new { color: var(--brass-dark); }
.cmp-dim { font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--slate); }
.cmp-row:not(.cmp-row--head) .cmp-old { font-size: 24px; color: #9AA0AA; letter-spacing: -0.01em; }
.cmp-row:not(.cmp-row--head) .cmp-new { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; position: relative; padding-left: 36px; }
.cmp-row:not(.cmp-row--head) .cmp-new::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23D9C48A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
/* Animated version (JS adds .cmp-anim): the old way gets struck, then the new way lands */
.cmp-anim .cmp-old s { text-decoration: none; position: relative; }
.cmp-anim .cmp-old s::after {
  content: ''; position: absolute; left: -2px; right: -2px; top: 55%; height: 2px; background: #B4492F;
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.6,.05,.3,1) .25s;
}
.cmp-anim .cmp-row:not(.cmp-row--head) { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.cmp-anim .cmp-row:not(.cmp-row--head) .cmp-new { opacity: 0; transform: translateX(-10px); transition: opacity .45s ease .75s, transform .45s ease .75s; }
.cmp-anim .cmp-row.is-in { opacity: 1; transform: none; }
.cmp-anim .cmp-row.is-in .cmp-old s::after { transform: scaleX(1); }
.cmp-anim .cmp-row.is-in .cmp-new { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .sas-what2-grid { grid-template-columns: 1fr; gap: 48px; }
  .sas-more { grid-template-columns: 1fr; gap: 0; }
  .cmp-row { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr); }
  .cmp-row:not(.cmp-row--head) .cmp-old { font-size: 20px; }
  .cmp-row:not(.cmp-row--head) .cmp-new { font-size: 22px; }
}
@media (max-width: 640px) {
  .sas-how2 > .wrap { padding-top: 56px; }
  .sas-how2-head h2, .sas-cmp-head h2 { font-size: 32px; }
  .phasebar-track, .phasebar-ticks { grid-template-columns: 1fr 1fr; }
  .phasebar-summaries { grid-template-columns: 1fr; gap: 16px; }
  .phasebar-seg { height: 88px; padding: 0 16px; }
  .phasebar-name { font-size: 22px; }
  .phasebar-plus { width: 28px; height: 28px; }
  .phasebar-panel-inner { padding: 22px 20px; }
  .phasebar-panel ul { grid-template-columns: 1fr; gap: 12px; }
  .sas-what2-copy h2 { font-size: 38px; }
  .sas-what2-facts > div { grid-template-columns: 130px minmax(0, 1fr); }
  .sas-what2-facts dt { font-size: 44px; }
  .cmp-row--head { display: none; }
  .cmp-row { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .cmp-row:not(.cmp-row--head) .cmp-old { font-size: 18px; }
  .cmp-row:not(.cmp-row--head) .cmp-new { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .phasebar-seg, .phasebar-plus { transition: none; }
  .phasebar-seg:hover { transform: none; }
  .phasebar-seg::after { display: none; }
  .phasebar-panel-inner, .sas-more-item[open] > :not(summary) { animation: none; }
}

/* ==========================================================================
   SaaS v3 background rhythm — the light sections alternate:
   navy (Why + How) → white (What) → warm paper (Compare) → navy (Results) → white (Book).
   The gold connector thread from the homepage marks each hand-off.
   ========================================================================== */
.sas-what2 { background: var(--white); position: relative; }
.sas-results { background: var(--ink); position: relative; }
.sas-final { background: var(--white); position: relative; }
.sas-cmp { position: relative; }
.sas-what2::before, .sas-cmp::before, .sas-results::before, .sas-final::before {
  content: ''; position: absolute; top: -46px; left: 50%; width: 1px; height: 92px; z-index: 2;
  background: linear-gradient(to bottom, transparent, var(--brass) 45%, var(--brass) 55%, transparent);
  opacity: 0.7; pointer-events: none;
}
.sas-results::before { background: linear-gradient(to bottom, transparent, var(--brass-light) 45%, var(--brass-light) 55%, transparent); }

/* ==========================================================================
   Podcast — The Pitch and The Catch
   ========================================================================== */
.pod-hero { background: #F6F4EE; padding: 88px 0 96px; overflow: hidden; }
.pod-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: center; }
.pod-soon {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--ink); color: var(--brass-light); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.pod-soon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brass-light); box-shadow: 0 0 0 0 rgba(217,196,138,0.7); animation: podPulse 1.8s ease-out infinite; }
@keyframes podPulse { 0% { box-shadow: 0 0 0 0 rgba(217,196,138,0.7); } 100% { box-shadow: 0 0 0 10px rgba(217,196,138,0); } }
.pod-hero h1 { font-size: 56px; line-height: 1.04; letter-spacing: -0.035em; margin-top: 26px; max-width: 620px; }
.pod-hero .lead { font-size: 18.5px; line-height: 1.6; color: var(--slate); margin-top: 22px; max-width: 560px; }
.pod-hero .lead em { color: var(--ink); font-style: normal; font-weight: 600; }
.pod-hero-follow { margin-top: 30px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pod-platforms--main { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.pod-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px 11px 14px; border-radius: 12px;
  background: var(--white); border: 1px solid #DCD8CD; color: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.1;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pod-btn svg { width: 28px; height: 28px; flex: none; --icon-cut: #fff; }
.pod-btn span { display: flex; flex-direction: column; }
.pod-btn small { font-size: 11px; font-weight: 500; color: var(--slate); letter-spacing: 0.3px; margin-bottom: 2px; }
.pod-btn:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 10px 24px -14px rgba(21,34,56,0.35); }
.pod-btn--apple svg { color: #A143D8; }
.pod-btn--spotify svg { color: #1DB954; }
.pod-btn--youtube svg { color: #FF0033; }
.pod-platforms--more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 20px; font-size: 14px; }
.pod-platforms--more > span { color: var(--slate); font-weight: 500; }
.pod-platforms--more a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); border-bottom: 1px solid transparent; }
.pod-platforms--more a:hover { border-bottom-color: var(--brass); color: var(--brass-dark); }
.pod-platforms--more svg { width: 16px; height: 16px; color: var(--slate); --icon-cut: #F6F4EE; }
.pod-hero-art { display: flex; justify-content: center; }
.pod-hero-art img { width: 100%; max-width: 540px; height: auto; animation: podFloat 6s ease-in-out infinite; }
@keyframes podFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Play / pause glyph shared by the round buttons and the artwork overlays */
.pod-player-btn {
  flex: none; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; position: relative;
  background: var(--brass-light); transition: transform .15s ease, background .15s ease;
}
.pod-player-btn:hover { transform: scale(1.05); background: #EAD9A8; }
.pod-player-btn span, .pod-art-play::after {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 22px; margin: -11px 0 0 -8px;
  background: var(--ink-deep); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.pod-player-btn.is-playing span, .is-playing .pod-art-play::after {
  width: 18px; height: 20px; margin: -10px 0 0 -9px;
  clip-path: polygon(0 0, 36% 0, 36% 100%, 0 100%, 0 0, 64% 0, 100% 0, 100% 100%, 64% 100%, 64% 0);
}
.pod-player-btn--sm { width: 44px; height: 44px; }
.pod-player-btn--sm span { width: 14px; height: 16px; margin: -8px 0 0 -5px; }
.pod-player-btn--sm.is-playing span { width: 13px; height: 14px; margin: -7px 0 0 -6.5px; }

/* Latest episode */
.pod-latest { background: var(--ink); color: #FBF9F4; padding: 104px 0; }
.pod-latest-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 72px; align-items: center; }
.pod-latest-art, .ep-art {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: none;
  border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1;
}
.pod-latest-art img, .ep-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pod-art-play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: rgba(217,196,138,0.95); opacity: 0; transform: scale(0.85); transition: opacity .2s ease, transform .2s ease;
}
.pod-art-play::after { content: ''; margin-left: -7px; }
.pod-latest-art:hover .pod-art-play, .ep-art:hover .pod-art-play, .is-current .pod-art-play { opacity: 1; transform: none; }
.pod-latest-art:hover img, .ep-art:hover img { transform: scale(1.04); }
.pod-latest-label { font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brass-light); }
.pod-meta { font-size: 14px; color: rgba(251,249,244,0.6); margin-top: 10px; }
.pod-latest h2 { font-size: 42px; line-height: 1.08; letter-spacing: -0.03em; color: #FBF9F4; margin-top: 14px; max-width: 640px; }
.pod-guest { font-size: 18px; font-weight: 600; color: var(--brass-light); margin-top: 12px; }
.pod-summary { font-size: 17px; line-height: 1.65; color: rgba(251,249,244,0.78); margin-top: 18px; max-width: 600px; }
.pod-player { display: flex; align-items: center; gap: 20px; margin-top: 32px; max-width: 600px; }
.pod-player-track { flex: 1; min-width: 0; }
.pod-player-seek {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; cursor: pointer; margin: 0;
  background: linear-gradient(to right, var(--brass-light) var(--p, 0%), rgba(251,249,244,0.18) var(--p, 0%));
}
.pod-player-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #FBF9F4; border: 0; }
.pod-player-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #FBF9F4; border: 0; }
.pod-player-times { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(251,249,244,0.55); margin-top: 8px; font-variant-numeric: tabular-nums; }
.pod-latest-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; font-size: 14px; }
.pod-latest-links a { display: inline-flex; align-items: center; gap: 7px; color: rgba(251,249,244,0.75); }
.pod-latest-links a:hover { color: var(--brass-light); }
.pod-latest-links svg { width: 18px; height: 18px; --icon-cut: var(--ink); }

/* Episode grid */
.pod-episodes { padding: 104px 0 96px; }
.pod-episodes-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.pod-episodes-head h2 { font-size: 42px; letter-spacing: -0.03em; }
.pod-episodes-head p { color: var(--slate); font-size: 15px; }
.ep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.ep-card.is-extra { display: none; }
.ep-grid.show-all .ep-card.is-extra { display: block; animation: phasePanelIn .4s ease both; }
.ep-art { border-radius: 10px; }
.ep-card.is-current .ep-art { box-shadow: 0 0 0 3px var(--brass); }
.ep-eq { position: absolute; left: 12px; bottom: 12px; display: none; gap: 3px; align-items: flex-end; height: 18px; padding: 6px; box-sizing: content-box; background: rgba(13,22,38,0.85); border-radius: 6px; }
.ep-eq i { width: 4px; background: var(--brass-light); border-radius: 1px; animation: podEq .9s ease-in-out infinite; }
.ep-eq i:nth-child(2) { animation-delay: .2s; } .ep-eq i:nth-child(3) { animation-delay: .4s; }
.ep-card.is-playing .ep-eq { display: flex; }
@keyframes podEq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.ep-body { padding-top: 16px; }
.ep-guest { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--brass-dark); }
.ep-card h3 { font-size: 17.5px; line-height: 1.3; margin-top: 6px; letter-spacing: -0.01em; }
.ep-card .pod-meta { color: var(--slate); font-size: 13.5px; margin-top: 8px; }
.ep-more { margin-top: 48px; text-align: center; }
.ep-more .btn-secondary { background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }

/* Guest CTA */
.pod-guest-cta { background: #F6F4EE; padding: 88px 0; }
.pod-guest-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
.pod-guest-cta h2 { font-size: 36px; letter-spacing: -0.025em; max-width: 560px; }
.pod-guest-cta p { font-size: 17px; color: var(--slate); margin-top: 14px; max-width: 520px; }

/* Sticky mini player */
.mini-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: rgba(13,22,38,0.96); color: #FBF9F4;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(251,249,244,0.1);
  animation: miniIn .3s ease both;
}
.mini-player[hidden] { display: none; }
@keyframes miniIn { from { transform: translateY(100%); } to { transform: none; } }
.mini-player-inner { display: flex; align-items: center; gap: 16px; height: 76px; }
.mini-art { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex: none; }
.mini-info { width: 260px; min-width: 0; flex: none; }
.mini-guest { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--brass-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-track { flex: 1; min-width: 0; }
.mini-track .pod-player-times { margin-top: 4px; }
.mini-close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(251,249,244,0.25); background: none; color: #FBF9F4; font-size: 20px; line-height: 1; cursor: pointer; }
.mini-close:hover { border-color: var(--brass-light); color: var(--brass-light); }
body.has-mini-player { padding-bottom: 76px; }

@media (max-width: 1000px) {
  .pod-hero-grid, .pod-latest-grid { grid-template-columns: 1fr; gap: 48px; }
  .pod-hero-art { order: -1; }
  .pod-hero-art img { max-width: 380px; }
  .pod-latest-art { max-width: 460px; }
  .ep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pod-guest-cta-grid { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 640px) {
  .pod-hero { padding: 48px 0 64px; }
  .pod-hero h1 { font-size: 36px; }
  .pod-hero-art img { max-width: 280px; }
  .pod-latest, .pod-episodes { padding: 64px 0; }
  .pod-latest h2, .pod-episodes-head h2 { font-size: 30px; }
  .ep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .ep-card h3 { font-size: 15.5px; }
  .pod-art-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .mini-info { width: auto; flex: 1; }
  .mini-track { display: none; }
  .pod-guest-cta h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .pod-hero-art img, .pod-soon-dot, .ep-eq i { animation: none; }
  .pod-latest-art img, .ep-art img { transition: none; }
}

/* ==========================================================================
   Book — The Winning Balance (refresh). The cover is a transparent cut-out:
   no shadow, no frame, it sits straight on the white page.
   ========================================================================== */
.btn-outline {
  display: inline-block; padding: 13px 24px; border-radius: 3px; font-size: 15px; font-weight: 500;
  border: 1px solid var(--ink); color: var(--ink); transition: background .15s ease, color .15s ease;
}
.btn-outline:hover { background: var(--ink); color: #FBF9F4; }

.bk-hero { padding: 72px 0 88px; background: var(--white); }
.bk-hero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.bk-hero-cover img { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; box-shadow: none; border-radius: 0; }
.bk-hero h1 { font-size: 48px; line-height: 1.06; letter-spacing: -0.03em; margin-top: 4px; }
.bk-hero-turn { font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1.3; color: var(--brass-dark); margin-top: 18px; }
.bk-hero .lead { font-size: 17.5px; line-height: 1.6; color: var(--slate); margin-top: 20px; max-width: 540px; }
.bk-hero .lead em { color: var(--ink); font-style: normal; font-weight: 600; }
.bk-free {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 15px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
}
.bk-free:hover { color: var(--brass-dark); border-color: var(--brass); }
.bk-free-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--brass-light); color: var(--ink-deep); padding: 3px 8px; border-radius: 3px; }

.bk-inside { background: #F6F4EE; padding: 104px 0; }
.bk-inside-head { max-width: 680px; }
.bk-inside-head h2 { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; }
.bk-points { list-style: none; counter-reset: pt; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.bk-points li { grid-column: span 2; }
.bk-points li:nth-child(-n+2) { grid-column: span 3; }
.bk-points li {
  counter-increment: pt; background: var(--white); border: 1px solid #DCD8CD; border-radius: 10px; padding: 28px 26px 30px;
  transition: transform .2s ease, border-color .2s ease;
}
.bk-points li:hover { transform: translateY(-3px); border-color: var(--brass); }
.bk-points li::before {
  content: counter(pt, decimal-leading-zero); display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 30px; letter-spacing: -0.02em; color: var(--brass); margin-bottom: 16px;
}
.bk-points h3 { font-size: 19px; line-height: 1.25; }
.bk-points p { font-size: 15px; line-height: 1.6; color: var(--slate); margin-top: 8px; }

.bk-praise { background: var(--ink); color: #FBF9F4; padding: 104px 0; }
.bk-praise .eyebrow { color: var(--brass-light); }
.bk-praise h2 { font-size: 40px; letter-spacing: -0.025em; color: #FBF9F4; }
.bk-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 48px; }
.bk-quotes figure { margin: 0; border-top: 1px solid rgba(251,249,244,0.16); padding-top: 28px; }
.bk-quotes blockquote { margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.45; color: #FBF9F4; position: relative; }
.bk-quotes blockquote::before { content: '\201C'; display: block; font-size: 64px; line-height: 0.6; color: var(--brass-light); margin-bottom: 10px; }
.bk-quotes figcaption { margin-top: 22px; font-size: 14px; color: rgba(251,249,244,0.6); line-height: 1.5; }
.bk-quotes figcaption strong { display: block; color: var(--brass-light); font-weight: 600; font-size: 15px; }

.bk-author { padding: 104px 0; }
.bk-author-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: center; }
.bk-author-grid img { width: 100%; height: auto; border-radius: 10px; filter: grayscale(1); }
.bk-author h2 { font-size: 36px; letter-spacing: -0.02em; }
.bk-author p { font-size: 17px; line-height: 1.7; color: var(--ink); margin-top: 18px; max-width: 680px; }
.bk-author .bk-author-more { color: var(--slate); font-size: 16px; }
.bk-author a { color: var(--blue); border-bottom: 1px solid rgba(47,111,168,0.35); }
.bk-author a:hover { color: var(--blue-dark); }

.bk-final { background: #F6F4EE; padding: 88px 0; }
.bk-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.bk-final h2 { font-size: 38px; letter-spacing: -0.025em; }
.bk-final p { font-size: 17px; color: var(--slate); margin-top: 12px; }
.bk-final .btn-row { margin-top: 0; }

@media (max-width: 1000px) {
  .bk-hero-grid, .bk-final-grid { grid-template-columns: 1fr; gap: 32px; }
  .bk-hero-cover img { max-width: 420px; }
  .bk-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-points li, .bk-points li:nth-child(-n+2) { grid-column: auto; }
  .bk-points li:last-child { grid-column: 1 / -1; }
  .bk-quotes { grid-template-columns: 1fr; gap: 32px; }
  .bk-author-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 640px) {
  .bk-hero { padding: 40px 0 64px; }
  .bk-hero h1 { font-size: 34px; }
  .bk-hero-turn { font-size: 21px; }
  .bk-inside, .bk-praise, .bk-author { padding: 64px 0; }
  .bk-inside-head h2, .bk-praise h2 { font-size: 30px; }
  .bk-points { grid-template-columns: 1fr; }
  .bk-points li:last-child { grid-column: auto; }
  .bk-author-grid { grid-template-columns: 1fr; }
  .bk-author-grid img { max-width: 240px; }
  .bk-final h2 { font-size: 30px; }
}

/* Book v2: ground shadow under the cover, central claim as the hero line, Amazon as the one purchase CTA */
.bk-hero-cover { position: relative; isolation: isolate; max-width: 560px; margin: 0 auto; }
.bk-hero-cover img { filter: drop-shadow(0 14px 18px rgba(21,34,56,0.16)); }
.bk-hero-cover::after {
  content: ''; position: absolute; z-index: -1; left: 12%; right: 10%; bottom: 1%; height: 9%;
  background: radial-gradient(ellipse at center, rgba(21,34,56,0.32) 0%, rgba(21,34,56,0.12) 45%, transparent 72%);
  filter: blur(4px);
}
.bk-hero h1 { font-size: 30px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--slate); max-width: 560px; }
.bk-claim {
  font-family: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 800;
  font-size: 50px; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); margin-top: 16px; max-width: 620px;
}
.bk-claim span {
  color: var(--ink); background: linear-gradient(transparent 62%, rgba(217,196,138,0.75) 62%, rgba(217,196,138,0.75) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px;
}
.btn-amazon {
  display: inline-flex; align-items: center; gap: 12px; padding: 19px 34px; border-radius: 4px;
  background: var(--ink); color: #FBF9F4; font-size: 18px; font-weight: 600; letter-spacing: -0.005em;
  border-bottom: 3px solid var(--brass-light); transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-amazon span { transition: transform .15s ease; }
.btn-amazon:hover { background: var(--ink-deep); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(21,34,56,0.55); }
.btn-amazon:hover span { transform: translateX(3px); }
.bk-final .btn-row { align-items: center; }
@media (max-width: 640px) {
  .bk-hero h1 { font-size: 23px; }
  .bk-claim { font-size: 36px; }
  .btn-amazon { width: 100%; justify-content: center; }
}

/* Book v3: the central claim set as an elegant serif, its key phrase in the
   deep teal of the book cover (no highlighter). */
.bk-hero { --cover-teal: #0A5868; --cover-amber: #D8A12C; }
.bk-claim {
  font-family: var(--font-serif); font-weight: 400; font-size: 52px; line-height: 1.1;
  letter-spacing: -0.015em; color: var(--ink); margin-top: 22px; max-width: 600px;
  position: relative; padding-top: 26px;
}
.bk-claim::before {
  content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 2px;
  background: linear-gradient(to right, var(--cover-teal), var(--cover-amber));
}
.bk-claim span {
  background: none; padding: 0; font-style: italic; color: var(--cover-teal);
}
@media (max-width: 640px) { .bk-claim { font-size: 36px; padding-top: 20px; } }

/* Book v4: claim in the site's display sans (lighter than the earlier bold),
   no divider line; key phrase stays in the cover teal. */
.bk-claim {
  font-family: var(--font-display); font-weight: 600; font-size: 50px; line-height: 1.08;
  letter-spacing: -0.03em; padding-top: 0; margin-top: 22px;
}
.bk-claim::before { display: none; }
.bk-claim span { font-style: normal; color: var(--cover-teal); }
.bk-hero h1 { margin-top: 0; }
@media (max-width: 640px) { .bk-claim { font-size: 36px; } }

/* Open state shows a minus (collapse), not an x */
.phasebar-seg[aria-expanded="true"] .phasebar-plus { transform: none; }
.phasebar-plus::after { transition: transform .25s ease, opacity .2s ease; }
.phasebar-seg[aria-expanded="true"] .phasebar-plus::after { transform: rotate(90deg) scaleX(0); opacity: 0; }
.sas-more-item[open] summary::after { content: '\2212'; transform: none; }

/* ==========================================================================
   SaaS v4: "What" moved into a dialog off the comparison; Fit check quiz
   ========================================================================== */
.cmp-more { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: 44px; }
.cmp-more-btn {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; cursor: pointer;
  font: inherit; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink);
  background: var(--white); border: 1px solid #DCD8CD; border-radius: 10px; padding: 18px 24px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.cmp-more-btn:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 12px 26px -16px rgba(21,34,56,0.4); }
.cmp-more-btn > span[aria-hidden] { display: inline; }
.cmp-more-kicker { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brass-dark); }
.cmp-more-link { font-size: 15px; color: var(--slate); border-bottom: 1px solid #DCD8CD; padding-bottom: 2px; }
.cmp-more-link:hover { color: var(--brass-dark); border-color: var(--brass); }

/* Dialog */
.sas-dialog {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 14px;
  background: var(--white); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(5,10,20,0.6);
}
.sas-dialog::backdrop { background: rgba(13,22,38,0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sas-dialog[open] { animation: dlgIn .28s cubic-bezier(.2,.8,.3,1) both; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
html.dialog-open { overflow: hidden; }
.sas-dialog-inner { padding: 44px 48px 40px; position: relative; overflow-y: auto; max-height: calc(100vh - 48px); }
.sas-dialog-close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--white); font-size: 22px; line-height: 1; color: var(--slate); cursor: pointer;
}
.sas-dialog-close:hover { border-color: var(--ink); color: var(--ink); }
.sas-dialog h2 { font-size: 38px; line-height: 1.05; letter-spacing: -0.03em; }
.sas-dialog-lead { font-size: 17px; color: var(--slate); margin-top: 12px; }
.dlg-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 0; }
.dlg-facts > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.dlg-facts dt { font-family: var(--font-display); font-size: 42px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.dlg-facts > div:first-child dt { color: var(--brass-dark); }
.dlg-facts dd { margin: 8px 0 0; font-size: 14.5px; color: var(--slate); line-height: 1.45; }
.dlg-cols { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 32px; margin-top: 32px; }
.dlg-cols h3 { font-size: 13px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--brass-dark); }
.dlg-cols ul { list-style: none; padding: 0; margin: 12px 0 0; }
.dlg-cols li { font-size: 15.5px; padding: 6px 0 6px 16px; position: relative; color: var(--ink); }
.dlg-cols li::before { content: ''; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.dlg-note { margin-top: 26px; padding: 18px 20px; background: #F6F4EE; border-radius: 8px; font-size: 15px; line-height: 1.6; color: var(--slate); }
.dlg-note strong { color: var(--ink); }
.sas-dialog .btn-row { margin-top: 26px; }

/* Fit check */
.fit { background: #F6F4EE; padding: 112px 0; position: relative; }
.fit::before {
  content: ''; position: absolute; top: -46px; left: 50%; width: 1px; height: 92px; z-index: 2;
  background: linear-gradient(to bottom, transparent, var(--brass-light) 45%, var(--brass-light) 55%, transparent);
  opacity: 0.7; pointer-events: none;
}
.fit-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.fit-intro h2 { font-size: 42px; line-height: 1.08; letter-spacing: -0.03em; }
.fit-intro p { font-size: 17.5px; line-height: 1.6; color: var(--slate); margin-top: 18px; max-width: 420px; }
.fit-card {
  position: relative; background: var(--white); border: 1px solid #DCD8CD; border-radius: 14px; padding: 36px 40px 32px;
  min-height: 430px; overflow: hidden;
}
.fit-progress { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #EEEBE3; }
.fit-progress span { display: block; height: 100%; width: 0; background: linear-gradient(to right, var(--brass), var(--brass-light)); transition: width .35s ease; }
.fit-step-count { font-size: 12.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--brass-dark); }
.fit-q { border: 0; margin: 0; padding: 0; min-width: 0; animation: phasePanelIn .3s ease both; }
.fit-q[hidden] { display: none; }
.fit-q legend { font-family: var(--font-display); font-size: 25px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); padding: 14px 0 22px; }
.fit-q button {
  display: block; width: 100%; text-align: left; margin-top: 10px; padding: 16px 20px 16px 52px; position: relative;
  font: inherit; font-size: 16px; color: var(--ink); background: var(--white); border: 1px solid #DCD8CD; border-radius: 10px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.fit-q button::before {
  content: ''; position: absolute; left: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  border: 1.5px solid #B9B4A6; transition: border-color .15s ease, box-shadow .15s ease;
}
.fit-q button:hover { border-color: var(--ink); background: #FBFAF6; transform: translateX(2px); }
.fit-q button:hover::before { border-color: var(--ink); }
.fit-q button.is-picked { border-color: var(--ink); background: #F6F4EE; }
.fit-q button.is-picked::before { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 9px var(--ink); }
.fit-q button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.fit-result { animation: phasePanelIn .35s ease both; padding-top: 8px; }
.fit-result[hidden] { display: none; }
.fit-result-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--brass-light);
}
[data-result="quick"] .fit-result-tag, [data-result="sponsor"] .fit-result-tag, [data-result="team"] .fit-result-tag { background: #EEEBE3; color: var(--ink); }
.fit-result h3 { font-size: 30px; line-height: 1.12; letter-spacing: -0.025em; margin-top: 18px; }
.fit-result p { font-size: 16.5px; line-height: 1.6; color: var(--slate); margin-top: 14px; max-width: 520px; }
.fit-result .btn-row { margin-top: 26px; }
.fit-back, .fit-restart { font: inherit; font-size: 14px; color: var(--slate); background: none; border: 0; cursor: pointer; padding: 0; margin-top: 24px; margin-right: 20px; }
.fit-back:hover, .fit-restart:hover { color: var(--ink); }
.fit-back[hidden], .fit-restart[hidden] { display: none; }

@media (max-width: 1000px) {
  .fit-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .fit { padding: 72px 0; }
  .fit-intro h2 { font-size: 31px; }
  .fit-card { padding: 30px 20px 24px; min-height: 0; }
  .fit-q legend { font-size: 21px; }
  .fit-q button { font-size: 15px; padding: 14px 16px 14px 46px; }
  .fit-q button::before { left: 16px; }
  .sas-dialog-inner { padding: 40px 22px 28px; }
  .sas-dialog h2 { font-size: 30px; }
  .dlg-facts { grid-template-columns: 1fr; }
  .dlg-facts > div { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; }
  .dlg-cols { grid-template-columns: 1fr; gap: 20px; }
  .cmp-more-btn { font-size: 18px; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fit-q, .fit-result, .sas-dialog[open] { animation: none; }
  .fit-progress span { transition: none; }
}
.fit-result [hidden] { display: none !important; }
.cmp-more-title span { display: inline-block; transition: transform .15s ease; }
.cmp-more-btn:hover .cmp-more-title span { transform: translateX(3px); }