/* ===========================================================================
   Empact Adventures: the nav
   The top bar (logo, Destinations menu, links, search, Book now), the docked bar that
   returns on scroll, the Destinations menu on wide screens and the full-screen trips menu
   on phones and tablets. Needs brand.css first, and nav.js with trips.js.
   =========================================================================== */
/* ---- nav ----
   A white bar floating over the page and pinned to the top, so search is always one tap away.
   Its rounded ends are the one deliberate exception to the square shape language, taken
   from the reference the owner chose. */
html{scroll-padding-top:calc(6.5rem + env(safe-area-inset-top, 0px));-webkit-tap-highlight-color:transparent}
/* the nav sits over the top of the hero and scrolls away with the page */
.nav{position:absolute;top:calc(var(--s3) + env(safe-area-inset-top, 0px));left:0;right:0;z-index:50;pointer-events:none}
/* once the nav has scrolled out of sight it comes back docked at the top, slimmer, with the same
   links; it goes again as soon as the original is back in view */
.nav.docked{position:fixed;top:calc(var(--s2) + env(safe-area-inset-top, 0px));animation:navdrop .34s var(--ease) both}
@keyframes navdrop{from{transform:translateY(-140%)}to{transform:none}}
.nav.docked a.brand,.nav.docked .in{min-height:3.25rem}
.nav.docked .in{padding-block:var(--s1)}
.nav.docked .logo{height:2.5rem}
/* a full-width strip behind the docked bar, so the page never shows between the logo and the links */
.nav.docked::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(-1 * (var(--s2) + env(safe-area-inset-top, 0px)));bottom:calc(-1 * var(--s2));
  background:rgba(245,242,235,.88);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--grid),0 10px 30px -18px rgba(20,24,28,.35)}
.nav.docked .in,.nav.docked a.brand{box-shadow:none}
html.panel-open .nav.docked{visibility:hidden}   /* a date or trip panel has the whole screen; the docked nav comes back when it closes */
/* the logo sits in its own white badge so it shows in its real colours on any background;
   the orange bar takes the rest of the row */
.navrow{display:flex;align-items:stretch;gap:var(--s3);max-width:calc(1280px - 2 * var(--s5));
  margin-left:max(var(--s3), env(safe-area-inset-left, 0px));margin-right:max(var(--s3), env(safe-area-inset-right, 0px))}
@media(min-width:1328px){.navrow{margin-inline:auto}}
.nav a.brand{pointer-events:auto;flex:none;display:grid;place-items:center;background:var(--paper);
  border-radius:999px;box-shadow:var(--shadow-pop);padding:var(--s1) var(--s5);border:0;min-height:4rem}
.nav .in{pointer-events:auto;flex:1 1 auto;min-width:0;max-width:none;margin:0;
  display:flex;align-items:center;gap:var(--s4);position:relative;
  background:var(--nav-bg);color:var(--paper);border-radius:999px;box-shadow:var(--shadow-pop);
  border:1px solid var(--nav-line);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  padding:var(--s2) var(--s2) var(--s2) var(--s4);min-height:4rem;
  transition:border-radius .2s var(--ease)}
.logo{height:3.25rem;width:auto;display:block}
.nav .in :focus-visible{outline-color:var(--orange)}
.nav ul{display:none;gap:var(--s1);list-style:none}
.nav a{color:var(--paper);text-decoration:none;font-weight:600;font-size:var(--t-sm);white-space:nowrap;
  padding-bottom:var(--s1);border-bottom:2px solid transparent;transition:border-color .25s var(--ease)}
.nav a:hover{border-color:var(--paper)}
/* bar links are soft pills: a light ink wash on hover, white when their trips menu is open */
.nav ul a{display:block;padding:var(--s2) var(--s3);border:0;border-radius:999px;
  transition:background .2s var(--ease)}
