body {
  box-sizing: border-box;
  background-color: var(--color-white);
  font-family: var(--font-primary);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.has-nav-open {
  overflow: hidden;
}

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

/* Structural text that only assistive tech and crawlers need : it is pulled out
   of flow, so it never affects layout or spacing around it. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================
   LAYOUT
========================================= */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--fluid {
  max-width: none;
}

/* =========================================
   BUTTON
========================================= */
button {
  border: none;
  font: inherit;
  background-color: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;

  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius);
  padding: var(--button-padding-y, calc(var(--spacing-md) - 0.5rem)) var(--button-padding-x, var(--spacing-xl));

  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-decoration: none;
  white-space: nowrap;
  min-width: 14rem;
  cursor: pointer;

  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);

  transition: background-color var(--duration) var(--easing),
    border-color var(--duration) var(--easing);
}

.btn:hover {
  background-color: var(--color-light-blue);
  border-color: var(--color-light-blue);
}

/* -- Variants -- */
.btn--light {
  background-color: var(--color-white);
  border-color: rgb(var(--color-black-rgb) / 0.1);
  color: var(--color-blue);
}

.btn--light:hover {
  background-color: var(--color-pastel-light-blue);
  border-color: rgb(var(--color-black-rgb) / 0.1)
}

.btn--grey {
  background-color: rgb(var(--color-black-rgb) / 0.1);
  border-color: rgb(229 229 229);
  color: var(--color-blue);
}

.btn--grey:hover {
  background-color: rgb(var(--color-black-rgb) / 0.16);
  border-color: rgb(var(--color-black-rgb) / 0.16);
}

/* -- Sizes -- */
.btn--xs {
  --button-padding-y: 0.8rem;
  --button-padding-x: 1.4rem;
  min-width: calc(110px + var(--button-padding-x) * 2);
}

.btn--sm {
  --button-padding-y: var(--spacing-sm);
  --button-padding-x: var(--spacing-md);
}

.btn--static {
  cursor: default;
  pointer-events: none;
}

/* -- States -- */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;

  background-color: var(--color-light-grey);
  border-color: var(--color-light-grey);
  color: rgb(var(--color-grey-rgb) / 0.4);
}

/* =========================================
   HOME PAGE
========================================= */
.hero {
  /* header height : mobile inner padding (1.2rem x 2) + 4rem controls */
  --hero-header-h: 6.4rem;
  /* how far the content sits below the header : capped by a share of the
     viewport so short screens still show the whole block on load */
  --hero-content-offset: min(16.5rem, 14svh);

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 390 / 894;
  min-height: 89.4rem;
  color: var(--color-white);
}

@media (min-width: 1024px) {
  .hero {
    /* desktop inner padding (0.8rem x 2) + 4rem controls */
    --hero-header-h: 5.6rem;
    --hero-content-offset: min(25rem, 24svh);

    aspect-ratio: 1440 / 1273;
    min-height: 127.3rem;
  }
}

/* -- Background (image now, video later) -- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Overlay gradients painted on top of the image/video. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.00) 44.02%, rgba(0, 0, 0, 0.60) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 100%);
}

.hero__media-img,
.hero__media video {
  position: absolute;
  inset: 0;
  z-index: 0;

  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-color: lightgray;
}

/* The video sits above the fallback image and fades in only once it is
   actually playing, so a slow or blocked load just leaves the image visible. */
.hero__media-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 400ms ease;
}

.hero__media-video[data-playing="true"] {
  opacity: 1;
}

/* Reduced-motion users keep the still image. */
@media (prefers-reduced-motion: reduce) {
  .hero__media-video {
    display: none;
  }
}

/* -- Load reveal : เหมือน .cover -- */
.hero__media-img,
.hero__media::after,
.hero__container {
  opacity: 0;
}

.hero.is-ready .hero__media-img,
.hero.is-ready .hero__media::after {
  animation: fade-in 1400ms ease-out forwards;
}

.hero.is-ready .hero__container {
  animation: fade-in 1400ms ease-out 300ms forwards;
}

/* Stretches to the full section height so the sticky content has room to
   travel before the section ends. */
.hero__container {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .hero__container {
    max-width: 117rem;
  }
}

/* -- Sticky content : stays put until the section scrolls past --
   It is only as tall as its own content, so the block is fully visible on load,
   the sticky offset is just the header height, and once it reaches the end of
   the section it stops on .hero__search's padding-bottom.
   The heading sits --hero-content-offset below the header and the gap to the
   search block breathes with the viewport, capped at 19rem (190px) so the two
   never drift apart and shrinking on short screens so nothing falls out of
   view. */
.hero__content {
  position: sticky;
  top: var(--hero-header-h);

  display: flex;
  flex-direction: column;
  gap: clamp(var(--spacing-xl), 20svh, 19rem);
  padding-top: var(--hero-content-offset);

  text-align: center;
}

/* Flex children must be allowed to shrink, otherwise the no-wrap keyword row
   stretches the whole column past the container. */
.hero__heading,
.hero__search {
  min-width: 0;
}

.hero__search {
  padding-bottom: 4rem;
}

/* The eyebrow and the title are two lines of one <h1>, so both spans have to
   lay out as blocks. */
.hero__eyebrow,
.hero__title {
  display: block;
}

.hero__eyebrow {
  font-size: 4.4rem;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .hero__eyebrow {
    font-size: 7.2rem;
  }
}

.hero__title {
  text-wrap: balance;
  max-width: 32rem;
  text-align: center;
  margin: var(--spacing-sm) auto 0;
}

@media (min-width: 1024px) {
  .hero__title {
    max-width: unset;
  }
}

.hero__search-label {
  margin-bottom: 1.6rem;
}

/* -- Search field -- */
.hero-search {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;

  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
}

.hero-search__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;

  border: none;
  background: none;
  outline: none;
  color: var(--color-white);
  font-family: inherit;
  padding: 1.6rem 2rem;
}

.hero-search__input::placeholder {
  color: var(--color-white);
  opacity: 1;
}

.hero-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Uses the shared .btn component : only the radius and the flush-right,
   full-height fit inside the field are specific to the hero search.
   The -1px margins pull the button out over the field's 1px border so it sits
   flush with the outer edge, and the right corners keep the outer 12px radius. */
.hero-search .btn {
  flex: 0 0 auto;
  border-radius: 12px;
  margin: -1px -1px -1px 0;
  min-width: 7rem;
  padding-inline: 2rem;
}

/* Mobile : icon only, the label is collapsed away. */
.hero-search .btn {
  font-size: 0;
  gap: 0;
}

.hero-search .btn__icon {
  font-size: 2rem;
}

@media (min-width: 1024px) {
  .hero-search .btn__icon {
    font-size: 1.4rem;
  }


  .hero__search {
    text-align: left;
    padding-bottom: 6rem;
  }

  .hero-search__input {
    padding-block: 1.8rem;
  }

  .hero-search .btn {
    padding-inline: var(--spacing-xl);
    gap: 1.4rem;
    min-width: 16rem;
    font-size: inherit;
  }
}

/* -- Keyword pills : one row, scrollable when they overflow -- */
.hero__keywords {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-xs);

  margin-top: var(--spacing-sm);
  /* full-bleed scroll area on mobile so the row can be swiped edge to edge */
  margin-inline: calc(var(--container-gutter) * -1);
  padding-inline: var(--container-gutter);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hero__keywords::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .hero__keywords {
    margin-inline: 0;
    padding-inline: 0;
  }
}

.btn-keyword {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;

  border-radius: 34px;
  padding: 6px 20px 6px 6px;

  background-color: var(--color-blue);
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  transition: background-color var(--duration) var(--easing);
}

.btn-keyword:hover {
  background-color: var(--color-light-blue);
}

.btn-keyword__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: var(--border-width) solid rgb(var(--color-white-rgb) / 0.1);
  font-size: 1.6rem;
}

.btn-keyword__icon i {
  font-size: 1rem;
}


/* =========================================
   GRAPHIC BG
========================================= */
/* Decorative graphic at the top-right of a page's first section
   (components/ui/graphic-bg.php). Anchored to the section box, so any section
   using the same top padding renders it identically. */
.graphic-bg {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: -1;
  width: 100%;
  max-width: 57.6rem;
  height: 12rem;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .graphic-bg {
    top: 0;
    height: 20rem;
  }
}

.graphic-bg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

@media (min-width: 1024px) {
  .graphic-bg__img {
    object-fit: cover;
    object-position: right bottom;
  }
}


/* =========================================
   PAGE INTRO
========================================= */
/* Centred headline + lead paragraph that opens a page under the cover, with
   `.graphic-bg` sitting behind it. The section owns the 10rem top padding the
   graphic anchors to. */
.page-intro {
  position: relative;
  padding-top: 10rem;
}

.page-intro__inner {
  text-align: center;
}

.page-intro__title {
  color: var(--color-blue);
  max-width: 28rem;
  margin: 0 auto 2.8rem;
}

@media (min-width: 1024px) {
  .page-intro__title {
    max-width: 51.8rem;
  }
}

@media (min-width: 1450px) {
  .page-intro__title {
    max-width: 60rem;
  }
}

.page-intro__desc {
  color: rgb(var(--color-grey-rgb) / 0.7);
  max-width: 64rem;
  margin-inline: auto;
}


/* =========================================
   COVER
========================================= */
.cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;

  width: 100%;
  aspect-ratio: 390 / 520;
  overflow: hidden;
  text-align: center;
}

@media (min-width: 768px) {
  .cover {
    aspect-ratio: 1440 / 610;
  }
}

.cover__media {
  position: absolute;
  inset: 0;
  z-index: -1;

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cover__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(180deg, rgb(0 0 0 / 0) 44.02%, rgb(0 0 0 / 0.6) 100%),
    linear-gradient(0deg, rgb(0 0 0 / 0.32) 0%, rgb(0 0 0 / 0.32) 100%);
}

.cover__content {
  width: 100%;
  padding: 5rem var(--container-gutter);
  color: var(--color-white);
}

.cover__text {
  margin: 0;
}

/* -- Load reveal --
   รูป cover มักโหลดเสร็จหลังหน้าเพจ ทำให้ภาพกระตุกขึ้นมาทีหลัง จึงเริ่มที่
   opacity 0 แล้ว fade เข้าเมื่อรูปโหลดจริง : `is-ready` มาจาก onload/onerror
   บนตัว <img> เอง (ดู components/layout/cover.php) ไม่ต้องพึ่งไฟล์ JS

   ใช้ animation ไม่ใช่ transition : ถ้ารูปมาจากแคช คลาสจะถูกใส่เร็วจนเบราว์เซอร์
   ไม่เคยวาดเฟรม opacity 0 เลย transition จึงถูกข้ามแล้วภาพผลุบขึ้นมา ส่วน
   animation เล่นจาก 0% เสมอไม่ว่าจะเริ่มตอนไหน

   ระวัง : .cover__media อยู่ z-index -1 คืออยู่หลัง background ของ .cover เอง
   จึงห้ามใส่สีพื้นให้ .cover ไม่งั้นรูปจะถูกบังถาวร */
.cover__media,
.cover__overlay,
.cover__content {
  opacity: 0;
}

/* ภาพกับเงาทับจางขึ้นพร้อมกัน คำบรรยายตามมาทีหลังเล็กน้อย */
.cover.is-ready .cover__media,
.cover.is-ready .cover__overlay {
  animation: fade-in 1400ms ease-out forwards;
}

.cover.is-ready .cover__content {
  animation: fade-in 1400ms ease-out 300ms forwards;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

/* ปิด motion ให้คนที่ตั้งค่าไว้ : จางเข้าสั้นๆ พร้อมกันทั้งหมด */
@media (prefers-reduced-motion: reduce) {

  .cover.is-ready .cover__media,
  .cover.is-ready .cover__overlay,
  .cover.is-ready .cover__content,
  .hero.is-ready .hero__media-img,
  .hero.is-ready .hero__media::after,
  .hero.is-ready .hero__container {
    animation-duration: 300ms;
    animation-delay: 0ms;
  }
}

/* =========================================
   CARD
========================================= */
.card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-xl) - 0.5rem);
  width: 31.2rem;
}

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

@media (min-width: 1024px) {
  .card {
    width: 51.6rem;
  }
}

.card__media {
  width: 100%;
  aspect-ratio: 52 / 29;
  border-radius: 1.8rem;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .card__media {
    aspect-ratio: 245 / 137;
  }
}

.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.card__title {
  color: var(--color-blue);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-grey);
}

.card__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: auto;
}

.card__actions .btn {
  font-weight: 400;
}

/* =========================================
   EXECUTIVE CARD
========================================= */
.executive-cards {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rem var(--container-gutter) 12rem;
}

.executive-cards__lead {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 6rem;
}

@media (min-width: 1024px) {
  .executive-cards__lead {
    margin-bottom: 8rem;
  }
}

.executive-cards__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  width: 100%;
}

.executive-cards__row.is-multiline {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.executive-cards__row-line {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: inherit;
  width: 100%;
}

.executive-cards__row-rest {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: inherit;
  width: 100%;
}

.executive-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

@media (min-width: 1024px) {
  .executive-card-wrap {
    width: 24.8rem;
  }
}

.executive-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-light-grey);
  border-radius: 1.8rem;
  padding: 2rem;
  width: 100%;
}

.executive-card__media {
  width: 100%;
  aspect-ratio: 121 / 161;
  border-radius: 0.8rem;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .executive-card__media {
    width: 20.8rem;
    aspect-ratio: 124 / 165;
  }
}

.executive-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.executive-card__content {
  margin-top: 2.8rem;
}

.executive-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.executive-card__name,
.executive-card__position {
  color: var(--color-blue);
}

.executive-card__position {
  color: rgb(var(--color-blue-rgb) / 0.5);
}

.executive-card__contact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1.8rem;
}

.executive-card__contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-blue);
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

.executive-card__contact-item:hover {
  color: var(--color-light-blue);
}

.executive-card__contact-item .icon-mail,
.executive-card__contact-item .icon-call {
  font-size: 1.2rem;
  transition: color var(--duration) var(--easing);
}

.executive-card__duties {
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows 0.3s ease;
}

.executive-card-wrap.is-open .executive-card__duties {
  grid-template-rows: 1fr;
}

.executive-card__duties-inner {
  overflow: hidden;
  min-height: 0;
}

.executive-card__duties-content {
  padding-top: 1.8rem;
}

.executive-card__duties-title {
  color: var(--color-blue);
  font-weight: 600;
}

.executive-card__duties-list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--color-blue);
}

.executive-card__duties-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.executive-card__duties-list li::before {
  content: '';
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.6rem;
  border-radius: 50%;
  background-color: currentColor;
}

.executive-card__toggle {
  display: flex;
  margin: 0 auto;
  border-top-left-radius: 0;
  border-top-right-radius: 0;

  text-transform: none;
}

.executive-card__toggle .icon-chevron-down {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.executive-card-wrap.is-open .executive-card__toggle .icon-chevron-down {
  transform: rotate(180deg);
}

/* =========================================
   MEDIA CARDS
========================================= */
.media-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6rem 0;
  padding-block: 6rem 10rem;
  padding-inline: var(--container-gutter);
}

@media (min-width: 1024px) {
  .media-cards {
    gap: 8rem var(--spacing-md);
    padding-top: var(--spacing-xl);
  }
}

.media-cards .card {
  width: 100%;
  cursor: pointer;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transition-delay: var(--card-delay, 0s);
}

.media-cards .card.is-filtering-out {
  opacity: 0;
  transform: translateY(1.2rem) scale(0.98);
  pointer-events: none;
  transition-delay: 0s;
}

