/* ==========================================================================
   THRIVE Lab — visual system
   Typeface : Helvetica (system stack only)
   Palette  : restrained white canvas · INSEAD green · yellow-green · gold,
              all sampled from the supplied brand artwork
   Scheme   : follows the OS (prefers-color-scheme) in both modes
   Corners  : rounded rectangles throughout — no hard squares
   Artwork  : brand bubble + colour bar are inline SVG / CSS gradients reading
              the --mark-* tokens below. No raster export, no second dark asset.
   ========================================================================== */

:root {
  color-scheme: light dark;
  accent-color: var(--brand);

  --font-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  /* --------------------------------------------------------------------------
     Type scale
     Body = 1rem. Each level is a distinct multiple, so heading levels never
     collapse into one another:

       display  83px ─┐
       h2       45px  │ ×1.85, ×1.61, ×1.36, ×1.20 down to body
       h3       28px  │
       h4       20px  │
       body     17px ─┘

     Every clamp carries a floor: labels never drop under 12.5px, interactive
     text (nav, buttons) never under 15px, running text never under 16px.
     -------------------------------------------------------------------------- */
  --fs-display: clamp(2.5rem, 1.55rem + 4.3vw, 5.2rem);
  --fs-display-2: clamp(2.1rem, 1.42rem + 3vw, 4.1rem);
  --fs-h2: clamp(1.8rem, 1.42rem + 1.6vw, 2.8rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.65vw, 1.78rem);
  --fs-h4: clamp(1.08rem, 1.01rem + 0.32vw, 1.28rem);
  --fs-lede: clamp(1.08rem, 1rem + 0.42vw, 1.3rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.07rem);
  --fs-small: clamp(0.88rem, 0.85rem + 0.15vw, 0.96rem);
  --fs-nav: clamp(0.94rem, 0.9rem + 0.2vw, 1.02rem);
  --fs-label: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --fs-menu: clamp(1.25rem, 1.05rem + 1.3vw, 1.7rem);

  /* --------------------------------------------------------------------------
     Shape
     -------------------------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* --------------------------------------------------------------------------
     Colour — light (restrained white base)
     -------------------------------------------------------------------------- */
  --paper: #ffffff;
  --paper-2: #f4f8f5;
  --surface: #ffffff;
  --surface-tint: #edf5ef;
  --ink: #101f18;
  --ink-2: #3b4a42;
  --muted: #6a786f;
  --line: rgba(16, 31, 24, 0.1);
  --line-strong: rgba(16, 31, 24, 0.22);

  --brand: #00614a;
  --brand-strong: #004c3a;
  --brand-bright: #008f64;
  --brand-soft: #e7f4ec;
  --on-brand: #ffffff;

  --accent: #c9971f;
  --accent-bright: #f7bf49;
  --accent-soft: #fbf1d4;
  --on-accent: #1b1607;

  /* Brand artwork tokens — sampled from the supplied bubble + banner files.
     Every SVG gradient stop and the colour bar read these, so the whole
     identity re-tints from one place per scheme. */
  --mark-green-1: #00614a;
  --mark-green-2: #008f64;
  --mark-lime: #a8bf6a;
  --mark-gold-1: #f7bf49;
  --mark-teal: #24a38d;
  --mark-mint: #a4e0d3;
  --mark-lens: rgba(0, 46, 33, 0.4);
  --mark-sheen: rgba(216, 249, 234, 0.6);

  --bar: linear-gradient(
    90deg,
    var(--mark-green-1) 0%,
    var(--mark-green-2) 30%,
    var(--mark-lime) 62%,
    var(--mark-gold-1) 100%
  );

  /* Hero field: near-white canvas, brand colour only at the edges. */
  --field: linear-gradient(
    155deg,
    #ffffff 0%,
    #f6fdf9 42%,
    #f3f8e6 72%,
    #fdf1cf 100%
  );

  /* Supplied banner art is a raster, so it cannot re-tint through the --mark-*
     tokens. Light mode uses it untouched; the mask only dissolves its top edge
     into the field so the band never reads as a pasted-on rectangle. */
  --hero-art-filter: none;
  --hero-art-blend: normal;
  --hero-art-mask: linear-gradient(180deg, transparent 0, #000 44px, #000 100%);

  /* Copy sits on the artwork, so the wash behind it is lifted rather than the art
     being dimmed. --hero-col-left is the container's own left edge in the hero's
     full-bleed coordinate space, which lets the scrim be measured off the text
     column instead of the viewport: the measure is a fixed width, so a scrim
     anchored to the viewport would stop covering it at tablet width and veil the
     bubble cluster at desktop width. */
  --hero-col-left: max(calc(50% - (var(--max-width) / 2)), var(--gutter));
  --hero-scrim: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.92) 0,
    rgba(252, 253, 250, 0.88) calc(var(--hero-col-left) + 40px),
    rgba(249, 253, 249, 0.62) calc(var(--hero-col-left) + 300px),
    rgba(246, 253, 249, 0.3) calc(var(--hero-col-left) + 520px),
    rgba(246, 253, 249, 0) calc(var(--hero-col-left) + 680px)
  );

  --art-line: #2f7d57;
  --art-accent: #c9971f;
  --art-node: #6fae8b;

  /* --------------------------------------------------------------------------
     Rhythm — tightened to keep sections from drifting apart
     -------------------------------------------------------------------------- */
  --header-h: 78px;
  --gutter: clamp(20px, 4vw, 56px);
  --max-width: 1280px;
  --sp-section: clamp(52px, 5.4vw, 88px);
  --sp-block: clamp(24px, 2.8vw, 42px);
  --sp-card: clamp(14px, 1.6vw, 22px);

  --shadow-sm: 0 2px 10px rgba(16, 31, 24, 0.05);
  --shadow: 0 16px 38px rgba(16, 31, 24, 0.09);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Colour — dark (same hierarchy, system-following)
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #07120e;
    --paper-2: #0d1b15;
    --surface: #12241c;
    --surface-tint: #16291f;
    --ink: #eaf5ee;
    --ink-2: #b8ccc0;
    --muted: #7f968a;
    --line: rgba(234, 245, 238, 0.12);
    --line-strong: rgba(234, 245, 238, 0.26);

    /* The brand greens are lifted — #00614a on near-black is unreadable. */
    --brand: #4fbf95;
    --brand-strong: #7fd6b0;
    --brand-bright: #2fae83;
    --brand-soft: #10281f;
    --on-brand: #04140d;

    /* Gold is desaturated here: at full #f7bf49 it glows against the dark canvas. */
    --accent: #e0b95a;
    --accent-bright: #d9ac41;
    --accent-soft: #2b2514;
    --on-accent: #1b1607;

    --mark-green-1: #0d7f5c;
    --mark-green-2: #17a97a;
    --mark-lime: #8fae5e;
    --mark-gold-1: #d9ac41;
    --mark-teal: #1f9c82;
    --mark-mint: #35a98f;
    --mark-lens: rgba(2, 20, 14, 0.45);
    --mark-sheen: rgba(158, 235, 209, 0.3);

    --field: linear-gradient(
      155deg,
      #07120e 0%,
      #0a1a14 44%,
      #0d2118 72%,
      #16261a 100%
    );

    /* The banner's left half is a near-white wash. Any uniform brightness move
       leaves it as a grey slab on the dark field, so the dark theme composites it
       instead: multiply makes white transparent-by-definition, which drops the
       wash into the field seamlessly and leaves the bubbles as depth. */
    --hero-art-filter: brightness(1.3) saturate(1.45) contrast(1.12);
    --hero-art-blend: multiply;
    --hero-art-mask: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.4) 30px,
      #000 86px,
      #000 100%
    );

    /* Multiply already darkens the left of the band, so the scrim only has to keep
       the brand glow off the mission text — hence the lower opening weight. */
    --hero-scrim: linear-gradient(
      90deg,
      rgba(7, 18, 14, 0.86) 0,
      rgba(7, 18, 14, 0.8) calc(var(--hero-col-left) + 40px),
      rgba(7, 18, 14, 0.5) calc(var(--hero-col-left) + 300px),
      rgba(7, 18, 14, 0.22) calc(var(--hero-col-left) + 520px),
      rgba(7, 18, 14, 0) calc(var(--hero-col-left) + 680px)
    );

    --art-line: #74b992;
    --art-accent: #e0b95a;
    --art-node: #8ec7a6;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  background: var(--paper);
}

