/* ==========================================================================
   MAIN.CSS - OOZZIT
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBALS
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--paper);
  background-color: var(--ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-fast) var(--ease);
}

/* --------------------------------------------------------------------------
   FILM GRAIN OVERLAY
   -------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  background: url('../assets/texture/grain.png') repeat;
  mix-blend-mode: overlay;
  opacity: 0.035;
}

/* --------------------------------------------------------------------------
   SKIP LINK
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--ink);
  z-index: 10000;
  border-radius: var(--radius);
  font-weight: 500;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY & MICRO-LABELS
   -------------------------------------------------------------------------- */
.label,
.section__label,
.hero__eyebrow,
.work__chip,
.step__number,
.service__number {
  font-family: var(--font-body);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
}

.section__label {
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ink);
  border: none;
  border-radius: var(--radius);
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}

.btn:hover {
  filter: brightness(1.08);
}

.btn:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

.btn:active {
  filter: brightness(0.94);
}

.btn:disabled {
  background: var(--surface-2);
  color: var(--paper-dim);
  cursor: not-allowed;
  filter: none;
}

.btn--secondary {
  background: transparent;
  border: 1px solid var(--surface-2);
  color: var(--paper);
}

.btn--secondary:hover {
  filter: brightness(1.08);
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-gutter);
  height: 64px;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.header.scrolled {
  background: var(--surface);
  border-bottom-color: var(--surface-2);
}

.header__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--paper);
  letter-spacing: -0.02em;
}

.header__cta {
  padding: 12px 24px;
}

@media (min-width: 1024px) {
  .header {
    height: 72px;
  }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hero__poster {
  z-index: 1;
}

.hero__poster--hidden {
  opacity: 0;
  transition: opacity 600ms var(--ease);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, var(--ink) 0%, rgba(10,10,11,0.7) 35%, transparent 75%);
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: calc(var(--header-h) + 40px) var(--s-gutter)
           calc(84px + clamp(1.5rem, 4vw, 3rem));
  max-width: 100%;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  max-width: 14ch;
  color: var(--paper);
  margin: 0;
  margin-top: 8px;
}

.hero__subhead {
  font-size: var(--t-body);
  color: var(--paper-dim);
  max-width: 42ch;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  line-height: 1.55;
}

.hero__cta {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.hero__caption {
  font-size: var(--t-small);
  color: var(--paper-dim);
  margin-top: 12px;
}

.hero__sound-toggle {
  position: absolute;
  bottom: calc(80px + 24px);
  right: var(--s-gutter);
  z-index: 3;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: none;
  border: none;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   SERVICE INDEX
   -------------------------------------------------------------------------- */
.service-index {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: var(--surface);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.service-index__item {
  padding: 20px var(--s-gutter);
}

.service-index__title {
  font-family: var(--font-body);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  margin-left: 8px;
}

@media (min-width: 640px) {
  .service-index {
    grid-template-columns: repeat(4, 1fr);
  }
  .service-index__item:not(:last-child) {
    border-right: 1px solid var(--border);
  }
}

/* --------------------------------------------------------------------------
   SECTION (GENERAL)
   -------------------------------------------------------------------------- */
.section {
  padding: var(--s-section) var(--s-gutter);
  max-width: 1440px;
  margin: 0 auto;
}

.section h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  max-width: 18ch;
  color: var(--paper);
  margin-top: 0;
  margin-bottom: var(--s-block);
}

.section__body {
  max-width: var(--measure);
  color: var(--paper-dim);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   WORK SECTION
   -------------------------------------------------------------------------- */
.work {
  display: flex;
  flex-direction: column;
  gap: var(--s-block);
}

.work__piece {
  height: clamp(70vh, 85vh, 90vh);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.work__piece-video,
.work__piece-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work__piece-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink) 0%, rgba(10,10,11,0.7) 35%, transparent 75%);
}

.work__content {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: var(--s-gutter);
}

.work__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--paper);
  margin: 0;
}

.work__meta {
  font-size: var(--t-small);
  color: var(--paper-dim);
  margin-top: 8px;
}

.work__chip {
  display: inline-block;
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   LIGHTBOX
   -------------------------------------------------------------------------- */
.lightbox {
  padding: 0;
  border: none;
  background: transparent;
}

.lightbox::backdrop {
  background: rgba(10,10,11,0.96);
}

.lightbox[open] {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: lightbox-in var(--dur-base) var(--ease);
}

.lightbox__video {
  max-width: 90vw;
  max-height: 85vh;
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--paper);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: none;
  border: none;
  cursor: pointer;
}

@keyframes lightbox-in { 
  from { opacity: 0; transform: scale(0.98); } 
  to { opacity: 1; transform: scale(1); } 
}

/* --------------------------------------------------------------------------
   THE ARGUMENT
   -------------------------------------------------------------------------- */
.argument {
  text-align: left;
}

.argument h2 {
  text-align: center;
  max-width: var(--measure);
  margin-inline: auto;
}

.argument p {
  max-width: var(--measure);
  margin: 0 auto;
  line-height: 1.6;
  color: var(--paper-dim);
}

.argument p + p {
  margin-top: 1.5em;
}

.argument strong {
  color: var(--paper);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   THE LEDGER
   -------------------------------------------------------------------------- */
.ledger {
  display: flex;
  flex-direction: column;
  gap: var(--s-gutter);
  margin-top: var(--s-section);
}

.ledger__item {
  text-align: center;
}

.ledger__value {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  color: var(--paper);
}

.ledger__caption {
  font-size: var(--t-small);
  color: var(--paper-dim);
  margin-top: 8px;
}

.ledger__note {
  font-size: var(--t-body);
  color: var(--paper-dim);
  font-style: italic;
  text-align: center;
  margin-top: var(--s-block);
  max-width: var(--measure);
  margin-inline: auto;
}

@media (min-width: 640px) {
  .ledger {
    flex-direction: row;
    justify-content: space-around;
  }
  .ledger__item {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   REVEAL SECTION
   -------------------------------------------------------------------------- */
.reveal-section {
}

.reveal-layout {
  display: flex;
  flex-direction: column;
  gap: var(--s-gutter);
  margin-top: var(--s-block);
}

.reveal__visual {
  position: relative;
}

.reveal__still, 
.reveal__video {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}

@media (min-width: 1024px) {
  .reveal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-gutter);
  }
  
  .reveal__visual {
    position: sticky;
    top: 20vh;
    height: fit-content;
  }

  .reveal__video {
    position: absolute;
    top: 0;
    left: 0;
  }

  @supports (animation-timeline: view()) {
    .reveal__video {
      animation: fade-video linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 50%;
    }
  }
}

@keyframes fade-video {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   STEPS
   -------------------------------------------------------------------------- */
.step {
  margin-bottom: var(--s-block);
}

.step__number {
  color: var(--accent);
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--paper);
  margin: 8px 0 0 0;
}

.step__desc {
  color: var(--paper-dim);
  margin: 4px 0 0 0;
  max-width: 50ch;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   SERVICES
   -------------------------------------------------------------------------- */
.services {
  display: flex;
  flex-direction: column;
}

.service {
  padding: var(--s-block) 0;
  border: none;
}

.service__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--paper);
  margin: 8px 0 0 0;
}

.service__body {
  color: var(--paper-dim);
  margin: 8px 0 0 0;
  max-width: 50ch;
  line-height: 1.6;
}

.services__note {
  font-size: var(--t-body);
  color: var(--paper-dim);
  font-style: italic;
  margin-top: var(--s-block);
}

@media (min-width: 1024px) {
  .services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s-gutter);
  }
  .services__note {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   CALCULATOR
   -------------------------------------------------------------------------- */
.calculator {
  max-width: 720px;
  margin: 0 auto;
}

.calculator__inputs {
  display: grid;
  gap: var(--s-block);
}

.calc-group {
  display: grid;
  gap: 8px;
}

.calc-group label {
  font-size: var(--t-small);
  color: var(--paper);
  font-weight: 500;
}

input[type='range'] {
  width: 100%;
  accent-color: var(--accent);
  height: 4px;
  appearance: none;
  background: var(--surface-2);
  border-radius: 2px;
  outline: none;
}

input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

input[type='range']::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

input[type='checkbox'] {
  accent-color: var(--accent);
}

.calc-output {
  margin-top: var(--s-section);
  text-align: center;
}

.calc-output h3 {
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  margin: 0 0 12px 0;
}

.calc-output__total {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  color: var(--paper);
  margin: 0;
}

.calc-output__weeks {
  font-size: var(--t-body);
  color: var(--paper-dim);
  margin-top: 8px;
}

.calc-output__note {
  max-width: var(--measure);
  margin: var(--s-block) auto 0;
  color: var(--paper-dim);
  text-align: center;
}

.calc-email {
  max-width: 400px;
  margin: var(--s-block) auto 0;
  display: flex;
  gap: 8px;
}

.calc-email input[type='email'] {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--paper);
  font-family: var(--font-body);
}

