@font-face {
  font-family: Karla;
  src: url("../../src/fonts/Karla-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Karla;
  src: url("../../src/fonts/Karla-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: Karla;
  src: url("../../src/fonts/Karla-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Karla;
  src: url("../../src/fonts/Karla-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Karla;
  src: url("../../src/fonts/Karla-BoldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

/* Design tokens. Values come from the Figma homepage frame (1440 wide):
   Heading H2 58px, Body 20px, content column 1170 inside a 9.375% gutter. */
:root {
  --navy: #031833;
  --purple: #5327b1;
  --cyan: #63d6d7;
  --pink: #c83cb6;
  --white: #fff;

  --content: 1170px;
  --gutter: 9.375%;

  /* The design frame itself. The decorative hairlines are laid out against this
     at its true size rather than against the viewport, so that they keep the
     spacing to the content column that the design gives them. */
  --frame: 1440px;

  --heading: clamp(38px, 4.028vw, 64px);
  --body: clamp(17px, 1.389vw, 20px);

  @media (max-width: 1100px) {
    --gutter: 7%;
    --heading: 46px;
    --body: 18px;
  }

  @media (max-width: 767px) {
    --gutter: 7%;
    --heading: 38px;
    --body: 17px;
  }
}

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

html {
  scroll-padding-top: 110px;

  @media (max-width: 767px) {
    scroll-padding-top: 90px;
  }
}

/* Lenis adds these root classes itself while it drives the scroll (see
   src/js/smooth-scroll.js). height:auto keeps the document measurable, and an
   iframe must not swallow the wheel events Lenis is reading. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: Karla, Arial, sans-serif;
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.406;
  -webkit-font-smoothing: antialiased;

  &.menu-open {
    overflow: hidden;
  }
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
input {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
  color: inherit;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 6px;
}

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

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

h1,
h2,
h3 {
  font-weight: 400;
  overflow-wrap: anywhere;
}

strong {
  font-weight: 700;
}

::selection {
  background: var(--cyan);
  color: var(--navy);
}

/* Shared primitives ------------------------------------------------------ */

.section_container {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin-inline: auto;
}

/* Blocks are stacked here; the artwork in each section bleeds and is clipped. */
.site_main {
  overflow: hidden;
  isolation: isolate;
}

/* Optional per-page background image (Page Settings → Background image).
   Sits behind every section; the sections' own glows layer on top of it. */
.site_main.has_background {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--page-background);
    background-position: var(--page-background-position, center top);
    background-size: var(--page-background-size, cover);
    background-attachment: var(--page-background-attachment, scroll);
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
  }
}

.btn {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--cyan);
  border-radius: 100px;
  font-size: clamp(18px, 1.667vw, 24px);
  line-height: 1.25;
  font-weight: 300;
  color: var(--cyan);
  transition:
    box-shadow 0.3s,
    color 0.2s,
    background 0.2s;

  span {
    font-weight: 700;
    transition: transform 0.3s;
  }

  &:hover {
    box-shadow: 0px 0px 20px 0px rgba(99.00000000000001, 213.99999999999997, 215, 0.87);
  }

  @media (max-width: 767px) {
    min-height: 44px;
    font-size: 18px;
  }
}

/* The coloured lighting behind a section. Faded at both edges so adjacent
   section glows blend into each other continuously. */
.section_glow {
  position: absolute;
  inset: -15% -20%;
  z-index: -1;
  pointer-events: none;
  mask-image: linear-gradient(transparent, #000 22%, #000 72%, transparent);
}

/* A full-bleed slice of the About page's gradient artwork. Unlike .section_glow
   these are continuous — each section carries the piece of the export that sits
   behind it — so they are neither inset nor masked, or the seams would show.
   The slice is stretched to its section, which is invisible on art this soft. */
.page_glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}

/* Pages whose gradient is one continuous composition carry its individual
   layers section by section, each positioned in the section it passes through
   and clipped to it — so the artwork runs on across the joins rather than
   fading out at every section edge the way the homepage's glows do. */
.section_glow.flush {
  inset: 0;
  overflow: hidden;
  mask-image: none;
  -webkit-mask-image: none;

  > div {
    position: absolute;
  }

  /* Each layer carries its own box, so the artwork lands where the design puts
     it however tall the section grows. */
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* The crosshair marker beside a section heading (Figma "Group 75").
   No mix-blend-mode here: every .plus_heading also carries [data-reveal], and
   GSAP leaves an inline transform on it, so the heading is its own blending
   group and the marker can never reach the .section_glow behind it. Figma's
   "overlay" would also darken the white artwork into the navy anyway. */
.plus_heading {
  position: relative;

  .plus {
    position: absolute;
  }
}

.screen_reader_text,
.skip_link:not(:focus) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip_link:focus {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  background: var(--cyan);
  color: var(--navy);
  padding: 12px 20px;
}

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

/* Section heading — Figma Heading H2: Karla Regular 58px, line-height 0.8. */
.section_title {
  font-size: var(--heading);
  line-height: 0.8;
  letter-spacing: -0.02em;
  margin-bottom: 32px;

  @media (max-width: 1100px) {
    line-height: 1.1;
  }

  @media (max-width: 767px) {
    line-height: 1.1;
    margin-bottom: 25px;
  }
}

/* Figma Heading H5: Karla Bold Italic 58px, line-height 2. Used by the team
   statement and the pathways heading. */
.statement_text {
  font-size: var(--heading);
  line-height: 2;
  text-align: right;
  letter-spacing: -0.02em;

  strong em {
    font-weight: 700;
  }

  @media (max-width: 1100px) {
    line-height: 1.75;
  }

  @media (max-width: 767px) {
    font-size: 34px;
    line-height: 1.6;
    text-align: left;
  }
}

/* Editor rich text. One blank line between paragraphs = 20px x 1.406. */
.desc {
  p + p {
    margin-top: 28px;

    @media (max-width: 767px) {
      margin-top: 20px;
    }
  }

  p:last-child {
    margin-bottom: 0;
  }
}

/* Ordinary pages, single posts and archives ------------------------------ */

.inner_page {
  padding-top: 200px;
  padding-bottom: 140px;
  min-height: 75vh;

  h1 {
    font-size: var(--heading);
    line-height: 1.1;
    max-width: 1000px;
    margin-bottom: 50px;
  }

  @media (max-width: 767px) {
    padding-top: 140px;
    padding-bottom: 80px;

    h1 {
      font-size: 40px;
      margin-bottom: 35px;
    }
  }
}

.entry_content {
  line-height: 1.6;
  overflow-wrap: anywhere;

  iframe {
    max-width: 100%;
  }

  pre,
  .wp-block-table {
    overflow-x: auto;
  }

  > *:not(section) {
    width: calc(100% - var(--gutter) * 2);
    max-width: 900px;
    margin: 0 auto 30px;
  }

  a {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--cyan);
  }

  h2 {
    font-size: 38px;
  }
}

/* A single news story. Most stories are just a headline, a transparent logo
   or portrait and perhaps a publisher link, so the header is the page: text
   beside the artwork, which sits on its own tinted panel. */
.single_entry {
  .entry_header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 70px;
    align-items: center;

    &.no_image {
      grid-template-columns: minmax(0, 1fr);
      max-width: 900px;
    }
  }

  .back_link {
    display: inline-flex;
    gap: 8px;
    margin-bottom: 40px;
    font-size: 16px;
    color: #ffffffb3;
    transition: color 0.2s;

    &:hover {
      color: var(--cyan);
    }
  }

  .entry_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 20px;
    font-size: 16px;
  }

  time {
    color: var(--cyan);
  }

  .entry_category {
    padding: 2px 12px;
    border: 1px solid #ffffff40;
    border-radius: 100px;
    font-size: 14px;
    color: #ffffffcc;
  }

  h1 {
    font-size: clamp(32px, 3.333vw, 48px);
    line-height: 1.2;
    margin-bottom: 0;
  }

  .btn {
    margin-top: 40px;
  }

  .entry_image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 8%;
    border: 1px solid #63d6d733;
    border-radius: 20px;
    background:
      radial-gradient(circle at 30% 20%, #5327b166, transparent 65%),
      radial-gradient(circle at 80% 90%, #63d6d733, transparent 60%),
      #ffffff08;
    overflow: hidden;

    img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      /* Portrait cutouts end in a hard crop at the shoulders; soften it. */
      mask-image: linear-gradient(#000 80%, transparent);
    }
  }

  .entry_content {
    max-width: 800px;
    margin-top: 70px;

    > * {
      width: 100%;
      margin-left: 0;
    }
  }

  .post-navigation {
    margin-top: 100px;
    padding-top: 40px;
    border-top: 1px solid #63d6d766;
  }

  .nav-previous,
  .nav-next {
    a {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    a:hover .nav_title {
      color: var(--cyan);
    }
  }

  .nav-next {
    text-align: right;

    a {
      align-items: flex-end;
    }
  }

  .nav_label {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffffb3;
  }

  .nav_title {
    max-width: 420px;
    font-size: 18px;
    line-height: 1.35;
    transition: color 0.2s;
  }

  @media (max-width: 900px) {
    .entry_header {
      grid-template-columns: minmax(0, 1fr);
      gap: 50px;
    }

    .back_link {
      margin-bottom: 30px;
    }

    .post-navigation {
      margin-top: 70px;
    }
  }

  @media (max-width: 767px) {
    h1 {
      font-size: 30px;
      margin-bottom: 0;
    }

    .btn {
      margin-top: 30px;
    }

    .entry_image {
      border-radius: 14px;
    }

    .nav-next {
      text-align: left;

      a {
        align-items: flex-start;
      }
    }
  }
}

.archive_intro {
  max-width: 760px;
  margin: -25px 0 45px;
}

.news_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;

  @media (max-width: 1100px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

.news_card {
  border-top: 1px solid #63d6d766;
  padding-top: 24px;

  time {
    display: block;
    color: var(--cyan);
    font-size: 16px;
    margin-bottom: 20px;
  }

  img {
    aspect-ratio: 16/10;
    object-fit: cover;
    margin-bottom: 24px;
  }

  h2 {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 20px;
  }

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

.post-navigation,
.pagination {
  margin-top: 60px;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;

  > div {
    flex: 1 1 240px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

.not_found .btn {
  margin-top: 40px;
}

.site_header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* No z-index at rest: that would make the header a stacking context and
     isolate .brand_art's blend from the page behind it. Its children carry
     their own layers instead; it only takes one when it paints a surface. */
  transition:
    background 0.25s,
    box-shadow 0.25s;

  &.is-sticky {
    position: fixed;
    z-index: 1000;

    /* Blurred only at rest at the top of the page. Safari re-blurs this
       full-width strip against new content on every scrolled frame, and by then
       .is-scrolled has painted a 90%-opaque navy over it, so there is almost
       nothing left to see through anyway. */
    &:not(.is-scrolled) {
      backdrop-filter: blur(6px);
    }

    &.is-scrolled {
      background: #031833e6;
      box-shadow: 0 1px 0 #63d6d733;
    }
  }

  @media (max-width: 767px) {
    &.menu-is-open {
      position: fixed;
      z-index: 1000;
      background: var(--navy);
    }
  }
}

.header_inner {
  height: 122px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;

  @media (max-width: 1100px) {
    height: 100px;
  }

  @media (max-width: 767px) {
    height: 92px;
  }
}

.brand {
  display: block;
  flex-shrink: 0;

  img {
    width: 170px;
    height: 68px;
    object-fit: contain;

    @media (max-width: 1100px) {
      width: 145px;
      height: 58px;
    }

    @media (max-width: 767px) {
      width: 130px;
      height: 52px;
    }
  }
}

/* The packaged white wordmark, overlay-blended onto the page behind it, as on
   the live site. Its own z-index keeps it a root-level layer so the blend
   reaches the page. */
.brand_art {
  position: relative;
  z-index: 1000;
  display: block;
  width: 170px;
  height: 68px;
  mix-blend-mode: overlay;

  /* Over the header's own navy surface (or inside the blur's isolated group)
     overlay would darken it to near-invisible, so it stays plain white. */
  .is-sticky &,
  .menu-is-open & {
    mix-blend-mode: normal;
  }

  .wordmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65.29%;
  }

  .tagline {
    position: absolute;
    top: 83.06%;
    left: 42.49%;
    width: 57.51%;
    height: 16.94%;
  }

  @media (max-width: 1100px) {
    width: 145px;
    height: 58px;
  }

  @media (max-width: 767px) {
    width: 130px;
    height: 52px;
  }
}

/* Overlay alone reads a touch faint, and opacity is already at 1, so a plain
   white copy of the mark sits over the blended one at partial strength to lift
   it towards solid. Raise --brand-lift for a stronger logo. */
.brand:has(> .brand_art) {
  position: relative;
  /* Centres the wordmark, not wordmark + tagline, on the nav row: down by half
     the tagline band (17.35% of the mark's height). `top` rather than a
     transform, which would isolate the blend above. */
  top: 12px;

  @media (max-width: 1100px) {
    top: 10px;
  }

  @media (max-width: 767px) {
    top: 9px;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1000;
    background: #fff;
    opacity: var(--brand-lift, 0.2);
    pointer-events: none;
    mask:
      url("../../src/images/logo-wordmark.svg") left top / 100% 65.29% no-repeat,
      url("../../src/images/logo-tagline.svg") right bottom / 57.51% 16.94% no-repeat;
  }
}

.nav_list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 30px;

  li {
    position: relative;
  }

  a {
    font-size: 18px;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    position: relative;
    white-space: nowrap;
    width: 100%;

    /* 2px cyan underline, per the Figma nav buttons. */
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0px;
      height: 2px;
      background: var(--cyan);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s;
    }

    &:hover::after {
      transform: scaleX(1);
    }
  }

  .current-menu-item > a {
    font-weight: 700;

    &::after {
      transform: scaleX(1);
    }
  }

  .sub-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: -16px;
    min-width: 180px;
    padding: 12px 16px;
    background: var(--navy);
    border: 1px solid #63d6d755;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
  }

  li:hover > .sub-menu,
  li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
  }

  @media (max-width: 1100px) {
    gap: 20px;

    a {
      font-size: 16px;
    }
  }
}

.primary_navigation {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;

  @media (max-width: 767px) {
    display: block;
    position: fixed;
    inset: 92px 0 0;
    background: radial-gradient(ellipse at 15% 85%, #5327b199, transparent 65%), var(--navy);
    padding: 35px var(--gutter);
    overflow: auto;
    overscroll-behavior: contain;

    /* Closed. The drawer keeps its box so there is something to animate from;
       visibility is what holds it out of the tab order and stops it swallowing
       taps, and it is delayed past the fade rather than cutting the panel off
       mid-transition. The panel itself only fades — the rows supply the
       movement, so nothing slides up over the header while the header's own
       backdrop is still fading in behind it. */
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 240ms ease,
      visibility 0s linear 300ms;

    /* Each row follows the one above it in. header.js stamps --i in document
       order, so the stagger holds however many items are published. */
    .nav_list > li,
    .header_cta {
      opacity: 0;
      transform: translateY(12px);
      transition:
        opacity 220ms ease,
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    &.is-open {
      opacity: 1;
      visibility: visible;
      transition:
        opacity 240ms ease,
        visibility 0s;

      .nav_list > li,
      .header_cta {
        opacity: 1;
        transform: none;
        /* On the way in only — closing drops the delay so the rows leave with
           the panel instead of trailing after it. */
        transition-delay: calc(60ms + var(--i, 0) * 45ms);
      }
    }

    .nav_list {
      display: block;

      > li {
        border-bottom: 1px solid #63d6d733;
      }

      a {
        font-size: 30px;
        min-height: 74px;
      }
    }

    .sub-menu {
      position: static;
      visibility: visible;
      opacity: 1;
      border: 0;
      padding: 0 0 12px 20px;
      background: transparent;

      a {
        font-size: 22px;
        min-height: 44px;
      }
    }
  }
}

/* Optional call to action after the navigation (Theme Options → Header). */
.header_cta {
  display: inline-flex;
  margin-left: 24px;

  .btn {
    font-size: 16px;
    min-height: 38px;
    padding: 6px 14px;
  }

  @media (max-width: 767px) {
    margin: 22px 0 0;
  }
}

.menu_toggle {
  display: none;

  @media (max-width: 767px) {
    display: flex;
    gap: 12px;
    align-items: center;
    position: relative;
    z-index: 1000;
    border: 0;
    background: transparent;
    padding: 12px 0 12px 12px;
    font-size: 16px;
    min-height: 44px;
  }
}

.menu_toggle_icon {
  position: relative;
  width: 30px;
  height: 22px;
  /* The middle bar is painted on the element itself so the markup stays empty. */
  background: linear-gradient(var(--cyan), var(--cyan)) no-repeat center;
  background-size: 100% 1px;
  transition: background-size 0.25s;

  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cyan);
    transition: transform 0.25s;
    top: 0;
  }

  &::after {
    top: auto;
    bottom: 0;
  }

  .menu_toggle[aria-expanded="true"] & {
    background-size: 0 1px;

    &::before {
      transform: translateY(10.5px) rotate(45deg);
    }

    &::after {
      transform: translateY(-10.5px) rotate(-45deg);
    }
  }
}

.admin-bar .site_header {
  top: 32px;

  @media (max-width: 767px) {
    top: 46px;
  }
}

@media (max-width: 767px) {
  .admin-bar .primary_navigation {
    top: 138px;
  }

  /* Without JavaScript the drawer cannot open, so lay the nav out inline. */
  html:not(.has-js) {
    .site_header {
      position: relative;
    }

    .header_inner {
      height: auto;
      flex-wrap: wrap;
      padding-block: 20px;
    }

    .primary_navigation {
      display: block;
      position: static;
      padding: 0;
      width: 100%;
      opacity: 1;
      visibility: visible;

      .nav_list > li,
      .header_cta {
        opacity: 1;
        transform: none;
      }

      .nav_list a {
        font-size: 20px;
        min-height: 44px;
      }
    }

    .menu_toggle {
      display: none;
    }
  }
}

.site_footer {
  position: relative;
  /* background: radial-gradient(ellipse at 8% 75%, #7f218f 0, transparent 52%),
    radial-gradient(ellipse at 98% 95%, #2995b5 0, transparent 58%), #5327b1;
     */
  padding: 65px 0 32px;
  background: #5327b1;

  .gradient {
    position: absolute;
    width: 100%;
    height: 150%;
    top: -50%;
    left: 0;
    pointer-events: none;

    img {
      width: 100%;
      height: 100%;
    }

    .purple {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
    }

    .green {
      position: absolute;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
    }
  }

  .section_container {
    position: relative;
    z-index: 20;
  }

  @media (max-width: 767px) {
    padding-top: 48px;
  }
}

.footer_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 70px;

  nav {
    flex: 1;
  }

  .nav_list {
    justify-content: flex-end;
    gap: clamp(18px, 5vw, 98px);

    a {
      font-size: 20px;
      letter-spacing: -0.3px;
    }
  }

  @media (max-width: 1100px) {
    gap: 45px;

    .nav_list {
      gap: 18px;

      a {
        font-size: 18px;
      }
    }
  }

  @media (max-width: 767px) {
    display: block;

    .brand {
      margin-bottom: 30px;
    }

    .nav_list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 25px;

      a {
        font-size: 18px;
      }
    }
  }
}