html.menu-open,
html.menu-open body {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.35s ease, color 0.35s ease;
}

::selection {
  background: var(--brand-soft);
  color: var(--brand);
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

svg {
  display: block;
}

/* Gradient defs live in one hidden sprite at the top of <body>; every mark on
   the page paints from it. Keep the box out of flow without display:none,
   which would stop the referenced gradients from resolving in Safari. */
/* The brand colour bar — nav underline, hero base, connect base. */
.brand-bar {
  display: block;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--bar);
  background-size: 100% 100%;
}

/* Very light grain. Large smooth gradients band on cheap panels; a 3% noise
   layer dithers them away for less than half a kilobyte. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.container {
  width: min(100% - (2 * var(--gutter)), var(--max-width));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 400;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Shared type + controls
   -------------------------------------------------------------------------- */

.micro-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--brand);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease);
}

.btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--ease);
}

.btn:hover {
  background: var(--brand-strong);
  color: var(--on-brand);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn--sm {
  min-height: 40px;
  padding: 10px 17px;
}

.btn--lg {
  min-height: 56px;
  padding: 17px 28px;
}

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

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}

/* The nav carries the brand stripe full width. Before the header turns to
   glass it sits on the white canvas; after, it is the only thing separating the
   translucent bar from the page beneath it. */
