/* Cross-document crossfade on navigation. Pure CSS: browsers without support
   just do a normal reload. Delete this block to go back to plain navigation. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 0.18s ease both vt-fade-out;
}

::view-transition-new(root) {
  animation: 0.26s ease both vt-fade-in;
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

body {
  box-sizing: border-box;
  position: relative;
  font-family: var(--font-body);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background-color: var(--color-white);
}

body>main {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
}

body>.footer-section {
  margin-top: auto;
}

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

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

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

@media (min-width: 1280px) {
  .container {
    padding-inline: var(--container-gutter-md);
  }
}

.font-bold {
  font-weight: 700;
}

.page-intro {
  padding-block: calc(var(--header-height, 5.6rem) + 4.8rem) 4.8rem;
}

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

img.btn__icon,
img.site-mobile-menu__chevron,
img.news-event__badge-icon,
.site-mobile-menu__back img,
.social-icons img,
.partner-wall__nav img,
.news-single__share-link img,
.recap-video__toggle img,
.news-events__nav img,
.news-filter__submit img,
.job-card__meta-item img,
.job-card__arrow img,
.core-values__icon img,
.core-values__nav img,
.career-map__pin img,
.contact-list__icon img,
.mission__nav img,
.business-contact__social-link img {
  display: inline-block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: middle;
}

/* -- Base -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  border-radius: var(--border-radius-md);
  padding: 1.4rem 4.8rem;

  text-decoration: none;
  white-space: nowrap;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 700;
  letter-spacing: 0.52px;
  cursor: pointer;

  transition:
    background-color var(--duration-hover) var(--easing-out),
    border-color var(--duration-hover) var(--easing-out),
    color var(--duration-hover) var(--easing-out),
    box-shadow var(--duration-hover) var(--easing-out);
}

.btn:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.3rem;
}

/* -- Glass base -- */
.btn--primary,
.btn--primary-light {
  --glass-fill: rgb(var(--color-white-rgb) / 0.2);
  --glass-rim: linear-gradient(to bottom right,
      rgb(var(--color-white-rgb) / 0.85) 0%,
      rgb(var(--color-white-rgb) / 0) 40%,
      rgb(var(--color-white-rgb) / 0) 60%,
      rgb(var(--color-white-rgb) / 0.85) 100%);
  --glass-highlight: rgb(var(--color-white-rgb) / 0.18);
  --glass-glow: 0 0 0 0 transparent;
  --glass-inner: inset 0 0 0 0 transparent;

  position: relative;
  border: none;

  background-color: var(--glass-fill);
  backdrop-filter: blur(1.6rem) saturate(1.4);
  -webkit-backdrop-filter: blur(1.6rem) saturate(1.4);

  box-shadow:
    var(--glass-inner),
    inset 0 0.1rem 0.2rem 0 var(--glass-highlight),
    var(--glass-glow);

  transition:
    background-color var(--duration-hover) var(--easing-out),
    color var(--duration-hover) var(--easing-out),
    box-shadow var(--duration-glow) var(--easing-out);
}

.btn--primary::before,
.btn--primary-light::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--border-width);
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* -- Primary -- */
.btn--primary {
  --glass-fill: rgb(var(--color-cyan-rgb) / 0.1);
  --glass-rim: linear-gradient(to bottom right,
      #F2FCFF 0%,
      rgb(var(--color-cyan-rgb) / 0) 40%,
      rgb(var(--color-cyan-rgb) / 0) 60%,
      #F2FCFF 100%);
  --glass-highlight: rgb(var(--color-white-rgb) / 0.3);
  --glass-inner:
    inset 0.5rem 0.5rem 0.6rem -0.5rem rgb(var(--color-cyan-rgb) / 0.16),
    inset -0.5rem -0.5rem 0.6rem -0.5rem rgb(var(--color-cyan-rgb) / 0.16);

  color: var(--color-teal);
}

.btn--primary:hover {
  --glass-fill: rgb(var(--color-cyan-rgb) / 0.18);
  --glass-glow: 0 0.7rem 2rem 0 rgb(var(--color-cyan-rgb) / 0.2);
  --glass-inner:
    inset 0.5rem 0.5rem 0.6rem -0.5rem rgb(var(--color-cyan-rgb) / 0.12),
    inset -0.5rem -0.5rem 0.6rem -0.5rem rgb(var(--color-cyan-rgb) / 0.12);
}

/* -- Primary light -- */
.btn--primary-light {
  color: var(--color-white);
}

.btn--primary-light:hover {
  --glass-fill: rgba(154, 220, 228, 0.28);
  --glass-glow: 0 0.7rem 2rem 0 rgb(var(--color-cyan-rgb) / 0.2);
}

/* -- Secondary -- */
.btn--secondary {
  background-color: #F5FBFE;
  border-color: rgb(var(--color-black-rgb) / 0.1);
  color: var(--color-cyan);
  font-weight: 400;
  padding: 1.2rem 2.4rem;

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

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

/* -- Tertiary -- */
.btn--tertiary {
  color: var(--color-teal);

  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.1rem;
  text-underline-offset: 0.4rem;

  transition:
    color var(--duration-hover) var(--easing-out),
    text-decoration-color var(--duration-hover) var(--easing-out),
    text-underline-offset var(--duration-hover) var(--easing-out);
}

.btn--tertiary:hover {
  color: var(--color-cyan);
  text-decoration-color: currentColor;
  text-underline-offset: 0.3rem;
}

/* -- Sizes -- */
.btn--sm {
  /* padding: 1.2rem 1.6rem; */
}

/* -- States -- */

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.3;
}

.btn--tertiary:disabled,
.btn--tertiary[aria-disabled="true"] {
  opacity: 1;
  color: rgb(221 221 221 / 0.8);
  text-decoration-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition-duration: 0.01ms;
  }
}

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

.site-header {
  view-transition-name: site-header;

  --header-inset-x: 0;
  --header-padding-y: 1.6rem;
  --header-padding-x: 1.6rem;

  position: fixed;
  top: 0;
  right: var(--header-inset-x);
  left: var(--header-inset-x);
  z-index: 100;
}

.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;

  padding: var(--header-padding-y) var(--header-padding-x);
  border-radius: 0;
  background-color: rgb(var(--color-white-rgb) / 0.8);
  transition: background-color var(--duration) var(--easing);
}

.site-header.is-menu-open .site-header__bar {
  background-color: var(--color-white);
}

/* -- Logo -- */
.site-header__logo {
  display: flex;
  align-items: center;
  flex: none;
  line-height: 0;
}

.site-header__logo-img {
  width: 12.8rem;
  height: auto;
}

/* -- Menu toggle (mobile) -- */
.site-header__menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  flex: none;
  padding: 0;
  background: none;
  color: var(--color-teal);
  cursor: pointer;
}

.site-header__menu-label {
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.site-header__hbg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  width: 3rem;
}

.site-header__hbg span {
  display: block;
  width: 100%;
  height: 0.1rem;
  background-color: currentColor;
  transition: transform var(--duration) var(--easing);
}

.site-header.is-menu-open .site-header__hbg span:nth-child(1) {
  transform: translateY(0.35rem) rotate(45deg);
}

.site-header.is-menu-open .site-header__hbg span:nth-child(2) {
  transform: translateY(-0.35rem) rotate(-45deg);
}

/* -- Desktop-only pieces stay out of the mobile bar -- */
.site-nav,
.site-header__actions {
  display: none;
}

/* =========================================
   LANGUAGE SWITCHER
========================================= */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 1rem;

  font-size: 1.2rem;
  line-height: normal;
  display: none;
}

.lang-switch__btn {
  padding: 0;
  background: none;
  cursor: pointer;
  font-size: inherit;
  line-height: normal;
  color: rgb(var(--color-black-rgb) / 0.5);
  transition: color var(--duration) var(--easing);
  font-weight: 700;
}

.lang-switch__btn[lang="th"] {
  font-family: var(--font-primary);
  font-size: 1.6rem;
}

.lang-switch__btn.is-current {
  color: var(--color-dark-teal);
}

.lang-switch__divider {
  align-self: stretch;
  width: var(--border-width);
  background-color: var(--color-dark-teal);

  font-size: 0;
  color: transparent;
}

/* =========================================
   AURA PRICE
========================================= */
.aura-price {
  display: none;
  /* display: flex; */
  align-items: baseline;
  gap: 0.4rem;

  font-size: 1.2rem;
  line-height: normal;
  font-weight: bold;
  color: var(--color-dark-teal);
  white-space: nowrap;
  letter-spacing: 0.12px;
}

.aura-price__change.is-up {
  color: var(--color-green);
}

.aura-price__change.is-down {
  color: var(--color-pink);
}

/* =========================================
   HEADER : TRANSPARENT
========================================= */
.site-header__logo-img,
.site-header__menu-toggle {
  transition: width var(--duration) var(--easing), filter var(--duration) var(--easing), color var(--duration) var(--easing);
}

.site-header--transparent:not(.is-solid):not(.is-menu-open) {
  --header-fg: var(--color-white);
}

.site-header--transparent:not(.is-solid):not(.is-menu-open) .site-header__bar {
  background-color: transparent;
}

.site-header--transparent:not(.is-solid):not(.is-menu-open) .site-header__logo-img {
  filter: brightness(0) invert(1);
}

@media (min-width: 1280px) {
  .site-header--transparent:not(.is-solid) .site-header__logo-img {
    width: 18.2rem;
  }
}

.site-header--transparent:not(.is-solid):not(.is-menu-open) .site-header__menu-toggle,
.site-header--transparent:not(.is-solid):not(.is-menu-open) .site-nav__link,
.site-header--transparent:not(.is-solid):not(.is-menu-open) .lang-switch__btn.is-current,
.site-header--transparent:not(.is-solid):not(.is-menu-open) .aura-price {
  color: var(--header-fg);
}

.site-header--transparent:not(.is-solid):not(.is-menu-open) .lang-switch__btn {
  color: rgb(var(--color-white-rgb) / 0.6);
}

.site-header--transparent:not(.is-solid):not(.is-menu-open) .lang-switch__divider {
  background-color: var(--header-fg);
}

.site-header--transparent:not(.is-solid):not(.is-menu-open) .site-nav__link:hover,
.site-header--transparent:not(.is-solid):not(.is-menu-open) .site-nav__item--has-submenu:hover .site-nav__link,
.site-header--transparent:not(.is-solid):not(.is-menu-open) .site-nav__item--has-submenu:focus-within .site-nav__link {
  color: rgb(var(--color-white-rgb) / 0.7);
}

/* =========================================
   MOBILE MENU
========================================= */
.site-mobile-menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.4rem;

  height: calc(100dvh - var(--header-height, 5.6rem));
  padding: 2rem var(--header-padding-x) 3.2rem;
  background-color: var(--color-white);
}

.site-header.is-menu-open .site-mobile-menu {
  display: flex;
}

.site-mobile-menu__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
}

.site-mobile-menu__list {
  list-style: none;
}

.site-mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;

  width: 100%;
  padding-block: 0.8rem;
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12px;
  color: var(--color-dark-teal);
  cursor: pointer;
}

.site-mobile-menu__list--sub .site-mobile-menu__link {
  color: var(--color-black);
  font-weight: 700;
}

/* -- Submenu thumbnails -- */
.submenu-thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;

  padding-block: 0.8rem;
  list-style: none;
}

.submenu-thumbs__link {
  display: block;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  transition: opacity var(--duration) var(--easing);
}

.submenu-thumbs__link:hover {
  opacity: 0.85;
}

.submenu-thumbs__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 413 / 108;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
}

.site-mobile-menu__list--sub {
  display: flex;
  flex-direction: column;
}

.site-mobile-menu__item--thumbs {
  order: -1;
}

.site-mobile-menu__chevron {
  font-size: 1.2rem;
  font-weight: bold !important;
  flex: none;
}

.site-mobile-menu__back {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  padding-bottom: 0.8rem;
  background: none;
  text-transform: uppercase;
  letter-spacing: 0.12px;
  color: var(--color-dark-teal);
  cursor: pointer;
}

.site-mobile-menu__back i,
.site-mobile-menu__back img {
  font-size: 1.2rem;
}

/* -- Bottom row -- */
.site-mobile-menu__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;

  flex: none;
  padding-top: 1.6rem;
}

.site-mobile-menu__bottom[hidden] {
  display: none;
}

.lang-switch--mobile,
.aura-price--mobile {
  font-size: 1.2rem;
}

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

/* =========================================
   DESKTOP
========================================= */
@media (min-width: 1280px) {
  .site-header {
    --header-inset-x: 2rem;
    --header-padding-x: 2.4rem;

    top: 1rem;
  }

  .site-header__bar {
    justify-content: space-between;
    border-radius: var(--border-radius-sm);
  }

  .site-header__menu-toggle,
  .site-mobile-menu {
    display: none !important;
  }

  /* -- Nav -- */
  .site-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }

  .site-nav__list {
    display: flex;
    align-items: stretch;
    gap: 1.6rem;
    list-style: none;
  }

  .site-nav__item {
    position: relative;
    display: flex;
    align-items: center;
  }

  .site-nav__link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
    background: none;
    border: none;
    white-space: nowrap;
    cursor: pointer;

    font-size: 1.2rem;
    line-height: normal;
    font-weight: 700;
    letter-spacing: 0.12px;
    color: var(--color-dark-teal);
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--duration) var(--easing);
  }

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

  /* -- Desktop dropdown -- */
  .site-nav__submenu {
    --submenu-padding-y: 2.2rem;
    --submenu-padding-x: 4.3rem;

    position: absolute;
    top: calc(100% + 0.8rem);
    left: calc(var(--submenu-padding-x) * -1);
    z-index: 10;

    padding: var(--submenu-padding-y) var(--submenu-padding-x);
    list-style: none;

    background-color: var(--color-white);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 0.8rem 2.4rem rgb(var(--color-black-rgb) / 0.1);

    font-size: var(--font-size-body);
    line-height: var(--line-height-body);

    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__submenu::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 0.8rem;
  }

  .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__sublink {
    display: block;
    padding: 0.8rem 0;
    color: var(--color-black);
    font-size: 1.2rem;
    line-height: normal;
    font-weight: 700;
    letter-spacing: 0.12px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--duration) var(--easing);
  }

  @media (min-width: 1024px) {
    .site-nav__sublink {
      padding: 0.6rem 0;
    }
  }

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

  /* -- Two-column dropdown -- */
  .site-nav__submenu:has(.site-nav__subitem--thumbs) {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 15.7rem;
    align-items: start;
  }

  .site-nav__submenu>.site-nav__subitem:not(.site-nav__subitem--thumbs) {
    grid-column: 1;
  }

  .site-nav__subitem--thumbs {
    grid-column: 2;
    grid-row: 1 / span 20;
  }

  .site-nav__subitem--thumbs .submenu-thumbs {
    width: 27.5rem;
  }

  /* -- Right-side controls -- */
  .site-header__actions {
    display: flex;
    align-items: center;
    gap: 3.6rem;
    flex: none;
    margin-left: auto;
  }
}

@media (min-width: 1440px) {
  .site-header {
    --header-inset-x: 4rem;
  }

  .site-nav__list {
    gap: 2.4rem;
  }
}

/* =========================================
   FOOTER
========================================= */
.footer-section {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.2rem;
  background: white;
  --footer-padding-x: 2.8rem;
  padding: 4.8rem var(--footer-padding-x) 7.2rem;
}

@media (min-width: 1024px) {
  .footer-section {
    gap: 12.4rem;
    padding-bottom: 4.8rem;
  }
}

/* --- Footer Top --- */

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  align-self: stretch;
}

.footer-logo {
  width: 13.2rem;
  height: auto;
  object-fit: contain;
}

.footer-tagline {
  color: var(--color-teal);
  text-transform: uppercase;
  text-align: center;
  align-self: stretch;
  margin-inline: calc(-1 * var(--footer-padding-x));
}

/* --- Footer Bottom --- */

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .footer-bottom {
    gap: 1.6rem;
    width: auto;
  }
}

.social-icons {
  display: flex;
  gap: 1.5rem;
}

.social-icons i,
.social-icons img {
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-black);
  transition: color var(--duration) var(--easing)
}

.social-icons i:hover {
  color: var(--color-cyan);
}

.site-footer__nav {
  width: 100%;
}

.site-footer__nav-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  justify-content: space-between;
  column-gap: 1.6rem;
  row-gap: 0.8rem;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  max-width: 330px;
  margin: 0 auto;
}

.site-footer__nav-item {
  list-style: none;
}

.site-footer__nav-link {
  color: var(--color-black);
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

.site-footer__nav-link:hover {
  color: var(--color-cyan);
}

@media (min-width: 1024px) {
  .site-footer__nav {
    width: auto;
  }

  .site-footer__nav-list {
    display: flex;
    justify-content: center;
    gap: 3.6rem;
    width: auto;
    max-width: unset;
  }
}

/* =========================================
   DECORATIVE : CURVE BG
========================================= */

.page-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

body:has(.page-bg--to-footer) .footer-section {
  background: transparent;
}

.curve-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  min-width: var(--curve-bg-min-width, 144rem);

  pointer-events: none;
}

.curve-bg__layer {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;

  transform-origin: 50% 0;
  will-change: transform, opacity;
  animation:
    curve-bg-drift var(--curve-bg-duration, 12s) var(--curve-bg-ease, ease-in-out) infinite alternate,
    curve-bg-fade var(--curve-bg-fade-duration, 14s) ease-in-out infinite alternate;
}

.curve-bg__layer--1 {
  --curve-bg-duration: 3.5s;
  --curve-bg-fade-duration: 4s;
  --curve-bg-ease: cubic-bezier(0.45, 0, 0.25, 1);
  --curve-bg-shift: 3%;
  --curve-bg-scale-x: 1.12;
  --curve-bg-scale-y: 0.6;
  --curve-bg-rise: 0%;
  --curve-bg-dim: 0.85;
}

.curve-bg__layer--2 {
  --curve-bg-duration: 4.5s;
  --curve-bg-fade-duration: 3s;
  --curve-bg-ease: cubic-bezier(0.2, 0, 0.6, 1);
  --curve-bg-shift: -2.5%;
  --curve-bg-scale-x: 1.1;
  --curve-bg-scale-y: 0.78;
  --curve-bg-rise: 5%;
  --curve-bg-dim: 0.85;
}

.curve-bg__layer--3 {
  --curve-bg-duration: 6s;
  --curve-bg-fade-duration: 5s;
  --curve-bg-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --curve-bg-shift: 2%;
  --curve-bg-scale-x: 1.15;
  --curve-bg-scale-y: 1.08;
  --curve-bg-rise: 2%;
  --curve-bg-dim: 0.22;
}

@keyframes curve-bg-drift {
  from {
    transform: none;
  }

  50% {
    transform:
      translateX(calc(var(--curve-bg-shift, 3%) * 1.2)) translateY(calc(var(--curve-bg-rise, 0%) * 0.3)) scaleX(calc(1 + (var(--curve-bg-scale-x, 1.5) - 1) * 0.7)) scaleY(calc(1 + (var(--curve-bg-scale-y, 1.15) - 1) * 0.3));
  }

  to {
    transform:
      translateX(var(--curve-bg-shift, 3%)) translateY(var(--curve-bg-rise, 0%)) scaleX(var(--curve-bg-scale-x, 1.5)) scaleY(var(--curve-bg-scale-y, 1.15));
  }
}

@keyframes curve-bg-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: var(--curve-bg-dim, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .curve-bg__layer {
    animation: none;
  }
}

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

:root {
  --header-bar-bottom: 6.7rem;
}

