/*
Theme Name: Move the Many
Theme URI: https://movethemany.com.au
Author: High St Digital
Author URI: https://highstdigital.com.au
Description: Custom production theme for Move the Many — human-centred communication and learning design. Built from the approved homepage wireframe.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: move-the-many
*/

:root {
  --black: #0c0c0c;
  --white: #fffdf7;
  --paper: #f7f3ea;
  --paper-deep: #efe8d8;
  --comms: #3af0b2;
  --comms-dark: #1d7859;
  --comms-light: #9df8d9;
  --learning: #b07bff;
  --learning-dark: #583e80;
  --learning-light: #d8bdff;
  --integrated: #46d8ff;
  --integrated-dark: #236c80;
  --integrated-light: #a3ecff;
  --ink: #0c0c0c;
  --ink-soft: rgba(12, 12, 12, 0.68);
  --ink-faint: rgba(12, 12, 12, 0.5);
  --white-soft: rgba(255, 253, 247, 0.78);
  --line: rgba(12, 12, 12, 0.12);
  --line-light: rgba(255, 253, 247, 0.18);
  --display: "Work Sans", sans-serif;
  --body: "Roboto Flex", sans-serif;
  --wrap: min(1180px, calc(100vw - 44px));
  --spectrum: linear-gradient(128deg, var(--learning) 0%, var(--integrated) 52%, var(--comms) 100%);

  /* Page accent — overridden per template so each service area reads in its own colour */
  --accent: var(--integrated);
  --accent-dark: var(--integrated-dark);
  --accent-light: var(--integrated-light);
}

body.page-template-learning-design {
  --accent: var(--learning);
  --accent-dark: var(--learning-dark);
  --accent-light: var(--learning-light);
}

body.page-template-communication-change {
  --accent: var(--comms);
  --accent-dark: var(--comms-dark);
  --accent-light: var(--comms-light);
}

/* About runs the site's default (cyan/integrated) accent explicitly, and
   Contact takes mint -- both were previously falling back to :root's
   --accent with no page-specific override. Added as part of the 2026
   internal-pages upgrade pass so both pages colour-code consistently with
   the rest of the site instead of silently sharing the default. */
body.page-template-about {
  --accent: var(--integrated);
  --accent-dark: var(--integrated-dark);
  --accent-light: var(--integrated-light);
}

body.page-template-contact {
  --accent: var(--comms);
  --accent-dark: var(--comms-dark);
  --accent-light: var(--comms-light);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-optical-sizing: auto;
  line-height: 1.6;
  overflow-x: clip;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.grain-veil {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

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

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

button {
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
}

p,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  letter-spacing: -0.01em;
  line-height: 1.02;
}

h1 {
  max-width: 820px;
  font-size: clamp(2.4rem, 5.2vw, 4.7rem);
  font-weight: 900;
  font-style: italic;
}

h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0;
}

h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 700;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

::selection {
  background: var(--comms);
  color: var(--black);
}

.content-wrap {
  width: var(--wrap);
  margin: 0 auto;
}

/* ---------- Movement rail (scroll progress) ---------- */

.movement-rail {
  position: fixed;
  right: 26px;
  top: 50%;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

body.no-hero .movement-rail {
  display: none;
}

.movement-rail.is-active {
  opacity: 1;
}

.rail-track {
  position: relative;
  width: 2px;
  height: 148px;
  background: rgba(12, 12, 12, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--comms), var(--integrated), var(--learning));
  border-radius: 999px;
  transition: height 120ms linear;
}

.rail-label {
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .movement-rail {
    display: none;
  }
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(22px, 4vw, 58px);
  width: 100%;
  padding: 26px max(22px, calc((100vw - 1180px) / 2));
  color: var(--white);
  background: transparent;
  transition: padding 220ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.site-header.on-light {
  color: var(--ink);
  background: rgba(255, 253, 247, 0.86);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--line);
}

.site-header.is-scrolled {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Internal (non-front-page) headers start on a light body, so they render on-light by default */
.no-hero .site-header {
  color: var(--ink);
  background: rgba(255, 253, 247, 0.86);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--line);
}

.brand {
  position: relative;
  display: block;
}

.brand-logo-light,
.brand-logo-dark {
  display: block;
  width: clamp(160px, 17vw, 220px);
  transition: opacity 200ms ease;
  filter: drop-shadow(0 3px 10px rgba(12, 12, 12, 0.25));
}

.brand-logo-light {
  /* Plain static wordmark for the dark hero background — no colour-cycle
     here, it read as too busy over the video/gradient hero. */
}

.brand-logo-dark {
  position: absolute;
  inset: 0;
  aspect-ratio: 1163 / 96;
  background-color: var(--black);
  -webkit-mask-image: url("assets/logo-wordmark-black.png");
  mask-image: url("assets/logo-wordmark-black.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  opacity: 0;
  animation: logoColorCycle 48s ease-in-out infinite;
}

.site-header.on-light .brand-logo-light,
.no-hero .brand-logo-light {
  opacity: 0;
}

.site-header.on-light .brand-logo-dark,
.no-hero .brand-logo-dark {
  opacity: 1;
}

@keyframes logoColorCycle {
  0%,
  8% {
    background-color: var(--black);
  }
  20%,
  30% {
    background-color: var(--comms);
  }
  45%,
  55% {
    background-color: var(--learning);
  }
  70%,
  80% {
    background-color: var(--integrated);
  }
  92%,
  100% {
    background-color: var(--black);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo-dark {
    animation: none;
  }
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 34px);
  font-size: 0.94rem;
  font-weight: 500;
}

.nav-links a,
.nav-action,
.menu-toggle {
  transition: opacity 180ms ease, transform 180ms ease;
}

.nav-links a:hover,
.nav-action:hover,
.menu-toggle:hover {
  opacity: 0.68;
}

.nav-links a.current-menu-item,
.nav-links a[aria-current="page"] {
  opacity: 0.6;
}

.nav-action {
  padding: 12px 20px;
  color: var(--black);
  background: var(--white);
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-style: italic;
  font-size: 0.92rem;
  box-shadow: 0 10px 26px rgba(70, 216, 255, 0.22);
}

.site-header.on-light .nav-action,
.no-hero .nav-action {
  color: var(--white);
  background: var(--black);
  box-shadow: none;
}

.menu-toggle {
  display: none;
  position: relative;
  z-index: 62;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(127, 127, 127, 0.16);
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 220ms ease, opacity 180ms ease;
}

.menu-toggle span:nth-child(1) {
  transform: translateY(-7px);
}

.menu-toggle span:nth-child(3) {
  transform: translateY(7px);
}

.site-header.menu-open .menu-toggle span:nth-child(1) {
  transform: rotate(45deg);
}

.site-header.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.site-header.menu-open .menu-toggle span:nth-child(3) {
  transform: rotate(-45deg);
}

.mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 14px;
  right: 14px;
  z-index: 60;
  display: none;
  padding: 18px;
  color: var(--white);
  background: rgba(12, 12, 12, 0.92);
  border: 1px solid rgba(255, 253, 247, 0.12);
  backdrop-filter: blur(20px);
  border-radius: 18px;
}

.mobile-menu ul {
  display: block;
}

.mobile-menu a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255, 253, 247, 0.12);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
}

.mobile-menu li:last-child a {
  border-bottom: 0;
  color: var(--integrated);
}

.site-header.menu-open .mobile-menu {
  display: block;
}