.calc-email input[type='email']:focus {
  border-color: var(--accent);
  outline: none;
}

.calc-noscript {
  display: none;
}
.no-js .calc-noscript {
  display: block;
}
.no-js .calc-interactive {
  display: none;
}

/* --------------------------------------------------------------------------
   FOUNDERS
   -------------------------------------------------------------------------- */
.founders {
  display: flex;
  flex-direction: column;
  gap: var(--s-gutter);
}

.founder__photo {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius);
  filter: grayscale(1);
}

.founder__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--paper);
  margin: 24px 0 0 0;
}

.founder__bio {
  color: var(--paper-dim);
  margin: 8px 0 0 0;
  line-height: 1.6;
}

.founders__note {
  margin-top: var(--s-block);
  color: var(--paper-dim);
  font-style: italic;
}

@media (min-width: 1024px) {
  .founders {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .founders__note {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   JOURNAL STRIP
   -------------------------------------------------------------------------- */
.journal-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-gutter);
}

.journal-card {
  display: block;
  padding: var(--s-block) 0;
  border-top: 1px solid var(--border);
}

.journal-card__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--paper);
  margin: 0;
  transition: color var(--dur-fast) var(--ease);
}

.journal-card:hover .journal-card__title {
  color: var(--accent);
}

.journal-card__date {
  font-size: var(--t-small);
  color: var(--paper-dim);
  margin-top: 8px;
}

.journal-card__read {
  font-size: var(--t-small);
  color: var(--paper-dim);
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   CLOSE SECTION
   -------------------------------------------------------------------------- */
.close {
  text-align: center;
}

.close h2,
.close .section__body,
.close .btn {
  max-width: var(--measure);
  margin-inline: auto;
}

.close .section__body {
  margin-top: 0;
  margin-bottom: var(--s-block);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--s-block) var(--s-gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.footer__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--paper);
}

.footer__links {
  display: flex;
  gap: 24px;
  font-size: var(--t-small);
  color: var(--paper-dim);
  flex-wrap: wrap;
  justify-content: center;
}

.footer__links a:hover {
  color: var(--paper);
}

.footer__copy {
  font-size: var(--t-small);
  color: var(--paper-dim);
}

@media (min-width: 640px) {
  .footer {
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   SCROLL-DRIVEN REVEAL ANIMATION
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .reveal {
    animation: fade-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   JOURNAL PAGE (journal.html)
   -------------------------------------------------------------------------- */
.journal-page {
}

.journal-page__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: var(--s-block);
}

.journal-list {
  margin-top: var(--s-block);
  display: flex;
  flex-direction: column;
}

.journal-list .journal-card {
  border-bottom: var(--border);
}

.journal-card__excerpt {
  font-size: var(--t-small);
  color: var(--paper-dim);
  margin-top: 8px;
  display: block;
}

/* --------------------------------------------------------------------------
   POST PAGE (journal/[slug].html)
   -------------------------------------------------------------------------- */
.post {
}

.post__breadcrumb {
  font-size: var(--t-small);
  color: var(--paper-dim);
  margin-bottom: var(--s-block);
}

.post__breadcrumb a:hover {
  color: var(--paper);
}

.post__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 16px;
}

.post__date {
  font-size: var(--t-small);
  color: var(--paper-dim);
  display: block;
  margin-bottom: var(--s-section);
}

.post__body {
  max-width: var(--measure);
}

.post__body h2 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--paper);
  margin-top: var(--s-block);
  margin-bottom: 16px;
}

.post__body p {
  color: var(--paper-dim);
  line-height: 1.6;
  margin-bottom: 1.5em;
}

.post__faq {
  max-width: var(--measure);
  margin-top: var(--s-section);
  padding-top: var(--s-block);
  border-top: var(--border);
}

.faq__item {
  margin-bottom: var(--s-block);
}

.faq__question {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--paper);
  margin-bottom: 8px;
}

.faq__answer {
  color: var(--paper-dim);
  line-height: 1.6;
}

.post__cta {
  max-width: var(--measure);
  margin-top: var(--s-section);
  padding-top: var(--s-block);
  border-top: var(--border);
}

.post__cta strong {
  color: var(--paper);
  display: block;
  margin-bottom: var(--s-block);
}

/* --------------------------------------------------------------------------
   NOSCRIPT TABLE
   -------------------------------------------------------------------------- */
.calc-noscript table {
  width: 100%;
  max-width: 400px;
  margin: var(--s-block) auto;
  border-collapse: collapse;
}

.calc-noscript td {
  padding: 12px 16px;
  border-bottom: var(--border);
  color: var(--paper-dim);
}

.calc-noscript td:first-child {
  color: var(--paper);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   CALC ERROR
   -------------------------------------------------------------------------- */
.calc-error {
  color: var(--accent);
  font-size: var(--t-small);
  margin-top: 8px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   CALC GROUP CHECKBOX
   -------------------------------------------------------------------------- */
.calc-group--checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.calc-group--checkbox label {
  margin: 0;
}

/* ==========================================================================
   REFERENCE ALIGNMENT + NEW COMPONENTS
   Added after the first draft. Closes the gap to the reference set:
   condensed display type, the bordered "plate" device, poster-grade section
   headers, and the pages the first draft didn't have.
   ========================================================================== */

/* --------------------------------------------------------------------------
   NAV — the site is multi-page now (About, Work, Journal, Contact)
   -------------------------------------------------------------------------- */
.nav {
  display: none;
  gap: clamp(16px, 2.5vw, 36px);
  align-items: center;
}

.nav a {
  font-family: var(--font-body);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--paper-dim);
}

.nav a:hover,
.nav a[aria-current="page"] { color: var(--paper); }

.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: var(--s-gutter);
}

.nav-drawer[data-open="true"] { display: flex; }

.nav-drawer a {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 12vw, 5rem);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--paper);
}

.nav-drawer a:hover { color: var(--accent); }

.nav-drawer__close {
  position: absolute;
  top: 16px;
  right: var(--s-gutter);
  background: none;
  border: none;
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

@media (min-width: 880px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   HERO — light sweep placeholder
   Runs only while no real film is attached. Demonstrates the intended
   "Light Test" hero: one hard source travelling across a dark set.
   Removed automatically by main.js once a video is playing.
   -------------------------------------------------------------------------- */
.hero__sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    38% 62% at 20% 45%,
    rgba(227, 154, 59, 0.55) 0%,
    rgba(227, 154, 59, 0.14) 42%,
    transparent 72%
  );
  animation: light-sweep 11s var(--ease) infinite alternate;
  mix-blend-mode: screen;
}

@keyframes light-sweep {
  from { transform: translateX(-14%) scale(1);    opacity: 0.75; }
  50%  { opacity: 1; }
  to   { transform: translateX(38%)  scale(1.12); opacity: 0.7;  }
}

.hero--has-video .hero__sweep { display: none; }

/* --------------------------------------------------------------------------
   PLATE — the JAPAN-reference device.
   Bordered rectangle, a single circle behind, type knocking through.
   Used as a section marker and on the close. Never at small sizes.
   -------------------------------------------------------------------------- */
.plate {
  position: relative;
  border: 2px solid var(--paper);
  background: var(--ink);
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
  overflow: hidden;
  text-align: center;
  border-radius: var(--radius);
}

.plate::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(180px, 34vw, 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  z-index: 0;
}

.plate__word {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(3rem, 16vw, 11rem);
  line-height: 0.82;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--paper);
  mix-blend-mode: difference;
  margin: 0;
}

.plate__sub {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* --------------------------------------------------------------------------
   FAQ — accordion, native <details>, zero JS
   -------------------------------------------------------------------------- */
.faq { max-width: var(--measure); }

.faq__item {
  border-top: 1px solid var(--surface-2);
  padding: 0;
}

.faq__item:last-child { border-bottom: 1px solid var(--surface-2); }

.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 28px 44px 28px 0;
  position: relative;
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  color: var(--paper);
  transition: color var(--dur-fast) var(--ease);
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }

