/* ==========================================================================
   Lola Masha — Global design system + homepage
   Editorial, authoritative, white-dominant. Radius 0. Hairline structure.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --c-blue: #014A71;
  --c-blue-2: #016BA4;
  --c-ink: #082B3A;
  --c-gold: #C59000;
  --c-white: #FFFFFF;
  --c-tint: #F7F7F7;
  --c-text: #151515;
  --c-muted: #646464;
  --c-line: #DFDFDC;
  --c-error: #B3261E;
  --c-error-tint: rgba(179, 38, 30, 0.06);
  --c-blue-tint: rgba(1, 74, 113, 0.06);
  --c-line-inverse: rgba(255, 255, 255, 0.18);
  --c-text-inverse: rgba(255, 255, 255, 0.92);
  --c-muted-inverse: rgba(255, 255, 255, 0.68);

  /* Type */
  --font-display: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;

  --fs-display: clamp(2.2rem, 1rem + 3vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.15rem + 2.1vw, 3.1rem);
  --fs-h2-lg: clamp(2.2rem, 1.2rem + 3.4vw, 4.2rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.6875rem;
  --ls-label: 0.14em;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 64px);
  --grid-gap: clamp(24px, 2.5vw, 40px);

  /* Vertical rhythm */
  --sect: clamp(76px, 9.5vw, 148px);
  --sect-tight: clamp(60px, 7vw, 104px);

  /* Edge language — derived from the hero portrait frame */
  --radius-media: 20px;
  --radius-control: 12px;

  /* Interaction */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --speed: 200ms;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--c-blue);
  text-wrap: balance; /* avoids orphaned words in headings where supported */
}

p {
  text-wrap: pretty; /* avoids awkward one-word final lines where supported */
}

p + p {
  margin-top: 1em;
}

.nowrap {
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

::selection {
  background: var(--c-blue);
  color: var(--c-white);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--c-ink);
  color: var(--c-white);
  padding: 12px 20px;
  font-size: var(--fs-small);
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   3. Container + section system
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--sect);
}

.section--tint {
  background: var(--c-tint);
  padding-block: var(--sect-tight);
}

/* --------------------------------------------------------------------------
   4. Buttons + links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.9em 2em;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.btn--primary {
  background: var(--c-blue);
  color: var(--c-white);
}

.btn--primary:hover {
  background: var(--c-ink);
  color: var(--c-white);
}

.btn--outline {
  border-color: var(--c-text);
  color: var(--c-text);
  background: transparent;
}

.btn--outline:hover {
  background: var(--c-text);
  color: var(--c-white);
}

.btn--outline-inverse {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--c-white);
  background: transparent;
}

.btn--outline-inverse:hover {
  background: var(--c-white);
  color: var(--c-ink);
  border-color: var(--c-white);
}

.btn--block {
  width: 100%;
}

/* Arrow link */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text);
  padding-bottom: 6px;
  position: relative;
  transition: color var(--speed) var(--ease);
}

.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-line);
  transition: background-color var(--speed) var(--ease);
}

.link-arrow:hover {
  color: var(--c-blue);
}

.link-arrow:hover::after {
  background: var(--c-gold);
}

.link-arrow--inverse {
  color: var(--c-text-inverse);
}

.link-arrow--inverse::after {
  background: var(--c-line-inverse);
}

.link-arrow--inverse:hover {
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 44px);
  min-height: 84px;
}

/* Non-destructive CSS framing of the supplied logo: the artwork carries
   generous transparent padding, so a fixed-height window centres the
   script wordmark without altering the file. */
.brand {
  flex: 0 0 auto;
  width: 210px;
  height: 58px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.brand img {
  width: 210px;
  height: auto;
}

.site-nav {
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  gap: clamp(12px, 1.5vw, 30px);
}

.site-nav__list a {
  white-space: nowrap;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text);
  padding: 8px 0;
  position: relative;
  transition: color var(--speed) var(--ease);
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--c-gold);
  transition: width var(--speed) var(--ease);
}

.site-nav__list a:hover {
  color: var(--c-blue);
}

.site-nav__list a:hover::after {
  width: 100%;
}

.site-header__cta {
  flex: 0 0 auto;
}

.site-header__cta .btn {
  min-height: 42px;
  padding: 0.7em 1.5em;
}

/* Responsive header CTA label: short on desktop nav, full elsewhere */
.site-header__cta-long {
  display: none;
}

@media (max-width: 1279px) {
  .site-header__cta-short {
    display: none;
  }

  .site-header__cta-long {
    display: inline;
  }
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text);
  padding: 12px 0 12px 12px;
}

.nav-toggle__icon {
  position: relative;
  width: 22px;
  height: 12px;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--speed) var(--ease), top var(--speed) var(--ease);
}

.nav-toggle__icon::before { top: 0; }
.nav-toggle__icon::after { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  top: 5px;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  top: 5px;
  transform: rotate(-45deg);
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  top: 84px;
  z-index: 90;
  background: var(--c-ink);
  color: var(--c-white);
  padding: clamp(28px, 6vw, 56px) var(--gutter) 48px;
  overflow-y: auto;
}

.mobile-menu__list a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6.5vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-text-inverse);
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line-inverse);
  transition: color var(--speed) var(--ease), padding-left var(--speed) var(--ease);
}

.mobile-menu__list a:hover {
  color: var(--c-gold);
  padding-left: 6px;
}

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 36px;
}

body.menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  border-bottom: 1px solid var(--c-line);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  padding-block: clamp(28px, 4vh, 64px);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-blue);
}

