/*
 * Auspicious Journeys website: the frame (SPEC 4.1 to 4.3, 4.12, 4.14, 6.7). Tokens only, no hex values.
 * Owners: F2 sections 0 to 9 (header, notice, menu, end card and footer, action bar, chat launcher, sheets, intro);
 * F3 section 10 (stage and booking card) at the end of this file.
 *  0 frame variables . 1 header . 2 checkout header . 3 notice . 4 menu . 5 end card . 6 footer
 *  7 action bar and chat launcher . 8 sheets and chat panel . 9 dormant bands, intro, utilities
 *
 * Header states: html.hdr-solid (motion.js: the stage has scrolled away) and html.hdr-hidden (scrolling down).
 * Pages without a stage (body.no-stage) always get the solid look; so do body.header-solid and a stage in planning.
 * Stages pad their top by var(--frame-top): the header height plus, on phones, room for the notice strip.
 */

/* ============================== 0. Frame variables ============================== */
.aj-site {
  --hdr-h: 76px;
  --notice-h: 72px;
  --notice-on: 0;
  --frame-top: calc(var(--hdr-h) + var(--notice-on) * var(--notice-h));
  --hdr-ease: cubic-bezier(.16, 1, .3, 1);
  --hdr-fade: 450ms;
}
.aj-site:has(.site-top [data-notice]:not([hidden])) { --notice-on: 1; }
@media (min-width: 768px) { .aj-site { --notice-h: 0px; } }
@media (min-width: 1024px) { .aj-site { --hdr-h: 88px; } }

/* ============================== 1. Header ============================== */
.site-top { position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-header); pointer-events: none; }
.aj-site .site-header {
  /* the solid (day) look is the default; the over-stage look re-points these four */
  --hdr-fg: var(--ink);
  --hdr-fill-fg: var(--paper);
  --hdr-bg-o: 1;
  --night-o: 0;
  --focus: var(--vermilion);
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  height: var(--hdr-h); pointer-events: auto;
  color: var(--hdr-fg); background: transparent; border: 0; border-radius: 0; box-shadow: none;
  translate: 0 0;
  transition: translate 600ms var(--hdr-ease), color var(--hdr-fade) var(--hdr-ease);
  animation: none;
}
.aj-site .site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--porcelain); border-bottom: 1px solid var(--hair);
  opacity: var(--hdr-bg-o);
  transition: opacity var(--hdr-fade) var(--hdr-ease);
}
html:not(.hdr-solid) .aj-site.has-stage:not(.header-solid):not(:has(.mh.is-planning, .mh.is-map)) .site-header:not(.is-checkout) {
  --hdr-fg: var(--mist);
  --hdr-fill-fg: var(--ink);
  --hdr-bg-o: 0;
  --night-o: 1;
  --focus: var(--vermilion-glow);
}
/* without JavaScript nothing switches the look, so over a stage the header scrolls away with it */
html:not(.js) .aj-site.has-stage .site-header { position: absolute; }
html.hdr-hidden:not(.has-sheet):not(.menu-open) .aj-site .site-header:not(.is-checkout):not(:focus-within) { translate: 0 calc(-100% - 2px); }

.header-in { display: flex; align-items: center; gap: 12px; height: 100%; max-width: none; margin: 0; padding: 0 var(--gutter); }
.aj-site .site-header .brand { position: relative; display: inline-flex; align-items: center; flex: none; min-height: 44px; }
.aj-site .site-header .brand img { display: block; width: 112px; height: auto; transition: opacity var(--hdr-fade) var(--hdr-ease); }
.aj-site .site-header .brand .brand-day { opacity: calc(1 - var(--night-o)); }
.aj-site .site-header .brand .brand-night { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: var(--night-o); }
.site-header :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.aj-site .site-nav { display: none; }
.aj-site .site-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  color: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0; text-decoration: none;
}
.aj-site .site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--hdr-fade) var(--hdr-ease);
}
.aj-site .site-nav a:hover::after, .aj-site .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }

.aj-site .site-header .header-end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.aj-site .site-header .header-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px;
  color: inherit; font-size: 15px; font-weight: 500; text-decoration: none;
}
/* below 1360px the icon stands alone; the label stays in the accessibility tree as the link's name */
.aj-site .site-header .header-wa span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.header-account { display: none; }
.aj-site .header-account a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: inherit; font-size: 15px; font-weight: 500; text-decoration: none; }
.aj-site .site-header .header-wa:hover span, .aj-site .header-account a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

/* Book a car: an outline that fills from the bottom on hover; vermilion-press only while no primary action is in view */
.aj-site .site-header .btn.btn-book {
  position: relative; isolation: isolate; overflow: hidden;
  display: none; align-items: center; justify-content: center; height: 44px; min-height: 0; padding: 0 20px;
  border: 1px solid currentColor; border-radius: var(--r-1); background: transparent; color: inherit;
  font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0; box-shadow: none;
  transition: color var(--hdr-fade) var(--hdr-ease), border-color var(--hdr-fade) var(--hdr-ease), background-color var(--hdr-fade) var(--hdr-ease);
}
.aj-site .site-header .btn.btn-book::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--hdr-fg);
  transform: none; translate: 0 101%; transition: translate var(--hdr-fade) var(--hdr-ease);
}
.aj-site .site-header .btn.btn-book:hover { color: var(--hdr-fill-fg); background: transparent; }
.aj-site .site-header .btn.btn-book:hover::before { transform: none; translate: 0 0; }
.aj-site .site-header .btn.btn-book:active { scale: 0.98; }
.aj-site .site-header .btn.btn-book.is-filled { background: var(--vermilion-press); border-color: var(--vermilion-press); color: var(--paper); }
.aj-site .site-header .btn.btn-book.is-filled::before { background: var(--vermilion-hover); }
.aj-site .site-header .btn.btn-book.is-filled:hover { color: var(--paper); }

/* the menu button: two hairlines in a 44px square (the menu's close button turns them into a cross) */
.aj-site .menu-btn, .site-drawer .drawer-close {
  position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; margin-right: -10px;
  border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer;
}
.aj-site .menu-btn:hover { background: transparent; }
.menu-lines { position: relative; display: block; width: 24px; height: 7px; }
.menu-lines::before, .menu-lines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: translate 450ms var(--hdr-ease), rotate 450ms var(--hdr-ease), scale 450ms var(--hdr-ease);
}
.menu-lines::before { top: 0; }
.menu-lines::after { bottom: 0; transform-origin: right center; }
.menu-btn:hover .menu-lines::after { scale: 0.62 1; }

@media (min-width: 600px) {
  .aj-site .site-header .btn.btn-book { display: inline-flex; }
  .header-in { gap: 20px; }
}
@media (min-width: 1024px) {
  .aj-site .site-header .brand img { width: 132px; }
  .aj-site .site-header .header-end { gap: 12px; }
}
@media (min-width: 1180px) { .aj-site .site-nav { display: flex; align-items: center; gap: 32px; margin-left: clamp(24px, 3.4vw, 64px); } }
@media (min-width: 1360px) {
  .aj-site .site-header .header-wa span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .aj-site .site-header .header-wa { padding: 0 4px; }
  .header-account { display: inline-flex; }
  .aj-site .site-header .header-end { gap: 20px; }
}

/* ============================== 2. Checkout header (/book/): solid, never hides ============================== */
.aj-site .site-header.is-checkout .header-end { margin-left: auto; }
.header-help { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: inherit; font-size: 15px; font-weight: 500; text-decoration: none; }
.header-help:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
@media (max-width: 479px) { .hide-sm { display: none; } .header-help { font-size: 14px; } }

/* pages without a stage: the header's room and the notice sit in the flow */
.no-stage .site-top { position: relative; padding-top: var(--hdr-h); }