@media (min-width: 1280px) {
  :root {
    --header-bar-bottom: 7.7rem;
  }
}

.main--fill {
  display: flex;
  flex-direction: column;
  overflow: clip;
}

.main--bleed {
  overflow: clip;
  overflow-clip-margin: 30rem;
}


/* =========================================
   Breadcrumb
========================================= */

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;

  margin: 0;
  padding: 0;
  list-style: none;

  color: var(--color-teal);
  text-transform: uppercase;
}

.breadcrumb__list.text-h6 {
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .breadcrumb__list.text-h6 {
    font-size: 1.6rem;
  }
}

.breadcrumb__item::after {
  content: "/";
  padding-left: 0.4rem;
}

.breadcrumb__link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.breadcrumb__link:hover {
  opacity: 0.7;
}

/* --- Line reveal --- */

.line-reveal {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.line-reveal__inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.3s ease-in;
}

.line-reveal-after {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

.aos-animate .line-reveal__inner {
  transform: none;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.25s);
}

.aos-animate .line-reveal-after {
  --after: calc((var(--lines, 1) - 1) * 0.25s + 0.15s);
  opacity: 1;
  transform: none;
  transition: opacity 1.5s ease-out var(--after), transform 1.5s cubic-bezier(0.22, 1, 0.36, 1) var(--after);
}

/* --- Page head --- */

.page-head-section {
  --page-head-offset: 6.1rem;
  --page-head-gap: 3.6rem;

  position: relative;
  overflow: hidden;
  flex: 1 0 auto;

  display: flex;
  flex-direction: column;
  gap: var(--page-head-gap);

  padding-block: calc(var(--header-bar-bottom) + var(--page-head-offset)) 4.4rem;
}

.page-head__breadcrumb,
.page-head__inner {
  position: relative;
}

@media (min-width: 1024px) {
  .page-head__inner {
    padding-inline: 12.8rem 7rem;
  }
}


.page-head__breadcrumb {
  padding-inline: var(--container-gutter);
}

.page-head__body {
  display: flex;
  flex-direction: column;
  gap: var(--page-head-gap);
}

.page-head__title {
  color: var(--color-dark-teal);
  max-width: 715px;
}

.page-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--page-head-gap);
}

.page-head__aside .btn {
  min-width: 20rem;
}

.page-head__text {
  width: 100%;
  max-width: 35.6rem;
  color: var(--color-black);
}

@media (min-width: 1280px) {
  .page-head__text {
    margin-top: 2.2rem;
  }

  .page-head-section {
    --page-head-offset: 6.8rem;
    padding-block: calc(var(--header-bar-bottom) + var(--page-head-offset) + 1.8rem + var(--page-head-gap)) 8rem;
  }

  .page-head__breadcrumb {
    position: absolute;
    top: calc(var(--header-bar-bottom) + var(--page-head-offset));
    left: 3.8rem;
    padding-inline: 0;
  }

  .page-head__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 29rem;
    column-gap: 6.4rem;
  }

  .page-head__text {
    max-width: none;
  }
}

.page-head-section--center {
  justify-content: center;
}

/* Mobile: as tall as the square business banner, so the first section
   starts on the same line across the about pages. Longer copy still grows it. */
@media (max-width: 767px) {
  .page-head-section--banner {
    min-height: 100vw;
  }

  .page-head-section--banner+section {
    padding-top: 0;
  }
}

/* =========================================
   PARTNER WALL (scroll-driven fisheye)
========================================= */

.partner-wall {
  position: relative;
  padding-block: 0 var(--section-gap);
}

.partner-wall__curve {
  position: absolute;
  z-index: 0;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  pointer-events: none;
  user-select: none;
}

.partner-wall__curve--right {
  right: 0;
  width: 32rem;
}

.partner-wall__curve--left {
  left: 0;
  width: min(39rem, 92vw);
  transform: translateY(-38%);
}

.partner-wall__curve--left img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  .partner-wall__curve--right {
    width: 50vw;
  }

  .partner-wall__curve--left {
    width: 38vw;
    transform: translateY(-50%);
  }
}

.partner-wall__scroll {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 2rem;
  scrollbar-width: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

.partner-wall__scroll.is-drifting {
  scroll-behavior: auto;
}

.partner-wall__scroll::-webkit-scrollbar {
  display: none;
}

.partner-wall__grid {
  --tile-min: 8.1rem;
  --tile-max: 10.1rem;
  --tile-gap-x: 1.35rem;
  --tile-gap-y: 1rem;

  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: var(--tile-gap-x);
  width: max-content;
  padding-inline: var(--container-gutter);
}

@media (min-width: 1024px) {
  .partner-wall__grid {
    --tile-gap-x: 3rem;
    --tile-gap-y: 2.5rem;
    padding-inline: var(--container-gutter-xs);
  }
}

.partner-wall__col {
  --tile-size: calc(var(--tile-min) + (var(--tile-max) - var(--tile-min)) * var(--tile-bulge, 0));

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tile-gap-y);
}

.partner-wall__col--tuck-start,
.partner-wall__col--tuck-end {
  --tile-tuck: 0.4rem;
}

.partner-wall__col--tuck-start {
  margin-inline-end: calc(var(--tile-tuck) * -1);
}

.partner-wall__col--tuck-end {
  margin-inline-start: calc(var(--tile-tuck) * -1);
}

@media (min-width: 1024px) {

  .partner-wall__col--tuck-start,
  .partner-wall__col--tuck-end {
    --tile-tuck: 1.2rem;
  }
}

.partner-wall__col {
  --tile-shift-max: 0.5rem;
  --tile-shift: calc(var(--tile-shift-max) * var(--tile-zigzag, 0));
}

.partner-wall__col--zigzag {
  --tile-zigzag: 1;
}

@media (min-width: 1024px) {
  .partner-wall__col {
    --tile-shift-max: 1rem;
  }
}

.partner-wall__col>.partner-wall__tile {
  transform: translateX(var(--tile-shift));
}

.partner-wall__col>.partner-wall__tile:nth-child(even) {
  transform: translateX(calc(var(--tile-shift) * -1));
}

@media (min-width: 1024px) {
  .partner-wall__grid {
    --tile-min: 11.8rem;
    --tile-max: 14.8rem;
  }
}

.partner-wall__tile {
  --glass-fill: rgb(var(--color-white-rgb) / 0.4);
  --glass-rim: linear-gradient(to bottom right,
      rgb(var(--color-white-rgb) / 0.85) 0%,
      rgb(var(--color-white-rgb) / 0) 40%,
      rgb(var(--color-white-rgb) / 0) 60%,
      rgb(var(--color-white-rgb) / 0.85) 100%);
  --glass-highlight: rgb(var(--color-white-rgb) / 0.25);
  --glass-glow: 0 0 0 0 transparent;
  --glass-inner: inset 0.3rem 0.3rem 1.2rem -0.5rem rgb(var(--color-dark-teal-rgb) / 0.05);
  --glass-drop: 0 0.6rem 1.8rem -0.6rem rgb(var(--color-dark-teal-rgb) / 0.03);

  position: relative;
  flex: none;
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: 2.4rem;

  display: grid;
  place-items: center;

  background-color: var(--glass-fill);
  backdrop-filter: blur(1.6rem) saturate(1.4);
  -webkit-backdrop-filter: blur(1.6rem) saturate(1.4);

  box-shadow:
    var(--glass-inner),
    inset 0 0.1rem 0.2rem 0 var(--glass-highlight),
    var(--glass-drop),
    var(--glass-glow);
}

.partner-wall__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--border-width);
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.partner-wall__tile-img {
  width: calc(var(--tile-size) * 0.74);
  height: calc(var(--tile-size) * 0.74);
  object-fit: contain;
}

/* -- Prev / next controls -- */
.partner-wall__viewport {
  position: relative;
  /* background-color: var(--color-light-blue); */
}

.partner-wall__nav {
  --nav-inset: 1.6rem;
  --glass-fill: rgb(var(--color-white-rgb) / 0.2);
  --glass-rim: linear-gradient(to bottom right,
      rgb(var(--color-white-rgb) / 0.85) 0%,
      rgb(var(--color-white-rgb) / 0) 40%,
      rgb(var(--color-white-rgb) / 0) 60%,
      rgb(var(--color-white-rgb) / 0.85) 100%);
  --glass-highlight: rgb(var(--color-white-rgb) / 0.25);

  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0.4rem;
  border: none;
  border-radius: 3.4rem;

  color: var(--color-cyan);
  background-color: var(--glass-fill);
  backdrop-filter: blur(1rem) saturate(3);
  -webkit-backdrop-filter: blur(1rem) saturate(3);
  box-shadow: inset 0 0.1rem 0.2rem 0 var(--glass-highlight);
  cursor: pointer;

  transition:
    background-color var(--duration-hover) var(--easing-out),
    opacity var(--duration-hover) var(--easing-out);
}

@media (min-width: 1024px) {
  .partner-wall__nav {
    --nav-inset: 4rem;
  }
}

.partner-wall__nav[hidden] {
  display: none;
}

.partner-wall__nav--prev {
  left: var(--nav-inset);
}

.partner-wall__nav--next {
  right: var(--nav-inset);
}

.partner-wall__nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--border-width);
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.partner-wall__nav:hover {
  --glass-fill: rgb(var(--color-white-rgb) / 0.45);
}

.partner-wall__nav:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.3rem;
}

.partner-wall__nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.partner-wall__nav i,
.partner-wall__nav img {
  font-size: 1.6rem;
  line-height: 1;
}

/* =========================================
   MEDIA MOSAIC (six fixed tiles)
========================================= */

.media-mosaic {
  position: relative;
}

.media-mosaic__container {
  padding-inline: var(--container-gutter);
}

@media (min-width: 1024px) {
  .media-mosaic__container {
    padding-inline: var(--container-gutter-xs);
  }
}

.media-mosaic__grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "m1 m3"
    "m2 m3"
    "m4 m5"
    "m6 m6";
}

@media (min-width: 1024px) {
  .media-mosaic__grid {
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "m1 m3 m4 m5"
      "m2 m3 m6 m6";
  }
}

.media-mosaic__tile--1 {
  grid-area: m1;
}

.media-mosaic__tile--2 {
  grid-area: m2;
}

.media-mosaic__tile--3 {
  grid-area: m3;
}

.media-mosaic__tile--4 {
  grid-area: m4;
}

.media-mosaic__tile--5 {
  grid-area: m5;
}

.media-mosaic__tile--6 {
  grid-area: m6;
}

.media-mosaic__tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: rgb(var(--color-light-grey-rgb));
  aspect-ratio: 1 / 1;
}

.media-mosaic__tile--3 {
  aspect-ratio: auto;
}

.media-mosaic__tile--6 {
  aspect-ratio: 16 / 9;
}

.media-mosaic__tile--gradient {
  background:
    linear-gradient(115deg,
      var(--color-dark-teal) 0%,
      var(--color-teal) 32%,
      var(--color-cyan) 62%,
      var(--color-light-blue) 80%,
      var(--color-yellow) 100%);
}

.media-mosaic__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.media-mosaic__caption {
  position: absolute;
  inset: 0 0 auto 0;
  padding: 1.3rem 1.5rem;
  color: rgb(var(--color-white-rgb));
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.50);
}

@media (min-width: 1024px) {
  .media-mosaic__caption {
    padding: 1.9rem 2.2rem;
  }
}

.media-mosaic__tile:not(.media-mosaic__tile--gradient) .media-mosaic__caption {
  background: linear-gradient(180deg,
      rgb(var(--color-black-rgb) / 0.45) 0%,
      rgb(var(--color-black-rgb) / 0) 100%);
  padding-block-end: calc(var(--spacing-md) * 2);
}

.media-mosaic__tile--6 .media-mosaic__caption {
  padding-block-start: 2.4rem;
}

@media (min-width: 1024px) {
  .media-mosaic__tile--6 .media-mosaic__caption {
    padding-block-start: 3.5rem;
  }
}

.media-mosaic__text {
  position: relative;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .media-mosaic__tile--6 {
    aspect-ratio: auto;
  }
}

/* =========================================
   STORY TIMELINE (sticky year panels)
========================================= */

.story-timeline {
  --story-deck-park: 2.7rem;
  --story-deck-inset: 3.35rem;

  position: relative;
  padding-block: 2rem 6rem;
}

.story-timeline__panels {
  display: grid;
  overflow: clip;
  touch-action: pan-y;
}

.story-timeline__rail {
  position: relative;
  z-index: 3;
  padding-block: var(--spacing-md) 3.5rem;
}

.story-timeline__years {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-end;
  height: calc(3rem * var(--line-height-h4));

  margin: 0;
  padding: 0 0 0.4rem 1.6rem;
  list-style: none;

  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.story-timeline__years::after {
  content: "";
  flex: 0 0 calc(100vw - 8rem);
}

.story-timeline__years::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .story-timeline__years {
    --story-year-track: none;
    justify-content: safe center;
    padding-left: 0;
  }

  .story-timeline__years::after {
    content: none;
  }
}

.story-timeline__year-item {
  scroll-snap-align: start;
}

.story-timeline__year {
  display: block;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  color: var(--color-cyan);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration) var(--easing-out), font-size var(--duration) var(--easing-out);
}

.story-timeline__year.is-current {
  font-size: 3rem;
  color: var(--color-teal);
}

.story-timeline__cue {
  display: none;
  width: 1em;
  height: 1em;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-cyan);
  font-size: var(--font-size-h4);
  cursor: pointer;
  transform: rotate(90deg);
  transition: transform var(--duration) var(--easing-out), color var(--duration) var(--easing-out);
}

.story-timeline__cue:hover {
  color: var(--color-teal);
}

.story-timeline__cue.is-up {
  order: -1;
  transform: rotate(-90deg);
}

.story-timeline__panel {
  display: flex;
  align-items: flex-start;
}

.story-timeline.is-ready .story-timeline__panel {
  grid-area: 1 / 1;
}

.story-timeline__panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.6rem;
  width: 100%;
}

.story-timeline__media {
  order: 1;
  justify-self: center;
  margin: 0;
  overflow: hidden;
  background: rgb(var(--color-light-grey-rgb));
  aspect-ratio: 468 / 706;
  /* Same card size as the home milestones deck (292 / 390 of the screen). */
  width: min(calc(292 / 390 * 100vw), 40rem);
  height: auto;
  transform-origin: center;
  will-change: transform, opacity;
}

.story-timeline__copy {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding-inline: var(--container-gutter);
}

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

.story-timeline__title,
.story-timeline__text {
  margin: 0;
  text-wrap: pretty;
}

.story-timeline .story-timeline__title {
  /* font-size: var(--font-size-h5);
  line-height: var(--line-height-h5); */
}

.story-timeline>.container {
  padding-inline: unset !important;
}

.story-timeline__text {
  max-width: 35rem;
  color: var(--color-black);
}

@media (min-width: 1280px) {
  .story-timeline {
    padding-bottom: 0;
  }

  .story-timeline__inner {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    column-gap: 14rem;
    align-items: start;
  }

  .story-timeline__rail {
    position: sticky;
    top: var(--story-panel-offset);
    left: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-lg);
    width: fit-content;
    justify-self: start;
    height: calc(100svh - var(--story-panel-offset));
    padding-block: calc(var(--story-lead) + var(--story-title-offset, 0px)) 0;
    background: transparent;
  }

  .story-timeline__years {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    width: 4ch;
    font-size: var(--font-size-h4);
    font-variant-numeric: tabular-nums;
    height: auto;
    padding-left: 0;
    overflow: visible;
  }

  .story-timeline__years::after {
    content: none;
  }

  .story-timeline__year {
    font-size: var(--font-size-h4);
  }

  .story-timeline__year.is-current {
    font-size: 3.6rem;
  }

  .story-timeline__cue {
    display: block;
    align-self: center;
    font-size: 1.6rem;
  }

  .story-timeline .story-timeline__title {
    max-width: 37rem;
    /* font-size: var(--font-size-h3);
    line-height: var(--line-height-h3); */
  }


  .story-timeline,
  .story-timeline__panels,
  .story-timeline__panel {
    --story-panel-offset: var(--header-bar-bottom, 7.7rem);
    --story-step: calc(100svh - var(--story-panel-offset));

    --story-media-w: min(32.5vw, 62.4rem);
    --story-media-h: calc(var(--story-media-w) * 706 / 468);

    --story-lead: max(0px, calc((var(--story-step) - var(--story-media-h)) / 2));
  }

  .story-timeline__panels {
    position: static;
    height: auto;
    overflow: visible;

    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--story-media-w);
    column-gap: var(--spacing-xl);
    align-items: start;
    padding-right: 12.8rem;
  }

  .story-timeline__panel,
  .story-timeline__panel-inner {
    display: contents;
  }

  .story-timeline__copy,
  .story-timeline__media {
    order: 0;
  }

  .story-timeline__copy {
    grid-column: 1;
    justify-content: center;
    padding-inline: 0;

    margin-block: var(--story-lead);
    min-height: var(--story-media-h);
    gap: 9.6rem;
  }

  .story-timeline__media {
    grid-column: 2;
    position: sticky;
    justify-self: stretch;
    top: calc(var(--story-panel-offset) + var(--story-lead));

    width: var(--story-media-w);
    height: var(--story-media-h);
    max-width: none;
    aspect-ratio: auto;

    will-change: transform, filter;
  }
}

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

/* =========================================
   AWARDS GRID
========================================= */
.awards {
  padding-block: 0.4rem 6rem;
}

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

@media (min-width: 1024px) {
  .awards {
    padding-block: 0rem 7.3rem;
  }


  .awards__inner {
    padding-inline: var(--container-gutter-md);
  }
}

.awards__years {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 1.8rem;
  height: calc(var(--font-size-h5) * var(--line-height-h5));

  margin-bottom: 6.8rem;
  padding-inline: var(--container-gutter);

  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

@media (min-width: 1024px) {
  .awards__years {
    gap: 7.2rem;
    padding-inline: 0;
    margin-bottom: 7.3rem;
  }
}

.awards__year {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-cyan);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration) var(--easing-out), font-size var(--duration) var(--easing-out);
}

.awards__year.is-current {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  color: var(--color-teal);
}

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

.awards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  padding-inline: var(--container-gutter);
}

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

@media (min-width: 1024px) {
  .awards__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6rem;
  }
}

.awards__item {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.awards__item[hidden] {
  display: none;
}

.awards__item {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s var(--easing-out) calc(var(--awards-i, 0) * 0.09s),
    transform 1s var(--easing-out) calc(var(--awards-i, 0) * 0.09s);
}

.awards__grid.is-swapping .awards__item {
  opacity: 0;
  transform: translateY(2.4rem);
  transition-duration: 0.3s;
  transition-delay: 0s;
}

.awards__box {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  padding: 1.6rem 2.4rem;
  background-color: #F5F5F5;
  transition: background-color 0.3s ease;
}

.awards__item:hover .awards__box,
.awards__item:focus-within .awards__box {
  background-color: var(--color-light-blue);
}

@media (min-width: 1024px) {
  .awards__box {
    padding: 3.3333vw 4.7222vw;
  }
}

@media (min-width: 1440px) {
  .awards__box {
    padding: 4.8rem 6.8rem;
  }
}

.awards__image {
  width: 23.0769vw;
  max-width: 100%;
  max-height: min(28.2051vw, 100%);
  height: auto;
  object-fit: contain;
  transition: transform 0.7s ease;
}

.awards__item:hover .awards__image,
.awards__item:focus-within .awards__image {
  transform: translateY(calc(-1.6rem - var(--awards-lift-extra, 0px)));
}

@media (min-width: 1024px) {
  .awards__image {
    width: max(14.8rem, 10.2778vw);
    max-height: min(max(18rem, 12.5vw), 100%);
  }
}

.awards__copy {
  position: absolute;
  inset-inline: 1.6rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--color-teal);
  opacity: 0;
  transition: opacity 0.6s ease;
}