.footer_middle {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 90px;
  margin-top: 54px;

  @media (max-width: 1100px) {
    gap: 40px;
  }

  @media (max-width: 767px) {
    flex-direction: column;
    gap: 28px;
    margin-top: 28px;
  }
}

.newsletter {
  max-width: 435px;
  width: 100%;
  padding-top: 25px;

  /* The form comes from a plugin, so style by element rather than by class:
     whatever markup the shortcode renders picks up the HDAX look. */
  input[type="email"],
  input[type="text"] {
    min-width: 0;
    width: 100%;
    height: 50px;
    background: #ffffffcf;
    color: var(--navy);
    border: 1px solid var(--cyan);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 20px;

    &::placeholder {
      color: #787588;
    }

    /* Thicken the border instead of the global offset outline ring. */
    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 1px var(--cyan);
    }
  }

  button,
  input[type="submit"] {
    flex-shrink: 0;
    height: 50px;
    padding: 8px 20px;
    background: transparent;
    color: var(--cyan);
    border: 1px solid var(--cyan);
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;

    &:hover,
    &:focus-visible {
      background: var(--cyan);
      color: var(--navy);
    }

    &:focus-visible {
      outline: none;
    }
  }

  /* Most form plugins wrap the field and the button in a flex-friendly row. */
  form p,
  .form_row {
    display: flex;
    gap: 10px;
    margin: 0;
  }

  /* Forminator puts the field and the submit in two sibling rows, so the form
     itself becomes the flex row that sits them side by side. */
  form.forminator-custom-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Top-align so an inline error under the field doesn't stretch the button. */
    align-items: flex-start;
  }

  /* A zero basis keeps a long inline error from widening the field row and
     pushing the submit onto its own line. */
  .forminator-row {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
  }

  .forminator-row-last {
    flex: 0 0 auto;
  }

  .forminator-response-message {
    flex-basis: 100%;
    order: 10;
    font-size: 15px;
    line-height: 1.4;
    margin-top: 12px;

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

    &.forminator-error {
      color: var(--pink);
    }

    &.forminator-success {
      color: var(--cyan);
    }
  }

  /* Field errors already show inline under the input (and are tied to it via
     aria-describedby), so drop Forminator's duplicate summary for those. */
  form:has(.forminator-has_error) .forminator-response-message.forminator-error {
    display: none;
  }

  .forminator-error-message {
    display: block;
    font-size: 15px;
    line-height: 1.4;
    margin-top: 8px;
    color: var(--pink);
  }

  label {
    display: block;
  }

  /* Consent checkboxes and plugin validation messages. */
  input[type="checkbox"] {
    accent-color: var(--cyan);
    margin: 2px 7px 0 0;
    flex-shrink: 0;
  }

  .wpcf7-not-valid-tip,
  .wpcf7-response-output,
  .mc4wp-alert {
    font-size: 15px;
    line-height: 1.4;
    margin-top: 12px;
    color: #ffffffc9;
  }

  @media (max-width: 767px) {
    max-width: none;
    padding-top: 0;

    input[type="email"],
    input[type="text"],
    button,
    input[type="submit"] {
      font-size: 17px;
    }

    button,
    input[type="submit"] {
      padding-inline: 16px;
    }
  }
}

.footer_contact {
  min-width: 235px;
  text-align: right;

  @media (max-width: 767px) {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 15px;
    min-width: 0;
  }
}

.social_links {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-bottom: 13px;

  a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
  }

  img {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  @media (max-width: 767px) {
    margin: 0;
    gap: 7px;
  }
}

.linkedin_glyph {
  font-family: Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  background: #fff;
  color: #557eac;
  width: 22px;
  height: 22px;
  border-radius: 1px;
  line-height: 24px;
  text-align: center;
}

.email_link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 20px;

  img {
    width: 24px;
    height: 18px;
  }

  @media (max-width: 767px) {
    font-size: 17px;
  }
}

.phone_link {
  display: block;
  font-size: 20px;
  margin-top: 8px;

  @media (max-width: 767px) {
    text-align: right;
  }
}

