/* =========================================================
   BSD Strategic Advisors — Homepage

   Sections, in page order:
    1. Fonts & tokens        9. Case study
    2. Base & type          10. Founder
    3. Buttons & shared     11. Clients
    4. Nav                  12. CTA banner
    5. Menu overlay         13. Contact
    6. Hero                 14. Footer
    7. Problem              15. Mobile CTA bar
    8. Growth Stages        16. Motion
                            17. Page not found
   (Scope of Engagements sits between Clients and CTA banner)
   ========================================================= */

/* Familjen Grotesk and Inter Tight are open-source (SIL OFL) and served from this site. */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("assets/fonts/familjen-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("assets/fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

/* PP Mori is a licensed font: the licensed web files (v2.7, 2026-10-27) in assets/fonts.
   No local() lookup, so every visitor gets these exact files, not a copy installed on their computer. */
@font-face {
  font-family: "PP Mori";
  src: url("assets/fonts/PPMori-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("assets/fonts/PPMori-SemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

:root {
  --ink: #0c0f11;
  --black: #000;
  --white: #fff;
  --off-white: #f1f1f1;
  --grey-500: #818181;
  --grey-400: #a6a6a6;
  --grey-warm: #757070;
  --bg: #f1f0ec;
  --sand: #e9ddce;       /* warm band used behind Problem, Case study and Founder */
  --field: #e4ddd3;
  --field-ink: #2a2b24;

  --f-display: "PP Mori", "Inter Tight", system-ui, sans-serif;
  --f-body: "Familjen Grotesk", system-ui, sans-serif;

  /* Fluid type — 375px → 1728px */
  --t-display: clamp(2.75rem, 1.9rem + 3.4vw, 4.375rem);   /* 44 → 70 */
  --t-h2: clamp(2.125rem, 1.75rem + 1.5vw, 2.875rem);      /* 34 → 46 */
  --t-list: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);         /* 20 → 24 */
  --t-body: clamp(1.0625rem, 1rem + .28vw, 1.25rem);       /* 17 → 20 */
  --t-eyebrow: clamp(.8125rem, .74rem + .33vw, 1.125rem);  /* 13 → 18 */

  --gutter: clamp(20px, 5.5vw, 120px);
  --maxw: 1360px;
  --radius-xl: clamp(28px, 2.6vw, 45px);
  --section-y: clamp(88px, 7.5vw, 128px);
  /* Text inside the inset cards starts on the page margin at every width.
     The card sits clamp(12px, 2vw, 35px) in from each edge; on wide screens its inner
     container is centred, so the padding is the page margin minus wherever that
     container starts. (Before 2026-10-15 titles sat 35px short of the margin above ~1600px.) */
  --card-inset: clamp(12px, 2vw, 35px);
  --card-pad-left: calc(max(var(--gutter), (100vw - var(--maxw)) / 2) - max(var(--card-inset), (100vw - var(--maxw)) / 2 - var(--gutter)));

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-smooth: cubic-bezier(.45, 0, .15, 1);

  --safe-b: env(safe-area-inset-bottom, 0px);
}
/* Phones/tablets: tighter rhythm between sections (88 → 64px, her call 2026-10-29) */
@media (max-width: 899px) { :root { --section-y: 64px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: #181b20; /* matches the top of the footer, shown behind the page's rounded bottom corners */
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

main {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: clip;
}

.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type ---------- */
.display {
  font-family: var(--f-display);
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--white);
}
.h2 {
  text-wrap: balance;
  font-family: var(--f-display);
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.muted { color: var(--grey-500); }
.muted-light { color: var(--grey-400); }
.body-l { font-size: var(--t-body); line-height: 1.3; }
.body-l p + p { margin-top: 1.3em; }
.eyebrow {
  font-weight: 600;
  line-height: 1.3;
  font-size: var(--t-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.label {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Tag: square bullet + uppercase label (PP Mori SemiBold) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}
.tag--light { color: var(--white); }
.bullet {
  flex: none;
  width: 13.5px; height: 14.3px;
  background: var(--black);
  transition: transform .5s var(--ease-out);
}
.bullet--light { background: var(--white); }
.tag--link > span { max-width: 38ch; }
.tag--link .tag__arrow {
  display: inline-block;
  transition: transform .5s var(--ease-out);
}
.tag--link:hover .tag__arrow { transform: translateX(6px); }
.tag--link:hover .bullet { transform: rotate(90deg); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 46px;
  padding: 16px 24px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color .5s var(--ease-out);
}
.btn--wide { padding-inline: 48px; }
.btn--play { gap: 12px; }
.btn__play { width: 11px; height: 13px; fill: currentColor; transition: transform .5s var(--ease-out); }
@media (hover: hover) {
  .btn--play:hover .btn__play { transform: scale(1.15); }
  /* this button fills light grey on hover (text stays dark) */
  .btn.btn--play::before { background: #dcdcdc; }
  .btn--light.btn--play:hover { color: var(--ink); }
}
.btn--icon { padding: 16px 30px; gap: 10px; }   /* text + arrow centred as one group (2026-10-26) */
.btn--light { background: var(--white); color: var(--black); }
.btn--dark { background: var(--field-ink); color: var(--white); }
.btn--dark img { filter: invert(1); }
.btn--dark::before { background: #000; }
.btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .6s var(--ease-out);
}
.btn img { transition: filter .5s var(--ease-out), transform .5s var(--ease-out); }
@media (hover: hover) {
  .btn--light:hover { color: var(--white); }
  .btn:hover::before { transform: scaleY(1); }
  .btn:hover img { filter: invert(1); transform: translate(2px, -2px); }
}
.btn:active { transform: scale(.98); }

/* Circular arrow button */
.arrow-btn {
  display: grid;
  place-items: center;
  width: 65px; height: 65px;
  border-radius: 50%;
  background: var(--white);
  transition: transform .6s var(--ease-out);
}
.arrow-btn img { width: 18px; height: 18px; transition: transform .6s var(--ease-out); }

/* ---------- Grid-line texture ---------- */
.grid-lines {
  --cell: clamp(92px, 15.42vw, 266px);
  --line: rgba(255, 255, 255, .14);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: calc(var(--cell) * .24) calc(var(--cell) * -.13);
}
.grid-lines--dark { --line: rgba(12, 15, 17, .07); --cell: clamp(96px, 17.4vw, 300px); }

/* ---------- Glass ----------
   In the spirit of Apple's Liquid Glass (Figma: Glass effect on the nav pill,
   the active stage cell and the Scaling diagram). Clear rather than frosted:
   in Chrome/Edge, site.js adds a lens that bends the background near the rim
   (an SVG displacement map sized to each shape); everywhere, a thin specular
   rim catches the light top-left and bottom-right, with a soft inner glow.
   Safari and Firefox can't refract, so they get a lightly blurred version. */
.glass {
  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: blur(var(--glass-blur, 2px)) saturate(1.15) brightness(1.04);
  backdrop-filter: blur(var(--glass-blur, 2px)) saturate(1.15) brightness(1.04);
  box-shadow:
    inset 0 0 0 .5px rgba(255, 255, 255, .22),
    inset 1px 1px 1px -.5px rgba(255, 255, 255, var(--glass-edge, .45)),
    inset -1px -1px 1px -.5px rgba(255, 255, 255, .18);
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: inherit;
  /* a faint highlight pooled in the top-left, like light inside the lens */
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

/* ---------- Cursor light ----------
   Cells in a row ([data-light] on the row, site.js) get a soft glow that
   follows the pointer inside the hovered cell. */
[data-light] > * > a, [data-light] > a { position: relative; }
[data-light] .light {
  position: absolute; inset: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .12), transparent 70%);
  opacity: 0;
  transition: opacity .9s var(--ease-smooth);
  pointer-events: none;
}
@media (hover: hover) { [data-light] a:hover > .light { opacity: 1; } }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 3.7vw, 64px));
  color: var(--white);
  pointer-events: none;
  transition: transform .7s var(--ease-out), padding .7s var(--ease-out);
}
.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(1566px + var(--gutter) * 2);
  padding-inline: clamp(20px, 5.5vw, 114px);
}
.nav__logo, .nav__menu, .nav__right { pointer-events: auto; }
.nav__logo img {
  width: clamp(126px, 9.6vw, 166px);
  height: auto;
  transition: filter .6s var(--ease-out);
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.8vw, 66px);
  height: clamp(46px, 3.9vw, 67px);
  padding-inline: clamp(22px, 3vw, 51px);
  border-radius: 50px;
  border: .5px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .06);
  font-size: clamp(14px, .95vw, 16px);
  transition: background .6s var(--ease-out), border-color .6s var(--ease-out), color .6s var(--ease-out);
}
.nav__menu a { position: relative; padding-block: 8px; }
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.nav__menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__divider { width: 1px; height: 55%; background: currentColor; opacity: .7; }

.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px 0;
  background: linear-gradient(to bottom, var(--nav-fade, rgba(16, 22, 28, .55)) 50%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .6s var(--ease-out);
}
.nav.is-scrolled::before { opacity: 1; }
.nav.on-light { --nav-fade: rgba(241, 240, 236, .9); }
.nav.is-scrolled { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
.nav.is-hidden { transform: translateY(-140%); }
.nav.on-light { color: var(--ink); }
.nav.on-light .nav__logo img { filter: brightness(0) saturate(0); }
.nav.on-light .nav__menu {
  background: rgba(241, 240, 236, .35);
  border-color: rgba(12, 15, 17, .1);
}

/* =========================================================
   HAMBURGER + MENU OVERLAY
   ========================================================= */
.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.15vw, 37px);
  pointer-events: auto;
}
.burger {
  position: relative;
  width: 44px; height: 44px;
  margin-right: -6px;
  -webkit-tap-highlight-color: transparent;
}
.burger span {
  position: absolute;
  left: 6px; right: 6px;
  top: 50%;
  height: 1px;
  background: currentColor;
  transition: transform .7s var(--ease-out), opacity .4s ease;
}
.burger span:nth-child(1) { transform: translateY(-8px); }
.burger span:nth-child(3) { transform: translateY(8px); }
.burger:hover span:nth-child(2) { transform: scaleX(.6); transform-origin: right; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

@media (min-width: 900px) {
  .burger { width: 61px; height: 46px; margin-right: 0; }
  .burger span { left: 6px; right: 6px; }
  .burger span:nth-child(1) { transform: translateY(-15px); }
  .burger span:nth-child(3) { transform: translateY(15px); }
}
/* Phones: the burger carries everything; Testimonials/Contact live inside the menu */
@media (max-width: 699px) {
  .nav__menu { display: none; }
}

/* While the menu is open the header stays visible and white */
/* While the menu is open the header stays visible and white */
body.menu-open .nav { transform: none; color: var(--white); }
body.menu-open .nav::before { opacity: 0; }
body.menu-open .nav .nav__logo img { filter: none; }
body.menu-open .nav .nav__menu { background: rgba(217,217,217,.12); border-color: rgba(255,255,255,.5); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  color: var(--white);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 1s;
}
.menu.is-open { visibility: visible; pointer-events: auto; transition: none; }
.menu__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #161b21 0%, #22303b 55%, #3d4f5e 100%);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease-inout) .15s;
}
.menu.is-open .menu__bg { clip-path: inset(0 0 0 0); transition-delay: 0s; }
.menu__grid { opacity: 0; transition: opacity 1s ease; }
.menu.is-open .menu__grid { opacity: 1; transition-delay: .5s; }