@media (min-width: 768px) {
  .awards__copy {
    bottom: 1.6rem;
  }
}

.awards__item:hover .awards__copy,
.awards__item:focus-within .awards__copy {
  opacity: 1;
}

.awards__name {
  font-weight: 700;
}

.awards__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .awards__text {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

@media (prefers-reduced-motion: reduce) {

  .awards__box,
  .awards__image,
  .awards__copy,
  .awards__item {
    transition: none;
  }

  .awards__item:hover .awards__image,
  .awards__item:focus-within .awards__image {
    transform: none;
  }
}

/* =========================================
   PAGE : NEWS SINGLE
========================================= */

.news-single {
  --news-single-aside: 25.5rem;
  --news-single-measure: 83rem;
  --news-single-gap: 2.4rem;
  --entry-gap: 2.4rem;

  --news-single-offset: 12.8rem;

  position: relative;
  padding-block: var(--news-single-offset) 0;
}

@media (min-width: 1024px) {
  .news-single {
    --entry-gap: 4.8rem;
  }
}

@media (min-width: 1280px) {
  .news-single {
    --news-single-offset: 11.6rem;
  }
}

.news-single__breadcrumb {
  position: relative;
  padding-inline: var(--container-gutter);
  margin-bottom: 2.4rem;
}

.news-single__breadcrumb .breadcrumb__item:last-child::after {
  content: none;
}

@media (min-width: 1280px) {
  .news-single__breadcrumb {
    padding-inline: 3.8rem 0;
    margin-bottom: 1rem;
  }
}

.news-single__banner {
  position: relative;
}

.news-single__banner-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.news-single__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-block: 4.7rem 6rem;
}

.news-single__main {
  min-width: 0;
}

.news-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--color-dark-teal);
}

.news-single__title {
  margin-top: var(--entry-gap);
  color: var(--color-black);
}

.news-single__body .entry-content {
  max-width: none;
  margin-inline: 0;
  padding-top: var(--entry-gap);
  padding-inline: 0;
}

/* --- Aside : tags + share --- */

.news-single__aside {
  display: flex;
  flex-direction: column;
  gap: var(--news-single-gap);
}

.news-single__aside-title {
  color: var(--color-black);
  margin-bottom: 1.6rem;
}

.news-single__tags {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;

  margin: 0;
  padding: 2.4rem 1.2rem;
  list-style: none;

  color: var(--color-teal);
  background-color: rgb(var(--color-light-blue-rgb) / 0.35);
  border-radius: var(--border-radius-sm);
}

.news-single__tag {
  overflow-wrap: anywhere;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .news-single__aside {
    width: var(--news-single-aside);
  }
}

.news-single__share {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.news-single__share-link {
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: color var(--duration) var(--easing)
}

.news-single__share-link:hover {
  color: var(--color-cyan)
}

.news-single__share-link i,
.news-single__share-link img {
  font-size: 1.6rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .news-single__banner {
    padding-inline: var(--container-gutter);
  }

  .news-single__banner-img {
    aspect-ratio: 1362 / 560;
  }
}

@media (min-width: 1024px) {
  .news-single__inner {
    display: grid;
    grid-template-columns: minmax(0, var(--news-single-measure)) var(--news-single-aside);
    align-items: start;
    justify-content: center;
    column-gap: 6.4rem;
    padding-block: 6.5rem 15.5rem;
  }

  .news-single__aside {
    position: sticky;
    top: calc(var(--header-height, 5.6rem) + 4rem);
    padding-inline: 1rem;
  }
}

@media (min-width: 1280px) {
  .news-single__banner {
    padding-inline: var(--container-gutter-xs);
  }

  .news-single__inner {
    column-gap: 12.8rem;
  }
}

/* --- Related news --- */

.news-related {
  position: relative;
  padding-block: 0 6rem;
}

.news-related__title {
  /* margin: 0 0 4.8rem; */
  margin-bottom: 4.8rem;
  color: var(--color-teal);
  text-align: center;
}

@media (min-width: 1024px) {
  .news-related__title {
    margin-bottom: 7.5rem;
  }
}

.news-related__title strong {
  font-weight: 700;
}

.news-related__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .news-related {
    padding-block: 0 12rem;
  }

  .news-related__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 4.8rem;
  }
}

/* =========================================
   PAGE : NEWS LIST
========================================= */

.news-grid {
  --news-gap-x: 1.6rem;
  --news-gap-y: 1.6rem;

  width: 100%;
  max-width: 160rem;
  margin-inline: auto;
  padding-inline: var(--container-gutter);

  display: flex;
  flex-direction: column;
  gap: var(--news-gap-y);
}

.news-grid__column {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-grid__item {
  order: var(--news-i, 0);
}

.news-grid__item[hidden] {
  display: none;
}

.news-grid__item.is-revealing {
  animation: news-reveal 0.9s var(--easing-out) both;
  animation-delay: calc(var(--news-reveal-i, 0) * 0.08s);
}

@keyframes news-reveal {
  from {
    opacity: 0;
    transform: translateY(4rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-grid__item.is-revealing {
    animation: none;
  }
}

.news-list,
.job-search {
  scroll-margin-top: calc(var(--header-height, 5.6rem) + 2rem);
}

.news-list__empty {
  color: var(--color-dark-teal);
}

.news-list__more {
  display: flex;
  justify-content: center;
  margin-top: 3.6rem;
}

.news-list__more-btn {
  min-width: 20rem;
}

@media (min-width: 1024px) {
  .news-list__more {
    margin-top: 8.6rem;
  }

  .news-grid {
    padding-inline: 7.7rem;
  }
}

@media (min-width: 1024px) {
  .news-grid {
    --news-gap-x: 3.6rem;
    --news-gap-y: 4.8rem;

    flex-direction: row;
    align-items: flex-start;
  }

  .news-grid__column {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--news-gap-x);
    min-width: 0;
  }

  .news-grid__item {
    order: 0;
  }

  .news-list__inner {
    margin-top: 10.5rem;
  }
}

/* --- Card --- */

.news-card {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--color-white);
  text-decoration: none;
  background-color: rgb(var(--color-dark-teal-rgb) / 0.1);
}

.news-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgb(50 109 154 / 0) 66.83%,
      rgb(40 98 137 / 0.8) 100%);
}

.news-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--duration-hover) var(--easing-out);
}

.news-card--landscape .news-card__image {
  aspect-ratio: 620 / 413;
}

.news-card:hover .news-card__image,
.news-card:focus-visible .news-card__image {
  transform: scale(1.04);
}

.news-card__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;

  --news-caption-inset: 1.6rem;

  padding: 1.6rem 1.6rem 3.6rem;

  text-shadow: 0 0 8px rgb(var(--color-black-rgb) / 0.5);
}

.news-card__caption::before {
  content: "";
  position: absolute;
  inset: 0 var(--news-caption-inset) auto;
  border-top: var(--border-width) solid var(--color-white);
}

.news-card__title {
  margin: 0;
  color: inherit;
  padding-inline: 1.6rem;
  text-align: left;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .news-card__title {
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }
}

@media (prefers-reduced-motion: reduce) {

  .news-card__image,
  .news-card:hover .news-card__image,
  .news-card:focus-visible .news-card__image {
    transition: none;
    transform: none;
  }
}

/* =========================================
   PAGE : NEWS HERO (slider)
========================================= */

.news-hero {
  position: relative;
  color: var(--color-white);
}

.news-hero__swiper {
  position: relative;
}

.news-hero__slide {
  position: relative;
  overflow: hidden;
  aspect-ratio: 390 / 520;
  min-height: 48rem;
}

.news-hero__media,
.news-hero__media picture {
  position: absolute;
  inset: 0;
}

.news-hero__media {
  z-index: 0;
}

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

.news-hero__media::before,
.news-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.news-hero__media::before {
  z-index: 1;
  background: linear-gradient(180deg, rgba(40, 98, 137, 0.40) 0%, rgba(40, 98, 137, 0.00) 20.67%);
}

.news-hero__media::after {
  z-index: 2;
  background: linear-gradient(180deg, rgba(39, 98, 136, 0.00) 69.71%, rgba(39, 98, 136, 0.80) 100%);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  -webkit-mask-image: linear-gradient(180deg, transparent 60%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 60%, #000 100%);
}

.news-hero__content {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
  padding-block: 0 6.9rem;
  z-index: 1;
  text-shadow: 0 0 8px rgb(var(--color-black-rgb) / 0.3);
}

.news-hero__head {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

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

.news-hero__date {
  text-transform: uppercase;
  letter-spacing: 0.44px;
}

.news-hero__title {
  margin: 0;
  letter-spacing: 0.72px;
}

.news-hero__excerpt {
  display: none;
  margin: 0;
}

.news-hero__btn {
  min-width: 200px;
  text-shadow: none;
}

.news-hero__pagination-wrap {
  position: absolute;
  inset: auto 0 3.4rem;
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .news-hero__pagination-wrap {
    inset: auto 0 2rem;
  }
}

.news-hero__pagination {
  display: flex;
  gap: 0.6rem;
  pointer-events: auto;
}

.news-hero__dot {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: var(--border-width) solid var(--color-white);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--duration) var(--easing);
}

.news-hero__dot.is-active {
  background-color: var(--color-white);
}

.news-hero__dot:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.2rem;
}

@media (min-width: 768px) {
  .news-hero__slide {
    aspect-ratio: 1440 / 650;
    min-height: 52rem;
    max-height: 100dvh;
  }

  .news-hero__excerpt {
    display: block;
  }
}

@media (min-width: 1024px) {
  .news-hero__slide {
    aspect-ratio: 1440 / 650;
    min-height: 52rem;
    max-height: 100dvh;
  }

  .news-hero__content {
    display: grid;
    grid-template-columns: minmax(0, 44rem) minmax(0, 47rem) auto;
    align-items: start;
    column-gap: 2.4rem;
    padding-block: 0 3.2rem;
  }

  .news-hero__excerpt {
    display: block;
    padding-top: 2.8rem;
  }

  .news-hero__btn {
    justify-self: end;
    align-self: center;
  }

  .news-hero__pagination {
    justify-content: flex-end;
  }
}

@media (min-width: 1280px) {
  .news-hero__content {
    padding-inline: 4rem;
    column-gap: 1rem;
  }

  .news-hero__pagination-wrap {
    padding-inline: 4rem;
  }
}

/* =========================================
   PAGE : OUR STORY RECAP (video)
========================================= */

.recap-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 390 / 650;
  max-height: 100svh;
  width: 100%;
  background: var(--color-dark-teal);
  color: var(--color-white);
}

.recap-video__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.recap-video__breadcrumb {
  pointer-events: none;
  position: absolute;
  top: calc(var(--header-bar-bottom) + 4.8rem);
  left: 0;
  right: 0;
  z-index: 1;
  padding-inline: var(--container-gutter);
  text-shadow: 0 0 8px rgb(var(--color-black-rgb) / 0.3);
}

.recap-video__breadcrumb .breadcrumb__list {
  color: var(--color-white);
}

.recap-video__breadcrumb .breadcrumb__link {
  pointer-events: auto;
}

.recap-video__breadcrumb .breadcrumb__item:last-child::after {
  content: none;
}

.recap-video__toggle {
  position: absolute;
  left: var(--container-gutter);
  bottom: 2.4rem;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;

  border: 0;
  background: none;
  color: var(--color-white);
  font-size: 2rem;
  cursor: pointer;
  filter: drop-shadow(0 0 8px rgb(var(--color-black-rgb) / 0.3));
  transition: opacity 0.2s ease;
}

.recap-video__toggle i,
.recap-video__toggle img {
  font-size: 2rem;
}

.recap-video__toggle:hover {
  opacity: 0.7;
}

.recap-video__toggle:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.2rem;
}

@media (min-width: 1024px) {
  .recap-video {
    aspect-ratio: 1440 / 810;
    min-height: 52rem;
    max-height: 100dvh;
  }
}

@media (min-width: 1280px) {
  .recap-video__breadcrumb {
    top: calc(var(--header-bar-bottom) + 6.8rem);
    left: 3.8rem;
    padding-inline: 0;
  }

  .recap-video__toggle {
    left: 3.8rem;
    bottom: 3.2rem;
  }
}

/* =========================================
   PAGE : NEWS INTRO (events + newsroom list)
========================================= */

.news-intro {
  position: relative;
  padding-block: 7.2rem 0;
}

@media (min-width: 1024px) {
  .news-intro {
    padding-block: 8.6rem 0;
  }
}

.news-intro::before {
  content: "";
  position: absolute;
  top: -5rem;
  left: -14rem;
  width: 52.4rem;
  aspect-ratio: 524 / 680;
  background: url("../images/soft-cyan-glow.png") no-repeat center / contain;
  pointer-events: none;
}

.news-intro>* {
  position: relative;
}

@media (min-width: 1024px) {
  .news-intro {
    padding-block: 7.2rem 0;
  }

  .news-intro::before {
    top: 0;
    left: -20rem;
    width: 72rem;
    height: 72rem;
  }
}

/* --- Upcoming events --- */

.news-events__container {
  padding-inline: var(--container-gutter);
}

@media (min-width: 1024px) {
  .news-events__container {
    padding-inline: 4.3rem;
  }
}

.news-events__title {
  margin-bottom: 3.6rem;
  color: var(--color-dark-teal);
  text-transform: uppercase;
}

.news-events__rail {
  position: relative;
}

.news-events__swiper {
  overflow: visible;
  margin-top: 1.7rem;
}

.news-events__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-events__slide {
  width: auto;
  max-width: 100%;
  height: auto;
}

.news-events__nav {
  display: none;
}

.news-event {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  height: 100%;
  padding: 1.2rem;
  padding-right: 2.4rem;
  border-radius: var(--border-radius);
  background-color: var(--color-light-blue-02);
}

.news-event__badge {
  position: absolute;
  top: -1.6rem;
  left: -1.4rem;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.4rem 1rem;

  border: var(--border-width) solid rgb(var(--color-yellow-rgb) / 0.9);
  border-radius: 10rem;
  background-color: rgb(var(--color-yellow-rgb) / 0.3);
  color: var(--color-black);
  letter-spacing: 0.52px;
  text-transform: uppercase;
}

.news-event__badge-icon {
  font-size: 1.5rem;
}

.news-event__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 10rem;
  aspect-ratio: 1;
  border-radius: var(--border-radius);
  overflow: hidden;
}

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

.news-event__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  min-width: 0;
}

.news-event__title,
.news-event__date {
  margin: 0;
  color: var(--color-dark-teal);
}

.news-event__date {
  white-space: nowrap;
}

.news-event__sep {
  padding-inline: 0.2rem;
}

.news-event__cta {
  padding: 1.2rem 2.4rem;
  border-radius: 10rem;
  background-color: var(--color-white);
  color: var(--color-cyan);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-glow) var(--easing-out),
    color var(--duration-glow) var(--easing-out);
}

.news-event__cta:hover {
  background-color: var(--color-light-blue);
  color: var(--color-teal);
}

.news-event__cta:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.2rem;
}

@media (min-width: 1024px) {
  .news-events__title {
    margin-bottom: 2.3rem;
  }

  .news-events__rail {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) 4rem;
    align-items: center;
    column-gap: 1.2rem;
    padding-inline: var(--container-gutter);
  }

  .news-events__swiper {
    width: 100%;
    clip-path: inset(-2rem 0 -2rem -1.4rem);
  }

  .news-events__nav {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-top: 1.4rem;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: 0 0.4rem 1.6rem rgb(var(--color-cyan-rgb) / 0.12);
    color: var(--color-cyan);
    font-size: 1.8rem;
    cursor: pointer;
    transition: opacity var(--duration) var(--easing), box-shadow var(--duration) var(--easing);
  }

  .news-events__nav:hover {
    box-shadow: 0 0.6rem 2rem rgb(var(--color-cyan-rgb) / 0.24);
  }

  .news-events__nav:focus-visible {
    outline: 0.2rem solid var(--color-cyan);
    outline-offset: 0.2rem;
  }

  .news-events__nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
  }

  .news-events__nav.swiper-button-lock {
    visibility: hidden;
  }
}

@media (min-width: 1280px) {
  .news-events__rail {
    padding-inline: 2.4rem;
  }
}

/* --- Newsroom head : title + search --- */

.news-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.6rem;
  margin-block: 7.2rem 5.1rem;
  text-align: center;
}

.news-head__title {
  margin: 0;
  color: var(--color-dark-teal);
  font-weight: 400;
}

.news-head__title strong {
  color: var(--color-cyan);
  font-weight: 700;
}

.news-filter {
  display: flex;
  gap: 0.8rem;
  width: 100%;
  max-width: 37rem;
  margin-bottom: 1.4rem;
}

.news-filter__search,
.news-filter__sort {
  position: relative;
  display: flex;
  align-items: center;
}

.news-filter__search {
  flex: 1 1 auto;
  min-width: 0;
}

.news-filter__sort {
  flex: none;
  width: 14rem;
}

input.news-filter__input,
.form-input {
  width: 100%;
  height: 4.4rem;
  border: var(--border-width) solid var(--input-color-border, var(--color-cyan));
  border-radius: 10rem;
  background-color: var(--color-light-blue-02);
  color: var(--color-dark-teal);
  font-family: inherit;
  transition: box-shadow var(--duration) var(--easing), background-color var(--duration) var(--easing);
}

input.news-filter__input {
  padding: 0 4rem 0 1.6rem;
}

.form-input {
  padding: 0 1.6rem;
}

input.news-filter__input::placeholder,
.form-input::placeholder {
  color: var(--color-dark-teal);
  opacity: 1;
}

input.news-filter__input::-webkit-search-cancel-button {
  display: none;
}

input.news-filter__input:focus {
  outline: none;
  background-color: var(--color-white);
  box-shadow: 0 0 0 0.3rem rgb(var(--color-cyan-rgb) / 0.2);
}

/* -- Form field : the label floats above the value once the field has focus
   or text. The error look keys off aria-invalid, which CF7 sets. -- */
.form-field {
  --form-field-transition: 0.35s var(--easing-out);
  position: relative;
  display: block;
}

.form-field__label {
  position: absolute;
  top: 0.4rem;
  left: 1.7rem;
  z-index: 1;
  color: var(--color-teal);
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.6rem);
  transition: opacity var(--form-field-transition), transform var(--form-field-transition), color var(--form-field-transition);
}

.form-field:has(.form-input:focus) .form-field__label,
.form-field:has(.form-input:not(:placeholder-shown)) .form-field__label {
  opacity: 1;
  transform: none;
}

/* The value stays vertically centred; only the textarea, which is top
   aligned, makes room under the label. */
.form-input {
  background-color: var(--input-color-bg, var(--color-light-blue-02));
  transition: border-color var(--form-field-transition), background-color var(--form-field-transition), padding-top var(--form-field-transition);
}

.form-input:focus {
  outline: none;
}

.form-input::placeholder {
  transition: color var(--form-field-transition);
}

.form-input:focus::placeholder {
  color: transparent;
}

textarea.form-input:focus,
textarea.form-input:not(:placeholder-shown) {
  padding-top: 2rem;
}

.form-input[aria-invalid="true"],
select.form-select[aria-invalid="true"],
select.form-select[aria-invalid="true"]+.ts-wrapper {
  --input-color-border: rgb(var(--color-error-rgb));
  --input-color-bg: #FFF5F5;
}