.site-header > .brand-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: clamp(16px, 2vw, 30px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  text-decoration: none;
  color: var(--ink);
}

/* The lockup file is 1700x1000 with its own clearspace baked in around a
   1434x768 mark, so the box is sized up from the 29px the mark needs to the 38px
   the file needs; width:auto holds its ratio at every size instead of the old
   square-ish SVG footprint. */
.brand__mark {
  flex: none;
  width: auto;
  height: 38px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}

.brand__word {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.brand__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.site-nav a {
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.site-nav a:hover,
.site-nav a.is-active {
  background: var(--brand-soft);
  color: var(--brand);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: clamp(12px, 2vw, 26px);
}

.site-header__cta {
  background: var(--brand);
  color: var(--on-brand);
}

.site-header__cta:hover {
  background: var(--brand-strong);
}

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.menu-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}

.menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: var(--r-pill);
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}

/* --------------------------------------------------------------------------
   Mobile menu
   -------------------------------------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu:not([open]) {
  display: none;
}

.mobile-menu[open] {
  animation: menu-in 0.38s var(--ease-out);
}

.mobile-menu::backdrop {
  background: rgba(7, 18, 12, 0.4);
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: 14px var(--gutter) 32px;
}

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--header-h) - 14px);
}

.mobile-menu__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
}

.mobile-menu__brand > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-btn--close {
  display: flex;
  position: relative;
}

.menu-btn--close span {
  position: absolute;
  width: 18px;
}

.menu-btn--close span:first-child {
  transform: rotate(45deg);
}

.menu-btn--close span:last-child {
  transform: rotate(-45deg);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(22px, 5vh, 48px);
}

.mobile-menu__nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 2.4vh, 18px) 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: var(--fs-menu);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.mobile-menu__nav a::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.35;
  transition: opacity 0.25s ease;
}

.mobile-menu__nav a:active,
.mobile-menu__nav a:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: var(--brand-soft);
  color: var(--brand);
}

.mobile-menu__nav a:active::before,
.mobile-menu__nav a:hover::before {
  opacity: 1;
}

.mobile-menu__foot {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: auto;
  padding-top: 40px;
}

.mobile-menu__foot p {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Hero

   The supplied 1920x512 banner (assets/img/hero.svg) is the section's backdrop:
   it fills the hero and the copy floats over the empty wash the artwork leaves
   on its left, which is where it was designed to carry text. --hero-scrim lifts
   that wash so the type keeps contrast where the cluster reaches further in at
   tablet width. Below the fold-break there is no wash wide enough to write on,
   so the layout turns into the stacked reading order — copy first, then the band.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: min(84svh, 720px);
  padding: calc(var(--header-h) + clamp(26px, 4.6vh, 58px)) 0 clamp(40px, 5.4vh, 72px);
  overflow: hidden;
  isolation: isolate;
  background: var(--field);
}

/* Raster artwork cannot read CSS custom properties the way the inline marks do,
   so the scheme swap is a filter plus a blend mode, both held in tokens. */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 50%;
  pointer-events: none;
  filter: var(--hero-art-filter);
  mix-blend-mode: var(--hero-art-blend);
  animation: art-in 1.4s 0.1s var(--ease-out) both;
}

