:root {
  /* Site palette: clinically white office, warm wood + brass accents */
  --bg: #f7f5f0;
  --ink: #201c18;
  --wood: #7a4a26;
  --wood-deep: #4e2e18;
  --brass: #b08a53;
  --muted: #8b8377;
  --line: #e7e2d6;

  /* Hero-only palette: inside the wood-panelled elevator cab (dark, regardless of site theme) */
  --cab-hi: #5c3a22;
  --cab-lo: #241609;
  --cab-panel: #3d2717;
  --cab-cream: #f5f1e8;
  --cab-muted: #cabfa9;
  --cab-glow: #e0aa63;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

/* ================= LOADER ================= */

/* Elevator doors that open onto the site: two walnut panels with a brass seam,
   the wordmark rising letter by letter while they're closed. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
}
body.loading { overflow: hidden; }
.loader-door {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 22%),
    linear-gradient(90deg, #351f0f, #6b4226 45%, #2c1a0c 92%);
  transition: transform .9s cubic-bezier(.72, 0, .18, 1);
}
.loader-door.left  { left: 0;  border-right: 2px solid rgba(176,138,83,.55); }
.loader-door.right { right: 0; border-left: 2px solid rgba(0,0,0,.6); }
.loader-core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--cab-cream);
  transition: opacity .4s ease;
}
.loader-mark {
  display: flex;
  overflow: hidden;
  font-size: clamp(3rem, 9vw, 6rem);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.05;
}
.loader-mark span {
  display: inline-block;
  transform: translateY(115%);
  animation: loader-rise .7s cubic-bezier(.2, .7, .2, 1) forwards;
}
.loader-mark span:nth-child(1) { animation-delay: .10s; }
.loader-mark span:nth-child(2) { animation-delay: .17s; }
.loader-mark span:nth-child(3) { animation-delay: .24s; }
.loader-mark span:nth-child(4) { animation-delay: .31s; }
.loader-mark span:nth-child(5) { animation-delay: .38s; }
.loader-mark sup {
  font-size: .3em;
  align-self: flex-start;
  margin-top: .8em;
  opacity: 0;
  animation: loader-fade .5s ease .6s forwards;
}
.loader-sub {
  font-size: .75rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--cab-muted);
  opacity: 0;
  animation: loader-fade .6s ease .55s forwards;
}
.loader-line {
  width: 0;
  height: 2px;
  background: var(--brass);
  box-shadow: 0 0 12px rgba(176, 138, 83, .8);
  animation: loader-grow 1.1s cubic-bezier(.6, 0, .3, 1) .45s forwards;
}
@keyframes loader-rise { to { transform: translateY(0); } }
@keyframes loader-fade { to { opacity: 1; } }
@keyframes loader-grow { to { width: min(38vw, 300px); } }
.loader.open .loader-door.left  { transform: translateX(-101%); }
.loader.open .loader-door.right { transform: translateX(101%); }
.loader.open .loader-core { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .loader-mark span { transform: none; animation: none; }
  .loader-sub, .loader-mark sup { opacity: 1; animation: none; }
  .loader-line { width: min(38vw, 300px); animation: none; }
  .loader-door { transition-duration: .3s; }
}

/* ================= SITE CHROME ================= */

.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.4rem 3vw;
  z-index: 20;
  color: var(--ink);
  transition: color .5s ease;
  pointer-events: none;             /* let scroll pass; links re-enable below */
}
.site-head a { pointer-events: auto; }
.site-head .wordmark {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .04em;
  color: inherit;
  text-decoration: none;
}
.site-head .wordmark sup { font-size: .45em; }
.site-head .wordmark span {
  display: block;
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .75;
  margin-top: .15rem;
}
.site-head nav { display: flex; gap: 2rem; }
.site-head nav a {
  color: inherit;
  text-decoration: none;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}
.site-head nav a:hover, .site-head nav a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: .35em; }