.menu__inner {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: space-between;
  gap: 48px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 120px);
  padding-bottom: calc(32px + var(--safe-b));
}
.menu__label { color: var(--grey-400); margin-bottom: 20px; }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { overflow: hidden; }
.menu__list a, .menu__group {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 10px;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  transition: opacity .5s var(--ease-out);
}
.menu__num {
  flex: none;
  min-width: 2.2em;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--grey-400);
  transform: translateY(-0.6em);
}
/* Text "rolls" up on hover: a clone waits below the mask and slides into place */
.menu__text {
  display: inline-flex;
  align-items: flex-start;
  gap: .32em;
  transition: transform .8s var(--ease-out);
}
.menu__roll { position: relative; display: block; overflow: hidden; }
.menu__t { display: block; padding-bottom: .12em; transition: transform .8s var(--ease-out); }
.menu__t--clone { position: absolute; left: 0; top: 100%; width: 100%; transition-delay: .03s; }
.menu__arrow {
  flex: none;
  width: .36em; height: .36em;
  margin-top: .22em;
  opacity: 0;
  transform: translate(-.4em, .4em) scale(.5);
  transition: opacity .5s ease, transform .8s var(--ease-out);
}
.menu__arrow img { width: 100%; height: 100%; filter: invert(1); }
.menu__num { transition: color .5s ease, transform .8s var(--ease-out); }
.menu__list a:active .menu__text, .menu__group:active .menu__text { transform: translateX(6px); }
/* "Where We Help" is a heading, not a link: hovering (or tapping) it opens its three pages */
.menu__group { width: auto; text-align: left; cursor: default; -webkit-tap-highlight-color: transparent; }
.menu__group .menu__arrow img { transform: rotate(135deg); }            /* points down */
.menu__has-sub.is-open .menu__group .menu__arrow { opacity: 1; transform: none; }
.menu__sub-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--ease-out), margin .7s var(--ease-out);
}
.menu__sub-wrap > ul { min-height: 0; overflow: hidden; }
.menu__has-sub.is-open .menu__sub-wrap { grid-template-rows: 1fr; margin-bottom: 10px; }
.menu__list--sub a { opacity: 0; transition: opacity .4s ease, color .5s ease; }
.menu.is-open .menu__has-sub:not(.is-open) .menu__list--sub a { opacity: 0; }
.menu__has-sub.is-open .menu__list--sub a { opacity: 1; transition: opacity .6s ease .12s, color .5s ease; }
@media (hover: none) {
  .menu__group { cursor: pointer; }
  .menu__group .menu__arrow { opacity: .6; transform: none; }      /* a cue that it opens */
}

/* Sub-items (Where We Help): smaller and grey, aligned with the text above */
.menu__list--sub { margin: 0; }
.menu__list--sub a {
  padding-block: 6px;
  font-size: clamp(1.125rem, .95rem + .8vw, 1.75rem);
  color: var(--grey-400);
}
@media (hover: hover) { .menu__list--sub a:hover { color: var(--white); } }
@media (hover: hover) {
  .menu__main:hover .menu__list a, .menu__main:hover .menu__group { opacity: .3; }
  .menu__main .menu__list a:hover, .menu__main .menu__group:hover,
  .menu__main .menu__has-sub:hover .menu__list--sub a { opacity: 1; }
  .menu__list a:hover .menu__t, .menu__group:hover .menu__t { transform: translateY(-100%); }
  .menu__list a:hover .menu__arrow, .menu__group:hover .menu__arrow { opacity: 1; transform: none; }
  .menu__list a:hover .menu__num, .menu__group:hover .menu__num { color: var(--white); transform: translateY(-0.6em) translateX(4px); }
}

/* Image preview for the hovered page (large screens with a mouse) */
.menu__preview { display: none; }
@media (hover: hover) and (min-width: 1100px) {
  .menu__preview {
    --pw: min(clamp(240px, 20vw, 360px), 44vh);
    display: block;
    position: absolute;
    right: var(--gutter);
    top: 46%;
    width: var(--pw);
    aspect-ratio: 4 / 5;
    margin-top: calc(var(--pw) * -.625);
    border-radius: var(--radius-xl);
    overflow: hidden;
    pointer-events: none;
    clip-path: inset(50% 0 50% 0 round var(--radius-xl));
    transition: clip-path 1s var(--ease-out);
    will-change: transform;
  }
  .menu.has-preview .menu__preview { clip-path: inset(0 0 0 0 round var(--radius-xl)); }
  .menu__preview img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.15);
    transition: opacity .7s ease, transform 1.4s var(--ease-out);
  }
  .menu__preview img.is-active { opacity: 1; transform: scale(1); }
  /* Keep the links clear of the preview */
  .menu__main { max-width: calc(100vw - var(--gutter) * 2 - min(clamp(240px, 20vw, 360px), 44vh) - 80px); }
}

.menu__aside { display: grid; gap: 28px; justify-items: start; }
.menu__small { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; }
.menu__small a {
  font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  line-height: 2.5;
}

/* Staggered entrance */
.menu__label, .menu__list a, .menu__group, .menu__aside > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .5s ease, transform .5s var(--ease-out);
}
.menu__list a, .menu__group { transform: translateY(105%); }
.menu.is-open .menu__label,
.menu.is-open .menu__list a,
.menu.is-open .menu__group,
.menu.is-open .menu__aside > * {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease calc(.35s + var(--i, 0) * .07s), transform 1.1s var(--ease-out) calc(.35s + var(--i, 0) * .07s);
}

@media (min-width: 900px) {
  .menu__inner {
    grid-template-columns: 1fr auto;
    align-content: end;
    align-items: end;
    padding-top: 180px;
    padding-bottom: 64px;
  }
  .menu__list a, .menu__group { gap: 28px; padding-block: 8px; }
  .menu__list--sub a { padding-block: 5px; }
  .menu__aside { justify-items: end; padding-bottom: 12px; }
}
@media (max-width: 899px) {
}
@media (prefers-reduced-motion: reduce) {
  .menu__bg { clip-path: none !important; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background: #1c2730;
  overflow: hidden;
}
@media (min-width: 900px) {
  .hero { min-height: max(100svh, 720px); max-height: 1100px; }
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__img {
  position: absolute;
  left: 0; top: -10%;
  width: 100%; height: 120%;
  object-fit: cover;
  object-position: 42% 56%;
  transform: scale(1.14);
  transition: transform 2.6s var(--ease-out), opacity 1.5s var(--ease-smooth);
  will-change: transform;
}
/* Podcast preview: while the "Listen" button is hovered, the image dissolves into
   the looping clip under a dark filter (home.js adds .is-playing) */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.5s var(--ease-smooth), transform 2.6s var(--ease-out);
}
.hero__video-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6, 8, 10, .46), rgba(6, 8, 10, .6));
  opacity: 0;
  transition: opacity 1.5s var(--ease-smooth);
}
.hero.is-playing .hero__img { opacity: 0; }
.hero.is-playing .hero__video { opacity: 1; transform: none; }
.hero.is-playing .hero__video-shade { opacity: 1; }
/* Leaving the button: a slower, softer return to the image than the way in */
.hero:not(.is-playing) .hero__img { transition: transform 2.6s var(--ease-out), opacity 2s var(--ease-smooth); }
.hero:not(.is-playing) .hero__video { transition: opacity 2s var(--ease-smooth), transform 3s var(--ease-out); }
.hero:not(.is-playing) .hero__video-shade { transition: opacity 2s var(--ease-smooth); }
@media (min-width: 900px) { .hero__img { object-position: 50% 56%; } }
/* Homepage photo and shade from the Figma hero (2354:262, 2026-10-27): the photo at full
   width, framed on the spire's sunlit face. The shade starts a fifth of the way down and is
   already dark where the text begins (half the hero), then deepens behind the intro and
   button, so white type keeps at least 4.5:1 contrast even over the brightest rock. */
@media (min-width: 900px) {
  .hero--home .hero__img { object-position: 50% 82%; }
  .hero--home .hero__shade { height: 78%; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.55) 35%, rgba(0,0,0,.72) 65%); }
}/* Phones: the longer title sits over the bright rock, so the shade reaches higher and darker */
@media (max-width: 899px) {
  .hero .hero__shade { height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.45) 35%, rgba(0,0,0,.7)); }
}
.hero__grid { inset: -24px; opacity: 0; transition: opacity 2s ease 0.4s; will-change: transform; }
/* Brighter copy of the grid, revealed in a soft circle around the cursor */
.hero__grid-glow {
  --line: rgba(255, 255, 255, .5);
  -webkit-mask-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), #000, transparent 80%);
  mask-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), #000, transparent 80%);
}
body.is-ready .hero .hero__grid-glow { opacity: 0; transition: opacity 1.4s ease .15s; }
body.is-ready .hero.is-pointer .hero__grid-glow { opacity: 1; }
.hero__shade {
  position: absolute;
  inset: auto 0 0 0;
  height: 78%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.55));
  pointer-events: none;
}
.hero__content {
  position: relative;
  display: grid;
  gap: 28px;
  padding-top: 140px;
  padding-bottom: calc(clamp(40px, 5vw, 60px) + var(--safe-b));
  will-change: transform, opacity;
}
.hero__right { display: grid; gap: 20px; justify-items: start; }
.hero__right .body-l { max-width: 34ch; }
.hero__title { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem); line-height: 1.1; }  /* 40 → 60px */
/* 30+ years line under the podcast button: phones only (from 700px it sits in the bar below) */
.hero__creds { display: grid; gap: 18px; justify-self: stretch; margin-top: 20px; }
.hero__creds .label { color: var(--off-white); font-size: 11px; max-width: 34ch; }

