/* ============ Tokens ============ */
:root {
  --cream: #FFFFFF;
  --cream-2: #F5F5F5;
  --ink: #0A0A0A;
  --ink-soft: #1A1A1A;
  --line: rgba(10,10,10,0.18);
  --muted-dark: rgba(10,10,10,0.5);
  --muted-light: rgba(255,255,255,0.55);
  --accent: #0A0A0A;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--ink);
  color: var(--cream);
  font-family: 'Archivo', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Stop horizontal overflow without breaking sticky positioning.
     overflow-x: hidden on body makes the body a scroll container and breaks
     sticky descendants — `clip` does the same thing without that side effect. */
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }

/* utilities */
.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.grotesque {
  font-family: 'Archivo', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.92;
}
.grotesque-italic {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.015em;
  text-transform: none;
  line-height: 0.92;
}

/* image placeholder — neutral grayscale */
.ph {
  background:
    repeating-linear-gradient(
      135deg,
      #2a2a2a 0 4px,
      #1f1f1f 4px 8px
    );
  position: relative;
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}
.ph--light {
  background:
    repeating-linear-gradient(
      135deg,
      #e2e2de 0 4px,
      #d6d6d2 4px 8px
    );
}
.ph--light::after { color: rgba(0,0,0,0.4); }

/* ============ Frame shell ============
   By default, every frame scrolls naturally so its full content is always
   readable — no clipping. The card-stack visual still works at every
   transition because the next frame paints over the previous one as it
   scrolls up (later DOM = higher in stacking order, plus solid backgrounds).

   .frame--card is a sticky-pinned variant — it locks at the top of viewport
   and waits for the next frame to slide over it. We use this only for the
   hero, which is exactly 100vh by design and never has overflow. */
