@import './variables.css';
@import './font.css';
@import './typography.css';

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  color: var(--color-neutral-black);
  background: var(--color-neutral-light-bg-grey);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Reset --- */
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

img,
video {
  display: block;
}

button,
input,
textarea {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* --- Typography Utilities  --- */
.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-light {
  font-weight: 300;
}

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

/* =========================================
   NAVBAR
========================================= */
header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.header__navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-height);
  padding: 16px 20px;
  background: var(--color-neutral-white);
  border-bottom: 1px solid #f4f4f4;
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease;
}

/* Transparent, white-text navbar over a hero (index page): starts see-through
   and switches to the normal solid/navy look once the hero scrolls past. */
header.header--transparent .header__navbar {
  background: transparent;
  border-bottom-color: transparent;
}

header.header--transparent.is-scrolled .header__navbar,
header.header--transparent.header--menu-open .header__navbar {
  background: var(--color-neutral-white);
  border-bottom-color: #f4f4f4;
}

/* Opening the mobile menu should snap the navbar to its solid look right
   away, instead of fading over the same 0.4s used for the scroll transition. */
header.header--transparent.header--menu-open .header__navbar {
  transition-duration: 0.1s;
}

header.header--transparent .header__link,
header.header--transparent .header__lang,
header.header--transparent .header__lang-btn {
  color: var(--color-neutral-white);
  transition: color 0.4s ease;
}

header.header--transparent.is-scrolled .header__link,
header.header--transparent.is-scrolled .header__lang,
header.header--transparent.is-scrolled .header__lang-btn,
header.header--transparent.header--menu-open .header__link,
header.header--transparent.header--menu-open .header__lang,
header.header--transparent.header--menu-open .header__lang-btn {
  color: var(--color-primary-navy);
}

header.header--transparent .header__toggle span {
  background: var(--color-neutral-white);
  transition: background-color 0.4s ease;
}

header.header--transparent.is-scrolled .header__toggle span,
header.header--transparent.header--menu-open .header__toggle span {
  background: var(--color-primary-navy);
}

/* The mobile dropdown menu panel always has a solid white background (see
   .header__menu-wrapper), so its links must stay navy even while the header
   itself is still in its transparent, white-text state over the hero video. */
@media (max-width: 1023px) {

  header.header--transparent .header__link,
  header.header--transparent .header__lang,
  header.header--transparent .header__lang-btn {
    color: var(--color-primary-navy);
  }
}

@media (min-width: 1024px) {
  :root {
    --header-height: 70px;
  }

  .header__navbar {
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    padding: 16px 48px;
    border-bottom: none;
  }
}

@media (min-width: 1450px) {
  :root {
    --header-height: 80px;
  }

  .header__navbar {
    padding: 21px 164px;
  }
}

.header__logo img {
  width: 127px;
}

@media (min-width: 1024px) {
  .header__logo img {
    width: 165px;
  }
}

.header__logo-img--white {
  display: none;
}

/* On the transparent hero header, the logo is omitted entirely at first so the
   nav items shift all the way to the left; it fades in once scrolled past the
   hero and the navbar switches to its solid/navy look. */
header.header--transparent .header__logo {
  display: none;
}

header.header--transparent.is-scrolled .header__logo {
  display: block;
}

/* On mobile the logo must stay in the flex layout (just invisible) so the
   hamburger keeps its normal right-corner position instead of collapsing to
   the left when the logo is display:none. */
@media (max-width: 1023px) {
  header.header--transparent .header__logo {
    display: block;
    visibility: hidden;
  }

  header.header--transparent.is-scrolled .header__logo,
  header.header--transparent.header--menu-open .header__logo {
    visibility: visible;
  }
}

.header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
  padding: 5.5px 3.5px;
  background: none;
  border: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  .header__toggle {
    gap: 7px;
    width: 30px;
    height: 30px;
  }
}

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

.header__toggle span {
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-primary-navy);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

@media (min-width: 768px) {
  .header__toggle span {
    height: 2px;
  }
}

.header__toggle.is-active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
  /* gap5 + height1.5 */
}

.header__toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.header__toggle.is-active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (min-width: 768px) {
  .header__toggle.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    /* gap7 + height2 */
  }

  .header__toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .header__toggle.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}

.header__menu-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: 32px;
}

@media (min-width: 1024px) {
  .header__menu-wrapper {
    display: contents;
  }
}

@media (max-width: 1023px) {
  .header__menu-wrapper {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    background: var(--color-neutral-white);
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition:
      max-height 0.4s ease,
      padding 0.4s ease;
  }

  .header__menu-wrapper.is-open {
    max-height: 80vh;
    padding: 48px 24px;
  }

  /* Dim the page behind the open mobile menu. */
  header.header--menu-open::after {
    content: "";
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
    pointer-events: none;
  }
}

.header__menu {
  display: flex;
  align-items: center;
  gap: 32px;
  color: var(--color-primary-navy);
}

@media (min-width: 1024px) {
  .header__menu {
    display: contents;
  }
}

@media (max-width: 1023px) {
  .header__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
  }
}

.header__link {
  text-transform: uppercase;
  position: relative;
  display: inline-block;
}

.header__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.header__link:hover::after {
  transform: scaleX(1);
}

@media (min-width: 1024px) {
  .header__item {
    flex-shrink: 0;
  }

  .header__link {
    white-space: nowrap;
  }
}

.header__lang {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-navy);
  padding-top: 24px;
  border-top: 1px solid var(--color-neutral-mid-grey);
  width: 100%;
}

@media (min-width: 1024px) {
  .header__lang {
    width: auto;
    flex-shrink: 0;
    padding-top: 0;
    border-top: none;
    transform: translateY(2px);
  }
}

.header__lang button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

.header__lang-btn.is-active {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.2px;
}

/* =========================================
   HERO (full-screen video, index page)
========================================= */
.hero-full {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Pull up under the sticky (but transparent) header so the video fills the
     whole screen instead of starting below the navbar. */
  margin-top: calc(-1 * var(--header-height));
  overflow: hidden;
  background: var(--color-primary-navy);
}

.hero-full__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-full__video.is-visible {
  opacity: 1;
}

.hero-full__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 25px;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .hero-full__content {
    gap: 48px;
  }
}

.hero-full__title {
  margin: 0;
  line-height: 1;
}

.hero-full__logo {
  width: 115px;
  height: auto;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}

.hero-full__logo.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .hero-full__logo {
    width: 136px;
  }
}

.hero-full__divider {
  display: block;
  width: 1px;
  height: 100px;
  background: var(--color-neutral-white);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 1s ease;
}

.hero-full__divider.is-visible {
  transform: scaleY(1);
}

.hero-full__tagline {
  margin: 0;
  padding-top: 16px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero-full__tagline {
    padding-top: 20px;
  }
}

.hero-full__tagline-text {
  font-size: var(--font-size-body);
  display: inline-block;
  color: var(--color-neutral-white);
  font-family: var(--font-primary);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-120px);
  transition:
    transform 0.5s ease-out,
    opacity 0.5s ease-out;
}

.hero-full__tagline-text.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* =========================================
   FOOTER
========================================= */
.footer {
  background: var(--color-primary-navy);
  color: var(--color-neutral-white);
  padding: 100px 20px 70px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

@media (min-width: 768px) {
  .footer {
    padding: 100px 48px 27px;
    gap: 112px;
  }
}

@media (min-width: 1450px) {
  .footer {
    padding: 128px 164px 40px;
    gap: 145px;
  }
}

/* --- Footer Top --- */
.footer__top {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

@media (min-width: 768px) {
  .footer__top {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }
}

.footer__logo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  height: min-content;
}

@media (min-width: 1024px) {
  .footer__logo {
    flex: 1;
  }
}

.footer__logo img {
  width: 120px;
  border-right: 1px solid var(--color-neutral-white);
  padding-right: 12px;
}

.footer__logo-text {
  font-size: 16px;
  transform: translateY(-1px);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 1024px) {
  .footer__contact {
    flex-direction: row;
    gap: 162px;
    flex: 2;
  }
}

.footer__link {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

.footer__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1024px) {
  .footer__info {
    gap: 25px;
  }
}

.footer__label {
  color: var(--color-primary-gold);
  font-weight: 500;
  text-transform: uppercase;
  padding-bottom: 16px;
}

.footer__info-phone,
.footer__info-email {
  position: relative;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* --- Footer Bottom --- */
.footer__bottom .text-overline {
  font-size: 14px;
}

@media (min-width: 1024px) {
  .footer__bottom .text-overline {
    font-size: 16px;
  }
}

/* --- Footer Meta --- */

.footer__meta {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 768px) {
  .footer__meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }
}

.footer__nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 25px;
  width: max-content;
}

@media (min-width: 1024px) {
  .footer__nav {
    gap: 32px;
  }
}

.footer__nav>li {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.footer__nav-item {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-weight: 500;
  transition: color 0.3s ease;
  cursor: pointer;
}

.footer__info-body a {
  display: inline-block;
  vertical-align: top;
  position: relative;
  transition: color 0.3s ease;
}
.footer__info-body p{
    font-size: clamp(1rem, 1.1111vw, 1.3rem);
}


.footer__info-body a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: var(--color-primary-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.footer__info-body a:hover {
  color: var(--color-primary-gold);
}

.footer__info-body a:hover::after {
  transform: scaleX(1);
}

.footer__info-body>*:not(:first-child) {
  margin-top: 5px;
}

.footer__icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

@media (min-width: 1024px) {
  .footer__icons {
    gap: 26px;
  }
}

.footer__icon,
.contact-info__social-link {
  font-size: 16px;
  color: var(--color-neutral-white);
  transition: all 0.3s ease;
}

@media (min-width: 1024px) {

  .footer__icon,
  .contact-info__social-link {
    font-size: 18px;
  }
}

.footer__icon:hover,
.contact-info__social-link:hover {
  color: var(--color-primary-gold);
}

/* --- Footer Copyright --- */

.footer__copyright {
  padding-top: 25px;
  color: var(--color-neutral-mid-grey);
}

.footer__copyright-text {
  line-height: 1.4;
}

/* =========================================
   BANNER
========================================= */

.banner {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .banner {
    display: grid;
    grid-template-columns: 601fr 839fr;
  }
}

.banner__text {
  text-transform: uppercase;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  aspect-ratio: 390 / 158;
  min-height: 0;
  background: var(--color-primary-navy);
  color: var(--color-neutral-white);
}

@media (min-width: 768px) {
  .banner__text {
    aspect-ratio: unset;
    flex: 1;
  }
}

@media (min-width: 1024px) {
  .banner__text {
    padding: 48px;
  }
}

@media (min-width: 1450px) {
  .banner__text {
    padding-left: 164px;
  }
}

.banner__image {
  aspect-ratio: 390 / 158;
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .banner__image {
    aspect-ratio: 839 / 338;
    flex: 2;
  }
}

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

/* =========================================
   CONTENT IMAGE COMPONENT
========================================= */
.content-image__wrapper {
  padding: 40px 0 100px;
}

@media (min-width: 1024px) {
  .content-image__wrapper {
    padding: 0;
    max-width: var(--container-max);
  }
}

.content-image {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .content-image {
    flex-direction: row;
    justify-content: space-between;
    padding: 50px 0;
  }

  .content-image--reverse {
    flex-direction: row-reverse;
  }
}

/* --- Content --- */

.content-image__content {
  display: flex;
  flex-direction: column;
  gap: 35px;
  padding: 58px 24px 53px;
}

@media (min-width: 768px) {
  .content-image__content {
    padding-right: 48px;
    padding-left: 48px;
  }
}

.content-image__content--no-label {
  padding-bottom: 20px;
}

@media (min-width: 1024px) {
  .content-image__content {
    width: 37.5%;
    padding: 0 44px 0 50px;
    position: sticky;
    top: calc(var(--header-height) + 50px);
    align-self: flex-start;
  }

  .content-image--reverse .content-image__content {
    padding: 0 50px 0 44px;
  }
}

@media (min-width: 1450px) {
  .content-image__content {
    width: 37.5%;
    padding: 0 100px 0 164px;
  }
}

.content-image__content strong {
  font-weight: 700;
}

.content-image__label {
  color: var(--color-primary-gold);
  text-transform: uppercase;
}

/* Larger overline labels on specific pages only - other pages/blocks
   reusing these shared classes keep the default size. */
.page-home .content-image__label,
.page-home .mission__overline,
.page-home .ecosystem-excellence__label,
.page-who-we-are .content-image__label,
.page-who-we-are .mission__overline,
.page-who-we-are .heritage__label,
.page-who-we-are .core-organization__label,
.page-who-we-are .ecosystem-excellence__label,
.page-our-business .content-accordion__label,
.page-our-business .portfolio__label,
.page-sustainability .content-text__label
{
  font-size: 1.25rem;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .page-home .content-image__label,
  .page-home .mission__overline,
  .page-home .ecosystem-excellence__label,
  .page-who-we-are .content-image__label,
  .page-who-we-are .mission__overline,
  .page-who-we-are .heritage__label,
  .page-who-we-are .core-organization__label,
  .page-who-we-are .ecosystem-excellence__label,
  .page-our-business .content-accordion__label,
  .page-our-business .portfolio__label,
  .page-sustainability .content-text__label {
    font-size: 1.4rem;
  }
}

.content-image__heading {
  text-transform: uppercase;
  max-width: 260px;
}

@media (min-width: 768px) {
  .content-image__heading {
    max-width: 360px;
  }
}

.content-image__subheading {
  white-space: pre-line;
}

.content-image__body {
  white-space: pre-line;
}

.content-image__body p {
  margin-bottom: 16px;
}

.content-image__body p:last-child {
  margin-bottom: 0;
}

/* --- Button --- */
.btn-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16.5px;
  border: 1.3px solid #f0f0f0;
  border-radius: 5px;
  width: fit-content;
  padding: 8px 8px 8px 16px;
  cursor: pointer;
  overflow: hidden;
}

.btn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f0f0f0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s ease;
  z-index: 0;
}