.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--paper-dim);
  transition: transform var(--dur-base) var(--ease);
}

.faq__item[open] summary::after { content: "–"; }

.faq__item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.faq__answer {
  padding: 0 44px 28px 0;
  color: var(--paper-dim);
  line-height: 1.65;
}

.faq__answer p + p { margin-top: 1em; }

/* --------------------------------------------------------------------------
   PAGE HEADER — About, Contact, Journal index
   -------------------------------------------------------------------------- */
.page-head {
  padding: calc(var(--header-h) + var(--s-section)) var(--s-gutter) var(--s-block);
  max-width: 1440px;
  margin: 0 auto;
}

.page-head h1 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  max-width: 16ch;
  margin: 12px 0 0;
}

.page-head__lede {
  margin-top: var(--s-block);
  max-width: var(--measure);
  color: var(--paper-dim);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   PROSE — About body, journal posts
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }

.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1;
  margin: var(--s-block) 0 20px;
  color: var(--paper);
}

.prose p {
  color: var(--paper-dim);
  line-height: 1.7;
  margin-bottom: 1.25em;
}

.prose strong { color: var(--paper); }

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--s-block);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--s-gutter) var(--s-section);
}

@media (min-width: 880px) {
  .contact-grid { grid-template-columns: 1.15fr 1fr; gap: clamp(3rem, 8vw, 7rem); }
}

.contact-form { display: grid; gap: 20px; }

.field { display: grid; gap: 8px; }

.field label {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--paper-dim);
}

.field input,
.field select,
.field textarea {
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--t-body);
  width: 100%;
}

.field textarea { min-height: 140px; resize: vertical; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.contact-aside dt {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--paper-dim);
  margin-top: 28px;
}

.contact-aside dd {
  margin: 6px 0 0;
  color: var(--paper);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.contact-aside dd a:hover { color: var(--accent); }

.form-note {
  font-size: var(--t-small);
  color: var(--paper-dim);
  line-height: 1.6;
}

.form-status {
  font-size: var(--t-small);
  min-height: 1.4em;
}

.form-status[data-state="error"]   { color: #E4552B; }
.form-status[data-state="success"] { color: var(--accent); }

/* --------------------------------------------------------------------------
   ABOUT — the two-founder split
   -------------------------------------------------------------------------- */
.about-split {
  display: grid;
  gap: var(--s-block);
}

@media (min-width: 880px) {
  .about-split { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
}

.about-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
  border-radius: var(--radius);
  transition: filter var(--dur-base) var(--ease);
}

.about-figure:hover img { filter: grayscale(0); }

.about-figure figcaption {
  margin-top: 16px;
}

.about-figure h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  margin: 0 0 8px;
}

.about-figure p { color: var(--paper-dim); line-height: 1.65; }

/* --------------------------------------------------------------------------
   PLACEHOLDER BADGE — so nothing unfinished ships by accident
   -------------------------------------------------------------------------- */
.is-placeholder { position: relative; }

.is-placeholder::after {
  content: "PLACEHOLDER";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: var(--track-label);
  padding: 5px 9px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: rgba(10, 10, 11, 0.72);
  border-radius: 2px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — stops the sweep too
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__sweep { animation: none; }
}

/* Honeypot — must be hidden from people but reachable by naive bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0;
}

/* ==========================================================================
   CARD SYSTEM — the premium pass
   The page is a black canvas holding inset, generously-rounded cards. The
   hero is a card, not a full-bleed section. That inset + radius is what
   reads as premium; it is the same shape language Apple uses.
   This block is authoritative and overrides earlier rules.
   ========================================================================== */

body { padding: var(--page-inset); }
body::after { inset: 0; }                       /* grain still covers all */

/* --------------------------------------------------------------------------
   THE CTA — cream pill, dark label, orange arrow badge.
   Replaces the flat orange rectangle.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-pill);
  padding: 7px 8px 7px 24px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.btn::after {
  content: "";
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--accent);
  /* arrow, drawn not iconed */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  transition: transform var(--dur-base) var(--ease);
}

.btn:hover        { filter: none; background: #fff; }
.btn:hover::after { transform: translateX(3px); }
.btn:active       { transform: scale(0.985); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The hero used to invert the pill to ink, because it sat on a bright
   orange field. It now sits on a dark film, where an ink pill disappears.
   The cream pill with the orange arrow disc is the default and it reads
   correctly on both — so the hero no longer overrides it. */
.hero .btn {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.42);
}

.btn--secondary {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(242, 239, 233, 0.22);
  padding: 13px 24px;
}
.btn--secondary::after { display: none; }
.btn--secondary:hover  { background: rgba(242, 239, 233, 0.07); }

/* --------------------------------------------------------------------------
   HEADER — sits inside the hero card, not pinned to the window
   -------------------------------------------------------------------------- */
.header {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: auto;
  background: transparent !important;
  border-bottom: none !important;
  padding: clamp(18px, 2.2vw, 30px) clamp(20px, 3vw, 44px);
  height: auto;
}

.header__logo {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.nav a { color: rgba(242, 239, 233, 0.78); font-size: 0.875rem; text-transform: none; letter-spacing: 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); }
.nav-toggle { color: var(--paper); text-transform: none; letter-spacing: 0; }

/* Interior pages have no hero card, so the header needs its own dark bar. */
.header.header--solid {
  position: sticky;
  background: var(--ink) !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* --------------------------------------------------------------------------
   HERO — an inset rounded card carrying a warm field
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88svh, 860px);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--grad-hero);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

/* The media sits inside the card, multiplied into the warm field so the
   subject reads as a high-contrast silhouette — the reference's core move. */
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.92;
  z-index: 0;
}

.hero__sweep {
  mix-blend-mode: soft-light;
  opacity: 0.5;
  background: radial-gradient(42% 66% at 26% 40%,
              rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 45%, transparent 74%);
}

.hero__scrim {
  background: linear-gradient(to top,
              rgba(60, 18, 6, 0.62) 0%,
              rgba(60, 18, 6, 0.14) 42%,
              transparent 72%);
  z-index: 1;
}

.hero__content {
  padding: calc(var(--header-h) + clamp(48px, 9vw, 120px))
           clamp(20px, 3vw, 44px)
           clamp(150px, 17vw, 200px);
}

.hero h1 { max-width: 11ch; }

.hero .label { color: rgba(255, 255, 255, 0.82); }

.hero__subhead {
  color: rgba(255, 255, 255, 0.9);
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
}

.hero__caption      { color: rgba(255,255,255,0.62); }
.hero__sound-toggle { color: rgba(255,255,255,0.72); bottom: clamp(150px,17vw,200px); }

/* Numbered service list, on the hero field — #01 in white, label beneath */
.service-index {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin: 0 clamp(20px, 3vw, 44px);
  left: 0; right: 0;
  bottom: clamp(28px, 4vw, 48px);
  padding-top: 22px;
  gap: 12px;
}

.service-index__item { padding: 0; }

.service-index__item .label {
  display: block;
  color: #fff;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0;
  margin-bottom: 6px;
}

.service-index__title {
  display: block;
  margin-left: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
}

@media (min-width: 640px) {
  .service-index__item:not(:last-child) { border-right: none; }
}

/* --------------------------------------------------------------------------
   CLIENTS STRIP — its own dark card under the hero
   -------------------------------------------------------------------------- */
.clients {
  margin-top: var(--page-inset);
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(28px, 3.4vw, 44px) clamp(20px, 3vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}

.clients__label {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--paper);
  font-weight: 500;
  max-width: 15ch;
}

.clients__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  flex: 1;
}

.client {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  font-weight: 500;
}

.client svg { flex: 0 0 auto; opacity: 0.92; }

.clients__note {
  flex-basis: 100%;
  font-size: var(--t-small);
  color: var(--paper-dim);
}

/* --------------------------------------------------------------------------
   SECTIONS AS CARDS
   -------------------------------------------------------------------------- */
.section {
  background: var(--ink);
  border-radius: var(--radius-card);
  margin-top: var(--page-inset);
  padding: clamp(56px, 8vw, 130px) clamp(20px, 3vw, 44px);
  max-width: none;
}

.section--surface { background: var(--surface); }

/* The reference's split header: orange eyebrow + big headline left,
   supporting copy and CTA right. */
.split-head {
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(40px, 6vw, 80px);
}

@media (min-width: 900px) {
  .split-head { grid-template-columns: 1.05fr 1fr; align-items: start; }
}

