/* ============================================================
   Ctg marketing — Pass / Window / Floor
   Committed colour. Two families. Asymmetric long-form.
   ============================================================ */

/* -------- Fonts (self-hosted, .woff2 variable) -------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  src:
    url('/assets/fonts/bricolage-grotesque.woff2') format('woff2-variations'),
    url('/assets/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src:
    url('/assets/fonts/hanken-grotesk.woff2') format('woff2-variations'),
    url('/assets/fonts/hanken-grotesk.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* -------- Tokens --------------------------------------------- */

:root {
  /* Tannin (deep brewed-leaf black) */
  --tannin-100: oklch(0.2 0.024 35);
  --tannin-90: oklch(0.27 0.026 35);
  --tannin-80: oklch(0.34 0.028 35);

  /* Aged brass (load-bearing accent) */
  --brass-100: oklch(0.74 0.1 82);
  --brass-80: oklch(0.66 0.092 80);
  --brass-60: oklch(0.55 0.08 78);

  /* Linen (inversion surface) */
  --linen-100: oklch(0.94 0.012 80);
  --linen-90: oklch(0.88 0.014 80);

  /* Type colours */
  --bone: oklch(0.96 0.008 75);
  --bone-dim: oklch(0.85 0.01 75);
  --ink: oklch(0.16 0.018 35);
  --ink-dim: oklch(0.36 0.015 35);

  /* Signals */
  --signal-green: oklch(0.62 0.1 145);
  --signal-amber: oklch(0.74 0.13 75);
  --signal-red: oklch(0.58 0.16 25);

  /* Type families */
  --font-display: 'Bricolage Grotesque', 'Iowan Old Style', 'Charter', 'Cambria', 'Georgia', serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', 'Helvetica', 'Arial', system-ui, sans-serif;

  /* Type scale (modular, 1.333) */
  --t-xs: 0.75rem; /* 12 */
  --t-sm: 0.875rem; /* 14 */
  --t-base: 1rem; /* 16 */
  --t-md: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  --t-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --t-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  --t-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --t-3xl: clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem);
  --t-4xl: clamp(3.3rem, 2rem + 5vw, 6rem);
  --t-5xl: clamp(4rem, 2.2rem + 7vw, 7.6rem);

  /* Spacing rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-mid: 360ms;
  --dur-slow: 720ms;

  /* Layout */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max-w: 1440px;
}

/* -------- Reset --------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--tannin-100);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  font-feature-settings: 'kern', 'liga', 'calt';
  /* Catch any scale-induced horizontal bleed (prose emphasis effect)
     without establishing a containing block — keeps fixed/sticky
     positioning intact. `clip` is the modern safe-cousin of
     overflow:hidden. */
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p {
  margin: 0 0 var(--space-4);
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--brass-100);
  color: var(--tannin-100);
}

.skip-link {
  position: absolute;
  inset: 0 auto auto 0;
  transform: translateY(-200%);
  padding: 0.75rem 1rem;
  background: var(--brass-100);
  color: var(--tannin-100);
  font-weight: 700;
  z-index: 999;
}
.skip-link:focus {
  transform: none;
}

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

/* -------- Header -------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 0.6rem;
  column-gap: 1rem;
  padding: 1.1rem var(--gutter);
  background: color-mix(in oklch, var(--tannin-100) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid color-mix(in oklch, var(--brass-100) 14%, transparent);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--bone);
  letter-spacing: 0.02em;
}
.wordmark__mark {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--brass-100);
}
.wordmark__text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
}
.site-nav a:not(.cta) {
  color: var(--bone-dim);
  position: relative;
  padding: 0.4rem 0;
}
.site-nav a:not(.cta):hover {
  color: var(--bone);
}
.site-nav a:not(.cta)::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--brass-100);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.site-nav a:not(.cta):hover::after {
  transform: scaleX(1);
}

/* Mobile: nav anchors wrap to a second row centred under the
   wordmark + CTA. Three short links fit comfortably across 375px,
   no hamburger required for a 3-item menu. */