/* Inside the cab the footage goes dark walnut — flip the chrome to cream.
   app.js toggles .in-cab on <body> from scroll progress. */
body.in-cab .site-head { color: var(--cab-cream); }

/* ================= THE RIDE =================
   Two sticky scroll sections, one per clip. #rideIn carries the walk-in plus
   the climb, so it needs the most travel; #rideOut is just the way out. */

/* Full-bleed: this is a <section>, so it must opt out of the shared
   `section { padding: 14vh 6vw }` or the footage stops filling the screen.

   Height is set from clip length at ~60vh of scroll per second of footage:
   486vh walk-in + 450vh climb + 90vh dissolve + 400vh stepping out. */
.journey { position: relative; padding: 0; height: 1450vh; }

/* One stage for both clips. A sticky section per clip would force the first to
   unstick exactly where the second starts sticking — that is the slide. */
.journey-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--cab-lo);
}

/* Wrapper exists so the HTML-mocked climb can shake the footage
   without disturbing the overlaid copy or the level rail. */
.ride-media {
  position: absolute;
  inset: -2%;          /* bleed, so the shake never exposes an edge */
  display: none;
  will-change: transform, opacity;
}
body.has-video .ride-media { display: block; }
#mediaOut { opacity: 0; }        /* cross-faded in by app.js */

.ride-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.has-video .scene { display: none; }
/* The HTML indicator stays visible in video mode: AI models garble small digits,
   so the video carries a glowing but unreadable panel and this chip is the
   authoritative readout. Add class "diegetic-indicator" to <body> to hide it. */
body.diegetic-indicator .indicator { display: none; }

/* --- fallback scene: walnut wood cab, brass trim --- */
.scene {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}

.cab {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 23.5vw, rgba(0,0,0,.08) 23.5vw 24vw),
    linear-gradient(180deg, var(--cab-hi) 0%, var(--cab-panel) 45%, var(--cab-lo) 100%);
}
.cab-trim {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 18vh rgba(0,0,0,.7);
  pointer-events: none;
}
.bdoor {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;
  background: linear-gradient(90deg, var(--cab-lo), var(--cab-hi) 45%, var(--cab-lo));
  box-shadow: inset 0 0 8vh rgba(0,0,0,.45);
  will-change: transform;
}
.bdoor.left  { left: 0;  border-right: 1px solid rgba(176,138,83,.35); }
.bdoor.right { right: 0; border-left: 1px solid rgba(0,0,0,.5); }

.door {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 20%),
    linear-gradient(90deg, #351f0f, #6b4226 42%, #301c0d 90%);
  box-shadow: inset 0 0 10vh rgba(0,0,0,.5);
  will-change: transform;
  z-index: 3;
}
.door.left  { left: 0;  border-right: 2px solid rgba(0,0,0,.7); }
.door.right { right: 0; border-left: 2px solid rgba(176,138,83,.4); }
.door-frame {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1.2vh #1a0f07, inset 0 0 22vh rgba(0,0,0,.55);
  z-index: 4;
  pointer-events: none;
}

/* --- level rail: vertical ride progress, one stop per pitch line ---
   Reads bottom-to-top because the elevator goes up. Dark ink over the bright
   lobby/gallery, cream inside the cab (body.in-cab, same as the header). */