/* ---------- Buttons ---------- */

.button,
.panel-cta,
.finale-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-style: italic;
}

.button-primary {
  padding: 15px 26px;
  color: var(--black);
  background: var(--white);
  box-shadow: 0 14px 30px rgba(12, 12, 12, 0.14);
}

.button-primary:hover {
  box-shadow: 0 14px 34px rgba(12, 12, 12, 0.22);
}

.section-light .button-primary,
.section-paper .button-primary {
  background: var(--black);
  color: var(--white);
  box-shadow: none;
}

.button-dark {
  margin-top: 30px;
  padding: 15px 26px;
  color: var(--white);
  background: var(--black);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 600;
  font-style: italic;
}

.text-link::after,
.panel-cta::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width 180ms ease;
}

.text-link:hover::after,
.panel-cta:hover::after {
  width: 46px;
}

/* ---------- Ring frame (circular line-drawing motif) ---------- */

.ring-frame {
  position: relative;
  isolation: isolate;
}

.ring-frame::before {
  content: "";
  position: absolute;
  z-index: 2;
  padding: 1.4px;
  border-radius: inherit;
  background: conic-gradient(
    from 200deg,
    transparent 0deg,
    var(--comms) 26deg,
    var(--integrated) 92deg,
    var(--learning) 130deg,
    transparent 162deg,
    transparent 210deg,
    var(--integrated) 268deg,
    var(--comms) 312deg,
    transparent 344deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.porthole-cluster {
  position: relative;
  width: min(480px, 86vw);
  aspect-ratio: 1;
}

.porthole-cluster-compact {
  width: min(560px, 100%);
}

.ring-frame-video {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--comms-dark), var(--integrated-dark) 60%, var(--learning-dark));
  box-shadow: 0 30px 70px rgba(12, 12, 12, 0.35);
}

.ring-frame-video-a {
  top: 0;
  left: 0;
  width: 62%;
  aspect-ratio: 1;
  z-index: 1;
}

.ring-frame-video-b {
  right: 0;
  bottom: 0;
  width: 50%;
  aspect-ratio: 1;
  z-index: 2;
  opacity: 0.8;
}

.porthole-cluster-compact .ring-frame-video-a {
  top: -6%;
  left: -6%;
}

.porthole-cluster-compact .ring-frame-video-b {
  right: -6%;
  bottom: -6%;
}

/* Internal pages only (body.no-hero) -- a bit more separation between the
   fit-cta circle pair's rest positions than the homepage's own fit-cta
   uses, so they read as two things sharing a cluster rather than mostly
   sitting on top of one another before drift even starts. */
body.no-hero .porthole-cluster-compact .ring-frame-video-a {
  top: -14%;
  left: -10%;
}

body.no-hero .porthole-cluster-compact .ring-frame-video-b {
  right: -10%;
  bottom: -14%;
}

.ring-frame-video::before {
  inset: -16px;
  animation: ringTrace 30s ease-in-out infinite;
}

.ring-frame-video-b::before {
  animation-delay: -6s;
}

.ring-frame-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  /* iOS Safari doesn't reliably clip a playing <video> to its parent's
     border-radius/overflow:hidden -- the video's own compositing layer
     can bypass it, especially once the source is swapped for the
     pool-cycling above. clip-path clips the video's own layer directly,
     which Safari does respect, so the circle stays a circle instead of
     showing the video's full rectangle. */
  clip-path: circle(50%);
  -webkit-clip-path: circle(50%);
}

.porthole-cluster .ring-frame-photo[data-custom-media],
.portrait-system .ring-frame-photo[data-custom-media] {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--comms-dark), var(--integrated-dark) 60%, var(--learning-dark));
  box-shadow: 0 30px 70px rgba(12, 12, 12, 0.35);
}

.porthole-cluster .ring-frame-photo[data-custom-media]::before,
.portrait-system .ring-frame-photo[data-custom-media]::before {
  inset: -16px;
  border-radius: 50%;
  animation: ringTrace 30s ease-in-out infinite;
}

.porthole-cluster .ring-frame-photo[data-custom-media] img,
.portrait-system .ring-frame-photo[data-custom-media] img,
.media-feature-visual .ring-frame-photo[data-custom-media] img,
.approach-intro-media .ring-frame-photo[data-custom-media] img,
.step-band-media .ring-frame-photo[data-custom-media] img,
.reach-media .ring-frame-photo[data-custom-media] img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* Soft light + grain over each porthole — these clips are about feel and
   movement, not literal documentary content, so a texture pass keeps them
   reading as mood rather than footage. */
.porthole-texture,
.portrait-texture {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 253, 247, 0.4), transparent 55%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size: cover, 220px 220px;
  mix-blend-mode: overlay;
  opacity: 0.55;
}

.hero-porthole {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: end;
}

.ring-frame-photo {
  border-radius: 26px;
  overflow: hidden;
}

.ring-frame-photo::before {
  inset: -14px 14px 14px -14px;
  border-radius: 26px;
  opacity: 0.75;
}

.ring-frame-portrait {
  width: min(220px, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
}

.ring-frame-portrait::before {
  inset: -12px;
  animation: portraitRingSpin 46s linear infinite;
}

.ring-frame-portrait-b::before {
  animation-duration: 60s;
  animation-direction: reverse;
}

@keyframes portraitRingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ringTrace {
  0% {
    opacity: 0.7;
    transform: rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: rotate(10deg);
  }
  100% {
    opacity: 0.7;
    transform: rotate(0deg);
  }
}

/* ---------- Section base tones ---------- */

.section-light {
  position: relative;
  background: var(--white);
  overflow: clip;
}

.section-paper {
  position: relative;
  background: var(--paper);
  overflow: clip;
}

.section-dark {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: clip;
}

.section-accent {
  position: relative;
  overflow: clip;
  background: var(--spectrum);
  isolation: isolate;
}

/* Communication & Change: .problem and .services are both plain
   .section-paper with no colour change between them, so their base
   padding-bottom/padding-top (45px + 45px) was reading as one oversized
   90px gap. Dropping .services's side leaves .problem's 45px as the
   only gap -- matching the single-side spacing used everywhere else on
   these pages. Scoped to this page only, not a general section rule, so
   it can't catch a pair (like #people following a plain-paper step band
   on About) that already has its own deliberate spacing. */
body.page-template-communication-change .services {
  padding-top: 0;
}

.section-accent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- Hero (front page) ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 130px 0 64px;
  color: var(--white);
  isolation: isolate;
  overflow: clip;
}

.spectrum-field {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 12% 14%, rgba(176, 123, 255, 0.92), transparent 60%),
    radial-gradient(circle at 55% 38%, rgba(70, 216, 255, 0.8), transparent 62%),
    radial-gradient(circle at 84% 80%, rgba(58, 240, 178, 0.95), transparent 58%),
    linear-gradient(128deg, var(--learning) 0%, var(--integrated) 50%, var(--comms) 100%);
  background-size: 160% 160%, 170% 170%, 150% 150%, 180% 180%;
  animation: fieldDrift 24s linear infinite;
}

/* Slow-drifting dust/particle layer for depth — small soft dots at three
   scales, gently rising and looping seamlessly. */
