/* ==========================================================================
   VISIT VISA UAE — "GULF CONCIERGE" DESIGN LAYER
   ==========================================================================
   A full visual redesign loaded after theme.css. It keeps the existing markup
   and structure and replaces the visual language:

     · the coral / cobalt / lime accents and hard offset shadows are retired
       in favour of one antique-gold accent and soft, low-lying shadows
     · a single spacing scale drives every section, card and form
     · a wider type scale with real jumps between display and body
     · slower, quieter motion in the luxury register

   Everything is token-driven, so a palette change is a one-place edit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --ink:        #10201C;
  --ink-soft:   #1A302A;
  --ink-line:   rgba(16, 32, 28, .10);
  --sand:       #F5F1E8;
  --sand-deep:  #EDE7DA;
  --paper:      #FCFAF5;
  --bone:       #F5F1E8;

  /* Brand */
  --brand:      #1F473D;
  --brand-soft: #2F5F52;
  --green:      #1F473D;

  /* One accent, used decisively */
  --gold:       #B08D4C;
  --gold-lift:  #C9A868;
  --gold-wash:  rgba(176, 141, 76, .10);
  --saffron:    #B08D4C;

  /* The old secondary accents are folded into the new palette so any
     rule in theme.css still referencing them stays on-brand. */
  --coral:      #B08D4C;
  --cobalt:     #1F473D;
  --lime:       #C9A868;

  /* Text */
  --muted:      #6B7873;
  --muted-soft: #94A09B;
  --line:       #DED8CB;

  /* Rhythm — every vertical measurement derives from these */
  --space-2xs:  .5rem;
  --space-xs:   .875rem;
  --space-sm:   1.25rem;
  --space-md:   2rem;
  --space-lg:   3rem;
  --space-xl:   clamp(3.5rem, 6vw, 5.5rem);
  --space-2xl:  clamp(5rem, 10vw, 9rem);
  --gutter:     clamp(1.5rem, 5vw, 4.5rem);
  --wrap:       1240px;
  --measure:    68ch;

  /* Type scale with deliberate jumps */
  --display:    clamp(2.75rem, 6.5vw, 5.75rem);
  --h2:         clamp(2rem, 4vw, 3.5rem);
  --h3:         clamp(1.25rem, 2vw, 1.75rem);
  --body:       1.0625rem;
  --small:      .875rem;
  --label:      .6875rem;

  /* Motion — slow and few */
  --ease:       cubic-bezier(.22, 1, .36, 1);
  --fast:       .28s var(--ease);
  --slow:       .62s var(--ease);

  /* Depth — soft and low, never hard offsets */
  --shadow-sm:  0 2px 8px rgba(16, 32, 28, .05);
  --shadow-md:  0 18px 40px -24px rgba(16, 32, 28, .38);
  --shadow-lg:  0 40px 80px -40px rgba(16, 32, 28, .45);
}

/* --------------------------------------------------------------------------
   2. FOUNDATION
   -------------------------------------------------------------------------- */

body {
  background: var(--sand);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--body);
  line-height: 1.7;
  letter-spacing: -.005em;
}

.wrap { width: min(var(--wrap), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }

/* Section rhythm. Consecutive sections share one seam instead of doubling up. */
.section { padding-block: var(--space-2xl); }
.section + .section { padding-top: 0; }
.section-ink + .section,
.section + .section-ink,
.section-ink { padding-top: var(--space-2xl); }

.section-ink { background: var(--ink); color: var(--sand); }
.section-ink h2, .section-ink h3 { color: var(--sand); }
.section-ink p { color: rgba(245, 241, 232, .68); }

/* Alternating surface so six stacked sections don't read as one slab. */
.route-desk-stories,
.prechat-section { background: var(--paper); }

/* Display type: lighter weight, tighter tracking, optical sizing. */
h1, h2, h3,
.hero-copy h1, .page-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-variation-settings: 'opsz' 120;
  letter-spacing: -.035em;
  line-height: 1.02;
  color: var(--ink);
}

.hero-copy h1, .page-hero h1, h1 {
  font-size: var(--display);
  line-height: .96;
  letter-spacing: -.045em;
  margin: 0 0 var(--space-sm);
}

h2, .section-heading h2, .split-heading h2, .cta-inner h2 {
  font-size: var(--h2);
  max-width: 18ch;
  margin: 0;
}

h3 { font-size: var(--h3); letter-spacing: -.02em; }

.hero-copy h1 em,
h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-lift);
}

.lede, .section-lede {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 54ch;
  margin-top: var(--space-sm);
}

/* Eyebrows: fine, wide-tracked micro-caps with a hairline lead-in. */
.eyebrow, .card-kicker, .contact-label, .service-tag {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.section-ink .eyebrow, .home-hero .eyebrow, .page-hero .eyebrow { color: var(--gold-lift); }

/* --------------------------------------------------------------------------
   3. BUTTONS AND LINKS
   -------------------------------------------------------------------------- */

.btn, .nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 54px;
  padding: 0 var(--space-md);
  border: 1px solid transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  overflow: hidden;
  transition: color var(--fast), border-color var(--fast), background-color var(--fast);
}

/* Fill sweep rather than a jump on hover. */
.btn::before, .nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--slow);
  z-index: -1;
}

.btn > *, .nav-cta > * { position: relative; z-index: 1; }
.btn:hover::before, .nav-cta:hover::before { transform: scaleX(1); }

.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { color: var(--sand); }

.btn-dark, .nav-cta { background: var(--ink); color: var(--sand); }
.btn-dark::before, .nav-cta::before { background: var(--gold); }
.btn-dark:hover, .nav-cta:hover { color: var(--ink); }

.btn.full, .full { width: 100%; }

/* Text links: underline wipes in from the left. */
.text-link, .service-foot {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-bottom: 4px;
  border: 0;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--slow), color var(--fast);
}

.text-link:hover, .service-foot:hover { background-size: 0 1px; color: var(--gold); }
.text-link.light, .section-ink .text-link, .home-hero .text-link { color: var(--gold-lift); }

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: auto;
  min-height: 92px;
  padding-block: var(--space-sm);
  background: rgba(245, 241, 232, .88);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--ink-line);
  transition: min-height var(--fast), background-color var(--fast);
}

.topbar.is-scrolled { min-height: 74px; background: rgba(245, 241, 232, .97); box-shadow: var(--shadow-sm); }

.nav-wrap { gap: var(--space-md); }

.brand { gap: var(--space-xs); font-size: 0; }
.brand span {
  font-size: var(--label);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand-mark-image { width: auto; height: 42px; max-width: 168px; }

.primary-nav ul { gap: var(--space-md); }
.primary-nav a {
  position: relative;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  padding-block: 6px;
}

/* Nav underline grows out from the centre. */
.primary-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: left var(--slow), right var(--slow);
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after { left: 0; right: 0; }

.header-search input {
  min-height: 42px;
  padding: 0 var(--space-sm);
  border: 1px solid var(--line);
  background: transparent;
  font-size: .8125rem;
  transition: border-color var(--fast), background-color var(--fast);
}
.header-search input:focus { outline: 0; border-color: var(--gold); background: var(--paper); }

.header-actions { display: flex; align-items: center; gap: var(--space-xs); }

.nav-cta { min-height: 44px; padding: 0 var(--space-sm); font-size: .6875rem; }
.nav-cta-emergency { background: transparent; color: var(--ink); border-color: var(--ink-line); }
.nav-cta-tours { background: transparent; color: var(--muted); border-color: var(--ink-line); }

.menu-toggle {
  min-height: 44px;
  padding: 0 var(--space-sm);
  border: 1px solid var(--ink-line);
  background: transparent;
  font-size: var(--label);
  letter-spacing: .18em;
}
.menu-toggle:hover { background: var(--ink); border-color: var(--ink); color: var(--sand); }

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */

.home-hero {
  min-height: min(88vh, 860px);
  display: flex;
  align-items: center;
  background: var(--ink);
  overflow: hidden;
}

.hero-bg {
  background:
    linear-gradient(100deg, rgba(16, 32, 28, .96) 0%, rgba(16, 32, 28, .82) 42%, rgba(16, 32, 28, .38) 100%),
    url('../images/hero.jpg') center 40% / cover no-repeat;
  transform: scale(1.02);
  animation: vvuae-drift 24s var(--ease) infinite alternate;
}

@keyframes vvuae-drift {
  to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}

/* Asymmetric split rather than an even two-column. */
.hero-inner, .page-hero-inner {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: clamp(3rem, 7vw, 7rem);
  padding-block: var(--space-2xl);
  align-items: center;
}

.hero-copy h1 { color: var(--sand); max-width: 15ch; }
.hero-copy .lede { color: rgba(245, 241, 232, .7); max-width: 46ch; }

.hero-actions { gap: var(--space-md); margin-top: var(--space-lg); flex-wrap: wrap; }

/* Eligibility card floats over the hero seam. */
.eligibility-card, .rail-card {
  padding: var(--space-lg);
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-lg);
}

.eligibility-card h2, .rail-card h3 {
  font-size: 1.5rem;
  max-width: none;
  margin: var(--space-2xs) 0 var(--space-sm);
}

.card-top { margin-bottom: var(--space-sm); }

.stamp {
  width: 58px;
  height: 58px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-size: .625rem;
  letter-spacing: .12em;
  color: var(--gold);
}

.eligibility-card label, .rail-card label {
  margin-top: var(--space-sm);
  font-size: var(--label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.eligibility-card select, .rail-card select {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
  color: var(--ink);
  transition: border-color var(--fast);
}
.eligibility-card select:focus, .rail-card select:focus { outline: 0; border-bottom-color: var(--gold); }

.card-note, .rail-foot, .form-note {
  margin-top: var(--space-sm);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--muted-soft);
}

/* --------------------------------------------------------------------------
   6. MARQUEE
   -------------------------------------------------------------------------- */

.marquee {
  background: var(--ink-soft);
  padding: 0;
  gap: 0;
  border-block: 1px solid rgba(245, 241, 232, .08);
}

.marquee a, .marquee span, .marquee div {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, .55);
  text-align: center;
  border-left: 1px solid rgba(245, 241, 232, .08);
  transition: color var(--fast), background-color var(--fast);
}
.marquee > :first-child { border-left: 0; }
.marquee a:hover { color: var(--gold-lift); background: rgba(255, 255, 255, .03); }

