main[data-process-page] {
  --process-gap: var(--space-5);
  overflow: hidden;
}

[data-process-page] .process-container {
  width: min(100% - 3rem, var(--container-max));
  margin-inline: auto;
}

[data-process-page] .process-section {
  padding-block: var(--section-space);
}

[data-process-page] .process-section--soft {
  border-block: 1px solid color-mix(in srgb, var(--color-soft-line) 72%, transparent);
  background: color-mix(in srgb, var(--color-white-ink) 38%, transparent);
}

[data-process-page] .process-section--torn {
  position: relative;
  background: color-mix(in srgb, var(--color-butter) 26%, var(--color-paper));
}

[data-process-page] .process-section--torn::before,
[data-process-page] .process-section--torn::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 10px;
  background: var(--color-paper);
  content: "";
  clip-path: polygon(0 35%, 7% 72%, 15% 30%, 25% 66%, 35% 26%, 45% 68%, 55% 33%, 65% 70%, 76% 29%, 86% 66%, 100% 35%, 100% 0, 0 0);
}

[data-process-page] .process-section--torn::before {
  top: 0;
}

[data-process-page] .process-section--torn::after {
  bottom: 0;
  transform: rotate(180deg);
}

[data-process-page] .process-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

[data-process-page] .process-intro > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-intro--six {
  max-width: 62ch;
}

[data-process-page] .process-intro--wide {
  max-width: 66ch;
}

[data-process-page] .process-intro__lead {
  font-size: var(--text-lead);
  line-height: var(--line-lead);
}

[data-process-page] .process-hero {
  padding-block: var(--space-9) var(--space-8);
}

[data-process-page] .process-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: 8.333%;
  align-items: center;
}

[data-process-page] .process-hero__copy,
[data-process-page] .process-hero__collage {
  min-width: 0;
}

[data-process-page] .process-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

[data-process-page] .process-hero__copy > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-hero h1 {
  max-width: 13ch;
}

[data-process-page] .process-hero__lead {
  max-width: 58ch;
  font-size: var(--text-lead);
  line-height: var(--line-lead);
}

[data-process-page] .process-hero__actions {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

[data-process-page] .process-hero__actions > * {
  min-width: 0;
}

[data-process-page] .process-hero__collage {
  display: flex;
  width: 100%;
  max-width: 27.5rem;
  flex-direction: column;
  justify-self: center;
  gap: var(--space-3);
}

[data-process-page] .process-sticky {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  box-shadow: var(--shadow-paper);
}

[data-process-page] .process-sticky::before {
  position: absolute;
  top: -9px;
  left: 17%;
  width: 34%;
  height: 18px;
  background: color-mix(in srgb, var(--color-butter) 72%, transparent);
  content: "";
  transform: rotate(-3deg);
}

[data-process-page] .process-sticky:nth-child(2) {
  margin-left: var(--space-5);
  background: var(--color-butter);
  transform: rotate(1.2deg);
}

[data-process-page] .process-sticky:nth-child(3) {
  margin-right: var(--space-4);
  transform: rotate(-1deg);
}

[data-process-page] .process-sticky strong,
[data-process-page] .process-sticky span {
  position: relative;
  min-width: 0;
}

[data-process-page] .process-sticky strong {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  line-height: 1.2;
}

[data-process-page] .process-sticky span {
  font-size: var(--text-sm);
  line-height: var(--line-sm);
}

[data-process-page] .process-annotation {
  display: inline-block;
  margin-left: var(--space-5);
  color: var(--color-blue-ink-dark);
  font-family: var(--font-hand);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1;
  transform: rotate(-4deg);
}

[data-process-page] .process-overview__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

[data-process-page] .process-overview__grid > * {
  min-width: 0;
}

[data-process-page] .process-step-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
}

[data-process-page] .process-step-card > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-step-card__number {
  color: var(--color-graphite);
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 650;
  line-height: 0.9;
}

[data-process-page] .process-step-card h3 {
  font-size: var(--text-h4);
}

[data-process-page] .process-step-card__line {
  width: 42px;
  height: 3px;
  background: var(--color-pencil-blue);
}

[data-process-page] .process-mini-note {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-soft-line);
  background: var(--color-butter);
  font-family: var(--font-hand);
  font-size: 1.1rem;
  line-height: 1.1;
  transform: rotate(3deg);
}

[data-process-page] .process-brief-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: 8.333%;
  align-items: center;
  margin-top: var(--space-7);
}

[data-process-page] .process-brief-layout > * {
  min-width: 0;
}

[data-process-page] .process-copy-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

[data-process-page] .process-copy-stack > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-copy-stack--brief {
  max-width: 64ch;
}

[data-process-page] .process-keywords {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-2);
}