.spectrum-dust {
  position: absolute;
  inset: -12%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, rgba(255, 253, 247, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 253, 247, 0.55) 0 1.4px, transparent 2.4px),
    radial-gradient(circle, rgba(255, 253, 247, 0.35) 0 1px, transparent 2px);
  background-size: 190px 190px, 260px 260px, 130px 130px;
  background-position: 0 0, 60px 100px, 140px 40px;
  animation: dustDrift 46s linear infinite;
}

@keyframes dustDrift {
  0% {
    background-position: 0 0, 60px 100px, 140px 40px;
  }
  100% {
    background-position: -190px -300px, -260px -420px, -130px -260px;
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.hero-arc {
  position: absolute;
  left: 50%;
  bottom: -18vw;
  z-index: 0;
  width: 130vw;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1.4px;
  transform: translateX(-50%);
  background: conic-gradient(from 90deg, transparent 0deg, rgba(255, 253, 247, 0.5) 20deg, transparent 40deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
}

@keyframes fieldDrift {
  0% {
    background-position: 0% 15%, 100% 10%, 8% 6%, 0% 50%;
  }
  25% {
    background-position: 12% 30%, 86% 22%, 18% 16%, 15% 50%;
  }
  50% {
    background-position: 4% 46%, 94% 38%, 10% 28%, 30% 50%;
  }
  75% {
    background-position: 16% 24%, 80% 14%, 20% 10%, 15% 50%;
  }
  100% {
    background-position: 0% 15%, 100% 10%, 8% 6%, 0% 50%;
  }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.5fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

.hero h1 {
  margin-top: -10px;
  color: var(--white);
  text-shadow: 0 4px 18px rgba(12, 12, 12, 0.22);
}

.hero-lede {
  max-width: 640px;
  margin-top: 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.65rem;
  text-shadow: 0 3px 14px rgba(12, 12, 12, 0.18);
}

.lede-swap {
  display: inline-block;
  font-weight: 700;
  transition: opacity 800ms ease, transform 800ms ease;
}

.lede-swap[data-swap-a] {
  color: var(--comms);
}

.lede-swap[data-swap-b] {
  color: var(--integrated);
}

.lede-swap.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
  .lede-swap {
    transition: none;
  }
}

.action-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 48px;
}

.hero .text-link {
  color: var(--white);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  transform: translateX(-50%);
}

.cue-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 32px;
}

.cue-bar {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--white);
  transform-origin: bottom center;
  transform: skewX(-16deg) scaleY(0.55);
  opacity: 0.5;
  animation: cueBreathe 4.2s ease-in-out infinite;
}

.cue-bar:nth-child(2) {
  animation-delay: 0.15s;
}

.cue-bar:nth-child(3) {
  animation-delay: 0.3s;
}

.scroll-cue.cue-restless .cue-bar {
  animation-name: cueStir;
  animation-duration: 1.9s;
}

.scroll-cue.cue-urgent .cue-bar {
  animation-name: cueUrgent;
  animation-duration: 0.9s;
}

.scroll-cue.cue-frantic .cue-bar {
  animation-name: cueFrantic;
  animation-duration: 0.5s;
}

/* Calm: a slow, quiet breathe -- no drift or spin yet. */
@keyframes cueBreathe {
  0%,
  100% {
    transform: skewX(-16deg) scaleY(0.55) translateX(0) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: skewX(-16deg) scaleY(1) translateX(0) rotate(0deg);
    opacity: 0.95;
  }
}

/* Stir: the three bars (staggered via animation-delay above) start
   drifting apart and back together -- still calm, just less still. */
@keyframes cueStir {
  0%,
  100% {
    transform: skewX(-16deg) scaleY(0.6) translateX(0) rotate(0deg);
    opacity: 0.55;
  }
  25% {
    transform: skewX(-16deg) scaleY(0.85) translateX(3px) rotate(3deg);
    opacity: 0.8;
  }
  50% {
    transform: skewX(-16deg) scaleY(1) translateX(0) rotate(0deg);
    opacity: 1;
  }
  75% {
    transform: skewX(-16deg) scaleY(0.85) translateX(-3px) rotate(-3deg);
    opacity: 0.8;
  }
}

@keyframes cueUrgent {
  0%,
  100% {
    transform: skewX(-16deg) scaleY(0.6) translateX(0) rotate(0deg);
    opacity: 0.6;
    background: var(--comms);
  }
  33% {
    transform: skewX(-16deg) scaleY(1.1) translateX(6px) rotate(10deg);
    opacity: 1;
    background: var(--learning);
  }
  66% {
    transform: skewX(-16deg) scaleY(0.85) translateX(-6px) rotate(-10deg);
    opacity: 0.9;
    background: var(--integrated);
  }
}

@keyframes cueFrantic {
  0% {
    transform: skewX(-16deg) scaleY(0.6) translateY(0) translateX(0) rotate(0deg);
    opacity: 0.75;
    background: var(--comms);
  }
  20% {
    transform: skewX(-16deg) scaleY(1.25) translateY(-7px) translateX(8px) rotate(20deg);
    opacity: 1;
    background: var(--learning);
  }
  40% {
    transform: skewX(-16deg) scaleY(0.7) translateY(2px) translateX(-7px) rotate(-18deg);
    opacity: 0.8;
    background: var(--integrated);
  }
  60% {
    transform: skewX(-16deg) scaleY(1.3) translateY(-6px) translateX(7px) rotate(22deg);
    opacity: 1;
    background: var(--comms);
  }
  80% {
    transform: skewX(-16deg) scaleY(0.75) translateY(1px) translateX(-6px) rotate(-16deg);
    opacity: 0.85;
    background: var(--learning);
  }
  100% {
    transform: skewX(-16deg) scaleY(0.6) translateY(0) translateX(0) rotate(0deg);
    opacity: 0.75;
    background: var(--integrated);
  }
}

/* ---------- Page hero (internal pages) ---------- */

.page-hero {
  position: relative;
  padding: clamp(150px, 20vw, 210px) 0 clamp(60px, 8vw, 90px);
  background: var(--paper);
  overflow: clip;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.24;
  filter: blur(42px);
  background:
    radial-gradient(circle at 12% 14%, rgba(176, 123, 255, 0.92), transparent 60%),
    radial-gradient(circle at 55% 38%, rgba(70, 216, 255, 0.8), transparent 62%),
    radial-gradient(circle at 84% 80%, rgba(58, 240, 178, 0.95), transparent 58%),
    linear-gradient(128deg, var(--learning) 0%, var(--integrated) 50%, var(--comms) 100%);
  background-size: 160% 160%, 170% 170%, 150% 150%, 180% 180%;
  animation: fieldDrift 32s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .page-hero::before {
    animation: none;
  }
}

.page-hero .content-wrap {
  position: relative;
}

.page-hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  color: var(--ink);
}

.page-hero .large {
  max-width: 680px;
  margin-top: 20px;
}

/* ---------- Problem ---------- */

.problem {
  position: relative;
  z-index: 3;
  padding-top: 90px;
  padding-bottom: 45px;
}

.problem-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr 0.6fr;
  gap: clamp(30px, 5vw, 56px);
  align-items: start;
}

.sticky-thought {
  position: sticky;
  top: 140px;
  align-self: start;
}

.problem-headline {
  color: var(--ink);
}

.people-do {
  display: block;
  margin-top: 0.1em;
  color: var(--learning);
}

/* Colour-pop spans inside otherwise-black headings, per client feedback.
   Bare .accent-word resolves to the page's own --accent (so it's automatically
   purple on the Learning Design page and mint on Communication & Change).
   The three modifiers are for pages with no single page accent (Home, About),
   where pops cycle through the brand spectrum instead. */
