/* =====================================================================
   HOME JOURNEY — "One body. One system."
   Loaded on the home page after styles.css, whose tokens it uses.
   Two layouts from one document:
   · default      an editorial story in plain HTML (no JS, reduced motion)
   · .xp-3d       the same words over a WebGL world driven by scroll
   ===================================================================== */

/* ---------------------------------------------------------------------
   STORY — static editorial layout (the default)
   --------------------------------------------------------------------- */
.journey .xp-stage,
.journey .xp-controls { display: none; }

.beat {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  align-content: center;
  padding: clamp(5rem, 12vw, 9rem) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.beat--hero { min-height: 100svh; padding-top: calc(var(--nav-h) + 3rem); border-top: 0; }
.beat__text { max-width: 46rem; }
.beat__eyebrow {
  margin: 0 0 1.1rem;
  font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--etryum-beige);
}
.beat__title {
  margin: 0;
  font-weight: 300; letter-spacing: -.025em; line-height: 1.04;
  font-size: clamp(2.125rem, 4.4vw + .6rem, 5rem);
  text-wrap: balance;
}
.beat--hero .beat__title, .beat--always .beat__title {
  font-size: clamp(2.8rem, 8vw + .3rem, 8.5rem); letter-spacing: -.04em;
}
.beat__lead {
  margin: 1.25rem 0 0; max-width: 36ch;
  font-size: var(--fs-body-lg); color: var(--bone-dim);
  text-wrap: pretty;
}
/* The hero's h1: what ETRYUM does, the largest words on the screen */
.beat__what {
  margin: 1.1rem 0 0; max-width: 30ch;
  font-size: clamp(1.6rem, 2.1vw + 1rem, 3.1rem); font-weight: 300;
  line-height: 1.14; letter-spacing: -.025em; color: var(--bone);
  text-wrap: balance;
}
.xp-3d .beat--hero .beat__what { margin-inline: auto; }
.beat__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.beat__list, .beat__people {
  margin: 1.75rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.beat__list a {
  display: inline-block; font-size: .82rem; padding: .45rem .85rem; text-decoration: none;
  border: 1px solid var(--hairline); border-radius: 99px; color: var(--bone);
  transition: border-color var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium);
}
.beat__list a:hover, .beat__list a:focus-visible { border-color: var(--etryum-beige); color: var(--etryum-beige); }
.beat__people { display: grid; gap: .6rem; }
.beat__people a { text-decoration: none; }
.beat__people strong { font-weight: 500; }
.beat__people span { color: var(--bone-dim); }
.beat__people a:hover strong { color: var(--etryum-beige); }
.beat__organization-link { margin-top: 1.75rem; }
.beat__still { margin: 0; }
.beat__still picture { display: contents; }
.beat__still img { width: 100%; max-height: 70svh; object-fit: cover; }

/* ---------------------------------------------------------------------
   STORY — 3D mode
   Sections become scroll length; their words are pinned to the screen and
   world.js fades each block in and out as its section passes, writing the
   section heights and the --o (opacity) and --y (drift) of every block.
   --------------------------------------------------------------------- */
.xp-3d .journey .xp-stage,
.xp-3d .journey .xp-controls { display: block; }
/* Above the projected labels (z-index 4): a label never sits on top of the words */
.xp-3d .xp-story { position: relative; z-index: 5; pointer-events: none; }
.xp-3d .beat {
  display: block; position: relative;
  min-height: 100svh; padding: 0; border: 0;
}
.xp-3d .beat__still { display: none; }
/* The hero's words are readable from the first paint, before world.js runs */
.xp-loading .beat--hero .beat__text { opacity: 1; }

/* The welcome: a calm, warm ground with the S drawing itself, covering the
   film until the visitor starts down (world.js fades it with the scroll). */