/* In the dark theme the multiplied banner reads as shadow, so a shallow brand
   glow sits underneath it: the cluster becomes a shape in light rather than a
   hole in the field. Painted below the art (::before precedes it in tree order). */
@media (prefers-color-scheme: dark) {
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      54% 44% at 74% 98%,
      color-mix(in srgb, var(--brand-bright) 26%, transparent) 0%,
      transparent 68%
    );
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}

/* Only where the copy overlays the artwork. Full-bleed rather than sized to the
   container, because a scrim that ends inside the band leaves a hard vertical
   edge at wide viewports; its stops are measured off --hero-col-left instead, so
   the veil follows the text column and clears the cluster at every width. */
@media (min-width: 861px) {
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--hero-scrim);
    pointer-events: none;
  }
}

.brand-bar--hero,
.brand-bar--flush {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 4px;
  border-radius: 0;
}

.hero__title {
  grid-row: 1;
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.052em;
  line-height: 0.94;
}

/* The four lines are the copy's own phrasing, so the breaks are kept at every
   width — "Organisational" is the longest of them and still fits the 320px
   gutter, so no fallback wrapping is needed. Each line rises in sequence. */
.hero__title > span {
  display: block;
  animation: rise 0.95s var(--ease-out) both;
}

.hero__title > span:nth-child(1) {
  animation-delay: 0.1s;
}

.hero__title > span:nth-child(2) {
  animation-delay: 0.17s;
}

.hero__title > span:nth-child(3) {
  animation-delay: 0.24s;
}

.hero__title > span:nth-child(4) {
  animation-delay: 0.31s;
}

.hero__title-accent {
  color: var(--brand);
}

.hero__title-dot {
  display: inline-block;
  width: 0.12em;
  height: 0.12em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--accent-bright);
  vertical-align: 0.12em;
}

.hero__mission {
  grid-row: 2;
  max-width: 60ch;
  margin-top: clamp(4px, 0.9vw, 14px);
  animation: rise 0.95s 0.5s var(--ease-out) both;
}

.hero__mission-text {
  margin-top: 11px;
  max-width: 58ch;
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.52;
  color: var(--ink);
  text-wrap: pretty;
}

/* Affiliation line — the Lab's parent institution, stated in crawlable text
   next to the headline rather than carried only by the lockup image. */
.hero__affil {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--muted);
}

.hero__affil-link {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.hero__affil-link:hover {
  border-color: var(--brand);
}

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  padding: var(--sp-section) 0;
  scroll-margin-top: calc(var(--header-h) + 8px);
}

.section--activities {
  background: var(--paper-2);
}

.section-head {
  position: relative;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
}

.section-head::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 46px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bar);
}

.section-head__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.04;
  text-wrap: balance;
}

.section-intro {
  max-width: 68ch;
  margin-top: clamp(16px, 1.8vw, 26px);
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.58;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Why THRIVE

   The paragraph is the narration for what is playing, so the copy and the film
   sit side by side rather than one under the other. The embed ships at a fixed
   560x315; the frame gives it the column's width and holds 16/9 instead.
   -------------------------------------------------------------------------- */

.why {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(22px, 3.2vw, 52px);
  align-items: center;
  margin-top: clamp(18px, 2.2vw, 30px);
}

.why__text {
  max-width: 44ch;
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.58;
  color: var(--ink-2);
  text-wrap: pretty;
}

.why__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.why__video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Its own fold rather than the site's 860px one: below ~1080px a 5/7 split
   leaves the copy a narrow rail while the film is still wide enough to carry the
   row on its own, so the pair stacks here and the film takes the full measure. */
@media (max-width: 1080px) {
  .why {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 4.4vw, 36px);
  }

  .why__text {
    max-width: 68ch;
  }
}

/* --------------------------------------------------------------------------
   Accordion — one component, three uses
   Domains, Activities and Opportunities all collapse to a single row of key
   information and expand in place. Items are mutually exclusive inside a
   group (data-accordion="exclusive"), wired up in main.js.

   Height animates with grid-template-rows 0fr -> 1fr. No measured pixel
   heights and no ResizeObserver, so it stays correct while text reflows, the
   window resizes or the OS font size changes. Collapsed panels get [inert]
   from JS, which removes them from the tab order and the accessibility tree
   without display:none — which could not be transitioned. With no JS the .js
   gate never applies and every panel renders open.
   -------------------------------------------------------------------------- */