.nav ul a:hover{background:var(--paper-tint)}
.nav ul a[aria-expanded="true"]{background:var(--paper-tint);color:var(--orange)}
.nav ul a .chev{width:.85rem;height:.85rem;margin-left:.35rem;vertical-align:-1px;transform:rotate(90deg);transition:transform .2s var(--ease)}
.nav ul a[aria-expanded="true"] .chev{transform:rotate(-90deg)}
.nav .acts{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.nav a.pill,.pill{display:inline-flex;align-items:center;gap:var(--s2);border-radius:999px;
  background:var(--orange);color:var(--ink);font-family:Montserrat,sans-serif;font-weight:800;
  font-size:var(--t-sm);padding:var(--s3) var(--s5);text-decoration:none;
  white-space:nowrap;border-bottom:0;transition:background .2s var(--ease),color .2s var(--ease)}
.nav a.pill:hover,.pill:hover{background:var(--paper);color:var(--ink)}
/* menu button (phones and tablets) */
.menu,.srch-open{display:inline-grid;grid-auto-flow:column;align-items:center;gap:var(--s2);cursor:pointer;
  background:var(--paper-tint);color:var(--paper);border:0;border-radius:999px;min-height:2.75rem;padding:0 var(--s4);
  font-family:Montserrat,sans-serif;font-weight:800;font-size:var(--t-sm);transition:background .2s var(--ease)}
.srch-open{width:2.75rem;padding:0;place-content:center}
.menu:hover,.srch-open:hover{background:rgba(255,255,255,.22)}
.menu .bars{display:grid;gap:3px}
.menu .bars i{display:block;width:14px;height:2px;background:currentColor;transition:transform .25s var(--ease)}
.nav.open .menu .bars i:first-child{transform:translateY(2.5px) rotate(45deg)}
.nav.open .menu .bars i:last-child{transform:translateY(-2.5px) rotate(-45deg)}
@media(max-width:1179px){
  .nav.open ul{display:grid;gap:0;position:absolute;left:0;right:0;top:calc(100% + var(--s2));
    background:var(--nav-panel);border:1px solid var(--nav-line);animation:unroll .4s var(--ease);border-radius:var(--s5);box-shadow:var(--shadow-pop);padding:var(--s2) var(--s5) var(--s3)}
  .nav.open ul a{display:block;padding:var(--s3) 0;border-radius:0;border-bottom:1px solid var(--nav-line);font-size:var(--t-md);color:var(--paper)}
  .nav.open ul a:hover{background:none}
  .nav.open ul li:last-child a{border-bottom:0}
}
@media(min-width:1180px){.nav ul{display:flex}.menu{display:none}.nav .acts{margin-left:0}}
@media(max-width:440px){.menu .lbl{display:none}.menu{padding:0;width:2.75rem;place-content:center}.nav .pill{padding-inline:var(--s4)}.nav .pill svg{display:none}
  .nav .in{gap:var(--s2);padding-left:var(--s2)}.navrow{gap:var(--s2)}.nav a.brand{padding-inline:var(--s3)}.logo{height:2.6rem}}

/* ---- trips menu ----
   Opens from Destinations on wide screens. The bar and the panel read as one
   orange block: the bar's lower corners square off and the panel hangs from it. */
.mega{position:absolute;left:0;right:0;top:100%;z-index:1;display:grid;
  grid-template-columns:minmax(15rem,19rem) minmax(0,1fr);gap:var(--s7);
  background:var(--nav-panel);color:var(--paper);border-radius:0 0 2rem 2rem;box-shadow:var(--shadow-pop);
  border:1px solid var(--nav-line);border-top-color:var(--nav-line);padding:var(--s7) var(--s7) var(--s8) var(--s5);
  max-height:calc(100vh - 6rem);max-height:calc(100svh - 6rem);overflow-y:auto;overscroll-behavior:contain;
  /* opens by unrolling downwards from the bar (the clip leaves room for the shadow) */
  opacity:0;visibility:hidden;clip-path:inset(0 -3rem 100% -3rem);
  transition:clip-path .5s var(--ease),opacity .3s var(--ease),visibility 0s linear .5s}
.nav.mega-open .in{border-radius:2rem 2rem 0 0;background:var(--nav-panel)}
.nav.srch-on.srch-results .in{background:var(--nav-panel)}
.nav .in{transition:border-radius .3s var(--ease)}
.nav.mega-open .mega{opacity:1;visibility:visible;clip-path:inset(0 -3rem -4rem -3rem);
  transition:clip-path .5s var(--ease),opacity .3s var(--ease),visibility 0s}
/* contents rise in just after the panel starts to open */
.mega-cats,.mega-body{opacity:0;transform:translateY(10px);
  transition:opacity .35s var(--ease) .12s,transform .5s var(--ease) .12s}
.nav.mega-open .mega-cats,.nav.mega-open .mega-body{opacity:1;transform:none}
/* switching group: trips ripple in one after another */
.mega-body.swap .mega-promise,.mega-body.swap .mega-trips li,.mega-body.swap .mega-all{
  animation:tripIn .4s var(--ease) both;animation-delay:calc(var(--i, 0) * 22ms)}
@keyframes tripIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes unroll{from{opacity:0;clip-path:inset(0 -3rem 100% -3rem)}to{opacity:1;clip-path:inset(0 -3rem -4rem -3rem)}}
.mega-x{position:absolute;top:var(--s4);right:var(--s5);width:2.75rem;height:2.75rem;display:grid;place-items:center;
  background:none;border:0;border-radius:50%;color:var(--paper);cursor:pointer;transition:background .2s var(--ease)}
.mega-x:hover{background:var(--paper-tint)}
.mega-cats{display:grid;align-content:start;gap:var(--s1)}
.mega-cat{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);width:100%;transition:background .2s var(--ease),color .2s var(--ease);
  text-align:left;background:none;border:0;border-radius:999px;cursor:pointer;
  padding:var(--s3) var(--s4);font-family:Montserrat,sans-serif;font-weight:800;font-size:var(--t-base);color:var(--paper);
  transition:background .15s}