.btn-cta:hover::before {
  transform: scaleX(1);
}

.btn-cta>p,
.btn-cta>.btn-arrow-right {
  position: relative;
  z-index: 1;
}

.btn-cta:hover>.btn-arrow-right {
  background: var(--color-primary-gold);
  transition-delay: 0.25s;
}

.btn-cta .text-overline {
  font-size: 1rem !important;
}

@media (min-width: 768px) {
  .btn-cta {
    display: flex;
    padding: 8.5px 10.5px 8.5px 16.5px;
  }
}

.btn-cta--reverse {
  padding: 8px 16px 8px 8px;
}

@media (min-width: 768px) {
  .btn-cta--reverse {
    padding: 8.5px 16.5px 8.5px 10.5px;
  }
}

.btn-arrow-right {
  background: var(--color-primary-navy);
  width: 24px;
  height: 24px;
  border-radius: 3px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.icon-arrow-right,.icon-arrow-left {
  font-size: 14px;
  color: var(--color-neutral-white);
}

/* --- Image --- */

@media (min-width: 1024px) {
  .content-image__media {
    width: 62.5%;
    max-width: 1170px;
  }
}

.content-image__media img,
.content-image__media video {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1/1;
}

/* --- Image cycle (reuses .pagination's ring-progress dots as a corner badge
   that advances through multiple images; see initPagination in main.js) --- */
.content-image__media {
  position: relative;
}

.content-image__media--cycle {
  aspect-ratio: 1/1;
  /* Let the browser keep handling vertical scroll while horizontal swipes are
     delivered to JS for slide navigation (see [data-pagination-swipe]). */
  touch-action: pan-y;
}

.content-image__media .content-image__image[data-pagination-layer] {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.content-image__media .content-image__image[data-pagination-layer].is-active {
  opacity: 1;
}

.content-image__ring {
  position: absolute;
  right: 16px;
  bottom: 40px;
  z-index: 2;
  padding: 4px 10px;
  color: var(--color-neutral-white);
}

@media (min-width: 1024px) {
  .content-image__ring {
    right: 24px;
    bottom: 70px;
  }
}

.content-image__ring .pagination {
  overflow: visible;
}

.content-image__ring .pagination__dot {
  color: var(--color-neutral-white);
}

.content-image__ring .pagination__ring-track {
  stroke: rgba(255, 255, 255, 0.35);
}

.content-image__ring .pagination__ring-progress {
  stroke: var(--color-neutral-white);
}

/* =========================================
   COLUMN LAYOUT UTILITIES (reusable)
   Same row/split behaviour as .content-image.
   Usage:
     <div class="cols">            row, stacks on mobile
       <div class="col col-3-8">...</div>
       <div class="col col-5-8">...</div>
     </div>
   Add .cols--reverse to swap left/right on desktop.
========================================= */
.cols {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1023px) {

  .journey,
  .always-advance {
    padding-bottom: 50px;
  }

  .always-advance .cols__content {
    padding: 40px 24px 18px;
  }
}

.cols__content {
  display: flex;
  flex-direction: column;
  gap: 35px;
  padding: 58px 24px 53px;
}

@media (min-width: 768px) {
  .cols__content {
    padding-right: 48px;
    padding-left: 48px;
  }
}

@media (min-width: 1024px) {
  .cols {
    flex-direction: row;
    justify-content: space-between;
    padding: 50px 0;
  }

  .cols--reverse {
    flex-direction: row-reverse;
  }

  .cols__content {
    padding: 0 44px 0 50px;
  }

  .cols--reverse .cols__content {
    padding: 0 50px 0 44px;
  }

  /* Column widths (desktop only; full width when stacked) */
  .col-1-2 {
    width: 50%;
  }

  .col-1-3 {
    width: 33.333%;
  }

  .col-2-3 {
    width: 66.667%;
  }

  .col-3-8 {
    width: 37.5%;
  }

  .col-5-8 {
    width: 62.5%;
  }
}

@media (min-width: 1450px) {
  .cols__content {
    padding: 0 100px 0 164px;
  }

  .cols--reverse .cols__content {
    padding: 0 164px 0 100px;
  }
}

/* =========================================
   CONTENT ACCORDION COMPONENT
========================================= */
.content-accordion__header {
  display: flex;
  align-items: center;
  gap: 24px;
}

@media (min-width: 1024px) {
  .content-accordion__header {
    gap: 40px;
  }
}

.content-accordion__number-box {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  flex: none;
  background: var(--color-primary-navy-grey);
  color: var(--color-neutral-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-accordion__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content-accordion__label {
  color: var(--color-primary-gold);
  text-transform: uppercase;
}

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

/* Desktop only: keep the content column pinned while its (taller) image
   column scrolls past. Sticky is relative to the parent .cols, so each
   section behaves independently and releases at its own end.
   align-self keeps the column from stretching to full height, which is
   what lets it scroll within the section. On mobile it stacks, so no sticky. */
@media (min-width: 1024px) {
  .content-accordion .cols__content {
    position: sticky;
    top: calc(var(--header-height) + 50px);
    align-self: flex-start;
  }
}

/* =========================================
   CONTENT TEXT COMPONENT
========================================= */
.content-text {
  display: flex;
  flex-direction: column;
  gap: 35px;
  padding: 60px 20px;
}

@media (min-width: 768px) {
  .content-text {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .content-text {
    flex-direction: row;
    justify-content: space-between;
    gap: 44px;
    max-width: var(--container-max);
  }
}

@media (min-width: 1450px) {
  .content-text {
    gap: 100px;
    padding: 100px 164px;
  }
}

.content-text__column {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 1024px) {
  .content-text__column {
    width: 50%;
  }
}

.content-text__column strong {
  font-weight: 700;
}

.content-text__label {
  color: var(--color-primary-gold);
  text-transform: uppercase;
}

.content-text__heading {
  text-transform: uppercase;
  max-width: 470px;
  text-wrap: balance;
}

.content-text__subheading {
  white-space: pre-line;
  max-width: 500px;
  text-wrap: balance;
}

@media (min-width: 1450px) {
  .content-text__subheading {
    max-width: 650px;
  }
}

@media (min-width: 1024px) {
  .content-text__column--right {
    display: flex;
    align-items: flex-end;
  }
}

.content-text__body {
  white-space: pre-line;
  max-width: 500px;
}

@media (min-width: 1450px) {
  .content-text__body {
    max-width: 650px;
  }
}

/* =========================================
   TERMS AND CONDITIONS
========================================= */
.terms-content {
  padding: 60px 20px 273px;
}
.terms-content__text p{
    font-size:  clamp(1rem, 1.1111vw, 1.3rem) !important;
}
.terms-content__text h3{
    font-size:  clamp(1.125rem, 1.25vw, 1.4625rem) !important;
}
@media (min-width: 1024px) {
  .terms-content {
    padding: 126px 80px 282px;
  }
}

.terms-content__text {
  max-width: 665px;
  margin: 0 auto;
  font-weight: 500;
}

@media (min-width: 1450px) {
  .terms-content__text {
    max-width: 780px;
  }
}

.terms-content__text strong {
  font-weight: 700;
}

.terms-content__text table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.terms-content__text.terms-content__text table tr :is(th, td) {
  text-align: left;
  word-break: break-word;
  border: 1px solid var(--color-neutral-mid-grey);
  padding: 10px 14px;
}

.terms-content__text.terms-content__text table th {
  font-weight: 700;
  background-color: #EFEFEF;
}

/* =========================================
   SUSTAINABILITY
========================================= */

/* --- Journey (interactive pillar showcase) --- */
.journey {
  display: flex;
  flex-direction: column;
  max-width: 1930px;
}

@media (min-width: 1024px) {
  .journey {
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 50px 0;
  }
}

.journey__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* Let the browser keep handling vertical scroll while horizontal swipes are
     delivered to JS for slide navigation (mobile + tablet). */
  touch-action: pan-y;
}

@media (min-width: 1024px) {
  .journey__media {
    width: 62.5%;
    max-width: 1170px;
  }
}

.journey__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.journey__image.is-active {
  opacity: 1;
}

.journey__content {
  display: flex;
  flex-direction: column;
  gap: 35px;
  padding: 100px 20px 50px;
}

@media (min-width: 768px) {
  .journey__content {
    padding-right: 48px;
    padding-left: 48px;
  }
}

@media (min-width: 1024px) {
  .journey__content {
    width: 37.5%;
    padding: 0 44px 0 50px;
  }
}

.journey__list {
  list-style: none;
}

.journey__item {
  display: none;
  align-items: center;
  cursor: pointer;
  transition: color 0.3s ease;
}

.journey__item.is-active {
  display: flex;
}

@media (min-width: 1024px) {
  .journey__item {
    display: flex;
    padding: 40px 0 24px;
    border-bottom: 1px solid var(--color-neutral-mid-grey);
  }

  .journey__item:first-child {
    padding-top: 5px;
  }
}

/* Square indicator: desktop only */
.journey__item::before {
  content: '';
  display: none;
  flex: 0 0 auto;
  width: 0;
  height: 8px;
  background: var(--color-primary-navy);
  opacity: 0;
  transition:
    width 0.3s ease,
    margin-right 0.3s ease,
    opacity 0.3s ease;
}

@media (min-width: 1024px) {
  .journey__item::before {
    display: block;
  }
}

.journey__item.is-active::before {
  width: 8px;
  margin-right: 48px;
  opacity: 1;
}

/* --- Journey progress (mobile number navigation) --- */
.journey__progress {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* break out of .journey__content's 20px horizontal padding so the
     row can scroll edge-to-edge instead of being clipped by it */
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
  scroll-padding-left: 20px;
  scroll-padding-right: 20px;
}

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

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

.journey__dot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary-navy);
  cursor: pointer;
}

.journey__dot-num {
  font-size: 12px;
  line-height: 1;
}

.journey__ring {
  position: absolute;
  inset: 0;
  width: 29px;
  height: 29px;
  opacity: 0;
  transform: rotate(-90deg);
}

.journey__dot.is-active .journey__ring {
  opacity: 1;
}

.journey__ring-track {
  fill: none;
  stroke-width: 1;
}

.journey__ring-progress {
  fill: none;
  stroke: var(--color-primary-navy);
  stroke-width: 1;
  stroke-dasharray: 87.96;
  stroke-dashoffset: 87.96;
}

.journey__ring-progress.is-running {
  animation: journey-ring linear forwards;
}

@keyframes journey-ring {
  from {
    stroke-dashoffset: 87.96;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* =========================================
   PAGINATION COMPONENT
   Numbered dots with progress rings, matching
   the journey__progress design and behaviour.
========================================= */

.pagination {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

.pagination__dot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary-navy);
  cursor: pointer;
}

.pagination__num {
  font-size: 12px;
  line-height: 1;
}

.pagination__ring {
  position: absolute;
  inset: 0;
  width: 29px;
  height: 29px;
  opacity: 0;
  transform: rotate(-90deg);
}

.pagination__dot.is-active .pagination__ring {
  opacity: 1;
}

.pagination__ring-track {
  fill: none;
  stroke-width: 1;
}

.pagination__ring-progress {
  fill: none;
  stroke: var(--color-primary-navy);
  stroke-width: 1;
  stroke-dasharray: 87.96;
  stroke-dashoffset: 87.96;
}

.pagination__ring-progress.is-running {
  animation: pagination-ring linear forwards;
}

@keyframes pagination-ring {
  from {
    stroke-dashoffset: 87.96;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.heading-stack {
  --stack-index: 0;
  --stack-height: 74px;
  --stack-collapsed-height: 44px;
  position: sticky;
  /* Slots are spaced by the collapsed height so that already-stacked
     headings sit flush with no gap once they shrink. */
  top: calc(var(--header-height) + var(--stack-index) * var(--stack-collapsed-height));
  z-index: 5;
  box-sizing: border-box;
  height: var(--stack-height);
  display: flex;
  align-items: center;
  padding: 0 24px;
  color: var(--color-primary-navy);
  border-bottom: 1px solid var(--color-neutral-mid-grey);
  background: var(--color-neutral-light-bg-grey);
  transition: height 0.35s ease;
}

.heading-stack>* {
  transform: scale(1);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

/* Once the next heading stacks on top (section ended) the bar gets shorter
   (top/bottom only) and the text scales down — both smoothly. Horizontal
   padding never changes, so the left edge stays put. */
.heading-stack.is-collapsed {
  height: var(--stack-collapsed-height);
}

.heading-stack.is-collapsed>* {
  transform: scale(0.6);
}

@media (min-width: 768px) {
  .heading-stack {
    --stack-height: 79px;
    --stack-collapsed-height: 47px;
    padding: 0 48px;
  }
}

@media (min-width: 1024px) {
  .heading-stack {
    --stack-height: 71px;
    --stack-collapsed-height: 43px;
  }
}

@media (min-width: 1450px) {
  .heading-stack {
    --stack-height: 79px;
    --stack-collapsed-height: 47px;
    padding: 0 164px;
  }
}

.pillars__item {
  border-bottom: 1px solid var(--color-neutral-mid-grey);
}

/* ALWAYS ADVANCE stands alone (a plain `.cols`, not a `.content-accordion`
   split), so it drops the trailing connector after its last pillar. Every
   other section keeps the connector after the last item. */
.cols:not(.content-accordion) .pillars__item:last-child {
  border-bottom: 0;
}

.pillars__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0 0 24px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.pillars__item:not(:first-child) .pillars__header {
  padding-top: 35px;
}

.pillars__icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}

.pillars__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.pillars__item.is-open .pillars__panel {
  grid-template-rows: 1fr;
}

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

.pillars__panel-inner> :first-child {
  padding-bottom: 24px;
}

/* =========================================
   ALWAYS ADVANCE
========================================= */

.system-grid {
  display: flex;
  gap: 24px;
  margin: 0 auto;
  padding: 0 20px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
  .system-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: fit-content;
    max-width: none;
    padding-left: 0;
    padding-right: 50px;
    overflow-x: visible;
  }
}

.system-card {

  flex: 0 0 auto;
  background: var(--color-primary-navy);
  color: var(--color-neutral-white);
  padding: 24px;
  width: 268px;
  min-height: 268px;
  height: auto;
}

.system-card__top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--color-neutral-white);
}

.system-card__top img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.system-card__number {
  color: var(--color-primary-gold);
  font-weight: 700;
  font-size: 1.2rem;
}

.system-card__title {
  padding-top: 20px;
}

.system-card__description {
  padding-top: 12px;
  color: rgb(255 255 255 / 70%);
  font-size: var(--font-size-body);
}

@media (min-width: 1024px) {
  .always-advance.cols {
    padding-left: 48px;
    padding-right: 48px;
    justify-content: space-between;
  }

  .always-advance.cols>.col-3-8 {
    padding-left: 0;
    padding-right: 0;
    width: 33.1845238095%;
  }

  .always-advance.cols>.col-5-8 {
    margin-left: auto;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 63.3928571429%;
  }

  .always-advance.cols>.col-5-8 .system-card {

    width: 100%;
    max-width: 100%;
    aspect-ratio: unset;
    height: auto;
    min-height: 18.6111111111vw;
  }
}

@media (min-width: 1450px) {
  .always-advance.cols {
    padding-left: 164px;
    padding-right: 164px;
    justify-content: space-between;
  }

  .always-advance.cols>.col-5-8 .system-card {
    min-height: calc(18.6111111111vw - (164px/4));
  }
}

/* =========================================
   WELLBEING CARDS
========================================= */
.wellbeing {
  padding: 0 18px 60px;
}

.wellbeing__grid {
  display: flex;
  flex-direction: column;
}

.wellbeing-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 28px;
  gap: 40px;
  min-height: 365px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: color 0.4s ease;
}

.wellbeing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-neutral-white);
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.wellbeing-card>* {
  position: relative;
  z-index: 1;
}