.acc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--sp-block);
}

.acc__item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.35s ease;
}

/* The brand colour bar marks the open item — a 3px stripe down the leading
   edge, painted with the same gradient as the nav rule. */
.acc__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--bar);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.acc__item:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}

.acc__item.is-open {
  border-color: color-mix(in srgb, var(--brand) 38%, transparent);
  box-shadow: var(--shadow);
}

.acc__item.is-open::before {
  opacity: 1;
}

.acc__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.acc__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: clamp(14px, 1.8vw, 26px);
  width: 100%;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 34px);
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.acc__trigger:hover {
  background: color-mix(in srgb, var(--brand-soft) 55%, transparent);
}

.acc__trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -3px;
}

.acc__title {
  grid-area: 1 / 1;
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  transition: color 0.25s ease;
}

.acc__item.is-open .acc__title,
.acc__trigger:hover .acc__title {
  color: var(--brand);
}

.acc__key {
  grid-area: 2 / 1;
  max-width: 64ch;
  margin-top: 7px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.acc__badge {
  grid-area: 3 / 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: start;
  justify-self: start;
  margin-top: 15px;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--brand);
}

.acc__badge--muted {
  border-color: var(--line);
  background: var(--paper-2);
  color: var(--muted);
}

.acc__badge-day {
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: none;
}

.acc__badge-when::before,
.acc__badge-where::before {
  content: "\00b7";
  margin-right: 9px;
  opacity: 0.55;
}

.acc__icon {
  display: none;
  position: relative;
  grid-area: 1 / 2 / 4 / 3;
  align-self: center;
  justify-self: end;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-2);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.42s var(--ease), opacity 0.25s ease;
}

.acc__icon::before {
  transform: translate(-50%, -50%);
}

.acc__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.acc__trigger:hover .acc__icon {
  border-color: var(--brand);
  color: var(--brand);
}

.js .acc__icon {
  display: block;
}

.acc__item.is-open .acc__icon {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.acc__item.is-open .acc__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.acc__panel {
  display: grid;
  transition: grid-template-rows 0.5s var(--ease);
}

/* Only collapsed once main.js has marked itself ready. Without the .js class
   every panel is open, so the content is never gated behind a script that may
   not have run. */
.js .acc__panel {
  grid-template-rows: 0fr;
}

.js .acc__item.is-open .acc__panel {
  grid-template-rows: 1fr;
}

.acc__panel-inner {
  min-height: 0;
  overflow: hidden;
  padding-inline: clamp(22px, 2.4vw, 34px);
}

/* Vertical padding lives on the children, never on the clipped box — a
   border-box element cannot shrink below its own padding, which would leave a
   seam under every collapsed header. */
.acc__panel-inner > :first-child {
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}

.acc__panel-inner > * + * {
  margin-top: 0.95em;
}

.acc__panel-inner > :last-child {
  margin-bottom: clamp(24px, 2.4vw, 32px);
}

/* Prose links only — `.btn` must keep its own colours. This rule is
   (0,1,1), so a plain `a` selector would outrank `.btn` (0,1,0) and paint the
   label in --brand on a --brand pill: invisible until :hover bumped the
   specificity. */
.acc__panel-inner a:not(.btn) {
  color: var(--brand);
  text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.acc__panel-inner a:not(.btn):hover {
  text-decoration-color: currentColor;
}

.acc__note {
  font-weight: 600;
  color: var(--brand);
}

.acc__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

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

.people-group {
  margin-top: var(--sp-block);
}

.people-group + .people-group {
  margin-top: clamp(30px, 3.4vw, 48px);
}

/* The two categories are separated by a labelled rule rather than by nested
   cards, so a future third group (Lab Manager, PhD fellows) drops in with no
   structural change. */
.people-group__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--muted);
}

.people-group__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* The Lab Scholar list collapses to its first grid row. The control is
   revealed by main.js, so without scripting every card stays visible. */
.people-group__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.people-group__head .people-group__label {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.people-group__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--brand);
  cursor: pointer;
  transition: color 0.25s ease;
}

.people-group__toggle[hidden] {
  display: none;
}