.eyebrow {
  color: var(--accent);
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  font-weight: 500;
  margin-bottom: 18px;
  display: block;
}

.split-head h2 { margin-bottom: 0; }

.split-head__aside p {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.45;
  color: var(--paper);
  font-weight: 500;
}

.split-head__aside .form-note,
.split-head__aside .muted {
  color: var(--paper-dim);
  font-weight: 400;
  font-size: var(--t-small);
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   3-UP GRID — black & white portfolio stills, rounded
   -------------------------------------------------------------------------- */
.grid-3 {
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: 1fr;
}

@media (min-width: 700px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.shot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: filter var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

.shot:hover img { filter: grayscale(0) contrast(1); transform: scale(1.02); }

.shot__caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

/* Work pieces become rounded cards too */
.work__piece {
  border-radius: var(--radius-card);
  overflow: hidden;
  height: clamp(58vh, 72vh, 78vh);
}

.footer {
  background: var(--surface);
  border-radius: var(--radius-card);
  margin-top: var(--page-inset);
}

.page-head {
  background: var(--ink);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  max-width: none;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 3vw, 44px) clamp(32px, 4vw, 56px);
}

.contact-grid { max-width: none; padding-inline: clamp(20px, 3vw, 44px); }

/* The plate keeps sharp-ish corners deliberately — it's a poster object,
   not a card, and the contrast is the point. */
.plate { border-radius: var(--radius-lg); }

/* --------------------------------------------------------------------------
   RESPONSIVE — the card system on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 879px) {
  /* Logo + Menu only. The drawer carries Contact, so a third element in the
     header just crowds it. */
  .header__cta { display: none; }

  .header {
    padding: 16px 18px;
  }

  .hero {
    min-height: min(92svh, 720px);
  }

  .hero__content {
    padding: calc(var(--header-h) + 32px) 18px clamp(130px, 30vw, 170px);
  }

  .hero h1        { max-width: 100%; }
  .hero__subhead  { max-width: 100%; }

  .service-index {
    margin: 0 18px;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
    bottom: 22px;
    padding-top: 18px;
  }

  .hero__sound-toggle { display: none; }

  .clients        { gap: 18px; padding: 24px 18px; }
  .clients__list  { gap: 18px 26px; }

  .section        { padding: 48px 18px; }
  .page-head      { padding: 40px 18px 28px; }
  .contact-grid   { padding-inline: 18px; }
  .plate          { padding: 32px 18px; }
}

@media (max-width: 520px) {
  .grid-3      { grid-template-columns: 1fr 1fr; gap: 10px; }
  .shot:last-child { grid-column: span 2; aspect-ratio: 16 / 10; }
  .btn         { padding: 6px 6px 6px 18px; font-size: 0.875rem; gap: 10px; }
  .btn::after  { width: 30px; height: 30px; flex-basis: 30px; }
}

/* ==========================================================================
   SCROLL SNAP · RAIL · SERVICE CARDS · STYLE CARDS · RESULTS MARQUEE
   ========================================================================== */

/* --------------------------------------------------------------------------
   RAIL — horizontal carousel. `x mandatory`: every card is the same size and
   should land fully visible, which is exactly the case mandatory is for.
   Native scroll, no JS, trackpad and touch both work.
   -------------------------------------------------------------------------- */
.rail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 20px;
}

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 30vw, 400px);
  gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(20px, 3vw, 44px);
  padding: 4px clamp(20px, 3vw, 44px) 18px;
  margin-inline: calc(-1 * clamp(20px, 3vw, 44px));
  scrollbar-width: none;
}

.rail::-webkit-scrollbar { display: none; }

.rail__item {
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}

.rail__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.rail__item:hover img { transform: scale(1.03); }

.rail__cap {
  position: absolute;
  left: 12px; bottom: 12px;
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper);
}

.rail-hint {
  font-size: var(--t-small);
  color: var(--paper-dim);
}

/* --------------------------------------------------------------------------
   SERVICE CARDS — a row of mixed light/dark cards
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: 1fr;
}

@media (min-width: 720px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  border-radius: var(--radius-card);
  padding: clamp(24px, 2.4vw, 34px);
  min-height: clamp(300px, 34vw, 420px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  transition: transform var(--dur-base) var(--ease);
}

.card:hover { transform: translateY(-4px); }

.card--light { background: var(--paper); color: var(--ink); }
.card--ink   { background: #000; }
.card--accent{ background: var(--grad-hero); }

.card__n {
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: auto;
}

.card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 0.94;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 24px 0 12px;
}

.card p {
  font-size: 0.9375rem;
  line-height: 1.55;
  opacity: 0.72;
  margin: 0;
}

.card--light p { opacity: 0.68; }

.card__glow {
  position: absolute;
  right: -22%; top: -18%;
  width: 74%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,101,34,0.42) 0%, transparent 68%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   STYLE CARDS — badge, headline, copy, then an image below
   -------------------------------------------------------------------------- */
.styles {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: 1fr;
}

@media (min-width: 700px)  { .styles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .styles { grid-template-columns: repeat(4, 1fr); } }

