/* =========================================================
   UNHAVE/STUDIO — intro page
   Design language: editorial / indexed / hairline grid
   Palette: black · white · one red
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  --ink: #0a0a0a;
  --ink-soft: #6b6b6b;
  --paper: #ffffff;
  --red: #e10600;
  --red-deep: #a50400;

  --line: rgba(10, 10, 10, 0.14);
  --line-strong: rgba(10, 10, 10, 0.85);
  --line-invert: rgba(255, 255, 255, 0.18);

  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --max: 1680px;
  --head-h: 4.25rem;

  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, monospace;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.6s;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

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

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

::selection {
  background: var(--red);
  color: var(--paper);
}

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

/* ---------- shared type ---------- */
.mono {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}

.mono--red {
  color: var(--red);
}

.mono--muted {
  color: var(--ink-soft);
}

.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
}

.preloader__inner {
  width: min(30rem, 76vw);
  text-align: left;
}

.preloader__label {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.75rem;
}

.preloader__num {
  font-family: var(--mono);
  font-size: clamp(2.5rem, 9vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.preloader__track {
  position: relative;
  height: 2px;
  margin-top: 1.25rem;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.preloader__bar {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--red);
}

/* curtain slides up, never blocks forever */
.preloader.is-done {
  transform: translateY(-100%);
  transition: transform 0.9s var(--ease);
}

html.no-js .preloader {
  display: none;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-head {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.mark {
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  white-space: nowrap;
}

.mark em {
  font-style: normal;
  color: var(--red);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
}

.nav__link {
  position: relative;
  padding-block: 0.35rem;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__link[aria-current="page"] {
  color: var(--red);
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  cursor: pointer;
  color: inherit;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--ink);
  color: var(--paper);
  /* clear the fixed header without a magic 6.5rem, and never let the
     last link fall off a short viewport — it scrolls instead */
  padding: calc(var(--head-h) + 2.5rem) var(--pad) var(--pad);
  display: grid;
  align-content: start;
  gap: 0.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-101%);
  transition: transform 0.7s var(--ease), visibility 0.7s;
  visibility: hidden;
}

.menu.is-open {
  transform: translateY(0);
  visibility: visible;
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line-invert);
  font-size: clamp(1.75rem, 9vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.menu__link:hover {
  color: var(--red);
}

.menu__link span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.45);
}

.menu__foot {
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.5);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  padding-top: clamp(3rem, 9vw, 7rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

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

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
}

.hero__dot {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--red);
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: 0.05em;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

.hero__title {
  font-size: clamp(3rem, 12.5vw, 11.5rem);
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line > span {
  display: block;
}

/* Driven by a CSS animation rather than a JS class, so the headline can
   never be left stuck off-screen if intro.js fails to load. */
.js .hero__line > span {
  animation: lineUp 1.05s var(--ease) both;
  animation-delay: 0.9s;
}

.js .hero__line:nth-child(2) > span {
  animation-delay: 1s;
}

.js .hero__line:nth-child(3) > span {
  animation-delay: 1.1s;
}

@keyframes lineUp {
  from {
    transform: translateY(105%);
  }
  to {
    transform: translateY(0);
  }
}

.hero__title em {
  font-style: normal;
  color: var(--red);
}

.hero__title .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

.hero__meta {
  display: grid;
  gap: 1.25rem;
  padding-left: clamp(0rem, 2vw, 1.5rem);
  border-left: 1px solid var(--line);
}

.hero__meta div {
  display: grid;
  gap: 0.3rem;
}

.hero__meta dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.hero__meta a {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color 0.3s, border-color 0.3s;
}

.hero__meta a:hover {
  color: var(--red);
  border-color: var(--red);
}

.hero__scroll {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.hero__scroll i {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--red);
  transform-origin: left;
  animation: sweep 2.6s var(--ease) infinite;
}

@keyframes sweep {
  0% {
    transform: scaleX(0.15);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0.15);
  }
}

/* =========================================================
   TICKER
   ========================================================= */
.ticker {
  background: var(--red);
  color: var(--paper);
  border-bottom: 1px solid var(--red);
  overflow: hidden;
  padding-block: 0.85rem;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: slide 38s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
  white-space: nowrap;
}

.ticker__item::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  background: var(--paper);
  border-radius: 50%;
  opacity: 0.85;
}

.ticker__item strong {
  font-weight: 600;
  font-style: normal;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   SECTION FRAME
   ========================================================= */
.section {
  padding-block: clamp(3.5rem, 9vw, 8rem);
  border-bottom: 1px solid var(--line);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line-strong);
}

.section__head h2 {
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section__head span {
  color: var(--ink-soft);
}

/* =========================================================
   INDEX LIST (services)
   ========================================================= */
.idx {
  counter-reset: item;
}

.idx__row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.35rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  transition: color 0.4s var(--ease);
}

.idx__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}

.idx__row:hover::before,
.idx__row:focus-visible::before {
  transform: scaleX(1);
}

