/* ---------- Design tokens ---------- */
:root{
  --olive: #76922b;
  --olive-dark: #5c7220;
  --olive-light: #d8e399;
  --ink: #2a2929;
  --ink-deep: #1a1a1a;
  --ink-soft: #5b5c53;
  --ink-mute: #83847a;
  --gray-50: #F9FAFB;
  --gray-100: #F2F4F7;
  --gray-200: #EAECF0;
  --gray-300: #D0D5DD;
  --white: #ffffff;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(16,24,40,.06);
  --shadow: 0 12px 32px rgba(16,24,40,.12);
  --shadow-lg: 0 24px 60px rgba(16,24,40,.18);
  --container: 1360px;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is required — without it the width/height HTML attributes set a
   definite height and any CSS aspect-ratio on the image is silently ignored. */
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
a[href^="mailto:"], a[href^="tel:"]{ overflow-wrap: anywhere; }
ul{ list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p{ margin: 0; }
button{ font: inherit; cursor: pointer; }
input, textarea{ font: inherit; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

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

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--olive-dark);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1.5px solid transparent;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn-primary{ background: var(--olive); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--olive-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--gray-200); }
.btn-ghost:hover{ border-color: var(--olive); color: var(--olive-dark); }
.btn-outline-light{ background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover{ background: rgba(255,255,255,.12); border-color: #fff; }
.btn-lg{ padding: 15px 30px; font-size: 1rem; }
.btn-block{ width: 100%; }

/* ---------- Announcement bar ---------- */
.announce-bar{
  background: var(--ink-deep);
  color: #fff;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 44px;
  text-align: center;
  position: relative;
}
.announce-bar a{ text-decoration: underline; text-underline-offset: 2px; color: var(--olive-light); }
.announce-bar p{ margin: 0; }
.announce-close{
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #fff; opacity: .7;
  font-size: .9rem; padding: 4px 8px;
}
.announce-close:hover{ opacity: 1; }
.announce-bar.is-hidden{ display: none; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 200;
  margin-bottom: calc(-1 * var(--header-h, 82px));
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.page-no-hero .site-header{
  background: #fff; border-bottom-color: var(--gray-200); margin-bottom: 0;
}
.site-header.is-scrolled{
  background: rgba(20,22,17,.66);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 8px 30px rgba(0,0,0,.14);
  border-color: rgba(255,255,255,.08);
}
.site-header.is-scrolled .btn-ghost{ color: #fff; border-color: rgba(255,255,255,.4); }
.site-header.is-scrolled .btn-ghost:hover{ border-color: #fff; color: var(--olive-light); }
.header-inner{
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 14px;
}
.brand{ display: inline-flex; align-items: center; gap: 10px; }
.brand-logo{ display: block; height: 52px; width: auto; }

.nav{ display: flex; align-items: center; gap: 26px; }
.nav > a, .nav-link{
  position: relative;
  font-weight: 600; font-size: .93rem; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
  background: none; border: none; padding: 8px 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; font-family: inherit;
  transition: color .2s var(--ease);
}
.nav > a::after, .nav-link::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px;
  background: var(--olive-light); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
}
.nav-link::after{ right: 16px; }
.nav > a:hover, .nav-link:hover{ color: var(--olive-light); }
.nav > a:hover::after, .nav-link:hover::after,
.nav > a.is-active::after, .nav-link.is-active::after,
.nav-item.is-open > .nav-link::after{ transform: scaleX(1); }
.nav > a.is-active, .nav-link.is-active{ color: var(--olive-light); }
.nav > a:focus-visible, .nav-link:focus-visible{
  outline: 2px solid var(--olive-light); outline-offset: 4px; border-radius: 6px;
}

.nav-link.is-soon{ cursor: default; color: rgba(255,255,255,.55); }
.nav-link.is-soon:hover{ color: rgba(255,255,255,.55); }
.nav-link.is-soon::after{ content: none; }
.nav-link.is-soon em{
  font-style: normal; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255,255,255,.85); background: rgba(255,255,255,.16); padding: 2px 7px; border-radius: 999px;
}
.nav-item{ position: static; }
.nav-home-icon{ flex-shrink: 0; opacity: .85; }
.nav-caret{ flex-shrink: 0; transition: transform .2s var(--ease); }
.nav-item.is-open > .nav-link{ color: var(--olive-light); }
.nav-item.is-open .nav-caret{ transform: rotate(180deg); }

.mega-panel{
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 300;
  width: min(860px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 18px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* Bridges the gap between trigger and panel so hovering across it doesn't close. */
.mega-panel::before{ content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-item.is-open .mega-panel{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
/* Fixed (not min) height: every mega-panel must render at the same size
   regardless of how much text a given aside/card set happens to have. */
.panel-inner{ display: grid; grid-template-columns: 1fr 218px; gap: 18px; height: 306px; }

.mm-main{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mm-eyebrow{
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-mute);
}
.mm-cards{ display: grid; gap: 12px; flex: 1; grid-auto-rows: 1fr; }
.mm-cards-2{ grid-template-columns: repeat(2, 1fr); }
.mm-cards-3{ grid-template-columns: repeat(3, 1fr); }
.mm-card{
  position: relative; display: block; overflow: hidden; min-height: 0;
  border-radius: 14px; box-shadow: var(--shadow-sm); color: #fff; cursor: default;
}
.mm-card[href]{ cursor: pointer; }
.mm-card:focus-visible{ outline: 2px solid var(--olive-light); outline-offset: 2px; }
.mm-card-img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s var(--ease);
}
.mm-card[href]:hover .mm-card-img, .mm-card[href]:focus-visible .mm-card-img{ transform: scale(1.07); }
.mm-card.is-soon .mm-card-img{ filter: grayscale(.4); }
.mm-card-body{
  position: absolute; inset: auto 0 0 0; padding: 12px 13px 11px;
  background: linear-gradient(180deg, transparent, rgba(6,12,4,.5) 42%, rgba(5,10,3,.92));
}
.mm-card-body strong{ display: block; font-size: .88rem; font-weight: 800; line-height: 1.25; }
.mm-card-body small{
  display: block; margin-top: 3px; font-size: .7rem; font-weight: 500; line-height: 1.4;
  color: rgba(255,255,255,.82);
}
.mm-card-soon{
  position: absolute; top: 10px; right: 10px;
  font-style: normal; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: rgba(10,16,6,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 3px 8px; border-radius: 999px;
}

/* Portrait variant — for a cutout photo (transparent background) instead of a
   full-bleed environmental shot: a textured brand-gradient card, title in
   normal flow up top, photo as a flex item filling what's left below it (a
   flex layout — not an absolute overlay — so the two can never overlap
   regardless of how tall a given mega-panel row ends up being). */
.mm-card--portrait{
  display: flex; flex-direction: column;
  background-color: var(--olive-dark);
  background-image:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.24), transparent 50%),
    radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.6px),
    linear-gradient(155deg, var(--olive) 0%, var(--olive-dark) 100%);
  background-size: auto, 15px 15px, auto;
}
.mm-card--portrait .mm-card-body{
  position: static; order: -1; flex: none; background: none; padding: 14px 16px 2px;
}
.mm-card--portrait .mm-card-img{
  position: static; flex: 1 1 0; min-height: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.25));
}
.mm-aside{
  display: flex; flex-direction: column;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 14px; padding: 18px;
}
.mm-aside-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px;
  background: rgba(118,146,43,.12); color: var(--olive-dark); margin-bottom: 12px;
}
.mm-aside-icon svg{ width: 18px; height: 18px; }
.mm-aside-title{ font-size: .9rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
.mm-aside-text{ margin-top: 7px; margin-bottom: 16px; font-size: .78rem; color: var(--ink-soft); line-height: 1.55; }
.mm-aside-btn{ margin-top: auto; align-self: flex-start; font-size: .8rem; padding: 9px 15px; }

/* Dark promo variant of .mm-aside — used for the Meet Us mega menu's WTM London card. */
.mm-aside-dark{ background: var(--ink-deep); border-color: var(--ink-deep); padding: 16px 18px; }
.mm-aside-dark-kicker{ margin: 0 0 8px; font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.85); }
.mm-aside-dark .mm-aside-dark-logo{
  width: auto; height: 30px; margin-bottom: 10px;
  /* .mm-aside is a column flexbox — without this, the default align-items:
     stretch pulls the image to the container's full width while its height
     stays fixed, squashing it since object-fit defaults to "fill". */
  align-self: flex-start;
}
.mm-aside-dark-rule{
  height: 1px; margin-bottom: 10px;
  background-image: linear-gradient(90deg, rgba(255,255,255,.4) 0 5px, transparent 5px 10px);
  background-size: 10px 1px; background-repeat: repeat-x;
}
.mm-aside-dark-row{ margin-bottom: 8px; }
.mm-aside-dark-row span{
  display: block; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(255,255,255,.55); margin-bottom: 2px;
}
.mm-aside-dark-row strong{ display: block; font-size: .82rem; font-weight: 800; color: #fff; }

.header-actions{ display: flex; align-items: center; gap: 12px; }
.btn-agent{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.4); cursor: default;
  color: rgba(255,255,255,.94); text-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.btn-agent:hover{ border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
.btn-agent-icon{
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.16);
}
.btn-agent-icon svg{ width: 15px; height: 15px; }
.btn-agent-label{ font-weight: 700; font-size: .85rem; white-space: nowrap; }
.btn-agent em{
  font-style: normal; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255,255,255,.85); background: rgba(255,255,255,.18); padding: 2px 7px; border-radius: 999px;
}

.nav-toggle{
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; border-radius: 8px;
}
.nav-toggle span{ width: 20px; height: 2px; background: #fff; margin-inline: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,.3)); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 92vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.hero-media{ position: absolute; inset: 0; z-index: 0; background: var(--ink-deep); }
.hero-media img, .hero-media video{ width: 100%; height: 100%; object-fit: cover; }
.hero-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,20,25,.35) 0%, rgba(8,16,20,.55) 55%, rgba(6,12,16,.85) 100%);
}
.hero-content{ position: relative; z-index: 1; padding-bottom: clamp(48px, 7vw, 88px); padding-top: 140px; }
.eyebrow{
  display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--olive-light);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.eyebrow-dark{ color: var(--olive-dark); background: rgba(118,146,43,.1); border-color: rgba(118,146,43,.25); }
.hero h1{
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.06;
  max-width: 20ch;
}
.hero-sub{
  margin-top: 22px; max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(255,255,255,.88);
}
.hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-stats{
  display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 20px); margin-top: 56px;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,.22);
  max-width: 640px;
}
.hero-stats div{ display: flex; flex-direction: column; gap: 2px; }
.hero-stats strong{ font-size: 1.8rem; font-weight: 800; }
.hero-stats span:not(.hero-stat-icon){ font-size: .82rem; color: rgba(255,255,255,.75); }
.hero-stat-badge img{ height: 40px; width: auto; }
.hero-stats .hero-stat{
  flex-direction: row; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero-stat-icon{
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255,255,255,.16); color: var(--olive-light);
}
.hero-stat-icon svg{ width: 13px; height: 13px; }
.hero-stats .hero-stat > div{ gap: 1px; }
.hero-stats .hero-stat strong{ font-size: 1.05rem; line-height: 1.1; }
.hero-stats .hero-stat span:not(.hero-stat-icon){ font-size: .66rem; line-height: 1.2; }

.scroll-cue{
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 1; color: #fff; opacity: .75;
  animation: bob 2.2s ease-in-out infinite;
}
.scroll-cue:hover{ opacity: 1; }
@keyframes bob{ 0%,100%{ transform: translate(-50%,0); } 50%{ transform: translate(-50%,8px); } }

/* ---------- Logo bands (memberships / partners) ---------- */
.logo-band{ background: var(--gray-50); border-bottom: 1px solid var(--gray-200); padding-block: 44px; }
.logo-band-tint{ background: var(--white); border-top: 1px solid var(--gray-200); border-bottom: none; }
.logo-band-head{ text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: 28px; }
.logo-band-lead{ margin-top: 8px; color: var(--ink-soft); font-size: .95rem; }
.logo-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 900px; margin-inline: auto;
}
.logo-grid-wide{ grid-template-columns: repeat(4, 1fr); max-width: 1100px; }
.logo-grid li{
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.logo-grid li:hover{ transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.logo-grid-wide li:hover{ border-color: var(--olive); }
.logo-grid img{
  max-height: 56px; width: auto; object-fit: contain;
  filter: grayscale(1) opacity(.72); transition: filter .25s var(--ease);
}
.logo-grid li:hover img{ filter: grayscale(0) opacity(1); }

/* ---------- Partner logo marquee ----------
   Same looping-track technique as .places-marquee: the list is rendered twice
   and shifted by exactly one copy, so --marquee-gap must match the flex gap. */
.logo-marquee{ --marquee-gap: 16px; position: relative; overflow: hidden; padding-block: 4px; }
.logo-marquee-track{
  display: flex; gap: var(--marquee-gap); width: max-content; margin: 0; padding: 0; list-style: none;
  animation: logo-scroll var(--marquee-duration, 30s) linear infinite;
}
.logo-marquee:hover .logo-marquee-track,
.logo-marquee:focus-within .logo-marquee-track{ animation-play-state: paused; }
@keyframes logo-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-50% - var(--marquee-gap) / 2)); }
}
.logo-marquee-track li{
  flex: 0 0 auto; width: 196px; height: 104px;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.logo-marquee-track li:hover{ border-color: var(--olive); box-shadow: var(--shadow-sm); }
.logo-marquee-track img{
  max-height: 56px; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(1) opacity(.72); transition: filter .25s var(--ease);
}
.logo-marquee-track li:hover img{ filter: grayscale(0) opacity(1); }
/* Fade both edges into the band so logos slide in and out instead of being cut. */
.logo-marquee::before,
.logo-marquee::after{
  content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 2; pointer-events: none;
}
.logo-marquee::before{ left: 0; background: linear-gradient(90deg, var(--white), rgba(255,255,255,0)); }
.logo-marquee::after{ right: 0; background: linear-gradient(270deg, var(--white), rgba(255,255,255,0)); }

/* No hover to pause with on touch — fall back to a swipeable row. */
@media (hover: none){
  .logo-marquee{ overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .logo-marquee::-webkit-scrollbar{ display: none; }
  .logo-marquee::before, .logo-marquee::after{ display: none; }
  .logo-marquee-track{ animation: none; }
}
@media (prefers-reduced-motion: reduce){
  .logo-marquee{ overflow-x: auto; }
  .logo-marquee-track{ animation: none; }
}

/* ---------- Sections ---------- */
.section{ padding-block: clamp(64px, 9vw, 120px); }
.section-tint{ background: var(--gray-50); }
.section-head{ max-width: 680px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2{
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em;
  margin-top: 12px; color: var(--ink);
}
.section-lead{ margin-top: 14px; color: var(--ink-soft); font-size: 1.05rem; }
.section-head-center{ text-align: center; margin-inline: auto; }
.section-head-row{
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.section-head-row > div{ max-width: 680px; }

/* ---------- Destinations ----------
   Copy on the left, a horizontal run of tall slides on the right. The chips
   under the copy jump the track and mirror whichever slide is in view. */
.section-destinations{
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--gray-50) 100%);
}
/* Oversized, near-invisible copy of the same regional map, bleeding off the
   right edge — texture that belongs to the content rather than decoration. */
.section-destinations::before{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -12%; top: 50%; transform: translateY(-50%);
  width: 78%; aspect-ratio: 16 / 9; opacity: .05;
  background: url('../assets/img/destinations/map-region.webp') center/contain no-repeat;
}
/* Soft olive light behind the carousel. */
.section-destinations::after{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 4%; top: -10%; width: 46vw; max-width: 620px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(118,146,43,.16), rgba(118,146,43,0) 68%);
}
.section-destinations > .container{ position: relative; z-index: 1; }
/* Two lines, not three: the default h2 clamp overflows this narrower column.
   `balance` then evens the two lines so the break lands after the comma. */
.dest-intro .section-head h2{ font-size: clamp(1.7rem, 2.5vw, 2.15rem); text-wrap: balance; }
.dest-split{
  display: grid;
  /* minmax(0, …) on the carousel column: an fr track's automatic minimum is
     min-content, so without it the scrollable row of slides forces the column
     wider than the container instead of scrolling inside it. */
  grid-template-columns: minmax(290px, .72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 4vw, 56px); align-items: center;
}
.dest-intro .section-head{ max-width: none; margin-bottom: 26px; }

/* Regional map. The artwork is the offices map with its baked-in city labels
   inpainted out (assets/img/destinations/map-region.webp); pin positions come
   from mapX/mapY on each destination in homepage.json. */
.dest-map{ position: relative; margin: 26px 0; max-width: 420px; }
.dest-map-img{ display: block; width: 100%; height: auto; }
.dest-map-pins{ position: absolute; inset: 0; }
.dest-pin{
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  width: 26px; height: 26px; padding: 0; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dest-pin-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--olive); box-shadow: 0 0 0 2.5px #fff, 0 1px 4px rgba(16,24,40,.35);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.dest-pin-pulse{
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--olive); opacity: 0; animation: pin-pulse 2.4s ease-out infinite;
}
.dest-pin:hover .dest-pin-dot,
.dest-pin:focus-visible .dest-pin-dot,
.dest-pin.is-current .dest-pin-dot{ transform: scale(1.5); background: var(--olive-dark); }
.dest-pin:focus-visible{ outline: none; }
.dest-pin:focus-visible .dest-pin-dot{ box-shadow: 0 0 0 3px var(--olive-light); }
/* Name appears on hover, or permanently for the destination being shown. */
.dest-pin-label{
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -2px);
  padding: 3px 9px; border-radius: 99px; white-space: nowrap;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  background: var(--ink-deep); color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.dest-pin:hover .dest-pin-label,
