:root {
  --navy: #0A2240;
  --navy2: #0e2c57;
  --ink: #0A2240;
  --blue: #2E5AAC;
  --blue-l: #6FA8E6;
  --sky: #A9CBF0;
  --gold: #d2a542;
  --gold-l: #E5C57C;
  --cream: #F6F2E9;
  --paper: #ffffff;
  --mist: #EDF2F9;
  --text: #1d2735;
  --muted: #5d6b80;
  --line: #e3e8ef;
  --serif: 'Fraunces',Georgia,serif;
  --sans: 'Inter',system-ui,sans-serif;
  --maxw: 1220px;
  /* header.nav is 16px padding + 42px logo + 16px padding. Fixed, so it
     overlays the hero — the hero reserves this much top padding to keep its
     centred content out from under it. */
  --nav-h: 74px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

section {
  padding: 104px 0;
}

.eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

h2.title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(30px,4.1vw,47px);
  color: var(--navy);
  line-height: 1.05;
  letter-spacing: -.022em;
}

.lead {
  color: var(--muted);
  font-size: 18px;
  max-width: 600px;
  margin-top: 14px;
}

/* progress + nav */
#progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg,var(--gold),var(--gold-l));
  z-index: 60;
}

header.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  transition: .35s;
  backdrop-filter: saturate(140%) blur(8px);
}

/* `menu-open` is set while the mobile panel is showing: the panel is an opaque white
   surface under the header, so the header needs its light chrome even at scroll 0. */
header.nav.scrolled,header.nav.menu-open {
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 0 var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  transition: .35s;
}

header.nav.scrolled .brand,header.nav.menu-open .brand {
  color: var(--navy);
}

.crest {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--gold);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  flex: none;
}

.brand b {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
}

.brand span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .7;
  font-weight: 500;
}

nav.links {
  display: flex;
  align-items: center;
  gap: 4px;
}

nav.links a {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 8px;
  transition: .25s;
}

header.nav.scrolled nav.links a {
  color: var(--muted);
}

nav.links a:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
}

header.nav.scrolled nav.links a:hover {
  color: var(--navy);
  background: var(--mist);
}

nav.links a.active {
  color: var(--navy);
  background: var(--gold);
}

header.nav.scrolled nav.links a.active {
  color: var(--navy);
}

.toggle {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--gold);
  border: none;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: .25s;
  letter-spacing: .02em;
}

.toggle:hover {
  background: var(--gold-l);
}

.toggle.on {
  background: var(--navy);
  color: var(--gold);
}

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

}

/* hero */
.hero {
  /* `vh` on iOS Safari resolves against the *large* viewport (toolbars
     retracted), so the hero changes height as the toolbar collapses and its
     centred content slides with it — the visible "bounce" on load, and the
     reason the first line can end up under the fixed header. `svh` is the
     small viewport and stays constant through that transition. The `vh` line
     stays as the fallback for engines without the newer units. */
  min-height: 100vh;
  min-height: 100svh;
  /* Real padding rather than a nudge on the content: the header overlays the
     hero, and centring inside the padding box means content can never be
     pushed up underneath it however short the viewport gets. */
  padding-top: calc(var(--nav-h) + 16px + env(safe-area-inset-top));
  padding-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(105deg,rgba(10,34,64,.94) 0%,rgba(11,38,76,.82) 42%,rgba(10,34,64,.5) 100%),
  url('/assets/images/hero-background_compressed.webp') center/cover no-repeat;
  background-color: #0A2240;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  animation: float 16s ease-in-out infinite;
}

.blob.b1 {
  width: 440px;
  height: 440px;
  background: #1c4f97;
  top: -120px;
  right: -60px;
}

.blob.b2 {
  width: 360px;
  height: 360px;
  background: #9c7a2a;
  bottom: -120px;
  left: -80px;
  opacity: .32;
  animation-delay: -6s;
}

@keyframes float {
  0%,100% {
    transform: translate(0,0);
  }

  50% {
    transform: translate(28px,-34px);
  }

}

.hero .wrap {
  position: relative;
  z-index: 2;
  /* margin: -165px auto 0; */
}

@media(max-width:540px) {
  /* Lifts the composition above dead centre so the scroll cue has room —
     what `margin: -150px auto 0` on `.hero .wrap` used to do. (A negative
     top margin on a centred flex item moves it by half the margin, since it
     shrinks the item's margin box too, so that was a ~75px lift.) Expressed
     as bottom padding instead: same result, but it can only ever push
     content down away from the header, never up into it. The lift is
     smaller than the old one, which left as little as 23px of header
     clearance on a short viewport. */
  .hero {
    padding-bottom: calc(var(--nav-h) + 76px + env(safe-area-inset-bottom));
  }
}