.idx__row:hover {
  color: var(--paper);
  border-bottom-color: var(--red);
}

.idx__num {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--red);
  transition: color 0.4s var(--ease);
}

.idx__row:hover .idx__num {
  color: var(--paper);
}

.idx__title {
  font-size: clamp(1.75rem, 5.5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.idx__note {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: color 0.4s var(--ease);
}

.idx__row:hover .idx__note {
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   ECG TRACE
   The discipline rows double as monitor channels: a heartbeat
   runs along the bottom of each row, sitting in the padding just
   above the divider. Faint at rest, it brightens and sweeps on
   hover, when the row also flips to its red fill.
   ========================================================= */
.idx__row {
  --ecg-w: 300px;
  --ecg-h: clamp(1.25rem, 2.6vw, 2rem);
  /* one PQRST complex per tile. The isoelectric line sits low in the
     strip so the flat runs land on the row's divider and the R spike
     climbs into the padding: flat, P, QRS, T, flat. */
  --ecg-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0 54 L96 54 C104 54 108 46 118 46 C128 46 132 54 140 54 L146 59 L154 6 L162 60 L172 54 C182 54 186 38 200 38 C214 38 218 54 228 54 L300 54' fill='none' stroke='%230a0a0a' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --ecg-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0 54 L96 54 C104 54 108 46 118 46 C128 46 132 54 140 54 L146 59 L154 6 L162 60 L172 54 C182 54 186 38 200 38 C214 38 218 54 228 54 L300 54' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

.idx--detail .idx__row {
  --ecg-h: clamp(1.5rem, 3.2vw, 2.4rem);
}

/* ::after lands after ::before at the same z-index, so the trace
   paints over the hover fill but still under the row's own text */
.idx__row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ecg-h);
  z-index: -1;
  pointer-events: none;
  background-image: var(--ecg-ink);
  background-repeat: repeat-x;
  background-position: 0 58%;
  background-size: var(--ecg-w) 100%;
  opacity: 0.3;
  transition: opacity 0.45s var(--ease), background-color 0.45s var(--ease);
}

.idx__row:hover::after,
.idx__row:focus-visible::after {
  background-image: var(--ecg-lit);
  opacity: 0.85;
  animation: ecg-sweep 2.2s linear infinite, ecg-beat 2.2s ease-in-out infinite;
}

/* monitors sweep left to right; one tile per cycle keeps the
   beat period and the trace speed locked together */
@keyframes ecg-sweep {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: calc(var(--ecg-w) * -1);
  }
}

/* one blip per sweep, timed to land on the QRS spike */
@keyframes ecg-beat {
  0%,
  100% {
    opacity: 0.85;
  }
  5% {
    opacity: 1;
  }
  18% {
    opacity: 0.6;
  }
}

/* the process list is too tight for a trace, and a heartbeat
   would be the wrong signal for a set of steps */
.idx--compact .idx__row::after {
  display: none;
}

/* =========================================================
   STATEMENT
   ========================================================= */
.statement {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(4rem, 11vw, 9rem);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
}

.statement__glow {
  position: absolute;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(225, 6, 0, 0.32) 0%,
    rgba(225, 6, 0, 0) 65%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  left: var(--mx, 50%);
  top: var(--my, 50%);
}

.statement:hover .statement__glow {
  opacity: 1;
}

.statement__quote {
  position: relative;
  font-size: clamp(1.75rem, 6vw, 5rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.04em;
  max-width: 20ch;
}

.statement__quote em {
  font-style: normal;
  color: var(--red);
}

.statement__foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-invert);
  color: rgba(255, 255, 255, 0.55);
}

.statement__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.tag {
  border: 1px solid var(--line-invert);
  padding: 0.3rem 0.6rem;
  transition: border-color 0.3s, color 0.3s;
}

.tag:hover {
  border-color: var(--red);
  color: var(--red);
}

/* =========================================================
   WORK STRIP
   ========================================================= */