/* Homepage: the content, then the credentials bar, stacked at the bottom of the hero */
.hero--home { flex-direction: column; justify-content: flex-end; align-items: stretch; }

/* Credentials bar (Figma 2354:322): caption and the five logos on a grey band along the
   bottom of the hero. --blend (0 → 1, set by home.js on scroll) fades the whole band out,
   grey, caption and logos together, leaving only the photo (2026-10-27). */
.hero__bar { display: none; }
@media (min-width: 700px) {
  .hero--home .hero__creds { display: none; }
  .hero__bar {
    --blend: 0;
    position: relative;
    display: block;
    background: rgb(129 129 129 / calc(1 - var(--blend)));
  }
  .hero__bar-inner {
    display: flex; flex-wrap: wrap; align-items: center;
    opacity: calc(1 - var(--blend));
    gap: 14px 48px;   /* logos right after the caption; one line from ~1440px, below that they sit under it */
    padding-block: 19px 20px;
  }
  .hero__bar .label { font-size: 12px; color: #d9d9d9; }
  .hero__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; }
  .hero__logos img { height: auto; }
}

/* Podcast button: two lines, the show name in grey under the label */
.btn--podcast { justify-content: flex-start; gap: 14px; padding: 13px 28px 13px 24px; text-align: left; }
.btn__stack { display: grid; gap: 2px; }
.btn__sub { color: #a6a6a6; transition: color .5s var(--ease-out); }
@media (hover: hover) { .btn--light.btn--podcast:hover .btn__sub { color: #6f6f6f; } }

/* Podcast dialog: centred card over a blurred, dimmed page (home.js opens it).
   The clip of Bruce loops at the top; three large platform links below. */
.pod {
  width: min(520px, calc(100vw - 32px));
  max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0;
  background: none; color: var(--black);
  overflow: visible;
}
.pod::backdrop { background: rgba(6, 8, 10, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pod__card {
  position: relative;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
/* opening: the backdrop fades, the card rises and settles */
.pod[open]::backdrop { animation: pod-fade .5s var(--ease-out); }
.pod[open] .pod__card { animation: pod-rise .7s var(--ease-out); }
.pod.is-closing::backdrop { opacity: 0; transition: opacity .3s ease; }
.pod.is-closing .pod__card { opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
@keyframes pod-fade { from { opacity: 0; } }
@keyframes pod-rise { from { opacity: 0; transform: translateY(28px) scale(.98); } }

.pod__media { position: relative; aspect-ratio: 16 / 9; background: #0c0f11; overflow: hidden; }
.pod__video { width: 100%; height: 100%; object-fit: cover; }
.pod__badge {
  position: absolute; left: 20px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--white);
}
/* small pulsing dot: "on air" */
.pod__badge i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pod-pulse 1.8s ease-in-out infinite; }
@keyframes pod-pulse { 50% { opacity: .35; } }
.pod__media::after {   /* keeps the badge readable over the clip */
  content: ""; position: absolute; inset: 50% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .55));
  pointer-events: none;
}
.pod__badge { z-index: 1; }

.pod__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;   /* 44px: comfortable thumb target (2026-10-27) */
  background: rgba(255, 255, 255, .92);
  transition: transform .4s var(--ease-out);
}
.pod__close svg { width: 12px; height: 12px; stroke: var(--black); stroke-width: 1.6; }
@media (hover: hover) { .pod__close:hover { transform: rotate(90deg); } }

.pod__body { padding: 32px 32px 32px; }
.pod__title { font-family: var(--f-display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.pod__text { margin-top: 10px; font-size: 15px; color: #5c5c5c; }
.pod__links { display: grid; gap: 10px; margin-top: 26px; }
.pod__link {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border: 1px solid #e3e3e3;
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.pod__icon { flex: none; width: 28px; height: 28px; }
.pod__name { flex: 1; }
.pod__arrow { font-size: 14px; transition: transform .35s var(--ease-out); }
@media (hover: hover) {
  .pod__link:hover { border-color: var(--black); background: #f6f6f6; }
  .pod__link:hover .pod__arrow { transform: translate(3px, -3px); }
}
.pod__link:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
@media (max-width: 599px) {
  .pod__body { padding: 24px 20px 22px; }
  .pod__title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pod[open]::backdrop, .pod[open] .pod__card, .pod__badge i { animation: none; }
}


@media (min-width: 900px) {
  .hero__content {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title right" "creds creds";
    column-gap: 0;
    row-gap: 80px;
    align-items: end;
    padding-bottom: clamp(48px, 5vw, 60px);
  }
  .hero__left { grid-area: title; align-self: start; }
  .hero__right { grid-area: right; align-self: start; padding-top: 6px; gap: 0; }
  .hero__right .eyebrow { margin-bottom: 37px; }
  .hero__right .body-l { max-width: 538px; margin-bottom: 64px; }
  .hero .display { max-width: 688px; }

  /* Homepage hero only (.hero--home), as in the design: title left; on the right
     the intro, the podcast button and the credentials, 60px apart, one column.
     The stage pages and About share the rules above and must not change. */
  .hero--home .hero__content {
    grid-template-areas: "title right";
    row-gap: 0;
    /* the headline starts at half the hero's height, as in the Figma mockup (2026-10-27);
       the hero is 100svh tall, between 720px and 1100px */
    flex: 1;
    align-content: start;
    padding-top: calc(clamp(720px, 100svh, 1100px) / 2);
    padding-bottom: 24px;   /* minimum space above the credentials bar on short screens (1280×720 still fits) */
  }
  .hero--home .hero__left { padding-right: 40px; }   /* always a gap before the intro */
  .hero--home .hero__right { padding-top: 0; margin-top: -1px; }   /* intro's first line level with the top of the headline capitals (Bruce, 2026-10-26) */
  .hero--home .hero__right .body-l { margin-bottom: 60px; }
  /* headline at the design's 52px, on three lines */
  .hero--home .hero__title { font-size: clamp(2.5rem, 1.6rem + 2.2vw, 3.25rem); }
  .hero--home .display { max-width: 640px; }
}
/* Smaller laptops: keep the headline inside its half, with a gap before the intro */
@media (min-width: 900px) and (max-width: 1279px) {
  .hero__content { column-gap: 40px; }
  .hero__left { min-width: 0; }
  .hero .display { max-width: 100%; }
  .hero .hero__title { font-size: clamp(2.25rem, 4.1vw, 3.25rem); }   /* "Founder-Led" never breaks, so it has to fit its half */
}
/* Phones: the credentials line breaks into two even lines */
@media (max-width: 899px) { .hero--home .hero__creds .label { max-width: none; text-wrap: balance; } }

/* =========================================================
   PROBLEM
   ========================================================= */
.problem {
  position: relative;
  background: linear-gradient(to bottom, var(--sand), var(--bg));
  padding-block: var(--section-y) var(--section-y);
  display: grid;
  gap: 56px;
}
.problem__text { display: grid; gap: 28px; }
.problem__body { max-width: 541px; }
.problem__visual {
  position: relative;
  margin: 0 0 0 auto;
  width: calc(100% - var(--gutter));
  aspect-ratio: 863 / 947;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  overflow: hidden;
  background: #2b3945;
}
.problem__media { position: absolute; inset: 0; overflow: hidden; }
.problem__media img {
  position: absolute; left: 0; top: -8%;
  width: 100%; height: 116%;
  object-fit: cover;
  object-position: right bottom;
}
#problem .problem__media img { object-position: 25% bottom; }   /* homepage only: shows the whole floating rock (2026-10-29) */
.problem__btn {
  position: absolute;
  right: clamp(20px, 7.4%, 64px);
  bottom: clamp(20px, 9.5%, 90px);
}

/* Diagram — positions derived from the 863×947 image frame */
.diagram {
  position: absolute;
  left: 11.34%; top: 21.96%;   /* 5% left of the design so "Outcomes" fits after its dot (Bruce, 2026-10-26) */
  width: 72.26%; height: 54.38%;
  pointer-events: none;
}
.diagram img { position: absolute; opacity: 0; transform: scale(.6); transition: opacity 1.4s var(--ease-out), transform 1.8s var(--ease-out); }
.diagram__c1 { left: 0; top: 39.8%; width: 14.75%; height: 19.03%; transition-delay: .1s !important; }
.diagram__c2 { left: 7.22%; top: 22.91%; width: 42.34%; height: 53.79%; transition-delay: .3s !important; }
/* Big circle: right edge fixed (99.12%, where the Outcomes dot sits); its left edge always clears the
   end of "Objectives" by 12px. The labels keep a fixed size while the circles scale, so the clearance
   is set in px per label layout (2026-10-27). Never larger than the original circle (left 21.5%). */
.diagram__c3 {
  --c3-left: max(21.5%, calc(6.18% + var(--c3-clear, 111px)));
  left: var(--c3-left);
  width: calc(99.12% - var(--c3-left));
  height: auto; aspect-ratio: 1;
  top: 50%; translate: 0 -50%;
  transition-delay: .5s !important;
}
@media (max-width: 599px) { .diagram__c3 { --c3-clear: 67px; } }                          /* stacked labels, 7.5px */
@media (min-width: 900px) and (max-width: 1199px) { .diagram__c3 { --c3-clear: 85px; } }  /* stacked labels, 10px */
.diagram__label {
  position: absolute;
  top: 48.4%;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.diagram__label .bullet { width: 7px; height: 7.4px; }
.diagram__label--1 { left: 6.18%; transition-delay: .9s; }
.diagram__label--2 { left: 48.19%; transition-delay: 1.05s; }
.diagram__label--3 { left: calc(100% - 7px); transition-delay: 1.2s; }   /* dot on the outer circle, word after it */
.problem__visual.is-in .diagram img { opacity: 1; transform: none; }
.problem__visual.is-in .diagram__label { opacity: 1; transform: none; }


/* Phones and tablets: one more step left so "Outcomes" keeps a margin to the image edge */
@media (max-width: 899px) { .diagram { left: 10.34%; } }
/* Small screens: text sits above each bullet so the three labels never collide */
@media (max-width: 599px) {
  .diagram__label { flex-direction: column-reverse; align-items: flex-start; gap: 6px; top: calc(48.4% - 17px); font-size: 7.5px; }
  .diagram__label--2 { align-items: center; left: calc(48.19% + 3.5px); translate: -50% 0; }
}
/* Small laptops: the image column is narrow too, so the same stacked labels */
@media (min-width: 900px) and (max-width: 1199px) {
  .diagram__label { flex-direction: column-reverse; align-items: flex-start; gap: 8px; top: calc(48.4% - 20px); }
  .diagram__label--2 { align-items: center; left: calc(48.19% + 3.5px); translate: -50% 0; }
}
@media (min-width: 600px) {
  .diagram__label { font-size: 10px; gap: 13px; }
  .diagram__label .bullet { width: 13.5px; height: 14.3px; }
  .diagram__label--3 { left: calc(100% - 13.5px); }
}

@media (min-width: 900px) {
  /* Text + image sections (2026-10-26): the text block is centred on the image, and the
     image is always a bit taller than the text. The image keeps the design's 863 × 947
     proportion (max 947px) and only grows taller when the copy needs more room. */
  .problem {
    display: block;
    padding-block: 68px var(--problem-pb, 148px);
  }
  .problem__inner { position: relative; z-index: 1; }
  .problem__text {
    width: 50%;
    min-height: min(947px, 50vw * 947 / 863);
    padding-block: clamp(48px, 5vw, 80px);   /* the image's minimum margin above and below the text */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
  .problem__text .h2 { max-width: 484px; }
  .problem__text .tag { margin-top: 35px; }
  .problem__body { margin-top: clamp(56px, 7.4vw, 128px); max-width: 541px; padding-right: 24px; }
  .problem__visual {
    position: absolute;
    top: 68px; bottom: var(--problem-pb, 148px); right: 0;
    width: 50%;
    aspect-ratio: auto;
  }
  /* the circles keep their shape when the image grows taller (centred where the design has them) */
  .problem .diagram { top: 49.15%; height: auto; aspect-ratio: 623.6 / 515; translate: 0 -50%; }
}

/* =========================================================
   WHEN WE'RE CALLED IN
   Pinned stepper: the section is a tall scroll track; its content stays
   fixed on screen (sticky) while scrolling moves through 01 → 02 → 03.
   Pinning is switched on by JS (.is-pinned) only when the content fits the
   screen, so small or reduced-motion setups get a normal static section.
   ========================================================= */
/* A faint tint for each situation, taken from its photo. The tint fades in from the
   page colour at the top of the section and back out at the bottom, so there is no
   visible edge; between steps the colour itself glides (registered property below). */
@property --tint {
  syntax: "<color>";
  inherits: false;
  initial-value: #f1f0ec;
}
.called {
  --steps: 3;
  --tint: var(--bg);
  border-block: 1px solid rgba(12, 15, 17, .18);
  background: linear-gradient(to bottom,
    var(--bg) 0,
    var(--tint) min(45svh, 30%),
    var(--tint) max(calc(100% - 45svh), 70%),
    var(--bg) 100%);
  transition: --tint 1.6s var(--ease-inout);
}
.called[data-active="1"] { --tint: #efe4d7; }  /* warm amber */
.called[data-active="2"] { --tint: #efe9e0; }  /* soft sand */
.called[data-active="3"] { --tint: #e8ebeb; }  /* cool stone */
.called.is-pinned { height: calc(100svh + var(--steps) * 60svh); }
.called__sticky { padding-block: var(--section-y); }
.called.is-pinned .called__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 72px 24px;   /* clears the header on phones */
}
.called__inner { position: relative; display: grid; gap: 20px; }

/* Situations list */
.called__list { display: grid; }
.called__tab {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  padding-block: 9px;
  text-align: left;
  font-family: var(--f-display);
  font-size: clamp(1.0625rem, .95rem + .75vw, 1.5rem);
  line-height: 1.15;
  color: var(--grey-500);
  transition: color .6s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.called__num { font-size: .8em; letter-spacing: .02em; }
.called__name { position: relative; justify-self: start; text-transform: capitalize; }
.called__name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out);
}
.called[data-active="1"] [data-i="1"].called__tab,
.called[data-active="2"] [data-i="2"].called__tab,
.called[data-active="3"] [data-i="3"].called__tab { color: var(--ink); }
.called[data-active="1"] [data-i="1"] .called__name,
.called[data-active="2"] [data-i="2"] .called__name,
.called[data-active="3"] [data-i="3"] .called__name { font-weight: 600; }
.called[data-active="1"] [data-i="1"] .called__name::after,
.called[data-active="2"] [data-i="2"] .called__name::after,
.called[data-active="3"] [data-i="3"] .called__name::after { transform: scaleX(1); }
@media (hover: hover) { .called__tab:hover { color: var(--ink); } }

/* Text for the active situation (all three share one cell, so nothing jumps) */
.called__copy { display: grid; }
.called__panel {
  grid-area: 1 / 1;
  display: grid;
  gap: 18px;
  align-content: start;
  max-width: 420px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .8s var(--ease-out), visibility 0s linear .5s;
}
.called[data-active="1"] .called__panel[data-i="1"],
.called[data-active="2"] .called__panel[data-i="2"],
.called[data-active="3"] .called__panel[data-i="3"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .7s var(--ease-out) .15s, transform 1s var(--ease-out) .15s, visibility 0s;
}

/* Images: on phones one frame crossfades between the three */
.called__cards { display: grid; }
.card {
  grid-area: 1 / 1;
  position: relative;
  display: block;
  height: clamp(170px, 30svh, 300px);
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out);
}
.card__img { position: absolute; inset: 0; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.card .arrow-btn {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(48px, 3.76vw, 65px); height: clamp(48px, 3.76vw, 65px);
}
.called[data-active="1"] .card[data-i="1"],
.called[data-active="2"] .card[data-i="2"],
.called[data-active="3"] .card[data-i="3"] { opacity: 1; transform: none; }
@media (hover: hover) {
  .card:hover .card__img img { transform: scale(1.06); }
  .card:hover .arrow-btn { transform: scale(1.08); }
  .card:hover .arrow-btn img { transform: rotate(45deg); }
}

/* Progress through the three situations */
.called__progress {
  height: 1px;
  background: rgba(12, 15, 17, .14);
  overflow: hidden;
}
.called__progress span {
  display: block; height: 100%;
  background: var(--ink);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}
.called:not(.is-pinned) .called__progress { display: none; }

/* Phones (2026-10-15): a compact version so the whole stepper fits on one screen,
   even with the browser's address bar showing, and can stay pinned while scrolling.
   The three stages sit in one row of tabs; the image is a little shorter. */
@media (max-width: 899px) {
  .called__list {
    grid-template-columns: auto auto auto;
    justify-content: space-between;   /* the three stages use the full width */
    column-gap: 16px;
    border-bottom: 1px solid rgba(12, 15, 17, .14);
  }
  .called__tab {
    grid-template-columns: 1fr;
    gap: 2px;
    min-height: 44px;
    padding-block: 0 12px;
    font-size: 16px;
  }
  .called__num { font-size: 11px; }
  .called__name::after { bottom: -13px; height: 2px; }
  .called__cards { margin-top: 8px; }
  .card { height: clamp(150px, 26svh, 260px); }
}

/* Phone order: title, list, image, text, progress */
.called__title { order: 1; }
.called__list { order: 2; }
.called__cards { order: 3; margin-top: 4px; }
.called__copy { order: 4; }
.called__progress { order: 5; }

@media (min-width: 900px) {
  .called__sticky { padding-block: 127px 101px; }
  .called.is-pinned .called__sticky { padding-block: 96px 48px; }
  .called__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title list" "copy cards" ". progress";
    row-gap: clamp(40px, 9svh, 90px);
  }
  .called__title { grid-area: title; max-width: 600px; }   /* "Brings Its Own Decisions" on one line */
  .called__list { grid-area: list; gap: 26px; align-content: start; }
  .called__tab { grid-template-columns: 92px 1fr; padding-block: 12px; }
  .called__num { font-size: inherit; }
  .called__copy { grid-area: copy; padding-left: 5px; padding-right: 32px; align-self: start; }
  .called__panel { gap: 33px; max-width: 400px; }
  .called__cards {
    grid-area: cards;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.16vw, 20px);
    max-width: 800px;
    margin-top: 0;
  }
  /* Desktop shows all three cards; the active one is full strength */
  .card {
    grid-area: auto;
    height: auto;
    aspect-ratio: 253 / 346;
    max-height: 44svh;
    border-radius: var(--radius-xl);
    opacity: .25;
    transform: none;
  }
  .called__progress { grid-area: progress; max-width: 800px; margin-top: -24px; }
}

/* =========================================================
   GROWTH STAGES — VERSION B (client feedback 2026-10-26)
   All three stages visible at once: number + name above each picture,
   the text and a link underneath. No pinning, no scrolling through.
   Motion (as each stage arrives, via the site's .reveal → .is-in):
   a line draws under the labels from 01 to 03 and each number darkens as
   it is reached; the pictures open left to right, one after the other;
   the photos drift slightly inside their frames (data-parallax, desktop).
   Hover on desktop: the stage under the pointer stays full strength,
   the other two step back.
   ========================================================= */
.sg {
  padding-block: var(--section-y);
  border-top: 1px solid rgba(12, 15, 17, .18);
  background: linear-gradient(to bottom, var(--bg), #efe9e0 45%, var(--bg));
}
.sg__title { max-width: 600px; margin-bottom: clamp(40px, 4.6vw, 72px); }
.sg__grid { display: grid; gap: 56px; }
.sg__item { --d: 0s; display: grid; align-content: start; transition: opacity .6s var(--ease-out); }
.sg__item.reveal { opacity: 1; transform: none; }   /* the item stays put; its parts animate */

/* Label with the line underneath: a faint rule, and an ink line that draws over it */
.sg__label {
  position: relative;
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 14px; margin-bottom: 20px;
  font-family: var(--f-display);
  font-size: clamp(1.0625rem, .95rem + .75vw, 1.5rem);
  line-height: 1.15;
  color: var(--ink);
}
.sg__label::before, .sg__label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.sg__label::before { background: rgba(12, 15, 17, .18); }
.sg__label::after {
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(.65, 0, .35, 1) var(--d);
}
.sg__num { font-size: .8em; letter-spacing: .02em; color: var(--grey-500); transition: color .6s var(--ease-out) var(--d); }
.sg__name { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease-out) var(--d), transform 1s var(--ease-out) var(--d); }
.sg__item.is-in .sg__label::after { transform: none; }
.sg__item.is-in .sg__num { color: var(--ink); }
.sg__item.is-in .sg__name { opacity: 1; transform: none; }

/* Picture: opens from the left */
.sg__card {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  clip-path: inset(0 100% 0 0 round 28px);
  transition: clip-path 1.3s cubic-bezier(.65, 0, .35, 1) calc(var(--d) + .15s);
}
.sg__item.is-in .sg__card { clip-path: inset(0 0 0 0 round 28px); }
.sg__img { position: absolute; inset: 0; overflow: hidden; }
.sg__img img {   /* a little taller than the frame, so it can drift */
  position: absolute; left: 0; top: -6%;
  width: 100%; height: 112%; object-fit: cover;
  scale: 1.08;
  transition: scale 1.6s var(--ease-out) calc(var(--d) + .15s);
}
.sg__item.is-in .sg__img img { scale: 1; }
.sg__card .arrow-btn {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(48px, 3.76vw, 65px); height: clamp(48px, 3.76vw, 65px);
  opacity: 0; transform: scale(.6);
  transition: opacity .6s var(--ease-out) calc(var(--d) + .9s), transform .8s var(--ease-out) calc(var(--d) + .9s);
}
.sg__item.is-in .sg__card .arrow-btn { opacity: 1; transform: none; }

/* Text and link rise in after the picture */
.sg__text { margin-top: 24px; max-width: 440px; }
.sg__text { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease-out) calc(var(--d) + .5s), transform 1.1s var(--ease-out) calc(var(--d) + .5s); }
.sg__item.is-in .sg__text { opacity: 1; transform: none; }
/* once arrived, hover responds at once */
.sg__item.is-settled * { transition-delay: 0s !important; }

@media (min-width: 900px) {
  .sg__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.3vw, 40px); }
  .sg__item { grid-template-rows: auto auto 1fr auto; }   /* the three links line up on one row */
  .sg__item:nth-child(2) { --d: .35s; }   /* the line travels 01 → 02 → 03 */
  .sg__item:nth-child(3) { --d: .7s; }
  .sg__card { aspect-ratio: 4 / 3; max-height: 34svh; border-radius: var(--radius-xl); clip-path: inset(0 100% 0 0 round var(--radius-xl)); }
  .sg__item.is-in .sg__card { clip-path: inset(0 0 0 0 round var(--radius-xl)); }
  .sg__label { margin-bottom: 24px; }
}
@media (min-width: 900px) and (hover: hover) {
  /* the stage under the pointer stays full strength, the others step back */
  .sg__grid:has(.sg__item:hover) .sg__item:not(:hover) { opacity: .45; }
}
@media (hover: hover) {
  .sg__card:hover .sg__img img { scale: 1.05; transition: scale 1.2s var(--ease-out); }
  .sg__card:hover .arrow-btn { transform: scale(1.08); }
  .sg__card:hover .arrow-btn img { transform: rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sg__card, .sg__item.is-in .sg__card { clip-path: none; }
  .sg__label::after { transform: none; }
  .sg__item *, .sg__item *::after { transition: none !important; }
}

/* =========================================================
   CASE STUDY
   ========================================================= */
.case {
  padding: clamp(24px, 6.6vw, 115px) clamp(12px, 2vw, 35px) clamp(56px, 6.6vw, 114px);
  /* follows the Founder section, which ends in sand: sand fades back to the page colour behind the card */
  background: linear-gradient(to bottom, var(--sand), var(--bg));
}
.case__card, .cta__card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--white);
  clip-path: inset(var(--inset, 0px) round var(--radius-xl));
  will-change: clip-path;
}
.case__card { background: linear-gradient(176deg, #58778d 11%, #182127 91%); }
.case__texture {
  position: absolute;
  top: 0; right: -20%; bottom: 0;
  width: 90%;
  overflow: hidden;
  opacity: .22;
  pointer-events: none;
}
.case__texture img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: left center; }
.case__content {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 24px;
  padding-block: 44px 44px;
  min-height: clamp(460px, 30vw, 518px);
  align-content: space-between;
}
.case__title { max-width: 578px; margin-bottom: 40px; }

@media (min-width: 900px) {
  .case__texture { left: 49.4%; right: 3.2%; width: auto; }
  /* Network card, as in the design: a compact card (366px), label, title and
     button stacked 36px apart from the top, no stretched gap */
  .case__content {
    min-height: 0;
    align-content: start;
    gap: 36px;
    padding-block: clamp(56px, 5.1vw, 88px);
    padding-left: var(--card-pad-left);
  }
  .case__title { margin: 0; }
  .case .tag { margin-bottom: 0; }
}

/* =========================================================
   FOUNDER
   ========================================================= */
.founder {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
  /* page colour at the top, deepening to sand by the end (as in the design), so it flows into the case study */
  background: linear-gradient(to bottom, var(--bg) 7%, var(--sand) 73%);
}
/* Grid texture: barely there at the top, coming through lower down (as in the design) */
.founder__grid {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 62%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 62%);
}
.founder__inner { position: relative; display: grid; gap: 48px; }
.founder__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #cfd2d4;
}
.founder__img { position: absolute; inset: 0; overflow: hidden; }
.founder__img img {
  position: absolute; left: 0; top: -8%;
  width: 100%; height: 116%;
  object-fit: cover;
  object-position: 50% 20%;
}
.founder__shade {
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
}
.founder__btn { justify-self: start; align-self: flex-start; margin-top: 12px; }
.founder__text { display: grid; gap: 20px; align-content: start; }
.founder__bio { margin-top: 20px; max-width: 541px; }

/* Bio collapses with a fade + "Read more": always on phones (~7 lines); on desktop only when
   the copy is taller than the portrait allows (home.js sets --bio-max and .is-collapsible),
   so the portrait never has to grow */
.read-more {
  display: none;
  align-items: center;
  justify-self: start;
  gap: 12px;
  min-height: 44px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.read-more__icon { position: relative; width: 12px; height: 12px; }
.read-more__icon::before, .read-more__icon::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px;
  background: currentColor; transition: transform .6s var(--ease-out);
}
.read-more__icon::after { transform: rotate(90deg); }
.read-more[aria-expanded="true"] .read-more__icon::after { transform: rotate(0); }
.founder__bio.is-collapsed {
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
@media (max-width: 899px) {
  .founder__bio { overflow: hidden; transition: max-height .9s var(--ease-out); }
  .founder__bio.is-collapsed { max-height: 9.1em; } /* ~7 lines */
  .read-more { display: inline-flex; margin-top: -10px; }
}
@media (min-width: 900px) {
  .founder__text.is-collapsible .founder__bio { overflow: hidden; transition: max-height .9s var(--ease-out); }
  .founder__text.is-collapsible .founder__bio.is-collapsed { max-height: var(--bio-max); }
  .founder__text.is-collapsible .read-more { display: inline-flex; margin-top: 16px; }
}

@media (max-width: 899px) {
  .founder__text { order: -1; }
}
@media (min-width: 900px) {
  .founder { padding-block: 115px 106px; }
  .founder__inner { grid-template-columns: 1fr 1fr; gap: 0; }
  .founder__portrait {
    aspect-ratio: 614 / 1129;
    max-width: 614px;
    width: calc(100% - 40px);
    margin-left: -6px;
  }
  .founder__btn { margin-top: 48px; }
  /* text centred on the portrait (as in the sections above), at least this far from its top and bottom */
  .founder__text {
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(48px, 5vw, 80px); padding-left: 5px; gap: 0;
  }
  .founder__text .tag { margin-top: 32px; }
  .founder__bio { margin-top: clamp(40px, 4.2vw, 72px); }
}

/* =========================================================
   CLIENTS
   ========================================================= */
.clients { padding-block: 49px clamp(72px, 5.6vw, 99px); text-align: center; }
.clients__caption { opacity: .75; font-size: 11px; }
.clients__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px clamp(32px, 4vw, 69px);
  margin-top: 44px;
}
.clients__logos img[src*="logo-gs"] { width: clamp(92px, 7.35vw, 127px); height: auto; }
.clients__logos img[src*="logo-ks"] { width: clamp(138px, 11.3vw, 195px); height: auto; }
.clients__logos img[src*="logo-cravath"] { width: clamp(96px, 8.2vw, 141px); height: auto; }
@media (min-width: 900px) { .clients__caption { font-size: 12px; } .clients__logos { margin-top: 55px; } }

/* =========================================================
   SCOPE OF ENGAGEMENTS
   Six areas. Choosing one (hover or keyboard on desktop, tap on phones) swaps the
   text on the right. On desktop, hovering the list also turns the whole section
   into that area's image, with the list staying visible in white. On phones the
   area's image appears as a card above its text.
   ========================================================= */
/* While the "Connection Matters" section is hidden, Scope takes over its fade from the
   Founder section's sand back to the page colour */
.case[hidden] + .scope { background: linear-gradient(to bottom, var(--sand), var(--bg) 320px) border-box; border-top-color: transparent; }   /* border-box: the fade starts under the (transparent) top border, so no light line there */
.scope {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid rgba(12, 15, 17, .18);
  padding-block: var(--section-y);
  transition: border-color .9s ease;
}
.scope__inner { position: relative; z-index: 1; display: grid; gap: 32px; }
.scope__head { display: grid; gap: 28px; justify-items: start; }
.scope__title, .scope__title .muted, .scope__head .tag { transition: color .7s ease; }
.scope__head .bullet { transition: background-color .7s ease; }

/* List */
.scope__list { list-style: none; margin: 0; padding: 0; display: grid; }
.scope__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding-block: 8px;
  text-align: left;
  font-family: var(--f-display);
  font-size: clamp(1.0625rem, .95rem + .75vw, 1.5rem);
  line-height: 1.15;
  color: var(--grey-500);
  transition: color .6s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.scope__num { font-size: .8em; letter-spacing: .02em; }
.scope__name { text-transform: none; }   /* written in title case already; capitalize turned "Build-out" into "Build-Out" */
.scope__item[aria-pressed="true"] { color: var(--ink); }
.scope__item[aria-pressed="true"] .scope__name { font-weight: 600; }
@media (hover: hover) { .scope__item:hover { color: var(--ink); } }

/* Text for the chosen area (all six share one cell, so nothing jumps) */
.scope__detail { display: grid; gap: 28px; justify-items: start; max-width: 420px; transition: color .7s ease; }
.scope__detail .tag { transition: color .7s ease; }
.scope__detail .bullet { transition: background-color .7s ease, transform .5s var(--ease-out); }
.scope__bodies { display: grid; }
.scope__body {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .45s var(--ease-out), transform .7s var(--ease-out), visibility 0s linear .45s;
}
.scope__body.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .6s var(--ease-out) .1s, transform .9s var(--ease-out) .1s, visibility 0s;
}

/* Full-section image (desktop) */
.scope__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity .9s var(--ease-inout);
  pointer-events: none;
}
.scope__bg::after {               /* even tint so white text reads on any image */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12, 15, 17, .62), rgba(12, 15, 17, .5) 55%, rgba(12, 15, 17, .62));
}
.scope__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .8s ease, transform 2.4s var(--ease-out);
}
.scope[data-active="1"] .scope__bg img[data-i="1"],
.scope[data-active="2"] .scope__bg img[data-i="2"],
.scope[data-active="3"] .scope__bg img[data-i="3"],
.scope[data-active="4"] .scope__bg img[data-i="4"],
.scope[data-active="5"] .scope__bg img[data-i="5"],
.scope[data-active="6"] .scope__bg img[data-i="6"] { opacity: 1; }