.hero__lede {
  margin-top: clamp(20px, 3.2vh, 38px);
  max-width: 52ch;
  color: var(--c-muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 4vh, 44px);
}

.hero__media {
  justify-self: stretch;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-media);
}

/* The portrait scales with the viewport so the full hero — headline,
   supporting text and both CTAs — sits within the initial screen.
   The inner scale tightens the crop toward the face. */
.hero__media img {
  width: 100%;
  height: clamp(560px, calc(100vh - 220px), 820px);
  object-fit: cover;
  object-position: 50% 20%;
  transform: scale(1.12);
  transform-origin: 50% 12%;
}

/* --------------------------------------------------------------------------
   6b. Affiliation marquee
   -------------------------------------------------------------------------- */
.marquee {
  border-bottom: 1px solid var(--c-line);
  padding-block: clamp(30px, 4vw, 52px);
  overflow: hidden;
}

.marquee__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 48s linear infinite;
}

.marquee__viewport:hover .marquee__track,
.marquee__track:focus-within {
  animation-play-state: paused;
}

.marquee__list {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.marquee__list li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.7rem);
  letter-spacing: -0.01em;
  color: var(--c-text);
}

.marquee__list li::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
  opacity: 0.55;
  margin-inline: clamp(24px, 3vw, 48px);
  flex: 0 0 auto;
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   7. Authority introduction
   -------------------------------------------------------------------------- */
/* Right-anchored editorial text block; the left half of the container
   is deliberate negative space. */
.intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.intro__text {
  grid-column: 7 / -1;
}

.intro__text h2 {
  font-size: var(--fs-h2);
  max-width: 18ch;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.intro__text p + p {
  margin-top: 1.4em;
}

/* Body copy matches the hero lede exactly — one uniform system */
.intro__text p {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  color: var(--c-muted);
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   7b. Moving image gallery — two counter-scrolling editorial rows
   -------------------------------------------------------------------------- */
.gallery {
  --tile-h: clamp(200px, 24vw, 340px);
  --tile-gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(52px, 6.5vw, 100px);
  display: grid;
  gap: var(--tile-gap);
  overflow: hidden;
}

.gallery__row {
  overflow: hidden;
}

/* One row, drifting left-to-right like a moving contact sheet */
.gallery__track {
  display: flex;
  width: max-content;
  animation: gallery-right 110s linear infinite;
}

.gallery__row:hover .gallery__track {
  animation-play-state: paused;
}

.gallery__set {
  display: flex;
  flex: 0 0 auto;
}

.gallery__set li {
  flex: 0 0 auto;
  height: var(--tile-h);
  margin-right: var(--tile-gap);
  border-radius: var(--radius-media);
  overflow: hidden;
}

.gallery__set img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__tile--wide { width: calc(var(--tile-h) * 1.55); }
.gallery__tile--std  { width: calc(var(--tile-h) * 1.2); }
.gallery__tile--tall { width: calc(var(--tile-h) * 0.72); }

@keyframes gallery-right {
  from { transform: translateX(-50%); }
  to { transform: none; }
}

/* --------------------------------------------------------------------------
   8. Impact highlights
   -------------------------------------------------------------------------- */
.impact__heading {
  font-size: var(--fs-h2);
  max-width: 24ch;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.impact__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
}

.impact__item {
  border-top: 1px solid var(--c-line);
  padding-top: 22px;
}

.impact__item h3 {
  font-size: var(--fs-h3);
  max-width: 14ch;
}

.impact__item p {
  margin-top: 14px;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   9. Core areas of work
   -------------------------------------------------------------------------- */
.areas__heading {
  font-size: var(--fs-h2);
  max-width: 20ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}

/* Base treatment: fully readable stacked list (no-JS, touch, small screens) */
.areas__item {
  border-top: 1px solid var(--c-line);
  padding-block: clamp(22px, 2.5vw, 32px);
}

.areas__item:last-child {
  border-bottom: 1px solid var(--c-line);
}

.areas__title {
  font-size: var(--fs-h3);
}

.areas__trigger {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.areas__desc {
  margin-top: 10px;
  max-width: 62ch;
}

.areas__desc p {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* Enhanced treatment: two-sided composition (JS + pointer + ≥1024px only).
   Left — the five areas as a list; right — the active description panel. */
.areas__interactive.is-enhanced {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 110px);
}

.is-enhanced .areas__list {
  grid-column: 1;
}

.is-enhanced .areas__item {
  padding-block: 0;
}

.is-enhanced .areas__title {
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
}

.is-enhanced .areas__trigger {
  display: block;
  width: 100%;
  position: relative;
  padding: clamp(20px, 2.2vw, 30px) 0;
  color: var(--c-muted);
  transition: color var(--speed) var(--ease), padding-left var(--speed) var(--ease);
}

.is-enhanced .areas__trigger::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: var(--c-gold);
  transition: width var(--speed) var(--ease);
}

.is-enhanced .areas__item.is-active .areas__trigger {
  color: var(--c-blue);
  padding-left: 26px;
}

.is-enhanced .areas__item.is-active .areas__trigger::before {
  width: 14px;
}

.is-enhanced .areas__desc {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40%;
  margin-top: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--c-line);
  padding-left: clamp(28px, 3.5vw, 56px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 350ms var(--ease), transform 350ms var(--ease),
              visibility 0s linear 350ms;
}

.is-enhanced .areas__desc::before {
  content: "";
  width: 44px;
  height: 2px;
  background: var(--c-gold);
  margin-bottom: 24px;
}

.is-enhanced .areas__desc p {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.7;
  color: var(--c-text);
}

.is-enhanced .areas__item.is-active .areas__desc {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 350ms var(--ease), transform 350ms var(--ease),
              visibility 0s;
}

/* --------------------------------------------------------------------------
   10. Featured work
   -------------------------------------------------------------------------- */
.work__heading {
  font-size: var(--fs-h2);
  max-width: 22ch;
  margin-bottom: clamp(44px, 5vw, 80px);
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  padding-block: clamp(36px, 4vw, 64px);
  border-top: 1px solid var(--c-line);
}

.feature--flip .feature__media {
  order: 2;
}

.feature--flip .feature__content {
  order: 1;
}

.feature__media {
  overflow: hidden;
  border-radius: var(--radius-media);
}

.feature__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.feature:hover .feature__media img {
  transform: scale(1.03);
}

/* Brand plates — deliberate graphic panels for organisations
   without supplied photography. */
.feature__media--plate {
  background: var(--c-tint);
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}

.feature__media--plate img {
  width: 56%;
  aspect-ratio: auto;
  object-fit: contain;
}

.feature:hover .feature__media--plate img {
  transform: none;
}

/* The Periscope mark carries its own solid ground, so it fills the plate. */
.feature__media--plate-full {
  border: none;
  padding: 0;
}

.feature__media--plate-full img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.feature__role {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold);
}

.feature__title {
  font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.5rem);
  margin: 10px 0 20px;
}

.feature__content p:not(.feature__role) {
  color: var(--c-muted);
  max-width: 52ch;
}

.feature__content .link-arrow {
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   11. Experience
   -------------------------------------------------------------------------- */
.experience__intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.experience__intro h2 {
  font-size: var(--fs-h2);
  max-width: 16ch;
}

.experience__body p {
  color: var(--c-muted);
  max-width: 52ch;
}

.experience__body .btn {
  margin-top: clamp(24px, 3vw, 40px);
}

/* Career timeline — horizontal progression on desktop */
.timeline {
  display: flex;
  position: relative;
  margin-top: clamp(48px, 6vw, 88px);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 1px;
  background: var(--c-line);
}

.timeline__item {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding: 26px 12px 0 0;
}

.timeline__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-tint);
  border: 2px solid var(--c-blue);
  transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

.timeline__item--current .timeline__dot {
  background: var(--c-gold);
  border-color: var(--c-gold);
}

.timeline__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 0.85rem + 0.45vw, 1.2rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--c-text);
  transition: color var(--speed) var(--ease);
}