.frame {
  position: relative;
  width: 100%;
  min-height: 100vh;
}
.frame--card {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.frame--cream { background: var(--cream); color: var(--ink); }
.frame--ink { background: var(--ink); color: var(--cream); }

/* ============ Frame 01 — Hero ============ */
.f01 .f01-photo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #d9d4c6 0%, #c8c2b3 35%, #6f6a5e 65%, #2a2620 100%);
  overflow: hidden;
}
.f01 .f01-photo::after {
  content: "FULL-BLEED PORTRAIT";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
}
.f01 .f01-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.45) 100%);
}
/* When a real hero image is loaded, hide the placeholder caption + use img */
.f01 .f01-photo.has-media { background: #0a0a0a; }
.f01 .f01-photo.has-media::after { content: none; }
.f01 .f01-photo.has-media::before { z-index: 2; }
.f01 .f01-photo img,
.f01 .f01-photo video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.f01 .f01-meta {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.65;
  color: #fff;
  z-index: 3;
}
.f01 .f01-meta--tl { top: 3.2%; left: 2.1%; max-width: 26%; }
.f01 .f01-meta--tr { top: 3.2%; right: 2.1%; max-width: 26%; text-align: right; }
.f01 .f01-meta--ml { top: 39%; left: 2.1%; }
.f01 .f01-meta--mr { top: 39%; right: 2.1%; text-align: right; }

.f01 .f01-title {
  position: absolute;
  left: 2%; right: 2%; bottom: 4%;
  font-size: clamp(34px, 5.4vw, 108px);
  line-height: 0.96;
  color: #fff;
  letter-spacing: -0.02em;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  z-index: 3;
}
.f01 .f01-title .l1,
.f01 .f01-title .l2,
.f01 .f01-title .l3,
.f01 .f01-title .l4 { display: block; }

/* ============ Frame 02 — About ============ */
.f02 { padding: 2.2% 2.1%; }
.f02 .f02-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(9px, 0.7vw, 11px); letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  padding-bottom: 5%;
}
.f02 .f02-meta span:first-child { color: var(--muted-light); }
.f02 .f02-meta span:empty { flex: 1 1 auto; min-width: 0; }
.f02 .f02-body {
  position: relative;
  display: block;
}
.f02 .f02-headline {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: clamp(40px, 7.5vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-transform: uppercase;
  margin-bottom: 5%;
}
.f02 .f02-headline .row { display: block; }

.f02 .f02-article {
  column-count: 3;
  column-gap: 4%;
  column-rule: 1px solid rgba(255,255,255,0.14);
  padding-top: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.55;
  color: var(--cream);
  text-transform: none;
  letter-spacing: 0;
  orphans: 2;
  widows: 2;
}
.f02 .f02-article p {
  margin: 0 0 0.85em 0;
  break-inside: avoid-column;
  text-wrap: pretty;
}
.f02 .f02-article p:last-child { margin-bottom: 0; }

/* ============ Frame 04 — Selected Work ============ */
.f04 {
  background: var(--cream);
  color: var(--ink);
  padding: 2.2% 2.1%;
}
.f04 .f04-title {
  position: relative;
  display: flex; align-items: baseline; gap: 1.5%;
  margin-bottom: 3%;
  white-space: nowrap;
}
.f04 .f04-title .word {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: clamp(40px, 7vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.f04 .f04-title .accent {
  font-family: 'Archivo', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(40px, 7.4vw, 124px);
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 0.92;
  display: inline-block;
}

.f04 .f04-collage {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(14, 1fr);
  column-gap: 1.2%;
  row-gap: 0;
  margin-top: 2%;
  min-height: 78vh;
}

.f04 .f04-cap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.55;
  margin-top: 10px;
  text-align: center;
}
.f04 .f04-cap.note {
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink);
  text-align: left;
}
.f04 .note-row { display: contents; }
.f04 .note-row .note-1 { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: start; }
.f04 .note-row .note-2 { grid-column: 18 / span 6; grid-row: 1 / span 2; align-self: start; }

.f04 .item {
  display: flex; flex-direction: column;
  width: 100%;
}
.f04 .item .ph,
.f04 .item .media-slot {
  background: repeating-linear-gradient(
    135deg,
    #e2e2de 0 4px,
    #d6d6d2 4px 8px
  );
  width: 100%;
  aspect-ratio: 9 / 16;
  position: relative;
  overflow: hidden;
}
.f04 .item .media-slot.has-media {
  background: #000;
}
.f04 .item .media-slot.has-media::after { content: none; }
.f04 .item .media-slot video,
.f04 .item .media-slot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.f04 .item .media-slot video { cursor: pointer; }

.f04 .i1 { grid-column: 1 / span 5;   grid-row: 4 / span 9; }
.f04 .i2 { grid-column: 7 / span 3;   grid-row: 3 / span 6; }
.f04 .i3 { grid-column: 11 / span 4;  grid-row: 6 / span 8; }
.f04 .i4 { grid-column: 15 / span 5;  grid-row: 4 / span 10; }
.f04 .i5 { grid-column: 20 / span 3;  grid-row: 3 / span 6; }
.f04 .i6 { grid-column: 22 / span 3;  grid-row: 8 / span 6; }

/* ============ Shared accent emphasis ============ */
.row .accent-line em,
.accent-line em,
.row em,
em.script {
  font-family: 'Archivo', sans-serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1em;
  line-height: inherit;
  display: inline;
  margin: 0;
}
.row.accent-line em { font-size: 1em; }

/* Copy frames — same 100vh card sizing as base, just with the editorial padding */
.frame.f02,
.frame.f03--copy,
.frame.f05--copy,
.frame.f06,
.frame.f07,
.frame.f08 {
  padding: 2.4% 2.1% 3.2%;
}

/* Reusable meta strip — flex so labels lay out naturally and wrap if needed.
   Empty <span></span> in the middle of the strip is the spacer that pushes
   the right-side labels to the right edge. */
.f03c-meta, .f05c-meta, .f06-meta, .f07-meta, .f08-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(9px, 0.7vw, 11px); letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.9%;
  padding-top: 0.6%;
  opacity: 0.95;
}
.f03c-meta span:first-child,
.f05c-meta span:first-child,
.f07-meta span:first-child { color: var(--muted-light); }
.f06-meta span:first-child,
.f08-meta span:first-child { color: var(--muted-dark); }
.f03c-meta span:empty,
.f05c-meta span:empty,
.f06-meta span:empty,
.f07-meta span:empty,
.f08-meta span:empty { flex: 1 1 auto; min-width: 0; }

/* Reusable big editorial headline — sized so the rest of each section's
   content (lists, pillars, form, etc.) can fit alongside it within 100vh. */
.f03c-headline, .f05c-headline, .f06-headline, .f07-headline, .f08-headline {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: clamp(40px, 7.5vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.f03c-headline .row,
.f05c-headline .row,
.f06-headline .row,
.f07-headline .row,
.f08-headline .row { display: block; }

/* Frame 03 — What I Do */
.f03--copy { background: var(--ink); color: var(--cream); }
.f03--copy .f03c-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 6%;
  margin-top: 5%;
  align-items: end;
}
.f03--copy .f03c-headline { color: var(--cream); }
.f03--copy .f03c-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 22px;
  padding-bottom: 2%;
}
.f03--copy .f03c-list li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 18px;
  align-items: start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.55;
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 16px;
}
.f03--copy .f03c-list .bul {
  font-family: 'Archivo', sans-serif;
  font-size: 12px; letter-spacing: 0.1em;
  color: var(--muted-light);
}
.f03--copy .f03c-foot {
  grid-column: 1 / -1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-light);
  line-height: 1.7;
  margin-top: 6%;
  max-width: 60%;
}