/* ============================== 3. Notice ============================== */
.site-top [data-live="notice"] { pointer-events: auto; }
.has-stage .site-top [data-live="notice"] { position: absolute; top: var(--hdr-h); left: 0; right: 0; }
.aj-site .site-top .notice-bar {
  --text: var(--mist); --text-2: var(--mist-2); --line: var(--hair-d); --link: var(--mist); --focus: var(--vermilion-glow);
  background: var(--green-raised); color: var(--mist); font-size: 13px; line-height: 1.4;
  border: 0; border-radius: 0; box-shadow: none;
}
.no-stage .site-top .notice-bar {
  --text: var(--ink); --text-2: var(--ink-2); --line: var(--hair); --link: var(--ink); --focus: var(--vermilion);
  background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--hair);
}
/* over the light map (planning, or the map-first stage) the notice turns to paper with the header */
.has-stage:has(.mh.is-planning, .mh.is-map) .site-top .notice-bar {
  --text: var(--ink); --text-2: var(--ink-2); --line: var(--hair); --link: var(--ink); --focus: var(--vermilion);
  background: var(--paper); color: var(--ink);
}
.aj-site .site-top .notice-bar > .container {
  display: flex; align-items: center; gap: 12px; max-width: none; min-height: 0; margin: 0;
  padding: 6px calc(var(--gutter) - 10px) 6px var(--gutter);
}
.aj-site .site-top .notice-bar .notice-title { flex: 1; min-width: 0; display: block; overflow: visible; -webkit-line-clamp: unset; font-weight: 500; color: inherit; }
.aj-site .site-top .notice-bar .notice-toggle {
  display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 2px; margin: 0;
  color: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.aj-site .site-top .notice-bar .notice-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; color: inherit; background: transparent; border: 0; }
.aj-site .site-top .notice-bar .notice-close .icon, .aj-site .site-top .notice-bar .notice-close svg { width: 18px; height: 18px; }
.aj-site .site-top .notice-more { border-top: 1px solid var(--line); }
.aj-site .site-top .notice-more > .container { display: grid; gap: 6px; max-width: none; margin: 0; padding: 12px var(--gutter) 14px; }
.aj-site .site-top .notice-more p { max-width: 62ch; color: var(--text-2); font-size: 14px; line-height: 1.5; display: block; -webkit-line-clamp: unset; overflow: visible; }
.aj-site .site-top .notice-more .btn-link, .notice-others a { color: var(--text); font-size: 14px; }
.notice-others { display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.notice-others-k { font-size: 13px; color: var(--text-2); }
.notice-others-list { list-style: none; margin: 0; padding: 0; }
.notice-others a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-underline-offset: 0.3em; }
@media (min-width: 768px) {
  /* a compact floating card under the header, top right */
  .has-stage .site-top [data-live="notice"] { top: calc(var(--hdr-h) + 4px); left: auto; right: var(--gutter); width: min(380px, calc(100% - 2 * var(--gutter))); }
  /* pages without a stage: the same card, floating over the page head's top padding (in the flow it opened about
   * 90px of empty space above the page head, and more once dismissed elsewhere) */
  .no-stage .site-top [data-live="notice"] { position: absolute; top: calc(var(--hdr-h) + 8px); left: auto; right: var(--gutter); width: min(380px, calc(100% - 2 * var(--gutter))); }
  .no-stage .site-top [data-live="notice"] > .notice-bar { width: 100%; }
  /* a small allowance while the notice shows, so a page head that runs under the card still clears it */
  .no-stage:has(.site-top [data-notice]:not([hidden])) .site-main { padding-top: 56px; }
  .aj-site .site-top .notice-bar { border-radius: var(--r-3); box-shadow: var(--shadow-float); overflow: hidden; font-size: 14px; }
  .no-stage .site-top .notice-bar { border: 1px solid var(--hair); box-shadow: none; }
  .aj-site .site-top .notice-bar > .container { padding: 8px 4px 8px 18px; }
  .aj-site .site-top .notice-more > .container { padding: 12px 18px 16px; }
}

@media (min-width: 1280px) { .no-stage:has(.site-top [data-notice]:not([hidden])) .site-main { padding-top: 32px; } }

/* ============================== 4. Menu: a full-screen pine overlay ============================== */
.aj-site [data-backdrop-for="site-drawer"] { display: none; }
.aj-site .site-drawer, .aj-site .site-drawer:not(.is-left) {
  --text: var(--mist); --text-2: var(--mist-2); --line: var(--hair-d); --heading: var(--mist); --link: var(--mist); --focus: var(--vermilion-glow);
  top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100dvh; max-height: none;
  display: flex; flex-direction: column;
  background: var(--pine); color: var(--mist); border: 0; border-radius: 0; box-shadow: none;
  transform: none; clip-path: inset(0 0 100% 0);
  transition: clip-path 450ms var(--ease-in-out, cubic-bezier(.65, 0, .35, 1)), visibility 0s linear 450ms;
}
.aj-site .site-drawer.is-open, .aj-site .site-drawer:not(.is-left).is-open {
  clip-path: inset(0); visibility: visible; transform: none;
  transition: clip-path 700ms var(--ease-in-out, cubic-bezier(.65, 0, .35, 1)), visibility 0s;
}
.site-drawer :focus-visible { outline: 2px solid var(--vermilion-glow); outline-offset: 3px; }
.aj-site .site-drawer .sheet-grip { display: none; }
.aj-site .site-drawer .sheet-head {
  flex: none; display: flex; align-items: center; gap: 16px; min-height: 0; height: var(--hdr-h);
  padding: 0 var(--gutter); border: 0;
}
.drawer-logo { display: block; width: 112px; height: auto; }
.aj-site .site-drawer .sheet-title { margin-left: auto; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; color: var(--mist-2); }
.site-drawer .drawer-close { color: var(--mist); }
.site-drawer .drawer-close .menu-lines::before { translate: 0 3px; rotate: 45deg; }
.site-drawer .drawer-close .menu-lines::after { translate: 0 -3px; rotate: -45deg; transform-origin: center; }
.site-drawer .drawer-close:hover .menu-lines::before, .site-drawer .drawer-close:hover .menu-lines::after { scale: 0.8 1; }

.aj-site .site-drawer .sheet-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 40px;
  padding: clamp(16px, 4vh, 48px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
}
.aj-site .site-drawer .drawer-group { margin: 0; }
.aj-site .site-drawer .drawer-group-title {
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 0;
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; color: var(--mist-2);
}
.aj-site .site-drawer .drawer-group-title::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.aj-site .site-drawer .site-drawer-nav { display: flex; flex-direction: column; }
.aj-site .site-drawer .drawer-main .site-drawer-nav a {
  position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 0.3em; min-height: 0;
  padding: 0.04em 0 0.1em; overflow: clip; border: 0;
  color: var(--mist); text-decoration: none;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04;
}
.site-drawer .dl-t { display: inline-block; transition: translate 450ms var(--hdr-ease), opacity 450ms var(--hdr-ease); }
.site-drawer .drawer-main .site-drawer-nav a .icon {
  flex: none; width: 0.5em; height: 0.5em; color: var(--mist-2); opacity: 0; translate: -0.3em 0;
  transition: opacity 450ms var(--hdr-ease), translate 450ms var(--hdr-ease);
}
.site-drawer .drawer-main .site-drawer-nav a .icon svg { width: 100%; height: 100%; }
.site-drawer .drawer-main .site-drawer-nav a:hover .icon, .site-drawer .drawer-main .site-drawer-nav a:focus-visible .icon { opacity: 1; translate: 0 0; }
.site-drawer .drawer-main .site-drawer-nav a:hover .dl-t { translate: 0.18em 0; }
.site-drawer .drawer-main .site-drawer-nav a[aria-current="page"] .dl-t { color: var(--mist-2); }
.site-drawer .drawer-main .site-drawer-nav a[aria-current="page"] .icon { opacity: 1; translate: 0 0; color: var(--vermilion-glow); }