/* Widen the touch target without changing the height of the rule beside it. */
.people-group__toggle::before {
  content: "";
  position: absolute;
  inset: -12px 0;
}

.people-group__toggle:hover {
  color: var(--ink);
}

.people-group__toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 2px;
}

.people-group__toggle-icon {
  position: relative;
  width: 12px;
  height: 12px;
  flex: none;
}

.people-group__toggle-icon::before,
.people-group__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 0.3s var(--ease), opacity 0.3s ease;
}

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

.people-group__toggle[aria-expanded="true"] .people-group__toggle-icon::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-card);
}

/* Lab Scholar cards follow the same two-column rhythm as the groups above, so
   the card edges line up; the only addition is the first-row disclosure. */
.person[hidden] {
  display: none;
}

.person {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 16px;
  gap: 18px;
  align-items: start;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.4s var(--ease);
}

.person:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* Selected person — the frame takes the brand colour and stays lit. */
.person.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.person.is-selected:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent), var(--shadow);
}

.person__photo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r-md);
  transition: transform 0.5s var(--ease);
}

.person:hover .person__photo {
  transform: scale(1.03);
}

.person__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.person__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  transition: color 0.25s ease;
}

.person__name svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.32;
  transition: opacity 0.25s ease, transform 0.35s var(--ease);
}

.person:hover .person__name,
.person.is-selected .person__name {
  color: var(--brand);
}

.person:hover .person__name svg,
.person.is-selected .person__name svg {
  opacity: 1;
}

.person:hover .person__name svg {
  transform: translate(2px, -2px);
}

.person__role {
  display: block;
  max-width: 44ch;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
}

.person__role + .person__role {
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Footer
   The postal address is not confirmed yet — see [data-todo="lab-address"] in
   index.html. The placeholder keeps its own styling so the swap is text-only.
   -------------------------------------------------------------------------- */

.site-footer {
  padding: clamp(30px, 3.4vw, 48px) 0 clamp(34px, 4vw, 54px);
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
}

/* Packed to the left rather than split across the container. The old
   1.4fr / 1fr grid gave the brand a ~720px track for ~390px of content, which
   printed as a hole in the middle of the footer. The hairline is decoration on
   top of the column gap, so it can be dropped alone when the pair wraps. */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: clamp(20px, 2.4vw, 36px);
  row-gap: 26px;
}

.site-footer__brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
}

.site-footer__name {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.site-footer__addr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: clamp(20px, 2.4vw, 36px);
  border-left: 1px solid var(--line);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.site-footer__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-footer__placeholder {
  align-self: start;
  padding: 3px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xs);
  color: var(--muted);
}

/* The last line of the page. It sits under the legal band instead of in the
   address row, so it no longer has to fit a narrow grid track — the nowrap that
   used to force it there is gone. */
.site-footer__meta {
  margin-top: clamp(16px, 1.8vw, 22px);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  color: var(--muted);
}

.site-footer__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.site-footer__link:hover {
  color: var(--brand);
  border-color: var(--brand);
}

/* Bottom legal band — disclaimer + security notice, printed verbatim.
   One hairline above, quiet grey type, wide measure: it must read as a notice,
   never as a second block of content. */
.site-footer__legal {
  display: grid;
  gap: 12px;
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
}

.site-footer__legal-text {
  max-width: 110ch;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.005em;
  color: var(--muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Connect
   -------------------------------------------------------------------------- */

.connect {
  position: relative;
  padding: clamp(56px, 6.5vw, 96px) 0;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, var(--brand-soft) 0%, var(--paper) 68%);
  color: var(--ink);
  scroll-margin-top: var(--header-h);
}

.connect__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.connect__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--paper) 92%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 80%, transparent) 0%, color-mix(in srgb, var(--paper) 40%, transparent) 44%, transparent 78%);
}

.connect__inner {
  position: relative;
  z-index: 2;
}

.connect__title {
  max-width: 14ch;
  font-family: var(--font-sans);
  font-size: var(--fs-display-2);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: var(--ink);
  text-wrap: balance;
}

.connect__accent {
  color: var(--brand);
}

