/* ============================================================
   SINGLE VISA PAGE  (/visa/<country>-visa/)
   Hero · key-info bar + "Plan Trip" CTA · documents · occupation
   checklists · notes · why-us · enquiry strip.
   Breakpoints: 1100 · 900 (two-column → one) · 560 (phones) · 400
   Tokens (--gutter, --section-y, fonts, colours) come from style.css.
   ============================================================ */

html:not(.js) .reveal { opacity: 1; transform: none; }
/* style.css (<=560px) re-applies the hidden-state offset to revealed elements (same specificity, later in the file), leaving every
   revealed .reveal 16px low on phones: force the settled state. */
.js .reveal.visible, .js .reveal-left.visible, .js .reveal-right.visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
@media (max-width: 560px) { .reveal { transform: translateY(16px); } }

/* The hero is dark green and sits under the transparent nav: use the light logo/links until the nav turns solid on scroll */
body.single-visa_package .nav:not(.scrolled) .nav-logo-img { filter: brightness(0) invert(1); }
body.single-visa_package .nav:not(.scrolled) .nav-link { color: rgba(255,255,255,.9); }
body.single-visa_package .nav:not(.scrolled) .nav-link:hover { color: #fff; }
body.single-visa_package .nav:not(.scrolled) .nav-toggle { color: #fff; }

/* One content width for every band, so left edges line up from hero to footer */
.vd-wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Shared type */
.vd-h2 { font-family: var(--f-display); font-size: clamp(28px, 3.5vw, 42px); font-weight: 900; line-height: 1.15; letter-spacing: -.5px; color: var(--black); margin-bottom: clamp(18px, 2.4vw, 26px); }
.vd-h2--sm { font-size: clamp(26px, 3vw, 36px); margin-bottom: 20px; }
.vd-h2--center { text-align: center; }
.vd-h2 em { font-style: italic; color: var(--orange); }
.vd-sublabel { font-family: var(--f-body); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--orange-ink, #a8631f); font-weight: 700; margin-bottom: 14px; line-height: 1.4; }

/* ───────────────────────── HERO ───────────────────────── */
.vd-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--dark-green);
  padding: calc(var(--nav-h) + clamp(28px, 6vw, 72px)) 0 clamp(40px, 6vw, 72px);
}
.vd-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 80% 50%, rgba(213,142,74,.16) 0%, transparent 60%); }
.vd-hero-inner { max-width: 820px; }
/* Decorative passport stamp (built from this page's own country + visa type): balances the wide hero on desktop, hidden below 900px.
   Positioned against the hero, centred in the space under the nav, aligned to the content container's right edge. */
