/* The journey's MECHANIC, shared by every client site (the cinematic
   style is the only thing that stays with every site; the cards and the rest follow the trade and the questionnaire).

   So this file holds ONLY what makes the scroll scrub the video and pins the cards to the footage:
   the sticky stage, the scene, the set, the surfaces, the reveal timing and the fallbacks. It has
   NO colours (bar the black behind the video), no fonts, no card look. Every card, heading, button,
   header and footer is styled by the client's own skin.css, designed for that client.

   Camera and scrubbing: journey.js. Sizes on a surface are FRAME UNITS (the frame is 1600 x 900):
   the camera scales the whole set, so 14px on a card is ~27px on a laptop and ~16px on a phone.
   The skin must define --bar-h (the header's height; journey.js reads it) and --ease. */

.main--film { padding: 0; }
.film { position: relative; background: #000; }
.film__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; overflow: clip; background: #000; }
.film__vignette { position: absolute; inset: 0; z-index: 8; pointer-events: none; }

.scn { position: absolute; inset: 0; visibility: hidden; overflow: hidden; overflow: clip; }
.scn.is-on { visibility: visible; }
.scn__set { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
.scn__plate, .scn__clip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.scn__clip { opacity: 0; }
.scn__clip.is-ready { opacity: 1; }
.scn.is-flying .srf { visibility: hidden; }
.scn__black { position: absolute; inset: 0; z-index: 7; background: #000; opacity: 0; pointer-events: none; }
.srf { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 0; box-sizing: border-box; margin: 0; }
:where(.srf) :where(h1, h2, h3, p, ol, ul, li, dl, dd, blockquote) { margin: 0; padding: 0; }
:where(.srf) :where(ol, ul) { list-style: none; }

/* a card arrives as the camera reaches its stop, and leaves again on the way back up */
.film.is-live :is([data-in], [data-win]) { opacity: 0; transform: translateY(6px);
  transition: opacity 0.7s var(--ease, ease), transform 0.9s var(--ease, ease); }
.film.is-live :is([data-in], [data-win]).is-in { opacity: 1; transform: none; }
/* a card that has faded out is gone: it must never catch a click meant for the card in its place */
.film.is-live [data-win]:not(.is-in) { pointer-events: none; transition-duration: 0.3s; }
/* a stop's next card waits for the last one to be gone, so two are never on screen at once */
.film.is-live [data-win][data-turn].is-in { transition-delay: 0.3s, 0s, 0s; }
/* the frame held over the video while a jump dissolves into its new place: the set's own box and
   origin, beside the set and above it, under the cards; journey.js freezes its camera */
.scn__xfade { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; max-width: none; transform-origin: 0 0; z-index: 1; display: block; opacity: 0; pointer-events: none; }
/* a centred card (data-pop; journey.js adds .is-pop on a laptop): laid on the screen, not on the
   frame, it grows out of the centre as its stop begins and shrinks back into it as the stop ends.
   journey.js writes its size and fade from the scroll every frame, so no transition may chase them.
   Reduced motion keeps the plain fade below, at full size. */
@media (prefers-reduced-motion: no-preference) {
  .film.is-pop.is-live [data-pop] { transition: none; filter: none; }
}
/* a phone held upright (journey.js: is-lb): the WHOLE 16:9 film in a full-width window, its own
   colours blurred and dimmed around it (the ambient canvas journey.js draws), and each card laid flat
   below the window at reading size. The window's top and bottom edges melt into the ambient; the
   mask's size and place ride the window (journey.js), so a push-in keeps the soft edge. */
.film__amb { display: none; }
.film.is-lb .film__amb { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  filter: blur(30px) saturate(1.15) brightness(0.46); transform: scale(1.08); }
.film.is-lb .scn__set, .film.is-lb .scn__xfade { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.film.is-lb .scn__shade, .film.is-lb .scn__hint { display: none; }
.film.is-lb .scn__copy { transform: none; }
/* then its content cascades in, one block after another (a skin may restyle, never remove, this) */
.scn--journey .j-card > * { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease, ease), transform 0.8s var(--ease, ease); }
.scn--journey .j-card.is-in > * { opacity: 1; transform: none; }
.scn--journey .j-card.is-in > :nth-child(2) { transition-delay: 0.08s; }
.scn--journey .j-card.is-in > :nth-child(3) { transition-delay: 0.16s; }
.scn--journey .j-card.is-in > :nth-child(4) { transition-delay: 0.24s; }
.scn--journey .j-card.is-in > :nth-child(n+5) { transition-delay: 0.32s; }

/* a stop's next card (data-turn) lands on the other side while the camera pushes in, and its words
   slide in from that side, so the change reads at a normal scroll (a centred card has no side: it
   grows out of the centre like every other) */
@media (prefers-reduced-motion: no-preference) {
  :where(.film:not(.is-pop)) .scn--journey .j-card[data-turn="r"] > * { transform: translateX(36px); }
  :where(.film:not(.is-pop)) .scn--journey .j-card[data-turn="l"] > * { transform: translateX(-36px); }
  .scn--journey .j-card[data-turn].is-in > * { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .film.is-live :is([data-in], [data-win]) { transform: none; transition: opacity 0.3s linear; }
  .scn--journey .j-card > * { transform: none; transition: opacity 0.3s linear; }
}

/* FAILSAFE (website skill, step 2: a reveal system must never leave content stuck hidden). Until
   journey.js has laid the film out it does not add .is-live, so with no script, a script error or
   a blocked video the film is a plain page: the poster on top, every card in reading order below
   it, nothing hidden and nothing stacked on top of anything else. (.is-flow: the phone version
   below has its own layout, which this must not fight.) */
:root:not(.j-wait) .film:not(.is-live):not(.is-flow) .film__stage { position: static; height: auto; overflow: visible; }
:root:not(.j-wait) .film:not(.is-live):not(.is-flow) .scn { position: static; visibility: visible; overflow: visible; }
:root:not(.j-wait) .film:not(.is-live):not(.is-flow) .scn__set { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; }
:root:not(.j-wait) .film:not(.is-live):not(.is-flow) .scn__clip, :root:not(.j-wait) .film:not(.is-live):not(.is-flow) .scn__black, :root:not(.j-wait) .film:not(.is-live):not(.is-flow) .film__vignette { display: none; }
:root:not(.j-wait) .film:not(.is-live):not(.is-flow) .srf { position: relative; width: auto !important; height: auto !important; transform: none !important;
  max-width: 44rem; margin: 2rem auto; }
:root:not(.j-wait) .film:not(.is-live):not(.is-flow) .j-card > * { opacity: 1; transform: none; }
/* the fallback column: nothing a skin draws around a card (a glow, a shadow plate) may push the page
   sideways, and on a phone the card headings, sized for the film's frame, are capped to the screen */
:root:not(.j-wait) .film:not(.is-live):not(.is-flow) { overflow-x: clip; }
@media (max-width: 700px) {
  :root:not(.j-wait) .film:not(.is-live) .j-h { font-size: clamp(28px, 9.5vw, 46px) !important; overflow-wrap: break-word; }
}

/* THE PHONE VERSION. A phone's GPU cannot carry the film (a real Android phone cut
   titles off mid-render and sliced cards at hard edges), so on a touch screen, or any screen 820px
   wide or less, journey.js never builds it (FLOW there; keep the query in step). The page is a plain
   document: the hero's plate, then each stop's still (.j-still, a <picture> only a phone fetches,
   when the build writes one) and its card in reading order. No video, no canvas, no backdrop blur,
   no fixed layer. journey.js adds .is-flow, a gentle arrival (.j-pre) and opens a fork's branches
   (.is-forked / .is-open). The card look stays the client's skin.css (on a solid pane here). */
.j-still { display: none; }
/* No script, a blocked script, or the engine failing (boot.js and journey.js put .sc-failsafe on <html>):
   a laptop falls back to the phone's plain layout, each scene's still then its cards in normal flow,
   instead of an empty black stage with every scene hidden. The phone rules below win on a phone. */
html:not(.js) .main--film, .sc-failsafe .main--film { padding-top: 0; }
html:not(.js) .film, .sc-failsafe .film { --g: 16px; --cw: min(640px, calc(100% - 2 * var(--g))); --still: min(100%, 1200px);
  height: auto !important; padding-bottom: 72px; background: var(--night, #0b0d10); overflow-x: clip; }
html:not(.js) .film__stage, .sc-failsafe .film__stage { position: static; height: auto; overflow: visible; background: none; }
html:not(.js) .film :is(.film__vignette, .film__amb, .scn__black, .scn__shade, .scn__clip, .scn__xfade),
.sc-failsafe .film :is(.film__vignette, .film__amb, .scn__black, .scn__shade, .scn__clip, .scn__xfade) { display: none !important; }
html:not(.js) .film .scn, .sc-failsafe .film .scn { position: relative; inset: auto; display: block; visibility: visible; overflow: visible; min-height: 0; padding: 0; }
/* transform is journey.js's camera; translate and scale are trigger.js's push-in, focus pan and card
   placing (separate properties, so `transform: none` alone leaves them): all three go */
html:not(.js) .film .scn__set, .sc-failsafe .film .scn__set { position: relative; left: auto; top: auto; width: var(--still); height: auto; margin: 48px auto 0; transform: none !important; translate: none !important; scale: none !important; }
html:not(.js) .film .scn__plate, .sc-failsafe .film .scn__plate { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
html:not(.js) .film .srf, .sc-failsafe .film .srf { position: relative; left: auto; top: auto; z-index: 1; width: var(--cw) !important; height: auto !important;
  max-height: none; overflow: visible; transform: none !important; translate: none !important; scale: none !important; margin: 24px auto 0; visibility: visible !important; }
html:not(.js) .film :is([data-in], [data-win], .scn--journey .gc > *),
.sc-failsafe .film :is([data-in], [data-win], .scn--journey .gc > *) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000), (hover: none) and (pointer: coarse) and (min-aspect-ratio: 1351/1000), (max-width: 820px) {
  .film { height: auto !important; overflow-x: clip; }
  .film, .film *, .film *::before, .film *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .film__stage { position: static; height: auto; overflow: visible; background: none; }
  .film__vignette, .film__amb, .scn__black, .scn__shade, .scn__hint, .scn__clip, .scn__xfade { display: none !important; }
  .scn { position: relative; inset: auto; display: block; visibility: visible; overflow: visible; }
  .scn__set, .j-still { position: relative; left: auto; top: auto; width: 100%; height: auto; transform: none !important; translate: none !important; scale: none !important; }
  .scn__set[data-flow="off"] { display: none; }
  .j-still { display: block; }
  .scn__set picture, .j-still picture { display: block; }
  .scn__plate, .j-still img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .srf { position: relative; left: auto; top: auto; width: min(44rem, calc(100% - 32px)) !important; height: auto !important;
    transform: none !important; translate: none !important; scale: none !important; margin: 2rem auto; visibility: visible; }
  .srf, .j-still { scroll-margin-top: calc(var(--bar-h, 64px) + 14px); }
  .scn--journey .j-card > *, .scn--journey .j-card[data-turn] > * { opacity: 1; transform: none; transition: none; }
  .film.is-forked [data-branch]:not(.is-open) { display: none; }
  .film.is-flow .j-pre { opacity: 0; translate: 0 22px; transition: opacity 0.7s var(--ease, ease), translate 0.9s var(--ease, ease); }
  .film.is-flow .j-pre.is-seen { opacity: 1; translate: none; }
}
@media (max-width: 700px) {
  .film.is-flow .j-h { font-size: clamp(28px, 9.5vw, 46px) !important; overflow-wrap: break-word; }
}
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000) and (prefers-reduced-motion: reduce), (hover: none) and (pointer: coarse) and (min-aspect-ratio: 1351/1000) and (prefers-reduced-motion: reduce), (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .film.is-flow .j-pre { opacity: 1; translate: none; transition: none; }
}
/* THE TRIGGER (trigger.js, laptops only): one gesture plays the film to the next stop. Each card
   belongs to its own scene: the one the camera is heading for (.is-near) is not there until its
   scene is in view, then trigger.js brings it in with the camera, its words already set out; the one
   it leaves (.is-far) goes off with its scene. Every card rests in the middle of the room under the bar, top to
   bottom, on its side with ONE even margin (--j-m, which trigger.js and deck.js both read), a wide
   card dead centre. */
:root { --j-m: clamp(40px, 4.6vw, 110px); }
.film.is-trig [data-win]:focus { outline: none; }
.film.is-trig .scn--journey .j-card:is(.is-near, .is-far) > * { opacity: 1; transform: none; transition: none; }
/* on a laptop where the trigger or the deck moves the page, the page has no scrollbar (the gestures
   and the keyboard move it); a deck page's sections wait, hidden, for deck.js, never longer than
   2.5 s (then the plain page shows, as it does on a phone, with no script or with reduced motion) */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  @media (hover: hover), (pointer: fine), (pointer: none), (hover: none) and (pointer: coarse) and (min-aspect-ratio: 4/5) and (max-aspect-ratio: 27/20) {
    html.js:not(.sc-failsafe):not(.j-flat):has(.scn--journey[data-tmap], main[data-deck]) { scrollbar-width: none; }
    html.js:not(.sc-failsafe):not(.j-flat):has(.scn--journey[data-tmap], main[data-deck])::-webkit-scrollbar { display: none; }
    html.js:not(.j-deck):not(.j-flat):not(.sc-failsafe) main[data-deck] > * { animation: j-deck-wait 0s linear 2.5s both; }
  }
}
@keyframes j-deck-wait { from { visibility: hidden; } to { visibility: visible; } }

/* THE END (end.js): after the last stop the picture zooms out a little and rises, and a thin strip
   comes up below it on the same frame, blurred and darkened (.j-end-ground, a canvas under the
   picture). The strip's words line up with the picture's edges (--j-end-x). While the strip exists
   the real footer is out of sight: one pixel, unseen, its links out of the Tab order (end.js), still in
   the page for search engines, screen readers and the reviews script. Phones, reduced motion and no
   script never get the strip, and keep their
   footer. Every rule here starts at .j-end so a skin's own footer and reviews rules never reach in. */
html.j-end-on:not(.sc-failsafe) footer.j-foot { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  padding: 0 !important; border: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; white-space: nowrap !important; }
html.j-end-on:not(.sc-failsafe) .main--film > #reviews { display: none !important; }
.j-end-ground { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0;
  filter: blur(26px) brightness(0.42) saturate(1.15); transform: scale(1.12); transition: opacity 0.3s linear; }
.j-end-ground.is-on { opacity: 1; }
.j-end-pic { border-radius: 10px; box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.j-end { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; color: #fff; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(26px);
  transition: opacity 0.4s var(--ease, ease), transform 0.8s var(--ease, ease), visibility 0s linear 0.8s; }
.j-end.is-open { pointer-events: auto; opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.7s var(--ease, ease) 0.35s, transform 0.95s var(--ease, ease) 0.25s, visibility 0s; }
.j-end:focus { outline: none; }
.j-end .j-end-in { padding: 20px var(--j-end-x, var(--j-m)) 16px; }
.j-end :is(p, ul, ol, li, nav) { margin: 0; padding: 0; }
.j-end a { color: inherit; text-decoration: none; }
.j-end a:hover, .j-end a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.j-end .j-end-row { display: flex; flex-wrap: wrap; align-items: center; }
.j-end .j-end-top { flex-wrap: nowrap; }
.j-end .j-end-top > * { flex: none; margin: 0; padding: 2px clamp(16px, 1.8vw, 44px); border-left: 1px solid rgba(255, 255, 255, 0.22); }
.j-end .j-end-top > :first-child { padding-left: 0; border-left: 0; }
.j-end .j-end-top > :last-child { padding-right: 0; }
.j-end .j-end-top > .j-end-google { margin-left: auto; }
.j-end .j-end-brand { display: inline-flex; }
.j-end .j-end-ids { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 7px; font-size: 13px; line-height: 1.3; letter-spacing: 0.06em; opacity: 0.8; }
.j-end .j-end-ids > span + span::before { content: "\00B7"; margin-right: 10px; }
.j-end .j-end-reach { display: flex; flex-direction: column; gap: 4px; }
.j-end:not(.has-google) .j-end-top > .j-end-reach { flex-direction: row; align-items: baseline; gap: 0 26px; margin-left: auto; border-left: 0; }
.j-end .j-end-base { flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 13px; line-height: 1.3; }
.j-end .j-end-nav, .j-end .j-end-nav ul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; list-style: none; }
.j-end .j-end-nav { gap: 6px 34px; min-width: 0; }
.j-end .j-end-more { opacity: 0.72; }
.j-end.is-tight .j-end-more { display: none; }
.j-end.is-stack .j-end-ids { flex-direction: column; gap: 2px 0; }
.j-end.is-stack .j-end-ids > span + span::before { content: none; }
.j-end .j-end-small { flex: none; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 4px 20px; opacity: 0.8; white-space: nowrap; }
/* their Google rating in the strip: the attribution keeps chat-core.css's rules, white (--j-gm) */
.j-end .j-reviews.j-reviews--strip { position: static; z-index: auto; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.j-end .j-end-top > .j-reviews.j-reviews--strip { margin-left: auto; padding: 2px 0 2px clamp(16px, 1.8vw, 44px); }
.j-end .j-reviews--strip .j-reviews-box { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 20px; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; text-align: left; --j-gm: #fff; }
.j-end .j-end-gcol { display: flex; flex-direction: column; gap: 5px; }
.j-end .j-end-gline { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 12px; white-space: nowrap; }
.j-end .j-reviews--strip :is(.j-reviews-attr, .j-reviews-more, .j-reviews-ask, .j-reviews-legal) { margin: 0; padding: 0; }
.j-end .j-reviews--strip .j-reviews-sum { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 1.3; white-space: nowrap; }
.j-end .j-reviews--strip .j-reviews-sum .j-review-stars { margin: 0; font-size: 15px; letter-spacing: 0.1em; }
.j-end .j-end-glegal { gap: 0 14px; font-size: 13px; line-height: 1.3; }
.j-end .j-end-glegal .j-reviews-legal { opacity: 0.75; }
.j-end .j-end-glegal :is(.j-reviews-legal, .j-reviews-more) { color: inherit; font: inherit; }
.j-end .j-end-glegal :is(.j-reviews-legal, .j-reviews-more) a { margin: 0 14px 0 0; color: inherit; font: inherit; font-weight: 400; }
.j-end .j-end-glegal :is(.j-reviews-legal, .j-reviews-more) a:last-child { margin-right: 0; }
.j-end .j-reviews--strip .j-reviews-write { display: inline-flex; align-items: center; min-height: 0; height: 36px; padding: 0 16px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 3px; background: none; color: inherit; box-shadow: none; font-size: 13px; letter-spacing: 0.04em; }
.j-end .j-reviews--strip .j-reviews-write:hover, .j-end .j-reviews--strip .j-reviews-write:focus-visible { background: rgba(255, 255, 255, 0.12); text-decoration: none; }
/* the local pages' links come along only where the row has room for them on one line */
.j-end .j-end-base { container-type: inline-size; }
@container (max-width: 1480px) { .j-end .j-end-nav .j-end-more { display: none; } }
.j-end.is-wide .j-end-top { flex-wrap: wrap; row-gap: 12px; }
.j-end.is-wide .j-end-top > .j-reviews.j-reviews--strip { min-width: 0; }
.j-end.is-wide .j-reviews--strip .j-reviews-box { flex-wrap: wrap; row-gap: 10px; }
html.j-end-on .j-chat { transition: bottom 0.9s var(--ease, ease), right 0.9s var(--ease, ease); }
html.j-end-open .j-chat { bottom: calc(var(--j-end-h, 120px) + 18px); right: calc(var(--j-end-x, 16px) + 18px); }
@media (prefers-reduced-motion: reduce) { .j-end, .j-end.is-open { transition: none; transform: none; } }
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000), (hover: none) and (pointer: coarse) and (min-aspect-ratio: 1351/1000), (max-width: 820px) { .j-end, .j-end-ground { display: none !important; } }
.sc-failsafe .j-end { display: none !important; }
@media print { .j-end, .j-end-ground { display: none !important; } }

/* THE CUE (end.js jCue, put up by trigger.js and deck.js on a page's first stop only): a thin chevron
   down with one word under it in small spaced capitals, bottom centre, clear of the chat button and
   the cards; light with a soft shadow so it reads on any picture; a gentle bob. It fades out on the
   first move. */
.j-cue { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 14; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--paper, #fff); pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 12px rgba(0, 0, 0, 0.45)); opacity: 0; transition: opacity 0.6s ease; }
.j-cue.is-on { opacity: 0.96; }
.j-cue svg { display: block; width: 18px; height: 10px; overflow: visible; }
.j-cue-word { font: 500 11px/1 var(--text, system-ui, sans-serif); letter-spacing: 0.24em; text-transform: uppercase; padding-left: 0.24em; }
@media (prefers-reduced-motion: no-preference) {
  .j-cue svg { animation: j-cue-bob 2s ease-in-out infinite; }
  @keyframes j-cue-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
}
@media (prefers-reduced-motion: reduce) { .j-cue { transition: none; } }
.sc-failsafe .j-cue { display: none !important; }
@media print { .j-cue { display: none !important; } }

/* THE DECK (deck.js, laptops only): a plain page played one section (data-st) per gesture over a
   moving picture (.t-stage). A station fills the room under the bar and lays its words (.t-card)
   in the middle of it top to bottom, on its side (l, r) with the even margin, or centred (c). A card
   too tall for the room goes wide, then compact (.t-short, the skin's), then a little smaller (never
   under 13px words), and only then scrolls inside itself (.t-tall). The look of the words stays the skin's.
   A near-square touch screen (a Fold opened: coarse pointer, 0.8 <= w/h <= 1.35) plays the deck too. */
.t-stage { display: none; }
html.j-deck main[data-deck] { padding: 0; margin: 0; background: none; min-height: 0; }
html.j-deck main[data-deck] > [data-st] { position: fixed; left: 0; right: 0; top: var(--bar-h, 68px); bottom: 0; z-index: 2; box-sizing: border-box;
  display: flex; align-items: center; justify-content: flex-start; margin: 0; padding: 24px var(--j-m); min-height: 0;
  overflow: visible; background: none; clip-path: inset(50%); pointer-events: none; }
@media (max-height: 720px) { html.j-deck main[data-deck] > [data-st] { padding-top: 12px; padding-bottom: 12px; } }
html.j-deck main[data-deck] > [data-st="r"] { justify-content: flex-end; }
html.j-deck main[data-deck] > [data-st="c"] { justify-content: center; }
html.j-deck main[data-deck] > [data-st].is-on { clip-path: none; }
html.j-deck main[data-deck] > [data-st] > :not(.t-card) { display: none; }
html.j-deck .t-card { position: relative; box-sizing: border-box; flex: none; width: var(--j-cw, clamp(500px, 37.5vw, 660px)); max-width: 100%;
  transform-origin: 50% 50%; opacity: 0; transition: opacity 0.7s var(--ease, ease); pointer-events: none; }
html.j-deck [data-st="c"] > .t-card { width: min(1240px, 100%); }
html.j-deck [data-st] > .t-card.t-wide { width: min(1120px, 100%); margin-inline: auto; }
html.j-deck .t-card.t-tall { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
html.j-deck [data-st].is-cur > .t-card { opacity: 1; pointer-events: auto; }
html.j-deck [data-st].is-out > .t-card { opacity: 0; transition: opacity 0.38s var(--ease, ease); }
html.j-deck [data-st].is-near > .t-card { transition: none; }
html.j-deck .t-card:focus { outline: none; }
html.j-deck .t-stage { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; pointer-events: none; }
html.j-deck .t-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
html.j-deck .t-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; will-change: transform; }
html.j-deck .t-layer > img, html.j-deck .t-layer > .p-reel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; object-fit: cover; }
html.j-deck .t-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000), (hover: none) and (pointer: coarse) and (min-aspect-ratio: 1351/1000), (max-width: 820px) { .t-stage { display: none !important; } }
@media print { .t-stage { display: none !important; } }

/* the phone menu (frame.header): hidden until the skin shows it where the skin hides .j-nav (a phone
   needs a way to the other pages). check-design makes every skin style it. */
.j-menu { display: none; }
.j-menu > summary { list-style: none; cursor: pointer; }
.j-menu > summary::-webkit-details-marker { display: none; }

/* the nav dropdown (frame.nav_items): a nav item with children. The parent link still goes to its page;
   a small button beside it opens the list. It opens on hover, on focus and on click, hangs from the bar
   (absolute, so nothing moves) and sits above the stage with the bar (z-index 20). Colours come from the
   skin's own tokens, with plain fallbacks. */
.j-nav .j-has-sub { position: relative; padding-right: 26px; }
.j-nav .j-sub-btn { position: absolute; right: 0; top: 3px; appearance: none; background: none; border: 0; margin: 0; padding: 0; width: 24px; height: 30px; cursor: pointer;
  color: var(--muted, #6b625b); display: inline-flex; align-items: center; justify-content: center; }
.j-nav .j-sub-btn span { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--ease, ease); }
.j-nav .j-has-sub:hover .j-sub-btn, .j-nav .j-sub-btn:focus-visible { color: var(--ink, #1f1a17); }
.j-nav .j-sub-btn[aria-expanded="true"] span { transform: translateY(1px) rotate(-135deg); }
.j-nav .j-sub-btn:focus-visible { outline: 2px solid var(--walnut, #5b4636); outline-offset: 2px; }
.j-nav .j-sub { position: absolute; top: 100%; left: -18px; min-width: 250px; margin: 0; padding: 14px 0 10px; list-style: none; z-index: 21;
  display: block; background: var(--paper, #f8f7f7); border: 1px solid rgba(44, 37, 33, 0.08); border-top: 2px solid var(--brass, #a8854f);
  box-shadow: 0 22px 48px rgba(31, 26, 23, 0.18); opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.22s var(--ease, ease), transform 0.22s var(--ease, ease), visibility 0s linear 0.22s; }
.j-nav .j-has-sub:hover > .j-sub, .j-nav .j-has-sub:focus-within > .j-sub, .j-nav .j-has-sub.is-open > .j-sub {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.j-nav .j-has-sub.is-esc > .j-sub { opacity: 0; visibility: hidden; pointer-events: none; }
.j-nav .j-sub li { display: block; }
.j-nav .j-sub a { display: block; padding: 11px 24px; border-bottom: 0; white-space: nowrap; font-size: 12.5px; letter-spacing: 0.12em;
  color: var(--muted, #6b625b); }
.j-nav .j-sub a:hover, .j-nav .j-sub a:focus-visible, .j-nav .j-sub a[aria-current="page"] { color: var(--ink, #1f1a17); background: rgba(168, 133, 79, 0.1); }
.j-nav .j-sub a:focus-visible { outline: 2px solid var(--walnut, #5b4636); outline-offset: -2px; }
/* the phone menu: the children sit indented under their parent, always shown */
.j-menu-nav .j-sub { margin: 0; padding: 0 0 6px 18px; list-style: none; border-left: 1px solid var(--brass, #a8854f); }
.j-menu-nav .j-sub a { font-size: 17px; padding: 12px 0; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .j-nav .j-sub, .j-nav .j-sub-btn span { transition: none; } }