/* ============================================================
   PASSPORT GATEWAY — Landing v1 (vanilla CSS)
   - Mobile-first
   - Custom properties for all design tokens
   - WCAG 2.2 AA compliant
   ============================================================ */


/* ============================================================
   1. MODERN CSS RESET (Andy Bell)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }


/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand colors (locked, see docs/style-guide.md §2) */
  --color-navy:       #1B2A5B;
  --color-navy-deep:  #0A0F22;
  --color-gold:       #C9A24A;
  --color-gold-soft:  #E5C97A;
  --color-cream:      #F7F4EC;
  --color-white:      #FFFFFF;
  --color-text-on-dark: #F7F4EC;
  --color-text-muted: #5B6480;

  /* Fluid type scale (clamp scales mobile → desktop without media queries) */
  --text-xs:   clamp(0.7rem,  0.65rem + 0.2vw, 0.78rem);
  --text-sm:   clamp(0.85rem, 0.8rem  + 0.2vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.9rem  + 0.3vw, 1.05rem);
  --text-lg:   clamp(1.1rem,  1rem    + 0.5vw, 1.25rem);
  --text-xl:   clamp(1.35rem, 1.2rem  + 0.8vw, 1.5rem);
  --text-2xl:  clamp(1.6rem,  1.4rem  + 1.2vw, 2rem);
  --text-3xl:  clamp(2rem,    1.6rem  + 2vw,   2.75rem);
  --text-4xl:  clamp(2.4rem,  1.8rem  + 3vw,   4rem);

  /* Spacing scale (4px / 8px system) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* Layout */
  --max-width: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:   0 2px 6px rgba(10, 15, 34, 0.08);
  --shadow-md:   0 10px 30px rgba(10, 15, 34, 0.12);
  --shadow-gold: 0 6px 20px rgba(201, 162, 74, 0.35);

  /* Fonts */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


/* ============================================================
   3. BASE TYPOGRAPHY
   ============================================================ */
html { scroll-behavior: smooth; }

/* Film grain — fixed viewport overlay (SVG noise via feTurbulence).
   Adds tactile texture to the dark surface so it reads as "paper / leather"
   rather than flat screen. Sits above content visually but doesn't block clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-navy-deep);
  background: var(--color-cream);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-gold); color: var(--color-navy-deep); }


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — visible only when focused via keyboard */
.skip-link {
  position: absolute;
  top: -200px;
  left: 0;
  background: var(--color-navy);
  color: var(--color-text-on-dark);
  padding: var(--space-3) var(--space-4);
  z-index: 1000;
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 600;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }


/* ============================================================
   5. HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 244, 236, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(27, 42, 91, 0.08);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Brand logo (header) — circular crop of the wordmark JPEG with a subtle
   gold ring + drop shadow + gold glow so it reads as a premium stamp/seal
   against the dark navy header. v1.1: swap JPEG for vectorized SVG. */
.brand-logo {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(201, 162, 74, 0.55);
  box-shadow:
    0 4px 14px rgba(10, 15, 34, 0.4),
    0 0 12px rgba(201, 162, 74, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brand:hover .brand-logo {
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px rgba(10, 15, 34, 0.45),
    0 0 18px rgba(201, 162, 74, 0.3);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--color-navy);
}
.brand-text .brand-sub {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 700;
}


/* ============================================================
   6. LANGUAGE SWITCHER
   ============================================================ */
.lang-switch {
  display: inline-flex;
  background: var(--color-white);
  border: 1px solid rgba(27, 42, 91, 0.15);
  border-radius: var(--radius-pill);
  padding: 3px;
  flex-shrink: 0;
}

.lang-switch button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-switch button.active {
  background: var(--color-navy);
  color: var(--color-text-on-dark);
}

.lang-switch button:not(.active):hover {
  color: var(--color-navy);
}


/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  color: var(--color-text-on-dark);
  background-color: var(--color-navy-deep);
  background-image:
    /* Vesica piscis pattern — fixed-attached so it stays continuous through the page */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23C9A24A' stroke-width='1.5' opacity='0.7'><circle cx='0' cy='70' r='70'/><circle cx='70' cy='0' r='70'/><circle cx='140' cy='70' r='70'/><circle cx='70' cy='140' r='70'/><circle cx='70' cy='70' r='70'/></g></svg>"),
    /* Radial gold accent top-right (the only color variation; rest is solid navy-deep) */
    radial-gradient(1100px 600px at 85% -10%, rgba(201, 162, 74, 0.22), transparent 60%);
  background-size: 140px 140px, auto;
  background-position: top left, center;
  background-attachment: fixed, scroll;
  background-blend-mode: soft-light, normal;
  /* v1.1: add hero photo as a 5th background-image layer with multiply blend */
}