.hero-ka {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
  opacity: 0;
  animation: rise .8s .1s forwards;
}

.ppp {
  font-family: var(--sans);
  font-weight: 800;
  color: #fff;
  font-size: clamp(48px,9.4vw,116px);
  line-height: .95;
  letter-spacing: -.04em;
}

.ppp span {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: rise .9s forwards;
}

.ppp .w1 {
  animation-delay: .25s;
}

.ppp .w2 {
  animation-delay: .45s;
}

.ppp .w3 {
  animation-delay: .65s;
}

.ppp .dot {
  color: var(--gold);
}

.reo {
  margin-top: 24px;
  font-family: 'Noto Serif',Georgia,serif;
  font-style: italic;
  font-optical-sizing: none;
  color: var(--sky);
  font-size: clamp(16px,2vw,21px);
  max-width: 560px;
  opacity: 0;
  animation: rise .9s .85s forwards;
}

.strap {
  margin-top: 18px;
  color: rgba(255,255,255,.78);
  font-size: 16px;
  letter-spacing: .01em;
  font-weight: 500;
  opacity: 0;
  animation: rise .9s 1s forwards;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }

}

.scrollcue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: 0;
  animation: scrollcue-rise 1s 1.4s forwards;
}

.scrollcue .ch {
  width: 18px;
  height: 18px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  animation: bob 1.8s infinite;
}

@keyframes scrollcue-rise {
  to {
    opacity: 1;
    transform: translateX(-50%);
  }

}

@keyframes bob {
  0%,100% {
    transform: rotate(45deg) translate(0,0);
  }

  50% {
    transform: rotate(45deg) translate(5px,5px);
  }

}

/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: .7s cubic-bezier(.2,.7,.2,1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* kawe cards */
.kawe-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
  margin-top: 48px;
}

.kcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
  position: relative;
  transition: .4s;
  overflow: hidden;
}

.kcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -28px rgba(10,34,64,.4);
  border-color: #cdd7e6;
}

.kcard-img {
  height: 150px;
  background-size: cover;
  background-position: center;
}

.kcard-body {
  padding: 24px 22px 28px;
}

.kcard h3 {
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 12px;
}

.kcard p.body {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
}

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

}

/* He Kawa Rangitāmiro — one box: three strands bound at the base by Te Tiriti (the base knot) */
.kawa-box {
  margin-top: 42px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 30px 70px -46px rgba(10,34,64,.45);
}

.kawa-box .kawe-grid {
  margin-top: 0;
}

.kawa-box .kcard {
  background: var(--cream);
  border-color: #eef1f6;
  box-shadow: none;
}

.kawa-box .kcard:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--gold);
}

.kawa-knot {
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border-top: 3px solid var(--gold);
  padding: 30px 34px;
  background: linear-gradient(135deg,#1c4488,#2a5ca1 58%,#1f4f93);
}

.kawa-knot:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(620px 300px at 86% 24%,rgba(210,165,66,.20),transparent 60%);
}

.kawa-knot>* {
  position: relative;
  z-index: 1;
}

.kawa-knot .tf-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-l);
  margin-bottom: 12px;
}

.kawa-knot .tf-statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px,2.6vw,28px);
  line-height: 1.34;
  color: #fff;
  max-width: 880px;
  letter-spacing: -.01em;
}

.kawa-knot .tf-note {
  display: block;
  margin-top: 14px;
  font-size: 11.5px;
  font-style: italic;
  color: rgba(255,255,255,.58);
}

/* outcomes */
.bg-cream {
  background: var(--cream);
}

.bg-mistsec {
  background: var(--mist);
  border-top: 1px solid var(--line);
}

.bg-hero {
  background: radial-gradient(1100px 700px at 78% 18%,#15356a 0%,transparent 60%),radial-gradient(900px 600px at 12% 88%,#123a6e 0,transparent 55%),linear-gradient(160deg,#0A2240 0%,#0c2a54 55%,#0A2240 100%);
  position: relative;
  overflow: hidden;
}

.bg-hero .eyebrow {
  color: var(--gold-l);
}

.bg-hero h2.title {
  color: #fff;
}

.bg-hero .lead {
  color: var(--sky);
}

.out-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
  margin-top: 48px;
}

