: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; }

.departments .section-head { margin-bottom: 4vh; }
.departments .section-head .eyebrow-lg { margin-bottom: 1.1rem; }

.department-lobby {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  min-height: 520px;
  max-height: 82svh;
  overflow: hidden;
  background: #e9e4dc;
  border: 1px solid rgba(176, 138, 83, .42);
  box-shadow: 0 34px 80px rgba(36, 22, 9, .2);
}
.department-lobby::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,14,6,.04), transparent 24%, transparent 74%, rgba(24,14,6,.16));
  pointer-events: none;
}
.lobby-poster {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.lobby-poster {
  object-fit: cover;
  transition: opacity .7s ease;
}
.lobby-departments {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 2.2% 2.4% 3.5%;
}
.dept-hotspot {
  position: relative;
  min-width: 0;
  color: var(--cab-cream);
  text-decoration: none;
  outline: none;
  transition: opacity .45s ease, background .6s ease;
}
.dept-hotspot::before {
  content: "";
  position: absolute;
  inset: 8% 4% 3%;
  opacity: 0;
  background: linear-gradient(180deg, rgba(122,74,38,.03), rgba(122,74,38,.11));
  box-shadow: inset 0 0 0 1px rgba(176,138,83,.42);
  transition: opacity .6s ease;
  pointer-events: none;
}
.department-lobby:has(.dept-hotspot:hover) .dept-hotspot:not(:hover),
.department-lobby:has(.dept-hotspot:focus-visible) .dept-hotspot:not(:focus-visible) { opacity: .52; }
.dept-hotspot:hover::before,
.dept-hotspot:focus-visible::before { opacity: 1; }
.dept-hotspot:focus-visible { box-shadow: inset 0 0 0 2px var(--brass); }

.dept-sign {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(48%, 145px);
  min-height: clamp(2rem, 3.2vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: .35rem .4rem;
  transform: translateX(-50%);
  color: var(--wood-deep);
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), border-color .4s ease;
}
.dept-hotspot:hover .dept-sign,
.dept-hotspot:focus-visible .dept-sign {
  transform: translateX(-50%) translateY(-5px);
  color: var(--ink);
}
.dept-sign small {
  margin-bottom: .28rem;
  color: rgba(78,46,24,.72);
  font-size: clamp(.35rem, .45vw, .48rem);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.dept-sign strong {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(.58rem, .9vw, .88rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-overflow: ellipsis;
}
.dept-number {
  position: absolute;
  z-index: 1;
  top: .3rem;
  left: calc(50% + min(18%, 48px));
  display: grid;
  place-items: center;
  width: 1.8rem;
  aspect-ratio: 1;
  color: var(--wood-deep);
  font-size: .4rem;
  font-weight: 800;
  letter-spacing: .08em;
  pointer-events: none;
}
.dept-description,
.dept-enter {
  position: absolute;
  left: 50%;
  width: min(82%, 270px);
  transform: translateX(-50%);
  text-align: center;
}
.dept-description {
  bottom: 4.2rem;
  color: var(--ink);
  background: rgba(247,245,240,.84);
  padding: .5rem .7rem;
  font-size: clamp(.68rem, .9vw, .88rem);
  line-height: 1.45;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
.dept-enter {
  bottom: 1.45rem;
  color: var(--wood-deep);
  font-size: clamp(.48rem, .6vw, .63rem);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.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);
}
.lobby-instruction {
  position: absolute;
  z-index: 4;
  bottom: .55rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(78,46,24,.7);
  font-size: .49rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* --- 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;
}
/* 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; }
}