/* Floating scroll indicator — pill at the bottom-center with a short caption
   that tells the user there is more content below. Follows the user on scroll,
   scrolls to next section on click, hides via JS when reaching the bottom. */
.scroll-indicator {
  position: fixed;
  bottom: clamp(1rem, 3vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(10, 15, 34, 0.72);
  border: 1.5px solid rgba(201, 162, 74, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  color: var(--color-gold);
  text-decoration: none;
  z-index: 50;
  box-shadow:
    0 6px 22px rgba(10, 15, 34, 0.4),
    0 0 18px rgba(201, 162, 74, 0.2);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.scroll-indicator:hover {
  background: rgba(10, 15, 34, 0.88);
  color: var(--color-gold-soft);
  transform: translateX(-50%) translateY(-2px);
  box-shadow:
    0 8px 26px rgba(10, 15, 34, 0.55),
    0 0 24px rgba(201, 162, 74, 0.4);
}

.scroll-indicator-label {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.9;
}

.scroll-indicator-icon {
  display: block;
  animation: scroll-bounce 2.4s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

.scroll-indicator.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(14px);
}

.hero-inner {
  text-align: center;
}

/* Brand seal — inline SVG sello with curving wordmark + PG + key. Color is
   `currentColor` inside the SVG so it inherits this CSS color. */
.hero-seal {
  display: block;
  width: clamp(180px, 22vw, 270px);
  margin: 0 auto var(--space-6);
  color: var(--color-gold);
}

.hero-seal svg {
  display: block;
  width: 100%;
  height: auto;
  /* optimizeLegibility prioritizes crisp readability for the small curved wordmark */
  text-rendering: optimizeLegibility;
  shape-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: var(--space-3); /* tighter — eyebrow + H1 are one visual unit */
}

.hero-title {
  font-size: var(--text-4xl);
  max-width: 16ch;
  margin: 0 auto var(--space-5); /* slight breathing into the lede */
  color: var(--color-text-on-dark);
}

.hero-lede {
  font-size: var(--text-lg);
  max-width: 44ch;
  margin: 0 auto var(--space-6); /* tighter into trust row */
  color: rgba(247, 244, 236, 0.86);
  line-height: 1.5;
}


/* ============================================================
   7b. TRUST ROW (sits between lede and CTAs)
   ============================================================ */
.trust-row {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  /* max-width tuned so the 4 items wrap into a balanced 2×2 grid */
  max-width: 580px;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
  font-weight: 600;
}

.trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.trust-icon {
  flex-shrink: 0;
  opacity: 0.85;
  color: var(--color-gold);
}


/* ============================================================
   8. CTAs
   ============================================================ */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8); /* closer to contact cards for tighter rhythm */
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.15;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-navy-deep);
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
  background: var(--color-gold-soft);
  transform: translateY(-1px);
}

.btn-primary:active { transform: translateY(0); }

.btn-icon { flex-shrink: 0; }

.btn-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.btn-action {
  font-size: var(--text-base);
  font-weight: 700;
}

.btn-benefit {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.78;
}


/* ============================================================
   9. CONTACT CARDS
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 920px;
  margin: 0 auto;
}

.contact-card {
  background: rgba(247, 244, 236, 0.05);
  border: 1px solid rgba(247, 244, 236, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: left;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.contact-card:hover {
  background: rgba(247, 244, 236, 0.08);
  border-color: rgba(247, 244, 236, 0.24);
}

.contact-card-lang {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-gold-soft);
  margin-bottom: var(--space-2);
}

.contact-card-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-text-on-dark);
  word-break: break-word;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-on-dark);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.contact-link:hover { color: var(--color-gold-soft); }

.contact-link svg { flex-shrink: 0; }


/* ============================================================
   PAGE SECTIONS (Camino B additions — How it works, Testimonials,
   FAQ, Final CTA). Shared section-head pattern at top.
   ============================================================ */

/* Shared header for all sections below the hero */
.section-head {
  text-align: center;
  margin-bottom: var(--space-6);
}

.section-head .eyebrow {
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

/* Section ornament: two gold lines fading toward a center diamond.
   Marks each section with a small decorative passport-stamp-style accent. */
.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto var(--space-5);
  color: var(--color-gold);
}

