.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}

.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-panel {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.header-scrolled {
  background-color: rgba(252, 248, 255, 0.9) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Header logo - fill most of the h-28 (7rem) bar; cropped asset has no excess padding */
#main-header {
  z-index: 100;
  overflow: visible;
}

#main-header,
#main-header > div {
  height: 7rem;
}

#header-logo {
  height: 6.5rem;
  display: flex;
  align-items: center;
}

#header-logo img {
  height: 6.25rem !important; /* 100px mobile - visual circle now fills the box */
  width: auto !important;
  max-width: min(62vw, 14rem);
  object-fit: contain;
}

@media (min-width: 640px) {
  #header-logo img {
    height: 6.5rem !important; /* 104px */
    max-width: none;
  }
}

@media (min-width: 1024px) {
  #header-logo {
    height: 6.75rem;
  }

  #header-logo img {
    height: 6.5rem !important; /* 104px desktop */
  }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.floating {
  animation: float 3s ease-in-out infinite;
}

.text-gradient {
  background: linear-gradient(135deg, #003aa7 0%, #2953c3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.masonry-grid {
  column-count: 1;
  column-gap: 24px;
}

@media (min-width: 768px) {
  .masonry-grid { column-count: 2; }
}

@media (min-width: 1024px) {
  .masonry-grid { column-count: 3; }
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 24px;
}

.masonry-item.is-hidden {
  display: none;
}

/* Compact vertical timelines */
.compact-timeline {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.compact-timeline .timeline-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.compact-timeline .timeline-marker {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.875rem;
}

.compact-timeline .timeline-card {
  flex: 1;
  padding: 1rem 1.25rem;
}

/* Membership application steps */
.step-timeline {
  max-width: 42rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.step-timeline .step-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 0;
}

.step-timeline .step-marker {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: 1.15rem;
  border-radius: 9999px;
  background: #003aa7;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 58, 167, 0.25);
}

.step-timeline .step-card {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem !important;
  background: #fff;
  box-shadow: 0 4px 16px rgba(12, 10, 36, 0.06);
}

.step-timeline .step-card h4 {
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.step-timeline .step-card p {
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .step-timeline .step-row {
    gap: 0.875rem;
  }

  .step-timeline .step-marker {
    width: 2.25rem;
    height: 2.25rem;
    margin-top: 1rem;
    font-size: 0.9rem;
  }

  .step-timeline .step-card {
    padding: 1rem 1.15rem !important;
  }
}

/* Events calendar */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.calendar-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #434653;
  padding: 0.5rem 0;
}

.calendar-cell {
  min-height: 4.5rem;
  border: 1px solid rgba(116, 118, 133, 0.2);
  border-radius: 0.5rem;
  padding: 0.35rem;
  background: #fff;
  position: relative;
}

.calendar-cell--empty {
  background: transparent;
  border-color: transparent;
}

.calendar-cell--event {
  background: #f0ebff;
  border-color: rgba(0, 58, 167, 0.2);
}

.calendar-day {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1a1833;
}

.calendar-event-dot {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #003aa7;
  margin-top: 0.25rem;
}

.calendar-list-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(116, 118, 133, 0.15);
  font-size: 0.9rem;
  color: #434653;
}

/* Readable membership tier cards */
.tier-card--allied {
  background: #0C0A24;
  color: #fcf8ff;
}

.tier-card--allied p {
  color: rgba(252, 248, 255, 0.88);
}

.btn-readable-secondary {
  background: #795900;
  color: #ffffff;
}

.btn-readable-secondary:hover {
  background: #6f5100;
}

/* CTBEX hero (legacy) */
.ctbex-hero {
  min-height: 85vh;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.ctbex-hero__bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ctbex-hero__overlay {
  background: linear-gradient(135deg, rgba(12, 10, 36, 0.92) 0%, rgba(12, 10, 36, 0.75) 50%, rgba(0, 58, 167, 0.55) 100%);
}

.ctbex-hero h1 {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.ctbex-hero p {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Compact page banners */
.page-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  /* Background stays full-bleed while the content tracks the .page-shell column. */
  padding-block: clamp(2rem, 4vw, 3.25rem);
  padding-inline: max(1rem, (100% - 1280px) / 2);
  border-radius: 1.5rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .page-banner {
    padding-inline: max(2rem, (100% - 1280px) / 2);
  }
}

@media (min-width: 1024px) {
  .page-banner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 3rem;
    padding-block: 3.5rem;
    min-height: 400px;
  }
}

.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 195, 41, 0.14) 0%, transparent 42%),
    radial-gradient(circle at 10% 90%, rgba(41, 83, 195, 0.2) 0%, transparent 45%);
}