.timeline__item:hover .timeline__name {
  color: var(--c-blue);
}

/* Gentle stagger on first reveal */
html.js .timeline .timeline__item[data-reveal]:nth-child(2) { transition-delay: 70ms; }
html.js .timeline .timeline__item[data-reveal]:nth-child(3) { transition-delay: 140ms; }
html.js .timeline .timeline__item[data-reveal]:nth-child(4) { transition-delay: 210ms; }
html.js .timeline .timeline__item[data-reveal]:nth-child(5) { transition-delay: 280ms; }
html.js .timeline .timeline__item[data-reveal]:nth-child(6) { transition-delay: 350ms; }

/* --------------------------------------------------------------------------
   12. Speaking — two independent equal-height panels
   -------------------------------------------------------------------------- */
.speaking__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  align-items: stretch;
}

.speaking__panel {
  background: var(--c-ink);
  color: var(--c-text-inverse);
  border-radius: var(--radius-media);
  padding: clamp(32px, 4.5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.speaking__panel h2 {
  font-size: var(--fs-h2);
  color: var(--c-white);
  max-width: 18ch;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.speaking__panel p {
  color: var(--c-muted-inverse);
  max-width: 54ch;
}

.speaking__panel .btn {
  margin-top: clamp(28px, 3.5vw, 44px);
  align-self: flex-start;
}

.speaking__media {
  border-radius: var(--radius-media);
  overflow: hidden;
  min-height: 100%;
}

.speaking__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 28%;
}

/* --------------------------------------------------------------------------
   13. Periscope (quiet centred passage)
   -------------------------------------------------------------------------- */
.periscope__inner {
  max-width: 760px;
  text-align: center;
}

.periscope__inner h2 {
  font-size: var(--fs-h2);
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* One uniform, centred body-copy block, matched to the hero lede */
.periscope__inner p {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  color: var(--c-muted);
}

.periscope__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: center;
  margin-top: clamp(44px, 5.5vw, 80px);
}

/* --------------------------------------------------------------------------
   13b. Periscope Podcast video grid
   -------------------------------------------------------------------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
  margin-top: clamp(44px, 5.5vw, 80px);
}

.video-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--c-ink);
  cursor: pointer;
}

.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.video-card__thumb:hover img {
  transform: scale(1.03);
}

/* Subtle ink overlay on hover — keeps the tiles editorial, not card-like */
.video-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 43, 58, 0);
  transition: background-color var(--speed) var(--ease);
  pointer-events: none;
}

.video-card__thumb:hover::after,
.video-card__thumb:focus-visible::after {
  background: rgba(8, 43, 58, 0.16);
}

.video-card__thumb.is-playing::after {
  content: none;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(8, 43, 58, 0.78);
  transition: background-color var(--speed) var(--ease);
}

.video-card__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--c-white);
}

.video-card__thumb:hover .video-card__play,
.video-card__thumb:focus-visible .video-card__play {
  background: var(--c-blue);
}