.mega-cat:hover{background:var(--paper-tint)}
.mega-cat[aria-selected="true"]{background:var(--orange);color:var(--ink)}
.mega-cat .n{font-weight:600;font-size:var(--t-xs);opacity:.75}
.mega-promise{font-size:var(--t-md);max-width:58ch;padding-right:var(--s8)}
/* .nav prefix: the bar's own "ul" rule (a flex row) must not reach this list */
.nav .mega-trips{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s6);margin:var(--s6) 0 0}
@media(min-width:1320px){.nav .mega-trips{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nav .mega-trips a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:0 0 2px;border-radius:0;
  white-space:normal;font-size:var(--t-base);font-weight:600;border-bottom:2px solid transparent}
.nav .mega-trips a:hover{background:none;border-color:var(--orange)}
.badge{font-size:var(--t-xs);font-weight:800;background:var(--orange);color:var(--ink);
  border-radius:999px;padding:2px var(--s2);white-space:nowrap}
.nav a.mega-all{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s7);
  font-weight:800;font-size:var(--t-base);border-bottom:2px solid var(--orange)}
.nav a.mega-all:hover{border-color:transparent}
@media(max-width:1179px){.mega{display:none}}

/* ---- search ----
   Like the trips menu: on wide screens the field grows across the bar (the links step aside)
   and results hang from the bar as the same orange panel. Phones get the field as a row
   under the bar and the same orange results. */
.srch{display:none;position:relative;align-items:center;flex:0 1 17rem;min-width:12rem;margin-left:auto}
@media(min-width:900px){.srch{display:flex}.srch-open{display:none}}
.srch-field{position:relative;width:100%}
.srch input{width:100%;min-height:2.75rem;border:1.5px solid transparent;border-radius:999px;background:var(--paper);
  padding:0 5.5rem 0 var(--s4);font-family:Montserrat,sans-serif;font-weight:500;font-size:max(16px, var(--t-sm));color:var(--ink);
  -webkit-appearance:none;appearance:none}