.page-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 2.5rem;
  right: 2.5rem;
  height: 3px;
  background: linear-gradient(90deg, #ffc329 0%, #003aa7 50%, transparent 100%);
  border-radius: 0 0 4px 4px;
  opacity: 0.85;
}

.page-banner--about {
  background: linear-gradient(145deg, #0c0a24 0%, #152050 50%, #003aa7 100%);
  box-shadow: none;
  border-radius: 0;
}

.page-banner--home {
  background: linear-gradient(145deg, #0c0a24 0%, #152050 45%, #003aa7 100%);
  box-shadow: none;
  border-radius: 0;
}

.page-banner--ctbex {
  background: linear-gradient(145deg, #0c0a24 0%, #003aa7 45%, #1a4a9e 100%);
  box-shadow: none;
  border-radius: 0;
}

.page-banner__content {
  position: relative;
  z-index: 2;
}

.page-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffc329;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem;
  background: rgba(255, 195, 41, 0.12);
  border: 1px solid rgba(255, 195, 41, 0.3);
  border-radius: 9999px;
}

.page-banner h1 {
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.875rem, 4.5vw, 3.25rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.12;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.page-banner p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 34rem;
  margin-bottom: 1.5rem;
}

.page-banner__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-banner__chips span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
}

.page-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.page-banner__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #795900;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 0.875rem 1.75rem;
  border-radius: 9999px;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.page-banner__btn-primary:hover {
  background: #6f5100;
  transform: scale(1.03);
}

.page-banner__btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 0.875rem 1.75rem;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  transition: background 0.2s;
}

.page-banner__btn-outline:hover {
  background: rgba(255, 255, 255, 0.18);
}

.page-banner__visual {
  position: relative;
  z-index: 2;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

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

/* Opt-in treatment for flyers and posters, which must be shown whole rather
   than cropped. Photographic banners keep the default 4:3 cover. */
.page-banner__visual--poster {
  background: #ffffff;
  aspect-ratio: 4 / 5;
}

.page-banner__visual--poster img {
  object-fit: contain;
  object-position: center;
}

/* Caption sits under the artwork so flyers are not covered. */
.page-banner__visual-col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.page-banner__visual-col .page-banner__visual-badge {
  position: static;
  text-align: center;
}

@media (min-width: 1024px) {
  /* Side by side, a full-width portrait flyer would dictate the height of the
     whole banner and leave the text column swimming in empty space. Drive the
     poster from its height instead and let the width follow the ratio. */
  .page-banner__visual--poster {
    width: auto;
    height: clamp(20rem, 30vw, 26rem);
    justify-self: center;
  }

  .page-banner__visual-col {
    justify-self: center;
  }

  .page-banner__visual-col .page-banner__visual {
    justify-self: stretch;
  }

  .page-banner__visual-col .page-banner__visual-badge {
    padding: 0.4rem 0.7rem;
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  /* A fixed 4:3 ratio grows with the column, so on wide screens the photo
     outgrew the text beside it and padded the banner with dead space. Match
     the text column height instead; the photo is cropped, not letterboxed. */
  .page-banner__visual:not(.page-banner__visual--poster) {
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 18rem;
    max-height: 26rem;
  }

  /* Taken out of flow so the photo's own proportions no longer set the height. */
  .page-banner__visual:not(.page-banner__visual--poster) img {
    position: absolute;
    inset: 0;
  }
}

.page-banner__visual-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  padding: 0.65rem 1rem;
  background: rgba(12, 10, 36, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}


/* Keep short labels / names from mid-word wrapping */
.no-break,
.page-banner__chips span,
.keep-line {
  white-space: nowrap;
}

.page-banner h1,
.font-headline-lg,
.font-headline-md,
.timeline-card .font-headline-md {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.step-line::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: -20px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #2d56c6 0, #2d56c6 4px, transparent 4px, transparent 8px);
}

@media (min-width: 768px) {
  .step-line::before {
    left: 50%;
    top: 60px;
    bottom: -60px;
    width: 2px;
  }
}

/* Mobile nav - solid panel above page content (avoids stats/cards bleeding through) */
#main-header.menu-open {
  /* backdrop-filter on the header clips absolute children in some browsers */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: #fcf8ff !important;
}

#mobile-menu {
  display: none;
  z-index: 60;
}