.aj-site .site-drawer .site-drawer-nav.is-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.aj-site .site-drawer .site-drawer-nav.is-compact a {
  display: flex; align-items: center; min-height: 44px; padding: 0; border: 0;
  color: var(--mist); font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem); font-weight: 500; letter-spacing: -0.01em; text-decoration: none;
}
.site-drawer .is-compact .dl-t, .site-footer .footer-cols a > span, .end-wa > span, .site-drawer .drawer-lines a {
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  transition: background-size var(--hdr-fade) var(--hdr-ease);
}
.site-drawer .is-compact a:hover .dl-t, .site-footer .footer-cols a:hover > span, .end-wa:hover > span, .site-drawer .drawer-lines a:hover { background-position: 0 100%; background-size: 100% 1px; }
.site-drawer .is-compact a[aria-current="page"] .dl-t { background-size: 100% 1px; }

.drawer-side { display: grid; gap: 32px; align-content: start; }
.aj-site .site-drawer .drawer-actions { display: grid; gap: 10px; margin: 0; }
.aj-site .site-drawer .drawer-actions .btn { height: 56px; gap: 10px; border-radius: var(--r-1); font-size: 15px; font-weight: 600; }
.aj-site .site-drawer .drawer-actions .btn-outline { --btn-line: var(--mist-2); --btn-line-h: var(--mist); --btn-fg: var(--mist); --btn-fill: var(--mist); --btn-fill-fg: var(--ink); }
.aj-site .site-drawer .drawer-lines { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin: 6px 0 0; font-size: 15px; color: var(--mist-2); }
.aj-site .site-drawer .drawer-lines .btn-link, .aj-site .site-drawer .drawer-lines a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mist); font-size: 15px; font-weight: 500; text-decoration: none; }
.aj-site .site-drawer .drawer-lines .btn-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.site-drawer .drawer-account { display: flex; align-items: center; gap: 12px; padding: 0 0 20px; border-bottom: 1px solid var(--hair-d); }
.site-drawer .drawer-account > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.site-drawer .drawer-account-name { font-weight: 600; color: var(--mist); }
.site-drawer .drawer-account .btn { color: var(--mist); border-color: var(--mist-2); background: transparent; }
.site-drawer .drawer-company { margin: 8px 0 0; }
.site-drawer .drawer-company .btn { padding-left: 0; gap: 8px; color: var(--mist); }

/* the open sequence: links rise from behind their masks in a stagger, the side column fades up after them */
.site-drawer .drawer-main .dl-t { translate: 0 105%; }
.site-drawer .drawer-main .drawer-group-title, .site-drawer .drawer-side { opacity: 0; translate: 0 16px; transition: opacity 300ms var(--hdr-ease), translate 300ms var(--hdr-ease); }
.site-drawer.is-open .drawer-main .dl-t { translate: 0 0; transition: translate 900ms var(--hdr-ease) calc(200ms + var(--di, 0) * 60ms); }
.site-drawer.is-open .drawer-main .site-drawer-nav a:hover .dl-t { translate: 0.18em 0; transition-delay: 0s; transition-duration: 450ms; }
.site-drawer.is-open .drawer-main .drawer-group-title { opacity: 1; translate: 0 0; transition: opacity 700ms var(--hdr-ease) 200ms, translate 700ms var(--hdr-ease) 200ms; }
.site-drawer.is-open .drawer-side { opacity: 1; translate: 0 0; transition: opacity 800ms var(--hdr-ease) 560ms, translate 800ms var(--hdr-ease) 560ms; }
.site-drawer .drawer-main .site-drawer-nav a:nth-child(2) { --di: 1; }
.site-drawer .drawer-main .site-drawer-nav a:nth-child(3) { --di: 2; }
.site-drawer .drawer-main .site-drawer-nav a:nth-child(4) { --di: 3; }
.site-drawer .drawer-main .site-drawer-nav a:nth-child(5) { --di: 4; }
.site-drawer .drawer-main .site-drawer-nav a:nth-child(6) { --di: 5; }
.site-drawer .drawer-main .site-drawer-nav a:nth-child(7) { --di: 6; }

@media (min-width: 600px) { .drawer-logo { width: 112px; } }
@media (min-width: 1024px) {
  .drawer-logo { width: 132px; }
  .aj-site .site-drawer .sheet-body {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(32px, 4vw, 72px); align-content: center;
    padding-top: clamp(24px, 4vh, 64px); padding-bottom: clamp(32px, 6vh, 72px);
  }
  .drawer-side { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--hair-d); align-self: stretch; align-content: end; }
  .aj-site .site-drawer .drawer-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aj-site .site-drawer .drawer-lines { grid-column: 1 / -1; }
}
@media (max-height: 720px) and (min-width: 1024px) {
  .aj-site .site-drawer .drawer-main .site-drawer-nav a { font-size: clamp(2rem, 1rem + 5.6vh, 3.5rem); }
}

/* ============================== 5. End card: the opening of the footer ============================== */
/* compact (review 02/11/2026): the end card and the whole footer fit one laptop screen together */
.end { position: relative; padding: clamp(48px, 1.5rem + 3vw, 96px) 0 0; background: transparent; color: var(--mist); }
.end-in { display: grid; grid-template-columns: minmax(0, 1fr); }
.end-in::after { content: ""; display: block; height: 1px; margin-top: clamp(28px, 1rem + 1.6vw, 48px); background: var(--hair-d); }
.end-title {
  margin: 0; max-width: 15ch; color: var(--mist);
  font-size: clamp(2.25rem, 1.15rem + 3.3vw, 4.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; text-wrap: balance;
}
.end-link { color: inherit; text-decoration: none; }
.end-link-t {
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 2px no-repeat;
  transition: background-size 700ms var(--hdr-ease);
}
.end-link:hover .end-link-t, .end-link:focus-visible .end-link-t { background-position: 0 100%; background-size: 100% 2px; }
.end-link:focus-visible { outline: 2px solid var(--vermilion-glow); outline-offset: 6px; }
.end .end-arrow {
  display: inline-grid; place-items: center; width: 48px; height: 48px; margin-left: 0.25em; vertical-align: 0.06em;
  border: 1px solid currentColor; border-radius: 50%; color: var(--mist);
}
.end-arrow .icon { display: block; width: 24px; height: 24px; }
.end-arrow .icon svg { width: 100%; height: 100%; }
.end .end-text { max-width: 36ch; margin: clamp(12px, 0.5rem + 0.5vw, 18px) 0 0; color: var(--mist-2);
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: clamp(24px, 1rem + 1vw, 40px); }
.end-actions .btn { height: 56px; gap: 10px; padding: 0 28px; border-radius: var(--r-1); font-size: 15px; font-weight: 600; }
.end-actions .btn .icon { transition: translate var(--hdr-fade) var(--hdr-ease); }
.end-actions .btn:hover .icon { translate: 4px 0; }
@media (min-width: 1024px) {
  /* the title and its line on the left, the actions on the right, on one baseline */
  .end-in { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(16px, 2.2vw, 32px); align-items: end; }
  .end-title { grid-column: 1; grid-row: 1; max-width: none; }
  .end .end-text { grid-column: 1; grid-row: 2; }
  .end-actions { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-content: flex-end; margin-top: 0; }
  .end-in::after { grid-column: 1 / -1; }
}
.end-wa { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--mist); font-size: 16px; font-weight: 500; text-decoration: none; }
.end-wa:focus-visible, .end-actions .btn:focus-visible { outline: 2px solid var(--vermilion-glow); outline-offset: 3px; }
@media (min-width: 768px) { .end .end-arrow { width: 60px; height: 60px; } .end-arrow .icon { width: 26px; height: 26px; } }

/* ============================== 6. Footer ============================== */
.aj-site .site-footer {
  --text: var(--mist); --text-2: var(--mist-2); --line: var(--hair-d); --focus: var(--vermilion-glow);
  position: relative; z-index: 2; padding: 0; margin: 0; background: var(--pine); color: var(--mist-2); font-size: 15px; border-radius: 0;
}
/* the footer fills the screen at every size (review 02/11/2026): at least one window tall; the end card takes the spare
   height and centres its words, the columns sit at the foot under one hairline. Not on the checkout. */