.srch input::placeholder{color:var(--muted)}
.srch input::-webkit-search-cancel-button{display:none}
.srch input:focus{outline:none;border-color:var(--ink)}
.srch-go,.srch-clear{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.srch-go{right:3px;width:2.4rem;height:2.4rem;background:var(--orange);color:var(--ink)}
.srch-go:hover{background:var(--ink);color:var(--paper)}
.srch-go .i{width:1.15rem;height:1.15rem}
.srch-clear{right:2.9rem;width:2.2rem;height:2.2rem;background:none;color:var(--ink)}
.srch-clear:hover{background:var(--bone)}
.srch-clear[hidden]{display:none}
@media(min-width:900px){
  .nav.srch-on ul{display:none}
  .nav.srch-on .srch{position:static;flex:1 1 auto;max-width:none}
  .nav.srch-on .srch-panel{left:0;right:0;top:100%;width:auto;border-radius:0 0 2rem 2rem;
    border-top:1px solid var(--nav-line);padding:var(--s5) var(--s7) var(--s7)}
  .nav.srch-on.srch-results .in{border-radius:2rem 2rem 0 0}
}
@media(max-width:899px){
  .nav.searching .srch{display:flex;position:absolute;left:0;right:0;top:calc(100% + var(--s2));flex:none;
    background:var(--paper);border-radius:999px;box-shadow:var(--shadow-pop);padding:var(--s2)}
  .srch-panel{left:0;right:0;top:calc(100% + var(--s2));border-radius:var(--s5);padding:var(--s4) var(--s3)}
}
.srch-panel{position:absolute;z-index:1;max-height:calc(100vh - 7rem);max-height:calc(100svh - 7rem);overflow-y:auto;overscroll-behavior:contain;
  background:var(--nav-panel);color:var(--paper);box-shadow:var(--shadow-pop);border:1px solid var(--nav-line);
  animation:unroll .45s var(--ease)}
.srch-panel[hidden]{display:none}
.sg{font-family:Montserrat,sans-serif;font-weight:800;font-size:var(--t-xs);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--on-ink-muted);padding:var(--s4) var(--s3) var(--s2);max-width:none}
.sg:first-child{padding-top:0}
/* results are links inside the nav, so the nav-link rules (no wrap, underline, size) are overridden */
.nav a.sr{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 var(--s4);
  padding:var(--s3);border:0;border-radius:var(--s4);white-space:normal;
  font-size:var(--t-base);font-weight:500;color:var(--paper);text-decoration:none;cursor:pointer;transition:background .15s}
.nav a.sr:hover,.nav a.sr[aria-selected="true"]{background:var(--paper-tint);border:0}
.sr .i{width:1.35rem;height:1.35rem;stroke-width:2.2}
.sr small{grid-column:2;font-size:var(--t-xs);font-weight:500;line-height:1.5;color:var(--on-ink)}
.sr mark{background:none;color:var(--orange);font-weight:800}
.nav a.sall{display:inline-flex;align-items:center;gap:var(--s2);margin:var(--s5) var(--s3) 0;padding:0 0 2px;
  font-weight:800;font-size:var(--t-base);border-bottom:2px solid var(--orange);white-space:normal}
.nav a.sall:hover{border-color:transparent}
.snone{padding:var(--s2) var(--s3);font-size:var(--t-base);color:var(--paper);max-width:none}
.nav .snone a{color:var(--paper);font-weight:800;font-size:inherit;white-space:normal;border-bottom:2px solid var(--paper)}

/* ---- trips menu on phones and tablets: full screen, in the desktop menu's ink and orange ---- */
.tm{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:var(--nav-panel);color:var(--paper);
  padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.tm.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s}
html.tm-open,html.tm-open body{overflow:hidden}
html.tm-open .chat-launch,html.tm-open .ed-bar{visibility:hidden}
.tm-top{flex:none;display:flex;align-items:center;gap:var(--s3);min-height:4.5rem;padding:var(--s3) var(--s4);border-bottom:1px solid var(--nav-line)}
.tm-brand{display:grid;place-items:center;height:3rem;padding:0 var(--s4);border-radius:999px;background:var(--paper)}
.tm-brand img{height:2.1rem;width:auto;display:block}
.tm-back{display:none;align-items:center;gap:var(--s1);min-height:3rem;padding:0 var(--s4) 0 var(--s2);border:0;border-radius:999px;cursor:pointer;
  background:var(--paper-tint);color:var(--paper);font-family:Montserrat,sans-serif;font-weight:800;font-size:var(--t-sm)}