/* --------------------------------------------------------------------------
   7. SECTION HEADINGS
   -------------------------------------------------------------------------- */

.section-heading, .split-heading, .cta-inner {
  align-items: end;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--ink-line);
}

.section-ink .section-heading,
.section-ink .cta-inner { border-bottom-color: rgba(245, 241, 232, .12); }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */

.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}

.service-card, .blog-card, .comparison-card {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  min-height: 300px;
  background: var(--paper);
  transition: background-color var(--slow);
}

/* A gold rule draws in along the top edge instead of a lift. */
.service-card::after, .comparison-card::after {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  height: 2px;
  width: 0;
  background: var(--gold);
  transition: width var(--slow);
}
.service-card:hover::after, .comparison-card:hover::after { width: 100%; }
.service-card:hover, .comparison-card:hover { background: var(--sand-deep); }

.card-index {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  opacity: .5;
  margin-bottom: var(--space-sm);
}

.service-card h3, .service-card h2 { font-size: 1.375rem; margin: var(--space-2xs) 0; }
.service-card p { font-size: .9375rem; line-height: 1.65; color: var(--muted); }
.service-foot { margin-top: auto; padding-top: var(--space-md); }

/* GCC route tiles */
.gcc-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: rgba(245, 241, 232, .12); }
.gcc-grid a {
  padding: var(--space-lg) var(--space-md);
  min-height: 200px;
  border: 0;
  background: var(--ink);
  gap: var(--space-2xs);
  transition: background-color var(--slow);
}
.gcc-grid a:hover { background: var(--ink-soft); }
.gcc-grid strong { font-family: 'Fraunces', serif; font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; }

/* --------------------------------------------------------------------------
   9. ROUTE DESK
   -------------------------------------------------------------------------- */

.route-desk-layout { gap: clamp(3rem, 6vw, 6rem); }
.route-desk-intro { position: sticky; top: 130px; align-self: start; }

.route-story-grid { gap: 1px; background: var(--ink-line); }

.route-story {
  min-height: 300px;
  padding: var(--space-lg) var(--space-md);
  gap: var(--space-2xs);
}

.route-story img { filter: saturate(.7) brightness(.85); transition: transform 1.1s var(--ease), filter var(--slow); }
.route-story:hover img { transform: scale(1.06); filter: saturate(.95) brightness(.95); }
.route-story:after { background: linear-gradient(180deg, transparent 20%, rgba(16, 32, 28, .92) 100%); }

.route-story-label {
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-lift);
}
.route-story strong { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }

/* --------------------------------------------------------------------------
   10. COMPARISON TABLE
   -------------------------------------------------------------------------- */

.comparison-filter-bar {
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--paper);
  border: 1px solid var(--ink-line);
  margin-bottom: var(--space-lg);
}

.comparison-filter-bar label, .comparison-filters label {
  font-size: var(--label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.comparison-filter-bar select, .comparison-filters select {
  min-height: 46px;
  padding: 0 var(--space-sm);
  border: 1px solid var(--line);
  background: var(--sand);
}

.route-comparison-table { border: 1px solid var(--ink-line); background: var(--paper); }

.route-comparison-row {
  padding: var(--space-md);
  border-bottom: 1px solid var(--ink-line);
  align-items: center;
  transition: background-color var(--fast);
}
.route-comparison-row:last-child { border-bottom: 0; }
.route-comparison-row:not(.route-comparison-head):hover { background: var(--sand-deep); }

.route-comparison-head {
  background: var(--ink);
  color: var(--sand);
  font-size: var(--label);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.comparison-price {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--brand);
}

.filter-reset, .load-more-button {
  min-height: 46px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: var(--label);
  letter-spacing: .16em;
  transition: background-color var(--fast), color var(--fast), border-color var(--fast);
}
.filter-reset:hover, .load-more-button:hover { background: var(--ink); border-color: var(--ink); color: var(--sand); }

/* --------------------------------------------------------------------------
   11. VIDEO
   -------------------------------------------------------------------------- */

.video-section-inner { gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.video-frame { box-shadow: var(--shadow-lg); border: 0; }
.video-poster img { aspect-ratio: 16 / 10; filter: saturate(.75); transition: transform 1.2s var(--ease), filter var(--slow); }
.video-poster:hover img { transform: scale(1.05); filter: saturate(.95); }
.video-poster-shade { background: linear-gradient(180deg, rgba(16, 32, 28, .1), rgba(16, 32, 28, .6)); }

.video-play {
  width: 82px;
  height: 82px;
  background: rgba(252, 250, 245, .92);
  color: var(--ink);
  font-size: 1.125rem;
  transition: transform var(--slow), background-color var(--fast);
}
.video-poster:hover .video-play { transform: scale(1.08); background: var(--gold); }

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */

.inquiry-form {
  padding: clamp(var(--space-lg), 5vw, var(--space-xl));
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-md);
}

.inquiry-form-head { margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--ink-line); }
.inquiry-form-head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: var(--space-xs); }

.inquiry-grid { gap: var(--space-md) var(--space-lg); }

.inquiry-field label { font-size: var(--label); letter-spacing: .2em; color: var(--muted); }

.inquiry-field input,
.inquiry-field select,
.inquiry-field textarea {
  min-height: 52px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color var(--fast);
}

.inquiry-field textarea { padding-top: 10px; }

.inquiry-field input:focus,
.inquiry-field select:focus,
.inquiry-field textarea:focus {
  outline: 0;
  border-bottom-color: var(--gold);
  box-shadow: 0 1px 0 0 var(--gold);
}

.inquiry-field input::placeholder, .inquiry-field textarea::placeholder { color: var(--muted-soft); }
.inquiry-field input[readonly] { background: transparent; color: var(--muted); }

.inquiry-actions { gap: var(--space-md); margin-top: var(--space-xl); }

.inquiry-notice {
  padding: var(--space-md) var(--space-lg);
  border: 0;
  border-left: 2px solid var(--brand);
  background: var(--gold-wash);
  color: var(--ink);
}
.inquiry-notice-error { border-left-color: #9C4A32; background: rgba(156, 74, 50, .07); color: #6B2415; }

/* --------------------------------------------------------------------------
   13. ARTICLE AND EDITORIAL
   -------------------------------------------------------------------------- */

.article {
  max-width: var(--measure);
  font-size: 1.125rem;
  line-height: 1.78;
  color: #33413C;
}

.article h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: 2.2em; max-width: 22ch; }
.article h3 { margin-top: 1.8em; }
.article a { color: var(--brand); border-bottom-color: rgba(31, 71, 61, .3); }
.article a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.article blockquote {
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-left: 2px solid var(--gold);
  font-family: 'Fraunces', serif;
  font-size: 1.375rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
}

/* Steps as a numbered editorial index. */
.steps { gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); }
.steps > div { padding: var(--space-lg) var(--space-md); background: var(--paper); }
.steps b { font-family: 'Fraunces', serif; font-size: 2.25rem; font-weight: 400; color: var(--gold); opacity: .55; }
.steps strong { font-size: 1.0625rem; font-weight: 500; }
.steps span { font-size: .9375rem; color: var(--muted); }

.annotation {
  padding: var(--space-md) var(--space-lg);
  background: var(--gold-wash);
  border: 0;
  border-left: 2px solid var(--gold);
  font-size: .9375rem;
  color: var(--ink-soft);
}

.faq-list details, details { border-bottom: 1px solid var(--ink-line); padding: var(--space-md) 0; }
.faq-list summary, details summary {
  font-family: 'Fraunces', serif;
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -.015em;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: rgba(245, 241, 232, .72);
  padding-top: var(--space-2xl);
  border-top: 2px solid var(--gold);
}

.footer-grid { gap: var(--space-xl) var(--space-lg); padding-bottom: var(--space-xl); }

.site-footer h3, .site-footer h4, .site-footer strong {
  color: var(--sand);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.site-footer a { color: rgba(245, 241, 232, .68); font-size: .9375rem; transition: color var(--fast); }
.site-footer a:hover { color: var(--gold-lift); }

.footer-brand p { max-width: 34ch; font-size: .9375rem; line-height: 1.7; }
.footer-brand-lockup .brand-mark-image { height: 56px; max-width: 200px; }

.footer-contact-item { padding-block: var(--space-2xs); border-bottom: 1px solid rgba(245, 241, 232, .09); }
.footer-phone, .footer-email { font-size: 1rem; }

.footer-social-row { gap: var(--space-sm); padding-top: var(--space-md); }

.contact-copy { color: rgba(245, 241, 232, .4); transition: color var(--fast); }
.contact-copy:hover { color: var(--gold-lift); }

/* --------------------------------------------------------------------------
   15. FLOATING AND UTILITY
   -------------------------------------------------------------------------- */

.floating-whatsapp {
  background: var(--ink);
  color: var(--sand);
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-md);
  font-size: .8125rem;
  letter-spacing: .1em;
  transition: background-color var(--fast), color var(--fast);
}
.floating-whatsapp:hover { background: var(--gold); color: var(--ink); }

.back-to-top { background: var(--ink); color: var(--sand); border: 1px solid var(--gold); }

.empty-state { border: 1px solid var(--ink-line); border-top: 2px solid var(--gold); background: var(--paper); }

.blog-tools { background: var(--paper); border: 1px solid var(--ink-line); border-left: 2px solid var(--gold); padding: var(--space-md); }
.blog-filters a, .blog-filters button, .search-category-chips a {
  border: 1px solid var(--line);
  background: transparent;
  font-size: .75rem;
  letter-spacing: .1em;
  padding: 11px 16px;
  color: var(--muted);
}
.blog-filters a:hover, .search-category-chips a:hover,
.blog-filters a.active, .search-category-chips a.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sand);
  transform: none;
}

.comparison-hero, .contact-hero, .page-hero, .legal-hero, .emergency-hero, .search-results-hero { background: var(--ink); }
.comparison-hero-art { opacity: .07; }

