/* =====================================================================
   IFFINA+ powered by imm cologne — "Getting There" page
   assets/css/getting-there.css

   Palette & type follow the live IFFINA design system (assets/css/add.css).
   Variable names are identical to the main site, so if this file is loaded
   alongside add.css the values simply match — nothing is overridden.
   ===================================================================== */

:root {
  --black1:  #000;
  --black2:  #161518;
  --white1:  #fff;
  --brown1:  #3f2924;
  --blue1:   #aae8f3;
  --blue2:   #8FDFB8;
  --blue3:   #90d9b6;
  --orange1: #d2542c;
  --yellow1: #eeee22;
  --yellow2: #FFFF1A;
  --green1:  #cac8a8;
  --green2:  #405E4E;
  --red1:    #D90A2C;
  --grey1:   #656466;
  --grey3:   #f5f5f5;
  --grey4:   #f0f0f0;
  --grey5:   #5b5a5c;
  --grey6:   #E6E6E6;
  --cream1:  #efeee5;

  /* 'ave-b' / 'inter-*' are the real IFFINA faces; the Google fallbacks keep
     this page on-brand when it is opened standalone. */
  --font-display: 'ave-b', 'Barlow Condensed', 'Avenir Next Condensed',
                  'Helvetica Neue', Arial Narrow, sans-serif;
  --font-body:    'inter-r', 'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Two knobs for integration: --nav-h is the navbar at rest, --nav-h-sm after
     it shrinks on scroll. #section-nav sticks at --nav-h-sm, so if the site
     navbar is a fixed height, set both to that value and nothing else changes. */
  --nav-h: 88px;
  --nav-h-sm: 68px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------- reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--brown1);
  background: var(--white1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.05; }
p { margin: 0 0 16px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--orange1); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--yellow1); color: var(--brown1);
  padding: 12px 20px; font-family: var(--font-display); text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* --------------------------- type helpers --------------------------- */
.tf-80, .tf-56, .tf-40, .tf-28, .tf-24 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .01em;
}
.tf-80 { font-size: clamp(52px, 9vw, 118px); line-height: .92; }
.tf-56 { font-size: clamp(38px, 6vw, 68px);  line-height: .98; }
.tf-40 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; }
.tf-28 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; }
.tf-24 { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.15; }

.desc-20 { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }
.desc-18 { font-size: 16px; line-height: 1.6; }
.lead    { max-width: 62ch; }
.c-brown1 { color: var(--brown1); }
.mt24 { margin-top: 24px; }

/* ----------------------------- layout ------------------------------- */
.container { width: 80%; max-width: 1441px; margin: 0 auto; }

.sec { padding: clamp(64px, 9vw, 128px) 0; }

/* A short rule above each section heading replaces the old numbered
   eyebrow — it keeps the section rhythm without the extra wording. */
.sec-head, .sec-split .sec-left { position: relative; padding-top: 26px; }
.sec-head::before, .sec-split .sec-left::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 56px; height: 4px; background: var(--orange1);
}
.sec-head { max-width: 900px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.sec-head .lead { margin-top: 20px; }

.sec-green { background: var(--green2); color: var(--white1); }
.sec-brown { background: var(--brown1); color: var(--blue1); }
.sec-cream { background: var(--cream1); }
.sec-green .sec-head::before,
.sec-brown .sec-head::before { background: var(--yellow1); }

.sec-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 5vw, 90px); align-items: start; }
.sec-split .sec-right { padding-top: 26px; } /* keeps both columns on the same top line */