.scope.is-revealed { border-color: transparent; }
.scope.is-revealed .scope__bg { opacity: 1; }
.scope.is-revealed .scope__bg img { transform: scale(1); }
.scope.is-revealed .scope__title { color: var(--white); }
.scope.is-revealed .scope__title .muted { color: rgba(255, 255, 255, .6); }
.scope.is-revealed .scope__head .tag { color: var(--white); }
.scope.is-revealed .scope__head .bullet { background: var(--white); }
.scope.is-revealed .scope__item { color: rgba(255, 255, 255, .5); }
.scope.is-revealed .scope__item[aria-pressed="true"] { color: var(--white); }
.scope.is-revealed .scope__detail,
.scope.is-revealed .scope__detail .tag { color: var(--white); }
.scope.is-revealed .scope__detail .bullet { background: var(--white); }

/* Image card (phones) */
.scope__card { display: none; }

@media (max-width: 899px) {
  /* the area's text sits under its name (moved there by home.js) and opens like a dropdown */
  .scope__list .scope__body {
    max-height: 0;
    overflow: hidden;
    padding-left: 48px;
    transform: none;
    transition: max-height .6s var(--ease-out), opacity .4s var(--ease-out), padding .6s var(--ease-out), visibility 0s linear .6s;
  }
  .scope__list .scope__body.is-active {
    max-height: 12em;
    padding-block: 4px 16px;
    transition: max-height .7s var(--ease-out), opacity .6s var(--ease-out) .1s, padding .7s var(--ease-out), visibility 0s;
  }
  .scope__detail { max-width: none; justify-items: stretch; }
  .scope__detail .tag { justify-self: start; }
  .scope__card {
    position: relative;
    display: grid;
    aspect-ratio: 16 / 10;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 4px;
  }
  .scope__card img {   /* pinned to the frame's edges (iPhone Safari-safe, as on About) */
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .7s ease, transform 1.6s var(--ease-out);
  }
  .scope[data-active="1"] .scope__card img[data-i="1"],
  .scope[data-active="2"] .scope__card img[data-i="2"],
  .scope[data-active="3"] .scope__card img[data-i="3"],
  .scope[data-active="4"] .scope__card img[data-i="4"],
  .scope[data-active="5"] .scope__card img[data-i="5"],
  .scope[data-active="6"] .scope__card img[data-i="6"] { opacity: 1; transform: none; }
}