@media (max-width: 720px) {
  .site-header {
    padding-block: 0.8rem;
  }
  .wordmark {
    order: 1;
  }
  .site-header__cta {
    order: 2;
  }
  .site-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 0.4rem 1.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid color-mix(in oklch, var(--brass-100) 12%, transparent);
    flex-wrap: wrap;
  }
  .site-nav a:not(.cta) {
    padding: 0.55rem 0;
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* -------- CTAs ---------------------------------------------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.4rem;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 2px;
  transition:
    background var(--dur-fast) var(--ease-out-expo),
    color var(--dur-fast) var(--ease-out-expo),
    transform var(--dur-fast) var(--ease-out-expo);
  white-space: nowrap;
}

.cta--brass {
  background: var(--brass-100);
  color: var(--tannin-100);
}
.cta--brass:hover {
  background: var(--brass-80);
  transform: translateY(-1px);
}

.cta--ink {
  background: var(--ink);
  color: var(--linen-100);
}
.cta--ink:hover {
  background: var(--tannin-90);
  transform: translateY(-1px);
}

.cta--ghost {
  background: transparent;
  color: var(--bone);
  border: 1px solid color-mix(in oklch, var(--brass-100) 50%, transparent);
}
.cta--ghost:hover {
  border-color: var(--brass-100);
  color: var(--brass-100);
}

.cta--quiet {
  background: transparent;
  color: var(--bone-dim);
  padding: 0.8rem 0.5rem;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
  font-size: var(--t-base);
}
.cta--quiet::after {
  content: ' →';
  margin-left: 0.4em;
  color: var(--brass-100);
  transition: transform var(--dur-fast) var(--ease-out-expo);
  display: inline-block;
}
.cta--quiet:hover::after {
  transform: translateX(4px);
}
.cta--quiet:hover {
  color: var(--bone);
}

.cta--block {
  width: 100%;
}

/* -------- Type primitives ----------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-4xl);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-5);
  color: var(--bone);
}
.display em {
  font-style: italic;
  color: var(--brass-100);
}
.display--ink {
  color: var(--ink);
}
.display--ink em {
  color: var(--brass-60);
}
.display--small {
  font-size: var(--t-2xl);
  margin-bottom: var(--space-3);
}

.eyebrow,
.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-100);
  margin: 0 0 var(--space-4);
}
.kicker--ink {
  color: var(--brass-60);
}

.lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--bone-dim);
  max-width: 42ch;
  margin: 0 0 var(--space-6);
}

.prose {
  max-width: 56ch;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--bone-dim);
  margin-bottom: var(--space-4);
}
.prose--wide {
  max-width: 70ch;
}

/* Scroll-driven emphasis: prose grows to full prominence as it
   reaches the middle of the viewport, dims as you read past.
   `--p-emph` (0..1) is written by script.js per rAF; the linear
   transition smooths between samples so the motion never jitters. */
@media (prefers-reduced-motion: no-preference) {
  .room .prose,
  .pilot .prose--wide {
    --p-emph: 0;
    transform: scale(calc(1 + 0.13 * var(--p-emph)));
    transform-origin: left center;
    opacity: calc(0.3 + 0.7 * var(--p-emph));
    transition:
      transform 140ms linear,
      opacity 140ms linear;
    will-change: transform, opacity;
  }
}

/* Narrow viewports: prose fills the full column, so a 13% scale
   would push the right edge past the page. Drop the scale to a
   subtle 4% (opacity does the heavy lifting on mobile). */
@media (max-width: 880px) and (prefers-reduced-motion: no-preference) {
  .room .prose,
  .pilot .prose--wide {
    transform: scale(calc(1 + 0.04 * var(--p-emph)));
  }
}

/* Drop cap on the first body paragraph of each room — pulls the
   eye in, signals "settle in and read." One per section, not every
   paragraph (over-decoration). Bricolage display, brass on tannin,
   brass-60 on linen for contrast. */
.room__body .prose:first-of-type::first-letter,
.pilot .prose--wide::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 4em;
  line-height: 0.86;
  float: left;
  color: var(--brass-100);
  margin: 0.06em 0.1em 0 -0.04em;
  padding: 0;
}
.room--window .room__body .prose:first-of-type::first-letter {
  color: var(--brass-60);
}