/* Frame 05 — Who I Work With */
.f05--copy { background: var(--ink); color: var(--cream); }
.f05--copy .f05c-body { margin-top: 4%; }
.f05--copy .f05c-headline { color: var(--cream); margin-bottom: 4%; }
.f05--copy .f05c-lede {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.7;
  max-width: 70%;
  margin-bottom: 6%;
}
.f05--copy .f05c-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 2.4%;
}
.f05--copy .f05c-cols .col-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 22px;
}
.f05--copy .f05c-cols ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.f05--copy .f05c-cols li {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cream);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.f05--copy .f05c-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-light);
  line-height: 1.7;
  margin-top: 5%;
  max-width: 70%;
}

/* Frame 06 — Partnerships */
.f06 { background: var(--cream); color: var(--ink); }
.f06 .f06-body { margin-top: 4%; }
.f06 .f06-headline { color: var(--ink); margin-bottom: 4%; }
.f06 .f06-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 3% 0;
  margin-top: 3%;
}
.f06 .f06-pillars .pillar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0 2%;
  border-right: 1px solid var(--line);
}
.f06 .f06-pillars .pillar:last-child { border-right: 0; }
.f06 .f06-pillars .num {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(40px, 5vw, 84px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--muted-dark);
}
.f06 .f06-pillars .lbl {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
}
.f06 .f06-foot { margin-top: 4%; display: grid; grid-template-columns: 1fr 2fr; gap: 6%; }
.f06 .f06-list-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.f06 .f06-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.f06 .f06-list li {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.f06 .f06-kicker {
  grid-column: 1 / -1;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 3%;
  text-align: right;
}

/* Frame 07 — Rates */
.f07 { background: var(--ink); color: var(--cream); }
.f07 .f07-body { margin-top: 4%; }
.f07 .f07-headline { color: var(--cream); margin-bottom: 5%; }
.f07 .f07-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 8%;
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 3%;
}
.f07 .f07-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 22px;
}
.f07 .f07-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.f07 .f07-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: baseline;
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cream);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.f07 .f07-list .dash { color: var(--muted-light); }
.f07 .f07-quote {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.65;
  margin-bottom: 18px;
}
.f07 .f07-turn {
  margin-top: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  gap: 6%;
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 22px;
}
.f07 .f07-turn .t-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.f07 .f07-turn .t-val {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 36px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--cream);
}

/* Frame 08 — Contact */
.f08 { background: var(--cream); color: var(--ink); }
.f08 .f08-body { margin-top: 6%; }
.f08 .f08-lede {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.7;
  max-width: 56%;
  margin-bottom: 4%;
}
.f08 .f08-headline { color: var(--ink); margin-bottom: 6%; }

.f08 .f08-form {
  border-top: 1px solid var(--line);
  padding-top: 2.4%;
  max-width: 1100px;
}
.f08 .form-progress {
  display: flex;
  gap: 16px;
  margin-bottom: 3%;
}
.f08 .step-pill {
  flex: 1;
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dark);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.f08 .step-pill .step-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.f08 .step-pill.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.f08 .step-pill.done {
  border-color: var(--ink);
  color: var(--ink);
}

.f08 .form-step {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 2.6% 0 0;
}
.f08 .form-step[hidden] { display: none; }

.f08 .field {
  display: flex; flex-direction: column;
  gap: 10px;
}
.f08 .field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.f08 .field-label.as-prompt {
  font-size: 12px;
}
.f08 .field input,
.f08 .field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  padding: 14px 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 32px);
  letter-spacing: -0.01em;
  color: var(--ink);
  outline: none;
  text-transform: uppercase;
  resize: vertical;
}
.f08 .field input::placeholder,
.f08 .field textarea::placeholder {
  color: rgba(10,10,10,0.32);
  text-transform: uppercase;
}
.f08 .field textarea {
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.5;
  text-transform: none;
  border: 1px solid var(--line);
  padding: 18px 20px;
}
.f08 .field textarea::placeholder {
  text-transform: none;
}
.f08 .captcha-field input { max-width: 220px; }

.f08 .cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.f08 .cat-chip {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 24px;
  background: transparent;
  border: 1px solid var(--ink);
  cursor: pointer;
  text-align: left;
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1vw, 18px);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease;
}
.f08 .cat-chip .check {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--ink);
  font-size: 12px;
  flex-shrink: 0;
}
.f08 .cat-chip:hover { background: rgba(10,10,10,0.04); }
.f08 .cat-chip.on {
  background: var(--ink);
  color: var(--cream);
}
.f08 .cat-chip.on .check {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

.f08 .form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.f08 .step-counter {
  flex: 1;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--muted-dark);
}
.f08 .btn-next,
.f08 .btn-submit,
.f08 .btn-back {
  background: transparent;
  border: 0;
  padding: 14px 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 20px);
  letter-spacing: 0;
  color: var(--ink);
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid var(--ink);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.f08 .btn-next:hover:not(:disabled),
.f08 .btn-submit:hover:not(:disabled) { transform: translateX(4px); }
.f08 .btn-back:hover { transform: translateX(-4px); }
.f08 .btn-next:disabled,
.f08 .btn-submit:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-bottom-color: rgba(10,10,10,0.3);
}