.wellbeing-card:hover::before {
  opacity: 0;
}

.wellbeing-card:hover {
  color: var(--color-neutral-white);
}

@media (min-width: 768px) {
  .wellbeing-card {
    min-height: unset;
  }

  .wellbeing-card--featured {
    justify-content: unset;
  }
}

.wellbeing-card--featured {
  background: var(--color-neutral-white);
  color: var(--color-primary-navy);
}

.wellbeing-card--wide {
  color: var(--color-neutral-white);
}

.wellbeing-card--wide::before {
  background: var(--color-primary-navy);
}

.wellbeing-card--left {
  color: var(--color-neutral-black);
}

.wellbeing-card--left::before {
  background: var(--color-neutral-mid-grey);
}

.wellbeing-card--right {
  color: var(--color-neutral-white);
}

.wellbeing-card--right::before {
  background: var(--color-primary-gold);
}

.wellbeing-card__focus {
  max-width: 250px;
}

.wellbeing-card__focus strong {
  font-weight: 700;
}

@media (min-width: 768px) {
  .wellbeing {
    padding: 0 48px 80px;
  }

  .wellbeing-card {
    padding: 39px 43px;
  }
}

@media (min-width: 1024px) {
  .wellbeing {
    padding: 0 50px 80px;
  }

  .wellbeing__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: minmax(350px, auto);
    max-width: 1120px;
    margin-inline: auto;
  }

  .wellbeing-card--featured {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .wellbeing-card--wide {
    grid-column: 2 / span 2;
  }

  .wellbeing-card--left {
    grid-column: 2;
  }

  .wellbeing-card--right {
    grid-column: 3;
  }
}

@media (min-width: 1450px) {
  .wellbeing__grid {
    max-width: calc(1120px * 1.3);
  }
}

@media (min-width: 1450px) {
  .wellbeing {
    padding: 0 164px 100px;
  }
}

/* =========================================
   SKV BANGKOK SECTION COMPONENT
========================================= */

.skv-bangkok-container {
  padding: 100px 20px;
}

@media (min-width: 1024px) {
  .skv-bangkok-container {
    padding: 100px 60px;
  }
}

@media (min-width: 1450px) {
  .skv-bangkok-container {
    padding: 130px 246px;
  }
}

.skv-bangkok-container--full {
  padding: 0 !important;

}

.skv-bangkok-wrap {
  position: relative;
}

.skv-bangkok-media {
  position: relative;
  aspect-ratio: 390 / 520;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  /* Let the browser keep handling vertical scroll while horizontal swipes are
     delivered to JS for slide navigation (mobile + tablet). */
  touch-action: pan-y;
}

@media (min-width: 768px) {
  .skv-bangkok-media {
    aspect-ratio: 1440 / 708;
  }
}

.skv-bangkok {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.skv-bangkok.is-active {
  opacity: 1;
}

.cover-disclaimer {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
  text-align: right;
  color: var(--color-neutral-cool-grey);
  pointer-events: none;
}

.cover-disclaimer p {
  font-size: 8px;
  line-height: 1.5;
  margin: 0;
}

.cover-disclaimer.is-empty {
  display: none;
}

.marker-popup__media-disclaimer {
  display: none;
}

.marker-popup__media-disclaimer.is-active:not(.is-empty) {
  display: block;
}

.cover-disclaimer--card {
  top: 5px;
  right: 5px;

}
.cover-disclaimer--card p{
  font-size: 6px;
}
.cover-disclaimer--hero {
  top: 5px;
  right: 5px;
}

@media (min-width: 1024px) {
  .cover-disclaimer--hero {
    top: 5px;
    right: 5px;
  }
}

@media (min-width: 1450px) {
  .cover-disclaimer--hero {
    top: 5px;
    right: 5px;
  }
}

/* =========================================
   PROJECT CARD COMPONENT
========================================= */
.page-home .project-card {
    width: 353px;
background: rgb(255 255 255 / 74%);
}
.project-card {
  background: var(--color-neutral-white);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

@media (min-width: 1024px) {
  .project-card {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 553px;
    z-index: 1;
    /* background: rgb(255 255 255 / 74%); */
  }
}

.project-card__label {
  color: var(--color-primary-gold);
}

.project-card__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.project-card__button .btn-cta {
  margin-top: 0;
}

/* =========================================
   OUR BUSINESS OVERVIEW
========================================= */

.our-business-overview {
  position: relative;
  padding: 100px 20.5px;
  overflow: hidden;
  max-width: 1930px;
  margin: 0 auto;
}

.our-business-overview__media {
  position: absolute;
  inset: 100px 20.5px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.our-business-overview__video {
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 150%;
  object-fit: cover;
  will-change: transform;
}

@media (min-width: 1024px) {
  .our-business-overview {
    padding: 92px 77px;
  }

  .our-business-overview__media {
    inset: 92px 77px;
  }
}

.our-business-overview__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--color-neutral-white);
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 92px 18px;
}

@media (min-width: 1024px) {
  .our-business-overview__content {
    padding: 164px 198px;
  }
}

.our-business-overview__content .text-overline {
  text-transform: uppercase;
}

.our-business-overview__desc {
  max-width: 315px;
  margin: 0 auto;
}

.our-business-overview__desc p {
  margin-bottom: 16px;
}

.our-business-overview__desc p:last-child {
  margin-bottom: 0;
}

.our-business-overview__desc strong,
.our-business-overview__desc b {
  font-weight: 700;
}

@media (min-width: 768px) {
  .our-business-overview__desc {
    max-width: unset;
  }
}

/* =========================================
   MAP SECTION
========================================= */

.map {
  display: flex;
  flex-direction: column;
  background: var(--color-primary-navy-grey);
  color: var(--color-neutral-white);
}

@media (min-width: 1024px) {
  .map {
    flex-direction: row;
  }

  .map__image {
    width: 58%;
  }

  .map__content {
    width: 42%;
  }
}

@media (max-width: 1023px) {

  .map__image,
  .map__content {
    width: 100%;
  }
}

.map__image {
  position: relative;
}

.map__image img {
  display: block;
  width: 100%;
  height: auto;
}

.map__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 35px;
  padding: 48px 20px 72px;
}

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

/* Small desktop only */
@media (min-width: 1024px) and (max-width: 1300px) {
  .map__content {
    transform: scale(0.8);
  }
}

.map__box-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .map__box-content {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    width: max-content;
  }
}