.form-field:has([aria-invalid="true"]) .form-field__label {
  color: rgb(var(--color-error-rgb));
}

.news-filter__submit {
  position: absolute;
  top: 50%;
  right: 0.8rem;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  background: none;
  color: var(--color-cyan);
  cursor: pointer;
}

.news-filter__submit i,
.news-filter__submit img {
  font-size: 1.4rem;
}

.news-filter__submit:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
}

@media (min-width: 1024px) {
  .news-head {
    gap: 3.6rem;
    margin-block: 14.4rem 11rem;
  }

  .news-filter {
    max-width: 46rem;
    margin-bottom: 0;
  }

  input.news-filter__input {
    height: 4.4rem;
  }
}

/* ==========================================================================
   Form select : Tom Select skin for select[data-select]
   ========================================================================== */
select.form-select,
.ts-wrapper.form-select.single .ts-control {
  width: 100%;
  height: 4.4rem;
  padding: 0 4.4rem 0 1.6rem;
  border: var(--border-width) solid var(--input-color-border, var(--color-cyan));
  border-radius: 10rem;
  background-color: var(--input-color-bg, var(--color-light-blue-02));
  color: var(--color-dark-teal);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--duration) var(--easing);
}

select.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%2300CCFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  background-size: 1.6rem;
}

select.form-select:focus-visible,
.ts-wrapper.form-select .ts-control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-cyan-rgb) / 0.2);
}

.ts-wrapper.form-select {
  position: relative;
  width: 100%;
}

.ts-wrapper.form-select.single .ts-control {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  box-shadow: none;
}

.ts-wrapper.form-select.single.focus .ts-control {
  box-shadow: none;
}

.ts-wrapper.form-select .ts-control>.item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ts-wrapper.form-select.single .ts-control::after,
.ts-wrapper.form-select.single.dropdown-active .ts-control::after {
  content: none;
}

.form-select__icon {
  position: absolute;
  top: 2.2rem;
  right: 1.6rem;
  z-index: 2;
  color: var(--color-cyan);
  font-size: 1rem;
  pointer-events: none;
  transform: translateY(-50%) rotate(90deg);
  transition: transform var(--duration) var(--easing);
}

.ts-wrapper.form-select.dropdown-active .form-select__icon {
  transform: translateY(-50%) rotate(-90deg);
}

.ts-wrapper.form-select .ts-dropdown,
.ts-wrapper.form-search .ts-dropdown {
  z-index: 20;
  margin: 0.6rem 0 0;
  padding: 1.2rem 0;
  border: var(--border-width) solid var(--color-cyan);
  border-radius: 2rem;
  background-color: var(--color-white);
  box-shadow: none;
  color: var(--color-dark-teal);
  font: inherit;
  text-align: left;
  overflow: hidden;
  animation: form-select-open 0.25s var(--easing-out);
}

.ts-wrapper.form-select .ts-dropdown-content,
.ts-wrapper.form-search .ts-dropdown-content {
  max-height: 24rem;
}

.ts-wrapper.form-select .ts-dropdown .option,
.ts-wrapper.form-search .ts-dropdown .option {
  padding: 0.6rem 1.6rem;
  background: none;
  color: inherit;
  white-space: nowrap;
  transition: color 0.2s var(--easing);
}

.ts-wrapper.form-select .ts-dropdown .option.active,
.ts-wrapper.form-search .ts-dropdown .option.active {
  background: none;
  color: var(--color-cyan);
  text-decoration: underline;
  text-decoration-thickness: var(--text-decoration-thickness);
  text-underline-offset: var(--text-underline-offset);
}

@keyframes form-select-open {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {

  .ts-wrapper.form-select .ts-dropdown,
  .ts-wrapper.form-search .ts-dropdown {
    animation: none;
  }
}

/* ==========================================================================
   Form search : Tom Select skin for the search fields, prepared ahead of the
   suggestions. Nothing runs it yet -- input.form-search is a plain field and
   submits on its own. Point Tom Select at it and the control keeps this same
   look while the suggestion list comes out in the .form-select skin above.

   Two things the JS has to hold up for this skin to fit:
     1. maxItems: 1, so the wrapper gets .single and the control stays one line.
     2. Tom Select hides the real input and takes over its value, so the typed
        text has to be written back to it -- otherwise submitting without
        picking a suggestion sends an empty q.
   ========================================================================== */

.ts-wrapper.form-search {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.ts-wrapper.form-search .ts-control {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 4.4rem;
  padding: 0 4rem 0 1.6rem;
  border: var(--border-width) solid var(--input-color-border, var(--color-cyan));
  border-radius: 10rem;
  background-color: var(--input-color-bg, var(--color-light-blue-02));
  color: var(--color-dark-teal);
  font: inherit;
  box-shadow: none;
  cursor: text;
  transition: box-shadow var(--duration) var(--easing), background-color var(--duration) var(--easing);
}

.ts-wrapper.form-search.job-filter__input .ts-control {
  padding-right: 1.6rem;
}

.ts-wrapper.form-search.single .ts-control::after {
  content: none;
}

.ts-wrapper.form-search .ts-control>input {
  width: 100%;
  min-width: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: text;
}

.ts-wrapper.form-search .ts-control>input::placeholder {
  color: var(--color-dark-teal);
  opacity: 1;
}

.ts-wrapper.form-search.focus .ts-control {
  background-color: var(--color-white);
  box-shadow: 0 0 0 0.3rem rgb(var(--color-cyan-rgb) / 0.2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================
   JOB SEARCH
========================================= */

.page-head-section--job {
  flex: none;
  padding-bottom: 3.6rem;
}

.page-head-section--job .page-head__title {
  text-transform: none;
}

.job-search {
  position: relative;
  padding-block: 0 var(--section-gap);
}

.job-search__inner {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* -- Filter -- */

.job-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.8rem;
}

.job-filter__search {
  grid-column: 1 / -1;
}

input.job-filter__input {
  padding-right: 1.6rem;
}

.job-filter__submit {
  grid-column: 1 / -1;
  justify-self: start;
  min-width: 20rem;
  margin-top: 0.8rem;
}

/* -- List -- */

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

@media (min-width: 1024px) {
  .job-list {
    gap: 0.2rem;
  }
}

.job-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.6rem;
  row-gap: 2.4rem;
  padding: 2.4rem 1.6rem;
  border-radius: var(--border-radius);
  background-color: rgb(var(--color-white-rgb) / 0.6);
  box-shadow: 0 0 1rem 0 rgb(var(--color-black-rgb) / 0.1);
  transition: box-shadow var(--duration-glow) var(--easing-out);
}

.job-card:hover {
  box-shadow: 0 0.7rem 2.4rem 0 rgb(var(--color-cyan-rgb) / 0.2);
}



.job-card__title {
  grid-column: 1;
  color: var(--color-dark-teal);
  text-transform: uppercase;
}

.job-card__link {
  color: inherit;
  text-decoration: none;
}

.job-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.job-card__link:focus-visible {
  outline: none;
}

.job-card:has(.job-card__link:focus-visible) {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.3rem;
}

.job-card__meta {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-dark-teal);
}

.job-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

@media (min-width: 1024px) {
  .job-card__meta-item {
    gap: 0.4rem;
  }
}

.job-card__meta-item:has(.icon-groups) {
  gap: 1.2rem;
}

.job-card__meta-item i,
.job-card__meta-item img {
  flex: none;
  font-size: 2rem;
  line-height: calc(var(--font-size-body) * var(--line-height-body));
}

.job-card__arrow {
  --glass-fill: rgba(255, 255, 255, 0.20);
  --glass-rim: linear-gradient(to bottom right,
      rgb(var(--color-black-rgb) / 0.01) 0%,
      rgb(var(--color-black-rgb) / 0) 45%);
  --glass-highlight: rgb(var(--color-white-rgb) / 0.18);

  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--glass-fill);
  background-image: linear-gradient(135deg,
      rgb(var(--color-black-rgb) / 0.04) 0%,
      rgb(var(--color-black-rgb) / 0) 60%);
  backdrop-filter: blur(1.6rem) saturate(1.4);
  -webkit-backdrop-filter: blur(1.6rem) saturate(1.4);
  box-shadow:
    inset 0.3rem 0.3rem 0.6rem 0 rgb(var(--color-black-rgb) / 0.01),
    inset -0.2rem -0.2rem 0.4rem 0 rgb(var(--color-white-rgb) / 0.6);
  color: var(--color-cyan);
  font-size: 1.6rem;
  transition:
    background-color var(--duration-hover) var(--easing-out),
    box-shadow var(--duration-glow) var(--easing-out);
}

.job-card__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--border-width);
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.job-card:hover .job-card__arrow {
  --glass-fill: rgb(var(--color-cyan-rgb) / 0.18);
  --glass-rim: linear-gradient(to bottom right,
      #F2FCFF 0%,
      rgb(var(--color-cyan-rgb) / 0) 40%,
      rgb(var(--color-cyan-rgb) / 0) 60%,
      #F2FCFF 100%);
  background-image: none;
  box-shadow:
    inset 0.5rem 0.5rem 0.6rem -0.5rem rgb(var(--color-cyan-rgb) / 0.12),
    inset -0.5rem -0.5rem 0.6rem -0.5rem rgb(var(--color-cyan-rgb) / 0.12),
    inset 0 0.1rem 0.2rem 0 rgb(var(--color-white-rgb) / 0.3),
    0 0.7rem 2rem 0 rgb(var(--color-cyan-rgb) / 0.2);
}

.job-card__arrow i,
.job-card__arrow img {
  font-size: 1.6rem;
}

.job-list__empty {
  color: var(--color-dark-teal);
}

@media (min-width: 1024px) {
  .page-head-section--job {
    padding-bottom: 4.8rem;
  }

  .job-search__inner {
    display: grid;
    grid-template-columns: 30.9rem minmax(0, 70.8rem);
    justify-content: space-between;
    align-items: start;
    gap: 6.4rem;
    padding-inline: 12.8rem;
  }

  .job-filter {
    position: sticky;
    top: calc(var(--header-height, 5.6rem) + 4rem);
    grid-template-columns: minmax(0, 1fr);
  }

  .job-filter__search,
  .job-filter__submit {
    grid-column: auto;
  }

  .job-filter--row {
    position: static;
    grid-template-columns: 31rem 12.1rem 14.2rem;
    justify-content: start;
  }

  .job-filter--row .job-filter__search,
  .job-filter--row .job-filter__submit {
    grid-column: 1;
  }

  .job-card {
    padding: 2.4rem;
    row-gap: 1.6rem;
  }

  .job-card__meta {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    column-gap: 1.6rem;
  }
}

@media (min-width: 1280px) {

  .page-head-section--job {
    padding-bottom: 5.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .job-card,
  .job-card__arrow {
    transition: none;
  }
}

/* =========================================
   CAREER
========================================= */

.page-head-section--career {
  flex: none;
  padding-bottom: 0;
}

@media (max-width: 1023px) {
  .page-head-section--career .page-head__title .line-reveal {
    display: inline-block;
    vertical-align: top;
  }

  .page-head-section--career .page-head__title .line-reveal+.line-reveal {
    margin-left: 0.25em;
  }
}

/* -- Filter -- */

.career-filter {
  position: relative;
  padding-block: 3.6rem 0;
}

@media (min-width: 1024px) {

  .career-filter__inner {
    padding-inline: 12.8rem 7rem;
  }
}

@media (min-width: 1280px) {
  .career-filter {
    padding-block: 4.9rem 0;
  }
}

/* -- Intro banner -- */

.career-intro {
  position: relative;
  z-index: 1;
  padding-block: 4.8rem var(--section-gap);
}

.career-intro__inner {
  position: relative;
  display: flex;
  overflow: hidden;
  aspect-ratio: 390 / 580;
  padding: 9.2rem 2rem 5.2rem;
}

.career-intro__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.career-intro__inner::before,
.career-intro__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.career-intro__inner::before {
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 100%);
}

.career-intro__inner::after {
  background: rgb(var(--color-black-rgb) / 0.3);
}

.career-intro__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 29.6rem;
  color: var(--color-white);
}

.career-intro__overline {
  margin-bottom: 1.2rem;
}

.career-intro__logo {
  width: 20rem;
  height: auto;
  margin-bottom: 2.8rem;
  filter: brightness(0) invert(1);
}

.career-intro__text {
  white-space: pre-line;
}

@media (min-width: 1024px) {
  .career-intro {
    padding-block: 5.4rem var(--section-gap);
    padding-inline: 4rem;
  }

  .career-intro__inner {
    aspect-ratio: 1362 / 560;
    padding: clamp(2.4rem, 14vw - 12rem, 8.3rem) 8.8rem;
  }

  .career-intro__inner::before {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 58rem, transparent 80rem);
    mask-image: linear-gradient(to right, #000 0%, #000 58rem, transparent 80rem);
  }

  .career-intro__content {
    max-width: clamp(33.9rem, 83rem - 34vw, 48rem);
  }
}

.career-intro--sustain .career-intro__inner {
  aspect-ratio: 390 / 560;
  padding: 9.2rem 4.3rem 11rem 2rem;
}

.career-intro--sustain .career-intro__content {
  max-width: none;
}

.career-intro__title {
  margin-bottom: 16rem;
}

@media (min-width: 1024px) {
  .career-intro--sustain .career-intro__inner {
    aspect-ratio: 1362 / 560;
    padding: clamp(2.4rem, 14vw - 12rem, 8.3rem) 9.7rem;
  }

  .career-intro--sustain .career-intro__text {
    max-width: 30rem;
  }

  .career-intro__title {
    margin-bottom: clamp(2.4rem, 33vw - 31.5rem, 16rem);
    text-wrap: balance;
    max-width: 51rem
  }
}

.career-intro--aurasol {
  padding-block: 5.1rem 0;
}

.career-intro--aurasol::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 30rem;
  aspect-ratio: 1329 / 736;
  background: url("../images/soft-cyan-glow-02.png") no-repeat left top / contain;
  pointer-events: none;
}

.career-intro--aurasol .career-intro__inner {
  padding-bottom: 3.8rem;
}

.career-intro--aurasol .career-intro__text {
  margin-top: auto;
}

@media (min-width: 1024px) {
  .career-intro--aurasol {
    padding-block: 9.6rem 0;
    padding-inline: 3.6rem;
  }

  .career-intro--aurasol::before {
    top: 20rem;
    width: 80rem;
  }

  .career-intro--aurasol .career-intro__inner {
    padding: clamp(2.4rem, 14vw - 12.36rem, 7.8rem) 9rem;
  }

  .career-intro--aurasol .career-intro__title {
    margin-bottom: clamp(2.4rem, 10.9vw - 8.8rem, 6.9rem);
  }
}

@media (min-width: 1280px) {
  .career-intro--aurasol {
    padding-top: 12.8rem;
  }
}

/* -- Shared values -- */

.career-values {
  position: relative;
  padding-block: calc(7.8rem - var(--section-gap)) 7.8rem;
}

.career-values::before {
  content: "";
  position: absolute;
  top: -26rem;
  left: -14rem;
  width: 34rem;
  aspect-ratio: 524 / 680;
  background: url("../images/soft-cyan-glow.png") no-repeat center / contain;
  pointer-events: none;
}

.career-values>* {
  position: relative;
}

.career-values__title {
  margin-bottom: 1.8rem;
  color: var(--color-teal);
  text-align: center;
  text-transform: uppercase;
}

.career-values__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.career-values__btn {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 1.6rem 1.2rem;
  border-radius: 0.8rem;
  color: var(--color-white);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.career-values__pill {
  display: inline;
}

.career-values__word,
.career-values__rest {
  position: relative;
  z-index: 1;
}

.career-values__thumb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background-color: var(--color-dark-teal);
}

.career-values__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.career-values__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--color-black-rgb) / 0.45);
  transition: background-color var(--duration) var(--easing-out);
}

.career-values__thumb i {
  display: none;
}

.career-values__btn:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.3rem;
}

.career-values__line-rest,
.career-values__break {
  display: none;
}

@media (min-width: 1024px) {

  .career-values {
    --u: min(0.1rem, 100vw / 1440);
    --values-thumb: calc(58 * var(--u));

    padding-block: calc(11.5rem - var(--section-gap)) 15.1rem;
  }

  .career-values::before {
    top: -36rem;
    left: -26rem;
    width: 64rem;
  }

  .career-values__inner {
    max-width: calc(1440 * var(--u));
    margin-inline: auto;
    padding-inline: calc(80 * var(--u)) calc(30 * var(--u));
  }

  /* One flowing sentence: the title, pills and rests are flex items of the
     inner, and each .career-values__break forces a new line. */
  .career-values__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: calc(14 * var(--u));
    /* Halved: each break is its own empty row, so lines get two gaps. */
    row-gap: 0.2rem;
  }

  .career-values__list,
  .career-values__item {
    display: contents;
  }

  .career-values__title,
  .career-values__btn,
  .career-values__line-rest {
    font-size: calc(45 * var(--u));
  }

  .career-values__title {
    margin-bottom: 0;
  }

  .career-values__btn .career-values__rest {
    display: none;
  }

  .career-values__line-rest {
    display: block;
    color: var(--color-teal);
    text-transform: uppercase;
    cursor: pointer;
  }

  .career-values__break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }

  .career-values__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    width: auto;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    color: var(--color-teal);
    background: none;
    text-align: left;
  }

  .career-values__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--values-thumb);
    padding-left: calc(var(--values-thumb) + 1.2rem);
    white-space: nowrap;
  }

  .career-values__thumb {
    inset: 50% auto auto 0;
    width: var(--values-thumb);
    height: var(--values-thumb);
    border-radius: 0.8rem;
    transform: translateY(-50%);
    transition: width var(--duration) var(--easing-out);
  }

  .career-values__thumb::after {
    background: rgb(var(--color-black-rgb) / 0.2);
  }

  .career-values__thumb i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: calc(var(--values-thumb) / 2);
    display: block;
    font-size: calc(24 * var(--u));
    line-height: 1;
    color: var(--color-white);
    transform: translate(-50%, -50%);
  }

  .career-values__word {
    transition: color var(--duration) var(--easing-out);
  }

  .career-values__btn:hover .career-values__thumb,
  .career-values__btn:focus-visible .career-values__thumb {
    width: calc(100% + 1.2rem);
  }

  .career-values__btn:hover .career-values__thumb::after,
  .career-values__btn:focus-visible .career-values__thumb::after {
    background-color: rgb(var(--color-black-rgb) / 0.45);
  }

  .career-values__btn:hover .career-values__word,
  .career-values__btn:focus-visible .career-values__word {
    color: var(--color-white);
  }
}

@media (prefers-reduced-motion: reduce) {

  .career-values__thumb,
  .career-values__thumb::after,
  .career-values__word {
    transition: none;
  }
}

/* -- Values popup -- */

.career-modal {
  position: fixed;
  width: min(68.2rem, 100% - 3.2rem);
  margin: auto;
  max-width: none;
  max-height: 100dvh;
  padding: 0;
  border: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-white);
}

@media (min-width: 1024px) {
  .career-modal {
    border-radius: 2.4rem;
  }
}

.career-modal:focus {
  outline: none;
}

.career-modal[open] {
  animation: career-modal-in var(--duration) var(--easing-out);
}

.career-modal::backdrop {
  background: rgb(var(--color-black-rgb) / 0.35);
}

@keyframes career-modal-in {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
}

html:has(body.has-modal-open) {
  scrollbar-gutter: stable;
}

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

