.about-page {
  --about-navy: #0b1f4d;
  --about-blue: #2d7ff9;
  --about-gold: #ffb733;
  --about-cream: #f7f4ed;
  color: #243b5a;
  background: #fff;
  font-size: 16px;
}
.about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; }
.about-page { scroll-behavior: smooth; }
.about-navigation-shell { position: absolute; z-index: 20; top: 0; width: 100%; padding: 16px 24px; }
.about-navigation-shell .public-navigation { max-width: 1120px; }
.about-navigation-shell .brand-logo-component { padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.09); box-shadow: 0 8px 22px rgba(0,0,0,.1); backdrop-filter: blur(8px); }
.about-navigation-shell .brand-logo-copy strong { color: #fff; }
.about-navigation-shell .brand-logo-copy strong span { color: var(--about-gold); }
.about-navigation-shell .brand-logo-mark i { background: #fff; }
.about-navigation-shell .brand-logo-copy small { color: rgba(255,255,255,.72); }
.about-navigation-shell .public-links-v2 a, .about-navigation-shell .public-actions-v2 .ghost-link-button { color: rgba(255,255,255,.84); }
.about-navigation-shell .public-links-v2 a:hover, .about-navigation-shell .public-actions-v2 .ghost-link-button:hover, .about-navigation-shell .public-links-v2 .is-current { color: #fff; }
.about-navigation-shell .nav-cta { color: var(--about-navy); background: var(--about-gold); box-shadow: 0 8px 20px rgba(255,183,51,.2); }
.about-navigation-shell .public-mobile-menu-toggle span { background: #fff; }
.about-navigation-shell .is-current { color: var(--about-gold); }
.about-container { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.about-section { position: relative; padding: 56px 0; overflow: clip; }
.about-eyebrow { margin: 0 0 12px; color: var(--about-blue); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.about-page h1, .about-page h2, .about-page h3 { color: var(--about-navy); letter-spacing: -.035em; }
.about-page h1 { max-width: 720px; margin: 0 0 22px; font-size: clamp(2.75rem,4.2vw,3.125rem); line-height: 1.04; }
.about-page h2 { max-width: 720px; margin: 0 0 18px; font-size: clamp(1.9rem,3vw,2.25rem); line-height: 1.12; }
.about-page h3 { margin: 0 0 9px; font-size: clamp(1.25rem,2vw,1.45rem); line-height: 1.25; }
.about-page p { margin: 0 0 14px; line-height: 1.65; }
.about-lead, .about-section-intro { max-width: 650px; color: #405776; font-size: 1.04rem; }
.about-text-link { display: inline-flex; gap: 7px; align-items: center; margin-top: 6px; color: var(--about-blue); font-size: .9rem; font-weight: 800; text-decoration: none; }
.about-text-link span { transition: transform .2s ease; }
.about-text-link:hover span { transform: translate(2px,-2px); }
.about-page .primary-button, .about-page .secondary-button { min-height: 40px; padding: 9px 17px; border-radius: 10px; font-size: .86rem; font-weight: 800; }
.about-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.about-hero { min-height: 560px; display: grid; align-items: center; padding: 118px 0 62px; color: #fff; background: radial-gradient(circle at 82% 42%, rgba(45,127,249,.32), transparent 23%), linear-gradient(135deg,#071936,var(--about-navy) 58%,#153a78); }
.about-hero::after { content: ""; position: absolute; right: -10vw; bottom: -26vw; width: 52vw; height: 52vw; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; }
.about-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(180px,.5fr); gap: 52px; align-items: center; }
.about-hero h1 { color: #fff; }
.about-hero .about-eyebrow { color: var(--about-gold); }
.about-hero-copy > p:not(.about-eyebrow):not(.about-trust-line) { max-width: 650px; color: #d7e2f3; }
.about-trust-line { display: flex; flex-wrap: wrap; gap: 7px; color: #fff; font-size: .8rem; font-weight: 700; }
.about-trust-line span { color: var(--about-gold); }
.about-hero .secondary-button { border-color: rgba(255,255,255,.38); color: #fff; background: rgba(255,255,255,.05); }
.about-hero-mark { position: relative; display: grid; width: min(210px,45vw); aspect-ratio: 1; place-items: center; justify-self: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.025); }
.about-hero-mark > span { color: #fff; font-size: 7rem; font-weight: 800; letter-spacing: -.12em; }
.about-hero-mark i { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--about-gold); transform: translate(41px,39px); box-shadow: 0 0 0 6px rgba(255,183,51,.14); }
.about-hero-mark b { position: absolute; right: -20px; bottom: 18px; padding: 10px 13px; border-radius: 12px; color: var(--about-navy); background: rgba(255,255,255,.95); font-size: .68rem; line-height: 1.4; }

.credibility-section { background: var(--about-cream); }
.credibility-story { display: grid; gap: 42px; }
.organisation-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,.9fr); gap: 54px; align-items: center; }
.organisation-copy { max-width: 620px; }
.ecosystem-path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; }
.ecosystem-path article { min-width: 0; padding: 16px 14px; border: 1px solid #dbe3ee; border-radius: 12px; background: #fff; }
.ecosystem-path small { display: block; margin-bottom: 5px; color: #697b93; font-size: .65rem; }
.ecosystem-path strong { display: block; color: var(--about-navy); font-size: .88rem; line-height: 1.25; }
.ecosystem-path > span { color: var(--about-gold); font-size: 1.1rem; transform: rotate(-90deg); }
.ecosystem-path .is-ekolab { border-color: rgba(45,127,249,.32); background: #eef5ff; }
.founder-grid { display: grid; grid-template-columns: 270px minmax(0,620px); gap: 42px; align-items: center; padding-top: 38px; border-top: 1px solid #dedbd3; }
.founder-portrait { width: 270px; margin: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 14px 34px rgba(11,31,77,.12); }
.founder-portrait img { display: block; width: 100%; height: 338px; object-fit: cover; object-position: center 18%; }
.founder-copy { max-width: 620px; }
.founder-copy h3 { font-size: clamp(1.85rem,2.8vw,2.125rem); }
.founder-role { display: flex; flex-wrap: wrap; gap: 5px 14px; color: #536984; font-size: .88rem; }
.founder-role strong { color: var(--about-blue); }
.founder-copy blockquote { margin: 18px 0 12px; padding: 14px 18px; border-left: 3px solid var(--about-gold); color: var(--about-navy); background: rgba(255,255,255,.66); font-size: .95rem; font-weight: 650; line-height: 1.55; }

.library-section { background: #fff; }
.metrics-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 25px; }
.metric-card { min-height: 124px; display: grid; align-content: center; padding: 21px 22px; border: 1px solid #dfe6ef; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(11,31,77,.055); }
.metric-card strong { color: var(--about-navy); font-size: clamp(2.35rem,4vw,2.85rem); line-height: 1; font-variant-numeric: tabular-nums; }
.metric-card span { margin-top: 9px; color: #50657f; font-size: .8rem; font-weight: 750; line-height: 1.35; }
.metrics-note { margin-top: 10px !important; color: #718198; font-size: .76rem; }
.subject-preview-title { margin-top: 30px !important; font-size: 1.25rem !important; }
.about-subject-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin-top: 14px; }
.about-subject-card { min-height: 0; padding: 15px 16px; border: 1px solid #e1e7ef; border-top: 3px solid var(--subject-colour,var(--about-blue)); border-radius: 11px; background: #fff; }
.subject-card-head { margin-bottom: 5px; }
.subject-card-icon { display: none; }
.about-subject-card h3 { margin: 0; font-size: .96rem; }
.subject-card-stats { display: flex; flex-wrap: wrap; color: #667990; font-size: .78rem; }
.subject-card-stats span + span::before { content: " · "; white-space: pre; }
.subject-toggle { margin-top: 16px; }

.learning-section { background: var(--about-cream); }
.learning-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.8fr); gap: 64px; align-items: start; }
.quality-list { display: grid; gap: 18px; max-width: 620px; margin-top: 24px; }
.quality-list article { padding-top: 15px; border-top: 1px solid #dcd9d0; }
.quality-list h3 { font-size: 1.08rem; }
.quality-list p { margin: 0; color: #50637d; font-size: .93rem; }
.learning-philosophy { padding: 25px; border-left: 3px solid var(--about-gold); background: rgba(255,255,255,.58); }
.learning-philosophy > p { color: #495e79; font-size: .93rem; }
.learning-loop { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; padding: 0; list-style: none; }
.learning-loop li { display: inline-flex; align-items: center; gap: 8px; color: var(--about-navy); font-size: .82rem; font-weight: 800; }
.learning-loop li:not(:last-child)::after { content: "→"; color: var(--about-gold); }
.purpose-close { margin-bottom: 0 !important; color: var(--about-navy) !important; font-weight: 750; }

.closing-section { color: #d9e4f3; background: var(--about-navy); }
.closing-section h2, .closing-section h3 { color: #fff; }
.closing-section .about-eyebrow { color: var(--about-gold); }
.closing-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 72px; align-items: start; }
.trust-summary p, .partner-summary p { max-width: 560px; }
.trust-summary a { color: #fff; }
.trust-contact-list { display: grid; gap: 13px; margin-top: 20px; }
.trust-contact-list > div { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 11px; align-items: start; }
.trust-contact-list address { margin: 0; color: #d9e4f3; font-style: normal; line-height: 1.55; }
.trust-contact-list a { align-self: center; color: #fff; line-height: 1.45; }
.trust-icon { display: grid; width: 22px; height: 22px; place-items: center; color: var(--about-gold); }
.trust-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.partner-summary { padding-left: 36px; border-left: 1px solid rgba(255,255,255,.16); }
.partner-summary .primary-button { margin-top: 4px; color: var(--about-navy); background: var(--about-gold); }
.compact-cta { display: flex; flex-wrap: wrap; gap: 9px 16px; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); font-size: .86rem; }
.compact-cta a { color: #fff; font-weight: 750; }
.about-footer { display: grid; grid-template-columns: minmax(300px,1fr) minmax(420px,.9fr); gap: 34px; align-items: center; padding: 22px max(20px,calc((100% - 1120px)/2)); color: #53657d; background: #fff; font-size: .75rem; }
.about-footer-brand { display: flex; gap: 16px; align-items: center; min-width: 0; }
.about-footer .brand-logo-component { flex: 0 0 auto; }
.about-footer .brand-logo-copy small { display: none; }
.about-footer-copy { display: grid; gap: 2px; min-width: 0; }
.about-footer .footer-links { display: grid; grid-template-columns: repeat(4,max-content); gap: 8px 20px; justify-content: end; }
.about-footer .footer-links a { color: var(--about-navy); font-weight: 700; text-decoration: none; }
.about-footer .footer-links a:hover, .about-footer .footer-links a[aria-current="page"] { color: var(--about-blue); }

[data-about-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1); }
[data-about-reveal].is-visible { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .about-section { padding-block: 48px; }
  .about-hero { min-height: 0; padding-top: 116px; }
  .about-hero-grid, .organisation-row, .learning-layout, .closing-grid { grid-template-columns: 1fr; }
  .about-hero-mark { display: none; }
  .organisation-row, .learning-layout, .closing-grid { gap: 34px; }
  .founder-grid { grid-template-columns: 240px minmax(0,1fr); gap: 32px; }
  .metrics-grid { gap: 10px; }
  .about-subject-grid { grid-template-columns: repeat(2,1fr); }
  .partner-summary { padding: 28px 0 0; border-top: 1px solid rgba(255,255,255,.16); border-left: 0; }
  .about-footer { grid-template-columns: 1fr; gap: 18px; }
  .about-footer .footer-links { justify-content: start; }
}
@media (max-width: 620px) {
  .about-container { width: min(100% - 28px,1120px); }
  .about-section { padding-block: 36px; }
  .about-navigation-shell { padding-inline: 12px; }
  .about-page h1 { font-size: clamp(2rem,9vw,2.25rem); }
  .about-page h2 { font-size: clamp(1.65rem,7.5vw,1.875rem); }
  .about-page h3 { font-size: 1.15rem; }
  .about-page p { font-size: .95rem; }
  .about-hero { padding: 108px 0 42px; }
  .about-hero .about-lead { font-size: .98rem; }
  .about-actions { display: grid; }
  .about-actions > * { width: 100%; }
  .about-trust-line { display: block; line-height: 1.8; }
  .founder-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 30px; }
  .founder-portrait { width: min(240px,72vw); }
  .founder-portrait img { height: 300px; }
  .founder-copy h3 { font-size: 1.8rem; }
  .ecosystem-path { grid-template-columns: 1fr; }
  .ecosystem-path > span { text-align: center; transform: none; }
  .metrics-grid, .about-subject-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 104px; padding: 18px 20px; }
  .metric-card strong { font-size: 2.35rem; }
  .about-subject-card { padding: 13px 15px; }
  .learning-philosophy { padding: 20px; }
  .learning-loop { display: grid; grid-template-columns: repeat(2,1fr); }
  .learning-loop li { justify-content: space-between; }
  .learning-loop li:nth-child(even)::after, .learning-loop li:last-child::after { content: none; }
  .about-footer { align-items: flex-start; padding: 18px 14px; text-align: left; }
  .about-footer-brand { align-items: flex-start; }
  .about-footer-copy { padding-top: 3px; }
  .about-footer .footer-links { grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 10px 18px; }
}
@media (max-width: 340px) {
  .about-container { width: min(100% - 24px,1120px); }
  .about-page h1 { font-size: 2rem; }
  .about-page h2 { font-size: 1.65rem; }
  .about-page .primary-button, .about-page .secondary-button { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-page { scroll-behavior: auto; }
  .about-page *, .about-page *::before, .about-page *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  [data-about-reveal] { opacity: 1; transform: none; }
}