.accent-word {
  color: var(--accent);
}

.accent-word--learning {
  color: var(--learning);
}

.accent-word--integrated {
  color: var(--integrated);
}

.accent-word--comms {
  color: var(--comms);
}

/* Colour-cycling heading words -- same brand-colour rotation as the
   header logo (see logoColorCycle), just applied to text colour, quicker,
   and offset by half a cycle on the second word so "learn" and "move"
   are never sitting on the same colour at the same time. */
.cycle-word {
  display: inline-block;
  animation: headingColorCycle 16s ease-in-out infinite;
}

.cycle-word--offset {
  animation-delay: -8s;
}

@keyframes headingColorCycle {
  0%,
  8% {
    color: var(--ink);
  }
  20%,
  30% {
    color: var(--comms);
  }
  45%,
  55% {
    color: var(--learning);
  }
  70%,
  80% {
    color: var(--integrated);
  }
  92%,
  100% {
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cycle-word {
    animation: none;
  }
}

/* Extra breathing room between stacked paragraphs that sit directly in a
   content-wrap with no grid/gap wrapper around them (How We Help hub's intro
   copy, and the Learning/Comms "why organisations work with us" blocks) —
   closes the gap the client flagged as reading like one cramped paragraph. */
.problem.section-light .content-wrap > p.reveal + p.reveal,
.story .content-wrap > p.reveal + p.reveal {
  margin-top: 20px;
}

.problem-copy {
  display: grid;
  gap: 26px;
}

.large {
  max-width: 720px;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
}

.section-dark .large {
  color: var(--white-soft);
}

.problem-copy p {
  max-width: 620px;
  color: var(--ink-soft);
}

blockquote {
  margin: 0;
  max-width: 640px;
  padding: clamp(26px, 4vw, 40px);
  color: var(--white);
  background: var(--black);
  border-radius: 20px;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.32;
}

blockquote strong {
  color: var(--comms);
  font-style: italic;
}

.problem-photo {
  align-self: start;
  margin-top: 8px;
}

.ring-frame-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ---------- Services ---------- */

.services {
  padding-top: 45px;
  padding-bottom: 90px;
}

.section-intro {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(42px, 7vw, 78px);
}

.section-intro.stacked-intro {
  display: block;
  width: min(74%, 900px);
}

.section-intro.stacked-intro h2 {
  max-width: 16ch;
}

.section-intro p {
  max-width: 680px;
  margin-top: clamp(20px, 3vw, 30px);
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.6vw, 1.24rem);
}

.service-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.service-panel {
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.panel-photo {
  aspect-ratio: 1.86;
  overflow: hidden;
}

.panel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease-out;
}

.service-panel:hover .panel-photo img {
  animation: panelZoomHold 6s linear forwards;
}

@keyframes panelZoomHold {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.55);
  }
}

.panel-body {
  padding: clamp(28px, 4vw, 44px);
}

.service-number {
  margin-bottom: 16px;
  color: var(--ink-faint);
  font-family: var(--display);
  font-weight: 700;
}

.service-panel h3 {
  margin-bottom: 16px;
}

.service-panel p {
  max-width: 520px;
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.panel-cta {
  margin-top: 12px;
  gap: 14px;
  color: var(--ink);
}

.service-comms .service-number,
.service-comms .panel-cta {
  color: var(--comms-dark);
}

.service-learning .service-number,
.service-learning .panel-cta {
  color: var(--learning-dark);
}

/* ---------- Principles ---------- */

.principles {
  padding-top: 90px;
  padding-bottom: 90px;
}

.principles-grid {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: clamp(38px, 8vw, 110px);
}

.principles-title {
  position: sticky;
  top: 138px;
  align-self: start;
}

.principles-title p {
  margin-top: clamp(18px, 3vw, 26px);
  max-width: 420px;
  color: var(--ink-soft);
}

.principle {
  display: grid;
  grid-template-columns: 70px 1fr;
  column-gap: 24px;
  row-gap: 0;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

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

.principle span {
  grid-row: 1 / span 2;
  color: var(--accent-dark);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
}

.principle h3 {
  grid-column: 2;
  margin-bottom: 10px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.principle p {
  grid-column: 2;
  max-width: 620px;
  color: var(--ink-soft);
}

/* Compact one-line principle variant (used on About) */

.principle-compact {
  grid-template-columns: 1fr;
  padding: 24px 0;
}

.principle-compact span {
  display: none;
}

.principle-compact h3 {
  grid-column: 1;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  margin-bottom: 6px;
}

.principle-compact p {
  grid-column: 1;
}

/* ---------- Approach ---------- */

.approach {
  padding-top: 90px;
  padding-bottom: 90px;
}

/* Homepage-only accent: a soft brand-gradient wash bleeding down from the
   top of the section, behind the copy and pathway steps. Scoped to
   .approach-gradient (added only on the homepage's "How we work" section)
   so the About page's identical .approach markup is unaffected. Kept low-
   opacity and blurred, rather than a solid gradient fill, so the existing
   text colours and hairline borders inside the section stay readable. */
.approach-gradient {
  position: relative;
  isolation: isolate;
}

.approach-gradient::before {
  content: "";
  position: absolute;
  inset: -8% -8% auto -8%;
  z-index: -1;
  height: 65%;
  background: var(--spectrum);
  opacity: 0.16;
  filter: blur(90px);
}

.approach-intro {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.pathway {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.path-step {
  min-height: 260px;
  padding: 28px 22px;
  border-right: 1px solid var(--line);
}

.path-step:last-child {
  border-right: 0;
}

.path-step span {
  display: block;
  margin-bottom: 14px;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  font-style: italic;
}

.path-step p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* ---------- Sectors ---------- */

.sectors {
  padding-top: 90px;
  padding-bottom: 90px;
}

.sector-grid {
  display: grid;
  grid-template-columns: 0.62fr 1fr;
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
}

.sector-grid p {
  margin-top: 22px;
  color: var(--ink-soft);
}

.sector-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sector-cloud li {
  padding: clamp(11px, 1.8vw, 17px) clamp(16px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--display);
  font-size: clamp(0.96rem, 1.7vw, 1.28rem);
  font-weight: 600;
}

.sector-cloud li:nth-child(3n + 1) {
  box-shadow: inset 0 -10px 0 rgba(58, 240, 178, 0.28);
}

.sector-cloud li:nth-child(3n + 2) {
  box-shadow: inset 0 -10px 0 rgba(70, 216, 255, 0.26);
}

.sector-cloud li:nth-child(3n) {
  box-shadow: inset 0 -10px 0 rgba(176, 123, 255, 0.26);
}

/* ---------- People ---------- */

.people {
  position: relative;
  padding: clamp(56px, 7vw, 100px) 0;
  isolation: isolate;
}

/* Same blurred spectrum-glow treatment as the contact section's
   .finale-glow, mirrored left-to-right: the contact glow leans toward its
   right-hand column (the form panel), so this one leans toward this
   section's left-hand column instead (the portrait rings) — both the
   position (right instead of left) and the gradient itself (scaleX(-1))
   are flipped, not just repositioned, so the colour arrangement is a true
   mirror image rather than the same diagonal relocated. */
.people-glow {
  position: absolute;
  inset: -10% auto auto auto;
  right: 42%;
  width: 46vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--spectrum);
  opacity: 0.24;
  filter: blur(70px);
  transform: scaleX(-1);
  z-index: -1;
}

.people-grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(38px, 8vw, 110px);
  align-items: center;
}

.portrait-system {
  position: relative;
  min-height: 340px;
}

.ring-frame-portrait {
  position: absolute;
  top: 0;
  left: 0;
}

.ring-frame-portrait-b {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
}

.initial {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: var(--black);
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 800;
  /* Slow, deep "breathing" swell -- see the opposite-phase delay below,
     which is what makes Jess and Josh swell on alternate beats rather
     than in lockstep. */
  animation: portraitBreathe 11s ease-in-out infinite;
}

.initial-jess {
  background: var(--comms-light);
}

.initial-josh {
  background: var(--learning-light);
  /* Half the cycle length out of phase with Jess, so one is swelling
     while the other is settling back down. */
  animation-delay: 5.5s;
}

@keyframes portraitBreathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

/* Hover reveal: the name label fades out, and the person's actual photo
   fades in underneath a matching colour tint + grain pass, so the face
   reads as if it's being viewed through the coloured circle -- like
   looking through tinted, slightly dusty glass -- rather than the photo
   just flatly replacing the colour. */
.portrait-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 600ms ease;
}

.portrait-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* "color" (hue+saturation from this tint, luminance from the photo
     beneath) reads as an evenly vivid coloured-glass effect regardless
     of the underlying skin tone -- multiply crushed the warm reds for
     the green tint but barely touched them for the paler purple one,
     which is why Josh's tint looked much weaker than Jess's. */
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity 600ms ease;
}

.initial-jess .portrait-tint {
  background: var(--comms);
}

.initial-josh .portrait-tint {
  background: var(--learning);
}

.portrait-texture {
  opacity: 0;
  transition: opacity 600ms ease;
}

.initial-label {
  position: relative;
  z-index: 2;
  transition: opacity 400ms ease;
}

.ring-frame-portrait:hover .portrait-photo,
.ring-frame-portrait:focus-within .portrait-photo {
  opacity: 1;
}

.ring-frame-portrait:hover .portrait-tint,
.ring-frame-portrait:focus-within .portrait-tint {
  opacity: 0.5;
}

.ring-frame-portrait:hover .portrait-texture,
.ring-frame-portrait:focus-within .portrait-texture {
  opacity: 0.6;
}

.ring-frame-portrait:hover .initial-label,
.ring-frame-portrait:focus-within .initial-label {
  opacity: 0;
}


.people .large {
  margin-top: clamp(20px, 3vw, 30px);
  font-size: 20px;
}

.people p {
  margin-top: 18px;
  font-size: 20px;
}

.people-callout {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  line-height: 1.3;
  color: #236c80;
}

/* ---------- Bio cards (About) ---------- */

.people-full {
  padding-top: 90px;
  padding-bottom: 90px;
}

/* .people-full-intro also carries .stacked-intro (for the generic
   heading+paragraph intro pattern used elsewhere), and .section-intro
   .stacked-intro's own display:block + width:min(74%,900px) has higher
   specificity than a bare .people-full-intro, so it was winning and
   silently turning this into a single block-stacked column -- the photo
   was rendering below the copy instead of beside it, and .childhood-photo's
   justify-self:end (grid-only) had no effect once display wasn't grid.
   Matching the actual class combination here so this rule wins instead. */
.people-full-intro.stacked-intro {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
  width: 100%;
  max-width: none;
}

.people-full-intro .childhood-photo {
  width: min(320px, 100%);
  justify-self: end;
}

.childhood-photo .ring-frame-photo {
  width: 100%;
  aspect-ratio: 4 / 3.1;
}

.childhood-photo .ring-frame-photo img {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.childhood-photo figcaption {
  margin-top: 14px;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.92rem;
}

.bio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 6vw, 64px);
}