[data-process-page] .process-keywords > * {
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border-bottom: 2px solid var(--color-pencil-blue);
  font-size: var(--text-sm);
  font-weight: 750;
}

[data-process-page] .process-photo {
  width: 100%;
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-photo .photo-frame {
  width: 100%;
  margin: 0;
}

[data-process-page] .process-photo--brief .photo-frame {
  transform: rotate(1.2deg);
}

[data-process-page] .process-photo--site .photo-frame {
  transform: rotate(-1.2deg);
}

[data-process-page] .process-photo--closing .photo-frame {
  transform: rotate(1deg);
}

[data-process-page] .process-photo img {
  width: 100%;
  height: auto;
}

[data-process-page] .process-photo--brief img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 45%;
}

[data-process-page] .process-photo--site img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 52% 48%;
}

[data-process-page] .process-photo--closing img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 50%;
}

[data-process-page] .process-brief-ribbon {
  display: flex;
  max-width: 48ch;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 3px solid var(--color-graphite);
  background: color-mix(in srgb, var(--color-white-ink) 72%, var(--color-paper));
}

[data-process-page] .process-brief-ribbon > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-practical-note {
  display: flex;
  width: min(100%, 40rem);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-soft-line) 72%, var(--color-graphite));
  border-radius: var(--radius-sm);
  background: var(--color-butter);
  box-shadow: var(--shadow-paper);
}

[data-process-page] .process-practical-note > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-practical-note__lines {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  font-weight: 750;
}

[data-process-page] .process-practical-note__lines span {
  min-width: 0;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid color-mix(in srgb, var(--color-graphite) 24%, transparent);
}

[data-process-page] .process-concept-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 16.667%;
  margin-top: var(--space-7);
}

[data-process-page] .process-concept-grid > * {
  min-width: 0;
}

[data-process-page] .process-concept-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
}

[data-process-page] .process-concept-card:nth-child(2) {
  margin-top: var(--space-3);
}

[data-process-page] .process-concept-card > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-concept-card h3 {
  max-width: 23ch;
}

[data-process-page] .process-detail-lines {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

[data-process-page] .process-detail-lines > * {
  min-width: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-soft-line);
}

[data-process-page] .process-detail-lines strong {
  color: var(--color-blue-ink-dark);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-process-page] .process-disclaimer {
  display: flex;
  width: min(100%, 47rem);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: var(--border-graphite);
  border-radius: var(--radius-sm);
  background: var(--color-butter);
}

[data-process-page] .process-disclaimer > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-prep-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

[data-process-page] .process-prep-grid > * {
  min-width: 0;
}

[data-process-page] .process-prep-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-top: 2px solid var(--color-graphite);
}

[data-process-page] .process-prep-card > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-prep-card__blue-line {
  width: 56px;
  height: 3px;
  background: var(--color-pencil-blue);
}

[data-process-page] .process-prep-card__annotation {
  margin-top: auto;
  color: var(--color-blue-ink-dark);
  font-family: var(--font-hand);
  font-size: 1.45rem;
  line-height: 1;
}

[data-process-page] .process-summary-panel {
  display: flex;
  width: min(100%, 42.25rem);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-7) auto 0;
  padding: var(--space-5);
  border: var(--border-graphite);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
}

[data-process-page] .process-summary-panel > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-site-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: 8.333%;
  align-items: center;
  margin-top: var(--space-7);
}

[data-process-page] .process-site-layout > * {
  min-width: 0;
}

[data-process-page] .process-site-copy {
  display: flex;
  max-width: 58ch;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

[data-process-page] .process-site-copy > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-site-divider {
  width: 100%;
  height: 1px;
  background: var(--color-soft-line);
}

[data-process-page] .process-site-quote {
  max-width: 48ch;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-pencil-blue);
  font-family: var(--font-heading);
  font-size: var(--text-lead);
  line-height: var(--line-lead);
}

[data-process-page] .process-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

[data-process-page] .process-role-grid > * {
  min-width: 0;
}

[data-process-page] .process-role-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
}

[data-process-page] .process-role-card > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-role-card__arrow {
  color: var(--color-blue-ink-dark);
  font-family: var(--font-hand);
  font-size: 1.8rem;
  line-height: 1;
}

[data-process-page] .process-role-card__highlight {
  padding: var(--space-2);
  background: var(--color-butter);
  font-weight: 700;
}

[data-process-page] .process-decision-note {
  display: flex;
  width: min(100%, 47rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-butter);
}

[data-process-page] .process-decision-note > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-faq-layout {
  display: flex;
  width: min(100%, 47rem);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

[data-process-page] .process-faq-layout > * {
  min-width: 0;
}

[data-process-page] .process-faq-item {
  border: var(--border-soft);
  background: var(--color-paper);
}

[data-process-page] .process-faq-button {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-graphite);
  font-weight: 750;
  line-height: var(--line-sm);
  text-align: left;
}