.career-modal__close {
  position: sticky;
  z-index: 2;
  top: 1.3rem;
  display: flex;
  margin: 1.3rem 1.6rem -4.3rem auto;
  padding: 0.5rem;
  color: var(--color-cyan);
  background: none;
  cursor: pointer;
}

.career-modal__close svg {
  width: 2rem;
  height: 2rem;
}

.career-modal__close:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.2rem;
}

.career-modal__panel {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 6.4rem var(--container-gutter) 7.4rem;
}

.career-modal__panel[hidden] {
  display: none !important;
}

.career-modal__title {
  margin-bottom: 2.4rem;
  padding-right: 3.2rem;
  color: var(--color-dark-teal);
}

.career-modal__text {
  margin-bottom: 2.4rem;
  color: var(--color-black);
  white-space: pre-line;
}

.career-modal__stats {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin: 0;
  color: var(--color-cyan);
}

.career-modal__stat {
  display: grid;
  grid-template-columns: 8.6rem 1fr;
  align-items: center;
}

.career-modal__stat-label {
  margin: 0;
  white-space: pre-line;
}

.career-modal__gallery {
  position: relative;
}

.career-modal .career-modal__dots {
  position: absolute;
  z-index: 1;
  top: auto;
  right: 1.2rem;
  bottom: 1.2rem;
  left: auto;
  width: auto;
  display: flex;
  gap: 0.6rem;
}

.career-modal__dot {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: var(--border-width) solid var(--color-white);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--duration) var(--easing);
}

.career-modal__dot.is-active {
  background-color: var(--color-white);
}

.career-modal__dot:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.2rem;
}

.career-modal__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 428;
  object-fit: cover;
}

@media (min-width: 768px) {
  .career-modal__panel {
    display: grid;
    grid-template-columns: 1fr 32rem;
    align-items: start;
    gap: 4rem;
    padding: 4.2rem 2.8rem 4.2rem 3.6rem;
  }

  .career-modal__title {
    padding-top: 2rem;
    padding-right: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .career-modal[open] {
    animation: none;
  }
}

/* -- Video -- */

.career-video__media {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .career-video__media {
    aspect-ratio: 1440 / 560;
  }
}

/* -- Core values -- */

.core-values {
  overflow-x: clip;
  width: 100%;
  padding-block: 9.2rem 0;
  padding-inline: var(--container-gutter);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.core-values__head {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.core-values__title,
.career-grow__title {
  color: var(--color-teal);
  text-transform: uppercase;
}

.core-values__text {
  color: var(--color-black);
}

.core-values__rail {
  position: relative;
  margin-top: 3.6rem;
}

.core-values__swiper {
  margin: -3.2rem calc(var(--container-gutter) * -1);
  padding: 3.2rem var(--container-gutter);
}

.core-values__list,
.career-grow__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.core-values__card {
  display: flex;
  flex-direction: column;
  width: 33.4rem;
  min-height: 20rem;
  height: auto;
  padding: 2.4rem;
  border: var(--border-width) solid var(--color-white);
  background-color: rgb(var(--color-white-rgb) / 0.3);
  box-shadow:
    0 0.4rem 2.4rem 0 rgb(var(--color-cyan-rgb) / 0.16),
    inset 0 0 1.6rem 0 rgb(var(--color-light-grey-rgb) / 0.55);
}

.core-values__icon {
  --glass-fill: linear-gradient(to bottom right,
      rgb(var(--color-light-grey-rgb) / 0.6) 0%,
      rgb(var(--color-light-grey-rgb) / 0) 70%);
  --glass-rim: linear-gradient(to bottom right,
      rgb(var(--color-white-rgb) / 0.85) 0%,
      rgb(var(--color-white-rgb) / 0) 40%,
      rgb(var(--color-white-rgb) / 0) 60%,
      rgb(var(--color-white-rgb) / 0.85) 100%);
  --glass-highlight: rgb(var(--color-white-rgb) / 0.25);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  flex-shrink: 0;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-cyan);
  background: var(--glass-fill);
  backdrop-filter: blur(0.15rem) saturate(1.5);
  -webkit-backdrop-filter: blur(0.15rem) saturate(1.5);
  box-shadow: inset 0 0.1rem 0.2rem 0 var(--glass-highlight);
}

.core-values__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--border-width);
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.core-values__icon i,
.core-values__icon img {
  font-size: 2rem;
}

.core-values__card-body {
  margin-top: auto;
}

.core-values__card-title {
  color: var(--color-teal);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.core-values__card-text {
  color: var(--color-teal);
}

.mission__nav.core-values__nav {
  display: none;
}

@media (min-width: 1024px) {
  .core-values {
    padding-block: 10.1rem 0;
    padding-inline: 0;
  }

  .core-values__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
    padding-inline: 3.9rem;
  }

  .core-values__text {
    max-width: 34.8rem;
    padding-top: 0.4rem;
  }

  .core-values__rail {
    margin-top: 2.4rem;
    padding-inline: 8rem;
  }

  .core-values__swiper {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
  }

  .mission__nav.core-values__nav {
    --glass-fill: rgb(var(--color-white-rgb) / 0.6);
    --glass-rim: linear-gradient(to bottom right,
        rgb(var(--color-white-rgb) / 1) 0%,
        rgb(var(--color-cyan-rgb) / 0.12) 50%,
        rgb(var(--color-white-rgb) / 1) 100%);

    display: flex;
    opacity: 1;
    backdrop-filter: blur(0.8rem) saturate(1.5);
    -webkit-backdrop-filter: blur(0.8rem) saturate(1.5);
    box-shadow:
      inset 0 0.1rem 0.2rem 0 var(--glass-highlight),
      0 0.4rem 1.6rem rgb(var(--color-cyan-rgb) / 0.12);
  }

  .mission__nav.core-values__nav:hover {
    --glass-fill: rgb(var(--color-white-rgb) / 0.85);
  }

  .core-values__nav--prev {
    left: 1.6rem;
  }

  .core-values__nav--next {
    right: 1.6rem;
  }

  .mission__nav.core-values__nav.swiper-button-disabled {
    opacity: 0.3;
  }

  .mission__nav.core-values__nav.swiper-button-lock {
    display: none;
  }
}

@media (min-width: 1920px) {
  .core-values__swiper {
    --core-values-fade: 8rem;

    margin-inline: -8rem;
    padding-inline: 8rem;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--core-values-fade),
        #000 calc(100% - var(--core-values-fade)),
        transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--core-values-fade),
        #000 calc(100% - var(--core-values-fade)),
        transparent 100%);
  }
}

.core-values--sustain {
  padding-top: 0;
  overflow-x: visible;
}

.core-values--sustain .core-values__inner {
  position: relative;
}

.core-values--sustain .core-values__inner::before {
  content: "";
  position: absolute;
  top: -25rem;
  left: calc(50% - 50vw);
  width: 32rem;
  aspect-ratio: 458 / 711;
  background: url("../images/soft-dark-cyan-glow.png") no-repeat left top / contain;
  pointer-events: none;
}

.core-values--sustain .core-values__inner>* {
  position: relative;
}

.core-values--sustain .core-values__card {
  min-height: 24.4rem;
}

.core-values--sustain .core-values__card-title {
  margin-bottom: 0;
}

.sustain-commitment {
  margin-top: 7.2rem;
}

.sustain-commitment__overline {
  margin-bottom: 2.4rem;
  color: var(--color-cyan);
}

.sustain-commitment__text {
  color: var(--color-teal);
}

.sustain-commitment__text strong {
  font-weight: 700;
}

@media (min-width: 1024px) {

  .core-values--sustain {
    padding-inline: 4rem;
  }

  .core-values--sustain .core-values__inner::before {
    width: 45.8rem;
  }

  .core-values--sustain .core-values__head {
    padding-inline: 0;
  }

  .core-values--sustain .core-values__rail {
    margin-top: 3.8rem;
    padding-inline: 0;
  }

  .core-values--sustain .core-values__swiper {
    margin-inline: -3.2rem;
    padding-inline: 3.2rem;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .core-values--sustain .core-values__card {
    width: calc((100% - 2.4rem) / 4);
  }

  .sustain-commitment {
    margin-top: 10.5rem;
  }

  .sustain-commitment__overline {
    margin-bottom: 1.1rem;
  }

  .sustain-commitment__text {
    max-width: 125rem;
  }
}

/* -- Where you can grow -- */

.career-grow {
  overflow: clip;
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-block: 7.2rem 7.5rem;
  padding-inline: var(--container-gutter);
}

.career-grow__head {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.career-grow__text {
  color: var(--color-black);
  white-space: pre-line;
}

.career-grow__rail {
  position: relative;
  margin-top: 4.8rem;
}

.career-grow__swiper {
  margin-inline: calc(var(--container-gutter) * -1);
  padding-inline: var(--container-gutter);
}

.mission__nav.career-grow__nav {
  display: none;
  color: var(--color-white);
  transition:
    background-color var(--duration-hover) var(--easing-out),
    color var(--duration-hover) var(--easing-out),
    opacity var(--duration-hover) var(--easing-out);
}

.mission__nav.career-grow__nav:hover {
  color: var(--color-cyan);
}

.career-grow__nav--prev {
  left: var(--nav-inset);
}

.career-grow__nav--next {
  right: var(--nav-inset);
}

.career-grow__card {
  position: relative;
  width: 82vw;
  max-width: 34.8rem;
  aspect-ratio: 348 / 543;
  overflow: hidden;
  background-color: var(--color-light-grey);
}

.career-grow__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration) var(--easing-out);
}

.career-grow__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgb(50 109 154 / 0) 66.83%,
      rgb(40 98 137 / 0.8) 100%);
  pointer-events: none;
}

.career-grow__body {
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 1.8rem 2.4rem;
  color: var(--color-white);
}

.career-grow__card-title {
  text-transform: uppercase;
}

.career-grow__card-title,
.career-grow__card-text {
  text-shadow: 0 0 8px rgb(var(--color-black-rgb) / 0.6);
}

.career-grow__card-text {
  margin-bottom: 1.2rem;
}

@media (hover: hover) and (pointer: fine) {
  .career-grow__card:hover .career-grow__media {
    transform: scale(1.05);
  }
}

@media (min-width: 1024px) {
  .career-grow {
    padding-block: 10rem 10.1rem;
    padding-inline: 0;
  }

  .career-grow__head {
    display: grid;
    grid-template-columns: 1fr repeat(2, minmax(0, 28rem));
    column-gap: 3.7rem;
    align-items: start;
    padding-inline: 3.9rem;
  }

  .career-grow__rail {
    margin-top: 5.8rem;
    padding-inline: 1.05rem;
  }

  .career-grow__swiper {
    margin-inline: 0;
    padding-inline: 0;
  }

  .mission__nav.career-grow__nav {
    display: flex;
  }

  .career-grow__nav--prev {
    left: calc(1.05rem + var(--nav-inset));
  }

  .career-grow__nav--next {
    right: calc(1.05rem + var(--nav-inset));
  }

  .career-grow__card {
    width: auto;
    max-width: none;
  }
}

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

/* -- Inside the branch -- */

.career-map__viewport {
  position: relative;
  display: flex;
  align-items: center;
  height: 100vh;
  height: 100lvh;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

.career-map.is-scrubbed .career-map__viewport {
  overflow: hidden;
}

.career-map__stage {
  position: relative;
  flex-shrink: 0;
  height: 100%;
  will-change: transform;
}

.career-map__img {
  display: block;
  width: auto;
  height: 100%;
}

.career-map__spot {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  transform: translateY(-50%);
}

.career-map__spot.is-open {
  z-index: 3;
}

.career-map__pin {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.4rem;
  border: none;
  border-radius: 99rem;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  white-space: nowrap;
  color: var(--color-dark-teal);
  background-color: rgb(var(--color-white-rgb) / 0.92);
  box-shadow: 0 0.4rem 1.6rem 0 rgb(var(--color-black-rgb) / 0.12);
  cursor: pointer;
  transition:
    background-color var(--duration-hover) var(--easing-out),
    color var(--duration-hover) var(--easing-out);
}

.career-map__pin i,
.career-map__pin img {
  font-size: 1.6rem;
  line-height: 1;
}

.career-map__pin:hover {
  color: var(--color-teal);
  background-color: var(--color-light-blue-02);
}

.career-map__pin:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.2rem;
}

.career-map__card {
  --shift: 0px;

  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  width: min(34rem, 100vw - 3.2rem);
  padding: 1.2rem;
  border-radius: 1.2rem;
  color: var(--color-dark-teal);
  background-color: var(--color-light-blue-02);
  box-shadow: 0 0.8rem 3.2rem 0 rgb(var(--color-black-rgb) / 0.16);
  translate: var(--shift) 0;
  animation: career-map-card-in var(--duration) var(--easing-out);
}

.career-map__card[hidden] {
  display: none;
}

.career-map__card--media {
  width: min(45rem, 100vw - 3.2rem);
}

.career-map__spot.is-flip-x .career-map__card {
  left: auto;
  right: 0;
}

.career-map__spot.is-flip-y .career-map__card {
  top: auto;
  bottom: 0;
}

@keyframes career-map-card-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.career-map__card-img {
  flex-shrink: 0;
  width: 10rem;
  height: 10rem;
  border-radius: 1.2rem;
  object-fit: cover;
}

.career-map__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.career-map__card-title {
  margin-bottom: 1.1rem;
}

.career-map__card-text {
  margin-bottom: 1.1rem;
}

.career-map__btn {
  border-radius: 99rem;
  background-color: var(--color-white);
}

@media (max-width: 479px) {
  .career-map__card--media {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .career-map__card {
    animation: none;
  }
}

/* -- Employee benefits -- */

.career-benefits {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-block: 7.2rem;
  padding-inline: var(--container-gutter);
}

.career-benefits__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 468 / 706;
  object-fit: cover;
}

.career-benefits__body {
  position: relative;
}

.career-benefits__body::before {
  content: "";
  position: absolute;
  top: -20rem;
  left: calc(50% - 50vw);
  width: max(72rem, 50vw + 30rem);
  aspect-ratio: 1329 / 736;
  background: url("../images/soft-cyan-glow-03.png") no-repeat left center / contain;
  pointer-events: none;
}

.career-benefits__body>* {
  position: relative;
}

.career-benefits__media {
  position: relative;
  z-index: 1;
}

.career-benefits__title {
  margin-bottom: 3.2rem;
  color: var(--color-teal);
}

.career-benefits__title span {
  color: var(--color-cyan);
}

.career-benefits__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.career-benefits__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.career-benefits__icon {
  margin-bottom: 0;
}

.career-benefits__item-title {
  margin-bottom: 1rem;
  color: var(--color-black);
  text-transform: uppercase;
}

.career-benefits__item-text {
  color: var(--color-black);
}

@media (min-width: 1024px) {
  .career-benefits {
    position: relative;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: clamp(4rem, 8.2vw, 11.8rem);
    padding-block: 14.1rem 11.9rem;
  }

  .career-benefits__media {
    flex: 0 1 46.8rem;
    width: auto;
    min-width: 0;
  }

  .career-benefits__body {
    flex: 0 1 60rem;
  }

  .career-benefits__body::before {
    content: none;
  }

  .career-benefits::before {
    content: "";
    position: absolute;
    top: -10rem;
    left: calc(50% - 50vw);
    width: max(92rem, 50vw + 20rem);
    max-height: 100%;
    aspect-ratio: 1329 / 736;
    background: url("../images/soft-cyan-glow-03.png") no-repeat left top / contain;
    pointer-events: none;
  }

  .career-benefits__title {
    margin-bottom: 5rem;
  }
}

/* -- Join -- */

.career-join {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 390 / 340;
  margin-bottom: 2.6rem;
  padding: 2.4rem var(--container-gutter);
  overflow: hidden;
  color: var(--color-white);
  text-align: center;
}

.career-join__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.career-join::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.career-join__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}

.career-join__title,
.career-join__text {
  margin: 0;
}

.career-join__btn {
  min-width: min(100%, 24rem);
}

@media (min-width: 1024px) {
  .career-join {
    aspect-ratio: 1425 / 364;
    margin-bottom: 2.3rem;
  }

  .career-join__text {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
  }
}

/* =========================================
   CONTACT
========================================= */

.page-head-section--contact {
  flex: none;
  padding-bottom: 3.6rem;
}

.contact {
  position: relative;
  padding-block: 0 2.5rem;
}

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

.contact__info {
  display: flex;
  flex-direction: column;
  gap: 3.7rem;
}

/* -- Channels -- */

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

.contact-list__item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-list__icon.btn--primary-light {
  --glass-fill: rgb(var(--color-white-rgb) / 0.35);
  --glass-rim: linear-gradient(135deg,
      var(--color-white) 0%,
      var(--color-white) 35%,
      rgb(var(--color-white-rgb) / 0) 55%,
      rgb(var(--color-white-rgb) / 0) 70%,
      rgb(var(--color-white-rgb) / 0.9) 100%);
  --glass-highlight: rgb(var(--color-white-rgb) / 0.4);
  --glass-inner: inset 0.3rem 0.3rem 1.2rem -0.5rem rgb(var(--color-dark-teal-rgb) / 0.08);
  --glass-glow: 0 0.4rem 1.2rem -0.2rem rgb(var(--color-dark-teal-rgb) / 0.08);
  --border-width: 0.15rem;

  background-image: linear-gradient(135deg,
      rgb(var(--color-black-rgb) / 0.05) 0%,
      rgb(var(--color-black-rgb) / 0) 60%);

  flex: none;
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  color: var(--color-cyan);
}

.contact-list__icon i,
.contact-list__icon img {
  font-size: 2rem;
}

.contact-list__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.contact-list__label {
  color: var(--color-black);
}

.contact-list__value {
  color: var(--color-black);
  text-decoration: none;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

a.contact-list__value:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--text-decoration-thickness);
  text-underline-offset: var(--text-underline-offset);
}

/* -- Map -- */

.contact__map {
  overflow: hidden;
  aspect-ratio: 358 / 212;
  max-width: 100%;
  border-radius: var(--border-radius);
  background-color: var(--color-light-grey);
}

.contact__map>* {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -- Form -- */

.contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1.2rem;
}

.contact-form__textarea {
  display: block;
  height: 15.2rem;
  padding: 1.4rem 1.6rem;
  border-radius: 2rem;
  resize: none;
}

.contact-form__submit {
  justify-self: start;
  min-width: 20rem;
  margin-top: 2.4rem;
}

@media (min-width: 1024px) {
  .page-head-section--contact {
    padding-bottom: 4.8rem;
  }

  .contact {
    padding-block: 0 6.8rem;
  }

  .contact__inner {
    display: grid;
    grid-template-columns: clamp(28rem, 27.34vw, 35rem) minmax(0, 43.2rem);
    justify-content: space-between;
    align-items: start;
    gap: 6.4rem;
    padding-inline: 12.8rem;
  }

  .contact__info {
    gap: 2.2rem;
  }

  .contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.8rem;
    row-gap: 1.8rem;
  }

  .contact-form__field--full {
    grid-column: 1 / -1;
    margin-top: 0.8rem;
  }

  .contact-form__submit {
    margin-top: 0.8rem;
  }
}

@media (min-width: 1280px) {
  .page-head-section--contact {
    padding-bottom: 5.6rem;
  }

  .page-head-section--contact .page-head__body {
    display: flex;
  }

  .contact__inner {
    grid-template-columns: clamp(35rem, 24.31vw, 42rem) minmax(0, 71rem);
  }
}

/* =========================================
   TERMS & POLICIES
========================================= */

.page-head-section--terms {
  flex: none;
  padding-bottom: 3.6rem;
}