.footnote {
  font-size: var(--t-sm);
  color: var(--bone-dim);
  font-style: italic;
}

/* Brand hashtag — quiet brass-toned tag, used inline in copy or as
   a standalone signature. Not a clickable link (no social account
   wired yet); becomes one when we have an Instagram + X handle. */
.hashtag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05em 0.5em;
  font-family: var(--font-body);
  font-size: 0.78em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brass-100);
  background: color-mix(in oklch, var(--brass-100) 14%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}

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

.hero {
  position: relative;
  min-height: clamp(600px, 88vh, 920px);
  padding: clamp(3rem, 7vw, 7rem) var(--gutter) clamp(3rem, 6vw, 6rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pull the bar's compositional anchor to the right so the brass
     pendants and bottle wall sit in the visible (clear) right zone,
     and the bar counter / stools sit under the gradient where text
     overlays. */
  object-position: 70% center;
  filter: brightness(0.95) saturate(0.92);
}

.hero::before {
  /* Tannin veil — full strength on the left where text reads,
     fading to clear on the right where the bar interior breathes.
     User-requested treatment. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    var(--tannin-100) 0%,
    var(--tannin-100) 28%,
    color-mix(in oklch, var(--tannin-100) 80%, transparent) 50%,
    color-mix(in oklch, var(--tannin-100) 35%, transparent) 72%,
    transparent 100%
  );
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 56ch;
  width: 100%;
}
.hero__copy .display {
  font-size: var(--t-5xl);
  margin-bottom: var(--space-5);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

@media (max-width: 880px) {
  .hero {
    min-height: clamp(520px, 90vh, 760px);
  }
  .hero::before {
    /* On narrow screens the text fills the column, so the gradient
       becomes vertical (dark from the top, photo peeking at the
       bottom-right). */
    background: linear-gradient(
      to bottom,
      var(--tannin-100) 0%,
      var(--tannin-100) 45%,
      color-mix(in oklch, var(--tannin-100) 75%, transparent) 70%,
      color-mix(in oklch, var(--tannin-100) 35%, transparent) 90%,
      transparent 100%
    );
  }
  .hero__bg img {
    object-position: 60% bottom;
  }
}

/* -------- Venue strip (atmospheric break) ------------------ */

.venue-strip {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 60vh;
  overflow: hidden;
  border-block: 1px solid color-mix(in oklch, var(--brass-100) 14%, transparent);
}
.venue-strip picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.venue-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.66) saturate(0.88) contrast(1.04);
}
.venue-strip__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
  margin: 0;
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--tannin-100) 90%, transparent) 0%,
    color-mix(in oklch, var(--tannin-100) 50%, transparent) 60%,
    transparent 100%
  );
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  line-height: 1.15;
  color: var(--bone);
  max-width: 50ch;
}
@media (max-width: 720px) {
  .venue-strip {
    aspect-ratio: 4 / 3;
    max-height: 70vh;
  }
}

/* -------- Room sections ------------------------------------- */

.room {
  padding: var(--space-9) var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: var(--space-6);
}
.room__lead {
  grid-column: 1 / 2;
}
.room__body {
  grid-column: 2 / 3;
  align-self: end;
}
.room__demo {
  grid-column: 1 / -1;
  margin-top: var(--space-6);
}

.room--floor {
  background: var(--tannin-100);
  border-top: 1px solid color-mix(in oklch, var(--brass-100) 14%, transparent);
}
.room--floor + .room--floor {
  border-top: 1px solid color-mix(in oklch, var(--brass-100) 14%, transparent);
}

/* The linen drench (problem 2 + pricing) */
.room--window {
  background: var(--linen-100);
  color: var(--ink);
  max-width: none;
  padding-inline: var(--gutter);
}
.room--window .display {
  color: var(--ink);
}
.room--window .display em {
  color: var(--brass-60);
}
.room--window .kicker {
  color: var(--brass-60);
}
.room--window .prose {
  color: var(--ink-dim);
}

@media (max-width: 880px) {
  .room {
    grid-template-columns: 1fr;
    padding-block: var(--space-8);
  }
  .room__lead,
  .room__body,
  .room__demo {
    grid-column: 1 / -1;
  }
}

