/* WpTechStudio: Stacked Gig Bill
   Black paper, white ink fading to grey, one orange action per sheet.
   Sheets alternate dark and paper; every color below is a token that the
   paper sheet remaps, so components never know which sheet they sit on. */

:root {
  --ink: #000000;
  --paper: #f1efe9;
  --white: #ffffff;
  --bg: var(--ink);
  --grey-1: #c9c9c6;
  --grey-2: #8d8d8a;
  --grey-3: #5c5c5a;
  --rule: rgba(255, 255, 255, 0.14);
  --rule-strong: rgba(255, 255, 255, 0.28);
  --orange: #ff5a2b;
  --orange-hover: #ff6d43;
  /* Ink on orange is white everywhere (user decision, 2026-09-15): pills, the
     wordmark stamp, the hero tiles, the badge, selection. About 2.9:1 against
     the orange, under AA for small text; accepted by the user. */
  --orange-ink: #ffffff;

  --display: "Big Shoulders Display", "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Azeret Mono", "SFMono-Regular", Consolas, monospace;

  --gutter: clamp(20px, 4vw, 64px);
  --sheet-pad: clamp(88px, 11vw, 168px);
  --ease-out: cubic-bezier(0.16, 0.84, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: var(--orange);
  color: var(--orange-ink);
}

html {
  scrollbar-color: var(--grey-3) var(--ink);
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ink);
}
::-webkit-scrollbar-thumb {
  background: var(--grey-3);
  border: 3px solid var(--ink);
  border-radius: 999px;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

h1,
h2,
h3,
p,
ul,
ol,
dl {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  padding: 10px 16px;
  background: var(--orange);
  color: var(--orange-ink);
  font-family: var(--mono);
  font-size: 12px;
  z-index: 200;
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Print marks ---------- */

.mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-2);
  font-weight: 400;
}

.mark--white {
  color: var(--white);
}

.mark--orange {
  color: var(--orange);
}

.display {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.005em;
}

/* The brief-pinned fade: white ink running to grey down each headline. */
.faded {
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 30%, #7a7a78 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sheet--paper .faded {
  background: linear-gradient(180deg, #000 0%, #000 30%, #6a6a68 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- Sheets ---------- */

.sheet {
  position: relative;
  padding: var(--sheet-pad) var(--gutter);
  border-top: 1px solid var(--rule);
}

/* The paper sheet: same print run, reverse ink. Every token flips here. */
.sheet--paper {
  background: var(--paper);
  color: #000;
  border-top: 0;
  --white: #000000;
  --bg: var(--paper);
  --rule: rgba(0, 0, 0, 0.16);
  --rule-strong: rgba(0, 0, 0, 0.4);
  --grey-1: #3a3a38;
  --grey-2: #6b6b68;
  --grey-3: #9a9a96;
}

.sheet--paper .mark--orange {
  color: #d94a20;
}

.sheet__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: clamp(40px, 6vw, 88px);
}

.sheet__title {
  font-size: clamp(56px, 9.5vw, 168px);
  max-width: 12ch;
  text-wrap: balance;
}

.sheet__lede {
  max-width: 34ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  color: var(--grey-1);
  padding-bottom: 0.4em;
  justify-self: end;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--white);
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.btn:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--bg);
}

/* The one orange action per sheet: a pill with the arrow set in its own chip. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 10px 10px 10px 26px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--orange-ink);
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1;
  letter-spacing: 0.005em;
  transition: background-color 0.25s ease, transform 0.45s var(--ease-out);
}

.cta__chip {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange-ink);
  color: var(--orange);
  transition: transform 0.45s var(--ease-out), background-color 0.25s ease;
}

.cta__chip svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.45s var(--ease-out);
}

.cta:hover {
  background: var(--orange-hover);
}
.cta:hover .cta__chip {
  transform: rotate(-45deg);
}

.cta--large {
  font-size: clamp(17px, 1.4vw, 21px);
  padding: 12px 12px 12px 32px;
  gap: 22px;
}
.cta--large .cta__chip {
  width: 56px;
  height: 56px;
}
.cta--large .cta__chip svg {
  width: 22px;
  height: 22px;
}

/* ---------- Nav: wordmark left, three bars right ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background-color 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
/* The open menu owns the ground; the bar goes clear again on top of it. */
.nav.is-menu-open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* The wordmark: the three-stroke mark, then the full name on the same baseline. */
.nav__brand {
  display: inline-block;
  white-space: nowrap;
  color: #ffffff;
  font-family: var(--display);
  /* 30px, up from 24 (user, 2026-09-16): the mark read too small against the
     hero bill, which came down at the same time. */
  font-size: 30px;
  line-height: 1;
}
.nav__brand:hover .logo {
  color: var(--orange);
}

/* Cap height of Big Shoulders Display 900 is 0.81em; the mark is cut to it and
   sits on the baseline beside the full name. */