@media (min-width: 900px) {
  .scope { padding-block: 127px 120px; }
  .scope__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title ." "list detail";
    row-gap: clamp(64px, 9vw, 140px);
  }
  .scope__head { grid-area: title; gap: 32px; }
  .scope__title { max-width: 600px; }   /* "Engagements Shaped" on one line (2026-10-26) */
  .scope__list { grid-area: list; gap: 10px; }
  .scope__item { grid-template-columns: 92px 1fr; }
  .scope__num { font-size: inherit; }
  .scope__detail { grid-area: detail; padding-left: 10px; align-self: start; margin-top: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .scope__bg img, .scope__card img { transform: none; }
}

/* =========================================================
   WAYS TO WORK TOGETHER (Scope + stage pages)
   ========================================================= */
.sp-ways { padding: 0 clamp(12px, 2vw, 35px) clamp(56px, 6vw, 105px); background: var(--bg); }
.sp-ways__card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(176deg, #58778d 6%, #182127 92%);
  clip-path: inset(var(--inset, 0px) round var(--radius-xl));
  will-change: clip-path;
}
.sp-ways__texture {
  position: absolute;
  top: 0; right: -20%; bottom: 0;
  width: 90%;
  overflow: hidden;
  opacity: .2;
  pointer-events: none;
  /* fades out before the panels so their text stays clean */
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 62%);
  mask-image: linear-gradient(to bottom, #000 25%, transparent 62%);
}
.sp-ways__texture img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: left center; }
.sp-ways__content { position: relative; display: grid; gap: 48px; padding-block: 64px 32px; }
.sp-ways__head { display: grid; gap: 32px; justify-items: start; }