/* -------- Device demos (problem 1) -------------------------- */

.room__demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

.device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.device__bezel {
  width: min(320px, 100%);
  background: var(--linen-100);
  color: var(--ink);
  border-radius: 28px;
  padding: 1.6rem 1.4rem 2rem;
  border: 1px solid color-mix(in oklch, var(--brass-100) 30%, transparent);
  box-shadow:
    0 1px 0 0 color-mix(in oklch, var(--brass-100) 24%, transparent) inset,
    0 30px 60px -30px color-mix(in oklch, var(--tannin-100) 80%, transparent);
}
.device__bezel--dim {
  background: var(--tannin-90);
  color: var(--bone);
  border-color: color-mix(in oklch, var(--brass-100) 22%, transparent);
}

.device__head {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 0.1rem;
}
.device__head--quiet {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--bone) 70%, var(--brass-100));
}
.device__sub {
  font-size: var(--t-xs);
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.tile {
  aspect-ratio: 1.05 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 0.4rem;
  border: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  border-radius: 8px;
  font-size: var(--t-xs);
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: color-mix(in oklch, var(--linen-100) 80%, white);
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.tile svg {
  color: color-mix(in oklch, var(--ink) 60%, var(--brass-100));
}
.tile--active {
  background: var(--brass-100);
  color: var(--tannin-100);
  border-color: var(--brass-80);
  transform: translateY(-2px);
}
.tile--active svg {
  color: var(--tannin-100);
}

.device__foot {
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--ink-dim);
}
.device__foot--quiet {
  color: var(--bone-dim);
}

.device__label {
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* Waiter card stack */
.card-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}
.ticket-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border-left: 0;
  border-radius: 4px;
  background: color-mix(in oklch, var(--tannin-80) 80%, var(--tannin-100));
  font-size: var(--t-sm);
}
.ticket-card__age {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  color: var(--brass-100);
}
.ticket-card__type {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ticket-card__where {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.ticket-card--urgent {
  background: color-mix(in oklch, var(--signal-red) 22%, var(--tannin-90));
  outline: 1px solid color-mix(in oklch, var(--signal-red) 50%, transparent);
}
.ticket-card--urgent .ticket-card__age {
  color: oklch(0.85 0.13 30);
}
.ticket-card--warming {
  background: color-mix(in oklch, var(--signal-amber) 16%, var(--tannin-90));
}
.ticket-card--ack {
  background: color-mix(in oklch, var(--signal-green) 14%, var(--tannin-90));
  opacity: 0.8;
}

@media (max-width: 720px) {
  .room__demo {
    grid-template-columns: 1fr;
  }
}

/* -------- Heatmap (problem 2) ------------------------------- */

.heatmap {
  margin: var(--space-7) 0 0;
  padding: clamp(1rem, 2vw, 2rem);
  background: color-mix(in oklch, var(--linen-90) 60%, var(--linen-100));
  border: 1px solid color-mix(in oklch, var(--brass-60) 30%, transparent);
  grid-column: 1 / -1;
}
.heatmap__title {
  font-family: var(--font-display);
  font-size: var(--t-md);
  margin: 0 0 var(--space-4);
  color: var(--ink);
}
.heatmap__grid {
  display: grid;
  gap: 4px;
}
.heatmap__row {
  display: grid;
  grid-template-columns: 3.5rem repeat(12, 1fr);
  gap: 4px;
  align-items: center;
}
.heatmap__row-label {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cell {
  display: inline-block;
  aspect-ratio: 1.6 / 1;
  border-radius: 1px;
  background: color-mix(in oklch, var(--linen-100) 50%, var(--linen-90));
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--dur-mid) var(--ease-out-expo);
}
.heatmap.is-revealed .cell {
  transform: scale(1);
}
.cell--g {
  background: color-mix(in oklch, var(--signal-green) 65%, var(--linen-100));
}
.cell--a {
  background: color-mix(in oklch, var(--signal-amber) 80%, var(--linen-100));
}
.cell--r {
  background: var(--signal-red);
}

.heatmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-top: var(--space-4);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.heatmap__legend .cell {
  width: 1rem;
  aspect-ratio: 1;
  transform: scale(1);
  margin-right: 0.4rem;
  vertical-align: middle;
}
.heatmap__hours {
  margin-left: auto;
}
.heatmap__note {
  margin: var(--space-4) 0 0;
  font-size: var(--t-xs);
  font-style: italic;
  color: var(--ink-dim);
}

/* -------- Coaching (problem 3) ------------------------------ */

.coaching {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: var(--space-7);
}
.coaching__card {
  position: relative;
  padding: clamp(1.4rem, 2vw, 2rem);
  background: var(--tannin-90);
  border: 1px solid color-mix(in oklch, var(--brass-100) 18%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 220px;
}
.coaching__card::before {
  /* Brass corner mark — a triangular tab on the top-left, not a side-stripe. */
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--brass-100) 50%, transparent 50.1%);
  transform-origin: top left;
}

/* Staggered reveal as the coaching list enters view. One-shot per
   page load (re-animating on each scroll-back would feel cheap).
   `--card-i` sets each card's position in the queue; entrance fires
   on the parent's `.is-revealed` class. */
@media (prefers-reduced-motion: no-preference) {
  .coaching__card {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 700ms var(--ease-out-expo),
      transform 700ms var(--ease-out-expo);
    transition-delay: calc(var(--card-i, 0) * 130ms);
  }
  .coaching__card::before {
    transform: scale(0) rotate(-12deg);
    transition: transform 500ms var(--ease-out-expo);
    transition-delay: calc(var(--card-i, 0) * 130ms + 320ms);
  }
  .coaching.is-revealed .coaching__card {
    opacity: 1;
    transform: translateY(0);
  }
  .coaching.is-revealed .coaching__card::before {
    transform: scale(1) rotate(0);
  }
  .coaching__card:nth-child(1) {
    --card-i: 0;
  }
  .coaching__card:nth-child(2) {
    --card-i: 1;
  }
  .coaching__card:nth-child(3) {
    --card-i: 2;
  }
}
.coaching__priority {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-100);
  margin: 0;
}
.coaching__finding {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.25;
  color: var(--bone);
  margin: 0;
}
.coaching__finding strong {
  color: var(--brass-100);
  font-weight: 400;
}
.coaching__why {
  margin: auto 0 0;
  font-size: var(--t-sm);
  color: var(--bone-dim);
  font-style: italic;
}