.connect__text {
  max-width: 54ch;
  margin-top: clamp(16px, 2vw, 26px);
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.connect__action {
  margin-top: clamp(22px, 2.6vw, 34px);
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */

.to-top {
  position: fixed;
  right: clamp(16px, 2.2vw, 30px);
  bottom: clamp(16px, 2.2vw, 30px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.3s var(--ease), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.to-top[hidden] {
  display: none;
}

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

.to-top__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.to-top__arrow {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}

.to-top:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.to-top:hover .to-top__arrow {
  transform: translateY(-2px);
}

.to-top__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

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

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.art-sheen {
  animation: sheen 11s ease-in-out infinite alternate;
}

@keyframes sheen {
  from {
    opacity: 0.62;
  }
  to {
    opacity: 1;
  }
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translate3d(54px, 26px, 0) scale(0.93);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The band is full-bleed, so it fades in rather than sliding — a translate here
   would pull its edge away from the section boundary mid-animation. */
@keyframes art-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (max-width: 1180px) {
  .site-nav a {
    padding: 9px 11px;
  }
}

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

  .menu-btn {
    display: flex;
  }

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

@media (max-width: 860px) {
  :root {
    --header-h: 68px;
  }

  .hero {
    min-height: auto;
    padding: calc(var(--header-h) + clamp(26px, 6vh, 46px)) 0 clamp(146px, 40vw, 250px);
  }

  .hero__mission {
    max-width: 56ch;
  }

  /* No wash is wide enough to write on at this size, so the banner drops below
     the copy and keeps only its right edge in frame: the crop slides across so
     the bubble cluster, not the empty wash, is what stays visible. The mask is
     applied here rather than in the base rule because it only exists to dissolve
     the top edge of a band that sits on the field instead of filling it. */
  .hero__art {
    top: auto;
    height: clamp(150px, 40vw, 260px);
    object-position: 100% 50%;
    -webkit-mask-image: var(--hero-art-mask);
    mask-image: var(--hero-art-mask);
  }

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

  /* Below this width the address wraps under the lockup, where a vertical rule
     would stand beside nothing. The column gap still spaces them when they do
     share a line, so only the hairline and its indent come off. */
  .site-footer__addr {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 700px) {
  .acc__trigger {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 19px 18px;
  }

  .acc__icon {
    width: 30px;
    height: 30px;
  }

  .acc__panel-inner {
    padding-inline: 18px;
  }

  .connect {
    padding: clamp(48px, 12vw, 76px) 0;
  }

  /* Stacked on a phone: row gap only, since the divider is already off at 860px. */
  .site-footer__inner {
    row-gap: 24px;
  }

  .connect__title {
    max-width: 100%;
  }

  .connect__title br {
    display: none;
  }

  .connect__fade {
    background:
      linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--paper) 94%, transparent) 100%),
      linear-gradient(90deg, color-mix(in srgb, var(--paper) 76%, transparent) 0%, transparent 92%);
  }

  .to-top {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }

  .to-top__label {
    display: none;
  }
}

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

  .people-group__head {
    align-items: flex-start;
    gap: 12px;
  }

  .people-group__toggle {
    padding-top: 1px;
  }

  .brand__mark {
    height: 31px;
  }

  .brand__word {
    font-size: 1.22rem;
  }

  .person {
    grid-template-columns: 62px minmax(0, 1fr) 14px;
    gap: 14px;
  }

  .person__photo {
    width: 62px;
    height: 62px;
  }

  /* Keep the status pill on one line at phone width. */
  .acc__badge {
    gap: 7px;
    padding: 6px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion / print
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

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

  .hero__title > span,
  .hero__mission,
  .hero__art,
  .art-sheen {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .acc__panel {
    transition: none;
  }
}

@media print {
  .site-header,
  .mobile-menu,
  .hero__art,
  .hero::before,
  .hero::after,
  .why__media,
  .connect__art,
  .connect__fade,
  .brand-bar,
  .to-top {
    display: none !important;
  }

  /* Print always shows the full text, never a collapsed accordion. */
  .acc__panel {
    grid-template-rows: 1fr !important;
  }

  .js .acc__panel {
    grid-template-rows: 1fr !important;
  }

  .acc__icon,
  .acc__item::before {
    display: none !important;
  }

  .site-footer__addr {
    padding-left: 0;
    border-left: 0;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section,
  .hero,
  .connect {
    padding: 24px 0;
    min-height: auto;
  }

  .hero__inner {
    display: block;
  }

  .hero__mission {
    margin-top: 24px;
  }
}