@media (min-width: 1024px) {
  .media-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.news-pagination {
  margin-bottom: 12rem;
}

/* =========================================
   DOWNLOAD LIST
========================================= */
.download-list {
  display: flex;
  flex-direction: column;
  padding-inline: var(--container-gutter);
  margin-bottom: 12rem;
}

@media (min-width: 1024px) {
  .download-list {
    align-items: center;
    /* design width: 784px at a 1440px viewport -> 784 / 1440 * 100 = 54.444vw */
    --download-list-width: 54.444vw;
  }
}

.download-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-block: var(--spacing-lg);
  border-top: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

.download-list__item:last-child {
  border-bottom: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

@media (min-width: 1024px) {
  .download-list__item {
    width: var(--download-list-width);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    padding-block: var(--spacing-xl);
  }
}

.download-list__item .btn {
  width: 100%;
}

@media (min-width: 1024px) {
  .download-list__item .btn {
    width: auto;
  }
}

.download-list__text {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.download-list__icon {
  flex: none;
  font-size: 1.9rem;
  color: var(--color-blue);
  transform: translateY(2px);
}

.download-list__title {
  color: var(--color-blue);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.download-list__item .btn {
  align-self: flex-end;
  flex: none;
}

@media (min-width: 1024px) {
  .download-list__item .btn {
    align-self: center;
  }
}

/* =========================================
   DOCUMENT PAGE
========================================= */
.document-page {
  position: relative;
  overflow: hidden;
  padding-block: 10rem 12rem;
}

@media (min-width: 1024px) {
  .document-page {
    overflow: visible;
    padding-top: 12rem;
  }
}

.document-page__graphic {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 12rem;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .document-page__graphic {
    bottom: 0;
    left: auto;
    right: 0;
    width: 57.6rem;
    max-width: 50%;
    height: 20rem;
  }
}

.document-page__graphic-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

@media (min-width: 1024px) {
  .document-page__graphic-img {
    object-fit: cover;
    object-position: right center;
  }
}

.document-page__title {
  color: var(--color-blue);
  text-align: center;
  padding-bottom: calc(6rem - 0.5rem);
}

@media (min-width: 1024px) {
  .document-page__title {
    padding-bottom: 8rem;
  }
}

.document-layout {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  max-width: 50rem;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .document-layout {
    /* design: 272px nav + 131px gap + 918px content, kept as a ratio of the
       container's own width so it can never exceed it */
    display: grid;
    grid-template-columns: 272fr 918fr;
    align-items: start;
    gap: 13rem;
    max-width: unset;
  }
}

.document-nav {
  width: 100%;
  min-width: 0;
}

.document-nav__select-wrap {
  position: relative;
  display: block;
}

@media (min-width: 1024px) {
  .document-nav__select-wrap {
    display: none;
  }
}

select.document-nav__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: block;
  border: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  border-radius: var(--border-radius);
  padding: calc(var(--spacing-md) - 0.5rem) var(--spacing-xl);
  padding-right: 4.4rem;
  background-color: var(--color-white);
  color: var(--color-blue);
  font: inherit;
  font-size: var(--font-size-button);
  cursor: pointer;
}

.document-nav__select-icon {
  position: absolute;
  top: 50%;
  right: var(--spacing-lg);
  transform: translateY(-50%);
  color: var(--color-white);
  font-size: 1.6rem;
  pointer-events: none;
  z-index: 1;
}

/* Tom Select : the mobile trigger reuses the .btn (default variant) look as-is —
   only difference is it can wrap to 2 lines and reserves space for the chevron. */
.document-nav__select-wrap .ts-wrapper {
  width: 100%;
}

.document-nav__select-wrap .ts-control.btn {
  width: 100%;
  min-height: unset;
  min-width: 0;
  box-shadow: none;
  outline: none;
  white-space: normal;
  /* !important : Tom Select toggles focus/input-active/dropdown-active classes on
     the wrapper on every interaction, and some of its own built-in rules for those
     states outrank this one on specificity — pin the button look so it never shifts. */
  background-color: var(--color-blue) !important;
  border-color: var(--color-blue) !important;
  cursor: pointer !important;
  /* Tom Select also forces its own padding-right (for a caret it doesn't render
     here) with !important, which otherwise shrinks the right padding below the
     left and skews the centered label — pin both sides back to the .btn default. */
  padding-left: var(--spacing-xl) !important;
  padding-right: var(--spacing-xl) !important;
}

.document-nav__select-wrap .ts-control .item {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  width: 100%;
  /* Equal inset on both sides (not just a right-side reserve) keeps the label
     truly centered on the button; it also clears the chevron, so a label that
     would otherwise brush against it wraps to a second line instead. */
  padding: 0 var(--spacing-lg);
  text-align: center;
}

.document-nav__ts-dropdown {
  background-color: var(--color-white);
  border: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 0.4rem 1.6rem rgb(var(--color-black-rgb) / 0.08);
  margin-top: var(--spacing-xs);
  font: inherit;
}

/* Flipped above the control (JS toggles this when there's no room below) —
   the JS sets an explicit top offset, so cancel the below-control margin. */
.document-nav__ts-dropdown.ts-dropdown--top {
  margin-top: 0;
}

.document-nav__ts-dropdown .option {
  padding: var(--spacing-sm) var(--spacing-lg);
  text-align: center;
  white-space: normal;
  color: var(--color-blue);
  font-size: var(--font-size-button);
  border-bottom: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

.document-nav__ts-dropdown .option:last-child {
  border-bottom: none;
}

.document-nav__ts-dropdown .option.active,
.document-nav__ts-dropdown .option:hover {
  background-color: var(--color-pastel-light-blue);
  color: var(--color-blue);
}

.document-nav__ts-dropdown .option.selected {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.document-nav__list {
  display: none;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
}

@media (min-width: 1024px) {
  .document-nav__list {
    display: flex;
  }
}

.document-nav__list .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  min-width: 0;
  padding-inline: 1.3rem;
}

.document-nav__list [aria-pressed="true"] {
  pointer-events: none;
}

.document-layout__content {
  width: 100%;
  min-width: 0;
}

.document-layout__content .download-list--full {
  padding-inline: 0;
  align-items: stretch;
  margin-bottom: 0;
}

.document-layout__content .download-list--full .download-list__item {
  width: 100%;
  border-top: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

.document-layout__content .download-list--full .download-list__item:last-child {
  border-bottom: 0;
}

@media (min-width: 1024px) {
  .document-layout__content .download-list--full .download-list__item:last-child {
    border-bottom: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  }
}

/* =========================================
   FAQ PAGE
========================================= */
.faq-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 12rem;
}

@media (min-width: 1024px) {
  .faq-list {
    align-items: center;
  }
}

.faq-item {
  display: flex;
  flex-direction: column;
  border-top: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

.faq-item:last-child {
  border-bottom: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

@media (min-width: 1024px) {
  .faq-item {
    /* design width: 784px at a 1440px viewport -> 784 / 1440 * 100 = 54.444vw */
    width: 54.444vw;
  }
}

.faq-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  width: 100%;
  padding-block: var(--spacing-lg);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .faq-item__header {
    padding-block: var(--spacing-xl);
  }
}

.faq-item__text {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  min-width: 0;
}

.faq-item__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-color: var(--color-blue);
  transition: background-color 0.2s ease;
}

.faq-item__icon i {
  font-size: 1.2rem;
  color: var(--color-white);
  transition: color 0.2s ease;
}

.faq-item__title {
  color: var(--color-blue);
}

.faq-item__chevron {
  flex: none;
  font-size: 1rem;
  color: var(--color-blue);
  transition: transform 0.2s ease;
}

@media (min-width: 1024px) {
  .faq-item__chevron {
    font-size: 1.6rem;
  }
}

.faq-item.is-open .faq-item__icon {
  background-color: var(--color-pastel-light-blue);
}

.faq-item.is-open .faq-item__icon i {
  color: var(--color-blue);
}

.faq-item.is-open .faq-item__chevron {
  transform: rotate(180deg);
}

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows 0.3s ease;
}

@media (min-width: 1024px) {
  .faq-item__panel {
    /* design width: 650px at a 784px item -> 650 / 784 * 100 = 82.91% */
    width: 82.91%;
  }
}

.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
}

.faq-item__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-item__answer {
  padding-bottom: var(--spacing-lg);
  color: rgb(var(--color-black-rgb) / 0.7);
  white-space: pre-line;
}

@media (min-width: 1024px) {
  .faq-item__answer {
    padding-bottom: var(--spacing-xl);
  }
}

/* =========================================
   FINANCIAL REPORT PAGE
========================================= */
.financial-report-page .document-page__graphic {
  bottom: -3rem;
}

@media (min-width: 1024px) {
  .financial-report-page .document-page__graphic {
    bottom: 0;
  }
}

.financial-report-groups {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  max-width: 50rem;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .financial-report-groups {
    /* design width: 784px at a 1440px viewport -> 784 / 1440 * 100 = 54.444vw */
    max-width: 54.444vw;
  }
}

.financial-report-group+.financial-report-group {
  padding-top: var(--spacing-xl);
  border-top: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

.financial-report-group__title {
  margin-bottom: 2.8rem;
}

.financial-report-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  list-style: none;
  counter-reset: financial-report;
  padding-left: var(--spacing-lg);
}

.financial-report-item {
  counter-increment: financial-report;
}

.financial-report-item__link {
  position: relative;
  display: block;
  padding-left: 2.8rem;
  color: var(--color-blue);
  text-decoration: none;
}

.financial-report-item__link:hover {
  text-decoration: underline;
}

.financial-report-item__link::before {
  content: counter(financial-report) ".";
  position: absolute;
  left: 0;
}

/* =========================================
   ITA PAGE
========================================= */
/* One year panel is shown at a time, so it always starts at the top of the
   column : a margin here would open a gap above every year but the first. */
.ita-year {
  margin-top: 0;
}

.ita-year__title {
  color: var(--color-blue);
  margin-bottom: calc(var(--spacing-xl) - 0.5rem);
}

.ita-group {
  padding-bottom: calc(var(--spacing-xl) - 0.3rem);
  margin-bottom: calc(var(--spacing-xl) - 0.3rem);
  border-bottom: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

.ita-group__title {
  color: var(--color-blue);
  margin-bottom: calc(var(--spacing-xl) - 0.5rem);
}

.ita-subgroup__label {
  color: rgb(var(--color-grey-rgb) / 0.5);
  margin-top: calc(var(--spacing-xl) - 0.5rem);
  margin-bottom: calc(var(--spacing-md) - 0.3rem);
  padding-left: 2.4rem;
}

.ita-item__title {
  color: var(--color-blue);
  padding-left: 2.4rem;
  margin-bottom: calc(var(--spacing-lg) - 0.5rem);
}

.ita-item__title:last-child {
  margin-bottom: 0;
}

.ita-item__title-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--text-underline-offset);
  text-decoration-thickness: var(--text-decoration-thickness);
  transition: color var(--duration) var(--easing);
}

.ita-item__title-link:hover {
  color: var(--color-grey);
}

.ita-item__children {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-left: 4.8rem;
  margin-bottom: calc(var(--spacing-xl) - 0.5rem);
  list-style: disc;
}

.ita-item__child {
  color: rgb(var(--color-grey-rgb) / 0.7);
  transition: color var(--duration) var(--easing);
}

.ita-item__child::marker {
  transition: color var(--duration) var(--easing);
}

.ita-item__child:hover {
  color: var(--color-blue);
}

.ita-item__child-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--text-underline-offset);
  text-decoration-thickness: var(--text-decoration-thickness);
  transition: color var(--duration) var(--easing);
}

.ita-item__child-link:hover {
  color: var(--color-blue);
}

/* =========================================
   SE FUND PAGE
========================================= */
/* Every section below the cover shares the same vertical rhythm, and each one
   after the first is separated by a hairline that stops at the container gutter. */
section.se-fund-section {
  position: relative;
  padding-block: 10rem;
}

section.se-fund-section+section.se-fund-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--container-gutter);
  right: var(--container-gutter);
  border-top: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

.se-fund-details__title {
  color: var(--color-blue);
  text-align: center;
  padding-bottom: calc(6rem - 0.5rem);
}

@media (min-width: 1024px) {
  .se-fund-details__title {
    padding-bottom: 8rem;
  }
}

/* The content column keeps a fixed height and scrolls its own accordion, so
   the tab rail on the left stays put however long the open topic is.
   data-lenis-prevent hands the wheel back to the browser inside this area. */
.se-fund-panel {
  position: relative;
}

.se-fund-panel__scroll {
  max-height: 58rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--spacing-md);
  /* keep the bar drawn instead of macOS' overlay one, so the cut-off content
     is signposted while the topic is open */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-grey-rgb) / 0.3) rgb(var(--color-grey-rgb) / 0.08);
  padding-bottom: 4rem;
}

.se-fund-panel__scroll::-webkit-scrollbar {
  width: 6px;
}

.se-fund-panel__scroll::-webkit-scrollbar-track {
  background: rgb(var(--color-grey-rgb) / 0.08);
  border-radius: 999px;
}

.se-fund-panel__scroll::-webkit-scrollbar-thumb {
  background: rgb(var(--color-grey-rgb) / 0.3);
  border-radius: 999px;
}

/* fade the last 40px of the scroll area into the page */
.se-fund-panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
  pointer-events: none;
}

/* Plain (non-collapse) tab content : heading + body */
.se-fund-block {
  margin-bottom: 5.4rem;
}

@media (min-width: 1024px) {

  .se-fund-block,
  .se-fund-item .faq-item__panel {
    width: 80%;
  }
}

.se-fund-block:last-child {
  margin-bottom: 0;
}

.se-fund-block__title {
  color: var(--color-blue);
  margin-bottom: 2.4rem;
}

.se-fund-block__body {
  color: rgb(var(--color-grey-rgb) / 0.7);
  white-space: pre-line;
}

/* A body set to text-h4 reads as a lead line, not paragraph copy : it keeps the
   heading blue and sits tighter under the title above it. */
.se-fund-block__body.text-h4 {
  color: var(--color-blue);
}

.se-fund-block__title:has(+ .se-fund-block__body.text-h4) {
  margin-bottom: 1.8rem;
}

/* Opt-in centred block : heading, body and image all share the centre line */
.se-fund-block--center {
  text-align: center;
}

/* Trailing image below a block's content (QR code, diagram, ...) :
   image_width caps it inline, the figure stays centred in its block. */
.se-fund-block__figure {
  margin: 6rem auto 0;
  width: 100%;
}

/* ...unless nothing precedes it in the block */
.se-fund-block__figure:first-child {
  margin-top: 0;
}

.se-fund-block:not(.se-fund-block--center) .se-fund-block__figure {
  margin-left: 0;
}

.se-fund-block__image {
  display: block;
  width: 100%;
  height: auto;
}

.se-fund-block__caption {
  margin-top: 1.2rem;
  color: rgb(var(--color-grey-rgb) / 0.7);
}

.se-fund-list {
  display: flex;
  flex-direction: column;
}

/* A tab may mix plain blocks with an accordion : keep them apart even though
   the last block drops its own margin. */
.se-fund-block+.se-fund-list {
  margin-top: 5.4rem;
}

/* Fallback when a tab has no content yet */
.se-fund-panel__empty {
  color: rgb(var(--color-grey-rgb) / 0.7);
}

/* Reuses the FAQ accordion (.faq-item + its JS), minus the FAQ's fixed
   design width : here the list spans the content column. */
@media (min-width: 1024px) {

  .se-fund-item {
    width: 100%;
  }
}

.se-fund-item__answer {
  color: rgb(var(--color-grey-rgb) / 0.7);
}

/* =========================================
   MEDIA HERO
========================================= */
.media-hero {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .media-hero {
    margin-top: 0;
  }
}

.media-hero__graphic {
  position: relative;
  width: 100%;
  max-width: 57.6rem;
  height: 12rem;
}

@media (min-width: 1024px) {
  .media-hero__graphic {
    height: 20rem;
  }
}

.media-hero__graphic-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

@media (min-width: 1024px) {
  .media-hero__graphic-img {
    object-fit: cover;
    object-position: right bottom;
  }
}

.media-hero__buttons {
  position: absolute;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--spacing-xs);
  bottom: 0;
  left: 0;
  width: 100%;
  padding-inline: var(--container-gutter);
}

.media-hero__buttons [data-media-filter] {
  justify-content: center;
}

@media (min-width: 1024px) {
  .media-hero__buttons {
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4.7rem;
    padding-inline: 0;
  }
}

.media-hero__buttons [data-media-filter][aria-pressed="true"] {
  pointer-events: none;
}

/* =========================================
   NEWS HERO
========================================= */
.news-hero {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .news-hero {
    margin-top: 0;
  }
}

.news-hero__graphic {
  position: relative;
  width: 100%;
  max-width: 57.6rem;
  height: 12rem;
}

@media (min-width: 1024px) {
  .news-hero__graphic {
    height: 20rem;
  }
}

.news-hero__graphic-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

@media (min-width: 1024px) {
  .news-hero__graphic-img {
    object-fit: cover;
    object-position: right bottom;
  }
}

.news-hero__buttons {
  position: absolute;
  display: flex;
  gap: var(--spacing-xs);
  bottom: 0;
  left: 0;
  width: 100%;
  padding-inline: var(--container-gutter);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.news-hero__buttons::-webkit-scrollbar {
  display: none;
}

.news-hero__buttons [data-news-filter] {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .news-hero__buttons {
    width: auto;
    max-width: 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4.7rem;
    padding-inline: 0;
  }
}

.news-hero__buttons [data-news-filter][aria-pressed="true"] {
  pointer-events: none;
}

/* =========================================
   MEDIA SINGLE
========================================= */
.media-single {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rem var(--container-gutter) 0;
  /* design width: 783px at a 1440px viewport -> 783 / 1440 * 100 = 54.375vw */
  --content-width: 54.375vw;
}

.media-single::after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

@media (min-width: 1024px) {
  .media-single {
    padding-top: 12rem;
  }
}

.media-single__meta {
  margin-top: 0;
}

.media-single__title {
  color: var(--color-blue);
  padding-block: 2.8rem 6rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .media-single__title {
    padding-bottom: 8rem;
  }
}

.media-single__gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

@media (min-width: 1024px) {
  .media-single__gallery {
    gap: var(--spacing-md);
  }
}

.media-single__main {
  width: 100%;
  aspect-ratio: 9 / 5;
  border-radius: 1.8rem;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .media-single__main {
    width: var(--content-width);
    max-width: 100%;
  }
}

.media-single__main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
}

.media-single__main-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
}

.media-single__main--video {
  position: relative;
}

.media-single__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.media-single__play::before {
  content: "";
  position: absolute;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: rgb(var(--color-white-rgb) / 0.2);
  backdrop-filter: blur(4px);
}

.media-single__play .icon-play {
  position: relative;
  font-size: 2.4rem;
  color: var(--color-white);
  line-height: 1;
}

.media-single__main--video.is-playing .media-single__play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.media-single__thumbs {
  position: relative;
  width: 100%;
}

@media (min-width: 1024px) {
  .media-single__thumbs {
    width: var(--content-width);
    max-width: 100%;
  }
}

.media-single__thumbs-track {
  display: flex;
  width: 100%;
  gap: var(--spacing-sm);
  overflow: hidden;
  scroll-behavior: smooth;
}

@media (min-width: 1024px) {
  .media-single__thumbs-track {
    gap: var(--spacing-md);
  }
}

.media-single__thumb {
  position: relative;
  flex: 0 0 calc((100% - 2 * var(--spacing-sm)) / 3);
  aspect-ratio: 3 / 2;
  border: none;
  border-radius: 1.2rem;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .media-single__thumb {
    flex: 0 0 calc((100% - 2 * var(--spacing-md)) / 3);
  }
}

.media-single__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.media-single__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(var(--color-blue-rgb) / 0.32) 0%, rgb(var(--color-blue-rgb) / 0.32) 100%);
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
}

.media-single__thumb.is-active::after {
  opacity: 1;
}

.media-single__thumbs-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-blue);
  cursor: pointer;
  transition: opacity var(--duration) var(--easing);
}

.media-single__thumbs-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.media-single__thumbs-nav--prev {
  left: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.media-single__thumbs-nav--next {
  right: 0;
  transform: translate(50%, -50%) rotate(-90deg);
}

.media-single__thumbs-nav i {
  font-size: 1.5rem;
}

.media-single__lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
}

.media-single__lightbox.is-open {
  display: flex;
}

.media-single__lightbox-frame {
  width: 40.486vw;
  /* max-width: 58.3rem; */
  overflow: hidden;
}

.media-single__lightbox-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
  object-position: center;
}

.media-single__lightbox-close {
  position: absolute;
  top: 4rem;
  right: 4rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  border: var(--border-width) solid var(--color-white);
  color: var(--color-white);
  cursor: pointer;
}

.media-single__lightbox-close i {
  font-size: 1.6rem;
  color: var(--color-white);
}