.ocard {
  background: var(--paper);
  border-radius: 16px;
  padding: 0;
  border: 1px solid var(--line);
  transition: .4s;
  position: relative;
  overflow: hidden;
}

.ocard:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -28px rgba(10,34,64,.35);
}

.ocard-img {
  height: 132px;
  background-size: cover;
  background-position: center;
}

.ocard-body {
  padding: 22px 22px 26px;
}

.ocard .num {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--gold);
  font-weight: 500;
  line-height: 1;
}

.ocard h3 {
  margin: 16px 0 10px;
  font-size: 17.5px;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.25;
  min-height: 2.5em;
}

.ocard p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}

.ocard-note {
  font-style: italic;
  margin-top: 6px;
}

@media(max-width:920px) {
  .out-grid {
    grid-template-columns: repeat(2,1fr);
  }

}

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

  .ocard h3 {
    min-height: auto;
  }

}

/* pillars */
.bg-navy {
  background: linear-gradient(170deg,#1a4488,#205099);
}

.bg-navy .eyebrow {
  color: var(--gold-l);
}

.bg-navy h2.title {
  color: #fff;
}

.bg-navy .lead {
  color: var(--sky);
}

#pillars {
  background: linear-gradient(155deg,rgba(20,52,110,.86),rgba(13,44,86,.82) 55%,rgba(10,34,64,.91)),
  url('/assets/images/pillars-background_compressed.webp') center 38%/cover no-repeat;
  background-color: #0A2240;
}

.pill-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 14px;
  margin-top: 48px;
}

.pillar {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  transition: .35s;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.pillar:before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg,var(--gold),var(--gold-l));
}

.pillar:hover {
  border-color: var(--gold);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -28px rgba(10,34,64,.5);
}

.pillar .pk {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--gold);
  padding: 18px 18px 0;
}

.pillar h3 {
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.32;
  padding: 7px 18px 16px;
}

.shift {
  margin-top: auto;
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 6px 8px;
  min-height: 92px;
  opacity: 1;
}

@media(max-width:540px) {
  .shift {
    min-height: 50px;
  }

}

.shift .from,.shift .to {
  color: var(--navy);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
}

.shift .to {
  font-style: italic;
}

.shift .to-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shift .arrow {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--gold);
  align-self: self-start;
  margin-top: 2px;
}

.shift .arrow svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

@media(max-width:980px) {
  .pill-grid {
    grid-template-columns: repeat(2,1fr);
  }

}

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

}

/* enablers — field image as full background (navy overlay), glass chips */
#enablers {
  position: relative;
  overflow: hidden;
  /* fixed attachment ties the image's cover crop to the viewport rather
     than this section's own box, so the accordion expanding/collapsing
     the section's height can't shift or rescale the photo underneath it */
  background: linear-gradient(150deg,rgba(10,34,64,.9),rgba(11,38,76,.8) 55%,rgba(10,34,64,.92)),
  url('/assets/images/enablers-background_compressed.webp') center 42%/cover no-repeat fixed;
  background-color: #0A2240;
}

#enablers .eyebrow {
  color: var(--gold-l);
}

#enablers h2.title {
  color: #fff;
}

#enablers .lead {
  color: var(--sky);
}

/* values — carved marae panel as background (navy overlay) */
#values {
  background: linear-gradient(150deg,rgba(10,34,64,.9),rgba(11,38,76,.8) 55%,rgba(10,34,64,.92)),
  url('/assets/images/values-background_compressed.webp') center/cover no-repeat;
  background-color: #0A2240;
}

.val-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
  margin-top: 48px;
}

.vcard {
  border-radius: 18px;
  padding: 30px 26px;
  background: var(--cream);
  border: 1px solid var(--line);
  transition: .4s;
}

.vcard:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 50px -30px rgba(10,34,64,.4);
}

.vcard .reoword {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--navy);
}

.vcard .eng {
  display: block;
  margin: 6px 0 16px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.vcard p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.58;
}

.vcard .bar {
  width: 40px;
  height: 4px;
  border-radius: 3px;
  background: var(--gold);
  margin-top: 18px;
}

.val-strap {
  margin-top: 44px;
  text-align: left;
  color: var(--sky);
  font-size: clamp(16px,2vw,19px);
  letter-spacing: .01em;
}

@media(max-width:920px) {
  .val-grid {
    grid-template-columns: repeat(2,1fr);
  }

}

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

}

/* promise */
.promise {
  background: #1c4488;
  color: #fff;
  text-align: center;
}