.style {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.style__top { padding: clamp(20px, 2vw, 28px); }

.style__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

.pill {
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  color: var(--paper);
  white-space: nowrap;
}

.style--lime   .style__top { background: #C6F24A; color: #12200A; }
.style--violet .style__top { background: #B98CF7; color: #1E0B36; }
.style--teal   .style__top { background: #2DD4BF; color: #062B26; }
.style--amber  .style__top { background: #FB923C; color: #2B1204; }

.style--lime .pill, .style--violet .pill,
.style--teal .pill, .style--amber .pill {
  background: rgba(0, 0, 0, 0.16);
  color: inherit;
}

.style h3 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 0.94;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0 0 10px;
}

.style__top p { font-size: 0.9375rem; line-height: 1.5; margin: 0; opacity: 0.82; }

.style__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.style__media img { width: 100%; height: 100%; object-fit: cover; }

.style__more {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(10, 10, 11, 0.74);
  backdrop-filter: blur(6px);
  color: var(--paper);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 16px;
  font-size: 0.8125rem;
}

.style__more::after {
  content: "";
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* --------------------------------------------------------------------------
   RESULTS MARQUEE — gradient pills drifting continuously
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: drift 42s linear infinite;
}

.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee + .marquee { margin-top: 16px; }
.marquee:hover .marquee__track { animation-play-state: paused; }

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

.stat {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 30px 12px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  color: #fff;
}

.stat__dot {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  flex: 0 0 46px;
}

.stat b {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1;
  letter-spacing: var(--track-display);
  display: block;
}

.stat span { font-size: 0.8125rem; opacity: 0.85; }

.stat--1 { background: linear-gradient(92deg, #FF7A18, #E11D48); }
.stat--2 { background: linear-gradient(92deg, #E11D48, #A855F7); }
.stat--3 { background: linear-gradient(92deg, #2DD4BF, #16A34A); }
.stat--4 { background: linear-gradient(92deg, #3B82F6, #6366F1); }
.stat--5 { background: linear-gradient(92deg, #C6F24A, #16A34A); color: #0B1A05; }
.stat--5 .stat__dot { background: rgba(0,0,0,0.18); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { mask-image: none; overflow-x: auto; }
}


/* ==========================================================================
   PANEL SNAP — one section per screen, every screen
   `mandatory` + `scroll-snap-stop: always` means one gesture moves you
   exactly one whole section and never parks between two. That only works if
   every panel genuinely fits the viewport, so the rules below force it:
   fixed height, centred content, and grids that become horizontal rails on
   short screens instead of stacking taller than the display.
   ========================================================================== */

html {
  scroll-snap-type: y mandatory;
  scroll-padding: var(--page-inset);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.panel {
  height: calc(100svh - (var(--page-inset) * 2));
  scroll-snap-align: start;
  scroll-snap-stop: always;      /* one gesture = one section */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Content that genuinely can't be reduced (FAQ, contact form) scrolls
   INSIDE its panel. `contain` stops that scroll leaking into the page and
   breaking the snap. */
.panel__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  scrollbar-width: thin;
}

/* Panels are tighter than free-scrolling sections — everything has to fit. */
.panel.section { padding-block: clamp(28px, 4.5vh, 64px); }

.panel .split-head    { margin-bottom: clamp(16px, 2.6vh, 40px); }
.panel h2             { font-size: clamp(1.75rem, min(5.5vw, 6.4vh), 4rem); }
.panel .section__body { font-size: clamp(0.9375rem, 1.6vh, 1.125rem); }
.panel .eyebrow       { margin-bottom: clamp(8px, 1.2vh, 18px); }

/* Cards shrink to the space available rather than pushing the panel taller */
.panel .card   { min-height: 0; flex: 1; padding: clamp(16px, 2.4vh, 32px); }
.panel .cards  { flex: 1; min-height: 0; }
.panel .styles { flex: 1; min-height: 0; }
.panel .style  { min-height: 0; }
.panel .grid-3 { flex: 1; min-height: 0; }
.panel .shot   { aspect-ratio: auto; height: 100%; }
.panel .rail   { flex: 1; min-height: 0; align-items: stretch; }
.panel .rail__item { aspect-ratio: auto; height: 100%; }

.panel .card h3  { font-size: clamp(1.25rem, 2.6vh, 2.25rem); margin: 12px 0 8px; }
.panel .card p   { font-size: clamp(0.8125rem, 1.5vh, 0.9375rem); }
.panel .style h3 { font-size: clamp(1.125rem, 2.4vh, 1.875rem); }
.panel .style__top   { padding: clamp(12px, 2vh, 24px); }
.panel .style__top p { font-size: clamp(0.75rem, 1.4vh, 0.9375rem); }
.panel .style__media { flex: 1; min-height: 0; aspect-ratio: auto; }
.panel .style        { display: flex; flex-direction: column; }

/* The hero is a panel too */
.hero {
  height: calc(100svh - (var(--page-inset) * 2));
  min-height: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.footer { scroll-snap-align: start; }

/* --------------------------------------------------------------------------
   SHORT AND NARROW SCREENS
   On a phone a four-item grid stacked vertically cannot fit one screen. It
   becomes a horizontal rail instead, so the panel still holds exactly one
   viewport and the section-to-section feel survives on mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 900px), (max-height: 760px) {
  .panel .cards,
  .panel .styles,
  .panel .grid-3 {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(72vw, 300px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .panel .cards::-webkit-scrollbar,
  .panel .styles::-webkit-scrollbar,
  .panel .grid-3::-webkit-scrollbar { display: none; }

  .panel .card,
  .panel .style,
  .panel .shot { scroll-snap-align: start; }

  .panel .split-head { display: block; }
  .panel .split-head__aside { display: none; }   /* the headline carries it */
}

/* Too small to hold a panel at all — fall back to normal document scroll
   rather than clipping content. */
@media (max-height: 520px) {
  html   { scroll-snap-type: none; }
  .panel, .hero, .process__step { height: auto; min-height: 0; overflow: visible; }
  .process__visual { position: static; height: 46svh; }
  .panel .split-head__aside { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; scroll-behavior: auto; }
  .panel, .hero, .process__step { height: auto; overflow: visible; }
  .process__visual { position: static; height: 46svh; }
}

/* The three films ride the same rail mechanics as the project carousel. */
.work.rail { grid-auto-columns: clamp(260px, 46vw, 620px); }
.work__piece.rail__item { border-radius: var(--radius-card); cursor: pointer; }
.work__piece.rail__item .work__content { padding: clamp(14px, 2vh, 24px); }
.panel .work__title { font-size: clamp(1.125rem, 2.4vh, 1.75rem); }
.panel .work__meta  { font-size: clamp(0.75rem, 1.4vh, 0.875rem); margin-top: 6px; }

/* --------------------------------------------------------------------------
   PANEL FIT CORRECTIONS
   A panel clips its overflow, so anything taller than the viewport is
   content the visitor can never reach. These rules make the tall sections
   fit rather than hiding part of themselves.
   -------------------------------------------------------------------------- */

/* The internal scroller has to be the flex child that shrinks, or the panel
   grows instead of the scroller scrolling. */
.panel__scroll { flex: 1 1 auto; }

/* Process: two columns inside the panel, visual capped to the space left. */
.panel .reveal-layout {
  display: grid;
  gap: clamp(16px, 3vw, 44px);
  flex: 1;
  min-height: 0;
  align-items: center;
}

@media (min-width: 900px) {
  .panel .reveal-layout { grid-template-columns: 1fr 1fr; }
}

.panel .reveal-steps {
  display: grid;
  gap: clamp(8px, 1.6vh, 20px);
  align-content: center;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel .step__title { font-size: clamp(1rem, 2vh, 1.375rem); margin: 4px 0; }
.panel .step__desc  { font-size: clamp(0.8125rem, 1.5vh, 0.9375rem); margin: 0; }
.panel .reveal__visual { height: 100%; min-height: 0; border-radius: var(--radius-lg); overflow: hidden; }
.panel .reveal__visual img,
.panel .reveal__visual video { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 899px) {
  .panel .reveal__visual { display: none; }   /* steps carry it on narrow screens */
}

/* Founders: the 4:5 portraits are what push this panel over. Cap them. */
.panel .founders {
  display: grid;
  gap: clamp(14px, 2.5vw, 36px);
  flex: 1;
  min-height: 0;
  align-content: center;
}

@media (min-width: 760px) {
  .panel .founders { grid-template-columns: 1fr 1fr; }
  .panel .founders__note { grid-column: 1 / -1; }
}

.panel .founders > div { display: flex; flex-direction: column; min-height: 0; }

.panel .founder__photo {
  width: 100%;
  height: clamp(120px, 26vh, 300px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: grayscale(1);
}

.panel .founder__name { font-size: clamp(0.9375rem, 2vh, 1.25rem); margin: 10px 0 4px; }
.panel .founder__bio  { font-size: clamp(0.75rem, 1.45vh, 0.9375rem); margin: 0; }
.panel .founders__note { font-size: clamp(0.75rem, 1.4vh, 0.875rem); margin-top: 8px; }

/* Argument + ledger: trim the leading so the panel closes. */
.panel.argument h2 { margin-bottom: clamp(10px, 1.8vh, 28px); }
.panel.argument p  { font-size: clamp(0.875rem, 1.6vh, 1.0625rem); margin-bottom: 0.7em; }
.panel .ledger        { margin: clamp(12px, 2.2vh, 32px) 0 0; }
.panel .ledger__value { font-size: clamp(1.5rem, 4vh, 3rem); }
.panel .ledger__note  { font-size: clamp(0.75rem, 1.4vh, 0.875rem); margin-top: 10px; }

/* Calculator: the inputs and the readout share the remaining height. */
.panel #calculator .calculator { flex: 1 1 auto; min-height: 0; }
.panel .calc-interactive { gap: clamp(12px, 2vh, 28px); }
.panel .calc-group       { margin-bottom: clamp(6px, 1.2vh, 14px); }
.panel .calc-output__total { font-size: clamp(1.75rem, 5vh, 3.5rem); }

/* Hero: reclaim the last few pixels the service index was taking. */
.hero__content { padding-bottom: clamp(120px, 20vh, 190px); }
.service-index { bottom: clamp(18px, 3vh, 44px); padding-top: clamp(12px, 2vh, 22px); }

/* --------------------------------------------------------------------------
   PANEL FIT — round two, from measured overflow
   -------------------------------------------------------------------------- */

/* Section headings inside panels used the free-scrolling 64px rhythm, which
   alone accounted for most of the overflow. */
.panel .section h2,
.panel h2            { margin-bottom: clamp(10px, 2vh, 28px); }
.panel .section__label { margin-bottom: clamp(6px, 1.2vh, 18px); }
.panel .reveal-layout { margin-top: clamp(12px, 2.4vh, 32px); }

/* Hero: a 16ch measure keeps the headline to two or three lines instead of
   five, which is what pushed the content block past the panel. */
.hero h1 { max-width: 16ch; }
.hero__content {
  padding-top: calc(var(--header-h) + clamp(20px, 4vh, 56px));
  padding-bottom: clamp(100px, 17vh, 170px);
}
.hero__subhead { margin-top: clamp(10px, 1.8vh, 24px); font-size: clamp(0.9375rem, 1.7vh, 1.25rem); }
.hero__cta     { margin-top: clamp(12px, 2vh, 26px); }
.hero__caption { margin-top: 8px; font-size: clamp(0.75rem, 1.3vh, 0.875rem); }
.hero .label   { font-size: clamp(0.6875rem, 1.3vh, 0.8125rem); }

/* Calculator: the sliders flex, the CTA block stays compact. */
.panel .calc-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.panel #calculator .calculator + .calculator { margin-top: clamp(10px, 2vh, 28px) !important; }
.panel .calc-output__note { font-size: clamp(0.75rem, 1.4vh, 0.9375rem); }
.panel .calc-email { margin-top: clamp(8px, 1.6vh, 18px); }

/* The reveal grid row was auto-sizing to its tallest child, so the steps
   column grew instead of scrolling. Constrain the row explicitly. */
.panel .reveal-layout { grid-template-rows: minmax(0, 1fr); }
.panel .reveal-steps  { max-height: 100%; }

/* Hero: trim the last of the vertical budget. */
.hero__content { padding-bottom: clamp(92px, 14vh, 140px); }

/* --------------------------------------------------------------------------
   PANEL FIT — round three, from element-level measurement
   -------------------------------------------------------------------------- */

/* The sweep's scale(1.12) pushed it past the hero card. Drift only. */
@keyframes light-sweep {
  from { transform: translateX(-12%); opacity: 0.72; }
  50%  { opacity: 1; }
  to   { transform: translateX(26%);  opacity: 0.68; }
}

/* The reveal visual was still position:sticky from the free-scrolling
   layout, so it sized itself and ignored the panel's grid row. */
.panel .reveal-layout {
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.panel .reveal-steps {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel .reveal__visual {
  position: static;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  top: auto;
}

.panel .reveal__still,
.panel .reveal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel .reveal__visual { position: relative; }

/* ==========================================================================
   PROCESS · CALCULATOR · PROMISE · JOURNAL CARDS
   ========================================================================== */

/* --------------------------------------------------------------------------
   PROCESS — the visual is pinned; the four steps snap past it.
   Each step is its own snap panel, so 01 is always reachable and the frame
   never moves. This is the one section that is deliberately taller than a
   viewport, because the pinning is the whole point.
   -------------------------------------------------------------------------- */
.process { position: relative; }

.process__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}

@media (min-width: 900px) {
  .process__inner { grid-template-columns: 1fr 1fr; gap: var(--page-inset); }
}

.process__visual {
  position: sticky;
  top: var(--page-inset);
  height: calc(100svh - (var(--page-inset) * 2));
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  z-index: 1;
}

.process__still,
.process__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-slow) var(--ease);
}

.process__video { opacity: 0; }

/* Steps 3 and 4 are the motion half of the story — cross-fade to the film.
   Gated on .has-motion, which JS adds only once the film can actually play.
   Without it the still simply holds, rather than fading into an empty box. */
.process__visual.has-motion[data-active="3"] .process__still,
.process__visual.has-motion[data-active="4"] .process__still { opacity: 0; }
.process__visual.has-motion[data-active="3"] .process__video,
.process__visual.has-motion[data-active="4"] .process__video { opacity: 1; }

.process__badge {
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 2;
  background: rgba(10, 10, 11, 0.74);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper);
}

.process__step {
  height: calc(100svh - (var(--page-inset) * 2));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vh, 72px) clamp(20px, 3vw, 56px);
  background: var(--ink);
  border-radius: var(--radius-card);
  margin-top: var(--page-inset);
}

.process__step:first-child { margin-top: 0; }

.process__n {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vh, 5rem);
  line-height: 1;
  color: var(--accent);
  letter-spacing: var(--track-display);
  margin: clamp(8px, 2vh, 20px) 0 clamp(4px, 1vh, 12px);
}

.process__step h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vh, 4rem);
  line-height: 0.92;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0 0 clamp(10px, 2vh, 22px);
}

.process__step p {
  font-size: clamp(0.9375rem, 1.9vh, 1.25rem);
  line-height: 1.55;
  color: var(--paper-dim);
  max-width: 46ch;
  margin: 0;
}

/* On narrow screens the pinned frame sits above the steps rather than beside */
@media (max-width: 899px) {
  .process__visual {
    height: 38svh;
    top: var(--page-inset);
    margin-bottom: var(--page-inset);
  }
  .process__step {
    height: calc(62svh - (var(--page-inset) * 2));
    scroll-snap-align: end;
  }
}

/* --------------------------------------------------------------------------
   CALCULATOR — two columns, everything visible, no hidden scroller
   -------------------------------------------------------------------------- */
.calc {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  flex: 1;
  min-height: 0;
  align-content: center;
}

@media (min-width: 860px) { .calc { grid-template-columns: 1fr 1fr; align-items: center; } }

.calc__inputs {
  display: grid;
  gap: clamp(14px, 2.6vh, 30px);
  align-content: center;
}

.calc-group label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: clamp(0.8125rem, 1.6vh, 0.9375rem);
  color: var(--paper);
  margin-bottom: 10px;
}

.calc-group__value {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.4vh, 1.75rem);
  color: var(--accent);
  letter-spacing: var(--track-display);
}

.calc-group input[type="range"] {
  width: 100%;
  appearance: none;
  height: 3px;
  border-radius: 2px;
  background: var(--surface-2);
  outline-offset: 6px;
}

.calc-group input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 1px var(--accent);
}

.calc-group input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border: 3px solid var(--ink);
  border-radius: 50%; background: var(--accent); cursor: pointer;
}

.calc-group--checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.calc-group--checkbox input { width: 20px; height: 20px; accent-color: var(--accent); }
.calc-group--checkbox label { margin: 0; }

.calc__out {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(20px, 3.4vh, 40px);
}

.calc__out-label {
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper-dim);
}

.calc__total {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 7vh, 4.5rem);
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--paper);
  margin: 10px 0 4px;
}

.calc__weeks { font-size: clamp(1rem, 2.2vh, 1.375rem); color: var(--accent); }

.calc__note {
  font-size: clamp(0.8125rem, 1.5vh, 0.9375rem);
  color: var(--paper-dim);
  line-height: 1.55;
  margin: clamp(12px, 2.4vh, 24px) 0 0;
}

.calc__note strong { color: var(--paper); }

.calc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(14px, 2.6vh, 26px);
}

.calc-email { display: flex; gap: 8px; flex: 1; min-width: 220px; }

.calc-email input[type="email"] {
  flex: 1;
  background: var(--ink);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.875rem;
  min-width: 0;
}

.calc-email input::placeholder { color: var(--paper-dim); }

/* --------------------------------------------------------------------------
   PROMISE — replaces the founder portraits
   -------------------------------------------------------------------------- */
.promise {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: 1fr;
  flex: 1;
  min-height: 0;
  align-content: center;
}

@media (min-width: 720px)  { .promise { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .promise { grid-template-columns: repeat(4, 1fr); } }

.promise__item {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(18px, 2.6vh, 34px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.promise__item--lead { background: var(--grad-hero); }

.promise__n {
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: auto;
}

.promise__item--lead .promise__n { color: rgba(255,255,255,0.82); }

.promise__item h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.8vh, 1.875rem);
  line-height: 0.96;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: clamp(14px, 2.4vh, 26px) 0 10px;
}

.promise__item p {
  font-size: clamp(0.8125rem, 1.5vh, 0.9375rem);
  line-height: 1.5;
  color: var(--paper-dim);
  margin: 0;
}

.promise__item--lead p { color: rgba(255,255,255,0.88); }

/* --------------------------------------------------------------------------
   JOURNAL CARDS — they have to read as clickable objects, not paragraphs
   -------------------------------------------------------------------------- */
.journal-strip,
.journal-list {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .journal-strip { grid-template-columns: repeat(3, 1fr); }
  .journal-list  { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) { .journal-list { grid-template-columns: repeat(3, 1fr); } }

.journal-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.6vh, 32px);
  min-height: clamp(190px, 26vh, 280px);
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.journal-card:hover,
.journal-card:focus-visible {
  background: #17171B;
  border-color: var(--accent);
  transform: translateY(-3px);
}

.journal-card__date {
  display: block;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: auto;
}

.journal-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.0625rem, 2.1vh, 1.375rem);
  line-height: 1.25;
  color: var(--paper);
  margin: clamp(14px, 2.2vh, 26px) 0 10px;
  letter-spacing: 0;
  text-transform: none;
}

.journal-card__excerpt {
  font-size: clamp(0.8125rem, 1.5vh, 0.9375rem);
  line-height: 1.5;
  color: var(--paper-dim);
  margin: 0 0 16px;
}

.journal-card__read {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  color: var(--accent);
}

.journal-card__read::after {
  content: "";
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center/11px no-repeat;
  transition: transform var(--dur-base) var(--ease);
}

.journal-card:hover .journal-card__read::after { transform: translateX(3px); }

/* Post navigation — previous / next / index */
.post-nav {
  display: grid;
  gap: 12px;
  margin-top: var(--s-block);
  padding-top: var(--s-block);
  border-top: 1px solid var(--surface-2);
}

@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } }

.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}

.post-nav__link:hover { border-color: var(--accent); background: #17171B; }
.post-nav__link--next { text-align: right; }

.post-nav__dir {
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

.post-nav__title { font-size: 1rem; color: var(--paper); line-height: 1.3; }

.post-nav__all {
  grid-column: 1 / -1;
  text-align: center;
  padding: 14px;
  font-size: 0.875rem;
  color: var(--paper-dim);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-pill);
}

.post-nav__all:hover { color: var(--paper); border-color: var(--accent); }

/* Journal index page */
.journal-page__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 0.92;
  margin: 0 0 12px;
}

.journal-page .section__body { margin-bottom: var(--s-block); }

/* ==========================================================================
   SNAP SCOPING — THE BUG FIX
   `scroll-snap-type` was set on `html`, which every page shares. On About,
   Journal and Contact the only snap target left was the footer, so with
   `mandatory` the browser had exactly one place to go: the bottom. That is
   the "scrolls straight to the end and won't stop" behaviour.
   Snap now applies ONLY to the home page.
   ========================================================================== */

html { scroll-snap-type: none; }

:root:has(body.is-home) {
  scroll-snap-type: y mandatory;
  scroll-padding: var(--page-inset);
}

/* Every snap target is scoped to the home page too, so nothing on an
   interior page can become an accidental snap point. */
