/* Beyond Passports — shared design system (warm-light "Sunset Coast" direction)
   Consumed by every coded page. Palette + type + components live here so the
   homepage, money pages and apply page stay visually identical.
   NOTE: every CSS class name AND every custom-property NAME is unchanged from the
   previous (navy/gold) system — only VALUES + component styling changed, so all
   blades inherit the new look with no markup edits. */
/* Self-hosted Outfit — no external CDN (renders behind privacy/ad blockers; removes a
   Google Fonts IP transfer). All weights live in public/fonts. */
@font-face{font-family:'Outfit';src:url('/fonts/outfit-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Outfit';src:url('/fonts/outfit-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Outfit';src:url('/fonts/outfit-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Outfit';src:url('/fonts/outfit-800.woff2') format('woff2');font-weight:800;font-display:swap}
:root{
  /* Institutional palette — Petrol & Steel. --cta + --gold both map to petrol. */
  --ink:#16222E; --navy:#16222E; --paper:#F4F6FA; --gold:#155E7A; --stamp:#2E9A8C; --cta:#155E7A;
  /* soft steel accent — on dark surfaces (badges, eyebrows, labels on ink). */
  --soft:#A9CCDA;
  /* teal accent text-on-light — passes 4.5:1 on paper/white. (WCAG 1.4.3) */
  --stamp-text:#1F6E63;
  /* teal-on-dark (live dots, eyebrows on ink). */
  --on-dark:#79CFC2;
  /* instructional-hint grey — passes 4.5:1 on white and grey panels. (WCAG 1.4.3) */
  --hint:#5d6b76;
  --paper-edge:#dde3ec; --white:#fff;
  /* body/label muted text — clears 4.5:1 on the cool paper background. (WCAG 1.4.3) */
  --muted:#5d6b76;
  /* Outfit across the board — display, body AND mono (tabular numerals for refs/fees). */
  --display:"Outfit",system-ui,sans-serif; --body:"Outfit",system-ui,sans-serif; --mono:"Outfit",ui-monospace,monospace;
  --shadow:0 18px 44px -26px rgba(20,34,46,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* Headings — tight, punchy display type (matches the home-hero preview): Outfit 700,
   tighter tracking + leading site-wide. */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.04;margin:0 0 .4em;letter-spacing:-.03em}
h2,h3{font-weight:700;line-height:1.08;letter-spacing:-.02em}
a{color:var(--cta);text-decoration:none}
img,svg{max-width:100%;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cta);margin:0 0 .6em}
/* buttons */
.btn{display:inline-block;background:var(--cta);color:#fff;font-weight:700;padding:14px 26px;border-radius:12px;border:0;cursor:pointer;font-size:16px;font-family:var(--body);transition:transform .08s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px);background:#0F4A61;box-shadow:0 0 0 3px rgba(21,94,122,.18)}
.btn:active{transform:translateY(1px)}
/* one canonical focus ring (overrides per-page ad-hoc rings) — terracotta */
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
/* Dark-surface focus variant: switch to a light ring that clears 3:1 against the
   dark ink bands (CTA band, dark hero, footer/topbar). (WCAG 2.4.7 / 1.4.11) */
.cta-band a:focus-visible,.cta-band .btn:focus-visible,.cta-band button:focus-visible,
.dhero a:focus-visible,.dhero .btn:focus-visible,
.topbar a:focus-visible,
footer a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{left:0}
button,a,.btn,summary{touch-action:manipulation}
.btn--ghost{background:transparent;color:var(--cta);border:1.5px solid var(--cta)}
.btn--ghost:hover{background:transparent;box-shadow:0 0 0 3px rgba(21,94,122,.14)}
.btn--wa{background:#25D366}
/* glass secondary button (on dark/mesh surfaces — CTA band + footer) */
.btn--glass{background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.32);color:#fff}
.btn--glass:hover{background:rgba(255,255,255,.22);box-shadow:none}
/* MRZ signature strip — retired in the warm-light system (kills passport-MRZ strips
   everywhere with no blade edits). */
.mrz{display:none}
/* Utility top bar — split: compliance note left, rating + contact right (within content width). */
.topbar{background:#0F4A61;color:rgba(255,255,255,.9);font-family:var(--body);font-size:12.5px;padding:7px 0}
.topbar .tb-row{display:flex;align-items:center;justify-content:space-between;gap:10px 40px;flex-wrap:wrap}
.topbar .tb-spacer{display:none}
.topbar .tb-tp{min-width:0}
.topbar .tb-links{min-width:0}
.topbar .tb-links a{white-space:nowrap}
/* Narrow: stack + centre everything, allow links to wrap. */
@media (max-width:860px){.topbar .tb-row{justify-content:center;gap:6px 16px}.topbar .tb-links{flex-wrap:wrap;justify-content:center}}
/* Hide the Trustpilot box from the topbar on mobile (keeps it in footer + page bodies). */
@media (max-width:768px){.topbar .tb-tp{display:none}}
/* Shared inline glyphs for WhatsApp / Call links + buttons (partials.wa-glyph / call-glyph) — fixed size */
.wa-g,.call-g{width:15px;height:15px;fill:currentColor;display:inline-block;vertical-align:-2px;margin-right:6px;flex:none}
.btn .wa-g,.btn .call-g{width:17px;height:17px;vertical-align:-3px}
.tb-note strong{color:#fff;font-weight:700}
.tb-links{display:inline-flex;align-items:center;gap:24px}
.tb-rate{color:#fff;font-weight:700;letter-spacing:.01em}
/* Links: terracotta-tinted light for ≥4.5:1 on ink, ≥24px target. (WCAG 1.4.3 + 2.5.8) */
.topbar a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.topbar a:hover{text-decoration:underline}
/* topbar social icons (white chips on the teal bar) */
.tb-div{display:inline-block;width:1px;height:16px;background:rgba(255,255,255,.28)}
.tb-social{display:inline-flex;align-items:center;gap:9px}
.tb-soc{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:6px;color:#fff;background:rgba(255,255,255,.12);min-height:0;transition:background .16s ease,transform .16s ease}
.tb-soc:hover{background:rgba(255,255,255,.28);transform:translateY(-1px);text-decoration:none}
.tb-soc svg{display:block}
/* phones: socials drop, Call/WhatsApp/Trustpilot keep priority; footer carries socials there */
@media (max-width:600px){.topbar .tb-row{justify-content:center}.tb-note{width:100%;text-align:center}.tb-links{gap:14px}.tb-social,.tb-div{display:none}.topbar .tb-ico{display:none}}
/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(244,245,246,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--paper-edge)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--display);font-weight:800;font-size:21px;color:var(--ink);letter-spacing:-.01em}
.brand b{color:var(--cta)}
.nav a{color:var(--ink);font-size:15px;margin-left:22px}
.nav a:hover{color:var(--cta)}
/* sections */
section{padding:72px 0}
.sec-head{max-width:60ch;margin-bottom:36px}
.sec-head h2{font-size:clamp(28px,3.4vw,38px);color:var(--ink)}
.alt{background:var(--white);border-top:1px solid var(--paper-edge);border-bottom:1px solid var(--paper-edge)}
/* destination cards — full-photo card with a frosted-glass info panel floating at the bottom */
.dests{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pass{position:relative;display:block;height:236px;border-radius:18px;overflow:hidden;background:var(--stamp);box-shadow:var(--lift-2);transition:transform .3s ease,box-shadow .3s ease}
.pass:hover{transform:translateY(-4px);box-shadow:var(--lift-3)}
/* photo fills the whole card; skyline SVG is the fallback */
.pass .sky{position:absolute;inset:0;height:auto;background:var(--stamp);overflow:hidden}
.pass .sky img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pass:hover .sky img{transform:scale(1.06)}
.pass .sky svg{position:absolute;inset:0;width:100%;height:100%}
/* subtle bottom scrim so the glass panel always reads */
.pass::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,18,16,.35));z-index:1}
/* glass info panel */
.pass .lower{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.6);border-radius:14px;padding:11px 14px;box-shadow:0 10px 26px -14px rgba(40,50,70,.5)}
.pass .main{padding:0;flex:1;min-width:0}
.pass .main .k{font-family:var(--body);font-weight:700;font-size:10px;color:var(--stamp-text);letter-spacing:.1em;text-transform:uppercase}
.pass .main h3{font-size:17px;margin:2px 0 0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pass .main .t{display:none}
.pass .stub{border-left:0;background:transparent;padding:0;min-width:auto;display:block;text-align:right}
.pass .stub .fee{font-family:var(--display);font-size:18px;color:var(--cta);font-weight:800;line-height:1}
.pass .stub .lab{font-family:var(--body);font-weight:700;font-size:9px;color:var(--hint);letter-spacing:.08em}
/* reassurance ticks */
.ticks{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 36px}
.tick{display:flex;gap:12px;align-items:flex-start}
.tick .stamp{flex:0 0 38px;height:38px}
.tick h3{font-size:17px;font-family:var(--body);font-weight:700;margin:0 0 2px}
.tick p{margin:0;font-size:15px;color:var(--muted)}
/* testimonial */
.quote{max-width:62ch}
.quote blockquote{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.8vw,30px);line-height:1.3;color:var(--ink);margin:0}
.quote .by{display:flex;align-items:center;gap:12px;font-family:var(--body);font-weight:600;font-size:13px;color:var(--stamp-text);margin-top:18px}
.quote .by .avatar{flex:0 0 44px;height:44px;border-radius:50%;background:var(--stamp);overflow:hidden}
/* steps — "boarding pass" ticket strip: one card, dashed perforations between steps,
   "STEP" labels + big faded seat numbers (via CSS counter, no markup change). */
.steps{display:flex;flex-wrap:nowrap;background:var(--white);border:1px solid var(--paper-edge);border-radius:18px;box-shadow:var(--lift-2);overflow:hidden;counter-reset:step}
.step{flex:1;min-width:0;padding:28px 26px;position:relative;counter-increment:step;text-align:left}
.step + .step{border-left:2px dashed var(--paper-edge)}
/* edge notches at the perforation (punch-out look) */
.step + .step::before,.step + .step::after{content:"";position:absolute;left:-9px;width:16px;height:16px;border-radius:50%;background:var(--paper);z-index:1}
.step + .step::before{top:-9px}
.step + .step::after{bottom:-9px}
/* big faded seat number */
.step .num{position:absolute;top:18px;right:20px;font-family:var(--display);font-weight:800;font-size:42px;line-height:1;letter-spacing:-.03em;color:rgba(21,94,122,.12)}
/* "STEP" label (kept terracotta); the .rule divider is retired in this layout */
.step .rule{display:none}
.step h3{font-size:19px;margin:0 0 4px}
.step h3::before{content:"STEP";display:block;font-family:var(--body);font-weight:800;font-size:11px;letter-spacing:.14em;color:var(--cta);margin:0 0 8px}
.step p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55;max-width:30ch}
/* interactive on hover — site-wide (matches the tour-packages "How it works" tiles) */
.step{transition:background .2s ease}
.step .num{transition:transform .18s ease,color .18s ease}
.step h3{transition:color .18s ease}
.step:hover{background:rgba(46,154,140,.07)}
.step:hover .num{transform:scale(1.08);color:var(--stamp)}
.step:hover h3{color:var(--cta)}
@media (prefers-reduced-motion:reduce){.step,.step .num,.step h3{transition:none!important}.step:hover .num{transform:none}}
/* CTA band — gradient-mesh on ink, centred (matches the footer CTA for site-wide consistency) */
.cta-band{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:
    radial-gradient(620px 260px at 16% 0%,rgba(21,94,122,.5),transparent 60%),
    radial-gradient(580px 260px at 92% 100%,rgba(46,154,140,.5),transparent 60%),
    var(--navy)}
.cta-band .rule{height:3px;width:80px;background:var(--cta);margin:0 auto 20px}
.cta-band h2{color:#fff;font-size:clamp(28px,3.4vw,40px)}
.cta-band p{margin-left:auto;margin-right:auto}
.cta-band .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;justify-content:center}
/* footer */
footer{background:var(--navy);color:#aab0b5;font-size:14px;padding:36px 0 0}
footer .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-bottom:24px}
footer a{color:#d3d7da}
footer strong{color:#fff}
/* FAQ accordion — shared so compare.html (and any page) renders styled, not raw <details> */
.faqs{display:grid;gap:12px}
.faq{background:var(--white);border:1px solid var(--paper-edge);border-radius:14px}
.faq summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);color:var(--cta);font-size:20px;line-height:1}
.faq[open] summary::after{content:"\2013"}
.faq .a{padding:0 18px 16px;color:var(--muted)}
/* checker card (hero) — white card, soft shadow, rounded */
.checker{background:var(--white);border:1px solid var(--paper-edge);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.checker .stub{background:var(--stamp);color:#fff;padding:14px 20px;font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.1em;display:flex;justify-content:space-between}
.checker .cbody{padding:22px 20px}
.checker label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:10px 0 4px}
.checker select,.checker input{width:100%;padding:12px;border:1px solid var(--paper-edge);border-radius:12px;font:inherit;font-size:16px;background:var(--white);color:var(--ink)}
.checker .btn{width:100%;margin-top:16px}
/* destination-card helpers (rating chip + "from £X" price) */
.rating-chip{display:inline-flex;align-items:center;gap:5px;background:var(--white);color:var(--ink);font-weight:700;font-size:13px;padding:5px 11px;border-radius:999px;box-shadow:0 4px 12px -6px rgba(40,50,70,.3)}
.rating-chip::before{content:"\2605";color:var(--gold)}
.price-from{color:#0F4A61;font-weight:800}
/* motion */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (max-width:860px){
  .hero-grid,.steps,.dests,.ticks{grid-template-columns:1fr!important}
  /* "How it works" is a flex ticket-strip on desktop (grid-template does nothing to it):
     stack it to one card per row on mobile, flipping the dashed perforation seam + notches
     from the left edge to the top edge so it still reads as a torn ticket stub. */
  .steps{flex-direction:column}
  .step{flex:none;width:100%}
  .step + .step{border-left:0;border-top:2px dashed var(--paper-edge)}
  .step + .step::before{left:-9px;right:auto;top:-9px;bottom:auto}
  .step + .step::after{left:auto;right:-9px;top:-9px;bottom:auto}
  /* keep nav reachable on mobile (no hamburger needed): wrap under the brand */
  .site-head .wrap{height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;gap:6px}
  .nav{display:flex;flex-wrap:wrap;width:100%;margin:0}
  .nav a{margin:0 14px 0 0;font-size:14px}
  section{padding:52px 0}
}
/* Trust bar (.tbar-f) → auto-running carousel on mobile, SITE-WIDE. One item per view,
   full-bleed, snap-centred, no scrollbar. `section.tbar-f` specificity (0,1,1) outranks the
   per-page `.tbar-f .row` base rules (0,2,0? no — .row is 0,2,0) so we qualify the row too.
   The auto-advance JS lives in partials/site-scripts (runs on every layout page). */
@media (max-width:760px){
  section.tbar-f > .wrap > .row{flex-wrap:nowrap;justify-content:flex-start;gap:0;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:14px 0;margin:0 -20px;scrollbar-width:none}
  section.tbar-f > .wrap > .row::-webkit-scrollbar{display:none}
  section.tbar-f > .wrap > .row > .ti{flex:0 0 100%;justify-content:center;scroll-snap-align:center}
}
/* ICO registration cell in the stat band (.tbar-b) — watermark shield behind the reference,
   links the public ICO register. Blends into the number-over-label rhythm of the other cells. */
.tbar-b .tb-ico{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:inherit}
.tbar-b .tb-ico-w{position:relative;display:inline-flex;align-items:center;justify-content:center}
.tbar-b .tb-ico-ghost{position:absolute;inset:0;display:grid;place-items:center;color:rgba(21,94,122,.10);z-index:0}
.tbar-b .tb-ico-ghost svg{width:46px;height:46px}
.tbar-b .tb-ico-r{position:relative;z-index:1;letter-spacing:.01em}
.tbar-b .tb-ico .tb-ico-v{color:var(--cta);font-weight:800}
.tbar-b .tb-ico:hover .tb-ico-r{color:#0f4a61}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}

/* Shared components consolidated from page-scoped styles (silo QA fix) */
.lede{font-size:19px;max-width:46ch;color:#3a4248}
.rlink{font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.04em}
.dhero{background:var(--navy);color:#eef0f1;padding:64px 0 0;position:relative;overflow:hidden}
.dhero h1{color:#fff}
.dhero .eyebrow{color:#A9CCDA}
.dhero p.lede{color:#d3d7da}
.skyband{margin-top:36px;background:var(--stamp);border-radius:16px;overflow:hidden;max-height:140px}
.skyband svg{width:100%;height:120px;display:block}

/* ============================================================================
   PREMIUM LAYER (site-wide "$10K" polish). Appended so it cascades over the
   base system without disturbing it. Adds: elevation tokens, reusable hero
   patterns (.mesh-hero / .photo-hero), .glass-chip accent, richer type scale,
   section rhythm, tasteful motion. Spec: docs/superpowers/specs/2026-06-17-premium-sitewide-design.md
   ============================================================================ */
:root{
  /* elevation scale — soft, deep, layered */
  --lift-1:0 18px 44px -26px rgba(40,50,70,.30);
  --lift-2:0 26px 56px -28px rgba(40,50,70,.40);
  --lift-3:0 36px 70px -30px rgba(40,50,70,.50);
  /* gradient-mesh ink tints for the hero backdrops */
  --mesh-terra:rgba(21,94,122,.16); --mesh-sage:rgba(46,154,140,.20);
  --paper-hi:#FBFBFC;
}
/* richer display scale + tracking */
h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.025em}
/* cards: rounder + layered shadow + smooth hover */
.pass,.checker,.faq{border-radius:18px}
.pass{box-shadow:var(--lift-1);transition:transform .3s ease,box-shadow .3s ease}
.pass:hover{transform:translateY(-4px);box-shadow:var(--lift-2)}
.checker{box-shadow:var(--lift-2)}
/* more breathing room above section bodies */
.sec-head{margin-bottom:40px}

/* glass chip — floating price/rating/count accent (reused across heroes) */
.glass-chip{display:inline-block;background:var(--white);border:1px solid var(--paper-edge);border-radius:16px;
  padding:12px 16px;box-shadow:var(--lift-3)}
.glass-chip .d{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink)}
.glass-chip .f{font-family:var(--display);font-weight:800;font-size:12.5px;color:var(--cta);margin-top:2px}

/* soft accent float (≤9px). Applied to floating photos/chips only. */
@keyframes float-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.float-soft{animation:float-soft 7.5s ease-in-out infinite}

/* ---- MESH HERO (functional pages) ----------------------------------------
   Terracotta→sage gradient-mesh on near-white. Left = copy, right = the page's
   primary card (form/checker/finder) floating. Pages opt in with .mesh-hero on
   their first <section>; put copy in .mh-copy and the card in .mh-card. */
.mesh-hero{position:relative;color:var(--ink);overflow:hidden;border-bottom:1px solid var(--paper-edge);
  background:
    radial-gradient(760px 380px at 12% -6%, var(--mesh-terra), transparent 60%),
    radial-gradient(720px 420px at 96% 108%, var(--mesh-sage), transparent 60%),
    linear-gradient(180deg,var(--paper-hi) 0%, var(--paper) 100%);}
.mesh-hero > .wrap{position:relative;z-index:2;padding:72px 0 84px}
.mesh-hero .eyebrow{color:var(--cta)}
.mesh-hero h1{color:var(--ink);margin:0 0 16px}
.mesh-hero .lede{color:var(--muted);font-size:19px;line-height:1.55;max-width:48ch;margin:0 0 6px}
.mh-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center}
.mh-card{position:relative}
.mh-card > *{position:relative;z-index:2}
.mesh-hero .hp-trust,.mesh-hero .mh-trust{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.mesh-hero .mh-trust span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border:1px solid var(--paper-edge);border-radius:999px;padding:8px 15px;font-size:13.5px;color:var(--ink)}
.mesh-hero .mh-trust span b{color:var(--cta);font-weight:700}
/* compact: centered single column, less padding, no card */
.mesh-hero--sm > .wrap{padding:52px 0 56px}
.mesh-hero--sm .mh-grid{grid-template-columns:1fr;max-width:62ch}

/* ---- PHOTO HERO (destination/money pages) --------------------------------
   Full-bleed destination photo + left-heavy dark scrim + white copy. Set the
   photo with inline style="--hero-img:url(...)" or a background on .photo-hero. */
.photo-hero{position:relative;min-height:440px;display:flex;align-items:center;overflow:hidden;
  background:#16222E center/cover no-repeat;background-image:var(--hero-img)}
.photo-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,16,14,.82) 0%,rgba(18,16,14,.5) 52%,rgba(18,16,14,.12) 100%)}
.photo-hero > .wrap{position:relative;z-index:2;padding:64px 0;color:#fff}
.photo-hero .eyebrow{color:var(--cta-soft,#A9CCDA)}
.photo-hero h1{color:#fff;max-width:18ch}
.photo-hero .lede{color:rgba(255,255,255,.88);max-width:46ch}
.photo-hero .glass-chip{margin-top:6px}
/* white focus ring already covers .photo-hero via the dark-surface group below */
.photo-hero a:focus-visible,.photo-hero .btn:focus-visible{outline:3px solid #fff;outline-offset:2px}

@media (max-width:860px){
  .mh-grid{grid-template-columns:1fr}
  .mesh-hero > .wrap{padding:48px 0 56px}
  .photo-hero{min-height:380px}
}
@media (prefers-reduced-motion:reduce){.float-soft{animation:none}}

/* ============================================================================
   MEGA-MENU NAV + CTA FOOTER (premium chrome). Native <details> dropdowns →
   keyboard-accessible + work with no JS; a small script adds outside-click /
   Esc close + single-open. Spec: 2026-06-17-premium-sitewide-design.md
   ============================================================================ */
.site-head{position:sticky;top:0}                 /* positioning context for the panels */
.site-head .wrap{position:relative}               /* deterministic anchor for the dropdown band */
.nav{display:flex;align-items:center;gap:22px}
/* Reset the base `.nav a{margin-left:22px}` so horizontal spacing is purely the flex gap
   (otherwise plain links get gap+margin = double the space of the <details> summaries). */
.nav a{margin:0}
/* Match link weight to the dropdown summaries (600) so the row reads as one set; buttons keep
   their own weight. Nudge the Track/Start buttons to the right as a grouped cluster. */
.nav > a:not(.btn){font-weight:600;font-size:15px;line-height:1;display:inline-flex;align-items:center}
.nav .btn{margin:0}
/* Base `.nav a{color:var(--ink)}` outranks `.btn{color:#fff}` — restore button text colours with
   higher specificity so the solid CTA is white on terracotta and the ghost stays terracotta. */
.nav a.btn{color:#fff}
.nav a.btn--ghost{color:var(--cta)}
.nav > a.btn--ghost{margin-left:6px}              /* small separation before the action cluster */
.mlink{color:var(--ink);font-size:15px;font-weight:600;line-height:1;position:relative;padding:4px 0;cursor:pointer}
.mlink:hover{color:var(--cta)}
.mlink::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--cta);transition:right .25s ease}
.mlink:hover::after,.nav a:hover::after{right:0}
.nav > a{position:relative;padding:4px 0}
.nav > a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--cta);transition:right .25s ease}

/* dropdown trigger (details/summary). The trigger STRETCHES to the full header-row height so its
   bottom edge == the header's bottom edge; the panel then anchors to that bottom (top:100%) and
   always clears the bar — no first-row tuck-under, no ride-up. */
.mega{position:relative;display:inline-block}
.mega > summary{list-style:none;display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:15px;font-weight:600;cursor:pointer;padding:4px 0}
.mega > summary::-webkit-details-marker{display:none}
.mega > summary .ch{font-size:10px;color:var(--muted);transition:transform .2s ease}
.mega[open] > summary{color:var(--cta)}
.mega[open] > summary .ch{transform:rotate(180deg)}
/* Panel anchors to the trigger and hangs below the header bar (offset clears the 64px row),
   centred on the trigger and viewport-clamped so it never overflows. Opacity-only animation so
   the centring transform persists. */
.mega-panel{position:absolute;top:100%;margin-top:12px;left:50%;transform:translateX(-50%);width:min(760px,94vw);
  background:#fff;border:1px solid var(--paper-edge);border-radius:16px;box-shadow:var(--lift-3);z-index:70;
  animation:mega-in .16s ease}
@keyframes mega-in{from{opacity:0}to{opacity:1}}
/* Reset the inherited header rule `.site-head .wrap{height:64px;display:flex}` — the panel's inner
   .wrap is a descendant of .site-head, and that 64px flex row was vertically-centring (overflowing)
   the card grid. Force a normal block box. */
.mega-panel > .wrap{display:block;height:auto;max-width:none;margin:0;padding:18px}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mega-card{display:block;border:1px solid var(--paper-edge);border-radius:14px;overflow:hidden;background:#fff;
  transition:transform .25s ease,box-shadow .25s ease}
.mega-card:hover{transform:translateY(-3px);box-shadow:var(--lift-2)}
.mega-card .pic{height:74px;background:var(--stamp) center/cover no-repeat}
.mega-card .tx{padding:9px 12px}
.mega-card .tx b{font-size:14px;color:var(--ink);display:block}
.mega-card .tx span{font-size:12px;color:var(--cta);font-weight:800}
.mega-foot{margin-top:14px;font-size:13.5px;font-weight:700}
.mega-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mega-item{display:block;border:1px solid var(--paper-edge);border-radius:14px;padding:14px 16px;background:#fff;transition:transform .25s ease,box-shadow .25s ease}
.mega-item:hover{transform:translateY(-3px);box-shadow:var(--lift-2)}
.mega-item b{display:block;font-size:15px;color:var(--ink)}
.mega-item span{display:block;font-size:13px;color:var(--muted);margin-top:3px;font-weight:500}
/* grouped Destinations dropdown: Popular money pages (left) + Europe regions (right) */
.mega-panel--wide{width:min(880px,94vw)}
.mega-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:26px}
.mega-colhead{font:800 11px var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.mega-eu{border-left:1px solid var(--paper-edge);padding-left:26px}
.mega-euhead{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.mega-euhead .mega-colhead{margin:0}
.mega-pill{font:800 10px var(--display);color:var(--stamp-text);background:#e7f3ef;border-radius:999px;padding:3px 9px}
.mega-reg{display:flex;flex-direction:column;gap:8px}
.mega-reg a{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--paper-edge);border-radius:11px;padding:11px 13px;text-decoration:none;background:#fff;transition:transform .2s ease,border-color .2s ease}
.mega-reg a:hover{transform:translateX(3px);border-color:var(--soft)}
.mega-reg b{font-size:13.5px;color:var(--ink)}
.mega-reg .c{font-size:11px;color:var(--muted);font-weight:700}
.mega-reg .hub{background:linear-gradient(180deg,#eef6f8,#fff);border-color:var(--soft)}
.mega-reg .hub b{color:var(--cta)}

/* hamburger (mobile only) */
.nav-toggle{display:none;background:none;border:1px solid var(--paper-edge);border-radius:10px;padding:8px 10px;cursor:pointer;font-size:18px;line-height:1;color:var(--ink)}

@media (max-width:860px){
  .nav-toggle{display:inline-flex;align-items:center}
  .site-head .wrap{position:relative}
  .nav{display:none;flex-direction:column;align-items:flex-start;width:100%;gap:6px;padding:10px 0 14px}
  .nav.open{display:flex}
  .mega{width:100%}
  .mega-panel{position:static;transform:none;width:auto;box-shadow:none;border:0;border-radius:0;animation:none}
  .mega-panel .wrap{padding:8px 0 4px}
  .mega-panel--wide{width:auto}
  .mega-grid,.mega-list{grid-template-columns:1fr 1fr}
  .mega-cols{grid-template-columns:1fr;gap:18px}
  .mega-eu{border-left:0;padding-left:0;border-top:1px solid var(--paper-edge);padding-top:14px}
  .nav > a.btn--ghost{margin-left:0}              /* no indent in the stacked mobile menu */
  .nav .btn{margin-top:4px}
}

/* ---- CTA-topped footer (Footer 2) ---------------------------------------- */
.ft-cta{position:relative;color:#fff;text-align:center;padding:56px 0;overflow:hidden;
  background:
    radial-gradient(620px 260px at 16% 0%,rgba(21,94,122,.5),transparent 60%),
    radial-gradient(580px 260px at 92% 100%,rgba(46,154,140,.5),transparent 60%),
    var(--ink)}
.ft-cta h2{color:#fff;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.02em;margin:0 0 10px}
.ft-cta p{color:rgba(255,255,255,.84);margin:0 0 20px;max-width:48ch;margin-left:auto;margin-right:auto}
.ft-cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ft-cta .btn--glass{background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.32);color:#fff}
.ft-cta .btn--glass:hover{background:rgba(255,255,255,.22)}
.ft-main{background:#1b2024}
.ft-main .cols{grid-template-columns:2.4fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);display:grid;gap:40px;padding:40px 0 26px;align-items:start}
.ft-cap{display:flex;gap:8px;margin-top:12px;max-width:340px}
.ft-cap input[type=email]{flex:1;padding:11px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14px}
.ft-cap input::placeholder{color:#8d949a}
.ft-consent{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:12px;color:#9aa0a5;max-width:480px}
.ft-consent input{margin-top:2px}
.ft-consent a{color:#d3d7da;text-decoration:underline}
.ft-ok{margin-top:10px;font-size:13px;color:#9fe0c0;font-weight:700}
.ft-err{margin-top:8px;font-size:12.5px;color:#f0b3a0}
.ft-bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#8d949a}
.ft-bottom a{color:#aab0b5}
/* Column link lists stack one-per-line (markup has no <br>); the email button + the consent
   privacy link must stay inline so they don't break the form layout. */
.ft-main .cols a{display:block;padding:4px 0}
.ft-main .cols .ft-cap a{display:inline-block;padding:11px 16px}
.ft-main .cols .ft-consent a{display:inline;padding:0}
@media (max-width:860px){.ft-main .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 30px}}
@media (max-width:560px){.ft-main .cols{grid-template-columns:1fr;gap:26px}.ft-cap{max-width:none}}

/* ── Signature: travel-document system ───────────────────────────── */
/* Passport-stamp tick — verified/checked states. */
.stamp{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  border:2.5px solid var(--stamp);color:var(--stamp-text);transform:rotate(-12deg);
  font-family:var(--body);font-size:9px;font-weight:700;letter-spacing:.04em;text-align:center;line-height:1.1}
/* MRZ micro-label — refs, dates (machine-readable flavour). NB: `.mrz` is already a
   visually-hidden-label utility elsewhere, so the signature label uses `.doc-mrz`. */
.doc-mrz{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#6b7783;
  font-variant-numeric:tabular-nums;text-transform:uppercase}
/* Tabular numerals for prices/fees so columns don't jitter. */
.tnum{font-variant-numeric:tabular-nums}

/* ICO data-protection badge (partials/ico-badge). Global so it renders correctly
   regardless of include order or CMS caching — previously pushed per-include. */
.ico-badge{display:inline-flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--paper-edge);
  border-radius:12px;padding:10px 14px;text-decoration:none;color:var(--ink);box-shadow:0 10px 24px -18px rgba(22,34,46,.6);transition:border-color .18s ease}
.ico-badge:hover{border-color:var(--soft)}
.ico-badge .ico-sh{width:32px;height:32px;flex:none;border-radius:9px;background:rgba(21,94,122,.10);display:grid;place-items:center;color:var(--cta)}
.ico-badge .ico-sh svg{width:19px;height:19px}
.ico-badge .ico-t{display:flex;flex-direction:column;line-height:1.2}
.ico-badge .ico-k{font:800 13px/1.2 var(--display);color:var(--ink)}
.ico-badge .ico-k b{color:var(--cta)}
.ico-badge .ico-s{font-size:11.5px;color:var(--muted);margin-top:2px}
.ico-badge .ico-s .ico-v{color:var(--cta);font-weight:700}
.ico-badge.on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.ico-badge.on-dark .ico-sh{background:rgba(143,185,198,.16);color:var(--soft)}
.ico-badge.on-dark .ico-k{color:#fff}
.ico-badge.on-dark .ico-k b{color:var(--soft)}
.ico-badge.on-dark .ico-s{color:rgba(255,255,255,.6)}
.ico-badge.on-dark .ico-s .ico-v{color:var(--soft)}
.ico-chip{display:inline-flex;align-items:center;gap:8px;font:600 13.5px var(--display);color:inherit;text-decoration:none}
.ico-chip svg{width:17px;height:17px;flex:none;color:var(--cta)}
.ico-chip b{color:var(--cta)}

/* Tour-packages hero eligibility form: full-width (edge-to-edge) on mobile. Lives here in
   global CSS (not the tr- partial) because /tour-packages is CMS-cached and template edits
   don't re-render; ukv.css loads fresh and applies to the existing .tr-form markup. */
@media (max-width:900px){
  .tr-hero .tr-form{margin-left:-24px;margin-right:-24px;border-radius:0;border-left:0;border-right:0}
}