/* ==========================================================================
   SECTIONS — hero, about, services, reviews, destinations, visa,
   gallery, FAQ, blog, contact. Tier-neutral: deltas live in tiers.css.
   ========================================================================== */

/* ===================== HERO ===================== */
/* One full screen on every tier — the demo bar is the only thing above it, so
   subtracting --bar-h lands the fold exactly at the bottom of the hero.
   min-height, NOT height: a hard height clips the Premium switcher row (and the
   whole stacked mobile hero) instead of letting the section grow past the fold. */
.hero{
  position:relative;
  min-height:max(620px, calc(100vh - var(--bar-h)));
  display:flex; align-items:center;
  overflow:hidden; background:var(--marine);
}
.hero-bg-wrap{ position:absolute; inset:-60px 0; z-index:0; overflow:hidden; }
.hero-bg-slide{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1);
  transition:opacity 1.4s ease, transform 8s ease-out;
}
.hero-bg-slide.active{ opacity:1; }
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,61,92,.55), rgba(11,61,92,.85));
}
/* .hero-inner carries .wrap so the hero copy lines up with every section
   below it instead of hugging the viewport edge */
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-content{
  color:#fff; max-width:680px;
  padding-top:calc(var(--header-h) + var(--pick-h) + 40px);
  padding-bottom:90px;
}
.hero-content .mono{ color:var(--amber); margin-bottom:16px; display:inline-block; }
.hero-content h1{ color:#fff; font-size:var(--h1); margin-bottom:18px; }
.hero-content p{ color:#dfe9ed; font-size:1.08rem; max-width:520px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* hero trust strip — small, cheap credibility under the fold line */
.hero-trust{
  position:relative; z-index:2; margin-top:38px;
  display:flex; gap:28px; flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace; font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.hero-trust span{ display:flex; align-items:center; gap:7px; }
.hero-trust span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--amber); }

/* ===================== ABOUT ===================== */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:66px; align-items:center; }
.about-copy p{ color:#3d545f; margin-bottom:18px; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; }
.stat .num{ font-family:'Fraunces',serif; font-size:1.9rem; color:var(--marine); font-weight:600; }
.stat .lbl{
  font-size:.74rem; color:var(--ink-mute); font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase; letter-spacing:.05em;
}
.about-photo{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:4/5; position:relative;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.about-photo:hover img{ transform:scale(var(--img-zoom)); }

/* extra About-page-only content (Plus & Premium, where About is its own page) */
.about-values{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:80px; }
.value-card{
  background:#fff; border-radius:var(--radius); padding:30px;
  border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.value-card:hover{ transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); }
.value-card .v-ic{
  width:44px; height:44px; border-radius:12px; background:var(--mist); color:var(--marine);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:16px;
}
.value-card h4{ font-size:1.05rem; margin-bottom:8px; }
.value-card p{ font-size:.88rem; color:var(--ink-soft); }

/* ===================== REVIEWS ===================== */
.reviews{ background:var(--mist); }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review-card{
  background:#fff; border-radius:var(--radius); padding:30px;
  box-shadow:var(--shadow); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:16px;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.review-card:hover{ transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); }
.stars{ color:var(--amber); font-size:.95rem; letter-spacing:.12em; }
.review-card blockquote{
  font-family:'Fraunces',serif; font-size:1.02rem; line-height:1.5; color:var(--marine);
}
.reviewer{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.reviewer img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.reviewer h5{ font-size:.88rem; color:var(--marine); }
.reviewer span{
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--ink-mute);
  text-transform:uppercase; letter-spacing:.05em;
}
.review-summary{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:44px; font-size:.88rem; color:var(--ink-soft);
}
.review-summary strong{ font-family:'Fraunces',serif; font-size:1.5rem; color:var(--marine); }

/* ===================== CTA BAND ===================== */
.cta-band{ background:var(--marine); color:#fff; text-align:center; }
.cta-band h2{ color:#fff; font-size:var(--h2); margin-bottom:14px; }
.cta-band p{ color:#c7dae2; max-width:520px; margin:0 auto 30px; }

/* ===================== SERVICES ===================== */
/* uses .card-grid + .media-card from components.css */

/* ===================== DESTINATIONS ===================== */
.dest-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.dest-card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); aspect-ratio:3/4;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dest-card:hover{ transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); }
.dest-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.dest-card:hover img{ transform:scale(var(--img-zoom)); }
.dest-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(11,61,92,.85));
  display:flex; align-items:flex-end; padding:20px; color:#fff;
}
.dest-overlay h4{ color:#fff; font-size:1.15rem; }
.dest-overlay span{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--amber);
  text-transform:uppercase; letter-spacing:.05em;
}

/* ===================== VISA ===================== */
/* The intro band sits on the mist so the page opens with weight instead of
   dropping straight into a grid of four cards on flat sand. */
.visa-intro{
  background:var(--mist);
  border-bottom:1px solid var(--line);
}
.visa-intro-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center;
}