.media-single__lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.7rem;
  height: 3.7rem;
  border: var(--border-width) solid #D9D9D9;
  border-radius: 50%;
  background: transparent;
  color: var(--color-white);
  background-color: var(--color-white);
  cursor: pointer;
  transition: opacity var(--duration) var(--easing);
}

.media-single__lightbox-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.media-single__lightbox-nav--prev {
  left: 3rem;
  transform: translateY(-50%) rotate(90deg);
}

.media-single__lightbox-nav--next {
  right: 3rem;
  transform: translateY(-50%) rotate(-90deg);
}

@media (min-width: 1024px) {
  .media-single__lightbox-nav--prev {
    left: 12rem;
  }

  .media-single__lightbox-nav--next {
    right: 12rem;
  }
}

.media-single__lightbox-nav i {
  font-size: 1.6rem;
  color: var(--color-blue);
}

@media (max-width: 1023px) {
  .media-single__lightbox.is-open {
    display: grid;
    grid-template-areas:
      "close close"
      "frame frame"
      "prev next";
    grid-template-columns: 1fr 1fr;
    column-gap: 0.4rem;
    align-content: center;
    justify-content: center;
    padding-inline: 2.4rem;
  }

  .media-single__lightbox-frame {
    grid-area: frame;
    width: 100%;
  }

  .media-single__lightbox-close {
    grid-area: close;
    position: static;
    justify-self: end;
    margin-bottom: 2.4rem;
  }

  .media-single__lightbox-nav {
    position: static;
    margin-top: 3.6rem;
  }

  .media-single__lightbox-nav--prev {
    grid-area: prev;
    justify-self: end;
    left: auto;
    transform: rotate(90deg);
  }

  .media-single__lightbox-nav--next {
    grid-area: next;
    justify-self: start;
    right: auto;
    transform: rotate(-90deg);
  }
}

.media-single__desc {
  width: 100%;
  color: var(--color-grey);
  text-align: center;
  padding-top: 6rem;
}

@media (min-width: 1024px) {
  .media-single__desc {
    width: var(--content-width);
    max-width: 100%;
    padding-top: 8rem;
  }
}

.media-single__desc p+p {
  margin-top: var(--spacing-sm);
}

/* =========================================
   NEWS SINGLE
========================================= */
.news-single {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rem var(--container-gutter) 0;
  /* design width: 783px at a 1440px viewport -> 783 / 1440 * 100 = 54.375vw */
  --content-width: 54.375vw;
}

.news-single::after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

@media (min-width: 1024px) {
  .news-single {
    padding-top: 12rem;
  }
}

.news-single__meta {
  margin-top: 0;
}

.news-single__title {
  color: var(--color-blue);
  padding-block: 2.8rem 6rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .news-single__title {
    padding-bottom: 8rem;
  }
}

.news-single__gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
}

@media (min-width: 1024px) {
  .news-single__gallery {
    gap: 8rem;
  }
}

.news-single__main {
  width: 100%;
  aspect-ratio: 9 / 5;
  border-radius: 1.8rem;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .news-single__main {
    width: var(--content-width);
    max-width: 100%;
  }
}

.news-single__main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.news-single__content {
  width: 100%;
  color: var(--color-black);
}

@media (min-width: 1024px) {
  .news-single__content {
    width: var(--content-width);
    max-width: 100%;
  }
}

.news-single__content p+p {
  margin-top: var(--spacing-sm);
}

.news-single__thumbs {
  position: relative;
  width: 100%;
}

@media (min-width: 1024px) {
  .news-single__thumbs {
    width: var(--content-width);
    max-width: 100%;
  }
}

.news-single__thumbs-track {
  display: flex;
  width: 100%;
  gap: var(--spacing-sm);
  overflow: hidden;
  scroll-behavior: smooth;
}

@media (min-width: 1024px) {
  .news-single__thumbs-track {
    gap: var(--spacing-md);
  }
}

.news-single__thumb {
  position: relative;
  flex: 0 0 calc((100% - 2 * var(--spacing-sm)) / 3);
  aspect-ratio: 3 / 2;
  border: none;
  border-radius: 1.2rem;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .news-single__thumb {
    flex: 0 0 calc((100% - 2 * var(--spacing-md)) / 3);
  }
}

.news-single__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.news-single__thumbs-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-blue);
  cursor: pointer;
  transition: opacity var(--duration) var(--easing);
}

.news-single__thumbs-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.news-single__thumbs-nav--prev {
  left: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.news-single__thumbs-nav--next {
  right: 0;
  transform: translate(50%, -50%) rotate(-90deg);
}

.news-single__thumbs-nav i {
  font-size: 1.5rem;
}

.news-single__lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
}

.news-single__lightbox.is-open {
  display: flex;
}

.news-single__lightbox-frame {
  width: 40.486vw;
  overflow: hidden;
}

.news-single__lightbox-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
  object-position: center;
}

.news-single__lightbox-close {
  position: absolute;
  top: 4rem;
  right: 4rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  border: var(--border-width) solid var(--color-white);
  color: var(--color-white);
  cursor: pointer;
}

.news-single__lightbox-close i {
  font-size: 1.6rem;
  color: var(--color-white);
}

.news-single__lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.7rem;
  height: 3.7rem;
  border: var(--border-width) solid #D9D9D9;
  border-radius: 50%;
  background: transparent;
  color: var(--color-white);
  background-color: var(--color-white);
  cursor: pointer;
  transition: opacity var(--duration) var(--easing);
}

.news-single__lightbox-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.news-single__lightbox-nav--prev {
  left: 3rem;
  transform: translateY(-50%) rotate(90deg);
}

.news-single__lightbox-nav--next {
  right: 3rem;
  transform: translateY(-50%) rotate(-90deg);
}

@media (min-width: 1024px) {
  .news-single__lightbox-nav--prev {
    left: 12rem;
  }

  .news-single__lightbox-nav--next {
    right: 12rem;
  }
}

.news-single__lightbox-nav i {
  font-size: 1.6rem;
  color: var(--color-blue);
}

@media (max-width: 1023px) {
  .news-single__lightbox.is-open {
    display: grid;
    grid-template-areas:
      "close close"
      "frame frame"
      "prev next";
    grid-template-columns: 1fr 1fr;
    column-gap: 0.4rem;
    align-content: center;
    justify-content: center;
    padding-inline: 2.4rem;
  }

  .news-single__lightbox-frame {
    grid-area: frame;
    width: 100%;
  }

  .news-single__lightbox-close {
    grid-area: close;
    position: static;
    justify-self: end;
    margin-bottom: 2.4rem;
  }

  .news-single__lightbox-nav {
    position: static;
    margin-top: 3.6rem;
  }

  .news-single__lightbox-nav--prev {
    grid-area: prev;
    justify-self: end;
    left: auto;
    transform: rotate(90deg);
  }

  .news-single__lightbox-nav--next {
    grid-area: next;
    justify-self: start;
    right: auto;
    transform: rotate(-90deg);
  }
}

.news-single__share {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  width: 100%;
  margin: 6rem 0 10rem;
}

@media (min-width: 1024px) {
  .news-single__share {
    width: var(--content-width);
    max-width: 100%;
    justify-content: flex-start;
  }
}

.news-single__share-label {
  color: var(--color-blue);
}

.news-single__share .social-links {
  justify-content: flex-start;
  gap: var(--spacing-xs);
}

.news-single__share .social-links a {
  width: 4.6rem;
  height: 4.6rem;
}

@media (min-width: 1024px) {
  .news-single__share .social-links a {
    width: 4rem;
    height: 4rem;
  }
}

.media-single__share {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  width: 100%;
  margin: 6rem auto 10rem;
}

@media (min-width: 1024px) {
  .media-single__share {
    width: var(--content-width);
    max-width: 100%;
    justify-content: flex-start;
    margin-top: 8rem;
  }
}

.media-single__share-label {
  color: var(--color-blue);
}

.media-single__share .social-links {
  justify-content: flex-start;
  gap: var(--spacing-xs);
}

.media-single__share .social-links a {
  width: 4.6rem;
  height: 4.6rem;
}

@media (min-width: 1024px) {
  .media-single__share .social-links a {
    width: 4rem;
    height: 4rem;
  }
}

/* =========================================
   RELATED SCROLLER  (news-single / media-single / se-fund)
========================================= */
.related-scroller {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "scroll"
    "button";
  padding-block: 10rem 12rem;
}

.related-scroller__header {
  grid-area: title;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-md);
  padding-inline: var(--container-gutter);
  margin-bottom: 5rem;
}

.related-scroller__button {
  grid-area: button;
  display: flex;
  justify-content: center;
  padding-inline: var(--container-gutter);
  margin-top: 4rem;
}

/* เส้นคั่นระหว่าง related-scroller ที่วางต่อกัน (แบบเดียวกับ .se-fund-section) */
.related-scroller--divided+.related-scroller--divided::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--container-gutter);
  right: var(--container-gutter);
  border-top: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

.related-scroller__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.related-scroller__desc {
  margin-top: 2.6rem;
  max-width: 52rem;
  color: var(--color-grey);
}

@media (min-width: 1024px) {
  .related-scroller {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title button"
      "scroll scroll";
    align-items: center;
  }

  .related-scroller__header {
    justify-content: space-between;
    text-align: left;
    margin-bottom: 6rem;
  }

  .related-scroller__heading {
    align-items: flex-start;
  }

  .related-scroller__button {
    justify-content: flex-end;
    padding-inline: 0;
    padding-right: var(--container-gutter);
    margin-top: 0;
  }
}

.single__related-title {
  color: var(--color-blue);
}


.related-scroller__scroll {
  grid-area: scroll;
  position: relative;
  min-width: 0;
}

.related-scroller__track {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-inline: var(--container-gutter);
  cursor: grab;
  user-select: none;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--container-gutter);
}

.related-scroller__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.related-scroller__track::-webkit-scrollbar {
  display: none;
}

.related-scroller__track .card {
  flex: 0 0 auto;
  width: 31.2rem;
  cursor: pointer;
  scroll-snap-align: start;
}

@media (min-width: 1024px) {
  .related-scroller__track .card {
    /* design width: 507px at a 1440px viewport -> 507 / 1440 * 100 = 35.2083vw */
    width: 35.2083vw;
    max-width: 50.7rem;
  }

  .related-scroller__scroll::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 16rem;
    pointer-events: none;
  }

  .related-scroller__scroll::before {
    left: 0;
    background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
  }

  .related-scroller__scroll::after {
    right: 0;
    background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
  }
}

/* =========================================
   HEADER / NAVBAR
========================================= */

.site-header {
  /* Per-state tokens : the overlay variants below swap them. --site-header-ink
     paints the logo, hamburger, search icon, desktop nav links and the desktop
     lang button; the mobile nav panel keeps its own colours.
     The two logo widths are named once per breakpoint so the state rules below
     only have to point at one or the other. */
  --site-header-logo-w-solid: 8.5rem;
  /* Mobile keeps one size : the logo only grows on desktop, where there is room
     for it. The desktop block below is the only place the two differ. */
  --site-header-logo-w-overlay: var(--site-header-logo-w-solid);

  --site-header-logo-w: var(--site-header-logo-w-solid);
  --site-header-ink: var(--color-black);
  --site-header-logo-filter: none;
  --site-header-lang-bg: var(--color-light-grey);
  --site-header-lang-border: transparent;

  position: sticky;
  top: 0;
  z-index: 100;

  width: 100%;
  background-color: var(--color-white);
  transition: background-color var(--duration) var(--easing);
}

/* -- Overlay : pages that open with a cover / hero --
   The header floats over the media, transparent and with a larger logo, and
   turns into the plain white bar once the cover has scrolled past (.is-solid,
   set in main.js), while the pointer is over it, or while the mobile nav or a
   submenu is open. Pages without a cover keep the sticky white header above. */
.site-header--overlay {
  --site-header-logo-w: var(--site-header-logo-w-overlay);
  --site-header-ink: var(--color-white);
  /* The logo SVG is solid blue : flattening it to black and inverting turns it
     white without shipping a second file. */
  --site-header-logo-filter: brightness(0) invert(1);
  --site-header-lang-bg: transparent;
  --site-header-lang-border: rgb(var(--color-white-rgb) / 0.3);

  position: fixed;
  inset: 0 0 auto 0;
  background-color: transparent;
}

.site-header--overlay.is-solid,
.site-header--overlay.is-nav-open,
.site-header--overlay:focus-within {
  --site-header-logo-w: var(--site-header-logo-w-solid);
  --site-header-ink: var(--color-black);
  --site-header-logo-filter: none;
  --site-header-lang-bg: var(--color-light-grey);
  --site-header-lang-border: transparent;
  background-color: var(--color-white);
}

@media (hover: hover) {
  .site-header--overlay:hover {
    --site-header-logo-w: var(--site-header-logo-w-solid);
    --site-header-ink: var(--color-black);
    --site-header-logo-filter: none;
    --site-header-lang-bg: var(--color-light-grey);
    --site-header-lang-border: transparent;
    background-color: var(--color-white);
  }
}

.site-header__border {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;

  height: var(--border-width);
  background-color: rgb(var(--color-black-rgb) / 0.10);
  box-shadow: 0 0.1rem 0.8rem rgb(var(--color-black-rgb) / 0.06);
  pointer-events: none;
  transition: opacity var(--duration) var(--easing);
}

.site-header--overlay .site-header__border {
  opacity: 0;
}

.site-header--overlay.is-solid .site-header__border,
.site-header--overlay.is-nav-open .site-header__border,
.site-header--overlay:focus-within .site-header__border {
  opacity: 1;
}

@media (hover: hover) {
  .site-header--overlay:hover .site-header__border {
    opacity: 1;
  }
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding-block: var(--spacing-sm);
  padding-inline: var(--container-gutter);
}

.site-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

.site-header__logo img {
  width: var(--site-header-logo-w);
  height: auto;
  filter: var(--site-header-logo-filter);
  transition: width var(--duration) var(--easing),
    filter var(--duration) var(--easing);
}

/* -- Hamburger (mobile) -- */
.site-header__hbg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 101;
}

/* -- Search -- */
.site-header__search {
  display: flex;
  justify-content: center;
  align-items: center;

  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 2rem;
  color: var(--site-header-ink);
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

/* -- Search field --
   The form is display:contents so the icon keeps the grid / flex slot it had
   as a link; the field itself is an absolutely positioned overlay that fills
   the header bar from the left gutter up to the icon. Opening it (.is-search-open,
   set in main.js) blanks the bar : logo, nav, lang and hamburger fade out and
   only the borderless field and the icon are left. */
.site-header__search-form {
  display: contents;
}

.site-header__search-input {
  position: absolute;
  top: 50%;
  left: var(--container-gutter);
  transform: translateY(-50%);
  z-index: 2;

  right: calc(var(--container-gutter) + 4rem);
  padding: 0;
  border: none;
  outline: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;

  color: var(--color-blue);
  font-family: inherit;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration) var(--easing);
}

.site-header__search-input::placeholder {
  color: var(--color-blue);
  opacity: 1;
}

.site-header__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.site-header.is-search-open {
  --site-header-ink: var(--color-black);
  --site-header-logo-filter: none;
  background-color: var(--color-white);
}

.site-header.is-search-open .site-header__search-input {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-header.is-search-open .site-header__logo,
.site-header.is-search-open .site-header__hbg,
.site-header.is-search-open .lang-switch,
.site-header.is-search-open .site-nav,
.site-header.is-search-open .site-nav__list {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-header.is-search-open .site-header__border {
  opacity: 1;
}

.site-header__search-label {
  display: none;
  font-size: 1.3rem;
  font-weight: 600;
}

/* -- Clear : takes the lang switch's slot while the field is open -- */
.site-header__search-clear {
  display: none;
  justify-content: center;
  align-items: center;

  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--site-header-ink);
}

.site-header__hbg span {
  display: block;
  width: 2.6rem;
  height: 0.2rem;
  background-color: var(--site-header-ink);
  transition: transform var(--duration) var(--easing),
    opacity var(--duration) var(--easing),
    background-color var(--duration) var(--easing);
}

.site-header__hbg[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(0.7rem) rotate(45deg);
}

.site-header__hbg[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-header__hbg[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-0.7rem) rotate(-45deg);
}

.icon-search {
  font-size: 2rem;
}

@media (min-width: 1024px) {
  .icon-search {
    font-size: 1.5rem;
  }
}

/* -- Nav : mobile -- */
.site-nav {
  --mobile-nav-top-offset: 12rem;
  --mobile-nav-width: 90%;

  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;

  width: var(--mobile-nav-width);
  height: 100dvh;
  overflow-y: auto;
  background-color: var(--color-white);
  padding: var(--mobile-nav-top-offset) var(--container-gutter) var(--spacing-xl);

  transform: translateX(-100%);
  transition: transform var(--duration) var(--easing);
}

.site-nav.is-open {
  transform: translateX(0);
}

/* -- Nav : header rule (mobile) --
   The panel paints over .site-header__border, so it carries its own copy of the
   line at the same height. --site-header-h is measured in main.js ; the fallback
   is the closed-header height (search / hamburger + padding). The panel's own
   transform makes it the containing block, so position:fixed pins the rule
   against the panel and keeps it out of the panel's scroll. */
.site-nav__border {
  position: fixed;
  inset: var(--site-header-h, 6.4rem) 0 auto 0;
  z-index: 1;

  height: var(--border-width);
  background-color: rgb(var(--color-black-rgb) / 0.10);
  box-shadow: 0 0.1rem 0.8rem rgb(var(--color-black-rgb) / 0.06);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
}

.site-nav.is-open .site-nav__border {
  opacity: 1;
}

/* -- Nav : backdrop (mobile) -- */
.site-nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;

  background-color: rgb(var(--color-black-rgb) / 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--easing), visibility 0s linear var(--duration);
}

.site-nav__backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration) var(--easing);
}

.site-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
  width: 100%;
  padding-block: 1.3rem;

  border: none;
  background: none;
  color: var(--color-blue);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.site-nav__arrow {
  transform: rotate(-90deg);
  transition: transform var(--duration) var(--easing);
  font-size: 1.6rem;
}

.site-nav__submenu {
  list-style: none;
  display: none;
}

/* -- Nav : mobile submenu panel (drill-down) -- */
.site-nav__submenu-panel {
  position: relative;
  display: none;
  flex-direction: column;
}

.site-nav.is-submenu-open .site-nav__list {
  display: none;
}

.site-nav.is-submenu-open .site-nav__submenu-panel {
  display: flex;
}