.level-rail {
  position: absolute;
  left: 3.2vw;
  top: 50%;
  transform: translateY(-50%);
  height: 46vh;
  z-index: 12;
  display: flex;
  color: var(--ink);
  transition: color .5s ease;
  pointer-events: none;
}
body.in-cab .level-rail { color: var(--cab-cream); }
.rail-track {
  position: relative;
  width: 2px;
  height: 100%;
}
.rail-track::before {           /* faint full track under the fill */
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: .18;
}
.rail-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 0%;
  background: var(--brass);
  box-shadow: 0 0 10px rgba(176, 138, 83, .8);
}
.rail-stops {
  position: relative;
  list-style: none;
  width: 0;
}
.rail-stops li {
  position: absolute;
  left: 0;
  transform: translate(-7.5px, 50%); /* centers the dot on the 2px track */
  display: flex;
  align-items: center;
  gap: .8rem;
  white-space: nowrap;
}
.rail-stops .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  transition: background .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.rail-stops li.passed .dot {
  background: var(--brass);
  border-color: var(--brass);
}
.rail-stops li.active .dot {
  background: var(--brass);
  border-color: var(--brass);
  box-shadow: 0 0 12px rgba(176, 138, 83, .95);
  transform: scale(1.35);
}
.rail-stops .lbl {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .5;
  transition: opacity .3s;
}
.rail-stops .lbl b {
  color: var(--brass);
  font-weight: 700;
  margin-right: .55em;
}
.rail-stops li.active .lbl { opacity: 1; }
.rail-stops li.passed .lbl { opacity: .75; }
@media (max-width: 720px) {
  .rail-stops .lbl { display: none; }
  .level-rail { left: 5vw; }
}

/* --- pitch copy --- */
.copy { position: absolute; inset: 0; z-index: 11; pointer-events: none; }
.copy .line {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 8vw;
  opacity: 0;
  will-change: opacity, transform;
}
/* Opening lockup floats over the bright marble lobby: a soft dark scrim keeps
   the cream type legible without reading as a box. */
.copy .line.start {
  background: radial-gradient(ellipse 60% 48% at 50% 52%, rgba(24, 14, 6, .48), transparent 72%);
}
.copy .line .eyebrow {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--cab-cream);
  opacity: .9;
  margin-bottom: 1.4rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.copy .line h1 {
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--cab-cream);
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.copy .line p {
  margin-top: 1.2rem;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: var(--cab-muted);
  text-shadow: 0 1px 12px rgba(0,0,0,.8);
}
/* Start headline carries the brand word in glowing brass over the lobby. */
.copy .line.start .lvl { color: #e8b877; text-shadow: 0 0 18px rgba(232, 184, 119, .55); }
.copy .line sup { font-size: .35em; vertical-align: super; }

.veil {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  z-index: 9;
  pointer-events: none;
}

/* Scroll CTA: a real button, not a whisper. Clickable — app.js rides you in. */
.hint {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 13;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .9rem 2.1rem .7rem;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cab-cream);
  background: rgba(24, 14, 6, .55);
  border: 1px solid rgba(245, 241, 232, .45);
  border-radius: 3rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  animation: hint-pulse 2.6s ease-in-out infinite;
  transition: background .3s, border-color .3s;
}
.hint:hover, .hint:focus-visible {
  background: rgba(24, 14, 6, .8);
  border-color: var(--cab-cream);
}
.hint-arrows { display: flex; flex-direction: column; line-height: .55; font-size: 1.05rem; }
.hint-arrows i { font-style: normal; animation: bob 1.4s ease-in-out infinite; }
.hint-arrows i:last-child { animation-delay: .18s; opacity: .6; }
@keyframes bob { 50% { transform: translateY(5px); } }
@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 241, 232, .35); }
  55%      { box-shadow: 0 0 0 14px rgba(245, 241, 232, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hint, .hint-arrows i { animation: none; }
}

/* ================= SHARED PAGE FURNITURE =================
   Everything below the hero, and everything on the service detail pages.
   Detail pages load this file plus service.css. */

main { position: relative; z-index: 2; background: var(--bg); }

section { padding: 14vh 6vw; }
.wrap { max-width: 1240px; margin: 0 auto; }

/* The level rail, flattened onto the top edge of every page. */
.scroll-bar {
  position: fixed;
  top: 0; left: 0;
  z-index: 30;
  height: 2px;
  width: 0;
  background: var(--brass);
  box-shadow: 0 0 10px rgba(176, 138, 83, .7);
}

/* Detail pages have no dark cab to sit over, so the header needs its own ground. */
.site-head.solid {
  background: rgba(247, 245, 240, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

/* reveal.js adds .is-in when the element first enters the viewport. */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .9s ease var(--d, 0s),
    transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

.eyebrow-lg {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--wood);
}

/* Display type. Each line clips its own overflow so the words rise out of nothing. */
.mega {
  font-size: clamp(2.4rem, 7.6vw, 7rem);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.mega[data-reveal] { opacity: 1; transform: none; }   /* the lines animate, not the block */
.mega .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.mega .ln > span {
  display: block;
  transform: translateY(112%);
  transition: transform 1.05s cubic-bezier(.16, .84, .3, 1) var(--d, 0s);
}
.mega.is-in .ln > span { transform: none; }
.mega .brass { color: var(--wood); }
.mega sup { font-size: .26em; vertical-align: super; }

.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.28rem);
  line-height: 1.75;
  color: var(--muted);
}
.lead strong { color: var(--ink); font-weight: 700; }

.rule[data-reveal] {
  opacity: 1;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.6, 0, .3, 1) var(--d, .1s);
}
.rule[data-reveal].is-in { transform: scaleX(1); }

