/* Override logo for unscrolled page */
#header .logo img,
#header .logo svg {
  display: inherit;
  height: 63px;
}

/* Hero */
.hero { margin: 1rem 0 1.5rem; }
.hero__copy { max-width: 900px; }
.lead { font-size: 1.15rem; opacity: .9; margin-top: .5rem; }
.hero--center .hero__copy { margin: 0 auto; text-align: center; }
.hero--center .cta-row { justify-content: center; }

/* CTA buttons */
.cta-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-top: 1rem; }
.btn { display:inline-block; padding:.7rem 1rem; border-radius: 12px; text-decoration:none; font-weight:600; }
.btn--primary { background: rgba(0,0,0,.85); color:#fff; }
.btn--ghost { background: rgba(0,0,0,.06); color: inherit; }

/* Generic grids */
.grid { display:grid; gap: 1rem; margin-top: .75rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px)  {
  .grid--2, .grid--4 { grid-template-columns: 1fr; }
}

/* Generic cards */
.card {
  padding: 1.25rem;
  border-radius: 16px;
  background: rgba(0,0,0,.03);
}

.card--link {
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease;
}
.card--link:hover { transform: translateY(-2px); }

.card__img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: .85rem;
}

.card__cta { display:inline-block; margin-top:.6rem; font-weight:700; }
.muted { opacity: .75; font-size: .95rem; }

/* Trial CTA button alignment */
.cta-trial a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* Intent cards (B2B vs B2C) */
.intent-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.intent-card{
  display:block;
  padding: 1.25rem;
  border-radius: 16px;
  background: rgba(0,0,0,.03);
  text-decoration:none;
  color: inherit;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.intent-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.intent-card span{ font-weight: 700; display:inline-block; margin-top: .5rem; }

/* Management team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.team-card {
  text-align: center;
  padding: 1.25rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease;
}

.team-card:hover { transform: translateY(-3px); }

.team-card img {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0.75rem;
}

.team-card h3 { margin: 0.25rem 0 0; }

.team-card p {
  margin: 0.25rem 0 0.5rem;
  opacity: 0.8;
}

.team-card a {
  text-decoration: none;
  font-weight: 600;
}

/* City jump + city rows */
.city-jump{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin: 1rem 0 1.5rem;
  justify-content:flex-end;
}
.city-jump__label{ opacity:.8; font-weight:600; }
.city-jump__select{
  padding:.6rem .75rem;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
}

.city-row{ margin: 1.5rem 0 2rem; }
.city-row__header h2{ margin: 0 0 1rem; }

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

.media-card{
  padding: 1rem;
  border-radius: 16px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
}
.media-card h3{ margin-top: 0; }

/* Embeds (YouTube / images) */
.media-embed{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 14px;
}
.media-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.media-embed img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
}

/* WHY: 2 rows of 3 (desktop) */
.why-grid{
  display:grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Why DMO grid (your page uses this class) */
.why-dmo-grid{
  display:grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* Equal-height cards inside Why DMO grid */
.why-dmo-grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.why-dmo-grid .card h3 { margin-bottom: 0.5rem; }
.why-dmo-grid .card p { flex-grow: 1; }

/* Standardize embedded media height inside Why DMO cards */
.why-dmo-grid .media-embed {
  margin-top: 0.75rem;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
}
.why-dmo-grid .media-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Discover page */
.discover-grid { align-items: start; }
.discover-card h2 { margin-top: 0; }
.discover-media {
  margin: 0.75rem 0 1rem;
  border-radius: 16px;
  overflow: hidden;
}
.discover-card ul { margin-top: .75rem; }

/* Regions grid (single definition, equal heights) */
.region-grid{
  display:grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* Region cards: hover + equal-height */
.region-card{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
}

.region-grid .region-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.region-grid .region-card .card__img{
  height: 170px;
  transform: scale(1.02);
  transition: transform .25s ease, filter .25s ease;
}

.region-grid .region-card .card__cta{
  margin-top: auto;
}

.region-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 250px at 20% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(600px 220px at 80% 10%, rgba(255,255,255,.35), transparent 55%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.region-card:hover{ transform: translateY(-3px); }
.region-card:hover .card__img{
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.02);
}
.region-card:hover::after{ opacity: 1; }

/* Country list + flags */
.region-country-list{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .75rem;
  margin:.5rem 0 .75rem;
  padding:0;
  list-style:none;
}

.region-country-list a{
  font-size:.92rem;
  text-decoration:none;
  border-bottom: 1px solid rgba(0,0,0,.25);
}

.region-country-list .flag{
  font-size:.95em;
  margin-right:.35rem;
  opacity:.7;
  filter:saturate(.9);
}

/* Lazy-load hint */
.region-card[data-lazy-countries="1"]:not([data-hydrated="1"]) .region-country-list:empty::before{
  content:"Hover to view countries";
  opacity:.65;
  font-size:.92rem;
}

/* Active highlight (single definition) */
.region-card.is-active{
  outline: 2px solid rgba(0,0,0,.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.region-card.is-active::after{ opacity: 1; }

/* Messaging channel cards */
.channel-card{
  display:flex;
  flex-direction:column;
}

.channel-icon{
  height: 36px;
  width: 36px;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.channel-icon img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.channel-icon img{
  opacity: .95;
}


.channel-card.whatsapp .channel-icon{ color:#25D366; }
.channel-card.telegram .channel-icon{ color:#229ED9; }
.channel-card.line .channel-icon{ color:#06C755; }

.region-card .card__img{
  height: auto;
  aspect-ratio: 16 / 7;   /* wide map banner */
  width: 100%;
  object-fit: cover;
}

/* NEW: 3-up grid for messaging cards */
.destinations-grid{
  display:grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: .75rem;
}

/* Responsive (single breakpoint block) */
@media (max-width: 900px){
  .intent-grid { grid-template-columns: 1fr; }
  .team-grid   { grid-template-columns: 1fr; }

  .city-row__grid { grid-template-columns: 1fr; }
  .city-jump { justify-content:flex-start; }

  .why-grid,
  .why-dmo-grid,
  .discover-grid,
  .region-grid,
  .destinations-grid {
    grid-template-columns: 1fr;
  }
}

/* Override logo for scrolled page */
body.header-fixed.header-animated #header.scrolled .logo img,
body.header-fixed.header-animated #header.scrolled .logo svg {
  height: 42px;
}

/* Custom button style */
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

/* Style the anchor element to look like a button */
.external-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.external-button:hover { background-color: #0056b3; }

/* Map */
#map {
  height: 500px;
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
}

/* Prevent container or parent elements from collapsing */
.container { overflow: visible; }

/* Optional: ensure body and html fill viewport */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}