.site-nav__back {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-2.8rem);
  z-index: 100;

  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 90%;

  color: var(--color-blue);
  text-align: left;
  cursor: pointer;
}

.site-nav__back-arrow {
  transform: rotate(90deg);
  font-size: 1.6rem;
}

.site-nav__submenu-heading {
  padding-block: 1.3rem;
  color: rgb(var(--color-blue-rgb) / 0.4);
}

.site-nav__submenu-list {
  list-style: none;
}

.site-nav__sublink {
  display: block;
  padding-block: 1.3rem;
  color: var(--color-black);
  text-decoration: none;
}

.site-nav__sublink:hover {
  color: var(--color-blue);
}

/* -- Lang switch -- */
.lang-switch {
  position: relative;
}

.lang-switch__toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;

  border: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;

  color: var(--color-black);
  font-size: var(--font-size-sub);
  line-height: var(--line-height-sub);
  font-weight: 600;
}

@media (min-width: 1024px) {
  .lang-switch__toggle {
    border: none;
    background-color: var(--color-light-grey);
    padding: var(--spacing-xs);
  }

  /* In the header bar the pill follows the header state : grey when the header
     is white, and a transparent chip with a black 10% hairline while it is
     transparent over the cover. The border is always drawn so the button keeps
     the same size in both states. */
  .lang-switch--desktop .lang-switch__toggle {
    border: var(--border-width) solid var(--site-header-lang-border);
    background-color: var(--site-header-lang-bg);
    padding: calc(var(--spacing-xs) - var(--border-width));
    color: var(--site-header-ink);
    transition: color var(--duration) var(--easing),
      background-color var(--duration) var(--easing),
      border-color var(--duration) var(--easing);
  }
}

.lang-switch__arrow {
  font-size: 1rem;
  font-weight: 600 !important;
  transition: transform var(--duration) var(--easing);
}

@media (min-width: 1024px) {
  .lang-switch__arrow {
    font-size: 0.8rem;
  }
}

.lang-switch__toggle[aria-expanded="true"] .lang-switch__arrow {
  transform: rotate(180deg);
}

.lang-switch--mobile .lang-switch__toggle[aria-expanded="true"] .lang-switch__arrow {
  transform: rotate(-90deg);
}

.lang-switch__menu {
  position: absolute;
  z-index: 10;
  right: 0;
  min-width: 100%;

  list-style: none;
  background-color: var(--color-white);
  border: 1px solid rgb(var(--color-black-rgb) / 0.08);
  border-radius: 0.8rem;
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  transform: translateY(0.8rem);
  transition: opacity var(--duration) var(--easing),
    transform var(--duration) var(--easing),
    visibility 0s linear var(--duration);
}

@media (min-width: 1024px) {
  .lang-switch__menu {
    border: none;
    background-color: var(--color-light-grey);
  }
}

.lang-switch--mobile .lang-switch__menu {
  top: 0;
  bottom: auto;
  left: 100%;
  right: auto;
  min-width: 0;

  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  margin-left: var(--spacing-xs);
  border-radius: var(--border-radius);

  transform: translateX(-0.8rem);
}

.lang-switch--mobile .lang-switch__item {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.lang-switch--desktop .lang-switch__menu {
  top: calc(100% + 0.8rem);
}

.lang-switch.is-open .lang-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration) var(--easing),
    transform var(--duration) var(--easing);
}

.lang-switch--mobile.is-open .lang-switch__menu {
  transform: translateX(0);
}

.lang-switch__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.8rem;

  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;

  color: var(--color-black);
  font-size: var(--font-size-sub);
  line-height: var(--line-height-sub);
  font-weight: 600;
}

.lang-switch__item:hover,
li[aria-selected="true"] .lang-switch__item {
  color: var(--color-blue);
}

.lang-switch__menu li+li {
  border-left: 1px solid rgb(var(--color-black-rgb) / 0.1)
}

@media (min-width: 1024px) {
  .lang-switch__menu li+li {
    border-left: none;
    border-top: 1px solid rgb(var(--color-black-rgb) / 0.1)
  }
}

.lang-switch__flag {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.lang-switch--desktop {
  display: none;
}

.lang-switch--mobile {
  position: absolute;
  inset: auto auto var(--spacing-xl) var(--container-gutter);
  z-index: 100;
}

/* -- Nav : desktop -- */
@media (min-width: 1024px) {
  .site-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    column-gap: 1rem;
    padding-block: var(--spacing-xs);
  }

  .lang-switch--mobile {
    display: none;
  }

  .lang-switch--desktop {
    display: flex;
    grid-column: 4;
    grid-row: 1;
  }

  .site-header__hbg {
    display: none;
  }

  .site-nav__backdrop {
    display: none;
  }

  .site-header__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex: none;
  }

  /* Only the two widths change on desktop : every state rule above reads them
     through --site-header-logo-w and follows along. */
  .site-header {
    --site-header-logo-w-solid: 7.2rem;
    --site-header-logo-w-overlay: 9.6rem;
  }

  .site-header__search {
    grid-column: 3;
    gap: 0.8rem;
  }

  /* The label - and the wider hit area it buys - only appears once the field
     is open and there is something to type into. */
  .site-header.is-search-open .site-header__search {
    width: auto;
    padding-inline: 1.2rem;
    color: var(--color-blue);
  }

  .site-header.is-search-open .site-header__search-label {
    display: block;
  }

  .site-header__search-input {
    right: calc(var(--container-gutter) + 16rem);
  }

  .site-header.is-search-open .site-header__search-clear {
    display: flex;
    grid-column: 4;
    grid-row: 1;
  }

  .site-nav {
    display: contents;
  }

  .site-nav__border {
    display: none;
  }

  .site-nav__list {
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
  }

  .site-nav__list--left {
    grid-column: 1;
    justify-self: start;
  }

  .site-nav__list--right {
    grid-column: 2;
    justify-self: end;
  }

  .site-nav__item {
    position: relative;
    border-bottom: none;
  }

  .site-nav__link {
    width: auto;
    color: var(--site-header-ink);
    transition: color var(--duration) var(--easing);
    padding-block: var(--spacing-sm);
    font-size: var(--font-size-sub);
    line-height: var(--line-height-sub);
  }

  .site-nav__submenu {
    position: absolute;
    top: calc(100% + 1.6rem);
    left: -2rem;
    z-index: 10;

    display: block;
    max-height: none;
    overflow: visible;
    min-width: 22rem;
    background-color: var(--color-white);
    border: 1px solid rgb(var(--color-black-rgb) / 0.08);
    border-radius: 0.8rem;
    padding: var(--spacing-xs) 0;

    font-size: var(--font-size-sub);
    line-height: var(--line-height-sub);
    font-weight: 600;

    opacity: 0;
    visibility: hidden;
    transform: translateY(0.8rem);
    transition: opacity var(--duration) var(--easing),
      transform var(--duration) var(--easing),
      visibility 0s linear var(--duration);
  }

  .site-nav__item--has-submenu:hover .site-nav__submenu,
  .site-nav__item--has-submenu:focus-within .site-nav__submenu,
  .site-nav__item--has-submenu.is-open .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--duration) var(--easing),
      transform var(--duration) var(--easing);
  }

  .site-nav__arrow {
    transform: none;
    font-size: 0.8rem;
    font-weight: 600 !important;
  }

  .site-nav__item--has-submenu:hover .site-nav__arrow,
  .site-nav__item--has-submenu:focus-within .site-nav__arrow {
    transform: rotate(180deg);
  }

  .site-nav__item--has-submenu:hover .site-nav__link,
  .site-nav__item--has-submenu:focus-within .site-nav__link,
  .site-nav__item--has-submenu:hover .site-nav__arrow,
  .site-nav__item--has-submenu:focus-within .site-nav__arrow {
    color: var(--color-blue);
  }

  .site-nav__sublink {
    padding-inline: var(--spacing-md);
  }

  .site-nav__submenu-panel {
    display: none !important;
  }
}

/* =========================================
   PAGE : 404
========================================= */

.error-404 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  min-height: 100dvh;
  overflow: hidden;
  text-align: center;
  padding-bottom: var(--spacing-xl);
}

@media (min-width: 1024px) {
  .error-404 {
    padding-bottom: 4rem;
  }
}


.error-404__bg {
  position: absolute;
  inset: 0;
  z-index: -1;

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.error-404__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(var(--color-black-rgb) / 0.32);
}

.error-404__logo {
  position: absolute;
  top: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  width: 8.5rem;
  filter: brightness(0) invert(1);
}

@media (min-width: 1024px) {
  .error-404__logo {
    width: 7.2rem;
  }
}

.error-404__content {
  color: var(--color-white);
  width: 100%;
  padding-inline: var(--container-gutter);
}

.error-404__content,
.error-404__message,
.error-404__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.error-404__message {
  gap: calc(var(--spacing-xl) - 1rem);
}

.error-404__actions {
  align-items: center;
}

@media (min-width: 1024px) {
  .error-404__message {
    text-align: left;
  }

  .error-404__actions {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }
}

/* =========================================
   SOCIAL LINKS
========================================= */
.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background-color: var(--color-white);
  border: solid var(--border-width) rgb(var(--color-black-rgb) / 0.1);
  text-decoration: none;
  transition: background-color var(--duration) var(--easing);
}

@media (min-width: 1024px) {
  .social-links a {
    width: 4rem;
    height: 4rem;
  }
}

.social-links a:hover {
  background-color: var(--color-pastel-light-blue);
}

.icon-share {
  font-size: 2.3rem;
  line-height: 1;
  color: var(--color-blue);
}

@media (min-width: 1024px) {
  .icon-share {
    font-size: 2rem;
  }
}

/* =========================================
   FOOTER
========================================= */
.site-footer {
  background-color: var(--color-blue);
  color: var(--color-white);
  padding: 6rem var(--container-gutter) 12rem;
}

@media (min-width: 1024px) {
  .site-footer {
    padding-block: 8rem 2.4rem;
  }
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* -- Col 1 : contact -- */
.site-footer__logo {
  align-self: flex-start;
}

.site-footer__logo img {
  width: 9.6rem;
  height: auto;
  filter: brightness(0) invert(1);
}

@media (min-width: 1024px) {
  .site-footer__logo img {
    width: 5.5rem;
  }
}

.site-footer__contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.site-footer__col--contact {
  max-width: 32rem;
}

@media (min-width: 1024px) {
  .site-footer__col--contact {
    max-width: 29rem;
  }
}

.site-footer__col--contact .btn {
  align-self: flex-start;
}

.site-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.site-footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

.site-footer__contact-item:hover {
  color: var(--color-light-blue);
}

/* -- Col 2 : nav groups -- */
.site-footer__col--nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.footer-nav__toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  color: var(--color-white);
  text-align: left;
  cursor: pointer;
}

.footer-nav__arrow {
  font-size: 1.4rem;
  transform: rotate(0deg);
  transition: transform var(--duration) var(--easing);
}

.footer-nav__toggle[aria-expanded="true"] .footer-nav__arrow {
  transform: rotate(180deg);
}

.footer-nav__collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration) var(--easing);
}

.footer-nav__toggle[aria-expanded="true"]+.footer-nav__collapse {
  grid-template-rows: 1fr;
}

.footer-nav__inner {
  overflow: hidden;
  min-height: 0;
}

.footer-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-top: var(--spacing-md);
}

.footer-nav__link {
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

.footer-nav__link:hover {
  color: var(--color-light-blue);
}

/* -- Col 3 : qr -- */
.site-footer__col--qr {
  flex-direction: row;
  align-items: flex-start;
  gap: 1.6rem;
}

@media (min-width: 1024px) {
  .site-footer__col--qr {
    gap: var(--spacing-md);
    max-width: 26rem;
    align-items: center;
  }
}


.site-footer__qr-img {
  width: 8rem;
  height: 8rem;
  flex-shrink: 0;
  background-color: var(--color-white);
}

.site-footer__qr-text {
  transform: translateY(-0.3rem);
}

@media (min-width: 1024px) {
  .site-footer__qr-text {
    text-align: center;
  }
}


/* -- Bottom bar -- */
.site-footer__bottom {
  padding-top: 4rem;
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs) var(--spacing-lg);
}

.site-footer__social {
  order: 2;
  margin-inline-start: auto;
}

.site-footer__social a {
  background-color: transparent;
  border-color: rgb(var(--color-white-rgb) / 0.3);
}

.site-footer__social a:hover {
  background-color: rgb(var(--color-white-rgb) / 0.15);
}

.site-footer__social .icon-share {
  color: var(--color-white);
}

.site-footer__copyright {
  order: 3;
  flex-basis: 100%;
  color: var(--color-white);
}

.site-footer__legal {
  order: 1;
  display: flex;
  gap: var(--spacing-md);
}

.site-footer__legal a {
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

.site-footer__legal a:hover {
  color: var(--color-light-blue);
}

@media (min-width: 1024px) {
  .site-footer__top {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10rem;
  }

  .site-footer__col--nav {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    column-gap: var(--spacing-md);
    row-gap: 0;
    padding-top: 5.6rem;
    justify-content: center;
  }

  .footer-nav {
    width: auto;
    max-width: 30rem;
  }

  .footer-nav__toggle {
    cursor: default;
    pointer-events: none;
  }

  .footer-nav__arrow {
    display: none;
  }

  .footer-nav__collapse {
    grid-template-rows: 1fr !important;
  }

  .footer-nav__inner {
    overflow: visible !important;
  }

  .site-footer__col--qr {
    flex-direction: column;
    justify-self: end;
    text-align: right;
    padding-top: 5.6rem;
  }

  .site-footer__qr-img {
    width: 11.3rem;
    height: 11.3rem;
  }

  .site-footer__bottom-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .site-footer__social {
    order: 0;
    justify-self: start;
    margin-inline-start: 0;
  }

  .site-footer__copyright {
    order: 0;
    flex-basis: auto;
    justify-self: center;
  }

  .site-footer__legal {
    order: 0;
    gap: var(--spacing-xl);
    justify-self: end;
  }
}

/* =========================================
   SEARCH RESULTS
========================================= */
.search-hero {
  position: relative;
  overflow: hidden;
  padding-top: 10rem;
}

@media (min-width: 1024px) {
  .search-hero {
    overflow: visible;
    padding-top: 12rem;
  }
}

.search-hero__graphic {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 10rem;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .search-hero__graphic {
    top: 12rem;
    left: auto;
    right: 0;
    width: 57.6rem;
    max-width: 50%;
    height: 30rem;
  }
}

.search-hero__graphic-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right top;
}

@media (min-width: 1024px) {
  .search-hero__graphic-img {
    object-fit: cover;
    object-position: right top;
  }
}

.search-hero__title {
  color: var(--color-blue);
  text-align: center;
  padding-bottom: 4rem;
}

.search-hero__query {
  opacity: 0.4;
}

@media (min-width: 1024px) {
  .search-hero__title {
    padding-bottom: 5rem;
  }
}

.search-hero__buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--spacing-xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--container-gutter);
}

.search-hero__buttons::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .search-hero__buttons {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    padding-inline: 0;
  }
}

.search-hero__buttons .btn {
  flex-shrink: 0;
}

.search-hero__buttons [aria-pressed="true"] {
  pointer-events: none;
}

.search-hero__buttons [data-search-filter] {
  cursor: pointer;
}

.search-hero__buttons [data-empty="true"] {
  pointer-events: none;

  background-color: var(--color-white);
  border-color: rgb(var(--color-black-rgb) / 0.1);
  color: rgb(var(--color-grey-rgb) / 0.4);
}

.search-results-section.is-hidden {
  display: none;
}

.search-results-section:not(.is-hidden)~.search-results-section:not(.is-hidden)::before {
  content: "";
  display: block;
  margin-inline: var(--container-gutter);
  border-top: 1px solid rgb(var(--color-black-rgb) / 0.1);
}

.search-results-section__header {
  padding-inline: var(--container-gutter);
}

.search-results-section .single__related-title {
  padding-top: 10rem;
  padding-bottom: 6rem;
  text-align: center;
}

.search-results-section .media-cards {
  padding-top: 0;
}

.search-results-section .news-pagination {
  margin-bottom: 10rem;
}

.search-results-section .download-list {
  margin-bottom: 12rem;
}

@media (min-width: 1024px) {
  .search-results-section .single__related-title {
    padding-bottom: 8rem;
  }
}


/* =========================================
   ABOUT PAGE
========================================= */
.about-sections {
  display: flex;
  flex-direction: column;
  gap: 10rem;
  padding-block: 0 12rem;
}

/* narrower lead paragraph than the shared default */
.about-sections .page-intro__desc {
  max-width: 52rem;
}

/* --- DUO CARDS ---
   Shared block (see DUO CARDS below); about runs taller cards and a blue,
   bolder body. Scoped to `.about-sections` so registration keeps the defaults. */
.about-sections .duo-cards__list {
  margin-top: 5.4rem;
}

.about-sections .duo-cards__desc {
  color: var(--color-blue);
  font-weight: 600;
}

@media (min-width: 1024px) {
  .about-sections .duo-cards__list {
    margin-top: 7.2rem;
  }

  .about-sections .duo-cards__card {
    padding: 12rem 11.5rem;
  }

  /* the image card stays full-bleed at every width */
  .about-sections .duo-cards__card--media {
    padding: 0;
  }
}

.mission__title {
  text-align: center;
  color: var(--color-blue);
}


/* --- MISSION CARDS ---
   Same box as `.contact-info__card` (1.8rem radius, blue/light/pastel run) but
   left-aligned and tighter: a big number over an h4-sized body.

   The template splits the cards into rows of 4 and 3 so every row is full, and
   each row is its own flex line : cards share the row evenly, so a 4-row runs
   narrower than a 3-row (7 reads 4 + 3). A count that will not split that way
   (1, 2, 5) ends in a `--short` row, which holds the 3-up width and centres.
   Colours cycle 1-2-3 across the whole block via `--1/--2/--3`, not per row. */
.mission__list {
  --mission-gap: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--mission-gap);
  margin-top: 9rem;
}

.mission__row {
  display: flex;
  flex-direction: column;
  gap: var(--mission-gap);
}

.mission__card {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 3.2rem;
  border-radius: 1.8rem;
}

.mission__number {
  font-size: 6rem;
  line-height: 1;
  font-weight: 600;
}