.logo {
  display: inline-block;
  vertical-align: baseline;
  height: 0.81em;
  width: auto;
  fill: currentColor;
  margin-right: 0.3em;
  transition: color 0.2s ease;
}

.wordmark {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* STUDIO sits in an orange block, the way a print shop stamps its own name
   (user request, after the VandsLAB "LAB" tag). Cut to the cap height so it
   reads as one word with WPTECH; white ink on orange, like every orange surface. */
.wordmark__tag {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 0.14em;
  padding: 0.06em 0.14em;
  line-height: 0.81em;
  background: var(--orange);
  color: var(--orange-ink);
  border-radius: 2px;
}
.nav__brand:hover .wordmark__tag {
  background: var(--orange-hover);
}

/* Right end: the ghost button and the ring, one control each. */
.nav__right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav .btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  min-height: 44px;
}
.nav .btn:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}
.nav.is-menu-open .btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Three bars in a ring. The bars mirror the three strokes of the mark. */
.nav__burger {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #ffffff;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.nav__burger:hover {
  border-color: #ffffff;
}
.nav__bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  margin: -0.75px 0 0 -9px;
  background: currentColor;
  transform-origin: 50% 50%;
  transition: transform 0.45s var(--ease-out), opacity 0.25s ease, width 0.3s var(--ease-out), margin 0.3s var(--ease-out);
}
.nav__bar:nth-child(1) { transform: translateY(-6px); }
.nav__bar:nth-child(2) { transform: translateY(0); }
.nav__bar:nth-child(3) { transform: translateY(6px); }
.nav__burger:hover .nav__bar:nth-child(2) { width: 12px; margin-left: -3px; }
.nav__burger[aria-expanded="true"] {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}
.nav__burger[aria-expanded="true"] .nav__bar:nth-child(1) { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger[aria-expanded="true"] .nav__bar:nth-child(3) { transform: rotate(-45deg); }
.nav__burger[aria-expanded="true"]:hover .nav__bar:nth-child(2) { width: 18px; margin-left: -9px; }

/* ---------- Menu: a black sheet that drops over the page ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  color: #ffffff;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-out), visibility 0s linear 0.7s;
  overflow-y: auto;
}
.menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s var(--ease-out), visibility 0s;
}

.menu__inner {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 34ch);
  align-items: end;
  gap: clamp(32px, 6vw, 96px);
  padding: 112px var(--gutter) clamp(32px, 5vw, 64px);
}

.menu__links {
  display: grid;
  border-top: 1px solid var(--rule);
}
.menu__link {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0.06em 0 0.08em;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(56px, 12.5vh, 150px);
  line-height: 0.86;
  letter-spacing: -0.01em;
  color: #ffffff;
  transition: color 0.25s ease, padding-left 0.5s var(--ease-out);
}
.menu__link span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.6s var(--ease-out);
}
.menu.is-open .menu__link span {
  transform: translateY(0);
  transition-delay: calc(0.18s + var(--i) * 0.06s);
}
/* The dot that walks in ahead of the word on hover: one orange mark per row, no fill. */
.menu__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  background: var(--orange);
  transform: translate(-150%, -50%) scale(0.4);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.25s ease;
}
.menu__link:hover,
.menu__link:focus-visible {
  padding-left: 0.3em;
  color: var(--grey-1);
  outline: none;
}
.menu__link:hover::before,
.menu__link:focus-visible::before {
  transform: translate(0, -50%) scale(1);
  opacity: 1;
}

.menu__aside {
  display: grid;
  gap: 28px;
  justify-items: start;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out);
}
.menu.is-open .menu__aside {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}
.menu__blurb {
  display: grid;
  gap: 10px;
  color: var(--grey-1);
  font-size: 15px;
  line-height: 1.55;
  max-width: 34ch;
}
.menu__mail {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--grey-2);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule-strong);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.menu__mail:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 104px var(--gutter) clamp(24px, 3vw, 48px);
}

/* The hero field: the ink wash. Soft washes of light over the black sheet,
   drawn additively on a canvas by assets/ink-wash.js: three neutral washes and
   one warm ember in the brand orange, on slow orbits, leaning toward the
   pointer. Rendered at half resolution and scaled up, which keeps it soft. A
   linear-gradient mask fades it out over the lower third so the bill lands on
   plain black. */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.hero__wash {
  display: block;
  width: 100%;
  height: 100%;
}

/* Layers: field (0), catch (1), bill, tags and pill (2). The bill itself lets
   the pointer through to the catch layer so the field keeps its parallax; only
   the tiles and the pill take the pointer back. */
