@font-face { font-family: "DM Serif"; src: url("assets/display.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face {
  font-family: Barlow;
  src: url("assets/heading.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: DM;
  src: url("assets/body.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: DM;
  src: url("assets/body-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: DM;
  src: url("assets/body-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: DM;
  src: url("assets/body-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --blue: #245343;
  --navy: #17392f;
  --cream: #fbf8f0;
  --yellow: #edc56c;
  --sky: #dce8d5;
  --orange: #b7674f;
  --muted: #626e61;
  --line: #d5ddcf;
  --white: #fff;
  --heading: "DM Serif", Georgia, serif;
  --body: DM, Arial, sans-serif;
  --max: 1248px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font: 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
body.calm {
  --blue: #425f4e;
  --navy: #2e4134;
  --yellow: #dfcfaa;
  --sky: #e2e6d8;
  --orange: #b88468;
  --cream: #f5f3ed;
}
body:has(dialog[open]) {
  overflow: hidden;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}
svg {
  display: block;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  line-height: 1.08;
}
h1,
h2,
.display {
  font-family: var(--heading);
  font-weight: 400;
}
h1 {
  font-size: clamp(48px, 5vw, 76px);
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(34px, 3.25vw, 48px);
  letter-spacing: -0.015em;
}
h3 {
  font-size: 23px;
  letter-spacing: -0.03em;
  font-weight: 700;
}
p + p {
  margin-top: 16px;
}
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 5px;
}
button {
  border-radius: 0;
}
::selection {
  background: var(--yellow);
  color: var(--navy);
}
.container {
  width: min(var(--max), calc(100% - 96px));
  margin-inline: auto;
}
.section {
  padding: 84px 0;
}
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  gap: 9px;
  align-items: center;
  line-height: 1.5;
  margin-bottom: 18px;
}
.eyebrow:before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
  display: inline-block;
}
.text-blue {
  color: var(--blue);
}
.text-yellow {
  color: var(--yellow);
}
.lead {
  font-size: 18px;
  max-width: 660px;
  line-height: 1.7;
  margin-top: 22px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: flex-end;
  margin-bottom: 34px;
}
.section-heading p {
  margin-top: 14px;
  max-width: 650px;
}
.section-heading h2 {
  color: var(--blue);
}
.section-heading .text-link {
  flex-shrink: 0;
}
.text-link {
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid currentColor;
  padding: 3px 0;
  display: inline-flex;
  gap: 25px;
  align-items: center;
  line-height: 1.6;
}
.text-link:hover {
  color: var(--blue);
}
.text-link span {
  font-size: 21px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 50px;
  padding: 13px 23px;
  border: 1.5px solid transparent;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  transition:
    transform 0.18s,
    background 0.18s,
    color 0.18s;
}
.button:hover {
  transform: translateY(-2px);
}
.button-yellow {
  background: var(--yellow);
  color: var(--navy);
}
.button-yellow:hover {
  background: var(--cream);
}
.button-blue {
  background: var(--blue);
  color: var(--cream);
}
.button-blue:hover {
  background: var(--navy);
}
.button-outline {
  border-color: currentColor;
  background: transparent;
}
.button-outline:hover {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}
.button-white {
  background: var(--cream);
  color: var(--navy);
}
.button span.arrow {
  font-size: 23px;
  line-height: 1;
}
.button-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 29px;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: var(--yellow);
  padding: 12px 20px;
}
.skip-link:focus {
  top: 10px;
}
.utility-bar {
  background: var(--navy);
  color: var(--cream);
  font-size: 11px;
  font-weight: 500;
}
.utility-inner {
  height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.utility-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.utility-links a:hover {
  text-decoration: underline;
}
.utility-divider {
  height: 13px;
  width: 1px;
  background: #ffffff45;
}
.utility-links button {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  font-size: 11px;
  display: flex;
  gap: 7px;
  align-items: center;
}
.utility-links button > span {
  font-size: 20px;
  line-height: 1;
}
.brand-bar {
  background: var(--blue);
  color: var(--cream);
}
.brand-inner {
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-mark {
  width: 56px;
  height: 56px;
  color: var(--cream);
}
.brand-name {
  font: 700 48px/0.82 var(--heading);
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brand-name > span {
  font: 700 9px/1 var(--body);
  letter-spacing: 0.1em;
  color: var(--yellow);
}
.brand-full {
  border-left: 1px solid #ffffff45;
  padding-left: 21px;
  margin-left: 13px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.005em;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 25px;
}
.icon-button {
  border: 0;
  background: none;
  color: inherit;
  width: 40px;
  height: 44px;
  position: relative;
}
.search-trigger:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1.8px solid currentColor;
  border-radius: 50%;
  left: 8px;
  top: 10px;
}
.search-trigger:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  left: 24px;
  top: 27px;
}
.header-donate {
  min-height: 45px;
  padding: 10px 20px;
  gap: 13px;
  font-size: 13px;
}
.heart-icon {
  font-size: 24px;
  line-height: 1;
}
.main-nav {
  background: var(--cream);
  border-bottom: 1px solid #17392f1c;
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-links {
  display: flex;
  gap: 32px;
}
.nav-links > a {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 57px;
  position: relative;
}
.nav-links > a:after {
  content: "";
  position: absolute;
  height: 3px;
  background: var(--orange);
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleX(0);
  transition: transform 0.2s;
}
.nav-links > a:hover:after,
.nav-links > a.active:after {
  transform: scaleX(1);
}
.nav-links > a.active {
  color: var(--blue);
}
.nav-cta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 17px;
  align-items: center;
}
.nav-cta span {
  font-size: 18px;
  color: var(--blue);
}
.menu-toggle,
.mobile-donate {
  display: none !important;
}
.hero {
  position: relative;
  min-height: 660px;
  isolation: isolate;
  overflow: hidden;
  background: #80947c;
}
.hero-image {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-position: 72% 46%;
  z-index: -2;
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1829151a, transparent 75%);
  z-index: -1;
}
.hero > .container {
  padding-block: 54px;
  min-height: 660px;
  display: flex;
  align-items: center;
  position: relative;
}
.hero-card {
  width: 620px;
  background: var(--blue);
  color: var(--cream);
  padding: 39px 44px 40px;
  position: relative;
}
.hero-card h1 {
  font-size: 68px;
  line-height: 1.06;
  max-width: 510px;
}
.hero-card h1 > span {
  color: var(--yellow);
}
.hero-card .eyebrow {
  color: var(--yellow);
  font-size: 11px;
  margin-bottom: 22px;
}
.hero-card p {
  font-size: 15px;
  max-width: 425px;
  line-height: 1.8;
  margin-top: 23px;
}
.hero-card .button {
  margin-top: 27px;
}
.hero-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: #ffffffe0;
}
.hero-bottom span {
  height: 5px;
  width: 5px;
  background: var(--yellow);
  border-radius: 50%;
}
.hero-note {
  position: absolute;
  right: 0;
  bottom: 44px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--cream);
  padding: 15px 20px 15px 15px;
  box-shadow: 0 8px 32px #19251512;
  transform: rotate(-3deg);
}
.hero-note svg {
  width: 33px;
  height: 33px;
  color: var(--blue);
}
.hero-note p {
  font-size: 12px;
  line-height: 1.5;
}
.hero-note strong {
  display: block;
  font-size: 14px;
}
.mission-strip {
  background: var(--yellow);
  padding: 20px 0;
}
.mission-strip > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mission-strip p {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  gap: 12px;
  align-items: center;
}
.mission-strip svg {
  width: 22px;
  height: 22px;
}
.mission-strip .strip-separator {
  height: 21px;
  width: 1px;
  background: #17392f38;
}
.audience-section {
  padding-top: 75px;
  padding-bottom: 76px;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.audience-card {
  display: flex;
  flex-direction: column;
  position: relative;
}
.audience-image {
  position: relative;
  aspect-ratio: 1.33;
  overflow: hidden;
  clip-path: polygon(
    22px 0,
    calc(100% - 22px) 0,
    100% 22px,
    100% calc(100% - 22px),
    calc(100% - 22px) 100%,
    22px 100%,
    0 calc(100% - 22px),
    0 22px
  );
  background: var(--sky);
}
.audience-image img {
  width: 100%;
  height: 100%;
  transition: transform 0.35s;
}
.audience-card:hover img {
  transform: scale(1.045);
}
.image-number {
  position: absolute;
  left: 15px;
  bottom: 13px;
  background: var(--yellow);
  color: var(--navy);
  height: 30px;
  width: 30px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.audience-card h3 {
  font-size: 20px;
  color: var(--blue);
  margin-top: 21px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.audience-card p {
  font-size: 13px;
  line-height: 1.75;
  margin-top: 12px;
  max-width: 260px;
  color: var(--muted);
}
.audience-card .text-link {
  margin-top: auto;
  padding-top: 20px;
  align-self: flex-start;
  font-size: 12px;
  gap: 16px;
}
.split-section {
  background: var(--sky);
  padding: 72px 0;
}
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 86px;
  align-items: center;
}
.split-copy h2 {
  color: var(--blue);
  max-width: 440px;
  font-size: 51px;
  line-height: 1.04;
}
.split-copy > p {
  margin-top: 24px;
  max-width: 475px;
  font-size: 15px;
}
.split-copy .button {
  margin-top: 27px;
}
.mission-image {
  position: relative;
  padding: 0 0 20px 22px;
}
.mission-image > img {
  width: 100%;
  height: 390px;
  clip-path: polygon(
    28px 0,
    calc(100% - 28px) 0,
    100% 28px,
    100% calc(100% - 28px),
    calc(100% - 28px) 100%,
    28px 100%,
    0 calc(100% - 28px),
    0 28px
  );
}
.image-label {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 18px 24px;
  background: var(--cream);
  font: 700 26px/1.15 var(--heading);
  max-width: 250px;
  box-shadow: 7px 7px 0 var(--blue);
}
.image-spark {
  position: absolute;
  top: -23px;
  right: -24px;
  font-size: 80px;
  line-height: 1;
  color: var(--yellow);
  text-shadow: 0 2px 0 var(--blue);
}
.value-row {
  display: flex;
  gap: 19px;
  flex-wrap: wrap;
  margin-top: 27px;
  padding-top: 22px;
  border-top: 1px solid #17392f30;
}
.value-row span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}
.value-row span:before {
  content: "+";
  font-size: 17px;
  color: var(--blue);
}
.programmes-grid,
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
}
.programme-card {
  background: #fffdf7;
  border: 1px solid var(--line);
  padding: 30px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.programme-card:hover {
  transform: translateY(-4px);
  box-shadow: 5px 5px 0 var(--sky);
}
.programme-card .card-icon {
  width: 49px;
  height: 49px;
  background: var(--sky);
  display: grid;
  place-items: center;
  color: var(--blue);
  margin-bottom: 26px;
}
.card-icon svg {
  width: 26px;
  height: 26px;
}
.programme-card:nth-child(2) .card-icon {
  background: var(--yellow);
}
.programme-card:nth-child(3) .card-icon {
  background: #efd9c9;
}
.programme-card h3 {
  font-size: 23px;
  line-height: 1.2;
  color: var(--blue);
}
.programme-card p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 16px;
}
.programme-card .text-link {
  margin-top: auto;
  padding-top: 25px;
  align-self: flex-start;
}
.small-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tag {
  padding: 4px 9px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  background: var(--sky);
  color: var(--navy);
  align-self: flex-start;
  line-height: 1.6;
}
.tag.outline {
  border: 1px solid currentColor;
  background: transparent;
}
.programme-card .tag {
  margin-top: 17px;
}
.tech-band {
  background: var(--navy);
  color: var(--cream);
  padding: 73px 0;
  overflow: hidden;
}
.tech-band h2 {
  font-size: 51px;
  max-width: 500px;
}
.tech-band h2 span {
  color: var(--yellow);
}
.tech-band .eyebrow {
  color: var(--sky);
}
.tech-band p {
  font-size: 15px;
  max-width: 470px;
  margin-top: 23px;
  color: #fbf8f0d9;
}
.tech-band .button {
  margin-top: 26px;
}
.lab-visual {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lab-orbit {
  width: 270px;
  height: 270px;
  border: 1px solid #dce8d560;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
}
.lab-orbit:after {
  content: "";
  position: absolute;
  inset: 35px;
  border: 1px dashed #dce8d570;
  border-radius: 50%;
}
.lab-core {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  z-index: 1;
}
.lab-core svg {
  width: 46px;
  height: 46px;
}
.lab-core span {
  font: 700 22px var(--heading);
  margin-top: 5px;
}
.lab-label {
  position: absolute;
  background: var(--cream);
  color: var(--navy);
  padding: 13px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 5px 5px 0 var(--blue);
  font-size: 12px;
  z-index: 2;
  line-height: 1.5;
}
.lab-label > svg {
  width: 25px;
  height: 25px;
  color: var(--blue);
}
.lab-label:nth-child(2) {
  top: 12px;
  left: 0;
  transform: rotate(-5deg);
}
.lab-label:nth-child(3) {
  right: 0;
  top: 119px;
  transform: rotate(3deg);
}
.lab-label:nth-child(4) {
  left: 27px;
  bottom: 0;
  transform: rotate(-3deg);
}
.lab-label small {
  display: block;
  font-size: 9px;
  color: var(--muted);
}
.lab-star {
  position: absolute;
  color: var(--sky);
  font-size: 40px;
  right: 40px;
  top: 0;
}
.news-card {
  display: flex;
  flex-direction: column;
}
.news-image {
  aspect-ratio: 1.7;
  position: relative;
  overflow: hidden;
}
.news-image img {
  height: 100%;
  width: 100%;
  transition: transform 0.3s;
}
.news-card:hover img {
  transform: scale(1.04);
}
.news-image .tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: var(--cream);
}
.news-meta {
  display: flex;
  gap: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 20px 0 13px;
  color: var(--muted);
}
.news-card h3 {
  font-size: 23px;
  color: var(--blue);
  line-height: 1.2;
}
.news-card .text-link {
  margin-top: 20px;
  align-self: flex-start;
  font-size: 12px;
}
.join-banner {
  background: var(--yellow);
  padding: 46px 0;
}
.join-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.join-inner h2 {
  font-size: 42px;
}
.join-inner p {
  font-size: 14px;
  margin-top: 9px;
}
.join-inner .button {
  flex-shrink: 0;
}
.join-title {
  display: flex;
  gap: 27px;
  align-items: center;
}
.join-title > svg {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
}
footer {
  background: var(--navy);
  color: var(--cream);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr 1fr;
  gap: 50px;
  padding-top: 62px;
  padding-bottom: 49px;
}
.footer-brand .brand-mark {
  width: 45px;
  height: 45px;
}
.footer-brand .brand-name {
  font-size: 41px;
}
.footer-brand .brand-name > span {
  font-size: 7px;
}
.footer-brand > p {
  font-size: 12px;
  margin-top: 19px;
  line-height: 1.6;
}
.footer-brand .footer-mission {
  font-size: 12px;
  color: var(--sky);
}
.footer-top h3 {
  font: 700 14px/1.4 var(--body);
  letter-spacing: 0;
  margin: 6px 0 22px;
}
.footer-top > div > a:not(.brand) {
  display: block;
  font-size: 12px;
  margin-top: 12px;
  color: #fbf8f0d0;
}
.footer-top a:hover {
  text-decoration: underline;
}
.location {
  font-size: 12px;
  margin-top: 21px;
  color: #fbf8f0d0;
}
.location small {
  font-size: 10px;
  opacity: 0.7;
  padding-left: 16px;
}
.footer-bottom {
  border-top: 1px solid #fbf8f025;
  padding: 20px 0;
}
.footer-bottom > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  font-size: 9px;
}
.footer-bottom p span {
  display: block;
  opacity: 0.7;
  margin-top: 3px;
}
.footer-bottom > div > div {
  display: flex;
  gap: 18px;
  align-items: center;
}
.footer-bottom button {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  font-size: 9px;
}
.status-line {
  padding-bottom: 19px;
  font-size: 9px;
  color: #fbf8f09a;
}
.page-hero {
  padding: 53px 0 62px;
  background: var(--sky);
  position: relative;
  overflow: hidden;
}
.breadcrumbs {
  font-size: 11px;
  margin-bottom: 34px;
  display: flex;
  gap: 11px;
  opacity: 0.8;
}
.breadcrumbs a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-hero h1 {
  max-width: 780px;
  color: var(--blue);
}
.page-hero .lead {
  font-size: 17px;
  max-width: 750px;
}
.page-hero .eyebrow {
  color: var(--blue);
}
.page-hero .tag {
  margin-top: 20px;
  border: 1px solid #17392f55;
  background: none;
}
.page-hero.navy {
  background: var(--navy);
  color: var(--cream);
}
.page-hero.navy h1 {
  color: var(--cream);
}
.page-hero.navy .eyebrow {
  color: var(--yellow);
}
.page-hero.yellow {
  background: var(--yellow);
}
.page-hero.cream {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: start;
}
.prose h2 {
  color: var(--blue);
  margin-bottom: 23px;
}
.prose h3 {
  margin-top: 32px;
  margin-bottom: 15px;
}
.prose p,
.prose li {
  font-size: 15px;
}
.prose ul {
  padding-left: 21px;
}
.prose li + li {
  margin-top: 9px;
}
.prose > .button {
  margin-top: 25px;
}
.quote-block {
  background: var(--blue);
  color: var(--cream);
  padding: 38px;
}
.quote-block .eyebrow {
  color: var(--yellow);
}
.quote-block blockquote {
  font: 700 35px/1.2 var(--heading);
  margin: 0;
}
.quote-block > p {
  font-size: 13px;
  margin-top: 22px;
}
.notice {
  border-left: 3px solid var(--orange);
  padding: 15px 20px;
  background: #efe8db;
  font-size: 13px;
  line-height: 1.8;
  margin: 23px 0;
}
.notice strong {
  display: block;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 34px;
}
.value-card {
  border-top: 3px solid var(--blue);
  padding-top: 21px;
}
.value-card .display {
  font-size: 35px;
  color: var(--blue);
  opacity: 0.4;
}
.value-card h3 {
  font-size: 19px;
  margin-top: 12px;
}
.value-card p {
  font-size: 13px;
  margin-top: 12px;
  color: var(--muted);
}
.soft-section {
  background: #f0eee4;
}
.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 35px;
}
.timeline-card {
  padding: 28px;
  background: var(--cream);
  border-top: 5px solid var(--blue);
}
.timeline-card:nth-child(2) {
  border-color: var(--orange);
}
.timeline-card:nth-child(3) {
  border-color: var(--sky);
}
.timeline-card h3 {
  font: 700 29px var(--heading);
  margin: 15px 0;
}
.timeline-card p {
  font-size: 14px;
  color: var(--muted);
}
.team-list {
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.team-row {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.team-row span {
  color: var(--muted);
  text-align: right;
}
.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 25px;
  gap: 20px;
}
.org-chart > div {
  background: var(--sky);
  padding: 16px 28px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  width: 80%;
  position: relative;
}
.org-chart > div + div:before {
  content: "";
  height: 20px;
  width: 1px;
  background: var(--blue);
  position: absolute;
  top: -20px;
  left: 50%;
}
.org-chart > div:last-child {
  display: flex;
  width: 100%;
  gap: 10px;
  background: none;
  padding: 0;
  font-size: 11px;
}
.org-chart > div:last-child span {
  padding: 18px 8px;
  background: var(--yellow);
  flex: 1;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 26px 0 34px;
}
.filter-button {
  padding: 9px 18px;
  border: 1px solid #17392f40;
  background: transparent;
  min-height: 44px;
  font-size: 13px;
}
.filter-button.active {
  background: var(--blue);
  color: var(--cream);
  border-color: var(--blue);
}
.filter-button:hover {
  border-color: var(--blue);
}
.resource-search {
  margin-left: auto;
  position: relative;
}
.resource-search input {
  padding: 10px 14px;
  min-height: 44px;
  background: transparent;
  border: 1px solid #17392f40;
  max-width: 240px;
  color: var(--navy);
  font-size: 13px;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.resource-card {
  background: #fffdf7;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.resource-card > img {
  height: 190px;
  width: 100%;
}
.resource-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.resource-body h3 {
  margin: 16px 0 12px;
  font-size: 23px;
  line-height: 1.2;
  color: var(--blue);
}
.resource-body p {
  font-size: 13px;
  color: var(--muted);
}
.resource-body .text-link {
  margin-top: auto;
  padding-top: 22px;
  align-self: flex-start;
  border: 0;
  border-bottom: 1px solid;
  background: none;
  font-size: 13px;
}
.resource-meta {
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  color: var(--muted);
}
.empty-state {
  text-align: center;
  padding: 50px;
  border: 1px dashed var(--line);
  grid-column: 1/-1;
}
.empty-state h3 {
  margin-bottom: 12px;
}
.programme-list {
  margin-top: 35px;
  display: grid;
  gap: 20px;
}
.programme-row {
  display: grid;
  grid-template-columns: 65px 1fr auto;
  gap: 25px;
  align-items: center;
  background: var(--cream);
  padding: 27px;
}
.programme-row .display {
  font-size: 50px;
  color: var(--blue);
}
.programme-row h3 {
  font-size: 23px;
}
.programme-row p {
  font-size: 13px;
  margin-top: 10px;
  color: var(--muted);
  max-width: 720px;
}
.programme-row .button {
  font-size: 12px;
}
.form-panel {
  background: #fffdf7;
  border: 1px solid var(--line);
  padding: 35px;
}
.form-panel h2 {
  font-size: 37px;
  color: var(--blue);
  margin-bottom: 16px;
}
.form-panel > p {
  font-size: 14px;
  color: var(--muted);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 19px;
  margin-top: 27px;
}
.form-grid .full {
  grid-column: 1/-1;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field > span,
.field > label {
  font-size: 12px;
  font-weight: 600;
}
input,
select,
textarea {
  color: var(--navy);
  border: 1px solid #b7acbf;
  background: var(--cream);
  padding: 12px;
  min-height: 46px;
  border-radius: 0;
  width: 100%;
}
textarea {
  min-height: 110px;
  resize: vertical;
}
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  min-height: 18px;
  accent-color: var(--blue);
  margin: 3px 0 0;
  flex-shrink: 0;
}
label.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
}
.form-note {
  font-size: 11px !important;
  color: var(--muted);
  margin-top: 15px;
}
.form-status {
  padding: 20px;
  border-left: 3px solid var(--blue);
  background: var(--sky);
  margin-top: 22px;
  font-size: 14px;
}
.form-status h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.form-status .button {
  margin-top: 16px;
  font-size: 12px;
}
.role-card {
  display: flex;
  gap: 17px;
  margin: 25px 0;
}
.role-card > span {
  display: grid;
  place-items: center;
  background: var(--sky);
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  color: var(--blue);
}
.role-card svg {
  width: 24px;
  height: 24px;
}
.role-card h3 {
  font-size: 19px;
  margin: 0 0 9px;
}
.role-card p {
  font-size: 13px;
  color: var(--muted);
}
.toggle-group,
.amounts {
  display: flex;
  gap: 8px;
  margin: 22px 0;
}
.toggle-group button {
  padding: 12px;
  flex: 1;
  font-size: 13px;
  border: 1px solid var(--line);
  background: transparent;
  min-height: 47px;
}
.toggle-group button.active,
.amounts button.active {
  background: var(--blue);
  color: var(--cream);
  border-color: var(--blue);
}
.amounts {
  margin: 18px 0;
}
.amounts button {
  padding: 12px;
  flex: 1;
  background: transparent;
  border: 1px solid var(--line);
  font-weight: 700;
}
.amount-input {
  position: relative;
  display: block;
}
.amount-input > span {
  position: absolute;
  top: 11px;
  left: 14px;
}
.amount-input input {
  padding-left: 32px;
}
.donation-summary {
  background: var(--yellow);
  padding: 15px 18px;
  margin-top: 20px;
  font-size: 14px;
}
.donation-summary strong {
  font-size: 23px;
  margin-right: 5px;
}
.donation-card .button {
  width: 100%;
  margin-top: 22px;
}
.faq {
  margin-top: 25px;
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 17px 0;
}
.faq summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq summary:after {
  content: "+";
  color: var(--blue);
  font-size: 23px;
  line-height: 1;
}
.faq details[open] summary:after {
  content: "−";
}
.faq details p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px;
  max-width: 780px;
}
.tech-cards .programme-card {
  min-height: 350px;
}
.quiz-panel {
  background: var(--sky);
  padding: 35px;
}
.quiz-panel h3 {
  font: 700 34px var(--heading);
  color: var(--blue);
  margin-bottom: 14px;
}
.quiz-panel > p {
  font-size: 14px;
}
.quiz-question {
  padding: 19px 0;
  border-bottom: 1px solid #17392f25;
}
.quiz-question > p {
  font-size: 14px;
  font-weight: 600;
}
.radio-options {
  display: flex;
  gap: 25px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.radio-options label {
  display: flex;
  gap: 8px;
  font-size: 12px;
}
.quiz-panel .button {
  margin-top: 23px;
}
.quiz-result {
  background: var(--cream);
  padding: 23px;
  margin-top: 23px;
}
.quiz-result h3 {
  font-size: 26px;
}
.quiz-result li {
  font-size: 13px;
  margin-top: 10px;
}
.knowledge-chat {
  border: 1px solid var(--line);
  padding: 30px;
  background: #fffdf7;
}
.knowledge-chat h3 {
  font: 700 34px var(--heading);
  color: var(--blue);
  margin-bottom: 10px;
}
.knowledge-chat > p {
  font-size: 13px;
  color: var(--muted);
}
.chat-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0;
}
.chat-prompts button {
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 12px;
  padding: 9px 12px;
}
.chat-prompts button:hover {
  border-color: var(--blue);
}
.chat-answer {
  padding: 21px;
  background: var(--sky);
  font-size: 14px;
  min-height: 110px;
}
.map-placeholder {
  background: var(--navy);
  color: var(--cream);
  padding: 36px;
  margin-top: 25px;
}
.map-placeholder h3 {
  font: 700 30px var(--heading);
  margin-bottom: 15px;
}
.map-placeholder p {
  font-size: 14px;
  color: #fbf8f0d9;
}
.map-placeholder .tag {
  background: var(--yellow);
  margin-bottom: 20px;
}
.article-wrap {
  max-width: 780px;
  margin: auto;
  padding: 55px 0 75px;
}
.article-wrap > img {
  width: 100%;
  max-height: 400px;
  margin-bottom: 34px;
}
.article-wrap h2 {
  font-size: 35px;
  margin: 30px 0 17px;
  color: var(--blue);
}
.article-wrap p {
  font-size: 16px;
  line-height: 1.9;
}
.article-wrap .notice {
  font-size: 13px;
}
.article-wrap .text-link {
  margin-top: 35px;
}
.legal-wrap {
  max-width: 830px;
}
.legal-wrap h2 {
  font-size: 32px;
  margin: 30px 0 16px;
  color: var(--blue);
}
.legal-wrap p,
.legal-wrap li {
  font-size: 15px;
}
.clear-button {
  border: 1px solid currentColor;
  background: transparent;
  padding: 10px 17px;
  margin-top: 15px;
  font-size: 13px;
}
dialog {
  border: 0;
  background: var(--cream);
  color: var(--navy);
  padding: 44px;
  width: min(680px, calc(100vw - 36px));
  max-height: 85vh;
  overflow: auto;
  box-shadow: 0 25px 100px #122a2350;
}
dialog::backdrop {
  background: #122a23b8;
  backdrop-filter: blur(5px);
}
.dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  width: 40px;
  height: 40px;
}
.dialog-title,
dialog h2 {
  font: 700 39px/1.1 var(--heading);
  color: var(--blue);
  margin: 12px 0 20px;
}
dialog p,
dialog li {
  font-size: 14px;
}
dialog ul,
dialog ol {
  padding-left: 20px;
}
dialog li + li {
  margin-top: 12px;
}
dialog h3 {
  font-size: 20px;
  margin: 22px 0 14px;
}
dialog .tag {
  margin-top: 5px;
}
dialog .button {
  margin-top: 25px;
}
.search-input {
  margin: 0 0 21px;
}
.search-results {
  display: grid;
  gap: 10px;
}
.search-result {
  padding: 16px;
  border: 1px solid var(--line);
  display: block;
}
.search-result:hover {
  background: var(--sky);
}
.search-result strong {
  font-size: 15px;
}
.search-result p {
  font-size: 12px;
  margin-top: 5px;
  color: var(--muted);
}
.search-empty {
  font-size: 14px;
  padding: 20px 0;
}
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 25px;
  background: var(--navy);
  color: var(--cream);
  border: 1px solid var(--sky);
  z-index: 50;
  font-size: 13px;
  max-width: calc(100% - 35px);
}
.noscript {
  padding: 50px;
  background: var(--yellow);
  position: fixed;
  inset: 20% 10% auto;
  z-index: 100;
}
@media (min-width: 1700px) {
  .hero-image {
    object-position: 70% 45%;
  }
  .hero {
    min-height: 710px;
  }
  .hero > .container {
    min-height: 710px;
  }
}
@media (max-width: 1199px) {
  .container {
    width: calc(100% - 64px);
  }
  .nav-cta {
    display: none;
  }
  .nav-links {
    gap: 38px;
  }
  .hero-card {
    width: 570px;
    padding: 35px;
  }
  .hero-card h1 {
    font-size: 62px;
  }
  .hero,
  .hero > .container {
    min-height: 615px;
  }
  .hero-note {
    right: 0;
  }
  .split-grid {
    gap: 50px;
  }
  .footer-top {
    gap: 30px;
  }
  .brand-full {
    font-size: 11px;
  }
  .audience-card h3 {
    font-size: 18px;
  }
  .lab-label {
    font-size: 11px;
    padding: 11px 14px;
  }
  .lab-label:nth-child(3) {
    right: -5px;
  }
  .lab-orbit {
    width: 245px;
    height: 245px;
  }
  .programmes-grid,
  .resource-grid {
    gap: 20px;
  }
  .programme-card {
    padding: 24px;
  }
  .page-grid {
    gap: 40px;
  }
}
@media (max-width: 900px) {
  .brand-full {
    display: none;
  }
  .hero-card {
    width: 510px;
  }
  .hero-card h1 {
    font-size: 57px;
  }
  .hero-image {
    object-position: 63% 50%;
  }
  .hero-note {
    right: 0;
    bottom: 24px;
    transform: rotate(-3deg) scale(0.9);
    transform-origin: right bottom;
  }
  .hero,
  .hero > .container {
    min-height: 630px;
  }
  .hero > .container {
    align-items: flex-start;
    padding-top: 40px;
  }
  .hero-card {
    padding: 33px;
  }
  .audience-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .audience-image {
    aspect-ratio: 1.55;
  }
  .audience-card h3 {
    font-size: 21px;
  }
  .audience-card p {
    max-width: none;
  }
  .section-heading {
    gap: 20px;
  }
  .split-grid {
    gap: 35px;
  }
  .split-copy h2,
  .tech-band h2 {
    font-size: 43px;
  }
  .mission-image > img {
    height: 350px;
  }
  .image-spark {
    right: -13px;
  }
  .image-label {
    font-size: 23px;
    padding: 16px;
  }
  .mission-strip p {
    font-size: 10px;
    gap: 8px;
  }
  .mission-strip > .container {
    gap: 14px;
  }
  .mission-strip svg {
    width: 18px;
  }
  .footer-top {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 35px;
  }
  .footer-brand {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    gap: 35px;
  }
  .footer-brand > p {
    margin: 0;
  }
  .footer-brand .footer-mission {
    margin-left: auto;
  }
  .nav-links {
    gap: 27px;
  }
  .programmes-grid,
  .news-grid,
  .resource-grid {
    gap: 17px;
  }
  .programme-card {
    padding: 22px;
  }
  .programme-card h3 {
    font-size: 20px;
  }
  .news-card h3 {
    font-size: 20px;
  }
  .page-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .values-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .programme-row {
    grid-template-columns: 45px 1fr;
    gap: 17px;
  }
  .programme-row .button {
    grid-column: 2;
    justify-self: start;
  }
  .resource-body {
    padding: 19px;
  }
  .resource-card > img {
    height: 160px;
  }
  .resource-body h3 {
    font-size: 20px;
  }
  .resource-search {
    width: 100%;
    margin: 6px 0 0;
  }
  .resource-search input {
    max-width: 100%;
  }
  .join-title {
    gap: 18px;
  }
  .join-inner h2 {
    font-size: 35px;
  }
  .join-title > svg {
    width: 45px;
    height: 45px;
  }
  .join-inner {
    gap: 25px;
  }
  .lab-visual {
    transform: scale(0.92);
  }
}
@media (max-width: 650px) {
  .container {
    width: calc(100% - 40px);
  }
  .utility-inner {
    height: 30px;
    font-size: 9px;
  }
  .utility-links > a,
  .utility-divider {
    display: none;
  }
  .utility-links button {
    font-size: 9px;
    gap: 4px;
  }
  .utility-links button > span {
    font-size: 17px;
  }
  .brand-inner {
    height: 83px;
  }
  .brand-mark {
    width: 42px;
    height: 42px;
  }
  .brand {
    gap: 9px;
  }
  .brand-name {
    font-size: 37px;
    gap: 7px;
  }
  .brand-name > span {
    font-size: 7px;
  }
  .header-actions {
    gap: 8px;
  }
  .header-donate {
    display: none;
  }
  .icon-button {
    width: 37px;
  }
  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 7px;
    width: 37px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    padding: 0;
  }
  .menu-toggle span {
    width: 23px;
    height: 2px;
    background: var(--cream);
    transition: transform 0.2s;
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4.5px) rotate(-45deg);
  }
  .main-nav {
    display: none;
  }
  .main-nav.is-open {
    display: block;
  }
  .nav-inner {
    width: 100%;
  }
  .nav-links {
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 8px 20px 17px;
  }
  .nav-links > a {
    min-height: 47px;
    border-bottom: 1px solid #17392f20;
    font-size: 14px;
  }
  .mobile-donate {
    display: flex !important;
  }
  .hero,
  .hero > .container {
    min-height: 0;
  }
  .hero > .container {
    padding-block: 265px 25px;
    align-items: flex-start;
  }
  .hero-image {
    height: 325px;
    object-position: 64% 43%;
    object-fit: cover;
  }
  .hero {
    background: var(--cream);
  }
  .hero:after {
    display: none;
  }
  .hero-card {
    width: 100%;
    padding: 29px 26px 26px;
  }
  .hero-card h1 {
    font-size: clamp(34px, 10.5vw, 49px);
    line-height: 1.08;
  }
  .hero-card .eyebrow {
    font-size: 9px;
    letter-spacing: 0.12em;
    margin-bottom: 18px;
  }
  .hero-card p {
    font-size: 13px;
    line-height: 1.8;
    margin-top: 20px;
  }
  .hero-card .button {
    margin-top: 23px;
    font-size: 13px;
  }
  .hero-bottom {
    font-size: 9px;
    margin-top: 20px;
    gap: 7px;
  }
  .hero-note {
    bottom: auto;
    top: 192px;
    right: 6px;
    transform: rotate(-3deg) scale(0.78);
    transform-origin: right bottom;
  }
  .mission-strip {
    padding: 18px 0;
  }
  .mission-strip > .container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 23px;
  }
  .mission-strip p {
    font-size: 10px;
  }
  .mission-strip .strip-separator {
    display: none;
  }
  .mission-strip p:last-child {
    display: none;
  }
  .section,
  .audience-section {
    padding: 49px 0;
  }
  .eyebrow {
    font-size: 10px;
    margin-bottom: 14px;
  }
  h2 {
    font-size: 35px;
  }
  .section-heading {
    display: block;
    margin-bottom: 27px;
  }
  .section-heading p {
    font-size: 13px;
    line-height: 1.8;
    margin-top: 13px;
  }
  .section-heading .text-link {
    margin-top: 18px;
    font-size: 12px;
  }
  .audience-grid {
    gap: 29px 16px;
  }
  .audience-image {
    aspect-ratio: 1;
    clip-path: polygon(
      15px 0,
      calc(100% - 15px) 0,
      100% 15px,
      100% calc(100% - 15px),
      calc(100% - 15px) 100%,
      15px 100%,
      0 calc(100% - 15px),
      0 15px
    );
  }
  .image-number {
    width: 24px;
    height: 24px;
    font-size: 9px;
    left: 10px;
    bottom: 10px;
  }
  .audience-card h3 {
    font-size: 17px;
    line-height: 1.25;
    margin-top: 15px;
  }
  .audience-card p {
    font-size: 11px;
    margin-top: 9px;
  }
  .audience-card .text-link {
    font-size: 10px;
    gap: 9px;
    padding-top: 14px;
  }
  .audience-card .text-link span {
    font-size: 16px;
  }
  .split-section {
    padding: 46px 0 55px;
  }
  .split-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .split-copy h2,
  .tech-band h2 {
    font-size: 43px;
  }
  .split-copy > p {
    font-size: 14px;
    margin-top: 20px;
  }
  .mission-image {
    padding-left: 12px;
  }
  .mission-image > img {
    height: 320px;
  }
  .image-spark {
    right: 0;
    top: -18px;
    font-size: 61px;
  }
  .image-label {
    font-size: 24px;
    max-width: 220px;
  }
  .value-row {
    gap: 14px;
  }
  .value-row span {
    font-size: 9px;
  }
  .programmes-grid,
  .news-grid {
    grid-template-columns: 1fr;
    gap: 21px;
  }
  .programme-card {
    min-height: 270px;
    padding: 26px;
  }
  .programme-card h3 {
    font-size: 24px;
  }
  .programme-card p {
    font-size: 13px;
  }
  .programme-card .card-icon {
    margin-bottom: 20px;
  }
  .programme-card .text-link {
    font-size: 12px;
  }
  .tech-band {
    padding: 47px 0 53px;
  }
  .tech-band p {
    font-size: 14px;
  }
  .lab-visual {
    max-width: 420px;
    width: 100%;
    margin: 5px auto 0;
    transform: scale(0.94);
    min-height: 295px;
  }
  .lab-label:nth-child(2) {
    left: -3px;
  }
  .lab-label:nth-child(3) {
    right: -5px;
  }
  .lab-label:nth-child(4) {
    left: 10px;
    bottom: 0;
  }
  .news-card h3 {
    font-size: 24px;
  }
  .news-card {
    margin-bottom: 9px;
  }
  .news-image {
    aspect-ratio: 1.8;
  }
  .news-meta {
    margin-top: 17px;
  }
  .news-card .text-link {
    margin-top: 14px;
  }
  .join-banner {
    padding: 35px 0;
  }
  .join-inner {
    display: block;
  }
  .join-title {
    gap: 15px;
    align-items: flex-start;
  }
  .join-title > svg {
    width: 37px;
    height: 37px;
    margin-top: 4px;
  }
  .join-inner h2 {
    font-size: 35px;
  }
  .join-inner p {
    font-size: 12px;
    margin-top: 10px;
  }
  .join-inner .button {
    margin-top: 24px;
    margin-left: 52px;
    font-size: 12px;
    min-height: 46px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 33px 28px;
    padding-block: 42px 35px;
  }
  .footer-brand {
    display: block;
    grid-column: 1/-1;
  }
  .footer-brand .brand {
    float: left;
    margin-right: 26px;
  }
  .footer-brand > p {
    font-size: 10px;
    padding-top: 5px;
  }
  .footer-brand .footer-mission {
    display: none;
  }
  .footer-top > div:last-child {
    grid-column: 1/-1;
  }
  .footer-top h3 {
    font-size: 13px;
    margin: 0 0 16px;
  }
  .footer-top > div > a:not(.brand) {
    font-size: 11px;
    margin-top: 10px;
  }
  .footer-bottom > .container {
    display: block;
    font-size: 8px;
  }
  .footer-bottom > div > div {
    margin-top: 17px;
    gap: 25px;
  }
  .footer-bottom button {
    font-size: 9px;
  }
  .status-line {
    font-size: 8px;
    line-height: 1.8;
  }
  .page-hero {
    padding: 29px 0 39px;
  }
  .breadcrumbs {
    font-size: 10px;
    margin-bottom: 28px;
  }
  .page-hero h1 {
    font-size: 52px;
  }
  .page-hero .lead {
    font-size: 14px;
    margin-top: 20px;
  }
  .page-hero .tag {
    font-size: 9px;
  }
  .page-grid {
    gap: 35px;
  }
  .prose p,
  .prose li {
    font-size: 14px;
  }
  .quote-block {
    padding: 28px;
  }
  .quote-block blockquote {
    font-size: 30px;
  }
  .values-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
  .value-card h3 {
    font-size: 18px;
  }
  .value-card p {
    font-size: 12px;
  }
  .timeline {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .team-row {
    font-size: 11px;
    gap: 18px;
  }
  .team-row span {
    max-width: 45%;
  }
  .resource-grid {
    grid-template-columns: 1fr;
  }
  .resource-card > img {
    height: 220px;
  }
  .resource-body {
    padding: 24px;
  }
  .resource-body h3 {
    font-size: 25px;
  }
  .filter-button {
    font-size: 11px;
    padding: 8px 13px;
    min-height: 40px;
  }
  .filter-bar {
    gap: 7px;
  }
  .resource-body p {
    font-size: 13px;
  }
  .programme-row {
    padding: 23px 20px;
    grid-template-columns: 30px 1fr;
    gap: 15px;
  }
  .programme-row .display {
    font-size: 37px;
  }
  .programme-row h3 {
    font-size: 20px;
    line-height: 1.2;
  }
  .programme-row p {
    font-size: 12px;
  }
  .form-panel,
  .quiz-panel,
  .knowledge-chat {
    padding: 26px 22px;
  }
  .form-panel h2 {
    font-size: 34px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .form-grid .full {
    grid-column: auto;
  }
  .form-panel > p {
    font-size: 13px;
  }
  .notice {
    font-size: 12px;
    padding: 13px 16px;
  }
  .form-note {
    font-size: 10px !important;
  }
  .tech-cards .programme-card {
    min-height: auto;
  }
  .article-wrap {
    padding: 35px 0 50px;
  }
  .article-wrap p {
    font-size: 14px;
  }
  .article-wrap > img {
    max-height: 240px;
  }
  .article-wrap h2 {
    font-size: 31px;
  }
  .legal-wrap p,
  .legal-wrap li {
    font-size: 14px;
  }
  .amounts {
    gap: 7px;
  }
  .amounts button {
    padding: 11px;
  }
  .form-panel .toggle-group {
    gap: 6px;
  }
  .toggle-group button {
    font-size: 11px;
  }
  .quiz-panel h3,
  .knowledge-chat h3 {
    font-size: 31px;
  }
  .quiz-question > p {
    font-size: 13px;
  }
  .radio-options {
    gap: 18px;
  }
  .radio-options label {
    font-size: 11px;
  }
  .map-placeholder {
    padding: 28px 23px;
  }
  .map-placeholder p {
    font-size: 13px;
  }
  dialog {
    padding: 30px 24px;
  }
  dialog h2 {
    font-size: 34px;
    padding-right: 20px;
  }
  dialog p,
  dialog li {
    font-size: 13px;
  }
  .dialog-close {
    top: 8px;
    right: 8px;
  }
  .toast {
    font-size: 11px;
    width: max-content;
    text-align: center;
  }
  .lead {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  header,
  footer,
  .button,
  .button-row,
  .filter-bar,
  .join-banner,
  dialog {
    display: none !important;
  }
  body {
    background: white;
    color: black;
  }
  .container {
    width: 100%;
  }
  .section {
    padding: 20px 0;
  }
  .page-hero {
    padding: 0 0 20px;
    background: white;
  }
  .resource-grid,
  .page-grid {
    display: block;
  }
  .resource-card {
    break-inside: avoid;
    margin-bottom: 20px;
  }
  .hero-image {
    display: none;
  }
  .hero {
    min-height: 0;
  }
  .hero-card {
    width: 100%;
    background: white;
    color: black;
  }
  .hero > .container {
    min-height: 0;
    padding: 20px;
  }
  .hero-card h1 {
    font-size: 48px;
    color: black;
  }
  .hero-card h1 span {
    color: black;
  }
}

/* BAKET identity: woodland colours, thoughtful typography and open, organic shapes. */
.brand-bar { background:var(--cream); color:var(--navy); }
.brand-mark { color:var(--blue); }
.brand-name { font:700 38px/1 var(--body); letter-spacing:-.065em; gap:7px; }
.brand-name > span { font-size:7px; letter-spacing:.14em; color:var(--blue); }
.brand-full { border-color:var(--line); padding-left:22px; }
.header-donate { border-radius:5px; }
.main-nav { background:var(--cream); }
.nav-links > a:after { background:var(--blue); height:2px; }
.nav-cta { font-size:11px; }
.button { border-radius:5px; min-height:51px; }
.button-yellow:hover { background:#f4dca1; }
.eyebrow:before { border-radius:100% 0 100% 0; width:9px; height:9px; }
.section-heading h2 { max-width:800px; }
.hero { background:var(--cream); min-height:0; overflow:hidden; }
.hero:after { display:none; }
.hero > .container { min-height:0; display:grid; grid-template-columns:1.03fr 1fr; gap:62px; padding-block:52px 61px; align-items:center; }
.hero-card { width:auto; background:transparent; padding:15px 0 10px; color:var(--navy); }
.hero-card h1 { font-size:clamp(49px,4.6vw,67px); line-height:1.09; letter-spacing:-.035em; max-width:590px; }
.hero-card h1 > span { color:var(--blue); font-style:italic; }
.hero-card .eyebrow { color:var(--blue); margin-bottom:23px; font-size:10px; }
.hero-card p { max-width:435px; font-size:15px; color:var(--muted); line-height:1.85; margin-top:26px; }
.hero-actions { display:flex; align-items:center; gap:26px; margin-top:30px; flex-wrap:wrap; }
.hero-card .hero-actions .button { margin:0; font-size:13px; padding-inline:21px; }
.hero-actions .text-link { font-size:12px; gap:17px; }
.hero-bottom { color:var(--muted); font-size:10px; margin-top:31px; letter-spacing:.02em; }
.hero-bottom span { width:7px; height:7px; background:var(--blue); }
.hero-portrait { position:relative; margin:0; padding:0 0 0 7px; }
.hero-image-frame { border-radius:240px 240px 16px 16px; overflow:hidden; height:520px; background:var(--sage,var(--sky)); }
.hero-image { position:static; width:100%; height:100%; object-fit:cover; object-position:62% 50%; z-index:auto; }
.hero-portrait figcaption { font-size:10px; letter-spacing:.02em; text-align:center; color:var(--muted); padding-top:15px; }
.hero-seal { position:absolute; bottom:44px; left:-35px; width:128px; height:128px; background:var(--yellow); color:var(--navy); border-radius:50%; border:8px solid var(--cream); outline:1px solid var(--yellow); display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-11deg); }
.hero-seal svg { width:29px; height:29px; margin-bottom:7px; }
.hero-seal span { font-size:7px; font-weight:700; letter-spacing:.08em; }
.hero-seal strong { font:400 23px/1.2 var(--heading); margin-top:3px; }
.mission-strip { background:var(--sky); padding:22px 0; border-block:1px solid #17392f12; }
.mission-strip .strip-separator { background:#17392f25; }
.audience-image { clip-path:none; border-radius:80px 80px 8px 8px; aspect-ratio:1.3; }
.audience-card:nth-child(even) .audience-image { border-radius:8px 8px 80px 8px; }
.image-number { border-radius:50%; width:32px; height:32px; }
.audience-card h3 { font-size:19px; }
.audience-card p { font-size:13px; }
.mission-image > img { clip-path:none; border-radius:110px 12px 110px 12px; }
.image-label { border-radius:7px; box-shadow:5px 5px 0 var(--blue); font-weight:400; font-size:23px; }
.image-spark { color:var(--blue); text-shadow:none; }
.split-copy h2,.tech-band h2 { font-size:43px; line-height:1.16; }
.programme-card { border-radius:12px; border-color:var(--line); background:var(--white); }
.programme-card:hover { box-shadow:0 9px 25px #17392f0d; }
.programme-card .card-icon { border-radius:50%; }
.tag { border-radius:3px; }
.resource-card,.form-panel,.knowledge-chat { border-radius:12px; overflow:hidden; }
.news-image { border-radius:12px; }
.news-card h3 { font-size:23px; }
.tech-band { background:var(--navy); }
.lab-core span { font-size:19px; font-weight:400; }
.lab-label { border-radius:6px; box-shadow:4px 4px 0 #ffffff15; }
.quote-block { border-radius:12px 70px 12px 12px; }
.quote-block blockquote { font-weight:400; font-size:31px; line-height:1.3; }
.timeline-card { border-radius:0 0 12px 12px; }
.timeline-card h3,.quiz-panel h3,.knowledge-chat h3,.map-placeholder h3 { font-weight:400; }
.join-banner { background:var(--sky); }
.join-inner h2 { font-size:34px; }
.page-hero h1 { font-size:clamp(45px,4.7vw,68px); line-height:1.1; }
footer .brand-mark { color:var(--cream); }
footer .brand-name { font:700 33px/1 var(--body); letter-spacing:-.065em; }
footer .brand-name > span { color:var(--yellow); }
.footer-top { padding-bottom:38px; }
.footer-bottom > .container { font-size:10px; }
.footer-bottom button { font-size:10px; }
.footer-registration { display:flex; gap:24px; align-items:flex-start; padding-block:27px; border-top:1px solid #fbf8f02e; }
.footer-registration > svg { width:30px; height:30px; flex-shrink:0; color:var(--yellow); margin-top:2px; }
.footer-registration strong { display:block; font-size:14px; line-height:1.5; font-weight:600; }
.footer-registration p { font-size:11px; line-height:1.8; color:#fbf8f0dc; margin-top:7px; }
.footer-registration small { display:block; font-size:10px; line-height:1.7; color:#fbf8f0a6; margin-top:5px; }
.status-line { font-size:10px; padding-bottom:20px; }
.dialog-title,dialog h2 { font-weight:400; font-size:35px; line-height:1.15; }
dialog { border-radius:12px; }
@media (max-width:1199px) {
.hero > .container { gap:38px; padding-block:44px 48px; }
.hero-card h1 { font-size:clamp(45px,5vw,60px); }
.hero-image-frame { height:480px; }
.hero-seal { width:116px; height:116px; left:-22px; }
.split-copy h2,.tech-band h2 { font-size:39px; }
.nav-links { gap:28px; }
}
@media (max-width:900px) {
.hero > .container { gap:30px; }
.hero-card h1 { font-size:44px; }
.hero-card p { font-size:14px; }
.hero-card .eyebrow { font-size:9px; letter-spacing:.1em; }
.hero-image-frame { height:435px; }
.hero-actions { gap:18px; }
.hero-card .hero-actions .button { padding-inline:16px; font-size:12px; }
.hero-portrait figcaption { font-size:9px; }
.hero-seal { width:106px; height:106px; }
.hero-seal strong { font-size:20px; }
.hero-seal svg { width:24px; height:24px; }
.nav-links { gap:23px; }
}
@media (max-width:650px) {
.brand-name { font-size:29px; gap:6px; }
.brand-name > span { font-size:6px; }
.brand-inner { height:81px; }
.menu-toggle span { background:var(--navy); }
.hero > .container { display:flex; flex-direction:column; gap:28px; padding-block:31px 31px; }
.hero-card { width:100%; padding:0; }
.hero-card h1 { font-size:clamp(39px,11.4vw,61px); max-width:100%; letter-spacing:-.035em; line-height:1.09; }
.hero-card .eyebrow { font-size:9px; margin-bottom:17px; }
.hero-card p { font-size:13px; line-height:1.8; margin-top:21px; max-width:430px; }
.hero-actions { gap:23px; margin-top:23px; }
.hero-card .hero-actions .button { padding:12px 17px; min-height:47px; font-size:11px; }
.hero-actions .text-link { font-size:11px; gap:12px; }
.hero-bottom { font-size:9px; margin-top:22px; }
.hero-portrait { width:100%; max-width:460px; padding:0 0 0 18px; align-self:center; }
.hero-image-frame { height:335px; border-radius:180px 180px 10px 10px; }
.hero-image { height:100%; object-position:61% 50%; }
.hero-seal { width:102px; height:102px; left:0; bottom:38px; border-width:6px; }
.hero-portrait figcaption { font-size:9px; padding-top:13px; }
.audience-image { clip-path:none; aspect-ratio:1; border-radius:60px 60px 6px 6px; }
.audience-card:nth-child(even) .audience-image { border-radius:6px 6px 60px 6px; }
.audience-card h3 { font-size:17px; }
.audience-card p { font-size:12px; }
.section-heading h2 { font-size:32px; line-height:1.18; }
.split-copy h2,.tech-band h2 { font-size:36px; }
.mission-image > img { border-radius:75px 8px 75px 8px; }
.image-label { font-size:21px; padding:16px 19px; }
.news-card h3 { font-size:22px; }
.join-inner h2 { font-size:30px; }
.join-inner .button { margin-left:0; }
.footer-registration { gap:15px; padding-block:23px; }
.footer-registration > svg { width:24px; height:24px; }
.footer-registration strong { font-size:12px; }
.footer-registration p { font-size:10px; }
.footer-registration small { font-size:9px; }
.footer-top .brand-name { font-size:29px; }
.footer-brand .brand { float:none; margin:0; }
.footer-brand > p { margin-top:16px; font-size:11px; }
.footer-bottom > .container { font-size:9px; }
.status-line { font-size:9px; }
.page-hero h1 { font-size:clamp(39px,10.8vw,54px); }
}
@media print { .hero-seal {display:none} .hero-image-frame {height:0} }

/* Detailed enquiry previews and restrained home motion. */
.form-example {
  display:grid; grid-template-columns:1fr auto; gap:14px 18px;
  margin-top:25px; padding:20px; background:var(--sky);
  border:1px solid var(--line); border-radius:9px;
}
.form-example strong { display:block; font-size:14px; line-height:1.5; margin-top:6px; }
.form-example p { margin-top:5px; font-size:12px; line-height:1.6; }
.form-example .text-link { align-self:center; background:none; border:0; border-bottom:1px solid currentColor; font-size:12px; white-space:nowrap; }
.form-example > small { grid-column:1/-1; font-size:11px; color:var(--muted); line-height:1.6; }
.form-panel .form-instructions { font-size:12px; color:var(--muted); margin-top:22px; }
.field > small { color:var(--muted); font-size:11px; line-height:1.6; }
.field textarea { min-height:160px; resize:vertical; }
.form-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.form-actions .text-link { border:0; border-bottom:1px solid currentColor; background:transparent; font-size:12px; }
.hero-scroll { display:none; }
@media (prefers-reduced-motion: no-preference) {
  .is-home .hero-card > .eyebrow { animation:baket-enter 650ms both; }
  .is-home .hero-card > h1 { animation:baket-enter 850ms 80ms both; }
  .is-home .hero-card > p { animation:baket-enter 850ms 180ms both; }
  .is-home .hero-actions { animation:baket-enter 850ms 260ms both; }
  .is-home .hero-bottom { animation:baket-enter 850ms 340ms both; }
  .is-home .hero-portrait { animation:baket-portrait 1100ms 120ms both; }
  .is-home .hero-image { animation:baket-image-settle 1700ms cubic-bezier(.2,.65,.3,1) both; }
  .is-home .hero-seal { animation:baket-seal-float 4s 1100ms ease-in-out 1; }
  .is-home .reveal-ready {
    opacity:0; transform:translateY(24px);
    transition:opacity 700ms ease var(--reveal-delay,0ms), transform 700ms cubic-bezier(.2,.65,.3,1) var(--reveal-delay,0ms);
  }
  .is-home .reveal-ready.is-visible { opacity:1; transform:translateY(0); }
  .button .arrow,.text-link > span { transition:transform 220ms ease; }
  .button:hover .arrow,.text-link:hover > span { transform:translate(3px,-3px); }
  .hero-image-frame { transition:box-shadow 400ms ease; }
  .hero-portrait:hover .hero-image-frame { box-shadow:0 14px 35px #17392f14; }
}
@keyframes baket-enter { from {opacity:0;transform:translateY(18px)} to {opacity:1;transform:translateY(0)} }
@keyframes baket-portrait { from {opacity:0;transform:translateY(20px) scale(.985)} to {opacity:1;transform:translateY(0) scale(1)} }
@keyframes baket-image-settle { from {transform:scale(1.055)} to {transform:scale(1)} }
@keyframes baket-seal-float {
  0%,100% {transform:translateY(0) rotate(-11deg)}
  50% {transform:translateY(-8px) rotate(-7deg)}
}
@media (max-width:650px) {
  .form-example { grid-template-columns:1fr; padding:17px; }
  .form-example .text-link { justify-self:start; }
  .form-example > small { grid-column:auto; }
  .form-example strong { font-size:13px; }
}
@media (prefers-reduced-motion:reduce), print {
  .is-home .reveal-ready { opacity:1!important; transform:none!important; transition:none!important; }
}