body:not(.is-home) .panel,
body:not(.is-home) .hero,
body:not(.is-home) .clients,
body:not(.is-home) .footer,
body:not(.is-home) .process__step {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* Interior pages are ordinary documents: normal scroll, comfortable rhythm. */
body:not(.is-home) {
  scroll-behavior: auto;
}

body:not(.is-home) .section {
  padding-block: clamp(48px, 9vw, 120px);
}

/* Fallback for browsers without :has() — no snap anywhere rather than
   snap in the wrong place. */
@supports not selector(:has(*)) {
  html { scroll-snap-type: none; }
}

/* --------------------------------------------------------------------------
   MOBILE RAIL CARDS
   In a full-height panel the rail items stretched to the panel height, which
   on a phone made them extremely tall and narrow. Give them their intended
   proportion back and centre the rail instead.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .panel .rail {
    flex: 0 1 auto;
    align-items: center;
    grid-auto-columns: min(64vw, 260px);
  }

  .panel .rail__item {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .panel .work.rail { grid-auto-columns: min(82vw, 340px); }
  .panel .work__piece.rail__item { aspect-ratio: 4 / 3; }

  .panel .shot { height: auto; aspect-ratio: 3 / 4; }
  .panel .grid-3 { flex: 0 1 auto; align-items: center; }
}

/* The :has() scoping rule above outranks the earlier plain `html` escape
   hatches, so they have to be restated at matching specificity or snap
   stays on where it must not. */
@media (max-height: 520px) {
  :root:has(body.is-home) { scroll-snap-type: none; }
  body.is-home .panel,
  body.is-home .hero,
  body.is-home .process__step { height: auto; min-height: 0; overflow: visible; }
  body.is-home .process__visual { position: static; height: 46svh; }
  body.is-home .panel .split-head__aside { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  :root:has(body.is-home) { scroll-snap-type: none; scroll-behavior: auto; }
  body.is-home .panel,
  body.is-home .hero,
  body.is-home .process__step { height: auto; overflow: visible; }
  body.is-home .process__visual { position: static; height: 46svh; }
}

/* Journal strip on the home panel: three stacked cards don't fit a phone
   screen, so it becomes a rail like the other card grids. */
@media (max-width: 900px), (max-height: 760px) {
  .panel .journal-strip {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(74vw, 300px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 10px;
    scrollbar-width: none;
    flex: 0 1 auto;
    align-items: stretch;
  }
  .panel .journal-strip::-webkit-scrollbar { display: none; }
  .panel .journal-card { scroll-snap-align: start; min-height: 0; }
}

/* Calculator on a phone: trim the last few pixels. */
@media (max-width: 860px) {
  .panel #calculator .calc { gap: 14px; }
  .panel .calc__out { padding: 16px 18px; }
  .panel .calc__note { margin-top: 10px; }
  .panel .calc__actions { margin-top: 12px; gap: 8px; }
  .panel #calculator .split-head { margin-bottom: 12px; }
}

/* --------------------------------------------------------------------------
   BRAND MARK
   The supplied logo is #111, which is invisible on both the orange hero
   header and the near-black interior headers. Two derived variants:
   `logo-light` (paper wordmark, orange ZZ + dot) for dark surfaces, and
   `logo-mono-light` (everything paper) for the hero, where an orange ZZ
   would disappear into the orange field behind it.
   -------------------------------------------------------------------------- */
.header__logo,
.footer__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.header__logo img {
  height: clamp(22px, 2.4vh, 30px);
  width: auto;
  display: block;
}

.footer__logo img {
  height: 26px;
  width: auto;
  display: block;
}

@media (max-width: 879px) {
  .header__logo img { height: 22px; }
}

/* --------------------------------------------------------------------------
   HERO FILM
   The multiply blend existed to fuse a flat silhouette photo into the orange
   field. A real graded film does not want that — it recolours work that was
   authored deliberately. The film now plays at its own values and simply
   covers the gradient; the gradient remains as the poster-stage backdrop and
   as the fallback when no film is present.
   -------------------------------------------------------------------------- */
.hero__video {
  mix-blend-mode: normal;
  opacity: 1;
  z-index: 0;
}

/* Slightly deepen the scrim now that the film carries its own darkness,
   so the headline keeps its contrast over a bright frame. */
.hero--has-video .hero__scrim {
  background: linear-gradient(to top,
              rgba(10, 10, 11, 0.82) 0%,
              rgba(10, 10, 11, 0.34) 46%,
              rgba(10, 10, 11, 0.06) 78%);
}

/* --------------------------------------------------------------------------
   PLACEHOLDER RETIREMENT
   The bottle-silhouette poster and the CSS light-sweep both existed to stand
   in for a film that did not exist. It exists now, so they are gone. The
   sweep is kept in the stylesheet only as the no-film fallback, and it is
   disabled whenever a film is playing.
   -------------------------------------------------------------------------- */
.hero__sweep { display: none; }
.hero:not(.hero--has-video) .hero__sweep { display: block; }

/* --------------------------------------------------------------------------
   BRAND MARK — SIZE
   The first pass sized the mark like a text logo (22–30px). The wordmark is
   2.3:1, so at that height it reads as a small graphic rather than a brand.
   Roughly doubled, and set to align optically with the CTA pill (48px) and
   the nav baseline rather than just sharing a row with them.
   -------------------------------------------------------------------------- */
.header {
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.header__logo img {
  height: clamp(38px, 5vh, 54px);
  width: auto;
  display: block;
}

.footer__logo img {
  height: clamp(34px, 4vh, 46px);
}

/* The nav sits centred in the row; the mark and the CTA anchor the ends. */
.nav { align-items: center; }

@media (max-width: 879px) {
  .header__logo img { height: clamp(30px, 4.4vh, 40px); }
  .footer__logo img { height: 32px; }
}

/* ==========================================================================
   CLOSER — the image-led call to action
   Replaces the plate device, which rendered as cyan-on-orange because
   `mix-blend-mode: difference` inverts the accent. A photograph carrying
   the mark does the same job without the artefact.
   ========================================================================== */
.closer {
  display: grid;
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
  flex: 1;
  min-height: 0;
  width: 100%;
}

@media (min-width: 900px) {
  .closer { grid-template-columns: 1.05fr 1fr; }
}

.closer__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.closer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.closer__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.closer__body h2 {
  max-width: 16ch;
  margin-bottom: clamp(12px, 2.2vh, 24px);
}

.closer__body .section__body { max-width: 46ch; }

.closer__cta { margin-top: clamp(16px, 3vh, 34px); }

.closer__note {
  margin-top: clamp(14px, 2.4vh, 28px);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* Inside a full-height home panel the image must give way, not push. */
.panel .closer__media { height: 100%; aspect-ratio: auto; }

@media (max-width: 899px) {
  /* Image first, then the ask — as specified. */
  .closer { grid-template-columns: 1fr; }
  .closer__media { aspect-ratio: 4 / 3; height: auto; }
  .panel .closer__media { aspect-ratio: 16 / 10; height: auto; }
  .closer__body h2 { max-width: 100%; }
}

/* ==========================================================================
   ABOUT — portrait-led opening
   ========================================================================== */
.about-hero {
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) clamp(20px, 3vw, 44px) clamp(24px, 4vw, 56px);
}

@media (min-width: 900px) {
  .about-hero { grid-template-columns: 1fr 1fr; }
}

.about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 0.92;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  max-width: 14ch;
  margin: 0 0 clamp(14px, 2vw, 26px);
}

.about-hero__lede {
  color: var(--paper-dim);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  max-width: 46ch;
}

.about-hero__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 3;
}

.about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.04);
}