.video-card__thumb.is-playing {
  cursor: default;
}

.video-card__thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* One-time sequential reveal */
html.js .video-card[data-reveal]:nth-child(2) { transition-delay: 90ms; }
html.js .video-card[data-reveal]:nth-child(3) { transition-delay: 180ms; }
html.js .video-card[data-reveal]:nth-child(4) { transition-delay: 270ms; }
html.js .video-card[data-reveal]:nth-child(5) { transition-delay: 360ms; }
html.js .video-card[data-reveal]:nth-child(6) { transition-delay: 450ms; }

/* --------------------------------------------------------------------------
   14. Newsletter
   -------------------------------------------------------------------------- */
.newsletter__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.newsletter__copy h2 {
  font-size: var(--fs-h2);
  max-width: 16ch;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.newsletter__copy p {
  color: var(--c-muted);
  max-width: 52ch;
}

.newsletter__panel {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-media);
  padding: clamp(28px, 3.5vw, 52px);
}

.newsletter__form-heading {
  font-size: var(--fs-h3);
  margin-bottom: 26px;
}

.field {
  margin-bottom: 22px;
}

.field label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}

.field input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--c-text);
  border-radius: 2px 2px 0 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--c-text);
  padding: 10px 2px;
  transition: border-color var(--speed) var(--ease);
}

.field input:focus {
  outline: none;
  border-bottom-color: var(--c-blue);
}

.newsletter__form .btn {
  margin-top: 8px;
}

.newsletter__note {
  margin-top: 18px;
  font-size: 0.8125rem;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   15. Media and recognition
   -------------------------------------------------------------------------- */
.media__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.media__intro h2 {
  font-size: var(--fs-h2);
  max-width: 16ch;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.media__intro p {
  color: var(--c-muted);
  max-width: 52ch;
}

.media__intro .link-arrow {
  margin-top: 28px;
}

/* Quiet editorial panels — premium, not SaaS cards */
.media__list,
.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.media__list li,
.panel-grid li {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
  background: var(--c-tint);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-media);
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 28px);
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.media__list li::before,
.panel-grid li::before {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--c-gold);
  margin-bottom: 14px;
}

.media__list li:hover,
.media__list li:focus-within {
  border-color: var(--c-blue);
  color: var(--c-blue);
}

/* Linked item — same panel styling, whole panel clickable, quiet cue only */
.media__list li:has(a) {
  position: relative;
}

.media__list li a {
  color: inherit;
}

.media__list li a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.media__list li a:focus-visible {
  outline: none;
}

.media__arrow {
  display: inline-block;
  transition: transform var(--speed) var(--ease);
}

.media__list li:hover .media__arrow,
.media__list li:focus-within .media__arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   16. Final call to action
   -------------------------------------------------------------------------- */
.closing {
  background: var(--c-ink);
  color: var(--c-text-inverse);
  padding-block: var(--sect) var(--sect-tight);
}

.closing__title {
  font-size: var(--fs-h2-lg);
  color: var(--c-white);
  letter-spacing: -0.01em;
  max-width: 14ch;
}

.closing__body {
  margin-top: clamp(22px, 3vw, 36px);
  max-width: 56ch;
  color: var(--c-muted-inverse);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  margin-top: clamp(30px, 4vw, 52px);
}

/* --------------------------------------------------------------------------
   17. Footer (continues the dark close)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-ink);
  color: var(--c-muted-inverse);
  padding-block: var(--sect-tight) 40px;
}

.site-footer .container > :first-child {
  border-top: 1px solid var(--c-line-inverse);
  padding-top: var(--sect-tight);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: clamp(32px, 4vw, 64px);
}

/* Non-destructive window framing (same technique as the header): the
   artwork's transparent padding is cropped so the wordmark's visual top
   aligns with the Explore / Connect / Newsletter column titles. */
.site-footer__brand {
  width: min(230px, 60vw);
  height: 60px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

/* Pull the artwork up so the wordmark's ink starts at the window top,
   level with the Explore / Connect / Newsletter headings. */
.site-footer__brand img {
  width: min(230px, 60vw);
  height: auto;
  margin-top: max(-45px, -11.7vw);
}

.site-footer__title {
  font-size: var(--fs-label);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: 18px;
}

.site-footer__bio p,
.site-footer__newsletter p {
  font-size: var(--fs-small);
  max-width: 34ch;
}

.site-footer__nav a,
.site-footer__social a {
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--c-muted-inverse);
  padding: 5px 0;
  transition: color var(--speed) var(--ease);
}

.site-footer__nav a:hover,
.site-footer__social a:hover {
  color: var(--c-gold);
}

.site-footer__newsletter .btn {
  margin-top: 22px;
}

.site-footer__legal {
  border-top: 1px solid var(--c-line-inverse);
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 24px;
}