.aj-site .site-footer { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.aj-site .site-footer > .end { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(28px, 1rem + 1.6vw, 48px); }
.aj-site .site-footer > .end .end-in::after { display: none; }
.aj-site .site-footer.has-end .footer-body { position: relative; }
.aj-site .site-footer.has-end .footer-body::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--hair-d); }
/* without an end card the footer body takes the whole window: logo and columns centred, the legal line at the foot */
.aj-site .site-footer:not(.has-end) .footer-body { flex: 1 0 auto; display: flex; flex-direction: column; }
.aj-site .site-footer:not(.has-end) .footer-top { margin-top: auto; }
.aj-site .site-footer:not(.has-end) .footer-cols { margin-bottom: clamp(28px, 1.25rem + 1.6vw, 48px); }
.aj-site .site-footer:not(.has-end) .legal { margin-top: auto; }
/* desktop: the legal links stop short of the round chat button in the corner */
@media (min-width: 1024px) { .aj-site .site-footer .legal { padding-right: 76px; } }
@media (min-width: 1280px) {
  .aj-site .site-footer:not(.has-end) .footer-body { display: grid; grid-template-rows: 1fr auto 1fr auto; }
  .aj-site .site-footer:not(.has-end) :is(.footer-top, .footer-cols) { grid-row: 2; align-self: start; margin-block: 0; }
  .aj-site .site-footer:not(.has-end) .legal { grid-row: 4; }
}
.aj-site.page-book .site-footer { min-height: 0; }
/* sized so the whole footer fits one laptop screen (about 640px tall at 1333 x 708) */
.site-footer .footer-body { padding-top: clamp(28px, 1rem + 1vw, 48px); padding-bottom: 24px; }
.site-footer:not(.has-end) .footer-body { padding-top: clamp(56px, 2rem + 3vw, 96px); }
.aj-site .site-footer a { color: var(--mist); text-decoration: none; }
.aj-site .site-footer a:hover { text-decoration: none; }
.site-footer :focus-visible { outline: 2px solid var(--vermilion-glow); outline-offset: 3px; }
.aj-site .site-footer .footer-top { display: grid; gap: 28px; justify-items: start; margin: 0 0 clamp(28px, 1.25rem + 1.6vw, 48px); padding: 0; border: 0; }
.aj-site .site-footer .lockup, .aj-site .site-footer .lockup img { display: block; width: 156px; height: auto; }
.aj-site .footer-statement { max-width: 20ch; margin: 0; color: var(--mist);
  font-size: clamp(1.625rem, 1.206rem + 1.714vw, 2.75rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.aj-site .site-footer .footer-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin: 0; overflow-wrap: anywhere; }
.aj-site .site-footer .footer-cols h2 {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  color: var(--mist-2); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4;
}
.aj-site .site-footer .footer-cols ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.aj-site .site-footer .footer-cols ul a, .aj-site .site-footer .footer-cols .footer-contact a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0;
  color: var(--mist); font-size: clamp(1.0625rem, 0.97rem + 0.3vw, 1.25rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3;
}
.aj-site .site-footer .footer-contact .icon { flex: none; color: var(--mist-2); }
.aj-site .site-footer .footer-plain { padding: 10px 0; color: var(--mist-2); font-size: 15px; }
.aj-site .site-footer .legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  margin-top: clamp(28px, 1.25rem + 1.6vw, 48px); padding-top: 12px; border-top: 1px solid var(--hair-d);
  color: var(--mist-2); font-size: 13px;
}
.aj-site .site-footer .legal-line > span { white-space: nowrap; }
.aj-site .site-footer .legal-links { display: inline-flex; flex-wrap: wrap; gap: 0 22px; }
.aj-site .site-footer .legal-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mist-2); font-size: 13px; }
.aj-site .site-footer .legal-links a:hover, .aj-site .site-footer .aphyx-credit a:hover { color: var(--mist); }
/* the credit is last in the markup (reading order unchanged) and shown beside the company line */
.aj-site .aphyx-credit { order: 1; margin: 0 auto 0 0; color: var(--mist-2); font-size: 13px; }
.aj-site .site-footer .legal-links { order: 2; }
.aj-site .site-footer .aphyx-credit a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mist); --link-y: calc(50% + 0.75em); }
@media (min-width: 600px) {
  .aj-site .site-footer .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .aj-site .site-footer .footer-cols > .footer-contact { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .aj-site .site-footer .footer-top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); align-items: end; }
  .aj-site .site-footer .lockup { grid-column: 1 / span 3; }
  .aj-site .footer-statement { grid-column: 6 / -1; justify-self: end; text-align: right; }
  .aj-site .site-footer .footer-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); padding-top: clamp(28px, 1.25rem + 1vw, 40px); border-top: 1px solid var(--hair-d); }
  .aj-site .site-footer .footer-cols > .footer-contact { grid-column: 1 / span 4; }
  .aj-site .site-footer .footer-cols > :nth-child(2) { grid-column: 6 / span 3; }
  .aj-site .site-footer .footer-cols > :nth-child(3) { grid-column: 10 / span 3; }
  .aj-site .site-footer .footer-cols ul a, .aj-site .site-footer .footer-cols .footer-contact a { min-height: 34px; }
  .aj-site .site-footer .legal-links a, .aj-site .site-footer .aphyx-credit a { min-height: 36px; }
}
/* from 1280: one row, the logo and the line on the left, the three columns beside them, then the legal line */
@media (min-width: 1280px) {
  .aj-site .site-footer .footer-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); }
  .aj-site .site-footer .footer-top { grid-column: 1 / span 3; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; margin: 0; }
  .aj-site .site-footer .lockup { grid-column: auto; }
  .aj-site .footer-statement { grid-column: auto; justify-self: start; text-align: left; max-width: 13ch; font-size: clamp(1.25rem, 0.8rem + 0.7vw, 1.5rem); line-height: 1.25; }
  .aj-site .site-footer .footer-cols { grid-column: 5 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); padding-top: 0; border-top: 0; }
  .aj-site .site-footer .footer-cols > .footer-contact, .aj-site .site-footer .footer-cols > :nth-child(2), .aj-site .site-footer .footer-cols > :nth-child(3) { grid-column: auto; }
  .aj-site .site-footer .footer-cols h2 { margin-bottom: 10px; }
  .aj-site .site-footer .footer-cols ul a, .aj-site .site-footer .footer-cols .footer-contact a { min-height: 28px; font-size: 1rem; }
  .aj-site .site-footer .footer-plain { padding: 6px 0; font-size: 14px; }
  .aj-site .site-footer .legal { grid-column: 1 / -1; margin-top: 28px; }
}
@media (max-width: 1023px) { .aj-site .site-footer .footer-body { padding-bottom: calc(24px + 84px + env(safe-area-inset-bottom)); } }
.page-book .site-footer .footer-body { padding-top: 24px; padding-bottom: 24px; }

/* ============================== 7. Phone action bar and the desktop chat launcher ============================== */
.aj-site .action-bar {
  --focus: var(--vermilion-glow);
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); top: auto; z-index: var(--z-bar);
  display: flex; align-items: center; gap: 4px; padding: 6px;
  background: var(--pine); color: var(--mist); border: 0; border-radius: var(--r-3); box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: none; translate: 0 16px;
  transition: opacity 300ms var(--hdr-ease), translate 500ms var(--hdr-ease), visibility 0s linear 500ms;
}
.aj-site .action-bar.is-shown { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 400ms var(--hdr-ease), translate 600ms var(--hdr-ease), visibility 0s; }
html.bar-off .aj-site .action-bar, html.chat-on .aj-site .action-bar, html.applying .aj-site .action-bar, html.has-sheet .aj-site .action-bar { opacity: 0; visibility: hidden; translate: 0 16px; }
.aj-site .action-bar :focus-visible { outline: 2px solid var(--vermilion-glow); outline-offset: 2px; }
.aj-site .action-bar > .btn.ab-book {
  flex: 1; height: 52px; padding: 0 16px; border: 0; border-radius: var(--r-1);
  background: var(--vermilion-press); color: var(--paper); font-size: 15px; font-weight: 600;
}