.ornament-line {
  display: block;
  width: 44px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.ornament-line:first-child {
  background: linear-gradient(to right, transparent, currentColor);
}

.ornament-line:last-child {
  background: linear-gradient(to right, currentColor, transparent);
}

.ornament-diamond {
  display: block;
  width: 6px;
  height: 6px;
  background: currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--color-text-on-dark);
  margin: 0 auto;
  max-width: 22ch;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Shared positioning + text color for all dark sections below the hero.
   Each section defines its own background gradient + pattern for smooth flow. */
.how-it-works,
.coverage,
.faq {
  position: relative;
  color: var(--color-text-on-dark);
}


/* ---- How it works — solid navy-deep + fixed pattern (no gradient to avoid bands) ---- */
.how-it-works {
  padding-block: clamp(2rem, 5.5vw, 4rem);
  background-color: var(--color-navy-deep);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23C9A24A' stroke-width='1.5' opacity='0.7'><circle cx='0' cy='70' r='70'/><circle cx='70' cy='0' r='70'/><circle cx='140' cy='70' r='70'/><circle cx='70' cy='140' r='70'/><circle cx='70' cy='70' r='70'/></g></svg>");
  background-size: 140px 140px;
  background-position: top left;
  background-attachment: fixed;
  background-blend-mode: soft-light;
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 1000px;
}

@media (min-width: 720px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

.step {
  text-align: center;
  padding: var(--space-4);
}

.step-number {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  font-style: italic;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.step-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-on-dark);
  margin: 0 0 var(--space-3);
}

.step-body {
  color: rgba(247, 244, 236, 0.72);
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: 32ch;
  margin: 0 auto;
}


/* ---- Coverage — Jacó ↔ SJO route map (replaces former testimonials block) ---- */
.coverage {
  padding-block: clamp(2rem, 5.5vw, 4rem);
  background-color: var(--color-navy-deep);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23C9A24A' stroke-width='1.5' opacity='0.7'><circle cx='0' cy='70' r='70'/><circle cx='70' cy='0' r='70'/><circle cx='140' cy='70' r='70'/><circle cx='70' cy='140' r='70'/><circle cx='70' cy='70' r='70'/></g></svg>");
  background-size: 140px 140px;
  background-position: top left;
  background-attachment: fixed;
  background-blend-mode: soft-light;
}

.coverage-map {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(var(--space-3), 3vw, var(--space-5));
  background: rgba(10, 15, 34, 0.55);
  border: 1px solid rgba(201, 162, 74, 0.32);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(10, 15, 34, 0.4);
}

.map-svg {
  display: block;
  width: 100%;
  height: auto;
  text-rendering: optimizeLegibility;
}

/* Route stats panel. Mobile: stacked horizontally above the map.
   Tablet+: absolutely positioned over the map's top-left corner. */
.map-stats {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: center;
}

.map-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  min-width: 80px;
}

.map-stat-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.85;
}

.map-stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-on-dark);
  letter-spacing: 0.01em;
}

@media (min-width: 720px) {
  .map-stats {
    position: absolute;
    top: clamp(var(--space-4), 3vw, var(--space-5));
    left: clamp(var(--space-4), 3vw, var(--space-5));
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    z-index: 2;
  }

  .map-stat {
    align-items: flex-start;
  }
}

/* Mobile-specific cleanup for the route map. The SVG scales down a lot on phones,
   so secondary decorative elements (mountains, contour lines, region labels, inset)
   become illegible noise. We hide them and enlarge the critical pin labels so the
   two main pins (PLAYA JACÓ / SJO AIRPORT) stay readable. Desktop is untouched. */
@media (max-width: 720px) {
  /* Hide decorative layers that don't survive the scale down */
  .map-stop-label,
  .map-cordillera,
  .map-contours,
  .map-lat-ticks,
  .map-region,
  .map-inset {
    display: none;
  }

  /* Bump the main pin labels so they read clearly at mobile widths */
  .map-pin-main {
    font-size: 22px;
    letter-spacing: 0.06em;
  }

  .map-pin-sub {
    font-size: 13px;
    letter-spacing: 0.12em;
  }
}

.coverage-caption {
  text-align: center;
  max-width: 600px;
  margin: var(--space-5) auto 0;
  color: rgba(247, 244, 236, 0.78);
  font-size: var(--text-base);
  line-height: 1.65;
}