.route-check { font-size: .9375rem; color: var(--muted); }
.route-stamp { border-color: var(--gold); color: var(--gold); font-size: var(--label); letter-spacing: .2em; }
.route-number { font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--gold); opacity: .6; }

/* --------------------------------------------------------------------------
   16. SCROLL REVEAL
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .route-desk-intro { position: static; }
}

@media (max-width: 900px) {
  :root { --space-2xl: clamp(3.5rem, 9vw, 5rem); }

  .topbar { min-height: 72px; }
  .brand span { display: none; }
  .brand-mark-image { height: 34px; }

  .home-hero { min-height: auto; }
  .hero-inner, .page-hero-inner { grid-template-columns: 1fr; padding-block: var(--space-xl); }
  .hero-bg { background-position: 60% center; }
  .hero-copy h1 { max-width: none; }

  .marquee { grid-template-columns: repeat(2, 1fr); }
  .marquee a, .marquee span, .marquee div { border-top: 1px solid rgba(245, 241, 232, .08); }

  .section-heading, .split-heading, .cta-inner { display: grid; gap: var(--space-md); }
  h2, .section-heading h2 { max-width: none; }
}

@media (max-width: 600px) {
  :root { --gutter: 1.25rem; }

  .btn, .nav-cta { min-height: 50px; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .inquiry-actions { display: grid; gap: var(--space-sm); }
  .service-card, .blog-card, .comparison-card { min-height: 0; padding: var(--space-md) var(--space-sm); }
  .route-story { min-height: 240px; }
}

/* Hover effects only where a real pointer exists. */
@media (hover: none), (pointer: coarse) {
  .service-card:hover, .comparison-card:hover { background: var(--paper); }
  .route-story:hover img, .video-poster:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   18. INNER PAGES — hubs, siblings, breadcrumbs, cross-links
   ========================================================================== */

/* Breadcrumbs sit on a quiet band under the header. */
.vvuae-breadcrumbs {
  /* theme.css capped this at 1280px with 5vw padding, so the bar floated
     inset from the page edges and its text never lined up with the content. */
  display: block;
  max-width: none;
  margin: 0;
  padding: var(--space-sm) 0;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-line);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.vvuae-breadcrumbs .wrap { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; }
.vvuae-breadcrumbs a { color: var(--muted); transition: color var(--fast); }
.vvuae-breadcrumbs a:hover { color: var(--gold); }
.vvuae-breadcrumbs span[aria-current] { color: var(--ink); }
.vvuae-breadcrumbs span[aria-hidden] { color: var(--line); }

/* Hub hero: asymmetric with a route count stamp. */
.hub-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}
.hub-hero-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-left: var(--space-lg);
  border-left: 1px solid rgba(245, 241, 232, .16);
  color: rgba(245, 241, 232, .6);
  font-size: .875rem;
  line-height: 1.6;
}
.hub-hero-meta strong {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--sand);
}
.hub-hero-meta .stamp {
  width: 76px;
  height: 76px;
  line-height: 1.3;
  margin-bottom: var(--space-2xs);
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  color: var(--gold-lift);
  border-color: rgba(201, 168, 104, .5);
}
.hub-hero-meta .stamp br + * { font-size: .5rem; }

.hub-routes { background: var(--paper); }
.hub-hero { background: var(--ink); }
.hub-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.hub-card { text-decoration: none; }
.hub-card h3 { transition: color var(--fast); }
.hub-card:hover h3 { color: var(--brand); }

.hub-body { background: var(--sand); }
.hub-cta .cta-inner { align-items: center; }

/* Sibling routes: a compact index rather than another card grid. */
.sibling-routes { background: var(--paper); }
.sibling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.sibling-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-md);
  background: var(--sand);
  transition: background-color var(--fast);
}
.sibling-card .service-tag { grid-column: 1; font-size: .625rem; color: var(--muted-soft); }
.sibling-card strong {
  grid-column: 1;
  font-family: 'Fraunces', serif;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.sibling-go {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--gold);
  font-size: 1.125rem;
  transition: transform var(--slow);
}
.sibling-card:hover { background: var(--sand-deep); }
.sibling-card:hover .sibling-go { transform: translateX(6px); }

/* Cross-section links in the sidebar. */
.section-links { margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.section-links li { border-bottom: 1px solid var(--ink-line); }
.section-links li:last-child { border-bottom: 0; }
.section-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: .9375rem;
  color: var(--ink);
  transition: color var(--fast), padding-left var(--fast);
}
.section-links a:hover { color: var(--gold); padding-left: 6px; }
.section-links span { color: var(--gold); }

.related-guides { background: var(--paper); }

/* About page */
.about-hero .lede { color: rgba(245, 241, 232, .7); }

@media (max-width: 900px) {
  .hub-hero-inner { grid-template-columns: 1fr; }
  .hub-hero-meta { padding-left: 0; padding-top: var(--space-md); border-left: 0; border-top: 1px solid rgba(245, 241, 232, .16); }
  .vvuae-breadcrumbs { font-size: .6875rem; }
}

/* ==========================================================================
   19. CORRECTIONS
   Overrides for rules in theme.css that survived the redesign and undercut it.
   ========================================================================== */

/* The single biggest tell. theme.css puts hard offset shadows on buttons,
   cards, frames and the floating chat bubble — the neo-brutalist look. Every
   one is replaced with a soft, low shadow or removed entirely. */
.btn,
.btn-primary,
.btn-dark,
.nav-cta,
.floating-whatsapp,
.floating-toc-button,
.contact-copy-toast,
.blog-filters a,
.blog-filters button,
.search-category-chips a,
.filter-reset,
.load-more-button { box-shadow: none; }

.btn-primary:hover,
.btn-dark:hover,
.nav-cta:hover { box-shadow: none; }

.service-card:hover,
.blog-card:hover,
.comparison-card:hover { box-shadow: none; }

.video-frame { box-shadow: var(--shadow-lg); }
.floating-whatsapp { box-shadow: var(--shadow-md); }
.contact-copy-toast { box-shadow: var(--shadow-md); background: var(--ink); color: var(--sand); }

/* Kill the pulsing offset-shadow animation on the chat bubble. */
.floating-whatsapp,
.floating-whatsapp-wrap > .floating-whatsapp { animation: none; }

/* Cards should not jump on hover; the gold rule already signals the state. */
.service-card:hover,
.blog-card:hover,
.comparison-card:hover,
.blog-filters a:hover,
.search-category-chips a:hover,
.gcc-grid a:hover { transform: none; }

/* --------------------------------------------------------------------------
   Header — the screenshot showed a cramped, wrapping bar
   -------------------------------------------------------------------------- */

.nav-wrap { flex-wrap: nowrap; gap: clamp(1rem, 2.2vw, 2.75rem); justify-content: space-between; }

/* Brand lockup. The tagline was removed from the markup: it duplicated the
   hero heading and wrapped to six lines, forcing the header to 189px tall. */
.brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.brand-mark-image { height: 44px; max-width: 190px; }

/* Nav labels must not wrap mid-item. Scoped above the mobile breakpoint so
   this does not re-show the nav that theme.css hides at 900px. */
@media (min-width: 901px) {
  /* Natural width only. flex:1 with min-width:0 let the box collapse while the
     nowrap list kept its size, so the list spilled over the logo and search. */
  .primary-nav { flex: 0 0 auto; display: flex; }
  .primary-nav ul { flex-wrap: nowrap; gap: clamp(.85rem, 1.4vw, 1.6rem); }
}
.primary-nav a { white-space: nowrap; }

/* Compact search that sits inline instead of overlapping the CTAs.
   theme.css gave .search-field its own bordered box and a z-index, which
   floated it over the buttons once the bar got tight. */
.header-search { flex: 0 0 auto; position: static; z-index: auto; }
.header-search .search-field {
  min-width: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.header-search input {
  width: clamp(96px, 10vw, 150px);
  min-height: 38px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  font: 400 .8125rem 'DM Sans', sans-serif;
  color: var(--ink);
}
.header-search input:focus { outline: 0; }
.header-search .search-field:focus-within { border-bottom-color: var(--gold); }

/* Header CTAs stay on one line. */
.header-actions { flex-shrink: 0; }
.nav-cta { white-space: nowrap; min-height: 42px; padding: 0 var(--space-sm); }

@media (max-width: 1480px) { .header-search { display: none; } }
@media (max-width: 1240px) { .nav-cta-tours { display: none; } }
@media (max-width: 1080px) { .nav-cta-emergency { display: none; } }

/* --------------------------------------------------------------------------
   404 — was a bare left column with acres of empty space
   -------------------------------------------------------------------------- */

.error-page { padding-block: clamp(3rem, 6vw, 5rem); }

.error-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.error-copy h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  max-width: 14ch;
  margin-bottom: var(--space-sm);
}
.error-copy .lede { max-width: 52ch; }