/* ------------------------------ icons ------------------------------- */
/* Inline masked SVG so the page ships with zero external image requests. */
.ico {
  width: 22px; height: 22px; flex: 0 0 22px; display: inline-block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.ico-lg { width: 44px; height: 44px; flex-basis: 44px; }

/* Without mask support the icons would paint as solid coloured squares.
   Hide them instead — every one of them sits next to a real text label. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .ico, .ico-arrow { display: none !important; }
}

.ico-pin     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.ico-plane   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5a2.1 2.1 0 0 0-3-3L13 8 4.8 6.2a.5.5 0 0 0-.5.8l3.2 3.9-2 2H3l-1 1 3 1 1 3 1-1v-2.5l2-2 3.9 3.2a.5.5 0 0 0 .8-.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5a2.1 2.1 0 0 0-3-3L13 8 4.8 6.2a.5.5 0 0 0-.5.8l3.2 3.9-2 2H3l-1 1 3 1 1 3 1-1v-2.5l2-2 3.9 3.2a.5.5 0 0 0 .8-.5Z'/%3E%3C/svg%3E"); }
.ico-train   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='13' rx='2'/%3E%3Cpath d='M4 10h16M8 19l-2 3M16 19l2 3'/%3E%3Ccircle cx='8.5' cy='13' r='.6'/%3E%3Ccircle cx='15.5' cy='13' r='.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='13' rx='2'/%3E%3Cpath d='M4 10h16M8 19l-2 3M16 19l2 3'/%3E%3Ccircle cx='8.5' cy='13' r='.6'/%3E%3Ccircle cx='15.5' cy='13' r='.6'/%3E%3C/svg%3E"); }
.ico-metro   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m7 16 2-8 3 5 3-5 2 8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m7 16 2-8 3 5 3-5 2 8'/%3E%3C/svg%3E"); }
.ico-bus     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M3 11h18M7 21v-2M17 21v-2'/%3E%3Ccircle cx='7.5' cy='14.5' r='.7'/%3E%3Ccircle cx='16.5' cy='14.5' r='.7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M3 11h18M7 21v-2M17 21v-2'/%3E%3Ccircle cx='7.5' cy='14.5' r='.7'/%3E%3Ccircle cx='16.5' cy='14.5' r='.7'/%3E%3C/svg%3E"); }
.ico-shuttle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16V9a2 2 0 0 1 2-2h9l5 4h2a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M2 16h2M10 16h4M20 16h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16V9a2 2 0 0 1 2-2h9l5 4h2a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M2 16h2M10 16h4M20 16h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }
.ico-car     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14M3 13l2-6a2 2 0 0 1 2-1.4h10A2 2 0 0 1 19 7l2 6v4H3Z'/%3E%3Ccircle cx='7.5' cy='17' r='1.6'/%3E%3Ccircle cx='16.5' cy='17' r='1.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14M3 13l2-6a2 2 0 0 1 2-1.4h10A2 2 0 0 1 19 7l2 6v4H3Z'/%3E%3Ccircle cx='7.5' cy='17' r='1.6'/%3E%3Ccircle cx='16.5' cy='17' r='1.6'/%3E%3C/svg%3E"); }
.ico-park    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M9.5 17V7h3.2a3 3 0 0 1 0 6H9.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M9.5 17V7h3.2a3 3 0 0 1 0 6H9.5'/%3E%3C/svg%3E"); }
.ico-globe   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18Z'/%3E%3C/svg%3E"); }
.ico-grid    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E"); }
.ico-spark   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ico-copy    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E"); }
.ico-check   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E"); }

/* IFFINA's angle-right chevron, redrawn inline. */
.ico-arrow {
  width: 14px; height: 14px; flex: 0 0 14px; display: inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .2s var(--ease);
}

/* ----------------------------- buttons ------------------------------ */
.btn-t1 {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 260px; height: 50px; padding: 0 24px;
  font-family: var(--font-display); font-size: 20px; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-t1:hover .ico-arrow { transform: translateX(4px); }

.btn-yellow  { background: var(--yellow1); color: var(--brown1); }
.btn-yellow:hover  { background: var(--white1); }
.btn-blue    { background: var(--blue1);   color: var(--brown1); }
.btn-blue:hover    { background: var(--yellow1); }
.btn-brown   { background: var(--brown1);  color: var(--yellow1); }
.btn-brown:hover   { background: var(--orange1); color: var(--white1); }
.btn-outline { background: transparent; color: var(--yellow1); border-color: var(--yellow1); }
.btn-outline:hover { background: var(--yellow1); color: var(--brown1); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border: 2px solid currentColor;
  font-family: var(--font-display); font-size: 17px; text-transform: uppercase;
  text-decoration: none; line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.btn-ghost:hover { background: currentColor; }
.btn-ghost:hover .ico { background: var(--white1); }
.btn-ghost:hover span { color: var(--white1); }
.sec-green .btn-ghost:hover span, .sec-brown .btn-ghost:hover span { color: var(--brown1); }
.sec-green .btn-ghost:hover .ico, .sec-brown .btn-ghost:hover .ico { background: var(--brown1); }
.btn-ghost.is-done { background: var(--green2); border-color: var(--green2); }
.btn-ghost.is-done span, .btn-ghost.is-done:hover span { color: var(--white1); }
.btn-ghost.is-done .ico, .btn-ghost.is-done:hover .ico { background: var(--white1); }

/* ------------------------------- nav -------------------------------- */
nav#site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 101;
  background: var(--brown1);
  transition: height .25s var(--ease), box-shadow .25s var(--ease);
}
#nav-inner {
  width: 96%; max-width: 1800px; margin: 0 auto;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  transition: height .25s var(--ease);
}
nav#site-nav.is-scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.28); }
nav#site-nav.is-scrolled #nav-inner { height: var(--nav-h-sm); }
nav#site-nav.is-scrolled .nav-logo { width: 200px; }
nav#site-nav.is-scrolled .nav-cta a { height: var(--nav-h-sm); }

.nav-logo { width: 240px; transition: width .25s var(--ease); }
.nav-in-right { display: flex; align-items: center; justify-content: flex-end; height: 100%; }

.nav-link > ul { display: flex; align-items: stretch; height: var(--nav-h); }
nav#site-nav.is-scrolled .nav-link > ul { height: var(--nav-h-sm); }
.nav-link .link-btn {
  display: flex; align-items: center; height: 100%;
  padding: 0 22px;
  color: var(--blue1); font-family: var(--font-display);
  font-size: 22px; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-link .link-btn:hover,
.nav-link .link-btn.active { background: var(--yellow1); color: var(--brown1); }

.has-sub { position: relative; }
.has-sub .sub-wrapper {
  display: none; position: absolute; top: 100%; left: 0; min-width: 240px;
  font-family: var(--font-display); text-transform: uppercase; font-size: 18px;
}
.has-sub:hover .sub-wrapper,
.has-sub.is-open .sub-wrapper { display: block; }
.has-sub .sub-wrapper a,
.has-sub .sub-wrapper .is-current {
  display: block; padding: 12px 16px;
  background: var(--brown1); color: var(--blue1); text-decoration: none;
  border-top: 1px solid rgba(170,232,243,.16);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.has-sub .sub-wrapper a:hover { background: var(--yellow1); color: var(--brown1); }
/* The entry for the page you are already on: same look, not clickable. */
.has-sub .sub-wrapper .is-current { color: var(--yellow1); cursor: default; }

.nav-cta a {
  display: flex; align-items: center; justify-content: center;
  height: var(--nav-h); min-width: 152px; padding: 0 22px;
  background: var(--orange1); color: var(--blue1);
  font-family: var(--font-display); font-size: 22px;
  text-transform: uppercase; text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease), height .25s var(--ease);
}
.nav-cta a:hover { background: var(--yellow1); color: var(--brown1); }

#mobile-nav, #mobile-close { display: none; }
#mobile-nav-btn { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
#mobile-nav-btn span { display: block; width: 30px; height: 3px; background: var(--blue1); }
.menu-toggle-btn { position: relative; width: 34px; height: 34px; }
.menu-toggle-btn span {
  position: absolute; left: 3px; top: 16px; width: 28px; height: 3px; background: var(--blue1);
}
.menu-toggle-btn span:first-child { transform: rotate(45deg); }
.menu-toggle-btn span:last-child  { transform: rotate(-45deg); }

#nav-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(22,21,24,.6); border: 0;
}

/* ------------------------------ banner ------------------------------ */
#banner {
  position: relative;
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 110px)) 0 0;
  background: var(--brown1);
  color: var(--blue1);
  overflow: hidden;
}
#banner::before {
  content: ""; position: absolute; right: -14vw; top: -12vw;
  width: 58vw; height: 58vw; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(210,84,44,.55), rgba(63,41,36,0) 62%);
  pointer-events: none;
}
#banner .container { position: relative; z-index: 1; padding-bottom: clamp(48px, 6vw, 84px); }