.aj-site .action-bar > .btn.ab-btn {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 72px; min-width: 64px; height: 52px; padding: 0 6px; border: 0; border-radius: var(--r-1);
  --btn-fg: var(--mist); --btn-fill: var(--green-raised); --btn-fill-fg: var(--mist);
  background: transparent; color: var(--mist); font-size: 12.5px; font-weight: 500; line-height: 1.1;
}
.aj-site .action-bar > .btn.ab-btn .icon { margin: 0; color: var(--mist); }
@media (max-width: 359px) { .aj-site .action-bar > .btn.ab-btn { width: 60px; min-width: 60px; } }
@media (min-width: 1024px) { .aj-site .action-bar { display: none; } }

.aj-site .chat-launcher {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--z-bar);
  display: none; place-items: center; width: 56px; height: 56px; padding: 0;
  background: var(--pine); color: var(--mist); border: 1px solid var(--hair-d); border-radius: 50%; box-shadow: var(--shadow-float); cursor: pointer;
  transition: opacity 400ms var(--hdr-ease), translate 500ms var(--hdr-ease), scale 450ms var(--hdr-ease), background-color 450ms var(--hdr-ease);
}
.aj-site .chat-launcher:hover { background: var(--green-raised); scale: 1.06; }
.aj-site .chat-launcher:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }
@media (min-width: 1024px) { .aj-site .chat-launcher { display: grid; } }
/* it steps aside while a primary action (the booking card, the end card) is on screen, and while chat is open */
body.aj-site:has(.action-bar:not(.is-shown)) .chat-launcher, html.chat-on .aj-site .chat-launcher { opacity: 0; translate: 0 12px; pointer-events: none; }
html:not(.js) .chat-launcher { display: none; }

