/* =========================================================================
   Full preview · Maison — the whole narrative arc, dressed like bixlers.com:
   white and cream pages, small corner marks (logo, act and page),
   centred Title Case Garamond, tracked eyebrows, Avenir text, image-with-text
   sections, act openers with a photo over a white band, white cards, serif figures.
   Grows from directions/maison/maison.css; kept separate so Maison stays as shown.
   ========================================================================= */

body[data-deck="full"] {
  --frame: #000; /* around the slide, when the window is not 16:9 */
  --bg: var(--c-white);
  --fg: var(--c-ink);
  --muted: rgba(15, 27, 24, 0.55);
  --text: rgba(15, 27, 24, 0.78);
  --rule: rgba(15, 27, 24, 0.14);
  --accent: var(--c-green);
  --line: var(--c-green);
  --line-soft: rgba(35, 83, 60, 0.32);
  --fill-accent: rgba(35, 83, 60, 0.08);
}
.slide.cream {
  --bg: var(--c-paper);
}

/* ---- Type (UI guide ratios, scaled for 1920) ---- */
.eyebrow {
  margin: 0;
  font: 500 17px/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.title {
  margin: 0;
  font: 400 100px/1.06 var(--serif);
  letter-spacing: -0.005em;
  color: var(--fg);
}
.h2 {
  margin: 0;
  font: 400 74px/1.08 var(--serif);
  color: var(--fg);
}
.h3 {
  margin: 0;
  font: 400 58px/1.08 var(--serif);
  color: var(--fg);
}
.body {
  margin: 0;
  font: 400 25px/1.6 var(--sans);
  letter-spacing: 0.02em;
  color: var(--text);
}
.year {
  margin: 0;
  font: 400 21px/1 var(--sans);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.card {
  background: var(--c-white);
}

/* ---- Corner marks: small logo top-left, act and page top-right ---- */
.folio {
  position: absolute;
  left: calc(
    64px + var(--cx, 0px)
  ); /* the window's corners when the slide is trimmed (full.js, fitDeck) */
  right: calc(64px + var(--cx, 0px));
  top: calc(46px + var(--cy, 0px));
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fg);
  pointer-events: none;
  transition: opacity 0.6s;
}
/* the script only: the logo image is framed on "Bixler's", the rules and 1785 stay out of view
   (on the 400 x 209 logo the script spans x 28-378, y 40-140) */
.folio .logo {
  --k: 0.5;
  display: block;
  width: calc(350px * var(--k));
  height: calc(100px * var(--k));
  overflow: hidden;
}
.folio .logo img {
  display: block;
  width: calc(400px * var(--k));
  height: auto;
  margin: calc(-40px * var(--k)) 0 0 calc(-28px * var(--k));
}
.folio .where {
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.folio .where b {
  margin-left: 18px;
  font-weight: 600;
}
/* on an annex page: back to the annex contents */
.folio .to-index {
  pointer-events: auto; /* the corner marks let clicks through; this one is a button */
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}
.folio .to-index svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  opacity: 0.7;
}
.folio .to-index:hover {
  color: var(--accent);
}
.folio.on-photo {
  color: #fff;
}
.folio.on-photo .where {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* ---- Cover ---- */
.open-hero {
  position: absolute;
  inset: 0;
  z-index: 4;
}
.open-hero .photo {
  inset: 0;
}
.open-hero .photo img {
  object-position: 50% 44%;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 27, 24, 0.72) 0%,
    rgba(15, 27, 24, 0.25) 45%,
    rgba(15, 27, 24, 0.1) 100%
  );
}
.hero-brand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 130px;
  text-align: center;
  color: var(--c-white);
}
.hero-brand .logo-white {
  width: 520px;
  height: auto;
  margin: 0 auto;
}
.hero-brand .claim {
  margin: 34px 0 0;
  font: 500 18px/1.4 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-brand .prepared {
  margin: 26px 0 0;
  font: 400 15px/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* The cover: the new house drawn in line (img/house.svg, traced in by full.js), large, standing on
   its pavement line with the logo written by hand under it (logo-write.js), as a wordmark under a
   building; "Prepared for Rolex" signs the bottom right. The drawing's 1920 x 1080 frame is scaled
   1.06: the attic at 44, the pavement at 742. */
#cover .cover-house {
  position: absolute;
  left: -58px;
  top: -292px;
  width: 2035px;
  height: 1145px;
}
#cover .cover-house svg {
  display: block;
  width: 100%;
  height: 100%;
}
#cover .hero-brand {
  top: 725px;
  bottom: auto;
  color: var(--fg);
}
#cover .logo-write-box {
  width: 500px;
}
#cover .claim {
  margin-top: -18px; /* the logo's artwork has air under 1785 */
  font-size: 15px;
}
/* Bixler's green for the cover only: the drawing, the logo and the words in paper, the clock's
   ring still gold */