.vd-stamp { display: none; }
@media (min-width: 901px) {
  .vd-hero { min-height: 460px; }
  .vd-hero-inner { max-width: min(820px, calc(100% - clamp(230px, 24vw, 300px) - 32px)); }
  .vd-stamp {
    display: block; position: absolute; z-index: -1;
    right: max(var(--gutter), calc(50% - 600px)); top: calc(50% + var(--nav-h) / 2);
    width: clamp(230px, 24vw, 300px); height: auto; aspect-ratio: 1;
    transform: translateY(-50%) rotate(-12deg); pointer-events: none; overflow: visible;
  }
  .vd-stamp .vd-stamp__ring { fill: none; stroke: rgba(240,181,122,.7); stroke-width: 2.4; }
  .vd-stamp .vd-stamp__ring--thin { stroke-width: 1.2; stroke-opacity: .7; }
  .vd-stamp .vd-stamp__text { fill: rgba(240,181,122,.92); font-family: var(--f-body); font-weight: 700; letter-spacing: .1em; }
  .vd-stamp .vd-stamp__globe { fill: none; stroke: rgba(240,181,122,.85); stroke-width: 2.2; stroke-linecap: round; }
}
.vd-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: rgba(255,255,255,.78); font-weight: 600; margin-bottom: 14px; line-height: 1.5; }
.vd-title { font-family: var(--f-display); font-size: clamp(40px, 7vw, 96px); font-weight: 900; line-height: 1.02; letter-spacing: -.025em; color: #fff; margin-bottom: 18px; }
.vd-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 17px; border-radius: 40px; font-size: 12px; font-weight: 700; letter-spacing: .4px; line-height: 1.3; color: #fff; background: var(--orange); }
.vd-badge--e-visa { background: var(--green); }
.vd-badge--tourist { background: var(--orange); }
.vd-badge--eta { background: #1f5436; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.vd-badge--special { background: var(--black); }
.vd-hero-note { font-size: clamp(15px, 1.4vw, 17px); color: rgba(255,255,255,.86); max-width: 600px; line-height: 1.65; margin-top: 20px; }

/* ───────────────────── KEY INFO BAR ───────────────────── */
.vd-keybar { background: var(--black); padding-block: clamp(22px, 3vw, 30px); }
/* cells stretch to one height and keep their label on a shared top line (centring let the labels drift whenever the fee wrapped); only the button is centred */
.vd-keybar-inner { display: flex; align-items: stretch; }
.vd-key { padding-inline: clamp(18px, 2.6vw, 40px); border-left: 1px solid rgba(255,255,255,.14); min-width: 0; flex: 1 1 0; }
.vd-key:first-child { padding-left: 0; border-left: none; }
.vd-key--fee { flex: 1.9 1 0; }
.vd-key-label { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,.7); margin-bottom: 6px; line-height: 1.4; white-space: nowrap; }
.vd-key-value { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.4; overflow-wrap: anywhere; text-wrap: balance; }
.vd-key-value--fee { font-size: 20px; color: var(--orange-light, #e8a86e); line-height: 1.35; text-wrap: pretty; }
.fee-opt { display: inline-block; max-width: 100%; }
.vd-key-unit { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.72); white-space: nowrap; } /* "/ person" never splits from itself */
.vd-key-cta { flex: none; align-self: center; padding-left: clamp(18px, 2.6vw, 40px); }
.vd-plan-btn { font-size: 14px; padding: 15px 30px; text-align: center; justify-content: center; }

/* ───────────────────── DOCUMENTS ───────────────────── */
.vd-docs { background: var(--ivory); padding-block: clamp(48px, 6vw, 88px); }
.vd-docs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); }
.vd-docs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.vd-docs-main--narrow { max-width: 860px; }
.vd-docs-main, .vd-occ { min-width: 0; }

.vd-doclist { list-style: none; padding: 0; margin: 0; }
.vd-doc { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--gray-light); }
.vd-dot { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; flex: none; margin-top: .62em; }
.vd-doc-text { font-size: 15px; color: var(--black-soft); line-height: 1.6; min-width: 0; }
/* No occupation tabs and six or more documents: the checklist flows into two columns instead of leaving the right third empty */
.vd-doclist--cols { column-count: 2; column-gap: clamp(36px, 5vw, 72px); }
.vd-doclist--cols .vd-doc { break-inside: avoid; }
.vd-empty { font-size: 15px; color: #62625a; line-height: 1.65; }

.vd-notes { background: var(--orange-pale); border-radius: 16px; padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.6vw, 26px); margin-top: 28px; }
.vd-notes-list { list-style: none; padding: 0; margin: 0; }
.vd-notes-list li { position: relative; font-size: 14px; color: var(--black-soft); line-height: 1.65; padding: 5px 0 5px 22px; }
/* full-width notes box (no occupation tabs): the notes sit side by side instead of one long strip */
.vd-notes--wide { margin-top: clamp(28px, 4vw, 44px); }
.vd-notes--wide .vd-notes-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: 40px; }
.vd-notes-list li::before { content: ''; position: absolute; left: 0; top: calc(.85em + 5px); width: 12px; height: 2px; border-radius: 1px; background: var(--orange); }

/* Occupation tabs */
.vd-occ-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.vd-occ-tab {
  flex: 0 0 auto; scroll-snap-align: center;
  min-height: 44px; padding: 0 20px; border-radius: 60px;
  font-family: var(--f-body); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--black); background: #fff; border: 1.5px solid var(--gray-light); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