#banner h1 { margin: 0; color: var(--white1); }
#banner h1 .hl { color: var(--yellow1); }
/* The "+" is a raised glyph in the IFFINA lockup, not a maths sign — pull it
   back out of <sup>'s default shrink so it reads as part of the wordmark. */
#banner h1 .hl sup { font-size: .62em; top: -.34em; position: relative; line-height: 0; }
/* Third line of the title: the brand tail, set well below the wordmark. */
.bt-sub {
  display: block; margin-top: .18em;
  font-size: clamp(20px, 2.9vw, 38px); line-height: 1.1;
  letter-spacing: .01em; color: rgba(255,255,255,.82);
}

.banner-lead { margin-top: 28px; max-width: 640px; color: rgba(255,255,255,.9); }
.banner-lead strong { color: var(--yellow1); }

.banner-meta {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 40px; border-top: 1px solid rgba(170,232,243,.3);
}
.banner-meta li {
  flex: 1 1 200px; padding: 20px 24px 20px 0;
  border-right: 1px solid rgba(170,232,243,.22);
}
.banner-meta li:last-child { border-right: 0; }
.banner-meta li + li { padding-left: 24px; }
.bm-label {
  display: block; font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange1); margin-bottom: 6px;
  font-family: var(--font-display);
}
.bm-value {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(20px, 1.8vw, 26px); color: var(--white1); line-height: 1.1;
}