.map__box-content:not(:last-child) {
  padding-bottom: 35px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.map__number-box {
  width: 80px;
  height: 80px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
}

.map__heading {
  margin-bottom: 28px;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .map__heading {
    padding-top: calc((80px - 1.2em) / 2);
    max-width: 405px;
  }
}

@media (min-width: 768px) {
  .map__description {
    max-width: 400px;
    padding-right: 10px;
  }
}

/* =========================================
   MARKER
========================================= */
.marker {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.3s ease;
  left: var(--marker-x);
  top: var(--marker-y);
  /* .marker--circle/middle/dot have fixed pixel sizes, so without this the
     button's top-left corner (not its visual center) sits at the x%/y%
     anchor point - a fixed-pixel offset that becomes a bigger share of the
     image the smaller it's rendered, making the pin visibly drift off its
     real spot as the window is resized. Re-centering here keeps the pin's
     center pinned to x%/y% at every size. */
  transform: translate(-50%, -50%);
}

/* Matches the breakpoint where .map__image swaps to the desktop map
   picture (see map-section.blade.php's <source media="(min-width: 992px)">)
   so the pin position switches to the desktop coordinates at the same
   point the desktop (differently cropped) map image itself appears. */
@media (min-width: 992px) {
  .marker {
    left: var(--marker-x-desktop);
    top: var(--marker-y-desktop);
  }
}

.marker:hover,
.marker:focus-visible {
  transform: translate(-50%, -50%) scale(1.15);
}

@media (min-width: 768px) {
  .marker {
    transform: translate(-50%, -50%) scale(1.5);
  }

  .marker:hover,
  .marker:focus-visible {
    transform: translate(-50%, -50%) scale(1.7);
  }
}

@media (min-width: 1450px) {
  .marker {
    transform: translate(-50%, -50%) scale(2);
  }

  .marker:hover,
  .marker:focus-visible {
    transform: translate(-50%, -50%) scale(2.2);
  }
}

.marker--1 {
  top: 22%;
  right: 4%;
}

@media (min-width: 768px) {
  .marker--1 {
    top: 25%;
    right: 7%;
  }
}

.marker--2 {
  top: 62%;
  left: 21%;
}

@media (min-width: 768px) {
  .marker--2 {
    top: 66%;
    left: 24%;
  }
}

@media (min-width: 1450px) {
  .marker--2 {
    left: 25%;
  }
}

.marker--3 {
  top: 66%;
  left: 33%;
}

@media (min-width: 768px) {
  .marker--3 {
    top: 70%;
    left: 38.5%;
  }
}

@media (min-width: 1450px) {
  .marker--3 {
    left: 38.5%;
  }
}

.marker__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(217, 189, 140, 0.1);
  border: 1px solid var(--color-neutral-white);
}

.marker__middle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(217, 189, 140, 0.1);
  border: 1px solid var(--color-neutral-white);
}

.marker__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #d9bd8c;
}

/* =========================================
   MARKER POPUP
========================================= */
.marker-popup {
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.5s ease-in-out,
    visibility 0s linear 0.5s;
}

.marker-popup.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.5s ease-in-out;
}

@media (min-width: 1024px) {
  .marker-popup {
    inset: auto 0 0 auto;
    width: min(544px, 100vw);
    height: auto;
    max-height: calc(100vh - 70px);
    transform: translateX(calc(100% + 40px));
  }

  .marker-popup.is-open {
    transform: translateX(0);
  }
}

@media (min-width: 1450px) {
  .marker-popup {
    max-height: calc(100vh - 80px);
  }
}

.marker-popup__panel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-primary-navy);
}

@media (min-width: 1024px) {
  .marker-popup__panel {
    height: auto;
    height: calc(100vh - 80px);
    max-width: 544px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
  }
}

.marker-popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.icon-close {
  font-size: 14px;
  color: var(--color-neutral-white);
}

.marker-popup__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-primary-navy);
}

@media (min-width: 1024px) {
  .marker-popup__card {
    height: auto;
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
  }
}

.marker-popup__top {
  display: flex;
  flex-direction: column;
  padding: 80px 32px 28px;
}

@media (min-width: 768px) {
  .marker-popup__top {
    flex-direction: row;
    align-items: stretch;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 34px;
  }
}

.marker-popup__media {
  position: relative;
  width: 100%;
  aspect-ratio: 326 / 471;
  flex: none;
}

@media (min-width: 768px) {
  .marker-popup__media {
    width: 50%;
  }

  .marker-popup__top--media-only .marker-popup__media {
    width: 100%;
  }
}

.marker-popup__media-stack {
  position: absolute;
  inset: 0;
}

.marker-popup__media-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.marker-popup__media-img.is-active {
  opacity: 1;
}

/* --- Marker Popup Media Nav --- */

/* Overlays the bottom-right corner of the image without affecting its layout. */
.marker-popup__media-nav {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  border-top-left-radius: 3px;
  overflow: hidden;
}

.marker-popup__media-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  color: var(--color-neutral-white);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.marker-popup__media-btn:hover,
.marker-popup__media-btn:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.marker-popup__media-btn .icon-arrow-left,
.marker-popup__media-btn .icon-arrow-right {
  font-size: 18px;
  color: inherit;
}

.marker-popup__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  background: var(--color-neutral-white);
  color: var(--color-primary-navy);
  padding: 30px 16px;
}

@media (min-width: 768px) {
  .marker-popup__content {
    width: 50%;
    padding: 40px;
  }
}

.marker-popup__logo {
  display: block;
  height: 40px;
  width: auto;
}

.marker-popup__title {
  color: var(--color-primary-navy);
}

.marker-popup__content-pane:not(.is-active) {
  display: none;
}

.marker-popup__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 30px 30px;
  color: var(--color-neutral-white);
}

@media (min-width: 768px) {
  .marker-popup__body {
    padding: 48px;
    padding-top: 0;
  }
}

.marker-popup__body-title {
  margin-bottom: 16px;
  color: var(--color-neutral-white);
}

.marker-popup__label {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--color-primary-gold);
  color: var(--color-neutral-white);
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
}

.marker-popup__body-text p {
  margin: 0 0 16px;
}

/* .text-body sets font-weight:300 on this container, so a browser's default
   "bolder" for <strong> only steps up to ~400 - barely different from the
   surrounding text. Set it explicitly so bold text typed in the admin
   actually reads as bold. */
.marker-popup__body-text strong {
  font-weight: 600;
}

.marker-popup__body-text p:last-child {
  margin-bottom: 0;
}

.marker-popup__body-text h3 {
  margin: 24px 0 12px;
  font-weight: 600;
}

.marker-popup__body-text h3:first-child {
  margin-top: 0;
}

.marker-popup__body-text ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.marker-popup__body-text li strong {
  display: block;
  margin-bottom: 2px;
font-weight: 600;
margin-right: 4px;
}

.marker-popup__project-pane:not(.is-active) {
  display: none;
}

.marker-popup__project-link {
  margin-top: 16px;
}

/* Match .marker-popup__footer's hover behaviour: the light grey sweep needs
   dark text, but .marker-popup__body's white text context would otherwise
   keep this white and unreadable on hover. */
.marker-popup__project-link .btn-cta:hover .text-overline {
  color: var(--color-neutral-black);
}

.marker-popup__footer {
  padding: 0 30px 30px;
}

@media (min-width: 768px) {
  .marker-popup__footer {
    padding: 0 48px 48px;
  }
}

/* Default (non-hover) state only — hover keeps the base .btn-cta behaviour. */
.marker-popup__footer .btn-cta:not(:hover) .btn-arrow-right {
  background: var(--color-neutral-white);
}

.marker-popup__footer .btn-cta:not(:hover) .icon-arrow-right {
  color: var(--color-primary-navy);
}

.marker-popup__footer .btn-cta:not(:hover) .text-overline {
  color: var(--color-neutral-white);
}

.marker-popup__subtitle-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.marker-popup__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marker-popup__list-title {
  font-weight: 600;
  margin-right: 4px;
}

body.marker-popup-open {
  overflow: hidden;
}

/* =========================================
   PORTFOLIO SECTION
========================================= */

.portfolio {
  background: var(--color-primary-navy-grey);
  color: var(--color-neutral-white);
  padding: 100px 24px;
}

@media (min-width: 1024px) {
  .portfolio {
    padding-left: 50px;
    padding-right: 65px;
  }
}

.portfolio__cols {
  gap: 40px;
}

@media (min-width: 1024px) {
  .portfolio__cols {
    gap: 70px;
  }
}

/* Panels stack in the same spot; only the active one shows, and switching
   crossfades via opacity (driven by js/main.js). */
.portfolio__panel {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio__panel.is-active {
  display: flex;
  opacity: 1;
}

.portfolio__cols--head {
  margin-bottom: 40px;
}

@media (min-width: 1024px) {
  .portfolio__cols--head {
    margin-bottom: 0;
  }
}

.portfolio__heading {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Cap the heading text width for readability WITHOUT shrinking the column
   itself. Capping the .col-5-8 box would leave free space that
   justify-content: space-between pushes the tabs column into, knocking it off
   the grid line the .col-3-8 content/title sits on in the panel rows. */
.portfolio__heading h2 {
  max-width: 620px;
}

.portfolio__label {
  text-transform: uppercase;
  color: var(--color-primary-gold);
}

.portfolio__media {
  position: relative;
}

/* Gallery images stack on top of each other and crossfade between them. */
.portfolio__media-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 342 / 282;
  /* Let the browser keep handling vertical scroll while horizontal swipes are
     delivered to JS for image navigation (mobile + tablet). */
  touch-action: pan-y;
}

/* Small tag overlaid on the top-left corner of the gallery image, so the
   project's short label reads clearly regardless of the photo underneath. */
.portfolio__media-label {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  padding: 8px 14px;
  background: var(--color-primary-gold);
  color: var(--color-neutral-white);
  border-radius: 3px;
}

/* No label for the currently shown image (some projects don't have one) -
   hide the tag entirely instead of leaving an empty colored box. */
.portfolio__media-label:empty {
  display: none;
}

@media (min-width: 1024px) {
  .portfolio__media-stack {
    aspect-ratio: 889 / 712;
  }
}

.portfolio__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.portfolio__image.is-active {
  opacity: 1;
}

.portfolio__image-description {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 20px;
  z-index: 2;
     background: #fff;
    color: #000;
}

.portfolio__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Portfolio Media Nav (same treatment as marker-popup__media-nav, but
   overlaid on the top-left corner). --- */
.portfolio__media-nav {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  border-bottom-right-radius: 3px;
  overflow: hidden;
}
.portfolio__media-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  color: var(--color-neutral-white);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.portfolio__media-btn:hover,
.portfolio__media-btn:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.portfolio__media-btn .icon-arrow-left,
.portfolio__media-btn .icon-arrow-right {
  font-size: 18px;
  color: inherit;
}

/* --- Portfolio Tabs --- */

.portfolio__tabs {
  display: flex;
  align-items: flex-start;
}

.portfolio__tab {
  padding: 18px 24px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.portfolio__tab:hover,
.portfolio__tab:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.portfolio__tab.is-active {
  background: rgba(255, 255, 255, 0.1);
}

/* --- Portfolio Links (styled like the accordion items) --- */

.portfolio__links {
  display: flex;
  flex-direction: column;
}

.portfolio__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 35px 0 24px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-neutral-mid-grey);
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.portfolio__link:hover,
.portfolio__link:focus-visible {
  opacity: 0.7;
}

.portfolio__link .icon-arrow-right {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}

/* .btn-cta's text inherits .portfolio's white text color, but the hover sweep
   (.btn-cta::before) is light grey — keep the label readable on hover. */
.portfolio .btn-cta:hover .text-overline {
  color: var(--color-primary-navy);
}

/* =========================================
   CONTENT + MEDIA (reusable two-column layout)
   The image column keeps a 553:528 ratio (553px wide at a 1440px
   viewport) and scales responsively; the text column fills the
   remaining space. The media is first in the DOM so it always leads
   on mobile; on desktop it sits on the right by default, and
   .content-media--image-left flips it to the left.
========================================= */
.content-media {
  display: flex;
  flex-direction: column;
}

/* The media container accepts either an image or a video; both share
   the same responsive sizing and aspect ratio. */
.content-media__image,
.content-media__video {
  width: 100%;
  height: auto;
  aspect-ratio: 553 / 528;
  object-fit: cover;
  object-position: top;
}

.content-media__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 60px 24px;
  background: var(--color-primary-navy);
  color: var(--color-neutral-white);
}

.content-media--grey .content-media__content {
  background: var(--color-neutral-mid-grey);
  color: var(--color-neutral-black);
}

@media (min-width: 1024px) {
  .content-media {
    flex-direction: row-reverse;
    align-items: stretch;
    justify-content: space-between;
  }

  .content-media--image-left {
    flex-direction: row;
  }

  .content-media__media {
    flex: none;
    width: calc(100% * 553 / 1344);
  }

  .content-media__content {
    padding: 60px 155px 65px 50px;
    flex: 1;
  }

  .content-media--grey .content-media__content {
    padding: 60px 50px;
    justify-content: center;
  }
}

/* =========================================
   FOUNDER'S MESSAGE
   Builds on the reusable .content-media layout.
========================================= */
.founder {
  display: flex;
  flex-direction: column;
  padding: 60px 20px;
}

@media (min-width: 768px) {
  .founder {
    padding: 80px 48px;
  }
}

@media (min-width: 1024px) {
  .founder {
    padding: 92px 48px;
  }
}

@media (min-width: 1450px) {
  .founder {
    padding: 100px 164px;
  }
}

/* On desktop the two columns stretch to the tallest one. By default the
   image keeps its 553:528 ratio and leaves a gap when the quote is taller.
   Here the ratio moves onto the media container so it acts as the minimum
   height, and the image fills whatever height the row settles on: it keeps
   the original ratio while the content is shorter, and grows with the
   section once the content is taller. Mobile behaviour is unchanged. */