[data-process-page] .process-faq-button > * {
  min-width: 0;
}

[data-process-page] .process-faq-symbol {
  display: grid;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border: 1px solid var(--color-graphite);
  font-size: 1.2rem;
  line-height: 1;
}

[data-process-page] .process-faq-item.is-open .process-faq-symbol {
  background: var(--color-butter);
}

[data-process-page] .process-faq-panel {
  padding: 0 var(--space-4) var(--space-4);
}

[data-process-page] .process-faq-panel > :last-child {
  margin-bottom: 0;
}

[data-process-page] .process-faq-links {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
}

[data-process-page] .process-faq-links > * {
  min-width: 0;
}

[data-process-page] .process-closing-layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: 8.333%;
  align-items: center;
}

[data-process-page] .process-closing-layout > * {
  min-width: 0;
}

[data-process-page] .process-closing-copy {
  display: flex;
  max-width: 52ch;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

[data-process-page] .process-closing-copy > * {
  min-width: 0;
  margin: 0;
}

[data-process-page] .process-closing-copy .button-primary {
  margin-top: var(--space-2);
}

[data-process-page] .process-closing-note {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-3);
}

[data-process-page] .process-closing-note > * {
  min-width: 0;
}

[data-process-page] .process-closing-note__arrow {
  color: var(--color-blue-ink-dark);
  font-family: var(--font-hand);
  font-size: 2rem;
  line-height: 1;
  transform: rotate(18deg);
}

@media (max-width: 56.24rem) {
  [data-process-page] .process-hero__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
  }

  [data-process-page] .process-hero__collage {
    justify-self: start;
  }

  [data-process-page] .process-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 56.25rem) {
  [data-process-page] .process-prep-grid,
  [data-process-page] .process-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-process-page] .process-prep-grid > :nth-child(3),
  [data-process-page] .process-role-grid > :nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 51.24rem) {
  [data-process-page] .process-brief-layout,
  [data-process-page] .process-site-layout {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
  }

  [data-process-page] .process-photo {
    max-width: 38.75rem;
  }

  [data-process-page] .process-concept-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
  }

  [data-process-page] .process-concept-card:nth-child(2) {
    margin-top: 0;
  }
}

@media (max-width: 49.99rem) {
  [data-process-page] .process-closing-layout {
    grid-template-columns: 1fr;
    row-gap: var(--space-6);
  }

  [data-process-page] .process-closing-layout .process-photo {
    max-width: 42.5rem;
  }
}

@media (max-width: 47.99rem) {
  [data-process-page] .process-container {
    width: min(100% - 2.5rem, var(--container-max));
  }

  [data-process-page] .process-section {
    padding-block: var(--space-7);
  }

  [data-process-page] .process-hero {
    padding-block: var(--space-7) var(--space-6);
  }

  [data-process-page] .process-hero h1 {
    font-size: clamp(2.75rem, 11vw, 3.5rem);
  }

  [data-process-page] .process-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  [data-process-page] .process-hero__actions > * {
    width: 100%;
  }

  [data-process-page] .process-overview__grid,
  [data-process-page] .process-prep-grid,
  [data-process-page] .process-role-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  [data-process-page] .process-prep-grid > :nth-child(3),
  [data-process-page] .process-role-grid > :nth-child(3) {
    grid-column: auto;
  }

  [data-process-page] .process-step-card,
  [data-process-page] .process-concept-card,
  [data-process-page] .process-role-card,
  [data-process-page] .process-prep-card {
    padding: var(--space-4);
  }

  [data-process-page] .process-concept-card h3 {
    max-width: none;
  }

  [data-process-page] .process-brief-ribbon,
  [data-process-page] .process-practical-note,
  [data-process-page] .process-disclaimer,
  [data-process-page] .process-summary-panel,
  [data-process-page] .process-decision-note,
  [data-process-page] .process-faq-layout {
    width: 100%;
  }

  [data-process-page] .process-summary-panel {
    margin-top: var(--space-6);
  }

  [data-process-page] .process-faq-links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  [data-process-page] .process-faq-links a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
  }
}

@media (max-width: 26.24rem) {
  [data-process-page] .process-container {
    width: min(100% - 2rem, var(--container-max));
  }

  [data-process-page] .process-sticky:nth-child(2) {
    margin-left: var(--space-3);
  }

  [data-process-page] .process-sticky:nth-child(3) {
    margin-right: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-process-page] .process-sticky,
  [data-process-page] .process-photo--brief .photo-frame,
  [data-process-page] .process-photo--site .photo-frame,
  [data-process-page] .process-photo--closing .photo-frame,
  [data-process-page] .process-annotation,
  [data-process-page] .process-closing-note__arrow {
    transform: none;
  }
}