.banner-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* --------------------------- section nav ---------------------------- */
#section-nav {
  position: sticky; top: var(--nav-h-sm); z-index: 60;
  background: var(--white1);
  border-bottom: 1px solid var(--grey6);
}
#section-nav ul {
  display: flex; gap: 4px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
#section-nav ul::-webkit-scrollbar { display: none; }
#section-nav a {
  display: block; padding: 18px 20px; white-space: nowrap;
  font-family: var(--font-display); text-transform: uppercase; font-size: 18px;
  color: var(--brown1); text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
#section-nav a:hover { color: var(--orange1); }
#section-nav a.is-active { color: var(--orange1); border-bottom-color: var(--orange1); }

/* --------------------------- why jakarta ---------------------------- */
/* Two columns keeps the four points as a balanced 2x2 block. */
.pill-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 32px;
}
.pill {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: var(--cream1);
  border-left: 4px solid var(--orange1);
  font-family: var(--font-display); text-transform: uppercase; font-size: 18px;
}
.pill .ico { color: var(--orange1); }

/* ------------------------------ venue ------------------------------- */
.venue-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.venue-card {
  padding: 32px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.2);
}
.venue-card h3 { margin-bottom: 18px; color: var(--yellow1); }
.venue-card-accent { background: var(--green1); color: var(--brown1); border-color: var(--green1); }
.venue-card-accent h3 { color: var(--brown1); }
.venue-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.spec { margin: 0; }
.spec > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.2);
}
.spec > div:last-child { border-bottom: 0; }
.spec dt { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.spec dd {
  margin: 0; text-align: right;
  font-family: var(--font-display); text-transform: uppercase; font-size: 20px;
}

/* ------------------------------- tabs ------------------------------- */
.tab-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  border-bottom: 2px solid var(--grey6); margin-bottom: 0;
}
.tab {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 16px 24px; margin-bottom: -2px;
  font-family: var(--font-display); text-transform: uppercase; font-size: 20px;
  white-space: nowrap;
  color: var(--grey5); border-bottom: 4px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.tab:hover { color: var(--brown1); background: var(--grey3); }
.tab[aria-selected="true"] { color: var(--brown1); border-bottom-color: var(--orange1); }

.tab-panel { padding: clamp(28px, 4vw, 56px) 0 0; }
.tab-panel[hidden] { display: none; }

/* Scripting off: the tab buttons are inert, so every panel is stacked
   instead. That override now lives in getting-there-nojs.css, pulled in
   from <noscript>. It used to sit here as html:not(.js), but nothing ever
   set that class, so the rule matched with scripting on too and left all
   six panels expanded at once. */
.panel-in {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: clamp(24px, 4vw, 64px); align-items: start;
}
.panel-copy h3 { margin-bottom: 18px; color: var(--brown1); }
.panel-actions { margin-top: 24px; }

.ticks li { position: relative; padding-left: 32px; margin-bottom: 12px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 18px; height: 18px; background: var(--orange1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") no-repeat center / contain;
}

.panel-stat {
  background: var(--brown1); color: var(--yellow1);
  padding: 36px 32px; text-align: left;
}
.stat-num {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(44px, 5.5vw, 76px); line-height: .95;
}
.stat-label {
  margin-top: 12px; color: var(--blue1);
  font-size: 15px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5;
}

/* ------------------------- route detail blocks ---------------------- */
/* One block per leg of a journey: a heading, the copy, and the diagram
   lifted from "Route to NICE". The diagrams carry their own labels, so on
   narrow screens they scroll sideways (see the 768px block) instead of
   shrinking into an unreadable strip. */
.route-block { margin-top: clamp(32px, 4vw, 56px); }
.route-block > p:last-child { margin-bottom: 0; }

.route-title {
  position: relative; padding-left: 20px; margin-bottom: 16px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(19px, 1.7vw, 23px); line-height: 1.15; color: var(--brown1);
}
.route-title::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 5px; background: var(--orange1);
}

.route-fig { margin: 20px 0 0; }
.route-fig img {
  width: 100%; background: var(--white1);
  border: 1px solid var(--grey6);
}
.route-fig figcaption {
  margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--grey5);
}
/* The two portrait shuttle timetables sit side by side while there is room. */
.route-pair {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 40px); margin-top: 20px;
}
.route-pair .route-fig { margin-top: 0; }