/* -------- Pricing (linen drench) ---------------------------- */

.price {
  background: var(--linen-100);
  color: var(--ink);
  padding: var(--space-9) var(--gutter);
  text-align: center;
}
.price > .kicker {
  color: var(--brass-60);
}
.price__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 980px;
  margin: var(--space-7) auto var(--space-6);
  text-align: left;
}

.price__card {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: color-mix(in oklch, var(--linen-100) 90%, white);
  border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.price__card--launch {
  background: var(--ink);
  color: var(--linen-100);
  border-color: var(--ink);
}
.price__card--launch .price__tag,
.price__card--launch .price__per {
  color: color-mix(in oklch, var(--linen-100) 75%, transparent);
}
.price__card--launch .price__copy {
  color: color-mix(in oklch, var(--linen-100) 80%, transparent);
}
.price__card--launch .price__currency,
.price__card--launch .price__amount {
  color: var(--brass-100);
}

.price__tag {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 var(--space-3);
}
.price__big {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-display);
  margin: 0;
  line-height: 1;
}
.price__big--quiet {
  color: var(--ink);
}
.price__currency {
  font-size: var(--t-2xl);
  color: var(--brass-60);
}
.price__amount {
  font-size: var(--t-4xl);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price__amount--small {
  font-size: var(--t-2xl);
}
.price__per {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.price__plus {
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: color-mix(in oklch, var(--ink) 70%, var(--brass-60));
  margin: 0;
}
.price__copy {
  font-size: var(--t-sm);
  color: var(--ink-dim);
  margin: 0;
}
.price__finepoint {
  max-width: 56ch;
  margin: 0 auto;
  font-size: var(--t-sm);
  color: var(--ink-dim);
  font-style: italic;
}
.price__finepoint strong {
  font-style: normal;
  color: var(--ink);
}

/* -------- Pilot CTA ----------------------------------------- */

.pilot {
  padding: var(--space-9) var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: var(--space-6);
  align-items: start;
}
.pilot__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pilot__photo {
  margin: var(--space-4) 0 0;
  position: relative;
  width: 100%;
  /* Match .prose--wide max-width so the photo's right edge aligns with
     the lede text, not floats narrower like an unanchored thumbnail. */
  max-width: 70ch;
}
.pilot__photo picture {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--brass-100) 22%, transparent);
}
.pilot__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(0.95) contrast(1.02);
}
.pilot__photo figcaption {
  margin-top: 0.7rem;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* Concrete deliverables block — sits in the right column under the
   form (where the section's blank space was), giving the owner the
   specifics the lede doesn't cover. Quiet styling so it reads as a
   service contract, not a marketing list. */
.pilot__deliverables {
  grid-column: 2 / 3;
  margin-top: var(--space-5);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: color-mix(in oklch, var(--tannin-90) 50%, var(--tannin-100));
  border: 1px solid color-mix(in oklch, var(--brass-100) 14%, transparent);
}
@media (max-width: 880px) {
  .pilot__deliverables {
    grid-column: 1 / -1;
  }
}
.pilot__deliverables-head {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-100);
  margin: 0 0 var(--space-4);
}
.pilot__deliverables dl {
  display: grid;
  gap: var(--space-4);
}
.pilot__deliverable {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
}
.pilot__deliverable dt {
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--bone);
  margin: 0;
}
.pilot__deliverable dd {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--bone-dim);
}
@media (max-width: 540px) {
  .pilot__deliverable {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

.pilot__form {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--tannin-90);
  border: 1px solid color-mix(in oklch, var(--brass-100) 18%, transparent);
}
.pilot__form-title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--bone);
  margin: 0 0 var(--space-3);
}