.visa-intro-copy h2{ font-size:var(--h2); margin-bottom:16px; }
.visa-intro-copy p{ color:var(--ink-soft); margin-bottom:28px; max-width:460px; }

.visa-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.visa-stat{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.visa-stat:hover{ transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); }
.visa-stat .num{
  font-family:'Fraunces',serif; font-size:2.1rem; font-weight:600;
  color:var(--marine); line-height:1; margin-bottom:8px;
}
.visa-stat .lbl{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--ink-mute);
  text-transform:uppercase; letter-spacing:.05em; line-height:1.4;
}

/* Service cards — the title sits ON the photo and the body carries what's
   actually included, so these read as service listings rather than the same
   plain photo-plus-caption card used everywhere else on the site. */
.visa-card .photo{ height:200px; position:relative; }
.visa-card .photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,61,92,0) 35%, rgba(11,61,92,.88));
}
.visa-card .photo h4{
  position:absolute; left:22px; right:22px; bottom:18px; z-index:2;
  color:#fff; font-size:1.2rem; margin:0;
}
.visa-card-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--amber); color:var(--tide);
  padding:5px 12px; border-radius:999px;
  font-family:'IBM Plex Mono',monospace; font-size:.6rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.visa-card .body{ padding:24px; }
.visa-card .body > p{ font-size:.9rem; color:var(--ink-soft); margin-bottom:18px; }

.visa-card-list{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.visa-card-list li{
  position:relative; padding-left:24px;
  font-size:.86rem; color:var(--ink-soft);
}
.visa-card-list li::before{
  content:'✓'; position:absolute; left:0; top:0;
  width:16px; height:16px; border-radius:50%;
  background:var(--mist); color:var(--bay);
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; font-weight:700;
}

.visa-card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:16px; border-top:1px solid var(--line);
}
.visa-card-foot .price{ margin:0; padding:0; }
.visa-card-arrow{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--mist); color:var(--marine);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  transition:background .2s ease, color .2s ease, transform var(--dur) var(--ease);
}
.visa-card:hover .visa-card-arrow{
  background:var(--marine); color:#fff; transform:translateX(3px);
}

/* Country list */
.visa-countries{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  max-width:820px; margin:0 auto;
}
.visa-countries li{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:10px 20px; font-size:.88rem; font-weight:500; color:var(--marine);
  box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease), border-color .2s ease, color .2s ease;
}
.visa-countries li img{
  width:20px; height:15px; object-fit:cover; border-radius:2px; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(11,61,92,.12);
}
.visa-countries li:hover{
  transform:translateY(var(--lift)); border-color:var(--amber); color:var(--bay);
}
.visa-countries-note{
  text-align:center; margin-top:28px; font-size:.88rem; color:var(--ink-mute);
}

/* ===================== GALLERY ===================== */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:190px; gap:16px;
}
.gallery-tile{
  position:relative; overflow:hidden; border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gallery-tile:hover{ transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); }
.gallery-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-tile:hover img{ transform:scale(var(--img-zoom)); }
.gallery-tile.tall{ grid-row:span 2; }
.gallery-tile.wide{ grid-column:span 2; }
.gallery-cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  background:linear-gradient(180deg, transparent, rgba(11,61,92,.8));
  color:#fff; font-family:'IBM Plex Mono',monospace; font-size:.66rem;
  letter-spacing:.06em; text-transform:uppercase;
  opacity:0; transition:opacity var(--dur) ease;
}
.gallery-tile:hover .gallery-cap{ opacity:1; }
html.cms-on .gallery-cap{ opacity:0; }