@media (min-width: 1024px) {
  .founder .content-media__media {
    display: flex;
    aspect-ratio: 553 / 528;
  }

  .founder .content-media__image,
  .founder .content-media__video {
    aspect-ratio: auto;
    height: 100%;
  }
}

.founder__quote strong {
  font-weight: 700;
}

.founder__quote p {
  margin-bottom: 16px;
}

.founder__quote p:last-child {
  margin-bottom: 0;
}

.founder__attribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.founder__role {
  opacity: 0.4;
}

/* SHOW MORE control: only relevant on mobile/tablet, where the grey section
   is collapsed by default. It sits at the bottom of the navy content block. */
.founder__show-more {
  display: none;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.founder__show-more.is-hidden {
  display: none;
}

.founder__hide {
  display: none;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .founder__show-more {
    display: inline-block;
  }

  .founder__hide {
    display: inline-block;
  }

  .founder__collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 0.5s ease,
      opacity 0.4s ease;
  }

  .founder__collapse>* {
    overflow: hidden;
    min-height: 0;
  }

  .founder__collapse.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

/* =========================================
   VISION
========================================= */

.vision {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 530;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color-neutral-white);
}

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

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

.vision__video {
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 150%;
  object-fit: cover;
  will-change: transform;
}

.vision__label {
  text-transform: uppercase;
}

.vision__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.vision__description {
  max-width: 310px;
  text-align: center;
}

.vision__description p {
  margin-bottom: 16px;
}

.vision__description strong,
.vision__description b {
  font-weight: 700;
}

.vision__description p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .vision__description {
    max-width: 640px;
  }
}

/* =========================================
   HERITAGE
========================================= */

.heritage {
  background: var(--color-primary-navy-grey);
  color: var(--color-neutral-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 100px 24px;
}

@media (min-width: 1024px) {
  .heritage {
    position: relative;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
    padding: 82.5px 100px 82.5px 48px;
  }
}

@media (min-width: 1025px) {
  .heritage {
    min-height: calc(100vh - var(--header-height));
  }
}

@media (min-width: 1450px) {
  .heritage {
    padding-left: 256px;
    padding-right: 256px;
  }
}

.heritage__media {
  flex-shrink: 0;
}

.heritage__video {
  width: 248px;
  height: 373px;
  object-fit: cover;
  display: block;
}

.heritage__content {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.heritage__label {
  text-transform: uppercase;
  color: var(--color-primary-gold);
}

.heritage__body {
  display: flex;
  flex-direction: column;
  gap: 35px;
  transition: opacity 0.2s ease;
}

/* While the blur-text is being re-split after a resize (JS toggles this class),
   hide the paragraphs so the raw split-character state is never exposed, then
   fade them back in once the new split is ready. */
.heritage.is-resplitting .heritage__body {
  opacity: 0;
}

@media (min-width: 768px) {
  .heritage__video {
    width: 429px;
    height: 645px;
  }

  .heritage__content {
    max-width: 640px;
  }

  .heritage__label {
    position: absolute;
    top: 82.5px;
    left: 48px;
    margin: 0;
  }
}

@media (min-width: 1450px) {
  .heritage__label {
    left: 256px;
  }

  .heritage__video {
    width: 560px;
    height: 840px;
  }
}

/* =========================================
   MISSION
========================================= */

.mission {
  --mission-bg: var(--color-primary-navy);
  --mission-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mission-slide: 600ms;
  background: var(--mission-bg);
  color: var(--color-neutral-white);
  padding: 108px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    background-color var(--mission-slide) var(--mission-ease),
    color var(--mission-slide) var(--mission-ease);
}

@media (min-width: 1024px) {
  .mission {
    padding: 82px 0 90px;
  }
}

/* --- Per-slide themes --- */
.mission.is-theme-navy {
  --mission-bg: var(--color-primary-navy);
  color: var(--color-neutral-white);
}

.mission.is-theme-grey {
  --mission-bg: var(--color-neutral-mid-grey);
  color: var(--color-primary-navy);
}

.mission.is-theme-sand {
  --mission-bg: var(--color-secondary-sand);
  color: var(--color-primary-navy);
}

.mission__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

@media (min-width: 1024px) {
  .mission__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 0 45px;
  }
}

@media (min-width: 1450px) {
  .mission__header {
    padding: 0 164px;
  }
}

.mission__heading-group {
  text-align: center;
}

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

.mission__overline {
  color: var(--color-primary-gold);
  margin-bottom: 40px;
}

.mission.is-theme-sand .mission__overline {
  color: var(--color-neutral-white);
}

.mission__title {
  max-width: 300px;
}

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

/* --- CTA button, adapted to the active slide theme --- */
.mission .btn-cta {
  transition: border-color var(--mission-slide) var(--mission-ease);
}

.mission .btn-arrow-right {
  transition: background-color var(--mission-slide) var(--mission-ease);
}

.mission .icon-arrow-right {
  transition: color var(--mission-slide) var(--mission-ease);
}

/* Blue: white outline, white arrow disc, blue icon, white text. */
.mission.is-theme-navy .btn-cta {
  border-color: var(--color-neutral-white);
}

.mission.is-theme-navy .btn-cta .text-overline {
  color: var(--color-neutral-white);
}

.mission.is-theme-navy .btn-arrow-right {
  background: var(--color-neutral-white);
}

.mission.is-theme-navy .icon-arrow-right {
  color: var(--color-primary-navy);
}

/* Grey & gold: black text, blue arrow disc, white icon. */
.mission.is-theme-grey .btn-cta,
.mission.is-theme-sand .btn-cta {
  border-color: var(--color-neutral-white);
}

.mission.is-theme-grey .btn-cta .text-overline,
.mission.is-theme-sand .btn-cta .text-overline {
  color: var(--color-neutral-black);
}

.mission.is-theme-grey .btn-arrow-right,
.mission.is-theme-sand .btn-arrow-right {
  background: var(--color-primary-navy);
}

.mission.is-theme-grey .icon-arrow-right,
.mission.is-theme-sand .icon-arrow-right {
  color: var(--color-neutral-white);
}

/* Keep the component's hover sweep readable on every theme. */
.mission .btn-cta:hover .text-overline {
  color: var(--color-primary-navy);
}

.mission .btn-cta:hover .icon-arrow-right {
  color: var(--color-neutral-white);
}

/* Blue theme's white arrow disc has the same specificity as the shared
   hover-to-gold rule above and comes later in the sheet, so it silently wins
   and the arrow never turns gold on hover. Force it explicitly. */
.mission.is-theme-navy .btn-cta:hover .btn-arrow-right {
  background: var(--color-primary-gold);
}

/* --- Carousel --- */
.mission__carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 72px 0 48px;
  /* Let the browser keep handling vertical scroll while horizontal swipes are
     delivered to JS for slide navigation (mobile + tablet). */
  touch-action: pan-y;
  cursor: grab;
}

.mission__carousel.is-dragging {
  cursor: grabbing;
}

/* --- Prev/next arrows: overlaid on the slide images themselves (same
   glassy-circle treatment as .marker-popup__media-btn), so they read
   correctly regardless of which theme colour the section is currently on. */
.mission__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  color: var(--color-neutral-white);
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.mission__nav:hover,
.mission__nav:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}

.mission__nav .icon-arrow-left,
.mission__nav .icon-arrow-right {
  font-size: 16px;
  color: inherit;
}

.mission__nav--prev {
  left: 12px;
}

.mission__nav--next {
  right: 12px;
}

@media (min-width: 1024px) {
  .mission__nav {
    width: 52px;
    height: 52px;
  }

  .mission__nav .icon-arrow-left,
  .mission__nav .icon-arrow-right {
    font-size: 20px;
  }

  .mission__nav--prev {
    left: 32px;
  }

  .mission__nav--next {
    right: 32px;
  }
}

/* --- Dots (pagination) --- */
/* Hidden for now (kept in markup/JS in case it's wanted back later) - the
   arrows carry the "you can navigate" affordance on their own for now. */
.mission__dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.mission__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: currentColor;
  opacity: 0.35;
  cursor: pointer;
  transition:
    opacity 0.3s var(--mission-ease),
    transform 0.3s var(--mission-ease),
    background-color var(--mission-slide) var(--mission-ease);
}

/* Enlarge the tap target well past the visible dot without growing it. */
.mission__dot::before {
  content: '';
  position: absolute;
  inset: -10px;
}

.mission__dot:hover {
  opacity: 0.7;
}

.mission__dot.is-active {
  background: var(--color-primary-gold);
  opacity: 1;
  transform: scale(1.35);
}

@media (min-width: 1024px) {
  .mission__carousel {
    margin: 64px 0 40px;
  }

  .mission__dots {
    margin-bottom: 20px;
  }
}

.mission__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 50px;
  width: max-content;
  will-change: transform;
}

.mission__slide {
  flex: 0 0 auto;
  width: calc(100vw - 128px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition:
    opacity var(--mission-slide) var(--mission-ease),
    transform var(--mission-slide) var(--mission-ease);
  /* Promote to its own layer so the sliding transform never triggers a
     repaint of the image (the source of the mid-transition flicker). */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mission__slide.is-active {
  opacity: 1;
  cursor: default;
}

/* The entrance fade-up is driven by AOS on the three visible slides. AOS sets
   the transform on `[data-aos="fade-up"]`, but `.mission__slide`'s own
   `transform: translateZ(0)` (declared later, same specificity) would win and
   cancel the rise — so restate both the hidden and revealed transforms here at
   a higher specificity. The revealed state keeps `translateZ(0)` to preserve
   the slide's GPU layer. */
.mission .mission__slide[data-aos='fade-up'] {
  transform: translate3d(0, 64px, 0);
}

.mission .mission__slide[data-aos='fade-up'].aos-animate {
  transform: translateZ(0);
}

@media (min-width: 1024px) {
  .mission__slide {
    width: min(40vw, 460px);
  }

  .mission__track {
    gap: 260px;
  }
}

@media (min-width: 1450px) {
  .mission__slide {
    width: min(40vw, 600px);
  }
}

@media (min-width: 1450px) {
  .mission__track {
    gap: 490px;
  }
}

.mission__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  pointer-events: none;
  /* Keep the decoded bitmap on the GPU so it isn't re-rasterised (and briefly
     flashed) as the track slides. */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mission__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  /* Half the slide duration: fades out over the first half, back in over the
     second, so the copy swap lands exactly at the mid-point of the slide. */
  transition:
    opacity calc(var(--mission-slide) / 2) var(--mission-ease),
    transform calc(var(--mission-slide) / 2) var(--mission-ease);
}

.mission__body.is-swapping {
  opacity: 0;
  transform: translateY(8px);
}

.mission__subtitle {
  max-width: 240px;
  text-transform: uppercase;
}

.mission.is-theme-grey .mission__subtitle {
  max-width: 340px;
}

@media (min-width: 768px) {
  .mission__subtitle {
    max-width: 290px;
  }

  .mission.is-theme-grey .mission__subtitle {
    max-width: 420px;
  }
}

@media (min-width: 1450px) {
  .mission__subtitle {
    max-width: 380px;
  }

  .mission.is-theme-grey .mission__subtitle {
    max-width: 550px;
  }
}


.mission__description {
  max-width: 300px;
}

@media (min-width: 768px) {
  .mission__description {
    max-width: 450px;
  }
}

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

  .mission,
  .mission .btn-cta,
  .mission .btn-arrow-right,
  .mission .icon-arrow-right,
  .mission__slide,
  .mission__track,
  .mission__body {
    transition-duration: 0.01ms !important;
  }
}

/* =========================================
   CORE ORGANIZATION
========================================= */

.core-organization {
  padding: 100px 22px 120px;
}

@media (min-width: 1024px) {
  .core-organization {
    padding: 92px 77px;
  }
}

.core-organization-inner {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .core-organization-inner {
    flex-direction: row;
  }
}

.core-organization__media {
  flex: 2;
}

.core-organization__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1 / 1;
  opacity: 0;
  transition: opacity 1s ease-out;
}

.core-organization__image.is-visible {
  opacity: 1;
}

.core-organization__content {
  flex: 1;
  background: var(--color-neutral-mid-grey);
  padding: 60px 24px;
}

@media (min-width: 768px) {
  .core-organization__content {
    padding-right: 48px;
    padding-left: 48px;
  }
}

.core-organization__label {
  color: var(--color-primary-gold);
  margin-bottom: 35px;
}