.xp-welcome {
  position: fixed; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(166, 96, 62, .20), rgba(8, 7, 6, 0) 70%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(229, 203, 136, .07), rgba(8, 7, 6, 0) 60%),
    var(--ink);
  pointer-events: none;
}
.xp-welcome__s {
  width: min(94vw, 76rem); margin-top: -6vh; overflow: visible;
  fill: none; stroke: var(--etryum-beige); stroke-width: .9; stroke-linecap: round;
  opacity: .4;
  filter: drop-shadow(0 0 10px rgba(229, 203, 136, .45));
}
.xp-welcome__s path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: xp-welcome-draw 3.4s var(--ease-premium) .2s forwards, xp-welcome-breathe 6s ease-in-out 3.6s infinite;
}
@keyframes xp-welcome-draw { to { stroke-dashoffset: 0; } }
@keyframes xp-welcome-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (max-width: 720px) {
  /* On a phone the words fill the screen: the S signs off in the free space below them */
  .xp-welcome { place-items: end center; }
  .xp-welcome__s { width: 58vw; margin: 0 0 5.5svh; opacity: .6; stroke-width: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-welcome__s path { animation: none; stroke-dashoffset: 0; }
}

/* The overture (first visit of a session, journey-detect.js sets .xp-intro):
   the logo, the S drawing itself and what we do (the h1, shown from the first
   paint) have the screen to themselves; the place, the three ways in, the
   assessment button and the rest of the navigation follow at about 1.5 s
   on a computer, and straight away on a phone.
   Any scroll, tap or key hurries them in (main.js, OVERTURE). */
@keyframes xp-intro-rise { from { opacity: 0; transform: translateY(.9rem); } }
@keyframes xp-intro-fade { from { opacity: 0; } }
.xp-intro .beat--hero .beat__eyebrow { animation: xp-intro-fade 1.1s var(--ease-premium) 1.1s both; }
.xp-intro .beat--hero .beat__paths-label { animation: xp-intro-rise .9s var(--ease-premium) 1.4s both; }
.xp-intro .beat--hero .beat__paths li { animation: xp-intro-rise .9s var(--ease-premium) 1.55s both; }
.xp-intro .beat--hero .beat__paths li:nth-child(2) { animation-delay: 1.65s; }
.xp-intro .beat--hero .beat__paths li:nth-child(3) { animation-delay: 1.75s; }
.xp-intro .beat--hero .beat__actions { animation: xp-intro-rise .9s var(--ease-premium) 1.95s both; }
.xp-intro .beat--hero .beat__cue { animation: xp-intro-rise .9s var(--ease-premium) 2.25s both; }
.xp-intro .nav__links,
.xp-intro .nav__cta,
.xp-intro .nav__toggle { animation: xp-intro-fade 1s var(--ease-premium) 1.9s both; }
.xp-intro .moment,
.xp-intro .whatsapp-dock { animation: xp-intro-fade 1s var(--ease-premium) 2.4s both; }
/* On a phone nothing waits: the logo and the words are there at once, and
   everything else follows straight after, one line at a time, in under a second. */
@media (max-width: 720px) {
  .xp-intro .beat--hero .beat__eyebrow { animation-duration: .6s; animation-delay: .05s; }
  .xp-intro .beat--hero .beat__paths-label { animation-duration: .6s; animation-delay: .2s; }
  .xp-intro .beat--hero .beat__paths li { animation-duration: .6s; animation-delay: .3s; }
  .xp-intro .beat--hero .beat__paths li:nth-child(2) { animation-delay: .38s; }
  .xp-intro .beat--hero .beat__paths li:nth-child(3) { animation-delay: .46s; }
  .xp-intro .beat--hero .beat__actions { animation-duration: .6s; animation-delay: .58s; }
  .xp-intro .beat--hero .beat__cue { animation-duration: .6s; animation-delay: .72s; }
  .xp-intro .nav__links,
  .xp-intro .nav__cta,
  .xp-intro .nav__toggle { animation-duration: .6s; animation-delay: .1s; }
  .xp-intro .moment,
  .xp-intro .whatsapp-dock { animation-duration: .7s; animation-delay: .9s; }
}
.xp-3d .beat__copy {
  position: fixed; inset: 0; z-index: 3;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 6rem;
  pointer-events: none;
}
.xp-3d .beat__text {
  position: relative;
  opacity: var(--o, 0);
  transform: translate3d(0, var(--y, 0px), 0);
  text-shadow: 0 1px 24px rgba(8, 7, 6, .55);
  will-change: opacity, transform;
}
.xp-3d .beat__text a, .xp-3d .beat__text button { pointer-events: auto; }
/* In 3D the lists live in the scene as labels; they stay for screen readers
   and appear only when reached with the keyboard. */
.xp-3d .beat__list, .xp-3d .beat__people {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.xp-3d .beat__list:focus-within, .xp-3d .beat__people:focus-within {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
}

/* Where each moment's words sit, so they never cover what the camera shows */
.xp-3d .beat--hero .beat__copy,
.xp-3d .beat--parts .beat__copy,
.xp-3d .beat--closer .beat__copy,
.xp-3d .beat--whole .beat__copy,
.xp-3d .beat--always .beat__copy { justify-content: center; text-align: center; }
.xp-3d .beat--hero .beat__lead,
.xp-3d .beat--parts .beat__lead,
.xp-3d .beat--always .beat__lead { margin-inline: auto; }
.xp-3d .beat--hero .beat__actions { justify-content: center; }
.xp-3d .beat--hero .beat__copy { align-items: flex-end; padding-bottom: calc(5rem + 6svh); }
.xp-3d .beat--hero .beat__text { max-width: 60rem; }
/* The hero breathes: what we do, the three ways in, the CTA, the film — well apart */
@media (min-width: 721px) {
  .xp-3d .beat--hero .beat__copy { align-items: center; padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 3rem; }
  .xp-3d .beat--hero .beat__eyebrow { margin-bottom: clamp(1.4rem, 3.2vh, 2.2rem); }
  /* Wider on a computer: longer lines, buttons spread out, more air around them */
  .xp-3d .beat--hero .beat__text { max-width: min(90vw, 86rem); }
  .xp-3d .beat--hero .beat__what { margin-top: 0; max-width: 40ch; font-size: clamp(2rem, 2.3vw + 1rem, 3.6rem); line-height: 1.1; }
  .xp-3d .beat--hero .beat__paths { margin-top: clamp(2rem, 6.5vh, 4.5rem); }
  .xp-3d .beat--hero .beat__paths-label { margin-bottom: 1.3rem; }
  .xp-3d .beat--hero .beat__paths ul { gap: 1.25rem; }
  .xp-3d .beat--hero .beat__paths a { min-height: 3.7rem; padding: 0 2.1rem; font-size: 1.02rem; }
  .xp-3d .beat--hero .beat__actions { margin-top: clamp(2.2rem, 5.5vh, 3.6rem); gap: 1rem 2.5rem; }
  .xp-3d .beat--hero .beat__cue { margin-top: clamp(2.2rem, 5.5vh, 3.6rem); }
}
.xp-3d .beat--parts .beat__text { max-width: 52rem; }
.xp-3d .beat--closer .beat__title { font-size: clamp(2.8rem, 7vw, 7.5rem); letter-spacing: -.04em; }
.xp-3d .beat--system .beat__copy,
.xp-3d .beat--team .beat__copy { justify-content: flex-start; align-items: flex-end; }
.xp-3d .beat--etryum .beat__copy,
.xp-3d .beat--place .beat__copy { align-items: flex-end; }
.xp-3d .beat--etryum .beat__text,
.xp-3d .beat--place .beat__text,
.xp-3d .beat--system .beat__text { max-width: 36rem; }
.xp-3d .beat--team .beat__text { max-width: 30rem; }
.xp-3d .beat--always .beat__title { font-size: clamp(3rem, 10vw, 11rem); }
/* The light enters the cell from the lower left: the words wait above its path */
@media (min-width: 721px) {
  .xp-3d .beat--cell .beat__copy { align-items: flex-start; padding-top: calc(var(--nav-h) + 3.5rem); }
}

/* Soft ground under the words of every moment: over bright photographs, and
   a text-safe area where the light, the S or the specialist boxes pass behind */
.xp-3d .beat__text::before {
  content: ''; position: absolute; inset: -40% -30%; z-index: -1;
  background: radial-gradient(closest-side, rgba(8, 7, 6, .68), rgba(8, 7, 6, 0));
  pointer-events: none;
}
.xp-3d .beat--etryum .beat__text::before,
.xp-3d .beat--team .beat__text::before,
.xp-3d .beat--system .beat__text::before,
.xp-3d .beat--parts-care .beat__text::before,
.xp-3d .beat--cell .beat__text::before,
.xp-3d .beat--signals .beat__text::before { inset: -30% -18% -24%; background: radial-gradient(closest-side, rgba(8, 7, 6, .82), rgba(8, 7, 6, 0)); }

@media (max-width: 720px) {
  /* The words end above the "go to the clinical areas" button (bottom 4.9rem, 2.5rem tall) */
  .xp-3d .beat__copy { align-items: flex-end !important; justify-content: flex-start !important; text-align: left !important; padding-bottom: calc(8.6rem + env(safe-area-inset-bottom)); }
  .xp-3d .beat--hero .beat__copy,
  .xp-3d .beat--always .beat__copy { justify-content: center !important; text-align: center !important; }
  /* The finale's words sit in the middle of the screen, over the S, as on a computer */
  .xp-3d .xp-areas { padding-top: calc(30svh + var(--space-lg)); background: linear-gradient(180deg, rgba(8, 7, 6, 0) 0, rgba(8, 7, 6, 0) 30svh, var(--ink) calc(30svh + 1px)); }
  .xp-3d .beat--always .beat__copy { align-items: center !important; padding-bottom: 2rem; }
  .xp-3d .beat__lead { margin-inline: 0 !important; }
  .xp-3d .beat--hero .beat__lead, .xp-3d .beat--always .beat__lead { margin-inline: auto !important; }
  .xp-3d .beat--hero .beat__actions { flex-direction: column; }
  .xp-3d .beat--hero .beat__what { margin-top: .6rem; font-size: 1.6rem; line-height: 1.18; max-width: 22ch; }
  .xp-3d .beat--hero .beat__what { margin-top: .4rem; font-size: 1.85rem; }
  .xp-3d .beat--hero .beat__paths { margin-top: 2rem; }
  .xp-3d .beat--hero .beat__eyebrow { margin-bottom: .6rem; }
  .xp-3d .beat__text::before {
    content: ''; position: absolute; inset: -50% -40% -40%; z-index: -1;
    background: radial-gradient(closest-side, rgba(8, 7, 6, .6), rgba(8, 7, 6, 0));
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------------
   STAGE — canvas, projected labels, veil, map, hint
   --------------------------------------------------------------------- */
.xp-stage { pointer-events: none; }
.xp-canvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block;
}
.xp-labels { position: fixed; inset: 0; z-index: 4; overflow: hidden; }
.xp-label {
  position: absolute; left: 0; top: 0;
  opacity: 0; white-space: nowrap;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone); text-decoration: none;
  transform: translate3d(-200px, -200px, 0);
  will-change: transform, opacity;
  pointer-events: none;
}
.xp-label.is-live { pointer-events: auto; cursor: pointer; }
/* Pointing at one system: it lights, the others step back (world.js) */
.xp-label--system { transition: color var(--dur-fast) var(--ease-premium), filter var(--dur-fast) var(--ease-premium); }
.xp-labels.has-focus .xp-label--system:not(.is-focus) { filter: brightness(.5); }
.xp-label--system.is-focus { color: var(--etryum-beige); }
a.xp-label::after {
  content: '+'; display: inline-block; margin-left: .45rem;
  font-size: .9em; letter-spacing: 0; color: var(--etryum-beige);
  transition: transform var(--dur-fast) var(--ease-premium);
}
.xp-label--discipline::after { content: '↗' !important; }
.xp-label--person::after { display: none !important; }
a.xp-label.is-live:hover { color: var(--etryum-beige); }
a.xp-label.is-live:hover::after { transform: rotate(90deg); }
.xp-label--discipline.is-live:hover::after { transform: translate(2px, -2px) !important; }
/* A generous touch target around the words */
a.xp-label { padding: .5rem .25rem; }

.xp-label--discipline::before {
  content: ''; display: inline-block; width: .9rem; height: 1px; margin-right: .5rem;
  vertical-align: middle; background: var(--etryum-beige);
}
/* Each system's own line drawing (src/components/SystemIcon.astro) */
.system-icon {
  display: inline-block; flex: 0 0 auto; width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.xp-label__icon {
  width: 1.7em; height: 1.7em; margin: -.3em .6rem -.3em 0; vertical-align: middle;
  color: var(--etryum-beige); stroke-width: 1.1;
}
.beat__icon { width: 1.25em; height: 1.25em; margin: -.2em .45rem -.2em 0; vertical-align: middle; color: var(--etryum-beige); }
.sheet__icon { width: 2.4rem; height: 2.4rem; display: block; margin: 0 0 1rem; stroke-width: 1; }
.xp-label--you {
  font-size: .9rem; letter-spacing: .2em; color: var(--etryum-beige);
  padding: .35rem .7rem; border: 1px solid rgba(229, 203, 136, .5); border-radius: 99px;
  background: rgba(8, 7, 6, .5);
}
.xp-label--specialist { font-size: .62rem; color: var(--etryum-coral); }
.xp-label--discipline {
  font-size: .74rem; color: var(--etryum-beige);
  padding: .45rem .75rem !important; border: 1px solid rgba(229, 203, 136, .35); border-radius: 99px;
  background: rgba(8, 7, 6, .72);
}
.xp-label--discipline::before { display: none !important; }
.xp-label--discipline.is-live:hover { border-color: var(--etryum-beige); }
.xp-label--person {
  display: grid; gap: .15rem; text-align: center;
  text-transform: none; letter-spacing: 0; white-space: normal; width: 12rem;
  font-size: .78rem; color: var(--bone-dim);
}
.xp-label--person strong { font-weight: 500; font-size: .92rem; color: var(--bone); }
.xp-label--person.is-live:hover strong { color: var(--etryum-beige); }
@media (max-width: 720px) {
  .xp-label { font-size: .62rem; }
  .xp-label--person { width: 8.5rem; font-size: .66rem; }
  .xp-label--person strong { font-size: .76rem; }
  .xp-label--you { font-size: .62rem; padding: .22rem .55rem; }
  /* Upright on phones (world.js): the drawing on the node, the name beneath */
  .xp-label--system { display: grid; justify-items: center; gap: .3rem; }
  .xp-label--system::after { display: none; }
  .xp-label__icon { width: 1.9rem; height: 1.9rem; margin: 0; }
}
.xp-hover, .xp-hover body { cursor: pointer; }


.xp-map {
  position: fixed; left: var(--gutter); bottom: 1.9rem; z-index: 30;
  width: 4.2rem; overflow: visible;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .5s var(--ease-premium);
}
.xp-map__ghost { stroke: var(--hairline); stroke-width: 1.6; }
.xp-map__live { stroke: var(--etryum-beige); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.xp-map__dot { fill: var(--etryum-beige); stroke: none; }
html:not(.xp-past-hero) .xp-map, .xp-map.is-done { opacity: 0; }

.xp-hint {
  position: fixed; left: 50%; bottom: 1.6rem; z-index: 30; margin: 0;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .7rem 1.2rem; border-radius: 99px;
  border: 1px solid rgba(229, 203, 136, .34); background: rgba(8, 7, 6, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: inherit; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
  white-space: nowrap; cursor: pointer; pointer-events: auto;
  transition: opacity .6s var(--ease-premium), visibility 0s linear 0s;
}
.xp-hint__arrow {
  width: 1.05rem; height: 1.05rem; flex: 0 0 auto;
  fill: none; stroke: var(--etryum-beige); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  animation: xp-hint 1.9s var(--ease-premium) infinite;
}
@keyframes xp-hint {
  0%, 100% { transform: translateY(-.15rem); opacity: .55; }
  50% { transform: translateY(.2rem); opacity: 1; }
}
.xp-hint.is-gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s var(--ease-premium), visibility 0s linear .6s; }

/* ---------------------------------------------------------------------
   CONTROLS — sound, skip, and a CTA for screens without the nav's own
   --------------------------------------------------------------------- */
.xp-sound, .xp-skip, .xp-cta {
  position: fixed; z-index: 40;
  transition: opacity .5s var(--ease-premium), visibility 0s linear 0s, background var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium);
}
.xp-sound {
  left: var(--gutter); bottom: 1.5rem;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .65rem 1.05rem .65rem .7rem;
  font: inherit; font-size: .78rem; letter-spacing: .06em;
  color: var(--ink); background: var(--etryum-beige);
  border: 0; border-radius: 99px; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.xp-sound[hidden] { display: none; }
.xp-sound:hover { background: var(--bone); }
.xp-sound__icon {
  width: 1.9rem; height: 1.9rem; padding: .3rem; border-radius: 50%;
  background: var(--ink); fill: none; stroke: var(--etryum-beige);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.xp-sound__speaker { fill: var(--etryum-beige); }
.xp-sound__waves { display: none; }
.xp-sound.is-on .xp-sound__waves { display: inline; }
.xp-sound.is-on .xp-sound__mute { display: none; }
/* A slow ring asks for the first click without shouting */
.xp-sound:not(.is-on)::before {
  content: ''; position: absolute; left: .7rem; top: 50%; width: 1.9rem; height: 1.9rem;
  margin-top: -.95rem; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(229, 203, 136, .7);
  animation: xp-ring 2.4s var(--ease-premium) infinite;
}
@keyframes xp-ring { to { box-shadow: 0 0 0 14px rgba(229, 203, 136, 0); } }
.xp-sound.is-gone { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-premium), visibility 0s linear .5s; }

.xp-skip {
  left: calc(var(--gutter) + 5.4rem); bottom: 1.5rem;
  display: inline-flex; gap: .45rem; align-items: center;
  min-height: 2.9rem; padding: 0 1.1rem; border-radius: 99px;
  border: 1px solid rgba(242, 233, 220, .28); background: rgba(8, 7, 6, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone); text-decoration: none;
}
.xp-skip:hover { color: var(--ink); background: var(--etryum-beige); border-color: var(--etryum-beige); }
.xp-cta { display: none !important; }
html:not(.xp-in-journey) .xp-skip,
html.xp-areas-near .xp-skip,
html:not(.xp-in-journey) .xp-sound { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-premium), visibility 0s linear .5s; }

@media (max-width: 900px) {
  /* The nav folds into a menu here, so the journey carries its own CTA */
  .xp-cta {
    display: inline-flex !important; left: max(1rem, env(safe-area-inset-left)); bottom: max(1.1rem, env(safe-area-inset-bottom));
    align-items: center; min-height: 3.2rem; padding: 0 1.2rem; border-radius: 99px;
    font-size: .82rem; text-decoration: none;
    color: var(--ink); background: var(--etryum-beige);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  }
  /* On a computer the way out is there from the first screen; on phones it waits for the film */
  html:not(.xp-past-hero) .xp-skip,
  html:not(.xp-past-hero) .xp-cta,
  html:not(.xp-in-journey) .xp-cta { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-premium), visibility 0s linear .5s; }
  .xp-map { display: none; }
  /* Bottom left is the CTA and bottom right is WhatsApp: the way out sits
     above them, clear of both. */
  .xp-skip {
    left: 50%; right: auto; top: auto;
    bottom: max(4.9rem, calc(env(safe-area-inset-bottom) + 4.6rem));
    transform: translateX(-50%);
    min-height: 2.5rem; padding: 0 .9rem; font-size: .56rem; letter-spacing: .1em;
  }
  .xp-sound { bottom: max(1.1rem, env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------------
   AREAS — where the story hands over to the ordinary, fast website
   --------------------------------------------------------------------- */
.xp-areas { position: relative; z-index: 2; background: var(--ink); }
/* One more screen so the finale can hold before the page takes over */
.xp-3d .xp-areas { padding-top: calc(55svh + var(--space-xl)); background: linear-gradient(180deg, rgba(8, 7, 6, 0) 0, rgba(8, 7, 6, 0) 55svh, var(--ink) calc(55svh + 1px)); }
.xp-areas__title { max-width: 18ch; }
.xp-areas__lead { max-width: 46ch; margin-top: 1.25rem; color: var(--bone-dim); }
.xp-areas__list { margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.xp-area {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.1fr) 1.5rem; align-items: center; gap: 1rem 2rem;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: var(--bone);
  transition: padding var(--dur-normal) var(--ease-premium);
}
.xp-area__index { color: var(--etryum-beige); }
.xp-area__name { font-size: clamp(1.3rem, 1.6vw + .8rem, 2.2rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.15; }
.xp-area__short { color: var(--bone-dim); }
.xp-area__copy { color: var(--bone-dim); font-size: .95rem; }
.xp-area__arrow { width: 1.5rem; fill: none; stroke: var(--etryum-beige); stroke-width: 1.4; transition: transform var(--dur-normal) var(--ease-premium); }
.xp-area:hover, .xp-area:focus-visible { padding-left: 1rem; }
.xp-area:hover .xp-area__name { color: var(--etryum-beige); }
.xp-area:hover .xp-area__arrow, .xp-area:focus-visible .xp-area__arrow { transform: translateX(.4rem); }
.xp-areas__cta { margin-top: clamp(2.5rem, 6vw, 4rem); }
.xp-organizations {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
  gap: var(--space-md) var(--space-xl);
  align-items: end;
  margin-top: clamp(5rem, 11vw, 10rem);
  padding: clamp(2.2rem, 5vw, 4rem);
  border: 1px solid var(--hairline);
  background: linear-gradient(135deg, rgba(119, 35, 28, .2), rgba(8, 7, 6, .35));
}
.xp-organizations .sec-label { grid-column: 1 / -1; }
.xp-organizations .body-lg { max-width: 42ch; color: var(--bone-dim); }
.xp-organizations .link-arrow { grid-column: 2; margin-top: var(--space-sm); }
@media (max-width: 720px) {
  .xp-area { grid-template-columns: 2.2rem minmax(0, 1fr) 1.5rem; }
  .xp-area__copy { grid-column: 2; grid-row: 2; font-size: .92rem; }
  .xp-area__arrow { grid-column: 3; grid-row: 1; }
  .xp-organizations { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); }
  .xp-organizations .sec-label,
  .xp-organizations .link-arrow { grid-column: 1; }
}

/* ---------------------------------------------------------------------
   SHEETS — a system of the body, or a person
   --------------------------------------------------------------------- */
.has-sheet { overflow: hidden; }
.sheet {
  position: fixed; inset: 0 0 0 auto;
  width: min(36rem, 100vw); max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--ink-raised); color: var(--bone);
  border-left: 1px solid var(--hairline);
  overflow: hidden;
}
.sheet::backdrop { background: rgba(8, 7, 6, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet[open] { animation: sheet-in .55s var(--ease-premium); }
.sheet[open]::backdrop { animation: sheet-fade .55s var(--ease-premium); }
@keyframes sheet-in { from { transform: translateX(100%); } }
@keyframes sheet-fade { from { opacity: 0; } }
.sheet__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: rgba(8, 7, 6, .6); color: var(--bone); cursor: pointer;
}
.sheet__close svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.sheet__close:hover { border-color: var(--etryum-beige); color: var(--etryum-beige); }
.sheet__body { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.sheet__content { padding: clamp(4.5rem, 8vw, 5.5rem) clamp(1.5rem, 4vw, 3rem) 3rem; }
.sheet__eyebrow {
  margin: 0 0 1rem; font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--etryum-beige);
}
.sheet__title {
  margin: 0; font-weight: 300; letter-spacing: -.025em; line-height: 1.06;
  font-size: clamp(1.9rem, 2.6vw + 1rem, 2.9rem); text-wrap: balance;
}
.sheet__label {
  margin: 2rem 0 .6rem; font-weight: 400;
  font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--etryum-beige);
}
.sheet__text { margin: 1rem 0 0; color: var(--bone-dim); line-height: 1.65; }
.sheet__label + .sheet__text { margin-top: 0; }
.sheet__role { margin: .75rem 0 0; font-size: .82rem; letter-spacing: .06em; color: var(--etryum-beige); }
.sheet__focus { margin: 0; color: var(--bone); }
.sheet__people { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.sheet__person {
  display: flex; align-items: center; gap: .9rem; padding: .5rem; text-decoration: none; color: var(--bone);
  border: 1px solid var(--hairline); border-radius: 2px;
  transition: border-color var(--dur-fast) var(--ease-premium);
}
.sheet__person:hover { border-color: var(--etryum-beige); }
.sheet__person img { width: 3.2rem; height: 4rem; object-fit: cover; }
.sheet__person span { display: grid; gap: .15rem; }
.sheet__person strong { font-weight: 500; }
.sheet__person small { color: var(--bone-dim); font-size: .8rem; }
.sheet__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.sheet__portrait { margin: -1rem -0.5rem 2rem; }
.sheet__portrait img { width: 100%; max-height: 52svh; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 720px) {
  .sheet { inset: auto 0 0 0; width: 100vw; height: 90svh; border-left: 0; border-top: 1px solid var(--hairline); border-radius: 14px 14px 0 0; }
  @keyframes sheet-in { from { transform: translateY(100%); } }
  .sheet__portrait img { max-height: 42svh; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet[open], .sheet[open]::backdrop { animation: none; }
}

/* ---------------------------------------------------------------------
   BODY MAP — the figure in each system sheet, its organ glowing
   --------------------------------------------------------------------- */
.body-map__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sheet__head { display: grid; grid-template-columns: 1fr auto; gap: 1.25rem; align-items: start; }
.body-map { width: clamp(4.6rem, 12vw, 6.2rem); height: auto; overflow: visible; }
/* The dots live in the <symbol>; <use> copies are styled from there */
#xp-body path { fill: none; stroke: #e5cb88; stroke-linecap: round; stroke-width: .085; }
#xp-body .body-map__dim { opacity: .28; }
#xp-body .body-map__mid { opacity: .58; }
#xp-body .body-map__bright { opacity: .95; }
.body-map__glow { mix-blend-mode: screen; transform-box: fill-box; transform-origin: center; animation: body-map-pulse 2.2s ease-in-out infinite; }
.body-map__ring { fill: none; stroke: var(--etryum-coral); stroke-width: .05; opacity: .8; }
@keyframes body-map-pulse { 50% { transform: scale(.82); opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .body-map__glow { animation: none; } }

/* ---------------------------------------------------------------------
   ORIENTATION — a scroll cue, a progress line and a chapter rail
   (main.js §13). The story is long on purpose; nobody should have to
   guess how long, where they are, or how to leave it.
   --------------------------------------------------------------------- */
.beat__start { margin: 1.6rem 0 0; }
.beat__start-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--etryum-beige); text-decoration: none;
  border-bottom: 1px solid rgba(229, 203, 136, .4); padding-bottom: .3rem;
}
.beat__start-link:hover { color: var(--bone); border-bottom-color: var(--bone); }

/* The same instruction, in the flow, for the plain story */
.beat__cue {
  display: inline-flex; align-items: center; gap: .7rem; margin: 2.2rem 0 0;
  padding: .7rem 1.2rem; border-radius: 99px;
  border: 1px solid rgba(229, 203, 136, .34);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
}
.xp-3d .beat__cue { display: none; }
.xp-3d .beat--hero .beat__cue {
  display: inline-flex; pointer-events: auto; text-decoration: none;
  background: rgba(8, 7, 6, .35);
  transition: background var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium);
}
.beat__cue small { font-size: .9em; letter-spacing: .08em; text-transform: none; color: var(--bone-dim); }
.xp-3d .beat--hero .beat__cue:hover { border-color: var(--etryum-beige); background: rgba(8, 7, 6, .6); }

.xp-progress {
  /* Above the navigation bar: the line rides its top edge and the chapter
     name sits in the empty middle of it. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-premium);
}
.xp-reading .xp-progress { opacity: 1; }
.xp-progress__track { display: block; height: 2px; background: rgba(242, 233, 220, .14); }
.xp-progress__fill {
  display: block; height: 100%; background: var(--etryum-beige);
  transform-origin: 0 50%; transform: scaleX(0);
}
/* The rail names the chapter on wide screens; the bar names it where the
   rail cannot fit, in the empty middle of the navigation bar. */
.xp-progress__now { display: none; }

.xp-rail {
  position: fixed; right: var(--gutter); top: 50%; z-index: 45;
  transform: translateY(-50%);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-premium), visibility 0s linear .5s;
}
.xp-reading .xp-rail { opacity: 1; visibility: visible; transition-delay: 0s; }
.xp-rail ol { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.xp-rail a {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) .8rem; gap: .6rem; align-items: center;
  padding: .42rem 0; text-decoration: none; color: var(--bone-dim);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  opacity: .55; transition: opacity var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium);
}
.xp-rail a:hover { opacity: 1; color: var(--bone); }
.xp-rail a.is-done { opacity: .75; }
.xp-rail a.is-current { opacity: 1; color: var(--etryum-beige); }
.xp-rail__num { text-align: right; font-variant-numeric: tabular-nums; }
.xp-rail__name { white-space: nowrap; }
.xp-rail__dot {
  justify-self: end; width: .42rem; height: .42rem; border-radius: 50%;
  background: transparent; border: 1px solid currentColor;
  transition: background var(--dur-fast) var(--ease-premium);
}
.xp-rail a.is-current .xp-rail__dot, .xp-rail a.is-done .xp-rail__dot { background: currentColor; }

@media (max-width: 1200px) {
  /* Too narrow for names: the rail keeps only its dots, the bar keeps the name */
  .xp-rail a { grid-template-columns: .8rem; padding: .5rem 0; }
  .xp-rail__num, .xp-rail__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 900px) {
  .xp-rail { display: none; }
  .xp-progress__now {
    display: block; margin: 0; text-align: center;
    position: relative; top: calc(var(--nav-h) / 2 - .5rem);
    font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim);
  }
  /* On a phone the bottom corners belong to the sound and WhatsApp buttons:
     on the welcome the instruction rides with the hero copy, and over the
     film it sits in the middle, just under the picture (world.js shows it). */
  .xp-hint {
    top: min(calc(50% + 28.125vw + 1.6rem), calc(100% - 7.5rem)); bottom: auto;
    left: 1rem; right: 1rem; width: fit-content; margin-inline: auto; transform: none;
    flex-direction: column; gap: .55rem;
    padding: .8rem 1.4rem .75rem;
    font-size: .7rem; letter-spacing: .1em; line-height: 1.35;
    white-space: normal; text-align: center;
    border-color: rgba(229, 203, 136, .5);
  }
  .xp-hint__arrow { width: 1.3rem; height: 1.3rem; }
  /* How far is left before the camera goes in: it fills as the visitor scrolls */
  .xp-hint::after {
    content: ''; display: block; width: 4.5rem; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--etryum-beige) calc(var(--p, 0) * 100%), rgba(229, 203, 136, .22) 0);
  }
  .xp-3d .beat--hero .beat__cue { display: inline-flex; margin-top: 1.4rem; padding: .6rem 1rem; font-size: .66rem; letter-spacing: .1em; }
  /* Lift the hero copy clear of the floating WhatsApp button */
  .xp-3d .beat--hero .beat__copy { padding-bottom: calc(8rem + 6svh); }
}
@media (prefers-reduced-motion: reduce) {
  .xp-hint__arrow { animation: none; opacity: .9; }
}