#mobile-menu.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  height: auto;
  max-height: none;
  overflow: visible;
  background-color: #fcf8ff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 16px 40px rgba(12, 10, 36, 0.14);
  border-bottom: 1px solid rgba(196, 197, 213, 0.45);
}

.nav-link-active {
  color: #003aa7;
  font-weight: 700;
  border-bottom: 2px solid #003aa7;
}

.nav-link-hero-active {
  color: #ffffff;
  font-weight: 700;
  border-bottom: 2px solid #ffc329;
}

/* Home hero */
.index-hero {
  min-height: 100vh;
  min-height: 700px;
  padding-top: 7rem;
  padding-bottom: 4rem;
}

.index-hero__overlay {
  background: linear-gradient(135deg, rgba(12, 10, 36, 0.9) 0%, rgba(12, 10, 36, 0.78) 50%, rgba(12, 10, 36, 0.65) 100%);
}

.index-hero h1 {
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.index-hero p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* Home hero slider */
.hero-slider__frame {
  position: relative;
  width: 100%;
  min-height: 420px;
  height: clamp(420px, 52vh, 620px);
  overflow: hidden;
  background: #0c0a24;
}

.hero-slider__track {
  position: absolute;
  inset: 0;
}

.hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.hero-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

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

.hero-slider__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(12, 10, 36, 0.88) 0%,
    rgba(12, 10, 36, 0.72) 42%,
    rgba(12, 10, 36, 0.35) 100%
  );
  pointer-events: none;
}

.hero-slider__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Content max-width + the horizontal padding applied in the markup, so the
     caption lines up with the sections below instead of hugging the viewport. */
  max-width: calc(1280px + 4rem);
  margin-inline: auto;
  padding-top: 1rem;
  padding-bottom: 3.5rem;
}

.hero-slider__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 52rem;
  padding-left: inherit;
  padding-right: inherit;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  pointer-events: none;
}

.hero-slider__caption.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hero-slider__title {
  font-family: Montserrat, sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
  max-width: 100%;
}

@media (min-width: 768px) {
  .hero-slider__title {
    max-width: 28rem;
  }
}

@media (min-width: 1280px) {
  .hero-slider__title {
    max-width: 34rem;
  }
}

.hero-slider__content p {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.975rem, 1.6vw, 1.0625rem);
  line-height: 1.65;
  max-width: 36rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.hero-slider__caption .hero-slider__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-slider__btn-primary,
.hero-slider__btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.hero-slider__btn-primary {
  background: #ffc329;
  color: #261a00;
}

.hero-slider__btn-primary:hover {
  background: #ffdf9f;
  transform: translateY(-1px);
}

.hero-slider__btn-outline {
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #ffffff;
  background: transparent;
}

.hero-slider__btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.hero-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  backdrop-filter: blur(8px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-slider__arrow:hover {
  background: rgba(255, 255, 255, 0.24);
}

.hero-slider__arrow--prev {
  left: 1rem;
}

.hero-slider__arrow--next {
  right: 1rem;
}

.hero-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.hero-slider__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, width 0.2s ease;
}

.hero-slider__dot.is-active {
  width: 1.75rem;
  background: #ffc329;
}

@media (min-width: 768px) {
  .hero-slider__arrow--prev {
    left: 1.5rem;
  }

  .hero-slider__arrow--next {
    right: 1.5rem;
  }
}

@media (max-width: 767px) {
  .hero-slider__arrow {
    display: none;
  }

  .hero-slider__caption {
    justify-content: flex-end;
    padding-bottom: 3.5rem;
  }
}

#main-header[data-hero="true"]:not(.header-scrolled) .nav-link:not(.nav-link-hero-active):not(.nav-link-active) {
  color: rgba(255, 255, 255, 0.9);
}

#main-header[data-hero="true"]:not(.header-scrolled) .nav-link:not(.nav-link-hero-active):not(.nav-link-active):hover {
  color: #ffffff;
}

