/* ==========================================================================
   DPS Dwarka Expressway admissions landing page
   One commented block per section, in page order. Section tickets fill in
   their own block only.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens (Figma variables, frame 14810:10477)
   ========================================================================== */
:root {
  /* Brand colours */
  --brand-1: #0a3f2c;          /* Brand Color 1/2: deep green */
  --brand-2: #93c73f;          /* Colors/Brand color 2: leaf green */
  --brand-3: #fec300;          /* Brand Color 3: yellow */
  --brand-5: #021114;          /* Brand Color 5: near black */

  /* Backgrounds */
  --bg-light-1: #dfefc5;
  --bg-light-2: #ffffff;
  --bg-dark-1: #012521;
  --bg-dark-2: #fee256;
  --bg-dark-3: #5a8735;

  /* Text */
  --text-dark-1: #000000;
  --text-dark-2: #3e3e3e;
  --text-light-1: #f2ede1;
  --text-light-2: #ffffff;

  /* Hover shades (~8% darker, none drawn in Figma) */
  --brand-1-hover: #083324;
  --brand-3-hover: #e9b300;

  /* Fonts */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* One proportional unit: Figma px x --u. It is 1px at 1920 and up, and
     below 1024, where the tablet sizes take over; from 1024 to 1919 the
     1920 frame scales with the viewport (0.75px at 1440). In that band,
     body copy and eyebrows never drop below 16px (Figma's 14px small
     print stays 14). */
  --u: 1px;

  /* Phone unit, defined once. 1px from 390 wide up, and 100vw/390 below
     that, floored at 0.82px (a 320 phone). Phone rules use N * var(--m). */
  --m: clamp(0.82px, 100vw / 390, 1px);

  /* Type scale (Figma px) */
  --fs-head: calc(72 * var(--u));            /* Head: section titles */
  --fs-h1: calc(65 * var(--u));              /* L-H1 / M-H1 */
  --fs-initiative: calc(44 * var(--u));
  --fs-h3: calc(35 * var(--u));              /* L-H3 / M-H3 */
  --fs-sub-head: calc(28 * var(--u));        /* L-Sub-Head */
  --fs-sub-h2: max(16px, 24 * var(--u));     /* S/M-SUB-H2 */
  --fs-button-1: max(16px, 22 * var(--u));
  --fs-sub-text: max(16px, 20 * var(--u));
  --fs-body-1: max(16px, 18 * var(--u));
  --fs-button-2: 16px;
  --fs-body-2: 14px;
  --fs-eyebrow: max(16px, 18 * var(--u));    /* Sub-head */

  /* Letter spacing: Figma -0.5 = -0.5%, Sub-head 20 = 20% */
  --ls-tight: -0.005em;
  --ls-eyebrow: 0.2em;

  /* Spacing */
  --space-4: calc(4 * var(--u));
  --space-8: calc(8 * var(--u));
  --space-16: calc(16 * var(--u));
  --space-24: calc(24 * var(--u));
  --space-32: calc(32 * var(--u));
  --space-40: calc(40 * var(--u));
  --space-48: calc(48 * var(--u));
  --space-56: calc(56 * var(--u));
  --space-64: calc(64 * var(--u));
  --space-80: calc(80 * var(--u));
  --space-96: calc(96 * var(--u));
  --space-128: calc(128 * var(--u));

  /* Radii */
  --radius-4: calc(4 * var(--u));
  --radius-8: calc(8 * var(--u));
  --radius-16: calc(16 * var(--u));
  --radius-24: calc(24 * var(--u));
  --radius-32: calc(32 * var(--u));

  /* Layout: 96px side padding at 1920 -> 1728 content width.
     --section-gap is the space above a section (140px in the 1920 frame). */
  --page-max: 1920px;
  --content-max: calc(1728 * var(--u));
  --gutter: calc(96 * var(--u));
  --section-space: calc(128 * var(--u));
  --section-gap: calc(140 * var(--u));

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Laptop, 1024-1919: the 1920 frame scaled by the viewport width. Section
   gaps shrink with it but never beyond 12% of the screen height. */
@media (min-width: 1024px) and (max-width: 1919.98px) {
  :root {
    --u: min(1px, 100vw / 1920);
    --section-gap: clamp(64px, 140 * var(--u), 12vh);
  }
}

/* Tablet keeps fixed sizes. Columns stack below 1024. The phone band
   (below 576) replaces the gutter, the section gap and the shared type. */
@media (max-width: 1023.98px) {
  :root {
    --gutter: 32px;
    --section-space: clamp(48px, 6vh, 72px);
    --section-gap: clamp(40px, 5vh, 64px);
    --fs-head: clamp(42px, 3.75vw, 56px);
    --fs-h1: clamp(40px, 3.385vw, 52px);
    --fs-initiative: clamp(30px, 2.292vw, 36px);
    --fs-h3: clamp(26px, 1.823vw, 30px);
    --fs-sub-head: clamp(22px, 1.458vw, 24px);
    --fs-sub-h2: clamp(18px, 1.25vw, 20px);
    --fs-button-1: clamp(16px, 1.146vw, 18px);
    --fs-sub-text: 16px;
    --fs-body-1: 16px;
    --fs-eyebrow: 16px;
  }
}

/* Phone band: the 390 frame. Gutters, the section gap and the shared type
   scale are Figma px times --m, so they hold from 390 to 575 and shrink
   toward 320. Widths stay fluid (full width minus the gutter). */
@media (max-width: 575.98px) {
  :root {
    --gutter: calc(24 * var(--m));
    --section-space: calc(56 * var(--m));
    --section-gap: calc(64 * var(--m));
    --fs-head: calc(35 * var(--m));       /* section title: Cormorant Bold 35 / 1.2 */
    --fs-h1: calc(34 * var(--m));
    --fs-initiative: calc(28 * var(--m));
    --fs-h3: calc(24 * var(--m));
    --fs-sub-head: calc(22 * var(--m));
    --fs-sub-h2: calc(18 * var(--m));
    --fs-button-1: calc(16 * var(--m));
    --fs-sub-text: calc(16 * var(--m));
    --fs-body-1: calc(14 * var(--m));     /* body: Poppins Light 14 / 1.5 */
    --fs-eyebrow: calc(12 * var(--m));    /* eyebrow: Poppins Medium 12 / 1.3, tracking 20% */
  }

  body {
    line-height: 1.5;
  }
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-light-2);
  color: var(--text-dark-1);
  font-family: var(--font-body);
  font-size: var(--fs-body-1);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
}

p, ul, ol, address {
  margin: 0;
}

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

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

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

/* Page container: 1728 content + 96 side padding at 1920 */
.site-container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   3. Shared components
   ========================================================================== */

/* Eyebrow / subtitle (Figma "Sub-head") */
.eyebrow {
  display: block;
  color: var(--brand-3);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* Section title (Figma "Head", Cormorant Bold 72) */
.section-title {
  color: var(--text-dark-1);
  font-family: var(--font-display);
  font-size: var(--fs-head);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}

.section-title--light {
  color: var(--text-light-2);
}

/* Eyebrow + title stack */
.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.section-header--center {
  align-items: center;
  text-align: center;
}

/* Lead paragraph (Figma "S-Button-1": Poppins Regular 22 / 1.5); sections set the colour */
.text-lead {
  margin: 0;
  font-size: var(--fs-button-1);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
}

/* Buttons (Figma "BTN") */
.btn-dps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-4);
  font-family: var(--font-body);
  font-size: var(--fs-button-1);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

/* Green solid: 272 x 67 in Learning Journey (14813:12748); padding absorbs the 1px border */
.btn-dps--green {
  padding: calc(17 * var(--u)) calc(23 * var(--u));
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: var(--text-light-2);
  line-height: 1.4;
}

.btn-dps--green:hover,
.btn-dps--green:focus-visible {
  background: var(--brand-1-hover);
  border-color: var(--brand-1-hover);
  color: var(--text-light-2);
}

/* Yellow solid: 312 x 85 in Discover, Events, CTA (14810:10929); padding absorbs the 1px border */
.btn-dps--yellow {
  padding: calc(27 * var(--u)) calc(43 * var(--u));
  background: var(--brand-3);
  border-color: var(--brand-3);
  color: var(--brand-1);
  line-height: 1.3;
}

.btn-dps--yellow:hover,
.btn-dps--yellow:focus-visible {
  background: var(--brand-3-hover);
  border-color: var(--brand-3-hover);
  color: var(--brand-1);
}

/* White solid: not drawn as a standalone BTN in the frame; same metrics as
   yellow. Adjust in the section ticket if its Figma node differs. */
.btn-dps--white {
  padding: calc(27 * var(--u)) calc(43 * var(--u));
  background: var(--bg-light-2);
  border-color: var(--bg-light-2);
  color: var(--brand-1);
  line-height: 1.3;
}

.btn-dps--white:hover,
.btn-dps--white:focus-visible {
  background: #ebebeb;
  border-color: #ebebeb;
  color: var(--brand-1);
}

@media (max-width: 1023.98px) {
  .btn-dps--green {
    padding: 14px 20px;
  }

  .btn-dps--yellow,
  .btn-dps--white {
    padding: 16px 28px;
  }
}

@media (max-width: 575.98px) {
  .btn-dps--yellow,
  .btn-dps--white {
    padding: 16px 24px;
  }

  /* Apply CTA, 390 frame: Poppins Medium 18 / 1.4, padding 18 / 24, radius 4.
     The 1px border is absorbed so the box stays about 231 x 61. */
  .js-apply {
    padding: calc(17 * var(--m)) calc(23 * var(--m));
    border-radius: calc(4 * var(--m));
    font-size: calc(18 * var(--m));
    line-height: 1.4;
  }
}

/* ==========================================================================
   4. Announcement bar (#announcement, ticket 02)
   ========================================================================== */
.section-announcement {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding-block: 10px;
  /* Figma gradient stops: brand-1, #1aa573 (not a variable), brand-3 */
  background: linear-gradient(90deg, var(--brand-1) 0%, #1aa573 50%, var(--brand-3) 100%);
  color: var(--text-light-2);
}

.announcement__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-16);
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-2);
  font-weight: 500;
  line-height: 1.5;
}

.announcement__list li {
  padding-bottom: 3px;
  white-space: nowrap;
}

/* Register link: 1px white underline, pb 1. 14px on desktop (91×23); 12px below 1024, like the other items. */
.announcement__register {
  display: inline-block;
  padding-bottom: 1px;
  border-bottom: 1px solid currentColor;
  line-height: 1.5;
}

/* Below 1024 the bar follows the phone frame: stacked, left-aligned, 24 gutter, 21px pitch. */
@media (max-width: 1023.98px) {
  .section-announcement .site-container {
    padding-inline: calc(24 * var(--m));
  }

  .announcement__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-size: calc(12 * var(--m));
    line-height: 1.5;
    text-align: left;
  }

  .announcement__list li {
    padding-bottom: calc(3 * var(--m));
  }
}

/* ==========================================================================
   5. Hero + enquiry form (#hero, ticket 03, desktop 14810:11305, phone 14934:10152)
   ========================================================================== */