.footer_address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.5;
  margin-top: 10px;
  color: #ffffffc9;

  @media (max-width: 767px) {
    text-align: right;
  }
}

.footer_legal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 35px;
  font-size: 14px;
  color: #ffffffb3;

  a:hover {
    color: #fff;
  }

  .nav_list {
    gap: 24px;

    a {
      font-size: 14px;
    }
  }

  @media (max-width: 767px) {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px 20px;
    font-size: 12px;
    margin-top: 30px;
  }
}

/* Custom cursor (src/js/cursor.js), matching the live site's magicMouse
   styles: a 1px white ring and a 5px white dot. The native cursor is hidden
   while it runs, except over a modal team biography — a showModal() dialog sits
   in the top layer, above anything in the page, so the ring would be hidden. */
.has-custom-cursor:not(.team-dialog-open) body {
  cursor: none;
}

.cursor_ring,
.cursor_dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;

  .cursor-visible:not(.team-dialog-open) & {
    opacity: 1;
  }
}

.cursor_ring {
  width: 41px;
  height: 41px;
  border: 1.5px solid var(--white);
  transition: transform 0.07s, opacity 0.2s;
}

.cursor_dot {
  width: 6px;
  height: 6px;
  background: var(--white);
}

/* First-visit loading screen (components/loader.php, src/js/loader.js). The
   live site's splash: the gradient artwork covering the viewport, the logo
   animation 300px wide (half the width on phones) blended into it with overlay.
   Hidden unless the head script marks the visit as a first one, so neither a
   returning visitor nor a no-JS one ever sees it. */
.site_loader {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--navy) url("../../src/images/loader-splash.svg") center / cover no-repeat;
  transition: opacity 0.5s;

  .show-loader & {
    display: flex;
  }

  &.is-leaving {
    opacity: 0;
  }

  @media (max-width: 900px) {
    .loader_logo {
      width: 50%;
    }
  }
}

.loader_logo {
  width: 300px;
  aspect-ratio: 324 / 148;
  mix-blend-mode: overlay;

  svg {
    display: block;
  }
}