.sp-ways__list { list-style: none; margin: 0; padding: 0; display: grid; }
.sp-way {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  outline: none;
}
.sp-way__num { font-family: var(--f-display); font-size: 13px; letter-spacing: .04em; color: var(--grey-400); padding-top: .35em; }
/* Each panel links to the contact form: a small arrow in its top-right corner */
.sp-way__arrow {
  position: absolute;
  top: 26px; right: 24px;
  width: 13px; height: 13px;
  transition: transform .7s var(--ease-out), opacity .6s ease;
}
.sp-way__arrow img { width: 100%; height: 100%; filter: invert(1); }
@media (hover: hover) { .sp-way:hover .sp-way__arrow { transform: translate(3px, -3px); } }
.sp-way__text { display: grid; gap: 10px; }
.sp-way__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: var(--t-list); line-height: 1.15; }
.sp-way__desc { color: rgba(255, 255, 255, .72); max-width: 34ch; }
/* Phones: keep titles clear of the corner arrow */
@media (max-width: 899px) { .sp-way__text { padding-right: 40px; } }
.sp-way:has(.sp-way__link:focus-visible) { outline: 2px solid var(--white); outline-offset: -2px; }
/* The whole panel is a link to the contact form */
.sp-way__link { position: absolute; inset: 0; z-index: 1; outline: none; }

@media (min-width: 900px) {
  .sp-ways__texture { left: 49.4%; right: 3.2%; width: auto; }
  .sp-ways__content {
    gap: 72px;
    padding-block: 96px 56px;
    padding-left: var(--card-pad-left);
  }
  .sp-ways__head { grid-template-columns: 1fr auto; align-items: end; }

  /* Four panels side by side; the active one widens and lights up.
     With site.js running (.is-live) the widths glide frame by frame and the
     text keeps a fixed width so it never rewraps mid-movement. Without it,
     plain CSS hover does a simpler version. */
  .sp-ways__list { display: flex; border-left: 1px solid rgba(255, 255, 255, .22); }
  .sp-way {
    flex: 1 1 0;
    min-width: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    min-height: clamp(320px, 24vw, 400px);
    padding: 26px 28px 30px;
    border-top: 0;
    border-right: 1px solid rgba(255, 255, 255, .22);
    overflow: hidden;
  }
  .sp-ways__list.is-live .sp-way__text { width: var(--text-w, auto); }

  /* Light: a soft glow that follows the cursor inside the active panel */
  .sp-way::after {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(420px circle at var(--mx, 30%) var(--my, 30%), rgba(255, 255, 255, .13), transparent 70%),
      rgba(255, 255, 255, .045);
    opacity: 0;
    transition: opacity 1s var(--ease-smooth);
    pointer-events: none;
  }
  /* A line draws across the top of the active panel */
  .sp-way::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: var(--white);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s var(--ease-smooth);
  }
  .sp-way__num { transition: color .9s ease; }
  .sp-way__text { align-self: end; gap: 16px; }
  .sp-way__title { transition: transform 1.1s var(--ease-out); }
  .sp-way__desc {
    opacity: .55;
    transform: translateY(6px);
    transition: opacity 1s var(--ease-out) .08s, transform 1.1s var(--ease-out) .08s;
  }
  .sp-way.is-active::after { opacity: 1; }
  .sp-way.is-active::before { transform: scaleX(1); }
  .sp-way.is-active .sp-way__num { color: var(--white); }
  .sp-way.is-active .sp-way__title { transform: translateY(-6px); }
  .sp-way.is-active .sp-way__desc { opacity: 1; transform: none; }

  /* Fallback without the script: CSS hover */
  .sp-ways__list:not(.is-live) .sp-way { transition: flex-grow 1.2s var(--ease-smooth); }
  .sp-ways__list:not(.is-live) .sp-way:hover { flex-grow: 1.55; }
  .sp-ways__list:not(.is-live) .sp-way:hover::after { opacity: 1; }
  .sp-ways__list:not(.is-live) .sp-way:hover::before { transform: scaleX(1); }
  .sp-ways__list:not(.is-live) .sp-way:hover .sp-way__desc { opacity: 1; transform: none; }
  .sp-ways__list:not(.is-live):not(:hover) .sp-way:first-child { flex-grow: 1.55; }
  .sp-ways__list:not(.is-live):not(:hover) .sp-way:first-child::after { opacity: 1; }
  .sp-ways__list:not(.is-live):not(:hover) .sp-way:first-child::before { transform: scaleX(1); }
  .sp-ways__list:not(.is-live):not(:hover) .sp-way:first-child .sp-way__desc { opacity: 1; transform: none; }
}


/* =========================================================
   CTA BANNER
   ========================================================= */