/* Waitlist capacity meter — thin brass progress bar above the form
   fields. Hidden until counter.json loads (so it never flashes "0
   of 50" if the file is unreachable). The fill animates in on the
   first render. */
.waitlist-meter {
  margin: 0 0 var(--space-4);
}
.waitlist-meter__bar {
  height: 4px;
  background: color-mix(in oklch, var(--brass-100) 18%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.waitlist-meter__fill {
  --fill: 0;
  width: calc(var(--fill, 0) * 100%);
  height: 100%;
  background: var(--brass-100);
  transition: width 700ms var(--ease-out-expo);
}
.waitlist-meter__text {
  margin: 0.5rem 0 0;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.waitlist-meter__text strong {
  color: var(--brass-100);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Cohort-full panel — replaces the form when counter.json reports
   signups >= max. Same visual container as the form so the section
   doesn't structurally shift. */
.pilot__closed {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--tannin-90);
  border: 1px solid var(--brass-100);
}
.pilot__closed a {
  color: var(--brass-100);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.field {
  display: grid;
  gap: 0.4rem;
}
.field__label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.field__input {
  background: var(--tannin-100);
  border: 1px solid color-mix(in oklch, var(--brass-100) 22%, transparent);
  color: var(--bone);
  padding: 0.85rem 1rem;
  border-radius: 2px;
  font-size: var(--t-base);
  transition: border-color var(--dur-fast) var(--ease-out-expo);
  min-height: 48px;
}
.field__input:hover {
  border-color: color-mix(in oklch, var(--brass-100) 40%, transparent);
}
.field__input:focus {
  outline: 2px solid var(--brass-100);
  outline-offset: 2px;
  border-color: var(--brass-100);
}

.pilot__form-note {
  font-size: var(--t-xs);
  color: var(--bone-dim);
  margin: 0;
}

.pilot__success {
  grid-column: 2 / 3;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--tannin-90);
  border: 1px solid var(--brass-100);
}

@media (max-width: 880px) {
  .pilot {
    grid-template-columns: 1fr;
  }
  .pilot__success {
    grid-column: 1 / -1;
  }
}

/* -------- Service ticket (signature motion device) ---------- */

.ticket {
  position: fixed;
  inset: auto var(--gutter) 1.5rem auto;
  width: clamp(220px, 22vw, 260px);
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--bone);
  color: var(--tannin-100);
  font-family: 'Hanken Grotesk', 'Courier New', 'Courier', monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  box-shadow:
    0 14px 30px -12px color-mix(in oklch, var(--tannin-100) 70%, transparent),
    0 1px 0 0 color-mix(in oklch, var(--tannin-100) 12%, transparent);
  /* Receipt edge — stamped, not torn. */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 8px),
    96% 100%,
    92% calc(100% - 6px),
    88% 100%,
    84% calc(100% - 6px),
    80% 100%,
    76% calc(100% - 6px),
    72% 100%,
    68% calc(100% - 6px),
    64% 100%,
    60% calc(100% - 6px),
    56% 100%,
    52% calc(100% - 6px),
    48% 100%,
    44% calc(100% - 6px),
    40% 100%,
    36% calc(100% - 6px),
    32% 100%,
    28% calc(100% - 6px),
    24% 100%,
    20% calc(100% - 6px),
    16% 100%,
    12% calc(100% - 6px),
    8% 100%,
    4% calc(100% - 6px),
    0% 100%
  );
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
  pointer-events: none;
  z-index: 30;
}
.ticket.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ticket.is-fading {
  opacity: 0;
  transform: translateY(-12px);
}