.hero__catch {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__bill {
  position: relative;
  z-index: 2;
}
.hero__bill,
.hero__tags {
  pointer-events: none;
}

/* min-width 0 matters: the rows never wrap, and without it they would widen
   the grid track to fit themselves instead of being fitted to it. */
.hero__bill {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: clamp(16px, 2.5vw, 40px) 0 clamp(40px, 4vw, 56px);
  overflow-x: clip;
}
/* On wide screens the bill leaves a margin either side, like the reference:
   room for the marks on the left and the pill on the right. */
@media (min-width: 1000px) {
  .hero__bill {
    /* Wider margins than the original 4% and 12% so the fitted bill sits
       smaller against the nav mark (user, 2026-09-16). */
    padding-left: 8%;
    padding-right: 16%;
  }
}

/* --x is the staircase offset the script computes per row. */
.hero__line {
  display: block;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.01em;
  /* JS fits each row to the container; this is the no-JS floor. */
  font-size: clamp(56px, 15vw, 340px);
  width: 100%;
  min-width: 0;
  padding-left: var(--x, 0px);
  text-align: left;
}

.hero__row {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Each word half is its own window; the word slides out from behind the tile. */
.hero__seg {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.hero__seg > span {
  display: inline-block;
  transform: translateX(var(--from));
}
.hero__seg--a > span {
  --from: 104%;
}
.hero__seg--b > span {
  --from: -104%;
}

.hero__line--last .hero__seg > span {
  /* The last row stays brightest: it carries the promise. */
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 55%, #8f8f8d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The tiles: one line-height square each, drawn glyphs inside. --gx/--gy is
   the offset from a tile's row slot back to its gathered start position. */
.hero__tile {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 0.7em;
  height: 0.7em;
  margin: 0 0.08em;
  flex: none;
  pointer-events: auto;
  color: var(--ink);
  background: var(--white);
  transition: background-color 0.3s ease, color 0.3s ease;
  opacity: 0;
  transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(0.4) rotate(-120deg);
  will-change: transform;
}
.hero__tile--deca {
  clip-path: polygon(50% 0%, 79.4% 9.5%, 97.6% 34.5%, 97.6% 65.5%, 79.4% 90.5%, 50% 100%, 20.6% 90.5%, 2.4% 65.5%, 2.4% 34.5%, 20.6% 9.5%);
}
.hero__tile--dark {
  background: var(--grey-3);
  color: var(--white);
  clip-path: polygon(50% 0%, 79.4% 9.5%, 97.6% 34.5%, 97.6% 65.5%, 79.4% 90.5%, 50% 100%, 20.6% 90.5%, 2.4% 65.5%, 2.4% 34.5%, 20.6% 9.5%);
}
/* Hover fills the tile orange (user request): the tiles are the hero's links,
   so this is the sheet's one orange rather than an extra one. */
.hero__tile:hover,
.hero__tile:focus-visible {
  background: var(--orange);
  color: var(--orange-ink);
}
/* The W tile is the studio itself, so it wears the orange at rest and flips
   to the light decagon on hover (user request); the sheet's one orange. */
.hero__tile--deca {
  background: var(--orange);
  color: var(--orange-ink);
}
.hero__tile--deca:hover,
.hero__tile--deca:focus-visible {
  background: var(--grey-1);
  color: var(--ink);
}
.hero__tile:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.hero__glyph {
  position: absolute;
  inset: 18%;
  width: 64%;
  height: 64%;
  fill: currentColor;
  transition: opacity 0.35s ease, transform 0.55s var(--ease-out);
}
.hero__glyph--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 11;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.hero__glyph--b {
  opacity: 0;
  /* Counter-rotates the quarter turn the tile makes on hover, so it reads upright. */
  transform: rotate(-90deg) scale(0.6);
}
.hero__tile:hover .hero__glyph--a,
.hero__tile:focus-visible .hero__glyph--a {
  opacity: 0;
  transform: scale(0.6);
}
.hero__tile:hover .hero__glyph--b,
.hero__tile:focus-visible .hero__glyph--b {
  opacity: 1;
  transform: rotate(-90deg) scale(1);
}

/* The sequence. Tiles: pop in at the gathered spot (0 to 0.5s), hold there as
   a row of three until 1.45s, then travel to their rows with one full turn
   (to 2.6s), staggered by --t. Words slide out from 2.55s, staggered by row.
   Marks and the pill follow. */
.is-ready .hero__tile {
  animation: tile-land 2.6s cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: calc(var(--t, 0) * 0.1s);
}
@keyframes tile-land {
  0% {
    opacity: 0;
    transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(0.4) rotate(-120deg);
  }
  19% {
    opacity: 1;
    transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(1) rotate(0deg);
  }
  56% {
    opacity: 1;
    transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(1) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(360deg);
  }
}

.is-ready .hero__seg > span {
  animation: slide-out 1s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  animation-delay: calc(2.55s + var(--r, 0) * 0.1s);
}
@keyframes slide-out {
  to {
    transform: translateX(0);
  }
}

/* Once the sequence has run, the pointer steers the tiles: --px/--py/--pr come
   from main.js, --hr is the quarter turn on hover. */
.hero-done .hero__tile {
  animation: none;
  opacity: 1;
  transform: translate(var(--px, 0px), var(--py, 0px)) rotate(calc(var(--pr, 0deg) + var(--hr, 0deg)));
  transition: transform 0.6s var(--ease-out), background-color 0.3s ease, color 0.3s ease;
}
.hero-done .hero__tile:hover,
.hero-done .hero__tile:focus-visible {
  --hr: 90deg;
}

/* Print marks around the bill. */
.hero__tags {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__tag {
  position: absolute;
  z-index: 2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--grey-2);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: color 0.3s ease;
}
.hero__tag[data-anchor$="-left"],
.hero__tag[data-anchor="row3-below"] {
  text-align: right;
}
.hero__tag[data-anchor="row1-right"] {
  text-align: left;
}
.hero__tag.is-lit {
  color: var(--white);
}
.is-ready .hero__tag {
  animation: fade-up 0.8s var(--ease-out) forwards;
  animation-delay: calc(3.2s + var(--i, 0) * 0.08s);
}

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Under 1000px the marks flow under the bill instead of floating, and the bill
   plus marks center as one block. */
@media (max-width: 999px) {
  .hero {
    grid-template-rows: auto auto auto;
    align-content: center;
  }
  .hero__tags {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    padding: 8px 0 0;
  }
  .hero__tag {
    position: static;
    text-align: left !important;
    white-space: normal;
  }
  .hero__tags {
    padding-bottom: 8px;
  }
}

/* ---------- Who ---------- */

.who {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}

.who__title {
  font-size: clamp(48px, 7.4vw, 132px);
  max-width: 10ch;
}

.who__body {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--grey-1);
  padding-top: 0.6em;
}
.who__body p + p {
  margin-top: 1.2em;
}
.who__body strong {
  color: var(--white);
  font-weight: 500;
}

/* ---------- Services schedule ---------- */

.schedule {
  border-top: 1px solid var(--rule-strong);
}

.schedule__row {
  display: grid;
  /* The title column takes back the width the chip column costs, so the
     longest name, PLUGIN DEVELOPMENT, stays on one line at 1440. */
  grid-template-columns: 56px minmax(0, 1.3fr) minmax(0, 1.3fr) 130px 36px;
  gap: clamp(16px, 3vw, 48px);
  /* Centred, not baseline: the title, its tile and the description share the
     row middle (user, 2026-09-16: titles were sitting off centre). */
  align-items: center;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.3s ease;
}

/* ---- The row hover, in the sheet's own language (user, 2026-09-16). The
   row's hairline redraws itself in orange from left to right; the tile turns
   a quarter and fills orange, as the hero tiles do; the title steps right;
   the copy comes up to full ink; an arrow chip lands at the row's end; and
   every other row dims, so the hovered one is the only thing lit. All on the
   one entrance curve. ---- */
.schedule__row {
  position: relative;
}
.schedule__row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-out);
}
.schedule__row:hover::after {
  transform: scaleX(1);
}
.schedule__row:hover {
  background: linear-gradient(90deg, var(--rule), transparent 70%);
}
/* The dim and the turn live on filter and on the glyph, not on the row's
   opacity or the tile's transform: the scroll reveal writes those two inline
   and would beat the hover. */
.schedule:hover .schedule__row:not(:hover) {
  filter: opacity(0.38);
}
.schedule__row {
  transition: background-color 0.3s ease, filter 0.45s ease;
}
.schedule__row:hover .schedule__glyph {
  transform: rotate(90deg);
}
.schedule__row:hover .schedule__name {
  transform: translateX(14px);
}
.schedule__row:hover .schedule__desc {
  color: var(--white);
}
.schedule__go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--orange-ink);
  justify-self: end;
  transform: scale(0) rotate(-45deg);
  opacity: 0;
  transition: transform 0.55s var(--ease-out), opacity 0.3s ease;
}
.schedule__go svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  transform: rotate(-45deg);
}
.schedule__row:hover .schedule__go {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

/* One drawn tile per service, in the hero's three shapes in turn: a square in
   the sheet's ink, an orange decagon, a grey decagon. Each carries a filled
   geometric glyph for what the service is. They replaced the 01 to 08 numbers
   (user, 2026-09-16). On paper --white is black, so the square flips to black
   with a paper glyph and the grey decagon lightens with the sheet. */
.schedule__tile {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--bg);
  background: var(--white);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.schedule__tile--deca,
.schedule__tile--dark {
  clip-path: polygon(50% 0%, 79.4% 9.5%, 97.6% 34.5%, 97.6% 65.5%, 79.4% 90.5%, 50% 100%, 20.6% 90.5%, 2.4% 65.5%, 2.4% 34.5%, 20.6% 9.5%);
}
.schedule__tile--deca {
  background: var(--orange);
  color: var(--orange-ink);
}
.schedule__tile--dark {
  background: var(--grey-3);
  color: var(--bg);
}
.schedule__glyph {
  width: 62%;
  height: 62%;
  fill: currentColor;
  transition: transform 0.6s var(--ease-out);
}
/* The row's hover lights its tile orange, the way the hero tiles fill on
   hover: the sheet's one orange, borrowed for a moment. */
.schedule__row:hover .schedule__tile--square,
.schedule__row:hover .schedule__tile--dark {
  background: var(--orange);
  color: var(--orange-ink);
}

.schedule__name {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(30px, 3.6vw, 60px);
  line-height: 0.9;
  color: var(--white);

  transition: transform 0.55s var(--ease-out);
}

.schedule__desc {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--grey-1);
  max-width: 52ch;

  transition: color 0.3s ease;
}