.core-organization__title {
  margin-bottom: 12px;
}

/* =========================================
   ECOSYSTEM SECTION
========================================= */

.ecosystem {
  position: relative;
  color: var(--color-neutral-white);
}

.ecosystem__background {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url('../images/city-park-landscape.jpg') center / cover no-repeat;
  z-index: 0;
}

.ecosystem__background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.ecosystem__content {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  padding: 76px 18px;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

@media (min-width: 1024px) {
  .ecosystem__background {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .ecosystem__content {
    margin-top: 0;
    padding: 108px 160px;
  }
}

@media (min-width: 1450px) {
  .ecosystem__content {
    padding: 120px 250px;
  }
}

/* Keep the shared CTA button legible against the white hover sweep on a dark section. */
.ecosystem .btn-cta:hover .text-overline {
  color: var(--color-primary-navy);
}

/* Default the arrow to a white background with a navy arrow; the shared
   .btn-cta:hover animation still sweeps the arrow background to gold. */
.ecosystem .btn-arrow-right {
  background: var(--color-neutral-white);
}

.ecosystem .icon-arrow-right {
  color: var(--color-primary-navy);
  transition: color 0.3s ease;
}

/* On hover the shared animation sweeps the arrow background to gold; flip the
   arrow icon to white and match the container's timing/delay so the container
   and icon transition together. */
.ecosystem .btn-cta:hover .icon-arrow-right {
  color: var(--color-neutral-white);
  transition-delay: 0.25s;
}

/* --- Intro --- */
.ecosystem__intro {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

@media (min-width: 768px) {
  .ecosystem__intro {
    gap: 55px;
  }
}

.ecosystem__heading {
  max-width: 600px;
}

.ecosystem__summary {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

@media (min-width: 1024px) {
  .ecosystem__summary {
    flex-direction: row;
  }

  .ecosystem__lead,
  .ecosystem__description {
    flex: 1;
  }

  .ecosystem__lead>*,
  .ecosystem__description>* {
    max-width: 440px;
  }
}

/* --- Grid --- */
.ecosystem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 1024px) {
  .ecosystem-grid {
    grid-template-columns: 440fr 296fr 296fr;
    grid-template-rows: auto auto;
  }

  .ecosystem-card--investment {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .ecosystem-card--engineering {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  .ecosystem-card--supply {
    grid-column: 2;
    grid-row: 2;
  }

  .ecosystem-card--development {
    grid-column: 3;
    grid-row: 2;
  }
}

.ecosystem-card {
  padding: 40px 24px;
  border: 1px solid var(--color-neutral-white);
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: -1px;
  margin-left: -1px;
  transition: background-color 0.3s ease;
}

@media (min-width: 1024px) {
  .ecosystem-card {
    padding: 40px;
  }
}

.ecosystem-card--investment {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
}

.ecosystem-card__label {
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.3s ease;
}

.ecosystem-card__logo img {
  height: auto;
  width: auto;
}

.ecosystem-card--investment .ecosystem-card__logo img {
  width: 160px;
}

.ecosystem-card--engineering .ecosystem-card__logo img {
  width: 174px;
}

.ecosystem-card--supply .ecosystem-card__logo img {
  width: 86px;
}

.ecosystem-card--development .ecosystem-card__logo img {
  width: 107px;
}

.ecosystem-card__title {
  margin-bottom: 14px;
}

.ecosystem-card__description {
  margin-top: -40px;
}

.ecosystem-card__description p {
  margin-bottom: 16px;
}

.ecosystem-card__description p:last-child {
  margin-bottom: 0;
}

.ecosystem-card .btn-cta {
  margin-top: auto;
}

/* --- Card hover states --- */
.ecosystem-card__logo-hover {
  display: none;
}

.ecosystem-card--supply:hover .ecosystem-card__logo-default,
.ecosystem-card--development:hover .ecosystem-card__logo-default {
  display: none;
}

.ecosystem-card--supply:hover .ecosystem-card__logo-hover,
.ecosystem-card--development:hover .ecosystem-card__logo-hover {
  display: block;
}

.ecosystem-card--engineering:hover {
  background: var(--color-primary-navy-grey);
}

.ecosystem-card--supply:hover {
  background: var(--color-neutral-white);
}

.ecosystem-card--supply:hover .ecosystem-card__label {
  color: var(--color-primary-gold);
}

.ecosystem-card--supply:hover .btn-cta {
  background: var(--color-neutral-white);
  border-color: var(--color-neutral-mid-grey);
}

.ecosystem-card--supply:hover .btn-cta .text-overline {
  color: var(--color-neutral-black);
}

.ecosystem-card--supply:hover .btn-arrow-right {
  background: var(--color-primary-navy);
}

.ecosystem-card--supply:hover .icon-arrow-right {
  color: var(--color-neutral-white);
}

.ecosystem-card--supply .btn-cta:hover::before {
  background: var(--color-neutral-light-bg-grey);
}

.ecosystem-card--supply .btn-cta:hover .btn-arrow-right {
  background: var(--color-primary-gold);
}

.ecosystem-card--supply .btn-cta:hover .icon-arrow-right {
  color: var(--color-neutral-white);
}

.ecosystem-card--development:hover {
  background: var(--color-neutral-mid-grey);
}

/* --- Investment partner --- */
.investment-partner {
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .investment-partner__header {
    width: 100%;
  }
}

.investment-partner__header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.investment-partner__body {
  display: flex;
  flex-direction: column;
}

.investment-partner__visual {
  display: flex;
  height: 270px;
  /* Let the browser keep handling vertical scroll while horizontal swipes are
     delivered to JS for slide navigation (mobile + tablet). */
  touch-action: pan-y;
}

.investment-partner__visual-image {
  position: relative;
  flex: 1;
  align-self: stretch;
}

.investment-partner__visual-image img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--color-neutral-white);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.investment-partner__visual-image img.is-active {
  opacity: 1;
}

.investment-partner__content {
  flex: 1;
  min-height: 270px;
  padding: 24px;
  border: 1px solid var(--color-neutral-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

@media (min-width: 1024px) {
  .investment-partner__body {
    flex-direction: row;
    /* height: 300px; */
    height: auto;
  }

  .investment-partner__visual,
  .investment-partner__content {
    width: 50%;
    /* height: 100%; */
    height: auto;
  }

  .investment-partner__content {
    padding: 24px 34px;
  }
}

.investment-partner__title {
  margin-bottom: 12px;
}

.investment-partner__description {
  margin-bottom: 24px;
}
.investment-partner__description p strong {
    font-weight:bold !important
}
.investment-partner .pagination__dot {
  color: var(--color-neutral-white);
}

.investment-partner .pagination__ring-progress {
  stroke: var(--color-neutral-white);
}

/* --- Our partners --- */
.investment-partner__heading,
.ecosystem__partners-heading {
  margin-bottom: 32px;
  text-transform: uppercase;
}

.partner-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-left: -17px;
  margin-right: -17px;
  padding-left: 17px;
  padding-right: 17px;
}

@media (min-width: 1024px) {
  .partner-grid {
    margin-left: -160px;
    margin-right: -160px;
    padding-left: 160px;
    padding-right: 160px;
  }
}

.partner-card {
  flex: 0 0 auto;
  width: 268px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-neutral-white);
  padding: 25px;
  aspect-ratio: 1 / 1;
  margin-left: -1px;
  color: inherit;
  text-decoration: none;
}

.partner-card:first-child {
  margin-left: 0;
}

.partner-card__logo {
  height: 56px;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.partner-card__logo img {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.partner-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.partner-card__title {
  margin-bottom: 14px;
}

/* =========================================
    PARTNERS MARQUEE
========================================= */

.partners-marquee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 60px 0;
  overflow: hidden;
}

.partners-marquee--hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: 0 0 32px;
  gap: 20px;
}

.partners-marquee--hero .partners-marquee__title {
  color: var(--color-neutral-white);
}

.partners-marquee__title {
  text-align: center;
  text-transform: uppercase;
}

.partners-marquee__viewport {
  position: relative;
  width: 100%;
  max-width: 1045px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,
      transparent,
      #000 100px,
      #000 calc(100% - 100px),
      transparent);
  mask-image: linear-gradient(90deg,
      transparent,
      #000 100px,
      #000 calc(100% - 100px),
      transparent);
}

.partners-marquee__viewport::before,
.partners-marquee__viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.partners-marquee__viewport::before {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}

.partners-marquee__viewport::after {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent);
  mask-image: linear-gradient(270deg, #000, transparent);
}

.partners-marquee__track {
  display: flex;
  width: max-content;
  animation: partners-marquee-scroll 30s linear infinite;
}

.partners-marquee__viewport:hover .partners-marquee__track {
  animation-play-state: paused;
}

.partners-marquee__group {
  display: flex;
  flex-shrink: 0;
}

.partners-marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 28px;
}

.partners-marquee__item img {
  width: auto;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .partners-marquee__item {
    padding: 0 36px;
  }
}

@keyframes partners-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* =========================================
    THE ECOSYSTEM EXCELLENCE
========================================= */

.ecosystem-excellence {
  background: var(--color-neutral-light-bg-grey);
  padding: 60px 28px 160px;
}

@media (min-width: 1024px) {
  .ecosystem-excellence {
    padding: 80px 48px 135px;
  }
}

@media (min-width: 1450px) {
  .ecosystem-excellence {
    padding-left: 256px;
    padding-right: 256px;
  }
}

.ecosystem-excellence__label {
  color: var(--color-primary-gold);
  text-transform: uppercase;
}

/* "ข่าว" on the news listing page only - other pages/blocks reusing
   .ecosystem-excellence__label keep the default size. */
.page-news .ecosystem-excellence__label {
  font-size: 1.25rem;
  font-weight: 500 ;
}

@media (min-width: 1024px) {
  .page-news .ecosystem-excellence__label {
    font-size: 1.4rem;
  }
}

.ecosystem-excellence__body {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .ecosystem-excellence__body {
    flex-direction: row;
  }
}

.ecosystem-excellence__title {
  flex: 1 1 0;
  min-width: 0;
  padding: 40px 0 0;
}

@media (min-width: 1024px) {
  .ecosystem-excellence__title {
    padding-bottom: 40px;
  }
}

.ecosystem-excellence__list {
  flex: 1 1 0;
  min-width: 0;
}

.ecosystem-excellence__item {
  padding: 40px 0;
  border-bottom: 1px solid var(--color-neutral-mid-grey);
}

.ecosystem-excellence__item-title {
  margin-bottom: 16px;
}

/* =========================================
   STATEMENT SECTION (reusable)
   Reuses .ecosystem-excellence layout with a
   single text block and a bottom CTA.
========================================= */

.statement-section__text {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 40px;
}

@media (min-width: 1024px) {
  .statement-section__text {
    padding-top: 40px;
  }

  /* Left column 60% / right column 40% */
  .statement-section .ecosystem-excellence__title {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .statement-section .statement-section__text {
    flex: 0 0 40%;
    max-width: 40%;
  }
}

.statement-section__cta {
  display: flex;
}

/* Per-instance outer spacing overrides.
   Only top/bottom are set so left/right keep inheriting from
   .ecosystem-excellence across all breakpoints. */
.statement-section--business {
  padding-top: 100px;
  padding-bottom: 70px;
}

@media (min-width: 1024px) {
  .statement-section--business {
    padding-top: 150px;
  }
}

.statement-section--news {
  padding-top: 60px;
  padding-bottom: 48px;
}

@media (min-width: 1024px) {
  .statement-section--news {
    padding-top: 111px;
    padding-bottom: 53px;
  }
}

/* =========================================
   AAA SUSTAINABILITY VISION (index)
========================================= */

.aaa-vision {
  padding: 100px 20px;
  background-color: var(--aaa-vision-bg, transparent);
}

@media (min-width: 1024px) {
  .aaa-vision {
    padding-top: 40px;
    padding-right: 77px;
    padding-left: 77px;
  }
}

.aaa-vision__inner {
  max-width: 1286px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .aaa-vision__inner {
    flex-direction: row;
    align-items: stretch;
  }
}

@media (min-width: 1600px) {
  .aaa-vision__inner {
    max-width: 1600px;
  }
}

.aaa-vision__left {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .aaa-vision__left {
    flex: 820 1 0;
    min-width: 0;
  }
}

.aaa-vision__display {
  order: -1;
  flex: 1 1 auto;
  background: var(--color-neutral-mid-grey);
  padding: 48px 20px;
  text-transform: uppercase;
  text-wrap: balance;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .aaa-vision__display {
    order: 0;
    padding: 60px;
  }
}

.aaa-vision__display .text-display {
  max-width: 680px;
}

.aaa-vision__display strong {
  font-weight: 700;
}

.aaa-vision__media {
  position: relative;
  width: 100%;
  aspect-ratio: 821 / 519;
  overflow: hidden;
  /* Let the browser keep handling vertical scroll while horizontal swipes are
     delivered to JS for slide navigation (mobile + tablet). */
  touch-action: pan-y;
}

.aaa-vision__video-el,
.aaa-vision__image-el {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.aaa-vision__video-el.is-active,
.aaa-vision__image-el.is-active {
  opacity: 1;
}

.aaa-vision__right {
  display: flex;
  flex-direction: column;
  background: var(--color-primary-navy-grey);
  color: var(--color-neutral-white);
  padding: 48px 20px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .aaa-vision__right {
    flex: 466 1 0;
    min-width: 0;
    padding: 60px 48px;
  }
}

.aaa-vision__right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.aaa-vision__overline {
  color: var(--color-primary-gold);
  font-size: 1.25rem;
}

@media (min-width: 1024px) {
  .aaa-vision__overline {
    font-size: 1.4rem;
  }
}

.aaa-vision__slides {
  position: relative;
  display: grid;
  flex: 0 1 auto;
}

@media (min-width: 1024px) {
  .aaa-vision__slides {
    display: flex;
    flex-direction: column;
  }
}

.aaa-vision__indicator {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--color-neutral-white);
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.25s ease;
}

@media (min-width: 1024px) {
  .aaa-vision__indicator {
    display: block;
  }
}

.aaa-vision__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

@media (min-width: 1024px) {
  .aaa-vision__slide {
    grid-area: auto;
    gap: 16px;
    padding-top: 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    visibility: visible;
    cursor: pointer;
    transition: opacity 0.5s ease;
  }
}

.aaa-vision__slide.is-active {
  visibility: visible;
}

@media (min-width: 1024px) {
  .aaa-vision__slide-title {
    transition: transform 0.5s ease;
  }

  .aaa-vision__slide.is-active .aaa-vision__slide-title {
    transform: translateX(45px);
  }
}

.aaa-vision__slide-description {
  color: var(--color-neutral-cool-grey);
}

.aaa-vision .pagination {
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .aaa-vision .pagination {
    display: none;
  }
}

.aaa-vision .pagination__dot {
  color: var(--color-neutral-white);
}

.aaa-vision .pagination__ring-track {
  stroke: rgba(255, 255, 255, 0.35);
}

.aaa-vision .pagination__ring-progress {
  stroke: var(--color-neutral-white);
}

.aaa-vision .btn-cta {
  margin-top: 40px;
}

.aaa-vision .btn-arrow-right {
  background: var(--color-neutral-white);
}

.aaa-vision .icon-arrow-right {
  color: var(--color-primary-navy);
  transition: color 0.3s ease;
}

.aaa-vision .btn-cta:hover .icon-arrow-right {
  color: var(--color-neutral-white);
  transition-delay: 0.25s;
}

.aaa-vision .btn-cta:hover .text-overline {
  color: var(--color-neutral-black);
}

/* =========================================
   VIDEO MEDIA SECTION
========================================= */

.video-media {
  width: 100%;
}

.video-media__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-neutral-black);
}

@media (min-width: 768px) {
  .video-media__inner {
    aspect-ratio: 1440 / 708;
  }
}

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

.video-media__controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .video-media__controls {
    bottom: 40px;
    left: 40px;
    right: 40px;
  }
}