/* Custom component styles are added below */
/* Hero — the layering matches hdaxtx.com: a looping gradient film masked to a
   soft blob top left, the HDAX animation screened over it and faded out at the
   foot, then the headline with a gradient rule under every line but the last. */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 80%, transparent 100%);
  mask-image: linear-gradient(#000 80%, transparent 100%);

  /* Static stand-in for the gradient film — what reduced-motion visitors and
     anyone who never reaches "playing" are left looking at. */
  .light {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 8% 14%, #7b2ec988 0%, transparent 62%), radial-gradient(ellipse at 24% -12%, #c83cb655, transparent 46%);
  }

  .media {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .gradient {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s;
    -webkit-mask-image: url("../../src/images/hero-gradient-mask.svg");
    mask-image: url("../../src/images/hero-gradient-mask.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: top left;
    mask-position: top left;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    &.is-playing {
      opacity: 1;
    }
  }

  /* Screened over the gradient, exactly as the live site composites it. */
  .feature {
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;

    /* The live mask is a fixed-aspect SVG, so its fade lands mid-frame once the
       hero is shorter than the film; as a fraction of the box it fades in the
       same place at 1440 and keeps doing so at every other width. */
    /* -webkit-mask-image: linear-gradient(#000 80%, transparent 100%);
    mask-image: linear-gradient(#000 80%, transparent 100%); */
  }

  .poster,
  .video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
  }

  .video {
    opacity: 0;
    transition: opacity 0.8s;

    &.is-playing {
      opacity: 1;
    }
  }

  .content {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
  }

  .title {
    --line: 126px;

    position: relative;
    max-width: 608px;
    font-size: 72px;
    font-weight: 300;
    line-height: var(--line);

    .highlight {
      font-style: italic;
      font-weight: 700;
    }

    /* One 3px rule in the gap below each line. The band starts a line down and
       stops a line short of the bottom, so the last line never gets one — no
       matter how many lines the headline wraps to. */
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: calc(var(--line) + 2px);
      height: calc(100% - var(--line) - 2px);
      background-image: linear-gradient(90deg, #3c0ea9 0%, #ea75e1 100%);
      -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px var(--line));
      mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px var(--line));
    }
  }

  @media (max-width: 1330px) {
    .frame {
      background-size: 3400px auto;
    }
  }

  @media (max-width: 1100px) {
    min-height: 666px;

    .content {
      min-height: 666px;
    }

    .frame {
      background-size: 2900px auto;
    }

    .title {
      --line: 105px;

      font-size: 60px;

      &::after {
        -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px var(--line));
        mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px var(--line));
      }
    }
  }

  @media (max-width: 767px) {
    /* Both films are desktop-only on the live site, and the video mask reads as
       a hard edge in a narrow frame, so phones get the gradient alone. */
    .media {
      display: none;
    }

    .light {
      background: radial-gradient(ellipse 75% 40% at 108% 42%, #1a8a9e77, transparent 68%), radial-gradient(ellipse 95% 50% at -5% 6%, #b83cb0aa, transparent 66%), linear-gradient(163deg, #2c1454 0%, #071a36 40%, #4a2494 100%);
    }

    .frame {
      background: url("../../src/images/hero-line-mobile.svg") top center / 900px auto no-repeat;
    }

    .title {
      --line: 84px;

      font-size: 48px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gradient,
    .video {
      display: none;
    }
  }
}

/* Page hero — the inner-page headline, built to match hdaxtx.com/about. Same
   two films as the homepage hero but composited differently: the gradient loop
   fades out at the foot instead of being masked to a blob, and the abstract
   animation is screened over it at 20% inside the 1440 content box. No rules
   under the headline here — that treatment belongs to the homepage hero. */
.page_hero {
  min-height: 100vh;
  position: relative;
  /* overflow: hidden; */
  /* Keeps the optional .page_glow (z-index -1) inside the hero rather than
     dropping it behind the page. */
  isolation: isolate;
  -webkit-mask-image: linear-gradient(#000 80%, transparent 100%);
  mask-image: linear-gradient(#000 80%, transparent 100%);

  /* The hero's wash is one layer of the page gradient, bled past the edges the
     way the design places it. */
  .section_glow .wash {
  }

  /* Static colour remains visible when video is hidden or motion is reduced. */
  .light {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 8% 14%, #7b2ec988 0%, transparent 62%), radial-gradient(ellipse at 24% -12%, #c83cb655, transparent 46%);
  }

  .media {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  /* The live mask is Gradient-video-mask.svg — a plain vertical ramp held
     opaque to 84% then cut by 95%, laid over the film at 150% and pinned to the
     bottom. Against a 100vh box that lands the fade at roughly three quarters
     down, which is what these stops reproduce without the extra request. */
  .gradient {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s;

    &.is-playing {
      opacity: 1;
    }
  }

  /* Boxed to the same 1440 column the live site uses, offset 120px from the top
     and inset unevenly so the animation sits right of the headline. */
  .feature {
    position: absolute;
    top: 120px;
    left: 50%;
    translate: -50% 0;
    width: 100%;
    max-width: 1440px;
    padding-left: 120px;
    padding-right: 42px;
    mix-blend-mode: screen;
    opacity: 0.2;
  }

  .video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s;
    /* Rectangle-533.svg: faded in at the top and out at the foot so the film
       never shows a hard edge over the gradient. */
    /* -webkit-mask-image: linear-gradient(transparent 4%, #000 18%, #000 81%, transparent 97%);
    mask-image: linear-gradient(transparent 4%, #000 18%, #000 81%, transparent 97%); */

    &.is-playing {
      opacity: 1;
    }
  }

  .content {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
  }

  /* Figma/live "This is HDAX": Karla Light 96px, line-height 1.277, stepping to
     72px below 1080 the way the live type scale does. */
  .title {
    font-size: clamp(72px, 6.667vw, 96px);
    font-weight: 300;
    line-height: 1.277;

    .highlight {
      font-style: italic;
      font-weight: 700;
    }
  }

  .desc {
    max-width: 554px;
    /* Live: 50px under the lede, so the pair sits a little above centre. */
    padding-bottom: 50px;
  }

  &.wide_desc .desc {
    max-width: 670px;
  }

  @media (max-width: 1100px) {
    min-height: 666px;

    .content {
      min-height: 666px;
      padding-top: 50px;
    }

    .feature {
      padding-left: 50px;
      padding-right: 0;
    }
  }

  @media (max-width: 767px) {
    min-height: 0;

    .content {
      min-height: 520px;
      padding-block: 150px 100px;
      gap: 24px;
    }

    /* Both films are desktop-only on the live site, and the masks read as hard
       edges in a narrow frame, so phones get the gradient alone. */
    .media {
      display: none;
    }

    .light {
      background: radial-gradient(ellipse 75% 40% at 108% 42%, #1a8a9e77, transparent 68%), radial-gradient(ellipse 95% 50% at -5% 6%, #b83cb0aa, transparent 66%), linear-gradient(163deg, #2c1454 0%, #071a36 40%, #4a2494 100%);
    }

    .title {
      font-size: clamp(36px, 10.5vw, 48px);
    }

    .desc {
      max-width: 100%;
      padding-bottom: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gradient,
    .video {
      display: none;
    }
  }
}

/* Contact page: instead of masking out to the navy body, which left a dark band
   before the purple form section, the hero is left unmasked and its foot
   fades into the same deep purple the contact section starts from. */
.page_hero:has(+ .contact_form) {
  -webkit-mask-image: none;
  mask-image: none;

  &::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 25%;
    background: linear-gradient(transparent, #2a1a6a);
    pointer-events: none;
  }
}

/* Figma: Homepage / Frame 104 (copy) beside Group 117 (anatomy artwork).
   The heading lands at y=1101 on the 1440 frame. */
.breaking_barriers {
  position: relative;
  isolation: isolate;
  /* Outranks .precision_platform so .target_marker stays on top of the protein
     after it flies out of this section. */
  margin-top: -100px;
  z-index: 2;
  min-height: clamp(810px, 68.89vw, 1102px);
  padding-top: clamp(100px, 18.26vw, 292px);

  .section_glow {
    position: absolute;
    > div {
      position: absolute;
      svg,
      img {
        width: 100%;
      }
    }
    .purple {
      width: 100%;
      top: 0;
      left: 0;
      z-index: 2;
    }
    .green {
      width: 100%;
      top: 0;
      right: 0;
    }
    .dark {
      width: 60%;
      left: 15%;
      top: -10%;
      z-index: 5;
    }
    .small_green {
      width: 30%;
      top: 0;
      right: 0px;
      z-index: 3;
    }
  }

  .copy {
    position: relative;
    z-index: 2;
    width: 46.2%;

    > .desc {
      margin-bottom: 36px;
    }
  }

  .art {
    position: absolute;
    inset: 20% 0 0 35%;
    z-index: 0;
    mix-blend-mode: screen;
  }

  .art_media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    mask-image: linear-gradient(#000 75%, transparent 100%);
    margin-right: 0;
  }

  /* Sized against .art rather than in pixels so it scales with the viewport the
     way hdaxtx.com does — it renders the artwork at ~77% of window width, which
     is 137% of this box. Screen blend at full opacity matches the live site. */
  .body {
    position: absolute;
    width: 100%;
    max-width: none;
    height: auto;
    top: 0;
    left: 20%;
    max-width: 1300px;
  }

  /* Anchored to the artwork, not the box: hdaxtx.com parks the crosshair at
     42.2% across / 70.9% down the body at 15.4% of its width, so these are
     those fractions re-expressed against .art. */
  .target_marker {
    position: absolute;
    left: 70%;
    top: 65%;
    width: 12%;
    aspect-ratio: 1;
    z-index: 2;
    mix-blend-mode: overlay;
    pointer-events: none;

    /* The inline SVG is 243px intrinsic — without this it overflows the box and
       its centre drifts off the point the marker is animated to. */
    > svg {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  /* @media (min-width: 1600px) {
    .art {
      left: calc(50% - 90px);
    }
  } */

  @media (max-width: 1100px) {
    padding-top: 120px;
    min-height: 800px;

    .copy {
      width: 49%;
    }

    .art {
      left: 45%;
    }

    .body {
      width: 134.1%;
      left: 2.3%;
    }

    .target_marker {
      width: 22%;
      left: 51%;
      top: 46.8%;
    }
  }

  @media (max-width: 767px) {
    padding-top: 45px;
    min-height: 0;
    padding-bottom: 440px;

    .copy {
      width: 100%;
    }

    .art {
      inset: auto -28% 0 4%;
      height: 440px;
    }

    .art_media {
      mask-image: linear-gradient(transparent, #000 12%, #000 70%, transparent);
    }

    .body {
      width: 95.1%;
      left: 1.9%;
    }

    .target_marker {
      width: 18%;
      left: 50%;
      top: auto;
      bottom: calc(120px - 18vw);
    }

    .section_glow {
      inset: -12% -50%;
      background: radial-gradient(ellipse at 15% 25%, #6724c590, transparent 45%), radial-gradient(ellipse at 64% 65%, #40cbd488, transparent 38%);
    }
  }
}

/* Figma: Homepage / Precision — copy is 488 wide, right edge inset 55px from
   the content column; heading lands at x=762 y=1933. */
.precision_platform {
  position: relative;
  isolation: isolate;
  /* Below .breaking_barriers, whose .target_marker lands on the protein here. */
  z-index: 1;
  min-height: clamp(780px, 63.89vw, 1022px);
  padding-top: clamp(95px, 7.15vw, 115px);

  .bg_gradients {
    position: absolute;
    width: 100%;
    height: 100%;

    > div {
      position: absolute;
      img {
        width: 100%;
      }
    }

    .pink {
      width: 80%;
      top: -50%;
      right: 0;
    }

    .purple {
      width: 100%;
      top: -50%;
      left: 0px;
    }
  }

  h2 {
    margin-left: -100px;
  }

  .copy {
    position: relative;
    z-index: 2;
    width: 41.71%;
    margin-left: auto;
    margin-right: 4.7%;
    text-align: right;

    > .desc {
      margin-bottom: 36px;
    }

    .plus_heading::before {
      left: auto;
      right: -62px;
      top: 10px;
      opacity: 0.5;
    }
  }

  .grid {
    position: absolute;
    left: -17%;
    top: 13%;
    width: 66%;
    opacity: 1;
    mix-blend-mode: overlay;
  }

  .protein {
    position: absolute;
    width: 50%;
    max-width: 720px;
    left: 4%;
    top: 60px;
    z-index: 1;
    pointer-events: none;

    > img {
      width: 100%;
    }
  }

  @media (min-width: 1600px) {
    .protein {
      left: calc(50% - 680px);
    }

    .copy {
      width: 42%;
    }
  }

  @media (max-width: 1100px) {
    min-height: 780px;
    padding-top: 100px;

    .copy {
      width: 44%;

      .plus_heading::before {
        left: auto;
        right: -42px;
        top: 44px;
      }
    }

    .protein {
      top: 100px;
      left: 0;
      width: 57%;
    }
  }

  @media (max-width: 767px) {
    min-height: 0;
    padding-top: 20px;
    /* Room for the protein below the copy: its rendered height (the art is
       1328x1318, drawn at min(90%, 390px) wide), plus the 35px the scroll
       animation lifts it and a clear gap above. A fixed 380px was shorter
       than the protein from ~390px screens up, so it rose into the button. */
    padding-bottom: calc(min(90%, 390px) * 0.9925 + 70px);

    h2 {
      margin-left: 0;
    }

    .copy {
      width: 100%;
      margin-inline: 0;
      text-align: left;

      .plus_heading::before {
        left: -18px;
        right: auto;
        top: 9px;
      }
    }

    .protein {
      width: 90%;
      max-width: 390px;
      top: auto;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
    }

    .grid {
      left: -15%;
      top: auto;
      bottom: 50px;
      width: 110%;
    }

    .section_glow {
      inset: -5% -40%;
      background: radial-gradient(ellipse at 60% 55%, #c83cb6a8, transparent 60%);
    }
  }
}

/* Figma: Homepage / Quote Text — 1113 wide, right-aligned, lands at y=2786. */
.team_statement {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, 48.61vw, 778px);
  padding-top: 36px;
  z-index: 20;

  .section_glow {
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .inner {
    position: relative;
  }

  /* The hero headline's underline geometry, but in teal rather than the hero's
     purple: one 3px band in the gap below each line. The statement's
     line-height of 2 is what leaves room for it, so --line has to track that
     line-height at every breakpoint. The band starts a line down and stops a
     line short, so the last line never gets one however many lines the quote
     wraps to. */
  .statement_text {
    --line: calc(var(--heading) * 2);
    max-width: 1113px;
    margin-left: auto;
    mix-blend-mode: screen;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: calc(var(--line) + 2px);
      height: calc(100% - var(--line) - 2px);
      background-image: linear-gradient(90deg, var(--cyan) 0%, #031833 100%);
      -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px var(--line));
      mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px var(--line));
    }
  }

  .plus_heading::before {
    left: auto;
    right: -29px;
    top: 135px;
  }

  .action {
    text-align: right;
    margin-top: 28px;
  }

  @media (max-width: 1100px) {
    min-height: 560px;
    padding-top: 10px;

    .statement_text {
      --line: calc(var(--heading) * 1.75);

      &::after {
        -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px var(--line));
        mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px var(--line));
      }
    }

    .plus_heading::before {
      right: -20px;
      top: 110px;
    }
  }

  @media (max-width: 767px) {
    min-height: 0;
    padding: 80px 0 100px;

    .inner {
      padding-top: 0;
    }

    .statement_text {
      --line: 54.4px;

      max-width: none;
    }

    .plus_heading::before {
      left: -18px;
      right: auto;
      top: 9px;
    }

    .action {
      text-align: left;
      margin-top: 30px;
    }

    .circuit_line {
      top: 70px;
      bottom: -65px;
      right: -10px;
    }
  }
}

/* Figma: Homepage / HDAX Advantage — 3 columns, 72px gaps, 240px icon boxes.
   The grid is 1181 wide against a 1170 column; the extra 11px is what keeps
   "Multi-Indication Application" on one line. */
.advantage {
  position: relative;
  isolation: isolate;
  min-height: clamp(800px, 59.72vw, 955px);
  padding: 142px 0 80px;
  background: linear-gradient(0deg, #5327b1ad, transparent 53%);
  /* Leave more space below the team action before the page rail turns left. */
  margin-top: -20px;
  z-index: 100;

  &::before {
    content: "";
    position: absolute;
    inset: -12% -12% -5%;
    background: url("../../src/images/advantage_bg_plus.svg") repeat;
    background-size: 40% auto;
    opacity: 0.11;
    mask-image: linear-gradient(transparent, #000 20%, #000 75%, transparent);
    z-index: -1;
    mix-blend-mode: screen;
  }

  .section_title {
    margin-bottom: 60px;
  }

  .items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 72px;

    @media (min-width: 1101px) {
      width: calc(100% + 11px);
    }
  }

  .icon {
    width: 100%;
    max-width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    margin-bottom: 36px;
    mix-blend-mode: luminosity;

    img {
      width: auto;
      height: auto;
      max-width: 240px;
      max-height: 240px;
      object-fit: contain;
      object-position: left center;
    }
  }

  .item h3 {
    font-size: 24px;
    line-height: normal;
    font-weight: 700;
    margin-bottom: 20px;
  }

  @media (max-width: 1100px) {
    padding-top: 100px;
    min-height: 740px;

    .items {
      gap: 35px;
    }

    .icon {
      height: 190px;
      margin-bottom: 30px;

      img {
        width: 180px;
        height: 165px;
      }
    }

    .item h3 {
      font-size: 21px;
    }
  }

  @media (max-width: 767px) {
    min-height: 0;
    padding: 60px 0 90px;

    .section_title {
      margin-bottom: 45px;
    }

    .items {
      grid-template-columns: 1fr;
      gap: 45px;
    }

    .icon {
      height: 150px;
      margin-bottom: 22px;

      img {
        width: 160px;
        height: 145px;
      }
    }

    .item {
      max-width: 500px;

      h3 {
        font-size: 24px;
        margin-bottom: 15px;
      }
    }
  }
}

/* Figma: Homepage / Infographic 1 — art box 1440x1069 starting at y=4836,
   heading at x=144 y=4449. Label positions are percentages of the art box. */
.targeting_pathways {
  position: relative;
  isolation: isolate;
  min-height: clamp(1080px, 104.86vw, 1680px);
  background: linear-gradient(#5327b1ad, #5327b1 23%, #5327b1);

  z-index: 100;
  /* Two overlapping lighting blobs: teal off the left edge in the upper half,
     magenta off the right edge in the lower half. Both source images are mostly
     transparent padding around one soft ellipse, so the offsets below are
     chosen to land that ellipse's core rather than to frame the file — the
     teal core sits on its image's left edge at 45% height, the magenta core at
     68%/40%. Percentages resolve against .section_glow, which base.css insets
     to -15% -20%, so the blobs are free to bleed past the section on purpose. */
  .section_glow {
    > div {
      position: absolute;

      img {
        width: 100%;
      }
    }

    .green {
      width: 60%;
      top: 15%;
      left: 8%;
    }

    .purple {
      width: 65%;
      top: 35%;
      right: 6%;
    }
  }

  .heading {
    position: relative;
    padding: 0 0 80px;

    /* Same underline geometry as the hero headline and the team statement: one
       3px rule in the gap below every line, so the last line never gets one
       however many lines the heading wraps to. Stroked in the design's own
       periwinkle-to-magenta ramp rather than white at "overlay" — the heading
       carries [data-reveal], and GSAP's inline transform would make it its own
       blending group, so a blended white rule never matched the comp. */
    h2 {
      --line: calc(var(--heading) * 2);

      max-width: 969px;
      text-align: left;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: calc(var(--line) + 2px);
        height: calc(100% - var(--line) - 2px);
        background-image: linear-gradient(90deg, #8a8cf0 0%, #c352dd 100%);
        -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px var(--line));
        mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px var(--line));
      }
    }

    .plus_heading::before {
      left: -74px;
      top: 80px;
    }
  }

  .art {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 75px auto 0;
    aspect-ratio: 1440/1069;

    > img {
      position: absolute;
      height: auto;
      max-width: none;
    }

    .grid {
      width: 104.16%;
      left: -2.6%;
      top: 2.4%;
      opacity: 0.66;
    }

    .main {
      width: 101.5%;
      left: -1.3%;
      top: 0;
      mix-blend-mode: overlay;
    }
  }

  .label {
    position: absolute;
    z-index: 2;
    font-size: clamp(12px, 1.667vw, 24px);
    line-height: 1.25;
    max-width: 152px;
    width: 12%;
    text-wrap: balance;

    /* Up and right of its marker, clear of it by roughly the gap Axon keeps. */
    &.position_microtubule {
      left: 44.2%;
      top: 12.4%;
    }

    &.position_axon {
      left: 60%;
      top: 29%;
    }

    &.position_acetylation {
      left: 21.7%;
      top: 37%;
      text-align: right;
    }

    &.position_mitochondrial {
      left: 25.6%;
      top: 70%;
      max-width: 188px;
      width: 13.1%;
      text-align: right;
    }

    &.position_titin {
      left: 62%;
      top: 64.2%;
      text-align: right;
    }
  }

  @media (max-width: 1100px) {
    min-height: 1150px;

    .art {
      margin-top: 95px;
    }

    .heading h2 {
      --line: calc(var(--heading) * 1.75);

      &::after {
        -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px var(--line));
        mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px var(--line));
      }
    }

    .heading .plus_heading::before {
      left: -48px;
      top: 62px;
    }
  }

  @media (max-width: 767px) {
    min-height: 0;
    padding-top: 65px;
    padding-bottom: 30px;

    .heading {
      padding-bottom: 45px;

      h2 {
        --line: 54.4px;

        font-size: 34px;
      }

      .plus_heading::before {
        left: -18px;
        right: auto;
        top: 9px;
      }
    }

    .art {
      width: 125%;
      margin-top: 50px;
      margin-left: -12.5%;
      min-height: 0;
    }

    .label {
      font-size: 12px;
      width: 20%;
      max-width: 100px;

      &.position_microtubule {
        left: 43.5%;
        top: 9.5%;
      }

      &.position_axon {
        left: 60%;
        top: 29%;
      }

      &.position_acetylation {
        left: 14%;
        top: 37%;
      }

      &.position_mitochondrial {
        left: 19%;
        top: 65%;
      }

      &.position_titin {
        left: 61%;
        top: 60%;
      }
    }
  }
}

/* Figma: Technology / The Rationale — a 463px copy column on the left with the
   HDAC molecule render rising out of the section on the right. */
.tech_rationale {
  position: relative;
  isolation: isolate;
  padding: 120px 0 140px;
  background: #031833;
  overflow: hidden;

  .gradients {
    position: absolute;
    left: 0;
    top: -10%;
    width: 70%;
    height: 60%;
    opacity: 0.8;

    .teal {
      max-width: 1200px;
    }
  }

  /* The page gradient is one continuous composition; this section carries the
     layers that pass through it, each in its own box and clipped to the
     section so the artwork runs on across the joins. */
  .section_glow {
    position: relative;
  }

  .copy {
    position: relative;
    z-index: 2;
    width: 463px;
    max-width: 100%;
  }

  .section_title {
    margin-bottom: 40px;
  }

  /* The first line of the body copy is the bold 24px lead-in in the design. */
  .desc > p:first-child {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 28px;
  }

  /* Figma parks the render at x=533 y=907 against a 1440 frame, i.e. starting
     just right of the copy column and overlapping the hero above. */
  .art {
    position: absolute;
    left: 35%;
    top: -10%;
    width: 80%;
    max-width: 1080px;
    z-index: 1;
    mix-blend-mode: lighten;
    pointer-events: none;

    /* The film is cropped to the framing of the design's still, so the poster
       standing in for it lines up frame for frame. */
    video {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
    }
  }

  @media (max-width: 1100px) {
    padding: 90px 0 110px;

    .copy {
      width: 52%;
    }

    .art {
      left: 44%;
      width: 62%;
    }
  }

  @media (max-width: 767px) {
    display: flex;
    flex-direction: column;
    padding: 60px 0 30px;

    .copy {
      width: 100%;
    }

    .desc > p:first-child {
      font-size: 20px;
    }

    /* Wider than the column, so auto margins cannot centre it (they collapse
       to 0 on an overflowing item and it hung off the right edge);
       align-self overflows it evenly both ways instead. Over the whole 40s
       loop the molecules stay inside x 13-91% / y 11-93% of the square film,
       so the empty bands are trimmed — 8% top, 5% bottom — rather than left
       as a gap under the section. */
    .art {
      order: 1;
      position: relative;
      left: auto;
      top: auto;
      width: min(118%, 600px);
      align-self: center;
      margin: 30px 0 0;
      aspect-ratio: 1 / 0.87;
      /* A flex item's automatic minimum is its content (the square film),
         which would override the aspect ratio. */
      min-height: 0;

      video {
        height: 100%;
        object-position: center 61.5%;
      }
    }
  }
}

/* Figma: Technology / The Science — a 399px heading beside the body copy, then
   the anatomy render paired with the indication disclosures. */
.tech_science {
  position: relative;
  isolation: isolate;
  padding: 120px 0 140px;
  z-index: 50;

  .gradients {
    position: absolute;
    width: 100%;
    height: 100%;

    .blue_1,
    .blue_2 {
      position: absolute;
      width: 80%;
      height: 80%;
    }

    .blue_1 {
      top: -30%;
      left: 0;
    }

    .blue_2 {
      bottom: 30%;
      right: 0;
    }

    .purple {
      position: absolute;
      width: 100%;
      height: 100%;
      bottom: -30%;
      opacity: 0.8;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .section_container {
    position: relative;
    width: 100%;

    .purple {
      position: absolute;
      width: 100%;
      height: 220%;
      left: 0px;
      top: -40%;
      opacity: 0.8;
      z-index: -1;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .anatomy {
      position: relative;
    }

    /* No z-index: a stacking context here would isolate the states' screen
       blend from the section gradients behind them (see .anatomy .state). */
    .skeleton {
      margin-left: -200px;
      margin-right: -150px;
    }
  }

  .intro {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 120px;
  }

  .section_title {
    width: 399px;
    flex: none;
    margin-bottom: 0;
  }

  .copy {
    flex: 1;
    min-width: 0;
  }

  .copy > .desc > p:first-child {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 28px;
  }

  .prompt {
    margin: 28px 0 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--pink);
  }

  .targets {
    display: flex;
    gap: 0px;
    align-items: flex-start;
  }

  /* The box is the render's own 1156x1474 canvas, so anything laid over it
     (the frames) can be placed in the image's coordinates. Sized against the
     reference: the figure's head ~80px wide at a 1338px viewport, the head
     level with the first divider, the list starting at the container's
     midpoint. The legs run on past the list into the section's padding. */
  .anatomy {
    position: relative;
    width: 44.7%;
    aspect-ratio: 1156 / 1474;
    flex: none;
    margin: 0 3.1% -200px 2.2%;

    .state {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0;
      transition: opacity 0.45s;

      &.is-active {
        opacity: 1;
      }
    }
  }

  /* The render's own 1156x1474 canvas: the frame's percentages are fractions
     of the art, wherever the box is drawn. */
  .render {
    position: relative;
    width: 100%;
    aspect-ratio: 1156 / 1474;

    /* Screened on each image, and each image kept on its own compositing
       layer. Safari blends a composited layer correctly, which is why the
       colour was right while the cross-fade ran; once the fade finished it
       dropped the layer and painted the image into an ancestor's backing store
       that holds none of the section gradient, leaving nothing to screen
       against — dark frame edges and heavy shading. will-change pins the
       layer so Safari never falls back to that path. */
    img {
      mix-blend-mode: screen;
      will-change: opacity;
    }
  }

  /* Figma: a 5% white panel with 2px brackets on the 1156px render (1px once
     scaled), each arm about 8% of its side, the corners rounded. tech.js swaps
     the custom properties; the transition glides the frame between them. */
  .frame {
    --frame-ease: cubic-bezier(0.65, 0, 0.35, 1);

    position: absolute;
    left: var(--frame-left);
    top: var(--frame-top);
    width: var(--frame-width);
    height: var(--frame-height);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    transition:
      left 0.7s var(--frame-ease),
      top 0.7s var(--frame-ease),
      width 0.7s var(--frame-ease),
      height 0.7s var(--frame-ease);

    .corner {
      position: absolute;
      width: 8%;
      height: 8%;
      border: 0 solid #fff;
    }

    .top_left {
      top: 0;
      left: 0;
      border-width: 1px 0 0 1px;
      border-top-left-radius: 3px;
    }

    .top_right {
      top: 0;
      right: 0;
      border-width: 1px 1px 0 0;
      border-top-right-radius: 3px;
    }

    .bottom_left {
      bottom: 0;
      left: 0;
      border-width: 0 0 1px 1px;
      border-bottom-left-radius: 3px;
    }

    .bottom_right {
      right: 0;
      bottom: 0;
      border-width: 0 1px 1px 0;
      border-bottom-right-radius: 3px;
    }

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

  /* Indications ------------------------------------------------------------ */

  .targets_list {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 50;
  }

  .target {
    border-top: 1px solid #ffffff59;

    &:last-child {
      border-bottom: 1px solid #ffffff59;
    }

    > summary {
      position: relative;
      display: block;
      padding: 22px 60px 22px 0;
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }
    }

    .label {
      display: block;
      font-size: 16px;
      color: #ffffff;
      margin-bottom: 6px;
      opacity: 0.4;
    }

    .name {
      display: block;
      font-size: 24px;
      font-weight: 700;
    }

    /* A + that becomes an × when the disclosure is open. */
    .toggle {
      position: absolute;
      right: 4px;
      top: 50%;
      width: 22px;
      height: 22px;
      margin-top: -10px;
      transition: 300ms all ease;

      svg {
        width: 100%;
        height: 100%;
      }
    }

    &[open]:not(.is-closing) .toggle {
      transform: rotate(45deg);
    }

    /* tech.js animates the panel's height to slide the copy open and shut. */
    > .panel {
      overflow: hidden;
    }

    .panel .desc {
      padding-bottom: 32px;
      max-width: 560px;
    }

    .panel_art {
      display: none;
    }
  }

  @media (max-width: 1100px) {
    padding: 90px 0 110px;

    .section_container {
      width: calc(100% - var(--gutter) * 2);

      .anatomy {
        margin: 0;
      }
    }

    .intro {
      gap: 36px;
      margin-bottom: 80px;
    }

    .section_title {
      width: 34%;
    }

    .targets {
      gap: 36px;
    }

    /* The whole render, uncropped, so the frame keeps all four brackets. */
    .anatomy {
      width: 40%;
    }
  }

  @media (max-width: 767px) {
    padding: 60px 0 70px;

    .intro {
      flex-direction: column;
      gap: 24px;
      margin-bottom: 50px;
    }

    .section_title {
      width: 100%;
    }

    .desc > p:first-child,
    .prompt {
      font-size: 20px;
    }

    .targets {
      flex-direction: column;
      gap: 40px;
    }

    /* Each indication shows its own render inside its panel instead. */
    .section_container .anatomy {
      display: none;
    }

    /* No z-index here, so the panel renders can screen against the section
       gradients like the desktop anatomy does. */
    .targets_list {
      width: 100%;
      z-index: auto;
    }

    /* A fixed box in the render's aspect, so tech.js measures the panel's
       full height even before the lazy image has loaded. */
    .target .panel_art {
      display: block;
      width: min(100%, 420px);
      margin: 0 auto 24px;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .target .name {
      font-size: 20px;
    }
  }
}

/* Figma: Technology / The Pipeline — the programme table on the purple band the
   page gradient settles into. Phase labels are the column ruler the progress
   bars are read against, so the header and the bar track share one width. */
.pipeline {
  position: relative;
  isolation: isolate;
  padding: 120px 0 120px;
  z-index: 50;
  background: linear-gradient(0deg, #5327b1 62.6%, rgba(78, 57, 178, 0) 93.77%);

  .gradients {
    position: absolute;
    z-index: -1;
    bottom: 0;
    right: 0;
    width: 80%;
    height: 60%;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;

    .green {
      position: absolute;
      right: 0;
      bottom: 0px;
      display: flex;
      align-items: flex-end;
      width: 100%;
      display: flex;
      justify-content: flex-end;

      img {
        object-fit: cover;
      }
    }
  }

  .programs thead {
    position: relative;
    z-index: 20;
  }

  /* Mobile repeats the column header inside each row; the thead carries it
     everywhere else. */
  .area_label {
    display: none;
  }

  .intro {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 80px;
  }

  .section_title {
    width: 359px;
    flex: none;
    margin-bottom: 0;
  }

  .copy {
    flex: 1;
    min-width: 0;
  }

  .lead {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 28px;
  }

  .programs {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
  }

  .program_col {
    width: 193px;
    vertical-align: top;
    font-size: 20px;
    font-weight: 700;
    padding: 40px 20px 40px 0;
  }

  .area_col {
    width: 326px;
    vertical-align: top;
    padding: 40px 40px 40px 0;
  }

  .phases_col {
    vertical-align: top;
    padding: 40px 0;
  }

  thead {
    th {
      border-bottom: 1px solid var(--white);
      padding-top: 0;
      padding-bottom: 20px;
      /* The client wants every header in one size, Program's. */
      font-size: 20px;
      font-weight: 700;
    }

    .phases_col {
      font-weight: 400;
    }
  }

  tbody tr {
    border-bottom: 1px solid #ffffff80;
  }

  /* The four phase labels, evenly spread — the same track the bars measure on. */
  .phases {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
  }

  .area {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--cyan);
    margin-bottom: 10px;
  }

  .area_detail {
    font-size: 18px;
    line-height: 1.406;

    strong {
      font-weight: 700;
    }

    p {
      margin: 0;
    }
  }

  .program {
    & + .program {
      margin-top: 34px;
    }
  }

  .program_label {
    display: block;
    font-size: 20px;
    line-height: 1.2;
    color: var(--cyan);
    margin-bottom: 12px;
  }

  .bar {
    position: relative;
    display: block;
    height: 5px;
    border-radius: 52px;
    /* Figma's white bar and crosshair pick up the gradient behind the table. */
    mix-blend-mode: overlay;
  }

  .fill {
    display: block;
    width: var(--progress);
    height: 100%;
    border-radius: 52px;
    background: url("../../src/images/pipeline-progress.png") center / 100% 100% no-repeat;
  }

  .progress_marker {
    position: absolute;
    left: clamp(0px, calc(var(--progress) + 10px), calc(100% - 24px));
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #fff;
    mask: url("../../src/images/pipeline-plus.svg") center / contain no-repeat;
    pointer-events: none;
  }

  .program_note {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    font-style: italic;
    color: #ffffffcc;
  }

  .footnote {
    margin: 120px 0 0;
    font-size: 16px;
    max-width: 650px;
  }

  .btn {
    margin-top: 30px;
  }

  @media (max-width: 1100px) {
    padding: 90px 0 90px;

    .intro {
      gap: 36px;
      margin-bottom: 60px;
    }

    .section_title {
      width: 32%;
    }

    .program_col,
    thead .area_col {
      font-size: 18px;
    }

    .program_col {
      width: 150px;
    }

    .area_col {
      width: 200px;
      padding-right: 24px;
    }

    .phases {
      font-size: 16px;
    }

    .area,
    .program_label {
      font-size: 18px;
    }
  }

  @media (max-width: 767px) {
    padding: 60px 0 70px;

    .intro {
      flex-direction: column;
      gap: 24px;
      margin-bottom: 48px;
    }

    .section_title {
      width: 100%;
    }

    .lead {
      margin-bottom: 24px;
    }

    /* The table unstacks into a list of programmes. */
    .programs,
    .programs thead,
    .programs tbody,
    .programs tr,
    .programs th,
    .programs td {
      display: block;
      width: auto;
    }

    /* Only the phase ruler stays a header — the other two columns are labelled
       inside each row instead. */
    thead .program_col,
    thead .area_col {
      display: none;
    }

    thead .phases_col {
      padding: 20px 0;
    }

    .phases {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 0;
      font-size: 20px;
    }

    /* Four phases will not fit across 342px, so the ruler is turned on its
       side: vertical-rl stacks the lines right to left and runs the text
       downwards, and the half-turn puts both back into reading order. The band
       is a fixed height because that height is the labels' line length — it is
       what wraps "Lead Optimization" and what sits them on the header rule. */
    .phase {
      flex: 1 0 0;
      min-width: 0;
      height: 128px;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }

    /* The last label hugs the rule's right end rather than opening a column. */
    .phase:last-child {
      flex: none;
    }

    .programs tbody tr {
      padding: 40px 0;
    }

    .program_col,
    .area_col,
    .phases_col {
      padding: 0;
    }

    .program_col {
      font-size: 24px;
      margin-bottom: 32px;
    }

    .area_col {
      margin-bottom: 32px;
    }

    .area_label {
      display: block;
      font-size: 16px;
      font-weight: 600;
      /* The header blue, a step deeper than the cyan the programmes use. */
      color: #27aae1;
      margin-bottom: 8px;
    }

    .area {
      color: var(--white);
      font-size: 20px;
      margin-bottom: 8px;
    }

    .area_detail {
      opacity: 0.7;

      p + p {
        margin-top: 8px;
      }
    }

    .program_label {
      font-size: 20px;
      margin-bottom: 10px;
    }

    .program + .program {
      margin-top: 24px;
    }

    .program_note {
      font-weight: 300;
      color: var(--white);
    }
  }
}

/* About / Our Story — the two-column band the About page opens with: heading in
   a 34.2% column, body copy in the 65.8% one, over its slice of the page
   gradient. The same split drives .about_mission directly below. */
.about_story {
  position: relative;
  padding: 120px 0 110px;

  .page_glow {
    position: absolute;
    width: 100%;
    height: 300%;
    top: -100%;
    left: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .section_title {
    width: 34.2%;
    margin-bottom: 0;
  }

  .desc {
    width: 65.8%;
    /* Nudged onto the heading's first baseline. */
    padding-top: 10px;
  }

  @media (max-width: 1100px) {
    padding: 90px 0 80px;
  }

  @media (max-width: 767px) {
    padding: 60px 0 50px;

    .section_title,
    .desc {
      width: 100%;
    }

    .section_title {
      margin-bottom: 24px;
    }

    .desc {
      padding-top: 0;
    }
  }
}

/* About / Our Mission — the same 34.2/65.8 split as .about_story, followed by
   the three values on one centred row. Icons are 200px in the design, dropping
   to 150 and 120 as the column narrows. */
.about_mission {
  position: relative;
  isolation: isolate;
  padding: 110px 0 140px;

  .gradients {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .blue,
    .pink {
      position: absolute;
    }

    .pink {
      top: -30%;
      width: 80%;
      right: 0;
      opacity: 0.8;
    }
  }

  .section_container {
    position: relative;
    z-index: 20;
  }

  .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 130px;
  }

  .section_title {
    width: 34.2%;
    margin-bottom: 0;
  }

  .desc {
    width: 65.8%;
    padding-top: 10px;
    /* The design holds the mission copy short of the column edge. */
    padding-right: 100px;
  }

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

  .value {
    text-align: center;
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin-bottom: 30px;
    /* Matches the live compositing — the line art sits in the gradient rather
       than on top of it. */
    mix-blend-mode: overlay;

    img {
      width: 200px;
      height: auto;
    }
  }

  .value h3 {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
  }

  @media (max-width: 1100px) {
    padding: 80px 0 100px;

    .inner {
      margin-bottom: 90px;
    }

    .desc {
      padding-right: 0;
    }

    .icon {
      height: 150px;
      margin-bottom: 24px;

      img {
        width: 150px;
      }
    }
  }

  @media (max-width: 767px) {
    padding: 50px 0 70px;

    .inner {
      margin-bottom: 50px;
    }

    .section_title,
    .desc {
      width: 100%;
    }

    .section_title {
      margin-bottom: 24px;
    }

    .desc {
      padding-top: 0;
    }

    .values {
      grid-template-columns: 1fr;
      gap: 40px;
    }

    .icon {
      height: 120px;

      img {
        width: 120px;
      }
    }
  }
}

/* About / Our Team — groups of 270px cards on a three-up grid. Each portrait is
   the duotone export with the colour one cross-fading in on hover, sitting on
   the pink 4px rule the design draws under every card. */
.team {
  position: relative;
  isolation: isolate;
  padding: 100px 0 120px;

  .gradients {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 100%;

    .pink,
    .teal,
    .purple {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .teal {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      top: unset;
      left: unset;
      right: 0px;
      bottom: 5%;
    }

    .purple {
      display: flex;
      align-items: flex-end;
      top: unset;
      left: 0;
      right: unset;
      bottom: -30%;
    }
  }

  .section_container {
    position: relative;
    z-index: 20;
  }

  .team_texture {
    position: absolute;
    top: 61.3%;
    left: 39%;
    width: 75.7%;
    aspect-ratio: 1090.06 / 559.64;
    transform: translateY(-50%);
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: overlay;
    mask-image: radial-gradient(ellipse 111.2% 58.6% at 37.2% 62%, #000, transparent);
    opacity: 0.3;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.5;
    }
  }

  .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 90px;
  }

  .section_title {
    width: 34.2%;
    margin-bottom: 0;
  }

  > .inner > .desc {
    width: 65.8%;
    padding-top: 10px;
  }

  .group {
    margin-bottom: 90px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .group_label {
    font-size: 32px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 60px;
  }

  .members {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 70px 80px;
  }

  .member {
    max-width: 270px;
  }

  .portrait {
    position: relative;
    isolation: isolate;
    height: 282px;
    border-bottom: 4px solid var(--pink);
    margin-bottom: 29px;

    img {
      position: absolute;
      inset: auto 0 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: bottom center;
    }

    /* Uploads are black and white; grayscale() keeps a colour upload (or an
       older duotone export) on the same footing. */
    .duotone {
      filter: grayscale(1);
    }

    .colour {
      opacity: 0;
      transition: opacity 0.4s;
    }
  }

  /* The duotone, coded: a violet colour layer — hue and saturation from the
     layer, brightness from the photo — full strength at the bottom left, about
     a third by the middle, gone toward the top right, as sampled from the
     Figma exports. Masked by the photo itself so the cut-out's transparent
     surround never tints the section behind it. */
  .tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, #9046dc 0%, rgb(144 70 220 / 0.35) 50%, rgb(144 70 220 / 0) 85%);
    mix-blend-mode: color;
    mask: var(--portrait) bottom center / contain no-repeat;
    pointer-events: none;
    transition: opacity 0.4s;
  }

  /* The design lifts the portrait from duotone to full colour on hover; the
     duotone stays underneath so the crossfade never shows the background. */
  .member:hover .portrait .colour,
  .member:focus-within .portrait .colour {
    opacity: 1;
  }

  .name {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 17px;
  }

  .role {
    font-size: 20px;
    line-height: 1.406;
    font-style: italic;
    font-weight: 400;
    margin: 0 0 17px;
  }

  .learn_more {
    background: none;
    border: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--pink);
    transition: color 0.2s;
    cursor: pointer;
    min-height: 44px;

    &.text_only {
      color: var(--cyan);
    }

    span {
      font-weight: 700;
    }

    &:hover {
      color: var(--white);
    }
  }

  /* Figma 754770:1857 — colour portrait beside the biography. */
  .member_dialog {
    width: min(1086px, calc(100vw - 40px));
    max-width: none;
    max-height: calc(100dvh - 40px);
    padding: 0;
    border: 0;
    border-radius: 10px;
    /* The Figma teal/purple/pink glow, baked (src/images/team-dialog-*.svg,
       see asset-sources.json). Drawn live, those three 1400-2200px blur filters
       cost ~900ms on the first open, long enough for the whole fade to finish
       before the first frame. Every layer was placed in percentages of the
       dialog, so stretching the bake to the box keeps the same composition. */
    background: var(--navy) url("../../src/images/team-dialog-bg-desktop.webp") center / 100% 100% no-repeat;
    color: var(--white);
    box-shadow: 0 0 28px 4px #00000040;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition:
      opacity 240ms ease,
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1);

    &::backdrop {
      background: #031833b3;
      opacity: 0;
      transition: opacity 240ms ease;
    }

    &.is-visible {
      opacity: 1;
      transform: none;

      &::backdrop {
        opacity: 1;
      }
    }

    &.is-closing {
      transition-duration: 180ms;

      &::backdrop {
        transition-duration: 180ms;
      }
    }
  }

  .dialog_inner {
    display: grid;
    grid-template-columns: 348px minmax(0, 1fr);
    align-items: start;
    gap: 31px;
    min-height: 596px;
    max-height: calc(100dvh - 40px);
    padding: 82px 76px 70px 59px;
    position: relative;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--cyan) transparent;

    &.without_photo {
      grid-template-columns: minmax(0, 1fr);
      min-height: 320px;
    }
  }

  .dialog_close {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 26px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 180ms ease;

    img {
      width: 24px;
      height: 24px;
      transition: transform 220ms ease;
    }

    &:hover,
    &:focus-visible {
      background: #ffffff14;

      img {
        transform: rotate(90deg) scale(1.1);
      }
    }
  }

  .dialog_portrait {
    margin-top: -25px;
    border-bottom: 5px solid var(--pink);
  }

  .dialog_photo {
    width: 100%;
    height: 347px;
    object-fit: contain;
    object-position: center bottom;
  }

  .dialog_heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
    margin-bottom: 20px;

    h4 {
      font-size: 24px;
      font-weight: 700;
      line-height: normal;
      margin: 0;
    }

    .role {
      color: var(--white);
      font-size: 20px;
      margin: 0;
    }
  }

  .dialog_bio {
    font-size: 20px;
    line-height: 1.406;
    overflow-wrap: anywhere;

    p + p {
      margin-top: 20px;
    }
  }

  .linkedin {
    display: inline-block;
    margin-top: 24px;
    color: var(--pink);
  }

  .learn_more,
  .dialog_close {
    &:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 4px;
    }
  }

  @media (max-width: 1100px) {
    padding: 80px 0 90px;

    .inner {
      margin-bottom: 70px;
    }

    .group {
      margin-bottom: 70px;
    }

    .group_label {
      margin-bottom: 40px;
    }

    .members {
      gap: 50px 40px;
    }

    .portrait {
      height: auto;
      aspect-ratio: 270 / 282;
    }

    .name,
    .role {
      font-size: 18px;
    }

    .learn_more {
      font-size: 16px;
    }

    .dialog_inner {
      grid-template-columns: minmax(180px, 33%) minmax(0, 1fr);
      gap: 28px;
      padding: 76px 40px 48px;
      min-height: 480px;
    }

    .dialog_photo {
      height: 300px;
    }
  }

  @media (max-width: 767px) {
    padding: 50px 0 60px;

    .inner {
      margin-bottom: 50px;
    }

    .section_title,
    > .inner > .desc {
      width: 100%;
    }

    .section_title {
      margin-bottom: 24px;
    }

    > .inner > .desc {
      padding-top: 0;
    }

    .group {
      margin-bottom: 50px;
    }

    .group_label {
      margin-bottom: 32px;
    }

    .members {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 40px 24px;
    }

    .portrait {
      margin-bottom: 20px;
    }

    .name,
    .role {
      font-size: 16px;
      margin-bottom: 12px;
    }

    .member_dialog {
      background-image: url("../../src/images/team-dialog-bg-mobile.webp");
      width: calc(100vw - 24px);
      max-height: calc(100dvh - 24px);
    }

    .dialog_inner {
      grid-template-columns: minmax(0, 1fr);
      max-height: calc(100dvh - 24px);
      min-height: 0;
      padding: 68px 24px 32px;
    }

    .dialog_close {
      top: 12px;
      right: 12px;
    }

    .dialog_portrait {
      width: min(240px, 100%);
      margin: 0 auto;
    }

    .dialog_photo {
      height: 240px;
    }

    .dialog_heading {
      flex-direction: column;
    }

    .dialog_heading .role,
    .dialog_bio {
      font-size: 18px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .team .member_dialog,
  .team .member_dialog::backdrop,
  .team .dialog_close,
  .team .dialog_close img {
    transition: none;
    transform: none;
  }

  .team .dialog_close:hover img,
  .team .dialog_close:focus-visible img {
    transform: none;
  }
}

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

/* About / Our Partners — the closing band on the flat purple the page gradient
   settles into, with the logo strip drifting left on a loop. */
.partners {
  position: relative;
  isolation: isolate;
  padding: 120px 0 110px;
  margin-top: 0px;
  background: linear-gradient(0deg, #5327b1 62.6%, rgba(104, 44, 178, 0) 100%);

  .inner {
    margin-bottom: 90px;
  }

  .desc {
    max-width: 520px;
  }

  .marquee {
    --gap: 90px;
    /* The strip shrinks with the logos at each breakpoint, so the loop time
       shrinks with it — otherwise the drift slows to a crawl on phones. Each
       step keeps it near 57px/s. */
    --duration: 45s;

    display: flex;
    overflow: hidden;
    /* Faded at both ends so logos enter and leave rather than being cut off. */
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);

    /* Starts at the page's left rail, so no logo drifts past the line.
       lines.js publishes the rail's x; the rail is only drawn above 1200px. */
    @media (min-width: 1201px) {
      margin-left: calc(var(--rail-x, 0px) + 1px);
    }
  }

  .logos {
    display: flex;
    align-items: center;
    gap: var(--gap);
    flex: none;
    margin: 0;
    /* The seam between the two copies gets the same gap as every other pair. */
    padding: 0 var(--gap) 0 0;
    list-style: none;
    animation: partners_scroll var(--duration) linear infinite;
  }

  .marquee:hover .logos,
  .marquee:focus-within .logos {
    animation-play-state: paused;
  }

  /* Logos arrive at wildly different aspect ratios, so they are boxed rather
     than set to a common height — otherwise the wide wordmarks tower over the
     square crests. */
  .logos img {
    width: auto;
    height: 60px;
    max-width: 190px;
    object-fit: contain;
    /* Monochrome white whatever colours are uploaded: brightness(0) flattens
       every visible pixel to black, invert(1) turns it white, and the alpha is
       left alone. Needs a transparent background — a logo on a solid fill
       becomes a white block. */
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.3s;
  }

  .logos a:hover img {
    opacity: 1;
  }

  @media (max-width: 1100px) {
    padding: 90px 0 80px;

    .inner {
      margin-bottom: 70px;
    }

    .marquee {
      --gap: 60px;
      --duration: 34s;
    }

    .logos {
      img {
        height: 48px;
        max-width: 150px;
      }
    }
  }

  @media (max-width: 767px) {
    padding: 60px 0 50px;

    .inner {
      margin-bottom: 50px;
    }

    .marquee {
      --gap: 45px;
      --duration: 28s;
    }

    .logos {
      img {
        height: 40px;
        max-width: 130px;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee {
      overflow-x: auto;
      mask-image: none;
    }

    .logos {
      animation: none;

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

  & + .contact_grid {
    display: none;
  }
}

/* Half the strip, because the markup renders it twice back to back. */
@keyframes partners_scroll {
  to {
    transform: translateX(-100%);
  }
}

/* Figma: News — Recent News / Press Release / Events. All three are the same
   row of cards; the carousel variant is mounted on Splide, the grid variant is
   a plain fixed row. */
.news_row {
  position: relative;
  padding: 60px 0;

  /* Keep the Events band and its gradient join when there are no events. */
  &.is_events {
    min-height: 500px;
  }

  /* Share the main element's stacking context so the PNGs can blend across
     rows. The main element clips the artwork at the page edges. */
  .gradients {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    > div {
      position: absolute;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .glow_first {
    .purple_1 {
      left: 0;
      top: -85%;
      width: 91%;
      height: 210%;
    }

    .purple_2 {
      right: 0;
      top: -35%;
      width: 100%;
      height: 235%;
    }
  }

  .glow_second {
    .blue {
      left: 0;
      top: -65%;
      width: 85.2%;
      height: 165%;
    }

    .green_1 {
      left: 0;
      top: 65%;
      width: 75.1%;
      height: 145%;
    }

    .green_2 {
      right: 0;
      top: 45%;
      width: 100%;
      height: 220%;
    }
  }

  /* The Events band settles into the following purple call-to-action. */
  &:has(.glow_second) ~ .news_row {
    background: linear-gradient(to top, #5327b1, transparent 55%);
  }

  .section_title {
    margin-bottom: 44px;
  }

  &.layout_carousel .section_title {
    padding-right: 120px;
  }

  /* Events with nothing scheduled: one quiet line where the cards would be. */
  .empty_note {
    margin: 0;
    font-size: 18px;
    color: #ffffffb3;
  }

  /* Controls sit above the cards; pagination stays beneath them. */
  .news_carousel {
    position: relative;
    visibility: visible;
  }

  .splide__track {
    overflow: hidden;
  }

  .splide__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .track_wrap .track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 262px));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .thumb {
    display: block;
    aspect-ratio: 262 / 148;
    margin-bottom: 20px;
    background: #ffffff14;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s;
    }
  }

  .story:hover a.thumb img {
    transform: scale(1.04);
  }

  time {
    display: block;
    font-size: 14px;
    color: #ffffffb3;
    margin-bottom: 10px;
  }

  h3 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 16px;

    a:hover {
      color: var(--cyan);
    }
  }

  .more {
    font-size: 16px;
    color: var(--pink);
    transition: color 0.2s;

    span {
      font-weight: 700;
    }

    &:hover {
      color: var(--white);
    }
  }

  /* Splide chrome ---------------------------------------------------------- */

  .news_arrows {
    position: absolute;
    right: 0;
    bottom: calc(100% + 24px);
    display: flex;
    gap: 8px;
    z-index: 2;
  }

  .splide__arrow {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--white);
    cursor: pointer;
    transition: opacity 0.2s;

    svg {
      width: 28px;
      height: 28px;
      fill: currentColor;
    }

    &:disabled {
      opacity: 0.3;
      cursor: default;
    }

    &:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }
  }

  .splide__arrow--prev {
    rotate: 180deg;
  }

  .news_carousel:not(.is-overflow) .news_arrows {
    display: none;
  }

  .news_pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;

    li {
      display: block;
    }

    button {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #ffffff4d;
      transition: background 0.2s;

      &.is-active {
        background: var(--white);
      }
    }
  }

  @media (max-width: 1100px) {
    padding: 45px 0;

    &.is_events {
      min-height: 470px;
    }

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

  @media (max-width: 767px) {
    .glow_first .purple_1 {
      top: -35%;
      height: 145%;
    }

    .glow_first .purple_2 {
      top: -10%;
      height: 210%;
    }

    padding: 35px 0;

    /* With no events the band holds only a heading and one line; the reserved
       card height left a screen of empty gradient before the next section,
       which brings its own generous top spacing. */
    &.is_events.is_empty {
      min-height: 0;
    }

    .section_title {
      margin-bottom: 28px;
    }

    .news_arrows {
      bottom: calc(100% + 16px);
    }

    /* The track runs out to the screen edge, so the next card is cut by the
       viewport rather than by the content column's right margin. */
    .news_carousel .splide__track {
      margin-right: calc((100vw - 100%) / -2);
    }

    .track_wrap .track {
      grid-template-columns: 1fr;
      gap: 28px;
    }
  }
}

/* Long-form editor copy — the Privacy Policy and Terms of Service bodies.
   Headings and paragraphs come straight from the editor, so everything is
   styled by element rather than by class. */
.rich_text {
  overflow-wrap: anywhere;
  position: relative;
  isolation: isolate;
  padding: 20px 0 140px;

  /* Privacy and Terms share this block but differ hugely in length, so these
     layers are sized against the page width — the way the design scales them —
     rather than as a percentage of a section whose height varies fourfold. */
  .gradient {
    width: 100%;
    height: 422px;
    background: linear-gradient(0deg, #5327b1 62.6%, rgba(104, 44, 178, 0) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .section_container {
    position: relative;
    z-index: 20;
  }

  .section_title {
    margin-bottom: 40px;
  }

  .desc {
    max-width: 1000px;

    h2,
    h3 {
      font-size: 24px;
      line-height: 1.3;
      font-weight: 700;
      margin: 48px 0 18px;
    }

    h2:first-child,
    h3:first-child {
      margin-top: 0;
    }

    p {
      margin: 0 0 20px;
    }

    ul,
    ol {
      margin: 0 0 20px;
      padding-left: 22px;
    }

    li {
      margin-bottom: 8px;
    }

    a {
      color: var(--cyan);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    strong {
      font-weight: 700;
    }
  }

  @media (max-width: 1100px) {
    padding-bottom: 100px;
  }

  @media (max-width: 767px) {
    padding-bottom: 70px;

    .desc h2,
    .desc h3 {
      font-size: 20px;
      margin-top: 36px;
    }
  }
}

/* Figma: Contact Us — a 495px form on the right of the content column with the
   social links and address sitting low on the left, under the headline. */
.contact_form {
  position: relative;
  isolation: isolate;
  padding: 0 0 160px;

  /* The navy is the body showing through the fade, laid in here so the
     screened target film below has an opaque backdrop inside the isolated
     section; without it the film's black frame shows at the top. */
  background:
    linear-gradient(0deg, #5327b1 59.16%, rgba(60, 14, 169, 0) 98.55%),
    var(--navy);

  .gradients {
    position: absolute;
    z-index: -1;
    width: 50%;
    height: 50%;
    left: 0;
    bottom: 0;

    .green {
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }

  /* Under the contact page hero the top picks up from the hero's purple foot
     rather than fading to the navy body; see page-hero.css. */
  .page_hero + & {
    background: linear-gradient(0deg, #5327b1 59.16%, #3a1a8a 85%, #2a1a6a 100%);
  }

  /* Measured off hdaxtx.com/contact at 1440: the film is a 16:9 clip turned on
     its side, standing 156px left of the form and 107px up from its foot (the form ends
     30px above .inner, hence 137). */
  .target {
    position: absolute;
    inset: 0 0 160px;
    mix-blend-mode: screen;
    pointer-events: none;
    /* The live film pokes ~100px above the form into its headline; here that
       is the page hero, a separate section with nothing to screen against. */
    overflow: hidden;

    .section_container {
      position: relative;
      height: 100%;
    }

    .art {
      position: absolute;
      right: calc(495px + 156px);
      bottom: 137px;
      width: 397px;
      height: 706px;
    }

    video {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 706px;
      max-width: none;
      height: 397px;
      translate: -50% -50%;
      rotate: 90deg;
    }
  }

  .inner {
    display: flex;
    align-items: flex-end;
    gap: 60px;
  }

  .channels {
    flex: 1;
    min-width: 0;
    padding-bottom: 90px;
  }

  .social {
    display: flex;
    gap: 22px;
    margin-bottom: 16px;

    a {
      color: var(--cyan);
      transition: opacity 0.2s;

      &:hover {
        opacity: 0.7;
      }
    }
  }

  .email {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;

    svg {
      color: var(--cyan);
      flex: none;
    }

    &:hover {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }

  .form_wrap {
    width: 495px;
    flex: none;
    max-width: 100%;
  }

  /* Form ------------------------------------------------------------------- */

  /* Styled by element and by Forminator's own class names, so the same rules
     cover the packaged fallback markup and whatever the plugin renders. The
     form is set to Forminator's "none" design, so nothing has to be undone. */
  .field,
  .forminator-row {
    margin: 0 0 24px;
  }

  .forminator-row:last-of-type {
    margin-bottom: 0;
  }

  label,
  .forminator-label {
    display: block;
    font-size: 20px;
    line-height: 1.406;
    color: var(--white);
    margin-bottom: 16px;
  }

  .forminator-required {
    color: var(--pink);
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea,
  .forminator-input,
  .forminator-textarea {
    width: 100%;
    background: var(--white);
    min-width: 0;
    color: var(--navy);
    border: 1px solid #333;
    border-radius: 10px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 20px;
    line-height: 1.406;

    &::placeholder {
      color: #bbb;
    }

    &:focus-visible {
      outline: none;
      border-color: var(--cyan);
      box-shadow: 0 0 0 1px var(--cyan);
    }
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  select,
  .forminator-input {
    height: 56px;
  }

  textarea,
  .forminator-textarea {
    min-height: 140px;
    resize: vertical;
  }

  /* The chevron is drawn on the wrapper so the native select keeps its own
     behaviour on every platform. */
  .select,
  .forminator-field-select .forminator-field {
    position: relative;
    display: block;

    select {
      appearance: none;
      padding-right: 46px;
    }

    &::after {
      content: "";
      position: absolute;
      right: 18px;
      bottom: 22px;
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--navy);
      border-bottom: 2px solid var(--navy);
      rotate: 45deg;
      pointer-events: none;
    }
  }

  /* Send sits hard right on its own row, as a cyan pill. */
  .actions,
  .forminator-row-last .forminator-field {
    margin: 30px 0 0;
    display: flex;
    justify-content: flex-end;
  }

  .forminator-button-submit,
  .actions .btn {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--cyan);
    border-radius: 100px;
    background: none;
    font-family: inherit;
    font-size: clamp(18px, 1.667vw, 24px);
    line-height: 1.25;
    font-weight: 300;
    color: var(--cyan);
    cursor: pointer;
    transition:
      box-shadow 0.3s,
      color 0.2s;

    &:hover {
      box-shadow: 0px 0px 20px 0px rgba(99, 214, 215, 0.87);
    }
  }

  .form_status,
  .forminator-response-message {
    margin: 16px 0 0;
    font-size: 16px;

    p {
      margin: 0;
    }
  }

  .form_status.is-error,
  .forminator-error {
    color: var(--pink);
  }

  .form_status.is-sent,
  .forminator-success {
    color: var(--cyan);
  }

  .forminator-error-message {
    margin-top: 8px;
    font-size: 15px;
    color: var(--pink);
  }

  @media (max-width: 1100px) {
    padding-bottom: 110px;

    .target {
      bottom: 110px;

      .art {
        right: calc(55% + 156px);
      }
    }

    .inner {
      gap: 40px;
    }

    .form_wrap {
      width: 55%;
    }
  }

  @media (max-width: 767px) {
    padding-bottom: 70px;

    /* Hidden on phones, as on the live site; hero.js never loads a hidden film. */
    .target {
      display: none;
    }

    .inner {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 40px;
    }

    .channels {
      padding-bottom: 0;
    }

    .form_wrap {
      width: 100%;
    }

    label,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
      font-size: 17px;
    }
  }
}

/* Figma: Homepage / Share our vision — heading lands at y=6098. */
.contact_grid {
  position: absolute;
  right: 0;
  opacity: 0.6;
  mix-blend-mode: overlay;
  z-index: 100;
  transform: translateY(-300px);
  width: 40%;
  max-width: 800px;
  pointer-events: none;

  img {
    width: 100%;
  }
}

/* Give the homepage's framed CTA equal breathing room above and below its
   content, including room for the downward offset during its reveal. */
.home .contact_cta {
  min-height: 0;
  padding-block: clamp(80px, 9.722vw, 140px);

  .inner {
    padding-block: 0;
  }
}

.contact_cta {
  position: relative;
  isolation: isolate;
  min-height: 467px;
  background: #5327b1;
  padding-top: 80px;
  padding-bottom: 60px;

  .inner {
    position: relative;
    padding-top: 28px;
    padding-bottom: 72px;
  }

  .desc {
    margin-bottom: 36px;
  }

  .plus_heading::before {
    left: -72px;
    top: 4px;
  }

  @media (max-width: 1100px) {
    padding-top: 170px;
    min-height: 450px;

    .inner::before {
      left: -30px;
      right: -30px;
    }

    .plus_heading::before {
      left: -46px;
    }
  }

  @media (max-width: 767px) {
    min-height: 0;
    padding-top: 90px;
    padding-bottom: 15px;

    .inner {
      padding-top: 40px;
      padding-bottom: 55px;

      &::before {
        top: 0;
        left: -10px;
        right: -10px;
      }
    }

    .section_title {
      max-width: 290px;
    }

    .plus_heading::before {
      display: none;
    }

    .desc {
      margin-bottom: 28px;
    }
  }
}

/* Rendered by footer.php above the composed page background. Geometry comes
   from src/js/lines.js, using content gutters and section anchors at every width. */
.page_lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: overlay;

  &:not(.is-measured) {
    visibility: hidden;
  }

  @media (max-width: 1200px) {
    display: none;
  }
}

.line_rail {
  fill: none;
  stroke: var(--line-color, #fff);
  stroke-width: var(--line-weight, 2);
  opacity: var(--line-opacity, 1);
  vector-effect: non-scaling-stroke;
}

/* The Figma quote/action ends 55px before the content column's right edge,
   leaving room for the descending rail at x=1294 in the 1440px frame. */
@media (min-width: 768px) {
  .team_statement .statement_text,
  .team_statement .action {
    margin-right: 4.7%;
  }
}

/* Decorative PNGs bleed across section joins, while main clips them at the
   viewport edges. Size both axes on narrow screens: intrinsic image heights
   otherwise turn the broad washes into small, isolated spots. */
.gradients,
.bg_gradients {
  pointer-events: none;
}

@media (max-width: 1100px) {
  .precision_platform .bg_gradients {
    inset: 0;

    .pink,
    .purple {
      height: 140%;
      top: -25%;
    }

    img {
      height: 100%;
    }
  }

  .tech_rationale .gradients {
    width: 110%;
    height: 110%;
    left: -25%;
    top: -15%;

    .teal,
    img {
      width: 100%;
      height: 100%;
    }
  }

  .tech_science .gradients {
    inset: 0;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .about_mission .gradients {
    .blue {
      width: 120%;
      height: 110%;
      left: -20%;
      top: -10%;
    }

    .pink {
      width: 110%;
      height: 100%;
      top: -25%;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .team .gradients {
    .pink {
      height: 55%;
    }

    .teal {
      height: 65%;
    }

    .purple {
      height: 55%;
      bottom: -15%;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .pipeline .gradients {
    width: 110%;
    height: 80%;

    .green,
    img {
      width: 100%;
      height: 100%;
    }
  }

  .contact_form .gradients {
    width: 100%;
    height: 80%;

    .green,
    img {
      width: 100%;
      height: 100%;
    }
  }
}

@media (max-width: 767px) {
  .tech_rationale .gradients {
    top: 0;
    height: 100%;
    mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent);
  }

  .site_main.has_background::before {
    background-attachment: scroll;
  }

  .precision_platform .bg_gradients {
    .pink {
      width: 150%;
      right: -40%;
    }

    .purple {
      width: 150%;
      left: -25%;
    }
  }

  .tech_science .gradients {
    .blue_1 {
      width: 140%;
      left: -40%;
      top: -15%;
    }

    .blue_2 {
      width: 140%;
      right: -40%;
      bottom: 10%;
    }

    .purple {
      bottom: -15%;
    }
  }

  .targeting_pathways .section_glow {
    .green,
    .purple {
      height: 80%;
      width: 100%;
    }

    img {
      height: 100%;
    }
  }

  .news_row .glow_second {
    .blue {
      width: 115%;
      left: -15%;
    }

    .green_1 {
      width: 110%;
      left: -20%;
    }
  }
}