.section-hero {
  --hero-title: calc(102 * var(--u));
  --hero-lead: max(16px, 26 * var(--u));
  --field-bg: #f3f3f3;
  --field-border: rgba(0, 0, 0, 0.1);
  --field-placeholder: #a6a6a6;
  --field-error: #c62828;

  position: relative;
  display: flex;
  flex-direction: column;
  /* Centres the 874 column in the 1097 frame: (1097 - 40 - 56 - 874) / 2.
     A taller viewport grows the row under the logo; the logo stays put. */
  --hero-frame-offset: calc(63.5 * var(--u));
  justify-content: flex-start;
  min-height: max(calc(1097 * var(--u)), calc(100dvh - 54px));
  padding-top: calc(40 * var(--u));
  padding-bottom: calc(56 * var(--u));
  overflow: hidden;
  /* The campus photo holds the place until the video paints over it, and
     stays when the clip is absent or motion is reduced. The overlay dims both. */
  background: var(--bg-dark-1) url("../assets/img/hero-poster.jpg") center / cover no-repeat;
  background-image: image-set(url("../assets/img/hero-poster.webp") type("image/webp"), url("../assets/img/hero-poster.jpg") type("image/jpeg"));
  color: var(--text-light-2);
  isolation: isolate;
}

@media (max-width: 1023.98px) {
  .section-hero {
    background-image: url("../assets/img/hero-poster-1000.jpg");
    background-image: image-set(url("../assets/img/hero-poster-1000.webp") type("image/webp"), url("../assets/img/hero-poster-1000.jpg") type("image/jpeg"));
  }
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No src yet: don't paint an empty video over the dark background. */
.hero__video:not([src]) {
  display: none;
}

/* Figma: 70% black solid over the video */
.section-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.7);
}

.hero__inner {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  margin-top: var(--hero-frame-offset);
  margin-bottom: var(--hero-frame-offset);
  min-height: 0;
}

/* Logo on top (90 of the 874 column). The row below is the space under it. */
.hero__row {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-48);
  min-height: 0;
}

.hero__content {
  display: flex;
  flex: 0 1 calc(985 * var(--u));
  flex-direction: column;
  align-self: center;
  justify-content: center;
  gap: var(--space-8);
  min-width: 0;
}

/* Phones only. Every other band hides it; .js-apply still does the scroll. */
.hero__apply {
  display: none;
}

.hero__logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: flex-start;
  align-items: center;
}

.hero__logo img {
  width: calc(418 * var(--u));
  height: auto;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--hero-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}

.hero__lead {
  font-size: var(--hero-lead);
  font-weight: 300;
  line-height: 1.4;
}

.hero__form-wrap {
  display: flex;
  flex: 0 0 calc(612 * var(--u));
  align-self: flex-end;
  min-width: 0;
}

/* Enquiry card (node 14810:11317) */
.enquiry-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
  padding: var(--space-32);
  border-radius: var(--radius-8);
  background: var(--bg-light-2);
  color: var(--text-dark-1);
}

.enquiry-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.enquiry-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.enquiry-card__intro {
  color: var(--text-dark-2);
  font-size: var(--fs-body-2);
  font-weight: 300;
  line-height: 1.4;
}

.enquiry-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.enquiry-card__fields {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
}

.enquiry-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.enquiry-field__label {
  color: var(--brand-5);
  font-size: var(--fs-body-1);
  font-weight: 300;
  line-height: 1.4;
}

.enquiry-field__control {
  width: 100%;
  padding: calc(15 * var(--u)) var(--space-16);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-4);
  background-color: var(--field-bg);
  color: var(--brand-5);
  font-family: var(--font-body);
  font-size: var(--fs-button-2);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  transition: border-color 0.2s var(--ease);
}

.enquiry-field__control::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
}

/* Keeps the site-wide :focus-visible outline; the border also darkens */
.enquiry-field__control:focus {
  border-color: var(--brand-1);
}

.enquiry-field__control--select {
  padding-right: calc(54 * var(--u));
  background-image: url("../assets/icons/chevron-down.svg");
  background-position: right var(--space-16) center;
  background-repeat: no-repeat;
  background-size: calc(22 * var(--u)) calc(22 * var(--u));
  cursor: pointer;
  appearance: none;
}

/* Empty select shows its placeholder colour */
.enquiry-field__control--select:invalid {
  color: var(--field-placeholder);
}

.enquiry-field__control--select option {
  color: var(--brand-5);
}

/* Inline errors (not drawn in Figma) */
.enquiry-field__error {
  display: none;
  color: var(--field-error);
  font-size: var(--fs-body-2);
  font-weight: 400;
  line-height: 1.4;
}

.enquiry-field.is-invalid .enquiry-field__control {
  border-color: var(--field-error);
}

.enquiry-field.is-invalid .enquiry-field__error {
  display: block;
}

/* Submit failure message; ticket 08 fills it */
.enquiry-card__status {
  display: none;
  color: var(--field-error);
  font-size: var(--fs-body-2);
  line-height: 1.4;
}

.enquiry-card__status:not(:empty) {
  display: block;
  margin-bottom: calc(-1 * var(--space-16));
}

/* Figma: full-width green BTN, 18px label, 61.2px tall (padding absorbs the 1px border) */
.enquiry-card__submit {
  width: 100%;
  padding-block: calc(17 * var(--u));
  font-size: var(--fs-body-1);
}

.enquiry-card__submit:disabled {
  cursor: progress;
  opacity: 0.72;
}

/* Tablet: the stacked layout, centred in the space under the logo.
   No Apply button and no form overlap. */
@media (max-width: 1023.98px) {
  .section-hero {
    --hero-title: clamp(36px, 6vw, 48px);
    --hero-lead: 18px;
    --hero-frame-offset: 0px;

    /* The stacked bar is 106, not the desktop 54, so the hero fills the space under it. */
    min-height: calc(100dvh - 106px);
    padding-top: var(--space-24);
    padding-bottom: var(--space-48);
    overflow: visible;
  }

  .hero__inner {
    flex: 1 1 auto;
    gap: var(--space-32);
    margin-top: 0;
    margin-bottom: 0;
  }

  .hero__row {
    flex-direction: column;
    align-items: stretch;
    justify-content: safe center;
    gap: var(--space-32);
  }

  .hero__content {
    flex: none;
    align-self: stretch;
    width: 100%;
  }

  .hero__logo img {
    width: clamp(220px, 20vw, 300px);
  }

  .hero__form-wrap {
    position: static;
    flex: none;
    align-self: center;
    width: 100%;
    max-width: 612px;
  }

  .enquiry-card {
    gap: var(--space-16);
    padding: var(--space-24);
  }

  .enquiry-card__body,
  .enquiry-card__fields {
    gap: 12px;
  }

  .enquiry-field {
    gap: var(--space-4);
  }

  .enquiry-field__control {
    padding-block: 10px;
  }

  .enquiry-card__submit {
    padding-block: 12px;
  }
}

/* Phone: the 390 frame. The card overlaps the hero by 90 and the page below is white. */
@media (max-width: 575.98px) {
  .section-hero {
    --hero-title: calc(44 * var(--m));
    --hero-lead: calc(14 * var(--m));

    height: calc(764 * var(--m));
    min-height: 0;
    /* Measured card is 668; minus the 90 overlap, so Legacy clears the card. */
    margin-bottom: calc(578 * var(--m));
    padding: calc(56 * var(--m)) calc(24 * var(--m)) calc(96 * var(--m));
  }

  .section-hero .site-container {
    max-width: none;
    padding-inline: 0;
  }

  .hero__inner {
    gap: calc(40 * var(--m));
    height: 100%;
  }

  .hero__row {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
  }

  .hero__content {
    gap: calc(24 * var(--m));
  }

  .hero__text {
    gap: calc(8 * var(--m));
  }

  .hero__logo img {
    width: calc(250.8 * var(--m));
  }

  .hero__lead {
    font-size: var(--hero-lead);
    line-height: 1.5;
  }

  .hero__apply {
    display: inline-flex;
    align-self: flex-start;
  }

  .hero__form-wrap {
    position: absolute;
    top: calc((764 - 90) * var(--m));
    right: var(--gutter);
    left: var(--gutter);
    width: auto;
    max-width: none;
  }

  .enquiry-card {
    gap: calc(32 * var(--m));
    padding: calc(24 * var(--m));
    border: 1px solid #e9e9e9;
    border-radius: calc(8 * var(--m));
  }

  .enquiry-card__header {
    gap: calc(8 * var(--m));
  }

  .enquiry-card__intro {
    font-size: calc(12 * var(--m));
    font-weight: 300;
    line-height: 1.4;
  }

  .enquiry-card__body {
    gap: calc(24 * var(--m));
  }

  .enquiry-card__fields {
    gap: calc(16 * var(--m));
  }

  .enquiry-field {
    gap: calc(4 * var(--m));
  }

  .enquiry-field__label {
    font-size: calc(16 * var(--m));
    line-height: 1.5;
  }

  .enquiry-field__control {
    padding: calc(16 * var(--m));
    font-size: calc(14 * var(--m));
    line-height: 1.5;
  }

  .enquiry-field__control--select {
    padding-right: calc(40 * var(--m));
    background-size: calc(16 * var(--m)) calc(16 * var(--m));
  }

  .enquiry-card__submit {
    padding: calc(17 * var(--m)) calc(23 * var(--m));
    font-size: calc(18 * var(--m));
    line-height: 1.4;
  }
}

/* ==========================================================================
   6. A Legacy That Connects Us (#legacy, ticket 03)
   ========================================================================== */
/* Figma 14810:10502: 140px below the hero, arched photo + copy, 80px apart */
.section-legacy {
  padding-top: var(--section-gap);
}

.legacy__inner {
  display: flex;
  align-items: center;
  gap: var(--space-80);
}

/* 645.84 x 839.99 at 1920. Sizes inside are cqw of this width so the
   signpost labels stay on their signs at any width. */
.legacy__media {
  position: relative;
  flex: 0 0 37.375%;           /* 645.84 / 1728 */
  margin: 0;
  container-type: inline-size;
  aspect-ratio: 645.84 / 839.99;
}

/* The foot is 2.118% of this photo's width (13.68 at 1920, 10.26 at 1440,
   7.24 on the 390 frame). cqw on the figure itself uses the viewport, so
   the radius sits on the child, which queries this container. */
.legacy__frame {
  position: absolute;
  inset: 0;
  border-radius: 50cqw 50cqw 2.118cqw 2.118cqw;
  overflow: hidden;
}

.legacy__media picture,
.legacy__img {
  width: 100%;
  height: 100%;
}

/* Figma crops the photo to its bottom 840px */
.legacy__img {
  object-fit: cover;
  object-position: 50% 100%;
}

/* Figma: Poppins Bold 23.93, #194c3a (not a variable), slightly rotated */
.legacy__sign {
  position: absolute;
  color: #194c3a;
  font-family: var(--font-body);
  font-size: 3.706cqw;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  pointer-events: none;
}

.legacy__sign--102 {
  left: 24.12%;
  top: 33.96%;
  transform: rotate(0.92deg);
}

.legacy__sign--103 {
  left: 59.92%;
  top: 42.12%;
  transform: rotate(-0.53deg);
}

.legacy__content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-48);
  min-width: 0;
}

/* On white, Figma uses the darker gold "BG Dark 1" #cda00c for the eyebrow */
.section-legacy .eyebrow {
  color: #cda00c;
}

/* L-H1: 65 / 1.1 */
.legacy__title {
  font-size: var(--fs-h1);
  line-height: 1.1;
}

/* S-Button-1: Poppins Regular 22 / 1.5 */
.legacy__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  color: var(--text-dark-2);
  font-size: var(--fs-button-1);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
}

/* Tablet and down: photo above the copy */
@media (max-width: 1023.98px) {
  .legacy__content {
    gap: var(--space-24);
  }

  .legacy__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
  }

  .legacy__media {
    flex: none;
    width: min(100%, 480px);
    max-width: 480px;
    margin-inline: auto;
  }
}

