/* =========================================================
   NorthCell landing page
   Design reference: Figma "Landing Page", frames 1920 x 1080
   ========================================================= */

/* ---------- 0. Font: Inter (self-hosted variable font, weights 100–900) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-variable.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Design tokens (from Figma variables & text styles) ---------- */
:root {
  /* Colors: Figma collection "Colors" */
  --bg-cream: #F5F0E8;
  --bg-darker-cream: #EBDFCA;
  --brand-green: #1E3A2F;
  --brand-coral: #E57861;
  --accent-orange: #F4B97F;
  --accent-blue: #96AEBE;
  --text-primary: #000000;
  --text-secondary: #2C2C2C;
  --text-ui: #1C1C1C;
  --border-subtle: rgba(0, 0, 0, 0.15);

  /* Scale unit: 1 Figma pixel.
     Exactly 1px on a 1920x1080 viewport; shrinks proportionally on
     smaller desktop screens so every chapter still fits the screen.
     On screens wider than 16:9, left-side content stays anchored left,
     right-side content anchors to the right edge, and the rest to the centre. */
  --u: min(calc(100vw / 1920), calc(100vh / 1080));

  /* Type scale: Figma text styles (Inter Regular) */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h1: calc(68 * var(--u));      --h1-lh: 1.5;
  --h2: calc(55 * var(--u));      --h2-lh: 1.45;
  --h3: calc(46 * var(--u));      --h3-lh: 1.5;
  --h4: calc(38 * var(--u));      --h4-lh: 1.5;
  --h5: calc(32 * var(--u));      --h5-lh: 1.5;
  --button: calc(18 * var(--u));  --button-lh: 1.2;
  --body-1: calc(22 * var(--u));  --body-1-lh: 1.5;
  --body-2: calc(20 * var(--u));  --body-2-lh: 1.5;

  /* Left text edge: every left-aligned line of text starts exactly under
     the "N" of the NorthCell wordmark in the logo (x 103.2), i.e. its text
     box sits at 101.2 (Inter's letters start about 2px inside their box).
     Figma places text at 98. */
  --text-x: 101.16;

  /* Layout */
  --nav-h: calc(90 * var(--u));
  --banner-h: calc(110 * var(--u));
  --header-h: calc(var(--nav-h) + var(--banner-h));   /* 200 */
  --chapter-h: calc(100vh - var(--header-h));
  /* Content positions below are written as "Figma y - header height", so
     everything keeps its Figma place on screen whatever the header height. */         /* 850 at 1080 */
}

/* Header heights rounded to whole pixels so the header, chapters and photos
   always meet exactly, with no hairline gaps at any screen size.
   (Browsers without round() keep the unrounded values above.) */