.promise p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px,3.2vw,34px);
  line-height: 1.36;
  max-width: 920px;
  margin: 0 auto;
}

.promise .moko,.moko {
  color: var(--gold);
}

footer {
  background: #071a33;
  color: rgba(255,255,255,.62);
  padding: 46px 0 86px;
  font-size: 13px;
}

footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

footer .brand {
  color: #fff;
  display: inline-flex;
}

footer .brand-logo {
  height: 48px;
  width: auto;
  display: block;
}

footer .footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

footer .footer-download-link {
  color: #fff;
  font-size: 12.5px;
  text-decoration: underline;
}

.js footer .footer-download-link {
  display: none;
}

footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 16px;
}

footer .footer-links a {
  color: rgba(255,255,255,.82);
  font-size: 12.5px;
  text-decoration: underline;
}

footer .footer-links a:hover {
  color: var(--gold);
}

footer .footer-copyright {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 12.5px;
  text-align: right;
}

footer .footer-copyright span {
  display: inline-block;
  white-space: nowrap;
}

/* skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--navy);
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  top: 0;
}

/* visible focus indicator */
a:focus-visible,button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* brand logo (header) */
.brand {
  display: flex;
  align-items: center;
}

.brand-logo {
  height: 42px;
  width: auto;
  display: block;
}

.brand-logo-colour {
  display: none;
}

header.nav.scrolled .brand-logo-reversed,header.nav.menu-open .brand-logo-reversed {
  display: none;
}

header.nav.scrolled .brand-logo-colour,header.nav.menu-open .brand-logo-colour {
  display: block;
}

/* mobile navigation menu */
.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle-icon,.nav-toggle-icon:before,.nav-toggle-icon:after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: .25s;
  position: relative;
}

header.nav.scrolled .nav-toggle-icon,header.nav.scrolled .nav-toggle-icon:before,header.nav.scrolled .nav-toggle-icon:after,
header.nav.menu-open .nav-toggle-icon,header.nav.menu-open .nav-toggle-icon:before,header.nav.menu-open .nav-toggle-icon:after {
  background: var(--navy);
}

.nav-toggle-icon:before {
  position: absolute;
  top: -7px;
}

.nav-toggle-icon:after {
  position: absolute;
  top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon:before {
  transform: rotate(45deg);
  top: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon:after {
  transform: rotate(-45deg);
  top: 0;
}

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 49;
  background: #fff;
  box-shadow: 0 8px 24px -12px rgba(10,34,64,.35);
  padding: 88px 28px 24px;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav:not([hidden]) {
  display: flex;
}

.mobile-nav a {
  color: var(--navy);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}

.mobile-nav a.active {
  color: var(--navy);
  background: var(--gold);
  border-radius: 8px;
  padding-left: 12px;
  padding-right: 12px;
}

@media(max-width:880px) {
  .nav-toggle {
    display: flex;
  }

}

/* card images (replacing CSS background-image for accessible <img> elements) */
.kcard-img img,.ocard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* visually-hidden but accessible text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.en-content-pending {
  font-style: italic;
  color: rgba(169,203,240,.7);
}

/* enablers: accordion */
.en-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 48px;
}

@media(min-width:821px) {
  .en-accordion {
    max-width: 760px;
    margin: 48px auto 0;
  }
}

.en-accordion-heading {
  margin: 0;
  font-weight: inherit;
}

.en-accordion-item {
  overflow: hidden;
  background: rgba(4,21,43,.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 12px;
  transition: border-color .25s,background .25s;
}

.en-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  background: transparent;
  border: none;
  padding: 14px 16px;
  cursor: pointer;
  transition: .25s;
  font: inherit;
}

.en-accordion-item:has(.en-accordion-trigger:hover),
.en-accordion-item:has(.en-accordion-trigger:focus-visible) {
  border-color: var(--gold);
}

.en-accordion-trigger .dot {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  /* background: rgba(210,165,66,.22); */
  color: var(--gold-l);
  display: grid;
  place-items: center;
  flex: none;
}

.en-accordion-trigger .dot svg {
  width: 18px;
  height: 18px;
}

.en-accordion-label {
  font-size: 16.5px;
  font-weight: 500;
  color: #fff;
  line-height: 1.35;
}

.en-accordion-chev {
  margin-left: auto;
  color: rgba(255,255,255,.6);
  transition: transform .2s;
  flex: none;
  display: flex;
}

.en-accordion-chev svg {
  width: 18px;
  height: 18px;
}

.en-accordion-item:has(.en-accordion-trigger[aria-expanded="true"]) {
  border-color: var(--gold);
}

.en-accordion-trigger[aria-expanded="true"] .en-accordion-chev {
  transform: rotate(180deg);
  color: var(--gold-l);
}

.en-accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}