.dest-pin:focus-visible .dest-pin-label,
.dest-pin.is-current .dest-pin-label{ opacity: 1; transform: translate(-50%, -6px); }
.dest-pin.is-current .dest-pin-label{ background: var(--olive-dark); }

.dest-carousel{ position: relative; min-width: 0; }
.dest-track{
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity;
  scroll-behavior: smooth; padding: 4px 4px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.dest-track::-webkit-scrollbar{ display: none; }
.dest-slide{
  position: relative; flex: 0 0 auto; width: clamp(205px, 18.5vw, 245px);
  aspect-ratio: 2 / 3; border-radius: var(--radius); overflow: hidden;
  scroll-snap-align: start; box-shadow: var(--shadow-sm); color: #fff;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.dest-slide:hover, .dest-slide:focus-visible{ box-shadow: var(--shadow-lg); transform: translateY(-4px); outline: none; }
.dest-slide-img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease), filter .35s var(--ease);
}
.dest-slide:hover .dest-slide-img,
.dest-slide:focus-within .dest-slide-img,
.dest-slide.is-active .dest-slide-img{ transform: scale(1.06); filter: brightness(.45); }
.dest-slide-overlay{
  position: absolute; inset: auto 0 0 0; padding: 22px 20px;
  background: linear-gradient(180deg, transparent 30%, rgba(6,14,18,.9));
}
.dest-slide h3{ font-size: 1.25rem; font-weight: 800; }
/* Description and CTA stay folded away until the slide is the one being read. */
.dest-slide-desc{
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.88);
  transition: max-height .35s var(--ease), opacity .3s var(--ease), margin-top .35s var(--ease);
}
.dest-slide-cta{
  display: inline-flex; align-items: center; gap: 6px;
  max-height: 0; opacity: 0; overflow: hidden;
  font-size: .78rem; font-weight: 700; color: var(--olive-light);
  transition: max-height .35s var(--ease), opacity .3s var(--ease), margin-top .35s var(--ease);
}
.dest-slide-cta svg{ width: 13px; height: 13px; transition: transform .25s var(--ease); }
.dest-slide:hover .dest-slide-desc,
.dest-slide:focus-within .dest-slide-desc,
.dest-slide.is-active .dest-slide-desc{ max-height: 260px; opacity: 1; margin-top: 10px; }
.dest-slide:hover .dest-slide-cta,
.dest-slide:focus-within .dest-slide-cta,
.dest-slide.is-active .dest-slide-cta{ max-height: 40px; opacity: 1; margin-top: 12px; }
.dest-slide:hover .dest-slide-cta svg{ transform: translateX(3px); }

/* Arrows hug the outer edges of the track. */
.dest-carousel .slider-arrow-prev{ left: -18px; }
.dest-carousel .slider-arrow-next{ right: -18px; }

/* ---------- Why choose us ----------
   The heading spans the full container so it doesn't wrap awkwardly in a
   narrow column; below it, one photo on the left and the reasons as a plain
   ruled list on the right. Earlier this was a photo collage plus four boxed
   cards, which put too many competing shapes in one section. */
.section-why{
  position: relative; overflow: hidden;
  /* White, not .section-tint: #destinations fades out to --gray-50, so a
     tinted section here erased the boundary between the two. */
  background: var(--white); border-top: 1px solid var(--gray-200);
}
.section-why::before{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -12%; top: 8%; width: 46vw; max-width: 620px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(118,146,43,.16), rgba(118,146,43,0) 68%);
}
.section-why > .container{ position: relative; z-index: 1; }
.why-head{ max-width: 780px; margin-bottom: clamp(32px, 4vw, 48px); }

.why-body{
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4.5vw, 64px); align-items: start;
}

/* Single photo, one credential chip. */
.why-photo{
  position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg);
}
.why-photo img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
.why-photo:hover img{ transform: scale(1.05); }
.why-cert{
  position: absolute; left: 18px; bottom: 18px; margin: 0;
  padding: 9px 13px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.94); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.why-cert img{ display: block; width: 118px; height: auto; }

/* Ruled list rather than four boxes: fewer edges, more room per line. */
.why-list{ list-style: none; margin: 0; padding: 0; }
.why-feature{
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 0; border-top: 1px solid var(--gray-200);
  transition: border-color .3s var(--ease);
}
.why-feature:first-child{ border-top: none; padding-top: 0; }
.why-feature:last-child{ padding-bottom: 26px; }
.why-feature:hover{ border-color: rgba(118,146,43,.4); }
.why-feature-icon{
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(118,146,43,.1); color: var(--olive-dark);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.why-feature:hover .why-feature-icon{ background: var(--olive); color: #fff; }
.why-feature-icon svg{ width: 20px; height: 20px; }
.why-feature h3{ font-size: 1.02rem; font-weight: 800; color: var(--ink); line-height: 1.35; }
.why-feature p{ margin-top: 5px; font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }

/* ---------- Excellent Safety & Knowledge ---------- */
/* Sits between two sections that are already tinted/white, so it gets its own
   faint olive wash to keep the page rhythm readable. */
/* Starts tinted so it reads apart from the white #why section above it. */
.section-safety{ background: linear-gradient(180deg, var(--gray-50) 0%, rgba(118,146,43,.07) 100%); }
.section-safety .section-head{ margin-bottom: 22px; }
.safety-body{
  max-width: 860px; margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center; color: var(--ink-soft); font-size: .97rem; line-height: 1.75;
}
.safety-body strong{ color: var(--ink); font-weight: 800; }
.safety-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* The cards themselves are .community-card — the grid just overrides the
   fixed track width so they stretch to the column. */
.safety-grid .community-card{ width: auto; flex: initial; }

/* ---------- Services ---------- */
.service-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card{
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 300px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease);
}
.service-card:hover{ box-shadow: var(--shadow-lg); }
.service-card-img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease), filter .3s var(--ease);
}
.service-card:hover .service-card-img{ transform: scale(1.06); filter: brightness(.8); }
.service-card-body{
  position: absolute; inset: 0; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(6,14,18,.28) 0%, rgba(6,14,18,.3) 35%, rgba(6,14,18,.95) 100%);
  color: #fff;
}
.service-num{ font-size: .78rem; font-weight: 800; color: var(--olive-light); letter-spacing: .06em; }
.service-card h3{ margin-top: 8px; font-size: 1.2rem; font-weight: 800; }
.service-card p{ margin-top: 8px; font-size: .88rem; color: rgba(255,255,255,.85); max-width: 34ch; }
.service-grid > :nth-child(4), .service-grid > :nth-child(5){ grid-column: span 1; }
@media (min-width: 901px){
  .service-grid{ grid-template-columns: repeat(6, 1fr); }
  .service-grid > :nth-child(1){ grid-column: span 2; }
  .service-grid > :nth-child(2){ grid-column: span 2; }
  .service-grid > :nth-child(3){ grid-column: span 2; }
  .service-grid > :nth-child(4){ grid-column: span 3; }
  .service-grid > :nth-child(5){ grid-column: span 3; }
}

/* ---------- Travel styles ---------- */
.style-slider{ position: relative; }
.style-track{
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity;
  scroll-behavior: smooth; padding: 4px 4px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.style-track::-webkit-scrollbar{ display: none; }
.style-card{
  position: relative; flex: 0 0 auto; width: clamp(230px, 27vw, 300px);
  aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
  scroll-snap-align: start; box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease);
}
.style-card:hover, .style-card:focus-visible{ box-shadow: var(--shadow-lg); outline: none; }
.style-card-img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease), filter .3s var(--ease);
}
.style-card:hover .style-card-img,
.style-card:focus-within .style-card-img,
.style-card.is-active .style-card-img{ transform: scale(1.06); filter: brightness(.55); }
.style-card-overlay{
  position: absolute; inset: auto 0 0 0; padding: 20px;
  background: linear-gradient(180deg, transparent 35%, rgba(6,14,18,.94));
  color: #fff;
}
.style-card-overlay h3{ font-size: 1.05rem; font-weight: 800; }
.style-card-desc{
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.85);
  transition: max-height .35s var(--ease), opacity .3s var(--ease), margin-top .35s var(--ease);
}
.style-card:hover .style-card-desc,
.style-card:focus-within .style-card-desc,
.style-card.is-active .style-card-desc{
  max-height: 240px; opacity: 1; margin-top: 10px;
}

/* ---------- Support to you ---------- */
.section-support{ position: relative; isolation: isolate; background: var(--gray-50); overflow: hidden; }
.section-support::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(247,248,244,.93), rgba(247,248,244,.96)),
    url('../assets/img/backgrounds/support-bg.webp') center/cover no-repeat;
}
.support-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.support-card{
  border-radius: var(--radius); padding: 28px 24px;
  background: rgba(255,255,255,.8); border: 1px solid var(--gray-200);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.support-card-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 16px;
  background: rgba(118,146,43,.12); color: var(--olive-dark);
}
.support-card-icon svg{ width: 26px; height: 26px; }
.support-card h3{ font-size: 1.05rem; font-weight: 800; }
.support-card p{ margin-top: 10px; font-size: .9rem; color: var(--ink-soft); }
/* Icon slot variant for real photo/graphic icons (already-circular badge art) instead of an inline SVG on a tinted background */
.support-card-icon-img{ width: 56px; height: 56px; background: none; }
.support-card-icon-img img{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Careers "Our Values" — page-scoped look (both #values and #valuesGrid ids
   are reused by About's "What We Value" section on the same shared classes,
   so every rule here is scoped under [data-page="careers"] to leave About's
   instance untouched). Swaps the shared compass/map support-bg for a real
   team photo and turns the cards into a dark glass style over it. */
body[data-page="careers"] #values.section-support::before{
  background:
    linear-gradient(180deg, rgba(9,15,9,.62), rgba(9,15,9,.55) 40%, rgba(9,15,9,.8)),
    url('../assets/img/about/team-all-4.webp') center 65%/cover no-repeat;
}
@media (min-width: 900px){
  body[data-page="careers"] #values.section-support{ background-attachment: fixed; }
}
body[data-page="careers"] #values .eyebrow-dark{ color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
body[data-page="careers"] #values .section-head h2{ color: #fff; }
body[data-page="careers"] #values .section-lead{ color: rgba(255,255,255,.78); }
body[data-page="careers"] #valuesGrid .support-card{
  background: rgba(20,26,15,.55); border-color: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
body[data-page="careers"] #valuesGrid .support-card:hover{
  transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0,0,0,.35);
  background: rgba(30,37,19,.72); border-color: rgba(197,217,145,.45);
}
body[data-page="careers"] #valuesGrid .support-card-icon{
  background: linear-gradient(155deg, var(--olive-light), var(--olive));
  color: #fff; transition: transform .3s var(--ease);
}
body[data-page="careers"] #valuesGrid .support-card:hover .support-card-icon{ transform: scale(1.08) rotate(-4deg); }
body[data-page="careers"] #valuesGrid .support-card h3{ color: #fff; }
body[data-page="careers"] #valuesGrid .support-card p{ color: rgba(255,255,255,.72); }

/* ---------- Community stories slider ---------- */
.community-slider{ position: relative; }
.community-track{
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity;
  scroll-behavior: smooth; padding: 4px 4px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.community-track::-webkit-scrollbar{ display: none; }
.community-card{
  position: relative; flex: 0 0 auto; width: clamp(230px, 27vw, 300px);
  aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
  scroll-snap-align: start; box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease);
}
.community-card:hover, .community-card:focus-visible{ box-shadow: var(--shadow-lg); outline: none; }
.community-card-img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease), filter .3s var(--ease);
}
.community-card:hover .community-card-img,
.community-card:focus-within .community-card-img,
.community-card.is-active .community-card-img{ transform: scale(1.06); filter: brightness(.55); }
.community-card-overlay{
  position: absolute; inset: auto 0 0 0; padding: 20px;
  background: linear-gradient(180deg, transparent 35%, rgba(6,14,18,.94));
  color: #fff;
}
.community-card-loc{ font-size: .76rem; font-weight: 700; color: var(--olive-light); }
.community-card-overlay h3{ margin-top: 4px; font-size: 1.05rem; font-weight: 800; }
.community-card-desc{
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.85);
  transition: max-height .35s var(--ease), opacity .3s var(--ease), margin-top .35s var(--ease);
}
.community-card:hover .community-card-desc,
.community-card:focus-within .community-card-desc,
.community-card.is-active .community-card-desc{
  max-height: 220px; opacity: 1; margin-top: 10px;
}
.slider-arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: #fff; color: var(--ink); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.slider-arrow:hover{ background: var(--olive); color: #fff; }
.slider-arrow-prev{ left: -8px; }
.slider-arrow-next{ right: -8px; }