.site-footer__legal p {
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   17b. Internal pages — shared patterns built from the homepage system
   -------------------------------------------------------------------------- */

/* Active navigation state */
.site-nav__list a[aria-current="page"] {
  color: var(--c-blue);
}

.site-nav__list a[aria-current="page"]::after {
  width: 100%;
}

.mobile-menu__list a[aria-current="page"] {
  color: var(--c-gold);
}

/* Page hero */
.page-hero {
  border-bottom: 1px solid var(--c-line);
  /* Top is tighter than the bottom: with no eyebrow above it, the h1 is the
     first thing in the section and needs less lead-in. */
  padding-top: clamp(52px, 7vh, 96px);
  padding-bottom: clamp(60px, 8.5vh, 116px);
}

/* A step below the homepage display size: internal pages are secondary, and
   the smaller setting reads as more composed at these copy lengths.
   `pretty` rather than the inherited `balance`: balance evens the line lengths
   and left the first line short, so lines now fill naturally while still
   avoiding a one-word last line. Other headings keep `balance`. */
.page-hero h1 {
  font-size: clamp(1.85rem, 0.95rem + 2.2vw, 3rem);
  max-width: 20ch;
  text-wrap: pretty;
}

/* Opt-out for headings whose longest tokens cannot pair on a line. Work and
   Leadership is one: "entrepreneurship," and "and transformation" each take
   ~60% of the line, so some single-word line is unavoidable at this size.
   Balancing puts it on the long "entrepreneurship," rather than stranding the
   much shorter "technology". */
.page-hero h1.page-hero__title--balanced {
  text-wrap: balance;
}

/* Measure pulled in from 62ch so the body sits under the heading rather than
   running well past it — the same relationship the homepage lede has. */
.page-hero__lede {
  margin-top: clamp(20px, 2.9vh, 34px);
  max-width: 52ch;
  color: var(--c-muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
}

.page-hero__lede p + p {
  margin-top: 1em;
}

.page-hero--split .page-hero__inner {
  display: grid;
  /* Same 6:5 text-to-visual relationship as the homepage hero. */
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

/* The visual carries the section height, as on the homepage, so the copy
   sits centred inside it rather than the two columns running in parallel.
   Padding stays a touch tighter than the single-column heroes for that reason. */
.page-hero--split {
  padding-top: clamp(44px, 5.5vh, 84px);
  padding-bottom: clamp(44px, 5.5vh, 84px);
}

/* Square rather than the previous 5:6. The portrait heroes were running too
   far down the page; this keeps the visual substantial without over-extending,
   and stays wide enough that nothing clips. */
.page-hero--split .page-hero__media img {
  height: auto;
  aspect-ratio: 1 / 1;
}

/* Portrait: bias the crop upward so the head keeps headroom. */
.page-hero__media--portrait img {
  object-position: 50% 22%;
}

/* Stage conversation (Contact): a much taller source (2:3), so the crop is
   biased higher again to hold both people's heads in frame. */
.page-hero__media--stage img {
  object-position: 50% 15%;
}

/* Brand panel: the lockup is centred, so crop it symmetrically. */
.page-hero__media--panel img {
  object-position: 50% 50%;
}

/* Wide photographs whose subjects reach the edges of the frame: the box keeps
   the source ratio instead of cropping inward, so nobody is cut off. Held at
   every width. --group is the founders photo; --still the Periscope episode
   frame, which is exactly 8:5 and therefore neither cropped nor stretched. */
.page-hero--split .page-hero__media--group img,
.page-hero--split .page-hero__media--still img {
  aspect-ratio: 8 / 5;
  object-position: 50% 50%;
}

.page-hero__media {
  border-radius: var(--radius-media);
  overflow: hidden;
}

.page-hero__media img {
  width: 100%;
  height: clamp(320px, 44vh, 480px);
  object-fit: cover;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 3.8vh, 44px);
}

/* .link-arrow reserves 6px at the bottom for its underline, so its text sits
   above its own box centre and read ~2.5px high next to the button. Matching
   that reserve on top makes the box symmetric, so centring the box now centres
   the text. Scoped to the hero row — link-arrows elsewhere are unchanged. */
.page-hero__actions .link-arrow {
  padding-top: 6px;
}

/* Wide editorial image band */
.image-band__frame {
  border-radius: var(--radius-media);
  overflow: hidden;
}

.image-band__frame img {
  width: 100%;
  height: clamp(260px, 40vw, 540px);
  object-fit: cover;
}

/* Editorial split: heading (sticky) left, content right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: start;
}

.split__head {
  position: sticky;
  top: 120px;
}

.split__head h2 {
  font-size: var(--fs-h2);
  max-width: 14ch;
}

.split__media {
  margin-top: clamp(28px, 3.5vw, 48px);
  border-radius: var(--radius-media);
  overflow: hidden;
}

.split__media img {
  width: 100%;
  display: block;
}

.prose p {
  color: var(--c-muted);
  max-width: 62ch;
}

.prose p + p {
  margin-top: 1.4em;
}

/* Fine-rule lists */
.rule-list {
  border-top: 1px solid var(--c-line);
}

.rule-list > li {
  border-bottom: 1px solid var(--c-line);
  padding-block: clamp(16px, 1.9vw, 26px);
}

.rule-list--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.5vw, 56px);
}

.rule-list__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  letter-spacing: -0.01em;
  color: var(--c-text);
}

.rule-list__meta {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 8px;
}

.rule-list p {
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin-top: 6px;
  max-width: 60ch;
}

/* Organisation rows: name left, narrative right */
.org-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(14px, 3vw, 64px);
  padding-block: clamp(26px, 3.2vw, 48px);
  border-top: 1px solid var(--c-line);
}

.org-row:last-child {
  border-bottom: 1px solid var(--c-line);
}

.org-row h3 {
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem);
}

.org-row__role {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold);
  margin-top: 10px;
}

.org-row__body p {
  color: var(--c-muted);
  max-width: 58ch;
}

.org-row__body p + p {
  margin-top: 1em;
}

/* --------------------------------------------------------------------------
   Board and advisory — numbered editorial columns.
   No cards, shadows or rounded boxes: a hairline at the left edge of each
   column does all the framing, so the composition stays flat and quiet.
   Base state is the stacked mobile treatment; columns are layered on above.
   -------------------------------------------------------------------------- */