.mission__card--1 {
  background-color: var(--color-blue);
}

.mission__card--1 .mission__number {
  color: var(--color-light-blue);
}

.mission__card--1 .mission__body {
  color: var(--color-white);
}

.mission__card--2 {
  background-color: var(--color-light-blue);
}

.mission__card--3 {
  background-color: var(--color-pastel-light-blue);
}

.mission__card--2 .mission__number,
.mission__card--2 .mission__body,
.mission__card--3 .mission__number,
.mission__card--3 .mission__body {
  color: var(--color-blue);
}

@media (min-width: 1024px) {
  .mission__list {
    margin-top: 7.2rem;
  }

  .mission__row {
    flex-direction: row;
  }

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

  /* a trailing row of 1 or 2 keeps the 3-up column width instead of stretching */
  .mission__row--short {
    justify-content: center;
  }

  .mission__row--short .mission__card {
    flex: 0 0 calc((100% - 2 * var(--mission-gap)) / 3);
  }

  .mission__number {
    font-size: 7.2rem;
  }
}


/* --- DUTIES ---
   Text left / image right, two equal columns from 1024 up. The content column
   keeps a single 2.2rem rhythm between the title, the lead paragraph and every
   numbered item; the number sits 1.2rem before its text. */
.duties__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5.2rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .duties__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.duties__content {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.duties__title {
  color: var(--color-blue);
  text-align: center;
}

@media (min-width: 1024px) {
  .duties__title {
    text-align: left;
  }
}

.duties__desc {
  color: var(--color-grey);
}

.duties__list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {

  .duties__desc,
  .duties__list {
    width: 82%;
  }
}

.duties__item {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}

.duties__number {
  flex: 0 0 auto;
  color: var(--color-blue);
  font-weight: 600;
}

.duties__text {
  color: var(--color-grey);
  text-wrap: balance;
}

.duties__media {
  border-radius: 1.8rem;
  overflow: hidden;
}

.duties__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* --- ORG CHART ---
   Centred title, chart and (mobile-only) expand button. The chart is a wide
   1320 x 681 drawing : on desktop it sits at container width, on mobile it is
   too small to read, so the button opens it fullscreen turned sideways. */
.org-chart__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.4rem;
}

.org-chart__title {
  color: var(--color-blue);
}

.org-chart__media {
  width: 100%;
  /* 2.4rem gap + 3rem : the title sits 5.4rem above the chart */
  margin-top: 3rem;
}

.org-chart__image {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  .org-chart__inner {
    gap: 7.2rem;
  }

  .org-chart__media {
    margin-top: 0;
  }

  /* the chart is legible at this width : no expand button needed */
  .org-chart [data-org-chart-open] {
    display: none;
  }
}

.icon-fullscreen {
  font-size: 1.8rem;
}

/* --- ORG CHART LIGHTBOX ---
   Mobile-only fullscreen view : the chart keeps its own orientation, sits full
   width in the middle of a dark backdrop, and can be pinched / dragged around.
   The zoom transform is written on the image by JS. */
.org-chart__lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.88);
  touch-action: none;
}

.org-chart__lightbox.is-open {
  display: flex;
}

.org-chart__lightbox-image {
  display: block;
  width: 100%;
  height: auto;
  /* zoomed in, JS writes a width wider than the screen : it must not be squeezed
     back to fit, and it must not be capped by a global max-width */
  max-width: none;
  flex-shrink: 0;
  /* the chart is a transparent SVG drawn in blue : it needs its own ground,
     with a little breathing room before the dark backdrop */
  padding: 1.1rem;
  background-color: var(--color-white);
  transform-origin: center center;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.org-chart__lightbox-close {
  position: absolute;
  top: 2.4rem;
  right: 2.4rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: transparent;
  border: var(--border-width) solid var(--color-white);
  color: var(--color-white);
  cursor: pointer;
}

.org-chart__lightbox-close i {
  font-size: 1.6rem;
  color: var(--color-white);
}

@media (min-width: 1024px) {
  .org-chart__lightbox.is-open {
    display: none;
  }
}


/* =========================================
   CONTACT US
========================================= */
.contact-sections {
  --contact-sections-gap: 10rem;
  display: flex;
  flex-direction: column;
  gap: var(--contact-sections-gap);
  padding-block: 0 12rem;
}

/* Same box as a `.se-fund-section`: the 10rem top padding lives on the section
   itself, which is what `.graphic-bg` anchors against. */
.contact-intro {
  position: relative;
  padding-top: 10rem;
}

/* map sits closer to the contact info cards above it */
.contact-sections>.contact-map-section {
  margin-top: calc(2rem - var(--contact-sections-gap));
}

.contact-intro__title {
  max-width: 25rem;
  text-align: center;
  margin: 0 auto 6rem;
  color: var(--color-blue);
}

@media (min-width: 768px) {
  .contact-intro__title {
    max-width: unset;
  }
}

@media (min-width: 1024px) {
  .contact-intro__title {
    margin-bottom: 8rem;
  }
}



/* =========================================
   FORM REPORT
========================================= */
.form-report-page {
  position: relative;
  overflow: hidden;
  padding-block: 10rem;
}

@media (min-width: 1024px) {
  .form-report-page {
    overflow: visible;
    padding-block: 12rem;
  }
}

.form-report-page__graphic {
  position: absolute;
  bottom: -3rem;
  right: calc(50% - 50vw);
  z-index: -1;
  width: 100%;
  height: 12rem;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .form-report-page__graphic {
    bottom: 0;
    width: 57.6rem;
    max-width: 50%;
    height: 20rem;
  }
}

.form-report-page__graphic-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

@media (min-width: 1024px) {
  .form-report-page__graphic-img {
    object-fit: cover;
    object-position: right center;
  }
}

.form-report-page__title {
  color: var(--color-blue);
  text-align: center;
  padding-bottom: 5.6rem;
}

@media (min-width: 1024px) {
  .form-report-page__title {
    padding-bottom: 7.2rem;
  }
}

.form-report-page__box {
  width: 100%;
  max-width: 78.3rem;
  margin-inline: auto;
  background-color: var(--color-light-grey);
  padding: 6rem var(--spacing-xl);
  border-radius: 1.8rem;
}

@media (max-width: 1023px) {
  .form-report-page__box {
    padding: 4rem 2.4rem;
  }
}

.form-report-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.form-row {
  display: flex;
  gap: 2rem;
}

@media (max-width: 767px) {
  .form-row {
    flex-direction: column;
  }
}

.form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.form-field__label {
  color: var(--color-blue);
}

.form-field__control {
  width: 100%;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-grey);
  background-color: var(--color-white);
  border: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  border-radius: 5rem;
  padding: 1.1rem 1.8rem;
}

.form-field__control:focus {
  outline: none;
  border-color: var(--color-blue);
}

.form-field__control--textarea {
  height: 13.6rem;
  border-radius: 1.8rem;
  resize: none;
}

.form-report-form .btn {
  align-self: center;
  width: 100%;
}

@media (min-width: 1024px) {
  .form-report-form .btn {
    width: auto;
  }
}

/* -- Select : Tom Select-enhanced dropdown, same look as .document-nav__select
   but pill radius on the control and a rounder, softer-highlighted panel -- */
select.form-field__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 4.4rem;
  cursor: pointer;
}

.form-field__select-wrap {
  position: relative;
}

.form-field__select-icon {
  position: absolute;
  top: 50%;
  right: 1.8rem;
  transform: translateY(-50%);
  color: var(--color-blue);
  font-size: 1.6rem;
  pointer-events: none;
  z-index: 1;
}

.form-field__select-wrap .ts-wrapper {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  border-radius: 0;
}

.form-field__select-wrap .ts-control {
  width: 100%;
  min-height: unset;
  box-shadow: none;
  outline: none;
  background-color: var(--color-white) !important;
  border: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1) !important;
  border-radius: 5rem !important;
  padding: 1.1rem 1.8rem !important;
  padding-right: 4.4rem !important;
  color: var(--color-blue);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  cursor: pointer;
}

.form-field__select-wrap .ts-control .item {
  padding: 0;
}

.form-field__ts-dropdown {
  background-color: var(--color-white);
  border: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 0.4rem 1.6rem rgb(var(--color-black-rgb) / 0.08);
  margin-top: var(--spacing-xs);
  font: inherit;
}

.form-field__ts-dropdown.ts-dropdown--top {
  margin-top: 0;
}

.form-field__ts-dropdown .option {
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--color-blue);
  font-size: var(--font-size-body);
  border-bottom: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
}

.form-field__ts-dropdown .option:last-child {
  border-bottom: none;
}

.form-field__ts-dropdown .option[data-value=""] {
  display: none;
}

/* -- Autocomplete : a text input whose suggestion panel wears the same skin as
   the Tom Select dropdown above, so typing and selecting look like one family.
   Style mock : the panel is revealed by focus alone. Whatever drives it for
   real only has to toggle `.is-open` on the wrapper and hide the options that
   do not match. The wrapper (not the input) is the grid / flex item. -- */
.form-field__autocomplete {
  position: relative;
  width: 100%;
}

.form-field__autocomplete-list {
  display: none;
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 24rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--color-white);
  border: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  border-radius: 2rem;
  box-shadow: 0 0.4rem 1.6rem rgb(var(--color-black-rgb) / 0.08);
}

/* Focus alone is not enough : the panel only appears once something has been
   typed, which `:not(:placeholder-shown)` stands in for while there is no JS. */
.form-field__control:focus:not(:placeholder-shown)~.form-field__autocomplete-list,
.form-field__autocomplete.is-open .form-field__autocomplete-list {
  display: block;
}

.form-field__autocomplete-option {
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--color-blue);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  border-bottom: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  cursor: pointer;
}

.form-field__autocomplete-option:last-child {
  border-bottom: none;
}

/* `.is-active` is the keyboard-highlighted row, same look as hover */
.form-field__autocomplete-option:hover,
.form-field__autocomplete-option.is-active {
  background-color: var(--color-pastel-light-blue);
}

/* =========================================
   REGISTRATION INFO PAGE
========================================= */

.registration-sections {
  display: flex;
  flex-direction: column;
  gap: 10rem;
  padding-block: 0 12rem;
}

/* holds the 10rem top padding itself, which is what `.graphic-bg` anchors to */
.registration-intro {
  position: relative;
  padding-top: 10rem;
}

.duo-cards__heading {
  margin-bottom: 5.4rem;
  display: flex;
  justify-content: center;
  text-align: center;
  color: var(--color-blue);
  padding-inline: var(--container-gutter);
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .duo-cards__heading {
    margin-bottom: 7.2rem;
  }
}

.duo-cards__heading--marquee {
  margin-bottom: 3.4rem;
}

@media (min-width: 1024px) {
  .duo-cards__heading--marquee {
    margin-bottom: 3.4rem;
  }
}

.duo-cards__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 1024px) {
  .duo-cards__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.duo-cards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.8rem;
  min-width: 0;
  width: 100%;
  padding: 4rem 2.4rem;
  border-radius: 1.8rem;
}

@media (min-width: 1024px) {
  .duo-cards__card {
    padding: 8rem 8.5rem;
  }
}

.duo-cards__card--blue {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.duo-cards__card--blue .duo-cards__title {
  color: var(--color-pastel-light-blue);
}

.duo-cards__card--pastel {
  background-color: var(--color-pastel-light-blue);
  color: var(--color-grey);
}

.duo-cards__card--pastel .duo-cards__title {
  color: var(--color-blue);
}

.duo-cards__card--media {
  padding: 0;
  overflow: hidden;
}

.duo-cards__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.duo-cards__desc {
  font-weight: 400;
}

.duo-cards__desc strong {
  font-weight: 600;
}

.registration-detail__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .registration-detail__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.registration-detail__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.8rem;
  padding: 4rem 2.4rem;
  border-radius: 1.8rem;
}

@media (min-width: 1024px) {
  .registration-detail__card {
    padding: 5.6rem 6rem;
  }
}

.registration-detail__card:nth-child(odd) {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.registration-detail__card:nth-child(odd) .registration-detail__title {
  color: var(--color-pastel-light-blue);
}

.registration-detail__card:nth-child(odd) .registration-detail__icon {
  color: rgb(var(--color-white-rgb) / 0.5);
}

.registration-detail__card:nth-child(even) {
  background-color: var(--color-pastel-light-blue);
  color: var(--color-blue);
}

.registration-detail__card:nth-child(even) .registration-detail__title {
  color: var(--color-blue);
}

.registration-detail__card:nth-child(even) .registration-detail__icon {
  color: rgb(var(--color-blue-rgb) / 0.5);
}

@media (min-width: 1024px) {

  .registration-detail__card:nth-child(4n+1),
  .registration-detail__card:nth-child(4n) {
    background-color: var(--color-blue);
    color: var(--color-white);
  }

  .registration-detail__card:nth-child(4n+1) .registration-detail__title,
  .registration-detail__card:nth-child(4n) .registration-detail__title {
    color: var(--color-pastel-light-blue);
  }

  .registration-detail__card:nth-child(4n+1) .registration-detail__icon,
  .registration-detail__card:nth-child(4n) .registration-detail__icon {
    color: rgb(var(--color-white-rgb) / 0.5);
  }

  .registration-detail__card:nth-child(4n+2),
  .registration-detail__card:nth-child(4n+3) {
    background-color: var(--color-pastel-light-blue);
    color: var(--color-blue);
  }

  .registration-detail__card:nth-child(4n+2) .registration-detail__title,
  .registration-detail__card:nth-child(4n+3) .registration-detail__title {
    color: var(--color-blue);
  }

  .registration-detail__card:nth-child(4n+2) .registration-detail__icon,
  .registration-detail__card:nth-child(4n+3) .registration-detail__icon {
    color: rgb(var(--color-blue-rgb) / 0.5);
  }
}

.registration-detail__icon {
  font-size: 4.8rem;
}

@media (min-width: 1024px) {
  .registration-detail__title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }
}

.registration-detail__desc {
  font-weight: 400;
  max-width: 46.4rem;
  text-wrap: balance;
}

/* -- Network / registration steps -- */

.registration-network__media {
  position: relative;
  overflow: hidden;

  width: calc(100% + var(--container-gutter) * 2);
  margin-inline: calc(-1 * var(--container-gutter));
  aspect-ratio: 390 / 717;
}

@media (min-width: 1024px) {
  .registration-network__media {
    width: 100%;
    margin-inline: 0;
    aspect-ratio: 1320 / 655;
    border-radius: 1.8rem;
  }
}

.registration-network__bg {
  position: absolute;
  inset: 0;
  z-index: 0;

  display: block;
  width: 100%;
  height: 100%;

  opacity: 0;
  transition: opacity 1.2s ease;
}

.registration-network__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.registration-network__bg.is-active {
  opacity: 1;
}

.registration-network__card {
  --network-card-padding: 3.2rem;

  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  left: 2.4rem;
  right: 2.4rem;
  bottom: 6rem;
  padding: var(--network-card-padding) 2.4rem;
  border-radius: .8rem;
  background: rgb(255 255 255 / 0.88);
}

@media (min-width: 1024px) {
  .registration-network__card {
    top: 3.2rem;
    bottom: 3.2rem;
    left: 3.2rem;
    right: auto;
    /* 41rem @ 1440 (media = 132rem) -> 31.06%; clamped so it stays usable
       on narrower desktops and doesn't sprawl on very wide screens */
    width: clamp(32rem, 31.06%, 48rem);
    padding: var(--network-card-padding);
    padding-bottom: 7.7rem;
  }
}

.registration-network__nav {
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: .8rem;
}

.registration-network__nav--mobile {
  margin-top: 2.4rem;
}

.registration-network__nav--desktop {
  display: none;
}

@media (min-width: 1024px) {
  .registration-network__nav--mobile {
    display: none;
  }

  .registration-network__nav--desktop {
    position: absolute;
    z-index: 2;
    right: 3.2rem;
    bottom: 3.2rem;
    display: flex;
  }
}

.registration-network__nav-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.5rem;
  height: 3.5rem;
  border: none;
  border-radius: 50%;

  background-color: var(--color-blue);
  color: var(--color-white);
  font-size: 1.5rem;
  cursor: pointer;
  transition: opacity var(--duration) var(--easing);
}

.registration-network__nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.registration-network__nav-icon--prev {
  transform: rotate(90deg);
}

.registration-network__nav-icon--next {
  transform: rotate(-90deg);
}

.registration-network__card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2.8rem;
}

@media (min-width: 1024px) {
  .registration-network__card-header {
    align-items: flex-start;
    text-align: left;
  }
}

.registration-network__card-title--black {
  color: var(--color-black);
}

.registration-network__card-title--blue {
  color: var(--color-blue);
}

.registration-network__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.registration-network__line {
  position: absolute;
  z-index: 0;
  background-color: rgb(var(--color-blue-rgb) / 0.15);
}

.registration-network__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1.8rem;
}

.registration-network__step-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: var(--border-width) solid #D5D5D5;
  /* flex centering aligns the whole line box, so the digit sits low on its
     baseline : the bottom padding shrinks the content box and lifts it back to
     the optical centre. (transform is off-limits here : it would move the whole
     circle, and the mobile layout already uses it to slide the steps.) */
  line-height: 1;
  padding: 0 0 .2rem;

  background-color: var(--color-white);
  color: var(--color-blue);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration) var(--easing),
    color var(--duration) var(--easing);
}

.registration-network__step.is-active .registration-network__step-number {
  background-color: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
}

.registration-network__step-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-top: .8rem;
}

.registration-network__step-title {
  color: var(--color-blue);
}

.registration-network__step-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;

  transition: grid-template-rows var(--duration) var(--easing),
    opacity var(--duration) var(--easing);
}

.registration-network__step-body>* {
  overflow: hidden;
}

.registration-network__step.is-active .registration-network__step-body {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: .4rem;
}

.registration-network__step-desc {
  font-weight: 400;
}

.registration-network__step-action {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 1.8rem;
  width: 100%;
}

/* Two or more buttons share one row, so trim their horizontal padding to keep
   each label on a single line. */
.registration-network__step-action:not(:has(.btn:only-child)) .btn {
  --button-padding-x: var(--spacing-md);
}