@supports (height: round(1.5px, 1px)) {
  :root {
    --nav-h: round(calc(90 * var(--u)), 1px);
    --banner-h: round(calc(110 * var(--u)), 1px);
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* Chapter-to-chapter scrolling is animated by js/main.js.
     scroll-padding keeps anchor links correct if JavaScript is off. */
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  background: var(--bg-cream);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--body-2);
  line-height: var(--body-2-lh);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: none;   /* Figma renders Inter at its default optical size; this keeps text widths identical */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, h5, p { margin: 0; font-weight: 400; }

/* ---------- 3. Pinned header (nav + banner) ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
}
.nav    { height: var(--nav-h);    background: var(--bg-cream); }
.banner { height: var(--banner-h); background: var(--brand-green); color: var(--bg-cream); }

/* ---------- 4. Chapters ---------- */
main { padding-top: var(--header-h); }
.chapter {
  position: relative;
  height: var(--chapter-h);
  overflow: hidden;
}


/* ---------- 5. Navigation (Figma component "Navigation", 1920 x 110) ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(50 * var(--u));
}
.nav__logo img {
  width: calc(200 * var(--u));
  height: calc(48.6 * var(--u));
}
.nav__right {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
}
.nav__links {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Nav links: outlined pills, 40 high, 20 side padding, Inter Regular 18 */
.nav__link {
  display: flex;
  align-items: center;
  height: calc(40 * var(--u));
  padding: 0 calc(20 * var(--u));
  border: 1px solid var(--text-ui);
  border-radius: calc(50 * var(--u));
  font-size: var(--button);
  line-height: var(--button-lh);
  color: var(--text-ui);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.nav__link:hover { background: var(--text-ui); color: var(--bg-cream); }

/* Contact Us button: 170 x 40 coral pill, Inter Regular 18 (Figma text style "Button") */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(170 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(50 * var(--u));
  background: var(--brand-coral);
  color: var(--bg-cream);
  font-size: var(--button);
  line-height: var(--button-lh);
  text-decoration: none;
  transition: filter 0.2s;
}
.button:hover { filter: brightness(0.94); }

/* ---------- 6. Banner (Figma component "Banner"; 110 high here, content centred) ---------- */
.banner { position: relative; overflow: hidden; }
.banner__text {
  position: absolute;
  left: calc(var(--text-x) * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: calc(658 * var(--u));
  font-size: var(--body-2);
  line-height: var(--body-2-lh);
}
/* Banner links: two outlined cream pills, 40 high, 15 apart, right edge 50 in */
.banner__links {
  position: absolute;
  right: calc(50 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: calc(15 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--button);
  line-height: var(--button-lh);
  white-space: nowrap;
}
.banner__links a {
  display: flex;
  align-items: center;
  height: calc(40 * var(--u));
  padding: 0 calc(20 * var(--u));
  border: 1px solid var(--bg-cream);
  border-radius: calc(50 * var(--u));
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.banner__links a:hover { background: var(--bg-cream); color: var(--brand-green); }

/* ---------- 7. Chapter list (Figma "StoryLine" + "Story Line Horizontal") ---------- */
.storyline ol { margin: 0; padding: 0; list-style: none; }
.storyline a {
  display: flex;
  align-items: center;
  gap: calc(30 * var(--u));
  height: calc(30 * var(--u));
  color: var(--text-ui);
  text-decoration: none;
  font-size: var(--body-2);
  line-height: var(--body-2-lh);
  white-space: nowrap;
}
.storyline a:hover .storyline__label { text-decoration: underline; text-underline-offset: 0.2em; }

/* 20 x 20 square rotated 45deg, sitting in a 28.28 box */
.storyline__diamond {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(28.284 * var(--u));
  height: calc(28.284 * var(--u));
}
.storyline__diamond::before {
  content: "";
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border: 1px solid var(--text-primary);
  transform: rotate(45deg);
  transition: background-color 0.25s;
}
.storyline a[aria-current] .storyline__diamond::before { background: var(--text-primary); }

/* Vertical list in the hero: x 1536, y 383 in the frame (113 below the header) */
/* Zero-size markers inside the hero headline, used by js/main.js to find
   the first line's cap height and the last line's baseline */
.baseline-probe { display: inline-block; width: 0; height: 0; }

.storyline--vertical {
  position: absolute;
  /* Left edge lines up with the "Why NorthCell" nav link (Figma x 1108).
     js/main.js measures that link and sets --list-x; the fallback is its
     Figma position, measured from the right edge. */
  left: calc(100% - 812 * var(--u));
  width: calc(298.284 * var(--u));
  /* Spans the headline: top of the capitals on line 1 to the baseline of the
     last line. js/main.js measures the headline and sets --list-top and
     --list-h; the fallbacks are the Figma values (y 379). */
  top: var(--list-top, calc(325 * var(--u) - var(--header-h)));
}
/* Rows are spread over the headline's height, so the first diamond lines up
   with the top of "We are exploring…" and the last one with the baseline
   of "…act on." */
.storyline--vertical ol {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--list-h, calc(282 * var(--u)));
}

/* Two-column list in chapters 01–06: x 98, y 893 in the frame */
.storyline--horizontal {
  position: fixed;
  z-index: 5;
  left: calc(var(--text-x) * var(--u));
  top: calc(893 * var(--u));
  /* appears once the first chapter has mostly slid into place */
  transition: opacity 0.6s ease 0.7s, visibility 0.6s ease 0.7s;
}
.storyline--horizontal ol {
  display: grid;
  grid-template-columns: calc(225.284 * var(--u)) calc(298.284 * var(--u));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: calc(29 * var(--u));
  row-gap: calc(14 * var(--u));
}
body[data-active-chapter="00"] .storyline--horizontal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;   /* leaves quickly when returning to the hero */
}

/* Keyboard focus */
a:focus-visible { outline: 2px solid var(--brand-coral); outline-offset: 4px; border-radius: 2px; }

/* ---------- 8. Section 00: Hero (Figma frame "00 Hero") ----------
   Positions are Figma frame coordinates minus the 270px header. */
.hero__map {
  position: absolute;
  /* Figma "O Canada!" group: x -35, y 21.6, 1136 x 1102.9 — on the left,
     behind the headline, running off the left edge and the bottom */
  left: calc(-35 * var(--u));
  top: calc(21.6 * var(--u) - var(--header-h));
  width: calc(1136 * var(--u));
  height: calc(1102.9 * var(--u));
  max-width: none;
  pointer-events: none;
}
/* Animated character version of the map (js/ascii-map.js) replaces the
   static image when JavaScript and motion are available */
/* Artwork replaced by its animated character version (js/ascii-art.js) */
img.is-replaced { display: none; }

.hero__title {
  position: absolute;
  left: calc((var(--text-x) + 2) * var(--u));   /* the "W" starts right at its box edge */
  top: calc(308 * var(--u) - var(--header-h));
  width: calc(948 * var(--u));
  font-size: var(--h2);
  line-height: var(--h2-lh);
  color: var(--text-primary);
}
.hero__highlight { color: var(--brand-coral); }
.hero__underline {
  position: absolute;
  left: calc((589 + var(--text-x) - 96) * var(--u));   /* under "simpler way"; moves with the headline */
  top: calc(392 * var(--u) - var(--header-h));
  width: calc(320 * var(--u));
  height: calc(6.6 * var(--u));
  max-width: none;
  pointer-events: none;
}
.hero__scroll {
  position: absolute;
  left: calc(var(--text-x) * var(--u));
  top: calc(899 * var(--u) - var(--header-h));
  font-size: var(--body-1);
  line-height: var(--body-1-lh);
  white-space: nowrap;
}

/* Hero grid (Figma "Vector Element 1 — Perspective Warp"): globe-style grid
   drawn as vector lines (assets/svg/hero-grid.svg, traced from the Figma
   artwork; always 1px and crisp), bottom layer. Visible part in Figma: x 0, y 63, 1920 x 1017 (the top
   runs under the header). On screens wider than 16:9 it widens to cover the
   full width, keeping its proportions. */
.hero__grid {
  position: absolute;
  left: 50%;
  top: calc(46 * var(--u) - var(--header-h));
  width: max(100%, calc(1920 * var(--u)));
  height: auto;
  aspect-ratio: 1920 / 1017;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ---------- 9. Chapters 01–04: text left, photo right ----------
   Per-chapter values are set on each <section> in index.html:
   --copy-w  width of the text block      (Figma "0X Copy" frame)
   --body-w  width of the paragraph text
   --copy-gap space between heading and paragraph (default 24)
   --copy-color text colour (default text-primary)
   (photos live in the fixed .card-stage layer below) */
.chapter__copy {
  position: absolute;
  left: calc(var(--text-x) * var(--u));
  top: calc(var(--copy-top, 315) * var(--u) - var(--header-h));
  width: calc(var(--copy-w) * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(var(--copy-gap, 24) * var(--u));
  color: var(--copy-color, var(--text-primary));
}
.chapter__title {
  width: calc(var(--title-w, var(--copy-w)) * var(--u));
  font-size: var(--h3);
  line-height: var(--h3-lh);
}
.chapter__body {
  width: calc(var(--body-w) * var(--u));
  font-size: var(--body-1);
  line-height: var(--body-1-lh);
}
/* Chapter titles (46px) start 1px further into their box than body text;
   "Smaller…" in 05 a little more (round S) */
.chapter__title { margin-left: calc(-1 * var(--u)); }
#the-gap .chapter__title { margin-left: calc(-2 * var(--u)); }
.chapter__body p + p { margin-top: 1.5em; }   /* one blank line (one line-height), as in Figma */

/* Photo cards (chapters 01–04): a fixed layer above the chapters. Each card
   is sized to its main-card size and moved into place with a transform by
   js/main.js (main card, peeking card behind it, or hidden). */
.card-stage {
  position: fixed;
  inset: 0;
  z-index: 4;                           /* above chapter content, below header (10) */
  overflow: hidden;
  pointer-events: none;
}
.card {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  object-fit: cover;
  transform-origin: 0 0;
  opacity: 0;
  will-change: transform, opacity;
}
.card[data-state="main"]   { opacity: 1; z-index: 3; }
.card[data-state="past"]   { z-index: 2; }
.card[data-state="peek"]   { opacity: 1; z-index: 1; }
.card[data-state="future"] { z-index: 0; }
/* Figma "Drop Shadow": x 16, y 4, blur 40, spread -16, brand green 80% (not on 04) */
.card[data-state="main"]:not([data-chapter="04"]) {
  box-shadow: calc(16 * var(--u)) calc(4 * var(--u)) calc(40 * var(--u)) calc(-16 * var(--u)) rgba(30, 58, 47, 0.8);
}

/* Next button: coral square turned 45deg with a 10px cream border, arrow on top */
.next-button {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: calc(131.147 * var(--u));
  height: calc(131.147 * var(--u));
  color: var(--bg-cream);
  text-decoration: none;
  pointer-events: auto;
}
.next-button::before {
  content: "";
  position: absolute;
  left: calc(19.206 * var(--u));
  top: calc(19.206 * var(--u));
  width: calc(92.735 * var(--u));
  height: calc(92.735 * var(--u));
  background: var(--brand-coral);
  border: calc(10 * var(--u)) solid var(--bg-cream);
  background-clip: padding-box;         /* no coral fringe around the cream border */
  transform: rotate(45deg);
}
/* Arrow drawn as a vector so it matches Figma's heavier arrow glyph */
.next-button svg {
  position: absolute;
  left: calc(40.6 * var(--u));
  top: calc(43 * var(--u));
  width: calc(50 * var(--u));
  height: calc(42 * var(--u));
  overflow: visible;
  transition: transform 0.3s var(--ease-out, ease);
}
.next-button:hover svg { transform: translateX(calc(6 * var(--u))); }
.next-button:focus,
.next-button:focus-visible { outline: none; }
/* Hidden while the cards move; js/main.js shows it once they are in place */
/* It is revealed from the centre outwards: a diamond clip that grows from a
   point to the button's full shape */
.next-button { clip-path: polygon(50% -2%, 102% 50%, 50% 102%, -2% 50%); }   /* a hair larger than the diamond so its corners are never shaved */
.next-button.is-hidden {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  pointer-events: none;
}

/* ---------- 9b. Chapters 05–06: text left, illustration right ----------
   Right-side artwork is anchored to the right edge (see hero), so it keeps
   its place on screens wider than 16:9. Figma frame coordinates minus the
   270px header; "100% - N" = N Figma px from the right edge (1920). */
.chapter__graphic {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

/* 05 The Gap: overlapping circles, x 737–1919.5, y 25 (runs off the bottom) */
.gap__graphic {
  right: calc(0.5 * var(--u));
  top: calc(25 * var(--u) - var(--header-h));
  width: calc(1182.5 * var(--u));
  height: calc(1309.3 * var(--u));
}
.gap__label {
  position: absolute;
  font-size: calc(40 * var(--u));
  line-height: calc(60 * var(--u));
  color: var(--text-primary);
  white-space: nowrap;
}
.gap__label--enterprise { left: calc(100% - 715 * var(--u)); top: calc(371 * var(--u) - var(--header-h)); }  /* x 1205, y 371 */
.gap__label--basic      { left: calc(100% - 363 * var(--u)); top: calc(834 * var(--u) - var(--header-h)); }  /* x 1557, y 834 */

/* The original NorthCell logo (assets/svg/icon-logo.svg) sits in the middle
   of the animated circles, centred where the mark is in Figma (x 1242–1414,
   y 587–772). The static artwork (reduced motion) keeps its own mark, so the
   logo is only shown with the animated version. */
.gap__logo {
  display: none;
  left: calc(100% - 676.5 * var(--u));  /* x 1243.5 */
  top: calc(588.5 * var(--u) - var(--header-h));
  width: calc(169 * var(--u));
  height: calc(182 * var(--u));
}
.has-ascii-art .gap__logo { display: block; }

/* 06 NorthCell Starts Here: hexagon, x 1086, y 322, 602.6 x 690.3 */
.start__graphic {
  right: calc(231.4 * var(--u));
  top: calc(275 * var(--u) - var(--header-h));
  width: calc(602.6 * var(--u));
  height: calc(690.3 * var(--u));
}
/* Animated version (js/ascii-art.js): the hexagon's faces sit below the
   character logo and its lines and diamonds on top, so the logo appears
   inside the box as in Figma. Only shown when the animation is running. */
.start__frame,
.start__lines { display: none; }
.has-ascii-art .start__frame,
.has-ascii-art .start__lines { display: block; }

.start__next {
  position: absolute;
  left: calc((var(--text-x) - 2) * var(--u));   /* the arrow glyph starts 2px into its box */
  top: calc(601 * var(--u) - var(--header-h));
  font-size: calc(26 * var(--u));
  line-height: 1.2;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}
.start__next:hover { color: var(--brand-coral); }

/* ---------- 10. Motion: chapter reveal animations ----------
   Only applied when JavaScript is running (html.js) and the visitor has not
   asked their system for reduced motion. The chapter being scrolled to gets
   .is-active the moment the scroll starts, so its content animates in while
   it slides into view; the chapter being left gets .is-exiting (quick fade
   out) and resets once it is off screen. Works the same in both directions. */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --rise: calc(32 * var(--u));
  }

  /* Scroll direction, set by js/main.js: 1 = down, -1 = up */
  body { --dir: 1; }
  body[data-direction="up"] { --dir: -1; }

  /* Text: fades in while drifting in from the direction of travel
     (rises from below when scrolling down, drops from above when scrolling up),
     title first, then body */
  .js .hero__title,
  .js .hero__scroll,
  .js .chapter__title,
  .js .chapter__body {
    opacity: 0;
    transform: translateY(calc(var(--rise) * var(--dir)));
    transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  }
  .js .is-active .hero__title    { opacity: 1; transform: none; transition-delay: 0.35s; }
  .js .is-active .chapter__title { opacity: 1; transform: none; transition-delay: 0.55s; }
  .js .is-active .chapter__body  { opacity: 1; transform: none; transition-delay: 0.7s; }
  .js .is-active .hero__scroll   { opacity: 1; transform: none; transition-delay: 1.1s; }

  /* Scrolling up, the incoming text sits at the top of its chapter, so it
     arrives on screen later: start its reveal a little later to match */
  body[data-direction="up"] .is-active .hero__title,
  body[data-direction="up"] .is-active .chapter__title { transition-delay: 0.7s; }
  body[data-direction="up"] .is-active .chapter__body  { transition-delay: 0.8s; }
  body[data-direction="up"] .is-active .hero__scroll   { transition-delay: 0.6s; }

  /* The chapter being left: its text fades out straight away, drifting the
     way the page moves, so it never slides across the chapter list */
  html.js body .is-exiting .hero__title,
  html.js body .is-exiting .hero__scroll,
  html.js body .is-exiting .hero__underline,
  html.js body .is-exiting .chapter__title,
  html.js body .is-exiting .chapter__body {
    opacity: 0;
    transform: translateY(calc(var(--rise) * var(--dir) * -1));
    transition: opacity 0.35s ease, transform 0.6s ease;
    transition-delay: 0s;
  }

  /* Used for one frame to reposition hidden text without animating it */
  .is-preparing * { transition: none !important; }

  /* Hero underline draws in from left to right */
  .js .hero__underline {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.9s var(--ease-out), opacity 0.35s ease;
  }
  .js .is-active .hero__underline { clip-path: inset(0 0 0 0); transition-delay: 0.9s; }

  /* Hero map and vertical chapter list: soft fade */
  .js .hero__map,
  .js .storyline--vertical li {
    opacity: 0;
    transition: opacity 1.4s ease;
  }
  .js .is-active .hero__map { opacity: 1; transition-delay: 0.1s; }
  .js .is-active .storyline--vertical li { opacity: 1; }
  .js .is-active .storyline--vertical li:nth-child(1) { transition-delay: 0.6s; }
  .js .is-active .storyline--vertical li:nth-child(2) { transition-delay: 0.7s; }
  .js .is-active .storyline--vertical li:nth-child(3) { transition-delay: 0.8s; }
  .js .is-active .storyline--vertical li:nth-child(4) { transition-delay: 0.9s; }
  .js .is-active .storyline--vertical li:nth-child(5) { transition-delay: 1.0s; }
  .js .is-active .storyline--vertical li:nth-child(6) { transition-delay: 1.1s; }

  /* Photo cards: the peeking card slides forward to become the main card,
     the old main card slides away to the left and fades, and the next photo
     slides in behind from the right. Scrolling up plays it in reverse. */
  .card {
    transition: transform 1s var(--ease-in-out), opacity 0.6s ease, box-shadow 0.8s ease;
  }
  .card[data-state="main"]   { transition-delay: 0s, 0.1s, 0.2s; }
  .card[data-state="peek"]   { transition: transform 0.9s var(--ease-out) 0.25s, opacity 0.7s ease 0.35s, box-shadow 0.3s ease; }
  .card[data-state="past"],
  .card[data-state="future"] { transition: transform 0.9s var(--ease-in-out), opacity 0.45s ease, box-shadow 0.3s ease; }
  .card[data-state="below"],
  .card[data-state="above"]  { transition: transform 0.8s var(--ease-in-out), opacity 0.4s ease, box-shadow 0.3s ease; }

  .next-button { transition: clip-path 0.7s var(--ease-out); }
  .next-button.is-hidden { transition: clip-path 0.2s ease-in; }

  /* Resizing (and the first layout): jump straight to place */
  /* Hero <-> chapter 01: the page fades out, jumps, and fades back in */
  main, .card-stage { transition: opacity 0.6s ease; }
  body.is-fading main,
  body.is-fading .card-stage { opacity: 0; transition: opacity 0.45s ease; }

  .card-stage.is-resizing .card,
  .card-stage.is-resizing .next-button { transition: none; }

  /* Diamonds in the chapter list fill smoothly */
  .storyline__diamond::before { transition: background-color 0.5s ease; }
}

/* ---------- 11. Motion: chapters 05–06 artwork ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Illustrations settle in from a slightly smaller size while fading in */
  .js .chapter__graphic {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 1.2s ease, transform 1.6s var(--ease-out);
  }
  .js .is-active .chapter__graphic { opacity: 1; transform: none; transition-delay: 0.35s; }

  /* Labels and the "Next" link follow the text */
  .js .gap__label,
  .js .start__next {
    opacity: 0;
    transform: translateY(calc(var(--rise) * var(--dir)));
    transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  }
  .js .is-active .gap__label--enterprise { opacity: 1; transform: none; transition-delay: 0.9s; }
  .js .is-active .gap__label--basic      { opacity: 1; transform: none; transition-delay: 1.05s; }
  .js .is-active .start__next            { opacity: 1; transform: none; transition-delay: 0.85s; }

  /* Leaving: fade out quickly, like the chapter text */
  html.js body .is-exiting .chapter__graphic,
  html.js body .is-exiting .gap__label,
  html.js body .is-exiting .start__next {
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.6s ease;
    transition-delay: 0s;
  }
}

/* ---------- 12. Motion: hero grid ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Grid fades in with the map */
  .js .hero__grid { opacity: 0; transition: opacity 1.4s ease; }
  .js .is-active .hero__grid { opacity: 1; transition-delay: 0.3s; }
}

/* ---------- 13. Footer (shared by every page; Figma "Footer", 1820 x 531) ----------
   Two green panels: the slogan and legal line on the left (1080 wide,
   with a 3px sand divider), the logo, links and credits on the right. */
:root { --bg-sand: #EFE8DC; }
.site-footer {
  display: flex;
  height: calc(531 * var(--u));
  margin: 0 calc(50 * var(--u));
  background: var(--brand-green);
  color: var(--bg-sand);
}
.footer__main {
  position: relative;
  flex: none;
  width: calc(1080 * var(--u));
  border-right: calc(3 * var(--u)) solid var(--bg-darker-cream);
}
.footer__side {
  position: relative;
  flex: 1;
}
.footer__slogan {
  position: absolute;
  left: calc((var(--text-x) - 50) * var(--u));
  top: calc(42 * var(--u));
  font-size: var(--h3);
  line-height: var(--h3-lh);
  white-space: nowrap;
}
.footer__slogan strong { font-weight: 700; }
.footer__legal {
  position: absolute;
  left: calc((var(--text-x) - 50) * var(--u));
  top: calc(459 * var(--u));
  font-size: var(--body-1);
  line-height: var(--body-1-lh);
  white-space: nowrap;
}
.footer__legal a { color: inherit; text-underline-offset: 0.15em; }
/* Company address: x 48, y 264, 421 wide; name in Semi Bold, a blank line, then the address */
.footer__address {
  position: absolute;
  left: calc((var(--text-x) - 50) * var(--u));
  top: calc(264 * var(--u));
  width: calc(421 * var(--u));
  font-size: var(--body-1);
  line-height: var(--body-1-lh);
  font-style: normal;
}
.footer__address strong { font-weight: 600; }
.footer__logo {
  position: absolute;
  left: calc(58 * var(--u));
  top: calc(52 * var(--u));
}
.footer__logo img { width: calc(200 * var(--u)); height: calc(48.6 * var(--u)); }
/* Link pills: cream outline, 40 high, 15 apart; Contact Us is a solid cream pill */
.footer__links {
  position: absolute;
  left: calc(58 * var(--u));
  top: calc(136 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(15 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(40 * var(--u));
  padding: 0 calc(20 * var(--u));
  border: 1px solid var(--bg-cream);
  border-radius: calc(50 * var(--u));
  color: var(--bg-cream);
  font-size: var(--button);
  line-height: var(--button-lh);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.footer__links a:hover { background: var(--bg-cream); color: var(--brand-green); }
.footer__links .footer__contact {
  width: calc(170 * var(--u));
  background: var(--bg-cream);
  color: var(--brand-green);
}
.footer__links .footer__contact:hover { filter: brightness(0.94); }
.footer__credit {
  position: absolute;
  left: calc(58 * var(--u));
  top: calc(451 * var(--u));
  display: flex;
  align-items: flex-end;
  gap: calc(10 * var(--u));
  margin: 0;
  font-size: var(--body-1);
  line-height: var(--body-1-lh);
  font-style: italic;
  white-space: nowrap;
}
.footer__credit img { width: calc(68 * var(--u)); height: calc(40.9 * var(--u)); }
.footer__linkedin {
  position: absolute;
  right: calc(42 * var(--u));          /* far right of the panel (Figma x 658 of 740) */
  top: calc(452 * var(--u));
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
}
.footer__linkedin img { width: 100%; height: 100%; }

/* Landing page: the footer is the last scroll stop, after chapter 06 */
.chapter--footer {
  height: auto;
  padding: calc(50 * var(--u)) 0 calc(60 * var(--u));
}
body[data-active-chapter="07"] .storyline--horizontal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.footer__spring { display: flex; transition: opacity 0.2s; }
.footer__spring:hover { opacity: 0.8; }