.f08 .f08-thanks {
  border-top: 1px solid var(--line);
  padding-top: 4%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 800px;
}
.f08 .f08-thanks[hidden] { display: none; }
.f08 .thanks-mark {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 80px;
  line-height: 1;
  color: var(--ink);
}
.f08 .thanks-headline {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 48px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
}
.f08 .thanks-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.f08 .thanks-reset { margin-top: 12px; }

.f08 .f08-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4%;
  margin-top: 8%;
  padding-top: 2%;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.f08 .f08-foot a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
.f08 .f08-foot span:last-child { text-align: right; }

/* Stack */
.stack { display: flex; flex-direction: column; }
.stack .frame { border-bottom: 1px solid var(--line); }
.stack .frame.frame--ink { border-bottom-color: rgba(255,255,255,0.22); }
.stack .frame:last-child { border-bottom: 0; }

/* ============ Mobile / tablet (≤900px) ============
   Disable card stacking — content flows naturally on small screens. */
@media (max-width: 900px) {
  .frame {
    position: relative;
    top: auto;
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .f01 { aspect-ratio: 3 / 4; }
  .f01 .f01-meta--tl,
  .f01 .f01-meta--tr,
  .f01 .f01-meta--ml,
  .f01 .f01-meta--mr { max-width: 44%; font-size: 9px; }
  .f01 .f01-meta--ml { top: auto; bottom: 22%; }
  .f01 .f01-meta--mr { top: auto; bottom: 22%; }
  .f01 .f01-title { font-size: clamp(36px, 11vw, 80px); }

  .f02, .f03--copy, .f05--copy, .f06, .f07, .f08 {
    padding: 8% 5% 10%;
  }

  .f02 .f02-meta,
  .f03c-meta, .f05c-meta, .f06-meta, .f07-meta, .f08-meta {
    grid-template-columns: 1fr;
    gap: 6px;
    white-space: normal;
  }

  .f02 .f02-headline,
  .f03c-headline, .f05c-headline,
  .f06-headline, .f07-headline, .f08-headline {
    font-size: clamp(40px, 13vw, 80px);
    margin-bottom: 8%;
  }

  .f02 .f02-article { column-count: 1; }

  .f03--copy .f03c-body { grid-template-columns: 1fr; gap: 8%; }
  .f03--copy .f03c-foot { max-width: 100%; }

  .f04 .f04-collage {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    grid-template-columns: none;
    grid-template-rows: none;
    min-height: 0;
    gap: 16px;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .f04 .note-row { display: block; margin-bottom: 24px; }
  .f04 .note-row .note-1,
  .f04 .note-row .note-2 {
    grid-column: auto; grid-row: auto;
    display: block;
    margin-bottom: 12px;
    text-align: left;
  }
  .f04 .item {
    flex: 0 0 70%;
    grid-column: auto !important;
    grid-row: auto !important;
    scroll-snap-align: start;
  }

  .f05--copy .f05c-cols { grid-template-columns: 1fr; gap: 8%; }
  .f05--copy .f05c-lede,
  .f05--copy .f05c-foot { max-width: 100%; }

  .f06 .f06-pillars { grid-template-columns: 1fr; gap: 24px; }
  .f06 .f06-pillars .pillar { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 16px; }
  .f06 .f06-pillars .pillar:last-child { border-bottom: 0; }
  .f06 .f06-foot { grid-template-columns: 1fr; gap: 16px; }
  .f06 .f06-kicker { text-align: left; }

  .f07 .f07-grid { grid-template-columns: 1fr; gap: 8%; }
  .f07 .f07-turn { grid-template-columns: 1fr; gap: 12px; }

  .f08 .f08-lede { max-width: 100%; }
  .f08 .cat-grid { grid-template-columns: 1fr; }
  .f08 .form-progress { gap: 6px; }
  .f08 .step-pill { padding: 10px 12px; font-size: 9px; }
  .f08 .step-pill .step-lbl { display: none; }
  .f08 .form-actions { flex-wrap: wrap; }
  .f08 .f08-foot { grid-template-columns: 1fr; gap: 8px; }
  .f08 .f08-foot span:last-child { text-align: left; }
}