.video-media__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-neutral-white);
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

@media (min-width: 768px) {
  .video-media__toggle {
    width: 72px;
    height: 72px;
  }
}

.video-media__toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* Mute/sound button: icon only, no container styling. */
.video-media__sound {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-neutral-white);
  cursor: pointer;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.video-media__sound:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

.video-media__icon {
  color: var(--color-neutral-white);
  font-size: 30px;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.video-media__icon--play,
.video-media__icon--pause,
.video-media__icon--sound,
.video-media__icon--muted {
  font-size: 24px;
}

.video-media__icon--pause {
  display: none;
}

.video-media__inner.is-playing .video-media__icon--play {
  display: none;
}

.video-media__inner.is-playing .video-media__icon--pause {
  display: block;
}

.video-media__icon--sound {
  display: none;
}

.video-media__inner.is-muted .video-media__icon--muted {
  display: block;
}

.video-media__inner.is-muted .video-media__icon--sound {
  display: none;
}

.video-media__inner:not(.is-muted) .video-media__icon--muted {
  display: none;
}

.video-media__inner:not(.is-muted) .video-media__icon--sound {
  display: block;
}

/* =========================================
   PROJECT SEARCH (used on the project-listing page block)
========================================= */
.project-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
  padding: 0 20px 40px;
}

@media (min-width: 1024px) {
  .project-search {
    padding: 0 48px 60px;
  }
}

@media (min-width: 1450px) {
  .project-search {
    padding-left: 256px;
    padding-right: 256px;
  }
}

.project-search__field {
  flex: 1 1 220px;
  min-width: 0;
}

.project-search__submit {
  flex: 0 0 auto;
  padding: 10px 32px;
  border: 1px solid var(--color-primary-navy);
  background: transparent;
  color: var(--color-primary-navy);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.project-search__submit:hover,
.project-search__submit:focus-visible {
  background: var(--color-primary-navy);
  color: var(--color-neutral-white);
}

.project-search__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-neutral-cool-grey);
}

/* =========================================
   NEWS CARD
========================================= */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding: 0 20px 54px;
}

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

@media (min-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 48px 130px;
    gap: 12px;
  }
}

@media (min-width: 1450px) {
  .news-grid {
    padding-left: 256px;
    padding-right: 256px;
  }
}

.news-card {
  height: 100%;
  background: var(--color-neutral-white);
}

.news-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-card__media {
  position: relative;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
}

.news-card__media--project {
  aspect-ratio: 440 / 294;
}

.news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-card__image {
  transform: scale(1.05);
}

.news-card__arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--color-primary-navy);
  color: var(--color-neutral-white);
  font-size: 1.25rem;
  transition: background 0.3s ease;
}

.news-card__arrow .icon-arrow-right {
  font-size: 21px;
}

.news-card:hover .news-card__arrow {
  background: var(--color-primary-gold);
}

.news-card__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: var(--color-neutral-white);
}

.news-card__date {
  color: var(--color-primary-gold);
  text-transform: uppercase;
}

.news-card__heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.news-card__label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 12px;
  border: 1px solid var(--color-primary-gold);
  border-radius: 999px;
  color: var(--color-primary-gold);
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
}

.news-card__title {
  color: var(--color-neutral-black);
  font-weight: 400;
}

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

.news-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 20px 54px;
}

@media (min-width: 1024px) {
  .news-pagination {
    padding: 0 48px 130px;
  }
}

@media (min-width: 1450px) {
  .news-pagination {
    padding-left: 256px;
    padding-right: 256px;
  }
}

/* =========================================
   NEWS SINGLE (article page)
========================================= */
.news-single__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 1024px) {
  .news-single__inner {
    padding: 0 48px;
  }
}

.wp-block-image {
  aspect-ratio: 553 / 692;
}

.news-single__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-neutral-cool-grey);
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.news-single__back:hover {
  color: var(--color-primary-gold);
}

.news-single__back .icon-arrow-left {
  font-size: 18px;
}

.news-single__header {
  padding: 32px 0 40px;
}

.news-single__date {
  color: var(--color-primary-gold);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.news-single__hero-content .news-single__date {
  margin-bottom: 0;
  margin-top: 24px;
}

.news-single__title {
  color: var(--color-neutral-black);
}

.news-single__hero {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .news-single__hero {
    flex-direction: row;
    align-items: stretch;
  }
}

.news-single__hero-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1120 / 624;
}

@media (min-width: 1024px) {
  .news-single__hero-media {
    width: 40%;
    aspect-ratio: auto;
  }
}

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

.news-single__hero-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-neutral-mid-grey);
  padding: 40px 20px;
}

@media (min-width: 768px) {
  .news-single__hero-content {
    padding: 43px;
  }
}

@media (min-width: 1024px) {
  .news-single__hero-content {
    width: 60%;
  }
}

.news-single__frame {
  position: relative;
  width: 1120px;
  max-width: 100%;
  margin: 40px auto 0;
  aspect-ratio: 1120 / 624;
  overflow: hidden;
}

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

.news-single__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.news-single__image.is-active {
  opacity: 1;
}

.news-single__image.is-portrait {
  object-fit: contain;
  background-color: var(--color-primary-navy);
}

.news-single__arrow-group {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
}

.news-single__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-neutral-white);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.news-single__arrow:hover,
.news-single__arrow:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.news-single__arrow .icon-arrow-right,
.news-single__arrow .icon-arrow-left {
  font-size: 21px;
}

.news-single__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 80px;
  color: var(--color-neutral-cool-grey);
}

@media (min-width: 1024px) {
  .news-single__body {
    padding-bottom: 120px;
  }
}

/* Related news reuses .statement-section + .news-grid from the listing page. */
.news-single-related {
  border-top: 1px solid var(--color-neutral-mid-grey);
}

.news-single-related .ecosystem-excellence {
  padding-bottom: 55px;
}

@media (min-width: 1024px) {
  .news-single-related .ecosystem-excellence {
    padding-bottom: 55px;
  }

  .news-single-related .ecosystem-excellence__title {
    padding-bottom: 0;
  }
}

/* =========================================
   CONTACT PAGE
========================================= */

@media (min-width: 768px) {
  .contact {
    padding: 54px 76px 88px;
    max-width: var(--container-max);
    margin: 0 auto
  }
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    'form'
    'info'
    'media';
}

@media (min-width: 992px) {
  .contact__grid {
    grid-template-columns: 65fr 35fr;
    grid-template-areas:
      'form media'
      'info media';
  }
}

/* --- Contact form --- */
.contact-form {
  grid-area: form;
  background: var(--color-neutral-white);
  padding: 60px 18px;
}

@media (min-width: 768px) {
  .contact-form {
    padding: 67px 68px 67px;
  }
}

.contact-form__heading {
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-neutral-black);
  margin-bottom: 24px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 48px;
  margin-bottom: 24px;
}

@media (min-width: 640px) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-form__field--full {
  grid-column: 1 / -1;
}

.contact-form__control {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-neutral-mid-grey);
  background: transparent;
  padding: 8px 0;
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: var(--color-neutral-black);
  transition: border-color 300ms ease;
}

.contact-form__control::placeholder {
  color: var(--color-neutral-cool-grey);
}

.contact-form__control:focus {
  outline: none;
  border-bottom-color: var(--color-primary-navy);
}

.contact-form__control--textarea {
  min-height: 96px;
  resize: vertical;
}

/* --- Agreement checkbox --- */
.contact-form__agreement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 24px;
}

.contact-form__checkbox {
  flex-shrink: 0;
  position: relative;
  top: 2px;
  width: 19px;
  height: 19px;
  border-radius: 4px;
  border: 1px solid var(--color-neutral-dark-grey);
  background: var(--color-neutral-white);
  transition:
    border-color 300ms ease,
    background-color 300ms ease;
}

@media (min-width: 1450px) {
  .contact-form__checkbox {
    width: 22px;
    height: 22px;
  }
}

.contact-form__checkbox:hover {
  border-color: var(--color-primary-navy);
}

.contact-form__checkbox:focus-visible {
  outline: 2px solid var(--color-primary-navy);
  outline-offset: 2px;
}

.contact-form__checkbox:checked {
  background: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
}