@media (max-width: 575.98px) {
  /* 390 frame: photo fills the 24 gutter, gaps 40 / 16, title 44 / 1.1. */
  .legacy__inner {
    gap: calc(40 * var(--m));
  }

  .legacy__content {
    gap: calc(16 * var(--m));
  }

  .legacy__media {
    width: 100%;
    max-width: none;
  }

  .legacy__title {
    font-size: calc(44 * var(--m));
    line-height: 1.1;
  }

  .legacy__body {
    gap: calc(16 * var(--m));
    font-size: calc(14 * var(--m));
    font-weight: 300;
    line-height: 1.5;
  }
}

/* ==========================================================================
   7. Board selector (#boards, ticket 03)
   ========================================================================== */
/* Figma 14810:10515 (CBSE active) and 14812:12698 (Cambridge active).
   140px below Legacy; the info panel overhangs the rows by up to 90px above
   and below, so .boards keeps a 90px margin for it. */
.section-boards {
  padding-top: var(--section-gap);
}

.boards {
  --board-ease: 0.25s var(--ease);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-block: calc(90 * var(--u));
}

/* Row: 40 / 64 padding in Figma, including a 1px border */
.board-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: calc(39 * var(--u)) calc(63 * var(--u));
  border: 1px solid var(--bg-light-1);
  border-radius: var(--radius-8);
  background: var(--bg-light-2);
  color: var(--bg-dark-1);
  transition: background-color var(--board-ease), border-color var(--board-ease), color var(--board-ease);
}

.board-row:hover,
.board-row:focus-visible {
  color: inherit;
}

.board-row--cbse.is-active {
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: var(--text-light-2);
}

/* Cambridge purple is not a Figma variable */
.board-row--cambridge.is-active {
  background: #681fb1;
  border-color: var(--brand-1);
  color: var(--text-light-2);
}

.board-row__brand {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  min-width: 0;
}

.board-row__logo {
  display: flex;
  flex: none;
  justify-content: center;
  width: calc(84 * var(--u));
}

.board-row__logo img {
  width: calc(73 * var(--u));
  height: calc(82 * var(--u));
  object-fit: cover;
}

/* Cormorant Bold 92 */
.board-row__name {
  font-family: var(--font-display);
  font-size: calc(92 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Inactive: 52px arrow. Active: 60px circle, arrow turned 135deg. */
.board-row__icon {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
}

.board-row__arrow {
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  transition: opacity var(--board-ease);
}

.board-row__badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--board-ease), transform var(--board-ease);
}

.board-row__badge img {
  width: calc(18.7532 * var(--u));
  height: calc(15.7548 * var(--u));
  transform: rotate(135deg);
}

.board-row--cbse .board-row__badge {
  background: var(--bg-dark-3);
}

.board-row--cambridge .board-row__badge {
  background: var(--brand-3);
}

.board-row.is-active .board-row__arrow {
  opacity: 0;
}

.board-row.is-active .board-row__badge {
  opacity: 1;
  transform: none;
}

/* Info panel: floats over the rows, centred on Figma's offsets */
.board-panel {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-40);
  border-radius: var(--radius-8);
  color: var(--text-dark-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-50% + 12 * var(--u)));
  transition: opacity var(--board-ease), transform var(--board-ease), visibility 0s linear 0.25s;
}

.board-panel:hover,
.board-panel:focus-visible {
  color: var(--text-dark-2);
}

.board-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  transition: opacity var(--board-ease), transform var(--board-ease), visibility 0s;
}

.board-panel--cbse {
  top: calc(50% - 37.61 * var(--u));
  left: 53.067%;               /* 917 / 1728 */
  width: 35.243%;              /* 609 / 1728 */
  background: var(--bg-light-1);
}

/* Cambridge cream #fff9e5 is not a Figma variable */
.board-panel--cambridge {
  top: calc(50% + 36 * var(--u));
  left: 51.145%;               /* 883.78 / 1728 */
  width: 36.227%;              /* 626 / 1728 */
  background: #fff9e5;
}

.board-panel picture {
  display: block;
}

.board-panel__img {
  width: 100%;
  aspect-ratio: 529 / 300;
  border-radius: var(--radius-8) var(--radius-8) 0 0;
  object-fit: cover;
}

.board-panel--cambridge .board-panel__img {
  aspect-ratio: 546 / 300;
}

.board-panel__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* L-H3: Cormorant Bold 35 / 1.2 */
.board-panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}

.board-panel--cbse .board-panel__title {
  color: var(--brand-1);
}

/* Majority of the frames draw this title in brand green (inconsistency 2). */
.board-panel--cambridge .board-panel__title {
  color: var(--brand-1);
}

/* sub text: Poppins Regular 20 / 1.5 */
.board-panel__desc {
  font-size: var(--fs-sub-text);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
}

/* Below 1024: each bar, then its panel 8 below. Both stacks stay open,
   32 apart, in their active colours. No hover or tap state. */
@media (max-width: 1023.98px) {
  .boards {
    gap: calc(32 * var(--m));
    margin-block: 0;
  }

  .board-stack {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--m));
  }

  /* .is-active is included so a desktop hover, then a resize, cannot
     leave Cambridge with the green desktop border. */
  .board-row--cbse,
  .board-row--cbse.is-active,
  .board-row--cbse:hover,
  .board-row--cbse:focus-visible {
    background: var(--brand-1);
    border-color: var(--brand-1);
    color: var(--text-light-2);
  }

  .board-row--cambridge,
  .board-row--cambridge.is-active,
  .board-row--cambridge:hover,
  .board-row--cambridge:focus-visible {
    background: #681fb1;
    border-color: #681fb1;
    color: var(--text-light-2);
  }

  .board-row__arrow {
    opacity: 0;
  }

  .board-row__badge {
    opacity: 1;
    transform: none;
  }

  .board-panel {
    padding: var(--space-32);
  }

  .board-panel,
  .board-panel.is-active,
  .board-panel:hover,
  .board-panel:focus-visible {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .board-row {
    padding: 23px 31px;
  }

  .board-row__name {
    font-size: clamp(40px, 6.5vw, 60px);
  }

  .board-row__logo {
    width: 60px;
  }

  .board-row__logo img {
    width: 52px;
    height: 58px;
  }
}

/* Phone: the 390 stacks. Bar 342 x 69, panel padding 16, image 310 x 160. */
@media (max-width: 575.98px) {
  .board-row {
    box-sizing: border-box;
    gap: calc(16 * var(--m));
    height: calc(69 * var(--m));
    padding: calc(16 * var(--m));
    border: 0;
    border-radius: calc(8 * var(--m));
  }

  .board-row__brand {
    gap: calc(4 * var(--m));
  }

  .board-row__name {
    font-size: calc(24 * var(--m));
    line-height: 1.2;
  }

  .board-row__logo {
    width: calc(38 * var(--m));
  }

  .board-row__logo img {
    width: calc(32.8 * var(--m));
    height: calc(37 * var(--m));
  }

  .board-row__icon {
    width: calc(32 * var(--m));
    height: calc(32 * var(--m));
  }

  /* Glyph scaled from the 60px badge (18.75 x 15.75) into the 32px circle. */
  .board-row__badge img {
    width: calc(10.002 * var(--m));
    height: calc(8.403 * var(--m));
  }

  .board-panel,
  .board-panel.is-active {
    gap: calc(16 * var(--m));
    padding: calc(16 * var(--m));
    border-radius: calc(4 * var(--m));
  }

  .board-panel__img,
  .board-panel--cambridge .board-panel__img {
    height: calc(160 * var(--m));
    aspect-ratio: auto;
    border-radius: calc(4 * var(--m));
  }

  .board-panel__text {
    gap: calc(5.36 * var(--m));
  }

  .board-panel__title {
    font-size: calc(22 * var(--m));
    line-height: 1.3;
  }

  .board-panel__desc {
    font-size: calc(14 * var(--m));
    font-weight: 300;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-row,
  .board-row__arrow,
  .board-row__badge,
  .board-panel,
  .board-panel.is-active {
    transition: none;
  }
}

/* ==========================================================================
   8. Our Learning Journey (#journey, ticket 05)
   ========================================================================== */
/* Figma 14810:10541 (Primary active); 14813:12998 / 13022 / 13046 show the
   other wings active. 140px below the boards, header 64px above the cards.
   Below 1024 the same cards are a vertical accordion (14934:10213). */
.section-journey {
  padding-top: var(--section-gap);
}

/* Intro and Apply share the header row; the cards span the row below. */
.journey__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "intro apply"
    "cards cards";
  align-items: center;
  column-gap: var(--space-64);
  row-gap: var(--space-64);
}

.journey__intro {
  grid-area: intro;
}

.journey__apply--header {
  grid-area: apply;
}

/* Two Apply buttons, one per band, so tab order follows the layout: on desktop
   the header button comes before the cards; below 1024 the list button comes after. */
.journey__apply--list {
  display: none;
}

.journey {
  grid-area: cards;
  min-width: 0;
}

/* Four 414 x 697 cards, 24 apart */
.journey__cards {
  display: flex;
  gap: var(--space-24);
  height: calc(697 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey__cards > li {
  flex: 1 1 0;
  min-width: 0;
}

/* Each wing keeps one photo; Figma recrops it per state. Crops are % of
   the card width, taken from the frames (height follows the aspect ratio). */
.wing-card[data-wing="pre"] {
  --crop-left: -17.27%;
  --crop-width: 308.61%;
  --crop-left-active: -5.34%;
  --crop-width-active: 226.44%;
}

.wing-card[data-wing="primary"] {
  --crop-left: -89.63%;
  --crop-width: 252.17%;
  --crop-left-active: -36.85%;   /* object-fit: cover in 14810:10553 */
  --crop-width-active: 173.7%;
}

.wing-card[data-wing="middle"] {
  --crop-left: -46.91%;
  --crop-width: 252.04%;
  --crop-left-active: -18.42%;
  --crop-width-active: 173.94%;
}

.wing-card[data-wing="senior"] {
  --crop-left: -64.13%;
  --crop-width: 252.17%;
  --crop-left-active: -36.97%;   /* object-fit: cover in 14813:13065 */
  --crop-width-active: 173.94%;
}

.wing-card {
  --wing-ease: 0.35s var(--ease);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-16);
  overflow: hidden;
  background: var(--bg-dark-2);
  color: var(--text-light-2);
  isolation: isolate;
}

/* The heading button covers the card. Desktop clicks fall through to the link;
   below 1024, .is-accordion turns the closed cards' buttons back on. */
.wing-card__toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  pointer-events: none;
  cursor: pointer;
}

.wing-card__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  color: inherit;
}

/* Desktop: the rule image is the label's flex child. The phone rule stays out. */
.wing-card__rule {
  display: contents;
}

.wing-card__rule-phone {
  display: none;
}

.wing-card:hover,
.wing-card:focus-visible {
  color: var(--text-light-2);
}

.wing-card__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.wing-card__media picture {
  display: contents;
}

.wing-card__img {
  position: absolute;
  top: 0;
  left: var(--crop-left);
  width: var(--crop-width);
  max-width: none;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  transition: left var(--wing-ease), width var(--wing-ease);
}

/* Inactive: 70% brand green over the photo */
.wing-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 63, 44, 0.7);
  transition: opacity var(--wing-ease);
}

/* Inactive label: yellow rule + wing name, centred in the card */
.wing-card__label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-40);
  transition: opacity var(--wing-ease);
}

/* Figma draws the 5px rule in a 0-high slot, 5px above it */
.wing-card__line {
  margin-top: calc(-5 * var(--u));
}

/* M-H3: Poppins Medium 35 / 1.3 */
.wing-card__name,
.wing-card__title {
  font-size: calc(35 * var(--u));
  font-weight: 500;
  line-height: 1.3;
}

/* Active: the yellow panel grows under the photo */
.wing-card__panel {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--bg-dark-2);
  transition: grid-template-rows var(--wing-ease);
}