/* ---- FAQ — solid navy-deep + fixed pattern ---- */
.faq {
  padding-block: clamp(2rem, 5.5vw, 4rem);
  background-color: var(--color-navy-deep);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23C9A24A' stroke-width='1.5' opacity='0.7'><circle cx='0' cy='70' r='70'/><circle cx='70' cy='0' r='70'/><circle cx='140' cy='70' r='70'/><circle cx='70' cy='140' r='70'/><circle cx='70' cy='70' r='70'/></g></svg>");
  background-size: 140px 140px;
  background-position: top left;
  background-attachment: fixed;
  background-blend-mode: soft-light;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: rgba(247, 244, 236, 0.05);
  border: 1px solid rgba(247, 244, 236, 0.14);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.faq-item[open] {
  border-color: rgba(201, 162, 74, 0.4);
  background: rgba(247, 244, 236, 0.08);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text-on-dark);
  position: relative;
  padding-right: 3rem;
  transition: background 0.15s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--color-gold);
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:hover {
  background: rgba(201, 162, 74, 0.08);
}

.faq-item p {
  padding: 0 var(--space-5) var(--space-4);
  margin: 0;
  font-size: 0.95rem;
  color: rgba(247, 244, 236, 0.78);
  line-height: 1.65;
}


/* ---- Final CTA — solid navy-deep + fixed pattern + center gold glow (no sandwich gradient) ---- */
.final-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6.5vw, 4.5rem);
  background-color: var(--color-navy-deep);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23C9A24A' stroke-width='1.5' opacity='0.7'><circle cx='0' cy='70' r='70'/><circle cx='70' cy='0' r='70'/><circle cx='140' cy='70' r='70'/><circle cx='70' cy='140' r='70'/><circle cx='70' cy='70' r='70'/></g></svg>"),
    radial-gradient(900px 500px at 50% 50%, rgba(201, 162, 74, 0.18), transparent 60%);
  background-size: 140px 140px, auto;
  background-position: top left, center;
  background-attachment: fixed, scroll;
  background-blend-mode: soft-light, normal;
  color: var(--color-text-on-dark);
}

.final-cta-inner {
  text-align: center;
  max-width: 720px;
}

.final-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--color-text-on-dark);
  margin: 0 0 var(--space-4);
  line-height: 1.1;
}

.final-body {
  font-size: var(--text-lg);
  color: rgba(247, 244, 236, 0.85);
  max-width: 50ch;
  margin: 0 auto var(--space-8);
  line-height: 1.55;
}

.final-cta .cta-row {
  margin-bottom: 0;
}


/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-navy-deep);
  color: rgba(247, 244, 236, 0.65);
  padding-block: var(--space-5);
  text-align: center;
  font-size: 0.85rem;
}


/* ============================================================
   11. RESPONSIVE — mobile-first additive media queries
   Most type/spacing scaling is already handled by clamp() above.
   ============================================================ */

/* Mid-size phones / phablets (540-719px): contact grid in 2 cols
   (email card naturally sits in row 2 — modern orphan pattern, looks intentional) */
@media (min-width: 540px) and (max-width: 719px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

/* Tablet and up (≥720px): contact cards in 3-column grid */
@media (min-width: 720px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

/* Phones (≤560px): stack CTAs vertically — 2-line CTAs need width.
   Centered (not stretched) so buttons keep natural width and don't look form-y. */
@media (max-width: 560px) {
  .cta-row {
    flex-direction: column;
    align-items: center;
  }
}

/* Compact phones (≤480px): tighten brand for header fit + tighten trust-row */
@media (max-width: 480px) {
  .brand-text strong { font-size: 1rem; }
  .brand-text .brand-sub { font-size: 0.62rem; letter-spacing: 0.16em; }
  .brand-logo { width: 46px; height: 46px; }

  /* When trust-row wraps to multiple rows on mobile, tighten vertical rhythm */
  .trust-row {
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-6);
  }
}

/* Ultra-narrow phones (≤360px): tighten gutter + brand + hero padding */
@media (max-width: 360px) {
  :root { --gutter: 0.875rem; }
  .brand-logo { width: 40px; height: 40px; }
  .brand-text strong { font-size: 0.92rem; }
  .brand-text .brand-sub { font-size: 0.58rem; letter-spacing: 0.14em; }
  .lang-switch button { padding: 0.35rem 0.65rem; font-size: 0.72rem; }
  .hero { padding-block: 2.5rem; }
  .hero-lede { margin-bottom: var(--space-6); }
  .cta-row { margin-bottom: var(--space-6); }
  /* Compact the floating scroll indicator: drop the label, keep just the icon */
  .scroll-indicator { padding: 0.55rem 0.7rem; gap: 0; }
  .scroll-indicator-label { display: none; }
}


/* ============================================================
   12. PRINT (graceful fallback)
   ============================================================ */
@media print {
  .site-header, .site-footer, .lang-switch, .skip-link { display: none; }
  .hero { background: none; color: black; padding: 0; }
  .hero-title, .hero-lede, .contact-card, .contact-card-name { color: black; }
}


/* ============================================================
   13. REDUCED MOTION (a11y)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}