/* ============================== 8. Sheets: WhatsApp demo sheet and the chat panel ============================== */
.aj-site .wa-sheet { background: var(--paper); color: var(--ink); border-radius: var(--r-3) var(--r-3) 0 0; }
.aj-site .wa-sheet .sheet-head { padding: 16px 12px 12px 24px; border-bottom: 1px solid var(--hair); }
.aj-site .wa-sheet .sheet-title, .aj-site .chat-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
.aj-site .wa-sheet .sheet-body { display: grid; gap: 16px; padding: 20px 24px 24px; }
.wa-to { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.wa-to [data-wa-to] { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wa-thread { padding: 20px; background: var(--porcelain); border: 1px solid var(--hair); border-radius: var(--r-1); }
.wa-bubble { max-width: 92%; margin-left: auto; padding: 12px 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--r-3) var(--r-3) var(--r-1) var(--r-3); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-note { font-size: 13px; color: var(--ink-2); }
.wa-copied { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
.wa-copied[hidden] { display: none; }
.aj-site .wa-sheet .sheet-foot { padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); }
.aj-site .wa-sheet .sheet-foot .btn { height: 52px; border-radius: var(--r-1); }
.aj-site .chat-panel { background: var(--porcelain); }
.aj-site .chat-head { background: var(--paper); border-bottom: 1px solid var(--hair); padding-left: 20px; }
.aj-site .chat-sub { font-size: 13px; color: var(--ink-2); }
.aj-site .chat-foot { background: var(--paper); border-top: 1px solid var(--hair); }
@media (min-width: 1024px) { .aj-site .chat-panel { border-radius: var(--r-3) var(--r-3) var(--r-1) var(--r-3); border-color: var(--hair); } }

/* ============================== 9. Dormant bands, the arrival loader, utilities ============================== */
/* the CTA band and the trust strip are not used by any page; they fit the frame if a page brings them back */
.aj-site .cta-band { padding-block: clamp(5rem, 2.6rem + 9.8vw, 11rem); background: var(--green); color: var(--mist); }
.aj-site .cta-band .container { display: grid; gap: 32px; justify-items: start; }
.aj-site .cta-band .t-h2 { max-width: 16ch; color: var(--mist); }
.aj-site .cta-band .btn-row { display: flex; flex-wrap: wrap; gap: 12px 24px; }
@media (min-width: 900px) { .aj-site .cta-band .container { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.trust-strip { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.trust-title { font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--text-2); }
.trust-list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.trust-list > li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 16px; line-height: 1.45; }
@media (min-width: 900px) { .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }

/* the arrival loader (LOADER-SPEC; markup _partials/intro.html, its scripts in tools/build-site.mjs). It only exists
 * under html.intro, which the head script sets on the first page view of a visit (never on /book/, a deep link, a
 * back/forward visit, under reduced motion or without JavaScript). Everything waits, paused, on the solid veil until
 * html.ldr-run: the first frame has painted and the lockup raster has decoded (the head script preloads it; if it is
 * not ready 0.7 s after the first frame the veil just fades). Times from ldr-run (the frame after the first paint, 40 to
 * 130ms after it), one beat at a time, tails overlap:
 *   0.00 to 0.76  the traced outline grows both ways from the top of the arch and the bottom of the U, a 1px mist line
 *   0.50 to 0.96  the raster monogram rises into it (two counter-moving boxes); the outline fades 0.76 to 0.98
 *   1.00 to 1.50  the vermilion star arrives over the raster's own star, the mark still (turn, scale, a small settle)
 *   1.18 to 1.78  the mark glides left to its place in the lockup (ease-in-out, no whip)
 *   1.52 to 2.34  the letters rise one by one as the mark clears them (24ms apart, JOURNEYS 48ms behind)
 *   1.88 to 2.68  the curtain lifts (translate) and, on the same curve, the lockup docks onto the real header logo (FLIP;
 *                 the docking script writes --ldr-dx/-dy/-ds; 680ms under 768px so it lands before the notice band
 *                 shows). Over a day header it rides up with the curtain instead.
 * Only transform and opacity move after the draw, so a busy main thread cannot stall the sequence (the page's late
 * scripts and the motion layer also wait for the end). The outline, the star box and the raster slices share the
 * lockup's own 725 x 240 space, so they line up exactly. The veil takes the pointer, so a skipping tap lands on it. */
.ldr { display: none; }
html.intro .ldr {
  --ldr-w: min(600px, 66vh, 84vw); --ldr-h: calc(var(--ldr-w) * 240 / 725);
  --ldr-curve: cubic-bezier(.625, .05, 0, 1); --ldr-dock: 800ms;
  --ldr-dx: calc(var(--ldr-w) * 0.03); --ldr-dy: calc(-50vh - var(--ldr-h) / 2); --ldr-ds: 0.94; --ldr-fo: 0;
  position: fixed; inset: 0; z-index: calc(var(--z-sheet) + 5); display: block; overflow: clip; pointer-events: none;
}
html.intro .ldr, html.intro .ldr * { animation-play-state: paused; }
html.intro.ldr-run .ldr, html.intro.ldr-run .ldr * { animation-play-state: running; }
.ldr-bg { position: absolute; inset: 0; background: var(--pine); pointer-events: auto; animation: ldr-lift 800ms var(--ldr-curve) 1880ms both; }
.ldr-mark {
  position: absolute; left: calc(50% - var(--ldr-w) / 2); top: calc(50% - var(--ldr-h) / 2);
  width: var(--ldr-w); height: var(--ldr-h); transform-origin: 0 0;
  animation: ldr-dock var(--ldr-dock) var(--ldr-curve) 1880ms both, ldr-fade 150ms linear calc(1730ms + var(--ldr-dock)) both;
}
.ldr-glide { position: absolute; inset: 0; animation: ldr-glide 600ms var(--ease-in-out) 1180ms both; }
.ldr-line { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; animation: ldr-out 220ms linear 760ms both; }
.ldr-line path {
  fill: none; stroke: var(--mist); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1;
  animation: ldr-draw 700ms cubic-bezier(.5, 0, .15, 1) both;
}
.ldr-line path:nth-child(n + 3) { animation-delay: 60ms; }
.ldr-fill { position: absolute; left: 0; top: 0; width: calc(186 / 725 * 100%); height: 100%; overflow: clip; animation: ldr-up 460ms var(--ease-mask) 500ms both; }
.ldr-fill-in {
  --ldr-hole: radial-gradient(circle calc(var(--ldr-w) * 32.5 / 725) at calc(var(--ldr-w) * 64.91 / 725) calc(var(--ldr-w) * 70.57 / 725), transparent 100%, var(--pine) 100%);
  position: absolute; inset: 0; background: var(--ldr-src) 0 0 / var(--ldr-w) auto no-repeat;
  -webkit-mask-image: var(--ldr-hole); mask-image: var(--ldr-hole);
  animation: ldr-down 460ms var(--ease-mask) 500ms both;
}
.ldr-star { position: absolute; transform-origin: 50% 50%; animation: ldr-star 500ms cubic-bezier(.34, 1.4, .64, 1) 1000ms both, ldr-in 120ms linear 1000ms both; }
.ldr-star svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ldr-star path { fill: var(--vermilion); }
.ldr-word { position: absolute; inset: 0; }
.ldr-l {
  position: absolute; left: calc(var(--x) * 100% / 725); top: calc(var(--y) * 100% / 240);
  width: calc(var(--w) * 100% / 725); height: calc(var(--h) * 100% / 240); overflow: clip;
}
.ldr-l > span {
  position: absolute; inset: 0;
  background: var(--ldr-src) calc(var(--ldr-w) * var(--x) / -725) calc(var(--ldr-w) * var(--y) / -725) / var(--ldr-w) auto no-repeat;
  animation: ldr-rise 600ms var(--ease-out) both; animation-delay: calc(1520ms + var(--d, 0ms));
}
@media (max-width: 767px) { html.intro .ldr { --ldr-dock: 680ms; } }
/* the real header logo waits under the docking lockup. The stage's own load sequence waits for the curtain (intro-go,
 * as it starts lifting) and is timed against its edge, which uncovers the page from the bottom up: the card is solid
 * by 2.24 s and settles by 2.74 s, as the curtain clears; the H1 is a third to a half risen as the edge passes it (2.10
 * to 2.20 s); lede and crumbs follow at 2.20 s */
html.intro.intro-dock:not(.intro-done):not(.intro-off) .aj-site .site-header .brand img { visibility: hidden; }
html.intro:not(.intro-go) .aj-site .mh, html.intro:not(.intro-go) .aj-site .mh * { animation-play-state: paused; }
html.intro .aj-site .mh { --mh-delay: 0ms; }
html.intro .aj-site .mh-title .w > span { animation-duration: 800ms; animation-timing-function: var(--ease-out); animation-delay: calc(120ms + var(--i, 0) * 60ms); }
html.intro .aj-site .mh.is-home .mh-title .w > span { animation-delay: calc(180ms + var(--i, 0) * 60ms); }
html.intro .aj-site .mh-crumbs, html.intro .aj-site .mh-lede, html.intro .aj-site .mh-body, html.intro .aj-site .mh-aside > * { animation-delay: 320ms; }
html.intro .aj-site .mh .mh-panel { animation: ldr-card 700ms var(--ease-out) 160ms both, ldr-in 200ms linear 160ms both; }
/* any key, click, wheel or touch skips it (html.intro-off); html.intro-done once the curtain is up */
html.intro.intro-off .ldr { opacity: 0; transition: opacity 250ms var(--ease-out); }
html.intro.intro-done .ldr { display: none; }
@keyframes ldr-lift { to { transform: translateY(-100%); } }
@keyframes ldr-dock { to { transform: translate(var(--ldr-dx), var(--ldr-dy)) scale(var(--ldr-ds)); } }
@keyframes ldr-fade { to { opacity: var(--ldr-fo); } }
@keyframes ldr-glide { from { transform: translateX(38.63%); } }
@keyframes ldr-out { to { opacity: 0; } }
@keyframes ldr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ldr-up { from { transform: translateY(100%); } }
@keyframes ldr-down { from { transform: translateY(-100%); } }
@keyframes ldr-star { from { transform: scale(.2) rotate(-60deg); } }
@keyframes ldr-in { from { opacity: 0; } }
@keyframes ldr-rise { from { transform: translateY(105%); } }
@keyframes ldr-card { from { translate: 0 24px; } to { translate: 0 0; } }

.skip-link { position: absolute; left: 8px; top: 8px; z-index: calc(var(--z-sheet) + 6); padding: 12px 16px; background: var(--paper); color: var(--ink); border-radius: var(--r-1); font-weight: 600; text-decoration: none; translate: 0 -200%; }
.skip-link:focus { translate: 0 0; box-shadow: var(--shadow-float); outline: 2px solid var(--vermilion); outline-offset: 3px; }
html:not(.js) .js-only { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.intro .ldr { display: none; }
  .aj-site .site-header, .aj-site .site-header::before, .aj-site .site-header .brand img, .aj-site .site-drawer, .aj-site .site-drawer.is-open,
  .site-drawer .dl-t, .site-drawer .drawer-main .drawer-group-title, .site-drawer .drawer-side, .aj-site .action-bar, .aj-site .chat-launcher { transition-duration: 0s !important; transition-delay: 0s !important; }
  .aj-site .site-drawer, .aj-site .site-drawer:not(.is-left) { clip-path: none; }
  .site-drawer .drawer-main .dl-t, .site-drawer .drawer-main .drawer-group-title, .site-drawer .drawer-side { translate: none; opacity: 1; }
  html.hdr-hidden .aj-site .site-header { translate: 0 0; }
}
@media print { .site-top, .action-bar, .chat-launcher, .end { display: none; } }

/* ============================== 10. Stage and booking card (F3) ==============================
 * Owned by F3 (SPEC 4.11, 4.13). Use var(--frame-top) for the room the header (and the phone notice strip) needs at
 * the top of a stage. Keep section z-index values below var(--z-header) (10) so the fixed header stays on top. */
/* The stage: _partials/stage.html via BLOCKS.stage, behaviour in map-hero.js. Structure:
 *   .mh-stick[data-stage-scroll] > section.mh.is-photo|is-map|is-plain [.has-booking|.is-title] [.has-layer]
 *   [.is-split] [.has-aside] [.is-home] [.is-planning]
 *     > .mh-map (map pages) . .mh-media (photo + .mh-scrim) . .mh-shade . .mh-wrap > .mh-words, .mh-panel, .mh-aside
 * Layers: map 0, photo 1, shade 2, words and cards 3. motion.js writes --stage-p (0 to 1) on .mh-stick. */
.mh-stick { position: relative; z-index: 0; }
.mh-stick + * { position: relative; z-index: 1; }
/* the next section slides over the stage while it stays put; a stage taller than the window (map-hero.js .is-tall),
 * a split stage and a booking card in the flow (1024 to 1279) scroll normally */
@media (min-width: 1280px) and (min-height: 640px) {
  .mh-stick:not(.is-tall):not(:has(> .mh.is-split)) { position: sticky; top: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) and (min-height: 640px) {
  .mh-stick:not(.is-tall):has(> .mh.is-title:not(.has-aside):not(.is-split)) { position: sticky; top: 0; }
}

.aj-site .mh {
  --mh-delay: 200ms; --mh-fg: var(--mist); --mh-fg-2: var(--mist-2); --card-w: 440px;
  --mh-pad-b: clamp(32px, 6vw, 96px);
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: max(640px, 100svh); overflow: clip; background: var(--pine); color: var(--mh-fg);
  /* the semantic layer for anything a page puts in the words (actions, facts): night */
  --text: var(--mist); --text-2: var(--mist-2); --text-3: var(--mist-2); --heading: var(--mist); --line: var(--mist-14);
  --link: var(--mist); --focus: var(--vermilion-glow);
}
@media (min-width: 1440px) { .aj-site .mh { --card-w: 460px; } }
/* short desktop screens (a 1280 x 720 laptop): a smaller foot and top, a compact card (booking.css) and, on stages
 * whose card floats right and has no aside, the notice card moves to the top left (over the photo, above the bottom-aligned words), so
 * the floating card and the notice never meet and the stage fits the window */
@media (min-width: 1280px) and (max-height: 820px) {
  .aj-site .mh { --mh-pad-b: 24px; }
  .aj-site .mh .mh-wrap { padding-top: calc(var(--frame-top, 88px) + 16px); }
  /* (stages with an aside keep it right: their words climb to the top left; under 760px tall their card compacts so it
     starts below the notice, booking.css) */
  .has-stage:has(.mh.has-booking:not(.is-split):not(.has-aside)) .site-top [data-live="notice"] { left: var(--gutter); right: auto; }
}
/* very short windows (1366 x 657): while the notice shows, the card on aside stages starts below it, even if the stage
   then runs a little past the window */
@media (min-width: 1280px) and (max-height: 700px) {
  .has-stage:has(.site-top [data-notice]:not([hidden])) .mh.has-booking.has-aside:not(.is-split) .mh-wrap { padding-top: calc(var(--frame-top, 88px) + 88px); }
}

/* ---- the photograph: full bleed, settles from 1.12 on load, scales a little as the stage recedes ---- */
.mh-media { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--pine); transition: opacity 900ms var(--ease-in-out); }
.aj-site .mh-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0;
  object-position: var(--pos, 50% 50%); transform: scale(calc(1 + 0.08 * var(--stage-p, 0))); transform-origin: 50% 70%;
  animation: mh-settle var(--dur-stage, 2200ms) var(--ease-out) both;
}
@media (min-width: 1024px) { .aj-site .mh-photo { object-position: var(--pos-lg, var(--pos, 50% 50%)); } }
/* one-colour scrims: pine at 60% under the header, pine at 82% at the foot, eased so the H1 always reads */
.mh-scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--scrim-t) 0, var(--scrim-0) 28%),
    linear-gradient(to top, var(--scrim-b) 0, color-mix(in srgb, var(--pine) 66%, transparent) 34%, color-mix(in srgb, var(--pine) 34%, transparent) 60%, var(--scrim-0) 84%); }