.board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.board-grid__item {
  padding-block: clamp(24px, 3.4vw, 34px);
  border-top: 1px solid var(--c-line);
}

.board-grid__item:last-child {
  border-bottom: 1px solid var(--c-line);
}

/* Decorative: the <ol> already conveys order to assistive tech. */
.board-grid__num {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
}

.board-grid__org {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(1.12rem, 1rem + 0.42vw, 1.4rem);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.board-grid__role {
  display: block;
  margin-top: 7px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-text);
}

.board-grid__desc {
  margin-top: clamp(10px, 1.1vw, 14px);
  font-size: var(--fs-small);
  color: var(--c-muted);
  max-width: 42ch;
}

/* Tablet and up: two columns, framed by vertical rules instead of horizontal
   ones. The rules sit at the left edge of every column and stretch to the
   tallest item in the row, which is what keeps the horizontal rhythm even. */
@media (min-width: 768px) {
  /* Columns are driven by the space actually available, not by viewport
     width: between 1024px and 1280px the sticky heading still takes its
     share, so a fixed two-column rule would squeeze the copy to ~27
     characters. auto-fit drops to a single wide column there instead.
     min() keeps the track from ever exceeding a narrow container. */
  .board-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    column-gap: clamp(26px, 2.8vw, 44px);
    row-gap: clamp(38px, 4vw, 60px);
  }

  .board-grid__item {
    padding-block: 0;
    padding-left: clamp(18px, 1.9vw, 26px);
    border-top: 0;
    border-left: 1px solid var(--c-line);
  }

  .board-grid__item:last-child {
    border-bottom: 0;
  }

  /* The column already sets the measure; the ch cap is only for the stacked
     single-column case, where there is nothing else to hold the line length. */
  .board-grid__desc {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Accordion — editorial expandable rows.

   Square edges and strong rules rather than soft cards: the horizontal lines
   carry the structure, so no element needs a border box of its own. The open
   row is a filled block in Deep Ink Blue with reversed type, and its answer
   sits on the plain section background underneath rather than in a tint —
   that is what keeps the whole thing reading as editorial, not as a stack
   of panels.

   Colours are scoped to the component and drawn only from the brand set:
   #082B3A ink, #014A71 blue, #C59000 gold, #FFFFFF.
   Without JavaScript every panel stays open, so the copy is always readable.
   -------------------------------------------------------------------------- */
.accordion {
  /* far stronger than the site hairline, which would disappear here */
  --acc-line: rgba(8, 43, 58, 0.38);
  --acc-hover: rgba(1, 74, 113, 0.05);
  border-top: 1px solid var(--acc-line);
}

.accordion__item {
  border-bottom: 1px solid var(--acc-line);
}

.accordion__heading {
  margin: 0;
  font: inherit;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 30px);
  width: 100%;
  margin: 0;
  padding: clamp(22px, 2.4vw, 31px) clamp(12px, 1.3vw, 18px);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  /* stepped down from the previous 1.35rem ceiling so rows scan quickly */
  font-size: clamp(0.98rem, 0.93rem + 0.28vw, 1.15rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  transition: background-color var(--speed) var(--ease),
              color var(--speed) var(--ease);
}

.accordion__trigger:hover {
  background: var(--acc-hover);
}

.accordion__trigger:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: -2px;
}

/* Open row: filled block, reversed type, square corners. */
.accordion__item.is-open .accordion__trigger {
  background: var(--c-ink);
  color: var(--c-white);
}

.accordion__item.is-open .accordion__trigger:hover {
  background: var(--c-ink);
}

.accordion__item.is-open .accordion__trigger:focus-visible {
  outline-color: var(--c-gold);
}

/* Plus that rotates into a minus — no icon font, no asset. Inherits the
   trigger colour, so it reverses to white with the open row. */
.accordion__icon {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 15px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 320ms var(--ease);
}

.accordion__icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.accordion__item.is-open .accordion__icon::after {
  transform: translateY(-50%) rotate(0deg);
}

/* 0fr -> 1fr animates to the panel's natural height without measuring it in
   JavaScript, so nothing has to be re-measured on resize. */
.accordion__panel {
  display: grid;
  grid-template-rows: 1fr;
}

html.js .accordion__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease);
}

html.js .accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__inner {
  overflow: hidden;
}

.accordion__inner p {
  margin: 0;
  padding: clamp(20px, 2.2vw, 28px) clamp(12px, 1.3vw, 18px) clamp(26px, 2.8vw, 36px);
  max-width: 60ch;
  color: var(--c-muted);
  font-size: var(--fs-small);
  line-height: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  html.js .accordion__panel {
    transition: none;
  }

  .accordion__trigger,
  .accordion__icon::before,
  .accordion__icon::after {
    transition: none;
  }
}

/* Quiet chips */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.chip-list li {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-text);
  padding: 12px 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  background: var(--c-tint);
}

.chip-list--inverse li {
  background: transparent;
  border-color: var(--c-line-inverse);
  color: var(--c-text-inverse);
}

/* Dark call-to-action band */
.cta-band {
  background: var(--c-ink);
  color: var(--c-text-inverse);
  padding-block: var(--sect-tight);
}

.cta-band h2 {
  color: var(--c-white);
  font-size: var(--fs-h2);
  max-width: 20ch;
}

.cta-band p {
  color: var(--c-muted-inverse);
  max-width: 58ch;
  margin-top: clamp(16px, 2vw, 24px);
}