.about-hero__media figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(10, 10, 11, 0.7);
  backdrop-filter: blur(6px);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
}

/* Pull quote — his line, used as the section break */
.pull { text-align: center; }

.pull__quote {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 4rem);
  line-height: 0.98;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 auto;
  max-width: 20ch;
  border: none;
  padding: 0;
}

.pull__quote::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--accent);
  margin: clamp(20px, 3vw, 36px) auto 0;
}

/* The About portrait arrives already monochrome, with an intentional yellow
   line burnt into it. Applying grayscale here would kill that yellow, so the
   filter is removed for this image specifically. */
.about-hero__media img { filter: none; }

/* The photo carries its own caption line, so the chip sits top-left, clear
   of the burnt-in type at the vertical centre. */
.about-hero__media figcaption { top: 14px; bottom: auto; }

/* ==========================================================================
   FOUNDERS PAIR — two portraits, matched treatment
   Both photographs carry their line burnt into the shirt, so the caption
   below stays to name and function only. Repeating the line as type would
   be the same sentence twice on one card.
   ========================================================================== */
.founders-pair {
  display: grid;
  gap: clamp(16px, 2.4vw, 32px);
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  .founders-pair { grid-template-columns: 1fr 1fr; }
}

.founder { margin: 0; }

.founder__media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 3;
}

.founder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* If the second portrait doesn't exist yet, the frame states that plainly
   rather than showing a broken image or a fake person. */
.founder__media.is-empty::after {
  content: "PORTRAIT TO COME";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  color: var(--paper-dim);
  background: var(--surface);
}

.founder__media.is-empty img { display: none; }

.founder figcaption { padding-top: clamp(14px, 2vw, 22px); }

.founder__role {
  display: block;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.founder figcaption h3 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 0.98;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--paper);
}

.founder figcaption p {
  color: var(--paper-dim);
  font-size: clamp(0.875rem, 1.4vw, 1rem);
  line-height: 1.55;
  margin: 0;
  max-width: 46ch;
}

/* ==========================================================================
   CASE STUDY — one client, the whole engagement
   Replaces the invented-project rail and the stills grid. Every tile is
   existing work, so it costs screenshots rather than production.
   ========================================================================== */
.case {
  display: grid;
  gap: clamp(16px, 2.4vw, 32px);
  flex: 1;
  min-height: 0;
}

@media (min-width: 960px) {
  .case { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
}

.case__figure {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1vw, 14px);
  min-height: 0;
}

.case__tile {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  min-height: 0;
}

.case__tile--wide { grid-column: 1 / -1; }

.case__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case__tile figcaption {
  position: absolute;
  left: 10px;
  bottom: 9px;
  font-size: 0.6875rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(10, 10, 11, 0.74);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: var(--radius);
  z-index: 2;
}

/* Missing tile states its absence rather than showing a broken frame. */
.case__tile.is-empty img { display: none; }
.case__tile.is-empty::after {
  content: "TO COME";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.625rem;
  letter-spacing: var(--track-label);
  color: var(--paper-dim);
  background: var(--ink);
}

.case__result {
  background: var(--ink);
  border-radius: var(--radius-card);
  padding: clamp(20px, 3vh, 38px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.case__result-label {
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper-dim);
}

.case__result-figure {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vh, 4.5rem);
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--accent);
  margin: clamp(8px, 1.6vh, 16px) 0 0;
}

.case__result-figure span {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.6vh, 1.0625rem);
  color: var(--paper-dim);
  letter-spacing: 0;
  margin-left: 6px;
}

.case__result-note {
  font-size: clamp(0.8125rem, 1.5vh, 0.9375rem);
  line-height: 1.55;
  color: var(--paper-dim);
  margin: clamp(10px, 2vh, 22px) 0 0;
}

.case__result-note strong { color: var(--paper); }

.case__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(14px, 2.4vh, 26px);
  align-self: flex-start;
  font-size: 0.875rem;
  color: var(--accent);
}

.case__link::after {
  content: "";
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/11px no-repeat;
  transition: transform var(--dur-base) var(--ease);
}

.case__link:hover::after { transform: translate(2px, -2px); }

/* Clients strip — name over a status line */
.client { flex-direction: column; align-items: flex-start; gap: 3px; }
.client__name { font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 500; color: var(--paper); }
.client__meta { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--paper-dim); text-transform: none; }
.client--link:hover .client__name { color: var(--accent); }

@media (max-width: 959px) {
  .case__figure { grid-template-columns: repeat(2, 1fr); }
  .case__tile--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .case__tile:not(.case__tile--wide) { aspect-ratio: 1; }
  .case__result { padding: 18px 20px; }
}

/* --------------------------------------------------------------------------
   CASE STUDY — FIXES
   Two bugs: the tiles carried the generic `is-placeholder` badge on top of
   their own `is-empty` state, and that badge's orange border collapsed into
   strips because the tiles had no height source once the image was hidden.
   Tiles now define their own proportion at every width.
   -------------------------------------------------------------------------- */
.case__figure {
  grid-template-rows: 1.25fr 1fr;
  align-content: stretch;
}

.case__tile {
  aspect-ratio: auto;      /* the grid rows define height, not the image */
  min-height: 0;
  min-width: 0;
}

/* The badge must never apply here — the tile has its own empty state. */
.case__tile.is-placeholder::after { content: none; }

/* Keep the result column from spilling its copy across the grid. */
.case__result { min-width: 0; overflow: hidden; }
.case__result-note { overflow-wrap: anywhere; }

@media (max-width: 959px) {
  .case__figure { grid-template-rows: auto auto; }
  .case__tile--wide { aspect-ratio: 16 / 9; }
  .case__tile:not(.case__tile--wide) { aspect-ratio: 1; }
}

/* --------------------------------------------------------------------------
   REGISTERS — FIX
   With the photographs removed the cards became short blocks sitting at the
   top of a full-height panel, leaving a dead half-screen underneath. The
   cards now fill the row and centre their content, so the colour does the
   work the images used to.
   -------------------------------------------------------------------------- */
.panel .styles { align-items: stretch; }

.style__top {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.style__badges { margin-bottom: clamp(14px, 3vh, 28px); }

.panel .style h3 { font-size: clamp(1.375rem, 3.4vh, 2.5rem); margin-bottom: 12px; }
.panel .style__top p { font-size: clamp(0.8125rem, 1.6vh, 1rem); }


/* ==========================================================================
   READING PROGRESS RAIL
   A 2px accent bar across the top of the viewport, scaled to how far down
   the document you are. Driven by `animation-timeline: scroll(root block)`,
   so it is a compositor transform with no scroll listener and no per-frame
   main-thread work.

   Sits at z-index 300 — above the header (100) and the nav drawer (200).
   The lightbox is a <dialog>, which renders in the browser's top layer and
   is unaffected by z-index entirely, so it still covers the rail.

   Under full-page snap the bar advances in steps rather than continuously.
   That is correct: it reports document position, and under snap the
   document position genuinely moves one section at a time.
   ========================================================================== */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 300;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes progress-grow { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   REDUCED MOTION
   The rail goes entirely — it is decoration, and a static full-width accent
   bar would read as a UI element that means something.

   `.reveal` and `.reveal__video` are listed by name on purpose. The blanket
   `*, *::before, *::after { animation-duration: 0.01ms !important }` rule
   earlier in this file does NOT reach them: on a scroll timeline, progress
   comes from scroll position and duration is ignored entirely, so a
   scroll-driven animation survives the blanket reset and keeps running for
   a reduced-motion user. Every scroll-driven rule has to be switched off by
   name, at its end state.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }

  .reveal        { animation: none !important; opacity: 1; transform: none; }
  .reveal__video { animation: none !important; opacity: 1; }
}