.cta { padding: clamp(40px, 5.5vw, 96px) clamp(12px, 2vw, 35px) clamp(56px, 6vw, 105px); }
.cta__card { background: linear-gradient(176deg, #58778d 6%, #182127 92%); }   /* site dark blue, as the Ways to Work card (Bruce, 2026-10-26) */
.cta__texture {
  position: absolute;
  left: -14%; top: 0; bottom: 0;
  width: 100%;
  overflow: hidden;
  opacity: .32;
  pointer-events: none;
}
.cta__texture img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: right center; }
.cta__content {
  position: relative;
  display: grid;
  gap: 32px;
  padding-block: 72px 56px;
}
.cta__right { display: grid; gap: 32px; justify-items: start; }
.cta__right .body-l { max-width: 538px; }

@media (min-width: 900px) {
  .cta__texture { left: calc(-94px - 35px); width: 55.7%; }
  .cta__content {
    grid-template-columns: 1fr 1fr;
    min-height: 619px;
    align-content: center;
    padding-block: 150px;
    padding-left: var(--card-pad-left);
  }
  .cta__right { gap: 55px; padding-left: 12px; }
  .cta__title { max-width: 712px; }
}
/* Banner without a button (homepage): same inner padding as the network card
   (.case), instead of the tall 619px button version; outer spacing unchanged */
@media (min-width: 900px) {
  .cta--plain .cta__content { min-height: 0; align-items: start; padding-block: clamp(56px, 5.1vw, 88px); }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding-block: var(--section-y) calc(var(--section-y) + 12px); }
.cta + .contact { padding-top: 44px; }   /* phones: same space below the closing banner as above it */
.contact__inner { display: grid; gap: 48px; }
.contact__body { color: var(--grey-warm); margin-top: 28px; max-width: 538px; }
.contact__email { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .4s ease; }
@media (hover: hover) { .contact__email:hover { text-decoration-color: transparent; } }

.form { display: grid; gap: 14px; }
.form__pair { display: grid; gap: 14px; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%;
  height: 58px;
  padding: 24px 18px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--field);
  color: var(--field-ink);
  font: 400 16px/1.4 var(--f-body);  /* 16px prevents iOS zoom-on-focus */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out);
}
.field textarea { height: 200px; resize: vertical; padding-top: 30px; }
.field label {
  position: absolute;
  left: 18px; top: 19px;
  color: var(--field-ink);
  opacity: .7;
  font-size: 15px;
  pointer-events: none;
  transform-origin: left top;
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.field input:focus, .field textarea:focus { border-color: rgba(42,43,36,.35); background: #ebe5dc; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  transform: translateY(-11px) scale(.76);
  opacity: .6;
}
.field.is-invalid input, .field.is-invalid textarea { border-color: #b4412f; }

.check {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  min-height: 44px;
  font-size: 14px; color: var(--field-ink);
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  flex: none;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  background: var(--field);
  border: 1px solid rgba(42,43,36,.18);
  transition: background .3s ease;
}
.check__box img { width: 12px; opacity: 0; transform: scale(.5); transition: opacity .3s ease, transform .4s var(--ease-out); }
.check input:checked + .check__box { background: var(--field-ink); }
.check input:checked + .check__box img { opacity: 1; transform: none; filter: invert(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--ink); outline-offset: 3px; }
.check.is-invalid .check__box { border-color: #b4412f; }

.form__submit { justify-self: stretch; }
.form__status { font-size: 15px; color: var(--field-ink); min-height: 1.3em; }
.form__status:empty { display: none; }   /* sits above the button (2026-11-02): no gap until there is a message */
/* the direct email, kept quiet under the button so the form stays the main way in */
.form__alt { font-size: 14px; color: var(--grey-warm); margin-top: -4px; }

@media (min-width: 600px) {
  .form__pair { grid-template-columns: 1fr 1fr; gap: 12px; }
  .form__submit { justify-self: start; }
}
@media (min-width: 900px) {
  .contact { padding-block: 124px 93px; }
  /* after the closing banner: tighter, so banner + form fit one screen (2026-10-29) */
  .cta + .contact { padding-top: 0; }
  .contact__inner { grid-template-columns: 1fr 1fr; gap: 0; }
  .contact__text { padding-right: 40px; }
  .contact__body { margin-top: 43px; }
  .form { gap: 24px; max-width: 684px; }
  .form__pair { gap: 12px; }
  .field input { height: 56px; }
  .check { margin-top: 0; }
}

/* =========================================================
   FOOTER — revealed from under the page
   ========================================================= */
.footer {
  position: relative;
  z-index: 0;
  color: var(--white);
  background: linear-gradient(to bottom, #181b20, #647186);
  margin-top: calc(var(--radius-xl) * -1);
  padding-top: var(--radius-xl);
}
.footer.is-sticky { position: sticky; bottom: 0; }
.footer__inner { display: grid; padding-block: 72px calc(28px + var(--safe-b)); }
.footer__top { display: grid; gap: 40px; }
.footer__tagline {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 1.9rem + 2.3vw, 3.625rem);
  line-height: 1.1;
  max-width: 9em;
}
.footer__logo { width: clamp(170px, 19.5vw, 337px); height: auto; }
.footer__links {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "pages social" "services services";
  justify-content: start;
  gap: 28px clamp(56px, 3.9vw, 67px);
  margin-top: 48px;
}
.footer__col--pages { grid-area: pages; }
.footer__col--services { grid-area: services; }
.footer__col--social { grid-area: social; }
@media (min-width: 900px) {
  .footer__links {
    grid-template-columns: auto minmax(0, 283px) auto;
    grid-template-areas: "pages services social";
  }
}
.footer__links ul { list-style: none; margin: 0; padding: 0; }
/* LinkedIn as an icon under Contact; no text underline, it brightens on hover instead */
.footer__links a.footer__icon { display: inline-flex; padding-block: .7em 0; opacity: .85; transition: opacity .3s ease; }
.footer__links a.footer__icon::after { content: none; }
@media (hover: hover) { .footer__links a.footer__icon:hover { opacity: 1; } }
/* Column label above the three stages */
.footer__head { font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; padding-block: .55em; color: var(--grey-400); }
.footer__links a {
  display: inline-block;
  font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  /* Same 2.5 rhythm as the design for single lines, but wrapped names stay together */
  line-height: 1.4;
  padding-block: .55em;
}
/* Underline sits just below the letters, draws in from the left and leaves to the right */
.menu__small a, .footer__links a { position: relative; display: inline-block; }
.menu__small a::after, .footer__links a::after {
  content: "";
  position: absolute;
  left: 0; right: .1em;              /* skip the trailing letter-spacing */
  bottom: .45em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease-out);
}
@media (hover: hover) {
  .menu__small a:hover::after, .footer__links a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.footer__legal {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-weight: 600; font-size: 12px; letter-spacing: .1em;
  color: var(--grey-400);
}
.footer__legal a:hover { color: var(--white); }
.footer__legal > span:last-child { margin-left: auto; }   /* Privacy Policy + Legal Notice left, copyright right */
@media (max-width: 699px) {
  .footer__legal > span:last-child { margin-left: 0; flex-basis: 100%; }   /* phone: copyright on its own line */
}

@media (min-width: 900px) {
  .footer__inner { padding-block: 220px 50px; }
  .footer__top { grid-template-columns: 1fr auto; align-items: start; }
  .footer__logo { margin-top: -15px; }
  .footer__links { margin-top: 43px; }
  .footer__legal { margin-top: 118px; padding-top: 43px; }
}

/* =========================================================
   MOBILE CTA BAR
   ========================================================= */
.dock {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(14px + var(--safe-b));
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
  padding: 0 22px 0 24px;
  border-radius: 999px;
  background: rgba(12, 15, 17, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  color: var(--white);
  font-family: var(--f-display);
  font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.45);
  transform: translateY(calc(100% + 30px));
  transition: transform .7s var(--ease-out);
}
.dock img { width: 10px; filter: invert(1); }
.dock.is-visible { transform: none; }
body.called-in-view .dock { transform: translateY(calc(100% + 30px)); }
@media (min-width: 900px) { .dock { display: none; } }

/* =========================================================
   LINE GRAPHICS
   ========================================================= */
/* ---------- Line graphics in the identity style ----------
   Line drawings from the visual identity (dashed circles, square nodes, dot
   bars, hairline layers) laid over each area's image. Shown in the rail on
   desktop and on each card on phones; they build up when their area is active. */
.sp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sp-gfx {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  /* gentle shade so white lines read on light and dark photos alike */
  background: radial-gradient(ellipse at 50% 50%, rgba(12, 15, 17, .38), rgba(12, 15, 17, .18) 75%);
}
.sp-g {
  position: absolute; inset: 7% 6%;
  width: 88%; height: 86%;
  overflow: visible;
  opacity: 0;
  transition: opacity .5s ease;
}
.sp-g .g-line, .sp-g .g-line line { fill: none; stroke: #fff; stroke-width: 1; }
.sp-g .g-dash { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1; stroke-dasharray: 3 4; }
.sp-g .g-dash--fine { stroke: rgba(255, 255, 255, .45); stroke-dasharray: 1 3; }
.sp-g .g-node { fill: #fff; }
.sp-g .g-node--hollow { fill: none; stroke: #fff; stroke-width: 1; }
.sp-g .g-node--ring { fill: #fff; stroke: rgba(255, 255, 255, .5); stroke-width: 6; paint-order: stroke; }
.sp-g .g-dots { fill: url(#g-dot); mask: url(#g-fade-mask); }
.sp-g .g-dots--x { mask: url(#g-fade-x-mask); }
.sp-g .g-dots--fine { fill: url(#g-dot-fine); }
.sp-g .g-dots--r { fill: url(#g-dot-fine); mask: url(#g-fade-r-mask); }
.sp-g .g-contour { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1; }
.sp-g .g-rule { stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.sp-g .g-label--muted { fill: rgba(255, 255, 255, .6); }
.sp-g .g-hub { fill: rgba(12, 15, 17, .82); stroke: #fff; stroke-width: 1; }   /* centre of the eight-functions wheel */
.sp-g .g-label {
  fill: #fff;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Build-up: each piece fades in on its own beat (--d) */
.sp-g .g-step {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out), stroke-dashoffset 1.4s var(--ease-out);
  transition-delay: calc(.25s + var(--d, 0) * .11s);
}
.sp-g .g-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sp-g .g-grow { transform: scale(.82); }
.sp-g .g-rise { transform-origin: bottom; transform: scaleY(.2); }
.sp-g .g-slide { transform: translateX(-14px); }
.sp-g.is-on { opacity: 1; }
.sp-g.is-on .g-step { opacity: 1; transform: none; stroke-dashoffset: 0; }

/* =========================================================
   MOTION
   ========================================================= */
/* Line mask reveal for headings */
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease-out); }
.line:nth-child(2) > span { transition-delay: .09s; }
.is-in .line > span, .line.is-in > span { transform: none; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: .1s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: .2s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: .3s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: .4s; }

.reveal-clip { clip-path: inset(12% 0 0 0); transition: clip-path 1.6s var(--ease-out); }
.reveal-clip.is-in { clip-path: inset(0 0 0 0); }
.problem__visual.reveal-clip { clip-path: inset(0 0 0 30% round var(--radius-xl) 0 0 var(--radius-xl)); }
.problem__visual.reveal-clip.is-in { clip-path: inset(0 0 0 0 round var(--radius-xl) 0 0 var(--radius-xl)); }

/* Hero intro */
.hero .line > span { transition-duration: 1.4s; transition-delay: .35s; }
.hero .line:nth-child(2) > span { transition-delay: .47s; }
.hero-in { opacity: 0; transform: translateY(20px); transition: opacity 1.2s var(--ease-out) var(--d, 0s), transform 1.4s var(--ease-out) var(--d, 0s); }
.hero-in--1 { --d: .55s; }
.hero-in--2 { --d: .7s; }
.hero-in--3 { --d: .85s; }
.hero-in--4 { --d: 1s; }
.nav { opacity: 0; }
body.is-ready .nav { opacity: 1; transition: opacity 1.2s ease .2s, transform .7s var(--ease-out), padding .7s var(--ease-out); }
body.is-ready .hero-in { opacity: 1; transform: none; }
body.is-ready .hero .line > span { transform: none; }
body.is-ready .hero__img { transform: scale(1); }
body.is-ready .hero__grid { opacity: 1; }

.parallax-wrap img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .line > span, .reveal, .reveal-stagger > *, .hero-in { transform: none !important; opacity: 1 !important; }
  .reveal-clip, .problem__visual.reveal-clip { clip-path: none !important; }
  .diagram img, .diagram__label { opacity: 1 !important; transform: none !important; }
  .hero__img { transform: none !important; }
  .nav { opacity: 1; }
}

/* =========================================================
   PAGE NOT FOUND (404.html)
   ========================================================= */
.notfound {
  min-height: 100svh;
  display: grid;
  align-content: space-between;
  gap: 64px;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(16px, 3.7vw, 64px)) var(--gutter) calc(48px + var(--safe-b));
  color: var(--white);
  background: linear-gradient(to bottom, #161b21 0%, #22303b 55%, #3d4f5e 100%);
}
.notfound__logo img { width: clamp(126px, 9.6vw, 166px); height: auto; }
.notfound__body { display: grid; gap: 28px; justify-items: start; max-width: 640px; }
.notfound__label { color: var(--grey-400); }
.notfound__text { max-width: 34ch; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* 2026-10-13: Harvard + Wharton added to the logo strip on the stage pages */
.clients__logos img[src*="logo-harvard"] { width: clamp(108px, 9.3vw, 161px); height: auto; }
.clients__logos img[src*="logo-wharton"] { width: clamp(110px, 9.4vw, 163px); height: auto; }

/* 2026-10-13: menu — About/Contact links removed; the button sits higher and a little in from the edge */
@media (min-width: 900px) {
  .menu__aside { padding-bottom: clamp(48px, 7vh, 96px); margin-right: clamp(0px, 3vw, 56px); }
}

/* 2026-10-13: Ways To Work — titles start at the same height in every panel (were bottom-aligned) */
@media (min-width: 900px) {
  .sp-way__text { align-self: start; margin-top: clamp(56px, 6vw, 104px); }
}

/* Menu overlay: About and Contact are in the pill on larger screens, so they only show here on phones */
@media (min-width: 700px) { .menu__phone-only { display: none; } }


/* 2026-10-13: ~79px between stacked cards at the end of stage pages, whichever order they come in */
.page-stage .sp-ways { padding-top: clamp(40px, 5.5vw, 96px); }
.scope + .sp-ways { padding-top: clamp(40px, 5.5vw, 96px); }   /* homepage: Ways follows Scope (2026-11-02) */
.sp-ways:has(+ .cta) { padding-bottom: 0; }   /* homepage: Ways sits right above the closing banner */
.page-stage .cta:has(+ .sp-ways) { padding-bottom: 0; }
.page-stage .sp-ways:has(+ .cta) { padding-bottom: 0; }



/* 2026-10-13: outlined light button (secondary action on dark), e.g. "Explore scope" in the menu */
.btn--outline-light { color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.btn--outline-light::before { background: var(--white); }
.btn--outline-light img { filter: invert(1); }
@media (hover: hover) {
  .btn--outline-light:hover { color: var(--black); }
  .btn--outline-light:hover img { filter: none; }
}
/* menu: the two buttons sit side by side */
.menu__aside { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Option B (2026-10-13): menu list centred top-to-bottom, the two buttons at the bottom-left */
@media (min-width: 900px) {
  .menu__inner { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-content: stretch; }
  .menu__main { align-self: center; }
  .menu__aside { align-self: end; justify-content: flex-start; padding-bottom: 0; margin-right: 0; }
}

/* =========================================================
   2026-10-13 — mobile feedback round
   ========================================================= */
/* Bigger grid squares on phones */
@media (max-width: 699px) {
  .grid-lines { --cell: 140px; }
  .grid-lines--dark { --cell: 150px; }
}
/* Tablet: the "Discuss…" bar sits centred at its own width instead of spanning the screen */
@media (min-width: 600px) and (max-width: 899px) {
  .dock { left: 50%; right: auto; translate: -50% 0; gap: 28px; }
}
/* Homepage Problem image on phones/tablets: same margin and rounded corners on both sides */
@media (max-width: 899px) {
  .problem__visual { width: auto; margin-inline: var(--gutter); border-radius: var(--radius-xl); }
  .problem__visual.reveal-clip { clip-path: inset(0 0 0 30% round var(--radius-xl)); }
  .problem__visual.reveal-clip.is-in { clip-path: inset(0 0 0 0 round var(--radius-xl)); }
}
/* Homepage Scope, phones: round arrow in the middle of the image links to that area */
.scope__card-link { display: none; }
@media (max-width: 899px) {
  .scope__card { grid-row: 1; grid-column: 1; }
  .scope__card-link {
    display: grid; grid-row: 1; grid-column: 1; place-self: center; z-index: 1;
    width: 52px; height: 52px; margin-bottom: 4px;
  }
}

/* ---------- Shell-imprint texture: hidden site-wide (Sloane/Bruce, 2026-10-21) ----------
   The markup stays in place, so it can come back by deleting this rule. */
.case__texture, .cta__texture, .sp-ways__texture, .st-why__texture { display: none; }

/* =========================================================
   HOMEPAGE HERO ON PHONES (2026-10-27)
   One idea per screen: photo, headline, podcast button and the 30+ years line.
   The intro and the logos continue on the same dark just below (.hero-more).
   Tablet and desktop unchanged.
   ========================================================= */
.hero-more { display: none; }
@media (max-width: 699px) {
  body.is-ready .hero--home .hero__grid:not(.hero__grid-glow) { opacity: .25; }
  /* the photo fades into the navy that the second screen continues on */
  .hero--home .hero__shade { height: 100%; background: linear-gradient(to bottom, rgba(14, 19, 24, 0) 30%, rgba(14, 19, 24, .6) 64%, #0e1318 100%); }
  .hero--home .hero__img { object-position: 58% 30%; }
  .hero--home .hero__content { gap: 22px; padding-bottom: calc(48px + var(--safe-b)); }
  /* four deliberate lines: The Business Side / of Growth, for / Founder-Led / Asset Managers */
  .hero--home .hero__title { font-size: 36px; line-height: 1.08; max-width: 300px; }
  .hero--home .hero__title .muted-light { color: rgba(255, 255, 255, .66); }   /* readable over the bright rock */
  .hero--home .hero__intro { display: none; }
  .hero--home .hero__creds { margin-top: 0; }
  .hero--home .hero__creds .label { max-width: none; letter-spacing: .08em; color: rgba(255, 255, 255, .78); }   /* no square (her call, 2026-10-29) */

  .hero-more { display: block; padding: 8px 0 80px; background: #0e1318; color: var(--white); }
  .hero-more__intro { color: rgba(255, 255, 255, .86); font-size: 17px; line-height: 1.55; }
  /* logos in aligned columns between fine rules, sizes evened out by eye */
  .hero-more__logos {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    justify-items: start;
    align-items: center;
    margin-top: 48px;
  }
  .hero-more__rule { grid-column: 1 / -1; justify-self: stretch; height: 1px; background: rgba(255, 255, 255, .16); }
  .hero-more__logos img { width: auto; margin-block: 26px; opacity: .9; }
  .hero-more__logos img:nth-of-type(1) { height: 13px; }   /* King Street */
  .hero-more__logos img:nth-of-type(2) { height: 26px; }   /* Goldman Sachs */
  .hero-more__logos img:nth-of-type(3) { height: 31px; }   /* Cravath: boxed wordmark, needs more height */
  .hero-more__logos img:nth-of-type(4) { height: 21px; }   /* Harvard Law School */
  .hero-more__logos img:nth-of-type(5) { height: 24px; }   /* Wharton */
}
/* Small phones: the podcast button keeps its two lines */
@media (max-width: 379px) {
  .hero--home .btn--podcast { padding-inline: 16px 18px; gap: 12px; letter-spacing: .06em; }
}

/* =========================================================
   TOUCH TARGETS (mobile usability pass, 2026-10-27)
   Small links get a 44px-tall tappable area; padding plus a negative margin
   means nothing moves visually.
   ========================================================= */
@media (max-width: 899px) {
  .tag--link { padding-block: 14px; margin-block: -14px; }
  .contact__email { padding-block: 13px; }
  .footer__links a { padding-block: 12px; margin-block: calc(.55em - 12px); }   /* 44px tall, same spacing as before (.55em) */
  .footer__links a.footer__icon { padding: calc(.7em + 7px) 12px 7px; margin: -7px -12px; }
  .nav__logo { padding-block: 5px; margin-block: -5px; }
}



/* =========================================================
   COOKIE CONSENT (analytics.js, 2026-11-02)
   Shown only to visitors in Europe, and from "Cookie settings" in the footer.
   Below the nav and menu, above the phone call-to-action bar.
   ========================================================= */
.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 44;
  display: grid; gap: 16px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(12, 15, 17, .12);
  background: var(--white);
  color: var(--field-ink);
}
.consent[hidden] { display: none; }
.consent__text { margin: 0; font-size: 14px; line-height: 1.45; }
.consent__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.consent__btns { display: flex; gap: 8px; }
.consent__btn { flex: 1; min-height: 42px; padding-block: 12px; }
.consent__btn--decline { color: var(--field-ink); box-shadow: inset 0 0 0 1px rgba(12, 15, 17, .35); }
.consent__btn--decline::before { background: var(--field-ink); }
@media (hover: hover) { .consent__btn--decline:hover { color: var(--white); } }
@media (min-width: 700px) {
  .consent { left: auto; right: 24px; bottom: 24px; width: 400px; }
}

/* "Cookie settings" in the footer: reads as one of the legal links */
.footer__cookies { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; }
.footer__cookies:hover { color: var(--white); }