/* ===================== FAQ ===================== */
.faq-list{ max-width:820px; }
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow);
  transition:box-shadow var(--dur) var(--ease);
}
.faq-item.open{ box-shadow:var(--shadow-lg); }
.faq-q{
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:22px 26px; font-size:1rem; font-weight:600; color:var(--marine);
  font-family:'Fraunces',serif;
}
.faq-q .faq-ic{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--mist); color:var(--marine);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  transition:transform var(--dur) var(--ease), background .2s ease;
}
.faq-item.open .faq-ic{ transform:rotate(45deg); background:var(--amber); }
.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height var(--dur) var(--ease);
}
.faq-a p{ padding:0 26px 24px; font-size:.92rem; color:var(--ink-soft); }
.faq-item.open .faq-a{ max-height:320px; }

/* ===================== BLOG ===================== */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.blog-card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line); cursor:pointer;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.blog-card:hover{ transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); }
.blog-card .photo{ height:180px; overflow:hidden; position:relative; }
.blog-card .photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.blog-card:hover .photo img{ transform:scale(var(--img-zoom)); }
.blog-card .body{ padding:24px; }
.blog-card .date{
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--bay);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; display:block;
}
.blog-card h4{ font-size:1.08rem; margin-bottom:10px; }
.blog-card p{ font-size:.86rem; color:var(--ink-soft); }
.blog-card .read-more{ display:inline-block; margin-top:14px; font-size:.8rem; font-weight:600; color:var(--marine); }
.blog-card.fresh{ animation:freshIn .55s cubic-bezier(.22,1,.36,1); }
@keyframes freshIn{ from{ opacity:0; transform:translateY(-14px) scale(.97); } to{ opacity:1; transform:none; } }

.blog-load-more-wrap{ display:flex; justify-content:center; margin-top:44px; }

/* ===================== POST READER ===================== */
.post-back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:30px;
  font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--bay);
}
.post-back:hover{ color:var(--marine); }

.post-layout{ display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:start; }
.post-main{ min-width:0; }

.post-hero{ height:380px; border-radius:var(--radius); overflow:hidden; margin-bottom:14px; box-shadow:var(--shadow-lg); }
.post-hero img{ width:100%; height:100%; object-fit:cover; }

.post-caption{
  font-size:.82rem; font-style:italic; color:var(--ink-mute);
  margin-bottom:34px;
}
.post-caption:empty{ display:none; }

.post-top-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin-bottom:16px; flex-wrap:wrap;
}
.post-top-row .eyebrow{ margin-bottom:0; }

.post-share{ display:flex; gap:8px; flex-shrink:0; }
.post-share-btn{
  width:36px; height:36px; border-radius:50%; background:var(--mist);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .18s ease;
}
.post-share-btn:hover{ background:var(--marine); transform:translateY(-2px); }
.post-share-btn img{ width:16px; height:16px; object-fit:contain; }

.post-body h1{ font-size:2.3rem; margin:0 0 16px; }

.post-byline{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.04em;
  color:var(--ink-mute); text-transform:uppercase; margin-bottom:32px;
}
.post-byline .date{ font-family:inherit; font-size:inherit; letter-spacing:inherit; color:inherit; text-transform:inherit; }
.post-byline-dot{ opacity:.5; }

.post-body p{ color:#3d545f; margin-bottom:20px; font-size:1.02rem; }

/* ===== Read More sidebar ===== */
.post-sidebar{ position:sticky; top:calc(var(--bar-h) + var(--header-h) + 28px); }
.post-sidebar h3{ font-size:1.1rem; margin-bottom:18px; color:var(--marine); }
.related-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin-bottom:14px; cursor:pointer; box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.related-card:hover{ transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); }
.related-card h4{ font-size:.94rem; margin-bottom:8px; line-height:1.3; }
.related-card p{ font-size:.82rem; color:var(--ink-soft); margin-bottom:10px; }
.related-link{ font-size:.76rem; font-weight:600; color:var(--marine); }

/* ===================== CONTACT ===================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.info-list{ display:flex; flex-direction:column; gap:22px; margin-bottom:32px; }
.info-item{ display:flex; gap:16px; align-items:flex-start; }
.info-item .ic{
  width:42px; height:42px; border-radius:10px; background:var(--mist); color:var(--marine);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0;
}
.info-item h5{ font-size:.92rem; color:var(--marine); margin-bottom:2px; }
.info-item p{ font-size:.88rem; color:var(--ink-soft); }

.map-embed{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); height:280px;
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.9); }