.page-head-section--terms .page-head__inner {
  padding-inline: var(--container-gutter);
}

.page-head-section--terms .page-head__body {
  display: flex;
  align-items: center;
}

.page-head-section--terms .page-head__title {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 700;
  text-align: center;
  text-transform: none;
}

.terms {
  position: relative;
  padding-block: 0 6rem;
}

.terms__tab-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 2.4rem;

  margin: 0;
  padding: 0 var(--container-gutter);
  list-style: none;

  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.terms__tab-list::-webkit-scrollbar {
  display: none;
}

.terms__tab {
  display: block;
  color: var(--color-cyan);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  transition: color var(--duration) var(--easing-out);
}

.terms__tab.is-current {
  color: var(--color-teal);
}

.terms__body {
  --terms-measure: 78.3rem;

  max-width: calc(var(--terms-measure) + var(--container-gutter) * 2);
  margin-inline: auto;
  padding: 4.4rem var(--container-gutter) 0;
}

.terms__title {
  color: var(--color-black);
}

.terms__body .entry-content {
  max-width: none;
  margin-inline: 0;
  padding: 4.8rem 0 0;
}

.terms__body .entry-content>.wp-block-paragraph:not(:first-child) {
  margin-top: 2rem;
}

.terms__body .entry-content>:is(h2, h3, h4, h5, h6):not(:first-child) {
  margin-top: 1.4rem;
  text-transform: uppercase;
}

.terms__body .entry-content>:is(ul, ol):not(:first-child) {
  margin-top: 1.2rem;
}

.terms__body .entry-content li+li {
  margin-top: 0.2rem;
}

@media (min-width: 768px) {
  .terms__tab-list {
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .page-head-section--terms {
    padding-bottom: 4rem;
  }

  .terms {
    padding-block: 0 20rem;
  }

  .terms__tab-list {
    gap: 7.2rem;
  }

  .terms__body {
    padding-top: 7.2rem;
  }
}

@media (min-width: 1280px) {
  .page-head-section--terms .page-head__body {
    display: flex;
  }
}

@media (min-width: 1450px) {
  .terms__body {
    --terms-measure: 80rem;
  }
}

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

/* =========================================
   BUSINESS MEDIA (pinned image window + stat tiles)
========================================= */

.business-media {
  --bm-gap: 0.9rem;
  --bm-edge: var(--container-gutter);

  position: relative;
  overflow: clip;
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-bottom: 8rem;
}

.business-media__frame {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 390 / 632;
  clip-path: inset(0);
  background-color: #A2B2BE;

}

.business-media__track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200%;
  pointer-events: none;
}

.business-media__bg {
  position: sticky;
  top: 3rem;
  display: block;
  width: 100%;
  height: 50%;
}

@media (max-width: 1023px) {
  .business-media__frame {
    aspect-ratio: 390 / 632;
    height: auto;
  }

  .business-media__bg {
    position: fixed;
    inset: 0;
    height: 100lvh;
  }
}

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

.business-media__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.business-media__title {
  position: relative;
  z-index: 1;
  padding-inline: var(--bm-edge);
  color: var(--color-white);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.business-media__title span {
  display: block;
}

/* --- Tiles --- */

.business-media__rail {
  position: relative;
  margin-top: 1.9rem;
}

.business-media__list {
  margin: 0;
  list-style: none;
}

.business-media__tile {
  position: relative;
  width: 22.9rem;
  aspect-ratio: 229 / 307;
  overflow: hidden;
  background-color: var(--color-light-grey);
}

.business-media__tile--wide {
  width: 46.7rem;
  aspect-ratio: 467 / 307;
}

.business-media__tile-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-media__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgb(var(--color-black-rgb) / 0.18) 0%,
      rgb(var(--color-black-rgb) / 0) 30%,
      rgb(var(--color-black-rgb) / 0) 70%,
      rgb(var(--color-black-rgb) / 0.22) 100%);
  pointer-events: none;
}

.business-media__tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 2rem 1.4rem 2.4rem;
  color: var(--color-white);
}

.business-media__row {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
}

.business-media__row--bottom {
  align-items: flex-end;
  margin-top: auto;
}

.business-media__corner {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.business-media__corner--top-right,
.business-media__corner--bottom-right {
  flex-shrink: 0;
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}

.business-media__number {
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.60);
}

.business-media__label {
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.60);
}

.business-media__corner--bottom-left {
  gap: 1.4rem;
}

.mission__nav.business-media__nav {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .mission__nav.business-media__nav {
    display: flex;
  }

  .business-media__nav--prev {
    left: calc(var(--bm-edge) + 1.2rem);
  }

  .business-media__nav--next {
    right: calc(var(--bm-edge) + 1.2rem);
  }

  .business-media__rail:hover .business-media__nav,
  .business-media__nav:focus-visible {
    opacity: 1;
  }

  .business-media__rail .business-media__nav.swiper-button-disabled,
  .business-media__nav.swiper-button-lock {
    opacity: 0;
    pointer-events: none;
  }
}

@media (min-width: 1024px) {
  .business-media {
    --bm-edge: var(--bm-gap);
  }

  .business-media__frame {
    aspect-ratio: auto;
    height: 100svh;
    max-height: none;
    margin-inline: var(--bm-gap);
  }

  .business-media__bg {
    height: 100vh;
  }

  .business-media__title {
    padding-inline: 8.6rem;
  }

  .business-media__rail {
    padding-inline: var(--bm-gap);
  }

  .business-media__tile {
    width: calc((100% - var(--bm-gap) * 4) * 229 / 1383);
  }

  .business-media__tile--wide {
    width: calc((100% - var(--bm-gap) * 4) * 467 / 1383);
  }

  .business-media__tile-overlay {
    padding: 0.5rem 1.4rem 1.3rem 1.4rem;
  }

  .business-media__corner--top-left .business-media__label,
  .business-media__corner--top-right .business-media__label {
    padding-top: 1.2rem;
  }
}

/* =========================================
   MISSION (statement + tile row)
========================================= */

.business-media:has(+ .mission) {
  padding-bottom: 0;
}

.mission {
  --mission-gap: 0.9rem;
  --mission-edge: 1.5rem;

  position: relative;
  overflow: clip;
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-block: 7rem 2.4rem;
}

.mission::before {
  content: "";
  position: absolute;
  top: -4rem;
  right: 0;
  width: 38rem;
  aspect-ratio: 326 / 591;
  background: url("../images/soft-yellow-glow.png") no-repeat center / contain;
  pointer-events: none;
}

.mission>* {
  position: relative;
}

.mission__head {
  padding-inline: var(--mission-edge);
}

.mission__title {
  margin-bottom: 2.4rem;
  color: var(--color-teal);
  text-transform: uppercase;
}

.mission__text {
  color: var(--color-black);
}

/* --- Tiles --- */

.mission__rail {
  position: relative;
  margin-top: 2.4rem;
}

.mission__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mission__tile {
  position: relative;
  width: 90vw;
  aspect-ratio: 356 / 415;
  overflow: hidden;
  background-color: var(--color-light-grey);
}

.mission__tile-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mission__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgb(50 109 154 / 0) 66.83%,
      rgb(40 98 137 / 0.8) 100%);
  pointer-events: none;
}

.mission__tile-body {
  --mission-caption-lines: 2;

  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 1.8rem 2.4rem;
  color: var(--color-white);
}

.mission__caption {
  display: flex;
  min-height: calc(var(--mission-caption-lines) * var(--line-height-body) * 1em);
}

.mission__label,
.mission__caption {
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.60);
}

.mission__label {
  text-transform: uppercase;
}

.mission__nav {
  --nav-inset: 1.6rem;
  --glass-fill: rgb(var(--color-white-rgb) / 0.2);
  --glass-rim: linear-gradient(to bottom right,
      rgb(var(--color-white-rgb) / 0.85) 0%,
      rgb(var(--color-white-rgb) / 0) 40%,
      rgb(var(--color-white-rgb) / 0) 60%,
      rgb(var(--color-white-rgb) / 0.85) 100%);
  --glass-highlight: rgb(var(--color-white-rgb) / 0.25);

  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0.4rem;
  border: none;
  border-radius: 3.4rem;

  color: var(--color-cyan);
  background-color: var(--glass-fill);
  backdrop-filter: blur(0.15rem) saturate(1.5);
  -webkit-backdrop-filter: blur(0.15rem) saturate(1.5);
  box-shadow: inset 0 0.1rem 0.2rem 0 var(--glass-highlight);
  cursor: pointer;

  transition:
    background-color var(--duration-hover) var(--easing-out),
    opacity var(--duration-hover) var(--easing-out);
}

.mission__nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--border-width);
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.mission__nav i,
.mission__nav img {
  font-size: 1.6rem;
  line-height: 1;
}

.mission__nav--prev {
  left: calc(var(--mission-edge) + var(--nav-inset));
}

.mission__nav--next {
  right: calc(var(--mission-edge) + var(--nav-inset));
}

.mission__nav:hover {
  --glass-fill: rgb(var(--color-white-rgb) / 0.45);
}

.mission__nav:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.3rem;
}

.mission__nav.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.mission__nav.swiper-button-lock {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .mission__nav {
    --nav-inset: 1.2rem;

    opacity: 0;
  }

  .mission__rail:hover .mission__nav,
  .career-grow__rail:hover .mission__nav,
  .about-business__rail:hover .mission__nav,
  .home-milestones__stage:hover .mission__nav,
  .aura-strip__viewport:hover .mission__nav,
  .mission__nav:focus-visible {
    opacity: 1;
  }

  .mission__rail:hover .mission__nav.swiper-button-disabled,
  .career-grow__rail:hover .mission__nav.swiper-button-disabled,
  .about-business__rail:hover .mission__nav.swiper-button-disabled,
  .home-milestones__stage:hover .mission__nav.swiper-button-disabled,
  .aura-strip__viewport:hover .mission__nav:disabled,
  .mission__nav.swiper-button-disabled:focus-visible {
    opacity: 0;
  }
}

@media (min-width: 1024px) {
  .mission {
    --mission-edge: 1.2rem;

    padding-block: 14.2rem 2.4rem;
  }

  .mission::before {
    top: -6rem;
    right: -14rem;
    width: 62rem;
  }

  .mission__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40.5rem;
    column-gap: 6.4rem;
    padding-inline: 4.3rem 0.8rem;
  }

  .mission__title {
    margin-bottom: 0;
  }

  .mission__caption {
    width: 70%;
  }

  .mission__rail {
    margin-top: 3.3rem;
    padding-inline: var(--mission-edge);
  }

  .mission__tile {
    width: calc((100% - var(--mission-gap) * 2) / 3);
  }
}

/* =========================================
   COMMUNITY NEWS (sticky heading + card grid)
========================================= */

.community {
  position: relative;
  padding-block: 14.2rem 4.5rem;
}

.community::before {
  content: "";
  position: absolute;
  top: -15rem;
  left: -16rem;
  width: 40rem;
  aspect-ratio: 501 / 680;
  background: url("../images/soft-cyan-glow-02.png") no-repeat center / contain;
  pointer-events: none;
}

.community>* {
  position: relative;
}

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

.community__head,
.community__more {
  padding-inline: var(--container-gutter);
}

@media (min-width: 1280px) {

  .community__head,
  .community__more {
    padding-inline: var(--container-gutter-md);
  }
}

.community__head {
  position: sticky;
  top: calc(50dvh - var(--community-head-h, 0px) / 2);
  z-index: 0;

  text-align: center;
  will-change: opacity;
}

.community__title {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--container-gutter);
  color: var(--color-teal);
  text-wrap: balance;
}

.community__title-bold {
  color: var(--color-teal);
}

.community__title .line-reveal {
  display: inline-block;
  vertical-align: top;
}

.community__text {
  margin-top: 3.6rem;
  color: var(--color-black);
}

.community__grid {
  position: relative;
  z-index: 1;
  margin-top: 15rem;
}

.community--society {
  padding-top: 16rem;
  padding-bottom: 8rem;
}

.community--glow-right::before {
  left: auto;
  right: -16rem;
  transform: scaleX(-1);
}

.community--society .community__grid {
  margin-top: 21rem;
}

.community--society .community__title-bold {
  color: var(--color-cyan);
}

.community__more {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 3.6rem;
}

.community__more-btn {
  min-width: min(100%, 20rem);
}

@media (min-width: 1024px) {
  .community {
    padding-block: 23.3rem 7.2rem;
  }

  .community::before {
    top: -50rem;
    left: 0;
    width: 72rem;
  }

  .community--glow-right::before {
    left: auto;
    right: -22rem;
  }

  .community__title {
    padding-inline: 6.3rem;
  }

  .community__text {
    margin-top: 3.6rem;
  }

  .community__grid {
    margin-top: 25.2rem;
  }

  .community--society {
    /* padding-top: 20.7rem; */
    padding-top: 15.3rem;
    padding-bottom: 10.7rem;
  }

  .community--society .community__grid {
    margin-top: 25.2rem;
  }

  .community__more {
    margin-top: 8.2rem;
  }

  .community__grid--center {
    align-items: center;
  }
}

/* =========================================
   ABOUT SUSTAIN : SOCIETY SLIDESHOW (full bleed, parallax wipe)
========================================= */

.society-show {
  position: relative;
}

.society-show__slides {
  display: grid;
  overflow: hidden;
}

.society-show__slide {
  position: relative;
  grid-area: 1 / 1;
  overflow: hidden;
  visibility: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--color-light-grey);
}

.society-show__slide.is-active {
  z-index: 1;
  visibility: visible;
}

.society-show__slide.is-new {
  z-index: 2;
  visibility: visible;
}

.society-show__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.society-show__pagination {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 3;
  display: flex;
  gap: 0.6rem;
}

.society-show__dot {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: var(--border-width) solid var(--color-white);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  transition: background-color var(--duration) var(--easing);
}

.society-show__dot::before {
  content: "";
  position: absolute;
  inset: -0.8rem -0.3rem;
}

.society-show__dot.is-active {
  background-color: var(--color-white);
}

.society-show__dot:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.2rem;
}

@media (min-width: 1024px) {
  .society-show__slide {
    aspect-ratio: 1440 / 750;
  }

  .society-show__pagination {
    right: 2.1rem;
  }
}

/* =========================================
   ABOUT : VISION & MISSION (heading + two picture rows)
========================================= */

.about-vision {
  --about-vision-edge: var(--container-gutter);
  --about-vision-row-gap: 7.5rem;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--about-vision-row-gap);
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 7.5rem var(--about-vision-edge) 8.5rem;
}

.about-vision::before,
.about-vision::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.about-vision::after {
  bottom: -25rem;
  left: -20rem;
  width: 70rem;
  aspect-ratio: 1329 / 736;
  background: url("../images/soft-cyan-glow-03.png") no-repeat center / contain;
}

.about-vision>* {
  position: relative;
  z-index: 1;
}

.about-vision__head {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.about-vision__overline {
  margin-bottom: 2.4rem;
  color: var(--color-cyan);
}

.about-vision__title {
  color: var(--color-teal);
}

.about-vision__title strong,
.about-vision__subtitle {
  font-weight: 700;
}

.about-vision__lead {
  color: var(--color-black);
  max-width: 290px;
}

.about-vision__subtitle {
  color: var(--color-teal);
}

.about-vision__row {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}

.about-vision__row:not(.about-vision__row--reverse)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20%;
  right: calc((100% - 100vw) / 2);
  width: 30rem;
  aspect-ratio: 644 / 1331;
  background: url("../images/soft-yellow-glow-02.png") no-repeat center / contain;
  transform: translateY(-50%);
  pointer-events: none;
}

.about-vision__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 468 / 706;
  object-fit: cover;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .about-vision__media {
    align-self: center;
    width: 60%;
    max-width: 46.8rem;
  }
}

.about-vision__mission {
  color: var(--color-teal);
}

.about-vision__mission strong {
  font-weight: 700;
  color: var(--color-cyan);
}

.about-vision__body--split {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.about-vision__text {
  color: var(--color-teal);
}

@media (min-width: 1024px) {
  .about-vision {
    --about-vision-edge: var(--container-gutter-md);
    --about-vision-row-gap: 15rem;

    padding-block: 14.4rem 15.5rem;
  }

  .about-vision::before {
    top: 0;
    width: 40rem;
  }

  .about-vision::after {
    bottom: -40rem;
    left: calc(50% - 50vw);
    width: calc(110rem + max(0rem, 50vw - 96rem));
  }

  .about-vision__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12.7rem;
  }

  .about-vision__overline {
    margin-bottom: 1.2rem;
  }

  .about-vision__lead {
    flex: 0 0 auto;
    width: 29rem;
    margin-top: 2.4rem;
  }

  .about-vision__row {
    flex-direction: row;
    align-items: center;
    gap: 12.7rem;
  }

  .about-vision__row:not(.about-vision__row--reverse)::before {
    top: -40rem;
    width: 40rem;
    transform: none;
  }

  .about-vision__row--reverse {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin-top: -6rem;
  }

  .about-vision__media {
    flex: 0 0 39.5%;
  }

  .about-vision__body {
    flex: 1 1 auto;
    max-width: 59rem;
    padding-top: 3rem;
  }

  .about-vision__body--split {
    max-width: 58.6rem;
    padding-top: 0;
    gap: 13rem;
  }

  .about-vision__text {
    max-width: 35rem;
  }
}

/* =========================================
   ABOUT : OUR BUSINESSES (slideshow + tile row)
========================================= */

.about-business {
  --about-business-edge: var(--container-gutter);
  --about-business-gap: 1.6rem;

  position: relative;
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-block: 5rem 3.5rem;
}

.about-business__head {
  padding-inline: var(--about-business-edge);
}

.about-business__overline {
  margin-bottom: 2.4rem;
  color: var(--color-cyan);
}

.about-business__title {
  color: var(--color-teal);
}

.about-business__body {
  display: flex;
  flex-direction: column;
  gap: var(--about-business-gap);
  margin-top: 4.8rem;
}

/* --- Slideshow --- */

.about-business__show {
  position: relative;
  margin-inline: var(--about-business-edge);
}

.about-business__slides {
  display: grid;
  overflow: hidden;
}

.about-business__slide {
  position: relative;
  grid-area: 1 / 1;
  overflow: hidden;
  visibility: hidden;
  aspect-ratio: 358 / 700;
  background-color: var(--color-light-grey);
}

.about-business__slide.is-active {
  z-index: 1;
  visibility: visible;
}

.about-business__slide.is-new {
  z-index: 2;
  visibility: visible;
}

.about-business__slide-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-business__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgb(var(--color-black-rgb) / 0) 50%,
      rgb(var(--color-black-rgb) / 0.5) 100%);
  pointer-events: none;
}

.about-business__content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: 0 2.1rem 3.6rem;
  color: var(--color-white);
}

.about-business__intro {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.about-business__logo {
  margin: 0;
  padding-bottom: 1.3rem;
  border-bottom: var(--border-width) solid rgb(var(--color-white-rgb) / 0.6);
}

.about-business__logo img {
  display: block;
  width: 8.5rem;
  height: auto;
  filter: brightness(0) invert(1);
}

.about-business__desc {
  display: none;
}

.about-business__highlights {
  margin: 0;
  padding: 0;
  list-style: none;
  text-transform: uppercase;
}

.about-business__btn {
  align-self: flex-start;
}

.about-business__pagination {
  display: none;
}

.about-business__dot {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: var(--border-width) solid var(--color-white);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--duration) var(--easing);
}

.about-business__dot.is-active {
  background-color: var(--color-white);
}

.about-business__dot:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.2rem;
}

/* --- Tiles --- */

.about-business__rail {
  position: relative;
}