#main-header[data-hero="true"]:not(.header-scrolled) #mobile-menu-toggle .material-symbols-outlined {
  color: #ffffff;
}

.badge-readable {
  background: #003aa7;
  color: #ffffff;
}

.final-cta {
  background: #0c0a24;
  color: #ffffff;
}

.final-cta h2,
.final-cta p {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.benefits-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.benefits-table {
  width: 100%;
  min-width: 1020px;
  border-collapse: collapse;
}

.benefits-table th,
.benefits-table td {
  border: 1px solid rgba(116, 118, 133, 0.2);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

.benefits-table th:first-child,
.benefits-table td:first-child {
  white-space: nowrap;
}

.benefits-table th {
  background: #f0ebff;
  font-weight: 600;
}

.benefits-table .check {
  color: #003aa7;
  font-weight: 700;
}

/* Profile / officer portrait cards */
.profile-card img,
.partner-message img {
  object-fit: cover;
  object-position: top center;
}

.profile-card .profile-photo {
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  margin: 0 auto 1rem;
  border: 3px solid rgba(0, 58, 167, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.chairman-photo {
  object-fit: cover;
  object-position: top center;
}

.partner-message .partner-photo {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.ambassador-card .ambassador-photo {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  border: 3px solid rgba(0, 58, 167, 0.12);
}

.partner-carousel {
  overflow: hidden;
  position: relative;
}

.partner-carousel::before,
.partner-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4.5rem;
  z-index: 2;
  pointer-events: none;
}

.partner-carousel::before {
  left: 0;
  background: linear-gradient(to right, #f0ebff, transparent);
}

.partner-carousel::after {
  right: 0;
  background: linear-gradient(to left, #f0ebff, transparent);
}

.partner-carousel__track {
  display: flex;
  width: max-content;
  animation: partner-scroll 45s linear infinite;
}

.partner-carousel:hover .partner-carousel__track {
  animation-play-state: paused;
}

.partner-carousel__group {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.75rem 1.75rem;
}

.partner-ticker__logo {
  /* Same footprint for every partner - seals, wordmarks, and wide logos */
  width: 8.5rem;
  height: 4.75rem;
  max-width: none;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

/* Wordmarks / padded assets that read smaller than seals in the same slot */
.partner-ticker__logo[src*="LIPAD"],
.partner-ticker__logo[src*="DATA"],
.partner-ticker__logo[src*="korean-tourism"],
.partner-ticker__logo[src*="vingroup"] {
  width: 10.5rem;
  height: 6rem;
  margin-inline: -0.5rem;
  transform: scale(1.12);
}

.partner-ticker__logo[src*="MATA"] {
  width: 11rem;
  height: 6.25rem;
  margin-inline: -0.5rem;
  transform: scale(1.35);
}

.partner-ticker__logo:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.06);
}

.partner-ticker__logo[src*="LIPAD"]:hover,
.partner-ticker__logo[src*="DATA"]:hover,
.partner-ticker__logo[src*="korean-tourism"]:hover,
.partner-ticker__logo[src*="vingroup"]:hover {
  transform: scale(1.18);
}

.partner-ticker__logo[src*="MATA"]:hover {
  transform: scale(1.42);
}

@keyframes partner-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-carousel__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }

  .partner-carousel__group[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 640px) {
  .partner-ticker__logo {
    width: 6.75rem;
    height: 3.75rem;
  }

  .partner-ticker__logo[src*="LIPAD"],
  .partner-ticker__logo[src*="DATA"],
  .partner-ticker__logo[src*="korean-tourism"],
  .partner-ticker__logo[src*="vingroup"] {
    width: 8.25rem;
    height: 4.75rem;
  }

  .partner-ticker__logo[src*="MATA"] {
    width: 8.75rem;
    height: 5rem;
  }

  .partner-carousel__group {
    gap: 1.5rem;
  }

  .partner-carousel__track {
    animation-duration: 32s;
  }
}

.fb-page-embed {
  min-height: 200px;
}

.fb-page-embed .fb-page,
.fb-page-embed iframe {
  max-width: 100%;
}

.fb-gallery-iframe {
  width: 100%;
  max-width: 500px;
  min-height: 720px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 540px) {
  .fb-gallery-iframe {
    min-height: 620px;
  }
}

/* Payment modal (Contact) */
.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.payment-modal[hidden] {
  display: none !important;
}

.payment-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 36, 0.62);
  backdrop-filter: blur(4px);
}

.payment-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 32rem);
  max-height: min(90vh, 40rem);
  overflow-y: auto;
  background: #fcf8ff;
  border-radius: 1.25rem;
  border: 1px solid rgba(196, 197, 213, 0.45);
  box-shadow: 0 24px 64px rgba(12, 10, 36, 0.28);
  animation: payment-modal-in 0.22s ease-out;
}