/* --- Three ways in, and the journey as a film (main.js §15) ----------- */
.beat__paths { margin-top: 2.2rem; }
.beat__paths-label {
  margin: 0 0 1rem; font-size: .8rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--etryum-beige);
}
.beat__paths ul { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.xp-3d .beat--hero .beat__paths ul { justify-content: center; }
.xp-3d .beat--hero .beat__paths-label { text-align: center; }
.beat__paths a {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 3.4rem; padding: 0 1.5rem; border-radius: 99px;
  border: 1px solid rgba(229, 203, 136, .55); background: rgba(8, 7, 6, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .98rem; color: var(--bone); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium);
}
.beat__paths a span { color: var(--etryum-beige); transition: color var(--dur-fast) var(--ease-premium); }
.beat__paths a:hover { background: var(--etryum-beige); border-color: var(--etryum-beige); color: var(--ink); }
.beat__paths a:hover span { color: var(--ink); }

@media (max-width: 900px) {
  /* The sound button was covering the scroll cue: icon only on phones */
  .xp-sound { padding: .45rem; gap: 0; }
  .xp-sound__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* The hero carries a lot on a phone: tighten the rhythm, keep it readable */
  .beat__paths { margin-top: 1.4rem; }
  .beat__paths-label { margin-bottom: .6rem; font-size: .7rem; }
  .beat__paths ul { gap: .5rem; }
  .beat__paths a { min-height: 3rem; padding: 0 1.2rem; font-size: .9rem; }
  .xp-3d .beat--hero .beat__actions { margin-top: 1.1rem; gap: .8rem; }
  /* On a phone the three ways in and the assessment button are enough; the method link waits in the menu */
  .xp-3d .beat--hero .beat__actions .link-arrow { display: none; }
  .xp-3d .beat--hero .beat__actions .btn { min-height: 3rem; padding-block: .8rem; }
}

/* --- Phone hero, steady and airy --------------------------------------
   Anchored to the small viewport (browser bars showing), so it does not
   jump when the address bar slides away on the first scroll, and centred
   in it so it never crowds the top. The main line is sized to the screen
   width so it always sits on two lines. */
@media (max-width: 720px) {
  .xp-3d .beat--hero .beat__copy {
    bottom: auto; height: 100svh;
    align-items: center !important;
    padding: calc(var(--nav-h) + 1rem) var(--gutter) calc(21vw + 5svh);
  }
  .xp-3d .beat--hero .beat__what {
    max-width: none;
    font-size: min(calc((100vw - 2 * var(--gutter)) * .07), 1.9rem);
    line-height: 1.18;
  }
  .xp-3d .beat--hero .beat__eyebrow { margin-bottom: 1rem; }
  .xp-3d .beat--hero .beat__paths { margin-top: 2.2rem; }
  .xp-3d .beat--hero .beat__actions { margin-top: 1.4rem; }
  /* The S signs off at a fixed spot below the words, whatever the bars do */
  .xp-welcome { place-items: start center; }
  .xp-welcome__s { width: 46vw; margin: calc(96svh - 20.7vw) 0 0; }
}
@media (max-width: 380px) {
  /* Small phones: keep every way-in button on one line (German is the longest) */
  .xp-3d .beat--hero .beat__paths a { padding: 0 1rem; font-size: .82rem; }
}

/* The film on an upright phone: whole, in its own 16:9 frame, edges fading into the ink */
.xp-film { display: none; }
.xp-3d .xp-film {
  position: fixed; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background: var(--ink);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.xp-film video {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

/* Phones: the S and the portraits pass right behind the words; a firmer ground rises under them */
@media (max-width: 720px) {
  .xp-3d .beat--etryum .beat__text::before,
  .xp-3d .beat--team .beat__text::before,
  .xp-3d .beat--parts-care .beat__text::before,
  .xp-3d .beat--system .beat__text::before {
    inset: -30% -12% -45%;
    background: linear-gradient(to top, rgba(8, 7, 6, .92) 80%, rgba(8, 7, 6, 0));
  }
}

/* Phones and tablets: when the browser bar slides away on the first scroll the
   viewport grows, and anything pinned to the bottom of the screen jumps down
   with it. The words and the welcome S are laid out on the small viewport
   (bar showing) and anchored to the top, so they stay exactly where they are. */
@media (max-width: 900px) {
  .xp-3d .beat__copy { bottom: auto; height: 100vh; height: 100svh; }
  .xp-welcome { bottom: auto; height: 100vh; height: 100lvh; }
}
@media (max-width: 720px) {
  .xp-welcome { place-items: start center; }
  .xp-welcome__s { margin: calc(100svh - 5.5svh - 26.1vw) 0 0; }
}

/* While the sound button is up (the film), it owns the bottom-left corner */
.xp-sound:not([hidden]):not(.is-gone) ~ .xp-skip { opacity: 0; visibility: hidden; }