.schedule__tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-2);
  white-space: nowrap;
  text-align: right;
}

.schedule__tag--ai {
  color: var(--orange);
}

/* ---------- The edge ---------- */

.edge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 120px);
}

.edge__title {
  font-size: clamp(56px, 8.6vw, 152px);
  max-width: 9ch;
  position: sticky;
  top: 110px;
}

.edge__copy {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--grey-1);
  line-height: 1.55;
  max-width: 48ch;
}
.edge__copy p + p {
  margin-top: 1.1em;
}
.edge__copy strong {
  color: var(--white);
  font-weight: 500;
}

.panel {
  margin-top: 48px;
  border-top: 1px solid var(--rule-strong);
}

.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.panel__row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15.5px;
}

.panel__row--locked {
  color: var(--grey-2);
}

.panel__icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  align-self: center;
}
.panel__row:not(.panel__row--locked) .panel__icon {
  color: var(--orange);
}
.sheet--paper .panel__row:not(.panel__row--locked) .panel__icon {
  color: #d94a20;
}

/* ---------- Process: one continuous line ---------- */

.process {
  padding-top: clamp(40px, 5vw, 72px);
}

.process__title {
  font-size: clamp(48px, 7vw, 120px);
  max-width: 14ch;
}

.fold {
  position: relative;
  margin-top: clamp(48px, 6vw, 96px);
}