@keyframes payment-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.payment-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(196, 197, 213, 0.35);
  background: linear-gradient(145deg, #0c0a24 0%, #152050 55%, #003aa7 100%);
  color: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
}

.payment-modal__brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.payment-modal__logo {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  border-radius: 9999px;
  padding: 0.2rem;
}

.payment-modal__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffc329;
  margin-bottom: 0.2rem;
}

.payment-modal__title {
  font-family: Montserrat, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.payment-modal__close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.2s ease;
}

.payment-modal__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.payment-modal__body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.payment-modal__bank {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid rgba(196, 197, 213, 0.4);
  border-radius: 0.9rem;
}

.payment-modal__field {
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid rgba(196, 197, 213, 0.4);
  border-radius: 0.9rem;
}

.payment-modal__field--account {
  border-color: rgba(0, 58, 167, 0.28);
  background: #f6f2ff;
}

.payment-modal__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #747685;
  margin-bottom: 0.3rem;
}

.payment-modal__value {
  font-family: Montserrat, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: #1a1833;
  line-height: 1.4;
}

.payment-modal__account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.payment-modal__account-number {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: #003aa7;
  font-variant-numeric: tabular-nums;
}

.payment-modal__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 9999px;
  background: #003aa7;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.15s ease;
}

.payment-modal__copy:hover {
  background: #2953c3;
}

.payment-modal__copy.is-copied {
  background: #795900;
}

.payment-modal__note {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #434653;
  margin-top: 0.15rem;
}

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

/* ---------- Gallery photo wall ---------- */

/* Column-based masonry keeps landscape photos and portrait posters on the same
   wall without cropping either of them. */
.gallery-masonry {
  column-count: 1;
  column-gap: 1rem;
}

@media (min-width: 640px) {
  .gallery-masonry {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .gallery-masonry {
    column-count: 3;
    column-gap: 1.25rem;
  }
}

.masonry-item {
  break-inside: avoid;
  margin: 0 0 1rem;
}

@media (min-width: 1024px) {
  .masonry-item {
    margin-bottom: 1.25rem;
  }
}

.masonry-item__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1rem;
  overflow: hidden;
  background: #ffffff;
  cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(12, 10, 36, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.masonry-item__btn:hover,
.masonry-item__btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(12, 10, 36, 0.18);
}

.masonry-item__btn:focus-visible {
  outline: 3px solid #003aa7;
  outline-offset: 3px;
}

.masonry-item__btn img {
  display: block;
  width: 100%;
  height: auto;
}

.masonry-item__overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 2.5rem 1rem 1rem;
  text-align: left;
  background: linear-gradient(to top, rgba(12, 10, 36, 0.92) 0%, rgba(12, 10, 36, 0.6) 55%, transparent 100%);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.masonry-item__btn:hover .masonry-item__overlay,
.masonry-item__btn:focus-visible .masonry-item__overlay {
  opacity: 1;
  transform: translateY(0);
}

.masonry-item__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #0c0a24;
  background: #ffc329;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
}

.masonry-item__title {
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
}

.masonry-item__meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
}

.masonry-item__zoom {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  color: #0c0a24;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.masonry-item__btn:hover .masonry-item__zoom,
.masonry-item__btn:focus-visible .masonry-item__zoom {
  opacity: 1;
  transform: scale(1);
}

/* Touch devices have no hover, so keep the caption permanently readable. */
@media (hover: none) {
  .masonry-item__overlay {
    opacity: 1;
    transform: none;
  }

  .masonry-item__zoom {
    opacity: 1;
    transform: none;
  }
}

.gallery-filter {
  padding: 0.55rem 1.1rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #ffffff;
  color: #45464f;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.gallery-filter:hover {
  border-color: #003aa7;
  color: #003aa7;
}

.gallery-filter.is-active {
  background: #003aa7;
  border-color: #003aa7;
  color: #ffffff;
}

/* ---------- Gallery lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 18, 0.92);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}

.lightbox__dialog {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 0;
  max-width: 1100px;
  /* The grid area already excludes .lightbox padding, so 100% keeps the caption
     on screen at every viewport height. */
  max-height: 100%;
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  width: 100%;
  min-height: 0;
}