@media (hover: hover) { .vd-occ-tab:not(.is-active):hover { border-color: var(--orange); color: #a95f1b; } }
.vd-occ-tab.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
.vd-occ-tab:focus-visible { outline-offset: -3px; }
.vd-occ-panel[hidden] { display: none; }
.vd-occ-list { list-style: none; padding: 0; margin: 0; }
.vd-occ-list li { position: relative; padding: 11px 0 11px 20px; border-bottom: 1px solid var(--ivory-3); font-size: 14px; color: var(--black-soft); line-height: 1.6; }
.vd-occ-dot { position: absolute; left: 0; top: 1.05em; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; }

/* ───────────────────── WHY US ───────────────────── */
.vd-why { background: var(--ivory-2); padding-block: clamp(48px, 6vw, 88px); }
.vd-why-head { text-align: center; margin-bottom: clamp(26px, 3.6vw, 40px); }
.vd-why-head .section-label { text-align: center; }
.vd-why-head .vd-h2 { margin-bottom: 0; }
.vd-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.vd-why-item { background: #fff; border-radius: 18px; padding: clamp(22px, 2.4vw, 28px); text-align: center; }
.vd-why-icon { width: 56px; height: 56px; background: var(--orange-pale); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.vd-why-title { font-family: var(--f-display); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--black); margin-bottom: 8px; }
.vd-why-desc { font-size: 14px; color: #62625a; line-height: 1.7; }

/* ───────────────────── CTA STRIP ───────────────────── */
.visa-enquiry .vd-cta-label { font-size: 11px; line-height: 1.5; text-align: center; margin: 0 auto 16px; max-width: none; }
.visa-enquiry h2 { line-height: 1.15; }
.visa-enquiry p:not(.section-label) { max-width: 620px; margin: 0 auto clamp(26px, 4vw, 36px); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; }
.vd-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.vd-cta-wa { border-color: rgba(255,255,255,.4); color: #fff; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1100px) {
  .vd-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* key bar: three info cells get the full width, the CTA takes its own row underneath */
  .vd-keybar-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; row-gap: 22px; }
  .vd-key { padding-inline: clamp(16px, 2.4vw, 28px); }
  .vd-key--fee { flex: none; }
  .vd-key-cta { grid-column: 1 / -1; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.14); }
}

@media (max-width: 900px) {
  .vd-docs-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .vd-docs-main, .vd-docs-main--narrow { max-width: none; }
  .vd-doclist--cols { column-count: 1; }

  /* key bar: fee on its own row, then processing + type, then the CTA full width */
  .vd-keybar-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-items: start; }
  .vd-key, .vd-key:first-child { padding: 0; border-left: none; }
  .vd-key--fee { grid-column: 1 / -1; }
  .vd-key:not(.vd-key--fee) { border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; }
  .vd-key-cta { grid-column: 1 / -1; padding: 4px 0 0; }
  .vd-plan-btn { width: 100%; min-height: 52px; }
}

@media (max-width: 560px) {
  .vd-hero { padding-top: calc(var(--nav-h) + 22px); }
  .vd-title { margin-bottom: 16px; }
  .vd-key-label { letter-spacing: 1.5px; }
  .vd-key-value--fee { font-size: 18px; }
  .vd-key-value { font-size: 16px; }

  .vd-doc { padding: 12px 0; }

  /* occupation chips: wrap into a few rows so every option is visible at a glance (no hidden, scrolling chips) */
  .vd-occ-tabs { gap: 8px; margin-bottom: 22px; }
  .vd-occ-tab { font-size: 14px; padding: 0 16px; }

  .vd-why-grid { grid-template-columns: 1fr; gap: 12px; }
  .vd-why-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; text-align: left; padding: 20px; }
  .vd-why-icon { width: 48px; height: 48px; margin: 0; }
  .vd-why-icon svg { width: 24px; height: 24px; }

  .vd-cta-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .vd-cta-actions a { justify-content: center; min-height: 52px; }
}