.error-search {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  max-width: none;
}
.error-search input {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  padding: 0 var(--space-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: .9375rem;
  transition: border-color var(--fast);
}
.error-search input:focus { outline: 0; border-color: var(--gold); }
.error-search .btn { flex-shrink: 0; }

.error-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.error-aside {
  padding: var(--space-lg) var(--space-md);
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-top: 2px solid var(--gold);
}
.error-links { margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.error-links li { border-bottom: 1px solid var(--ink-line); }
.error-links li:last-child { border-bottom: 0; }
.error-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  transition: padding-left var(--fast), color var(--fast);
}
.error-links strong { font-family: 'Fraunces', serif; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.02em; }
.error-links a span { color: var(--gold); }
.error-links a:hover { padding-left: 6px; color: var(--gold); }

@media (max-width: 900px) {
  .error-inner { grid-template-columns: 1fr; }
  .error-search { flex-direction: column; }
  .error-search .btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   20. MOBILE HEADER
   The bar was overflowing to 486px inside a 390px viewport: the nav list kept
   its width behind the collapsed menu, and the CTA row plus the toggle could
   not fit on one line.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .nav-wrap { gap: var(--space-sm); }

  /* Collapsed nav must take no space at all. */
  .primary-nav:not(.is-open) { display: none; }
  .primary-nav:not(.is-open) ul { display: none; }

  .primary-nav.is-open { display: block; flex: 0 0 100%; }
  .primary-nav.is-open ul { display: block; flex-wrap: wrap; }

  /* Keep one CTA plus the toggle; the rest live inside the menu. */
  .header-actions .nav-cta-emergency,
  .header-actions .nav-cta-tours { display: none; }
  .header-actions { gap: var(--space-2xs); }

  .brand-mark-image { height: 32px; max-width: 132px; }
  .nav-cta { min-height: 40px; padding: 0 var(--space-xs); font-size: .625rem; }
  .menu-toggle { min-height: 40px; padding: 0 var(--space-xs); font-size: .625rem; }
}

@media (max-width: 420px) {
  .brand-mark-image { height: 28px; max-width: 112px; }
  .nav-cta span, .nav-cta::after { display: none; }
}

/* Nothing should ever push the page wider than the viewport. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ==========================================================================
   21. UTILITY PAGES — FAQ, sitemap, social chips
   ========================================================================== */

.faq-list-full { border-top: 1px solid var(--ink-line); margin-top: var(--space-md); }
.faq-list-full details { padding: var(--space-md) 0; }
.faq-list-full summary { list-style: none; position: relative; padding-right: var(--space-lg); }
.faq-list-full summary::-webkit-details-marker { display: none; }
.faq-list-full summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--gold);
}
.faq-list-full details[open] summary::after { content: '\2212'; }
.faq-list-full details p { margin-top: var(--space-sm); color: var(--muted); max-width: 62ch; }

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-xl) var(--space-lg);
}
.sitemap-column h2 {
  font-size: 1.125rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--ink-line);
  max-width: none;
}
.sitemap-list { margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.sitemap-list li { padding-block: 7px; }
.sitemap-list a { font-size: .9375rem; color: var(--ink); transition: color var(--fast), padding-left var(--fast); }
.sitemap-list a:hover { color: var(--gold); padding-left: 5px; }

/* Social chips replace the old placeholder icon links. */
.social-chip {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(245, 241, 232, .22);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(245, 241, 232, .72);
  transition: background-color var(--fast), color var(--fast), border-color var(--fast);
}
.social-chip:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.faq-hero, .sitemap-hero { background: var(--ink); }

/* Footer base bar */
.footer-base {
  margin-top: var(--space-md);
  padding-block: var(--space-md);
  border-top: 1px solid rgba(245, 241, 232, .09);
  font-size: .8125rem;
  color: rgba(245, 241, 232, .45);
}
.footer-base-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  flex-wrap: wrap;
}
.footer-legal { display: flex; gap: var(--space-sm) var(--space-md); flex-wrap: wrap; }
.footer-legal a { font-size: .8125rem; color: rgba(245, 241, 232, .5); }
.footer-legal a:hover { color: var(--gold-lift); }
@media (max-width: 600px) { .footer-base-inner { flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   22. HEADING COLOUR ON DARK HEROES
   The base rule in section 2 lists .page-hero h1 alongside the generic h1 and
   sets it to --ink, which rendered the heading invisible on every dark hero.
   These are the templates whose hero sits on --ink.
   ========================================================================== */

.home-hero h1,
.page-hero h1,
.hub-hero h1,
.faq-hero h1,
.sitemap-hero h1,
.about-hero h1,
.contact-hero h1,
.comparison-hero h1,
.comparison-hero-copy h1,
.legal-hero h1,
.emergency-hero h1,
.search-results-hero h1,
.section-ink h1 { color: var(--sand); }

.home-hero h2,
.page-hero h2,
.hub-hero h2,
.comparison-hero h2,
.legal-hero h2,
.emergency-hero h2 { color: var(--sand); }

.page-hero .lede,
.hub-hero .lede,
.faq-hero .lede,
.sitemap-hero .lede,
.contact-hero .lede,
.legal-hero .lede,
.emergency-hero .lede { color: rgba(245, 241, 232, .7); }

/* The 404 sits on the light page background, so it keeps the ink heading. */
.error-page h1 { color: var(--ink); }
.error-page .lede { color: var(--muted); }

/* ==========================================================================
   23. DROPDOWN NAVIGATION
   The theme had no sub-menu styling at all. WordPress outputs a nested
   <ul class="sub-menu">, which inherited the flex row from .primary-nav ul,
   so every child page rendered inline in the header bar and pushed the
   navigation off the side of the screen.
   ========================================================================== */

.primary-nav .menu,
.primary-nav > ul { position: relative; }

.primary-nav li { position: relative; }

/* Parent items get a caret so the dropdown is discoverable. */
.primary-nav .menu-item-has-children > a { padding-right: 1.1em; }

.primary-nav .menu-item-has-children > a::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
  transition: transform var(--fast), opacity var(--fast);
}

.primary-nav .menu-item-has-children:hover > a::before,
.primary-nav .menu-item-has-children:focus-within > a::before {
  opacity: 1;
  transform: rotate(45deg) translate(1px, 1px);
}

@media (min-width: 901px) {

  .primary-nav .sub-menu {
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: -1rem;
    z-index: 70;
    display: block;
    min-width: 260px;
    max-width: 340px;
    margin: 0;
    padding: var(--space-2xs) 0;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--ink-line);
    border-top: 2px solid var(--gold);
    box-shadow: var(--shadow-md);

    /* Hidden but focusable-aware: no display:none, so the transition runs. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
  }

  /* A transparent bridge stops the panel closing as the pointer crosses the gap. */
  .primary-nav .menu-item-has-children > .sub-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--space-sm) * -1 - 2px);
    height: calc(var(--space-sm) + 2px);
  }

  .primary-nav li:hover > .sub-menu,
  .primary-nav li:focus-within > .sub-menu,
  .primary-nav li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .primary-nav .sub-menu li { display: block; width: 100%; }

  .primary-nav .sub-menu a {
    display: block;
    padding: 11px var(--space-sm);
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    white-space: normal;
    color: var(--ink);
    transition: background-color var(--fast), color var(--fast), padding-left var(--fast);
  }

  .primary-nav .sub-menu a::after { display: none; }

  .primary-nav .sub-menu a:hover,
  .primary-nav .sub-menu a:focus-visible {
    background: var(--sand-deep);
    color: var(--brand);
    padding-left: calc(var(--space-sm) + 5px);
  }

  .primary-nav .sub-menu .current-menu-item > a { color: var(--gold); }

  /* theme.js measures each panel and flips it when it would run off the edge. */
  .primary-nav .sub-menu.is-flipped { left: auto; right: -1rem; }
  .primary-nav .sub-menu { max-width: min(340px, calc(100vw - 3rem)); }

  /* The header must not clip an open panel. */
  .topbar, .nav-wrap, .primary-nav { overflow: visible; }
}

/* Mobile: the sub-menu becomes an indented accordion inside the open panel. */
@media (max-width: 900px) {
  .primary-nav.is-open .sub-menu {
    display: none;
    margin: 0 0 var(--space-2xs);
    padding: 0 0 var(--space-2xs) var(--space-sm);
    border-left: 1px solid var(--gold);
    list-style: none;
  }

  .primary-nav.is-open li.is-open > .sub-menu { display: block; }

  .primary-nav.is-open .sub-menu a {
    padding: 10px 2px;
    font-size: .875rem;
    color: var(--muted);
    border: 0;
  }

  .primary-nav.is-open .menu-item-has-children > a::before { right: 6px; }
  .primary-nav.is-open li.is-open > a::before { transform: rotate(225deg); margin-top: -1px; }
}

/* ==========================================================================
   24. FOOTER COLUMNS
   The link lists are bare <a> elements. Without display:block they ran
   together into one line of text: "UAE VISA ROUTES14-day visit visa30-day..."
   ========================================================================== */

.footer-grid > div:not(.footer-brand) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.footer-grid > div:not(.footer-brand) > strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.footer-grid > div:not(.footer-brand) > a,
.footer-grid > div:not(.footer-brand) > span {
  display: block;
  width: 100%;
  padding-block: 7px;
  font-size: .9375rem;
  line-height: 1.45;
}

.footer-grid > div:not(.footer-brand) > span {
  margin-top: var(--space-xs);
  color: rgba(245, 241, 232, .45);
  font-size: .8125rem;
}

/* Brand column */
.footer-brand-lockup { display: flex; align-items: flex-start; gap: var(--space-sm); }
.footer-brand-lockup > div { display: flex; flex-direction: column; gap: 6px; }
.footer-brand-lockup strong { display: block; }
.footer-brand-lockup span { font-size: .9375rem; color: var(--gold-lift); letter-spacing: 0; text-transform: none; font-family: 'DM Sans', sans-serif; }
.footer-brand p { margin-top: var(--space-2xs); }

.footer-contact { margin-top: var(--space-md); display: grid; gap: 0; max-width: 320px; min-width: 0; }
.footer-contact-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.footer-phone, .footer-email { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; overflow-wrap: anywhere; }
.footer-phone span:last-child, .footer-email span:last-child { overflow-wrap: anywhere; }
.contact-icon { flex-shrink: 0; width: 18px; opacity: .55; }
.contact-icon svg { width: 18px; height: 18px; }
.contact-copy { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(245,241,232,.16); }

/* The social row spans the full grid rather than stealing a column. */
.footer-social-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(245, 241, 232, .09);
}
.footer-social-row > span:first-child {
  font-size: var(--label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, .5);
  margin-right: var(--space-2xs);
}

@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-contact { max-width: none; }
}

/* ==========================================================================
   25. BREADCRUMB AND HERO RHYTHM
   ========================================================================== */

/* The sticky header must never sit on top of the breadcrumb. */
.vvuae-breadcrumbs { position: relative; z-index: 1; }
#main-content { position: relative; }

/* Consistent gap between breadcrumb and whatever hero follows it. */
.vvuae-breadcrumbs + .page-hero,
.vvuae-breadcrumbs + .home-hero,
.vvuae-breadcrumbs + section { margin-top: 0; }

/* Page hero: the copy column was floating with no rhythm between the
   eyebrow, heading and lede. */