/* ---------- Responsible band ---------- */
.responsible{
  position: relative; color: #fff; padding-block: clamp(64px, 9vw, 110px); overflow: hidden;
  background: linear-gradient(rgba(10,14,10,.87), rgba(10,14,10,.91)), url('../assets/img/styles/responsible-travel.webp') center/cover no-repeat;
}
@media (min-width: 900px){
  .responsible{ background-attachment: fixed; }
}
.responsible-inner{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.responsible h2{ font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 800; margin-top: 12px; letter-spacing: -.02em; }
.responsible p{ margin-top: 16px; color: rgba(255,255,255,.85); max-width: 52ch; }
.responsible .btn{ margin-top: 26px; }
.responsible-stats{ display: grid; gap: 22px; }
.responsible-stats li{
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius); padding: 20px 24px;
  display: flex; align-items: baseline; gap: 16px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.responsible-stats strong{ font-size: 1.7rem; font-weight: 800; color: var(--olive-light); flex-shrink: 0; }
.responsible-stats span{ font-size: .9rem; color: rgba(255,255,255,.85); }

/* ---------- Testimonials ---------- */
.section-testimonials{
  position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(rgba(9,15,9,.84), rgba(9,15,9,.88)), url('../assets/img/destinations/bali.webp') center/cover no-repeat;
}
@media (min-width: 900px){
  .section-testimonials{ background-attachment: fixed; }
}
.section-testimonials .eyebrow-dark{ color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
.section-testimonials h2{ color: #fff; }
.section-testimonials .section-head{ text-align: center; margin-inline: auto; }

.testimonial-slider{
  position: relative; max-width: 760px; margin: 8px auto 0; text-align: center;
  padding: clamp(40px, 5vw, 56px) clamp(24px, 5vw, 64px);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.testimonial-quote-mark{
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-family: Georgia, serif; font-size: 4.5rem; line-height: 1;
  color: var(--olive-light); opacity: .55;
}
.testimonial-track{ display: grid; }
.testimonial{
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  margin: 0;
}
.testimonial.is-active{ opacity: 1; visibility: visible; transform: translateY(0); }
.testimonial p{ font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 500; color: #fff; line-height: 1.6; }
.testimonial footer{
  margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; color: rgba(255,255,255,.8); font-weight: 600;
  padding: 8px 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
}
.testimonial-nav{ display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 32px; }
.testimonial-arrow{
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.testimonial-arrow:hover{ background: var(--olive); border-color: var(--olive); transform: translateY(-2px); }
.testimonial-arrow svg{ width: 16px; height: 16px; }
.testimonial-dots{ display: flex; justify-content: center; gap: 8px; }
.testimonial-dots button{
  width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.35); padding: 0;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.testimonial-dots button.is-active{ background: var(--olive-light); transform: scale(1.3); }

/* ---------- Offices ---------- */
/* 12-column track so one card can run full width as a feature while the
   rest sit three-up — seven offices would otherwise leave an orphan. */
.office-grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 1.6vw, 24px); }
.office-card{
  grid-column: span 4;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.office-card:hover{ border-color: rgba(118,146,43,.45); transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.office-card-media{ position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.office-card-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.office-card:hover .office-card-media img{ transform: scale(1.06); }
.office-card-media::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,28,16,0) 34%, rgba(24,28,16,.8) 100%);
}
.office-card-media h3{
  position: absolute; left: 20px; right: 20px; bottom: 15px; z-index: 1;
  color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em;
}
.office-tag{
  position: absolute; top: 13px; left: 13px; z-index: 1;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--olive-dark);
}

.office-card-body{ display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 18px 20px 20px; }
.office-address{ display: flex; align-items: flex-start; gap: 11px; font-size: .85rem; color: var(--ink-mute); line-height: 1.55; }
.office-icon{
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(118,146,43,.12); color: var(--olive-dark);
}
.office-icon svg{ width: 16px; height: 16px; }
.office-contact{ margin-top: auto; padding-top: 13px; border-top: 1px solid var(--gray-200); display: grid; gap: 8px; }
.office-contact a{ display: flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; color: var(--ink); }
.office-contact a svg{ width: 15px; height: 15px; color: var(--olive); flex-shrink: 0; }
.office-contact a:hover{ color: var(--olive-dark); }
.office-events-soon{ display: flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; color: var(--ink-mute); cursor: default; }

/* Framed photo with a small pill tag — used next to overview-grid text blocks */
.media-frame{ position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.media-frame img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Quick-jump chip nav — floats over the bottom edge of a page-hero so a long
   reference page (Traveler Indonesia/Malaysia) reads as organized from the
   first scroll, not just a stack of sections. */
.quick-nav{
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; max-width: var(--container); margin: -32px auto 0;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 18px clamp(16px, 3vw, 26px);
}
.quick-nav-link{
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 999px; background: var(--gray-50); border: 1px solid var(--gray-200);
  color: var(--ink); font-weight: 700; font-size: .86rem; text-decoration: none; white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.quick-nav-link svg{ width: 16px; height: 16px; color: var(--olive); flex-shrink: 0; }
.quick-nav-link:hover{ background: rgba(118,146,43,.1); border-color: rgba(118,146,43,.35); transform: translateY(-2px); }
@media (max-width: 640px){ .quick-nav{ margin-top: -24px; gap: 8px; } .quick-nav-link{ padding: 8px 13px; font-size: .8rem; } }

/* Resource cards — a small 1–2 up grid of "guide" cards (arrival info, road-
   trip tips), richer than an office-card since there are only one or two. */
.resource-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.resource-grid.resource-grid-1{ grid-template-columns: 1fr; }
.resource-card{
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.resource-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.resource-grid-1 .resource-card{ flex-direction: row; min-height: 320px; max-height: 420px; }
.resource-grid-1 .resource-card-body{ justify-content: center; }
.resource-card-media{ position: relative; aspect-ratio: 4/3; overflow: hidden; flex-shrink: 0; }
.resource-grid-1 .resource-card-media{ width: 42%; aspect-ratio: auto; }
.resource-card-media img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.resource-card:hover .resource-card-media img{ transform: scale(1.05); }
.resource-card-body{ padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.resource-card-body h3{ font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.resource-card-body p{ color: var(--ink-soft); font-size: .92rem; line-height: 1.65; flex: 1; }
.resource-card-body .btn{ align-self: flex-start; margin-top: 4px; }
@media (max-width: 860px){
  .resource-grid{ grid-template-columns: 1fr; }
  .resource-grid-1 .resource-card{ flex-direction: column; }
  .resource-grid-1 .resource-card-media{ width: auto; aspect-ratio: 4/3; }
}

/* Hotline panel — the 24/7 WhatsApp/phone contact block, styled as a warm
   olive-tinted panel rather than a plain white card. */
.hotline-panel{
  max-width: 820px; margin: 0 auto 48px; display: flex; gap: clamp(18px, 3vw, 26px); align-items: flex-start;
  padding: clamp(26px, 3.4vw, 40px); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(118,146,43,.09), rgba(118,146,43,.02));
  border: 1px solid rgba(118,146,43,.22);
}
.hotline-panel-icon{
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%;
  background: var(--olive); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.hotline-panel-icon svg{ width: 26px; height: 26px; }
.hotline-panel-body h3{ font-size: 1.1rem; font-weight: 800; }
.hotline-panel-body > p{ margin-top: 8px; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.hotline-panel-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.hotline-panel-note{
  margin-top: 6px; padding-top: 14px; border-top: 1px dashed rgba(118,146,43,.32);
  font-size: .82rem; color: var(--ink-mute); line-height: 1.55;
}
@media (max-width: 640px){ .hotline-panel{ flex-direction: column; } }

/* Headquarters — full width, photo beside the details */
.office-card--feature{ grid-column: span 12; flex-direction: row; }
/* The image is taken out of flow so it does not force the card's height —
   min-height drives it instead, and the photo simply covers whatever is left. */
.office-card--feature .office-card-media{ flex: 0 0 46%; aspect-ratio: auto; min-height: 340px; }
.office-card--feature .office-card-media img{ position: absolute; inset: 0; }
.office-card--feature .office-card-media::after{
  background: linear-gradient(90deg, rgba(24,28,16,.45) 0%, rgba(24,28,16,0) 55%);
}
.office-card--feature .office-card-media h3{ font-size: clamp(1.5rem, 2.4vw, 2rem); bottom: 22px; left: 26px; }
.office-card--feature .office-card-body{ justify-content: center; gap: 16px; padding: clamp(24px, 3vw, 38px); }
.office-card--feature .office-address{ font-size: .95rem; max-width: 52ch; }
.office-card--feature .office-contact{
  margin-top: 0; padding-top: 0; border-top: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.office-card--feature .office-contact a{
  padding: 10px 16px; border-radius: 999px; font-size: .9rem;
  background: var(--gray-50); border: 1px solid var(--gray-200);
}
.office-card--feature .office-contact a:hover{ background: rgba(118,146,43,.1); border-color: rgba(118,146,43,.35); }

/* Second HQ — same size as the rest, marked with an olive rail */
.office-card--hq{ border-color: rgba(118,146,43,.4); box-shadow: inset 0 3px 0 var(--olive), var(--shadow-sm); }

@media (max-width: 1080px){
  .office-card{ grid-column: span 6; }
  .office-card--feature{ grid-column: span 12; }
}
@media (max-width: 860px){
  .office-card--feature{ flex-direction: column; }
  .office-card--feature .office-card-media{ flex: none; aspect-ratio: 3 / 2; }
  .office-card--feature .office-card-media::after{
    background: linear-gradient(180deg, rgba(24,28,16,0) 34%, rgba(24,28,16,.8) 100%);
  }
}
@media (max-width: 860px){
  .office-card--feature .office-card-media{ min-height: 0; }
  .office-card--feature .office-card-media img{ position: static; }
}
@media (max-width: 640px){
  .office-card{ grid-column: span 12; }
}

/* ---------- Region/island cards (Traveler Indonesia/Malaysia) ---------- */
.region-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.region-card{
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.region-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(118,146,43,.4); }
.region-card-media{ position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.region-card-media img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.region-card:hover .region-card-media img{ transform: scale(1.08); }
.region-card-media::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6,12,4,.75));
}
.region-card-badge{
  position: absolute; top: 14px; left: 14px; z-index: 1;
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff;
  background: rgba(10,16,6,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 4px 10px; border-radius: 999px;
}
.region-card-media h3{ position: absolute; left: 18px; bottom: 14px; z-index: 1; color: #fff; font-size: 1.3rem; font-weight: 800; }
.region-card-links{ display: flex; flex-direction: column; padding: 8px 6px; }
.region-link{
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: .86rem; font-weight: 600; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.region-link:hover{ background: rgba(118,146,43,.08); color: var(--olive-dark); }
.region-link-icon{
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(118,146,43,.1); color: var(--olive-dark);
}
.region-link-icon svg{ width: 16px; height: 16px; }
.region-link-text{ flex: 1; min-width: 0; }
.region-link-arrow{
  flex-shrink: 0; display: flex; color: var(--olive);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.region-link-arrow svg{ width: 16px; height: 16px; }
.region-link:hover .region-link-arrow{ opacity: 1; transform: none; }
.region-link.is-soon{ color: var(--ink-mute); cursor: default; }
.region-link.is-soon .region-link-icon{ background: var(--gray-100); color: var(--ink-mute); }
.region-link-tag{
  flex-shrink: 0; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-mute); background: var(--gray-100); padding: 3px 9px; border-radius: 999px;
}
@media (max-width: 900px){ .region-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .region-grid{ grid-template-columns: 1fr; } }

/* ---------- Quick contact list (light sections) ---------- */
.quick-contact-list{ margin-top: 28px; display: grid; gap: 12px; }
.quick-contact-list li{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--gray-200);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.quick-contact-list li:hover{ border-color: var(--olive); transform: translateY(-2px); }
.quick-contact-icon{
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(118,146,43,.12); color: var(--olive-dark);
}
.quick-contact-icon svg{ width: 18px; height: 18px; }
.quick-contact-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quick-contact-label{ color: var(--ink-mute); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.quick-contact-list a{ color: var(--ink); font-weight: 700; font-size: .95rem; }
.quick-contact-list a:hover{ color: var(--olive-dark); }

/* ---------- Mission & Vision ---------- */
.mission-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.mission-card{
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(155deg, #fff 0%, var(--gray-50) 55%, rgba(118,146,43,.1) 100%);
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mission-card::before{
  content: ""; position: absolute; z-index: -1; top: -50px; right: -50px; width: 190px; height: 190px;
  border-radius: 50%; background: radial-gradient(circle, rgba(118,146,43,.16), transparent 70%);
}
.mission-card::after{
  content: ""; position: absolute; inset: auto 0 0 0; height: 4px;
  background: linear-gradient(90deg, var(--olive), var(--olive-light));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.mission-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 48px rgba(92,114,32,.2); border-color: transparent; }
.mission-card:hover::after{ transform: scaleX(1); }
.mission-card-icon{
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 18px; margin-bottom: 22px;
  background: linear-gradient(135deg, var(--olive), var(--olive-dark)); color: #fff;
  box-shadow: 0 10px 24px rgba(92,114,32,.3);
}
.mission-card-icon svg{ width: 28px; height: 28px; }
.mission-card h3{ font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; }
.mission-card p{ font-size: .98rem; color: var(--ink-soft); line-height: 1.65; }

/* ---------- Timeline ---------- */
/* Floating "bothside" layout (matches the old live site's About Us timeline
   widget): a center gradient rail with icon nodes, cards alternating left/right. */
.timeline{ position: relative; max-width: 980px; margin: 0 auto; list-style: none; padding: 0; }
.timeline::before{
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
  background: linear-gradient(180deg, var(--olive-light), var(--olive) 45%, var(--olive-dark));
  border-radius: 3px;
}
.timeline-item{
  position: relative; display: grid; grid-template-columns: 1fr 52px 1fr; column-gap: 28px;
  align-items: start; padding-bottom: 46px;
}
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-node{
  grid-column: 2; justify-self: center; margin-top: 4px;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--olive); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--gray-50), var(--shadow-sm); z-index: 1;
}
.timeline-node svg{ width: 18px; height: 18px; }
.timeline-card{
  grid-column: 1; min-width: 0; text-align: right;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 20px 26px;
}
.timeline-item:nth-child(even) .timeline-card{ grid-column: 3; text-align: left; }
.timeline-card:hover{ box-shadow: var(--shadow); transform: translateY(-3px); }
.timeline-card-year{
  display: inline-flex; font-size: .74rem; font-weight: 800; letter-spacing: .03em;
  color: var(--olive-dark); background: rgba(118,146,43,.1); padding: 3px 12px; border-radius: 999px;
  margin-bottom: 10px;
}
.timeline-card h3{ font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; color: var(--ink); }
.timeline-card p{ font-size: .92rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* Entrance animation: the node pops in first, then its own card fades in. Hover's
   box-shadow/transform live on the same rule so the shorthand isn't clobbered. */
.timeline-item.reveal{ opacity: 1; transform: none; transition: none; }
.timeline-item.reveal .timeline-node{
  transform: scale(.35); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
  transition-delay: var(--d, 0ms);
}
.timeline-item.reveal .timeline-card{
  opacity: 0;
  transition: opacity .55s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 120ms), 0s, 0s;
}
.timeline-item.reveal.is-visible .timeline-node{ transform: scale(1); opacity: 1; }
.timeline-item.reveal.is-visible .timeline-card{ opacity: 1; }
@media (max-width: 760px){
  .timeline::before{ left: 19px; margin-left: 0; }
  .timeline-item{ grid-template-columns: 38px 1fr; column-gap: 18px; padding-bottom: 30px; }
  .timeline-node{ grid-column: 1; width: 34px; height: 34px; margin-top: 2px; box-shadow: 0 0 0 5px var(--gray-50), var(--shadow-sm); }
  .timeline-node svg{ width: 15px; height: 15px; }
  .timeline-card, .timeline-item:nth-child(even) .timeline-card{ grid-column: 2; text-align: left; padding: 16px 20px; }
}

/* ---------- Team banner & departments ---------- */
.team-banner{
  width: 100%; aspect-ratio: 21/9; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  margin-bottom: clamp(28px, 4vw, 40px);
}

/* ---------- Careers: team showcase gallery ----------
   A calm, editorial featured-photo-plus-filmstrip gallery: one large photo
   with a slow Ken Burns drift, a row of thumbnails below to jump to any
   photo, and gentle auto-advance that pauses on interaction. */
.team-showcase{ max-width: 1000px; margin: 28px auto 0; }
.team-showcase-main{
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--gray-100);
}
.team-showcase-main img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.09);
  transition: opacity 1.1s var(--ease), transform 7s linear;
}
.team-showcase-main img.is-active{ opacity: 1; transform: scale(1); z-index: 1; }
.team-showcase-main::after{
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,7,0) 55%, rgba(8,12,7,.4) 100%);
}
.team-showcase-nav{
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.85); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transition: opacity .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.team-showcase-main:hover .team-showcase-nav{ opacity: 1; }
.team-showcase-nav:hover{ background: var(--olive); color: #fff; }
.team-showcase-nav-prev{ left: 16px; }
.team-showcase-nav-next{ right: 16px; }
.team-showcase-thumbs{
  display: flex; gap: 10px; margin-top: 16px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.team-showcase-thumbs::-webkit-scrollbar{ display: none; }
.team-showcase-thumb{
  flex: 0 0 auto; width: 92px; aspect-ratio: 4/3; padding: 0; cursor: pointer;
  border-radius: 10px; overflow: hidden; border: 2px solid transparent;
  opacity: .55; transition: opacity .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease);
}
.team-showcase-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.team-showcase-thumb:hover{ opacity: .85; transform: translateY(-2px); }
.team-showcase-thumb.is-active{ opacity: 1; border-color: var(--olive); }
@media (max-width: 640px){
  .team-showcase-main{ aspect-ratio: 4/3; }
  .team-showcase-thumb{ width: 72px; }
}

/* ---------- Meet Us: profile cards ---------- */
.profile-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 640px; margin-inline: auto; }
.profile-grid.profile-grid-3{ grid-template-columns: repeat(3, 1fr); max-width: 900px; }
.profile-grid.profile-grid-directory{
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); max-width: none; gap: 20px;
}
.profile-card{
  display: block; text-align: center; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 36px) 24px; text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.profile-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.profile-photo{ width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; box-shadow: var(--shadow-sm); display: block; }
.profile-card h3{ font-size: 1.1rem; font-weight: 800; }
.profile-role{ margin-top: 4px; font-size: .85rem; font-weight: 700; color: var(--olive-dark); }
.profile-bio{ margin-top: 12px; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Meet Us: WTM London event badges ----------
   The team cards are styled as conference passes. The five stops of
   --wtm-spectrum are sampled straight from the WTM London logo artwork
   (assets/img/meet-us/wtm-london.webp), so the accent matches the real mark;
   its lime sits close to our own olive, which is why the two sit together. */
.wtm-badge-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px; max-width: 760px; margin-inline: auto;
}
.wtm-badge{
  --wtm-spectrum: linear-gradient(90deg, #d80078, #f09000, #f0d800, #a8c018, #48a8d8);
  position: relative; overflow: hidden;
  max-width: 320px; margin-inline: auto; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 22px 0; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wtm-badge:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
/* Colour bar across the top edge — the badge's "event" cue. */
.wtm-badge-spectrum{ position: absolute; inset: 0 0 auto; height: 5px; background: var(--wtm-spectrum); }
/* The lanyard slot punched below it. */
.wtm-badge-slot{
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 7px; border-radius: 99px; background: var(--gray-200);
  box-shadow: inset 0 1px 2px rgba(16,24,40,.18);
}
.wtm-badge-head{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-top: 16px;
}
.wtm-badge-logo{ height: 22px; width: auto; display: block; }
.wtm-badge-tag{
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--olive-dark); background: rgba(118,146,43,.12);
  padding: 4px 9px; border-radius: 99px; white-space: nowrap;
}
/* Gradient ring around the portrait, held off the photo by a white gap. */
.wtm-badge-photo-ring{
  display: block; margin: 22px auto 16px; padding: 3px; border-radius: 50%;
  background: var(--wtm-spectrum);
}
.wtm-badge-photo{
  display: block; width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover; border: 3px solid #fff;
}
.wtm-badge h3{ font-size: 1.05rem; font-weight: 800; }
.wtm-badge .profile-role{ margin-top: 3px; font-size: .82rem; font-weight: 700; color: var(--olive-dark); }
/* Dark footer strip carrying the event's own date and venue. */
.wtm-badge-foot{
  margin: 20px -22px 0; padding: 11px 14px; width: calc(100% + 44px);
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: var(--ink-deep); color: rgba(255,255,255,.82);
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.wtm-badge-foot span:first-child{ color: #fff; }
.wtm-badge-foot span + span::before{
  content: ""; display: inline-block; vertical-align: middle;
  width: 4px; height: 4px; margin-right: 10px; border-radius: 50%; background: rgba(255,255,255,.4);
}

/* Desktop: a bigger, properly portrait pass. */
@media (min-width: 780px){
  .wtm-badge-grid{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; max-width: 900px; }
  /* Portrait proportions, like a real lanyard pass, instead of the near-square
     card the content alone produced. The two `margin-top: auto` below split the
     spare height evenly, which keeps the portrait block optically centred. */
  .wtm-badge{ max-width: 400px; min-height: 452px; padding: 34px 28px 0; }
  .wtm-badge-logo{ height: 26px; }
  .wtm-badge-photo-ring{ margin: auto auto 20px; padding: 4px; }
  .wtm-badge-photo{ width: 148px; height: 148px; }
  .wtm-badge h3{ font-size: 1.2rem; }
  .wtm-badge .profile-role{ font-size: .9rem; }
  .wtm-badge-foot{ margin: auto -28px 0; width: calc(100% + 56px); padding: 13px 16px; font-size: .7rem; }
}

/* ---------- Staff personal profile page ---------- */
.staff-page-bg{
  position: relative; min-height: calc(100vh - 62px); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(32px, 6vw, 64px) 16px;
}
.staff-bg-photo{ position: absolute; inset: 0; z-index: 0; }
.staff-bg-photo img{ width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(.85); transform: scale(1.08); }
.staff-bg-photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,10,.45), rgba(10,20,10,.55)); }

.staff-card-wrap{ position: relative; z-index: 1; width: 100%; max-width: 440px; }
.staff-back-link{
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  font-size: .82rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.staff-back-link:hover{ color: var(--olive-light); }

.staff-card{
  background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 2px solid rgba(118,146,43,.3); border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,.25); padding: clamp(24px, 4vw, 34px);
  display: grid; gap: 22px;
}

.staff-card-header{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.staff-card-brand{ display: flex; align-items: center; gap: 10px; }
.staff-card-brand img{ height: 32px; width: auto; }
.staff-card-header-actions{ display: flex; gap: 6px; }
.staff-icon-btn{
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gray-200);
  background: var(--gray-50); color: var(--olive-dark); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.staff-icon-btn:hover{ background: var(--olive-dark); color: #fff; transform: scale(1.06); }
.staff-icon-btn svg{ width: 16px; height: 16px; }

.staff-identity{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.staff-avatar-ring{
  width: 132px; height: 132px; border-radius: 50%; padding: 5px; flex-shrink: 0;
  background: conic-gradient(from 180deg, var(--olive-light), #fff, var(--olive), var(--olive-light));
  box-shadow: 0 8px 25px rgba(118,146,43,.3);
}
.staff-avatar{ width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--gray-100); border: 3px solid #fff; }
.staff-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.staff-identity h1{ margin-top: 16px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
.staff-role{ margin-top: 4px; font-size: .85rem; font-style: italic; font-weight: 700; color: var(--olive-dark); }
.staff-office-badge{
  margin-top: 8px; display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-mute); background: var(--gray-100); border: 1px solid var(--gray-200); padding: 3px 10px; border-radius: 999px;
}
.staff-tagline{ margin-top: 14px; font-size: .85rem; font-style: italic; color: var(--ink-soft); line-height: 1.55; max-width: 30ch; }
.staff-divider{ width: 70px; height: 2px; margin-top: 16px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--olive), transparent); }

.staff-quick-actions{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 14px 8px;
}
.staff-action{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 2px; border-radius: 12px; text-decoration: none; transition: transform .2s var(--ease), background .2s var(--ease);
}
.staff-action:hover{ transform: translateY(-3px); background: #fff; }
.staff-action-icon{
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--olive-dark);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.staff-action:hover .staff-action-icon{ background: var(--olive-dark); color: #fff; border-color: var(--olive-dark); }
.staff-action-icon svg{ width: 17px; height: 17px; }
.staff-action span:last-child{ font-size: .66rem; font-weight: 700; color: var(--ink); }

.staff-save-wrap{ display: grid; gap: 8px; }
.staff-save-btn{
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border: none; border-radius: var(--radius); cursor: pointer; font-family: inherit;
  background: linear-gradient(90deg, var(--olive), var(--olive-dark)); color: #fff;
  font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 10px 25px rgba(118,146,43,.3); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.staff-save-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(118,146,43,.4); }
.staff-save-confirm{ text-align: center; font-size: .78rem; font-weight: 700; color: var(--olive-dark); }

.staff-card-footer{ padding-top: 16px; border-top: 1px solid var(--gray-200); text-align: center; display: grid; gap: 6px; }
.staff-footer-brand{ font-size: .82rem; font-weight: 800; color: var(--olive-dark); text-transform: uppercase; letter-spacing: .03em; }
.staff-footer-address{ display: flex; align-items: flex-start; justify-content: center; gap: 6px; font-size: .76rem; color: var(--ink-mute); line-height: 1.5; text-align: center; }
.staff-footer-address svg{ width: 12px; height: 12px; flex-shrink: 0; margin-top: 3px; }
.staff-footer-link{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--olive-dark); }
.staff-footer-link svg{ width: 13px; height: 13px; flex-shrink: 0; }
.staff-footer-link:hover{ text-decoration: underline; }

.staff-profile-empty{
  background: rgba(255,255,255,.96); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 48px);
  text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.staff-profile-empty h1{ font-size: 1.4rem; font-weight: 800; }
.staff-profile-empty p{ margin: 12px 0 24px; color: var(--ink-soft); }

.staff-footer{ background: var(--ink-deep); padding: 0; }
.staff-footer .footer-bottom{ padding-block: 22px; font-size: .8rem; color: rgba(255,255,255,.5); justify-content: center; }

/* ---------- Staff QR modal ---------- */
.staff-qr-modal{
  position: fixed; inset: 0; z-index: 300; background: rgba(10,15,10,.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.staff-qr-modal[hidden]{ display: none; }
.staff-qr-modal-inner{
  background: #fff; border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 34px);
  max-width: 360px; width: 100%; text-align: center; position: relative; box-shadow: var(--shadow-lg);
}
.staff-qr-close{
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--gray-100); color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.staff-qr-close:hover{ background: var(--gray-200); }
.staff-qr-label{
  display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--olive-dark); background: rgba(118,146,43,.12); padding: 4px 12px; border-radius: 999px;
}
.staff-qr-modal-inner h3{ margin-top: 10px; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; }
.staff-qr-modal-inner p{ margin-top: 6px; font-size: .82rem; color: var(--ink-soft); }
.staff-qr-box{
  position: relative; width: 200px; height: 200px; margin: 18px auto; padding: 14px;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.staff-qr-box img#staffQrImg{ width: 100%; height: 100%; object-fit: contain; }
.staff-qr-logo{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 3px;
  border: 2px solid var(--olive); box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.staff-qr-actions{ display: grid; gap: 10px; margin-top: 8px; }
.staff-qr-action{
  padding: 12px; border-radius: var(--radius); border: 1px solid var(--gray-200); background: var(--gray-50);
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink);
  cursor: pointer; font-family: inherit; transition: background .2s var(--ease);
}
.staff-qr-action:hover{ background: var(--gray-100); }
.staff-qr-action-primary{ background: var(--olive); color: #fff; border-color: var(--olive); }
.staff-qr-action-primary:hover{ background: var(--olive-dark); }

.staff-toast{
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--ink-deep); color: #fff; font-size: .82rem; font-weight: 700;
  padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
  z-index: 400; max-width: 90vw; text-align: center;
}
.staff-toast.is-visible{ opacity: 1; transform: translate(-50%, 0); }

/* ---------- Meet Us: event info ----------
   The date and venue sit in ONE glass bar rather than two separate chips —
   the hero already stacks a breadcrumb, lockup, headline, lead and a button,
   so every shape removed there counts. */
/* Bar + CTA share one flex row so they centre against each other reliably;
   as inline boxes they lined up on the text baseline and sat off by ~12px. */
.hero-event-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 26px 0 6px; }
.event-info{
  display: flex; flex-wrap: wrap; margin: 0;
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.event-info-item{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
}
.event-info-item + .event-info-item{ box-shadow: inset 1px 0 0 rgba(255,255,255,.2); }
.event-info-icon{
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,.16); color: var(--olive-light);
}
.event-info-icon svg{ width: 17px; height: 17px; }
/* Scoped to the text column: the icon tile is also a <span> and a bare
   `.event-info-item span` outranked `.event-info-icon`, which knocked out its
   flex centring and repainted it in the muted label colour. */
.event-info-item > div > span{
  display: block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,.6); margin-bottom: 2px;
}
.event-info-item strong{ font-size: 1.02rem; font-weight: 800; color: #fff; line-height: 1.15; }
/* Logo + eyebrow on one line, so the hero loses a stacked row. */
.hero-event-lockup{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-event-lockup .eyebrow{ margin: 0; }
/* The WTM lockup is black artwork on transparent, so it needs a light chip
   to stay legible over the hero photo. */
.wtm-logo{
  height: 34px; width: auto; display: block;
  padding: 8px 13px; box-sizing: content-box; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.94); box-shadow: var(--shadow-sm);
}

/* ---------- Meet Product Manager: branded profile cards ----------
   Happy Trails' own olive, as a cover band the portrait overlaps — the
   counterpart to the WTM-branded passes over on the Meet Us page. */
.pm-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px; max-width: 820px; margin-inline: auto;
}
.pm-card{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 24px 30px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pm-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.pm-card-cover{
  display: block; width: 100%; height: 104px; margin: 0 -24px 0;
  width: calc(100% + 48px); flex-shrink: 0;
  background: linear-gradient(125deg, var(--olive-dark), var(--olive));
  position: relative;
}
/* Soft highlight so the flat olive reads as a surface, not a slab. */
.pm-card-cover::after{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
}
.pm-card-photo{
  width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
  border: 5px solid #fff; box-shadow: var(--shadow-sm);
  margin: -70px 0 16px; position: relative; z-index: 1;
  transition: transform .25s var(--ease);
}
.pm-card:hover .pm-card-photo{ transform: scale(1.04); }
.pm-card h3{ font-size: 1.15rem; font-weight: 800; }
.pm-card-role{
  margin-top: 5px; font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--olive-dark); background: rgba(118,146,43,.12);
  padding: 5px 12px; border-radius: 99px;
}
.pm-card-bio{ margin-top: 14px; font-size: .89rem; color: var(--ink-soft); line-height: 1.6; }

/* ---------- Meet Us: booking embed ---------- */
.booking-embed{
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--gray-200); max-width: 1040px; margin-inline: auto;
}
/* A cross-origin frame can't report its content height, so the box is sized
   here instead: tall enough that the whole booking flow fits without inner
   scrolling on a normal screen, and tied to the viewport so it stays in
   proportion on short laptops and very tall monitors alike. */
.booking-embed iframe{
  width: 100%; display: block; border: 0;
  height: clamp(700px, 88vh, 1120px);
}
/* Localhost-only stand-in for the blocked Bookings iframe (see js/main.js). */
.booking-blocked{ padding: clamp(28px, 4vw, 44px); text-align: center; background: var(--gray-50); }
.booking-blocked p{ margin: 0 auto 12px; max-width: 52ch; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.booking-blocked strong{ color: var(--ink); }
.booking-blocked .btn{ margin-top: 4px; word-break: break-all; }
.booking-blocked-note{ font-size: .84rem !important; color: var(--ink-mute) !important; margin-top: 16px !important; }
/* Escape hatch: Microsoft Bookings refuses to be framed from a non-https
   origin, and some browsers/extensions block third-party iframes outright. */
.booking-fallback{
  max-width: 900px; margin: 16px auto 0; text-align: center;
  font-size: .88rem; color: var(--ink-mute);
}
.booking-fallback a{ color: var(--olive-dark); font-weight: 700; text-decoration: underline; }
.booking-fallback a:hover{ color: var(--olive); }

/* ---------- Agent Area: full catalogue embed (Unique Stays, Tour Inspirations) ---------- */
/* Full-bleed and undecorated on purpose: the iframe is meant to read as a
   continuation of the page, not a boxed widget dropped into it. It fills the
   rest of the viewport under the sticky nav, so its own internal scrollbar is
   the only one visible — there is nothing else on the page to scroll past. */
.agent-catalogue-section{ display: block; }
.agent-catalogue-embed{ background: #fff; }
.agent-catalogue-embed iframe{
  width: 100%; display: block; border: 0;
  height: calc(100vh - 64px);
}
.agent-catalogue-section .booking-fallback{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  max-width: none; padding: 12px 24px; margin: 0;
}
.agent-catalogue-section .booking-fallback-icon{
  display: inline-flex; flex-shrink: 0; color: var(--olive-dark);
}
.agent-catalogue-section .booking-fallback-icon svg{ width: 16px; height: 16px; }

/* ---------- Centred action under a section's grid ---------- */
.section-cta-center{ display: flex; justify-content: center; margin-top: 32px; }

/* ---------- Holiday Support & Emergency Numbers ---------- */
/* Standout band at the top of Holiday Support: an emergency shouldn't have to
   be hunted for further down the page. */
.section-urgent{ padding-block: 0; margin-top: clamp(-40px, -3vw, -24px); position: relative; z-index: 2; }
.urgent-band{
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 26px; border-radius: var(--radius-lg);
  background: linear-gradient(125deg, var(--olive-dark), var(--olive));
  color: #fff; box-shadow: var(--shadow-lg);
}
.urgent-band-icon{
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,.16); color: #fff;
}
.urgent-band-icon svg{ width: 22px; height: 22px; }
.urgent-band-text{ flex: 1 1 260px; min-width: 0; }
.urgent-band-title{ font-size: 1.05rem; font-weight: 800; }
.urgent-band-text p:last-child{ margin-top: 3px; font-size: .9rem; color: rgba(255,255,255,.86); line-height: 1.5; }
.urgent-band .btn-primary{ background: #fff; color: var(--olive-dark); }
.urgent-band .btn-primary:hover{ background: var(--olive-light); color: var(--olive-dark); }

.channel-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.channel-card{
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 32px);
}
.channel-card h3{
  font-size: 1.2rem; font-weight: 800; padding-bottom: 14px;
  border-bottom: 2px solid var(--olive); display: inline-block;
}
.channel-rows{ margin-top: 18px; display: grid; gap: 12px; }
.channel-row{ display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: baseline; }
.channel-row-label{ font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); }
.channel-row-value{ font-size: .92rem; color: var(--ink); font-weight: 600; line-height: 1.5; }
.channel-row-value a{ color: var(--olive-dark); font-weight: 700; }
.channel-row-value a:hover{ text-decoration: underline; }
.channel-hint{ margin-left: 142px; font-size: .78rem; color: var(--ink-mute); line-height: 1.45; }
.channel-note{ margin-top: 16px; font-size: .85rem; color: var(--ink-soft); line-height: 1.6; }
.channel-emergency{
  margin-top: 20px; padding: 16px 18px; border-radius: var(--radius);
  background: rgba(118,146,43,.09); border: 1px solid rgba(118,146,43,.28);
  display: grid; gap: 4px;
}
.channel-emergency-label{ font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--olive-dark); }
.channel-emergency strong{ font-size: .98rem; font-weight: 800; color: var(--ink); line-height: 1.5; }
.channel-emergency .channel-hint{ margin-left: 0; }
.channel-aware{ margin-top: 16px; border-top: 1px solid var(--gray-200); padding-top: 14px; }
.channel-aware summary{
  cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--olive-dark);
  list-style: none;
}
.channel-aware summary::-webkit-details-marker{ display: none; }
.channel-aware summary::before{ content: "+ "; font-weight: 800; }
.channel-aware[open] summary::before{ content: "– "; }
.channel-aware p{ margin-top: 10px; font-size: .84rem; color: var(--ink-soft); line-height: 1.65; }

/* Stats strip — restates the 24/7/365 promise from the section lead */
.emergency-stats{
  list-style: none; margin: 0 auto clamp(30px, 4vw, 44px); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.emergency-stats li{
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  background: rgba(118,146,43,.09); border: 1px solid rgba(118,146,43,.22);
}
.emergency-stats strong{ font-size: 1.5rem; font-weight: 800; color: var(--olive-dark); line-height: 1; }
.emergency-stats span{ font-size: .86rem; font-weight: 600; color: var(--ink-soft); }

/* Cards flex rather than grid so the last row (2 of 5) centres itself */
.emergency-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 2vw, 26px); }
.emergency-card{
  flex: 1 1 340px; max-width: 420px;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.emergency-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(118,146,43,.45); }
/* The photo, not the number list, absorbs the height difference between a
   one-number card and Indonesia's three-number card, so no card ends up
   with dead space under its last number. */
.emergency-card-media{ position: relative; flex: 1 1 auto; min-height: 230px; overflow: hidden; }
.emergency-card-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.emergency-card:hover .emergency-card-media img{ transform: scale(1.06); }
.emergency-card-media::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,28,16,0) 32%, rgba(24,28,16,.78) 100%);
}
.emergency-card-media h3{
  position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1;
  color: #fff; font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em;
}
.emergency-card-badge{
  position: absolute; top: 14px; right: 14px; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 13px 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--olive-dark);
}
.emergency-card-badge-dot{
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--olive); position: relative;
}
.emergency-card-badge-dot::after{
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--olive); animation: emergency-pulse 1.8s var(--ease) infinite;
}
@keyframes emergency-pulse{
  0%{ transform: scale(.6); opacity: .9; }
  100%{ transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .emergency-card-badge-dot::after{ animation: none; } }

.emergency-card-numbers{ list-style: none; margin: 0; padding: 14px; flex: none; display: grid; gap: 8px; }
.emergency-card-numbers a{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--gray-50); border: 1px solid transparent;
  color: var(--ink-deep); transition: background .2s var(--ease), border-color .2s var(--ease);
}
.emergency-card-numbers a:hover{ background: rgba(118,146,43,.1); border-color: rgba(118,146,43,.35); }
.emergency-card-numbers a.is-primary{
  background: rgba(118,146,43,.1); border-color: rgba(118,146,43,.28);
}
.emergency-card-numbers a.is-primary:hover{ background: rgba(118,146,43,.16); border-color: rgba(118,146,43,.4); }
.emergency-card-num-icon{
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--olive); color: #fff;
}
.is-primary .emergency-card-num-icon{ background: var(--olive-dark); }
.emergency-card-num-icon svg{ width: 16px; height: 16px; }
.emergency-card-num-text{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.emergency-card-numbers .emergency-card-num{ font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }
.is-primary .emergency-card-num{ font-size: 1.04rem; }
.emergency-card-num-text em{
  font-style: normal; font-size: .62rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute);
}
.is-primary .emergency-card-num-text em{ color: var(--olive-dark); }
.emergency-card-num-arrow{
  flex: none; display: flex; color: var(--olive);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.emergency-card-num-arrow svg{ width: 16px; height: 16px; }
.emergency-card-numbers a:hover .emergency-card-num-arrow{ opacity: 1; transform: translateX(0); }
@media (max-width: 560px){
  .emergency-card-num-text em{ display: none; }
}
.emergency-note{
  margin: clamp(24px, 3vw, 34px) auto 0; max-width: 640px; text-align: center;
  font-size: .9rem; color: var(--ink-soft);
}

/* ---------- Emergency: what happens when you call ---------- */
.section-calling{ background: linear-gradient(180deg, var(--gray-50) 0%, rgba(118,146,43,.07) 100%); }
.calling-split{
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.calling-copy h2{ margin-bottom: 12px; }
.calling-steps{ list-style: none; margin: clamp(22px, 3vw, 30px) 0 0; padding: 0; counter-reset: calling; display: grid; gap: 2px; }
.calling-step{
  counter-increment: calling;
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 4px; border-top: 1px solid var(--gray-200);
}
.calling-step:last-child{ border-bottom: 1px solid var(--gray-200); }
.calling-step::before{
  content: counter(calling); flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--olive); color: #fff;
  font-size: .88rem; font-weight: 800;
}
.calling-step-title{ font-weight: 800; color: var(--ink-deep); margin-bottom: 4px; }
.calling-step p:last-child{ font-size: .92rem; color: var(--ink-soft); line-height: 1.7; }
.calling-media{ position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.calling-media img{ width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

@media (min-width: 780px){
  .emergency-card{ min-height: 460px; }
}

@media (max-width: 900px){
  .calling-split{ grid-template-columns: 1fr; }
  .calling-media{ order: -1; }
  .calling-media img{ aspect-ratio: 16 / 10; }
}

/* ---------- Careers: who we are ---------- */
.who-we-are-text{ max-width: 760px; margin: 0 auto clamp(28px, 4vw, 40px); display: grid; gap: 16px; }
.who-we-are-text p{ font-size: 1.02rem; color: var(--ink-soft); line-height: 1.7; }

/* ---------- Careers: job listings ---------- */
.job-list{ display: grid; gap: 16px; max-width: 900px; margin-inline: auto; }
.job-card{
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.job-card:hover{ border-color: var(--olive); }
.job-card.is-open{ box-shadow: var(--shadow); border-color: rgba(118,146,43,.5); }
.job-card-toggle{
  width: 100%; display: flex; align-items: center; gap: 18px;
  padding: 24px 28px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.job-card-icon-role{
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(118,146,43,.1); color: var(--olive-dark);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.job-card-icon-role svg{ width: 21px; height: 21px; }
.job-card.is-open .job-card-icon-role{ background: var(--olive); color: #fff; }
.job-card-head{ flex: 1; min-width: 0; }
.job-card-head-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.job-card-head h3{ font-size: 1.12rem; font-weight: 800; color: var(--ink); }
.job-card-hiring{
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; background: rgba(118,146,43,.1);
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--olive-dark);
}
.job-card-hiring-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--olive); position: relative; flex: none; }
.job-card-hiring-dot::after{
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--olive); animation: emergency-pulse 1.8s var(--ease) infinite;
}
.job-card-tags{ display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.job-tag{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--olive-dark); background: rgba(118,146,43,.12); padding: 4px 10px; border-radius: 999px;
}
.job-tag svg{ width: 12px; height: 12px; flex: none; }
.job-card-icon{
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-50); color: var(--ink); border: 1px solid var(--gray-200);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.job-card.is-open .job-card-icon{ transform: rotate(45deg); background: var(--olive); color: #fff; border-color: var(--olive); }
.job-card-icon svg{ width: 16px; height: 16px; }
.job-card-collapse{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.job-card.is-open .job-card-collapse{ grid-template-rows: 1fr; }
.job-card-body{ overflow: hidden; min-height: 0; padding: 0 28px 0 90px; }
.job-card.is-open .job-card-body{ padding-bottom: 28px; }
.job-card-schedule{ font-size: .82rem; font-weight: 600; color: var(--ink-mute); padding-top: 18px; border-top: 1px solid var(--gray-100); }
.job-card-teaser{ margin-top: 8px; font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }
.job-card-section{ margin-top: 20px; }
.job-card-section h4{ font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--olive-dark); margin-bottom: 10px; }
.job-check-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.job-check-list li{ display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.job-check-icon{
  flex: none; margin-top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(118,146,43,.12); color: var(--olive-dark);
  display: flex; align-items: center; justify-content: center;
}
.job-check-icon svg{ width: 12px; height: 12px; }
.job-card-benefits{
  margin-top: 22px; display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--radius); background: rgba(118,146,43,.06); border: 1px solid rgba(118,146,43,.18);
}
.job-card-benefits-icon{
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--olive); color: #fff; display: flex; align-items: center; justify-content: center;
}
.job-card-benefits-icon svg{ width: 19px; height: 19px; }
.job-card-benefits h4{ font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--olive-dark); margin-bottom: 4px; }
.job-card-benefits p{ font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }
.job-card-body .btn{ margin-top: 22px; }
@media (max-width: 640px){
  .job-card-icon-role{ display: none; }
  .job-card-body{ padding-left: 28px; }
}

/* ---------- Careers: recruitment process ---------- */
.process-steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process-step{
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 26px 22px; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.process-step:hover{ transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.process-step-number{
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: 18px;
  background: var(--olive); color: #fff; font-weight: 800; font-size: 1rem; flex-shrink: 0;
}
.process-step h3{ font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.process-step p{ font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 900px){
  .process-steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .process-steps{ grid-template-columns: 1fr; }
  .job-card-toggle{ padding: 20px; }
  .job-card-body{ padding: 0 20px; }
  .job-card.is-open .job-card-body{ padding-bottom: 20px; }
}

/* ---------- Contact ---------- */
.section-contact{
  position: relative; color: #fff;
  background: linear-gradient(rgba(8,14,10,.74), rgba(8,14,10,.74)), url('../assets/img/backgrounds/contact-bg.webp') center/cover no-repeat;
}
@media (min-width: 900px){
  .section-contact{ background-attachment: fixed; }
}
.section-contact .eyebrow-dark{ color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
.section-contact h2{ color: #fff; }
.section-contact .section-lead{ color: rgba(255,255,255,.82); }
.contact-inner{ display: grid; grid-template-columns: 1fr .92fr; gap: 52px; align-items: center; }
.contact-list{ margin-top: 32px; display: grid; gap: 12px; }
.contact-list li{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--radius);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.contact-list-icon{
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.14); color: var(--olive-light);
}
.contact-list-icon svg{ width: 18px; height: 18px; }
.contact-list-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-list-label{ color: rgba(255,255,255,.6); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.contact-list a{ color: #fff; font-weight: 700; font-size: .95rem; }
.contact-list a:hover{ color: var(--olive-light); }

.contact-form{
  background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-radius: var(--radius); padding: clamp(18px, 2.2vw, 26px);
  display: grid; gap: 12px; box-shadow: var(--shadow-lg);
}
.form-row{ display: grid; gap: 4px; }
.form-row label{ font-size: .76rem; font-weight: 700; color: var(--ink-soft); }
.form-row input, .form-row textarea{
  border: 1.5px solid rgba(0,0,0,.12); border-radius: 10px; padding: 9px 12px;
  font-size: .9rem; line-height: 1.4;
  background: rgba(255,255,255,.72); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  resize: vertical;
}
.form-row textarea{ min-height: 76px; }
.form-row input:focus, .form-row textarea:focus{
  outline: none; border-color: var(--olive); background: #fff; box-shadow: 0 0 0 3px rgba(118,146,43,.18);
}
.contact-form .btn{ margin-top: 2px; }
.form-note{ font-size: .8rem; color: var(--olive-dark); min-height: 1.1em; margin: 0; }
.form-note-error{ color: #b3261e; }
.form-note-error a{ color: inherit; text-decoration: underline; }

/* ---------- Sub-page header (Services, etc.) ---------- */
/* The site header is transparent and overlaps the hero via a negative
   margin-bottom of --header-h, so the visible gap under the nav is
   (padding-top - --header-h). Deriving padding-top from the same variable
   makes that gap exactly the clamp below at every width and header height. */
.page-hero{
  position: relative; overflow: hidden; color: #fff;
  padding-block: calc(var(--header-h, 82px) + clamp(28px, 3.1vw, 45px)) clamp(48px, 7vw, 80px);
  background-color: var(--ink-deep);
  background-image:
    linear-gradient(100deg, rgba(11,13,9,.95) 0%, rgba(11,13,9,.9) 40%, rgba(11,13,9,.66) 76%, rgba(11,13,9,.5) 100%),
    var(--hero-photo, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* One destination photo per sub-page. */
body[data-page="indonesia"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-indonesia.webp'); }
body[data-page="services"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-bali.webp'); }
body[data-page="about"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-lombok.webp'); }
body[data-page="careers"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-malaysia.webp'); }
body[data-page="contact"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-singapore.webp'); }
body[data-page="malaysia"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-peninsular-malaysia.webp'); }
body[data-page="holiday-support"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-support.webp'); }
body[data-page="emergency-number"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-emergency.webp'); }
body[data-page="bali"] .page-hero{ --hero-photo: url('../assets/img/bali/hero-barong.webp'); }
body[data-page="singapore"] .page-hero{ --hero-photo: url('../assets/img/singapore/hero-singapore.webp'); }
body[data-page="borneo"] .page-hero{ --hero-photo: url('../assets/img/borneo/hero-borneo.webp'); }
body[data-page="brunei"] .page-hero{ --hero-photo: url('../assets/img/brunei/hero-brunei.webp'); }
body[data-page="meet-us"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-borneo.webp'); }
body[data-page="meet-product-manager"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-brunei.webp'); }
body[data-page="traveler-indonesia"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-indonesia.webp'); }
body[data-page="traveler-malaysia"] .page-hero{ --hero-photo: url('../assets/img/destinations/hero-peninsular-malaysia.webp'); }

.breadcrumb{ display: flex; align-items: center; gap: 8px; font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.breadcrumb a{ color: rgba(255,255,255,.75); }
.breadcrumb a:hover{ color: #fff; }
.page-hero .container{ position: relative; }
.page-hero h1{ font-size: clamp(2.1rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; margin-top: 14px; max-width: 20ch; }
.page-hero .section-lead{ color: rgba(255,255,255,.8); max-width: 62ch; }

/* ---------- Floating staff quote (in hero) ---------- */
.hero-quote-float{
  position: absolute; top: 50%; right: 24px; transform: translateY(-50%);
  display: flex; align-items: center; gap: 14px; max-width: 280px;
  padding: 16px 18px; border-radius: var(--radius-lg);
  /* Dark glass rather than white: the hero now carries a destination photo,
     and an .08 white fill washes out over a bright one. */
  background: rgba(16,18,13,.62); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.hero-quote-float img{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.hero-quote-float p{ font-size: .82rem; line-height: 1.45; color: rgba(255,255,255,.92); }
.hero-quote-float span{ display: block; margin-top: 6px; font-size: .72rem; font-weight: 700; color: var(--olive-light); }
.hero-quote-float .quote-avatar{
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--olive); color: #fff; font-weight: 800; font-size: 1.15rem;
  box-shadow: var(--shadow-sm);
}

/* ---------- Tour types (split media rows) ---------- */
.tour-rows{ display: grid; gap: clamp(36px, 5vw, 56px); }
.tour-row{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.tour-row.is-reverse .tour-media{ order: 2; }
.tour-media img{ width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; }
.tour-copy-eyebrow{ font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--olive-dark); }
.tour-copy h3{ margin-top: 8px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.tour-copy p{ margin-top: 12px; color: var(--ink-soft); }

/* ---------- Season cards ---------- */
.season-dates{
  display: inline-block; margin-top: 4px; font-size: .78rem; font-weight: 700;
  color: var(--ink-mute);
}

/* ---------- Animated season hero cards ---------- */
.season-hero-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.season-hero-card{
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: 34px 28px; color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: var(--shadow);
}
.season-hero-card.is-dry{ background: linear-gradient(160deg, #f6ad3c, #e8871f 55%, #cf6a12); }
.season-hero-card.is-wet{ background: linear-gradient(160deg, #4f93c4, #34648f 55%, #22456b); }
.season-hero-card .season-dates{ color: rgba(255,255,255,.85); }
.season-hero-card h3{ margin-top: 6px; font-size: 1.3rem; font-weight: 800; }
.season-hero-card p{ margin-top: 10px; font-size: .92rem; color: rgba(255,255,255,.92); max-width: 38ch; }

.weather-anim{ position: relative; width: 88px; height: 72px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.sun-glow{
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
  animation: sun-pulse 3.2s ease-in-out infinite;
}
.sun-icon{ position: relative; width: 58px; height: 58px; color: #fff; animation: spin-slow 18s linear infinite; }
.weather-anim-rain .cloud-icon{ width: 58px; height: 38px; color: #fff; }
.raindrop{
  position: absolute; top: 40px; left: calc(50% - 8px + var(--i) * 8px);
  width: 3px; height: 10px; border-radius: 2px; background: rgba(255,255,255,.85);
  animation: rain-fall 1.3s linear infinite;
  animation-delay: calc(var(--i) * .22s);
}
@keyframes spin-slow{ to{ transform: rotate(360deg); } }
@keyframes sun-pulse{ 0%,100%{ opacity: .4; transform: scale(1); } 50%{ opacity: .75; transform: scale(1.12); } }
@keyframes rain-fall{ 0%{ transform: translateY(0); opacity: 0; } 15%{ opacity: 1; } 100%{ transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce){
  .sun-icon, .sun-glow, .raindrop{ animation: none; }
}

/* ---------- Monthly weather table ---------- */
.weather-table-wrap{ margin-top: 28px; }
.weather-strip{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.weather-month{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px 12px; border-radius: var(--radius-sm);
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-top: 3px solid var(--weather-c, var(--olive));
}
.weather-month[data-season="dry"]{ --weather-c: #e8871f; }
.weather-month[data-season="wet"]{ --weather-c: #3f7fb0; }
.weather-month[data-season="inter"]{ --weather-c: var(--olive); }
.weather-month-label{ font-size: .78rem; font-weight: 800; color: var(--ink); }
.weather-month-bar{
  width: 14px; height: 60px; border-radius: 999px; background: var(--gray-200);
  display: flex; align-items: flex-end; overflow: hidden;
}
.weather-month-bar-fill{ width: 100%; border-radius: 999px; background: var(--weather-c, var(--olive)); }
.weather-month-temp{ font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.weather-month-season{ font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--weather-c, var(--olive)); }
.weather-legend{ display: flex; justify-content: center; gap: 22px; margin-top: 18px; font-size: .82rem; color: var(--ink-soft); }
.weather-legend span{ display: inline-flex; align-items: center; gap: 7px; }
.weather-note{ margin-top: 28px; max-width: 820px; }
.weather-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--weather-c, var(--olive)); }
.weather-dot[data-season="dry"]{ --weather-c: #e8871f; }
.weather-dot[data-season="wet"]{ --weather-c: #3f7fb0; }
.weather-dot[data-season="inter"]{ --weather-c: var(--olive); }

/* ---------- Archipelago overview layout ---------- */
.overview-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
.overview-grid .section-head{ max-width: none; margin-bottom: 0; }

/* ---------- Interactive archipelago map ---------- */
.archipelago-map{ display: flex; flex-direction: column; gap: 14px; }
/* Each map declares its own shape via --map-ratio; the image is object-fit:
   contain, so canvas and image must share an aspect ratio or the
   percentage-positioned pins drift off the coastline. */
.map-canvas{
  position: relative; aspect-ratio: var(--map-ratio, 1600 / 900); background: transparent;
}
.map-image{
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.18));
}
.map-island{
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  width: 30px; height: 30px; padding: 0; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.map-pin-dot{
  position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.15); transform: translate(-50%, -50%);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.map-island:hover .map-pin-dot,
.map-island:focus-visible .map-pin-dot,
.map-island.is-active .map-pin-dot{
  background: var(--olive-light); transform: translate(-50%, -50%) scale(1.35);
}
.map-pin-pulse{
  position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid #fff; animation: pin-pulse 2.4s ease-out infinite;
}
.map-island:hover .map-pin-pulse,
.map-island.is-active .map-pin-pulse{ border-color: var(--olive-light); }
.map-island:focus-visible{ outline: none; }
.map-island:focus-visible .map-pin-dot{ box-shadow: 0 0 0 3px var(--olive-light); }

/* White, not --gray-50: this panel sits inside a .section-tint, which is
   --gray-50 too, so a tinted fill made the card disappear into the section. */
.map-detail{
  border-radius: var(--radius-lg); border: 1px solid var(--gray-200); background: #fff;
  box-shadow: var(--shadow-sm);
  padding: 26px 24px; display: flex; flex-direction: column; justify-content: center;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* Lifts while an island is selected, so the panel reads as the live result. */
.map-detail:has(.map-detail-content:not([hidden])){
  box-shadow: var(--shadow); border-color: rgba(118,146,43,.35);
}
.map-detail-hint{ color: var(--ink-mute); font-size: .95rem; }
.map-detail-content h3{ font-size: 1.3rem; font-weight: 800; }
.map-detail-content p{ margin-top: 10px; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.map-detail-link{ display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .88rem; font-weight: 700; color: var(--olive-dark); }
.map-detail-link:hover{ text-decoration: underline; }

/* ---------- Offices map (hover popups) ---------- */
.offices-map{ margin-top: 12px; }
.offices-map .map-canvas{ max-width: 1040px; margin-inline: auto; overflow: visible; }
.map-office{ position: absolute; z-index: 3; transform: translate(-50%, -50%); }
.map-office-pin{
  position: relative; width: 30px; height: 30px; padding: 0; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.map-office-popup{
  position: absolute; bottom: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 230px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 10;
}
.map-office:hover .map-office-popup,
.map-office:focus-within .map-office-popup,
.map-office.is-active .map-office-popup{
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.map-office-popup img{ width: 100%; height: 120px; object-fit: cover; display: block; }
.map-office-popup-body{ padding: 14px 16px; }
.map-office-popup-body .office-tag{ display: inline-block; margin-bottom: 6px; }
.map-office-popup-body h3{ font-size: 1rem; font-weight: 800; color: var(--ink); }
.map-office-popup-body p{ margin-top: 6px; font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }
.map-office-popup-meta{ margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.map-office-popup-meta a{ font-size: .8rem; font-weight: 700; color: var(--olive-dark); }
.map-office-popup-meta a:hover{ text-decoration: underline; }
@media (max-width: 560px){
  .map-office-popup{ width: 190px; }
  .map-office-popup img{ height: 100px; }
}

@keyframes pin-pulse{
  0%{ transform: translate(-50%, -50%) scale(.7); opacity: .9; }
  70%, 100%{ transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .map-pin-pulse{ animation: none; }
}
@media (max-width: 900px){
  .overview-grid{ grid-template-columns: 1fr; }
}

/* ---------- Island / itinerary grids ---------- */
.island-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.island-grid .service-card{ aspect-ratio: 1/1; min-height: 0; }

/* Responsible Tourism Services — same 4-across layout as the island grid, but
   a taller card (not a 1:1 square) so the title + description have room to
   breathe instead of feeling crammed in. */
.responsible-services-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.responsible-services-grid .service-card{ aspect-ratio: 3 / 4; min-height: 0; }
.responsible-services-grid .service-card h3{ font-size: 1.3rem; }
.responsible-services-grid .service-card p{ font-size: .92rem; line-height: 1.55; max-width: none; }
@media (max-width: 900px){ .responsible-services-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .responsible-services-grid{ grid-template-columns: 1fr; } .responsible-services-grid .service-card{ aspect-ratio: 4/3; } }

.tour-idea-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tour-idea-card{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3/4; box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.tour-idea-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.tour-idea-img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease), filter .3s var(--ease);
}
.tour-idea-card:hover .tour-idea-img{ transform: scale(1.06); filter: brightness(.82); }
.tour-idea-duration{
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #fff; background: rgba(20,22,17,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 6px 12px 6px 9px; border-radius: 999px;
}
.tour-idea-duration svg{ width: 14px; height: 14px; }
.tour-idea-body{
  position: absolute; inset: 0; z-index: 1; padding: 24px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(6,14,18,.05) 0%, rgba(6,14,18,.32) 45%, rgba(6,14,18,.95) 100%);
  color: #fff;
}
.tour-idea-card h3{ font-size: 1.2rem; font-weight: 800; }
/* Routes can run long (Malaysia's are 5-7 stops), so allow a second line
   rather than clipping the itinerary mid-way. */
.tour-idea-route{
  margin-top: 6px; font-size: .82rem; font-weight: 700; color: var(--olive-light);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.tour-idea-body p{ margin-top: 10px; font-size: .88rem; color: rgba(255,255,255,.85); line-height: 1.5; }
.tour-idea-cta{
  align-self: flex-start; margin-top: 16px; padding: 9px 18px; font-size: .86rem;
}

/* ---------- Tour leader development ---------- */
.tl-band{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.tl-photos{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tl-photos img{ width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.tl-photos img:nth-child(2){ margin-top: 28px; }
.tl-photos img:nth-child(3){ margin-top: -28px; }

/* ---------- CTA band ----------
   A contained card rather than a full-bleed colour band: olive copy panel on
   one side, destination photo on the other. Shared by every sub-page. */
.cta-band{ padding-block: clamp(48px, 6vw, 84px); }
.cta-card{
  display: grid; grid-template-columns: 1.08fr .92fr; align-items: stretch;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  background: linear-gradient(125deg, var(--olive-dark) 0%, var(--olive) 100%);
  color: #fff;
}
.cta-card-body{
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: clamp(30px, 3.8vw, 56px);
}
.cta-card-eyebrow{
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--olive-light);
}
.cta-card h2{
  margin-top: 12px; font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
}
.cta-card p{ margin-top: 12px; color: rgba(255,255,255,.86); font-size: .96rem; line-height: 1.65; max-width: 46ch; }
.cta-card .btn{ margin-top: 26px; }
.cta-card .btn-primary{ background: #fff; color: var(--olive-dark); }
.cta-card .btn-primary:hover{ background: var(--olive-light); color: var(--olive-dark); }
.cta-card-media{ position: relative; min-height: 320px; overflow: hidden; }
.cta-card-media img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s var(--ease);
}
.cta-card:hover .cta-card-media img{ transform: scale(1.05); }
/* Depth along the seam with the copy panel, so the photo doesn't butt against
   the olive with a flat edge. */
.cta-card-media::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,28,8,.42) 0%, rgba(20,28,8,0) 34%);
}

/* ---------- Footer ---------- */
.site-footer{
  position: relative; overflow: hidden;
  color: rgba(255,255,255,.72);
  padding-top: clamp(52px, 7vw, 84px);
  /* Borobudur at sunrise — the same footer band the live site uses. The source
     image is already dark and vignetted on the left, so the overlay is light;
     it is anchored bottom-centre so the stupas stay on the horizon line. */
  background: linear-gradient(180deg, rgba(20,20,18,.55), rgba(20,20,18,.8)), url('../assets/img/backgrounds/footer-borobudur.webp') bottom center/cover no-repeat;
}
/* The source image is a wide 1920x540 band. On narrow screens the footer gets
   very tall, so `cover` would zoom it ~5x and lose the composition — pin it to
   the bottom at a readable width instead. */
@media (max-width: 760px){
  .site-footer{ background-size: 100% 100%, 175% auto; }
}
.site-footer::before{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--olive-dark), var(--olive-light), var(--olive-dark));
}
.footer-grid{ display: grid; grid-template-columns: 1.4fr .8fr .8fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand-logo{ height: 44px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.footer-brand p{ margin-top: 18px; font-size: .9rem; max-width: 34ch; color: rgba(255,255,255,.6); }
.social-row{ display: flex; gap: 10px; margin-top: 20px; }
.social-row a{
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.social-row a:hover{ background: var(--olive); border-color: var(--olive); color: #fff; }
.footer-col h4{ color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; }
.footer-col{ display: flex; flex-direction: column; gap: 12px; font-size: .9rem; }
.footer-col a:hover{ color: #fff; }
.footer-soon{ display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.4); cursor: default; }
.footer-soon em{
  font-style: normal; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255,255,255,.55); background: rgba(255,255,255,.1); padding: 2px 7px; border-radius: 999px;
}
.footer-newsletter p{ font-size: .85rem; color: rgba(255,255,255,.55); margin-top: -4px; }
.newsletter-form{ display: flex; gap: 8px; margin-top: 4px; }
.newsletter-form input{
  flex: 1; min-width: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color: #fff; padding: 11px 16px;
}
.newsletter-form input::placeholder{ color: rgba(255,255,255,.45); }
.newsletter-form input:focus{ outline: none; border-color: var(--olive); }
.newsletter-form .btn{ padding: 11px 18px; flex-shrink: 0; }
.footer-bottom{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-block: 22px; font-size: .82rem; color: rgba(255,255,255,.45);
}
.footer-bottom p{ margin: 0; }
.footer-legal{ display: flex; gap: 20px; }
.footer-legal .footer-soon{ font-size: .82rem; }

/* ---------- Back to top ---------- */
.back-to-top{
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background .2s var(--ease);
}
.back-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--olive-dark); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .responsible-inner{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1240px){
  .nav{
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--gray-200);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 18px;
    transform-origin: top; transform: scaleY(0); opacity: 0; pointer-events: none;
    transition: transform .25s var(--ease), opacity .2s var(--ease);
  }
  .nav.is-open{ transform: scaleY(1); opacity: 1; pointer-events: auto; }
  .nav > a, .nav-item > .nav-link{
    padding: 14px 0; width: 100%; justify-content: space-between;
    border-bottom: 1px solid var(--gray-100);
    color: var(--ink-soft); text-shadow: none;
  }
  .nav-link-home{ justify-content: flex-start; gap: 8px; }
  .nav > a:hover, .nav-item > .nav-link:hover{ color: var(--olive-dark); }
  .nav > a.is-active, .nav-item > .nav-link.is-active,
  .nav-item.is-open > .nav-link{ color: var(--olive-dark); }
  .nav > a::after, .nav-link::after{ display: none; }
  .nav-link.is-soon{ color: var(--ink-mute); }
  .nav-link.is-soon em{ color: var(--ink-mute); background: var(--gray-100); }
  .nav-item{ width: 100%; }
  .nav-toggle{ display: flex; }
  .btn-agent{ padding: 5px 12px 5px 5px; }
  .brand-logo{ height: 42px; }

  .mega-panel{
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; width: 100%;
    box-shadow: none; border: none; border-radius: 0; padding: 0; background: transparent;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .28s var(--ease);
  }
  .mega-panel::before{ display: none; }
  .nav-item.is-open .mega-panel{ transform: none; grid-template-rows: 1fr; }
  /* Padding lives on .mm-main, not .panel-inner: a collapsed grid row still
     paints the item's padding box, which would leak content through. */
  .panel-inner{
    display: flex; flex-direction: column; gap: 0;
    overflow: hidden; height: auto; min-height: 0; padding: 0;
  }
  .mm-main{ padding: 10px 0 16px; }
  .mm-cards{ grid-auto-rows: 132px; }
  .mm-cards-3{ grid-template-columns: repeat(2, 1fr); }
  .mm-aside{ display: none; }
}
@media (max-width: 900px){
  .dest-split{ grid-template-columns: 1fr; gap: 32px; }
  .dest-carousel .slider-arrow-prev{ left: -6px; }
  .dest-carousel .slider-arrow-next{ right: -6px; }
  .section-why::before{ display: none; }
  .why-body{ grid-template-columns: 1fr; }
  .why-photo{ max-width: 520px; margin-inline: auto; aspect-ratio: 4 / 3; }
  .why-cert img{ width: 100px; }
  .safety-grid{ grid-template-columns: repeat(2, 1fr); }
  .service-grid{ grid-template-columns: 1fr; }
  .support-grid{ grid-template-columns: 1fr; }
  .office-grid{ grid-template-columns: repeat(2, 1fr); }
  .mission-grid{ grid-template-columns: 1fr; }
  .logo-grid, .logo-grid-wide{ grid-template-columns: repeat(2, 1fr); }
  .contact-inner{ grid-template-columns: 1fr; gap: 36px; }
  .channel-grid{ grid-template-columns: 1fr; }
  .channel-row{ grid-template-columns: 1fr; gap: 2px; }
  .channel-hint{ margin-left: 0; }
  .cta-card{ grid-template-columns: 1fr; }
  .cta-card-media{ order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .cta-card-media::after{ background: linear-gradient(180deg, rgba(20,28,8,0) 60%, rgba(20,28,8,.35)); }
  .tour-row, .tl-band{ grid-template-columns: 1fr; }
  .tour-row.is-reverse .tour-media{ order: 0; }
  .tl-photos{ order: -1; }
  .tl-photos img:nth-child(2), .tl-photos img:nth-child(3){ margin-top: 0; }
  .hero-quote-float{
    position: static; transform: none; margin-top: 26px; max-width: 420px;
  }
  .event-info{ width: 100%; max-width: 420px; flex-direction: column; }
  .event-info-item + .event-info-item{ box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
  .island-grid{ grid-template-columns: repeat(2, 1fr); }
  .tour-idea-grid{ grid-template-columns: 1fr; }
  .weather-strip{
    grid-template-columns: unset; grid-auto-flow: column; grid-auto-columns: 72px;
    overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity;
  }
  .weather-month{ scroll-snap-align: start; }
}
@media (max-width: 560px){
  .safety-grid{ grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .dest-slide{ width: clamp(220px, 76vw, 280px); }
  .office-grid{ grid-template-columns: 1fr; }
  .logo-grid, .logo-grid-wide{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr; }
  .hero-stats{ flex-wrap: wrap; row-gap: 18px; gap: 24px; }
  .btn-agent em{ display: none; }
  .slider-arrow{ display: none; }
  .island-grid{ grid-template-columns: 1fr; }
  .season-hero-grid{ grid-template-columns: 1fr; }
}

/* ---------- Agent Area — login ---------- */
.agent-login{ min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; position: relative; }
.agent-login-bg{ position: fixed; inset: 0; z-index: 0; }
.agent-login-media-img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.agent-login-media-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,12,6,.68) 0%, rgba(8,12,6,.4) 40%, rgba(8,12,6,.12) 70%, rgba(8,12,6,.02) 100%),
    linear-gradient(190deg, rgba(8,12,6,.15) 0%, rgba(8,12,6,.3) 45%, rgba(6,9,4,.6) 100%);
}
.agent-login-media{ position: relative; z-index: 1; overflow: hidden; display: flex; flex-direction: column; }
.agent-login-brand{ position: relative; z-index: 1; display: inline-flex; padding: 40px 0 0 48px; }
.agent-login-logo{ height: 42px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.4)); }
.agent-login-media-text{
  position: relative; z-index: 1; margin-top: auto; padding: 0 52px 60px; max-width: 540px; color: #fff;
}
.agent-login-media-text .eyebrow{ margin-bottom: 18px; }
.agent-login-media-text h1{ font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 800; line-height: 1.05; margin-bottom: 18px; }
.agent-login-quote{ font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 46ch; }

.agent-login-panel{
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 32px; background: rgba(249,250,251,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.agent-login-card{
  position: relative; width: 100%; max-width: 420px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,251,248,.88));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  padding: 44px 38px 38px;
  border: 1px solid rgba(20,24,12,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(20,24,12,.05) inset,
    0 30px 60px -20px rgba(20,30,10,.18),
    0 10px 24px -12px rgba(20,30,10,.1);
}
.agent-login-card::before{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--olive-light), var(--olive) 45%, var(--olive-dark));
}
.agent-login-badge{
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 15px; margin-bottom: 18px;
  color: #fff; background: linear-gradient(155deg, var(--olive-light), var(--olive) 55%, var(--olive-dark));
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -3px 6px rgba(0,0,0,.18) inset,
    0 10px 18px -8px rgba(118,146,43,.55);
}
.agent-login-badge svg{ width: 25px; height: 25px; }
.agent-login-card h2{ font-size: 1.6rem; font-weight: 800; margin-top: 10px; color: var(--ink); }
.agent-login-lead{ margin-top: 10px; font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }

.agent-field{ display: block; margin-top: 20px; }
.agent-field > span{ display: block; font-size: .8rem; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.agent-field-control{ position: relative; }
.agent-field-icon{
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-mute); pointer-events: none;
  transition: color .2s var(--ease);
}
.agent-field-control input{
  width: 100%; padding: 13px 16px 13px 44px; border-radius: 12px; border: 1.5px solid var(--gray-300);
  font-size: .95rem; font-family: inherit; color: var(--ink);
  background: linear-gradient(180deg, #eef0e8, #f6f7f2 55%);
  box-shadow:
    inset 0 2px 5px rgba(20,24,12,.12),
    inset 0 -1px 0 rgba(255,255,255,.7);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.agent-field-control input:focus{
  outline: none; border-color: var(--olive); background: linear-gradient(180deg, #f3f4ef, #fff 55%);
  box-shadow:
    inset 0 2px 4px rgba(20,24,12,.08),
    inset 0 -1px 0 rgba(255,255,255,.8),
    0 0 0 4px rgba(118,146,43,.14);
}
.agent-field-control input:focus ~ .agent-field-icon,
.agent-field-control:focus-within .agent-field-icon{ color: var(--olive-dark); }
.agent-field-password input{ padding-right: 46px; }
.agent-field-toggle{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; background: none; border-radius: 8px;
  color: var(--ink-mute); display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.agent-field-toggle svg{ width: 19px; height: 19px; }
.agent-field-toggle:hover{ background: var(--gray-100); color: var(--ink); }
.agent-field-toggle.is-visible{ color: var(--olive-dark); }

.agent-field-row{ display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: .85rem; }
.agent-checkbox{ display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); cursor: pointer; }
.agent-checkbox input{ width: 15px; height: 15px; accent-color: var(--olive); }
.agent-forgot{ color: var(--olive-dark); font-weight: 700; }
.agent-forgot:hover{ text-decoration: underline; }

.agent-login-error{ min-height: 1.3em; margin-top: 14px; font-size: .84rem; font-weight: 600; color: #c0392b; }
.agent-login-submit{
  width: 100%; justify-content: center; margin-top: 6px; position: relative; overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -2px 4px rgba(0,0,0,.12) inset,
    0 14px 26px -12px rgba(118,146,43,.55);
}
.agent-login-submit:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -2px 4px rgba(0,0,0,.12) inset,
    0 18px 30px -12px rgba(118,146,43,.6);
}
.agent-login-submit svg{ width: 17px; height: 17px; flex-shrink: 0; }
@keyframes agent-shake{
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.agent-login-submit.is-shake{ animation: agent-shake .5s var(--ease); }

.agent-login-help{ margin-top: 28px; font-size: .85rem; line-height: 1.6; color: var(--ink-soft); text-align: center; }
.agent-login-help a{ color: var(--olive-dark); font-weight: 700; }
.agent-login-help a:hover{ text-decoration: underline; }
.agent-login-back{ display: block; text-align: center; margin-top: 16px; font-size: .82rem; color: var(--ink-mute); }
.agent-login-back:hover{ color: var(--olive-dark); }

@media (max-width: 980px){
  .agent-login{ grid-template-columns: 1fr; }
  .agent-login-media{ min-height: 300px; }
  .agent-login-brand{ padding: 24px 0 0 24px; }
  .agent-login-media-text{ padding: 0 24px 32px; }
  .agent-login-media-text h1{ font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .agent-login-panel{ padding: 40px 24px 56px; }
}
@media (max-width: 480px){
  .agent-login-quote{ display: none; }
}

/* ---------- Agent Area — Client Area home ---------- */
.btn-sm{ padding: 9px 18px; font-size: .85rem; }

/* Nav */
.agent-nav{ position: sticky; top: 0; z-index: 100; background: var(--ink-deep); color: #fff; }
.agent-nav-inner{
  max-width: var(--container); margin-inline: auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.agent-nav-logo{ height: 34px; display: block; }
.agent-nav-toggle{
  display: none; width: 40px; height: 40px; border: none; background: rgba(255,255,255,.08);
  border-radius: 10px; color: #fff; align-items: center; justify-content: center;
}
.agent-nav-toggle svg{ width: 20px; height: 20px; }
.agent-nav-links{ display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.agent-nav-links > a, .agent-nav-drop-btn{
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.85); background: none; border: none;
  white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease);
}
.agent-nav-icon{ width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
.agent-nav-btn-label{ display: inline-flex; align-items: center; gap: 7px; }
.agent-nav-links > a:hover, .agent-nav-drop-btn:hover{ background: rgba(255,255,255,.1); color: #fff; }
.agent-nav-drop-btn svg{ width: 13px; height: 13px; transition: transform .2s var(--ease); }
.agent-nav-item{ position: relative; }
.agent-nav-item.is-open .agent-nav-drop-btn svg{ transform: rotate(180deg); }
.agent-nav-dropdown{
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 170px; background: #fff; border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 8px; display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.agent-nav-item:hover .agent-nav-dropdown,
.agent-nav-item.is-open .agent-nav-dropdown{ opacity: 1; visibility: visible; transform: translateY(0); }
.agent-nav-dropdown a{
  display: block; padding: 9px 12px; border-radius: 9px; font-size: .85rem; font-weight: 600; color: var(--ink);
}
.agent-nav-dropdown a:hover{ background: var(--gray-100); color: var(--olive-dark); }
.agent-nav-main-site{ border: 1.5px solid rgba(255,255,255,.25) !important; }
.agent-nav-divider{ width: 1px; height: 22px; background: rgba(255,255,255,.2); margin: 0 4px; }
.agent-nav-user{ display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.7); white-space: nowrap; }
.agent-nav-user strong{ color: #fff; }
.agent-nav-avatar{
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--olive-light); color: var(--olive-dark); font-size: .72rem; font-weight: 800; letter-spacing: .02em;
}
.agent-nav-logout{
  padding: 8px 16px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap;
  background: var(--olive); color: #fff; border: none;
}
.agent-nav-logout:hover{ background: var(--olive-dark); }

/* Hero */
.agent-hero{ position: relative; min-height: 46vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.agent-hero-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.agent-hero-scrim{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(20,24,12,.72)); }
.agent-hero-inner{ position: relative; z-index: 1; text-align: center; padding: 60px 24px; max-width: 800px; }
.agent-hero-inner h1{ color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.2; margin-top: 4px; }
.agent-hero-sub{ color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.6; max-width: 56ch; margin: 14px auto 0; }

/* Quick access bar */
.agent-quicklinks-wrap{ position: relative; z-index: 2; max-width: var(--container); margin: -30px auto 0; padding: 0 24px; }
.agent-quicklinks{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.agent-quicklink{
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 10px 16px;
  font-size: .8rem; font-weight: 700; color: var(--ink); background: #fff; transition: background .2s var(--ease), color .2s var(--ease);
}
.agent-quicklink:hover{ background: var(--olive-light); color: var(--olive-dark); }
.agent-quicklink-icon{
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--gray-100); color: var(--olive-dark);
}
.agent-quicklink:hover .agent-quicklink-icon{ background: rgba(255,255,255,.6); }
.agent-quicklink-icon svg{ width: 19px; height: 19px; }

/* Section scaffolding */
.agent-section{ padding: 56px 24px; scroll-margin-top: 84px; }
.agent-section-tint{ background: var(--gray-50); }
.agent-section-head{ max-width: var(--container); margin: 0 auto 28px; text-align: center; }
.agent-section-head h2{ font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; margin-top: 4px; }
.agent-section-lead{ margin-top: 10px; font-size: .95rem; color: var(--ink-soft); max-width: 640px; margin-inline: auto; }

/* ---------- Information Database hero: full photo, elegant dark overlay ---------- */
.infodb-hero{
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(64px, 9vw, 100px);
  display: flex; align-items: center; justify-content: center;
  min-height: 420px;
}
.infodb-hero-img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.infodb-hero-scrim{
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,13,9,.72) 0%, rgba(11,13,9,.6) 45%, rgba(11,13,9,.82) 100%);
}
.infodb-hero-content{ position: relative; }
.infodb-hero-content h1{ color: #fff; }
.infodb-hero-content .agent-section-lead{ color: rgba(255,255,255,.82); }

.infodb-stats{ display: flex; gap: clamp(28px, 5vw, 56px); justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.infodb-stat{ text-align: center; }
.infodb-stat strong{ display: block; font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; }
.infodb-stat span{ display: block; margin-top: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--olive-light); }
.infodb-jump{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.infodb-jump a{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .85rem; font-weight: 700;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.infodb-jump a svg{ width: 15px; height: 15px; color: var(--olive-light); }
.infodb-jump a:hover{ background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }

/* Intro + video */
.agent-intro-grid{
  max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.agent-intro-text p{ font-size: .95rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; }
.agent-video-frame{ position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--ink-deep); }
.agent-video-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* Webinar + newsletter teaser */
.agent-cta-grid{ max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: stretch; }
.agent-webinar-card{ background: #fff; border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow-sm); }
.agent-webinar-card h2{ font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; }
.agent-webinar-card p{ font-size: .92rem; line-height: 1.65; color: var(--ink-soft); }
.agent-webinar-actions{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.agent-newsletter-teaser{
  display: flex; flex-direction: column; justify-content: center; gap: 16px; text-align: center;
  background: linear-gradient(155deg, var(--olive-light), var(--olive) 65%, var(--olive-dark)); color: #fff;
  border-radius: var(--radius); padding: 28px; font-size: 1.05rem; font-weight: 700;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.agent-newsletter-teaser:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.agent-newsletter-teaser-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px;
  border-radius: 999px; background: rgba(255,255,255,.16); font-size: .85rem; margin-inline: auto;
}
.agent-newsletter-teaser-btn svg{ width: 15px; height: 15px; }

/* Informations grid */
.agent-info-grid{
  max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.agent-info-card{
  background: #fff; border-radius: var(--radius); overflow: hidden; text-align: center; box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  display: flex; flex-direction: column;
}
.agent-info-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.agent-info-media{ position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--gray-100); }
.agent-info-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.agent-info-card:hover .agent-info-media img{ transform: scale(1.06); }
.agent-info-icon{
  position: relative; margin: -18px 0 0 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 13px; background: var(--olive); color: #fff; box-shadow: 0 6px 16px rgba(20,24,12,.25);
  border: 3px solid #fff;
}
.agent-info-icon svg{ width: 21px; height: 21px; }
.agent-info-body{ padding: 30px 22px 22px; text-align: left; flex: 1; display: flex; flex-direction: column; }
.agent-info-card h3{ font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.agent-info-desc{ font-size: .84rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: 16px; flex: 1; }
.agent-info-links{ display: flex; flex-direction: column; gap: 6px; }
.agent-info-links a{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .82rem; font-weight: 700;
  color: var(--olive-dark); padding: 7px 10px; border-radius: 999px; background: var(--gray-100);
}
.agent-info-links a:hover{ background: var(--olive-light); }
.agent-info-links a svg{ width: 13px; height: 13px; }
.agent-info-links .is-soon, .agent-quicklist-actions .is-soon{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .82rem; font-weight: 700; color: var(--ink-mute); cursor: default;
  padding: 7px 10px; border-radius: 999px; background: var(--gray-100);
}
.agent-quicklist-actions .is-soon{ padding: 6px 12px; }
.is-soon em{
  font-style: normal; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-mute); background: var(--gray-200); padding: 2px 7px; border-radius: 999px;
}

/* Compact rows for reference topics with no matching real photo (visa, IMEI etc.) —
   deliberately photo-less, not a missing image. */
.agent-quicklist{ list-style: none; display: grid; gap: 10px; }
.agent-quicklist-spaced{ margin-top: 20px; }
.agent-quicklist-row{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 14px 18px; box-shadow: var(--shadow-sm);
}
.agent-quicklist-icon{
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px; background: var(--olive); color: #fff;
}
.agent-quicklist-icon svg{ width: 18px; height: 18px; }
.agent-quicklist-title{ font-weight: 700; font-size: .92rem; margin-right: auto; }
.agent-quicklist-actions{ display: flex; flex-wrap: wrap; gap: 8px; }
.agent-quicklist-actions a{
  display: inline-flex; align-items: center; font-size: .82rem; font-weight: 700;
  color: var(--olive-dark); padding: 7px 12px; border-radius: 999px; background: var(--gray-100);
}
.agent-quicklist-actions a:hover{ background: var(--olive-light); }

.agent-quicklist-panel{
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 28px);
}
.agent-quicklist-panel-title{
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute);
}
.agent-quicklist-panel-title svg{ width: 16px; height: 16px; color: var(--olive); }
.agent-quicklist-panel .agent-quicklist-row{ box-shadow: none; }
.agent-quicklist-panel .agent-quicklist-row:hover{ border-color: var(--olive); }

.infodb-subhead{
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--olive-dark); margin: 8px 0 16px;
}
.infodb-subhead:not(:first-child){ margin-top: 32px; }

/* Traveler page banner */
.agent-traveler-card{
  max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; min-height: 320px;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
}
/* contain:size stops the photo's intrinsic height from stretching the row — the text column sets the height */
.agent-traveler-photo{ width: 100%; height: 100%; object-fit: cover; contain: size; }
.agent-traveler-text{
  background: var(--ink-deep); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 44px 48px; gap: 6px;
}
.agent-traveler-text h2{ font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
.agent-traveler-text p{ font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.78); }
.agent-traveler-pw{ margin-top: 10px; color: rgba(255,255,255,.9) !important; display: flex; flex-wrap: wrap; gap: 18px; }
.agent-traveler-pw strong{ color: var(--olive-light); }
.agent-pw-row{ display: inline-flex; align-items: center; gap: 8px; }
.agent-pw-copy{
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); border: none; flex-shrink: 0;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.agent-pw-copy svg{ width: 14px; height: 14px; }
.agent-pw-copy:hover{ background: rgba(255,255,255,.22); color: #fff; }
.agent-pw-copy.is-copied{ background: var(--olive); color: #fff; }
.agent-pw-copy.is-copied::after{
  content: "Copied!"; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--ink-deep); color: #fff; font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 6px; white-space: nowrap;
}
.agent-traveler-actions{ display: flex; gap: 12px; margin-top: 20px; }

/* Photo gallery */
.agent-gallery{
  max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 6px;
}
.agent-gallery-item{
  position: relative; overflow: hidden; border-radius: 10px; padding: 0; border: none; background: none; cursor: pointer;
}
.agent-gallery-item img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.agent-gallery-item:hover img{ transform: scale(1.06); }
.agent-gallery-item:nth-child(4n+1){ grid-row: span 2; }
.agent-gallery-zoom{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10,14,8,0); color: #fff; opacity: 0; transition: opacity .2s var(--ease), background .2s var(--ease);
}
.agent-gallery-item:hover .agent-gallery-zoom{ background: rgba(10,14,8,.28); opacity: 1; }
.agent-gallery-zoom svg{ width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.agent-gallery-footer{
  max-width: var(--container); margin: 28px auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.agent-gallery-footer p{ font-size: .88rem; color: var(--ink-soft); }
.agent-gallery-footer a#agentGalleryMissingEmail{ color: var(--olive-dark); font-weight: 700; }

.agent-photo-db-btn{
  display: flex; align-items: center; gap: 16px; width: 100%; max-width: 540px; text-align: left;
  background: linear-gradient(155deg, var(--olive-light), var(--olive) 65%, var(--olive-dark)); color: #fff;
  padding: 18px 22px; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.agent-photo-db-btn:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.agent-photo-db-icon{
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px;
  background: rgba(255,255,255,.18); flex-shrink: 0;
}
.agent-photo-db-icon svg{ width: 23px; height: 23px; }
.agent-photo-db-text{ display: flex; flex-direction: column; gap: 2px; flex: 1; }
.agent-photo-db-text strong{ font-size: .95rem; }
.agent-photo-db-text span{ font-size: .78rem; color: rgba(255,255,255,.8); }
.agent-photo-db-arrow{ width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }

/* Lightbox */
.agent-lightbox{
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background: rgba(6,10,6,.92); opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s;
  padding: 60px 24px;
}
.agent-lightbox.is-open{ opacity: 1; visibility: visible; }
.agent-lightbox-figure{ max-width: min(920px, 90vw); max-height: 84vh; margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.agent-lightbox-figure img{ max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.agent-lightbox-figure figcaption{ color: rgba(255,255,255,.8); font-size: .88rem; text-align: center; }
.agent-lightbox-close{
  position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1);
  color: #fff; display: flex; align-items: center; justify-content: center; border: none;
}
.agent-lightbox-close:hover{ background: rgba(255,255,255,.2); }
.agent-lightbox-close svg{ width: 18px; height: 18px; }
.agent-lightbox-nav{
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; border: none;
}
.agent-lightbox-nav:hover{ background: rgba(255,255,255,.2); }
.agent-lightbox-nav svg{ width: 22px; height: 22px; }
.agent-lightbox-prev{ left: 16px; }
.agent-lightbox-next{ right: 16px; }

/* Newsletter grid */
.agent-news-grid{ max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.agent-news-card{ background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.agent-news-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.agent-news-media{ aspect-ratio: 16/10; overflow: hidden; }
.agent-news-media img{ width: 100%; height: 100%; object-fit: cover; }
.agent-news-body{ padding: 16px 18px 20px; }
.agent-news-body h3{ font-size: .95rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.agent-news-date{ display: block; margin-top: 10px; font-size: .78rem; color: var(--ink-mute); }

@media (max-width: 980px){
  .agent-nav-toggle{ display: flex; }
  .agent-nav-links{
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink-deep);
    flex-direction: column; align-items: stretch; padding: 10px 16px 20px; gap: 2px; box-shadow: var(--shadow-lg);
  }
  .agent-nav-links.is-open{ display: flex; }
  .agent-nav-links > a, .agent-nav-drop-btn{ width: 100%; justify-content: space-between; }
  .agent-nav-item{ width: 100%; }
  .agent-nav-dropdown{ position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255,255,255,.04); display: none; }
  .agent-nav-item.is-open .agent-nav-dropdown{ display: grid; }
  .agent-nav-dropdown a{ color: rgba(255,255,255,.8); }
  .agent-nav-dropdown a:hover{ background: rgba(255,255,255,.08); color: #fff; }
  .agent-nav-divider{ display: none; }
  .agent-nav-user, .agent-nav-logout{ margin-top: 8px; }

  .agent-intro-grid, .agent-cta-grid{ grid-template-columns: 1fr; }
  .agent-info-grid{ grid-template-columns: repeat(2, 1fr); }
  .agent-traveler-card{ grid-template-columns: 1fr; }
  .agent-traveler-photo{ height: 220px; }
  .agent-gallery{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .agent-gallery-item:nth-child(4n+1){ grid-row: span 1; }
  .agent-news-grid{ grid-template-columns: 1fr; }

  .agent-quicklinks{ grid-template-columns: repeat(3, 1fr); }
  .agent-quicklink:nth-child(4), .agent-quicklink:nth-child(5){ border-top: 1px solid var(--gray-100); }
}
@media (max-width: 560px){
  .agent-info-grid{ grid-template-columns: 1fr; }
  .agent-quicklinks-wrap{ margin-top: -22px; }
  .agent-quicklinks{ grid-template-columns: repeat(2, 1fr); }
  .agent-quicklink:nth-child(3){ border-top: 1px solid var(--gray-100); }
  .agent-quicklink-icon{ width: 32px; height: 32px; }
  .agent-quicklink-icon svg{ width: 16px; height: 16px; }
  .agent-photo-db-btn{ flex-wrap: wrap; }
  .agent-lightbox-nav{ width: 40px; height: 40px; }
  .agent-lightbox-prev{ left: 6px; }
  .agent-lightbox-next{ right: 6px; }
  .agent-lightbox-close{ top: 10px; right: 10px; }
}

/* ---------- Legal (Terms & Conditions) ---------- */
.legal-meta{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding-bottom: 28px; margin-bottom: 32px;
  border-bottom: 1px solid var(--gray-200);
}
.legal-meta-text{ font-size: .88rem; color: var(--ink-mute); font-weight: 600; }
.legal-meta-dot{ margin: 0 6px; opacity: .5; }
.legal-meta-download{ display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }

.legal-layout{ display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.legal-toc{
  position: sticky; top: calc(var(--header-h, 82px) + 24px);
  max-height: calc(100vh - var(--header-h, 82px) - 48px); overflow-y: auto;
  padding-right: 8px;
}
.legal-toc-title{
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 12px;
}
.legal-toc ol{ list-style: none; counter-reset: legal-toc; display: grid; gap: 2px; }
.legal-toc li{ counter-increment: legal-toc; }
.legal-toc a{
  display: block; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: .84rem; font-weight: 600; color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.legal-toc a::before{ content: counter(legal-toc) ". "; color: var(--ink-mute); }
.legal-toc a:hover{ background: var(--gray-50); color: var(--olive-dark); }

.legal-content{ min-width: 0; }
.legal-section{ padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--gray-100); scroll-margin-top: calc(var(--header-h, 82px) + 20px); }
.legal-section:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.legal-section h2{ font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; }
.legal-section h3{ font-size: 1.02rem; font-weight: 800; margin: 20px 0 10px; }
.legal-section p{ color: var(--ink-soft); line-height: 1.7; }
.legal-section p + p{ margin-top: 12px; }
.legal-section ul{ margin: 10px 0 14px; padding-left: 1.2em; display: grid; gap: 8px; }
.legal-section ul ul{ margin: 8px 0 0; }
.legal-section li{ color: var(--ink-soft); line-height: 1.65; }
.legal-section li::marker{ color: var(--olive); }
.legal-section a{ color: var(--olive-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal-def-list{ list-style: none; padding-left: 0; display: grid; gap: 10px; }
.legal-def-list li{ padding-left: 0; }
.legal-subhead{ margin-top: 24px; }
.legal-risk-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin: 14px 0 20px; padding: 18px; background: var(--gray-50); border-radius: var(--radius);
}
.legal-risk-grid h4{ font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--olive-dark); margin-bottom: 8px; }
.legal-risk-grid ul{ margin: 0; padding-left: 1.1em; gap: 5px; }
.legal-risk-grid li{ font-size: .82rem; line-height: 1.4; }
.legal-contact-list{ list-style: none; padding-left: 0; }

@media (max-width: 900px){
  .legal-layout{ grid-template-columns: 1fr; }
  .legal-toc{
    position: static; max-height: none; overflow: visible;
    padding: 16px 18px; background: var(--gray-50); border-radius: var(--radius); margin-bottom: 8px;
  }
  .legal-risk-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .legal-risk-grid{ grid-template-columns: 1fr; }
  .legal-meta{ flex-direction: column; align-items: flex-start; }
}