.wing-card__panel-clip {
  min-height: 0;
  overflow: hidden;
}

/* Figma's panel is 216 of the card's 697. initJourney() sets --wing-panel-h
   to the tallest wing's panel, so the photo keeps one height as the hover
   moves even where the 16px text floor makes a description wrap further. */
.wing-card__panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-height: max(216 * var(--u), var(--wing-panel-h, 0px));
  padding: var(--space-40) var(--space-24);
}

.wing-card__title {
  color: var(--brand-1);
}

/* S-BODY-1: Poppins Light 18 / 1.4 */
.wing-card__desc {
  color: var(--text-dark-2);
  font-size: var(--fs-body-1);
  font-weight: 300;
  line-height: 1.4;
}

.wing-card.is-active .wing-card__img {
  left: var(--crop-left-active);
  width: var(--crop-width-active);
}

.wing-card.is-active .wing-card__media::after,
.wing-card.is-active .wing-card__label {
  opacity: 0;
}

.wing-card.is-active .wing-card__panel {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .wing-card {
    --wing-ease: 0s;
  }
}

/* Below 1024: vertical accordion. Four full-width cards, 8 apart. A closed card
   is 160 tall; the open one is a 260 photo plus a 153 yellow panel. Radius 8.
   Apply sits 40 below the list (14934:10213). */
@media (max-width: 1023.98px) {
  .journey__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "cards"
      "apply";
    align-items: start;
    column-gap: 0;
    row-gap: calc(40 * var(--m));
  }

  .journey__apply--header {
    display: none;
  }

  .journey__apply--list {
    display: inline-flex;
    grid-area: apply;
    justify-self: start;
  }

  .journey__cards {
    flex-direction: column;
    gap: calc(8 * var(--m));
    height: auto;
    overflow: visible;
  }

  .journey__cards > li {
    flex: none;
    width: 100%;
  }

  .wing-card {
    height: calc(160 * var(--m));
    border-radius: calc(8 * var(--m));
  }

  .wing-card.is-active {
    height: auto;
  }

  .wing-card.is-active .wing-card__link {
    height: auto;
  }

  .wing-card.is-active .wing-card__media {
    flex: 0 0 auto;
    height: calc(260 * var(--m));
  }

  .journey.is-accordion .wing-card:not(.is-active) .wing-card__toggle {
    pointer-events: auto;
  }

  .wing-card__label {
    gap: calc(24 * var(--m));
    padding: calc(40 * var(--m)) calc(24 * var(--m));
  }

  /* 41 x 3 rule drawn in a 0-high slot, 3px above it, then 24 to the name. */
  .wing-card__line {
    display: none;
  }

  .wing-card__rule {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: calc(41 * var(--m));
    height: 0;
  }

  .wing-card__rule-phone {
    display: block;
    position: absolute;
    top: calc(-3 * var(--m));
    left: 0;
    width: calc(41 * var(--m));
    height: calc(3 * var(--m));
    max-width: none;
  }

  .wing-card__name,
  .wing-card__title {
    font-size: calc(18 * var(--m));
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
  }

  .wing-card__panel,
  .wing-card__img {
    transition: none;
  }

  .wing-card__panel-body {
    box-sizing: border-box;
    justify-content: flex-end;
    gap: calc(8 * var(--m));
    min-height: calc(153 * var(--m));
    padding: calc(24 * var(--m));
  }

  .wing-card__desc {
    font-size: calc(16 * var(--m));
    font-weight: 300;
    line-height: 1.5;
  }

  /* Desktop crops over-zoom on a full-width card; a centred cover matches the frame. */
  .wing-card__img,
  .wing-card.is-active .wing-card__img {
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* ==========================================================================
   9. Spaces With Purpose (#spaces, ticket 06)
   ========================================================================== */
/* Desktop 14940:11804: 140 below the journey; header, the 600 row and dots 48 apart */
.section-spaces {
  padding-top: var(--section-gap);
}

/* L-H1: Cormorant Bold 65 / 1.1 in brand green */
.spaces__title {
  color: var(--brand-1);
  font-size: var(--fs-h1);
  line-height: 1.1;
}

/* Ten 344-wide cards, 8 apart. The set is centred on the gap between cards
   5 and 6. JS sets --n, --pos (the left card, counting clones) and
   --strip-origin (infraStripOrigin). --lead stays 0: a focused card is
   brought up against that gap, not onto a single centre card. */
.spaces {
  --card-w: calc(344 * var(--u));
  --card-gap: var(--space-8);
  --step: calc(var(--card-w) + var(--card-gap));
  --group: calc(var(--n, 10) * var(--step) - var(--card-gap));
  --lead: 0;
  margin-top: var(--space-48);
}

.spaces__stage {
  position: relative;
}

.spaces__viewport {
  overflow: hidden;
  overflow: clip; /* unlike hidden, focus can't scroll it */
  touch-action: pan-y;
}

/* The row is 600: each column is the photo, an 8 gap and the label, centred */
.spaces__track {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  width: max-content;
  height: calc(600 * var(--u));
  margin: 0 0 0 50%;
  padding: 0;
  list-style: none;
  transform: translateX(calc(-0.5 * var(--group) - (var(--pos, 0) - var(--lead)) * var(--step)));
}

.spaces.is-centred .spaces__track {
  margin-left: 0;
  transform: translateX(calc(var(--strip-origin) - var(--pos, 0) * var(--step)));
}

.spaces__track.is-animating {
  transition: transform 0.6s var(--ease);
}

/* Each card keeps its own photo height (--card-h, set once in buildInfraCard).
   The column is the full 600 row, with the photo and label centred in it. */
.infra-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--card-gap);
  width: var(--card-w);
  min-width: 0;
  height: calc(600 * var(--u));
}

.infra-card picture {
  display: block;
  flex: none;
  width: 100%;
  height: calc(var(--card-h) * var(--card-w) / 344);
  overflow: hidden;
  border-radius: var(--radius-8);
}

.infra-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

/* M-BODY-1: Poppins Medium 18 / 1.4, brand green, one line */
.infra-card__label {
  color: var(--brand-1);
  font-family: var(--font-body);
  font-size: calc(18 * var(--u));
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
}

/* Not drawn in Figma: a small zoom so the cards read as links */
.infra-card:hover img,
.infra-card:focus-visible img {
  transform: scale(1.04);
}

.infra-card:focus-visible {
  outline-offset: -3px;
}

/* 60px light-green circles, 64 / 63px in from the page edges, top edge on the row's centre line */
.spaces__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-light-1);
  transition: background-color 0.2s var(--ease);
}

.spaces__arrow--prev {
  left: var(--space-64);
}

.spaces__arrow--next {
  right: calc(63 * var(--u));
}

.spaces__arrow--prev img {
  transform: rotate(180deg);
}

/* Not drawn in Figma */
.spaces__arrow:hover {
  background: var(--brand-3);
}

/* 3 dots that count slides (ticket 11), not buttons. Active mark is a 55 x 7 pill;
   the next is at 70%, the other 40%. Each keeps the old 24px box so the row's
   height and the spacing below it are unchanged. */
.spaces__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--space-48) - 8.5 * var(--u));
  margin-bottom: calc(-8.5 * var(--u)); /* the 24px hit area overhangs the 7px mark below it too */
}

.spaces__dot {
  position: relative;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  padding: 0;
  border-radius: var(--radius-32);
}

.spaces__dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: var(--radius-32);
  background: var(--brand-1);
  opacity: 0.4;
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease), opacity 0.4s var(--ease);
}

.spaces__dot.is-active {
  width: calc(55 * var(--u));
}

.spaces__dot.is-active::before {
  width: calc(55 * var(--u));
  opacity: 1;
}

.spaces__dot.is-next:not(.is-active)::before {
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .infra-card img,
  .spaces__arrow,
  .spaces__dot::before {
    transition: none;
  }
}

/* Phone arrangement, including the tablet band: 134-wide cards, labels at 10px,
   and the arrows with the dots between them in a 260-wide row under the strip. */