#cover {
  --bg: var(--c-green);
}
#cover .house path,
#cover .house rect,
#cover .house circle {
  stroke: var(--c-paper);
}
#cover .house .gold {
  stroke: #b4975a;
}
#cover .house [fill="#f9f8f0"] {
  fill: var(--c-green);
}
#cover .house [fill="#0f1b18"],
#cover .house .ins {
  fill: var(--c-paper);
}
#cover .hero-brand {
  color: var(--c-paper);
}
#cover .logo-write {
  filter: brightness(0) invert(1);
  opacity: 0.96;
}
/* the house traced from the pavement up (each line's --d and --len are set by full.js) */
.house-draw .ln {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.slide.is-active .house-draw .ln {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s cubic-bezier(0.3, 0, 0.2, 1) var(--d);
}
.house-draw .lf {
  opacity: 0;
}
.slide.is-active .house-draw .lf {
  opacity: 1;
  transition: opacity 0.8s ease var(--d);
}
@media (prefers-reduced-motion: reduce) {
  .house-draw .ln {
    stroke-dasharray: none;
  }
  .house-draw .lf {
    opacity: 1;
  }
}
.logo-write-box {
  width: 560px;
  margin: 0 auto;
}
.logo-write,
.logo-write-box .logo-white {
  display: block;
  width: 100%;
  height: auto;
}
/* ---- The history as one flight (full.js): images come toward us out of the year; the flight
   lands on each key moment, image large on the left, its card beside it ---- */
.fl-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fl-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  opacity: 0;
}
.fl-frame {
  position: absolute;
  transform: translate(-50%, -50%);
}
.fl-frame img,
.fl-frame video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: calc(
    var(--w, 9999px) * 1.3
  ); /* tall pieces (a tall clock) are framed, not stretched */
  object-fit: cover;
  object-position: 50% 30%;
}
/* the product shots sit on 98 % white: multiplied and lifted, the white melts into the paper */
.fl-item.piece {
  mix-blend-mode: multiply;
}
.fl-item.piece img {
  filter: brightness(1.03);
}
/* the year, with a soft haze of paper the images come out of */
.fl-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 200;
  width: 560px;
  padding: 60px 0;
  transform: translate(-50%, -50%);
  text-align: center;
  background: radial-gradient(
    closest-side,
    rgba(249, 248, 240, 0.85) 40%,
    rgba(249, 248, 240, 0)
  );
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.fl-center.off {
  opacity: 0;
}
.fl-year {
  margin: 0;
  font: 400 132px/1 var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fg);
}
.fl-caption {
  margin: 22px 0 0;
  font: 500 15px/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.fl-center.today .fl-caption {
  opacity: 1;
}
/* the card of a key moment, beside its image (the image rests at 200-840 x 190-830) */
.fl-card {
  position: absolute;
  left: 760px;
  top: 510px;
  z-index: 210;
  width: 960px;
  padding: 70px 84px 80px;
  opacity: 0;
  transform: translate(48px, -50%);
  transition:
    opacity 0.7s var(--ease),
    transform 0.9s var(--ease);
  pointer-events: none;
}
.fl-card.shown {
  opacity: 1;
  transform: translate(0, -50%);
}
.fl-card .h2,
.fl-card .h3 {
  margin-top: 22px;
}
.fl-card .body {
  margin-top: 24px;
}
/* the timeline's year row, smaller, as the flight's progress */
.fl-years {
  bottom: 52px;
  z-index: 220;
  gap: 64px;
}
.fl-years li {
  font-size: 30px;
}
.fl-years li::after {
  bottom: -10px;
}

/* ---- Centred intro block + photo cards (website "Legacy / Heritage / Philosophy") ---- */
.intro {
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
  text-align: center;
}
.intro .title {
  max-width: 1440px;
  margin: 22px auto 0;
}
/* ---- Act dial: one turn of the clock across the four acts (the first deck's dial) ---- */
.act-dial {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1040px;
  height: 1008px;
  margin: -504px 0 0 -520px;
}
/* One continuous move toward the clock: it grows gently while the dot travels to the act's
   hour, then accelerates past us as the next page opens from its centre. The same animation
   runs on the leaving slide, so it never restarts or stops. */
.slide.is-active .act-dial,
.slide.is-leaving .act-dial,
.slide.held .act-dial {
  animation: dial-fly 3.2s linear both;
}
@keyframes dial-fly {
  0% {
    transform: scale(0.84);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  12% {
    opacity: 1;
  }
  58% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.4);
  }
  86% {
    opacity: 1;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}
.slide.is-active .act-center,
.slide.is-leaving .act-center,
.slide.held .act-center {
  animation: center-fly 3.2s linear both;
}
@keyframes center-fly {
  0%,
  62% {
    transform: none;
    opacity: 1;
    filter: blur(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.4);
  }
  72% {
    opacity: 0;
    filter: blur(8px);
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
    filter: blur(10px);
  }
}
/* The type rises out of a soft blur, one line after another */
.slide.is-active .act-center .in {
  animation: act-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--d, 0) * 1ms + 380ms);
}
@keyframes act-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
/* Linked transitions, run by full.js (the engine switches these slides instantly and full.js
   holds the neighbouring slide on screen): the clock draws itself over the page we were on,
   which recedes into the cream; then its face opens like a window onto the next page. */