.page-hero-inner { align-items: center; padding-block: clamp(3.5rem, 7vw, 6rem); }
.page-hero .eyebrow { margin-bottom: var(--space-sm); }
.page-hero h1 { margin: 0 0 var(--space-sm); max-width: 16ch; }
.page-hero .lede { margin-top: 0; }
.page-hero .hero-actions { margin-top: var(--space-lg); }

.hero-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs) var(--space-sm);
  align-items: center;
  align-content: center;
  margin-top: 0;
  padding-left: var(--space-lg);
  border-left: 1px solid rgba(245, 241, 232, .16);
}
.hero-note .stamp { grid-row: 1 / span 2; width: 62px; height: 62px; flex-shrink: 0; }
.hero-note strong { font-family: 'Fraunces', serif; font-size: 1.0625rem; font-weight: 500; color: var(--sand); }
.hero-note > span:last-child { font-size: .875rem; line-height: 1.5; }

@media (max-width: 900px) {
  .hero-note { padding-left: 0; padding-top: var(--space-md); border-left: 0; border-top: 1px solid rgba(245, 241, 232, .16); }
  .page-hero h1 { max-width: none; }
}

/* Service page content column needs breathing room under the hero. */
.content-grid { padding-block: var(--space-2xl); }

/* Dropdown toggle button injected by theme.js. */
.dropdown-toggle {
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.dropdown-toggle span {
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 auto;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--fast);
}
.primary-nav li.is-open > .dropdown-toggle span { transform: rotate(225deg) translate(-2px, -2px); }

@media (max-width: 900px) {
  /* On mobile the caret becomes a real tap target next to the link. */
  .primary-nav.is-open .menu-item-has-children > a::before { display: none; }
  .primary-nav.is-open .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .primary-nav.is-open .menu-item-has-children > a { flex: 1; }
  .primary-nav.is-open .dropdown-toggle { display: block; flex: 0 0 auto; color: var(--gold); }
  .primary-nav.is-open .sub-menu { flex: 0 0 100%; }
}

/* ==========================================================================
   26. HEADER GEOMETRY
   Measured fixes for three problems found by rendering the real menu markup:
   a) the dropdown opened 15px above the header's bottom edge, because the
      nav items are vertically centred inside a padded bar, so `top:100%`
      resolved to the item's edge rather than the bar's;
   b) the bar overflowed at 1600, 1100 and 1024px — eight top-level items with
      dropdowns genuinely need ~1150px, so the collapse point moves to 1100px;
   c) the header needs a wider container than the body content.
   ========================================================================== */

/* (c) The header may use the full width; body content stays at 1240. */
.topbar > .wrap { width: min(1440px, calc(100% - (var(--gutter) * 2))); }

/* (a) Stretch the nav items to the full bar height so `top:100%` is the bar. */
.topbar { padding-block: 0; min-height: 92px; display: flex; align-items: stretch; }
.topbar.is-scrolled { min-height: 78px; }

.nav-wrap { align-items: stretch; width: 100%; }
.brand,
.header-search,
.header-actions,
.menu-toggle { align-self: center; }

@media (min-width: 1025px) {
  .primary-nav { align-self: stretch; display: flex; flex: 0 1 auto; min-width: 0; }
  .primary-nav > ul { height: 100%; align-items: stretch; flex-wrap: nowrap; gap: clamp(.6rem, 1.2vw, 1.4rem); }
  .primary-nav > ul > li { display: flex; align-items: center; }
  .primary-nav > ul > li > a { display: flex; align-items: center; height: 100%; padding-block: 0; }

  /* Now flush with the bottom of the bar, with no gap to bridge. */
  .primary-nav .sub-menu { top: 100%; }
  .primary-nav .menu-item-has-children > .sub-menu::before { display: none; }

  /* The underline sits on the bar edge rather than mid-item. */
  .primary-nav > ul > li > a::after { bottom: 0; }
}

/* (b) Collapse to the menu button while the bar still fits comfortably. */
@media (max-width: 1024px) {
  .primary-nav:not(.is-open) { display: none; }
  .primary-nav:not(.is-open) ul { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; }

  .primary-nav.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    padding: var(--space-2xs) 0 var(--space-sm);
    background: var(--paper);
    border-bottom: 1px solid var(--ink-line);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 92px);
    overflow-y: auto;
  }

  .primary-nav.is-open > ul {
    display: block;
    width: min(1440px, calc(100% - (var(--gutter) * 2)));
    margin-inline: auto;
    height: auto;
  }

  .primary-nav.is-open > ul > li { border-bottom: 1px solid var(--ink-line); }
  .primary-nav.is-open > ul > li:last-child { border-bottom: 0; }
  .primary-nav.is-open a { display: block; padding: 14px 2px; font-size: 1rem; color: var(--ink); white-space: normal; }
  .primary-nav.is-open a::after { display: none; }

  .primary-nav.is-open .sub-menu {
    display: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 1px solid var(--gold);
    background: transparent;
    margin: 0 0 var(--space-2xs);
    padding: 0 0 var(--space-2xs) var(--space-sm);
    max-width: none;
    min-width: 0;
  }
  .primary-nav.is-open li.is-open > .sub-menu { display: block; }
  .primary-nav.is-open .sub-menu a { padding: 10px 2px; font-size: .875rem; color: var(--muted); }

  .primary-nav.is-open .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .primary-nav.is-open .menu-item-has-children > a { flex: 1; }
  .primary-nav.is-open .menu-item-has-children > a::before { display: none; }
  .primary-nav.is-open .dropdown-toggle { display: block; flex: 0 0 auto; color: var(--gold); }
  .primary-nav.is-open .sub-menu { flex: 0 0 100%; }

  .header-actions .nav-cta-tours { display: none; }
}

@media (max-width: 1560px) { .header-search { display: none; } }
@media (max-width: 1240px) { .nav-cta-tours { display: none; } }

/* Footer contact rows must shrink rather than push the page wider. */
.footer-contact-item { min-width: 0; }
.footer-phone, .footer-email { flex: 1 1 auto; min-width: 0; }
.footer-phone span:last-child,
.footer-email span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* theme.css indents .footer-contact by a hardcoded 58px to line it up under
   the logo, while also giving it width:100%. The two together pushed the
   block 58px past the viewport on every screen under 600px. */
.site-footer .footer-contact,
.footer-contact {
  margin-left: 0;
  width: 100%;
  max-width: 340px;
  min-width: 0;
}

.site-footer .footer-contact-item > a { min-width: 0; }

/* ==========================================================================
   27. FOOTER GRID AND HERO PADDING
   ========================================================================== */

/* theme.css declares grid-template-columns on .footer-grid but never sets
   display:grid, so the columns were inert and every link list stacked into a
   single running column. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  align-items: start;
}

.footer-brand { grid-column: auto; min-width: 0; }
.footer-grid > div { min-width: 0; }

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

/* .page-hero carries its own vertical padding, and .page-hero-inner added a
   second helping on top — 208px of dead space above the eyebrow. The inner
   grid now contributes none. */
.page-hero { padding-block: clamp(3.5rem, 7vw, 6rem); }
.page-hero-inner { padding-block: 0; }
.home-hero .hero-inner { padding-block: var(--space-2xl); }

/* Reveal safety: content must never stay invisible if scripting is blocked,
   the observer stalls, or the page is printed. */
.reveal { will-change: opacity, transform; }

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   28. FINAL PASS
   ========================================================================== */

/* The footer link-column rule was also catching the social chips, stretching
   each one to a full-width row. */
.footer-grid > .footer-social-row > a,
.footer-grid > div:not(.footer-brand) > a.social-chip {
  display: inline-grid;
  width: 38px;
  padding-block: 0;
}

/* Secondary hero links sit on the dark hero, so the default brand green was
   almost invisible against it. */
.page-hero .text-link,
.home-hero .text-link,
.hub-hero .text-link,
.comparison-hero .text-link,
.emergency-hero .text-link,
.hero-actions .text-link { color: var(--gold-lift); }

.page-hero .text-link:hover,
.home-hero .text-link:hover,
.hub-hero .text-link:hover,
.hero-actions .text-link:hover { color: var(--sand); }

/* Section headings: keep the trailing link aligned with the heading baseline
   rather than dropping below a wrapped title. */
.section-heading > a,
.section-heading > .text-link { flex-shrink: 0; align-self: end; margin-bottom: 4px; }

/* Sibling cards need the same internal rhythm as the rest of the card set. */
.sibling-card { row-gap: 6px; }
.sibling-card .service-tag { color: var(--muted-soft); }

/* Rail cards must read as cards against the page, not blend into it. */
.rail-card, .eligibility-card { border-color: rgba(16, 32, 28, .14); }

/* ==========================================================================
   29. HEADER FIT GUARD AND FOOTER COLUMNS
   ========================================================================== */

/* theme.js adds .nav-does-not-fit when the bar would overflow, whatever the
   menu labels are. The header then behaves exactly as it does on mobile. */
.topbar.nav-does-not-fit .header-search { display: none; }
.topbar.nav-does-not-fit .nav-cta-tours { display: none; }

.topbar.nav-does-not-fit .primary-nav:not(.is-open) { display: none; }
.topbar.nav-does-not-fit .menu-toggle { display: inline-flex; align-items: center; }

.topbar.nav-does-not-fit .primary-nav.is-open {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  padding: var(--space-2xs) 0 var(--space-sm);
  background: var(--paper);
  border-bottom: 1px solid var(--ink-line);
  box-shadow: var(--shadow-md);
  max-height: calc(100vh - 92px);
  overflow-y: auto;
}