.bio-card {
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: 26px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.bio-card .initial {
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  font-size: 1.5rem;
}

.bio-role {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.98rem;
}

.bio-card h3 {
  margin-bottom: 16px;
}

.bio-card p {
  margin-top: 12px;
  color: var(--ink-soft);
}

.bio-card p:first-of-type {
  margin-top: 0;
}

/* ---------- Story block (About origin story) ---------- */

.story {
  padding-top: 90px;
  padding-bottom: 90px;
}

.story-heading {
  max-width: none;
  margin-bottom: 18px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

/* "We can help with" label on the Learning Design / Communication & Change
   pages — client asked for more prominence than the small eyebrow-style
   .block-label gave it. Adds a short accent-coloured rule and steps the type
   up towards heading weight, using the page's own --accent so it stays
   purple/mint without any extra markup. */
.help-categories-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  color: var(--ink);
}

.help-categories-label::before {
  content: "";
  flex: none;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}

.story-grid {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: clamp(38px, 8vw, 110px);
}

.story-grid .large {
  color: var(--ink);
}

.story-copy {
  display: grid;
  gap: 22px;
}

.story-copy p {
  color: var(--ink-soft);
}

.story-question {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
}

/* ---------- Help categories (How We Help hub + deep-dive pages) ---------- */

.help-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(40px, 6vw, 60px);
}

.help-category {
  padding: clamp(26px, 3vw, 34px);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--white);
}

.help-category-number {
  display: block;
  margin-bottom: 14px;
  color: var(--accent-dark);
  font-family: var(--display);
  font-weight: 800;
}

.help-category h3 {
  margin-bottom: 10px;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
}

.help-category > p {
  margin-bottom: 16px;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.help-category ul {
  display: grid;
  gap: 10px;
}

.help-category li {
  padding-left: 18px;
  position: relative;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.help-category li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Generic dot-bullet list — same look as .help-category li, usable anywhere
   (e.g. inside .service-panel on the How We Help hub) without pulling in
   .help-category's own card padding/border/background. */

.check-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 16px;
}

.check-list li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Why-it-fails / how-we-approach blocks ---------- */

.approach-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
  margin-top: clamp(40px, 6vw, 60px);
}

.approach-principle h3 {
  margin-bottom: 10px;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  color: var(--accent-dark);
}

.approach-principle p {
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */

.faq {
  padding-top: 90px;
  padding-bottom: 90px;
}

.faq-list {
  display: grid;
  gap: 0;
  margin-top: clamp(36px, 5vw, 54px);
  border-top: 1px solid var(--line);
}

.faq-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--accent-dark);
  font-size: 1.4rem;
  font-weight: 400;
  transition: transform 200ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  max-width: 760px;
  margin-top: 16px;
  color: var(--ink-soft);
}

/* ---------- Fit CTA ---------- */

.fit-cta {
  padding-top: 20px;
  padding-bottom: 20px;
}

.fit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  align-items: center;
  gap: clamp(30px, 5vw, 72px);
  color: var(--white);
}

.fit-copy {
  display: grid;
  gap: 14px;
  max-width: 560px;
}

.fit-grid h2 {
  max-width: 14ch;
}

/* Internal pages only (body.no-hero -- see mtm_body_classes()): more top/
   bottom breathing room, a wider copy column that's free to sit over the
   circles a little, and no character cap on the heading so it runs the
   full width of that wider column. The homepage's own fit-cta bands keep
   their original, tighter treatment above -- these are two different
   components that just happen to share a class name, not one shared
   design, so a change for the internal pages should never bleed into the
   homepage build. */