.about-business__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-business__nav--prev {
  left: var(--nav-inset);
}

.about-business__nav--next {
  right: var(--nav-inset);
}

.about-business__tile {
  position: relative;
  width: 70vw;
  max-width: 34.8rem;
  aspect-ratio: 348 / 543;
  overflow: hidden;
  background-color: var(--color-light-grey);
}

.about-business__tile-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-business__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgb(50 109 154 / 0) 66.83%,
      rgb(40 98 137 / 0.8) 100%);
  pointer-events: none;
}

.about-business__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  margin: 0;
  padding: 0 1.7rem 2.9rem;
  color: var(--color-white);
  text-shadow: 0 0 8px rgb(var(--color-black-rgb) / 0.6);
}

@media (min-width: 1024px) {
  .about-business {
    --about-business-edge: 0.8rem;
    --about-business-gap: 0.9rem;

    padding-block: 7.2rem var(--section-gap-md);
  }

  .about-business__head {
    display: flex;
    align-items: flex-start;
    gap: 5rem;
    padding-inline: 3.8rem;
  }

  .about-business__overline {
    margin: 0;
    padding-top: 1.2rem;
  }

  .about-business__body {
    margin-top: 5.4rem;
  }

  .about-business__slide {
    aspect-ratio: 1424 / 707;
  }

  .about-business__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2.4rem;
    padding: 0 2.1rem 4.7rem;
  }

  .about-business__intro {
    display: contents;
  }

  .about-business__logo {
    grid-column: 1 / -1;
  }

  .about-business__logo img {
    width: 13.3rem;
  }

  .about-business__desc {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    max-width: 67.2rem;
  }

  .about-business__highlights {
    display: none;
  }

  .about-business__btn {
    min-width: 19.6rem;
    margin-bottom: 0.8rem;
  }

  .about-business__pagination.about-business__pagination {
    position: absolute;
    top: auto;
    left: auto;
    right: 2.1rem;
    bottom: 1.6rem;
    width: auto;
    z-index: 2;
    display: flex;
    gap: 0.6rem;
  }

  .about-business__rail {
    padding-inline: var(--about-business-edge);
  }

  .about-business__nav--prev {
    left: calc(var(--about-business-edge) + var(--nav-inset));
  }

  .about-business__nav--next {
    right: calc(var(--about-business-edge) + var(--nav-inset));
  }

  .about-business__tile {
    width: calc((100% - var(--about-business-gap) * 3) / 4);
    max-width: none;
  }

  .about-business__caption {
    padding: 0 1.8rem 2.4rem;
  }
}

/* Tablet (iPad): keep the tile rail on the same 4rem gutter as the rest.
   Below 1024 the rail stays full-bleed and Swiper's slide offsets carry the
   gutter, so scrolled tiles still run off the edge of the screen. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .about-business {
    --about-business-edge: var(--container-gutter);
  }
}

/* =========================================
   HOME : HERO (full-viewport photo or video, logo + tagline)
========================================= */

.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 48rem;
  overflow: hidden;
  background-color: var(--color-white);
  color: var(--color-white);
}

.home-hero.is-intro .home-hero__media,
.home-hero.is-intro .home-hero__content {
  opacity: 0;
}

.home-hero.is-ready .home-hero__media {
  animation: home-hero-fade 2.4s var(--easing) forwards;
}

.home-hero.is-ready .home-hero__content {
  animation: home-hero-fade 1s var(--easing) 0.8s forwards;
}

@keyframes home-hero-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.home-hero picture {
  display: contents;
}

.home-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.home-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
  padding-inline: var(--container-gutter);
  margin-top: 6.5rem;
}

.home-hero__logo {
  margin: 0;
  line-height: 0;
}

.home-hero__logo img {
  width: 16.8rem;
  height: auto;
}

.home-hero__tagline {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
  .home-hero__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline: 8.54vw 7vw;
    margin-top: 0;
  }

  .home-hero__logo img {
    width: clamp(16.8rem, 16.94vw, 24.4rem);
  }

  .home-hero__tagline {
    font-size: var(--font-size-overline);
  }
}

/* =========================================
   HOME : STATEMENT (stepped headline + intro copy)
========================================= */

.home-statement {
  position: relative;
  overflow-x: clip;
  clip-path: inset(0 0 -200rem 0);
  padding: 18.1rem var(--container-gutter) 4.9rem;
  isolation: isolate;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-statement::before,
.home-statement::after,
.home-statement__glow {
  content: "";
  position: absolute;
  z-index: -1;
  background: no-repeat center / contain;
  pointer-events: none;
}

.home-statement::before {
  top: -20rem;
  left: 0;
  width: 45.8rem;
  aspect-ratio: 458 / 550;
  background-image: url("../images/soft-cyan-glow-01.png");
}

.home-statement::after {
  bottom: -30rem;
  right: 0;
  width: 25.7rem;
  aspect-ratio: 257 / 458;
  background-image: url("../images/soft-yellow-glow-01.png");
}

@media (min-width: 1024px) {
  .home-statement::after {
    bottom: -20rem;
  }
}

.home-statement__glow {
  z-index: -2;
  top: 20rem;
  right: 0;
  width: 43.6rem;
  aspect-ratio: 436 / 663;
  background-image: url("../images/soft-cyan-glow-04.png");
}

.home-statement__inner {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.home-statement__title {
  margin: 0;
  color: var(--color-teal);
  text-transform: uppercase;
  max-width: 130rem;
}

.home-statement__line {
  display: block;
}

.home-statement__accent {
  color: var(--color-cyan);
}

.home-statement__accent--yellow {
  color: var(--color-yellow);
}

.home-statement__desc {
  margin-top: 3.6rem;
  color: var(--color-black);
}

@media (min-width: 1024px) {
  .home-statement {
    padding: 16.1rem 6.4rem 15.1rem;
  }

  .home-statement__line--2 {
    padding-left: 3.33em;
  }

  .home-statement__line--3 {
    padding-left: 7.36em;
  }

  .home-statement__desc {
    max-width: 29rem;
    margin: 4.8rem 0 0 auto;
  }
}

@media (min-width: 1440px) {
  .home-statement__inner {
    width: 100%;
    max-width: var(--container-max-width);
  }
}

@media (min-width: 2048px) {
  .home-statement__inner {
    padding-inline: var(--container-gutter-md);
  }
}

/* =========================================
   HOME : AT A GLANCE (photo grid with stats)
========================================= */

.home-glance {
  --home-glance-gap: 0.8rem;
  padding-bottom: 5rem;
}

.home-glance__grid {
  display: flex;
  gap: var(--home-glance-gap);
  margin: 0;
  padding: 0 var(--container-gutter);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.home-glance__grid::-webkit-scrollbar {
  display: none;
}

.home-glance__tile {
  position: relative;
  flex: 0 0 22.9rem;
  aspect-ratio: 229 / 307;
  overflow: hidden;
  scroll-snap-align: start;
}

.home-glance__tile--wide {
  flex-basis: 46.7rem;
  aspect-ratio: 467 / 307;
}

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

.home-glance__stat {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0;
  padding: 0.5rem 1.65rem 0 1.4rem;
  color: var(--color-white);
  pointer-events: none;
}

.home-glance__number {
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.60);
}

.home-glance__label {
  max-width: 8.5rem;
  margin-top: 0.9rem;
  text-align: right;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.60);
}

@media (min-width: 1280px) {
  .home-glance {
    --home-glance-gap: 0.9rem;
  }

  .home-glance__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--home-glance-gap);
    overflow: visible;
    container-type: inline-size;
  }

  .home-glance__tile {
    grid-column: var(--col);
    grid-row: var(--row);
  }

  .home-glance__tile--wide {
    grid-column: var(--col) / span 2;
    aspect-ratio: auto;
  }

  .home-glance__number {
    font-size: 3.8cqi;
  }
}

/* =========================================
   HOME : BRANDS (mission hero, brand cards, tiles)
========================================= */

.home-brands {
  --about-business-edge: var(--container-gutter);
  --about-business-gap: 1.6rem;
  --home-brands-gap: 1.8rem;

  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-top: 8rem;
}

@media (min-width: 1024px) {
  .home-brands {
    gap: 1.1rem;
    --home-brands-gap: 0.8rem;
  }
}

/* --- Hero --- */

.home-brands__hero {
  position: relative;
  margin-inline: var(--about-business-edge);
  display: flex;
  align-items: center;
  aspect-ratio: 4 / 5;
  clip-path: inset(0);
  background-color: var(--color-light-grey);
}

.home-brands__hero-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200%;
  pointer-events: none;
}

.home-brands__hero-bg {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 50%;
}

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

.home-brands__hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(123deg,
      rgb(var(--color-yellow-rgb) / 0) 68.85%,
      rgb(var(--color-yellow-rgb) / 0.8) 100%),
    rgb(var(--color-black-rgb) / 0.1);
  pointer-events: none;
}

@media (max-width: 1023px) {
  .home-brands__hero {
    margin-inline: 0;
    aspect-ratio: 390 / 632;
    height: auto;
  }

  .home-brands__hero-bg {
    position: fixed;
    inset: 0;
    height: 100lvh;
  }
}

.home-brands__mission {
  position: relative;
  z-index: 1;
  margin: 0 2.1rem;
  color: var(--color-white);
  text-transform: uppercase;
  text-shadow: 0 0 10px rgb(var(--color-black-rgb) / 0.8);
}

.home-brands__mission strong {
  display: block;
}

/* --- Brand cards --- */

.home-brands__cards {
  display: grid;
  gap: var(--home-brands-gap);
  margin: 0;
  padding: 8rem var(--about-business-edge) 0;
  list-style: none;
}

.home-brands__card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-pink);
}

.home-brands__link {
  display: block;
  height: 100%;
  color: var(--color-white);
  text-decoration: none;
}

.home-brands__card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration) var(--easing);
}

.home-brands__link:hover .home-brands__card-media {
  transform: scale(1.03);
}

.home-brands__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgb(var(--color-black-rgb) / 0) 50%,
      rgb(var(--color-black-rgb) / 0.6) 100%);
  pointer-events: none;
}

.home-brands__card-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 0 2.1rem 3.6rem;
}

.home-brands__logo {
  margin: 0;
  padding-bottom: 1.4rem;
  border-bottom: var(--border-width) solid rgb(var(--color-white-rgb) / 0.6);
}

@media (min-width: 1024px) {
  .home-brands__logo {
    padding-bottom: 1.4rem;
  }
}

.home-brands__logo img {
  display: block;
  width: 9.6rem;
  height: auto;
  filter: brightness(0) invert(1);
}

.home-brands__logo--color img {
  filter: none;
}

.home-brands__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: 1.2rem;
}

@media (min-width: 1024px) {
  .home-brands__meta {
    margin-top: 1.9rem;
  }
}

.home-brands__highlights {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-transform: uppercase;
}

.home-brands__highlights li {
  display: inline;
}

@media (min-width: 1024px) {
  .home-brands__highlights {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .home-brands__highlights li {
    display: list-item;
  }
}

.home-brands__count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  margin: 0;
}

.home-brands__number {
  line-height: 1;
  margin-bottom: 0.6rem;
}

@media (min-width: 1024px) {
  .home-brands {
    --about-business-edge: 0.8rem;
    --about-business-gap: 0.9rem;
    --home-brands-gap: 0.9rem;

    padding-top: 12rem;
  }

  .home-brands__hero {
    aspect-ratio: 1424 / 736;
  }

  .home-brands__hero-bg {
    height: 100vh;
  }

  .home-brands__hero-media {
    object-position: center;
  }

  .home-brands__mission {
    margin: 0 0 0 8%;
    max-width: 62%;
  }

  .home-brands__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0;
  }

  .home-brands__card-body {
    padding-bottom: 4.2rem;
  }

  .home-brands__logo img {
    width: 13.3rem;
  }
}

/* =========================================
   HOME : MILESTONES (year deck)
========================================= */

.home-milestones {
  --milestone-deck-park: 2.7rem;
  --milestone-deck-inset: 3.35rem;

  position: relative;
  padding-block: 13rem 0;
}

.home-milestones::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: no-repeat center / contain;
  pointer-events: none;
}

.home-milestones::before {
  top: -16rem;
  right: 0;
  width: 24rem;
  aspect-ratio: 544 / 1131;
  background-image: url("../images/soft-yellow-glow-02.png");
}

@media (min-width: 1024px) {
  .home-milestones::before {
    top: -30rem;
    width: 36.5rem;
  }
}

.home-milestones__inner {
  display: flex;
  flex-direction: column;
  gap: 3.6rem;
}

.home-milestones__body {
  order: 2;
}

.home-milestones__overline {
  margin: 0 0 2.4rem;
  color: var(--color-cyan);
}

.home-milestones__copies {
  display: grid;
}

.home-milestones__copy {
  grid-area: 1 / 1;
}

.home-milestones__copy[aria-hidden="true"] {
  pointer-events: none;
}

.home-milestones:not(.is-ready) .home-milestones__copy+.home-milestones__copy,
.home-milestones:not(.is-ready) .home-milestones__card+.home-milestones__card {
  visibility: hidden;
}

.home-milestones__year {
  margin: 0;
  color: var(--color-teal);
}

.home-milestones__title {
  margin: 0;
  color: var(--color-black);
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .home-milestones__title {
    width: 95%;
    max-width: 65rem;
  }
}

.home-milestones__text {
  max-width: 35rem;
  margin: 2.4rem 0 0;
  color: var(--color-black);
  text-wrap: pretty;
}

.home-milestones__stage {
  order: 1;
  position: relative;
  /* Grows with the viewport (292 / 390 of the screen) and keeps the card ratio.
     The front card stays centred; parked cards peek out to the right. */
  width: min(calc(292 / 390 * 100vw), 40rem);
  margin-inline: auto;
  aspect-ratio: 468 / 706;
  touch-action: pan-y;
  user-select: none;
}

.home-milestones__stage[data-aos][data-aos][data-aos] {
  transition-property: opacity;
}

.home-milestones__card {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-light-grey);
  transform-origin: center;
  will-change: transform, opacity;
}

.home-milestones__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.home-milestones__nav {
  z-index: 100;
  display: none;
  color: var(--color-white);
}

.home-milestones__nav--prev {
  left: var(--nav-inset);
}

.home-milestones__nav--next {
  right: var(--nav-inset);
}

@media (min-width: 1024px) {
  .home-milestones {
    --milestone-deck-park: 3.3rem;
    --milestone-deck-inset: 2.4rem;

    padding-block: 12rem 4rem;
  }

  .home-milestones__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(calc(468 / 1440 * 100vw), 62.4rem);
    align-items: start;
    column-gap: min(calc(100 / 1440 * 100vw), 13.3rem);
  }

  .home-milestones__body {
    order: 0;
    padding-top: 1.6rem;
  }

  .home-milestones__overline {
    margin-bottom: 7.2rem;
  }

  .home-milestones__text {
    margin-top: 7.2rem;
  }

  .home-milestones__stage {
    order: 0;
    width: 100%;
    margin: 0;
  }

  .home-milestones__nav {
    display: flex;
  }
}

/* =========================================
   HOME : INVESTOR RELATIONS (video banner + photos)
========================================= */

.home-investor {
  padding: 2.4rem var(--container-gutter);
}

@media (min-width: 1024px) {
  .home-investor {
    padding-inline: 0.8rem;
  }
}

.home-investor__banner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 354 / 374;
  padding: 9.45rem 1.6rem 11.65rem;
  background-color: var(--color-teal);
  color: var(--color-white);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-investor__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.home-investor__copy {
  position: relative;
}

.home-investor__title {
  color: var(--color-white);
}

.home-investor__text {
  max-width: 60rem;
  margin: 1.6rem auto 0;
  color: var(--color-white);
  text-wrap: balance;
}

.home-investor__media {
  margin-top: 1.3rem;
}

.home-investor__item {
  display: none;
}

.home-investor__item--main {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 358 / 268;
}

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

.home-investor__item--main::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(var(--color-black-rgb) / 0.2);
  pointer-events: none;
}

.home-investor__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

@media (min-width: 1024px) {
  .home-investor {
    padding-top: 1rem;
  }

  .home-investor__banner {
    min-height: 0;
    aspect-ratio: 1245 / 354;
    padding: 10.5rem 4rem 12.7rem;
  }

  .home-investor__text {
    max-width: 72rem;
  }

  .home-investor__media {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin-top: 1rem;
  }

  .home-investor__item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 469 / 353;
  }
}

/* -- Inside the clinic (Aura Bangkok photo strip) -- */

.aura-strip__viewport {
  position: relative;
  height: 100vh;
  height: 100lvh;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

.aura-strip.is-scrubbed .aura-strip__viewport {
  overflow: hidden;
}

.aura-strip__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  height: 100%;
  will-change: transform;
}

.aura-strip__frame {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
}

.aura-strip__img {
  display: block;
  width: auto;
  height: 100%;
}

.aura-strip__spot {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  transform: translateY(-50%);
}

.aura-strip__spot.is-open {
  z-index: 3;
}

.aura-strip__pin {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 99rem;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  white-space: nowrap;
  color: var(--color-teal);
  background-color: var(--color-white);
  box-shadow: 0 0.4rem 1.6rem 0 rgb(var(--color-black-rgb) / 0.12);
  cursor: pointer;
  transition:
    background-color var(--duration-hover) var(--easing-out),
    color var(--duration-hover) var(--easing-out);
}

.aura-strip__pin--static {
  cursor: default;
}

.aura-strip__pin:not(.aura-strip__pin--static):hover {
  color: var(--color-dark-teal);
  background-color: var(--color-light-blue-02);
}

.aura-strip__pin:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.2rem;
}

.aura-strip__card {
  --shift: 0px;

  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0;
  width: min(34rem, 100vw - 3.2rem);
  padding: 1.6rem 2rem;
  border-radius: 1.2rem;
  color: var(--color-dark-teal);
  background-color: var(--color-light-blue-02);
  box-shadow: 0 0.8rem 3.2rem 0 rgb(var(--color-black-rgb) / 0.16);
  translate: var(--shift) 0;
  animation: aura-strip-card-in var(--duration) var(--easing-out);
}

.aura-strip__card[hidden] {
  display: none;
}

.aura-strip__spot.is-flip-x .aura-strip__card {
  left: auto;
  right: 0;
}

.aura-strip__spot.is-flip-y .aura-strip__card {
  top: auto;
  bottom: calc(100% + 0.8rem);
}

@keyframes aura-strip-card-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aura-strip__card {
    animation: none;
  }
}

.aura-strip__nav {
  --nav-inset: 1.6rem;

  z-index: 4;
  color: var(--color-white);
  transition:
    color var(--duration-hover) var(--easing-out),
    background-color var(--duration-hover) var(--easing-out),
    opacity var(--duration-hover) var(--easing-out);
}

@media (min-width: 1024px) {
  .aura-strip__nav {
    --nav-inset: 4.2rem;
  }
}

.aura-strip__nav--prev {
  left: var(--nav-inset);
}

.aura-strip__nav--next {
  right: var(--nav-inset);
}

.aura-strip__nav:hover {
  color: var(--color-cyan);
}

.aura-strip__nav:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* =========================================
   BUSINESS : BANNER (full-bleed photo or clip under the page title)
========================================= */

.business-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-white);
}

.business-banner picture {
  display: contents;
}

.business-banner__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 768px) {
  .business-banner {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1024px) {
  .business-banner {
    aspect-ratio: 1440 / 450;
  }
}

/* =========================================
   BUSINESS : HEAD (right under the banner)
========================================= */

.business-head {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  padding-block: 7.2rem;
}

.business-head__breadcrumb {
  padding-inline: var(--container-gutter);
}

.business-head__breadcrumb .breadcrumb__item:last-child::after {
  content: none;
}

.business-head__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
}

