/* ==========================================================================
   ALPHA PMS FZCO — story.css (homepage only)
   The block film. By default (no JavaScript, no WebGL, reduced motion) each
   chapter is a plain section: its giant word, its words, its callouts as a
   list and its still. Once film/film.js has drawn its first frame it sets
   html.film-live: the chapters grow tall, the canvas pins between each giant
   word (behind, at the top of the screen) and the words (in front, at the
   bottom), only the playing chapter's words show, the stills go and the
   callouts follow the model. The page turns
   navy for the restaurant at night. Then the credits, the builder and the
   inquiry, which slide over the last frame.
   ========================================================================== */

/* the header floats over the film */
.site-header { position: fixed; inset: 0 0 auto; }

/* ---- The film ------------------------------------------------------------ */
/* registered, so day fades into night instead of snapping */
@property --film-bg { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
.film {
  --word: #E3ECFD;
  --film-bg: var(--bg);
  position: relative;
  isolation: isolate;
  background-color: var(--film-bg);
  transition: --film-bg 0.8s var(--ease);
}
/* night: the restaurant chapter by itself without the film, the whole film while the restaurant plays */
html:not(.film-live) .chapter--night,
.film.is-night {
  --text: #FFFFFF;
  --text-dim: #CBD5E1;
  --text-faint: #94A3B8;
  --border: rgba(255, 255, 255, 0.14);
  --panel: #13224D;
  --accent: #60A5FA;
  --word: #16275C;
}
html:not(.film-live) .chapter--night { background: var(--night); color: var(--text); }
.film.is-night { --film-bg: var(--night); }

/* pinned to the screen for the length of the film, taking no room */
.film__canvas {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.film-live .film__canvas { opacity: 1; }

/* ---- Chapters -------------------------------------------------------------- */
.chapter { position: relative; padding-block: var(--space-2xl); }
.chapter__word {
  margin: 0 auto;
  padding-inline: 2vw;
  font-family: var(--font-display);
  font-size: min(calc(92vw / (var(--n) * 0.7)), 12rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.035em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--word);
  user-select: none;
  transition: color 0.8s var(--ease);
}
.chapter__copy { max-width: calc(46rem + 2 * var(--gutter)); margin-top: var(--space-lg); }
.chapter__time {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.chapter__time time { color: var(--accent); font-variant-numeric: tabular-nums; }
.chapter__h {
  margin-top: 0.7rem;
  max-width: 18ch;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.chapter__line { margin-top: 0.9rem; max-width: 40ch; font-size: var(--fs-lede); line-height: 1.5; color: var(--text-dim); }
.chapter__product { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.chapter__actions { margin-top: 1.25rem; }
.chapter__name { color: var(--text); font-weight: 700; }
a.chapter__name { text-decoration: none; border-bottom: 2px solid var(--accent); }
a.chapter__name:hover { color: var(--accent); }
.chapter__products { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.7rem; max-width: 46ch; }
.chapter__products li { font-size: 1.0625rem; line-height: 1.5; color: var(--text-dim); }
.chapter__products .service__badge { margin-inline-start: 0.35rem; vertical-align: 0.15em; }
.chapter__time, .chapter__h, .chapter__line, .chapter__products li, .chapter__name { transition: color 0.8s var(--ease); }

/* callouts: a row of labels under the words, until the film pins them to the model */
.chapter__callouts {
  list-style: none;
  max-width: calc(46rem + 2 * var(--gutter));
  margin: var(--space-md) auto 0;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chapter__callouts li {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.chapter__still { display: block; margin: var(--space-lg) auto 0; padding-inline: var(--gutter); max-width: calc(44rem + 2 * var(--gutter)); }
.chapter__still img { display: block; width: 100%; height: auto; }

/* ---- Hero ------------------------------------------------------------------ */
.chapter--hero { display: grid; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: 6.5rem 3rem; }
.hero__grid { display: grid; gap: var(--space-lg); align-items: center; }
.hero__grid .chapter__still { margin: 0; padding: 0; max-width: none; }
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.hero__title { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.1rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.hero__cycle {
  display: none;
  height: 1.08em;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 0.9rem + 5.6vw, 5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--accent);
}
.hero__cycle span { display: block; }
.hero__lede { margin-top: 1.25rem; max-width: 40ch; font-size: var(--fs-lede); line-height: 1.5; color: var(--text-dim); }
.hero__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__facts { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; color: var(--text-dim); font-size: 0.9375rem; }
.hero__facts strong { font-family: var(--font-display); font-weight: 700; color: var(--accent); }

/* the giant word cycles only when motion is welcome; otherwise the H1 says the whole sentence */
@media (prefers-reduced-motion: no-preference) {
  .hero__cycle { display: block; }
  .hero__cycle span { animation: cycle 12.6s var(--ease) infinite; }
  .hero__all { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@keyframes cycle {
  0%, 13% { translate: 0 0; }
  16.67%, 29.67% { translate: 0 -100%; }
  33.33%, 46.33% { translate: 0 -200%; }
  50%, 63% { translate: 0 -300%; }
  66.67%, 79.67% { translate: 0 -400%; }
  83.33%, 96.33% { translate: 0 -500%; }
  100% { translate: 0 -600%; }
}

/* ---- Live: the canvas pins, the words pin, the callouts follow the model ----- */
/* Only the playing chapter's words show: film.js sets each chapter's --on,
   handing its giant word and words over to the next chapter's while the model
   turns, so no words sit over the wrong business. The words may not rise above
   the chapter's padding, so they arrive after the last chapter's have gone. */
.film-live .chapter:not(.chapter--hero) {
  display: flex;
  flex-direction: column;
  min-height: 200vh;
  min-height: 200svh;
  padding: 45svh 0 0;
}
.film-live .chapter--hero { min-height: 135vh; min-height: 135svh; padding-bottom: calc(35svh + 3rem); }
.film-live .hero__copy { position: relative; z-index: 2; }
/* phones: the headline sits low on the first screen, the logo turns above it;
   words fade the model out behind them, the hero's as they scroll up over the logo */
@media (max-width: 59.98rem) {
  .film-live .chapter--hero { align-items: end; }
  .film-live :is(.hero__copy, .chapter__copy) { padding-top: 2.5rem; background: linear-gradient(to top, var(--film-bg) 72%, transparent); }
}
.film-live .chapter__still { display: none; }
.film-live .chapter__word {
  position: fixed;
  top: calc(4.25rem + 3svh);
  inset-inline: 0;
  z-index: 0;
  margin: 0;
  font-size: min(calc(92vw / (var(--n) * 0.7)), 30svh);
  opacity: var(--on, 0);
}
.film-live .chapter__copy {
  position: sticky;
  bottom: clamp(1.25rem, 5svh, 3.5rem);
  z-index: 2;
  max-width: var(--maxw);
  margin-top: auto;
  opacity: var(--on, 0);
}
.film-live .chapter__copy:focus-within { opacity: 1; }
.film-live .chapter__copy > * { max-width: 34rem; }
.film-live .chapter__copy > .chapter__h { max-width: 18ch; font-size: clamp(1.9rem, 1.2rem + 1.9vw, 3rem); }
.film-live .film__end { height: 70vh; height: 70svh; }
.film-live .chapter__callouts { margin: 0; padding: 0; }
.film-live .chapter__callouts li {
  --dx: 28px;
  --dy: 26px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.4);
  opacity: 0;
  pointer-events: none; /* hidden by opacity alone, so screen readers still read every callout */
  transition: opacity 0.3s var(--ease);
  will-change: transform;
}
.film-live .chapter__callouts li.is-on { opacity: 1; }
/* the leader: from the label's near edge down to a dot on the model */
.film-live .chapter__callouts li::before,
.film-live .chapter__callouts li::after { content: ""; position: absolute; top: 50%; background: var(--accent); }
.film-live .chapter__callouts li::before { left: 0; width: 38.2px; height: 1.5px; transform-origin: 0 50%; rotate: 137.1deg; }
.film-live .chapter__callouts li::after {
  left: calc(-1 * var(--dx) - 5px);
  width: 10px;
  height: 10px;
  margin-top: calc(var(--dy) - 5px);
  border: 2px solid var(--panel);
  border-radius: 50%;
}
.film-live .chapter__callouts li.is-left::before { left: 100%; rotate: 42.9deg; }
.film-live .chapter__callouts li.is-left::after { left: calc(100% + var(--dx) - 5px); }
/* below its point when the room above is taken: the leader runs up to the dot */
.film-live .chapter__callouts li.is-below::before { rotate: -137.1deg; }
.film-live .chapter__callouts li.is-below.is-left::before { rotate: -42.9deg; }
.film-live .chapter__callouts li.is-below::after { margin-top: calc(-1 * var(--dy) - 5px); }

/* ---- Credits ------------------------------------------------------------- */
.credits,
.build { position: relative; z-index: 2; padding-block: var(--space-3xl) var(--space-2xl); background: var(--bg); border-top: 1px solid var(--border); }
.section--contact { position: relative; z-index: 2; }
.credits__list {
  list-style: none;
  margin-top: var(--space-xl);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}
.credits__list a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: 100%;
  padding: 0 1.2rem 1.1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--text-dim);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.credits__list a:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.credits__shot { display: block; aspect-ratio: 4 / 3; margin: 0 -1.2rem 0.6rem; overflow: hidden; background: var(--bg-2); }
.credits__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--z, 1)) translate(var(--t, 0, 0));
  transition: scale 0.5s var(--ease-out);
}
.credits__list a:hover .credits__shot img { scale: 1.04; }
.credits__name { color: var(--text); font-size: 1.125rem; font-weight: 700; }
.credits__role { margin-bottom: 0.5rem; font-size: 0.9375rem; line-height: 1.4; }
.credits__list .service__badge { margin-top: auto; align-self: flex-start; }

/* ---- Build your system ---------------------------------------------------- */
.build__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: 0.75rem; }
.builder:not([hidden]) { margin-top: var(--space-xl); display: grid; gap: var(--space-xl); }
@media (min-width: 64rem) {
  .builder:not([hidden]) { grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 1fr); column-gap: var(--space-xl); }
  .builder__result { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 6rem; align-self: start; }
}
.builder__q { display: flex; align-items: center; gap: 0.7rem; color: var(--text); font-size: 1.125rem; font-weight: 700; }
.builder__q span {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 800;
}
.builder__cards { margin-top: var(--space-sm); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 40rem) { .builder__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.biz {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(var(--bg-2), var(--blue-50));
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* each business is its form from the film, rendered with room for the label */
.biz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.biz__label { position: absolute; inset: auto 0.8rem 0.7rem; z-index: 1; font-weight: 700; line-height: 1.2; }
.biz__plus { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 1.5rem; color: var(--text-faint); font-size: 2.75rem; font-weight: 300; }
.biz--other { border-style: dashed; border-color: #BFDBFE; background: var(--blue-50); color: var(--accent); }
.biz--other .biz__plus { color: var(--accent); }
.biz:hover { border-color: var(--border-strong); }
.biz:hover img, .biz[aria-pressed="true"] img { transform: translateY(-3%) scale(1.04); }
.biz[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background: linear-gradient(var(--blue-50), #DBEAFE); }
/* a picked business hops, then stays raised */
@media (prefers-reduced-motion: no-preference) {
  .biz[aria-pressed="true"] img { animation: biz-pick 0.45s var(--ease-out); }
}
@keyframes biz-pick {
  from { transform: none; }
  45% { transform: translateY(-8%) scale(1.07); }
}
.biz[aria-pressed="true"]::before {
  content: "✓";
  position: absolute;
  top: 0.55rem;
  inset-inline-end: 0.55rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 800;
}
.builder__needs { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.need {
  padding: 0.65rem 1.05rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.need:hover { border-color: var(--accent); }
.need[aria-pressed="true"] { background: var(--blue-50); border-color: var(--accent); }
.need[aria-pressed="true"]::before { content: "✓ "; color: var(--accent); }

/* the result: your system as a stack of blocks, one per need, on "Your books".
   Each block is its front face with a top (::before) and a side (::after)
   slanted back 45°, so the labels stay square to the eye. */
.builder__result { padding: var(--space-lg) var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--panel); }
.stack { --d: 0.9rem; margin-top: var(--space-lg); padding-right: var(--d); display: grid; justify-items: center; }
.stack__blocks { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; width: min(100%, 15rem); display: flex; flex-direction: column-reverse; gap: 4px; translate: calc(var(--d) / 2) calc(var(--d) / -2); }
.stack__block, .stack__base { --f: #FFFFFF; --t: #DBEAFE; --s: #93C5FD; position: relative; background: var(--f); font-weight: 700; text-align: center; }
.stack__block { left: -0.3rem; padding: 0.6rem 1rem; box-shadow: inset 0 0 0 1px #BFDBFE; color: var(--blue-700); font-size: 0.9375rem; line-height: 1.3; }
.stack__block:nth-child(even) { --f: var(--blue); --t: #60A5FA; --s: var(--blue-700); left: 0.3rem; box-shadow: none; color: #FFFFFF; }
.stack__block::before, .stack__base::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 100%; height: var(--d); background: var(--t); transform-origin: 0 100%; transform: skewX(-45deg); }
.stack__block::after, .stack__base::after { content: ""; position: absolute; left: 100%; top: 0; width: var(--d); height: 100%; background: var(--s); transform-origin: 0 0; transform: skewY(-45deg); }
.stack__blocks:empty::before { content: ""; height: 2.42rem; border: 2px dashed #BFDBFE; } /* where the first block lands */
.stack__base { --f: #1E40AF; --t: #60A5FA; --s: #1E3A8A; width: min(100%, 18rem); padding: 0.95rem 1rem; color: #FFFFFF; font-weight: 800; filter: drop-shadow(0 0.9rem 1.2rem rgba(37, 99, 235, 0.3)); }
@media (prefers-reduced-motion: no-preference) {
  .stack__block { animation: block-drop 0.6s calc(var(--k, 0) * 0.09s) backwards; }
}
/* the newest block falls onto the stack and settles with a small bounce */
@keyframes block-drop {
  from { opacity: 0; translate: 0 -6rem; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  20% { opacity: 1; }
  60% { translate: 0 0; animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  78% { translate: 0 -0.4rem; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  to { translate: 0 0; }
}
.builder__sum { margin-top: var(--space-md); text-align: center; }
.builder__send { margin-top: var(--space-md); display: grid; gap: 0.6rem; }
.builder__send .btn { justify-content: center; }