.route-split {
  display: grid; grid-template-columns: minmax(0, 240px) 1fr;
  gap: clamp(20px, 3vw, 40px); align-items: start;
}
.route-split .route-fig, .route-split .route-copy > p:last-child { margin-bottom: 0; }
.route-fig-narrow { margin-top: 0; }
.route-copy > :first-child { margin-top: 0; }

/* Departure times: label on the left, the times as chips on the right. */
.sched { margin: 20px 0 0; }
.sched li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 14px 0; border-bottom: 1px solid var(--grey6);
}
.sched li:first-child { border-top: 1px solid var(--grey6); }
.sched-dir {
  flex: 1 1 200px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 17px; letter-spacing: .04em; color: var(--brown1);
}
.sched-times { display: flex; flex-wrap: wrap; gap: 8px; }
.sched-times b {
  padding: 5px 12px; background: var(--cream1);
  font-family: var(--font-display); font-size: 17px; letter-spacing: .04em;
  color: var(--brown1); white-space: nowrap;
}

.lobby-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* ---------------------------- route video --------------------------- */
/* The clip is a 9:16 phone recording, so it gets a fixed-width column
   instead of the full content measure. */
.route-video {
  display: grid; grid-template-columns: minmax(0, 340px) 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(24px, 3vw, 40px);
  background: var(--cream1);
}
.rv-media { background: var(--brown1); }
.rv-media video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 9 / 16; background: var(--brown1);
}
.rv-copy h3 { margin-bottom: 16px; }
.rv-copy p:last-child { margin-bottom: 0; }
.rv-link { color: var(--orange1); text-decoration: underline; text-underline-offset: 3px; }
.rv-link:hover { color: var(--brown1); }