.en-accordion-panel-inner {
  padding: 18px 20px;
  border-top: 1px solid rgba(255,255,255,.18);
}

.en-accordion-panel-inner p {
  color: var(--sky);
  font-size: 14.5px;
  line-height: 1.7;
}

.en-accordion-panel-inner p.en-accordion-tagline {
  color: var(--gold-l);
  font-weight: 600;
  margin-bottom: 8px;
}

@media(prefers-reduced-motion:reduce) {
  .en-accordion-panel {
    transition: none;
  }

  .en-accordion-chev {
    transition: none;
  }

}

/* strategy download widget */
.strategy-download {
  position: relative;
  display: inline-block;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(20px);
  animation: rise .6s 2s forwards;
}

.strategy-download-trigger {
  min-height: 48px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  border: none;
  box-shadow: 0 10px 24px -10px rgba(10,34,64,.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  transition: border-radius .25s ease,padding .25s ease,gap .25s ease;
}

.strategy-download-icon svg {
  width: 24px;
  height: 24px;
}

.strategy-download.is-floating {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 65;
  margin-top: 0;
  padding-bottom: env(safe-area-inset-bottom);
  opacity: 1;
  transform: none;
  animation: none;
  transition: bottom .25s ease;
}

.strategy-download.has-entered {
  opacity: 1;
  transform: none;
  animation: none;
}

.strategy-download.is-floating .strategy-download-trigger {
  width: 48px;
  padding: 12px;
  border-radius: 50%;
  gap: 0;
}

.strategy-download.is-floating .strategy-download-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width .25s ease,opacity .2s ease;
}

.strategy-download.is-footer-expanded {
  display: flex;
  margin-top: 0;
  line-height: 0;
  opacity: 1;
  transform: none;
  animation: none;
}

footer .wrap:has(> .strategy-download.is-footer-expanded) {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

footer .wrap:has(> .strategy-download.is-footer-expanded) .brand {
  grid-column: 1;
  grid-row: 1;
}

footer .wrap:has(> .strategy-download.is-footer-expanded) .footer-meta {
  grid-column: 3;
  grid-row: 1;
}

footer .wrap > .strategy-download.is-footer-expanded {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  margin-top: 18px;
}

.strategy-download.is-footer-expanded .strategy-download-trigger {
  width: auto;
  padding: 12px 18px;
  border-radius: 999px;
  gap: 10px;
}

.strategy-download.is-footer-expanded .strategy-download-label {
  max-width: 250px;
  opacity: 1;
}

.strategy-download-panel {
  position: absolute;
  left: 0;
  bottom: 60px;
  line-height: 1.6;
  width: min(320px,calc(100vw - 40px));
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 44px -16px rgba(10,34,64,.4);
  padding: 20px 20px 22px;
  color: var(--text);
}

.strategy-download-panel h2 {
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 8px;
}

.strategy-download-panel p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

.strategy-download-link {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
}

.strategy-download-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

@media(max-width:480px) {
  .strategy-download.is-floating {
    left: 12px;
    bottom: 12px;
  }

  footer .wrap:has(> .strategy-download.is-footer-expanded) {
    grid-template-columns: 1fr;
  }

  footer .wrap:has(> .strategy-download.is-footer-expanded) .brand,
  footer .wrap:has(> .strategy-download.is-footer-expanded) .footer-meta,
  footer .wrap > .strategy-download.is-footer-expanded {
    grid-column: 1;
  }

  footer .wrap:has(> .strategy-download.is-footer-expanded) .brand {
    grid-row: 1;
  }

  footer .wrap:has(> .strategy-download.is-footer-expanded) .footer-meta {
    grid-row: 3;
    justify-self: end;
    margin-top: 18px;
  }

  footer .wrap > .strategy-download.is-footer-expanded {
    grid-row: 2;
    justify-self: center;
  }

}

/* reduced motion */
@media(prefers-reduced-motion:reduce) {
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .blob {
    animation: none;
  }

  .ppp span,.hero-ka,.reo,.strap,.strategy-download {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .scrollcue {
    animation: none;
    opacity: 1;
    transform: translateX(-50%);
  }

  .scrollcue .ch {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  .strategy-download {
    transition: none;
  }

  footer {
    transition: none;
  }

}