.tm-x{margin-left:auto;width:3rem;height:3rem;flex:none;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;background:var(--paper-tint);color:var(--paper)}
.tm-main{flex:1;min-height:0;position:relative;overflow:hidden}
.tm-pane{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s5) var(--s4) var(--s8);transition:transform .32s var(--ease)}
.tm-l2{background:var(--nav-panel);transform:translateX(100%)}
.tm.l2 .tm-l1{transform:translateX(-25%)}
.tm.l2 .tm-l2{transform:none}
.tm.l2 .tm-back{display:inline-flex}
.tm.l2 .tm-brand{display:none}
.tm-k{font-family:Montserrat,sans-serif;font-weight:800;font-size:var(--t-xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--on-ink-muted);margin:0 var(--s4) var(--s3)}
.tm-cat{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:3.5rem;padding:0 var(--s4);border:0;border-radius:999px;cursor:pointer;
  background:none;color:var(--paper);text-align:left;font-family:Montserrat,sans-serif;font-weight:800;font-size:var(--t-md);transition:background .2s var(--ease)}
.tm-cat .n{margin-left:auto;font-weight:600;font-size:var(--t-sm);color:var(--on-ink-muted)}
.tm-cat .i{width:1.1rem;height:1.1rem;flex:none;color:var(--on-ink-muted)}
.tm-cat:hover{background:var(--paper-tint)}
.tm-links{display:grid;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--nav-line)}
.tm-links a{display:flex;align-items:center;min-height:3.25rem;padding:0 var(--s4);border-radius:999px;color:var(--paper);text-decoration:none;font-weight:700;font-size:var(--t-base)}
.tm-links a:hover{background:var(--paper-tint)}
.tm-book{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s4);min-height:3.5rem;border-radius:999px;
  background:var(--orange);color:var(--ink);text-decoration:none;font-family:Montserrat,sans-serif;font-weight:800;font-size:var(--t-base)}
.tm-promise{margin:0 var(--s4) var(--s2);font-size:var(--t-lg);line-height:1.4;color:var(--paper);max-width:36ch}
.tm-hint{margin:0 var(--s4) var(--s4);font-size:var(--t-sm);color:var(--on-ink-muted)}
.tm-trips{list-style:none;display:grid}
/* each row: the trip opens its page; the round + beside it adds the trip to the booking */
.tm-trips li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2);border-bottom:1px solid var(--nav-line)}
.tm-trip{display:flex;align-items:center;gap:var(--s2);min-height:3.75rem;padding:var(--s3) var(--s2) var(--s3) var(--s4);border-radius:.75rem;
  color:var(--paper);text-decoration:none;text-align:left;font-family:inherit}
.tm-trip > span{flex:1;min-width:0}
.tm-trip > .i{width:1rem;height:1rem;flex:none;color:var(--on-ink-muted)}
.tm-trip b{font-family:Montserrat,sans-serif;font-weight:700;font-size:var(--t-base)}
.tm-trip small{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--on-ink-muted)}
.tm-trip .badge{margin-left:var(--s2);vertical-align:2px}
.tm-trip:hover{background:var(--paper-tint)}
.tm-add{width:2.75rem;height:2.75rem;margin-right:var(--s2);display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:none;box-shadow:inset 0 0 0 1.5px var(--rule-on-ink);color:var(--paper)}
.tm-add:hover{background:var(--paper-tint)}
.tm-add[aria-pressed="true"]{background:var(--orange);box-shadow:none;color:var(--ink)}
.tm-all{display:inline-flex;align-items:center;gap:var(--s2);margin:var(--s5) var(--s4) 0;padding-bottom:2px;border-bottom:2px solid var(--orange);
  color:var(--paper);text-decoration:none;font-family:Montserrat,sans-serif;font-weight:800;font-size:var(--t-base)}