.btn-brass, .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: 1.05rem 2.2rem;
  border-radius: 3rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .35s, color .35s, gap .35s, border-color .35s;
}
.btn-brass { background: var(--ink); color: var(--cab-cream); }
.btn-brass:hover { background: var(--wood); gap: 1.5rem; }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--wood); color: var(--wood); gap: 1.5rem; }
.btn-brass i, .btn-ghost i { font-style: normal; }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Elevator-shaft hairlines: the site's one piece of ambient texture. */
.shaft {
  position: absolute;
  inset: -10% 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 11.5vw,
    rgba(176, 138, 83, .18) 11.5vw calc(11.5vw + 1px)
  );
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  will-change: transform;
}

/* ================= ARRIVAL ================= */

.arrival {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 20vh 6vw;
}
/* Travelling up, this section is met from its bottom edge — so anchor the copy
   there. Centred content would mean scrolling a screen of empty cream first. */
body.upward .arrival {
  align-items: flex-end;
  min-height: 84vh;
  padding: 12vh 6vw 4vh;
}
.arrival .wrap { width: 100%; }
.arrival .eyebrow-lg { margin-bottom: 2.5rem; }
.arrival .rule { margin: 4rem 0 3rem; }
.arrival-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
}
.arrival-foot .lead { max-width: 52ch; }

/* ================= MARQUEE ================= */

/* The manifesto is one deliberate viewport. The outer rail contributes the
   extra scroll distance; the inner frame stays fixed while every word lands. */