.fold__svg {
  width: 100%;
  height: 120px;
  overflow: visible;
}

.fold__path {
  fill: none;
  stroke: var(--white);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
}

.fold.is-visible .fold__path {
  animation: draw 2.2s var(--ease-out) forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.fold__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fold__marks span {
  position: absolute;
  left: calc(var(--x) + 18px);
  top: var(--y);
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--grey-1);
}

/* A station: an orange dot with a hairline ring, placed on the line's crest
   as a real element so it stays round however the SVG stretches. scroll.js
   lands each one as the stroke reaches it. */
.fold__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0;
}
.fold__dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--orange);
  opacity: 0.55;
}
.fold.is-visible .fold__dot {
  animation: pop 0.5s var(--ease-out) forwards;
}
.fold.is-visible .fold__dot:nth-of-type(1) { animation-delay: 0.3s; }
.fold.is-visible .fold__dot:nth-of-type(2) { animation-delay: 0.75s; }
.fold.is-visible .fold__dot:nth-of-type(3) { animation-delay: 1.2s; }
.fold.is-visible .fold__dot:nth-of-type(4) { animation-delay: 1.65s; }
.fold.is-visible .fold__dot:nth-of-type(5) { animation-delay: 2.1s; }

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.4);
    transform-box: fill-box;
    transform-origin: center;
  }
  to {
    opacity: 1;
    transform: scale(1);
    transform-box: fill-box;
    transform-origin: center;
  }
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 40px);
  margin-top: 8px;
}

.step h3 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(26px, 2.6vw, 44px);
  line-height: 0.9;
  margin-bottom: 12px;
}

.step p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--grey-1);
}

/* ---------- Work: numbered plates, ghost cells ---------- */

.plates {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.plate {
  position: relative;
  display: block;
  color: inherit;
}

.plate--7 { grid-column: span 7; }
.plate--5 { grid-column: span 5; }

.plate__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--rule-strong);
  overflow: hidden;
  background:
    linear-gradient(135deg, transparent 49.6%, var(--rule) 49.6%, var(--rule) 50.4%, transparent 50.4%),
    linear-gradient(45deg, transparent 49.6%, var(--rule) 49.6%, var(--rule) 50.4%, transparent 50.4%);
  transition: border-color 0.35s ease;
}

.plate--5 .plate__frame {
  aspect-ratio: 16 / 12;
}

.plate:hover .plate__frame {
  border-color: var(--white);
}

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

.plate__ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}

.plate__ghost .mark {
  color: var(--grey-2);
}

.plate__ghost .mark + .mark {
  margin-top: 8px;
  color: var(--grey-1);
}

.plate__num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--grey-1);
}

.plate__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  margin-top: 16px;
}

.plate__meta h3 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 0.9;
}

.plate__meta p {
  font-size: 14px;
  color: var(--grey-1);
  margin-top: 6px;
}

.plates__foot {
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- Plans ---------- */

.plans__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.plans__title {
  font-size: clamp(56px, 9vw, 160px);
  max-width: 10ch;
}

.switch {
  display: inline-grid;
  grid-auto-flow: column;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 4px;
  background: transparent;
  position: relative;
}

.switch button {
  position: relative;
  z-index: 1;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  transition: color 0.3s ease;
}

.switch button[aria-pressed="true"] {
  color: var(--bg);
}

.switch__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--white);
  transition: transform 0.45s var(--ease-out);
}