/* tablets and wider phones held sideways: both panes, like the desktop menu */
@media (min-width: 768px){
  .tm-main{display:grid;grid-template-columns:minmax(17rem,22rem) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .tm-pane{position:relative;inset:auto;transform:none!important}
  .tm-l1{border-right:1px solid var(--nav-line)}
  .tm.l2 .tm-back{display:none}
  .tm.l2 .tm-brand{display:grid}
  .tm-cat .i{display:none}
  .tm-cat[aria-current="true"]{background:var(--orange);color:var(--ink)}
  .tm-cat[aria-current="true"] .n{color:var(--ink)}
}
/* two columns of trips only where the trips pane is wide enough for them */
@media (min-width: 1024px){.tm-trips{grid-template-columns:1fr 1fr;column-gap:var(--s5)}}
@media (hover:none){
  .tm-cat:hover,.tm-trip:hover,.tm-links a:hover,.tm-add:hover{background:none}
  .tm-add[aria-pressed="true"]:hover{background:var(--orange)}
  .tm-cat:active,.tm-trip:active,.tm-links a:active,.tm-add:active{background:var(--paper-tint)}
}
@media (min-width: 768px) and (hover:none){.tm-cat[aria-current="true"]:hover{background:var(--orange)}}
@media print{.tm{display:none!important}}

/* touch screens: hover colours would stick after a tap, so they stay at rest and a press shows instead */
@media (hover:none){
  .nav a.pill:hover,.pill:hover{background:var(--orange);color:var(--ink)}
  .srch-go:hover{background:var(--orange);color:var(--ink)}
  .nav a.pill:active,.srch-go:active{filter:brightness(.88)}
  .menu:active,.srch-open:active{background:var(--orange-tint)}
}
/* less motion: the menus fade instead of sliding (?motion=on previews the full motion) */
@media(prefers-reduced-motion:reduce){
  html:not(.motion) .nav .mega{clip-path:none!important;transition:opacity .3s ease,visibility 0s linear .3s!important}
  html:not(.motion) .nav.mega-open .mega{transition:opacity .3s ease,visibility 0s!important}
  html:not(.motion) .nav .mega-cats,html:not(.motion) .nav .mega-body{transform:none!important;transition:opacity .3s ease!important}
  html:not(.motion) .nav .srch-panel,html:not(.motion) .nav.open ul{animation:fadeIn .3s ease!important}
  html:not(.motion) .nav .mega-body.swap li,html:not(.motion) .nav .mega-body.swap .mega-promise,html:not(.motion) .nav .mega-body.swap .mega-all{animation:fadeIn .25s ease both!important}
}

/* ===== the footer, shared by every page (from index.html) ===== */
/* ---- footer ---- */
footer{background:var(--ink);color:var(--bone);padding-block:var(--s9) calc(var(--s7) + 4.5rem)}   /* last line clears the Chat now button */
footer .g{display:grid;gap:var(--s7)}
@media(min-width:800px){footer .g{grid-template-columns:1.5fr repeat(3,1fr)}}
footer .lg{height:5rem;width:auto}
footer p{margin-top:var(--s5);max-width:34ch;color:var(--on-ink-muted);font-size:var(--t-sm)}
footer h4,footer .fh{font-family:Montserrat,sans-serif;font-weight:800;font-size:var(--t-xs);max-width:none;line-height:var(--lh-body);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--on-ink-muted)}
footer ul{list-style:none;margin-top:var(--s4);display:grid;gap:var(--s3)}
footer a{color:var(--on-ink);text-decoration:none;font-size:var(--t-sm)}
footer a:hover{color:var(--orange)}
.contact{margin-top:var(--s5);display:grid;gap:var(--s2)}
.contact a{display:inline-flex;align-items:center;gap:var(--s2);color:var(--bone);
  font-family:Montserrat,sans-serif;font-weight:800;font-size:var(--t-sm)}
.base{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--rule-on-ink);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between;
  color:var(--on-ink-muted);font-size:var(--t-xs);letter-spacing:.02em;text-transform:none}

/* ---- social icons in the footer: Peak badges, bone on ink; orange as you point at one ---- */
footer .social{margin-top:var(--s6)}
footer .soc{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:var(--s3)}
footer .soc a{display:block;width:2.25rem;height:2.25rem;--soc-badge:var(--bone);--soc-mark:var(--ink);--soc-cap:var(--orange);
  transition:transform .2s var(--ease)}