@media (max-width: 1023.98px) {
  .spaces {
    --card-w: calc(134 * var(--m));
    --card-gap: calc(3.118 * var(--m));
    --lead: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    margin-top: calc(32 * var(--m));
    row-gap: calc(32 * var(--m));
  }

  .spaces__stage {
    display: contents;
  }

  .spaces__viewport {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  .spaces__track {
    height: auto;
  }

  .infra-card {
    height: auto;
  }

  .infra-card picture {
    height: calc(var(--card-h-phone) * var(--m));
    border-radius: calc(4 * var(--m));
  }

  /* 10px is the one deliberate departure from the 390 frame's 8px labels.
     Tracking is tightened so the longest label still fits the 134-wide card. */
  .infra-card__label {
    font-size: calc(10 * var(--m));
    letter-spacing: -0.1em;
  }

  .spaces__arrow {
    position: static;
    width: calc(39.494 * var(--m));
    height: calc(39.494 * var(--m));
    margin-top: 0;
  }

  .spaces__arrow img {
    width: calc(15.8 * var(--m));
    height: auto;
  }

  .spaces__arrow--prev {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    left: auto;
  }

  .spaces__arrow--next {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
    right: auto;
  }

  /* The dots sit in the space between the two 39.5 arrows, so the row is 260 wide
     and centred. Marks are the desktop 55 / 7 / 4 pattern at 0.63. */
  .spaces__dots {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    width: calc((260 - 39.494 * 2) * var(--m));
    margin: 0;
    gap: calc(4 * 0.63 * var(--m));
  }

  .spaces__dot,
  .spaces__dot.is-active {
    width: calc(7 * 0.63 * var(--m));
    height: calc(7 * 0.63 * var(--m));
  }

  .spaces__dot.is-active {
    width: calc(55 * 0.63 * var(--m));
  }

  .spaces__dot::before,
  .spaces__dot.is-active::before {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 575.98px) {
  .spaces__title {
    font-size: var(--fs-head);
    line-height: 1.2;
  }
}

/* ==========================================================================
   10. Discover & Experience (#discover, ticket 07)
   ========================================================================== */
/* Figma 14939:11562: 140px below the carousel. A 1728 x 991 green box; the
   light panel is 1071 tall and hangs 40px over its top and bottom edges.
   The list is 1047 and scrolls; item 4's first 15px shows on load. */
.section-discover {
  padding-top: var(--section-gap);
}

.discover {
  display: flex;
  align-items: center;
  gap: var(--space-48);
  padding: var(--space-64);
  border-radius: var(--radius-24);
  background: var(--brand-1);
}

.discover__intro {
  display: flex;
  flex: 0 0 calc(449 * var(--u));
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.discover__lead {
  color: var(--text-light-2);
}

/* Figma Line 58: 1px Brand Color 2 (--brand-2) at 30%, full content height, 0 wide in the flow */
.discover__rule {
  flex: none;
  align-self: stretch;
  width: 1px;
  margin-right: -1px;
  background: rgba(147, 199, 63, 0.3);
}

/* #f2f9e8 is not a Figma variable. -104px = 64 padding + 40 overhang.
   Padding is 24 on top and 0 on the bottom, so the 1047 list runs flush
   to the panel's bottom edge (1071 - 24). */
.discover__panel {
  position: relative;
  box-sizing: border-box;
  flex: 0 1 calc(1046 * var(--u));
  height: calc(1071 * var(--u));
  min-width: 0;
  margin-block: calc(-104 * var(--u));
  padding: var(--space-24) var(--space-40) 0;
  border-radius: var(--radius-24);
  background: #f2f9e8;
}

/* Default overscroll, not contain: at either end the page scrolls on. */
.discover__list {
  height: calc(1047 * var(--u));
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

/* 60 circle, #5a8735, centred on the panel's bottom edge and hanging 17 below.
   Desktop band only. */
.discover__down {
  position: absolute;
  z-index: 1;
  bottom: calc(-17 * var(--u));
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-dark-3);
  transform: translateX(-50%);
  cursor: pointer;
  transition: opacity 0.2s var(--ease);
}

.discover__down img {
  width: calc(19 * var(--u));
  height: calc(16 * var(--u));
  transform: rotate(90deg);
}

.discover__down.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* SEE MORE / SEE LESS. Hidden in the desktop band; the phone rules show it. */
.discover__more {
  display: none;
}

/* 344 tall: 32 + 280 photo + 32; the divider sits inside the bottom edge.
   Divider #8cb43a at 30% is not a Figma variable. Every item keeps both,
   including the last. */
.discover-item {
  display: flex;
  align-items: center;
  gap: var(--space-56);
  padding-block: var(--space-32);
  box-shadow: inset 0 -1px 0 rgba(140, 180, 58, 0.3);
}

.discover-item__text {
  display: flex;
  flex: 1 1 0;
  align-items: flex-start;
  gap: var(--space-24);
  min-width: 0;
}

/* S-SUB-H2: Poppins Regular 24 / 1.4, centred in a 62px slot beside the title */
.discover-item__num {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-8);
  height: calc(62 * var(--u));
  color: var(--brand-1);
  font-size: var(--fs-sub-h2);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
}

.discover-item__copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

/* initiative: Cormorant Bold 44 / 1.1 */
.discover-item__title {
  margin: 0;
  color: var(--brand-1);
  font-family: var(--font-display);
  font-size: var(--fs-initiative);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}

/* Figma fixes this title at 395 wide so it breaks after "Led" */
.discover-item__title--narrow {
  max-width: calc(395 * var(--u));
}

/* S-Button-2: Poppins Light 16 / 1.5 */
.discover-item__desc {
  margin: 0;
  color: var(--text-dark-2);
  font-size: var(--fs-button-2);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
}

.discover-item__media {
  display: block;
  flex: none;
  width: calc(325 * var(--u));
  aspect-ratio: 325 / 280;
  overflow: hidden;
  border-radius: var(--radius-8);
}

.discover-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Financial Literacy (14939:11630): the frame shows the bottom of the photo. */
.discover-item__media--bottom img {
  object-position: bottom;
}

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

/* Below 1024: phone pattern. Text, then a 246 x 150 photo. Collapsed, the
   panel hangs 143 below the green box and items 04–07 wait behind SEE MORE.
   Expanded, the panel sits inside the box with 24 below it. No nested scroll. */
@media (max-width: 1023.98px) {
  .discover {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: calc(16 * var(--m));
    padding: calc(24 * var(--m));
    border-radius: calc(8 * var(--m));
    background: var(--brand-1);
  }

  .discover:not(.is-expanded) {
    background: transparent;
    padding-bottom: 0;
  }

  .discover:not(.is-expanded)::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 calc(143 * var(--m)) 0;
    border-radius: calc(8 * var(--m));
    background: var(--brand-1);
    pointer-events: none;
  }

  .discover__intro,
  .discover__panel {
    position: relative;
    z-index: 1;
  }

  .discover__intro {
    flex: none;
    max-width: none;
    padding-top: calc(16 * var(--m));
    gap: calc(16 * var(--m));
  }

  .discover .section-header {
    gap: calc(4 * var(--m));
  }

  .discover__rule,
  .discover__down {
    display: none;
  }

  /* Under the intro, the .discover gap supplies 16 and this margin the rest:
     36 collapsed (the 390 frame), 33 expanded (14940:12064: 16, the 1px
     rule hidden here, 16). */
  .discover__panel {
    flex: none;
    height: auto;
    margin-block: calc(17 * var(--m)) 0;
    padding: calc(24 * var(--m));
    border-radius: calc(4 * var(--m));
  }

  .discover__list {
    height: auto;
    overflow: visible;
  }

  .discover:not(.is-expanded) .discover__panel {
    margin-top: calc(20 * var(--m));
  }

  .discover:not(.is-expanded) .discover-item:nth-child(n + 4) {
    display: none;
  }

  .discover-item {
    flex-direction: column;
    align-items: stretch;
    gap: calc(24 * var(--m));
    padding-block: calc(32 * var(--m));
  }

  .discover-item__text {
    flex-direction: column;
    gap: calc(8 * var(--m));
  }

  .discover-item__num {
    height: auto;
  }

  .discover-item__media {
    width: 100%;
    max-width: calc(246 * var(--m));
    height: calc(150 * var(--m));
    aspect-ratio: auto;
  }

  .discover__more {
    display: block;
    width: fit-content;
    margin-top: calc(24 * var(--m));
    margin-inline: auto;
    padding: 0 0 calc(4 * var(--m));
    border: 0;
    border-bottom: 1px solid var(--brand-2);
    background: none;
    color: var(--brand-1);
    font-family: var(--font-body);
    font-size: calc(16 * var(--m));
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: var(--ls-tight);
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* The 24 under the panel is the box padding, so the link sits against the box. */
  .discover.is-expanded + .discover__more {
    margin-top: 0;
  }
}

@media (max-width: 575.98px) {
  .section-discover .eyebrow {
    font-size: var(--fs-eyebrow);
    line-height: 1.3;
  }

  .section-discover .section-title {
    font-size: var(--fs-head);
    line-height: 1.2;
  }

  .discover__lead,
  .discover-item__desc {
    font-size: calc(14 * var(--m));
    font-weight: 300;
    line-height: 1.5;
  }

  .discover-item__num {
    font-size: calc(18 * var(--m));
    font-weight: 500;
    line-height: 1.4;
  }

  .discover-item__title {
    font-size: calc(22 * var(--m));
    line-height: 1.3;
  }

  .discover-item__copy {
    gap: calc(8 * var(--m));
  }
}

/* ==========================================================================
   11. School Events (#events, ticket 06)
   ========================================================================== */
/* Figma 14810:10729: 140px below Discover, 128px padding, green gradient
   (#199f6f is not a variable) with two blurred glows masked to its top 965px. */
.section-events {
  --event-ease: 0.35s var(--ease);
  position: relative;
  margin-top: var(--section-gap);
  padding-block: var(--section-space);
  overflow: hidden;
  background: linear-gradient(180.84deg, var(--brand-1) 33.832%, #199f6f 124.15%);
}

.events__glow {
  position: absolute;
  inset: 0 0 calc(51 * var(--u));
  overflow: hidden;
  pointer-events: none;
}

/* Positions are Figma's px / 1920, so the glows scale with the section.
   Percent margins resolve against the width, which keeps the ratio. */
.events__glow-img {
  position: absolute;
  top: 0;
  max-width: none;
  height: auto;
}

.events__glow-img--left {
  left: -24.943%;
  width: 66.818%;
  margin-top: -7.008%;
}

.events__glow-img--right {
  left: 68.014%;
  width: 65.724%;
  margin-top: -1.349%;
}

/* Nine 177.94 x 240 columns, 16 apart, filling the content width. Children
   resolve cqw against this box, so the wave scales as one piece. */
.events__inner {
  --event-gap: calc(16 * var(--u));
  --event-col-w: calc((100cqw - 8 * var(--event-gap)) / 9);
  --event-card-h: calc(var(--event-col-w) * 240 / 177.94);
  --event-rise: calc(var(--event-card-h) * 94.902 / 240);
  position: relative;
  container-type: inline-size;
}

/* 828 wide as drawn, but never wider than the five low centre columns under it */
.events__header {
  max-width: min(828 * var(--u), calc(5 * var(--event-col-w) + 4 * var(--event-gap) - 2 * var(--space-24)));
  margin-inline: auto;
}

/* L-H1: Cormorant Bold 65 / 1.1 */
.events__title {
  font-size: var(--fs-h1);
  line-height: 1.1;
}

/* Text Light 1; 24 below the title (8 gap + 16) */
.events__lead {
  margin-top: var(--space-16);
  color: var(--text-light-1);
}

/* The centre columns sit 64px under the header; the outer ones rise beside
   it (-192px at 1920) */
.events__collage {
  margin-top: calc(var(--space-64) - var(--event-card-h) - var(--event-gap));
}

/* Phone grid (ticket 08). Hidden until the phone band; the wave stays above it. */
.events__phone {
  display: none;
}

.events__cols {
  display: flex;
  align-items: flex-start;
  gap: var(--event-gap);
}

.events__col {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--event-gap);
  width: var(--event-col-w);
}

/* Outer columns: flush with the wave's top edge */
.events__col--top {
  margin-top: 0;
}

.events__col--rise {
  margin-top: var(--event-rise);
}

.events__col--mid {
  margin-top: calc(var(--event-card-h) + var(--event-gap));
}

.events__col--low {
  margin-top: calc(var(--event-card-h) + var(--event-gap) + var(--event-rise));
}

.event-card {
  position: relative;
  height: var(--event-card-h);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-8);
  transition: transform var(--event-ease), box-shadow var(--event-ease);
}

.event-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

/* Hover (not in Figma): lift, a little zoom, brand-green tint */
.event-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-1);
  opacity: 0;
  transition: opacity var(--event-ease);
  pointer-events: none;
}

@media (hover: hover) {
  .event-card:hover {
    box-shadow: 0 calc(16 * var(--u)) calc(32 * var(--u)) rgba(2, 17, 20, 0.35); /* --brand-5 at 35% */
    transform: translateY(calc(-8 * var(--u)));
  }

  .event-card:hover img {
    transform: scale(1.06);
  }

  .event-card:hover::after {
    opacity: 0.35;
  }
}

/* Reduced motion: no lift or zoom; the tint and shadow still mark the hovered card */
@media (prefers-reduced-motion: reduce) {
  .event-card,
  .event-card img {
    transition: none;
  }

  .event-card:hover,
  .event-card:hover img {
    transform: none;
  }
}

/* Figma: 50px under the wave (not a spacing token) */
.events__cta {
  display: flex;
  justify-content: center;
  margin-top: calc(50 * var(--u));
}

/* Below 1200 nine columns get too small: the wave keeps its shape at a fixed
   size and scrolls sideways, edge to edge */
@media (max-width: 1199.98px) {
  .events__inner {
    --event-col-w: 150px;
  }

  .events__header {
    max-width: 828px;
  }

  .events__collage {
    margin: var(--space-40) calc(-1 * var(--gutter)) 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-color: var(--brand-3) rgba(255, 255, 255, 0.15); /* white at 15%: not a Figma variable */
    scrollbar-width: thin;
  }

  /* initEvents() makes the strip a tab stop while it scrolls; arrow keys then scroll it */
  .events__collage:focus-visible {
    outline-offset: -3px;
  }

  /* Room for the hover lift inside the scroller */
  .events__cols {
    width: max-content;
    padding-block: var(--space-16);
  }

  .events__cta {
    margin-top: var(--space-32);
  }
}

/* Phone band: the 390 grid (14936:11290). Three columns, the middle one
   57.4 lower. Cards 107.64 x 145.18, radius 4. The wave is gone, the
   gradient tilts to 184.18°, and the right glow stays off the canvas. */