.switch[data-mode="once"] .switch__thumb {
  transform: translateX(100%);
}

.plans__note {
  font-size: 14px;
  color: var(--grey-1);
  max-width: 44ch;
  margin-top: 14px;
  min-height: 2.5em;
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Six shared rows so kicker, name, blurb, price, list and action align across tiers. */
  grid-template-rows: auto auto auto auto 1fr auto;
  border-top: 1px solid var(--rule-strong);
}

.tier {
  position: relative;
  padding: 32px clamp(16px, 2vw, 32px) 40px 0;
  border-right: 1px solid var(--rule);
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  gap: 0;
}

.tier + .tier {
  padding-left: clamp(16px, 2vw, 32px);
}

.tier:last-child {
  border-right: 0;
  padding-right: 0;
}

.tier__kicker {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  min-height: 22px;
}

.tier__popular {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-ink);
  background: var(--orange);
  padding: 4px 9px;
  border-radius: 999px;
}

.tier h3 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(56px, 6.5vw, 112px);
  line-height: 0.85;
}

.tier__for {
  margin-top: 16px;
  font-size: 15px;
  color: var(--grey-1);
  max-width: 30ch;
}

.tier__price {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-strong);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.tier__price strong {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 34px;
  line-height: 1;
}

.tier__num {
  margin-left: auto;
  color: var(--grey-2);
}

.tier__list {
  margin-top: 20px;
  border-top: 1px solid var(--rule);
}

.tier__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--white);
}

.tier__list li svg {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  stroke: var(--white);
  stroke-width: 2;
  fill: none;
}

.tier__list li.is-off {
  color: var(--grey-2);
  text-decoration: line-through;
  text-decoration-color: var(--rule-strong);
}
.tier__list li.is-off svg {
  stroke: var(--grey-3);
}

.tier__cta {
  margin-top: 28px;
  justify-self: start;
  align-self: end;
}

.tier--popular .tier__cta {
  background: var(--white);
  color: var(--bg);
  border-color: var(--white);
}
.tier--popular .tier__cta:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--orange-ink);
}

.plans__foot {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  border-top: 1px solid var(--rule-strong);
  padding-top: 28px;
}

.plans__foot p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey-1);
}
.plans__foot .mark {
  display: block;
  margin-bottom: 10px;
}

/* ---------- Testimonials ---------- */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-strong);
}

.quote {
  padding: 36px clamp(16px, 2vw, 32px) 40px 0;
  border-right: 1px solid var(--rule);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  min-height: 320px;
}
.quote + .quote {
  padding-left: clamp(16px, 2vw, 32px);
}
.quote:last-child {
  border-right: 0;
  padding-right: 0;
}

.quote__glyph {
  font-family: var(--display);
  font-weight: 900;
  font-size: 96px;
  line-height: 0.6;
  color: var(--grey-3);
}

.quote blockquote {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  color: var(--grey-1);
}

.quote__ghost blockquote {
  color: var(--grey-2);
}

.quote__who {
  display: grid;
  gap: 4px;
}
.quote__who strong {
  font-weight: 500;
  color: var(--white);
}

.quote__ghost .quote__who strong {
  color: var(--grey-2);
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 980px;
}

.faq__title {
  font-size: clamp(56px, 8vw, 132px);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.faq__list {
  border-top: 1px solid var(--rule-strong);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  color: var(--white);
}
.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary svg {
  width: 20px;
  height: 20px;
  stroke: var(--orange);
  stroke-width: 1.8;
  fill: none;
  transition: transform 0.4s var(--ease-out);
}

.faq details[open] summary svg {
  transform: rotate(45deg);
}

.faq__body {
  padding: 0 60px 26px 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--grey-1);
  max-width: 68ch;
}

/* ---------- Close ---------- */

.close {
  padding-bottom: clamp(64px, 8vw, 120px);
  overflow: hidden;
}

.close__bill {
  display: grid;
}

.close__line {
  display: block;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.8;
  font-size: clamp(48px, 11vw, 200px);
}

.close__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-top: clamp(32px, 4vw, 56px);
}

.close__copy {
  max-width: 44ch;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--grey-1);
}