.slide.held {
  visibility: visible;
  z-index: 1;
}
.act-dial-slide {
  background: transparent;
}
.act-bg {
  position: absolute;
  inset: 0;
  background: var(--bg);
}
.slide.is-active .act-bg {
  animation: act-bg-in 0.55s ease 0.05s both;
}
@keyframes act-bg-in {
  from {
    opacity: 0;
  }
}
.slide.held.recede:not(.is-active) {
  animation: recede 1.1s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes recede {
  to {
    transform: scale(0.94);
    filter: blur(6px);
  }
}
/* Out of the history flight into a clock: the flight stays on top with no paper of its own, so
   its images keep flying past us in front of the clock while its words fade. The clock goes
   under it (z-index -1) rather than the flight over it (a z-index would isolate the flight, and
   the product shots, multiplied into the paper, would show their white boxes). */
.slide.held.fly-out {
  z-index: auto;
  background: transparent;
  pointer-events: none;
}
.slide.is-active.from-flight {
  z-index: -1;
}
.slide.fly-out .folio,
.slide.fly-out .fl-center,
.slide.fly-out .fl-years {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.slide.fly-out .fl-card.shown {
  opacity: 0;
  transform: translate(0, -50%) scale(1.08);
  transition:
    opacity 0.45s ease,
    transform 1.1s cubic-bezier(0.45, 0, 0.85, 0.55);
}
.slide.from-flight .act-bg {
  animation: none;
}
.slide.iris-in {
  animation: iris 1s cubic-bezier(0.5, 0, 0.85, 0.4) both;
}
@keyframes iris {
  0% {
    clip-path: circle(390px at 50% 50%);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    clip-path: circle(1240px at 50% 50%);
    opacity: 1;
  }
}
.act-dial .ring {
  fill: none;
  stroke: var(--line-soft);
  stroke-width: 1.5;
}
.act-dial .tick {
  stroke: var(--line-soft);
  stroke-width: 1.5;
}
.act-dial .tick.mj {
  stroke: var(--line);
  stroke-width: 2;
  opacity: 0.55;
}
/* The ticks draw in clockwise as the clock arrives */
.slide.is-active .act-dial .tick {
  animation: tick-in 0.6s ease both;
  animation-delay: calc(var(--i) * 11ms + 60ms);
}
@keyframes tick-in {
  from {
    opacity: 0;
  }
}
/* The hand is a single dot travelling round the rim, the green arc trailing behind it */
.act-dial .arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  stroke-dasharray: calc(var(--from) * 1px) 400px;
  transition: stroke-dasharray 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
.slide.is-active .act-dial .arc {
  stroke-dasharray: calc(var(--hand) * 1px) 400px;
}
.act-dial .hand {
  transform: rotate(var(--from, 0deg));
  transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
.act-dial .pin {
  fill: var(--accent);
}
.act-dial .halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  opacity: 0.35;
}
.slide.is-active .act-dial .hand {
  transform: rotate(var(--hand, 0deg));
}
.slide.is-leaving .act-dial .hand,
.slide.is-leaving .act-dial .arc,
.slide.held .act-dial .hand,
.slide.held .act-dial .arc {
  transition: none;
}
.slide.held .act-dial .hand {
  transform: rotate(var(--hand, 0deg));
}
.slide.held .act-dial .arc {
  stroke-dasharray: calc(var(--hand) * 1px) 400px;
}
.act-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.act-num {
  margin: 0;
  font: 400 120px/1 var(--serif);
  color: var(--accent);
}
.act-name {
  margin: 28px 0 0;
  font: 400 132px/1 var(--serif);
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--fg);
}
.act-lede {
  margin: 26px 0 0;
  font: italic 400 34px/1.3 var(--serif);
  color: var(--muted);
}

/* ---- 1785 (legacy carousel: image with a white card across it) ---- */
.origin-photo {
  left: 200px;
  top: 236px;
  width: 640px;
  height: 574px;
  background: #e9e4d6;
}
.origin-card {
  position: absolute;
  left: 760px;
  top: 330px;
  width: 960px;
  padding: 70px 84px 80px;
}
.origin-card .h2 {
  margin-top: 24px;
}
.origin-card .body {
  margin-top: 28px;
}
.origin-year {
  position: absolute;
  left: 200px;
  top: 840px;
  font: 400 21px/1 var(--sans);
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---- Timeline (the website's legacy carousel, panned sideways) ---- */
.tl-eyebrow {
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
  text-align: center;
}
.tl-window {
  position: absolute;
  left: 0;
  right: 0;
  top: 230px;
  height: 640px;
}
.tl-track {
  position: absolute;
  inset: 0;
  transform: translateX(calc(var(--step, 0) * -1920px));
  transition: transform 1.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.tl-panel {
  position: absolute;
  top: 0;
  left: calc(var(--k) * 1920px);
  width: 1920px;
  height: 640px;
}
.tl-panel .photo {
  left: 300px;
  top: 0;
  width: 600px;
  height: 600px;
  transform: translateX(calc((var(--step, 0) - var(--k)) * 420px));
  transition: transform 1.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.tl-panel .card {
  position: absolute;
  left: 840px;
  top: 110px;
  width: 800px;
  padding: 64px 76px 72px;
}
.tl-panel .h3 {
  margin-top: 22px;
}
.tl-panel .body {
  margin-top: 24px;
}
.tl-quote {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font: italic 400 26px/1.35 var(--serif);
  color: var(--fg);
}
.tl-quote span {
  display: block;
  margin-top: 12px;
  font: 500 13px/1 var(--sans);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.years {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 96px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 84px;
}
.years li {
  position: relative;
  font: 400 40px/1 var(--serif);
  color: rgba(15, 27, 24, 0.3);
  transition: color 0.8s var(--ease);
}
.years li.past {
  color: rgba(15, 27, 24, 0.55);
}
.years li.focus {
  color: var(--fg);
}
.years li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.8s var(--ease);
}
.years li.focus::after {
  transform: scaleX(1);
}

/* ---- Image with text (website "Made by Hand, in Montréal") + the three-icon row ---- */
.iwt-photo {
  left: 160px;
  top: 190px;
  width: 820px;
  height: 700px;
}
.iwt-copy {
  position: absolute;
  left: 1100px;
  width: 700px;
  top: 104px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.iwt-copy .h2 {
  margin-top: 24px;
  font-size: 68px;
}
.iwt-copy .body {
  margin-top: 28px;
  font-size: 23px;
}
.figures {
  list-style: none;
  margin: 56px 0 0;
  padding: 44px 0 0;
  width: 100%;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.figures li {
  opacity: 0.3;
  transition: opacity 0.8s var(--ease);
}
.figures li.focus {
  opacity: 1;
}
.figures b {
  display: block;
  font: 400 64px/1 var(--serif);
  color: var(--accent);
}
.figures span {
  display: block;
  margin-top: 16px;
  font: 400 18px/1.45 var(--sans);
  color: var(--text);
}

/* ---- Lehigh Valley map and the block ---- */
.map-art {
  position: absolute;
  left: 90px;
  top: 130px;
  width: 1000px;
  height: 900px;
}
.map-art svg {
  overflow: hidden;
}
.side-copy {
  position: absolute;
  left: 1160px;
  width: 640px;
  top: 104px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.side-copy .h2 {
  margin-top: 24px;
  font-size: 64px;
}
.side-copy .body {
  margin-top: 28px;
  font-size: 23px;
}
.places {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.places li {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  font: 400 22px/1.4 var(--sans);
  color: var(--fg);
}
.art .lbl {
  fill: var(--text);
  font: 600 17px var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.art .lbl-serif {
  fill: var(--fg);
  font: italic 400 30px var(--serif);
}
.map-g {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform 1.9s var(--ease-io);
}
#valley.s1 .map-g {
  transform: translate(-180px, -172px) scale(2.4);
}
.map-labels {
  transition: opacity 0.8s var(--ease);
}
#valley.s1 .map-labels {
  opacity: 0;
}
.map-down {
  opacity: 0;
  transition: opacity 1s var(--ease) 0.9s;
}
#valley.s1 .map-down {
  opacity: 1;
}
/* the next click dives on through the Easton dot (at 500, 450 in the box) into the block: the map
   keeps growing around the dot and dissolves while the block grows out of it, from the new house */
.map-g {
  transition:
    transform 1.9s var(--ease-io),
    opacity 0.8s var(--ease) 0.6s;
}
#valley.s2 .map-g {
  transform: translate(-3578px, -3281px) scale(14.4);
  opacity: 0;
}
#valley.s2 .map-down {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.block-art {
  opacity: 0;
  transform: translate(278px, 166px) scale(0.12);
  transform-origin: 222px 284px;
  transition:
    transform 1.9s var(--ease-io),
    opacity 0.6s var(--ease);
  pointer-events: none;
}
#valley.s2 .block-art {
  opacity: 1;
  transform: none;
  transition:
    transform 1.9s var(--ease-io),
    opacity 1s var(--ease) 0.5s;
}
/* the text on the right: the valley goes, then why here comes */
.valley-copy {
  transition: opacity 0.5s var(--ease) !important;
}
.why-copy.on {
  transition-delay: 0.9s;
}
.map-g .river {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  opacity: 0.7;
}
.map-g .grat {
  stroke: var(--rule);
  stroke-width: 1;
}
.map-g .route {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-dasharray: 6 8;
  opacity: 0.6;
}
.map-g .city {
  fill: var(--line);
}
.map-g .home {
  fill: var(--accent);
}
.map-g .home-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 3.2s var(--ease) infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
.trio {
  font-size: 96px !important;
}
.trio span {
  display: inline-block;
}
.reasons {
  margin: 40px 0 0;
  border-top: 1px solid var(--rule);
}
.reasons > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.reasons dt {
  margin-bottom: 10px;
  font: 500 15px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.reasons dd {
  margin: 0;
  font: 400 23px/1.45 var(--sans);
  color: var(--text);
}
/* labels on the picture keep a paper halo, as on a printed map */
.block .lbl-s,
.block .lbl-st,
.block .lbl-serif {
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.block .lbl-st {
  fill: var(--muted);
  font: 600 11px var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.block .house {
  fill: var(--accent);
}
.block .lbl-in {
  fill: var(--c-white);
  font: italic 400 26px var(--serif);
}
/* a reason shown: the map steps back, what it points at comes forward in green */
.block .base {
  transition: opacity 0.9s var(--ease);
}
#valley.s3 .block .base {
  opacity: 0.55;
}
.block .why .lbl-s {
  fill: var(--accent);
  font-size: 15px;
}
.block .lot-f {
  fill: rgba(35, 83, 60, 0.2);
  stroke: var(--line);
  stroke-width: 2.5;
}
/* central: Centre Square ringed, the theatre and the market pinned */
.block .ring-sq {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}
/* the clock's move from Centre Square: drawn once from the square to the house, quietly */
.block .move {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
  stroke-dasharray: 6 7;
  stroke-linecap: round;
  opacity: 0.7;
}
.block .move-draw {
  fill: none;
  stroke: #fff;
  stroke-width: 16;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0s 0.9s; /* back once the reason has faded */
}
.block .why.on .move-draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2s var(--ease-io) 0.5s;
}
.block .pin {
  fill: var(--bg);
  stroke: var(--line);
  stroke-width: 2.5;
}
.block .pin-a {
  fill: var(--accent);
}
/* where the clock stood: it has moved on along the dashed arc */
.block .pin-was {
  stroke-dasharray: 3 4;
}

/* ---- The next 241 years (Transmission) ---- */
.vision-photo {
  left: 0;
  top: 0;
  right: 0;
  height: 600px;
}
.vision-copy {
  position: absolute;
  left: 128px;
  top: 680px;
  width: 900px;
}
.vision-copy .h2 {
  margin-top: 18px;
}
.vision-copy .body {
  margin-top: 22px;
  max-width: 820px;
}
.vision-quote {
  position: absolute;
  left: 1160px;
  top: 700px;
  width: 640px;
  margin: 0;
  display: grid;
  grid-template-columns: 104px 1fr;
  column-gap: 30px;
}
.vision-quote img {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
}
.vision-quote blockquote {
  margin: 0;
  font: italic 400 32px/1.3 var(--serif);
  color: var(--fg);
}
.vision-quote figcaption {
  grid-column: 2;
  margin-top: 16px;
  font: 500 15px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- The invitation: the house in a frame, then it grows to fill the screen,
   then we zoom through its door and land on the Rolex Corner ---- */
.nc-copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
  z-index: 3;
  text-align: center;
  transition: opacity 0.6s;
}
.nc-copy .title {
  margin-top: 18px;
  font-size: 80px;
  line-height: 1.04;
}
.nc-copy .body {
  margin-top: 22px;
}
.nc-building {
  position: absolute;
  left: 269px;
  top: 172px;
  width: 1382px;
  height: 778px;
  overflow: hidden;
  z-index: 1;
  transition:
    left 1.4s var(--ease-io),
    top 1.4s var(--ease-io),
    width 1.4s var(--ease-io),
    height 1.4s var(--ease-io),
    opacity 1s var(--ease);
}
.elev {
  display: block;
  width: 100%;
  height: 100%;
}
#offer.s1 .nc-building {
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
}
/* step 1: the house comes full screen, then steps back while its rooms in use light up in it
   (full.js, data-delay); step 2: the film dissolves in over it and walks us through its door */
#offer.s1:not(.s2) .nc-building {
  opacity: 0.3;
  transition:
    left 1.4s var(--ease-io),
    top 1.4s var(--ease-io),
    width 1.4s var(--ease-io),
    height 1.4s var(--ease-io),
    opacity 1s var(--ease) 1.2s;
}
/* the film's first frame is this drawing to the pixel (the clock aside: the film has it at the
   corner), so it dissolves in over it and plays; it holds on the hall */
.nc-film {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: url(film/opening-end.jpg?v=5) center / cover;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.nc-film.done video {
  visibility: hidden; /* back from a later page: the last frame, as a still */
}
.nc-film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#offer.s2 .nc-film {
  opacity: 1;
}
.nc-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 92px;
  z-index: 3;
  text-align: center;
}
.slide .nc-card[data-only] {
  transform: none;
  transition: opacity 0.8s var(--ease) 0.5s;
}
.slide .nc-card[data-only]:not(.on) {
  transition: opacity 0.3s ease;
}
.nc-card .h3 {
  margin-top: 16px;
  font-size: 60px;
}
.nc-line {
  max-width: 1300px;
  margin: 14px auto 0;
  font: 400 22px/1.5 var(--sans);
  color: var(--text);
}
#offer.s1 .nc-copy,
#offer.s2 .folio {
  opacity: 0;
}

.callouts {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.callouts li {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  font: 400 22px/1.5 var(--sans);
  color: var(--text);
}
.callouts b {
  display: block;
  margin-bottom: 6px;
  font: 400 32px/1.2 var(--serif);
  color: var(--fg);
}

/* ---- More than a store: back outside, then the house cut open ---- */
.exp-house {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 1s var(--ease);
}
.exp-house .elev {
  transform-origin: 960px 891px;
}
.slide.is-active .exp-house .elev {
  animation: step-out 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes step-out {
  from {
    transform: scale(2.4);
  }
  to {
    transform: none;
  }
}
#experience.s1 .exp-house {
  opacity: 0.14;
}
.exp-cut {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.exp-head {
  z-index: 3;
}
/* the rooms in use: each lit in its green frame, the frame drawn round it (also annex A8) */
.cut .cut-zone,
.cut .cut-l {
  transition-delay: var(--d);
}
.cut .cut-zone:not(.on),
.cut .cut-l:not(.on) {
  transition-delay: 0s;
}
.cut .ghost {
  opacity: 0.3;
}
.cut .zone {
  fill: rgba(35, 83, 60, 0.06);
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0s 0.9s;
}
.cut .on .zone {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.3s var(--ease-io) var(--d);
}
.cut .lead {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cut .lbl-serif {
  font-size: 36px;
}

/* ---- The rooms (the Rolex Corner, the museum, the service center, the administration): the
   picture lands full page and holds, then draws aside to the right, uncovering the panel on the
   left; on Next (the room's last step, full.js) it spreads back over the panel, toward the left,
   and waits full page for the next click. The picture keeps its size all along (the frame only
   uncovers or covers it, so nothing zooms); it pans a little to its half's framing (--r, its
   right edge past the page's in the half; -55px centres the 2030 px wide picture full page).
   From room to room the pages slide in the reading direction, the picture lagging the words ---- */
.room-photo {
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2; /* over the panel, which it uncovers */
  width: 1920px;
  transition: width 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.room-photo img {
  position: absolute;
  top: 0;
  right: -55px;
  left: auto;
  width: 2030px; /* the renders, 1.88 : 1, at the page's height */
  height: 1080px;
  transition: right 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.room {
  --r: -375px; /* the half framed on the picture's middle */
}
#rolex {
  --r: -100px; /* the green Rolex wall in the half */
}
.slide.is-active .room-photo {
  width: calc(1280px - var(--cx, 0px)); /* the panel measured from the window's edge */
  transition: width 2.2s cubic-bezier(0.45, 0, 0.25, 1) 1s;
}
.slide.is-active .room-photo img {
  right: var(--r);
  transition: right 2.2s cubic-bezier(0.45, 0, 0.25, 1) 1s;
}
.room-copy .in,
.room-copy .split .w > span {
  animation-duration: 1.6s !important;
}
.stage.overview .room-photo {
  width: calc(1280px - var(--cx, 0px));
}
.stage.overview .room-photo img {
  right: var(--r);
}
.room-copy {
  position: absolute;
  left: calc(84px + var(--cx, 0px)); /* inside the window when the slide is trimmed (fitDeck) */
  top: 0;
  bottom: 30px;
  width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.6s var(--ease);
}
.room-copy .title {
  margin-top: 22px;
  font-size: 76px;
}
.room-copy .points li {
  font-size: 20px;
}
.room-copy .body {
  margin-top: 30px;
}
/* the corner marks: the label over the picture in white; the logo dark on the panel, white
   while the picture covers it (arriving, and full page at the end) */
.folio.half .where {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.folio .logo {
  position: relative;
}
.folio .logo img.w {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease 0.3s;
}
.folio .logo img:first-child {
  transition: opacity 0.5s ease 0.3s;
}
.folio.half .logo img:first-child {
  opacity: 0;
}
.slide.is-active:not(.full) .folio.half .logo img:first-child,
.stage.overview .folio.half .logo img:first-child {
  opacity: 1;
  transition-delay: 1.9s;
}
.slide.is-active:not(.full) .folio.half .logo img.w,
.stage.overview .folio.half .logo img.w {
  opacity: 0;
  transition-delay: 1.9s;
}
/* out of a room into a clock (full.js): the room slides away to the left as it is, its picture
   lagging, while the clock slides in from the right on its own paper */
.slide.held.pan-out {
  animation: pan-out 1.3s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.slide.held.pan-out .room-photo {
  width: calc(1280px - var(--cx, 0px));
  transition: none;
  animation: pan-lag 1.3s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.slide.held.pan-out .room-copy {
  animation: pan-lead 1.3s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.slide.held.pan-out .in {
  opacity: 1;
  animation: none;
}
.slide.held.pan-out .split .w > span {
  transform: none;
  animation: none;
}
@keyframes pan-out {
  to {
    transform: translateX(-100%);
  }
}
@keyframes pan-lag {
  to {
    translate: 11% 0;
  }
}
@keyframes pan-lead {
  to {
    translate: -18% 0;
  }
}
.slide.pan-in {
  animation: pan-in 1.3s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.slide.pan-in .act-bg {
  animation: none;
}
@keyframes pan-in {
  from {
    transform: translateX(100%);
  }
}
/* sliding away, a room keeps its half (the next one slides in full page, then settles) */
.room.is-leaving .room-photo {
  width: calc(1280px - var(--cx, 0px));
  transition: none;
}
.room.is-leaving .room-photo img {
  right: var(--r);
  transition: none;
}
/* the last step: the words fade as the picture spreads back over the panel; it leaves that way */
.slide.room.full .room-photo {
  width: 1920px;
  transition: width 1.8s cubic-bezier(0.45, 0, 0.25, 1) 0.15s;
}
.slide.room.full .room-photo img {
  right: -55px;
  transition: right 1.8s cubic-bezier(0.45, 0, 0.25, 1) 0.15s;
}
.slide.room.full .room-copy {
  opacity: 0;
}
.room.full.is-leaving .room-photo,
.room.full.is-leaving .room-photo img,
.slide.held.pan-out.full .room-photo,
.slide.held.pan-out.full .room-photo img {
  transition: none;
}
.slide.held.pan-out.full .room-photo {
  width: 1920px;
}
.stage.overview .room.full .room-photo {
  width: calc(1280px - var(--cx, 0px));
}
.stage.overview .room.full .room-photo img {
  right: var(--r);
}
.stage.overview .room.full .room-copy {
  opacity: 1;
}
/* the event room: the same room from its bar, framed toward the bar. One camera move: both
   pictures travel together, matched on the round case (the day view's case at x 1074, y 797 in
   its 2030 px picture; the evening's at 979, 649; 1.4 times as wide in the day view). The day
   view draws back to where the evening has the case while the evening comes in on it and
   settles, the two crossfading early in the move. */
#museum .room-photo {
  background: #2b2119; /* the room's own dark wood, behind the day view as it draws back */
}
#museum .room-photo img {
  transition:
    right 2.2s cubic-bezier(0.45, 0, 0.25, 1) 1s,
    opacity 1.3s var(--ease),
    transform 3.2s cubic-bezier(0.45, 0, 0.2, 1);
}
#museum .room-photo img:first-child {
  transform-origin: 1074px 797px;
}
#museum.s1 .room-photo img:first-child {
  transform: translate(50px, -148px) scale(0.714);
  opacity: 0;
  transition:
    right 2.2s cubic-bezier(0.45, 0, 0.25, 1) 1s,
    opacity 1.6s ease 0.5s,
    transform 3.2s cubic-bezier(0.45, 0, 0.2, 1);
}
#museum .room-evening {
  --r: -520px; /* its half framed toward the bar */
  transform-origin: 979px 649px;
  transform: translate(-50px, 148px) scale(1.4);
}
#museum .room-evening.on {
  transform: none;
}
#museum.full .room-photo img {
  transition:
    right 1.8s cubic-bezier(0.45, 0, 0.25, 1) 0.15s,
    opacity 1.3s var(--ease);
}
/* the panel stays: the third point joins as the evening settles, the first two step back */
#museum .points li {
  transition:
    opacity 0.9s var(--ease),
    filter 0.9s var(--ease);
}
#museum.s1 .points li:not([data-step]) {
  filter: opacity(0.45); /* (their entry animation holds their opacity) */
}
#museum .points li[data-step].on {
  transition-delay: 1.2s;
}
.points {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.points li {
  display: grid;
  grid-template-columns: 64px 1fr;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  font: 400 24px/1.5 var(--sans);
  color: var(--text);
}
.points li span {
  font: 400 26px/1.4 var(--serif);
  color: var(--accent);
}
.thanks-photo {
  inset: 0;
}
.end-card {
  position: absolute;
  left: 50%;
  bottom: 96px;
  z-index: 4;
  width: 820px;
  margin-left: -410px;
  padding: 46px 64px 44px;
  text-align: center;
}
.slide .end-card[data-step] {
  transform: none;
  transition: opacity 1s var(--ease) 1.1s;
}
.end-card .logo {
  width: 220px;
  height: auto;
  margin: 0 auto;
}
.end-card .eyebrow {
  margin-top: 28px;
}
.end-card .h2 {
  margin-top: 14px;
  font-size: 52px;
}
.end-card .prepared-dark {
  margin: 30px 0 0;
  font: 400 15px/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
/* "Prepared for" and the Rolex logo under it (directions/full/img: gold crown, wordmark white on
   the cover photo, ink on the white card) */
.prepared .rolex-logo,
.prepared-dark .rolex-logo {
  display: block;
  width: 150px;
  height: auto;
  margin: 18px auto 0;
}
.hero-brand .prepared span {
  opacity: 0.72;
}
.end-card .prepared-dark .rolex-logo {
  width: 132px;
  margin-top: 16px;
}

/* ---- Annexes: plain website pages ---- */
.annex-grid {
  position: absolute;
  left: 128px;
  right: 128px;
  top: 470px;
  display: grid;
  gap: 40px;
}
.annex-grid.c3 {
  grid-template-columns: repeat(3, 1fr);
}
.annex-grid.c4 {
  grid-template-columns: repeat(4, 1fr);
}
.annex-grid.c5 {
  grid-template-columns: repeat(5, 1fr);
}
.annex-grid figure {
  margin: 0;
}
.annex-grid .box {
  height: 300px;
  display: grid;
  place-items: center;
  background: var(--c-white);
  font: 400 64px/1 var(--serif);
  color: rgba(15, 27, 24, 0.3);
}
.annex-grid.c5 .box {
  height: 220px;
  font-size: 22px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--sans);
}
.annex-grid figcaption {
  margin-top: 18px;
  text-align: center;
  font: 500 14px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
/* Annex A9: market data in four white tiles (a headline number, then three bar charts) */
.mkt {
  top: 430px;
}
.mkt-tile {
  height: 400px;
  padding: 36px 34px 30px;
  background: var(--c-white);
}
.mkt-tile figcaption {
  margin: 0 0 30px;
  text-align: left;
  color: var(--fg);
}
.mkt-hero {
  margin: 0;
  font: 400 92px/1 var(--serif);
  color: var(--fg);
}
.mkt-line {
  margin: 22px 0 0;
  font: 400 19px/1.5 var(--sans);
  color: var(--text);
}
.mkt-line b {
  font-weight: 600;
  color: var(--fg);
}
.mkt-ctx {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font: 400 15px/1.4 var(--sans);
  color: var(--muted);
}
.bars {
  display: grid;
  gap: 26px;
}
.bar-row {
  display: grid;
  gap: 8px;
}
.bar-name {
  font: 400 15px/1 var(--sans);
  color: var(--text);
}
.bar-track {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* thin bars, square at zero, rounded at the data end */
.bar-track i {
  height: 12px;
  border-radius: 0 4px 4px 0;
  background: #918c7f;
}
.bar-row.hi .bar-track i {
  background: var(--accent);
}
.bar-track b {
  font: 600 16px/1 var(--sans);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.bar-row.hi .bar-name {
  color: var(--fg);
}

/* The annex pages from the V4 deck: white tiles on the paper, under the centred title */
.ax-title {
  font-size: 64px;
}
.ax {
  position: absolute;
  left: 128px;
  right: 128px;
  top: 400px;
  bottom: 170px;
  display: grid;
  gap: 32px;
  align-content: center; /* tiles as tall as their words, the row centred in the space */
}
.ax-person,
.ax-team,
.ax-review,
.ax-gen,
.ax-tables,
.ax-aud {
  align-content: stretch;
}
.ax.c3 {
  grid-template-columns: repeat(3, 1fr);
}
.ax.c4 {
  grid-template-columns: repeat(4, 1fr);
}
.ax-tile {
  margin: 0;
  padding: 34px 34px 30px;
  background: var(--c-white);
  overflow: hidden;
}
.ax-k {
  margin: 0 0 16px;
  font: 500 13px/1.4 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.ax-h {
  margin: 0;
  font: 400 34px/1.15 var(--serif);
  color: var(--fg);
}
.ax-role {
  margin: 8px 0 0;
  font: italic 400 21px/1.3 var(--serif);
  color: var(--muted);
}
.ax-p {
  margin: 14px 0 0;
  font: 400 18px/1.55 var(--sans);
  color: var(--text);
}
.ax-small {
  margin: 18px 0 0;
  font: 400 15px/1.4 var(--sans);
  color: var(--muted);
}
.ax-quote {
  margin: 0;
  font: italic 400 30px/1.35 var(--serif);
  color: var(--fg);
}
.ax-quote.s {
  font-size: 22px;
}
.ax-accent {
  background: var(--accent);
}
.ax-accent .ax-k,
.ax-accent .ax-h,
.ax-accent .ax-p {
  color: var(--c-paper);
}
.ax-accent .ax-k {
  opacity: 0.7;
}
.ax-muted {
  background: transparent;
  border: 1px solid var(--rule);
}
.ax-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.ax-list li {
  padding: 11px 0;
  border-top: 1px solid var(--rule);
  font: 400 17px/1.4 var(--sans);
  color: var(--text);
}
/* a stat: the figure, then one line */
.ax-stat .ax-n {
  margin: 0;
  font: 400 56px/1 var(--serif);
  color: var(--fg);
  font-variant-numeric: lining-nums;
}
.ax-stat .ax-p {
  font-size: 16px;
}
/* Perry: his portrait beside his words */
.ax-person {
  grid-template-columns: 520px 1fr;
}
.ax-photo {
  margin: 0;
  overflow: hidden;
}
.ax-photo img,
.ax-lead img,
.ax-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ax-say {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 64px;
}
.ax-say .ax-p {
  max-width: 820px;
}
/* the team: Alice large, the others as name cards */
.ax-team {
  grid-template-columns: 1.9fr repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
}
.ax-lead {
  grid-row: span 2;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 34px;
  padding: 0 34px 0 0;
}
.ax-lead > div {
  padding: 34px 0;
}
.ax-lead .ax-quote {
  margin-top: 22px;
}
.ax-muted .ax-h {
  font-size: 44px;
}
/* the account review: the chart, then six figures */
.ax-review {
  grid-template-columns: 1.9fr 1fr;
}
.ax-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ax-stats .ax-stat {
  padding: 24px 26px;
}
.ax-stats .ax-n {
  font-size: 44px;
}
/* presence: a picture per name, small enough to stay sharp */
.ax-pic {
  height: 230px;
  margin: -34px -34px 26px;
  background: var(--c-paper);
}
.ax-pic img {
  object-fit: contain;
}
.ax-q {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ax-q figcaption {
  margin-top: 22px;
  font: 500 14px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ax-gen {
  grid-template-rows: 1fr 1fr;
}
.ax-gen .ax-stat {
  padding: 26px 28px;
}
.ax-gen .ax-n {
  font-size: 48px;
}
.ax-tables {
  grid-template-columns: 1.25fr 1fr;
}
.ax-one {
  left: 260px;
  right: 260px;
}
.ax-aud {
  grid-template-columns: 1fr 2.2fr;
}
.ax-stack {
  display: grid;
  gap: 16px;
}
.ax-stack .ax-stat {
  padding: 24px 28px;
}
.ax-stack .ax-n {
  font-size: 44px;
}
.ax-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 16px/1.3 var(--sans);
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.ax-table.big {
  font-size: 20px;
}
.ax-table th {
  padding: 0 14px 12px 0;
  text-align: left;
  font: 500 12px/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid rgba(15, 27, 24, 0.3);
}
.ax-table td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--rule);
}
.ax-table.big td {
  padding: 20px 14px 20px 0;
}
.ax-table .n {
  text-align: right;
}
.ax-table .up {
  color: var(--accent);
  font-weight: 600;
}
.ax-table tr.total td {
  font-weight: 600;
  color: var(--fg);
  border-bottom: 0;
}
.ax-table td:first-child {
  color: var(--fg);
}
/* the annex's columns (full.js, cols): thin bars, rounded at the data end, a fine grid */
.cols-wrap {
  margin-top: 4px;
}
.cols {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.cols-legend {
  display: flex;
  gap: 28px;
  margin-bottom: 10px;
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.cols-legend i {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  border-radius: 3px;
  vertical-align: -2px;
}
.col.s0,
.cols-legend i.s0 {
  fill: #918c7f;
  background: #918c7f;
}
.col.s1,
.cols-legend i.s1 {
  fill: var(--accent);
  background: var(--accent);
}
.id .col.s0,
.id .cols-legend i.s0 {
  fill: var(--accent);
  background: var(--accent);
}
.id .col.s1,
.id .cols-legend i.s1 {
  fill: #b4975a;
  background: #b4975a;
}
.col-grid {
  stroke: var(--rule);
}
.col-base {
  stroke: rgba(15, 27, 24, 0.35);
}
.col-tick {
  font: 400 14px var(--sans);
  fill: var(--muted);
}
.col-l {
  font: 400 16px var(--sans);
  fill: var(--text);
}
.col-v {
  font: 600 14px var(--sans);
  fill: var(--fg);
}

/* ---- The annex in motion: the tiles rise one after another, then their rows and lines; bars and
   columns grow from zero; the figures count up (full.js). At rest when the page is not on screen. */
.slide.is-active .ax-in {
  animation: ax-rise 0.9s var(--ease) both;
  animation-delay: calc(200ms + var(--i) * 90ms);
}
@keyframes ax-rise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
}
.slide.is-active .ax-in :is(tbody tr, .ax-list li, .bar-row) {
  animation: ax-row 0.6s var(--ease) both;
  animation-delay: calc(450ms + var(--i) * 90ms + var(--r) * 70ms);
}
@keyframes ax-row {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
}
.slide.is-active .ax-in .bar-track i {
  transform-origin: left;
  animation: ax-grow-x 1.2s var(--ease-io) both;
  animation-delay: calc(550ms + var(--i) * 90ms + var(--r) * 90ms);
}
@keyframes ax-grow-x {
  from {
    transform: scaleX(0);
  }
}
.slide.is-active .ax-in .col {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ax-grow-y 0.9s var(--ease) both;
  animation-delay: calc(500ms + var(--i) * 90ms + var(--c) * 40ms);
}
@keyframes ax-grow-y {
  from {
    transform: scaleY(0);
  }
}
.slide.is-active .ax-in .col-v {
  animation: ax-fade 0.5s ease both;
  animation-delay: calc(1000ms + var(--i) * 90ms + var(--c) * 40ms);
}
@keyframes ax-fade {
  from {
    opacity: 0;
  }
}
.slide.is-active .ax-in :is(.ax-photo, .ax-lead, .ax-pic) img {
  animation: ax-zoom 7s var(--ease) both;
}
@keyframes ax-zoom {
  from {
    transform: scale(1.07);
  }
}
.ax-n,
.mkt-hero {
  font-variant-numeric: lining-nums tabular-nums;
}

/* the annex's contents: every page, a click away */
.ax-index {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  column-gap: 96px;
  row-gap: 0;
  left: 260px;
  right: 260px;
}
.ax-index a {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  text-decoration: none;
  font: 400 30px/1.2 var(--serif);
  transition: color 0.3s ease;
}
.ax-index a::after {
  content: "→";
  font: 400 20px/1 var(--sans);
  color: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.ax-index a:hover {
  color: var(--accent);
}
.ax-index a:hover::after {
  opacity: 1;
  transform: none;
}
.ax-index b {
  font: 500 14px/1 var(--sans);
  letter-spacing: 0.2em;
  color: var(--accent);
}

/* the team: initials engraved on the name cards */
.ax-team .ax-tile {
  position: relative;
}
.ax-mono {
  position: absolute;
  right: 26px;
  bottom: 10px;
  font: italic 400 84px/1 var(--serif);
  color: rgba(35, 83, 60, 0.11);
}

/* from feed to boutique: four moves, numbered, one leading to the next */
.ax-steps {
  counter-reset: move;
}
.ax-steps .ax-tile {
  position: relative;
  overflow: visible;
}
.ax-steps .ax-tile::before {
  counter-increment: move;
  content: counter(move, decimal-leading-zero);
  display: block;
  margin-bottom: 22px;
  font: 400 54px/1 var(--serif);
  color: var(--accent);
}
.ax-steps .ax-tile:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 46px;
  right: -28px;
  font: 400 24px/1 var(--sans);
  color: var(--accent);
}

/* the house, floor by floor: the zone elevation beside the two floors */
.ax-house {
  grid-template-columns: 1.25fr 1fr;
  align-content: stretch;
}
.ax-elev {
  display: grid;
  align-items: center;
  padding: 24px;
}
.ax-house .ax-list {
  margin: 0 0 28px;
}
.ax-house .ax-list li {
  font-size: 16px;
  padding: 9px 0;
}

.annex-note {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 128px;
  bottom: 110px;
  margin: 0;
  text-align: center;
  font: 400 18px/1.5 var(--sans);
  color: var(--muted);
}

/* ---- Slides to present (full.js): in All slides, a tick on each slide; an unticked one is
   veiled, left out of the presentation and of the PDF. A bar says how many are in. ---- */
/* the overview, taller than the screen, moves up and down under the wheel (full.js, --ovy) */
.stage.ov-move {
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.stage.overview.ov-move {
  transition: transform 0.25s ease-out;
}
.stage.overview {
  overflow: visible;
  transform: translateY(calc(var(--ovy, 0px) * var(--scale, 1)))
    scale(var(--scale, 1));
}
/* the overview on black, so the pages read as cards */
body:has(.stage.overview) {
  background: #000;
}
.stage.overview {
  background: transparent;
}
.stage.overview .slide {
  box-shadow: none;
}
.stage.overview .slide.sel {
  box-shadow: 0 0 0 14px #c9a96a;
}
.slide > .pick {
  display: none;
}
.stage.overview .slide > .pick {
  appearance: none;
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 61;
  display: block;
  width: 150px;
  height: 150px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2' fill='none' stroke='%23f9f8f0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 70% no-repeat;
  box-shadow:
    0 0 0 9px var(--c-paper),
    0 6px 18px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
/* left out: the page darkens to a ghost, its tick an empty ring, its name without a number */
.stage.overview .slide.skip {
  box-shadow:
    inset 0 0 0 4000px #1c1c1c,
    0 0 0 4px rgba(255, 255, 255, 0.22);
}
.stage.overview .slide.skip.sel {
  box-shadow:
    inset 0 0 0 4000px #1c1c1c,
    0 0 0 14px #c9a96a;
}
.stage.overview .slide.skip > :not(.pick) {
  filter: opacity(0.16) grayscale(1);
}
.stage.overview .slide.skip > .pick {
  background: transparent;
  box-shadow: inset 0 0 0 9px rgba(255, 255, 255, 0.75);
}
.stage.overview .slide.skip::before {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
}
.stage.overview .slide.skip::after {
  content: "Hidden";
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  font: italic 400 150px/1 var(--serif);
  color: #fff;
  pointer-events: none;
}
/* the bar across the top while the overview is open */
.picks {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 101;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
  padding: 0 24px 0 32px;
  background: rgba(0, 0, 0, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--c-paper);
  font: 400 14px/1 var(--sans);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body:has(.stage.overview) .picks {
  display: flex;
}
.picks-t {
  font: italic 400 24px/1 var(--serif);
}
.picks-n {
  color: rgba(249, 248, 240, 0.66);
  letter-spacing: 0.02em;
}
.picks-n b {
  color: var(--c-paper);
  font-weight: 600;
}
.picks-b {
  display: flex;
  gap: 10px;
}
.picks button {
  padding: 10px 18px;
  border: 1px solid rgba(249, 248, 240, 0.35);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease;
}
.picks button:hover {
  background: rgba(249, 248, 240, 0.1);
}
.picks button[data-done] {
  border-color: var(--c-paper);
  background: var(--c-paper);
  color: #000;
}
/* the PDF of the ticked slides is being put together */
.hud a.icon.busy {
  pointer-events: none;
  animation: busy 0.8s ease-in-out infinite alternate;
}
@keyframes busy {
  to {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-photo,
  #museum .room-evening {
    transition: none;
  }
  .slide.is-active .ax-in,
  .slide.is-active .ax-in * {
    animation: none !important;
  }
  .nc-building,
  .nc-film {
    transition: opacity 0.3s;
  }
}

/* ---- The cold open: the film, full frame, before the cover ---- */
.film-open {
  background: #000;
}
.film-open video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* its first step: the globe almost in the dark, the logo in white over it; the click lifts the dark
   as the film starts */
.film-veil {
  position: absolute;
  inset: 0;
  background: #050807;
  opacity: 0.84;
  transition: opacity 1.8s ease;
}
#film.s1 .film-veil {
  opacity: 0;
}
.film-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  transform: translate(-50%, -50%);
  filter: invert(1);
  opacity: 0;
  transition: opacity 0.6s ease;
}
/* out of the film into the cover, as one movement: the film's last frame stays on top and its
   building settles onto the drawn one (the entrance onto the entrance: scale .749 from the top
   left, measured on the last frame), its edges going soft, then it fades into the green while the
   house is drawn in line under it; the logo waits for it to be gone */
.film-open.held.film-out {
  z-index: 3;
  animation: film-out 2.6s both;
}
/* The film ends framed exactly as the cover draws the house (assets/film/blender/film_site.py --end=cover), so its last
   frame stays in place and fades to the paper while the lines are drawn over the same windows. */
@keyframes film-out {
  0% {
    opacity: 1;
    filter: saturate(1) brightness(1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  45% {
    opacity: 0.55;
    filter: saturate(0.5) brightness(1.08);
  }
  100% {
    opacity: 0;
    filter: saturate(0.2) brightness(1.15);
  }
}
#film.is-active:not(.s1) .film-logo {
  opacity: 0.94;
  transition: opacity 2s ease 0.4s;
}

/* the menu's download link sits with the icon buttons, without the link frame */
.hud a.icon {
  border: 0;
}

/* ── Interactive Floor-by-Floor Selector Pills & Studio Deal Room Badge ── */
.flr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  pointer-events: auto;
  position: relative;
  z-index: 40;
}
.flr-pills button {
  appearance: none;
  border: 1px solid rgba(24, 48, 40, 0.24);
  background: rgba(246, 241, 230, 0.92);
  color: #183028;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.22s ease;
}
.flr-pills button:hover {
  border-color: #183028;
  background: rgba(24, 48, 40, 0.08);
}
.flr-pills button.is-on {
  background: #183028;
  color: #f6f1e6;
  border-color: #183028;
  box-shadow: 0 4px 14px rgba(24, 48, 40, 0.18);
}
.cw-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(158, 124, 50, 0.45);
  background: rgba(24, 48, 40, 0.06);
  color: #183028;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hud-studio-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(24, 48, 40, 0.65);
  color: #f6f1e6;
  text-decoration: none;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 6px;
  transition: all 0.2s ease;
}
.hud-studio-link:hover {
  background: #183028;
  border-color: #e2bd6b;
  color: #e2bd6b;
}