@media (max-width: 575.98px) {
  .section-events {
    background: linear-gradient(184.18deg, var(--brand-1) 33.832%, #199f6f 124.15%);
  }

  .events__glow {
    inset: 0;
  }

  /* Same left glow as desktop, at the 390 frame's pixel position (F10). */
  .events__glow-img--left {
    top: calc(-134.55 * var(--m));
    left: calc(-478.9 * var(--m));
    width: calc(1282.9 * var(--m));
    margin-top: 0;
  }

  .events__glow-img--right {
    display: none;
  }

  .events__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(40 * var(--m));
  }

  .events__header {
    gap: calc(8 * var(--m));
    width: calc(352 * var(--m));
    max-width: none;
  }

  .events__title {
    font-size: var(--fs-head);
    line-height: 1.2;
  }

  .events__lead {
    width: 100%;
    /* The header's 8 gap plus this 8 is the 16 under the title. */
    margin-top: calc(8 * var(--m));
    color: var(--text-light-1);
    font-size: var(--fs-body-1);
    font-weight: 300;
    line-height: 1.5;
  }

  .events__collage {
    display: none;
  }

  .events__phone {
    display: flex;
    flex: none;
    align-items: flex-start;
    gap: calc(10 * var(--m));
    width: calc(342.906 * var(--m));
    height: calc(610 * var(--m));
  }

  .events__phone-col {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: calc(9.678 * var(--m));
    width: calc(107.635 * var(--m));
  }

  .events__phone-col--mid {
    margin-top: calc(57.406 * var(--m));
  }

  .events__phone .event-card {
    height: calc(145.175 * var(--m));
    border-radius: calc(4 * var(--m));
  }

  .events__cta {
    margin-top: 0;
  }
}

/* ==========================================================================
   12. Beyond the Classroom (#beyond, ticket 07)
   ========================================================================== */

/* Sizes are Figma px times --u. From 1280 the drawn zigzag scales with the
   container (1px at 1920); below that the cards wrap 3 + 2. */
.section-beyond {
  padding-top: var(--section-gap);
}

.beyond__title {
  font-size: var(--fs-h1);
  line-height: 1.1;
}

/* Figma: 30 bottom padding + 49 gap */
.beyond__header {
  margin-bottom: calc(79 * var(--u));
}

.beyond__stage {
  position: relative;
  container-type: inline-size;
}

.beyond__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-48) var(--space-40);
  max-width: calc(3 * 310 * var(--u) + 2 * var(--space-40));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Icon disc overlaps the card top by 40 */
.beyond-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(310 * var(--u));
}

.beyond-card__icon {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
  width: calc(87 * var(--u));
  height: calc(87 * var(--u));
  margin-bottom: calc(-40 * var(--u));
  border-radius: 50%;
  background: var(--brand-1);
}

/* Figma masks each 55px icon PNG with a solid fill */
.beyond-card__icon::before {
  content: "";
  position: absolute;
  inset: calc(16 * var(--u));
  background: var(--text-light-2);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.beyond-card--1 .beyond-card__icon { --icon: url("../assets/icons/beyond-performing-arts.png"); }
.beyond-card--2 .beyond-card__icon { --icon: url("../assets/icons/beyond-visual-arts.png"); }
.beyond-card--3 .beyond-card__icon { --icon: url("../assets/icons/beyond-student-clubs.png"); }
.beyond-card--4 .beyond-card__icon { --icon: url("../assets/icons/beyond-weekend-immersion.png"); }
.beyond-card--5 .beyond-card__icon { --icon: url("../assets/icons/beyond-sports.png"); }

.beyond-card__body {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  width: 100%;
  padding: calc(62 * var(--u)) 0 calc(32 * var(--u));
  border: 1px solid var(--brand-2);
  border-radius: calc(8 * var(--u));
  background: #ecf5dc; /* not a Figma variable */
  text-align: center;
}

.beyond-card__title {
  margin: 0;
  color: var(--brand-1);
  font-family: var(--font-body);
  font-size: max(16px, 22 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-tight);
}

.beyond-card__text {
  margin: 0;
  padding-inline: calc(32 * var(--u));
  color: var(--text-dark-2);
  font-size: max(16px, 18 * var(--u));
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
}

/* Desktop Visual Arts keeps Figma's trailing blank line (I14). The phone
   frame doesn't draw it. */
.beyond-card__trailing-line {
  display: none;
}

@media (min-width: 1024px) {
  .beyond-card__trailing-line {
    display: block;
  }
}

/* Phone connectors stay out of the zigzag and the tablet grid. */
.beyond-card__connector {
  display: none;
}

/* Dark cards: the disc and the card swap colours */
.beyond-card--dark .beyond-card__icon {
  background: var(--bg-light-1);
}

.beyond-card--dark .beyond-card__icon::before {
  background: var(--brand-1);
}

.beyond-card--dark .beyond-card__body {
  border-color: #cda00c; /* Figma's "BG Dark 1" in this frame, not --bg-dark-1 */
  background: var(--brand-1);
}

.beyond-card--dark .beyond-card__title,
.beyond-card--dark .beyond-card__text {
  color: var(--text-light-2);
}

.beyond__arrows {
  display: none;
}

@media (min-width: 1280px) {
  /* 1728 = Figma's content width */
  .beyond__stage {
    --u: calc(100cqw / 1728);
  }

  /* Five 310 columns (1728 wide at 1920), one row. Each card's top is pinned
     where Figma draws it, so the icons stay under the arrow heads when the
     16px copy floor makes the cards taller below 1920; the extra height grows
     downward. Light cards: 25, 12.5, 0 (centred on the tallest at 1920). Dark
     cards: level at 112, whatever their heights. */
  .beyond__list {
    display: grid;
    grid-template-columns: repeat(5, calc(310 * var(--u)));
    justify-content: space-between;
    align-items: start;
    gap: 0;
    max-width: none;
  }

  .beyond-card {
    grid-row: 1;
  }

  .beyond-card--1 { margin-top: calc(25 * var(--u)); }
  .beyond-card--3 { margin-top: calc(12.5 * var(--u)); }
  .beyond-card--dark { margin-top: calc(112 * var(--u)); }

  .beyond-card--1 { grid-column: 1; }
  .beyond-card--2 { grid-column: 2; }
  .beyond-card--3 { grid-column: 3; }
  .beyond-card--4 { grid-column: 4; }
  .beyond-card--5 { grid-column: 5; }

  /* The arrows start level with the middle of the title (title line box 1.1,
     then 79 to the stage) and point down at each card's icon */
  .beyond__arrows {
    --arrow-top: calc(-1 * (var(--fs-h1) * 0.55 + 80 * var(--u)));
    display: block;
  }

  .beyond__arrow {
    position: absolute;
    top: var(--arrow-top);
  }

  .beyond__arrow img {
    position: absolute;
    max-width: none;
  }

  /* Every head stops 22.5 above its icon disc, Student Clubs' gap as drawn
     (Figma's own gaps run 35 / 26 / 22.5 / 26 / 10). --grow is how much longer
     (or shorter) each SVG's straight dashed run is than Figma's; the curve and
     head are as drawn. The SVG overhangs its box by 1 for the arrowhead. */
  .beyond__arrow--long,
  .beyond__arrow--short {
    --grow: 0;
  }

  .beyond__arrow--1 { --grow: 12.5; }   /* beyond-arrow-long-left.svg */
  .beyond__arrow--5 { --grow: -12.5; }  /* beyond-arrow-long-right.svg */
  .beyond__arrow--short { --grow: 1.47; }

  .beyond__arrow--long {
    width: calc(369 * var(--u));
    height: calc((106 + var(--grow)) * var(--u));
  }

  .beyond__arrow--long img {
    top: calc(-1 * var(--u));
    left: calc(-1 * var(--u));
    width: calc(377.364 * var(--u));
    height: calc((108 + var(--grow)) * var(--u));
  }

  .beyond__arrow--short {
    width: calc(64 * var(--u));
    height: calc((204 + var(--grow)) * var(--u));
  }

  .beyond__arrow--short img {
    top: calc(-1 * var(--u));
    left: calc(-1 * var(--u));
    width: calc(72.364 * var(--u));
    height: calc((206 + var(--grow)) * var(--u));
  }

  /* Left-hand arrows are the right-hand ones mirrored */
  .beyond__arrow--1,
  .beyond__arrow--2 {
    transform: scaleX(-1);
  }

  .beyond__arrow--1 { left: calc(155 * var(--u)); }
  .beyond__arrow--2 { left: calc(510 * var(--u)); }
  .beyond__arrow--4 { left: calc(1155 * var(--u)); }
  .beyond__arrow--5 { left: calc(1204 * var(--u)); }

  /* Straight drop under the title's centre */
  .beyond__arrow--3 {
    top: calc(var(--arrow-top) + 53 * var(--u));
    left: 50%;
    width: 0;
    height: calc(53 * var(--u));
  }

  .beyond__arrow--3 img {
    top: -1.89%;
    left: calc(-7.36 * var(--u));
    width: calc(14.73 * var(--u));
    height: 103.78%;
  }
}

/* Below 1280 the zigzag gets too narrow for 16px copy: the cards wrap 3 + 2 */
@media (max-width: 1279.98px) {
  .section-beyond {
    --u: 0.78px;
  }

  .beyond__header {
    margin-bottom: var(--space-40);
  }

  .beyond__list {
    gap: var(--space-32) var(--space-24);
  }
}

/* Below 768: one column (14936:11397). A 43px connector box sits above every
   card; its 14.73 x 45 arrow overflows that box and is not the desktop drop
   stretched. Title → 32 → connector → 16 → card, and 16 under the card, so
   the next icon starts 75 below. From 768 the tablet grid is untouched. */
@media (max-width: 767.98px) {
  .beyond__header {
    gap: calc(8 * var(--m));
    margin-bottom: calc(32 * var(--m));
  }

  .section-beyond .eyebrow {
    font-size: calc(12 * var(--m));
    line-height: 1.3;
  }

  .beyond__title {
    font-size: calc(35 * var(--m));
    line-height: 1.2;
  }

  .beyond__list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(16 * var(--m));
    max-width: none;
  }

  .beyond-card {
    width: min(100%, calc(342 * var(--m)));
    max-width: none;
  }

  .beyond-card__connector {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 0;
    height: calc(43 * var(--m));
    margin-bottom: calc(16 * var(--m));
  }

  /* The arrow is 14.73 x 45 and hangs 7.36 past each side of the 43 box,
     matching Figma's inset (-2.33% -7.36px). */
  .beyond-card__connector img {
    position: absolute;
    top: -2.33%;
    left: calc(-7.36 * var(--m));
    width: calc(14.7279 * var(--m));
    height: calc(45 * var(--m));
    max-width: none;
  }

  .beyond-card__icon {
    width: calc(59.5 * var(--m));
    height: calc(59.5 * var(--m));
    margin-bottom: calc(-40 * var(--m));
  }

  .beyond-card__icon::before {
    inset: calc(10.943 * var(--m));
  }

  .beyond-card__body {
    gap: calc(6 * var(--m));
    padding: calc(62 * var(--m)) 0 calc(32 * var(--m));
    border-radius: calc(8 * var(--m));
  }

  .beyond-card__title {
    font-size: calc(18 * var(--m));
    line-height: 1.4;
  }

  .beyond-card__text {
    padding-inline: calc(16 * var(--m));
    font-size: calc(14 * var(--m));
    line-height: 1.5;
  }
}

/* ==========================================================================
   13. Stories That Connect Us (#stories, ticket 07)
   ========================================================================== */

/* Each tab has its own colours in Figma: Students 14836:6303 (main frame),
   Parents 14813:12753, Alumni 14813:12869, Teacher 14890:8157.
   The grids render from STORY_SLIDES. Alumni and Students are three video cards.
   Colours without a Figma variable are commented. */
.section-stories {
  padding-top: var(--section-gap);
}

.stories__title {
  font-size: var(--fs-h1);
  line-height: 1.1;
}

/* Pill tab bar, 24 under the title. Its tint follows the active tab. */
.stories__tabs {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  max-width: 100%;
  margin: var(--space-24) auto 0;
  padding: var(--space-4);
  overflow-x: auto;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: calc(130 * var(--u));
  background: rgba(87, 87, 87, 0.04);
  scrollbar-width: none;
}