/* Mobile: buttons hug their own content instead of filling the row */
@media (max-width: 1023px) {
  .registration-network__step-action .btn {
    flex: 0 0 auto;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

/* Desktop: every step keeps a fixed 4rem header row (circle + title) so the
   circles of collapsed steps stay exactly .4rem apart. The active step grows
   to fill the card (pushing the ones after it flush to the bottom) and its
   body is the only one in flow; collapsed bodies drop out of flow and fade
   out underneath the step that slides up over them. */
@media (min-width: 1024px) {
  .registration-network__steps {
    flex: 1;
  }

  .registration-network__line {
    left: 1.6rem;
    width: 2px;
  }

  .registration-network__step {
    flex: 0 0 auto;
    transition: flex-grow var(--duration) var(--easing);
  }

  .registration-network__step.is-active {
    z-index: 2;
    flex-grow: 1;
  }

  .registration-network__step-content {
    position: relative;
    flex: 1;
    padding-top: 0;
  }

  .registration-network__step-title {
    display: flex;
    align-items: center;
    min-height: 3.2rem;
  }

  .registration-network__step-body {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    display: block;
    margin-top: 1.2rem;
    opacity: 0;
    pointer-events: none;

    transition: opacity calc(var(--duration) * 0.6) var(--easing);
  }

  .registration-network__step.is-active .registration-network__step-body {
    position: static;
    display: block;
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
  }

  /* Two or more buttons: stretch to fill the row instead of hugging content. */
  .registration-network__step-action .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Only one button: hug its own content instead of stretching full width. */
  .registration-network__step-action:has(.btn:only-child) {
    width: fit-content;
  }

  .registration-network__step-action .btn:only-child {
    flex: 0 0 auto;
    min-width: 14rem;
  }
}

/* Mobile: the circles sit on one row and slide horizontally so the active one
   is centered; the two neighbours stop 2.4rem short of the card edges. The
   line element is the clip box spanning the full card width, its ::before is
   the line itself, so the line never leaves the card. Step contents are all
   out of flow, stacked on top of each other, and slide out sideways while
   fading -- the row height is locked to the tallest content by JS. */
@media (max-width: 1023px) {

  /* Sliding contents (and any circle that has slid past the edge) must never
     be seen outside the card. */
  .registration-network__card {
    overflow: hidden;
  }

  .registration-network__steps {
    --active-index: 0;
    --network-slide-interval: calc(50vw - 6.8rem);
    gap: 0;
  }

  .registration-network__line {
    top: 1.6rem;
    left: calc(-1 * var(--network-card-padding));
    right: calc(-1 * var(--network-card-padding));
    height: 2px;
    overflow: hidden;
    background-color: transparent;
  }

  .registration-network__line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: calc(2 * var(--network-slide-interval));
    background-color: rgb(var(--color-blue-rgb) / 0.15);
    transform: translateX(calc(-50% + (1 - var(--active-index)) * var(--network-slide-interval)));
    transition: transform var(--duration) var(--easing);
  }

  .registration-network__step {
    position: static;
    display: block;
    /* the steps are flex items, so a z-index here would make each one its own
       stacking context and bury the circles of earlier steps under the active
       step's content -- which would make tapping back impossible. */
    z-index: auto;
  }

  .registration-network__step-number {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    transform: translateX(calc(-50% + (var(--slot-index) - var(--active-index)) * var(--network-slide-interval)));
    transition: transform var(--duration) var(--easing);
  }

  .registration-network__step-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 4.6rem;

    opacity: 0;
    pointer-events: none;
    /* slide a full width plus the card padding, so no sliver of the next
       content is ever visible inside the card */
    transform: translateX(calc((var(--slot-index) - var(--active-index)) * (100% + var(--network-card-padding))));

    transition: transform var(--duration) var(--easing),
      opacity var(--duration) var(--easing);
  }

  .registration-network__step.is-active .registration-network__step-content {
    z-index: 1;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .registration-network__step-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-height: 0;
    gap: 1.8rem;
    grid-template-rows: 1fr;
    opacity: 1;
  }

  /* Content height is locked to the tallest step by JS; anchoring the
     action row to the bottom means shorter titles/descriptions get the
     extra space above the buttons, so every step's buttons line up.
     The body's gap keeps a 1.8rem floor between the description and the
     action row for the tallest step, where auto has no space to give. */
  .registration-network__step-action {
    margin-top: auto;
  }

  .registration-network__step-action .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    white-space: normal;
  }

  /* Only one button: hug its own content and center it instead of
     stretching to fill the card. */
  .registration-network__step-action:has(.btn:only-child) {
    width: fit-content;
    margin-inline: auto;
  }

  .registration-network__step-action .btn:only-child {
    flex: 0 0 auto;
  }
}

.form-field__ts-dropdown .option.active,
.form-field__ts-dropdown .option:hover {
  background-color: var(--color-pastel-light-blue);
  color: var(--color-blue);
}

/* =========================================
   LOGO MARQUEE
========================================= */

.logo-marquee {
  --marquee-duration: 40s;
  --marquee-gap: 6.4rem;
  --marquee-logo-height: 9rem;
  --marquee-fade: 8rem;

  width: 100%;
  overflow: hidden;
}

.logo-marquee--fade {
  -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 var(--marquee-fade),
      #000 calc(100% - var(--marquee-fade)),
      transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0,
      #000 var(--marquee-fade),
      #000 calc(100% - var(--marquee-fade)),
      transparent 100%);
}

.logo-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--marquee-gap);
  animation: logo-marquee-scroll var(--marquee-duration) linear infinite;
  will-change: transform;
}

.logo-marquee--reverse .logo-marquee__track {
  animation-direction: reverse;
}

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

.logo-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.logo-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-marquee__link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.logo-marquee__image {
  display: block;
  height: var(--marquee-logo-height);
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter var(--duration) var(--easing),
    opacity var(--duration) var(--easing);
}

.logo-marquee__item:hover .logo-marquee__image,
.logo-marquee__link:focus-visible .logo-marquee__image {
  filter: grayscale(0);
  opacity: 1;
}

@media (min-width: 1024px) {
  .logo-marquee {
    --marquee-fade: 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    animation: none;
  }

  .logo-marquee {
    overflow-x: auto;
  }

  .logo-marquee__group[aria-hidden="true"] {
    display: none;
  }
}

@keyframes logo-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
  }
}

/* -- Contact info cards -- */

.contact-info__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .contact-info__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-info__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.6rem;
  padding: 4rem 2.4rem;
  border-radius: 1.8rem;
}

@media (min-width: 1024px) {
  .contact-info__card {
    padding: 5.6rem 4rem;
  }
}

.contact-info__label {
  text-transform: uppercase;
  font-weight: 600;
}

.contact-info__card:nth-child(3n+1) {
  background-color: var(--color-blue);
}

.contact-info__card:nth-child(3n+1) .contact-info__icon,
.contact-info__card:nth-child(3n+1) .contact-info__value {
  color: var(--color-white);
}

.contact-info__card:nth-child(3n+1) .contact-info__label {
  color: rgb(var(--color-pastel-light-blue-rgb) / 0.5);
}

.contact-info__card:nth-child(3n+2) {
  background-color: var(--color-light-blue);
}

.contact-info__card:nth-child(3n) {
  background-color: var(--color-pastel-light-blue);
}

.contact-info__card:nth-child(3n+2) .contact-info__icon,
.contact-info__card:nth-child(3n+2) .contact-info__value,
.contact-info__card:nth-child(3n) .contact-info__icon,
.contact-info__card:nth-child(3n) .contact-info__value {
  color: var(--color-blue);
}

.contact-info__card:nth-child(3n+2) .contact-info__label,
.contact-info__card:nth-child(3n) .contact-info__label {
  color: rgb(var(--color-blue-rgb) / 0.5);
}

.contact-info__values {
  display: flex;
  flex-direction: column;
}

.contact-info__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

.contact-info__card:nth-child(3n+1) .contact-info__link:hover,
.contact-info__card:nth-child(3n) .contact-info__link:hover {
  color: var(--color-light-blue);
}

.contact-info__card:nth-child(3n+2) .contact-info__link:hover {
  color: var(--color-pastel-light-blue);
}

.contact-info__icon {
  font-size: 3.6rem;
}

/* =========================================
   CONTACT MAP
========================================= */
.map-container {
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 342 / 456;
  border-radius: 1.8rem;
  overflow: hidden;
}

.map-container__marker {
  font-size: 4rem;
  line-height: 1;
  color: var(--color-blue);
  text-decoration: none;
}

.map-container>.map-container__marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
}

.map-container>iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 1024px) {
  .map-container {
    aspect-ratio: 1320 / 660;
  }
}

/* =========================================
   CONTACT DEPARTMENTS
========================================= */
.contact-dept__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
}

.contact-dept__card {
  width: 100%;
  text-align: center;
}

.contact-dept__name {
  margin-bottom: 1.6rem;
  color: var(--color-blue);
}

.contact-dept__items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.contact-dept__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-blue);
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

.contact-dept__item:hover {
  color: var(--color-light-blue);
}

.contact-dept__item .icon-mail,
.contact-dept__item .icon-call {
  font-size: 1.2rem;
}

.contact-dept__icon {
  font-size: 1.5rem;
}

@media (min-width: 1024px) {
  .contact-dept__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8rem 2rem;
  }

  .contact-dept__card {
    width: 42.6rem;
    max-width: 100%;
  }
}

/* =========================================
   HOME : WHO WE ARE
========================================= */
/* Two equal columns : the intro sticks while the card grid scrolls past it.
   The section owns the 10rem block padding `.graphic-bg` anchors to. */
.home-about {
  position: relative;
  padding-block: 10rem;
}

.home-about__title {
  color: var(--color-blue);
  text-align: left;
  margin-bottom: 5.2rem;
}

/* Mobile breaks the title after "สำนักงาน"; desktop reads as one centred line. */
.home-about__title-line {
  display: block;
}

@media (min-width: 1024px) {
  .home-about__title {
    text-align: center;
  }

  .home-about__title-line {
    display: inline;
  }
}

.home-about__grid {
  display: grid;
  gap: 6rem;
}

/* Each half keeps its content at 52rem pinned to the right edge of its column,
   so the two blocks sit against the middle line / the container gutter. */
@media (min-width: 1024px) {
  .home-about__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    justify-items: end;
  }

  .home-about__intro,
  .home-about__col {
    width: 100%;
    max-width: 52rem;
  }
}

/* align-self: start (from the grid above) is what lets this stick : a stretched
   grid item is as tall as the row and would have nothing to travel through. */
@media (min-width: 1024px) {
  .home-about__intro {
    position: sticky;
    top: 10rem;
  }
}

/* Shared by both columns ("Who we are" / "What we do") : always uppercase. */
.home-about__eyebrow {
  color: rgb(var(--color-blue-rgb) / 0.4);
  text-transform: uppercase;
  margin-bottom: 2.6rem;
  font-weight: 600;
}

.home-about__lead {
  color: var(--color-blue);
  margin-bottom: var(--spacing-xl);
  text-wrap: balance;
}

.home-about__desc {
  color: var(--color-grey);
  margin-bottom: 2.8rem;
}

/* Two per row; an odd last card stretches the full row. */
.home-about__cards {
  display: grid;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .home-about__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-about__card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.home-about__card {
  border-radius: 0.8rem;
  border: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  background: var(--color-white);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.home-about__card-icon {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;

  border-radius: 0.8rem;
  border: var(--border-width) solid rgb(var(--color-black-rgb) / 0.1);
  background: var(--color-white);
  padding: 0.8rem;

  color: var(--color-blue);
}

.home-about__card-icon i {
  font-size: 3.9rem;
  line-height: 1;
}

@media (min-width: 1024px) {
  .home-about__card-icon i {
    font-size: 2.8rem;
  }
}

.home-about__card-title {
  color: var(--color-blue);
}

.home-about__card-desc {
  color: var(--color-grey);
  max-width: 30rem;
}

@media (min-width: 1024px) {
  .home-about__card-desc {
    max-width: unset;
  }
}

/* =========================================
   HOME : OVERVIEW & DUTIES
========================================= */
/* Full-bleed background section (1440 / 1838) : stats + CTA + duty cards,
   all reading white over the darkened photo. */
.home-overview {
  position: relative;
  /* No bottom padding : the section — and with it the white ground — ends
     exactly at the bottom edge of the lowest duty card. */
  padding-block: 10rem 0;
  color: var(--color-white);
  background-color: var(--color-white);
  /* Contains the full-bleed white ground below, so its 100vw never adds a
     horizontal scrollbar. */
  overflow-x: clip;
}

/* The photo plus the two overlay gradients, as one paint. `cover` replaces the
   Figma crop (-841.932px / 226.914%), which only held for that frame width.
   It covers the whole section on every screen ; the white ground on the duty
   wrapper is what cuts it off at the mid-line of the second card. */
.home-overview__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.00) 35.97%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%),
    url("../images/main-bg-02.png") lightgray center / cover no-repeat;
}

.home-overview__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-overview__eyebrow {
  text-transform: uppercase;
  color: var(--color-light-blue);
  margin-bottom: var(--spacing-lg);
  font-weight: 600;
}

.home-overview__title {
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .home-overview__title {
    max-width: 90rem;
  }

  .home-overview__intro {
    max-width: 108rem;
  }
}

/* -- Stats : one per row, staggered left / right down the column -- */
.home-overview__stats {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-md);
  padding-block: 6.5rem;
}

.home-overview__stat {
  width: fit-content;
  max-width: 100%;
}

/* Mobile : simple left / right alternation. */
.home-overview__stat:nth-child(odd) {
  align-self: flex-start;
  text-align: left;
}

.home-overview__stat:nth-child(even) {
  align-self: flex-end;
  text-align: right;
}

/* Desktop : same one-per-row stack, but each block is inset so that read from
   left to right the order is 1, 3, 2, 4 — each on its own row. */
@media (min-width: 1024px) {
  .home-overview__stats {
    gap: 0;
    padding-inline: 13rem 6.2rem;
  }

  .home-overview__stat {
    max-width: 46rem;
  }

  .home-overview__stat:nth-child(2) {
    margin-inline-end: 12%;
  }

  .home-overview__stat:nth-child(3) {
    margin-inline-start: 24%;
  }

  /* The fifth block sits on its own row, flush with the first one. */
  .home-overview__stat:nth-child(5) {
    margin-inline: 0;
  }
}

.home-overview__stat-value {
  font-size: 9.2rem;
  line-height: 1.1;
  font-weight: 700;
  /* Equal-width digits, so the counting animation does not jitter. */
  font-variant-numeric: tabular-nums;
}

/* The year block reads as a caption next to the headline numbers. */
.home-overview__stat-value--sm {
  font-size: 4rem;
}

@media (min-width: 1024px) {
  .home-overview__stat-value {
    font-size: 18rem;
  }

  .home-overview__stat-value--sm {
    font-size: 8rem;
  }
}

.home-overview__stat-label {
  color: var(--color-light-blue);
  text-wrap: balance;
  max-width: 28rem;
}

@media (min-width: 1024px) {
  .home-overview__stat-label {
    max-width: 33rem;
  }
}

/* -- Actions -- */
.home-overview__actions {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--spacing-sm);
  margin-bottom: 10rem;
}

/* Two buttons split the row on mobile ; a lone one (the download button hides
   itself when there is no file) keeps its natural width instead of stretching. */
.home-overview__actions:has(.btn:only-child) {
  width: fit-content;
  min-width: 16.5rem;
}

.home-overview__actions .btn {
  min-width: 0;
  --button-padding-x: var(--spacing-md);
}

@media (min-width: 1024px) {
  .home-overview__actions {
    width: fit-content;
  }

  .home-overview__actions .btn {
    --button-padding-x: var(--spacing-xl);
  }
}

/* -- Duty cards --
   Same palette as the about page mission cards. Mobile keeps them on one row
   as a swipeable track ; desktop steps them down like a staircase : the cards
   keep the same height and each one starts 8rem lower than the last. */
/* Wrapper : holds the white ground so the photo always stops at the same line.
   Its height is the height of the card block, so 50% of it is the mid-line of
   the second card on every screen — on mobile the cards are top-aligned and
   equal height, on desktop the staircase margins are balanced (see below) so
   the middle card is still centred on the block. */
.home-overview__duties-wrap {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-width: 0;
}

/* Hangs off the bottom edge of the card block and runs out to the right edge of
   the screen (`right: 50% - 50vw`, the wrap being centred in the viewport).
   translateY puts its top 2rem back up inside the block, so the cards — raised
   to z-index 1 below — cover exactly that much of it. Being a child of this
   section is what lets the cards paint over it at all. */
.home-overview__duties-wrap>.graphic-bg {
  top: auto;
  bottom: 0;
  right: calc(50% - 50vw);
  transform: translateY(calc(100% - 4rem));
  z-index: 0;
}

@media (min-width: 1024px) {
  .home-overview__duties-wrap>.graphic-bg {
    transform: translateY(calc(100% - 2rem));
  }
}

.home-overview__duties-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--color-white);
  z-index: -1;
}

.home-overview__duties {
  display: flex;
  gap: var(--spacing-md);
  /* Mobile keeps every card on one swipeable row ; desktop wraps (below). */
  flex-wrap: nowrap;
  /* Cards stay centred on the track : `safe` keeps the first card reachable
     when the row overflows (mobile swipe track, narrow desktop). */
  justify-content: safe center;

  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-snap-type: x proximity;

  /* Full-bleed track : `stretch` (the container centres its children) plus the
     negative gutter makes the track exactly as wide as the screen, so cards
     run out to both edges instead of stopping at the container padding. The
     start padding keeps the first card aligned with the rest of the section ;
     no end padding, so the last card can be swiped flush to the edge. */
  margin-inline: calc(var(--container-gutter) * -1);
  padding-inline: var(--container-gutter);
  scroll-padding-inline: var(--container-gutter);
}

.home-overview__duties::-webkit-scrollbar {
  display: none;
}

.home-overview__duty {
  flex: 0 0 auto;
  width: min(90%, 32.4rem);
  scroll-snap-align: start;

  border-radius: 1.8rem;
  padding: var(--spacing-xl);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  gap: var(--spacing-md);

  min-height: 38rem;
  max-width: 43rem;

  /* Keeps the cards over the graphic hanging off the bottom of the block, so
     only its top 2rem is covered. */
  position: relative;
  z-index: 1;
}

/* Mission palette : blue, light blue, pastel light blue — repeating every
   three cards, so a fourth card starts the sequence over. */