.close__copy a {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  color: var(--white);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 4px;
  transition: color 0.2s ease;
}
.close__copy a:hover {
  color: var(--orange);
}
.sheet--paper .close__copy a:hover {
  color: #d94a20;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--rule);
  padding: 40px var(--gutter) 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.footer__links {
  display: flex;
  gap: 24px;
  justify-self: end;
}
.footer__links a {
  font-size: 13.5px;
  color: var(--grey-2);
}
.footer__links a:hover {
  color: var(--white);
}

.footer .mark {
  color: var(--grey-2);
}

/* ---------- No JS ---------- */

html:not(.js) .hero__tile,
html:not(.js) .hero__seg > span,
html:not(.js) .hero__tag {
  opacity: 1;
  transform: none;
}
html:not(.js) .hero__tag {
  position: static;
}
html:not(.js) .hero__tags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px 24px;
}
html:not(.js) .fold__path {
  stroke-dashoffset: 0;
}
html:not(.js) .fold__dot {
  opacity: 1;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .schedule__row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }
  .schedule__desc {
    grid-column: 2 / span 2;
  }
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 40px;
  }
}

/* On a phone the field is quieter and clears the body copy sooner. */
@media (max-width: 700px) {
  .hero__field {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 72%);
    mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 72%);
  }
}