.section-stories[data-active="students"] .stories__tabs,
.section-stories[data-active="alumni"] .stories__tabs {
  border-color: rgba(26, 165, 115, 0.2); /* #1aa573 at 20% */
  background: rgba(26, 165, 115, 0.08);
}

.stories__tab {
  flex: 0 0 calc(130 * var(--u));
  padding: calc(14 * var(--u)) calc(8 * var(--u));
  border: 0;
  border-radius: calc(154 * var(--u));
  background: transparent;
  color: var(--brand-1);
  font-family: var(--font-body);
  font-size: var(--fs-button-2);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.stories__tab:hover {
  background: rgba(10, 63, 44, 0.06); /* brand-1 at 6%, not in Figma */
}

.stories__tab:focus-visible {
  outline-offset: -3px;
}

.stories__tab[aria-selected="true"] { background: var(--brand-3); }
#stories-tab-students[aria-selected="true"] { background: #1aa573; color: var(--text-light-2); } /* not a Figma variable */
#stories-tab-alumni[aria-selected="true"] { background: var(--bg-dark-3); color: var(--text-light-2); }
#stories-tab-teachers[aria-selected="true"] { background: var(--bg-dark-2); color: var(--text-dark-1); }

.stories__panel {
  margin-top: var(--space-64);
}

/* Video + quotes + video (1724 at 1920), or three videos (1398) */
.stories__grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-24);
}

/* Students and Alumni are three 450×660 cards (14836:6303, 14813:12884).
   The two-line Alumni name is 72 tall and uses the bottom padding,
   so the card stays 660 instead of growing past the frame. */
@media (min-width: 1024px) {
  .stories__grid--videos .story-video {
    height: calc(660 * var(--u));
  }

  .stories__grid--videos .story-video__frame {
    flex: none;
  }
}

/* Video card: 450 wide on every tab, a 402 x 515 poster, name and role under it */
.story-video {
  display: flex;
  flex: 0 0 calc(450 * var(--u));
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
  margin: 0;
  padding: var(--space-24);
  border-radius: var(--radius-16);
}

/* The portrait frame is 402×515, and grows if the quotes panel beside it
   makes the row taller, so no empty band opens under the name. The poster
   and the clip both fill it (cover crops the stretch). */
.story-video__frame {
  position: relative;
  flex: 1 0 auto;
  overflow: hidden;
  aspect-ratio: 402 / 515;
  border-radius: var(--radius-16);
  background: var(--brand-1);
}

.story-video__play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--brand-1);
  cursor: pointer;
}

.story-video__play img:not(.story-video__icon) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the poster on hover; not in Figma */
.story-video__play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 17, 20, 0.2); /* brand-5 at 20% */
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

/* 75 of 402 wide, so it stays on the poster's own play glyph at any size */
.story-video__icon {
  position: absolute;
  top: calc(50% + 0.19 * var(--u));
  left: calc(50% - 0.26 * var(--u));
  z-index: 1;
  width: 18.66%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.story-video__play:hover::after,
.story-video__play:focus-visible::after {
  opacity: 1;
}

.story-video__play:focus-visible {
  outline-offset: 4px;
}

.story-video__media {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.story-video.is-playing .story-video__media {
  display: block;
}

.story-video.is-playing .story-video__play {
  display: none;
}

.story-video__error {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-16);
  color: var(--text-light-2);
  font-size: var(--fs-body-1);
  text-align: center;
  background: rgba(2, 17, 20, 0.85); /* brand-5 at 85% */
}

.story-video__error[hidden] {
  display: none;
}

.story-video__caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.story-video__name {
  font-family: var(--font-display);
  font-size: var(--fs-sub-head);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-tight);
}

.story-video__role {
  font-size: var(--fs-body-1);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
}

/* Quotes panel: two white quote cards, 24 apart, in a tinted box */
.story-quotes {
  display: flex;
  flex: 0 1 calc(776 * var(--u));
  flex-direction: column;
  justify-content: center;
  gap: var(--space-24);
  min-width: 0;
  padding: var(--space-32);
  border-radius: var(--radius-16);
}

.story-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  margin: 0;
  padding: var(--space-24);
  border-radius: calc(10 * var(--u));
  background: var(--bg-light-2);
}

.story-quote__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-8);
}

.story-quote__head picture {
  flex-shrink: 0;
  margin-right: var(--space-8); /* 16 to the name with the column gap */
}

.story-quote__avatar {
  display: block;
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  border-radius: 50%;
  object-fit: cover;
}

.story-quote__name {
  color: var(--brand-1);
  font-family: var(--font-display);
  font-size: var(--fs-sub-head);
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-tight);
}

.story-quote__role {
  font-size: var(--fs-body-1);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
}

.story-quote__text {
  margin: 0;
  color: var(--text-dark-2);
  font-size: var(--fs-body-1);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
}

/* Parents: outlined cards, yellow panel */
.stories__panel--parents .story-video {
  border: 1.334px solid var(--brand-3);
  padding: calc(var(--space-24) - 1.334px); /* border inside Figma's 450 x 660 */
}

.stories__panel--parents .story-video__name { color: var(--bg-dark-1); }
.stories__panel--parents .story-video__role { color: var(--text-dark-2); }
.stories__panel--parents .story-quotes { background: rgba(254, 195, 0, 0.2); } /* brand-3 at 20% */
.stories__panel--parents .story-quote__role { color: #cda00c; } /* not a Figma variable */

/* Students: solid green cards */
.stories__panel--students .story-video { background: #1aa573; } /* not a Figma variable */

.stories__panel--students .story-video__name,
.stories__panel--alumni .story-video__name { color: var(--text-light-2); }

.stories__panel--students .story-video__role,
.stories__panel--alumni .story-video__role { color: var(--text-light-1); }

/* Alumni: olive cards, olive panel */
.stories__panel--alumni .story-video { background: var(--bg-dark-3); }
.stories__panel--alumni .story-quotes { background: rgba(90, 135, 53, 0.2); } /* bg-dark-3 at 20% */
.stories__panel--alumni .story-quote__role { color: var(--bg-dark-3); }

/* Teachers: pale yellow cards, faint yellow panel */
.stories__panel--teachers .story-video { background: #feee9a; } /* not a Figma variable */
.stories__panel--teachers .story-video__name { color: var(--text-dark-1); }
.stories__panel--teachers .story-video__role { color: var(--bg-dark-3); }
.stories__panel--teachers .story-quotes { background: rgba(254, 226, 86, 0.1); } /* bg-dark-2 at 10% */
.stories__panel--teachers .story-quote__role { color: var(--brand-2); }

@media (prefers-reduced-motion: reduce) {
  .stories__tab,
  .story-video__play::after,
  .stories__dot {
    transition: none;
  }
}

/* Below 1024: one slide at a time (phone order), with the arrows and the
   three cycling dots under it. Quote slides are full-bleed; video slides
   stay in the gutter. The desktop grid rules above are left as they are. */
@media (max-width: 1023.98px) {
  .stories__tabs {
    gap: 0;
    width: max-content;
    max-width: none;
    /* The bar is wider than the 24 gutter's content box, so auto margins
       sit it on the left. Shift it onto the centre of that box, which is
       the centre of the viewport. */
    margin-top: calc(24 * var(--m));
    margin-inline: 0;
    padding: calc(4 * var(--m));
    overflow: visible;
    border-radius: calc(130 * var(--m));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .stories__tab {
    flex: 0 0 auto;
    padding: calc(12 * var(--m)) calc(18 * var(--m));
    border-radius: calc(154 * var(--m));
    font-size: calc(12 * var(--m));
    line-height: 1.5;
  }

  /* Break out of the container so a quote slide can run edge to edge.
     A video slide pads back in by the same gutter, so it stays 342 at 390. */
  .stories__panel {
    width: calc(100% + 2 * var(--gutter));
    margin-top: calc(32 * var(--m));
    margin-inline: calc(-1 * var(--gutter));
  }

  .stories__viewport {
    overflow: hidden;
    touch-action: pan-y;
  }

  .stories__grid {
    display: block;
    gap: 0;
  }

  .stories__slide--video {
    box-sizing: border-box;
    padding-inline: var(--gutter);
  }

  .stories__slide--video .story-video {
    box-sizing: border-box;
    flex: none;
    width: 100%;
    gap: calc(32 * var(--m));
    margin: 0;
    padding: calc(24 * var(--m));
    border-radius: calc(8 * var(--m));
  }

  .stories__panel--parents .stories__slide--video .story-video {
    border-width: 1px;
    padding: calc(24 * var(--m) - 1px);
  }

  .stories__slide--video .story-video__frame {
    flex: none;
    width: 100%;
    height: calc(360 * var(--m));
    aspect-ratio: auto;
    border-radius: calc(8 * var(--m));
  }

  .stories__slide--video .story-video__caption {
    gap: calc(4 * var(--m));
  }

  .stories__slide--video .story-video__name,
  .stories__slide--quote .story-quote__name {
    font-size: calc(22 * var(--m));
    line-height: 1.3;
  }

  .stories__slide .story-video__role,
  .stories__slide .story-quote__role,
  .stories__slide .story-quote__text {
    font-size: calc(14 * var(--m));
    font-weight: 300;
    line-height: 1.5;
  }

  /* Quote slide: tinted panel, padding 16, one white card with a stacked head. */
  .stories__slide--quote .story-quotes {
    flex: none;
    justify-content: flex-start;
    width: 100%;
    gap: 0;
    padding: calc(16 * var(--m));
    border-radius: calc(8 * var(--m));
  }

  .stories__slide--quote .story-quote {
    gap: calc(24 * var(--m));
    padding: calc(24 * var(--m));
    border-radius: calc(10 * var(--m));
  }

  .stories__slide--quote .story-quote__head {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0;
  }

  .stories__slide--quote .story-quote__head picture {
    margin: 0 0 calc(16 * var(--m));
  }

  .stories__slide--quote .story-quote__avatar {
    width: calc(80 * var(--m));
    height: calc(80 * var(--m));
  }

  .stories__slide--quote .story-quote__name {
    margin-bottom: calc(8 * var(--m));
  }

  /* Same row as the phone Spaces controls: a 260-wide group, arrows at
     the ends, dots centred between them. Prev stays light and next stays
     dark on every tab. */
  .stories__controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    margin-top: calc(32 * var(--m));
  }

  .stories__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(39.494 * var(--m));
    height: calc(39.494 * var(--m));
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  .stories__arrow img {
    width: calc(15.8 * var(--m));
    height: auto;
    pointer-events: none;
  }

  .stories__arrow--prev {
    grid-column: 1;
    justify-self: end;
    background: var(--bg-light-1);
  }

  .stories__arrow--prev img {
    transform: rotate(180deg);
  }

  .stories__arrow--next {
    grid-column: 3;
    justify-self: start;
    background: var(--brand-1);
  }

  .stories__dots {
    display: flex;
    grid-column: 2;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: calc((260 - 39.494 * 2) * var(--m));
    gap: calc(4 * 0.63 * var(--m));
  }

  .stories__dot {
    flex: none;
    width: calc(7 * 0.63 * var(--m));
    height: calc(7 * 0.63 * var(--m));
    border-radius: calc(20.15 * var(--m));
    background: var(--brand-1);
    opacity: 0.4;
    transition: width 0.4s var(--ease), opacity 0.4s var(--ease);
  }

  .stories__dot.is-active {
    width: calc(55 * 0.63 * var(--m));
    opacity: 1;
  }

  .stories__dot.is-next:not(.is-active) {
    opacity: 0.7;
  }
}

@media (max-width: 575.98px) {
  .stories__title {
    font-size: var(--fs-head);
    line-height: 1.2;
  }
}

/* ==========================================================================
   14. CTA (#cta, ticket 08) and the thank-you page
   Figma 14810:10922: 1728×603, 140px above the card and 140px before the footer.
   The decorative vector (14810:10923) exported as an empty SVG, so it isn't shown.
   ========================================================================== */
.section-cta {
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
}

.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-24);
  background: linear-gradient(171.9deg, var(--brand-1) 7.58%, #199f6f 98.93%);
}

.cta__copy {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(64 * var(--u));
  padding: calc(98 * var(--u)) calc(86 / 1728 * 100%);
}

.cta__text {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  /* 918px of the 1556px copy box at a 1728 card, so the column shrinks with the card */
  width: calc(918 / 1556 * 100%);
}

.cta__title {
  margin: 0;
  color: var(--text-light-2);
  font-family: var(--font-body);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ls-tight);
}

.cta__lead {
  color: var(--text-light-2);
}

/* Cut-out photo, hung off the right edge and clipped by the card (Figma x 895, y -18, 971×621) */
.cta__photo {
  position: absolute;
  z-index: 1;
  top: calc(-18 * var(--u));
  left: calc(895 / 1728 * 100%);
  display: block;
  width: calc(971 / 1728 * 100%);
  height: calc(621 * var(--u));
  margin: 0;
  pointer-events: none;
}

.cta__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
}