.home-overview__duty:nth-child(3n + 1) {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.home-overview__duty:nth-child(3n + 1) .home-overview__duty-icon {
  color: var(--color-light-blue);
}

.home-overview__duty:nth-child(3n + 1) .home-overview__duty-desc {
  color: rgb(var(--color-white-rgb) / 0.8);
}

.home-overview__duty:nth-child(3n + 2) {
  background-color: var(--color-light-blue);
}

.home-overview__duty:nth-child(3n + 3) {
  background-color: var(--color-pastel-light-blue);
}

.home-overview__duty:nth-child(3n + 2),
.home-overview__duty:nth-child(3n + 3) {
  color: var(--color-blue);
}

@media (min-width: 1024px) {
  .home-overview__duties {
    gap: 0 var(--spacing-lg);
    flex-wrap: wrap;

    overflow-x: visible;
    margin-inline: 0;
    padding-inline-start: 0;
    align-items: stretch;
  }

  /* Three per row ; a fourth card wraps onto a new row and restarts the
     staircase. */
  .home-overview__duty {
    flex: 0 1 calc((100% - var(--spacing-lg) * 2) / 3);
    width: auto;
    min-width: 0;
    min-height: 50rem;
  }

  /* Staircase : each card starts 8rem lower than the last. The block margins
     add up to 16rem on every card, so all three keep exactly the same height,
     the last one ends flush with the bottom of the row, and the middle card
     stays centred on it — which is the line the photo above stops at. */
  .home-overview__duty:nth-child(3n + 1) {
    margin-block: 0 16rem;
  }

  .home-overview__duty:nth-child(3n + 2) {
    margin-block: 8rem;
  }

  .home-overview__duty:nth-child(3n + 3) {
    margin-block: 16rem 0;
  }
}

.home-overview__duty-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

@media (min-width: 1024px) {
  .home-overview__duty-head {
    gap: var(--spacing-xl);
  }
}

.home-overview__duty-icon {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
}

.home-overview__duty-icon i {
  font-size: 5rem;
  line-height: 1;
  opacity: 0.5;
}

/* =========================================
   HOME : WHY OSEP
========================================= */
/* White section : a centred intro over four identical cards, with the
   decorative graphic tucked under the duty cards at the top-right. */
/* No background-color : the graphic hanging down from the section above would
   be painted over by it (this section paints later). The page ground is white
   anyway (`body`). */
.home-why {
  position: relative;
  padding-block: 10rem;
  /* Contains the full-bleed card track below, so its 100vw never adds a
     horizontal scrollbar. */
  overflow-x: clip;
}

.home-why__container {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}

/* Intro block : everything centred, 2.8rem apart. */
.home-why__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.8rem;
}

.home-why__eyebrow {
  color: var(--color-light-blue);
  font-weight: 600;
}

.home-why__title {
  color: var(--color-black);
  text-wrap: balance;
}

/* Mobile puts "ทางเลือก" on its own first line ; desktop lets the whole title
   wrap naturally. */
.home-why__title-lead {
  display: block;
}

@media (min-width: 1024px) {
  .home-why__title-lead {
    display: inline;
  }
}

.home-why__title-accent {
  color: var(--color-blue);
}

.home-why__desc {
  color: var(--color-grey);
  max-width: 82rem;
}

.home-why__cards-wrap {
  position: relative;
}

/* One swipe track at every width : `safe center` centres the cards while they
   all fit and falls back to left-aligned + scrollable as soon as they don't. */
.home-why__cards {
  position: relative;
  z-index: 1;

  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-md);

  justify-content: safe center;

  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-snap-type: x proximity;

  /* Full-bleed track : the negative margin runs the cards out to both screen
     edges — past the container's own centring margins on desktop — and the
     padding is only the gutter, so the row gets the whole viewport to fit in
     (a wide screen holds five cards even though the 150rem container can't). */
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--container-gutter);
  scroll-padding-inline: var(--container-gutter);
}

.home-why__cards::-webkit-scrollbar {
  display: none;
}

.home-why__card {
  flex: 0 0 auto;
  width: min(90%, 32.4rem);
  scroll-snap-align: start;

  background-color: var(--color-light-grey);
  border-radius: 1.8rem;
  padding: var(--spacing-xl);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xl);
}

.home-why__card-title {
  color: var(--color-blue);
}

.home-why__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-black-rgb) / 0.2);
}

.home-why__card-icon i {
  font-size: 8rem;
  line-height: 1;
}

.home-why__card-desc {
  color: var(--color-grey);
}

/* =========================================
   HOME : COVERAGE MAP
========================================= */
/* Centred two-line heading over the dotted map of Thailand. The map lives in a
   frame that holds its exact aspect ratio (428 x 787), so every marker's
   percentage coordinate lands on the same spot at any size. */
.home-map {
  --home-map-ratio: 428 / 787;
  /* header height : mobile inner padding (1.2rem x 2) + 4rem controls */
  --home-map-header-h: 6.4rem;
  /* gap between the heading and the map */
  --home-map-gap: 4rem;
  /* section padding : the sticky bar has to reach past the map, down to the
     very bottom of the section, so it needs the value too. */
  --home-map-pad: 10rem;
  /* extra room under the map : the bar comes to rest on the section's bottom
     edge, so the bottom padding has to clear the bar's own content height,
     otherwise the figures and the button land on top of the map. */
  --home-map-pad-bottom: 24rem;

  padding-block: var(--home-map-pad) var(--home-map-pad-bottom);
  overflow-x: clip;
}

.home-map__title {
  text-align: center;
  text-wrap: balance;
}

.home-map__title-line {
  display: block;
  color: var(--color-black);
}

.home-map__title-line--accent {
  color: var(--color-blue);
}

/* Mobile : the map stretches to the full container width, but never grows
   taller than the screen left under the header. */
.home-map__frame {
  position: relative;
  width: min(100%, (100svh - var(--home-map-header-h) - var(--home-map-gap)) * var(--home-map-ratio));
  aspect-ratio: var(--home-map-ratio);
  margin-inline: auto;
  margin-top: var(--home-map-gap);
}

.home-map__image {
  display: block;
  width: 100%;
  height: 100%;
}

/* Each point owns a marker and its card. The wrapper is unpositioned, so both
   children resolve their coordinates against the frame. */
.home-map__point {
  position: static;
}

/* Two concentric dots : a solid core on the coordinate with a soft halo around
   it, both centred on the same point. */
.home-map__marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  transform: translate(-50%, -50%);
  z-index: 1;
  padding: 0;
  border: 0;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background-color: rgb(var(--color-blue-rgb) / 0.2);
  cursor: pointer;
  transition: background-color var(--duration) var(--easing);
}

.home-map__marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--color-blue);
  transition: background-color var(--duration) var(--easing),
    transform var(--duration) var(--easing);
}

/* Active : hover / keyboard focus on desktop, tap on touch (JS adds is-active). */
.home-map__point:hover .home-map__marker,
.home-map__point:focus-within .home-map__marker,
.home-map__point.is-active .home-map__marker {
  background-color: rgb(var(--color-light-blue-rgb) / 0.2);
}

.home-map__point:hover .home-map__marker::before,
.home-map__point:focus-within .home-map__marker::before,
.home-map__point.is-active .home-map__marker::before {
  background-color: var(--color-light-blue);
  transform: translate(-50%, -50%) scale(2);
}

/* Card : the same fields as the stat-map tooltip, minus the arrow.
   Mobile : hidden until its marker is tapped, then it opens just below it. */
.home-map__card {
  position: absolute;
  left: 50%;
  top: calc(var(--marker-y) + 2.6rem);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(26rem, 100%);
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: var(--color-white);
  border: 1px solid rgb(var(--color-black-rgb) / 0.1);
  opacity: 0;
  visibility: hidden;
  transition: background-color var(--duration) var(--easing),
    opacity var(--duration) var(--easing),
    visibility var(--duration) var(--easing);
}

.home-map__point.is-active .home-map__card,
.home-map__point:focus-within .home-map__card {
  opacity: 1;
  visibility: visible;
}

.home-map__card-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.4rem;
  margin-bottom: 0.8rem;
}

.home-map__card-title,
.home-map__card-body {
  margin: 0;
  color: var(--color-blue);
  transition: color var(--duration) var(--easing);
}

.home-map__card-body {
  color: var(--color-grey);
}

.home-map__card-actions .btn {
  width: auto;
  min-width: 9.5rem;
}

/* Active card : blue panel, so its button flips to the light variant's look. */
.home-map__point:hover .home-map__card,
.home-map__point:focus-within .home-map__card,
.home-map__point.is-active .home-map__card {
  background-color: var(--color-blue);
}

.home-map__point:hover .home-map__card :is(.home-map__card-title, .home-map__card-body),
.home-map__point:focus-within .home-map__card :is(.home-map__card-title, .home-map__card-body),
.home-map__point.is-active .home-map__card :is(.home-map__card-title, .home-map__card-body) {
  color: var(--color-white);
}

.home-map__point:hover .home-map__card-actions .btn,
.home-map__point:focus-within .home-map__card-actions .btn,
.home-map__point.is-active .home-map__card-actions .btn {
  background-color: var(--color-white);
  border-color: rgb(var(--color-black-rgb) / 0.1);
  color: var(--color-blue);
}

.home-map__point:hover .home-map__card-actions .btn:hover,
.home-map__point:focus-within .home-map__card-actions .btn:hover,
.home-map__point.is-active .home-map__card-actions .btn:hover {
  background-color: var(--color-pastel-light-blue);
}

/* Mobile / tablet popup : the card leaves the map and opens over the page,
   like the media-single lightbox. The card inside it never picks up the point's
   active state, so it always stays on the white panel. */
.home-map__modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.88);
  padding-inline: 2.4rem;
}

.home-map__modal.is-open {
  display: grid;
  grid-template-areas:
    "close close"
    "frame frame"
    "prev next";
  grid-template-columns: 1fr 1fr;
  column-gap: 0.4rem;
  align-content: center;
  justify-content: center;
}

.home-map__modal-frame {
  grid-area: frame;
  width: 100%;
}

/* The cloned card : stripped of the map's absolute placement so it sits in the
   popup, and always white. */
.home-map__modal .home-map__card {
  position: static;
  transform: none;
  width: 100%;
  opacity: 1;
  visibility: visible;
  background-color: var(--color-white);
}

.home-map__modal .home-map__card-title {
  color: var(--color-blue);
}

.home-map__modal .home-map__card-body {
  color: var(--color-blue);
}

.home-map__modal-close {
  grid-area: close;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 2.4rem;
  border: var(--border-width) solid var(--color-white);
  border-radius: 50%;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
}

.home-map__modal-close i {
  font-size: 1.6rem;
  color: var(--color-white);
}

.home-map__modal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.7rem;
  height: 3.7rem;
  margin-top: 3.6rem;
  border: var(--border-width) solid #D9D9D9;
  border-radius: 50%;
  background-color: var(--color-white);
  cursor: pointer;
  transition: opacity var(--duration) var(--easing);
}

.home-map__modal-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.home-map__modal-nav--prev {
  grid-area: prev;
  justify-self: end;
  transform: rotate(90deg);
}

.home-map__modal-nav--next {
  grid-area: next;
  justify-self: start;
  transform: rotate(-90deg);
}

.home-map__modal-nav i {
  font-size: 1.6rem;
  color: var(--color-blue);
}

/* -- Sticky stats bar --
   The layer runs from the top edge of the map down to the bottom edge of the
   section and breaks out of the frame to the full viewport width. The bar
   sits at the layer's bottom, so `bottom: 0` pins it to the bottom of the
   viewport on the way down : it can never ride higher than the map's top
   edge (the layer's top) and it comes to rest on the section's bottom edge. */
.home-map__sticky {
  position: absolute;
  top: 0;
  bottom: calc(var(--home-map-pad-bottom) * -1);
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.home-map__stats {
  position: sticky;
  bottom: 0;
  /* auto side margins on desktop stop the flex layer from stretching it. */
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;

  padding: 4rem var(--container-gutter);
  /* transparent at the top, solid white by the time it reaches the bar. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 73.56%);
  /* The bar is much taller than its content : the see-through top of the
     gradient hangs over the lower markers, so clicks have to fall through it
     and only the opaque strip and the bar's own content take them. */
  pointer-events: none;
}

/* The solid end of the gradient : whatever sits under it is hidden, so it
   swallows the clicks instead of letting them reach a marker no one can see. */
.home-map__stats::before {
  content: "";
  position: absolute;
  inset: 73.56% 0 0;
  pointer-events: auto;
}

.home-map__stats-figures,
.home-map__stats-action {
  position: relative;
  pointer-events: auto;
}

.home-map__stats-figures {
  display: flex;
  justify-content: center;
  gap: 4rem;
}

.home-map__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--color-blue);
  gap: 0.2rem;
}

.home-map__stat-value {
  font-size: 5rem;
  line-height: 1.2;
  font-weight: 600;
  /* Equal-width digits, so the counting animation does not jitter. */
  font-variant-numeric: tabular-nums;
}

.home-map__stat-label {
  color: var(--color-blue);
}

/* Below desktop the cards only ever show inside the popup. */
@media (max-width: 1023px) {
  .home-map__frame .home-map__card {
    display: none;
  }
}

@media (min-width: 1024px) {
  .home-map {
    /* desktop inner padding (0.8rem x 2) + 4rem controls */
    --home-map-header-h: 5.6rem;
    --home-map-gap: 11.5rem;
    --home-map-pad: 12rem;
    --home-map-pad-bottom: 28rem;
  }

  /* 428px wide on a 1440px screen, scaling with the viewport below that and
     capped at its natural width above it. */
  .home-map__frame {
    width: min(29.72vw, 42.8rem, (100svh - var(--home-map-header-h)) * var(--home-map-ratio));
  }

  .home-map__marker {
    width: 5.2rem;
    height: 5.2rem;
  }

  .home-map__marker::before {
    width: 1.4rem;
    height: 1.4rem;
  }

  /* Desktop : all four cards stay on screen, hanging off the side of the map
     that each marker's `side` value names, at its own gap and top offset. */
  .home-map__card {
    left: auto;
    top: var(--card-top);
    transform: none;
    width: 24.8rem;
    opacity: 1;
    visibility: visible;
  }

  /* The reset above clears the mobile centring, and it carries the same weight
     as AOS's own `[data-aos=fade-up]` while sitting later in the cascade : left
     alone it wins, and the reveal loses its movement and only fades. Hand the
     transform back, over a distance that suits a card beside the map rather
     than AOS's default 100px. */
  .home-map__card[data-aos="fade-up"] {
    transform: translate3d(0, 4rem, 0);
  }

  .home-map__card[data-aos="fade-up"].aos-animate {
    transform: none;
  }

  .home-map__point--left .home-map__card {
    right: calc(100% + var(--card-gap));
  }

  .home-map__point--right .home-map__card {
    left: calc(100% + var(--card-gap));
  }

  /* Desktop : counts and button share one row, pushed to the outer edges. */
  .home-map__stats {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;

    max-width: var(--container-max-width);
    margin-inline: auto;
    /* the bar is pinned by its bottom edge, so the bottom padding is what sets
       how far it rides above the bottom of the viewport. */
    padding: 18rem var(--container-gutter) 1.6rem;
  }

  .home-map__stats-figures {
    gap: 8rem;
  }

  .home-map__stat-value {
    font-size: 7.2rem;
  }

  .home-map__modal,
  .home-map__modal.is-open {
    display: none;
  }
}

/* =========================================
   HOME : CLOSING CTA
========================================= */
/* Full-bleed photo band that closes the page, sitting right above the footer.
   The content is centred in the frame and starts 11rem below the top edge. */
.home-cta {
  position: relative;
  padding-block: 11rem 0;
  /* Fills the viewport on every screen. dvh keeps it honest on mobile, where the
     browser chrome collapses ; the vh above it is the fallback. */
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-white);
  overflow-x: clip;
}

/* The photo plus the white top fade, as one paint. `cover` on every screen : the
   design crop (100% / 108.333%) only held at 1440 wide and stretched the photo
   on anything wider, so the image is cropped to the frame instead of scaled to
   it. The 33.75px lift of the design becomes a `center top` bias, which keeps
   the subject where it sits in the frame as the crop changes. */
.home-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.00) 60.98%),
    url("../images/fullscreen-media.png") lightgray center top / cover no-repeat;
}

.home-cta__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xl);
}

.home-cta__title {
  color: var(--color-black);
  text-wrap: balance;
}

.home-cta__title-lead {
  display: block;
  color: var(--color-blue);
}

/* Mobile : the two buttons share the row and stretch to fill it. */
.home-cta__actions {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--spacing-sm);
}

.home-cta__actions .btn {
  min-width: 0;
  --button-padding-x: var(--spacing-md);
}

@media (min-width: 1024px) {
  .home-cta__title {
    max-width: 108rem;
  }

  .home-cta__actions {
    width: fit-content;
  }

  .home-cta__actions .btn {
    --button-padding-x: var(--spacing-xl);
  }
}

/* =========================================
   STAT MAP PAGE
========================================= */
.stat-map-page {
  position: relative;
  padding-block: 10rem 12rem;
}

@media (min-width: 1024px) {
  .stat-map-page {
    padding-top: 12rem;
  }
}

/* This page keeps its graphic at the bottom-right instead of the top, so it sits
   right above the footer. Anchored to the section's bottom edge; the 12rem
   bottom padding is what keeps the results clear of it. On mobile it drops 2rem
   past that edge so the footer paints over the bottom of it. */
.stat-map-page>.graphic-bg {
  top: auto;
  bottom: -2rem;
}

@media (min-width: 1024px) {
  .stat-map-page>.graphic-bg {
    bottom: 0;
  }
}

.stat-map-page__title {
  color: var(--color-blue);
  text-align: center;
  padding-bottom: calc(6rem - 0.5rem);
}

@media (min-width: 1024px) {
  .stat-map-page__title {
    padding-bottom: 8rem;
  }
}

/* Mobile : label above input, rows stacked, the two buttons share one row. */
.stat-map-filter {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.stat-map-filter__row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* aligns the label text with the control's own left padding */
@media (max-width: 1023px) {
  .stat-map-filter .form-field__label {
    padding-left: 1.8rem;
  }
}

/* This page's inputs read blue instead of grey -- both the typed value and the
   placeholder (which would otherwise take the UA's faded version of `color`). */
.stat-map-filter .form-field__control {
  color: var(--color-blue);
}

.stat-map-filter .form-field__control::placeholder {
  color: var(--color-blue);
  opacity: 1;
}

.stat-map-filter__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--spacing-xs);
}