body.no-hero .fit-cta {
  padding-top: 40px;
  padding-bottom: 60px;
}

body.no-hero .fit-copy {
  max-width: 660px;
  /* Grid items stretch to fill their track by default -- this negative
     margin grows the box 100px past that track width consistently
     (rather than only when the track happens to exceed max-width), so
     the copy reads noticeably wider and is free to sit over the circles
     a little, per Dan's reference image. */
  margin-right: -100px;
}

body.no-hero .fit-grid h2 {
  max-width: none;
}

.fit-grid p {
  color: var(--white-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
}

.fit-grid .button-primary {
  justify-self: start;
  margin-top: 6px;
}

.fit-media {
  /* Stretch to the grid track's real computed width (rather than shrinking
     to content) so the circle cluster below can safely size itself as a
     percentage of it — that's what lets it get close to the hero's circle
     size on wide screens without ever overflowing into the copy column on
     narrower ones. */
  justify-self: stretch;
  display: flex;
  justify-content: flex-end;
}

/* ---------- Finale / Contact ---------- */

.finale {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
  isolation: isolate;
}

.finale-glow {
  position: absolute;
  inset: -10% auto auto 42%;
  width: 46vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--spectrum);
  opacity: 0.24;
  filter: blur(70px);
  z-index: -1;
}

.contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
}

.contact-intro h2 {
  max-width: 620px;
}

.contact-intro p {
  max-width: 560px;
  margin-top: 18px;
  color: var(--ink-soft);
}

.contact-intro p.large {
  margin-top: 22px;
}

.block-label {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.block-hint {
  margin-top: 6px !important;
  font-size: 0.92rem !important;
  color: var(--ink-faint) !important;
}

.reason-block {
  margin-top: 44px;
}

.reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.reason-chip {
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.reason-chip:hover {
  border-color: var(--integrated-dark);
  color: var(--ink);
  transform: translateY(-1px);
}

.reason-chip.is-picked {
  background: var(--integrated-light);
  border-color: var(--integrated-dark);
  color: var(--ink);
}

.next-steps {
  margin-top: 44px;
}

.next-steps ol {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}

.next-steps li {
  position: relative;
  padding-left: 34px;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.next-steps li::before {
  counter-increment: steps;
  content: counter(steps);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--comms-light);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 700;
}

.next-steps strong {
  display: block;
  color: var(--ink);
}

/* ---------- Contact form panel ---------- */

.contact-panel {
  position: relative;
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: 26px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.form-kicker {
  margin-bottom: 22px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}

.contact-form {
  display: grid;
  gap: 20px;
}

.contact-form[hidden] {
  display: none;
}

.form-error {
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(176, 123, 255, 0.14);
  border: 1px solid var(--learning);
  color: var(--ink);
  font-size: 0.92rem;
}

.field {
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
}

.field > span {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
}

.field em {
  color: var(--learning-dark);
  font-style: normal;
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 160ms ease;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--integrated-dark);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-submit {
  justify-self: start;
  margin-top: 4px;
  background: var(--black);
  color: var(--white);
}

.form-note {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-faint);
}

.form-success {
  display: grid;
  gap: 10px;
  padding: 6px 0 8px;
}

.form-success[hidden] {
  display: none;
}

.form-success h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
}

.form-success p {
  color: var(--ink-soft);
}

.contact-other {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.contact-other a {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
}

.contact-other a:hover {
  color: var(--integrated-dark);
}

.contact-locations {
  flex-basis: 100%;
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--ink-faint);
}

@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .field-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 46px 0 36px;
  color: var(--white);
  background: #070707;
}

.footer-grid {
  display: grid;
  grid-template-columns: 200px max-content max-content;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
  color: var(--white-soft);
  font-size: 0.9rem;
}