/* from 1024 the words sit in the left half and can climb above the foot scrim (a long H1, an aside): a one-colour
 * side wash keeps the H1 and the lede on pine wherever they land, while the right half of the photo stays bright */
@media (min-width: 1024px) {
  .mh:not(.is-split) .mh-scrim {
    background:
      linear-gradient(to bottom, var(--scrim-t) 0, var(--scrim-0) 28%),
      linear-gradient(to right, color-mix(in srgb, var(--pine) 52%, transparent) 0, color-mix(in srgb, var(--pine) 30%, transparent) 38%, var(--scrim-0) 62%),
      linear-gradient(to top, var(--scrim-b) 0, color-mix(in srgb, var(--pine) 66%, transparent) 34%, color-mix(in srgb, var(--pine) 34%, transparent) 60%, var(--scrim-0) 84%);
  }
}
.mh-shade { position: absolute; inset: 0; z-index: 2; background: var(--pine); opacity: calc(0.6 * var(--stage-p, 0)); pointer-events: none; }

/* ---- the words: breadcrumbs, the H1 in word masks, the lede, actions ---- */
.mh-wrap { position: relative; z-index: 3; padding-top: calc(var(--frame-top, 88px) + 32px); padding-bottom: var(--mh-pad-b); }
.mh-words { position: relative; min-width: 0; translate: 0 calc(-8vh * var(--stage-p, 0)); opacity: calc(1 - 0.8 * var(--stage-p, 0));
  transition: opacity 600ms var(--ease-out), visibility 0s, color 600ms var(--ease-out); color: var(--mh-fg); }
.aj-site .mh-title { margin: 0; color: var(--mh-fg); max-width: 13ch; transition: color 600ms var(--ease-out); }
.aj-site .mh-title.t-h1 { max-width: 14ch; }
.mh-title .w { display: inline-block; overflow: clip; vertical-align: top; padding: 0.06em 0 0.12em; margin: -0.06em 0 -0.12em; }
.mh-title .w > span { display: inline-block; animation: mh-word var(--dur-reveal, 1000ms) var(--ease-mask, var(--ease-out)) both; animation-delay: calc(var(--mh-delay) + var(--i, 0) * 70ms); }
/* the home H1 is the largest thing on the first screen (the LCP element): it is never hidden in a mask; its words
 * paint at once and only rise a little, unmasked, so the curve is expo-out */
.mh.is-home .mh-title .w { overflow: visible; }
.mh.is-home .mh-title .w > span { animation-name: mh-rise; animation-timing-function: var(--ease-out); }
.mh-crumbs, .aj-site .mh .breadcrumbs { margin: 0 0 clamp(16px, 2vw, 28px); color: var(--mh-fg); }
.aj-site .mh .breadcrumbs [aria-current] { color: var(--mh-fg); }
.aj-site .mh .breadcrumbs li + li::before { color: var(--mh-fg-2); }
.mh-lede { margin: clamp(16px, 1.6vw, 24px) 0 0; max-width: 36ch; font-size: var(--fs-lede, 1.1875rem); line-height: 1.5; color: var(--mh-fg-2); text-wrap: pretty; transition: color 600ms var(--ease-out); }
.mh-body { margin-top: clamp(24px, 2.4vw, 36px); max-width: 560px; }
.mh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.aj-site .mh .mh-actions .btn-link { color: var(--mh-fg); }
.mh-facts { display: grid; margin: 24px 0 0; border-top: 1px solid var(--line); }
.mh-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.mh-facts dt { color: var(--mh-fg-2); }
.mh-facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.mh-caption { position: absolute; right: var(--gutter); bottom: 12px; z-index: 3; margin: 0; font-size: var(--fs-meta, 13px); color: var(--mist-2); }
/* the load sequence after the last word: breadcrumbs, lede, actions and the aside fade up; the card rises at 500ms */
.mh-crumbs, .mh-lede, .mh-body, .mh-aside > * { animation: mh-up 900ms var(--ease-out) both; animation-delay: calc(var(--mh-delay) + var(--n, 5) * 70ms + 250ms); }
.mh-words .mh-crumbs { animation-delay: calc(var(--mh-delay) + 100ms); }

/* ---- the second floating card (hourly hours, company bookings, a guest arrival) and the home's Alphard card ---- */
.mh-aside { position: relative; z-index: 3; min-width: 0; margin-top: 16px; transition: opacity 600ms var(--ease-out), visibility 0s; }
.aj-site .mh-card { padding: 20px; background: var(--paper); color: var(--ink); border: 1px solid var(--float-line); border-radius: var(--r-3); box-shadow: var(--shadow-float);
  --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3); --heading: var(--ink); --line: var(--hair); --link: var(--ink); --focus: var(--vermilion);
  --line-strong: var(--ink); --fill-hover: var(--ink); --fill-hover-fg: var(--paper); --accent-fill: var(--ink); --accent-fill-fg: var(--paper);
  --strong-btn-bg: initial; --strong-btn-fg: initial; --strong-btn-line: initial; --strong-btn-fill: initial; }