.stat-map-filter__actions .btn {
  min-width: 0;
  --button-padding-x: var(--spacing-md);
}

/* Desktop : one grid for the whole form so the label column is as wide as the
   longest label and both controls sit in the same column -- same start, same
   width. The third column is reserved by the buttons on the second row, so the
   first row's control stops short of it instead of stretching past. */
@media (min-width: 1024px) {
  .stat-map-filter {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    column-gap: var(--spacing-sm);
    row-gap: var(--spacing-xs);
    align-items: center;
  }

  .stat-map-filter__row,
  .stat-map-filter .form-field {
    display: contents;
  }

  .stat-map-filter__row--address .form-field__label {
    grid-area: 1 / 1;
  }

  .stat-map-filter__row--address .form-field__autocomplete {
    grid-area: 1 / 2;
    max-width: 65rem;
  }

  .stat-map-filter__row--actions .form-field__label {
    grid-area: 2 / 1;
  }

  .stat-map-filter__row--actions .form-field__autocomplete {
    grid-area: 2 / 2;
    max-width: 65rem;
  }

  .stat-map-filter__actions {
    grid-area: 2 / 3;
    grid-auto-columns: auto;
  }

  .stat-map-filter__actions .btn {
    --button-padding-x: var(--spacing-xl);
    min-width: 12rem;
  }
}

/* Map : one wide background image behind a centered core image. Marker
   coordinates are percentages of the CORE image, so the same X / Y pair lands on
   the same spot on every screen size.
   Mobile : the background is dropped, the core image fills the container.
   Desktop : the background stretches to the full container width and the core
   image scales with it, so the two read as a single, wider map. */
/* sits above the map and shares the container's left edge, so the count reads
   as a label for the map below it */
.stat-map-results {
  margin-top: 6rem;
  color: var(--color-blue);
  text-transform: uppercase;
  font-weight: 600;
}

.stat-map {
  position: relative;
  display: flex;
  justify-content: center;
  /* sits outside .container in the markup, so it reproduces its inner box --
     kept padding-free so the frame's % width below resolves against the same
     box as the background image */
  width: calc(100% - var(--container-gutter) * 2);
  max-width: calc(var(--container-max-width) - var(--container-gutter) * 2);
  margin-top: 1.2rem;
  margin-inline: auto;
}

.stat-map__bg {
  display: none;
}

.stat-map__frame {
  position: relative;
  width: 100%;
  max-width: 37.2rem;
}

.stat-map__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.8rem;
}

.stat-map__marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  /* the pin's point sits on the coordinate, not its centre */
  transform: translate(-50%, -100%);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-blue);
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.stat-map__marker:hover,
.stat-map__marker:focus-visible,
.stat-map__marker[aria-expanded="true"] {
  color: var(--color-light-blue);
}

.stat-map__marker .icon-location {
  display: block;
  font-size: 3.2rem;
  /* white outline so the pin stays readable over the map */
  text-shadow:
    0 0 0.1rem #fff,
    0.1rem 0 0 #fff,
    -0.1rem 0 0 #fff,
    0 0.1rem 0 #fff,
    0 -0.1rem 0 #fff,
    0.07rem 0.07rem 0 #fff,
    -0.07rem 0.07rem 0 #fff,
    0.07rem -0.07rem 0 #fff,
    -0.07rem -0.07rem 0 #fff;
}

/* Stat map tooltip
   The JS moves each tooltip to <body> and positions it with Floating UI
   (top by default, flipped/shifted when the viewport is too tight), so the
   map's own overflow never clips it. */
.stat-map-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  /* under the sticky header (z-index 100), over everything on the page */
  z-index: 90;
  /* narrow phones : never wider than the screen, still comfortable to read */
  width: min(28rem, calc(100vw - 3.2rem));
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: var(--color-blue);
  color: var(--color-white);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.stat-map-tooltip[hidden] {
  display: none;
}

.stat-map-tooltip.is-open {
  opacity: 1;
}

.stat-map-tooltip__inner {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.stat-map-tooltip__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.4rem;
}

.stat-map-tooltip__title,
.stat-map-tooltip__body {
  margin: 0;
  color: inherit;
}

.stat-map-tooltip__actions .btn {
  width: auto;
  min-width: 9.5rem;
}

/* Floating UI writes the arrow's offset into left/top ; the rotated square
   keeps its own corner radius so the tip matches the panel. */
.stat-map-tooltip__arrow {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  background-color: inherit;
  transform: rotate(45deg);
}

@media (min-width: 1024px) {
  .stat-map-tooltip {
    width: 24.8rem;
  }

  .stat-map-results {
    margin-top: 8rem;
  }

  .stat-map__bg {
    /* the wide background stretches to the container's full inner width */
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.8rem;
  }

  .stat-map__frame {
    /* the core image keeps its share of the background (372 / 1320 of its
       width), so the seam stays invisible at any container width */
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 28.1818%;
    max-width: none;
  }
}


/* =========================================
   POLICY PAGE
========================================= */
/* Wrapper for the long-form policy content. Only job here is to anchor the
   decorative graphic ; the 10rem / 12rem page block lives on `.entry-content`. */
.policy-section {
  position: relative;
}

/* Same treatment as the stat map page : the graphic sits at the bottom-right
   instead of the top, right above the footer. The 12rem bottom padding on
   `.entry-content` is what keeps the copy clear of it. On mobile it drops 2rem
   past that edge so the footer paints over the bottom of it. */
.policy-section>.graphic-bg {
  top: auto;
  bottom: -2rem;
}

@media (min-width: 1024px) {
  .policy-section>.graphic-bg {
    bottom: 0;
  }
}


/* =========================================
   GUTENBERG
   Long-form editor content (policy.php today, any WP page later).
   Everything here runs on this project's tokens : the type scale from
   font-scale-engine.css, the spacing / colour scale from variables.css.
   Body copy is grey, headings are blue — same as the hand-built sections.
========================================= */
.entry-content {
  /* one readable prose column ; the measure is the content width itself —
     the max-width below adds the two container gutters back on */
  --entry-measure: 78.3rem;

  /* vertical rhythm */
  --entry-stack: 5.4rem;
  /* block ↔ block */
  --entry-stack-sm: var(--spacing-md);
  /* looser pairs (media ↔ caption) */
  --entry-stack-xs: var(--spacing-xs);
  /* tight pairs (list items, caption) */
  --entry-heading-gap: 2.8rem;
  /* heading ↔ its first paragraph */
  --entry-page-title-gap: 9rem;
  /* page title ↔ the content under it */
  --entry-section-gap: var(--section-gap);
  /* group ↔ group */

  /* WP font-size presets, mapped onto this project's scale */
  --wp--preset--font-size--small: var(--font-size-body-2);
  --wp--preset--font-size--normal: var(--font-size-body);
  --wp--preset--font-size--medium: var(--font-size-h4);
  --wp--preset--font-size--large: var(--font-size-h3);
  --wp--preset--font-size--x-large: var(--font-size-h2);
  --wp--preset--font-size--xx-large: var(--font-size-h1);
  --wp--preset--font-size--huge: var(--font-size-display);

  --wp--style--unstable-gallery-gap: var(--spacing-md);
  --wp--style--root--padding-left: var(--container-gutter);
  --wp--style--root--padding-right: var(--container-gutter);
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: var(--container-max-width);

  width: 100%;
  max-width: calc(var(--entry-measure) + var(--container-gutter) * 2);
  margin-inline: auto;
  /* same 10rem / 12rem page block as the other inner pages */
  padding: 10rem var(--container-gutter) 12rem;

  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-grey);
}

@media (min-width: 1450px) {
  .entry-content {
    --entry-measure: 80rem;
  }
}

.entry-content .is-layout-flex {
  display: flex;
  flex-wrap: wrap;
}

/* -- Headings -- */
.entry-content :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--font-primary);
  /* 600, matching typography.css — not the 700 of --font-heading-weight */
  font-weight: 600;
  letter-spacing: var(--font-heading-letter-spacing);
  text-transform: var(--font-heading-text-transform);
  color: var(--color-blue);
  text-wrap: pretty;
}

.entry-content h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

.entry-content h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

.entry-content h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

.entry-content h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

.entry-content h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

.entry-content h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
}

/* A centred h1 opens a page, so it gets the same breathing room a page title
   has elsewhere on the site. */
.entry-content>h1:first-child {
  text-align: center;
  text-wrap: balance;
  margin-bottom: var(--entry-page-title-gap);
}

/* -- Body copy -- */
.entry-content :is(p, li, address, th, td, dt, dd) {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.entry-content p {
  margin: 0;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.entry-content :is(strong, b) {
  font-weight: 600;
  color: var(--color-blue);
}

.entry-content a:not(.wp-block-button__link) {
  color: var(--color-blue);
  text-decoration: underline;
  text-decoration-thickness: var(--text-decoration-thickness);
  text-underline-offset: var(--text-underline-offset);
  transition: color var(--duration) var(--easing);
}

.entry-content a:not(.wp-block-button__link):hover {
  color: var(--color-light-blue);
}

.entry-content .text-sub {
  font-size: var(--font-size-sub);
  line-height: var(--line-height-sub);
}

/* -- WP font-size presets -- */
.entry-content .has-small-font-size {
  font-size: var(--wp--preset--font-size--small) !important;
}

.entry-content :is(.has-normal-font-size, .has-regular-font-size) {
  font-size: var(--wp--preset--font-size--normal) !important;
}

.entry-content .has-medium-font-size {
  font-size: var(--wp--preset--font-size--medium) !important;
}

.entry-content :is(.has-large-font-size, .has-larger-font-size) {
  font-size: var(--wp--preset--font-size--large) !important;
}

.entry-content .has-x-large-font-size {
  font-size: var(--wp--preset--font-size--x-large) !important;
}

.entry-content .has-xx-large-font-size {
  font-size: var(--wp--preset--font-size--xx-large) !important;
}

.entry-content .has-huge-font-size {
  font-size: var(--wp--preset--font-size--huge) !important;
}

/* -- Lists -- */
.entry-content :is(ul, ul.wp-block-list) {
  margin: 0;
  padding: 0;
  list-style-type: disc;
  padding-left: 1.2em;
}

.entry-content :is(ul, ul.wp-block-list)>li {
  padding-left: 0.2em;
}

.entry-content :is(ul, ul.wp-block-list)>li::marker {
  font-size: small;
  color: var(--color-blue);
}

.entry-content :is(ol, ol.wp-block-list) {
  margin: 0;
  padding: 0;
  list-style-type: decimal;
  list-style-position: inside;
}

.entry-content ul>li> :is(ol, ul) {
  margin-top: var(--entry-stack-xs);
}

/* -- Quote -- */
.entry-content :is(blockquote, .wp-block-quote) {
  margin: 0;
  padding-left: var(--spacing-md);
  border-left: 0.2rem solid var(--color-light-blue);
  color: var(--color-blue);
}

/* -- Media -- */
.entry-content :is(.wp-block-image, .wp-block-video, .wp-block-media-text__media) {
  overflow: hidden;
}

.entry-content :is(.wp-block-image, .wp-block-video, .wp-block-media-text__media) :is(img, video) {
  margin: 0;
  height: auto;
  max-height: none;
  max-width: 100%;
  vertical-align: top;
  border-radius: var(--border-radius);
  overflow: hidden;
  object-fit: contain;
  object-position: center;
}

.entry-content :is(.wp-block-image, .wp-block-video):is(.size-full, .size-large) {
  width: 100%;
}

.entry-content :is(.wp-block-image, .wp-block-video).size-medium {
  width: clamp(30rem, 50%, 100%);
}

.entry-content :is(.wp-block-image, .wp-block-video):is(.size-full, .size-large, .size-medium) :is(img, video) {
  width: 100%;
}

.entry-content [class*='wp-block'] figcaption {
  font-style: normal;
  font-size: var(--font-size-body-2);
  line-height: var(--line-height-body-2);
  color: var(--color-grey);
}

/* -- Embeds (16:9) -- */
.entry-content .wp-block-embed .wp-block-embed__wrapper {
  position: relative;
}

.entry-content .wp-block-embed .wp-block-embed__wrapper::before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 56.25%;
}

.entry-content .wp-block-embed .wp-block-embed__wrapper>* {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  object-fit: contain;
  object-position: center;
}

/* -- Separator -- */
.entry-content .wp-block-separator {
  border: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: var(--border-width);
  width: 100%;
  background-color: rgb(var(--color-black-rgb) / 0.10);
  color: currentColor;
  opacity: 1;
}

/* =========================================
   GUTENBERG : vertical rhythm
========================================= */
.entry-content>*,
.entry-content :is([class*='wp-block-'], figcaption) {
  margin: 0;
}

.entry-content>*:not(:first-child),
.entry-content :is(ul, ol, .wp-block-list):not(:first-child),
.entry-content :is(.wp-block-group,
  .wp-block-column,
  .wp-block-quote,
  .wp-block-media-text__content)>*:not(:first-child) {
  margin-top: var(--entry-stack);
}

.entry-content [class*='wp-block-']:not(.wp-block-paragraph,
  .wp-block-heading,
  .wp-block-list,
  .wp-block-column)+*:not(:first-child),
.entry-content *+[class*='wp-block-']:not(.wp-block-paragraph,
  .wp-block-heading,
  .wp-block-list,
  .wp-block-column):not(:first-child) {
  margin-top: var(--entry-stack);
}

.entry-content>[class*='wp-block-'].wp-block-group+*:not(:first-child) {
  margin-top: var(--entry-section-gap);
}

/* a caption sits tight under its media */
.entry-content figcaption:not(:first-child) {
  margin-top: var(--entry-stack-xs);
}

/* a heading sits close to the copy it introduces */
.entry-content :is(h1, h2, h3, h4, h5, h6):not(:empty)+ :is(p, ul, ol, address):not(:empty):not(:first-child) {
  margin-top: var(--entry-heading-gap);
}

.entry-content :is(p):not(:empty)+ :is(ul, ol):not(:empty):not(:first-child),
.entry-content :is(ul, ol):not(:empty)+p:not(:empty):not(:first-child),
.entry-content p:not(:empty)+p:not(:empty):not(:first-child) {
  margin-top: 0;
}

/* the editor's empty paragraphs are the author's own spacer */
.entry-content p:empty {
  margin-top: var(--entry-stack-sm) !important;
}

.entry-content li:not(:first-child) {
  margin-top: var(--entry-stack-xs);
}

.entry-content [class*='wp-block-'].wp-block-spacer {
  height: var(--entry-section-gap) !important;
}

.entry-content [class*='wp-block-'].wp-block-spacer:not(:first-child),
.entry-content [class*='wp-block-'].wp-block-spacer:not(:first-child)+[class*='wp-block-']:not(:first-child) {
  margin-top: 0 !important;
}

/* =========================================
   GUTENBERG : tables, columns, galleries, buttons
========================================= */
.entry-content :is(table, .wp-block-table table) {
  width: 100%;
  border-collapse: collapse;
}

.entry-content table :is(thead, tfoot, tbody, th, td) {
  border: 0;
}

.entry-content table :is(thead, tfoot) {
  background-color: var(--color-pastel-light-blue);
  color: var(--color-blue);
}

.entry-content table tr> :is(th, td) {
  border-top: var(--border-width) solid rgb(var(--color-black-rgb) / 0.10);
  border-bottom: var(--border-width) solid rgb(var(--color-black-rgb) / 0.10);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
}

.entry-content table tr>th {
  font-weight: 600;
}

.entry-content .wp-block-columns {
  grid-gap: var(--wp--style--unstable-gallery-gap);
}

.entry-content .wp-block-columns>* {
  margin: 0;
}

.entry-content .wp-block-gallery {
  --wp--style--unstable-gallery-gap: var(--spacing-sm);
  gap: 0 !important;
  grid-gap: var(--wp--style--unstable-gallery-gap) !important;
}

.entry-content .wp-block-gallery+.wp-block-gallery {
  margin-top: var(--wp--style--unstable-gallery-gap) !important;
}

.entry-content .wp-block-gallery.is-slider {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.entry-content .wp-block-gallery.is-slider :is(.wp-block-image, .wp-block-video) {
  width: 100% !important;
}

.entry-content [class*='wp-block-'].wp-block-media-text {
  grid-row-gap: var(--entry-stack-sm);
}

.entry-content [class*='wp-block-'].wp-block-media-text>*:not(:first-child) {
  margin-top: 0;
}

.entry-content [class*='wp-block-'].wp-block-media-text>.wp-block-media-text__content {
  padding: 0;
}

.entry-content [class*='wp-block-'].wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  grid-gap: var(--spacing-sm) var(--spacing-md);
}

.entry-content [class*='wp-block-'].wp-block-buttons>* {
  margin: 0 !important;
}

/* Editor buttons wear the site's .btn skin. */
.entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  min-width: 14rem;
  padding: calc(var(--spacing-md) - 0.5rem) var(--spacing-xl);

  border: var(--border-width) solid var(--color-blue);
  border-radius: var(--border-radius);
  background-color: var(--color-blue);
  color: var(--color-white);

  font-family: var(--font-primary);
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-button-weight);
  text-decoration: none;
  white-space: nowrap;

  transition: background-color var(--duration) var(--easing),
    border-color var(--duration) var(--easing);
}

.entry-content .wp-block-button__link:hover {
  background-color: var(--color-light-blue);
  border-color: var(--color-light-blue);
}

.entry-content .is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--color-blue);
}

.entry-content .is-style-outline .wp-block-button__link:hover {
  background-color: var(--color-pastel-light-blue);
  border-color: var(--color-pastel-light-blue);
}

/* =========================================
   GUTENBERG : alignment
========================================= */
.entry-content [class*='wp-block'].aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.entry-content :where(.is-layout-constrained)>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.entry-content .alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.entry-content .alignwide {
  width: var(--container-max-width) !important;
  max-width: 100vw !important;
  margin-left: calc(50% - (min(var(--container-max-width), 100vw) / 2)) !important;
  margin-right: calc(50% - (min(var(--container-max-width), 100vw) / 2)) !important;
}

.entry-content .is-layout-constrained:not(.has-global-padding)> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100%;
}