/* Below 1024, the phone card (14936:11319): 680 tall, radius 8, gradient
   140.97°. The photo is 397×254, hung off the bottom-left so it runs past
   the right edge and the card clips it. Only that photo corner is rounded. */
@media (max-width: 1023.98px) {
  .cta {
    height: calc(680 * var(--m));
    border-radius: calc(8 * var(--m));
    background: linear-gradient(140.97deg, var(--brand-1) 7.58%, #199f6f 98.93%);
  }

  .cta__copy {
    z-index: 1;
    gap: calc(32 * var(--m));
    padding: calc(32 * var(--m)) calc(24 * var(--m)) calc(24 * var(--m));
  }

  .cta__text {
    gap: calc(16 * var(--m));
    width: 100%;
  }

  .cta__title {
    font-size: calc(35 * var(--m));
    font-weight: 700;
    line-height: 1.3;
  }

  .cta__lead {
    font-size: calc(16 * var(--m));
    font-weight: 300;
    line-height: 1.5;
  }

  .cta__photo {
    z-index: 0;
    top: auto;
    bottom: 0;
    left: 0;
    width: calc(397 * var(--m));
    height: calc(254 * var(--m));
    border-bottom-left-radius: calc(16 * var(--m));
    overflow: hidden;
  }

  .cta__photo img {
    border-bottom-left-radius: calc(16 * var(--m));
    object-position: center bottom;
  }
}

/* Thank-you page (14934:9378 / 14934:10644). The bar and footer stay.
   The main grows so a short card stays centred and the footer rests on the
   viewport bottom; a taller card scrolls and the footer sits lower.
   The card hugs its content: 80 margins and padding 104 on the desktop
   band, 20 margins and 64×32 padding below 1024 (the phone card, widened). */
body[data-page="thank-you"] {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

body[data-page="thank-you"] > .section-announcement,
body[data-page="thank-you"] > .site-footer {
  flex-shrink: 0;
}

.thank-you {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(80 * var(--u));
}

.thank-you__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(64 * var(--u));
  width: 100%;
  padding: calc(104 * var(--u));
  border-radius: calc(24 * var(--u));
  background: rgba(223, 239, 197, 0.4);
  text-align: center;
}

/* One SVG at both sizes. Explicit box so the global img rule doesn't squash it. */
.thank-you__icon {
  flex: none;
  width: calc(233.8 * var(--u));
  height: calc(217.8 * var(--u));
  max-width: none;
}

.thank-you__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--u));
  width: 100%;
  min-width: 0;
}

.thank-you__title {
  max-width: 100%;
  margin: 0;
  color: var(--brand-1);
  font-family: var(--font-body);
  font-size: calc(84 * var(--u));
  font-weight: 500;
  line-height: 1.2;
}

.thank-you__subtitle {
  max-width: 100%;
  color: #cda00c;
  font-size: calc(34 * var(--u));
  font-weight: 700;
  line-height: 1.3;
}

.thank-you__lead,
.thank-you__return {
  max-width: min(100%, calc(1006 * var(--u)));
  color: var(--text-dark-2);
  font-size: max(16px, 20 * var(--u));
  font-weight: 400;
  line-height: 1.5;
}

.thank-you__return {
  text-decoration: underline;
}

/* Phone card, widened through the tablet band. */
@media (max-width: 1023.98px) {
  .thank-you {
    padding: calc(20 * var(--m));
  }

  .thank-you__card {
    gap: calc(64 * var(--m));
    padding: calc(64 * var(--m)) calc(32 * var(--m));
    border-radius: calc(8 * var(--m));
  }

  .thank-you__icon {
    width: calc(164 * var(--m));
    height: calc(152.7 * var(--m));
  }

  .thank-you__copy {
    gap: calc(16 * var(--m));
  }

  .thank-you__title {
    font-size: calc(54 * var(--m));
  }

  .thank-you__subtitle {
    font-size: calc(24 * var(--m));
  }

  .thank-you__lead,
  .thank-you__return {
    max-width: 100%;
    font-size: calc(18 * var(--m));
    font-weight: 300;
    line-height: 1.4;
  }
}

/* ==========================================================================
   15. Footer + WhatsApp float (#footer, node 14845:7320)
   ========================================================================== */
.site-footer {
  position: relative;
  color: var(--text-light-2);
}

.site-footer__main {
  /* The yellow bar overlaps the green block by 3 (footer 14845:7320). */
  margin-bottom: calc(-3 * var(--u));
  padding-block: var(--space-48);
  background: var(--brand-1);
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-32);
}

.site-footer__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.site-footer__row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.site-footer__label {
  flex-shrink: 0;
  font-size: var(--fs-sub-h2);
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.4;
}

.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(18.667 * var(--u));
  padding: 0;
  list-style: none;
}

.site-footer__list,
.site-footer__address {
  font-size: var(--fs-body-1);
  font-style: normal;
  font-weight: 300;
  line-height: 1.4;
}

.site-footer__list a:hover {
  color: var(--bg-dark-2);
}

/* Divider asset is a horizontal 27px line; Figma rotates it to vertical */
.site-footer__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: calc(27 * var(--u));
}

.site-footer__divider img {
  flex: none;
  width: calc(27 * var(--u));
  max-width: none;
  height: 1px;
  transform: rotate(90deg);
}

.site-footer__socials {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.social-links {
  display: flex;
  gap: var(--space-8);
  padding: 0;
  list-style: none;
}

.social-links__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(63.75 * var(--u));
  height: calc(63.75 * var(--u));
  border: 1px solid rgba(223, 239, 197, 0.2);
  border-radius: var(--radius-8);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.social-links__item img {
  width: calc(23.8 * var(--u));
  height: calc(23.8 * var(--u));
}

.social-links__item--yt img {
  width: calc(32 * var(--u));
  height: calc(25.43 * var(--u));
}

.social-links__item img[src$="linkedin.svg"] {
  width: calc(23.39 * var(--u));
  height: calc(23.39 * var(--u));
}

.social-links__item:hover {
  border-color: rgba(223, 239, 197, 0.6);
  background: rgba(223, 239, 197, 0.08);
}

.site-footer__bar {
  padding: calc(20 * var(--u)) var(--gutter);
  background: var(--brand-3);
  color: var(--bg-dark-1);
  text-align: center;
}

.site-footer__bar p {
  font-size: var(--fs-body-1);
  font-weight: 300;
  line-height: 1.4;
}

/* WhatsApp float. Fixed in the corner until the footer reaches it, then
   .is-docked pins it where Figma draws it: 76 at (14.67, −38) on desktop,
   62 at (15, −31.5) below 1024. The three lengths are the dock helper's
   resting position; initFooter reads them back. */
.whatsapp-float {
  --wa-bottom: calc(24 * var(--u));
  --wa-size: calc(76 * var(--u));
  --wa-dock: calc(38 * var(--u));
  position: fixed;
  left: calc(14.67 * var(--u));
  bottom: var(--wa-bottom);
  z-index: 20;
  width: var(--wa-size);
  height: var(--wa-size);
  border-radius: 50%;
  transition: transform 0.2s var(--ease);
}

.whatsapp-float.is-docked {
  position: absolute;
  top: calc(-1 * var(--wa-dock));
  bottom: auto;
}

.whatsapp-float picture,
.whatsapp-float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.whatsapp-float:hover {
  transform: scale(1.06);
}

@media (max-width: 1279.98px) {
  .site-footer__inner {
    flex-direction: column;
  }
}

/* Phone footer (14934:10506), widened across the tablet band. Contacts wrap
   in a row with 15px dividers; the yellow bar still overlaps the green by 3. */
@media (max-width: 1023.98px) {
  .site-footer__main {
    margin-bottom: calc(-3 * var(--m));
    padding-block: calc(48 * var(--m));
  }

  /* Phone-frame inset (24), including through the tablet band where the
     page gutter is 32. The bar uses the same 24. */
  .site-footer .site-container {
    padding-inline: calc(24 * var(--m));
  }

  .site-footer__inner,
  .site-footer__info {
    gap: calc(24 * var(--m));
  }

  .site-footer__row {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(8 * var(--m));
  }

  .site-footer__label {
    font-size: calc(16 * var(--m));
    line-height: 1.5;
  }

  .site-footer__list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4 * var(--m)) calc(16 * var(--m));
  }

  .site-footer__list > li {
    flex-shrink: 0;
  }

  .site-footer__list,
  .site-footer__address,
  .site-footer__bar p {
    font-size: calc(14 * var(--m));
    font-weight: 300;
    line-height: 1.5;
  }

  .site-footer__list a {
    white-space: nowrap;
  }

  .site-footer__divider {
    height: calc(15 * var(--m));
  }

  .site-footer__divider img {
    width: calc(15 * var(--m));
  }

  .site-footer__address {
    white-space: normal;
  }

  .site-footer__bar {
    padding: calc(20 * var(--m)) calc(24 * var(--m));
  }

  .social-links {
    gap: calc(6.165 * var(--m));
  }

  .social-links__item {
    width: calc(49.127 * var(--m));
    height: calc(49.127 * var(--m));
    border-width: calc(0.771 * var(--m));
    border-radius: calc(6.165 * var(--m));
  }

  .social-links__item img,
  .social-links__item img[src$="linkedin.svg"] {
    width: calc(16.763 * var(--m));
    height: calc(16.763 * var(--m));
  }

  .social-links__item--yt img {
    width: calc(24.659 * var(--m));
    height: calc(19.593 * var(--m));
  }

  .whatsapp-float {
    --wa-bottom: calc(24 * var(--m));
    --wa-size: calc(62 * var(--m));
    --wa-dock: calc(31.5 * var(--m));
    left: calc(15 * var(--m));
  }
}

/* Below 1024 the form is full width, so the float would sit on the fields.
   The hero isolates its stacking context, so those sections have to win as
   a whole. Elsewhere a button, tab or story card only covers the icon
   where they overlap it. */
@media (max-width: 1023.98px) {
  .section-hero,
  .cta,
  .btn-dps,
  .spaces__dots,
  .stories__tabs,
  .story-quote,
  .story-video,
  .stories__arrow,
  .stories__dots {
    position: relative;
    z-index: 21;
  }

  /* Already position: absolute; only the stacking order changes */
  .spaces__arrow {
    z-index: 21;
  }
}