.footer-grid > img {
  width: 190px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a:hover {
  color: var(--white);
}

.footer-locations {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-locations-label {
  margin: 0 0 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 253, 247, 0.45);
}

.footer-locations p {
  margin: 0;
}

/* ---------- Acknowledgement of Country strip ---------- */

.acknowledgement-strip {
  padding-top: 22px;
  padding-bottom: 22px;
  background: #faf4e6;
  border-top: 1px solid var(--line);
}

.acknowledgement-strip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.acknowledgement-strip .acknowledgement-flags {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.acknowledgement-strip .acknowledgement-flags img {
  width: 32px;
  height: auto;
  border-radius: 3px;
}

.acknowledgement-strip p {
  max-width: 820px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.6;
  text-align: center;
}

.footer-bottom {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line-light);
  text-align: center;
}

.footer-bottom p {
  color: rgba(255, 253, 247, 0.5);
  font-size: 0.8rem;
}

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .nav-links,
  .nav-action {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .menu-toggle {
    display: flex;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: left;
  }

  .hero-porthole {
    justify-self: start;
    margin-top: 20px;
  }

  /* The hero's height is content-driven once it stacks to one column, so
     an absolutely-positioned cue anchored to the hero's bottom edge can
     collide with the porthole cluster above it — simpler to drop it here. */
  .scroll-cue {
    display: none;
  }

  .fit-grid {
    grid-template-columns: 1fr;
  }

  .fit-copy {
    max-width: none;
  }

  body.no-hero .fit-copy {
    margin-right: 0;
  }

  .fit-media {
    justify-content: flex-start;
    margin-top: 8px;
  }

  .problem-grid,
  .principles-grid,
  .sector-grid,
  .people-grid,
  .finale-grid,
  .service-stage,
  .story-grid,
  .bio-grid,
  .help-categories,
  .approach-principles {
    grid-template-columns: 1fr;
  }

  /* .people-full-intro.stacked-intro (desktop, above) now matches on two
     classes to win over .section-intro.stacked-intro's own display:block
     -- this needs the same two-class specificity to win the collapse back
     to a single column at this width, or the desktop 2-column value would
     take over here instead. */
  .people-full-intro.stacked-intro {
    grid-template-columns: 1fr;
  }

  .people-full-intro .childhood-photo {
    width: min(320px, 68vw);
    justify-self: start;
    margin-top: 8px;
  }

  .problem-photo {
    order: -1;
  }

  .sticky-thought,
  .principles-title {
    position: relative;
    top: auto;
  }

  .section-intro.stacked-intro {
    width: 100%;
  }

  .pathway {
    grid-template-columns: 1fr;
  }

  .path-step {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .path-step span {
    margin-bottom: 22px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .portrait-system {
    min-height: 260px;
  }
}

@media (max-width: 680px) {
  :root {
    --wrap: min(100vw - 28px, 1180px);
  }

  .lede-break {
    display: none;
  }

  .site-header {
    padding: 16px 14px;
  }

  .brand-logo-light,
  .brand-logo-dark {
    width: 150px;
  }

  h1 {
    font-size: 3.1rem;
  }

  .hero {
    padding-top: 118px;
  }

  .finale-cta {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================================
   Internal pages — 2026 upgrade pass (How We Help, Learning Design &
   Capability, Communication & Change, About/People + How We Work, Contact)

   New reusable components only. Layout tokens, colours and section rhythm
   are all pulled from the existing custom properties above; nothing here
   hardcodes a hex value or a one-off px measurement that isn't already
   part of the theme's own scale.
   ========================================================================= */

/* ---------- Eyebrow labels + hero breadcrumb ---------- */

.eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
}

.section-dark .eyebrow {
  color: var(--white);
}

.hero-breadcrumb {
  margin: 0 0 20px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
}

.hero-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.hero-breadcrumb a:hover {
  text-decoration: underline;
}

.hero-breadcrumb span {
  opacity: 0.7;
}

/* ---------- Page-hero media slot (breadcrumb + headline stay in .page-hero
   as-is; this just adds an optional ring-circle accent alongside them on
   1a/1d/1g, without moving to the artboards' full gradient treatment --
   see the implementation handoff on why .page-hero's paper ground stays). */

.page-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items: center;
}

.page-hero-media {
  display: flex;
  justify-content: flex-end;
}

.hero-single-media {
  position: relative;
  width: min(340px, 54vw);
  aspect-ratio: 1;
}

/* A single circle inside a .porthole-cluster still gets picked up by the
   same drift physics as the two-circle clusters (see assets/site.js) --
   it just needs room on every side to wander into, so it's centred with
   margin to spare rather than flush against the container edge like the
   -a/-b pair. */
.ring-frame-video--solo {
  position: absolute;
  top: 13%;
  left: 13%;
  width: 74%;
  aspect-ratio: 1;
}

.portrait-system--hero {
  /* Explicit box so the top/left/right/bottom percentages below resolve
     against a real, predictable size -- this container has no in-flow
     content of its own (both circles are position:absolute), so without
     a set width it was collapsing and the two circles were landing on
     top of each other regardless of the offsets. */
  width: min(380px, 100%);
  min-height: 380px;
}

.portrait-system--hero .ring-frame-portrait {
  width: 250px;
  top: -8%;
  left: -6%;
}

.portrait-system--hero .ring-frame-portrait-b {
  width: 210px;
  right: -6%;
  bottom: -8%;
  /* Anchored to the opposite corner from the circle above so the pair
     starts genuinely apart -- they should only ever clip a small corner
     at rest, not sit stacked on top of one another. */
  /* Slightly translucent so the two circles visibly blend where they
     cross paths, rather than one flatly cutting the other off. */
  opacity: 0.85;
}

/* ---------- How We Help hub: labelled problem rows + quote inset ---------- */

.problem-label-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 40px;
  align-items: start;
}

.problem-label-row .eyebrow {
  padding-top: 6px;
}

.problem-label-row + .problem-label-row,
.problem-label-row + .problem-quote-row {
  margin-top: 46px;
}

.problem-label-row .sector-cloud {
  margin-top: 26px;
}

.problem-quote-row {
  display: grid;
  grid-template-columns: 190px 1fr 300px;
  gap: 40px;
  align-items: start;
}

.problem-quote-row blockquote {
  max-width: none;
  margin: 0;
}

.ring-frame-photo--circle,
.ring-frame-photo--circle::before {
  border-radius: 50%;
}

.ring-frame-photo--circle img {
  aspect-ratio: 1;
}

/* ---------- How We Help hub: numbered, alternating service blocks ---------- */

.service-blocks {
  display: flex;
  flex-direction: column;
  gap: 70px;
  margin-top: clamp(40px, 6vw, 60px);
}

.service-block {
  display: grid;
  grid-template-columns: 1.05fr 300px;
  gap: 56px;
  align-items: start;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.service-block--reverse {
  grid-template-columns: 300px 1.05fr;
}

.service-block--reverse .service-block-media {
  order: -1;
}

.service-block-number {
  display: block;
  margin-bottom: 12px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 15px;
}

.service-block h2 {
  margin: 0 0 15px;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  letter-spacing: 0;
}

.service-block > p {
  max-width: 620px;
  margin-top: 20px;
  color: var(--ink-soft);
}

.service-block-panel {
  margin-top: 30px;
  padding: 30px 34px;
  background: var(--paper);
}

.service-block-panel .eyebrow {
  margin-bottom: 16px;
}

.service-block-panel ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  columns: 2;
  column-gap: 34px;
  font-size: 16px;
  line-height: 2.2;
  color: var(--ink-soft);
}

.service-block-cta {
  margin-top: 26px;
}

.service-block-media {
  aspect-ratio: 1;
}

.service-block-media .ring-frame-photo {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}

.service-block-media .ring-frame-photo::before {
  border-radius: 14px;
}

.service-block-media .ring-frame-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* ---------- Learning Design & Capability: full-width numbered ledger ---------- */

.help-categories--ledger {
  display: block;
  margin-top: clamp(40px, 6vw, 60px);
  border-top: 1px solid var(--line);
}

.help-category--ledger {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding: 30px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

/* The article has 4 direct children (number, h3, p, ul) but only 3
   column tracks -- left to auto-placement, the ul was wrapping onto a
   second row and landing in the 110px number column instead of its own
   column, which is what was squeezing/overlapping the list. Placing all
   four explicitly keeps number | heading-over-paragraph | list stable
   regardless of how much text is in the heading/paragraph. */
.help-category--ledger .help-category-number {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
  font-size: 15px;
}

.help-category--ledger h3 {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 10px;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
}

.help-category--ledger > p {
  grid-column: 2;
  grid-row: 2;
  max-width: 420px;
}

.help-category--ledger ul {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 8px;
}

.help-category--ledger li {
  margin-bottom: 0;
}

/* ---------- Communication & Change: offset panel pairs ---------- */

.help-categories--offset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 34px;
  margin-top: clamp(40px, 6vw, 60px);
}

.help-category--offset {
  border: none;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: 34px 36px;
}

.help-category--offset:nth-child(even) {
  margin-top: 34px;
}

.help-category--offset:nth-child(1),
.help-category--offset:nth-child(4) {
  background: var(--paper);
}

.help-category--offset:nth-child(2),
.help-category--offset:nth-child(3) {
  background: var(--paper-deep);
}

/* ---------- Approach: 2x2 rule cards (Learning) + dark 4-across band
   (Communication) — two visual treatments for the same underlying
   .approach-principle content, per page. ---------- */

.approach-principle--rule {
  border-top: 2px solid var(--accent);
  padding-top: 20px;
}

.approach-principle--rule h3 {
  color: var(--ink);
}

.approach-principle-number {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-dark);
  font-family: var(--display);
  font-weight: 900;
  font-size: 13px;
}

.approach-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
}

.approach-band-item {
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
}

.approach-band-item .approach-principle-number {
  color: var(--accent);
}

.approach-band-item h3 {
  margin: 0;
  font-size: 1.35rem;
}

.approach-band-item p {
  margin: 10px 0 0;
  font-size: 0.95rem;
  opacity: 0.86;
}

/* ---------- Shared media+copy feature row (used by the Learning "built
   around how people actually work" dark band and the Communication "why
   organisations work with us" band) ---------- */

.media-feature-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: center;
}

.media-feature-row--reverse {
  grid-template-columns: 320px 1fr;
}

.media-feature-row--reverse .media-feature-visual {
  order: -1;
}

.media-feature-visual {
  position: relative;
  aspect-ratio: 1;
}

.media-feature-visual .ring-frame-video,
.media-feature-visual .ring-frame-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- About + How We Work: expanded #approach intro row ---------- */

.approach-intro-grid {
  display: grid;
  grid-template-columns: 0.95fr 1fr 280px;
  gap: 48px;
  align-items: start;
}

.approach-intro-media {
  position: relative;
  aspect-ratio: 1;
}

.approach-intro-media .ring-frame-video,
.approach-intro-media .ring-frame-photo {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- About + How We Work: five expanded step bands ---------- */

.step-band-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 40px;
  align-items: start;
}