footer .soc a:hover,footer .soc a:focus-visible{--soc-badge:var(--orange);--soc-cap:var(--ink);transform:translateY(-3px)}
footer .soc svg{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){footer .soc a{transition:none}footer .soc a:hover{transform:none}}

/* touch screens (phones, tablets, phones turned sideways): footer links and social badges get a full
   thumb-sized tap area (44 px) without looking bigger */
@media(max-width:700px),(pointer:coarse){
  footer ul{gap:0}
  footer ul a{display:inline-flex;align-items:center;min-height:2.75rem}
  .contact{gap:0}
  .contact a{min-height:2.75rem}
  footer .soc{gap:var(--s2)}
  footer .soc a{width:2.75rem;height:2.75rem}
}

/* the long email address may break onto two lines on the narrowest phones rather than widen the page */
.contact a{max-width:100%;overflow-wrap:anywhere}
@media(pointer:coarse){.srch-go{width:2.75rem;height:2.75rem;right:0}}

/* the narrowest phones (under 360 px): logo, search, menu and Book now still fit on one line */
@media(max-width:359px){
  .nav .in{gap:var(--s1);padding-left:var(--s1)}.navrow{gap:var(--s1)}
  .nav a.brand{padding-inline:var(--s2)}.logo{height:2.3rem}
  .nav .pill{padding-inline:var(--s3)}
}

/* ---- My trip: the trips a visitor gathers while browsing (assets/mytrip.js), and how many ----
   A quiet ghost pill beside Book now, so the orange stays with Book now. Phones show the pack
   icon with its count on top. */
.nav a.mt-btn{display:inline-flex;align-items:center;gap:var(--s2);position:relative;min-height:2.75rem;padding:0 var(--s4) 0 var(--s3);
  border:0;border-radius:999px;background:var(--paper-tint);color:var(--paper);font-weight:800;font-size:var(--t-sm);transition:background .2s var(--ease)}
.nav a.mt-btn:hover,.nav a.mt-btn[aria-current="page"]{background:rgba(255,255,255,.22)}
.mt-btn .i{width:1.25rem;height:1.25rem}
.mt-n{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:999px;
  background:var(--paper);color:var(--ink);font-size:.75rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.mt-n[hidden]{display:none}
.mt-n.bump{animation:mtbump .45s var(--ease)}
@keyframes mtbump{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
@media(max-width:640px){
  .nav a.mt-btn{width:2.75rem;padding:0;justify-content:center}
  .nav a.mt-btn .lbl{display:none}
  .mt-btn .mt-n{position:absolute;top:-.2rem;right:-.2rem;min-width:1.2rem;height:1.2rem;font-size:.7rem;box-shadow:0 0 0 2px var(--ink)}
}
@media(max-width:359px){.nav a.mt-btn{width:2.5rem}}

/* the note that a trip went into My trip, with the way there */
.mt-toast{position:fixed;left:var(--s4);right:var(--s4);margin-inline:auto;width:fit-content;max-width:34rem;
  bottom:calc(var(--s5) + env(safe-area-inset-bottom, 0px) + var(--toast-lift, 0px));z-index:70;
  display:flex;align-items:center;gap:var(--s4);padding:var(--s2) var(--s2) var(--s2) var(--s5);
  background:var(--ink);color:var(--paper);border-radius:1.6rem;box-shadow:var(--shadow-pop);font-size:var(--t-sm);font-weight:600;line-height:var(--lh-snug);
  opacity:0;visibility:hidden;transform:translateY(.75rem);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s}
.mt-toast.on{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.mt-toast a{flex:none;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 var(--s4);border-radius:999px;
  background:var(--paper);color:var(--ink);font-weight:800;text-decoration:none;white-space:nowrap}
.mt-toast a:hover{background:var(--bone)}
@media(prefers-reduced-motion:reduce){html:not(.motion) .mt-toast{transform:none}}
/* phones: the bar now carries My trip too. ".nav a.pill" so these win over the pill's own padding above */
@media(max-width:440px){.nav .acts{gap:var(--s1)}.nav a.pill{padding-inline:var(--s3)}}
@media(max-width:359px){.nav a.pill{padding-inline:var(--s2)}.nav .srch-open,.nav .menu{width:2.5rem}}