/* ═══════════════════════════════════════════════
   Jewel Labs
   Black ground, icy light, hairline rules.
   ═══════════════════════════════════════════════ */

:root {
  --bg: #000000;
  --panel: #07080A;
  --panel-2: #0C0E13;

  --text: #ECEFF3;
  --text-2: #98A3B1;
  --text-3: #7A8593;   /* 5.6:1 on black */

  --line: rgba(255, 255, 255, 0.085);
  --line-2: rgba(255, 255, 255, 0.16);

  --ice: #A9C9E8;      /* measurement only: the scan sweep and the caret */
  --accent: #C4C6CA;   /* chrome carries no tint */

  /* interactive boundaries need 3:1, decorative hairlines do not */
  --line-int: rgba(255, 255, 255, 0.36);

  --t-micro: 11px;
  --t-sm: 13px;
  --t-body: 15px;
  --t-lede: clamp(15px, 1.6vw, 17px);
  --t-title: 19px;

  --r-card: 4px;
  --pad-card: 28px;

  --maxw: 1140px;
  --wide: 1140px;
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --display: 'Geist', 'Inter', system-ui, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a, button, input, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(169, 201, 232, 0.18);
}
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; }
::selection { background: rgba(169, 201, 232, 0.22); color: #fff; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); }

:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 2px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; z-index: 300; background: #fff; color: #000; padding: 12px 18px; }
.skip:focus { left: 12px; top: 12px; }
#main:focus { outline: none; }
.mono { font-family: var(--mono); font-size: 0.92em; letter-spacing: 0.02em; }

/* ── layers ── */
#ambient {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
#stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 220; pointer-events: none; }
#veil { position: fixed; inset: 0; z-index: 210; background: #000; pointer-events: none; }

/* Pure #000 reads as a hole. A little fixed grain over the dust and under the
   type is what makes it read as a photographed black instead. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  transform: translateZ(0);
}
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }

.nav, main, .foot { position: relative; z-index: 2; }

/* a faint lattice, in the hero only, so it does not trail the whole scroll */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 120% 78% at 50% 42%, #000 0%, #000 34%, transparent 82%);
  mask-image: radial-gradient(ellipse 120% 78% at 50% 42%, #000 0%, #000 34%, transparent 82%);
}

/* ═════════ NAV ═════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px max(24px, calc((100% - var(--maxw)) / 2));
  padding-left: max(24px, calc((100% - var(--maxw)) / 2), env(safe-area-inset-left));
  padding-right: max(24px, calc((100% - var(--maxw)) / 2), env(safe-area-inset-right));
  border-bottom: 1px solid transparent;
  transition: background 260ms var(--ease), border-color 260ms var(--ease);
}
.nav.stuck {
  background: #000;
  border-bottom-color: var(--line);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.17em; color: var(--text);
}
.brand svg { color: var(--accent); flex-shrink: 0; }

/* ═════════ BUTTONS ═════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 450; letter-spacing: -0.005em;
  padding: 12px 24px; min-height: 44px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
  transition: background 170ms var(--ease), border-color 170ms var(--ease),
              color 170ms var(--ease), transform 170ms var(--ease);
}
.btn--solid { background: #fff; color: #000; }
.btn--solid:hover { background: #E6E8EB; }
.btn--line { border-color: var(--line-int); color: var(--text); }
.btn--line:hover { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.045); }
.btn--sm { padding: 8px 17px; min-height: 36px; font-size: 13px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 80ms; }
.btn:disabled { opacity: 0.45; cursor: default; }

/* ═════════ HERO ═════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 112px 24px 88px;
}
.wordmark {
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 10vw, 118px);
  line-height: 1;
  letter-spacing: -0.042em;
  color: #fff;
}
.js .wordmark { opacity: 0; transition: opacity 900ms var(--ease); }
body.ready .wordmark { opacity: 1; }

.tagline {
  margin-top: clamp(18px, 2.6vw, 28px);
  font-size: clamp(15px, 2vw, 22px);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--text-2);
}
/* The caret box is always in the line, so removing the caret at the end
   cannot shift a centred sentence sideways. Only its colour changes. */
.tagline::after {
  content: '';
  display: inline-block;
  width: 1px; height: 1.02em;
  margin-left: 7px; vertical-align: -0.15em;
  background: transparent;
}
.tagline.caret::after {
  background: var(--ice);
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tagline.caret::after { background: transparent; animation: none; }
}

.cta { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: clamp(30px, 4.2vw, 48px); }
.js #cta { opacity: 0; transition: opacity 700ms var(--ease) 200ms; }
body.ready #cta { opacity: 1; }

/* ═════════ BANDS ═════════ */
.band {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(64px, 9vw, 116px) 24px;
  border-top: 1px solid var(--line);
}
.band--wide { max-width: var(--wide); }
.band--end { padding-top: clamp(96px, 16vh, 190px); padding-bottom: clamp(72px, 10vw, 128px); }
.band__body { min-width: 0; }

/* Heading left, prose right, everything else across both. The h3x layout: it
   fills the band instead of leaving the right half of every section empty. */
@media (min-width: 900px) {
  .band__body {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    column-gap: 72px;
    align-items: start;
  }
  .band__head { grid-column: 1; }
  .band__lead { grid-column: 2; }
  .band__body > *:not(.band__head):not(.band__lead) { grid-column: 1 / -1; }
  .band__lead .lede { margin-top: 0; max-width: 60ch; }
  .band__lead .lede + .lede { margin-top: 20px; }
}
.band, .hero { scroll-margin-top: 88px; }

.h2 {
  text-wrap: balance;
  font-family: var(--display);
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 500; line-height: 1.08; letter-spacing: -0.035em;
  max-width: 22ch; color: #fff;
}
.h2 em { font-style: normal; font-weight: 400; color: var(--text-2); }
.lede {
  margin-top: 22px; max-width: 58ch;
  font-size: var(--t-lede); line-height: 1.62; color: var(--text-2);
}
.sub { margin-top: 14px; max-width: 58ch; font-size: 15px; line-height: 1.6; color: var(--text-3); }

/* ═════════ SCAN BAY ═════════ */
.bay {
  contain: content;
  margin-top: 40px;
  display: grid; grid-template-columns: 1.2fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  overflow: hidden;
}
.bay__view { position: relative; min-height: 400px; }
.bay__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bay__tag {
  position: absolute; left: 22px; bottom: 20px;
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.bay__read { padding: var(--pad-card); border-left: 1px solid var(--line); }
.bay__k {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 18px;
}
.readout { list-style: none; }
.readout li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.readout li:last-child { border-bottom: 0; }
.readout span { color: var(--text-3); }
.readout b { font-weight: 450; color: var(--text); font-variant-numeric: tabular-nums; }
/* the value settles in once, and then stays put */
.js .readout b { opacity: 0; transition: opacity 420ms var(--ease); }
.js .readout b.set { opacity: 1; }
.bay__foot { margin-top: 20px; font-size: 12px; color: var(--text-3); }

/* ═════════ CAL ═════════ */
.cal {
  display: block;
  margin-top: 38px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--panel); overflow: hidden;
}

/* ═════════ WAITLIST ═════════ */
.wl { display: flex; gap: 10px; margin-top: 28px; max-width: 480px; flex-wrap: wrap; }
.wl__in {
  flex: 1 1 240px; min-height: 44px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line-int);
  color: var(--text); font-size: 16px;
  transition: border-color 170ms var(--ease);
}
.wl__in::placeholder { color: var(--text-3); }
.wl__in:hover { border-color: rgba(255,255,255,0.3); }
.wl__in.bad { border-color: #E0757C; }
.wl__msg { margin-top: 14px; font-size: 14px; color: var(--ice); min-height: 21px; }
.wl__msg.bad { color: #E0757C; }

/* ═════════ FOOTER ═════════ */
.foot { border-top: 1px solid var(--line); }
.foot__row {
  max-width: var(--maxw); margin: 0 auto;
  padding: 28px 24px calc(48px + env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-3);
}
.foot__brand { color: var(--text-2); }
.foot__nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot__nav a { transition: color 170ms var(--ease); }
.foot__nav a:hover { color: var(--text); }

/* ═════════ REVEAL ═════════ */
.rv { opacity: 0; transform: translateY(14px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}

/* ═════════ LEGAL ═════════ */
.legal { max-width: 700px; margin: 0 auto; padding: 140px 24px 84px; position: relative; z-index: 2; }
.legal h1 { font-family: var(--display); font-size: clamp(28px, 4vw, 38px); font-weight: 400; letter-spacing: -0.03em; margin-bottom: 10px; color: #fff; }
.legal__date { font-size: 13px; color: var(--text-3); margin-bottom: 40px; }
.legal h2 {
  font-family: var(--display); font-size: 19px; font-weight: 400; letter-spacing: -0.015em;
  margin: 36px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); color: #fff;
}
.legal p { font-size: var(--t-body); line-height: 1.68; color: var(--text-2); }
.legal p + p { margin-top: 12px; }
.legal a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; }

/* ═════════ RESPONSIVE ═════════ */
@media (max-width: 900px) {
  .bay { grid-template-columns: 1fr; }
  .bay__view { min-height: 300px; }
  .bay__read { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  }
@media (max-width: 620px) {
  .band { padding-left: 20px; padding-right: 20px; }
  .h2 { max-width: none; }
  .cal iframe { height: 640px; }
}

/* ═════════ REDUCED MOTION ═════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .wordmark, #cta, .rv, .readout b { opacity: 1 !important; transform: none !important; }
  #veil, #stage { display: none !important; }
  .hero__stone { visibility: visible !important; }
}

/* ═════════ BOOKING GATE ═════════ */
.cal iframe { width: 100%; height: 720px; border: 0; display: block; }

/* ═════════ DOCUMENTS ═════════
   Printed on paper, laid on the page. A real report is a sheet with rules and
   a signature, not a grid of dark boxes. */
.sheet {
  contain: content;
  position: relative;
  margin-top: 40px;
  background: #F7F6F2;
  color: #16191D;
  padding: 44px 48px 40px;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 26px 60px rgba(0,0,0,0.6);
  overflow: hidden;
}
.sheet__top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 28px;
  padding-bottom: 18px; margin-bottom: 26px;
  border-bottom: 2px solid #16191D;
}
.sheet__org {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: #5B6470; margin-bottom: 8px;
}
.sheet__kind {
  font-family: var(--display); font-size: 25px; font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.1;
}
.sheet__basis { margin-top: 7px; font-size: var(--t-sm); color: #5B6470; }
.sheet__meta { text-align: right; font-size: var(--t-sm); color: #5B6470; line-height: 1.7; white-space: nowrap; }
.sheet__meta p:first-child { font-variant-numeric: tabular-nums; color: #16191D; }

.sheet__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.rows { margin: 0; }
.rows > div {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 0;
}
.rows dt { font-size: 13.5px; color: #4A535E; white-space: nowrap; }
.rows i {
  flex: 1 1 auto; height: 0;
  border-bottom: 1px dotted rgba(22,25,29,0.32);
  transform: translateY(-3px);
}
.rows dd {
  margin: 0; font-size: 14px; font-weight: 500; color: #16191D;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.sheet__dec {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(22,25,29,0.16);
  font-size: 14px; line-height: 1.72; color: #2C333B; max-width: 68ch;
}
.sheet__note {
  margin-top: 18px; font-size: var(--t-sm); line-height: 1.7; color: #5B6470; max-width: 72ch;
}
.sheet__foot {
  margin-top: 34px; padding-top: 20px; padding-bottom: 58px;
  border-top: 1px solid rgba(22,25,29,0.16);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.sheet__sig {
  font-size: 17px; padding-bottom: 7px;
  border-bottom: 1px solid #16191D; display: inline-block; min-width: 240px;
}
.sheet__cap { margin-top: 9px; font-size: 12px; color: #5B6470; }
.seal {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1.5px solid rgba(22,25,29,0.42);
  display: grid; place-items: center; flex-shrink: 0;
}
.seal span {
  font-size: 15px; font-weight: 500; letter-spacing: 0.08em; color: #2C333B;
}
.sheet__stamp {
  position: absolute; bottom: 34px; left: 48px;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(180, 60, 60, 0.5);
  border: 1px solid rgba(180, 60, 60, 0.32); border-radius: 2px;
  padding: 5px 11px; transform: rotate(-6deg);
  pointer-events: none;
}

/* ═════════ HERO STONE ═════════ */
.hero__stone {
  width: min(420px, 66vw);
  height: clamp(180px, 26vh, 280px);
  margin-bottom: clamp(2px, 1.4vh, 18px);
}
.hero__stone canvas { width: 100%; height: 100%; }
/* hidden until the intro hands over, so the two canvases never double expose */
.js .hero__stone { visibility: hidden; }
.js body.stone-home .hero__stone,
body.stone-home .hero__stone { visibility: visible; }

.kicker {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}

@media (max-width: 720px) {
  .sheet { padding: 32px 24px 30px; }
  .sheet__cols { grid-template-columns: 1fr; gap: 0; }
  .sheet__top { flex-direction: column; gap: 14px; }
  .sheet__meta { text-align: left; white-space: normal; }
  .rows dt { white-space: normal; }
  .rows > div { flex-wrap: wrap; }
  .sheet__stamp { bottom: 22px; left: 24px; }
  .sheet__sig { min-width: 0; }
  .rows dd { white-space: normal; }
}

.cal__alt { margin-top: 16px; font-size: var(--t-sm); }
.cal__alt a { color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; }
.cal__alt a:hover { color: var(--text); }

/* ═════════ CHAIN ═════════ */

/* ═════════ FIGURES ═════════ */
/* A band, not a snapshot. Cropped wide, held to a fixed height, graded down so
   the blacks sit on the page black, and the left and right edges masked away so
   the photograph melts into the page instead of ending on a hard rectangle. */
.figure { margin: 38px 0 0; overflow: hidden; }
.figure img, .figure__v {
  display: block;
  width: 100%;
  /* the box carries the media's own shape and the fit is contain, so nothing
     is ever sliced. Any letterbox is black against a black page. */
  height: auto;
  aspect-ratio: 1600 / 659;
  max-height: 400px;
  object-fit: contain;
  object-position: center;
  background: var(--bg);
  filter: contrast(1.10) brightness(0.66) saturate(0.80);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 15%, #000 78%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 15%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  transform: scale(1.07);
}
/* A slow drift across the frame, the way a cut of footage moves rather than a
   photograph sitting still. Transform only, and it runs only while the band is
   on screen, so it costs nothing when it is not being looked at. */
@keyframes drift {
  0%   { transform: scale(1.07) translate3d(-1.4%, 0, 0); }
  50%  { transform: scale(1.13) translate3d(1.4%, 0, 0); }
  100% { transform: scale(1.07) translate3d(-1.4%, 0, 0); }
}
.figure.in img { animation: drift 30s ease-in-out infinite; }
/* the clip carries its own move, so it must not also drift.
   contain, not cover: the clip is 12/5 only at one width, and cover was
   slicing the top and bottom off the stone. Its own black ground is
   indistinguishable from the page, so letterboxing costs nothing. */
.figure__v, .figure.in .figure__v { animation: none; transform: none; }
.figure__v {
  object-fit: contain;
  background: var(--bg);
  aspect-ratio: 1400 / 552;
  max-height: 400px;
}
@media (prefers-reduced-motion: reduce) {
  .figure img, .figure.in img, .figure__v { transform: none; animation: none; }
}
.figure figcaption {
  margin-top: 16px;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--text-3);
  max-width: 66ch;
}


/* ═════════ SPECIFICATIONS ═════════
   Closed until asked for. Native details/summary, so it works with no JS,
   keyboard opens it, and there is nothing to lag. */
.spec { margin-top: 28px; border-top: 1px solid var(--line); }
.spec > summary {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
  transition: color 170ms var(--ease);
}
.spec > summary::-webkit-details-marker { display: none; }
.spec > summary:hover { color: var(--text); }
.spec__arrow {
  width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(-45deg); transform-origin: 60% 60%;
  transition: transform 240ms var(--ease);
}
.spec[open] > summary .spec__arrow { transform: rotate(45deg); }
.spec__body { padding-bottom: 30px; }
.spec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.spec__k {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px;
}
.spec__k--wide { margin-top: 34px; }
.spec__rows { margin: 0; }
/* label left, value right, same size and weight. Alignment carries it. */
.spec__rows > div {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.spec__rows dt { font-size: 14px; color: var(--text-3); }
.spec__rows dd {
  margin: 0; font-size: 14px; color: var(--text-2);
  text-align: right; font-variant-numeric: tabular-nums;
}
.spec__foot {
  margin-top: 22px; font-size: var(--t-sm); line-height: 1.7;
  color: var(--text-3); max-width: 74ch;
}

/* the mark that signs the statement */
.mark {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  color: #2C333B;
}
.mark span {
  font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
}
.sheet__dec--run { margin-top: 14px; padding-top: 0; border-top: 0; }

@media (max-width: 860px) {
  .spec__grid { grid-template-columns: 1fr; gap: 0; }
  .spec__k--wide { margin-top: 26px; }
}
@media (max-width: 720px) {
  .mark span { display: none; }
}

/* ═════════ FLOW ═════════
   The whole business as four marks on one line. A connecting hairline draws
   itself left to right as the section arrives, then each step lifts in behind
   it. Transform and opacity only, so it runs on the compositor. */
.flow {
  list-style: none;
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 28px;
  position: relative;
}
/* the rail the steps sit on */
/* Drawn and visible by default. Only the reveal script, which alone adds .rv,
   is allowed to hide them, so a script that never runs leaves the diagram on
   the page rather than four invisible steps. */
.flow::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 17px;
  height: 1px;
  background: var(--line-2);
  transform-origin: left center;
}
.flow.rv::before { transform: scaleX(0); }
.flow.rv.in::before { transform: scaleX(1); transition: transform 780ms var(--ease) 60ms; }
.flow--scroll::before { transform: scaleX(var(--p, 0)); }

.flow__step { position: relative; padding-top: 42px; }
.flow.rv .flow__step { opacity: 0; transform: translateY(12px); }
.flow.rv.in .flow__step {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.flow.rv.in .flow__step:nth-child(1) { transition-delay: 180ms; }
.flow.rv.in .flow__step:nth-child(2) { transition-delay: 280ms; }
.flow.rv.in .flow__step:nth-child(3) { transition-delay: 380ms; }
.flow.rv.in .flow__step:nth-child(4) { transition-delay: 480ms; }

/* the mark on the rail, its black fill hiding the line beneath it */
/* a mark on the rail, nothing more. An icon per step read as clip art. */
.flow__dot {
  position: absolute; top: 11px; left: 0;
  width: 13px; height: 13px;
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--bg);
}
.flow__dot::after {
  content: ''; position: absolute; inset: 4px;
  background: var(--text-2); border-radius: 50%;
}
.flow__step:first-child .flow__dot::after { background: #fff; }

.flow__n {
  display: block;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.14em;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.flow__t {
  display: block; margin-top: 9px;
  font-family: var(--display); font-size: 20px; font-weight: 400;
  letter-spacing: -0.02em; color: #fff;
}
.flow__b {
  display: block; margin-top: 10px;
  font-size: 14px; line-height: 1.56; color: var(--text-2);
  max-width: 26ch;
}

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  /* the rail turns vertical when the steps stack */
  .flow::before {
    left: 6px; right: auto; top: 0; bottom: 0;
    width: 1px; height: auto;
    transform-origin: top center;
  }
  .flow.rv::before { transform: scaleY(0); }
  .flow.rv.in::before { transform: scaleY(1); transition: transform 780ms var(--ease) 60ms; }
  .flow__step { padding: 0 0 34px 40px; }
  .flow__step:last-child { padding-bottom: 0; }
  .flow__dot { top: 5px; }
  .flow__b { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .flow::before, .flow.rv::before, .flow.rv.in::before { transform: none; transition: none; }
  .flow__step, .flow.rv .flow__step { opacity: 1; transform: none; transition: none; }
}

/* ═════════ FOOTER MARK ═════════ */
.foot__brand { display: inline-flex; align-items: center; gap: 10px; }
.foot__brand svg { color: var(--accent); flex-shrink: 0; }
.foot__brand:hover { color: #fff; }

/* ═════════ ONWARD ═════════ */
.onward {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  /* it arrives on its own beat, a scroll after the photograph */
  margin-top: clamp(80px, 14vh, 160px);
  padding: 26px 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
}
.onward:hover { border-color: var(--line-2); background: rgba(255,255,255,0.03); }
.onward__x { display: flex; flex-direction: column; gap: 7px; }
.onward__k {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3);
}
.onward__t { font-size: var(--t-body); color: var(--text); }
.onward__k { white-space: nowrap; }
/* a real target, so it reads as something to click rather than a caption */
.onward__go {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-int);
  border-radius: 50%;
  color: var(--text-2);
  transition: transform 260ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.onward:hover .onward__go,
.onward:focus-visible .onward__go {
  transform: translate3d(3px, -3px, 0);
  border-color: #fff; color: #fff;
}
/* one nudge when it arrives, so the affordance is noticed. It does not loop. */
.onward.rv.in .onward__go { animation: nudge 1500ms var(--ease) 900ms 2; }
@keyframes nudge {
  0%, 100% { transform: none; }
  45%      { transform: translate3d(4px, -4px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .onward.rv.in .onward__go { animation: none; }
}

/* ═════════ STATE ═════════ */
.state { display: flex; flex-wrap: wrap; margin-top: 34px; border-top: 1px solid var(--line); }
.state > div { display: flex; align-items: baseline; gap: 12px; padding: 16px 34px 0 0; }
.state dt {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3);
}
.state dd { margin: 0; font-size: var(--t-sm); color: var(--text); }

/* the parent site, last in the row so it is the rightmost thing on the page */
.foot__home { color: var(--text); }
.foot__home:hover { color: #fff; }

/* ═════════ PINNED FLOW ═════════
   The section holds still while the four steps arrive one per scroll, left to
   right, and the rail draws itself at exactly the rate you scroll. Everything
   is driven from one number, so there is no timeline to fall out of step with.

   Fail-open: the dimming only exists under .flow--scroll, which nothing but the
   scroll script adds. No script, no pin, and all four steps simply sit there. */
.pin { position: relative; }

@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .band--pin { padding-top: 0; padding-bottom: 0; }
  .pin { height: 200vh; }
  .pin__stage {
    position: sticky; top: 0;
    transform: translateZ(0);
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 120px 0 80px;
  }
  .flow--scroll .flow__step {
    opacity: 0.13;
    transform: translateY(10px);
    transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  }
  .flow--scroll .flow__step.on { opacity: 1; transform: none; }
  /* the rail is driven straight off scroll position, so it must not ease */
  .flow--scroll::before { transition: none; }
  .flow--scroll .flow__dot::after {
    background: var(--text-3);
    transition: background 700ms var(--ease);
  }
  .flow--scroll .flow__step.on .flow__dot::after { background: #fff; }
}

/* the last thing before the calendar arrives on its own, slowly */
.onward.rv { opacity: 0; transform: translateY(18px); }
.onward.rv.in {
  opacity: 1; transform: none;
  transition: opacity 1100ms var(--ease) 120ms, transform 1100ms var(--ease) 120ms;
}

/* the hardware render is already dark and matte, so the band grade that was
   tuned for a bright photograph crushes it. It keeps its own. */
.figure--hw img {
  filter: contrast(1.04) brightness(1.02) saturate(0.94);
  max-height: 460px;
}