.topbar.nav-does-not-fit .primary-nav.is-open > ul {
  display: block;
  width: min(1440px, calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
  height: auto;
}

.topbar.nav-does-not-fit .primary-nav.is-open > ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--ink-line);
}
.topbar.nav-does-not-fit .primary-nav.is-open > ul > li:last-child { border-bottom: 0; }
.topbar.nav-does-not-fit .primary-nav.is-open a { display: block; padding: 14px 2px; font-size: 1rem; white-space: normal; }
.topbar.nav-does-not-fit .primary-nav.is-open a::after { display: none; }
.topbar.nav-does-not-fit .primary-nav.is-open .menu-item-has-children > a { flex: 1; }
.topbar.nav-does-not-fit .primary-nav.is-open .menu-item-has-children > a::before { display: none; }
.topbar.nav-does-not-fit .primary-nav.is-open .dropdown-toggle { display: block; flex: 0 0 auto; color: var(--gold); }
.topbar.nav-does-not-fit .primary-nav.is-open .sub-menu {
  display: none;
  position: static;
  flex: 0 0 100%;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  border-left: 1px solid var(--gold);
  background: transparent;
  margin: 0 0 var(--space-2xs);
  padding: 0 0 var(--space-2xs) var(--space-sm);
  max-width: none;
}
.topbar.nav-does-not-fit .primary-nav.is-open li.is-open > .sub-menu { display: block; }
.topbar.nav-does-not-fit .primary-nav.is-open .sub-menu a { padding: 10px 2px; font-size: .875rem; color: var(--muted); }

/* Footer columns: the markup now uses an explicit .footer-col class rather
   than relying on :not(.footer-brand), which had also been catching the
   social row. */
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.footer-col > strong { display: block; margin-bottom: var(--space-xs); }
.footer-col > a {
  display: block;
  width: 100%;
  padding-block: 7px;
  font-size: .9375rem;
  line-height: 1.45;
}
.footer-location {
  display: block;
  margin-top: var(--space-sm);
  font-size: .8125rem;
  color: rgba(245, 241, 232, .45);
}

/* theme.css scopes its footer breakpoints to `.site-footer-expanded
   .footer-grid`, which outranks a bare `.footer-grid` selector and forced two
   cramped columns down to 320px. These match that specificity. */
.site-footer-expanded .footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  align-items: start;
}

.site-footer-expanded .footer-brand { grid-column: auto; }

@media (max-width: 1000px) {
  .site-footer-expanded .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer-expanded .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .site-footer-expanded .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .site-footer-expanded .footer-brand { grid-column: auto; }
}

/* theme.css also shrinks the footer email to 11px and adds a translate on
   hover that can nudge a long address past the edge. */
.site-footer .footer-email,
.site-footer-expanded .footer-email { font-size: .9375rem; font-family: 'DM Sans', sans-serif; }
.site-footer-expanded .footer-grid > div a:hover,
.site-footer-expanded .footer-grid > div a:focus-visible { transform: none; }
.site-footer-expanded .footer-contact a:hover { transform: none; }

/* The social chips are direct children of .footer-grid, so the column-link
   rule (`> div:not(.footer-brand) > a`) was still stretching them to full
   width. This outranks it. */
.site-footer-expanded .footer-grid > .footer-social-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

.site-footer-expanded .footer-grid > .footer-social-row > a.social-chip {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  flex: 0 0 auto;
}

.site-footer-expanded .footer-grid > .footer-social-row > span:first-child {
  flex: 0 0 auto;
  width: auto;
  margin-right: var(--space-xs);
}

/* ==========================================================================
   30. MULTI-STEP FORM
   ========================================================================== */

.inquiry-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.inquiry-step + .inquiry-step { margin-top: var(--space-lg); }

/* Only once JS has taken over does anything get hidden. */
.inquiry-form.is-stepped .inquiry-step { display: none; }
.inquiry-form.is-stepped .inquiry-step.is-active { display: block; }
.inquiry-form.is-stepped .inquiry-step + .inquiry-step { margin-top: 0; }

.inquiry-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-lg);
  padding: 0 0 var(--space-md);
  border-bottom: 1px solid var(--ink-line);
  list-style: none;
  counter-reset: none;
}

.inquiry-progress-item {
  display: flex;
  align-items: center;
  gap: .55em;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted-soft);
}

.inquiry-progress-item + .inquiry-progress-item::before {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  min-width: 12px;
  margin-right: .55em;
  background: var(--line);
}

.inquiry-progress-num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .6875rem;
  font-weight: 500;
  transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}

.inquiry-progress-label {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inquiry-progress-item.is-current { color: var(--ink); }
.inquiry-progress-item.is-current .inquiry-progress-num { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.inquiry-progress-item.is-done { color: var(--muted); }
.inquiry-progress-item.is-done .inquiry-progress-num { background: var(--brand); border-color: var(--brand); color: var(--sand); }

.inquiry-step-head { display: grid; gap: 4px; margin: 0 0 var(--space-md); }
.inquiry-step-count { font-size: var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.inquiry-step-title { font-family: 'Fraunces', serif; font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.inquiry-step-hint { font-size: .875rem; color: var(--muted); }

.inquiry-actions { justify-content: flex-start; }
.inquiry-actions .btn[hidden] { display: none; }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--sand); border-color: var(--ink); }

/* Validation styling only after the field has actually failed a check. */
.inquiry-field input.has-error,
.inquiry-field select.has-error,
.inquiry-field textarea.has-error {
  border-bottom-color: #9C4A32;
  box-shadow: 0 1px 0 0 #9C4A32;
}

@media (max-width: 640px) {
  .inquiry-progress-label { display: none; }
  .inquiry-progress-item { flex: 0 0 auto; }
  .inquiry-progress-item + .inquiry-progress-item::before { min-width: 20px; }
  .inquiry-progress { justify-content: flex-start; }
  .inquiry-actions { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
  .inquiry-actions .btn { width: 100%; }
}

/* ==========================================================================
   31. SCREENSHOT FIXES
   ========================================================================== */

/* (a) "Tell us where you live and where you're going." was invisible.
   The dark-hero heading rule in section 22 also caught the eligibility card,
   painting a cream heading onto a cream card. Cards keep ink headings. */
.home-hero .eligibility-card h2,
.home-hero .eligibility-card h3,
.page-hero .rail-card h3,
.hub-hero .rail-card h3,
.eligibility-card h2,
.eligibility-card h3,
.rail-card h2,
.rail-card h3,
.inquiry-form h2,
.inquiry-form h3 { color: var(--ink); }

.eligibility-card p:not(.eyebrow):not(.card-note),
.rail-card p:not(.eyebrow):not(.card-note) { color: var(--muted); }

/* (b) The gold CTA band. .cta-inner was inheriting the section-heading
   treatment — a bottom rule plus a full section's worth of margin below it —
   which left a large empty gold area under the heading. */
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.final-cta {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--gold);
  color: var(--ink);
}

.final-cta .eyebrow { color: var(--ink); opacity: .7; }
.final-cta .eyebrow::before { background: var(--ink); }
.final-cta h2 { color: var(--ink); max-width: 20ch; margin-top: var(--space-2xs); }
.final-cta p { color: rgba(16, 32, 28, .72); max-width: 46ch; margin-top: var(--space-sm); }

/* A gold button on a gold band reads as plain text; use the dark button. */
.final-cta .btn,
.final-cta .btn-primary {
  flex: 0 0 auto;
  background: var(--ink);
  color: var(--sand);
  border-color: var(--ink);
}
.final-cta .btn::before { background: var(--paper); }
.final-cta .btn:hover { color: var(--ink); }
.final-cta .text-link { color: var(--ink); }

/* (c) The pricing table sits on its own surface inside the article column and
   had no horizontal padding, so the header row met the card edge. */
.pricing-section {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  margin-block: var(--space-lg);
  border: 1px solid var(--ink-line);
  background: var(--paper);
}

.pricing-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.pricing-heading h2 { margin: var(--space-2xs) 0 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 18ch; }
.pricing-table { margin-top: var(--space-sm); }
.pricing-caveat { margin-top: var(--space-md); font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.pricing-sources { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); }
.pricing-sources a { font-size: .8125rem; color: var(--brand); border-bottom: 1px solid rgba(31, 71, 61, .3); }

/* (d) The pre-chat section: a tall heading in a narrow column left a large
   empty block beneath it. Even columns and top alignment close the gap. */
.prechat-section-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.prechat-section-grid > div:first-child { position: sticky; top: 120px; }
.prechat-section-grid h2 { max-width: 14ch; font-size: clamp(1.9rem, 3.4vw, 3rem); }
.prechat-section-grid > div:first-child > p { margin-top: var(--space-sm); color: var(--muted); max-width: 40ch; }

@media (max-width: 900px) {
  .prechat-section-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .prechat-section-grid > div:first-child { position: static; }
  .prechat-section-grid h2 { max-width: none; }
}

/* ==========================================================================
   32. TRAVEL GUIDE DETAIL PAGE
   The sidebar card was cramped, the author block ran its label inline with the
   heading, and the CTA panel had no internal rhythm.
   ========================================================================== */

.blog-post-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.blog-toc { position: sticky; top: 120px; display: grid; gap: var(--space-lg); }

/* Newsletter card */
.newsletter-card {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-md);
  background: var(--ink);
  border: 0;
  border-top: 2px solid var(--gold);
  color: rgba(245, 241, 232, .72);
  max-width: none;
}
.newsletter-card .eyebrow { color: var(--gold-lift); }
.newsletter-card h3 { color: var(--sand); font-size: 1.25rem; }
.newsletter-card p { font-size: .875rem; line-height: 1.6; margin: 0; }
.newsletter-card small { font-size: .6875rem; line-height: 1.5; color: rgba(245, 241, 232, .45); }
.newsletter-card form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.newsletter-card input {
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--space-xs);
  border: 1px solid rgba(245, 241, 232, .2);
  background: rgba(245, 241, 232, .06);
  color: var(--sand);
  font-size: .875rem;
}
.newsletter-card input::placeholder { color: rgba(245, 241, 232, .45); }
.newsletter-card button { min-height: 44px; padding: 0 var(--space-sm); background: var(--gold); color: var(--ink); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.newsletter-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(245, 241, 232, .2); color: var(--gold-lift); }

/* On-this-page list */
.blog-toc > .eyebrow { margin-bottom: var(--space-2xs); }
.blog-toc a { display: block; padding: 10px 0 10px var(--space-sm); border-left: 1px solid var(--line); font-size: .9375rem; color: var(--muted); transition: color var(--fast), border-color var(--fast); }
.blog-toc a:hover, .blog-toc a.active { color: var(--ink); border-left-color: var(--gold); }

