/* ==========================================================================
   The Visa Company — stylesheet
   Shared by index.html and privacy.html
   ========================================================================== */

:root {
  --ink: #07182f;
  --ink-soft: #39495b;
  --navy: #061a35;
  --navy-dark: #031126;
  --navy-mid: #0b294d;
  --paper: #ffffff;
  --mist: #f0f3f6;
  --line: #cdd5de;
  --line-dark: rgba(255, 255, 255, 0.22);
  --gold: #c8912f;          /* borders, rules, accents (non-text) */
  --gold-text: #8c631d;     /* gold as TEXT on light: 5.36:1 on white, 4.81:1 on mist */
  --gold-soft: #e0b455;     /* gold as text on the dark navy surfaces */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --content: min(100% - 2in, 1600px);
  --focus: 3px solid var(--gold);
  --focus-light: 3px solid var(--gold-soft);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* anchor targets clear the header */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

/* --- Focus rings: visible on every interactive element ------------------- */
:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.hero-container :focus-visible,
.destinations-section :focus-visible,
.availability :focus-visible,
.doorstep :focus-visible,
.contact :focus-visible,
.site-footer :focus-visible {
  outline: var(--focus-light);
}

/* --- Accessibility helpers ---------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  z-index: 60;
  top: 10px; left: 10px;
  padding: 12px 18px;
  color: #fff;
  background: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 4px;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* --- Header -------------------------------------------------------------- */
.site-header {
  width: var(--content);
  min-height: 96px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.19rem;
  letter-spacing: 0.075em;
  white-space: nowrap;
}
.wordmark-mark {
  width: 38px;
  height: 38px;
  flex: none;
  display: block;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 32px);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.main-nav a { position: relative; color: #263449; }
.main-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  bottom: -7px; left: 0;
  width: 0; height: 1px;
  background: var(--ink);
  transition: width 160ms ease;
}
.main-nav > a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 17px;
  color: #fff !important;
  background: var(--ink);
  border-radius: 4px;
}
.nav-cta:hover { background: var(--navy-mid); }
.menu-button { display: none; }