.business-head__title {
  margin: 0;
  line-height: 0;
}

.business-head__logo {
  display: block;
  width: var(--logo-w);
  height: auto;
}

.business-head__btn {
  flex-shrink: 0;
  padding-inline: 2.4rem;
}

@media (min-width: 768px) {
  .business-head__btn {
    min-width: 20rem;
  }
}

@media (min-width: 1280px) {
  .business-head {
    gap: 4.4rem;
    padding-block: 4.8rem 4rem;
  }

  .business-head__breadcrumb {
    padding-inline: 3.8rem;
  }

  .business-head__logo {
    width: var(--logo-w-pc);
  }
}

/* =========================================
   BUSINESS : CONTACT (above the footer of each business page)
========================================= */

.business-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  padding: 1.6rem;
  padding-top: 0;
}

.business-contact__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  background-color: var(--color-dark-teal);
  color: var(--color-white);
}

.business-contact__card--main {
  aspect-ratio: 357 / 405;
}

.business-contact__card picture {
  display: contents;
}

.business-contact__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.business-contact__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(102 102 102 / 0) 0%, rgb(var(--color-black-rgb) / 0.6) 100%);
  pointer-events: none;
}

.business-contact__card--main::after {
  background: rgb(var(--color-black-rgb) / 0.3);
}

.business-contact__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  padding: 2.4rem 1.6rem;
  text-align: center;
}

.business-contact__card--explore .business-contact__body {
  justify-content: flex-end;
  gap: 2rem;
  padding-bottom: 3.2rem;
}

.business-contact__title {
  margin: 0;
  color: var(--color-white);
}

.business-contact__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-contact__social-link.btn--primary-light {
  --glass-fill: rgb(var(--color-white-rgb) / 0.15);
  --border-width: 0.15rem;

  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  color: var(--color-white);
  text-decoration: none;
}

.business-contact__social-link:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.3rem;
}

.business-contact__social-link i,
.business-contact__social-link img {
  font-size: 2.4rem;
}

.business-contact__btn {
  min-width: 20rem;
}

.business-contact__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: var(--color-white);
}

.business-contact__logo img {
  display: block;
  width: 11.1rem;
  height: auto;
  filter: brightness(0) invert(1);
}

.business-contact__logo--color img {
  filter: none;
}

.business-contact__logo--aurasol img {
  width: 15.3rem;
}

.business-contact__wordmark {
  letter-spacing: 0.2em;
  line-height: 1;
}

.business-contact__wordmark-sub {
  margin-top: 0.4rem;
}

@media (min-width: 768px) {
  .business-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 0.8rem;
  }

  .business-contact__card {
    aspect-ratio: 1 / 1;
  }

  .business-contact__card--main {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }

  .business-contact__social {
    gap: 2.4rem;
  }
}

@media (min-width: 1024px) {
  .business-contact {
    padding: 0.8rem;
  }

  .business-contact__card {
    aspect-ratio: 708 / 450;
  }

  .business-contact__card--main {
    aspect-ratio: 1425 / 458;
  }

  .business-contact__body {
    gap: 3.2rem;
  }

  .business-contact__card--explore .business-contact__body {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 3.2rem;
    text-align: left;
  }

  .business-contact__card--explore .business-contact__logo {
    align-items: flex-start;
  }
}

/* =========================================
   BUSINESS : LOCATIONS (above the contact block)
========================================= */

.business-locations {
  --loc-hover: 0.3s ease-in-out;

  padding-block: 7.2rem;
}

.business-locations__inner {
  display: flex;
  flex-direction: column;
  gap: 3.6rem;
}

.business-locations__media {
  margin: 0;
  aspect-ratio: 358 / 540;
  overflow: hidden;
}

.business-locations__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-locations__body {
  display: flex;
  flex-direction: column;
  gap: 3.6rem;
  min-width: 0;
}

.business-locations__title {
  margin: 0;
  color: var(--loc-title);
}

.business-locations__title span {
  display: block;
}

.business-locations__title span+span {
  color: var(--loc-title-2);
}

.business-locations__title--flow span {
  display: inline;
}

.business-locations__list {
  display: flex;
  gap: 1.6rem;
  margin: 0 calc(-1 * var(--container-gutter));
  padding: 0 var(--container-gutter);
  scroll-padding-inline: var(--container-gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.business-locations__list::-webkit-scrollbar {
  display: none;
}

.business-locations__item {
  flex: 0 0 28.5rem;
  display: flex;
  scroll-snap-align: start;
}

.business-locations__card {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
  min-height: 14.3rem;
  padding: 1.6rem;
  padding-bottom: 1rem;
  border-radius: 0.8rem;
  color: var(--color-black);
  background-color: rgb(var(--color-light-grey-rgb) / 0.5);
  text-decoration: none;
  transition:
    background-color var(--loc-hover),
    color var(--loc-hover);
}

.business-locations__card:hover {
  color: var(--color-white);
  background-color: var(--loc-accent);
}

.business-locations__card:focus-visible {
  outline: 0.2rem solid var(--loc-accent);
  outline-offset: 0.2rem;
}

.business-locations__card-name {
  text-transform: uppercase;
}

.business-locations__card-link {
  margin-top: auto;
  color: var(--color-teal);
  transition: color var(--loc-hover);
}

.business-locations__card:hover .business-locations__card-link {
  color: var(--color-white);
}

.business-locations__address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.6rem;
  color: var(--color-black);
}

.business-locations__address p {
  margin: 0;
}

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

.business-locations__address .business-locations__direction {
  margin-bottom: -0.8rem;
  color: var(--color-teal);
}

.business-locations__address a:hover {
  color: var(--color-teal);
}

.business-locations__map {
  display: block;
  width: 100%;
  aspect-ratio: 589 / 235;
  border: 0;
}

@media (min-width: 1024px) {
  .business-locations {
    padding-block: 12rem;
  }

  .business-locations__inner {
    display: grid;
    grid-template-columns: minmax(0, 468fr) minmax(0, 589fr);
    align-items: start;
    column-gap: max(4rem, 9vw);
    max-width: max(118.6rem, 82.4vw);
    margin-inline: auto;
  }

  .business-locations__media {
    position: sticky;
    top: calc(var(--header-height, 5.6rem) + 4rem);
    aspect-ratio: 468 / 706;
  }

  .business-locations__body {
    gap: 2.9rem;
    padding-top: 3rem;
  }

  .business-locations__title--flow span {
    display: block;
  }

  .business-locations__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .business-locations__card {
    min-height: 14.4rem;
  }

  .business-locations__body:has(.business-locations__address) {
    gap: 4rem;
  }

  .business-locations__address {
    gap: 4rem;
  }

  .business-locations__address .business-locations__direction {
    margin-bottom: 0;
  }
}

/* =========================================
   BUSINESS : FEATURE (text beside one tall photo)
========================================= */

.business-feature {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-bottom: 12.2rem;
}

.business-feature--glow {
  padding-top: 7.2rem;
  padding-bottom: 0;
}

.aura-strip+.business-feature {
  padding-block: 7.2rem 0;
}

.business-feature__inner {
  display: flex;
  flex-direction: column;
  gap: 3.6rem;
}

.business-feature__media {
  margin: 0;
  aspect-ratio: 468 / 706;
  overflow: hidden;
}

.business-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-feature__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3.6rem;
  min-width: 0;
}

.business-feature__title {
  margin: 0;
  color: var(--feature-title);
}

.business-feature__title--caps {
  text-transform: uppercase;
}

.business-feature__line {
  display: block;
}

.business-feature__text {
  margin: 0;
  color: var(--color-black);
}

.business-feature--glow .business-feature__body {
  gap: 3.2rem;
}

.business-feature::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: 22.7rem;
  aspect-ratio: 544 / 1131;
  transform: translateY(50%);
  background: url("../images/soft-yellow-glow-02.png") no-repeat right bottom / contain;
  pointer-events: none;
}

.business-feature--glow::before,
.business-feature--glow .business-feature__body::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -14.4rem;
  right: auto;
  bottom: auto;
  left: calc(50% - 50vw);
  width: 66.4rem;
  aspect-ratio: 1329 / 736;
  background: url("../images/soft-pink-glow-01.png") no-repeat left top / contain;
  transform: none;
  pointer-events: none;
}

.business-feature--glow::before {
  content: none;
}

.business-feature__list {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-feature__item {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.business-feature__item-title,
.business-feature__item-text {
  margin: 0;
  color: var(--color-black);
}

@media (min-width: 1024px) {
  .business-feature {
    padding-bottom: 13.9rem;
  }

  .business-feature--glow {
    padding-block: 14.8rem 10rem;
  }

  .business-feature--glow::before {
    content: "";
    top: -20rem;
    left: 0;
  }

  .business-feature--glow .business-feature__body::before {
    content: none;
  }

  .business-feature--glow::before {
    width: 132.9rem;
  }

  .aura-strip+.business-feature {
    padding-top: 12rem;
  }

  .business-feature__inner {
    display: grid;
    grid-template-columns: minmax(0, 580fr) minmax(0, 468fr);
    align-items: center;
    column-gap: max(4rem, 9.7vw);
    max-width: max(118.8rem, 82.48vw);
    margin-inline: auto;
  }

  .business-feature__media {
    grid-column: 2;
    grid-row: 1;
  }

  .business-feature__body {
    grid-column: 1;
    grid-row: 1;
    gap: 19.4rem;
  }

  .business-feature__text {
    max-width: 35rem;
  }
}

/* =========================================
   BUSINESS : WHY (title beside its list, no photo)
========================================= */

.business-why {
  position: relative;
  isolation: isolate;
  padding-top: 8.4rem;
}

.business-why::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20rem;
  right: 0;
  width: 30rem;
  aspect-ratio: 544 / 1131;
  background: url("../images/soft-yellow-glow-02.png") no-repeat right top / contain;
  pointer-events: none;
}

.business-why__inner {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.business-why__title {
  margin: 0;
  color: var(--why-title);
  text-transform: uppercase;
}

.business-why__list {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-why__item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.business-why__item-title,
.business-why__item-text {
  margin: 0;
  color: var(--color-black);
}

@media (min-width: 1024px) {
  .business-why {
    padding-top: 17.3rem;
  }

  .business-why::before {
    top: -40rem;
    width: 60rem;
  }

  .business-why__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0;
    padding-inline: 4.5rem;
  }

  .business-why__item-text {
    max-width: 53rem;
  }
}

/* =========================================
   BUSINESS : TREATMENTS (tabs over a three-up photo row)
========================================= */

.business-treatments {
  --tr-size: min(34.4rem, calc(100vw - 4.6rem));
  --tr-offset: calc(var(--tr-size) * 0.68);
  --tr-scale: 0.925;
  --tr-nav: calc(var(--tr-size) / 2 - 3.6rem);

  position: relative;
  isolation: isolate;
  padding-top: 7.2rem;
  overflow-x: clip;
}

.business-treatments::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -24rem;
  right: 0;
  width: 30rem;
  aspect-ratio: 544 / 1131;
  background: url("../images/soft-yellow-glow-02.png") no-repeat right top / contain;
  pointer-events: none;
}

.business-treatments__title {
  margin: 0 auto;
  max-width: 80rem;
  color: var(--color-teal);
  text-align: center;
  text-wrap: balance;
}

.business-treatments__tabs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4.8rem;
  margin-top: 3.85rem;
  padding: 0 var(--container-gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.business-treatments__tabs::-webkit-scrollbar {
  display: none;
}

.business-treatments__tab {
  flex: none;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-cyan);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--duration) var(--easing-out),
    font-size var(--duration) var(--easing-out),
    line-height var(--duration) var(--easing-out);
}

.business-treatments__tab.is-current {
  color: var(--color-teal);
}

.business-treatments__tab:focus-visible {
  outline: 0.2rem solid var(--color-cyan);
  outline-offset: 0.3rem;
}

.business-treatments__stage {
  position: relative;
  height: var(--tr-size);
  margin-top: 3.35rem;
  touch-action: pan-y;
  user-select: none;
}

.business-treatments__slide {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: var(--tr-size);
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--color-light-grey);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(var(--tr-scale));
  transition:
    transform 0.6s var(--easing-out),
    opacity 0.6s var(--easing-out);
}

.business-treatments__slide[data-pos="0"] {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.business-treatments__slide[data-pos="-1"],
.business-treatments__slide[data-pos="1"] {
  z-index: 1;
  opacity: 0.5;
  pointer-events: auto;
  cursor: pointer;
}

.business-treatments__slide[data-pos="-1"] {
  transform: translateX(calc(-50% - var(--tr-offset))) scale(var(--tr-scale));
}

.business-treatments__slide[data-pos="1"] {
  transform: translateX(calc(-50% + var(--tr-offset))) scale(var(--tr-scale));
}

.business-treatments__slide[data-pos="-2"],
.business-treatments__slide[data-pos="2"] {
  transition:
    transform 0.6s var(--easing-out),
    opacity 0.3s var(--easing-out);
}

.business-treatments__slide[data-pos="-2"] {
  transform: translateX(calc(-50% - var(--tr-offset))) scale(calc(var(--tr-scale) * 0.8));
}

.business-treatments__slide[data-pos="2"] {
  transform: translateX(calc(-50% + var(--tr-offset))) scale(calc(var(--tr-scale) * 0.8));
}

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

.mission__nav.business-treatments__nav {
  z-index: 3;
  opacity: 1;
}

.mission__nav.business-treatments__nav,
.mission__nav.business-gallery__nav,
.mission__nav.business-media__nav {
  color: var(--color-white);
  transition:
    background-color var(--duration-hover) var(--easing-out),
    color var(--duration-hover) var(--easing-out),
    opacity var(--duration-hover) var(--easing-out);
}

.mission__nav.business-treatments__nav:hover,
.mission__nav.business-gallery__nav:hover,
.mission__nav.business-media__nav:hover {
  color: var(--color-cyan);
}

.business-treatments__nav--prev {
  left: calc(50% - var(--tr-nav) - 2.4rem);
}

.business-treatments__nav--next {
  right: calc(50% - var(--tr-nav) - 2.4rem);
}

@media (min-width: 1024px) {

  .business-treatments {
    --tr-size: 54rem;
    --tr-scale: calc(450 / 540);
    --tr-nav: 31.1rem;

    padding-block: 9.8rem 6.4rem;
  }

  .business-treatments::before {
    width: 50rem;
    top: -40rem;
  }

  .business-treatments__tabs {
    justify-content: safe center;
    gap: 7.2rem;
    margin-top: 4rem;
  }

  .business-treatments__stage {
    margin-top: 6.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .business-treatments__tab,
  .business-treatments__slide,
  .business-treatments__slide[data-pos] {
    transition: none;
  }
}

/* =========================================
   BUSINESS : GALLERY (three captioned photos)
========================================= */

.business-gallery {
  padding-top: 7.2rem;
}

.business-gallery__head {
  display: flex;
  flex-direction: column;
  gap: 3.6rem;
  margin-bottom: 3.6rem;
}

.business-gallery__title {
  margin: 0;
  color: var(--color-teal);
  text-wrap: balance;
  max-width: 60rem;
}

.business-gallery__intro {
  margin: 0;
  color: var(--color-black);
}

.business-gallery__rail {
  position: relative;
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.business-gallery__swiper {
  padding-inline: var(--container-gutter);
}

.business-gallery__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-gallery__nav--prev {
  left: 2.1rem;
}

.business-gallery__nav--next {
  right: 2.4rem;
}

.business-gallery__card {
  position: relative;
  width: min(calc(100vw - 3.4rem), 35.6rem);
  aspect-ratio: 356 / 415;
  overflow: hidden;
  background-color: var(--color-light-grey);
}

.business-gallery__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-gallery__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgb(50 109 154 / 0) 66.83%,
      rgb(40 98 137 / 0.8) 100%);
  pointer-events: none;
}

.business-gallery__caption {
  position: absolute;
  z-index: 1;
  inset: auto 1.6rem 2.4rem;
  margin: 0;
  color: var(--color-white);
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgb(var(--color-black-rgb) / 0.6);
}

.business-gallery__caption-title,
.business-gallery__caption-text {
  margin: 0;
}

.business-gallery__caption-text {
  margin-top: 0.4rem;
  letter-spacing: 0;
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .business-gallery__rail:hover .mission__nav {
    opacity: 1;
  }

  .business-gallery__rail:hover .mission__nav.swiper-button-disabled {
    opacity: 0;
  }
}

@media (min-width: 1024px) {

  .business-gallery {
    padding-block: 9.9rem 4.7rem;
  }

  .business-gallery__swiper {
    padding-inline: 0;
    margin-inline: 1.2rem;
  }

  .business-gallery__head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0;
    padding-inline: 4.5rem;
    margin-bottom: 6.9rem;
  }

  .business-gallery__intro {
    justify-self: end;
    max-width: 32rem;
  }

  .business-gallery__card {
    width: auto;
    aspect-ratio: 466 / 543;
  }

  .business-gallery__caption {
    inset: auto 2rem 3.8rem;
  }
}

/* =========================================
   TABLET (iPad portrait, 768 - 1023)
========================================= */
@media (min-width: 768px) and (max-width: 1023px) {

  /* -- News grid (newsroom, home and about-sustain community) -- */
  .news-grid {
    --news-gap-x: 1.6rem;
    --news-gap-y: 1.6rem;

    flex-direction: row;
    align-items: flex-start;
    gap: var(--news-gap-x);
  }

  .news-grid__column {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--news-gap-y);
    min-width: 0;
  }

  .news-grid__item {
    order: 0;
  }

  .news-head>.news-grid {
    align-self: stretch;
  }

  .news-related__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  /* -- Home : brand cards side by side -- */
  .home-brands__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-brands__card-body {
    padding-inline: 1.8rem;
  }

  /* -- Home : investor banner cut down, all three photos in a row -- */
  .home-investor__banner {
    aspect-ratio: 16 / 9;
    padding: 6rem 4rem;
  }

  .home-investor__media {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .home-investor__item,
  .home-investor__item--main {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 469 / 353;
  }

  /* -- About : business slideshow no taller than it is wide -- */
  .about-business__slide {
    aspect-ratio: 1 / 1;
  }

  /* -- Awards : three across -- */
  .awards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .awards__image {
    width: 15vw;
    max-height: min(18vw, 100%);
  }

  /* -- Job search : two columns of cards -- */
  .job-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }

  /* -- Contact : details beside the map, form in two columns -- */
  .contact__info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 2.4rem;
  }

  .contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.8rem;
  }

  .contact-form__field--full {
    grid-column: 1 / -1;
  }

  /* -- Career : benefits beside their photo, shorter join banner -- */
  .career-benefits {
    flex-direction: row-reverse;
    align-items: center;
    gap: 4rem;
    padding-block: 9.6rem;
  }

  .career-benefits__media {
    flex: 0 0 38%;
    width: 38%;
    min-width: 0;
  }

  .career-benefits__body {
    flex: 1 1 0;
    min-width: 0;
  }

  .career-join {
    aspect-ratio: 16 / 9;
  }

  /* -- Business : banner art shown whole, why list two by two -- */
  .business-banner {
    aspect-ratio: 1440 / 450;
  }

  .business-why__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.2rem 2.4rem;
  }

  .business-feature__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: center;
    column-gap: 4rem;
  }

  .business-feature__media {
    grid-column: 2;
    grid-row: 1;
  }

  .business-feature__body {
    grid-column: 1;
    grid-row: 1;
  }
}