/* In-article CTA panel */
.blog-post-cta {
  display: grid;
  gap: var(--space-sm);
  margin-block: var(--space-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--ink);
  color: rgba(245, 241, 232, .72);
  border-top: 2px solid var(--gold);
}
.blog-post-cta h2, .blog-post-cta h3 { color: var(--sand); margin: 0; max-width: 22ch; }
.blog-post-cta p { margin: 0; max-width: 52ch; font-size: .9375rem; }
.blog-post-cta .btn { justify-self: start; margin-top: var(--space-2xs); }

/* Author block: the label was sitting on the same line as the name. */
.author-bio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-md);
  align-items: start;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--ink-line);
}
.author-avatar { grid-row: 1 / span 3; width: 52px; height: 52px; display: grid; place-items: center; background: var(--ink); color: var(--gold-lift); border-radius: 50%; font-size: .8125rem; font-weight: 600; }
.author-bio .eyebrow { grid-column: 2; margin: 0; }
.author-bio h3, .author-bio strong { grid-column: 2; margin: 0; font-family: 'Fraunces', serif; font-size: 1.1875rem; font-weight: 500; color: var(--ink); }
.author-bio p { grid-column: 2; margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--muted); }

.article-note {
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--gold-wash);
  border-left: 2px solid var(--gold);
  font-size: .9375rem;
  color: var(--ink-soft);
}

.blog-post-hero { padding-block: clamp(3.5rem, 7vw, 6rem); }
.blog-post-hero-copy { max-width: 24ch; }
.blog-post-hero .lede { max-width: 56ch; }
.blog-hero-meta { margin-top: var(--space-md); }

@media (max-width: 1000px) {
  .blog-post-layout { grid-template-columns: 1fr; }
  .blog-toc { position: static; }
  .blog-post-hero-copy { max-width: none; }
}

/* ==========================================================================
   33. FORM CONTAINER
   theme.css styles .prechat-card as a card in its own right — bone surface,
   saffron top rule, padding and shadow — so wrapping the inquiry form in it
   produced a card inside a card. It is now a plain wrapper, and its grid
   children get min-width:0 so a wide field cannot push the panel past the
   column edge (measured 800px inside a 672px column).
   ========================================================================== */

.prechat-card {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}

.prechat-card > *,
.prechat-section-grid > * { min-width: 0; }

.inquiry-block,
.inquiry-form { min-width: 0; max-width: 100%; }
.inquiry-grid > * { min-width: 0; }

/* The step rail must never widen the panel; it scrolls if it has to. */
.inquiry-progress {
  flex-wrap: wrap;
  row-gap: var(--space-2xs);
  max-width: 100%;
}
.inquiry-progress-item { flex: 0 1 auto; }
.inquiry-progress-item + .inquiry-progress-item::before { flex: 0 0 16px; min-width: 16px; }

@media (max-width: 1200px) {
  .inquiry-progress-label { display: none; }
  .inquiry-progress-item { flex: 0 0 auto; }
}

/* Two fields per row inside the panel, one on narrow columns. */
.inquiry-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* The pre-chat left column was mostly empty next to a tall form. These three
   reassurance points answer the questions the form itself raises, so the
   column earns its width instead of being padded out. */
.prechat-points {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) 0 0;
  border-top: 1px solid var(--ink-line);
  list-style: none;
}
.prechat-points li { display: grid; gap: 3px; }
.prechat-points strong { font-size: .9375rem; font-weight: 500; color: var(--ink); }
.prechat-points span { font-size: .875rem; line-height: 1.55; color: var(--muted); }

.prechat-intro { min-width: 0; }

/* Breathing room under the step rail. */
.inquiry-step-head { margin-top: var(--space-2xs); }

/* Two lines rather than three in the gold CTA band. */
.final-cta h2 { max-width: 26ch; }
.final-cta .cta-inner { align-items: center; }

/* ==========================================================================
   34. FOOTER LOGO
   The mark is 497x196 (2.54:1). It was rendering at 56px tall, which reads as
   an afterthought next to three columns of navigation. Scaled up to sit level
   with the column headings, with room to breathe, and capped so it never
   dominates the footer.
   ========================================================================== */

.footer-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.footer-brand-lockup .brand-mark-image {
  height: auto;
  width: clamp(150px, 14vw, 196px);   /* 2.54:1, so ~59-77px tall */
  max-width: 100%;
  object-fit: contain;
  image-rendering: auto;
}

/* theme.css pins the footer mark to a 34px square, which both shrank it and
   squashed the aspect ratio. */
.footer-brand .brand-mark-image,
.site-footer .brand-mark-image {
  width: clamp(150px, 14vw, 196px);
  height: auto;
}

.footer-brand-lockup > div { display: grid; gap: 4px; }
.footer-brand-lockup strong { letter-spacing: .2em; }
.footer-brand > p { margin-top: 0; margin-bottom: var(--space-md); max-width: 34ch; }

@media (max-width: 1000px) {
  .footer-brand-lockup .brand-mark-image,
  .footer-brand .brand-mark-image,
  .site-footer .brand-mark-image { width: 170px; }
}

@media (max-width: 600px) {
  .footer-brand-lockup { margin-bottom: var(--space-sm); }
  .footer-brand-lockup .brand-mark-image,
  .footer-brand .brand-mark-image,
  .site-footer .brand-mark-image { width: 150px; }
}

/* Header mark keeps its own scale, driven by the same aspect ratio. */
.topbar .brand-mark-image { width: auto; height: 44px; object-fit: contain; }
@media (max-width: 1024px) { .topbar .brand-mark-image { height: 34px; } }
@media (max-width: 420px)  { .topbar .brand-mark-image { height: 30px; } }

/* Route-desk and poster images now carry width/height, so the intrinsic ratio
   would letterbox them inside their fixed frames without this. */
.route-story img,
.video-poster img { width: 100%; height: 100%; object-fit: cover; }

/* The logo image already carries the wordmark, so the text beside it repeated
   "Visit Visa UAE" twice. It stays in the markup as the link's accessible
   name — the image is decorative (alt="") — but is hidden visually. */
.footer-brand-lockup strong {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.footer-brand-lockup {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
}
.footer-brand-lockup > div { display: block; }
.footer-brand-lockup span { display: block; font-size: .9375rem; line-height: 1.5; }
.footer-brand > p { margin-top: var(--space-2xs); }

/* ==========================================================================
   35. HERO SLIDER
   Slides are stacked and cross-faded. Every slide is in the DOM and readable
   by crawlers; only the active one is presented. The eligibility card is
   lifted out of the rotation so the form never moves under the cursor.
   ========================================================================== */

.home-hero.has-slider { position: relative; display: block; overflow: hidden; }

.hero-slides { position: relative; display: grid; }

/* All slides occupy the same grid cell, so the section is as tall as the
   tallest slide and the height never jumps between them. */
.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 860px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}

.hero-slide.is-active { opacity: 1; visibility: visible; }

/* Without scripting the first slide is the only one shown. */
.home-hero:not(.is-ready) .hero-slide:not(.is-active) { display: none; }

.hero-slide .hero-bg {
  position: absolute;
  inset: 0;
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

.home-hero.is-ready .hero-slide.is-active .hero-bg {
  animation: vvuae-drift 18s var(--ease) forwards;
}

.hero-slide .hero-inner {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
}

/* The copy settles in behind the fade rather than appearing all at once. */
.home-hero.is-ready .hero-slide .hero-copy > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.home-hero.is-ready .hero-slide.is-active .hero-copy > * { opacity: 1; transform: none; }
.home-hero.is-ready .hero-slide.is-active .hero-copy > :nth-child(1) { transition-delay: .12s; }
.home-hero.is-ready .hero-slide.is-active .hero-copy > :nth-child(2) { transition-delay: .20s; }
.home-hero.is-ready .hero-slide.is-active .hero-copy > :nth-child(3) { transition-delay: .28s; }
.home-hero.is-ready .hero-slide.is-active .hero-copy > :nth-child(4) { transition-delay: .36s; }

/* Slides 2+ use a paragraph styled as the heading, so the page keeps one H1. */
.hero-slide .hero-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: var(--display);
  line-height: .96;
  letter-spacing: -.045em;
  color: var(--sand);
  max-width: 15ch;
  margin: 0 0 var(--space-sm);
}
.hero-slide .hero-heading em { font-style: italic; font-weight: 400; color: var(--gold-lift); }

/* The card floats above the slides in its own layer. */
.hero-card-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  pointer-events: none;
}
.hero-card-layer > * { grid-column: 2; pointer-events: auto; }

/* Controls */
.hero-controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(1.5rem, 4vw, 2.75rem);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.hero-dots { display: flex; align-items: center; gap: var(--space-xs); }

.hero-dot {
  padding: 10px 0;          /* 44px tall tap target around a thin bar */
  border: 0;
  background: none;
  cursor: pointer;
}
.hero-dot-track {
  display: block;
  width: 46px;
  height: 2px;
  background: rgba(245, 241, 232, .3);
  overflow: hidden;
}
.hero-dot-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold-lift);
}
.hero-dot.is-active .hero-dot-fill { width: 100%; }
.home-hero.is-playing .hero-dot.is-active .hero-dot-fill {
  animation: vvuae-hero-progress var(--hero-duration, 6500ms) linear forwards;
}
.hero-dot.is-done .hero-dot-fill { width: 100%; background: rgba(245, 241, 232, .45); }
.hero-dot:hover .hero-dot-track { background: rgba(245, 241, 232, .5); }
.hero-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@keyframes vvuae-hero-progress { from { width: 0; } to { width: 100%; } }

.hero-arrows { display: flex; align-items: center; gap: var(--space-2xs); }

.hero-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(245, 241, 232, .28);
  background: rgba(16, 32, 28, .35);
  color: var(--sand);
  font-size: .9375rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}