.cta-band .btn {
  margin-top: clamp(26px, 3.2vw, 40px);
}

/* Form extensions — selects and textareas in the established field language */
.field select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--c-text);
  border-radius: 2px 2px 0 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--c-text);
  padding: 10px 2px;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease);
}

.field select:focus {
  outline: none;
  border-bottom-color: var(--c-blue);
}

.field textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  padding: 12px 14px;
  transition: border-color var(--speed) var(--ease);
}

.field textarea:focus {
  outline: none;
  border-color: var(--c-blue);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 2.5vw, 36px);
}

.field--full {
  grid-column: 1 / -1;
}

.form-note {
  margin-top: 18px;
  font-size: 0.8125rem;
  color: var(--c-muted);
}

/* Episode titles on the Periscope page */
.video-card__title {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--c-text);
  margin-top: 14px;
}

.panel-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Contact: the enquiry form carries more fields than the newsletter sign-up,
   so the panel takes the larger share and the two-column fields get room to
   breathe (long select options such as "Speaking engagement" need it). */
.newsletter__grid--wide {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

/* Anchor target clears the sticky header. Scoped to the Contact form so no
   other page's anchor behaviour changes. */
#contact-form {
  scroll-margin-top: 92px;
}

/* Section heading utility for internal pages */
.section-title {
  font-size: var(--fs-h2);
  max-width: 22ch;
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* Internal-page responsive recomposition */
@media (max-width: 1023px) {
  .page-hero--split .page-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 40px);
  }

  /* Stacked: the visual becomes square and sizes to its own width, mirroring
     how the homepage hero recomposes. Crop moves up to protect the head. */
  .page-hero--split .page-hero__media img {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .page-hero__media--portrait img {
    object-position: 50% 25%;
  }

  .page-hero__media--stage img {
    object-position: 50% 15%;
  }

  .page-hero--split .page-hero__media--group img,
  .page-hero--split .page-hero__media--still img {
    aspect-ratio: 8 / 5;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 40px);
  }

  .split__head {
    position: static;
  }

  .org-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .panel-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .rule-list--cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel-grid,
  .panel-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-hero__media img {
    height: clamp(260px, 60vw, 340px);
  }

  /* Portrait format on mobile, as the homepage hero does, so the full
     subject reads at narrow widths instead of being cropped to a band. */
  .page-hero--split .page-hero__media img {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .page-hero__media--portrait img {
    object-position: 50% 20%;
  }

  .page-hero__media--stage img {
    object-position: 50% 15%;
  }

  .page-hero--split .page-hero__media--group img,
  .page-hero--split .page-hero__media--still img {
    aspect-ratio: 8 / 5;
  }
}

/* --------------------------------------------------------------------------
   17c. Form validation states — built from the existing field language
   -------------------------------------------------------------------------- */
.field__error {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--c-error);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-bottom-color: var(--c-error);
}

.field textarea[aria-invalid="true"] {
  border-color: var(--c-error);
}

/* Honeypot. Off-canvas rather than display:none, because some bots skip
   fields that are not rendered at all. Never announced or focusable. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit button while the request is in flight. */
.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

.form-status {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-control);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.form-status--error {
  border: 1px solid var(--c-error);
  color: var(--c-error);
  background: var(--c-error-tint);
}

.form-status--success {
  border: 1px solid var(--c-blue);
  color: var(--c-blue);
  background: var(--c-blue-tint);
}

/* --------------------------------------------------------------------------
   17e. Newsletter — "Each edition includes" list
   Scoped to the Newsletter page: the shared .rule-list used on About, Work and
   Leadership and Speaking and Media is deliberately left alone.
   -------------------------------------------------------------------------- */
.section--editions {
  padding-block: clamp(88px, 11vw, 168px);
}

.split--editions {
  gap: clamp(36px, 7vw, 128px);
}

.edition-list {
  /* rows bleed this far past the text on both sides, so the hover tint has
     breathing room while the text itself stays aligned to the column */
  --edition-bleed: clamp(10px, 1.1vw, 16px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(36px, 4.5vw, 72px);
  counter-reset: edition;
}

.edition-list > li {
  counter-increment: edition;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 1.5vw, 20px);
  align-items: baseline;
  padding-block: clamp(21px, 2.4vw, 32px);
  padding-inline: var(--edition-bleed);
  margin-inline: calc(-1 * var(--edition-bleed));
  border-bottom: 1px solid var(--c-line);
  border-radius: 3px;
  transition: background-color var(--speed) var(--ease);
}

/* Close the top of both columns. */
.edition-list > li:nth-child(-n + 2) {
  border-top: 1px solid var(--c-line);
}

.edition-list > li::before {
  content: counter(edition, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  color: var(--c-gold);
}

.edition-list__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.28rem);
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--c-text);
}

/* Desktop pointers only: a quiet tint, no movement. */
@media (hover: hover) and (pointer: fine) {
  .edition-list > li:hover {
    background-color: var(--c-tint);
  }
}

@media (max-width: 699px) {
  .edition-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* single column — only the first row needs a top rule */
  .edition-list > li:nth-child(2) {
    border-top: none;
  }
}