@media (max-width: 900px) {
  .nav__brand {
    font-size: 21px;
  }
  .nav .btn {
    display: none;
  }
  .menu__inner {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: space-between;
    padding-top: 96px;
  }
  .menu__link {
    font-size: clamp(48px, 9vh, 88px);
  }

  .hero {
    padding-top: 92px;
  }

  .sheet__head,
  .plans__head,
  .close__foot {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .sheet__lede {
    justify-self: start;
  }

  .who,
  .edge {
    grid-template-columns: 1fr;
  }
  .edge__title {
    position: static;
  }

  .plates {
    gap: 28px;
  }
  .plate--7,
  .plate--5 {
    grid-column: span 12;
  }
  .plate--5 .plate__frame {
    aspect-ratio: 16 / 10;
  }

  .tiers,
  .quotes,
  .plans__foot {
    grid-template-columns: 1fr;
  }
  .tiers {
    grid-template-rows: none;
  }
  .tier {
    grid-row: auto;
    grid-template-rows: auto auto auto auto 1fr auto;
  }
  .tier,
  .quote {
    border-right: 0;
    padding-right: 0;
    padding-left: 0;
    border-bottom: 1px solid var(--rule);
  }
  .quote {
    min-height: 0;
  }
  .tier + .tier,
  .quote + .quote {
    padding-left: 0;
  }
  .tier:last-child,
  .quote:last-child {
    border-bottom: 0;
  }
  .tier__kicker {
    justify-content: flex-start;
  }

  .footer {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 18px;
  }
  .footer__links {
    justify-self: start;
    flex-wrap: wrap;
  }
  .fold__marks span {
    font-size: 10px;
    left: calc(var(--x) + 8px);
  }
}

@media (max-width: 600px) {
  /* The fold turns into a rail. The steps stack in one column with room on
     the left; the fold leaves the flow and is placed over the steps list by
     main.js (top and height), 36px wide, its wave running top to bottom with
     one station beside each step. The numbers are dropped: the station beside
     the step is the number. */
  .process {
    position: relative;
  }
  .steps {
    grid-template-columns: 1fr;
    row-gap: 28px;
    margin-top: clamp(32px, 8vw, 48px);
    padding-left: 56px;
  }
  .fold {
    position: absolute;
    left: var(--gutter);
    width: 36px;
    margin: 0;
  }
  .fold__svg {
    width: 36px;
    height: 100%;
  }
  .fold__marks span {
    display: none;
  }
  .fold__dot {
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
  }
  .schedule__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .schedule__desc {
    grid-column: 1;
  }
  .schedule__tile {
    order: -1;
    width: 44px;
    height: 44px;
  }
  .schedule__go {
    display: none;
  }
  .schedule:hover .schedule__row:not(:hover) {
    filter: none;
  }
  .faq__body {
    padding-right: 0;
  }
  .switch button {
    padding: 9px 12px;
    font-size: 13px;
  }
  .cta--large {
    font-size: 16px;
    padding: 10px 10px 10px 24px;
  }
  .cta--large .cta__chip {
    width: 44px;
    height: 44px;
  }
}

/* ---------- Static capture mode (?static=1) ---------- */

html.is-static .hero__tile,
html.is-static .hero__seg > span,
html.is-static .hero__tag {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
html.is-static .hero__tile--deca,
html.is-static .hero__tile--dark {
  clip-path: polygon(50% 0%, 79.4% 9.5%, 97.6% 34.5%, 97.6% 65.5%, 79.4% 90.5%, 50% 100%, 20.6% 90.5%, 2.4% 65.5%, 2.4% 34.5%, 20.6% 9.5%) !important;
}
html.is-static .fold__path {
  animation: none;
  stroke-dashoffset: 0;
}
html.is-static .fold__dot {
  animation: none;
  opacity: 1;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero__tile,
  .hero__seg > span,
  .hero__tag {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__tile--deca,
  .hero__tile--dark {
    clip-path: polygon(50% 0%, 79.4% 9.5%, 97.6% 34.5%, 97.6% 65.5%, 79.4% 90.5%, 50% 100%, 20.6% 90.5%, 2.4% 65.5%, 2.4% 34.5%, 20.6% 9.5%) !important;
  }
  .fold__path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .fold__dot {
    animation: none;
    opacity: 1;
  }
  .cta,
  .cta__chip,
  .cta__chip svg,
  .btn,
  .plate__frame,
  .menu,
  .menu__link,
  .menu__link span,
  .menu__link::before,
  .menu__aside,
  .nav__bar,
  .nav__burger,
  .switch__thumb {
    transition: none;
  }
  .schedule__row,
  .schedule__row::after,
  .schedule__tile,
  .schedule__glyph,
  .schedule__name,
  .schedule__desc,
  .schedule__go {
    transition: none;
  }
  .cta:hover .cta__chip {
    transform: none;
  }
}

/* =====================================================================
   SMOOTH SCROLL AND SCROLL MOTION
   Support styles for Lenis and assets/scroll.js. Everything here is either
   a Lenis requirement or a hook the script writes into; no element is
   hidden from CSS, so the page stays readable if the scripts never load.
   ===================================================================== */

/* ---- Lenis (from lenis/dist/lenis.css, vendored inline) ---- */

html.lenis,
html.lenis body {
  height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}
/* The hero field is a sandboxed iframe that never takes the pointer itself;
   main.js relays cursor position into it by postMessage, so letting Lenis
   disable pointer events on iframes costs nothing and keeps the wheel smooth. */
.lenis.lenis-smooth iframe {
  pointer-events: none;
}
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ---- Split headlines. scroll.js splits each sheet title into lines (and the
   close bill into words) with SplitText, and each piece rises from behind its
   own clip. The ink-to-grey fade cannot stay on the parent while its children
   move: a background-clip: text gradient is clipped to the glyphs at their
   layout position and ignores a child transform, so the parent would paint a
   settled ghost under the moving type. The parent is stripped and each piece
   paints the whole headline gradient, sized to the block (--sx-h) and offset by
   its own top (--sx-top), so the fade still runs once down the full stack. ---- */

.faded {
  --sx-fade: linear-gradient(180deg, var(--white) 0%, var(--white) 30%, #7a7a78 100%);
}
.sheet--paper .faded {
  --sx-fade: linear-gradient(180deg, #000 0%, #000 30%, #6a6a68 100%);
}
.faded:has(.sx-line),
.faded:has(.sx-word) {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.faded .sx-line,
.faded .sx-word {
  background-image: var(--sx-fade);
  background-size: 100% var(--sx-h, 100%);
  background-position: 0 var(--sx-top, 0);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sx-line,
.sx-word {
  will-change: transform;
}
/* Big Shoulders at 0.86 line height paints outside its line box. The clipping
   masks get room for that and hand it back with an equal negative margin so the
   stack keeps its rhythm. */
.sx-line-mask {
  padding: 0.1em 0 0.12em;
  margin: -0.1em 0 -0.12em;
}

/* ---- The stack (900px and up, applied by scroll.js as html.sx-stack). Each
   sheet is pinned as the next slides over it, so every sheet needs its own
   opaque ground and a shade that scroll.js darkens as the sheet is covered. ---- */

.sx-stack .hero,
.sx-stack .sheet:not(.sheet--paper) {
  background: var(--ink);
  position: relative;
}
/* The hero is held in place with sticky rather than a ScrollTrigger pin. A pin
   wraps the element in a spacer and re-wraps it on every refresh, which pulls
   the hero out of the DOM and restarts its entrance animations. Sticky touches
   nothing: the about sheet, one screen tall and painted above it, slides over
   it, and for the rest of the page the hero sits stuck beneath everything. */
.sx-stack .hero {
  position: sticky;
  top: 0;
}
/* A covering poster has to be at least one screen tall, or the one under it is
   never fully covered and stays visible above it once the two travel together.
   Two sheets cover a pinned one: the about sheet over the hero and the close
   over the FAQ. Both are made one screen tall with their copy centred, so the
   extra height splits above and below instead of leaving a blank half. */
.sx-stack .who {
  min-height: 100svh;
  align-content: center;
}
.sx-stack .close {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sx-shade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}

/* The magnetic pill is moved by GSAP; the CSS transform transition would
   fight it, so only the colour keeps a transition. */
.sx-magnet {
  transition: background-color 0.25s ease;
}

/* ---- With GSAP driving the process line by scroll position, the CSS draw
   must stand down or the two would run the same property at once. ---- */

html.has-gsap .fold.is-visible .fold__path,
html.has-gsap .fold.is-visible .fold__dot {
  animation: none;
}

/* ---- Scroll progress: one hairline in the accent color, pinned above
   everything, scaled from the left by scroll position. ---- */

.sx-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 200;
  pointer-events: none;
}

/* ---- Opt-outs. Captures and reduced motion never load any of this (scroll.js
   returns before it touches the page), but the progress rule and the mask are
   neutralised here too in case a start state is left behind by a reload. ---- */

html.is-static .sx-progress {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sx-progress {
    display: none;
  }
  .sx-shade {
    display: none;
  }
}