.work {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.work__cell {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.75rem;
  align-content: space-between;
  min-height: 14rem;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

.work__cell:hover {
  background: var(--ink);
  color: var(--paper);
}

.work__cell:hover .mono {
  color: rgba(255, 255, 255, 0.5);
}

.work__cell h3 {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.work__mark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.4s var(--ease);
}

.work__mark i {
  width: 0.4rem;
  height: 0.4rem;
  background: var(--red);
  border-radius: 50%;
  flex: none;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.contact__title {
  font-size: clamp(2.5rem, 11vw, 9rem);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.contact__title a {
  position: relative;
  display: inline-block;
  color: var(--red);
  border-bottom: clamp(2px, 0.5vw, 6px) solid var(--ink);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

/* An unbreakable address is ~11.7em wide, so it needs its own scale
   to stay inside the viewport at every width. */
.contact__title--mail {
  font-size: clamp(1.25rem, 6.5vw, 5.5rem);
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

.contact__title a:hover {
  color: var(--ink);
  border-color: var(--red);
}

.contact__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.contact__row p {
  max-width: 46ch;
  color: var(--ink-soft);
}

.contact__row a {
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.3s, border-color 0.3s;
}

.contact__row a:hover {
  color: var(--red);
  border-color: var(--red);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--ink);
  color: var(--paper);
}

.foot__top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.foot__mark {
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.foot__mark em {
  font-style: normal;
  color: var(--red);
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2rem;
  width: min(100%, 30rem);
}

.foot__col {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.foot__col a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s;
  width: fit-content;
  border-bottom: 1px solid transparent;
}

.foot__col a:hover {
  color: var(--red);
  border-color: var(--red);
}

.foot__bot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-invert);
  color: rgba(255, 255, 255, 0.5);
}

.foot__bot a {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s;
}

.foot__bot a:hover {
  color: var(--red);
}

/* =========================================================
   REVEAL
   ========================================================= */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

[data-reveal] {
  transition-delay: 0ms;
}

/* inline link inside index rows / copy */
.link {
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.3s;
}

.link:hover {
  color: var(--red);
}

/* sticky header offset for in-page anchors */
[id] {
  scroll-margin-top: 6rem;
}

/* skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--ink);
  color: var(--paper);
  padding: 0.85rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.skip:focus {
  left: 0;
}

/* =========================================================
   PAGE HEAD  (services / contact)
   ========================================================= */
.page-head {
  position: relative;
  padding-top: clamp(3rem, 9vw, 7rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}

.page-head__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--ink-soft);
}

.page-head__title {
  font-size: clamp(2.5rem, 10.5vw, 8.5rem);
  line-height: 0.88;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.page-head__title em {
  font-style: normal;
  color: var(--red);
}

.page-head__lede {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 54ch;
  font-size: clamp(1rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.45;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}

/* ---------- detail index ---------- */
.idx--detail .idx__row {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.idx__body {
  display: grid;
  gap: 1rem;
  max-width: 62ch;
}

.idx__body .idx__note {
  font-size: 1rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 0.35rem 0.6rem;
  color: var(--ink-soft);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.idx__row:hover .chip {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- compact index (process) ---------- */
.idx--compact .idx__row {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
}

.idx--compact .idx__title {
  font-size: clamp(1.125rem, 2.4vw, 1.75rem);
  letter-spacing: -0.02em;
}

/* ---------- key/value rows ---------- */
.kv {
  border-top: 1px solid var(--line-strong);
}

.kv__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.5rem 2rem;
  padding-block: clamp(1rem, 2.5vw, 1.35rem);
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease);
}

.kv__row:hover {
  background: rgba(10, 10, 10, 0.025);
}

.kv__k {
  color: var(--ink-soft);
}

.kv__v strong {
  font-weight: 600;
}

.kv__v p {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-top: 0.25rem;
}

/* ---------- two column compare ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

.split__col h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.split__col--yes h3 {
  color: var(--red);
}

.split__col li {
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  display: flex;
  gap: 0.75rem;
}

.split__col li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.55em;
  background: var(--ink);
}

.split__col--yes li::before {
  background: var(--red);
}

/* ---------- availability panel ---------- */
.panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.panel__cell {
  background: var(--paper);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.panel__cell strong {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 60rem) {
  .hero__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero__meta {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  .idx__row {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  /* Only for the flat index rows, where the note is a direct grid
     child and has to drop below the number. In the detail rows the
     note sits inside .idx__body, and pinning it to column 2 would
     conjure a phantom second column and push it off the row. */
  .idx:not(.idx--detail) .idx__row > .idx__note {
    grid-column: 2;
  }

  .kv__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }
}

@media (max-width: 40rem) {
  .nav {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

/* Short viewports (landscape phones, split screen): the full-screen
   menu has to give up some of its type and air so every link still
   lands above the fold. Width-based type alone does not react to a
   390px-tall screen, so this is keyed off height. */
@media (max-height: 34rem) {
  .menu {
    padding-top: calc(var(--head-h) + 1.25rem);
  }

  .menu__link {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    padding-block: 0.3rem;
  }

  .menu__foot {
    margin-top: 1.25rem;
  }
}

/* ...and on a landscape phone even that is too much. The side padding
   is pinned down here because --pad grows to ~2.3rem by this width,
   which is dead weight in a menu that is only 390px tall. */
@media (max-height: 26rem) {
  .menu {
    padding: calc(var(--head-h) + 0.5rem) 1.25rem 1.25rem;
  }

  .menu__link {
    font-size: clamp(1.375rem, 5.5vw, 1.875rem);
    padding-block: 0.2rem;
  }

  .menu__foot {
    margin-top: 0.75rem;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .hero__line > span {
    animation: none;
    transform: none;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .ticker__track {
    animation: none;
  }

  .statement__glow {
    display: none;
  }

  .preloader {
    display: none;
  }
}

/* print */
@media print {
  .preloader,
  .site-head,
  .ticker,
  .menu {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }
}