.step-band-grid--media {
  grid-template-columns: 110px 1fr 300px;
}

.step-band-number {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}

.step-band-grid h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  letter-spacing: 0;
}

.step-band-lead {
  margin: 16px 0 0;
  max-width: 620px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.5;
}

/* One-off emphasis for the "Design" step's lead line -- previously an
   inline style, moved here so it's a reusable modifier instead of markup
   that can't be found or reused from the stylesheet. */
.step-band-lead--emphasis {
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
}

.step-band-body {
  margin: 18px 0 0;
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.8;
}

.step-band-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.step-band-tags span {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
}

.section-dark .step-band-tags span {
  border-color: var(--line-light);
}

.step-band-media {
  position: relative;
  aspect-ratio: 1;
}

.step-band-media .ring-frame-video,
.step-band-media .ring-frame-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.step-band-callout {
  margin: 18px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  max-width: 560px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.55;
}

/* About step 05 "Strengthen": the darker tone is enough of a divider from
   step 04 on its own -- a hard border line used to sit partway down into
   this section's own top padding (well below where the tone actually
   changed), which read as a stray rule floating in the wrong place rather
   than a deliberate seam. Using a hard-stop gradient instead means the
   colour change itself happens right where the content starts, so there's
   one clean transition instead of a color change and a border in two
   different spots. */
.step-band-strengthen {
  /* Color transition stays at 60px (flush against step 04 ending, no
     floating gap) but padding now runs past it to 100px before content
     starts, and the section gets real bottom padding too -- both were
     left at 0, which is why "05 Strengthen" sat jammed against the top
     of the band and the callout sat flush against the section below. */
  padding: 100px 0 70px;
  background: linear-gradient(to bottom, var(--paper) 0 60px, var(--paper-deep) 60px 100%);
}

/* ---------- About: individual bio rows (replaces the two-card bio-grid
   with a larger, more editorial one-at-a-time treatment, reusing the same
   ring-frame-portrait component from the homepage's People section) ---------- */

.bio-rows {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: clamp(40px, 6vw, 60px);
}

.bio-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
  padding-top: 38px;
  border-top: 1px solid var(--line);
}

/* Jess's row (the non-reversed layout, circle then text) reads as the
   text being pushed right up against the circle at the standard 48px gap
   -- open it up further here specifically. The reversed row (Josh's)
   puts the circle on the other side of his text, so it isn't affected. */
.bio-row:not(.bio-row--reverse) {
  column-gap: 72px;
}

.bio-row--reverse {
  grid-template-columns: 1fr 260px;
}

.bio-row--reverse .bio-row-media {
  order: 1;
}

.bio-row-media {
  position: relative;
  aspect-ratio: 1;
}

.bio-row-media .ring-frame-portrait {
  width: 100%;
  height: 100%;
  position: static;
}

.bio-row h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.bio-row .bio-role {
  display: block;
  margin: 8px 0 20px;
  font-family: var(--body);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.bio-row-copy {
  display: grid;
  gap: 16px;
  max-width: 700px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.bio-row-copy p {
  margin: 0;
}

.people-callout-box {
  margin-top: clamp(40px, 6vw, 60px);
  padding: 34px 38px;
  background: var(--paper-deep);
  border-left: 3px solid var(--accent);
  max-width: 900px;
}

.people-callout-box p {
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.8;
}

/* ---------- Contact: hero body regroup (structure/order is unchanged in
   contact-form-section.php — these rules only restyle the existing
   .block-label / .contact-panel elements it already renders, scoped to
   this page so the same shared partial on the homepage is untouched) ---------- */

body.page-template-contact .contact-panel {
  border-top: 3px solid var(--accent);
}

body.page-template-contact .reason-block > .block-label,
body.page-template-contact .next-steps > .block-label {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--ink);
}

/* The finale's inline .contact-other footnote is superseded on the Contact
   page by the dedicated "Other ways to reach us" dark band below, in
   template-contact.php, so it's hidden here to avoid repeating the same
   email/phone/locations twice on one page. It's left untouched (and
   visible) everywhere else the shared partial is used, i.e. the homepage. */
body.page-template-contact .finale .contact-other {
  display: none;
}

/* ---------- Contact: new dark "other ways to reach us" band ---------- */

.reach-band {
  padding: 70px 0 60px;
}

.reach-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: start;
}

.reach-media {
  position: relative;
  width: min(190px, 60%);
  aspect-ratio: 1;
  margin-top: 30px;
}

.reach-media .ring-frame-video,
.reach-media .ring-frame-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.reach-list {
  display: flex;
  flex-direction: column;
}

.reach-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--line-light);
}

.reach-list .reach-row:last-child {
  border-bottom: 1px solid var(--line-light);
}

.reach-row-label {
  padding-top: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

.reach-row-value {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  letter-spacing: -0.022em;
}

.reach-row-value a {
  color: inherit;
}

.reach-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.reach-chips span,
.reach-chips a {
  display: inline-block;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  color: inherit;
  text-decoration: none;
}

.reach-chips a:hover {
  border-color: var(--white);
}

.reach-locations {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.8;
  opacity: 0.86;
}

/* ---------- #approach anchor clearance for the fixed header, now that it's
   a direct link target from the redirected /how-we-work URL ---------- */

#approach {
  scroll-margin-top: 140px;
}

/* ---------- Responsive collapse for everything above ---------- */

@media (max-width: 980px) {
  .page-hero-grid {
    grid-template-columns: 1fr;
  }

  .page-hero-media {
    display: none;
  }

  .problem-label-row,
  .problem-quote-row,
  .service-block,
  .service-block--reverse,
  .approach-intro-grid,
  .step-band-grid,
  .step-band-grid--media,
  .bio-row,
  .bio-row--reverse,
  .media-feature-row,
  .media-feature-row--reverse,
  .reach-grid {
    grid-template-columns: 1fr;
  }

  .service-block--reverse .service-block-media,
  .bio-row--reverse .bio-row-media,
  .media-feature-row--reverse .media-feature-visual {
    order: 0;
  }

  .help-category--ledger,
  .help-categories--offset {
    grid-template-columns: 1fr;
  }

  /* The desktop explicit column/row placement above (number | heading+copy
     | list) has to be released back to normal document order once the
     card drops to a single column, or the browser invents extra implicit
     columns to satisfy grid-column: 2 / 3 and the stack breaks sideways. */
  .help-category--ledger .help-category-number,
  .help-category--ledger h3,
  .help-category--ledger > p,
  .help-category--ledger ul {
    grid-column: 1;
    grid-row: auto;
  }

  .help-category--offset:nth-child(even) {
    margin-top: 0;
  }

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

@media (max-width: 560px) {
  .approach-band {
    grid-template-columns: 1fr;
  }

  /* At full desktop/tablet width the 130px label column has plenty of
     room, but on a narrow phone it leaves barely enough space for the
     value (especially the multi-line locations row) -- stack label above
     value instead of squeezing them side by side. */
  .reach-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 18px 0;
  }

  .reach-row-label {
    padding-top: 0;
  }

  /* Same idea for the ledger lists: two columns is fine once each item
     has 150px+ to work with, but on a narrow phone longer items like
     "Job aids and performance support" were wrapping to three cramped
     lines -- one column reads far more comfortably at this width. */
  .help-category--ledger ul {
    grid-template-columns: 1fr;
  }
}