/* -------------------------------- map ------------------------------- */
.map-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 8;
  min-height: 340px; overflow: hidden; background: var(--black2);
  border: 1px solid rgba(170,232,243,.25);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; }
.map-grid {
  position: absolute; inset: 0; opacity: .35;
  background-image:
    linear-gradient(rgba(170,232,243,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170,232,243,.18) 1px, transparent 1px);
  background-size: 48px 48px;
}
.map-cta { position: relative; text-align: center; padding: 24px; }
.map-cta .ico { color: var(--yellow1); margin: 0 auto 16px; }
.map-cta .btn-t1 { margin: 8px auto 12px; }
.map-cta small { display: block; font-size: 13px; opacity: .65; }

/* ------------------------------ hotels ------------------------------ */
.hotel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.hotel-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px 28px 28px; background: var(--white1);
  border: 2px solid var(--brown1);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.hotel-card:hover { background: var(--brown1); color: var(--blue1); transform: translateY(-6px); }
.hotel-card h3 { flex: 1 1 auto; }

/* Equal-height cards. slick floats its slides, so each card was only as tall as
   its own name and link — five ragged bottoms in a row of bordered boxes. Laying
   the track out as a flex row stretches every card to the tallest of them.
   `display: flex` also has to be re-asserted on the card: slick's
   `.slick-initialized .slick-slide { display: block }` outranks .hotel-card's own
   `display: flex`, and without it the card's `gap` and `h3 { flex: 1 1 auto }`
   (which is what pins "View on map" to the bottom edge) never take effect. */
#hotel-slide .slick-track { display: flex; align-items: stretch; }
#hotel-slide .slick-slide { height: auto; flex: 0 0 auto; }
#hotel-slide .hotel-card  { display: flex; }

/* Logo plate. The five hotel logos ship at very different aspect ratios (301x167
   through 198x254), so a fixed-height plate with background-size: contain is what
   makes them all read as the same size — the artwork scales inside the plate
   instead of the plate scaling with the artwork. background-origin: content-box
   lets the padding inset the logo while the white ground still fills the plate.
   The ground stays white in both states on purpose: mercure-pik.jpg and
   swiss-bell.webp have no transparency, so a transparent plate would show a white
   block on only those two once the card flips to brown on hover. */
.hc-logo {
  flex: 0 0 auto;
  height: clamp(88px, 12vw, 120px);
  padding: 14px;
  background-color: var(--white1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-origin: content-box;
  background-clip: border-box;
}
.hc-logo--mercure-pik  { background-image: url("../../img/getting-there/hotel/mercure-pik.webp"); }
.hc-logo--swiss-pik    { background-image: url("../../img/getting-there/hotel/swiss-pik.webp"); }
.hc-logo--swiss-bell   { background-image: url("../../img/getting-there/hotel/swiss-bell.webp"); }
.hc-logo--golden-tulip { background-image: url("../../img/getting-there/hotel/golden-tulip.png"); }
.hc-logo--hotel-osaka  { background-image: url("../../img/getting-there/hotel/hotel-osaka.png"); }
.hc-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); text-transform: uppercase; font-size: 17px;
  text-decoration: none; color: var(--orange1);
}
.hotel-card:hover .hc-link { color: var(--yellow1); }
.hc-link:hover .ico-arrow { transform: translateX(4px); }

.hotel-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 40px; padding: 28px 32px; background: var(--green1);
}
.hotel-note p { margin: 0; max-width: 60ch; }

/* ------------------------------ contact ----------------------------- */
.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.contact-card {
  padding: 30px 28px; background: var(--white1);
  border-top: 5px solid var(--orange1);
}
.contact-card-wide { border-top-color: var(--green2); }
.cc-tag {
  font-family: var(--font-display); font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey5); margin-bottom: 10px;
}
.contact-card h3 { margin-bottom: 14px; }
.contact-card a { color: var(--brown1); text-decoration: underline; text-underline-offset: 3px; }
.contact-card a:hover { color: var(--orange1); }