/* --- Buttons and links --------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid currentColor;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: transform 170ms ease, background 170ms ease, color 170ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-light { color: var(--navy); background: #fff; border-color: #fff; }
.button-light:hover { background: #e9eef4; border-color: #e9eef4; }
.button-outline { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .75); }
.button-outline:hover { color: var(--navy); background: #fff; }
.button-dark { color: #fff; background: var(--ink); border-color: var(--ink); }
.button-dark:hover { background: transparent; color: var(--ink); }
.button-gold { color: var(--navy-dark); background: var(--gold-soft); border-color: var(--gold-soft); }
.button-gold:hover { background: #eec778; border-color: #eec778; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.text-link.light { color: #fff; border-color: rgba(255, 255, 255, .7); }

.eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow.light { color: #d6e4f3; }

h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.95;
}
h2 em, h1 em { font-style: italic; font-weight: 400; }

/* --- Hero ---------------------------------------------------------------- */
.hero-container {
  position: relative;
  width: 100%;
  background: radial-gradient(circle at 50% 30%, #0d3463 0%, #061a35 60%, #031126 100%);
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(52px, 7vw, 86px) 0 clamp(44px, 5vw, 68px);
}
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}
.hero-inner {
  width: var(--content);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

/* Above-the-fold block: heading, promise, actions, proof */
.hero-lede { max-width: 900px; }
.hero-lede h1 {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}
.hero-copy {
  max-width: 660px;
  margin: 26px 0 0;
  color: #dbe6f3;
  font-size: 1.08rem;
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
  color: #bdd0e6;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.hero-proof li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.hero-proof li::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--gold-soft);
}

/* --- Coverflow decks (shared by hero and destinations) ------------------- */
.coverflow {
  position: relative;
  width: 100%;
  margin: 0 auto;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.coverflow:focus-visible {
  outline: var(--focus-light);
  outline-offset: 10px;
  border-radius: 12px;
}
.coverflow-deck {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-coverflow { max-width: 1350px; height: 430px; margin-top: clamp(48px, 6vw, 82px); }
.dest-coverflow { max-width: 1400px; height: 560px; margin-top: 40px; }

/* Card is a real <button>: natively focusable, Enter/Space work */
.coverflow-card {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
  color: inherit;
  border-radius: 22px;
  overflow: hidden;
  background: #081a33;
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease,
              filter 0.55s ease, box-shadow 0.55s ease;
  cursor: pointer;
}
.coverflow-card:focus-visible {
  outline: var(--focus-light);
  outline-offset: 4px;
}
.hero-coverflow .coverflow-card { width: min(290px, 75vw); height: 400px; }
.dest-coverflow .coverflow-card { width: min(350px, 80vw); height: 480px; }

.coverflow-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  filter: brightness(0.9) contrast(1.05);
}
.coverflow-card:hover img,
.coverflow-card:focus-visible img {
  transform: scale(1.06);
  filter: brightness(1) contrast(1.1);
}

/* The card is a <button>, so its content is phrasing-level spans.
   They need explicit block display to lay out and to take vertical margin. */
.card-overlay,
.card-overlay > span,
.card-title,
.card-sub { display: block; }

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(3, 17, 38, 0.22) 0%,
    rgba(3, 17, 38, 0.12) 32%,
    rgba(3, 17, 38, 0.80) 72%,
    rgba(3, 17, 38, 0.97) 100%);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 6;
}
.card-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 28, 53, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 7px 14px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.card-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 8px var(--gold-soft);
}
.card-title {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 400;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.dest-coverflow .card-title { font-size: clamp(1.85rem, 3.2vw, 2.3rem); }
.card-sub {
  font-size: 0.88rem;
  color: #d6e3f2;
  margin: 0 0 16px;
  line-height: 1.45;
}
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 9px 15px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.coverflow-card:hover .card-cta,
.coverflow-card:focus-visible .card-cta {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

/* Deck controls */
.coverflow-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(6, 26, 53, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: grid;
  place-items: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.coverflow-nav:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.coverflow-nav-prev { left: clamp(6px, 3vw, 40px); }
.coverflow-nav-next { right: clamp(6px, 3vw, 40px); }

.coverflow-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}
.coverflow-dots { display: flex; gap: 4px; }
/* 24x24 hit area (WCAG 2.5.8) with a smaller visual dot inside */
.coverflow-dot {
  width: 26px; height: 26px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.coverflow-dot::before {
  content: "";
  display: block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}
.coverflow-dot[aria-current="true"]::before {
  background: #fff;
  width: 24px;
  border-radius: 10px;
}
.coverflow-pause {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: #e2ecf7;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}
.coverflow-pause:hover { background: #fff; color: var(--navy); }

.hero-caption-bar {
  position: absolute;
  left: clamp(20px, 4vw, 60px);
  bottom: 16px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}

/* --- Layout helpers ------------------------------------------------------ */
.section-pad { width: var(--content); margin: 0 auto; }
.full-bleed-pad {
  width: 100%;
  padding-left: max(1in, calc((100% - 1600px) / 2));
  padding-right: max(1in, calc((100% - 1600px) / 2));
}

/* --- Intro --------------------------------------------------------------- */
.intro {
  display: grid;
  grid-template-columns: .9fr 1.3fr;
  gap: 8vw;
  padding-top: 130px;
  padding-bottom: 110px;
}
.intro-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.intro-kicker p { margin: 0; }
.line { width: 54px; height: 1px; background: var(--ink); }
.intro-copy { max-width: 676px; }
.intro h2, .section-heading h2, .services h2, .early h2,
.contact h2, .destinations-heading h2, .faq h2 {
  font-size: clamp(2.4rem, 4.5vw, 5.5rem);
  line-height: 1.02;
}
.intro-copy > p {
  max-width: 580px;
  margin: 34px 0 29px;
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 1.74;
}

/* --- Destinations -------------------------------------------------------- */
.destinations-section {
  width: 100%;
  padding-top: 110px;
  padding-bottom: 120px;
  background: var(--navy-dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.destinations-header {
  width: var(--content);
  margin: 0 auto 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}
.destinations-heading h2 { margin-top: 20px; }
.destinations-subtext {
  max-width: 380px;
  color: #c6d6e8;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

/* --- Availability -------------------------------------------------------- */
.availability {
  padding-top: 107px;
  padding-bottom: 110px;
  color: #fff;
  background: var(--navy);
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 36px;
  align-items: end;
}
.section-heading h2 { margin-top: 26px; }
.heading-copy {
  max-width: 390px;
  margin: 0 0 8px;
  color: #d4deea;
  font-size: .95rem;
  line-height: 1.65;
}
.availability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 76px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.availability-card {
  min-height: 342px;
  padding: 31px 36px 34px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-dark);
}
.availability-card:last-child { border-right: 0; }
.city-mark { width: 62px; height: 62px; color: #e8eef6; }
.city-mark svg { width: 100%; height: 100%; }
.card-index {
  margin: 35px 0 12px;
  color: #c2d1e2;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
}
.availability-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: -.05em;
}
.availability-card > p:not(.card-index) {
  max-width: 330px;
  margin: 12px 0 auto;
  color: #d6e0ec;
  font-size: .9rem;
  line-height: 1.55;
}
.availability-card .text-link {
  width: max-content;
  margin-top: 25px;
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.source-note {
  max-width: 660px;
  margin: 21px 0 0;
  color: #b9c8db;
  font-size: .78rem;
  line-height: 1.6;
}
.source-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* --- Services ------------------------------------------------------------ */
.services { padding-top: 139px; padding-bottom: 140px; }
.services-top { display: grid; grid-template-columns: .9fr 1.3fr; align-items: end; }
.services h2 { margin-top: 25px; }
.service-list { margin-top: 75px; border-top: 1px solid var(--line); }
.service-row {
  display: grid;
  grid-template-columns: 17% 1fr 32px;
  gap: 20px;
  align-items: start;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--line);
}
.service-number {
  padding-top: 7px;
  color: #56647a;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.service-row h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -.05em;
}
.service-row p {
  max-width: 580px;
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.63;
}
.service-arrow {
  justify-self: end;
  padding-top: 9px;
  font-size: 1.45rem;
  transition: transform 160ms ease;
}
.service-row:hover .service-arrow { transform: translate(4px, -4px); }

/* --- Doorstep ------------------------------------------------------------ */
.doorstep {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 650px;
  color: #fff;
  background: var(--navy);
  overflow: hidden;
}
.doorstep-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #dce7f4;
}
.doorstep-art::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(255, 255, 255, .14);
}
.doorstep-art svg { position: relative; z-index: 2; width: min(60%, 310px); }
.doorstep-orbit {
  position: absolute;
  width: 560px; height: 560px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
}
.orbit-one { transform: translate(-25%, -20%); }
.orbit-two { width: 350px; height: 350px; transform: translate(31%, 31%); }
.doorstep-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 600px;
  padding: 80px clamp(42px, 7vw, 125px);
  background: var(--navy-mid);
}
.doorstep-copy h2 {
  margin-top: 27px;
  font-size: clamp(2.6rem, 5vw, 6rem);
  letter-spacing: -.06em;
  line-height: .95;
}
.doorstep-copy > p:not(.eyebrow):not(.fine-print) {
  margin: 31px 0 0;
  color: #e0e9f4;
  font-size: 1rem;
  line-height: 1.7;
}
.fine-print { margin: 20px 0 32px; color: #bccddf; font-size: .8rem; line-height: 1.6; }

/* --- Early --------------------------------------------------------------- */
.early {
  display: grid;
  grid-template-columns: .72fr 1.18fr .9fr;
  gap: 45px;
  align-items: center;
  padding-top: 142px;
  padding-bottom: 140px;
}
.early-number {
  color: #dfe5eb;
  font-family: var(--serif);
  font-size: clamp(6rem, 16vw, 19rem);
  font-style: italic;
  line-height: .75;
  letter-spacing: -.12em;
}
.early h2 { margin-top: 25px; }
.early-copy p:not(.eyebrow) {
  max-width: 445px;
  margin: 32px 0 0;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.7;
}
.early-quote {
  align-self: end;
  padding: 23px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.35;
}

/* --- FAQ ----------------------------------------------------------------- */
.faq {
  padding-top: 120px;
  padding-bottom: 130px;
  background: var(--mist);
}
.faq-top { display: grid; grid-template-columns: .9fr 1.3fr; align-items: end; gap: 36px; }
.faq h2 { margin-top: 25px; }
.faq-list { margin-top: 64px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.3;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: var(--focus); outline-offset: -3px; }
.faq-icon {
  flex: none;
  width: 26px; height: 26px;
  margin-top: 4px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 200ms ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-width: 760px;
  margin: 0;
  padding: 0 0 30px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.72;
}
.faq-answer p { margin: 0 0 14px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Contact ------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: .93fr 1.07fr;
  gap: clamp(55px, 8vw, 145px);
  padding-top: 113px;
  padding-bottom: 123px;
  color: #fff;
  background: var(--navy);
}
.contact h2 { margin-top: 25px; }
.contact-heading > p:not(.eyebrow) {
  max-width: 400px;
  margin: 31px 0 0;
  color: #d5dfec;
  font-size: .98rem;
  line-height: 1.7;
}
.contact-details {
  display: grid;
  gap: 18px;
  margin-top: 36px;
  color: #e1e9f3;
}
.contact-line { display: grid; gap: 5px; }
.contact-label {
  color: #a9bdd4;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.contact-line a {
  width: max-content;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  padding-bottom: 3px;
  font-size: .98rem;
}
.contact-line a:hover { border-bottom-color: #fff; }
.contact-line span { font-size: .98rem; }

.inquiry-form { display: grid; gap: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
.inquiry-form label {
  display: grid;
  gap: 9px;
  color: #dbe5f0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  border-radius: 0;
  color: #fff;
  background: transparent;
  padding: 11px 2px 12px;
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 160ms ease;
}
.inquiry-form textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.inquiry-form option { color: var(--ink); }
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder { color: #a7b8cb; }
.inquiry-form input:hover,
.inquiry-form select:hover,
.inquiry-form textarea:hover { border-bottom-color: rgba(255, 255, 255, .8); }
.inquiry-form input:focus-visible,
.inquiry-form select:focus-visible,
.inquiry-form textarea:focus-visible {
  outline: var(--focus-light);
  outline-offset: 4px;
  border-bottom-color: var(--gold-soft);
}
.inquiry-form input[aria-invalid="true"],
.inquiry-form select[aria-invalid="true"],
.inquiry-form textarea[aria-invalid="true"] { border-bottom-color: #ff9d9d; }
.field-error {
  color: #ffb4b4;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
}
.field-error:empty { display: none; }

/* Honeypot — hidden from people, visible to bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  color: #c9d7e7;
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
}
.form-consent input {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--gold-soft);
  flex: none;
}
.form-consent a { text-decoration: underline; text-underline-offset: 3px; }

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 6px;
}
.form-footer .button { flex: none; }
.form-status {
  max-width: 300px;
  margin: 0;
  color: #bccddf;
  font-size: .82rem;
  line-height: 1.55;
}
.form-status[data-state="success"] { color: #9fe6b8; font-weight: 500; }
.form-status[data-state="error"] { color: #ffb4b4; font-weight: 500; }
.form-status[data-state="sending"] { color: #e6d3a6; }
button[disabled] { opacity: .6; cursor: progress; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  color: #dbe4ed;
  background: #041326;
  padding: 44px clamp(20px, 4vw, 60px) 30px;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-mark { color: #fff; font-size: 1rem; }
.footer-links {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-links a { padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.footer-links a:hover { border-bottom-color: var(--gold-soft); color: var(--gold-soft); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: #b3c3d5;
  font-size: .78rem;
  line-height: 1.6;
  flex-wrap: wrap;
}
.footer-bottom p { margin: 0; text-align: left; flex: 1 1 500px; }
.footer-bottom p:last-child { text-align: right; flex: 0 0 auto; }

/* --- Reveal animation (only applied when JS is running) ------------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.js .reveal.visible { opacity: 1; transform: translateY(0); }

/* --- Legal / privacy page ------------------------------------------------ */
.legal { padding-top: 90px; padding-bottom: 120px; }
.legal h1 {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: -.05em;
  line-height: 1;
}
.legal-updated { margin: 18px 0 0; color: var(--ink-soft); font-size: .9rem; }
.legal-body { max-width: 760px; margin-top: 56px; }
.legal-body h2 {
  margin: 48px 0 0;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -.03em;
  line-height: 1.2;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
}
.legal-body p { margin: 16px 0 0; }
.legal-body ul { margin: 16px 0 0; padding-left: 22px; }
.legal-body li { margin-bottom: 10px; }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-lede h1 { font-size: clamp(2.4rem, 6.6vw, 4rem); }
}

@media (max-width: 850px) {
  :root { --content: min(100% - 38px, 720px); }

  .site-header { min-height: 78px; position: relative; }
  .wordmark { font-size: .95rem; }
  .wordmark-mark { width: 32px; height: 32px; }
  .menu-button {
    display: grid;
    place-content: center;
    gap: 6px;
    width: 46px; height: 46px;
    padding: 0;
    border: 1px solid var(--line);
    color: var(--ink);
    background: #fff;
    border-radius: 4px;
  }
  .menu-button span:not(.sr-only) { display: block; width: 18px; height: 1.5px; background: currentColor; }
  .main-nav {
    position: absolute;
    z-index: 40;
    top: 77px; right: 0; left: 0;
    display: none;
    align-items: stretch;
    gap: 0;
    padding: 14px 0 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 24px rgba(0, 0, 0, .08);
  }
  .main-nav.open { display: flex; flex-direction: column; }
  .main-nav a { padding: 14px 19px; }
  .main-nav > a:not(.nav-cta)::after { display: none; }
  .nav-cta { margin: 6px 19px 0; justify-content: center; }

  .intro, .services-top, .section-heading, .early,
  .contact, .destinations-header, .faq-top { grid-template-columns: 1fr; }
  .intro { gap: 32px; padding-top: 80px; padding-bottom: 70px; }
  .intro h2, .section-heading h2, .services h2, .early h2,
  .contact h2, .destinations-heading h2, .faq h2 {
    font-size: clamp(2.1rem, 6.5vw, 3.8rem);
    line-height: 1.05;
  }
  .full-bleed-pad { padding-left: 19px; padding-right: 19px; }

  .hero-copy { font-size: 1rem; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { flex: 1 1 100%; }
  .hero-proof { gap: 12px 24px; font-size: .8rem; }

  .availability { padding-top: 75px; padding-bottom: 75px; }
  .availability-grid { margin-top: 40px; grid-template-columns: 1fr; }
  .availability-card {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
    padding: 28px 4px;
    min-height: auto;
  }
  .availability-card:last-child { border-bottom: 0; }

  .services { padding-top: 80px; padding-bottom: 80px; }
  .services-top { gap: 20px; }
  .service-list { margin-top: 40px; }
  .service-row { grid-template-columns: 40px 1fr 24px; padding: 24px 0; }

  .doorstep { grid-template-columns: 1fr; }
  .doorstep-art { min-height: 280px; }
  .doorstep-copy { max-width: none; min-height: auto; padding: 60px 24px; }

  .early { gap: 28px; padding-top: 80px; padding-bottom: 80px; }
  .early-number { font-size: clamp(6rem, 20vw, 10rem); line-height: 0.8; }
  .early-quote { max-width: 100%; font-size: 1.15rem; }

  .faq { padding-top: 80px; padding-bottom: 80px; }
  .faq-list { margin-top: 40px; }

  .contact { gap: 48px; padding-top: 75px; padding-bottom: 75px; }
  .form-row { grid-template-columns: 1fr; gap: 16px; }

  .footer-bottom { margin-top: 40px; }
  .footer-bottom p:last-child { text-align: left; }

  /* Decks: one card at a time, neighbours out of the way */
  .hero-coverflow { height: 400px; margin-top: 44px; }
  .dest-coverflow { height: 430px; margin-top: 20px; }
  .hero-coverflow .coverflow-card { width: min(250px, 66vw); height: 358px; }
  .dest-coverflow .coverflow-card { width: min(260px, 68vw); height: 380px; }
  .coverflow-nav { width: 46px; height: 46px; }
  .coverflow-nav-prev { left: 0; }
  .coverflow-nav-next { right: 0; }
}

@media (max-width: 560px) {
  :root { --content: min(100% - 28px, 480px); }
  .wordmark { gap: 9px; font-size: .84rem; }
  .wordmark-mark { width: 28px; height: 28px; }
  .intro h2, .section-heading h2, .services h2, .early h2,
  .contact h2, .destinations-heading h2, .faq h2 {
    font-size: clamp(1.85rem, 8vw, 2.5rem);
    line-height: 1.08;
  }
  .hero-lede h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  .hero-copy { font-size: .98rem; line-height: 1.6; }

  .hero-coverflow { height: 370px; margin-top: 34px; }
  .dest-coverflow { height: 400px; margin-top: 12px; }
  .hero-coverflow .coverflow-card,
  .dest-coverflow .coverflow-card {
    width: min(228px, 66vw);
    height: 330px;
    border-radius: 18px;
  }
  .card-overlay { padding: 18px 16px; }
  .card-title, .dest-coverflow .card-title { font-size: 1.5rem; }
  .card-sub { font-size: .82rem; margin-bottom: 12px; line-height: 1.35; }
  .card-tag { font-size: .72rem; padding: 5px 11px; }
  .card-cta { font-size: .74rem; padding: 8px 12px; }
  .coverflow-nav { width: 42px; height: 42px; }

  .doorstep-copy { padding: 48px 20px; }
  .doorstep-copy h2 { font-size: clamp(2.2rem, 9vw, 3.2rem); }

  .form-footer { flex-direction: column; align-items: stretch; gap: 16px; }
  .form-status { max-width: 100%; }
  .footer-bottom p:last-child { text-align: left; }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .button:hover { transform: none; }
}

/* ==========================================================================
   MULTI-PAGE COMPONENTS
   Design system: Trust & Authority + Conversion / Accessible & Ethical.
   Gold is reserved for CTAs and active state — never for decoration.
   ========================================================================== */

/* --- Sticky header shell -------------------------------------------------- */
.header-shell {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header { border-bottom: 0; }

/* Active page indicator */
.main-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.main-nav > a[aria-current="page"]:not(.nav-cta)::after {
  width: 100%;
  height: 2px;
  background: var(--gold);
}

/* --- Interior page header ------------------------------------------------- */
.page-hero {
  position: relative;
  background: radial-gradient(circle at 20% 20%, #0d3463 0%, #061a35 62%, #031126 100%);
  color: #fff;
  overflow: hidden;
  padding: clamp(60px, 8vw, 104px) 0 clamp(54px, 7vw, 92px);
}
.page-hero-inner { width: var(--content); margin: 0 auto; position: relative; z-index: 2; }
.page-hero h1 {
  margin: 18px 0 0;
  max-width: 16ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.page-hero-lede {
  max-width: 620px;
  margin: 26px 0 0;
  color: #dbe6f3;
  font-size: 1.08rem;
  line-height: 1.68;
}

/* --- Proof band ----------------------------------------------------------- */
.proof-band {
  background: var(--mist);
  border-bottom: 1px solid var(--line);
  padding: clamp(40px, 5vw, 62px) 0;
}
.proof-grid {
  width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.proof-item { display: flex; flex-direction: column; gap: 8px; }
.proof-figure {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--ink);
}
.proof-label {
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.5;
  max-width: 24ch;
}

/* --- Hub cards (solution overview) --------------------------------------- */
.hub { padding-top: clamp(80px, 9vw, 130px); padding-bottom: clamp(80px, 9vw, 130px); }
.hub-head { max-width: 720px; }
.hub-head h2 { margin-top: 22px; font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1.02; }
.hub-head p { margin: 26px 0 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 22px;
  margin-top: 60px;
}
.hub-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 30px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.hub-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(7, 24, 47, .10);
}
.hub-card:focus-visible { outline: var(--focus); outline-offset: 3px; }
.hub-index {
  color: var(--gold-text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hub-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.12;
}
.hub-card p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.62; }
.hub-more {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hub-card:hover .hub-more { color: var(--gold-text); }

/* --- Process steps -------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin-top: 60px;
  border-top: 1px solid var(--line);
}
.step { padding: 32px 28px 36px 0; border-right: 1px solid var(--line); }
.step:last-child { border-right: 0; }
.step-num {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-text);
  font-family: var(--serif);
  font-size: 1.2rem;
}
.step h3 {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -.03em;
}
.step p { margin: 12px 0 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.62; max-width: 34ch; }

/* --- Generic prose block -------------------------------------------------- */
.prose { max-width: 720px; }
.prose h2 {
  margin: 56px 0 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -.035em;
  line-height: 1.15;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin: 34px 0 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -.02em;
}
.prose p { margin: 16px 0 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; }
.prose ul { margin: 18px 0 0; padding-left: 20px; }
.prose li { margin-bottom: 11px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Two-column section: sticky aside + body */
.split { display: grid; grid-template-columns: .68fr 1.32fr; gap: clamp(40px, 7vw, 110px); }
.split-aside { align-self: start; position: sticky; top: 130px; }
.split-aside .eyebrow { color: var(--ink-soft); }
.split-aside h2 { margin-top: 20px; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.04; }

/* --- Included / excluded lists ------------------------------------------- */
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 46px; }
.ledger h3 {
  margin: 0 0 18px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--sans);
}
.ledger ul { margin: 0; padding: 0; list-style: none; }
.ledger li {
  position: relative;
  padding: 0 0 13px 28px;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.6;
}
.ledger li::before {
  position: absolute;
  left: 0; top: -1px;
  font-size: 1rem;
  font-weight: 700;
}
.ledger-yes li::before { content: "\2713"; color: #1f7a4d; }
.ledger-no li::before { content: "\00D7"; color: #8a97a6; font-size: 1.2rem; top: -3px; }

/* --- Schengen states grid ------------------------------------------------- */
.states-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr));
  margin: 48px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-dark);
}
.states-grid li {
  list-style: none;
  padding: 15px 8px 15px 0;
  border-bottom: 1px solid var(--line-dark);
  color: #dbe6f3;
  font-size: .95rem;
}
.states-note { margin: 26px 0 0; color: #b9c8db; font-size: .85rem; line-height: 1.6; }

/* --- CTA band ------------------------------------------------------------- */
.cta-band {
  background: var(--navy-mid);
  color: #fff;
  padding: clamp(64px, 8vw, 104px) 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.cta-inner {
  width: var(--content);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
}
.cta-copy { max-width: 620px; }
.cta-copy h2 {
  margin: 16px 0 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.04;
}
.cta-copy p { margin: 20px 0 0; color: #dbe6f3; font-size: 1.02rem; line-height: 1.68; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* --- Multi-column footer -------------------------------------------------- */
.footer-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 44px;
  margin-top: 46px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.footer-col h2 {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #93a8c0;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a, .footer-col p {
  color: #dbe4ed;
  font-size: .92rem;
  line-height: 1.6;
  margin: 0;
}
.footer-col a:hover { color: var(--gold-soft); }
.footer-address { font-style: normal; color: #b3c3d5; font-size: .92rem; line-height: 1.7; }
.footer-address strong { color: #dbe4ed; font-weight: 600; display: block; margin-bottom: 4px; }

/* --- 404 ------------------------------------------------------------------ */
.notfound { text-align: center; padding: clamp(90px, 14vw, 180px) 0; }
.notfound .proof-figure { font-size: clamp(5rem, 14vw, 9rem); color: var(--gold-text); }
.notfound h1 {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -.04em;
}
.notfound p { margin: 20px auto 34px; max-width: 46ch; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; }

/* --- Responsive additions ------------------------------------------------- */
@media (max-width: 1080px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split-aside { position: static; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 850px) {
  /* Nav items become comfortable touch rows (>=48px) with clear spacing */
  .main-nav a { padding: 15px 19px; min-height: 48px; display: flex; align-items: center; }
  .main-nav a[aria-current="page"] {
    border-left: 3px solid var(--gold);
    background: rgba(200, 145, 47, .06);
  }
  .step { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 0 30px; }
  .step:last-child { border-bottom: 0; }
  .ledger { grid-template-columns: 1fr; gap: 30px; }
  .hub-grid { gap: 16px; margin-top: 40px; }
  .cta-inner { gap: 28px; }
  .cta-actions { width: 100%; }
  .cta-actions .button { flex: 1 1 100%; }
  .page-hero h1 { max-width: none; }
}

@media (max-width: 560px) {
  .proof-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-cols { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .states-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   TARGET SIZE (WCAG 2.5.8)
   Standalone links — nav, footer, contact list — sit on short text lines, so
   their hit area is extended with a transparent ::before overlay. This keeps
   the visual type size and rhythm untouched while giving every target at
   least 24px of height. Prose links inside sentences are exempt and are
   deliberately left alone.
   ========================================================================== */

.main-nav > a::before,
.footer-col li a::before,
.footer-links a::before,
.contact-line a::before,
.text-link::before {
  content: "";
  position: absolute;
  inset: -6px -6px;
  border-radius: 4px;
}

.footer-col li a,
.footer-links a,
.contact-line a,
.text-link { position: relative; }

/* The overlay must not cover the underline pseudo-element or the label text. */
.main-nav > a:not(.nav-cta)::after { z-index: 1; }

/* Consent checkbox: 24x24 minimum, with its own spacing preserved */
.form-consent input { width: 24px; height: 24px; }

/* Dots already carry a 26px hit box; keep them clear of each other (8px gap) */
.coverflow-dots { gap: 6px; }

/* ==========================================================================
   MOTION SYSTEM
   Timings and easings follow the ui-ux-pro-max motion presets:
     Subtle  scroll reveal  300-400ms  power1.out  y 8-16px
     Standard stagger       400-600ms  power2.out  0.08s between children
   Implemented in CSS + IntersectionObserver rather than GSAP: the same
   curves at zero kilobytes, which matters on a site tuned for LCP.
   power1.out ~= cubic-bezier(.25,.46,.45,.94)
   power2.out ~= cubic-bezier(.22,.61,.36,1)
   ========================================================================== */

:root {
  --ease-out-1: cubic-bezier(.25, .46, .45, .94);
  --ease-out-2: cubic-bezier(.22, .61, .36, 1);
  --dur-reveal: 380ms;
  --dur-stagger: 520ms;
}

/* Base reveal (unchanged behaviour, retuned curve) */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out-1),
              transform var(--dur-reveal) var(--ease-out-1);
}
.js .reveal.visible { opacity: 1; transform: none; }

/* Staggered children. The observer sets --i on each child; capped at 8 per
   the preset guidance so the last item never feels laggy. */
.js .stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-stagger) var(--ease-out-2),
              transform var(--dur-stagger) var(--ease-out-2);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .stagger.visible > * { opacity: 1; transform: none; }

/* Headline lift: slightly longer travel for display type */
.js .lift {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms var(--ease-out-2), transform 620ms var(--ease-out-2);
}
.js .lift.visible { opacity: 1; transform: none; }

/* Gold rule that draws itself in under a section heading */
.rule-draw {
  display: block;
  width: 0;
  height: 2px;
  margin-top: 22px;
  background: var(--gold);
  transition: width 700ms var(--ease-out-2) 120ms;
}
.visible > .rule-draw, .rule-draw.visible { width: 64px; }

/* Counters must not reflow as digits change */
.proof-figure, .sla-figure { font-variant-numeric: tabular-nums; }

/* Hover lift shared by card-like surfaces */
.hub-card, .note-card, .appt-type, .benefit, .validity-card {
  transition: border-color 220ms var(--ease-out-1),
              transform 220ms var(--ease-out-1),
              box-shadow 220ms var(--ease-out-1);
}

/* ==========================================================================
   NEW SECTIONS
   ========================================================================== */

/* --- What makes us different: appointment-first flow --------------------- */
.diff { padding-top: clamp(80px, 9vw, 126px); padding-bottom: clamp(80px, 9vw, 126px); }
.diff-head { max-width: 760px; }
.diff-head h2 { margin-top: 22px; font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1.02; }
.diff-head p { margin: 26px 0 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }

.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: clamp(52px, 6vw, 76px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
  border-top: 1px solid var(--line);
}
.flow-step { position: relative; padding: 34px 34px 38px 0; border-right: 1px solid var(--line); }
.flow-step:last-child { border-right: 0; }
/* Connector line that fills in as the section reveals */
.flow-step::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width 600ms var(--ease-out-2);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.stagger.visible .flow-step::after { width: 100%; }
.flow-num {
  display: block;
  color: var(--gold-text);
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: .04em;
}
.flow-step h3 {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.flow-step p { margin: 12px 0 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.65; max-width: 36ch; }

/* --- Appointment type cards ---------------------------------------------- */
.appt-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 18px;
  margin-top: clamp(44px, 5vw, 64px);
}
.appt-type {
  padding: 28px 26px 30px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.appt-type:hover { border-color: var(--gold); transform: translateY(-3px); }
.appt-type h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -.025em;
}
.appt-type p { margin: 10px 0 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.6; }

/* --- Guarantee panel ------------------------------------------------------ */
.guarantee {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  padding: clamp(34px, 4vw, 52px);
  background: var(--mist);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
}
.guarantee-mark { width: 62px; height: 62px; flex: none; color: var(--gold-text); }
.guarantee-mark svg { width: 100%; height: 100%; }
.guarantee-copy h2 {
  margin: 18px 0 0;
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
  line-height: 1.06;
}
.guarantee-copy > p { margin: 22px 0 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.72; }

/* --- Disclaimer ----------------------------------------------------------- */
.disclaimer {
  max-width: 760px;
  margin: 30px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--line);
  color: #5a6a7d;
  font-size: .88rem;
  line-height: 1.65;
}
.guarantee-copy .disclaimer { border-left-color: #c2ccd8; }
.destinations-section .disclaimer,
.availability .disclaimer { color: #b9c8db; border-left-color: rgba(255, 255, 255, .25); }

/* --- SLA counters (dark band) --------------------------------------------- */
.sla-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 26px;
  margin-top: clamp(46px, 5vw, 66px);
  padding-top: 40px;
  border-top: 1px solid var(--line-dark);
}
.sla { display: flex; flex-direction: column; gap: 4px; }
.sla-figure {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--gold-soft);
}
.sla-unit {
  color: #dbe6f3;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sla-label { margin-top: 8px; color: #b9c8db; font-size: .92rem; line-height: 1.55; max-width: 26ch; }

/* --- Travel notes ---------------------------------------------------------- */
/* padding-block only — the `padding` shorthand would wipe out the horizontal
   gutter that .full-bleed-pad sets, letting the content run to the edge. */
.notes {
  background: var(--mist);
  padding-top: clamp(80px, 9vw, 120px);
  padding-bottom: clamp(80px, 9vw, 120px);
  border-top: 1px solid var(--line);
}
.notes-head { max-width: 720px; }
.notes-head h2 { margin-top: 22px; font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.04; }
.notes-head p { margin: 24px 0 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; }
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  margin-top: clamp(44px, 5vw, 62px);
}
.note-card {
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.note-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.note-card h3 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -.03em;
}
.note-card p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.68; }

/* --- Golden Visa: benefits, routes, timeline ------------------------------ */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 20px;
  margin-top: clamp(46px, 5vw, 64px);
}
.benefit {
  padding: 28px 26px 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.benefit:hover { border-color: var(--gold); transform: translateY(-3px); }
.benefit h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -.025em;
}
.benefit p { margin: 10px 0 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.62; }

.route-list { margin-top: 56px; border-top: 1px solid var(--line-dark); }
.route-row {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-dark);
}
.route-row h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -.03em;
  color: #fff;
}
.route-row p { margin: 0; color: #d6e0ec; font-size: .96rem; line-height: 1.65; }

.timeline { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.timeline-item { position: relative; padding: 0 0 34px 34px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -6px; top: 7px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--gold);
}
.timeline-item h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -.02em;
}
.timeline-item p { margin: 9px 0 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.68; }

.callout {
  margin-top: 34px;
  padding: 24px 26px;
  background: var(--mist);
  border-radius: 8px;
  border-left: 3px solid var(--gold);
}
.callout p { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.68; }
.callout-tight { margin-top: 24px; padding: 20px 22px; }
.callout-tight ul { margin: 12px 0 0; padding-left: 20px; }
.callout-tight li { margin-bottom: 8px; color: var(--ink-soft); font-size: .94rem; line-height: 1.6; }
.callout strong { color: var(--ink); }

/* --- Validity cards -------------------------------------------------------- */
.validity {
  background: #fff;
  padding-top: clamp(80px, 9vw, 120px);
  padding-bottom: clamp(80px, 9vw, 120px);
  border-top: 1px solid var(--line);
}
.validity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 22px;
  margin-top: clamp(46px, 5vw, 66px);
  align-items: start;
}
.validity-card {
  padding: 32px 30px 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.validity-card:hover { border-color: var(--gold); }
.validity-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: -.03em;
}
.validity-lead {
  margin: 6px 0 16px;
  color: var(--gold-text);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.validity-card p { margin: 0 0 14px; color: var(--ink-soft); font-size: .96rem; line-height: 1.68; }
.validity-card p:last-child { margin-bottom: 0; }

/* Service rows: the two new ones link out */
.service-row h3 a { position: relative; }
.service-row h3 a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 220ms var(--ease-out-1);
}
.service-row:hover h3 a::after { width: 100%; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .flow { grid-template-columns: 1fr; }
  .flow-step { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 0 30px; }
  .flow-step:last-child { border-bottom: 0; }
  .flow-step::after { display: none; }
  .route-row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 850px) {
  .guarantee { grid-template-columns: 1fr; gap: 22px; padding: 28px 24px; }
  .guarantee-mark { width: 48px; height: 48px; }
  .diff { padding-top: 70px; padding-bottom: 70px; }
  .notes { padding: 70px 0; }
  .validity { padding: 70px 0; }
  .sla-grid { gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .stagger > *, .js .lift { opacity: 1; transform: none; transition: none; }
  .rule-draw { width: 64px; transition: none; }
  .flow-step::after { width: 100%; transition: none; }
  .hub-card:hover, .note-card:hover, .appt-type:hover, .benefit:hover { transform: none; }
}

/* ==========================================================================
   SOCIAL LINKS
   Icon-only links, so each carries an sr-only label. 44px targets clear both
   the WCAG 2.5.8 minimum and the touch guidance.
   ========================================================================== */
.footer-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.social-row { display: flex; align-items: center; gap: 10px; }
.social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #dbe4ed;
  transition: color 200ms var(--ease-out-1),
              border-color 200ms var(--ease-out-1),
              background 200ms var(--ease-out-1),
              transform 200ms var(--ease-out-1);
}
.social-link svg { width: 19px; height: 19px; display: block; }
.social-link:hover {
  color: var(--navy-dark);
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  transform: translateY(-2px);
}
/* These sit on the dark footer, so the light focus ring applies */
.social-link:focus-visible { outline: var(--focus-light); outline-offset: 3px; }

@media (max-width: 560px) {
  .footer-actions { gap: 18px; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .social-link:hover { transform: none; }
}

/* ==========================================================================
   VALIDITY CARDS — equal height row
   The cards previously sized to their own content, so the UK card ran to
   roughly three times the height of the US one. stretch + flex column keeps
   the row level whatever the copy length.
   ========================================================================== */
.validity-grid { align-items: stretch; }
.validity-card { display: flex; flex-direction: column; }
.validity-card p:last-child { margin-bottom: 0; }

/* --- UK processing options strip ----------------------------------------- */
.processing {
  margin-top: 22px;
  padding: 30px 32px 34px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
}
.processing-title {
  margin: 0 0 22px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.processing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 26px 34px;
}
.processing-item { display: flex; flex-direction: column; gap: 7px; }
.processing-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.processing-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .94rem;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .processing { padding: 24px 22px 26px; }
  .processing-grid { gap: 22px; }
}

/* ==========================================================================
   NAV DROPDOWNS
   Pattern: top-level link + adjacent disclosure button (W3C APG "disclosure
   navigation with top-level links"). The parent link keeps working, so
   Services still opens services.html instead of only opening a menu.
   Desktop: floating panel on hover/focus/click. Mobile: inline accordion.
   ========================================================================== */

/* Anchor targets must clear the sticky header */
html { scroll-padding-top: 118px; }

.nav-item { position: relative; display: flex; align-items: center; gap: 2px; }

.nav-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: #263449;
  border-radius: 4px;
  transition: color 180ms var(--ease-out-1), background 180ms var(--ease-out-1);
}
.nav-toggle svg {
  width: 13px;
  height: 13px;
  transition: transform 220ms var(--ease-out-2);
}
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-toggle:hover { color: var(--gold-text); }
/* Extend the hit area to 26px+ without disturbing the row */
.nav-toggle::before { content: ""; position: absolute; inset: -6px -4px; }

.nav-item.is-ancestor > a { color: var(--ink); font-weight: 700; }
.nav-item.is-ancestor > a::after { width: 100%; height: 2px; background: var(--gold); }

/* --- Desktop panel (only where the horizontal nav actually fits) --------- */
@media (min-width: 1001px) {
  .nav-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 18px);
    left: -18px;
    min-width: 272px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 22px 48px rgba(7, 24, 47, .16);
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* Only the slide is animated. Animating opacity from 0 would mean that if
       the transition clock never ticks (background tab, throttled compositor)
       the panel sits un-hidden at opacity 0 — invisible but still focusable,
       which is a keyboard trap. Fully opaque always; worst case it simply
       appears without the slide. */
    opacity: 1;
    transform: translateY(-6px);
    transition: transform 180ms var(--ease-out-1);
  }
  .nav-menu.open { transform: none; }

  /* Bridges the gap so the pointer can travel from tab to panel */
  .nav-item.has-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: -18px;
    height: 20px;
  }

  .nav-menu a {
    padding: 11px 14px;
    border-radius: 5px;
    color: #263449;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.35;
    text-transform: uppercase;
    transition: background 160ms var(--ease-out-1), color 160ms var(--ease-out-1);
  }
  .nav-menu a::after { display: none; }   /* no underline sweep inside the panel */
  .nav-menu a:hover { background: var(--mist); color: var(--ink); }
  .nav-menu a[aria-current="page"] { color: var(--gold-text); background: rgba(140, 99, 29, .08); }
}

/* --- Mobile accordion ----------------------------------------------------- */
@media (max-width: 850px) {
  .nav-item { display: block; position: relative; }
  .nav-item > a { padding-right: 60px; }
  .nav-toggle {
    position: absolute;
    top: 0;
    right: 8px;
    width: 48px;
    height: 48px;
    color: #4a5a6e;
  }
  .nav-toggle::before { inset: 0; }
  .nav-toggle svg { width: 15px; height: 15px; }

  .nav-menu {
    display: flex;
    flex-direction: column;
    background: var(--mist);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .nav-menu a {
    padding: 14px 19px 14px 34px;
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: .72rem;
    color: #3b4a5e;
  }
  .nav-menu a::after { display: none; }
  .nav-menu a[aria-current="page"] {
    color: var(--gold-text);
    border-left: 3px solid var(--gold);
    background: rgba(200, 145, 47, .07);
  }
  .nav-item.is-ancestor > a {
    border-left: 3px solid var(--gold);
    background: rgba(200, 145, 47, .06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu { transition: none; transform: none; }
  .nav-toggle svg { transition: none; }
}

/* `display:flex` below would beat the UA [hidden] rule, so state it explicitly. */
.nav-menu[hidden] { display: none; }

/* ==========================================================================
   NAV BREAKPOINT
   With three dropdown chevrons the horizontal nav needs ~950px of its own.
   Between 851px and 1000px it was overflowing the viewport and forcing the
   whole page to scroll sideways, so the nav collapses to the hamburger at
   1000px even though the rest of the layout stays in its desktop form until
   850px. Must come after the base nav rules to win on source order.
   ========================================================================== */
@media (max-width: 1000px) {
  .site-header { position: relative; }

  .menu-button {
    display: grid;
    place-content: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--line);
    color: var(--ink);
    background: #fff;
    border-radius: 4px;
  }
  .menu-button span:not(.sr-only) {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
  }

  .main-nav {
    position: absolute;
    z-index: 40;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    gap: 0;
    padding: 14px 0 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 24px rgba(0, 0, 0, .08);
  }
  .main-nav.open { display: flex; flex-direction: column; }
  .main-nav > a:not(.nav-cta)::after { display: none; }
  .main-nav a {
    padding: 15px 19px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .main-nav a[aria-current="page"] {
    border-left: 3px solid var(--gold);
    background: rgba(200, 145, 47, .06);
  }
  .nav-cta { margin: 6px 19px 0; justify-content: center; }

  /* Dropdowns become inline accordions */
  .nav-item { display: block; position: relative; }
  .nav-item > a { padding-right: 60px; }
  .nav-toggle {
    position: absolute;
    top: 0;
    right: 8px;
    width: 48px;
    height: 48px;
    color: #4a5a6e;
  }
  .nav-toggle::before { inset: 0; }
  .nav-toggle svg { width: 15px; height: 15px; }

  .nav-menu {
    position: static;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    background: var(--mist);
  }
  .nav-menu a {
    padding: 14px 19px 14px 34px;
    min-height: 48px;
    font-size: .72rem;
    text-transform: uppercase;
    color: #3b4a5e;
    border-radius: 0;
  }
  .nav-menu a[aria-current="page"] {
    color: var(--gold-text);
    border-left: 3px solid var(--gold);
    background: rgba(200, 145, 47, .07);
  }
  .nav-item.is-ancestor > a {
    border-left: 3px solid var(--gold);
    background: rgba(200, 145, 47, .06);
  }
  /* No hover bridge in accordion mode — it would swallow taps */
  .nav-item.has-menu::after { display: none; }
  .nav-menu[hidden] { display: none; }
}

/* ==========================================================================
   MID-WIDTH GUTTERS
   The 2in page gutter is generous on a large display but starves the header
   on a 1024-1280 laptop, where the nav needs ~930px and was overflowing.
   Tighten the gutter and the nav's own spacing across that band.
   ========================================================================== */
@media (max-width: 1400px) {
  :root { --content: min(100% - 64px, 1600px); }
  .full-bleed-pad { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 1200px) {
  .main-nav { gap: clamp(9px, 1.1vw, 17px); font-size: .73rem; }
  .nav-cta { padding: 12px 13px; }
  .wordmark { font-size: 1.05rem; }
}