/* --------------------------------------------------------------------------
   18. Reveal on scroll (progressive enhancement)
   -------------------------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .feature:hover .feature__media img {
    transform: none;
  }

  /* Marquee becomes a static, wrapped row */
  .marquee__track {
    animation: none;
    width: auto;
  }

  .marquee__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee__viewport .marquee__list[aria-hidden="true"] {
    display: none;
  }

  .marquee__list {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  /* Gallery becomes a static, wrapped image wall */
  .gallery__track {
    animation: none;
    width: auto;
  }

  .gallery__set[aria-hidden="true"] {
    display: none;
  }

  .gallery__set {
    flex-wrap: wrap;
    row-gap: var(--tile-gap);
    padding-inline: var(--gutter);
  }

  html.js .timeline .timeline__item[data-reveal] {
    transition-delay: 0s;
  }

  .is-enhanced .areas__desc,
  .is-enhanced .areas__item.is-active .areas__desc,
  .is-enhanced .areas__trigger,
  .is-enhanced .areas__trigger::before {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   18b. Headline reveal
   Editorial headings rise a short distance while fading in. Section titles
   stagger line by line; the homepage hero staggers word by word. Motion only —
   type, colour and size are untouched, and the markup is fully readable before
   JavaScript runs (everything here is gated behind html.js).
   -------------------------------------------------------------------------- */
html.js .hx-l {
  display: block;
}

html.js .hx-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  will-change: transform, opacity;
}

html.js .hx-in .hx-w {
  opacity: 1;
  transform: none;
  transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Released once the reveal has finished so the compositor can let the layer go. */
html.js .hx-done .hx-w {
  will-change: auto;
}

/* Homepage hero supporting copy. The headline leads, the paragraph follows a
   beat later and the buttons sit just behind it, so the hero resolves as one
   continuous movement rather than three separate events. Homepage only:
   internal pages use .page-hero__lede / .page-hero__actions and are untouched. */
html.js .hero__lede,
html.js .hero__actions {
  opacity: 0;
  transform: translateY(6px);
}

html.js .hero.is-revealed .hero__lede,
html.js .hero.is-revealed .hero__actions {
  opacity: 1;
  transform: none;
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .hero.is-revealed .hero__lede { transition-delay: 300ms; }
html.js .hero.is-revealed .hero__actions { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .hx-w,
  html.js .hx-in .hx-w,
  html.js .hero__lede,
  html.js .hero__actions {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   19. Responsive — tablet (≤1023px)
   -------------------------------------------------------------------------- */
/* The header CTA stays pinned far right whenever the desktop navigation
   shows; below 1280px the nav collapses to the compact menu instead of
   crowding or dropping the CTA. */
@media (max-width: 1439px) {
  .brand {
    width: 180px;
    height: 52px;
  }

  .brand img {
    width: 180px;
  }
}

@media (max-width: 1279px) {
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-header__cta {
    margin-left: auto;
  }

  .nav-toggle {
    margin-left: 0;
  }
}

@media (max-width: 659px) {
  .site-header__cta {
    display: none;
  }

  .nav-toggle {
    margin-left: auto;
  }
}

@media (max-width: 1023px) {
  .site-header__inner {
    min-height: 72px;
  }

  .mobile-menu {
    top: 72px;
  }

  .brand {
    width: 180px;
    height: 50px;
  }

  .brand img {
    width: 180px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
  }

  .hero__title {
    max-width: none;
  }

  .impact__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro__grid,
  .experience__intro,
  .newsletter__grid,
  .media__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 5vw, 48px);
  }

  .intro__text {
    grid-column: 1 / -1;
  }

  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
  }

  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Speaking panels stack: text box, then image box */
  .speaking__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .speaking__media {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 5vw, 48px);
  }
}

/* --------------------------------------------------------------------------
   20. Responsive — small tablet (≤899px): recomposed stacked hero
   headline → portrait → supporting text → CTAs
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(36px, 8vw, 64px);
  }

  .hero__copy {
    display: contents;
  }

  .hero__title {
    order: 1;
  }

  .hero__media {
    order: 2;
    max-width: none;
    justify-self: stretch;
    margin-top: 4px;
  }

  .hero__media img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-position: 50% 22%;
    transform: none;
  }

  .hero__lede {
    order: 3;
    margin-top: 0;
  }

  .hero__actions {
    order: 4;
    margin-top: 4px;
  }
}

/* --------------------------------------------------------------------------
   21. Responsive — mobile (≤699px)
   -------------------------------------------------------------------------- */
@media (max-width: 699px) {
  .hero__media img {
    aspect-ratio: 4 / 5;
    object-position: 50% 15%;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .impact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .impact__item {
    padding-block: 24px;
  }

  .impact__item h3,
  .impact__item p {
    max-width: none;
  }

  .feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature--flip .feature__media {
    order: 1;
  }

  .feature--flip .feature__content {
    order: 2;
  }

  .video-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .periscope__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .periscope__actions .link-arrow {
    align-self: center;
  }

  .newsletter__panel {
    padding: 24px 20px 28px;
  }

  .gallery {
    --tile-h: clamp(140px, 38vw, 180px);
    --tile-gap: 12px;
  }

  /* Vertical career timeline */
  .timeline {
    display: block;
    margin-top: clamp(36px, 8vw, 48px);
  }

  .timeline::before {
    top: 6px;
    bottom: 6px;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .timeline__item {
    padding: 0 0 26px 32px;
  }

  .timeline__item:last-child {
    padding-bottom: 0;
  }

  .timeline__dot {
    top: 3px;
  }

  .media__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .closing__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .closing__actions .link-arrow {
    align-self: flex-start;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .btn {
    width: 100%;
  }

  .site-header .btn,
  .mobile-menu .btn {
    width: auto;
  }

  .mobile-menu .btn {
    width: 100%;
  }
}