/* -------------------------------- cta ------------------------------- */
#cta-band {
  background: var(--orange1); color: var(--white1);
  padding: clamp(56px, 8vw, 110px) 0; text-align: center;
}
#cta-band h2 { text-transform: uppercase; }
#cta-band p { margin: 22px 0 34px; font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
#cta-band .btn-t1 { margin: 0 auto; }

/* ------------------------------ footer ------------------------------ */
#site-footer { background: var(--brown1); color: var(--blue1); padding: clamp(56px, 7vw, 92px) 0 32px; }
.foot-top {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px;
}
.foot-title h4 {
  font-size: 20px; text-transform: uppercase; color: var(--yellow1); margin-bottom: 14px;
}
.foot-logo { width: 210px; background: var(--white1); padding: 14px; }
.foot-social a, .foot-links a, .foot-links .is-current {
  display: inline-block; padding: 5px 0; text-decoration: none;
  font-family: var(--font-display); text-transform: uppercase; font-size: 18px;
}
.foot-social a:hover, .foot-links a:hover { color: var(--yellow1); }
.foot-links .is-current { color: var(--yellow1); cursor: default; }
.footer-desc { font-size: 15px; line-height: 1.6; color: rgba(170,232,243,.85); }
.footer-desc strong { color: var(--white1); }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  padding-bottom: 24px; padding-top: 24px;
  border-top: 1px solid rgba(170,232,243,.25);
  font-size: 14px; color: rgba(170,232,243,.75);
}
.foot-bottom p { margin: 0; }

/* ----------------------------- to top ------------------------------- */
#to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--orange1); color: var(--white1);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
#to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#to-top:hover { background: var(--yellow1); color: var(--brown1); }
#to-top .ico-arrow { transform: rotate(-90deg); width: 18px; height: 18px; flex-basis: 18px; }
#to-top:hover .ico-arrow { transform: rotate(-90deg) translateX(3px); }

/* ---------------------------- reveal anim --------------------------- */
/* Scoped to .js so the content is never hidden when the script is missing,
   blocked, or still loading. Without this a 404 on the JS blanks the page. */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 1280px) {
  .container { width: 88%; }
  .nav-link .link-btn { padding: 0 15px; font-size: 20px; }
  .nav-cta a { font-size: 19px; min-width: 130px; }
  .nav-logo { width: 200px; }
}

@media (max-width: 1080px) {
  .sec-split { grid-template-columns: 1fr; }
  .sec-split .sec-right { padding-top: 0; } /* columns stack, no need to align tops */
  .panel-in { grid-template-columns: 1fr; }
  .panel-stat { display: flex; align-items: baseline; gap: 20px; padding: 26px 28px; }
  .panel-stat .stat-label { margin-top: 0; }
  .route-video { grid-template-columns: minmax(0, 300px) 1fr; }
  /* Two timetables side by side leave each one too narrow to pan comfortably;
     below this width they get the full measure instead. */
  .route-pair { grid-template-columns: 1fr; }

  /* The six tabs stop fitting on one line here. Wrapping would strand the last
     tab on a row of its own, below the strip's own underline, so scroll the
     strip instead — the same behaviour #section-nav already has. */
  .tab-list { flex-wrap: nowrap; overflow-x: auto; }
}