.contact-form__checkbox:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 5px;
  height: 9px;
  border: solid var(--color-neutral-white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-form__agreement-text {
  color: var(--color-primary-navy);
}

.contact-form__link {
  position: relative;
  color: var(--color-neutral-black);
  font-weight: 500;
}

.contact-form__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.contact-form__link:hover::after {
  transform: scaleX(1);
}

/* --- Submit button --- */
/* Reuses the shared .btn-cta component (template/components/button.php) so the
   submit button matches every other CTA button on the site. */
.contact-form__submit {
  justify-content: space-between;
  text-transform: uppercase;
}

/* --- Company info --- */
.contact-info {
  grid-area: info;
  background: var(--color-primary-navy);
  color: var(--color-neutral-white);
  padding: 48px 24px;
}

@media (min-width: 768px) {
  .contact-info {
    padding: 72px 48px;
  }
}

@media (min-width: 1450px) {
  .contact-info {
    padding: 72px 72px 72px 164px;
  }
}

.contact-info__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

@media (min-width: 480px) {
  .contact-info__columns {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .contact-info__columns {
    gap: 10px;
    margin-bottom: 72px;
  }
}

.contact-info__label {
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-primary-gold);
  margin-bottom: 16px;
}

.contact-info__block+.contact-info__block {
  margin-top: 18px;
}

.contact-info__text {
  font-family: var(--font-secondary);
  line-height: 1.4;
}

.contact-info__link {
  position: relative;
  display: inline-block;
  font-weight: 500;
}

.contact-info__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.contact-info__link:hover::after {
  transform: scaleX(1);
}

.contact-info__social {
  display: flex;
  align-items: center;
  gap: 24px;
}

.contact-info__social-link {
  font-size: 16px;
  color: var(--color-neutral-white);
  transition: all 0.3s ease;
}

/* --- Media / image column --- */
.contact-media {
  grid-area: media;
  aspect-ratio: 392 / 170;
}

@media (min-width: 768px) {
  .contact-media {
    height: auto;
    aspect-ratio: 466 / 818;
  }
}

.contact-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =========================================
   GUTENBERG
========================================= */
.news-single>.entry-content {
  font-family: var(--font-secondary);
  font-weight: 500;
  width: 100%;
  max-width: 655px;
  padding: 60px 20px !important;
}

@media (min-width: 768px) {
  .news-single>.entry-content {
    padding: 80px 0 118px !important;
    margin-left: auto;
    margin-right: auto;
  }
}

.entry-content {
  --wp--preset--font-size--normal: var(--font-size-body);
  --wp--preset--font-size--small: var(--font-size-overline);
  --wp--preset--font-size--medium: var(--font-size-body);
  --wp--preset--font-size--large: var(--font-size-h3);
  --wp--preset--font-size--x-large: var(--font-size-h3);
  --wp--preset--font-size--xx-large: var(--font-size-h3);
  --wp--preset--font-size--huge: var(--font-size-h3);

  --wp--style--unstable-gallery-gap: var(--spacing-section--sm, 16px);
  --wp--style--root--padding-left: var(--spacing-container, 16px);
  --wp--style--root--padding-right: var(--spacing-container, 16px);
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: var(--container-md, 100%);

  --spacing-stack: 60px;
  --spacing-stack--sm: 30px;
}

.entry-content .is-layout-flex {
  display: flex;
  flex-wrap: wrap;
}

.entry-content .color {
  color: var(--color);
}

.entry-content :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--font-primary);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  line-height: var(--font-heading-line-height);
  letter-spacing: var(--font-heading-letter-spacing);
  text-transform: var(--font-heading-text-transform);
}

.entry-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b, em, i) {
  font-family: var(--font-primary);
  font-weight: 400;
  font-style: normal;
}

.entry-content :is(h1) {
  font-size: var(--font-size-h1);
}

.entry-content :is(h2) {
  font-size: var(--font-size-h2);
}

.entry-content :is(h3) {
  font-size: var(--font-size-h3);
}

.entry-content :is(h4) {
  font-size: var(--font-size-h4);
}

.entry-content :is(p, li, address, th, td) {
  font-size: var(--font-size-body);
}

.entry-content :is(.text-overline) {
  font-size: var(--font-size-overline);
}

.entry-content :is(.has-small-font-size) {
  font-size: var(--wp--preset--font-size--small) !important;
}

.entry-content :is(.has-normal-font-size, .has-regular-font-size) {
  font-size: var(--wp--preset--font-size--normal) !important;
}

.entry-content :is(.has-medium-font-size) {
  font-size: var(--wp--preset--font-size--medium) !important;
}

.entry-content :is(.has-large-font-size, .has-larger-font-size) {
  font-size: var(--wp--preset--font-size--large) !important;
}

.entry-content :is(.has-x-large-font-size) {
  font-size: var(--wp--preset--font-size--x-large) !important;
}

.entry-content :is(.has-xx-large-font-size) {
  font-size: var(--wp--preset--font-size--xx-large) !important;
}

.entry-content :is(.has-huge-font-size) {
  font-size: var(--wp--preset--font-size--huge) !important;
}

.entry-content p {
  margin: 0;
  font-family: inherit;
  font-weight: inherit;
  font-size: var(--font-size-body);
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.entry-content :is(ul, ul.wp-block-list) {
  margin: 0;
  padding: 0;
  list-style-type: disc;
  padding-left: 1.2em;
}

.entry-content ul li {
  margin-bottom: 8px;
}

.entry-content :is(ul, ul.wp-block-list)>li {
  padding-left: 0.2em;
  font-size: 14px;
  line-height: 1;
}

.entry-content :is(ul, ul.wp-block-list)>li::marker {
  font-size: small;
}

.entry-content :is(ol, ol.wp-block-list) {
  margin: 0;
  padding: 0;
  list-style-type: decimal;
  list-style-position: inside;
}

/* Filament's RichEditor inserts plain <img> tags (not wrapped in
   .wp-block-image) with hardcoded width/height attributes matching the
   uploaded file's native size — with no rule below, an oversized upload
   would overflow the content column instead of scaling down. */
.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-content :is(.wp-block-image, .wp-block-video, .wp-block-media-text__media) {
  overflow: hidden;
}

.entry-content :is(.wp-block-image, .wp-block-video, .wp-block-media-text__media) :is(img, video) {
  margin: 0;
  height: auto;
  max-height: none;
  max-width: 100%;
  vertical-align: top;
  border-radius: var(--border-radius--sm);
  overflow: hidden;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.entry-content :is(.wp-block-image, .wp-block-video):is(.size-full, .size-large) {
  width: 100%;
}

.entry-content :is(.wp-block-image, .wp-block-video).size-medium {
  width: clamp(34.7222222222vw, 50rem, 100%);
}

.entry-content :is(.wp-block-image, .wp-block-video):is(.size-full,
  .size-large,
  .size-medium) :is(img, video) {
  width: 100%;
}

.entry-content .wp-block-embed .wp-block-embed__wrapper {
  position: relative;
}

.entry-content .wp-block-embed .wp-block-embed__wrapper::before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 56.25%;
}

.entry-content .wp-block-embed .wp-block-embed__wrapper>* {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.entry-content [class*='wp-block'] figcaption {
  font-style: normal;
  font-size: var(--font-base-size--sm);
  line-height: var(--font-base-line-height);
  color: inherit;
}

.entry-content .wp-block-separator {
  border: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: var(--border-width);
  background-color: var(--border-color);
  color: currentColor;
  opacity: 1;
}

.entry-content .wp-block-separator.is-style-wide {
  width: 100%;
}

.entry-content .wp-block-separator:not(.is-style-wide) {
  width: 28rem;
  max-width: 51.2820512821vw;
}

.entry-content>*,
.entry-content :is([class*='wp-block-'], figcaption) {
  margin: 0;
}

.entry-content>*:not(:first-child),
.entry-content :is(ul, ol, .wp-block-list):not(:first-child),
.entry-content :is(.wp-block-group,
  .wp-block-column,
  .wp-block-quote,
  .wp-block-media-text__content)>*:not(:first-child) {
  margin-top: var(--spacing-stack--sm);
}

.entry-content [class*='wp-block-']:not(.wp-block-paragraph,
  .wp-block-heading,
  .wp-block-list,
  .wp-block-column)+*:not(:first-child),
.entry-content *+[class*='wp-block-']:not(.wp-block-paragraph,
  .wp-block-heading,
  .wp-block-list,
  .wp-block-column):not(:first-child) {
  margin-top: var(--spacing-stack);
}

.entry-content>[class*='wp-block-']:is(.wp-block-group)+*:not(:first-child) {
  margin-top: calc(var(--spacing-section, 60px));
}

.entry-content :is(figcaption):not(:first-child),
.entry-content :is(h1, h2, h3, h4, h5, h6):not(:empty)+ :is(p, ul, ol, address):not(:empty):not(:first-child),
.entry-content :is(p):not(:empty)+ :is(ul, ol):not(:empty):not(:first-child) {
  margin-top: var(--spacing-base-leading, 30px);
}

.entry-content p:empty {
  margin-top: var(--spacing-stack--sm) !important;
}

.entry-content li:not(:first-child) {
  margin-top: var(--spacing-content--xs);
}

.entry-content ul>li> :is(ol, ul) {
  margin-top: 0.7em;
}

.entry-content [class*='wp-block-'].wp-block-spacer {
  height: calc(var(--spacing-section, 60px) * 2) !important;
}

.entry-content [class*='wp-block-'].wp-block-spacer:not(:first-child),
.entry-content [class*='wp-block-'].wp-block-spacer:not(:first-child)+[class*='wp-block-']:not(:first-child) {
  margin-top: 0 !important;
}

.entry-content table :is(thead, tfoot, tbody, th, td) {
  border: 0;
}

.entry-content table :is(thead, tfoot) {
  background-color: rgb(var(--color-white));
  color: rgb(var(--color-black));
}

.entry-content table tr> :is(th, td) {
  border-top: var(--border);
  border-bottom: var(--border);
  border-color: var(--border-color);
  padding: var(--spacing-content--sm) var(--spacing-content);
  text-align: center;
}

.entry-content table tr>th {
  font-weight: var(--font-weight-regular);
}

.entry-content .wp-block-columns {
  grid-gap: var(--wp--style--unstable-gallery-gap);
}

.entry-content .wp-block-columns>* {
  margin: 0;
}

.entry-content .wp-block-gallery {
  --wp--style--unstable-gallery-gap: var(--spacing-section--sm, 12px);
  gap: 0 !important;
  grid-gap: var(--wp--style--unstable-gallery-gap) !important;
}

.entry-content .wp-block-gallery+.wp-block-gallery {
  margin-top: var(--wp--style--unstable-gallery-gap) !important;
}

.entry-content .wp-block-gallery.is-slider {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.entry-content .wp-block-gallery.is-slider :is(.wp-block-image, .wp-block-video) {
  width: 100% !important;
}

.entry-content [class*='wp-block-'].wp-block-media-text {
  grid-row-gap: var(--spacing-stack--sm);
}

.entry-content [class*='wp-block-'].wp-block-media-text>*:not(:first-child) {
  margin-top: 0;
}

.entry-content [class*='wp-block-'].wp-block-media-text>.wp-block-media-text__content {
  padding: 0;
}

.entry-content [class*='wp-block-'].wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  grid-gap: var(--spacing-inline--sm) var(--spacing-stack);
}

.entry-content [class*='wp-block-'].wp-block-buttons>* {
  margin: 0 !important;
}

.entry-content [class*='wp-block'].aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.entry-content :where(.is-layout-constrained)>* {
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
}

.entry-content .alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.entry-content .alignwide {
  width: 1120px !important;
  max-width: 100vw !important;
  margin-left: calc(50% - (min(1120px, 100vw) / 2)) !important;
  margin-right: calc(50% - (min(1120px, 100vw) / 2)) !important;
}

.entry-content .is-layout-constrained:not(.has-global-padding)> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100%;
}

.entry-content.has-global-padding {
  padding-left: 0;
  padding-right: 0;
}

/* #endregion Content */

/* =========================================
   ENTER SITE POPUP
========================================= */
.enter-site-popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0s;
  backdrop-filter: blur(10px);
}

.enter-site-popup.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}

.enter-site-popup__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.enter-site-popup__image {
  display: block;
  width: 322px;
  height: 483px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .enter-site-popup__image {
    width: 720px;
    height: 480px;
  }
}

.enter-site-popup__button.btn-cta {
  border-color: var(--color-neutral-white);
}

.enter-site-popup__button .text-overline {
  color: var(--color-neutral-white);
}

.enter-site-popup__button:hover .text-overline {
  color: var(--color-neutral-black);
}

.enter-site-popup__button .btn-arrow-right {
  background: var(--color-neutral-white);
}

.enter-site-popup__button .icon-arrow-right {
  color: var(--color-primary-navy);
}

.enter-site-popup__button:hover .icon-arrow-right {
  color: var(--color-neutral-white);
}

body.has-enter-site-popup {
  overflow: hidden;
}

/* =========================================
   404 PAGE NOT FOUND
========================================= */
.page-not-found {
  display: flex;
}

.page-not-found .content-image__heading {
  max-width: 100%;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .page-not-found .content-image__heading {
    max-width: none;
  }
}

.page-not-found .content-image {
  padding: 0;
}

.page-not-found .content-image__content {
  padding-bottom: 50px;
}

/* deploy-test: 2026-08-17 */