.aj-site .home-car { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; max-width: 420px; padding: 8px 18px 8px 8px; text-decoration: none; }
.aj-site .home-car-img { width: 96px; height: 64px; border-radius: var(--r-1); object-fit: cover; object-position: var(--pos, 50% 50%); }
.home-car-body { display: grid; gap: 2px; min-width: 0; }
.home-car-t { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.home-car-l { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.home-car .icon { color: var(--ink-2); transition: translate var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
.home-car:hover .icon { translate: 4px 0; color: var(--ink); }
.home-car:hover .home-car-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* ---- the card in the stage (its inside is booking.css "card") ---- */
.mh .mh-panel { position: relative; z-index: 3; min-width: 0; margin-top: 28px; animation: mh-card 1000ms var(--ease-out) both; animation-delay: calc(var(--mh-delay) + 300ms); }

/* ---- the map layer (map pages): under the photo, shown while planning; the map-first stage shows it at once ---- */
.mh-map { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--map-sea); }
.mh.has-layer .mh-map { visibility: hidden; transition: visibility 0s 900ms; }
.mh.has-layer.is-planning .mh-map { visibility: visible; transition: none; }
.mh.is-planning .mh-media { opacity: 0; }
.mh-backdrop { position: absolute; inset: 0; }
.mh { --mh-k: 0.728; --mh-cx: 50%; --mh-cy: 30%; }
.mh-svg { position: absolute; left: calc(var(--mh-cx) - 439.6px * var(--mh-k)); top: calc(var(--mh-cy) - 255.8px * var(--mh-k)); width: calc(1000px * var(--mh-k)); height: calc(560px * var(--mh-k)); overflow: visible; }
.mh-land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mh-water { fill: var(--map-sea); stroke: var(--map-coast); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mh-xway { fill: none; stroke: var(--map-xway); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mh-frame { position: absolute; z-index: 1; display: block; border: 0; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease-out); filter: var(--map-filter); }
.mh-frame.is-in, .mh-gmap.is-in { opacity: 1; }
.mh-gmap { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 600ms var(--ease-out); }
/* over the light map the words turn ink (the map-first stage, and phones while planning) */
.mh.is-map, .mh.is-planning { --mh-fg: var(--ink); --mh-fg-2: var(--ink-2); --text: var(--ink); --text-2: var(--ink-2); --line: var(--hair); --link: var(--ink); --focus: var(--vermilion);
  --line-strong: var(--ink); --fill-hover: var(--ink); --fill-hover-fg: var(--paper); --accent-fill: var(--ink); --accent-fill-fg: var(--paper); --strong-btn-bg: initial; --strong-btn-fg: initial; --strong-btn-line: initial; --strong-btn-fill: initial; }
.aj-site .mh.is-map { background: var(--map-sea); }
/* planning: the card is the focus, so the words and the aside step back (on phones the words stay, in ink) */
.mh.is-planning .mh-aside { opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease-out), visibility 0s 400ms; }
@media (min-width: 1024px) {
  .mh.is-planning .mh-words { opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease-out), visibility 0s 500ms; }
}

/* ---- phones and tablets (under 1024): the photograph holds the top of the stage, the sheet sits at its foot ---- */
@media (max-width: 1023px) {
  .mh.has-booking .mh-media { bottom: auto; height: min(100%, max(70svh, 480px)); }
  /* the H1 and the lede sit in the middle of the photograph here: a pine wash that deepens towards the sheet keeps them
     readable over bright skies (Q2, sampled about 5:1 or better; first written per page on airport, Seletar, hourly, occasions) */
  .mh.has-booking .mh-scrim { background: linear-gradient(to bottom, var(--scrim-t) 0, color-mix(in srgb, var(--pine) 50%, transparent) 28%, color-mix(in srgb, var(--pine) 70%, transparent) 60%, var(--scrim-b) 82%, var(--pine) 100%); }
  .mh-wrap { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .mh.has-booking .mh-panel { width: auto; margin-top: 24px; margin-inline: calc(var(--gutter) * -1 + 12px); }
  .mh-aside { margin-top: 12px; }
  .aj-site .mh.has-booking.is-planning { background: var(--map-sea); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .mh.has-booking .mh-panel { width: 100%; max-width: 560px; margin-inline: 0; }
}

/* ---- 1024 to 1279: every field shows, the card sits under the H1 in the flow ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mh.has-booking .mh-panel { width: min(560px, 100%); margin-top: 40px; }
  .mh-aside { margin-top: 20px; max-width: 560px; }
  .mh.has-booking .mh-media { bottom: 0; height: auto; }
  .mh.has-booking .mh-scrim { background: linear-gradient(to bottom, var(--scrim-t) 0, color-mix(in srgb, var(--pine) 36%, transparent) 40%, color-mix(in srgb, var(--pine) 50%, transparent) 60%, var(--scrim-b) 100%); }
}

/* ---- from 1280: the card floats right, bottom aligned with the words; the aside sits under the lede ---- */
@media (min-width: 1280px) {
  .mh { --mh-k: 1.456; --mh-cx: calc((100% - var(--card-w) - 4 * var(--gutter)) / 2 + var(--gutter)); --mh-cy: calc(50% + 40px); }
  .mh-wrap { display: grid; grid-template-columns: minmax(0, 1fr) var(--card-w); grid-template-rows: 1fr auto; grid-template-areas: "words card" "aside card"; column-gap: clamp(40px, 5vw, 96px); align-items: end; }
  .mh-words { grid-area: words; }
  .mh .mh-panel { grid-area: card; align-self: end; margin-top: 0; }
  .mh-aside { grid-area: aside; align-self: end; margin-top: 28px; max-width: 440px; }
  .mh.is-title .mh-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "words aside"; }
  .mh.is-title .mh-aside { margin-top: 0; max-width: none; }
  .mh.is-title:not(.has-aside) .mh-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "words"; }
}

/* ---- the split stage (fit="right"): the photo in columns 6 to 12, a graphite panel with the words and the card ---- */
@media (min-width: 1024px) {
  .aj-site .mh.is-split { background: var(--green); justify-content: center; }
  .mh.is-split .mh-media { left: auto; width: 58.334%; height: auto; bottom: 0; }
  .mh.is-split .mh-scrim { background: linear-gradient(to bottom, var(--scrim-t) 0, var(--scrim-0) 24%); }
  .mh.is-split .mh-wrap { display: block; width: 41.666%; max-width: none; margin: 0; padding-inline: var(--gutter) clamp(32px, 4vw, 72px); }
  .aj-site .mh.is-split .mh-title { font-size: clamp(2.5rem, 0.6rem + 3.2vw, 4.5rem); }
  .mh.is-split .mh-panel { width: 100%; max-width: 520px; margin-top: clamp(28px, 3vw, 44px); }
  .mh.is-split .mh-aside { margin-top: 20px; }
  /* if the words and the card are taller than the window, the photo stays pinned while the panel scrolls past it */
  .aj-site .mh.is-split .mh-media { overflow: clip; }
  .aj-site .mh.is-split .mh-photo { position: sticky; inset: auto; top: 0; display: block; height: max(640px, 100svh); }
}
/* short windows (1280 x 720, 1024 x 768): the split words tighten so the words and the card fit the window */
@media (min-width: 1024px) and (max-height: 860px) {
  .aj-site .mh.is-split .mh-wrap { padding-top: calc(var(--frame-top, 88px) + 12px); padding-bottom: 20px; }
  .aj-site .mh.is-split .mh-title { font-size: clamp(2.25rem, 0.9rem + 2.1vw, 3.25rem); }
  .aj-site .mh.is-split .mh-crumbs, .aj-site .mh.is-split .breadcrumbs { margin-bottom: 12px; }
  .aj-site .mh.is-split .mh-lede { margin-top: 12px; font-size: 1.0625rem; }
  .aj-site .mh.is-split .mh-panel { margin-top: 20px; }
}

/* ---- keyframes, and nothing moves when motion is reduced ---- */
@keyframes mh-settle { from { scale: 1.12; } to { scale: 1; } }
@keyframes mh-rise { from { translate: 0 0.32em; } to { translate: 0 0; } }
@keyframes mh-word { from { translate: 0 calc(105% + 0.2em); } to { translate: 0 0; } }
@keyframes mh-up { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes mh-card { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .aj-site .mh-photo, .mh-title .w > span, .mh.is-home .mh-title .w > span, .mh-crumbs, .mh-lede, .mh-body, .mh-aside > *, .mh-panel { animation: none; }
  .aj-site .mh-photo { transform: none; }
  .mh-words { translate: none; opacity: 1; }
  .mh-shade { opacity: 0; }
  .mh-media, .mh-words, .mh-aside, .mh-frame, .mh-gmap, .mh-map { transition: none; }
}