.hero-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.hero-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.hero-pause-icon {
  display: block;
  width: 10px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.hero-arrow[aria-pressed="true"] .hero-pause-icon {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
  margin-left: 3px;
}

@media (max-width: 900px) {
  .hero-slide { min-height: auto; }
  .hero-slide .hero-inner { grid-template-columns: 1fr; padding-block: var(--space-xl); }
  .hero-slide .hero-bg { background-position: 60% center; }
  .hero-slide .hero-heading { max-width: none; }

  /* Below the split, the card sits after the slides rather than over them. */
  .hero-card-layer {
    position: static;
    inset: auto;
    display: block;
    padding-bottom: var(--space-xl);
    pointer-events: auto;
  }
  .hero-card-layer > * { grid-column: auto; }

  .hero-controls {
    position: static;
    transform: none;
    padding-bottom: var(--space-lg);
  }
}

@media (max-width: 600px) {
  .hero-dot-track { width: 30px; }
  .hero-controls { gap: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .home-hero.is-ready .hero-slide .hero-copy > * { opacity: 1; transform: none; transition: none; }
  .home-hero.is-ready .hero-slide.is-active .hero-bg { animation: none; }
  .home-hero.is-playing .hero-dot.is-active .hero-dot-fill { animation: none; width: 100%; }
}

/* ==========================================================================
   36. MONTHLY UMRAH PACKAGES
   Same card language as the service grid, with the availability state carried
   by a pill rather than colour alone.
   ========================================================================== */

.umrah-packages { background: var(--paper); }

.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}

.package-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg) var(--space-md);
  background: var(--sand);
  transition: background-color var(--slow);
}
.package-card:hover { background: var(--sand-deep); }

.package-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}

.package-duration {
  font-family: 'Fraunces', serif;
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--gold);
}

.package-status {
  padding: 5px 11px;
  border: 1px solid currentColor;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.package-status-available .package-status { color: #2C6E49; }
.package-status-limited   .package-status { color: #9A6A18; }
.package-status-waitlist  .package-status { color: #4B5563; }
.package-status-closed    .package-status { color: #8C8C8C; opacity: .8; }

.package-card h3 { font-size: 1.3125rem; margin: 0; }
.package-month { font-size: .8125rem; letter-spacing: .06em; color: var(--muted); margin: 0; }
.package-summary { font-size: .9375rem; line-height: 1.6; color: var(--muted); margin-top: var(--space-2xs); }

.package-meta { display: grid; gap: 2px; margin: var(--space-sm) 0 0; font-size: .875rem; }
.package-meta dt {
  font-size: var(--label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-top: var(--space-2xs);
}
.package-meta dd { margin: 0; color: var(--ink-soft); line-height: 1.5; }

.package-includes {
  display: grid;
  gap: 5px;
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) 0 0;
  border-top: 1px solid var(--ink-line);
  list-style: none;
  font-size: .875rem;
  color: var(--muted);
}
.package-includes li { position: relative; padding-left: 1.2em; }
.package-includes li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); }

.package-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-md);
}
.package-price { font-family: 'Fraunces', serif; font-size: 1.125rem; font-weight: 500; color: var(--brand); }
.package-foot .btn { min-height: 44px; padding-inline: var(--space-sm); font-size: .6875rem; }

.package-card.package-status-closed { opacity: .62; }
.package-card.package-status-closed .btn { pointer-events: none; opacity: .6; }

.package-note {
  margin-top: var(--space-md);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 70ch;
}

/* ==========================================================================
   37. TOURS BUTTON
   An outbound link to a separate site, so it reads as distinct from the
   in-site CTAs without shouting.
   ========================================================================== */

.nav-cta-tours {
  background: transparent;
  color: var(--ink);
  border-color: var(--gold);
}
.nav-cta-tours::before { background: var(--gold); }
.nav-cta-tours:hover { color: var(--ink); border-color: var(--gold); }

.mobile-bar-tours { background: var(--gold) !important; color: var(--ink) !important; }

/* Wide dropdowns: the UAE section now holds eleven routes. */
@media (min-width: 1025px) {
  .primary-nav > ul > li:first-child > .sub-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    min-width: 460px;
    max-width: 520px;
  }
  .primary-nav .sub-menu { max-height: min(70vh, 560px); overflow-y: auto; }
}

/* Country grid on the home page — compact, so eight destinations do not
   dominate the page the way eight full cards would. */
.country-grid {
  display: grid;
  /* auto-fill, not auto-fit: with eight items in a six-column track the
     leftover cells were rendering as grey blocks, because the grid's own
     background was showing through the 1px "gap as border" trick. Each card
     now draws its own hairline, so an incomplete final row is simply empty. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 0;
  background: transparent;
  border: 0;
}
.country-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--paper);
  border: 1px solid var(--ink-line);
  margin: -1px 0 0 -1px;   /* collapse adjacent borders into single hairlines */
  transition: background-color var(--fast);
}
.country-card strong { font-family: 'Fraunces', serif; font-size: 1.125rem; font-weight: 500; letter-spacing: -.02em; }
.country-card span { color: var(--gold); transition: transform var(--slow); }
.country-card:hover { background: var(--sand-deep); }
.country-card:hover span { transform: translateX(5px); }

.tourist-visa-preview { background: var(--sand); }
.umrah-preview .gcc-grid strong { font-size: 1.5rem; }

/* ==========================================================================
   38. HERO — RICHER TREATMENT
   The banner reads as premium through restraint and depth rather than
   decoration: a warmer image grade, a vignette that pulls the eye to the
   copy, a gold rule anchoring the text block, and an editorial slide counter.
   ========================================================================== */

/* A vignette over the photograph deepens the corners so the headline sits on
   a genuinely dark field rather than a flat wash. */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 45%, transparent 38%, rgba(10, 22, 19, .55) 100%),
    linear-gradient(to top, rgba(10, 22, 19, .55) 0%, transparent 38%);
}

.hero-slide .hero-inner { z-index: 2; }

/* A thin gold rule anchors the copy block and gives the composition a spine. */
.hero-slide .hero-copy {
  position: relative;
  padding-left: clamp(1.25rem, 2.4vw, 2.25rem);
}

.hero-slide .hero-copy::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold) 0%, rgba(176, 141, 76, .15) 100%);
}

.hero-slide .lede { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); }

/* Quick service links: four routes reachable from the first screen. */
.hero-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.hero-quick-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--space-sm);
  border: 1px solid rgba(245, 241, 232, .22);
  background: rgba(245, 241, 232, .05);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, .8);
  backdrop-filter: blur(4px);
  transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}

.hero-quick-links a:hover,
.hero-quick-links a:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.hero-slide .hero-actions { margin-top: var(--space-md); }

/* Editorial slide counter. */
.hero-index {
  display: flex;
  align-items: baseline;
  gap: .35em;
  margin: 0 var(--space-md) 0 0;
  font-family: 'Fraunces', serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--sand);
  font-variant-numeric: tabular-nums;
}
.hero-index [data-hero-current] { color: var(--gold-lift); }
.hero-index-sep { opacity: .35; font-size: .875rem; }

.hero-controls { justify-content: flex-start; gap: var(--space-md); }
.hero-controls .hero-arrows { margin-left: auto; }

@media (max-width: 900px) {
  .hero-slide .hero-copy { padding-left: var(--space-sm); }
  .hero-quick-links { margin-top: var(--space-md); }
  .hero-quick-links a { min-height: 36px; padding: 0 var(--space-xs); font-size: .6875rem; }
  .hero-controls { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .hero-index { margin-right: var(--space-sm); font-size: .9375rem; }
  .hero-quick-links { gap: 6px; }
}

/* ==========================================================================
   39. HEADER SHEDDING STAGES
   The guard applies these in order so the navigation survives on desktop.
   Search goes first, then the two secondary CTAs, then the menu tightens.
   The burger button is a last resort and never appears above 1200px.
   ========================================================================== */

.topbar.shed-search .header-search { display: none; }
.topbar.shed-tours .nav-cta-tours { display: none; }
.topbar.shed-emergency .nav-cta-emergency { display: none; }

.topbar.nav-compact .primary-nav > ul { gap: clamp(.5rem, .9vw, .9rem); }
.topbar.nav-compact .primary-nav a { font-size: .75rem; letter-spacing: .02em; }
.topbar.nav-compact .brand-mark-image { height: 36px; }
.topbar.nav-compact .nav-cta { padding-inline: var(--space-xs); font-size: .625rem; }

/* Desktop always shows the menu; the button is for tablet and below. */
@media (min-width: 1025px) {
  .topbar:not(.nav-does-not-fit) .menu-toggle { display: none; }
  .topbar:not(.nav-does-not-fit) .primary-nav { display: flex; }
}

/* The static fallbacks in section 26 assumed a 1100px cut; realign them so
   nothing hides the navigation before the guard has had a chance to shed. */
@media (max-width: 1560px) { .header-search { display: none; } }
@media (max-width: 1180px) { .nav-cta-tours { display: none; } }
@media (max-width: 1080px) { .nav-cta-emergency { display: none; } }

/* Final shedding stage: the menu wraps onto a second line rather than being
   replaced by a button. Desktop always keeps its navigation visible. */
.topbar.nav-wraps { align-items: center; }
.topbar.nav-wraps .nav-wrap { flex-wrap: wrap; row-gap: var(--space-2xs); }
.topbar.nav-wraps .primary-nav { flex: 1 1 100%; order: 3; }
.topbar.nav-wraps .primary-nav > ul {
  flex-wrap: wrap;
  row-gap: 2px;
  justify-content: flex-start;
  height: auto;
  padding-bottom: var(--space-2xs);
}
.topbar.nav-wraps .primary-nav > ul > li > a { height: auto; padding-block: 8px; }
.topbar.nav-wraps .primary-nav .sub-menu { top: calc(100% + 4px); }
.topbar.nav-wraps { min-height: 0; padding-block: var(--space-2xs); }

/* Never show the menu button on desktop. */
@media (min-width: 1025px) {
  .menu-toggle { display: none !important; }
  .primary-nav { display: flex !important; }
  .primary-nav > ul { display: flex !important; }
}


/* The "1px gap over a coloured background" pattern only works when the final
   row is full. These grids can end short, so each card draws its own border
   and the container stays transparent. */
.package-grid,
.sibling-grid {
  gap: 0;
  background: transparent;
  border: 0;
}

.package-card,
.sibling-card {
  border: 1px solid var(--ink-line);
  margin: -1px 0 0 -1px;
}