.belief-pin {
  position: relative;
  height: 240svh;
}
.belief {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.marquee {
  order: 2;
  flex: none;
  padding: 2.4rem 0;
  overflow: hidden;
  background: var(--cab-lo);
  color: var(--cab-cream);
  border-top: 1px solid rgba(176, 138, 83, .35);
  border-bottom: 1px solid rgba(176, 138, 83, .35);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee-track > span {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-right: 3rem;
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-track em { color: var(--brass); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ================= MANIFESTO ================= */

.manifesto {
  order: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 10vh, 8rem) 6vw;
}
.manifesto .wrap {
  width: 100%;
  transform: translateY(-3.5vh);
}
.manifesto .eyebrow-lg { margin-bottom: 3rem; }
.manifesto-text {
  font-size: clamp(1.5rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.025em;
  max-width: 20em;
}
/* Words light up as the block travels through the viewport (reveal.js). */
.manifesto-text .w { color: rgba(32, 28, 24, .16); transition: color .4s ease; }
.manifesto-text .w.on { color: var(--ink); }
.manifesto-text .w.key.on { color: var(--wood); }

/* ================= STATS ================= */

.stats { padding-top: 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.stat { background: var(--bg); padding: 3.2rem 2rem; }
.stat b {
  display: block;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.stat b em {
  color: var(--wood);
  font-style: normal;
  font-size: .4em;            /* the numeral stays the hero, the word supports it */
  letter-spacing: .02em;
}
/* Direct child only — the counter lives in a <span> inside <b> and must not
   inherit the label's small uppercase treatment. */
.stat > span {
  display: block;
  margin-top: .9rem;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ================= SERVICES ================= */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 7vh;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.section-title-lg {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: uppercase;
  line-height: 1;
}
.section-head p { color: var(--muted); max-width: 34ch; font-size: .98rem; line-height: 1.65; }

/* ================= DEPARTMENT LOBBY =================
   A full-screen photograph of the lift hall, pinned for one screen. The scroll
   runs the sequence: the explanation sits over the picture as a cream overlay,
   dissolves, and then the three doors light one by one and become selectable.
   So the copy explains first, and only then do you choose.

   The overlay positions in percentages of the PHOTO, not the viewport, so
   .lobby-frame keeps the image's exact 2200x1228 ratio and is scaled to cover.
   Percentages below are measured from the source image; a new photo means
   re-measuring them. */

.lobby-pin { position: relative; height: 240vh; }

.departments {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: 0;
  overflow: hidden;
}

.department-lobby {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #e9e4dc;
}
.department-lobby::after {          /* seats the photo in the page */
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,14,6,.05), transparent 20%, transparent 80%, rgba(24,14,6,.16));
  pointer-events: none;
}

/* Scaled to cover, then nudged down so the brass plates clear the fixed
   header. What gets cropped is empty floor, which costs the picture nothing.
   container-type lets the sign type scale in cqw at any screen size. */
.lobby-frame {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(6.5vh);
  width: max(100%, 179.15svh);      /* 2200 / 1228 = 1.7915 */
  aspect-ratio: 2200 / 1228;
  container-type: inline-size;
}
.lobby-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;                 /* frame already matches the photo ratio */
}

/* ---- the explanation, over the picture ---- */
.lobby-overlay {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
  background: linear-gradient(180deg, rgba(247,245,240,.95), rgba(247,245,240,.82));
  pointer-events: none;
  will-change: opacity, transform;
}
.lobby-overlay .eyebrow-lg { color: var(--wood); }
.lobby-overlay .section-title-lg { margin-top: 1.1rem; }
.lobby-overlay .lobby-sub {
  margin-top: 1.8rem;
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  line-height: 1.7;
}
.lobby-overlay .lobby-sub strong { color: var(--ink); font-weight: 700; }

/* ---- doors ----
   --x / --w come from the markup: the measured left edge and width of each
   door in the photo. Dimmed and inert until the sequence activates them. */
.lobby-departments { position: absolute; z-index: 3; inset: 0; }
.dept-hotspot {
  position: absolute;
  left: var(--x);
  width: var(--w);
  top: 6.4%;
  bottom: 10.5%;
  color: var(--wood-deep);
  text-decoration: none;
  outline: none;
  opacity: .3;
  pointer-events: none;
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1);
}
.dept-hotspot.is-ready { opacity: 1; pointer-events: auto; }
.dept-hotspot::before {             /* warm wash over the door on hover */
  content: "";
  position: absolute;
  inset: 8.5% 0 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(122,74,38,.05), rgba(122,74,38,.16));
  box-shadow: inset 0 0 0 1px rgba(176,138,83,.5);
  transition: opacity .6s ease;
  pointer-events: none;
}
/* Only dim the others once every door is live, or the reveal fights itself. */
.department-lobby.is-live:has(.dept-hotspot:hover) .dept-hotspot:not(:hover),
.department-lobby.is-live:has(.dept-hotspot:focus-visible) .dept-hotspot:not(:focus-visible) { opacity: .45; }
.dept-hotspot:hover::before,
.dept-hotspot:focus-visible::before { opacity: 1; }
.dept-hotspot:focus-visible { box-shadow: inset 0 0 0 2px var(--brass); }

/* Sits exactly on the engraved brass plate above each door. */
.dept-sign {
  position: absolute;
  top: 1.5%;
  left: 50%;
  width: 49%;
  height: 5.9%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25cqw;
  color: var(--wood-deep);
  transition: color .4s ease;
}
.dept-hotspot:hover .dept-sign,
.dept-hotspot:focus-visible .dept-sign { color: #2b1806; }
.dept-sign small {
  font-size: .46cqw;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .68;
  line-height: 1;
}
.dept-sign strong {
  font-size: 1.02cqw;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.dept-number {
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  font-size: .44cqw;
  font-weight: 800;
  letter-spacing: .06em;
  font-style: normal;
  opacity: .55;
}

.dept-description,
.dept-enter {
  position: absolute;
  left: 50%;
  width: 84%;
  transform: translateX(-50%);
  text-align: center;
}
.dept-description {
  bottom: 16%;
  padding: .7cqw .9cqw;
  color: var(--ink);
  background: rgba(247,245,240,.9);
  font-size: .78cqw;
  line-height: 1.45;
  opacity: 0;
  transform: translate(-50%, .6cqw);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
.dept-enter {
  bottom: 8%;
  color: var(--wood-deep);
  font-size: .55cqw;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .45s ease;
}
.dept-enter i { font-style: normal; margin-left: .45rem; }
.dept-hotspot:hover .dept-description,
.dept-hotspot:focus-visible .dept-description { opacity: 1; transform: translate(-50%, 0); }
.dept-hotspot:hover .dept-enter,
.dept-hotspot:focus-visible .dept-enter { opacity: 1; }

.lobby-instruction {
  position: absolute;
  z-index: 4;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(78,46,24,.75);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.department-lobby.is-live .lobby-instruction { opacity: 1; }
.department-lobby.is-live:has(.dept-hotspot:hover) .lobby-instruction { opacity: 0; }


/* --- live previews: each service demonstrating itself, in pure CSS --- */
.viz {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #efe9db, #e2d9c6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

/* websites — a page scrolling inside a browser frame */
.viz-web .win {
  width: 76%; height: 78%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 26px 50px rgba(32, 28, 24, .16);
  display: flex; flex-direction: column;
}
.viz-web .bar {
  height: 24px; flex: none;
  display: flex; align-items: center; gap: 5px;
  padding: 0 10px;
  background: #efe9db;
  border-bottom: 1px solid var(--line);
}
.viz-web .bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.viz-web .bar i:first-child { background: var(--brass); }
.viz-web .page {
  padding: 10px;
  display: flex; flex-direction: column; gap: 7px;
  animation: pagescroll 9s ease-in-out infinite alternate;
}
.viz-web .blk { height: 9px; border-radius: 3px; background: var(--line); }
.viz-web .blk.hero { height: 48px; background: linear-gradient(120deg, var(--wood), var(--brass)); }
.viz-web .blk.s { width: 58%; }
.viz-web .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.viz-web .row3 i { height: 32px; border-radius: 4px; background: var(--line); }
@keyframes pagescroll { to { transform: translateY(-30%); } }

/* boekingen — slots filling up across a week */
.viz-book .cal {
  width: 76%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 26px 50px rgba(32, 28, 24, .16);
}
.viz-book .days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.viz-book .days i {
  font-style: normal; text-align: center;
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.viz-book .slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.viz-book .slots i {
  height: 16px; border-radius: 3px;
  background: var(--line);
  animation: slotbook 6.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * .18s);
}
@keyframes slotbook {
  0%, 26% { background: var(--line); }
  46%, 74% { background: var(--brass); }
  100% { background: var(--line); }
}

/* social — a feed that never stops */
.viz-social { background: linear-gradient(160deg, #2f1c0d, #150d06); border-color: rgba(176, 138, 83, .35); }
.viz-social .phone {
  height: 84%; width: auto; aspect-ratio: 9 / 17;   /* bound by height: the frame is taller than 4:3 */
  background: var(--cab-lo);
  border: 1px solid rgba(176, 138, 83, .4);
  border-radius: 18px;
  overflow: hidden;
  padding: 7px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
}
.viz-social .feed { display: flex; flex-direction: column; gap: 7px; animation: feedscroll 12s linear infinite; }
.viz-social .post { border-radius: 6px; overflow: hidden; background: rgba(245, 241, 232, .07); }
.viz-social .post span { display: block; height: 52px; }
.viz-social .post b { display: block; height: 5px; margin: 6px; border-radius: 2px; background: rgba(245, 241, 232, .18); }
.viz-social .post b + b { width: 55%; }
.viz-social .p1 span { background: linear-gradient(135deg, #4a2c12, #b0662a); }
.viz-social .p2 span { background: linear-gradient(135deg, #10233c, #2f6fb0); }
.viz-social .p3 span { background: linear-gradient(135deg, #33113c, #a03b8f); }
.viz-social .p4 span { background: linear-gradient(135deg, #123326, #2f9a6a); }
@keyframes feedscroll { to { transform: translateY(-50%); } }

/* ================= WORK ================= */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.tile {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.8rem;
  text-decoration: none;
  color: var(--cab-cream);
  position: relative;
  overflow: hidden;
  transition: transform .35s ease;
}
.tile:hover { transform: translateY(-6px); }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65));
}
.tile .cat, .tile .name { position: relative; z-index: 1; }
.tile .cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .2em; color: rgba(255,255,255,.78); }
.tile .name { font-size: 1.5rem; font-weight: 700; margin-top: .3rem; }
.t1 { background: linear-gradient(135deg, #4a2c12, #b0662a); }
.t2 { background: linear-gradient(135deg, #10233c, #2f6fb0); }
.t3 { background: linear-gradient(135deg, #33113c, #a03b8f); }
.t4 { background: linear-gradient(135deg, #123326, #2f9a6a); }
.t5 { background: linear-gradient(135deg, #3c1114, #b03a3a); }
.t6 { background: linear-gradient(135deg, #23262e, #6d7788); }

/* ================= CLOSING CTA ================= */

.cta-dark {
  position: relative;
  overflow: hidden;
  background: var(--cab-lo);
  color: var(--cab-cream);
  padding: 18vh 6vw 8vh;
}
/* The fixed site header overlays the first pixels of the reversed service
   pages. Give the CTA footer a little breathing room so its banner never
   disappears underneath the navigation. */
body.page.upward .cta-dark { padding-top: calc(18vh + 4rem); }
/* Brass light that follows the pointer — the cab lantern, one last time. */
.cta-dark .spot {
  position: absolute;
  top: 0; left: 0;
  width: 55vw; height: 55vw;
  margin: -27.5vw 0 0 -27.5vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 138, 83, .30), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.cta-dark .wrap { position: relative; z-index: 1; }
.cta-dark .eyebrow-lg { color: var(--brass); margin-bottom: 2.5rem; }
.cta-dark .mega .brass { color: var(--brass); }
.cta-dark .lead { color: var(--cab-muted); max-width: 48ch; margin-top: 3rem; }
.cta-mail {
  display: inline-block;
  margin-top: 3.5rem;
  font-size: clamp(1.3rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--cab-cream);
  text-decoration: none;
  border-bottom: 3px solid var(--brass);
  transition: color .3s;
}
.cta-mail:hover { color: var(--brass); }
.cta-foot {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 12vh;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(245, 241, 232, .15);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--cab-muted);
}
.cta-foot nav { display: flex; gap: 2rem; flex-wrap: wrap; }
.cta-foot a { color: var(--cab-muted); text-decoration: none; }
.cta-foot a:hover { color: var(--brass); }

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

@media (max-width: 860px) {
  .department-lobby {
    aspect-ratio: auto;
    height: 68svh;
    min-height: 560px;
  }
  .lobby-departments { padding-inline: 1%; }
  .dept-sign { width: 82%; }
  .arrival-foot { grid-template-columns: 1fr; align-items: start; }
  .manifesto-text { max-width: none; }
  .manifesto .wrap { transform: translateY(-2vh); }
  .marquee { padding: 1.7rem 0; }
}

@media (max-width: 560px) {
  .department-lobby { height: 72svh; min-height: 540px; }
  .dept-sign { width: 92%; padding-inline: .45rem; }
  .dept-number, .dept-description { display: none; }
  .dept-enter { width: 92%; font-size: .42rem; letter-spacing: .08em; }
  .lobby-instruction { font-size: .42rem; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .belief-pin { height: auto; }
  .belief {
    position: relative;
    height: 100svh;
  }
  .marquee-track,
  .viz-web .page,
  .viz-book .slots i,
  .viz-social .feed { animation: none; }
  [data-reveal], .mega .ln > span, .rule[data-reveal],
  .lobby-poster, .dept-hotspot, .dept-hotspot::before,
  .dept-sign, .dept-description { transition: none; }
}

/* ================= UPWARD MODE =================
   The building reads bottom-to-top: you land on the ground floor and scroll UP
   through it, which is what a lift actually does. Section order is unchanged —
   only the direction of travel is.

   To switch it off: remove `upward` from <body>, or load any page with
   ?dir=down. ?dir=up forces it back on. */

body { transition: opacity .35s ease; }
body.pre { opacity: 0; }                 /* hides the jump to the bottom on load */

/* The bottom-pin needs a live scrollport, so the loader can't lock it. */
body.upward.loading { overflow: visible; }

body.upward .flow,
body.upward main { display: flex; flex-direction: column-reverse; }
body.upward .flow > *,
body.upward main > * { flex: none; }     /* flex items must keep their own height */

/* In upward mode the coach replaces the downward scroll hint entirely —
   two competing affordances pointing opposite ways would be worse than none. */
body.upward .hint { display: none; }

.coach { display: none; }
body.upward .coach {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6vh;
  pointer-events: none;
  background: linear-gradient(0deg,
    rgba(24, 14, 6, .88) 0%,
    rgba(24, 14, 6, .40) 26%,
    transparent 52%);
  transition: opacity .6s ease;
}
body.upward .coach.gone { opacity: 0; }
/* Detail pages open on cream, not on dark footage — flip the scrim. */
body.page.upward .coach {
  background: linear-gradient(0deg,
    rgba(247, 245, 240, .97) 0%,
    rgba(247, 245, 240, .78) 26%,
    transparent 54%);
}
body.page .coach-inner { color: var(--ink); }
body.page .coach-sub { color: var(--muted); }
.coach-inner {
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  color: var(--cab-cream);
  background: none;
  border: 0;
  font: inherit;
}
.coach-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .48;
  font-size: 2.1rem;
  color: var(--brass);
}
.coach-arrows i { font-style: normal; animation: coach-up 1.5s ease-in-out infinite; }
.coach-arrows i:nth-child(2) { animation-delay: .16s; opacity: .6; }
.coach-arrows i:nth-child(3) { animation-delay: .32s; opacity: .3; }
@keyframes coach-up {
  0%, 100% { transform: translateY(7px); }
  50%      { transform: translateY(-7px); }
}
.coach-main {
  display: block;
  margin-top: 1.3rem;
  font-size: clamp(1.5rem, 4.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1;
}
.coach-main em { font-style: normal; color: var(--brass); }
.coach-sub {
  display: block;
  margin-top: .8rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cab-muted);
}
/* Fired when someone scrolls down at the very bottom, where nothing happens. */
.coach.wrong .coach-inner { animation: coach-shake .45s ease; }
.coach.wrong .coach-arrows { color: #ffd9a0; }
.coach.wrong .coach-sub { color: var(--brass); }
@keyframes coach-shake {
  20% { transform: translateY(10px); }
  60% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .coach-arrows i { animation: none; }
  body { transition: none; }
}