.ticket__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 0.2rem;
  font-family: var(--font-body);
}
.ticket__brand {
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--brass-60);
}
.ticket__shop {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--tannin-100);
}
.ticket__sub {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.ticket__rule {
  border: 0;
  border-top: 1px dashed color-mix(in oklch, var(--tannin-100) 32%, transparent);
  margin: 0.6rem 0;
}
.ticket__rule--end {
  margin-top: 0.7rem;
}

.ticket__items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}
.ticket__item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: baseline;
  gap: 0.6rem;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-mid) var(--ease-out-expo),
    transform var(--dur-mid) var(--ease-out-expo);
}
.ticket__item.is-printed {
  opacity: 1;
  transform: translateY(0);
}
.ticket__time {
  font-size: 0.72rem;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.ticket__type {
  font-weight: 700;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--tannin-100);
}

.ticket__foot {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
}

@media (max-width: 980px) {
  .ticket {
    inset: auto 1rem 1rem auto;
    width: clamp(180px, 50vw, 220px);
    font-size: 0.72rem;
  }
}

@media (max-width: 540px) {
  .ticket {
    display: none;
  }
}

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

.site-footer {
  background: var(--tannin-100);
  border-top: 1px solid color-mix(in oklch, var(--brass-100) 14%, transparent);
  padding: var(--space-8) var(--gutter) var(--space-6);
  max-width: var(--max-w);
  margin: 0 auto;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid color-mix(in oklch, var(--brass-100) 12%, transparent);
}
.site-footer__tagline {
  font-size: var(--t-sm);
  color: var(--bone-dim);
  max-width: 36ch;
  margin: var(--space-3) 0 0;
}
.site-footer__tagline strong {
  color: var(--bone);
  font-weight: 700;
}
.site-footer__hashtag {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
  color: var(--brass-100);
  margin: var(--space-4) 0 0;
}
.wordmark--footer {
  font-size: 1rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.site-footer__nav a,
.site-footer__nav p {
  display: block;
  font-size: var(--t-sm);
  color: var(--bone-dim);
  margin: 0 0 0.4rem;
}
.site-footer__nav a:hover {
  color: var(--brass-100);
}
.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-100);
  margin: 0 0 var(--space-3);
}
.site-footer__address {
  color: var(--bone-dim);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: var(--space-5);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--bone-dim);
}
.site-footer__bottom p {
  margin: 0;
}

@media (max-width: 720px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }
}

/* -------- Reveal-on-scroll ---------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticket {
    opacity: 1;
    transform: none;
    position: static;
    width: auto;
    max-width: 320px;
    margin: var(--space-6) auto;
    inset: auto;
  }
  .ticket__item {
    opacity: 1;
    transform: none;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}