.lightbox__figure img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  border-radius: 0.75rem;
}

.lightbox__caption {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  color: #ffffff;
}

.lightbox__title {
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.lightbox__meta {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}

.lightbox__counter {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.7);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.2s;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 3px solid #ffc329;
  outline-offset: 2px;
}

.lightbox__close {
  top: 0.5rem;
  right: 0.5rem;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: 0.5rem;
}

.lightbox__nav--next {
  right: 0.5rem;
}

.lightbox__nav[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .lightbox {
    padding: 3rem 4.5rem;
  }

  .lightbox__close {
    top: 0;
    right: -3.5rem;
    transform: none;
  }

  .lightbox__nav--prev {
    left: -3.5rem;
  }

  .lightbox__nav--next {
    right: -3.5rem;
  }
}

/* Shared content column. Every section that uses this lands on the same 1280px
   grid with the same gutters, so headings line up from the banner to the footer. */
.page-shell {
  width: 100%;
  max-width: calc(1280px + 2rem);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .page-shell {
    max-width: calc(1280px + 4rem);
    padding-inline: 2rem;
  }
}

/* Facebook / email / phone quick actions (header, mobile menu, footer) */
.contact-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.contact-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.contact-actions__btn:active {
  transform: scale(0.94);
}

.contact-actions__btn:focus-visible {
  outline: 2px solid #003aa7;
  outline-offset: 2px;
}

.contact-actions__icon {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
}

/* Light surfaces: top bar and the collapsed mobile menu */
.contact-actions--header .contact-actions__btn,
.contact-actions--menu .contact-actions__btn {
  color: #434653;
}

.contact-actions--header .contact-actions__btn:hover,
.contact-actions--menu .contact-actions__btn:hover {
  background: #f6f2ff;
  color: #003aa7;
}

/* Keep the icons legible when the header sits over a hero image */
#main-header[data-hero="true"]:not(.header-scrolled) .contact-actions--header .contact-actions__btn {
  color: rgba(255, 255, 255, 0.9);
}

#main-header[data-hero="true"]:not(.header-scrolled) .contact-actions--header .contact-actions__btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* Dark footer */
.contact-actions--footer .contact-actions__btn {
  color: rgba(227, 223, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
}

.contact-actions--footer .contact-actions__btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.contact-actions--footer .contact-actions__btn:focus-visible {
  outline-color: #ffc329;
}

.contact-actions__phone {
  position: relative;
}

.contact-actions__menu {
  position: absolute;
  z-index: 120;
  min-width: 13.5rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid rgba(196, 197, 213, 0.5);
  box-shadow: 0 12px 32px rgba(12, 10, 36, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.contact-actions__phone.is-open .contact-actions__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The header hangs below the button; footer and mobile menu open upward so the
   panel is never pushed off the bottom of the page. */
.contact-actions--header .contact-actions__menu {
  top: calc(100% + 0.5rem);
  right: 0;
}

.contact-actions--menu .contact-actions__menu,
.contact-actions--footer .contact-actions__menu {
  bottom: calc(100% + 0.5rem);
  left: 0;
  transform: translateY(0.25rem);
}

.contact-actions--menu .contact-actions__phone.is-open .contact-actions__menu,
.contact-actions--footer .contact-actions__phone.is-open .contact-actions__menu {
  transform: translateY(0);
}

.contact-actions__menu-label {
  padding: 0.25rem 0.625rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #747685;
}

.contact-actions__menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1833;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contact-actions__menu-item .material-symbols-outlined {
  font-size: 1.125rem;
  color: #003aa7;
}

.contact-actions__menu-item:hover,
.contact-actions__menu-item:focus-visible {
  background: #f6f2ff;
  color: #003aa7;
  outline: none;
}