/* ---- tablet / mobile nav ---- */
@media (max-width: 992px) {
  :root { --nav-h: 68px; --nav-h-sm: 68px; }

  #mobile-nav { display: block; }
  #mobile-close { display: flex; align-items: center; justify-content: space-between; padding: 0 6vw 28px; }
  #mobile-close .mc-logo img { width: 180px; }

  .nav-in-right {
    position: fixed; top: 0; right: 0; z-index: 102;
    width: min(420px, 88vw); height: 100vh; height: 100dvh;
    background: var(--brown1);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 22px 0 40px;
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform .3s var(--ease);
  }
  body.nav-open .nav-in-right { transform: none; }

  .nav-link > ul { display: block; height: auto; }
  nav#site-nav.is-scrolled .nav-link > ul { height: auto; }
  .nav-link .link-btn {
    width: 100%; height: auto; padding: 16px 6vw;
    justify-content: space-between; font-size: 24px;
    border-bottom: 1px solid rgba(170,232,243,.16);
  }
  .has-sub .sub-parent::after {
    content: "+"; font-size: 26px; line-height: 1; transition: transform .2s var(--ease);
  }
  .has-sub.is-open .sub-parent::after { transform: rotate(45deg); }
  .has-sub .sub-wrapper { position: static; min-width: 0; display: none; }
  .has-sub:hover .sub-wrapper { display: none; }
  .has-sub.is-open .sub-wrapper { display: block; }
  .has-sub .sub-wrapper a { padding: 13px 6vw 13px calc(6vw + 18px); background: rgba(0,0,0,.22); }

  .nav-cta { padding: 24px 6vw 0; }
  .nav-cta a { height: 56px; width: 100%; }
  nav#site-nav.is-scrolled .nav-cta a { height: 56px; }

  #section-nav { top: var(--nav-h); }
  #section-nav a { padding: 14px 16px; font-size: 16px; }
}

@media (max-width: 768px) {
  .container { width: 90%; }

  #banner { padding-top: calc(var(--nav-h) + 48px); }
  .banner-meta li {
    flex: 1 1 100%; border-right: 0;
    border-bottom: 1px solid rgba(170,232,243,.22);
    padding: 16px 0;
  }
  .banner-meta li + li { padding-left: 0; }
  .banner-meta li:last-child { border-bottom: 0; }
  .banner-cta { flex-direction: column; align-items: stretch; }
  .btn-t1 { width: 100%; min-width: 0; }

  /* Touch widths: swiping the strip is the natural gesture, so the scrollbar
     is only noise here (it stays visible on the desktop widths above). */
  .tab-list { scrollbar-width: none; }
  .tab-list::-webkit-scrollbar { display: none; }
  .tab { padding: 14px 16px; font-size: 18px; }

  .venue-card { padding: 26px 22px; }
  .venue-actions .btn-ghost { width: 100%; justify-content: center; }

  .route-split { grid-template-columns: 1fr; }
  .lobby-links .btn-ghost { width: 100%; justify-content: center; }

  /* Every label inside these diagrams is baked into the artwork, so scaling
     them down to phone width would make them illegible. Scroll instead; the
     caption sticks to the left edge so it stays readable while you pan. */
  .route-fig { overflow-x: auto; }
  .route-fig img { min-width: 720px; max-width: none; }
  .route-fig figcaption { position: sticky; left: 0; max-width: 84vw; }

  /* The two-up airport-shuttle panel is small and self-contained — it reads
     fine at phone width, so it keeps its natural size. */
  .route-fig-narrow { max-width: 300px; overflow: visible; }
  .route-fig-narrow img { min-width: 0; max-width: 100%; }

  .route-video { grid-template-columns: 1fr; }
  .rv-media { max-width: 320px; margin: 0 auto; }

  .map-frame { aspect-ratio: 4 / 5; min-height: 0; }

  .hotel-note { flex-direction: column; align-items: stretch; }

  .foot-bottom { flex-direction: column; }
  #to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}

@media (max-width: 560px) {
  .pill-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .spec > div { flex-direction: column; gap: 2px; }
  .spec dd { text-align: left; }
  .pill { font-size: 16px; }
  .sched-dir, .sched-times b { font-size: 16px; }
}

/* ------------------------------- print ------------------------------ */
@media print {
  nav#site-nav, #section-nav, #to-top, #cta-band, #nav-scrim { display: none !important; }
  body { color: #000; }
  .sec, #banner { padding: 18px 0; background: #fff !important; color: #000 !important; }
  .tab-panel[hidden] { display: block !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .route-video { display: none !important; } /* a video is dead weight on paper */
  .route-fig { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}